From 87166623ff918abd8fb92103e27af7065121e2e2 Mon Sep 17 00:00:00 2001 From: Vader Yang Date: Fri, 15 May 2026 17:13:08 +0800 Subject: [PATCH] feat(console): TPS instead of TPOT, agent-turns column reorder, sidebar logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three small UI changes batched into one branch — none of them touch backend or data shapes: * Overview "Avg TPOT" KPI surfaces as "Avg TPS" with units of tok/s (= 1000 / tpot_avg_ms). TPOT itself is what the backend stores; the conversion is one division at render time. "Generation speed" reads better in a glance than "milliseconds per token". * Models table column "TPOT" → "Generation TPS", same unit swap. Sort key still points at tpot_avg under the hood but getSortValue inverts to 1000/tpot_avg so clicking the column desc gives fastest-first — matches what someone clicking "Generation TPS" expects. * Agent Turns table column order rewritten around how operators actually triage a turn: Time, Agent, Client, Calls, Status, In, Out, then the less-frequently-scanned dimensions (Model, Wire API, Server, Duration) and the long User Input preview last. * New TokenScope brand mark replaces the bare panel-toggle button at the top-left of the sidebar: - Expanded: wordmark on the left, collapse button on the right. - Collapsed: icon-only mark; click toggles to expand (the icon doubles as the expand affordance — discoverable, saves a row). Both variants share the same glyph (rounded "scope" frame containing three decreasing token bars) so they line up visually as the sidebar opens/closes. Stroke uses currentColor for dark-mode and theme inheritance. Co-Authored-By: Claude Opus 4.7 (1M context) --- console/src/components/layout/sidebar.tsx | 39 ++++++++++--- console/src/components/ui/logo.tsx | 71 +++++++++++++++++++++++ console/src/pages/agent-turns.tsx | 13 +++-- console/src/pages/models.tsx | 13 ++++- console/src/pages/overview.tsx | 10 +++- 5 files changed, 129 insertions(+), 17 deletions(-) create mode 100644 console/src/components/ui/logo.tsx diff --git a/console/src/components/layout/sidebar.tsx b/console/src/components/layout/sidebar.tsx index 0cf2cca..5ecca5f 100644 --- a/console/src/components/layout/sidebar.tsx +++ b/console/src/components/layout/sidebar.tsx @@ -10,10 +10,10 @@ import { MessagesSquare, Network, PanelLeftClose, - PanelLeftOpen, } from "lucide-react" import { cn } from "@/lib/utils" import { useSidebarStore } from "@/stores/sidebar" +import { Logo } from "@/components/ui/logo" /** Toolbar-level param keys that should be preserved across page navigation */ const TOOLBAR_KEYS = ["preset", "start", "end", "wire_api", "model", "server_ip", "refresh"] @@ -52,13 +52,36 @@ export function Sidebar() { expanded ? "w-[200px]" : "w-[44px]", )} > -
- +
+ {expanded ? ( + <> + + + + ) : ( + // Collapsed: the icon doubles as the expand affordance — saves a + // row and is the most discoverable place to put the toggle when + // there's no room for a second button. + + )}