@startsimpli/ui 0.4.42 → 0.4.44

package/src/components/session/AgentSessionConsole.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import * as React from 'react'
+import { useAgentSession } from '@startsimpli/realtime/react'
+import type { AgentLifecycleMsg } from '@startsimpli/realtime'
+import { cn } from '../../lib/utils'
+import { Terminal, type TerminalHandle } from '../terminal/Terminal'
+import type { ChatMessageData } from '../chat/types'
+import { ConversationTimeline } from './ConversationTimeline'
+import { DiffViewer } from '../diff/DiffViewer'
+import { mapSocketStatus } from './status'
+
+export interface AgentSessionConsoleProps {
+  /** WebSocket URL for the agent session (ws(s)://…). */
+  url: string
+  /** Auth token appended by the socket (string or getter re-read on reconnect). */
+  token?: string | (() => string | null | undefined)
+  /** A raw unified diff to show in the Diff tab (the parent fetches it). */
+  diff?: string
+  /** Load/refresh the diff (wired to the Diff tab's refresh button). */
+  onLoadDiff?: () => void
+  diffLoading?: boolean
+  diffError?: string | null
+  /** Ref/branch the diff is against (shown in the diff header). */
+  diffBaseRef?: string
+  title?: string
+  className?: string
+}
+
+type Tab = 'session' | 'diff'
+
+/** Turn a structured lifecycle event into a timeline row. Generic — no app knowledge. */
+export function lifecycleToMessage(msg: AgentLifecycleMsg): ChatMessageData {
+  const data = msg.data as { message?: string; tool?: string } | undefined
+  const looksLikeTool = /tool|command|exec|edit|write|read|bash/i.test(msg.event)
+  const content = data?.message ?? msg.event.replace(/[_-]/g, ' ')
+  return {
+    id: `lifecycle-${msg.ts ?? Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    role: looksLikeTool ? 'tool' : 'system',
+    kind: looksLikeTool ? 'tool' : 'status',
+    toolName: looksLikeTool ? (data?.tool ?? msg.event) : undefined,
+    content,
+    timestamp: msg.ts,
+  }
+}
+
+/**
+ * The live agent-session surface: a status header + a `<Terminal>` and
+ * `<ConversationTimeline>` side by side (with a `<DiffViewer>` in a tab). It is
+ * driven by `useAgentSession` from `@startsimpli/realtime/react`:
+ *   - inbound output is pumped into the terminal imperatively (no re-render/byte),
+ *   - keystrokes/resizes are forwarded to `session.send`/`session.resize`,
+ *   - lifecycle events accumulate into the conversation timeline,
+ *   - the composer steers the agent via `session.send`.
+ *
+ * Fully generic — no Foundry/app types. The parent supplies the URL, token, and
+ * (optionally) a diff.
+ */
+export function AgentSessionConsole({
+  url,
+  token,
+  diff,
+  onLoadDiff,
+  diffLoading,
+  diffError,
+  diffBaseRef,
+  title,
+  className,
+}: AgentSessionConsoleProps) {
+  const termHandleRef = React.useRef<TerminalHandle | null>(null)
+  const [tab, setTab] = React.useState<Tab>('session')
+  const [entries, setEntries] = React.useState<ChatMessageData[]>([])
+
+  const session = useAgentSession({
+    url,
+    token,
+    onOutput: (d) => termHandleRef.current?.write(d),
+    onLifecycle: (m) => setEntries((prev) => [...prev, lifecycleToMessage(m)]),
+  })
+
+  const { status, lastEvent, send, resize, socket } = session
+
+  // An error event trumps the socket status for the terminal indicator.
+  const isError = lastEvent?.type === 'error'
+  const terminalStatus = isError ? 'error' : mapSocketStatus(status)
+
+  const exited = lastEvent?.type === 'exited' ? lastEvent : null
+
+  const handleSend = React.useCallback(
+    (text: string) => {
+      send(text)
+      setEntries((prev) => [
+        ...prev,
+        { id: `user-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, role: 'user', content: text },
+      ])
+    },
+    [send],
+  )
+
+  const reconnect = React.useCallback(() => socket?.connect(), [socket])
+
+  const statusLabel = exited
+    ? `Exited (code ${exited.exitCode})`
+    : isError
+      ? 'Error'
+      : status === 'open'
+        ? 'Connected'
+        : status === 'connecting'
+          ? 'Connecting…'
+          : status === 'reconnecting'
+            ? 'Reconnecting…'
+            : 'Disconnected'
+
+  return (
+    <div className={cn('flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card', className)}>
+      {/* Status header + tabs */}
+      <div className="flex flex-shrink-0 flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-2">
+        <div className="flex items-center gap-3">
+          {title && <span className="text-sm font-semibold text-foreground">{title}</span>}
+          <span
+            data-testid="agent-session-status"
+            className={cn(
+              'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
+              terminalStatus === 'connected' && 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
+              terminalStatus === 'connecting' && 'bg-muted text-muted-foreground',
+              terminalStatus === 'error' && 'bg-red-500/15 text-red-600 dark:text-red-400',
+              terminalStatus === 'disconnected' && 'bg-muted text-muted-foreground',
+            )}
+          >
+            <span className="h-1.5 w-1.5 rounded-full bg-current" />
+            {statusLabel}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 rounded-lg bg-muted p-0.5" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'session'}
+            onClick={() => setTab('session')}
+            className={cn(
+              'rounded-md px-3 py-1 text-xs font-medium transition-colors',
+              tab === 'session' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            Session
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'diff'}
+            onClick={() => setTab('diff')}
+            className={cn(
+              'rounded-md px-3 py-1 text-xs font-medium transition-colors',
+              tab === 'diff' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            Diff
+          </button>
+        </div>
+      </div>
+
+      <div className="relative min-h-0 flex-1">
+        {/* Session tab: Terminal | Conversation split. Terminal stays MOUNTED
+            across tab switches (via `hidden`) so xterm is never re-initialised. */}
+        <div className={cn('grid h-full grid-cols-1 gap-3 p-3 lg:grid-cols-2', tab !== 'session' && 'hidden')}>
+          <Terminal
+            onReady={(h) => {
+              termHandleRef.current = h
+            }}
+            onData={send}
+            onResize={resize}
+            status={terminalStatus}
+            onReconnect={reconnect}
+            className="min-h-[320px]"
+          />
+          <ConversationTimeline
+            entries={entries}
+            title="Conversation"
+            statusLabel={statusLabel}
+            onSend={handleSend}
+            emptyState={<span className="text-sm text-muted-foreground">Steer the agent by sending a message.</span>}
+            className="min-h-[320px]"
+          />
+        </div>
+
+        {/* Diff tab */}
+        <div className={cn('h-full p-3', tab !== 'diff' && 'hidden')}>
+          <DiffViewer
+            diff={diff ?? ''}
+            baseRef={diffBaseRef}
+            isLoading={diffLoading}
+            error={diffError}
+            onRefresh={onLoadDiff}
+            className="h-full rounded-lg border border-border"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/session/ConversationTimeline.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { ChatThread } from '../chat/ChatThread'
+import { ChatComposer } from '../chat/ChatComposer'
+import type { ChatMessageData } from '../chat/types'
+
+export interface ConversationTimelineProps {
+  /** The agent-shaped timeline entries (already chat-shaped: status/kind/toolName). */
+  entries: ChatMessageData[]
+  /** Header title. */
+  title?: string
+  /** 0..100 progress bar shown under the header (omit to hide). */
+  progressPercent?: number
+  /** Short status label shown in the header. */
+  statusLabel?: string
+  /** Called with the composed message text. Sending state is tracked internally. */
+  onSend?: (text: string) => void | Promise<void>
+  /** The agent is working / entries are loading — shows the working indicator. */
+  isLoading?: boolean
+  /** Load older entries (renders a "Load more" control when `hasMore`). */
+  onLoadMore?: () => void
+  hasMore?: boolean
+  composerPlaceholder?: string
+  /** Rendered when there are no entries. */
+  emptyState?: React.ReactNode
+  /** Custom message-body renderer passed through to ChatThread (e.g. markdown). */
+  renderContent?: (content: string, message: ChatMessageData) => React.ReactNode
+  className?: string
+}
+
+/**
+ * The "steer the agent" surface: a scrolling timeline of agent events plus a
+ * composer that sends a message back to the agent. Built on the existing
+ * ChatThread / ChatComposer, so it inherits their auto-scroll, streaming
+ * indicators, tool/status rows, and keyboard handling. Fully generic — it takes
+ * `ChatMessageData[]` and an `onSend` callback; it knows nothing about the
+ * transport or any app model.
+ */
+export function ConversationTimeline({
+  entries,
+  title,
+  progressPercent,
+  statusLabel,
+  onSend,
+  isLoading = false,
+  onLoadMore,
+  hasMore = false,
+  composerPlaceholder = 'Message the agent…',
+  emptyState,
+  renderContent,
+  className,
+}: ConversationTimelineProps) {
+  const [sending, setSending] = React.useState(false)
+
+  const handleSubmit = React.useCallback(
+    (text: string) => {
+      if (!onSend) return
+      const result = onSend(text)
+      if (result && typeof (result as Promise<void>).then === 'function') {
+        setSending(true)
+        void (result as Promise<void>).finally(() => setSending(false))
+      }
+    },
+    [onSend],
+  )
+
+  const showHeader = !!title || !!statusLabel || progressPercent != null
+
+  return (
+    <div className={cn('flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card', className)}>
+      {showHeader && (
+        <div className="flex-shrink-0 border-b border-border px-4 py-3">
+          <div className="flex items-center justify-between gap-2">
+            {title && <h3 className="truncate text-sm font-semibold text-foreground">{title}</h3>}
+            {statusLabel && <span className="text-xs text-muted-foreground">{statusLabel}</span>}
+          </div>
+          {progressPercent != null && (
+            <div className="mt-2">
+              <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
+                <span>Progress</span>
+                <span>{Math.round(progressPercent)}%</span>
+              </div>
+              <div className="h-2 overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full rounded-full bg-primary transition-[width] duration-500"
+                  style={{ width: `${Math.max(0, Math.min(100, progressPercent))}%` }}
+                  role="progressbar"
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={Math.round(progressPercent)}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="flex min-h-0 flex-1 flex-col">
+        {hasMore && onLoadMore && (
+          <div className="flex-shrink-0 border-b border-border p-2 text-center">
+            <button
+              type="button"
+              onClick={onLoadMore}
+              className="text-xs text-primary transition-colors hover:underline"
+            >
+              Load earlier messages
+            </button>
+          </div>
+        )}
+        <ChatThread
+          messages={entries}
+          busy={isLoading}
+          emptyState={emptyState}
+          renderContent={renderContent}
+          className="flex-1"
+        />
+      </div>
+
+      {onSend && (
+        <ChatComposer
+          onSubmit={handleSubmit}
+          placeholder={composerPlaceholder}
+          busy={sending}
+          className="flex-shrink-0"
+        />
+      )}
+    </div>
+  )
+}

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>
+  )
+}