Conversation
- Updated the overall structure of the SubAgentPage component for better readability and maintainability. - Introduced a new dashboard layout with improved header and action buttons. - Replaced the old settings card with a more visually appealing setting card design. - Enhanced the agent list section with a more user-friendly display and added empty state handling. - Implemented unsaved changes notification and confirmation dialogs for better user interaction. - Refactored code for better clarity and organization, including the use of computed properties for state management.
dosubot
bot
added
the
size:XXL
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
dosubot
bot
added
the
area:webui
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements a significant UI overhaul for the dashboard, introducing a standardized layout system via the new dashboard-shell.css. The Cron Job and SubAgent pages have been refactored to use this system, with the SubAgent page also gaining unsaved changes detection and navigation guards. Additionally, the Conversation page was updated to consolidate session details into a single "UMO" column with toggleable display modes and copy functionality. Feedback identifies a regression in the Cron Job page where the switch to a custom table removed interactive sorting and suggests including several calculated but unused statistics in the new overview cards.
| <div v-else class="task-table-wrap"> | ||
| <table class="task-table"> | ||
| <colgroup> | ||
| <col class="col-name" /> | ||
| <col class="col-type" /> | ||
| <col class="col-cron" /> | ||
| <col class="col-session" /> | ||
| <col class="col-next-run" /> | ||
| <col class="col-last-run" /> | ||
| <col class="col-actions" /> | ||
| </colgroup> | ||
| <thead> | ||
| <tr> | ||
| <th>{{ tm('table.headers.name') }}</th> | ||
| <th>{{ tm('table.headers.type') }}</th> | ||
| <th>{{ tm('table.headers.cron') }}</th> | ||
| <th>{{ tm('table.headers.session') }}</th> | ||
| <th>{{ tm('table.headers.nextRun') }}</th> | ||
| <th>{{ tm('table.headers.lastRun') }}</th> | ||
| <th class="actions-col">{{ tm('table.headers.actions') }}</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="item in sortedJobs" :key="item.job_id"> | ||
| <td class="name-col"> | ||
| <div class="task-name">{{ item.name || tm('table.notAvailable') }}</div> | ||
| <div class="task-subline">{{ item.description || item.job_id }}</div> | ||
| </td> | ||
| <td> | ||
| <v-chip size="small" :color="item.run_once ? 'orange' : 'primary'" variant="tonal"> | ||
| {{ jobTypeLabel(item) }} | ||
| </v-chip> | ||
| </td> | ||
| <td> | ||
| <div class="task-text">{{ scheduleLabel(item) }}</div> | ||
| <div class="task-subline">{{ scheduleMeta(item) }}</div> | ||
| </td> | ||
| <td> | ||
| <div class="task-session">{{ item.session || tm('table.notAvailable') }}</div> | ||
| </td> | ||
| <td> | ||
| <div class="task-text">{{ formatTime(item.next_run_time) }}</div> | ||
| </td> | ||
| <td> | ||
| <div class="task-text">{{ formatTime(item.last_run_at) }}</div> | ||
| </td> | ||
| <td class="actions-col"> | ||
| <div class="table-actions"> | ||
| <v-switch | ||
| v-model="item.enabled" | ||
| inset | ||
| density="compact" | ||
| hide-details | ||
| color="primary" | ||
| class="mt-0" | ||
| @change="toggleJob(item)" | ||
| /> | ||
| <v-btn size="small" variant="text" color="error" @click="deleteJob(item)"> | ||
| {{ tm('actions.delete') }} | ||
| </v-btn> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
The replacement of v-data-table with a custom <table> has led to a regression in functionality. The previous implementation allowed users to sort data by clicking on column headers, but this feature is now missing. The current implementation provides a fixed sorting order through the sortedJobs computed property.
While the new table aligns with the updated UI design, losing interactive sorting diminishes user experience.
Consider either:
- Re-implementing interactive sorting for the new table.
- Styling the
v-data-tablecomponent to match the new design, thereby retaining its built-in features like sorting and filtering.v-data-tableis highly customizable via slots and CSS.
| const overviewCards = computed(() => [ | ||
| { | ||
| label: tm('overview.totalTasks'), | ||
| value: String(jobs.value.length), | ||
| note: tm('overview.totalTasksNote'), | ||
| icon: 'mdi-calendar-multiple' | ||
| }, | ||
| { | ||
| label: tm('overview.enabledTasks'), | ||
| value: String(enabledJobsCount.value), | ||
| note: tm('overview.enabledTasksNote'), | ||
| icon: 'mdi-check-circle-outline' | ||
| } | ||
| ]) |
There was a problem hiding this comment.
The new overview cards are a great enhancement to the UI. However, it seems that some planned statistics are not being displayed. The i18n files include translations for "One-off Tasks", "Recurring Tasks", and "Proactive Platforms", and the script computes runOnceCount and recurringCount, but these are not used in the overviewCards.
Displaying these additional stats would provide a more complete overview. For instance, you could add cards for one-off tasks and proactive platforms. The note for the one-off tasks card could also display the count of recurring tasks as a complementary statistic.
Here is a suggestion to implement four cards:
Note that the page currently overrides the overview grid to have 2 columns. You may want to adjust this to repeat(4, minmax(0, 1fr)) or let it wrap to accommodate the additional cards.
const overviewCards = computed(() => [
{
label: tm('overview.totalTasks'),
value: String(jobs.value.length),
note: tm('overview.totalTasksNote'),
icon: 'mdi-calendar-multiple'
},
{
label: tm('overview.enabledTasks'),
value: String(enabledJobsCount.value),
note: tm('overview.enabledTasksNote'),
icon: 'mdi-check-circle-outline'
},
{
label: tm('overview.oneOffTasks'),
value: String(runOnceCount.value),
note: tm('overview.recurringTasksNote', { count: recurringCount.value }),
icon: 'mdi-calendar-clock-outline'
},
{
label: tm('overview.proactivePlatforms'),
value: String(proactivePlatforms.value.length),
note: tm('overview.proactivePlatformsNote'),
icon: 'mdi-send-clock-outline'
}
])
1 participant
Modifications / 改动点
Screenshots or Test Results / 运行截图或测试结果
Checklist / 检查清单
😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
/ 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。
👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
/ 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。
🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in
requirements.txtandpyproject.toml./ 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到
requirements.txt和pyproject.toml文件相应位置。😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
Revamp several dashboard views with a new shared shell layout, improve responsiveness and text handling, and add quality-of-life controls for subagents, scheduled tasks, and conversations.
New Features:
Bug Fixes:
Enhancements: