FN-6716: raise daily activity line chart
Reorders the Command Center overview charts so the richer daily activity line appears higher in the grid. - Render the daily activity multi-series line card before the sparkline trend card while preserving existing data gates. - Add a regression assertion for the overview chart ordering and empty-state absence. - Update dashboard documentation and align the mailbox modal font-size expectation with the current tokenized CSS. Files changed: docs/dashboard-guide.md | 2 +- .../app/components/__tests__/MailboxModal.test.tsx | 2 +- .../components/command-center/CommandCenter.tsx | 28 ++++++++++++---------- .../__tests__/CommandCenter.test.tsx | 9 +++++++ 4 files changed, 27 insertions(+), 14 deletions(-) Fusion-Task-Id: FN-6716 Fusion-Task-Lineage: 0424f561-65f7-475a-a213-b12994c599c7
This commit is contained in:
gsxdsm
@@ -663,7 +663,7 @@ Navigation:
|
||||
|
||||
Features:
|
||||
- Global date-range picker in the header scopes the analytics tabs; **Mission Control** remains live rather than historical.
|
||||
- **Overview** summarizes token usage/cost, autonomy, active nodes, agent runs, tasks done, model breadth, and real open signals, and includes the SDLC throughput funnel for the selected range. Its token total and Live activity snapshot token metric refresh on a bounded live cadence and animate number changes while preserving reduced-motion preferences. The Live activity snapshot also shows the current board-state count for tasks in progress, independent of the selected analytics date range. Overview includes a graph-rich software-factory snapshot with the existing tokens-by-model bar, tool-category bar, daily activity sparkline, plus real recharts token-share pie and daily activity multi-series line graphs. These reuse the already-loaded tokens, tools, activity, and signals analytics; the signals count comes from `/api/command-center/signals` and renders unavailable (`—`) while the incidents-backed response is loading or unavailable. The chart reveal/glow accents are decorative and disabled when reduced-motion preferences are active. The SDLC completion rate is shown as a radial gauge and is calculated as cohort conversion from in-range triage entrants, so the rate is capped at 100% even when older tasks finish during the range.
|
||||
- **Overview** summarizes token usage/cost, autonomy, active nodes, agent runs, tasks done, model breadth, and real open signals, and includes the SDLC throughput funnel for the selected range. Its token total and Live activity snapshot token metric refresh on a bounded live cadence and animate number changes while preserving reduced-motion preferences. The Live activity snapshot also shows the current board-state count for tasks in progress, independent of the selected analytics date range. Overview includes a graph-rich software-factory snapshot with the existing tokens-by-model bar, tool-category bar, real recharts token-share pie, and the daily activity multi-series line chart placed before the daily activity sparkline/trend so the richer line graph sits higher in the chart grid. These reuse the already-loaded tokens, tools, activity, and signals analytics; the signals count comes from `/api/command-center/signals` and renders unavailable (`—`) while the incidents-backed response is loading or unavailable. The chart reveal/glow accents are decorative and disabled when reduced-motion preferences are active. The SDLC completion rate is shown as a radial gauge and is calculated as cohort conversion from in-range triage entrants, so the rate is capped at 100% even when older tasks finish during the range.
|
||||
- **Tokens** breaks down token totals, estimated cost, tasks, and per-model usage. Per-model and per-provider breakdowns use the task's analytics-only actually-used model snapshot when available, so usage from settings-resolved runs appears under the real runtime model instead of `(unknown)` without changing future model resolution; estimated cost uses the same snapshot-first, legacy-fallback model identity so those resolved runs price normally when the model is in the pricing table. It includes the existing token-usage-over-time chart, an additive recharts multi-series line graph, and a token-share pie backed by the same grouped token analytics; use the granularity control to switch the time-series request between hourly, daily, and weekly buckets. The token total and charts poll on a bounded cadence, keep the previous data visible during refresh, animate decorative count/bar transitions, and disable those animations for reduced-motion users.
|
||||
- **Tools** shows autonomy ratio, tool-call volume, intervention counts, sessions, and tool categories. The area keeps the existing category bar and adds a recharts category-share pie from `ToolAnalytics.byCategory`. There is intentionally no tools line chart yet because `ToolAnalytics` does not expose a per-day tool trend; the dashboard does not fabricate one or call a new endpoint.
|
||||
- **Activity** tracks sessions, messages, active nodes, active agents, agent heartbeat runs, and stickiness. Agent-run sheets show total, active, completed, and failed runs for the selected range, and the Agent runs/day sparkline trends runs by `agentRuns.startedAt`. The area keeps the existing live animated line charts for messages/day, active agents/day, active nodes/day, and combined throughput/day (`messages + active agents + active nodes`), and adds a recharts multi-series line graph for messages, active agents, and agent runs plus an agent-run outcome pie from the existing `agentRuns` split. These charts reuse the existing activity analytics endpoint, refresh on a bounded 15-second cadence while mounted, keep the previous data visible during refreshes, and disable decorative draw-on motion for reduced-motion users.
|
||||
|
||||
@@ -1180,7 +1180,7 @@ describe("MailboxModal", () => {
|
||||
expect(mailboxMobileSection).toContain("display: none;");
|
||||
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-tab");
|
||||
expect(mailboxMobileSection).toContain("padding: var(--space-sm) var(--space-md);");
|
||||
expect(mailboxMobileSection).toContain("font-size: 0.8rem;");
|
||||
expect(mailboxMobileSection).toContain("font-size: var(--font-size-xs, 0.8rem);");
|
||||
expect(mailboxMobileSection).toContain("max-height: calc(100dvh - var(--header-height) - var(--space-2xl) - var(--space-xl));");
|
||||
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-message-detail-header");
|
||||
expect(mailboxMobileSection).toContain("flex-direction: column;");
|
||||
|
||||
@@ -348,18 +348,10 @@ function OverviewTab({ range }: { range: DateRange }) {
|
||||
<Bar data={toolCategoryData} ariaLabel={t("commandCenter.overview.toolCategories", "Tool categories")} />
|
||||
</div>
|
||||
) : null}
|
||||
{dailyActivityValues.length > 0 ? (
|
||||
<div className="card cc-overview-chart-card cc-overview-chart-card--trend" data-testid="command-center-overview-chart-activity">
|
||||
<div className="cc-overview-chart-header">
|
||||
<h3 className="cc-area-section-title">{t("commandCenter.overview.dailyActivity", "Daily activity trend")}</h3>
|
||||
<p>{t("commandCenter.overview.dailyActivityHint", "Messages plus active agents per day")}</p>
|
||||
</div>
|
||||
<Sparkline
|
||||
values={dailyActivityValues}
|
||||
ariaLabel={t("commandCenter.overview.dailyActivityAria", "Daily activity trend")}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{/*
|
||||
FNXC:CommandCenter 2026-06-19-00:00:
|
||||
The Overview chart grid should surface the multi-series daily activity line higher by rendering it directly before the daily activity sparkline, without changing either card's data gate or wiring.
|
||||
*/}
|
||||
{dailyActivityValues.length > 0 ? (
|
||||
<div className="card cc-overview-chart-card cc-overview-chart-card--trend" data-testid="cc-overview-line">
|
||||
<div className="cc-overview-chart-header">
|
||||
@@ -372,6 +364,18 @@ function OverviewTab({ range }: { range: DateRange }) {
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{dailyActivityValues.length > 0 ? (
|
||||
<div className="card cc-overview-chart-card cc-overview-chart-card--trend" data-testid="command-center-overview-chart-activity">
|
||||
<div className="cc-overview-chart-header">
|
||||
<h3 className="cc-area-section-title">{t("commandCenter.overview.dailyActivity", "Daily activity trend")}</h3>
|
||||
<p>{t("commandCenter.overview.dailyActivityHint", "Messages plus active agents per day")}</p>
|
||||
</div>
|
||||
<Sparkline
|
||||
values={dailyActivityValues}
|
||||
ariaLabel={t("commandCenter.overview.dailyActivityAria", "Daily activity trend")}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -302,6 +302,12 @@ function expectThroughputFirstBefore(...followingTestIds: string[]) {
|
||||
}
|
||||
}
|
||||
|
||||
function expectDailyActivityLineBeforeTrend() {
|
||||
const lineCard = screen.getByTestId("cc-overview-line");
|
||||
const trendCard = screen.getByTestId("command-center-overview-chart-activity");
|
||||
expect(Boolean(lineCard.compareDocumentPosition(trendCard) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(true);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
apiMock.mockReset();
|
||||
mockEmptyOverviewApi();
|
||||
@@ -334,11 +340,13 @@ describe("CommandCenter shell", () => {
|
||||
expect(screen.queryByTestId("command-center-overview-charts")).toBeNull();
|
||||
expect(screen.queryByTestId("cc-overview-pie")).toBeNull();
|
||||
expect(screen.queryByTestId("cc-overview-line")).toBeNull();
|
||||
expect(screen.queryByTestId("command-center-overview-chart-activity")).toBeNull();
|
||||
await screen.findByTestId("command-center-empty");
|
||||
expectThroughputFirstBefore("command-center-empty");
|
||||
expect(screen.queryByTestId("command-center-overview-charts")).toBeNull();
|
||||
expect(screen.queryByTestId("cc-overview-pie")).toBeNull();
|
||||
expect(screen.queryByTestId("cc-overview-line")).toBeNull();
|
||||
expect(screen.queryByTestId("command-center-overview-chart-activity")).toBeNull();
|
||||
});
|
||||
|
||||
it("renders the Overview agent-runs card when run data is the only activity", async () => {
|
||||
@@ -387,6 +395,7 @@ describe("CommandCenter shell", () => {
|
||||
expect(within(screen.getByTestId("command-center-overview-chart-tools")).getByText("read")).toBeTruthy();
|
||||
expect(screen.getByTestId("cc-overview-pie")).toBeTruthy();
|
||||
expect(screen.getByTestId("cc-overview-line")).toBeTruthy();
|
||||
expectDailyActivityLineBeforeTrend();
|
||||
expect(screen.getByRole("img", { name: "Token share by model" })).toBeTruthy();
|
||||
expect(screen.getByRole("img", { name: "Daily activity line" })).toBeTruthy();
|
||||
expect(screen.getByRole("img", { name: "Daily activity trend" })).toBeTruthy();
|
||||
|
||||
Reference in New Issue
Block a user