aac090d0c3
Add a Command Center live agent activity log with historical navigation. - Stream and paginate organization-wide agent activity with timeline filters. - Link activity rows to agent details and task views while reusing feed presentation. - Add localized copy, documentation, a minor changeset, and coverage for live and scroll-back behavior. Files changed: .changeset/fn-8866-agent-activity-surfaces.md | 7 + docs/dashboard-guide.md | 1 + packages/dashboard/app/App.tsx | 12 ++ packages/dashboard/app/components/ActivityFeed.tsx | 77 ++++---- packages/dashboard/app/components/AgentsView.tsx | 13 +- .../__tests__/AgentsView.focus-agent.test.tsx | 59 ++++++ .../command-center/AgentActivityPanel.css | 98 +++++++++ .../command-center/AgentActivityPanel.tsx | 99 ++++++++++ .../components/command-center/CommandCenter.tsx | 9 + .../__tests__/AgentActivityPanel.mobile.test.ts | 15 ++ .../AgentActivityPanel.sse-integration.test.tsx | 96 +++++++++ .../__tests__/AgentActivityPanel.test.tsx | 121 ++++++++++++ .../__tests__/CommandCenter.test.tsx | 27 ++- .../__tests__/agentActivityCursor.test.ts | 47 +++++ .../__tests__/useAgentActivity.test.tsx | 14 ++ .../command-center/agentActivityCursor.ts | 75 +++++++ .../command-center/agentActivityPresentation.tsx | 8 + .../components/command-center/useAgentActivity.ts | 218 +++++++++++++++++++++ .../app/components/dashboard/MainContent.tsx | 19 ++ .../MainContent.agent-activity-navigation.test.tsx | 127 ++++++++++++ .../dashboard/app/components/dashboard/types.ts | 3 + packages/i18n/locales/en/app.json | 30 ++- packages/i18n/locales/es/app.json | 30 ++- packages/i18n/locales/fr/app.json | 30 ++- packages/i18n/locales/ko/app.json | 30 ++- packages/i18n/locales/pt-BR/app.json | 30 ++- packages/i18n/locales/zh-CN/app.json | 30 ++- packages/i18n/locales/zh-TW/app.json | 30 ++- 28 files changed, 1312 insertions(+), 43 deletions(-) Fusion-Task-Id: FN-8866 Fusion-Task-Lineage: 817ae76e-52c6-4221-8642-df757e773627 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
99 lines
2.0 KiB
CSS
99 lines
2.0 KiB
CSS
/*
|
|
FNXC:CommandCenterAgentActivity 2026-08-10-01:54:
|
|
The activity panel keeps live and timeline controls touch-usable at desktop and mobile widths with existing design tokens. Timeline rows are manual windows, so this stylesheet deliberately adds no nested scroll owner.
|
|
*/
|
|
.cc-agent-activity {
|
|
display: grid;
|
|
gap: var(--space-3);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.cc-agent-activity-mode,
|
|
.cc-agent-activity-filters,
|
|
.cc-agent-activity-target {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.cc-agent-activity-filters {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cc-agent-activity-filters .input {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.cc-agent-activity-range-note,
|
|
.cc-agent-activity-end,
|
|
.cc-agent-activity-copy small {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.cc-agent-activity-list {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.cc-agent-activity-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-inline-size: 0;
|
|
padding: var(--space-2);
|
|
border: 0;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: inherit;
|
|
text-align: left;
|
|
}
|
|
|
|
button.cc-agent-activity-row {
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
button.cc-agent-activity-row:hover,
|
|
button.cc-agent-activity-row:focus-visible {
|
|
background: color-mix(in srgb, var(--surface-2) 80%, transparent);
|
|
}
|
|
|
|
.cc-agent-activity-copy {
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
min-inline-size: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.cc-agent-activity-target .cc-agent-activity-row {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cc-agent-activity-mode,
|
|
.cc-agent-activity-filters,
|
|
.cc-agent-activity-target {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cc-agent-activity-mode .btn,
|
|
.cc-agent-activity-filters .input,
|
|
.cc-agent-activity-target .btn {
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.cc-agent-activity-row {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 480px) and (max-width: 768px) {
|
|
.cc-agent-activity {
|
|
gap: var(--space-2);
|
|
}
|
|
}
|