chore(client): drop dead UI code
Nothing imports SessionCard, CardSkeleton, shortModel or agentPillLabel — the Sessions page renders its own list, formatModelName replaced shortModel, and the UI labels agents through agentOriginLabel. Removes the symbols, their Public surface entries, and the ARCHITECTURE mention of SessionCard.
This commit is contained in:
+1
-1
@@ -2438,7 +2438,7 @@ The function handles:
|
||||
- Version number dot-joining (hyphen-separated digits → dotted)
|
||||
- Title-casing for word segments
|
||||
|
||||
Components that consume this: SessionDetail, Analytics (donut chart + breakdown), Dashboard (model stats), MessageList, SessionCard, AgentCard, SessionDrillIn, and EventDetail.
|
||||
Components that consume this: SessionDetail, Analytics (donut chart + breakdown), Dashboard (model stats), MessageList, AgentCard, SessionDrillIn, and EventDetail.
|
||||
|
||||
### Data Flow
|
||||
|
||||
|
||||
@@ -1,156 +0,0 @@
|
||||
/**
|
||||
* @file SessionCard.tsx
|
||||
* @description Compact session card for the Kanban board's "Sessions" view.
|
||||
* Mirrors AgentCard's information hierarchy (icon · title · meta line) but
|
||||
* surfaces session-relevant fields: model, agent count, cost, last activity.
|
||||
* Clicking the card navigates to the session detail page.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
/* =============================================================================
|
||||
* MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
|
||||
* =============================================================================
|
||||
* **Purpose:** Dashboard module consumed by the React client, MCP tools, or desktop shell depending on deployment mode.
|
||||
*
|
||||
* ## Design constraints
|
||||
* - Local-first: no telemetry leaves the machine unless the user configures webhooks.
|
||||
* - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
|
||||
* philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
|
||||
* - Destructive flows stay behind explicit confirmation modals and server-side gates.
|
||||
* - Internationalization: user-visible strings belong in i18n JSON, not literals here.
|
||||
*
|
||||
* ## Remote data & SSH
|
||||
* Remote Data Sources let operators aggregate multiple machines. SSH entries describe
|
||||
* how to reach a peer dashboard; the global data scope (`dataScope.ts`) narrows every
|
||||
* scoped GET via `?sources=`. Health checks and import history surface in Settings.
|
||||
*
|
||||
* ## Internal dependencies
|
||||
* - `./StatusBadge`
|
||||
* - `../lib/types`
|
||||
* - `../lib/format`
|
||||
*
|
||||
* ## Public surface
|
||||
* - `SessionCard` — exported API; see TSDoc on the symbol for behavior.
|
||||
*
|
||||
* ## Testing pointers
|
||||
* - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
|
||||
* - Server contract changes require `npm run test:server` and OpenAPI sync.
|
||||
*
|
||||
* ## Related docs
|
||||
* - `ARCHITECTURE.md` — hooks → API → SQLite → WebSocket → UI pipeline.
|
||||
* - `docs/API.md` — REST reference.
|
||||
* - `skills/file-headers/` — mandatory `@author` header policy.
|
||||
* ============================================================================= */
|
||||
/* -----------------------------------------------------------------------------
|
||||
* EXPORT CATALOG — quick index of symbols defined below (documentation only).
|
||||
* -----------------------------------------------------------------------------
|
||||
* **SessionCard**
|
||||
* Part of this module's public contract. Downstream imports should treat
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* ----------------------------------------------------------------------------- */
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { FolderOpen, Bot, Clock, Coins, Cpu } from "lucide-react";
|
||||
import { SessionStatusBadge } from "./StatusBadge";
|
||||
import {
|
||||
effectiveSessionStatus,
|
||||
isSessionAwaitingInput,
|
||||
sessionAwaitingReason,
|
||||
} from "../lib/types";
|
||||
import type { Session } from "../lib/types";
|
||||
import { formatDuration, timeAgo, formatModelName } from "../lib/format";
|
||||
|
||||
interface SessionCardProps {
|
||||
session: Session;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
function formatCost(cost: number): string {
|
||||
if (!Number.isFinite(cost) || cost <= 0) return "$0";
|
||||
if (cost >= 1) return `$${cost.toFixed(2)}`;
|
||||
if (cost >= 0.01) return `$${cost.toFixed(3)}`;
|
||||
return `$${cost.toFixed(4)}`;
|
||||
}
|
||||
|
||||
export function SessionCard({ session, onClick }: SessionCardProps) {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation("kanban");
|
||||
const isActive = session.status === "active";
|
||||
const isWaiting = isSessionAwaitingInput(session);
|
||||
const status = effectiveSessionStatus(session);
|
||||
const title = session.name?.trim() || t("session.anonymous");
|
||||
const agentCount = session.agent_count ?? 0;
|
||||
const model = formatModelName(session.model);
|
||||
const lastActivity = session.last_activity || session.ended_at || session.started_at;
|
||||
|
||||
function handleClick() {
|
||||
if (onClick) onClick();
|
||||
else navigate(`/sessions/${session.id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className={`card-hover p-4 cursor-pointer animate-fade-in overflow-hidden ${
|
||||
isWaiting
|
||||
? "border-l-2 border-l-yellow-500/60"
|
||||
: isActive
|
||||
? "border-l-2 border-l-emerald-500/50"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2 mb-3 min-w-0">
|
||||
<div className="flex items-center gap-2.5 min-w-0 overflow-hidden">
|
||||
<div className="w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 bg-accent/15 text-accent">
|
||||
<FolderOpen className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<div className="min-w-0 overflow-hidden">
|
||||
<p className="text-sm font-medium text-fg-secondary truncate">{title}</p>
|
||||
<p className="text-[11px] text-fg-muted font-mono truncate">
|
||||
{session.id.slice(0, 12)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* compact: cards are narrow — inline reason chip would squeeze the
|
||||
title, so the reason stays hover-tooltip-only here. */}
|
||||
<SessionStatusBadge status={status} reason={sessionAwaitingReason(session)} compact />
|
||||
</div>
|
||||
|
||||
{session.cwd && (
|
||||
<p className="text-xs text-fg-secondary mb-3 truncate font-mono leading-relaxed">
|
||||
{session.cwd}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-[11px] text-fg-muted min-w-0 overflow-hidden flex-wrap">
|
||||
<span className="flex items-center gap-1 flex-shrink-0">
|
||||
<Bot className="w-3 h-3" />
|
||||
{t("session.agentSummary", { count: agentCount })}
|
||||
</span>
|
||||
{model && (
|
||||
<span className="flex items-center gap-1 flex-shrink-0 truncate">
|
||||
<Cpu className="w-3 h-3" />
|
||||
<span className="truncate">{model}</span>
|
||||
</span>
|
||||
)}
|
||||
{typeof session.cost === "number" && session.cost > 0 && (
|
||||
<span className="flex items-center gap-1 flex-shrink-0">
|
||||
<Coins className="w-3 h-3" />
|
||||
{formatCost(session.cost)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1 flex-shrink-0">
|
||||
<Clock className="w-3 h-3" />
|
||||
{session.ended_at
|
||||
? `${t("ran")}${formatDuration(session.started_at, session.ended_at)}`
|
||||
: `${t("running")}${formatDuration(session.started_at, new Date().toISOString())}`}
|
||||
</span>
|
||||
<span className="text-fg-muted flex-shrink-0 ml-auto">
|
||||
{timeAgo(session.ended_at || lastActivity)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -29,7 +29,6 @@
|
||||
* - `StatValueSkeleton` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `TextSkeleton` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `TableRowSkeleton` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `CardSkeleton` — exported API; see TSDoc on the symbol for behavior.
|
||||
*
|
||||
* ## Testing pointers
|
||||
* - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
|
||||
@@ -63,11 +62,6 @@
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* **CardSkeleton**
|
||||
* Part of this module's public contract. Downstream imports should treat
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* ----------------------------------------------------------------------------- */
|
||||
|
||||
import type { CSSProperties } from "react";
|
||||
@@ -145,19 +139,3 @@ export function TableRowSkeleton({ columns, widths }: { columns: number; widths?
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Block placeholder for card-shaped content (kanban cards, list items).
|
||||
*/
|
||||
export function CardSkeleton({ className = "" }: { className?: string }) {
|
||||
return (
|
||||
<div className={`card p-4 space-y-3 ${className}`} aria-busy="true" aria-label="Loading">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-1/2" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-3 w-12" />
|
||||
<Skeleton className="h-3 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -59,7 +59,6 @@
|
||||
* - `buildEventTitle` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `shortAgentLabel` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `AgentInfo` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `agentPillLabel` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `agentOriginLabel` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `buildOriginLabel` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `projectFromCwd` — exported API; see TSDoc on the symbol for behavior.
|
||||
@@ -97,11 +96,6 @@
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* **agentPillLabel**
|
||||
* Part of this module's public contract. Downstream imports should treat
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* **agentOriginLabel**
|
||||
* Part of this module's public contract. Downstream imports should treat
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
@@ -689,29 +683,8 @@ function singleAgentSegment(info: AgentInfo): string | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
/** Resolves the pill label for an event's agent. Returns null when the event
|
||||
* comes from the session's main agent (the pill is noise in that case) or
|
||||
* when no info is available. Prefers subagent_type (e.g. "frontend-reviewer"),
|
||||
* then the agent's name, and finally the last-8 short ID fallback.
|
||||
* @param agentId The event's `agent_id`; null yields null.
|
||||
* @param info Optional {@link AgentInfo} for that agent, when known.
|
||||
* @returns The pill text, or null when nothing worth showing exists.
|
||||
*/
|
||||
export function agentPillLabel(agentId: string | null, info: AgentInfo | undefined): string | null {
|
||||
if (!agentId) return null;
|
||||
if (info) {
|
||||
const seg = singleAgentSegment(info);
|
||||
// A concrete subagent label wins outright.
|
||||
if (seg !== null) return seg;
|
||||
// Known main agent with no segment → deliberately no pill.
|
||||
if (info.type === "main") return null;
|
||||
}
|
||||
// No usable info: fall back to the id-derived short label.
|
||||
return shortAgentLabel(agentId);
|
||||
}
|
||||
|
||||
/** Resolves a label that always identifies an event's agent origin - unlike
|
||||
* agentPillLabel, this returns "main" for main agents instead of null. Used
|
||||
/** Resolves a label that always identifies an event's agent origin - it returns
|
||||
* "main" for main agents rather than hiding them. Used
|
||||
* by the inline origin prefix ("{session} › {agent} · {action}").
|
||||
*
|
||||
* When an `agentInfoById` map is provided AND the event's agent has a
|
||||
|
||||
@@ -57,7 +57,6 @@
|
||||
* - `fmt` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `fmtCost` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `fmtCostFull` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `shortModel` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `formatModelName` — exported API; see TSDoc on the symbol for behavior.
|
||||
* - `pathBasename` — exported API; see TSDoc on the symbol for behavior.
|
||||
*
|
||||
@@ -133,11 +132,6 @@
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* **shortModel**
|
||||
* Part of this module's public contract. Downstream imports should treat
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
* When behavior changes, update the `@file` overview and relevant tests.
|
||||
*
|
||||
* **formatModelName**
|
||||
* Part of this module's public contract. Downstream imports should treat
|
||||
* the signature and return type as stable unless release notes say otherwise.
|
||||
@@ -431,23 +425,6 @@ export function fmtCostFull(n: number, decimals = 2): string {
|
||||
// Model-name + path formatters
|
||||
// ===========================================================================
|
||||
|
||||
/**
|
||||
* Strip the date suffix from a Claude model ID:
|
||||
* "claude-opus-4-7-20260101" → "opus-4-7". Returns the original string
|
||||
* when the pattern doesn't match, and null/undefined unchanged.
|
||||
* @param model A raw model identifier, or null/undefined.
|
||||
* @returns The captured `tier-major(-minor)` slug (e.g. `"opus-4-7"`), the original
|
||||
* string if it isn't a `claude-…` id, or `null` for falsy input.
|
||||
* @remarks The capture group `([a-z]+-\d+(?:-\d+)?)` grabs the family plus a one- or
|
||||
* two-segment version (`sonnet-4`, `opus-4-7`) but stops before the trailing
|
||||
* `-YYYYMMDD` date. This is the terse form; {@link formatModelName} is the pretty one.
|
||||
*/
|
||||
export function shortModel(model: string | null | undefined): string | null {
|
||||
if (!model) return null;
|
||||
const m = model.match(/claude-([a-z]+-\d+(?:-\d+)?)/i);
|
||||
return m?.[1] ?? model; // captured slug, else the input unchanged
|
||||
}
|
||||
|
||||
/**
|
||||
* Lookup from a lowercased leading token to its display brand. Drives the
|
||||
* brand-specific formatting branches in {@link formatModelName}; a token absent
|
||||
|
||||
Reference in New Issue
Block a user