@shendeguize/dsh-agent-sidecar 0.1.1 → 0.2.0

package/src/client/sidebar/SidebarTab.tsx

@@ -0,0 +1,156 @@
+/** Presentation-only compact view for the optional better-sidebar surface.
+ * Integration owns discovery and view-model derivation; this root subscribes
+ * once to locale changes for its complete presentation subtree. */
+
+import { Button, StateDot, type StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+import {
+  agentGlyph,
+  formatRelativeTime,
+  normalizeStatus,
+  projectDisplayName,
+  type SessionCardVM,
+  type SessionStatusToken,
+} from '../board/logic.ts'
+import { t, type SidecarLocaleKey } from '../locales/index.ts'
+import { useActiveLocale } from '../locales/react.ts'
+import { StaticPill } from '../primitives/StaticPill.tsx'
+import { surfaceProps } from '../theme/parts.ts'
+import type { SidebarMiniVM } from './model.ts'
+import css from './sidebar-tab.module.css'
+
+const STATUS_LABEL_KEY: Record<SessionStatusToken, SidecarLocaleKey> = {
+  working: 'detail.status.working',
+  waiting: 'detail.status.waiting',
+  idle: 'detail.status.idle',
+  dead: 'detail.status.dead',
+  unknown: 'detail.status.unknown',
+}
+
+const CONNECTION_DOT_STATE: Record<SidebarMiniVM['connection'], StateDotState> = {
+  ok: 'done',
+  degraded: 'warning',
+  off: 'error',
+}
+
+export interface SidebarTabProps {
+  vm: SidebarMiniVM
+  visible: boolean
+  /** Clock injection keeps SSR and focused view tests deterministic. */
+  nowMs?: number
+}
+
+/** Icon renderer kept beside the view while preserving the descriptor callback API. */
+export function SidebarTabIcon({ size }: { size: number }): ReactElement {
+  return (
+    <svg className={css['icon']} width={size} height={size} viewBox="0 0 24 24" aria-hidden>
+      <path d="M12 2 22 12 12 22 2 12 12 2Zm0 3.4L5.4 12l6.6 6.6 6.6-6.6L12 5.4Z" />
+      <circle cx="12" cy="12" r="2.2" />
+    </svg>
+  )
+}
+
+function SessionRow(props: {
+  session: SessionCardVM
+  nowMs: number
+  expanded: boolean
+  detailId: string
+  onToggle: () => void
+}): ReactElement {
+  const { session, nowMs, expanded, detailId } = props
+  const status = normalizeStatus(session.status)
+  const title = session.title.trim() === '' ? t('sidebar.untitled') : session.title
+  const lastEvent =
+    session.lastEvent === null
+      ? <span className={css['muted']}>{t('sidebar.noEvent')}</span>
+      : `${session.lastEvent.kind}: ${session.lastEvent.text}`
+
+  return (
+    <li className={css['sessionItem']}>
+      <Button
+        type="button"
+        size="sm"
+        variant="ghost"
+        className={css['sessionButton']}
+        onClick={props.onToggle}
+        data-testid="agent-sidecar-sidebar-session"
+        data-session-id={session.sessionId}
+        data-status={status}
+        aria-expanded={expanded}
+        aria-controls={detailId}
+      >
+        <span className={css['glyph']} aria-hidden>{agentGlyph(session.agent)}</span>
+        <span className={css['sessionTitle']} title={session.sessionId}>
+          {title}
+        </span>
+        <span className={css['sessionMeta']}>
+          {t(STATUS_LABEL_KEY[status])} · {formatRelativeTime(session.updatedAtMs, nowMs)}
+        </span>
+      </Button>
+      {expanded && (
+        <div
+          id={detailId}
+          className={css['detail']}
+          role="region"
+          aria-label={title}
+          data-testid="agent-sidecar-sidebar-detail"
+        >
+          <div>{projectDisplayName(session.project)}</div>
+          <div>{lastEvent}</div>
+        </div>
+      )}
+    </li>
+  )
+}
+
+/** Compact better-sidebar body. No controller, service, or transport imports. */
+export function SidebarTab({ vm, visible, nowMs = Date.now() }: SidebarTabProps): ReactElement {
+  useActiveLocale()
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const recentTitleId = 'agent-sidecar-sidebar-recent-title'
+
+  let body: ReactElement
+  if (!vm.hasSnapshot) {
+    body = <p className={css['muted']}>{t('sidebar.connecting')}</p>
+  } else if (vm.recent.length === 0) {
+    body = <p className={css['muted']}>{t('sidebar.noSessions')}</p>
+  } else {
+    body = (
+      <ul className={css['sessionList']} aria-labelledby={recentTitleId}>
+        {vm.recent.map((session, index) => (
+          <SessionRow
+            key={session.sessionId}
+            session={session}
+            nowMs={nowMs}
+            expanded={expandedId === session.sessionId}
+            detailId={`agent-sidecar-sidebar-detail-${index}`}
+            onToggle={() => {
+              setExpandedId((previous) => previous === session.sessionId ? null : session.sessionId)
+            }}
+          />
+        ))}
+      </ul>
+    )
+  }
+
+  return (
+    <section
+      {...surfaceProps('sidebar-tab', css['root'])}
+      data-testid="agent-sidecar-sidebar-tab"
+      data-visible={visible}
+      aria-label={t('sidebar.tabTitle')}
+      aria-hidden={!visible}
+    >
+      <header className={css['header']} title={vm.connectionTitle}>
+        <StaticPill className={css['counts']} data-testid="agent-sidecar-sidebar-counts">
+          <StateDot state={CONNECTION_DOT_STATE[vm.connection]} size={8} />
+          {t('sidebar.countsRow', { working: vm.workingCount, waiting: vm.waitingCount })}
+        </StaticPill>
+      </header>
+      <h2 id={recentTitleId} className={css['sectionTitle']}>{t('sidebar.recentTitle')}</h2>
+      {body}
+      <p className={css['hint']}>{t('sidebar.boardHint')}</p>
+    </section>
+  )
+}

package/src/client/sidebar/model.ts

@@ -0,0 +1,65 @@
+/** Pure view-model derivation for the optional compact sidebar. */
+
+import type { SidecarViewState } from '../controller.ts'
+import {
+  countWorking,
+  deriveWidgetConnection,
+  normalizeStatus,
+  type SessionCardVM,
+  type WidgetConnection,
+  widgetTitle,
+} from '../board/logic.ts'
+
+/** Compact view caps the session list at this many rows. */
+export const MAX_RECENT_SESSIONS = 5
+
+/** Count of sessions currently observed as waiting. */
+export function countWaiting(sessions: ReadonlyArray<{ status: string }>): number {
+  let count = 0
+  for (const session of sessions) {
+    if (normalizeStatus(session.status) === 'waiting') count += 1
+  }
+  return count
+}
+
+/**
+ * Return non-dead sessions by descending update time, capped for the compact
+ * view. Ties break by session id for stability.
+ */
+export function recentActiveSessions<T extends SessionCardVM>(
+  sessions: readonly T[],
+  limit: number = MAX_RECENT_SESSIONS,
+): T[] {
+  return sessions
+    .filter((session) => normalizeStatus(session.status) !== 'dead')
+    .sort((a, b) =>
+      b.updatedAtMs !== a.updatedAtMs
+        ? b.updatedAtMs - a.updatedAtMs
+        : a.sessionId.localeCompare(b.sessionId))
+    .slice(0, limit)
+}
+
+/** Everything the mini tab renders. */
+export interface SidebarMiniVM {
+  connection: WidgetConnection
+  /** Hover text for the header dot (connection + working count). */
+  connectionTitle: string
+  workingCount: number
+  waitingCount: number
+  recent: SessionCardVM[]
+  hasSnapshot: boolean
+}
+
+/** Fold the shared view state into the mini tab's view model. */
+export function deriveMiniVM(state: SidecarViewState): SidebarMiniVM {
+  const connection = deriveWidgetConnection(state.daemonState, state.streamHealth)
+  const workingCount = countWorking(state.sessions)
+  return {
+    connection,
+    connectionTitle: widgetTitle(connection, workingCount),
+    workingCount,
+    waitingCount: countWaiting(state.sessions),
+    recent: recentActiveSessions(state.sessions),
+    hasSnapshot: state.hasSnapshot,
+  }
+}

package/src/client/sidebar/sidebar-tab.module.css

@@ -0,0 +1,118 @@
+/* Compact native sidebar layout over the shared Agent Sidecar token surface. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  font-size: 12px;
+  color: var(--agsc-fg);
+  background: var(--agsc-bg);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.counts {
+  max-width: 100%;
+  font-variant-numeric: tabular-nums;
+  color: var(--agsc-fg-secondary);
+}
+
+.counts > span {
+  color: inherit;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  color: var(--agsc-fg-secondary);
+}
+
+.sessionList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sessionItem {
+  min-width: 0;
+  list-style: none;
+}
+
+.sessionButton {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  width: 100%;
+  height: auto;
+  min-width: 0;
+  padding: 4px 6px;
+  color: var(--agsc-fg);
+  text-align: left;
+}
+
+.glyph {
+  flex: none;
+  color: var(--agsc-accent);
+}
+
+.sessionTitle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--agsc-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sessionMeta {
+  flex: none;
+  font-size: 11px;
+  color: var(--agsc-fg-dimmed);
+  white-space: nowrap;
+}
+
+.detail {
+  margin: 0 6px 4px 20px;
+  overflow-wrap: anywhere;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agsc-fg-secondary);
+}
+
+.muted {
+  margin: 0;
+  color: var(--agsc-fg-dimmed);
+}
+
+.hint {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agsc-fg-dimmed);
+}
+
+.icon {
+  display: block;
+  flex: none;
+  color: var(--agsc-fg-secondary);
+}
+
+.icon path,
+.icon circle {
+  fill: currentColor;
+}