@startsimpli/ui 0.4.43 → 0.4.46

package/src/components/session/SessionCard.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import * as React from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { Eye, TerminalSquare } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { SessionStatusBadge } from './SessionStatusBadge'
+import type { SessionSummary } from './types'
+
+export interface SessionCardProps {
+  session: SessionSummary
+  /** Inject routing: return an href for the session detail. Renders the title as a link. */
+  href?: (id: string) => string
+  /** Called when the card / Details is activated (used when `href` is absent). */
+  onOpen?: (id: string) => void
+  /** Called when the Terminal action is activated. */
+  onOpenTerminal?: (id: string) => void
+  className?: string
+}
+
+/** Relative "created …" label, tolerant of string | number timestamps. */
+export function formatRelative(value: string | number): string {
+  const date = typeof value === 'number' ? new Date(value) : new Date(value)
+  if (Number.isNaN(date.getTime())) return String(value)
+  return formatDistanceToNow(date, { addSuffix: true })
+}
+
+function SessionCardComponent({ session, href, onOpen, onOpenTerminal, className }: SessionCardProps) {
+  const open = React.useCallback(() => onOpen?.(session.id), [onOpen, session.id])
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (href) return // native link handles keyboard
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        open()
+      }
+    },
+    [href, open],
+  )
+
+  const titleNode = href ? (
+    <a
+      href={href(session.id)}
+      className="truncate text-lg font-semibold text-foreground hover:text-primary"
+      title={session.name}
+    >
+      {session.name}
+    </a>
+  ) : (
+    <h3 className="truncate text-lg font-semibold text-foreground" title={session.name}>
+      {session.name}
+    </h3>
+  )
+
+  const clickable = !href && !!onOpen
+
+  return (
+    <div
+      data-testid="session-card"
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      onClick={clickable ? open : undefined}
+      onKeyDown={clickable ? handleKeyDown : undefined}
+      aria-label={clickable ? `Open session ${session.name}` : undefined}
+      className={cn(
+        'relative rounded-lg border border-border bg-card p-4 transition-colors',
+        clickable && 'cursor-pointer hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        className,
+      )}
+    >
+      {session.hasUnread && (
+        <span
+          data-testid="session-card-unread"
+          aria-label="Has unread activity"
+          className="absolute right-4 top-4 h-2 w-2 rounded-full bg-primary"
+        />
+      )}
+
+      <div className="flex items-start gap-4">
+        {session.number != null && (
+          <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg border border-border bg-muted">
+            <span className="font-mono text-sm font-semibold text-muted-foreground">
+              {String(session.number).padStart(3, '0')}
+            </span>
+          </div>
+        )}
+
+        <div className="min-w-0 flex-1">
+          <div className="mb-2 flex items-start justify-between gap-2">
+            {titleNode}
+            <SessionStatusBadge status={session.status} label={session.statusLabel} isActive={session.isActive} />
+          </div>
+
+          <div className="space-y-1 text-sm text-muted-foreground">
+            {session.agentName && (
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground/70">Agent:</span>
+                <span className="truncate text-foreground" title={session.agentName}>
+                  {session.agentName}
+                </span>
+              </div>
+            )}
+            {session.projectName && (
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground/70">Project:</span>
+                <span className="truncate text-foreground" title={session.projectName}>
+                  {session.projectName}
+                </span>
+              </div>
+            )}
+            {session.branch && (
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground/70">Branch:</span>
+                <span className="truncate font-mono text-xs text-foreground" title={session.branch}>
+                  {session.branch}
+                </span>
+              </div>
+            )}
+            <div className="text-xs text-muted-foreground/70">Created {formatRelative(session.createdAt)}</div>
+          </div>
+
+          {(onOpen || href || onOpenTerminal) && (
+            <div className="mt-4 flex gap-2 border-t border-border pt-4">
+              {href ? (
+                <a
+                  href={href(session.id)}
+                  onClick={(e) => e.stopPropagation()}
+                  className="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-accent"
+                >
+                  <Eye className="h-4 w-4" aria-hidden="true" />
+                  Details
+                </a>
+              ) : (
+                onOpen && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      open()
+                    }}
+                    className="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-accent"
+                  >
+                    <Eye className="h-4 w-4" aria-hidden="true" />
+                    Details
+                  </button>
+                )
+              )}
+              {onOpenTerminal && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onOpenTerminal(session.id)
+                  }}
+                  className="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-accent"
+                >
+                  <TerminalSquare className="h-4 w-4" aria-hidden="true" />
+                  Terminal
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Memoised — cheap re-renders in long lists. */
+export const SessionCard = React.memo(SessionCardComponent)
+
+/** Skeleton loader matching the card layout. */
+export function SessionCardSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn('rounded-lg border border-border bg-card p-4', className)}>
+      <div className="flex items-start gap-4">
+        <div className="h-12 w-12 flex-shrink-0 animate-pulse rounded-lg bg-muted" />
+        <div className="flex-1 space-y-3">
+          <div className="h-6 w-3/4 animate-pulse rounded bg-muted" />
+          <div className="space-y-2">
+            <div className="h-4 w-full animate-pulse rounded bg-muted" />
+            <div className="h-4 w-5/6 animate-pulse rounded bg-muted" />
+            <div className="h-4 w-4/6 animate-pulse rounded bg-muted" />
+          </div>
+          <div className="flex gap-2 border-t border-border pt-4">
+            <div className="h-9 flex-1 animate-pulse rounded bg-muted" />
+            <div className="h-9 flex-1 animate-pulse rounded bg-muted" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/session/SessionList.tsx

@@ -0,0 +1,271 @@
+'use client'
+
+import * as React from 'react'
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Inbox,
+  TerminalSquare,
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { SessionCard, SessionCardSkeleton, formatRelative } from './SessionCard'
+import { resolveSessionStatus } from './status'
+import type { SessionStatusKind, SessionSummary } from './types'
+
+export interface SessionListProps {
+  sessions: SessionSummary[]
+  isLoading?: boolean
+  error?: string | null
+  /** Grid of cards (default) or a compact table of rows. */
+  layout?: 'grid' | 'table'
+  /** In `table` layout, group rows under collapsible project headers. */
+  groupByProject?: boolean
+  /** Slot rendered above the list (filters/search — the app owns them). */
+  renderFilters?: React.ReactNode
+  /** Inject routing for a card/row (grid: card title/Details become links). */
+  href?: (id: string) => string
+  onSessionClick?: (session: SessionSummary) => void
+  onOpenTerminal?: (id: string) => void
+  /** Message shown when there are no sessions. */
+  emptyLabel?: string
+  /** Number of skeletons while loading. Default 6. */
+  skeletonCount?: number
+  className?: string
+}
+
+const STATUS_ICON: Record<SessionStatusKind, React.ComponentType<{ className?: string }>> = {
+  active: TerminalSquare,
+  success: CheckCircle2,
+  completed: CheckCircle2,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  idle: Clock,
+}
+
+interface ProjectGroup {
+  project: string
+  sessions: SessionSummary[]
+}
+
+/** Group + sort sessions by project name for the grouped table layout. */
+function groupByProjectName(sessions: SessionSummary[]): ProjectGroup[] {
+  const groups = new Map<string, ProjectGroup>()
+  for (const session of sessions) {
+    const key = session.projectName ?? 'Ungrouped'
+    if (!groups.has(key)) groups.set(key, { project: key, sessions: [] })
+    groups.get(key)!.sessions.push(session)
+  }
+  return Array.from(groups.values())
+}
+
+function SessionRow({
+  session,
+  onSessionClick,
+  onOpenTerminal,
+}: {
+  session: SessionSummary
+  onSessionClick?: (s: SessionSummary) => void
+  onOpenTerminal?: (id: string) => void
+}) {
+  const status = resolveSessionStatus(session)
+  const Icon = STATUS_ICON[status.kind]
+  return (
+    <button
+      type="button"
+      data-testid="session-row"
+      onClick={() => onSessionClick?.(session)}
+      className="group flex w-full items-center gap-4 border-b border-border p-4 text-left transition-colors last:border-b-0 hover:bg-accent"
+    >
+      <Icon className={cn('h-4 w-4 flex-shrink-0', status.toneClassName)} />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-baseline gap-2">
+          <span className="truncate font-medium text-foreground group-hover:text-primary">{session.name}</span>
+          {session.number != null && <span className="text-xs text-muted-foreground">#{session.number}</span>}
+        </div>
+        <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+          <span className={status.toneClassName}>{status.label}</span>
+          {session.branch && (
+            <span className="flex items-center gap-1">
+              <span className="h-1 w-1 rounded-full bg-current" />
+              <span className="font-mono">{session.branch}</span>
+            </span>
+          )}
+          <span className="flex items-center gap-1">
+            <Clock className="h-3 w-3" aria-hidden="true" />
+            {formatRelative(session.updatedAt ?? session.createdAt)}
+          </span>
+        </div>
+      </div>
+      {onOpenTerminal && (
+        <span
+          role="button"
+          tabIndex={-1}
+          onClick={(e) => {
+            e.stopPropagation()
+            onOpenTerminal(session.id)
+          }}
+          className="flex-shrink-0 rounded-md p-2 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100"
+          title="Open terminal"
+        >
+          <TerminalSquare className="h-4 w-4" aria-hidden="true" />
+        </span>
+      )}
+    </button>
+  )
+}
+
+function EmptyState({ label }: { label: string }) {
+  return (
+    <div
+      data-testid="session-list-empty"
+      className="flex flex-col items-center justify-center rounded-xl border border-border bg-card px-4 py-16 text-center"
+    >
+      <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full border border-border bg-muted">
+        <Inbox className="h-8 w-8 text-muted-foreground" aria-hidden="true" />
+      </div>
+      <h3 className="text-lg font-semibold text-foreground">{label}</h3>
+    </div>
+  )
+}
+
+/**
+ * A PURELY presentational list of sessions. It does NO data fetching and issues NO
+ * per-row queries — status is injected on each `SessionSummary`. Renders a card
+ * grid (`layout="grid"`) or a compact table (`layout="table"`, optionally grouped
+ * by project). The app owns filters (pass them via `renderFilters`).
+ */
+export function SessionList({
+  sessions,
+  isLoading = false,
+  error = null,
+  layout = 'grid',
+  groupByProject = false,
+  renderFilters,
+  href,
+  onSessionClick,
+  onOpenTerminal,
+  emptyLabel = 'No sessions yet',
+  skeletonCount = 6,
+  className,
+}: SessionListProps) {
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set())
+  const groups = React.useMemo(
+    () => (layout === 'table' && groupByProject ? groupByProjectName(sessions) : []),
+    [layout, groupByProject, sessions],
+  )
+
+  const toggle = (project: string) =>
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(project)) next.delete(project)
+      else next.add(project)
+      return next
+    })
+
+  let body: React.ReactNode
+
+  if (isLoading) {
+    body = (
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: skeletonCount }).map((_, i) => (
+          <SessionCardSkeleton key={i} />
+        ))}
+      </div>
+    )
+  } else if (error) {
+    body = (
+      <div
+        data-testid="session-list-error"
+        className="rounded-xl border border-red-500/30 bg-card px-4 py-16 text-center"
+      >
+        <h3 className="mb-2 text-lg font-semibold text-foreground">Failed to load sessions</h3>
+        <p className="text-sm text-muted-foreground">{error}</p>
+      </div>
+    )
+  } else if (sessions.length === 0) {
+    body = <EmptyState label={emptyLabel} />
+  } else if (layout === 'table') {
+    if (groupByProject) {
+      body = (
+        <div className="space-y-2">
+          {groups.map((group) => {
+            const isCollapsed = collapsed.has(group.project)
+            const activeCount = group.sessions.filter((s) => s.isActive).length
+            return (
+              <div key={group.project} className="overflow-hidden rounded-lg border border-border">
+                <button
+                  type="button"
+                  onClick={() => toggle(group.project)}
+                  className="flex w-full items-center gap-3 p-4 text-left transition-colors hover:bg-accent"
+                >
+                  {isCollapsed ? (
+                    <ChevronRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" aria-hidden="true" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 flex-shrink-0 text-muted-foreground" aria-hidden="true" />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <h3 className="truncate font-medium text-foreground">{group.project}</h3>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {group.sessions.length} session{group.sessions.length !== 1 ? 's' : ''}
+                      {activeCount > 0 && <span className="ml-2 text-primary">{activeCount} active</span>}
+                    </p>
+                  </div>
+                </button>
+                {!isCollapsed && (
+                  <div className="border-t border-border">
+                    {group.sessions.map((session) => (
+                      <SessionRow
+                        key={session.id}
+                        session={session}
+                        onSessionClick={onSessionClick}
+                        onOpenTerminal={onOpenTerminal}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )
+    } else {
+      body = (
+        <div className="overflow-hidden rounded-lg border border-border">
+          {sessions.map((session) => (
+            <SessionRow
+              key={session.id}
+              session={session}
+              onSessionClick={onSessionClick}
+              onOpenTerminal={onOpenTerminal}
+            />
+          ))}
+        </div>
+      )
+    }
+  } else {
+    body = (
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {sessions.map((session) => (
+          <SessionCard
+            key={session.id}
+            session={session}
+            href={href}
+            onOpen={onSessionClick ? () => onSessionClick(session) : undefined}
+            onOpenTerminal={onOpenTerminal}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {renderFilters}
+      {body}
+    </div>
+  )
+}

package/src/components/session/SessionStatusBadge.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { resolveSessionStatus } from './status'
+import type { SessionStatusKind } from './types'
+
+export interface SessionStatusBadgeProps {
+  /** Explicit status kind. If omitted, derived from `isActive`. */
+  status?: SessionStatusKind
+  /** Human label. Defaults from the resolved kind. */
+  label?: string
+  /** Fallback when `status` is absent. */
+  isActive?: boolean
+  /** Show the leading state dot. Default true. */
+  showDot?: boolean
+  className?: string
+}
+
+/**
+ * A generic session status pill. Colour + label come from `resolveSessionStatus`
+ * using tailwind tokens — no app-specific palette. (Named `SessionStatusBadge` to
+ * avoid the existing `StatusBadge` export in `../badge`.)
+ */
+export function SessionStatusBadge({
+  status,
+  label,
+  isActive = false,
+  showDot = true,
+  className,
+}: SessionStatusBadgeProps) {
+  const resolved = resolveSessionStatus({ status, statusLabel: label, isActive })
+  const isLive = resolved.kind === 'active'
+
+  return (
+    <span
+      role="status"
+      data-status={resolved.kind}
+      aria-label={`Status: ${resolved.label}`}
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold',
+        resolved.className,
+        className,
+      )}
+    >
+      {showDot && (
+        <span
+          aria-hidden="true"
+          className={cn('h-1.5 w-1.5 rounded-full bg-current', isLive && 'animate-pulse')}
+        />
+      )}
+      <span>{resolved.label}</span>
+    </span>
+  )
+}

package/src/components/session/index.ts

@@ -0,0 +1,26 @@
+export { SessionStatusBadge } from './SessionStatusBadge'
+export type { SessionStatusBadgeProps } from './SessionStatusBadge'
+
+export { SessionCard, SessionCardSkeleton, formatRelative } from './SessionCard'
+export type { SessionCardProps } from './SessionCard'
+
+export { SessionList } from './SessionList'
+export type { SessionListProps } from './SessionList'
+
+export { ConversationTimeline } from './ConversationTimeline'
+export type { ConversationTimelineProps } from './ConversationTimeline'
+
+// AgentSessionConsole imports @startsimpli/realtime, which is not on npm (the org
+// won't create the new name yet). To keep @startsimpli/ui installable WITHOUT
+// realtime, the Console is NOT in this main barrel — it ships via the
+// `@startsimpli/ui/session-console` subpath, which live-console consumers import
+// (and add @startsimpli/realtime themselves). See package.json exports.
+
+export {
+  resolveSessionStatus,
+  mapSocketStatus,
+  type SessionStatusVisual,
+  type AgentConnectionStatus,
+} from './status'
+
+export type { SessionSummary, SessionStatusKind } from './types'

package/src/components/session/status.ts

@@ -0,0 +1,80 @@
+/**
+ * Pure status helpers for the session UI — NO React, NO realtime, NO xterm imports,
+ * so they're trivially unit-testable and safe to pull anywhere.
+ */
+import type { TerminalStatus } from '../terminal/themes'
+import type { SessionStatusKind, SessionSummary } from './types'
+
+/** Visual tokens for a resolved session status. */
+export interface SessionStatusVisual {
+  kind: SessionStatusKind
+  label: string
+  /** Tailwind-token classes for the badge pill (light + dark friendly). */
+  className: string
+  /** Tailwind-token colour class for a status icon/text. */
+  toneClassName: string
+}
+
+const DEFAULT_LABELS: Record<SessionStatusKind, string> = {
+  active: 'Active',
+  success: 'Success',
+  error: 'Error',
+  warning: 'Needs review',
+  idle: 'Idle',
+  completed: 'Completed',
+}
+
+const KIND_CLASSES: Record<SessionStatusKind, string> = {
+  active: 'bg-primary/15 text-primary border border-primary/30',
+  success: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30',
+  error: 'bg-red-500/15 text-red-600 dark:text-red-400 border border-red-500/30',
+  warning: 'bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30',
+  idle: 'bg-muted text-muted-foreground border border-border',
+  completed: 'bg-muted text-muted-foreground border border-border',
+}
+
+const KIND_TONE: Record<SessionStatusKind, string> = {
+  active: 'text-primary',
+  success: 'text-emerald-600 dark:text-emerald-400',
+  error: 'text-red-600 dark:text-red-400',
+  warning: 'text-amber-600 dark:text-amber-400',
+  idle: 'text-muted-foreground',
+  completed: 'text-muted-foreground',
+}
+
+/**
+ * Resolve the effective status of a session view-model. Prefers an explicit
+ * `status`; otherwise derives `active`/`idle` from `isActive`.
+ */
+export function resolveSessionStatus(
+  session: Pick<SessionSummary, 'status' | 'statusLabel' | 'isActive'>,
+): SessionStatusVisual {
+  const kind: SessionStatusKind = session.status ?? (session.isActive ? 'active' : 'idle')
+  return {
+    kind,
+    label: session.statusLabel ?? DEFAULT_LABELS[kind],
+    className: KIND_CLASSES[kind],
+    toneClassName: KIND_TONE[kind],
+  }
+}
+
+/**
+ * The connection states an `AgentSocket` reports (mirrors `@startsimpli/realtime`'s
+ * `AgentSocketStatus`). Redefined locally so this module stays realtime-free.
+ */
+export type AgentConnectionStatus = 'idle' | 'connecting' | 'open' | 'reconnecting' | 'closed'
+
+/** Map an agent socket status onto the terminal chrome's `TerminalStatus`. */
+export function mapSocketStatus(status: AgentConnectionStatus): TerminalStatus {
+  switch (status) {
+    case 'open':
+      return 'connected'
+    case 'connecting':
+    case 'reconnecting':
+      return 'connecting'
+    case 'idle':
+    case 'closed':
+    default:
+      return 'disconnected'
+  }
+}

package/src/components/session/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Generic, app-agnostic view-models for the agent-session UI. These decouple the
+ * shared components from any app's data model (no dev-hq `CodingSession`, no
+ * Foundry types) — an app maps its own records into these shapes.
+ */
+
+/** The coarse lifecycle state a session badge/row reflects. */
+export type SessionStatusKind = 'active' | 'success' | 'error' | 'warning' | 'idle' | 'completed'
+
+/** A single session as the list/card/badge components consume it. */
+export interface SessionSummary {
+  id: string
+  /** Optional short sequence number (rendered as a #NNN avatar). */
+  number?: number
+  name: string
+  /** Whether the underlying session is currently running. */
+  isActive: boolean
+  /** Coarse status; if omitted the components fall back to `isActive`. */
+  status?: SessionStatusKind
+  /** Human label for the status (defaults derived from `status`/`isActive`). */
+  statusLabel?: string
+  projectName?: string
+  agentName?: string
+  branch?: string
+  createdAt: string | number
+  updatedAt?: string | number
+  /** Shows an unread dot on the card/row. */
+  hasUnread?: boolean
+}