@silvery/examples 0.17.3 → 0.17.5

package/apps/aichat/components.tsx

@@ -1,469 +0,0 @@
-/**
- * UI components for the AI coding agent demo.
- *
- * Components: ExchangeItem, StatusBar, DemoFooter (public)
- * Internal: LinkifiedLine, ThinkingBlock, ToolCallBlock, StreamingText
- */
-
-import type { JSX } from "react"
-import React, { useState, useEffect, useCallback, useRef } from "react"
-import { Box, Text, Link, Spinner, TextInput, useTerminalFocused } from "silvery"
-import type { Exchange, ToolCall } from "./types.js"
-import { TOOL_COLORS, URL_RE, RANDOM_USER_COMMANDS, CONTEXT_WINDOW } from "./script.js"
-import type { StreamPhase } from "./state.js"
-import { formatTokens, formatCost, computeCumulativeTokens } from "./state.js"
-
-// ============================================================================
-// Footer Control — simplified interface for parent to trigger submit
-// ============================================================================
-
-export interface FooterControl {
-  submit: () => void
-}
-
-// ============================================================================
-// Internal Helpers
-// ============================================================================
-
-/** Split content into a short title (first sentence) and the remaining body.
- * Title must be ≤40 chars to fit on the header line with metadata. */
-function splitTitleBody(content: string): { title: string; body: string } {
-  const match = content.match(/^(.+?[.!?])\s+(.+)$/s)
-  if (match && match[1]!.length <= 40) return { title: match[1]!, body: match[2]! }
-  // No sentence break or sentence too long — short content goes entirely to title
-  if (content.length <= 40) return { title: content, body: "" }
-  return { title: "", body: content }
-}
-
-// ============================================================================
-// Internal Components
-// ============================================================================
-
-/** Render a line with auto-linked URLs. */
-function LinkifiedLine({ text, dim, color }: { text: string; dim?: boolean; color?: string }) {
-  const parts: JSX.Element[] = []
-  let lastIndex = 0
-  let match: RegExpExecArray | null
-
-  URL_RE.lastIndex = 0
-  while ((match = URL_RE.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push(
-        <Text key={`t${lastIndex}`} dim={dim} color={color}>
-          {text.slice(lastIndex, match.index)}
-        </Text>,
-      )
-    }
-    const url = match[0]
-    parts.push(
-      <Link key={`l${match.index}`} href={url} dim={dim}>
-        {url}
-      </Link>,
-    )
-    lastIndex = match.index + url.length
-  }
-  if (lastIndex < text.length) {
-    parts.push(
-      <Text key={`t${lastIndex}`} dim={dim} color={color}>
-        {text.slice(lastIndex)}
-      </Text>,
-    )
-  }
-  if (parts.length === 0) {
-    return (
-      <Text dim={dim} color={color}>
-        {text}
-      </Text>
-    )
-  }
-  return <Text>{parts}</Text>
-}
-
-/** Thinking block — shows thinking text preview in the body. */
-function ThinkingBlock({ text, done }: { text: string; done: boolean }) {
-  if (done)
-    return (
-      <Text color="$muted" italic>
-        {"▸ thought"}
-      </Text>
-    )
-  return (
-    <Text color="$muted" wrap="truncate" italic>
-      {text}
-    </Text>
-  )
-}
-
-/** Tool call with lifecycle: spinner -> output -> checkmark. */
-function ToolCallBlock({ call, phase }: { call: ToolCall; phase: "pending" | "running" | "done" }) {
-  const color = TOOL_COLORS[call.tool] ?? "$muted"
-
-  return (
-    <Box flexDirection="column" marginTop={0}>
-      <Text>
-        {phase === "running" ? (
-          <>
-            <Spinner type="dots" />{" "}
-          </>
-        ) : phase === "done" ? (
-          <Text color="$success">{"✓ "}</Text>
-        ) : (
-          <Text color="$muted">{"○ "}</Text>
-        )}
-        <Text color={color} bold>
-          {call.tool}
-        </Text>{" "}
-        {call.tool === "Bash" || call.tool === "Grep" || call.tool === "Glob" ? (
-          <Text color="$muted">{call.args}</Text>
-        ) : (
-          <Link href={`file://${call.args}`}>{call.args}</Link>
-        )}
-      </Text>
-      {phase === "done" && (
-        <Box flexDirection="column" paddingLeft={2}>
-          {call.output.map((line, i) => {
-            if (line.startsWith("+")) return <LinkifiedLine key={i} text={line} color="$success" />
-            if (line.startsWith("-")) return <LinkifiedLine key={i} text={line} color="$error" />
-            return <LinkifiedLine key={i} text={line} />
-          })}
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-/** Streaming text — reveals content word by word. */
-function StreamingText({
-  fullText,
-  revealFraction,
-  showCursor,
-}: {
-  fullText: string
-  revealFraction: number
-  showCursor: boolean
-}) {
-  if (revealFraction >= 1) {
-    return <Text>{fullText}</Text>
-  }
-
-  const words = fullText.split(/(\s+)/)
-  const totalWords = words.filter((w) => w.trim()).length
-  const revealWords = Math.ceil(totalWords * revealFraction)
-
-  let wordCount = 0
-  let revealedText = ""
-  for (const word of words) {
-    if (word.trim()) {
-      wordCount++
-      if (wordCount > revealWords) break
-    }
-    revealedText += word
-  }
-
-  return (
-    <Text>
-      {revealedText}
-      {showCursor && <Text color="$primary">{"▌"}</Text>}
-    </Text>
-  )
-}
-
-// ============================================================================
-// Exchange Item — live rendering with streaming, spinners, scrollback freeze
-// ============================================================================
-
-export function ExchangeItem({
-  exchange,
-  streamPhase,
-  revealFraction,
-  pulse,
-  isLatest,
-  isFirstInGroup,
-  isLastInGroup,
-}: {
-  exchange: Exchange
-  streamPhase: StreamPhase
-  revealFraction: number
-  pulse: boolean
-  isLatest: boolean
-  isFirstInGroup: boolean
-  isLastInGroup: boolean
-}) {
-  if (exchange.role === "system") {
-    return (
-      <Box flexDirection="column">
-        <Text> </Text>
-        <Text bold>AI Chat</Text>
-        <Text> </Text>
-        <Text color="$muted">{exchange.content}</Text>
-        <Text> </Text>
-      </Box>
-    )
-  }
-
-  const isUser = exchange.role === "user"
-
-  if (isUser) {
-    return (
-      <Box paddingX={1} flexDirection="row" backgroundColor="$surface-bg">
-        <Text bold color="$focusring">
-          {"❯"}{" "}
-        </Text>
-        <Box flexShrink={1}>
-          <Text>{exchange.content}</Text>
-        </Box>
-      </Box>
-    )
-  }
-
-  const phase = isLatest ? streamPhase : "done"
-  const fraction = isLatest ? revealFraction : 1
-
-  const toolCalls = exchange.toolCalls ?? []
-  const toolRevealCount = phase === "tools" || phase === "done" ? toolCalls.length : 0
-  const hasOperations = toolCalls.length > 0 || !!exchange.thinking
-
-  // Metadata: token count + thought indicator
-  const metaParts: string[] = []
-  if (exchange.tokens && phase === "done") metaParts.push(`${formatTokens(exchange.tokens.output)} tokens`)
-  if (exchange.thinking && (phase === "done" || phase === "streaming")) metaParts.push("thought for 1s")
-  const metaStr = metaParts.length > 0 ? ` (${metaParts.join(" · ")})` : ""
-
-  // Split content into title (first sentence) and body (rest)
-  const { title, body } = splitTitleBody(exchange.content)
-
-  const bulletColor = hasOperations ? "$success" : "$muted"
-  const contentText = title ? body : exchange.content
-
-  return (
-    <Box flexDirection="column">
-      <Text>
-        <Text bold color={bulletColor} dimColor={hasOperations && !pulse && phase !== "done"}>
-          {"●"}
-        </Text>
-        {phase === "thinking" ? (
-          <Text color="$muted" italic>
-            {" "}
-            <Spinner type="dots" /> thinking
-          </Text>
-        ) : (
-          <>
-            {title && <Text> {title}</Text>}
-            <Text color="$muted">{metaStr}</Text>
-          </>
-        )}
-      </Text>
-
-      <Box
-        flexDirection="column"
-        borderStyle="bold"
-        borderColor="$border"
-        borderLeft
-        borderRight={false}
-        borderTop={false}
-        borderBottom={false}
-        paddingLeft={1}
-      >
-        {exchange.thinking && (phase === "thinking" || phase === "streaming") && (
-          <ThinkingBlock text={exchange.thinking} done={phase !== "thinking"} />
-        )}
-
-        {(phase === "streaming" || phase === "tools" || phase === "done") && contentText && (
-          <StreamingText
-            fullText={contentText}
-            revealFraction={phase === "streaming" ? fraction : 1}
-            showCursor={phase === "streaming" && fraction < 1}
-          />
-        )}
-
-        {toolRevealCount > 0 && (
-          <Box flexDirection="column">
-            {toolCalls.map((call, i) => (
-              <ToolCallBlock
-                key={i}
-                call={call}
-                phase={phase === "done" ? "done" : i < toolRevealCount - 1 ? "done" : "running"}
-              />
-            ))}
-          </Box>
-        )}
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Status Bar — single compact row
-// ============================================================================
-
-export function StatusBar({
-  exchanges,
-  compacting,
-  done,
-  elapsed,
-  contextBaseline = 0,
-  ctrlDPending = false,
-}: {
-  exchanges: Exchange[]
-  compacting: boolean
-  done: boolean
-  elapsed: number
-  contextBaseline?: number
-  ctrlDPending?: boolean
-}) {
-  const cumulative = computeCumulativeTokens(exchanges)
-  const cost = formatCost(cumulative.input, cumulative.output)
-  const minutes = Math.floor(elapsed / 60)
-  const seconds = elapsed % 60
-  const elapsedStr = `${minutes}:${seconds.toString().padStart(2, "0")}`
-
-  const CTX_W = 20
-  const effectiveContext = Math.max(0, cumulative.currentContext - contextBaseline)
-  const ctxFrac = effectiveContext / CONTEXT_WINDOW
-  const ctxFilled = Math.round(Math.min(ctxFrac, 1) * CTX_W)
-  const ctxPct = Math.round(ctxFrac * 100)
-  const ctxColor = ctxPct > 100 ? "$error" : ctxPct > 80 ? "$warning" : "$primary"
-  const ctxBar = "█".repeat(ctxFilled) + "░".repeat(CTX_W - ctxFilled)
-
-  const keys = ctrlDPending ? "Ctrl-D again to exit" : compacting ? "compacting..." : "esc quit"
-
-  return (
-    <Box flexDirection="row" justifyContent="space-between" width="100%">
-      <Text color="$muted" wrap="truncate">
-        {elapsedStr}
-        {"  "}
-        {keys}
-      </Text>
-      <Text color={ctxPct > 80 ? ctxColor : "$muted"} wrap="truncate">
-        ctx {ctxBar} {ctxPct}%{"  "}
-        {cost}
-      </Text>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Footer — owns inputText state so typing doesn't re-render the parent
-// ============================================================================
-
-const AUTO_SUBMIT_DELAY = 10_000
-
-export function DemoFooter({
-  controlRef,
-  onSubmit,
-  streamPhase,
-  done,
-  compacting,
-  exchanges,
-  contextBaseline = 0,
-  ctrlDPending = false,
-  nextMessage = "",
-  autoTypingText = null,
-}: {
-  controlRef: React.RefObject<FooterControl>
-  onSubmit: (text: string) => void
-  streamPhase: StreamPhase
-  done: boolean
-  compacting: boolean
-  exchanges: Exchange[]
-  contextBaseline?: number
-  ctrlDPending?: boolean
-  nextMessage?: string
-  autoTypingText?: string | null
-}) {
-  const terminalFocused = useTerminalFocused()
-  const [inputText, setInputText] = useState("")
-  const inputTextRef = useRef(inputText)
-  inputTextRef.current = inputText
-
-  const startRef = useRef(Date.now())
-  const [elapsed, setElapsed] = useState(0)
-  useEffect(() => {
-    const timer = setInterval(() => setElapsed(Math.floor((Date.now() - startRef.current) / 1000)), 1000)
-    return () => clearInterval(timer)
-  }, [])
-
-  const [randomIdx, setRandomIdx] = useState(() => Math.floor(Math.random() * RANDOM_USER_COMMANDS.length))
-  const randomPlaceholder = RANDOM_USER_COMMANDS[randomIdx % RANDOM_USER_COMMANDS.length]!
-  const effectiveMessage = nextMessage || randomPlaceholder
-  const placeholder = !terminalFocused
-    ? "Click to focus"
-    : ctrlDPending
-      ? "Press Ctrl-D again to exit"
-      : effectiveMessage
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      if (!text.trim() && effectiveMessage) {
-        onSubmit(effectiveMessage)
-      } else {
-        onSubmit(text)
-      }
-      setInputText("")
-      setRandomIdx((i) => i + 1)
-    },
-    [onSubmit, effectiveMessage],
-  )
-
-  // Expose submit() to parent — replaces the old getText/setText/getPlaceholder pattern
-  controlRef.current = {
-    submit: () => handleSubmit(inputTextRef.current),
-  }
-
-  // Auto-submit: if idle for AUTO_SUBMIT_DELAY, submit the placeholder message
-  const autoSubmitRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  useEffect(() => {
-    if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current)
-    if (
-      done ||
-      compacting ||
-      streamPhase !== "done" ||
-      !effectiveMessage ||
-      inputText ||
-      autoTypingText ||
-      !terminalFocused
-    )
-      return
-    autoSubmitRef.current = setTimeout(() => onSubmit(effectiveMessage), AUTO_SUBMIT_DELAY)
-    return () => {
-      if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current)
-    }
-  }, [done, compacting, streamPhase, effectiveMessage, inputText, autoTypingText, onSubmit])
-
-  const displayText = autoTypingText ?? inputText
-
-  return (
-    <Box flexDirection="column" width="100%">
-      <Text> </Text>
-      <Box
-        flexDirection="row"
-        borderStyle="round"
-        borderColor={!done && terminalFocused ? "$focusborder" : "$inputborder"}
-        paddingX={1}
-      >
-        <Text bold color="$focusring">
-          {"❯"}{" "}
-        </Text>
-        <Box flexShrink={1} flexGrow={1}>
-          <TextInput
-            value={displayText}
-            onChange={autoTypingText ? () => {} : setInputText}
-            onSubmit={handleSubmit}
-            placeholder={placeholder}
-            isActive={!done && !autoTypingText && terminalFocused}
-          />
-        </Box>
-      </Box>
-      <Box paddingX={2} width="100%">
-        <StatusBar
-          exchanges={exchanges}
-          compacting={compacting}
-          done={done}
-          elapsed={elapsed}
-          contextBaseline={contextBaseline}
-          ctrlDPending={ctrlDPending}
-        />
-      </Box>
-    </Box>
-  )
-}

package/apps/aichat/index.tsx

@@ -1,220 +0,0 @@
-/**
- * AI Chat — Coding Agent Demo
- *
- * Showcases ListView with streaming, tool calls, context tracking.
- * TEA state machine drives all animation; ListView caches completed
- * exchanges while live content stays in the React tree.
- *
- * Flags: --auto (auto-advance) --fast (skip animation) --stress (200 exchanges)
- */
-
-import React, { useCallback, useEffect, useRef, useMemo } from "react"
-import { Box, Text, Spinner, ListView, useTea, useWindowSize } from "silvery"
-import type { ListItemMeta } from "silvery"
-import { run, useInput, useExit, type Key } from "silvery/runtime"
-import type { ExampleMeta } from "../../_banner.js"
-import type { ScriptEntry } from "./types.js"
-import { SCRIPT, generateStressScript, CONTEXT_WINDOW } from "./script.js"
-import {
-  INIT_STATE,
-  createDemoUpdate,
-  computeCumulativeTokens,
-  getNextMessage,
-  type DemoState,
-  type DemoMsg,
-} from "./state.js"
-import { ExchangeItem, DemoFooter } from "./components.js"
-import type { FooterControl } from "./components.js"
-
-// Re-export for test consumers
-export { SCRIPT, generateStressScript, CONTEXT_WINDOW } from "./script.js"
-export type { ScriptEntry } from "./types.js"
-export type { Exchange, ToolCall } from "./types.js"
-
-export const meta: ExampleMeta = {
-  name: "AI Coding Agent",
-  description: "Coding agent showcase — ListView, streaming, context tracking",
-  demo: true,
-  features: ["ListView", "cache", "inline mode", "streaming", "OSC 8 links"],
-  // TODO: Add OSC 133 marker support to ListView (km-silvery.listview-markers)
-}
-
-// ============================================================================
-// AIChat — TEA state machine + ListView
-// ============================================================================
-
-export function AIChat({
-  script,
-  autoStart,
-  fastMode,
-}: {
-  script: ScriptEntry[]
-  autoStart: boolean
-  fastMode: boolean
-}) {
-  const exit = useExit()
-  const { rows: termRows } = useWindowSize()
-  const update = useMemo(() => createDemoUpdate(script, fastMode, autoStart), [script, fastMode, autoStart])
-  const [state, send] = useTea(INIT_STATE, update)
-  const footerControlRef = useRef<FooterControl>({ submit: () => {} })
-
-  useEffect(() => send({ type: "mount" }), [send])
-  useAutoCompact(state, send)
-  useAutoExit(autoStart, state.done, exit)
-  useKeyBindings(state, send, footerControlRef)
-
-  const renderExchange = useCallback(
-    (exchange: (typeof state.exchanges)[number], index: number, _meta: ListItemMeta) => {
-      const isLatest = index === state.exchanges.length - 1
-      return (
-        <Box flexDirection="column">
-          {index > 0 && <Text> </Text>}
-          {state.compacting && isLatest && <CompactingOverlay />}
-          {state.done && autoStart && isLatest && <SessionComplete />}
-          <ExchangeItem
-            exchange={exchange}
-            streamPhase={state.streamPhase}
-            revealFraction={state.revealFraction}
-            pulse={state.pulse}
-            isLatest={isLatest}
-            isFirstInGroup={exchange.role !== (index > 0 ? state.exchanges[index - 1]!.role : null)}
-            isLastInGroup={
-              exchange.role !== (index < state.exchanges.length - 1 ? state.exchanges[index + 1]!.role : null)
-            }
-          />
-        </Box>
-      )
-    },
-    [state, autoStart],
-  )
-
-  return (
-    <Box flexDirection="column" paddingX={1}>
-      <ListView
-        items={state.exchanges}
-        getKey={(ex) => ex.id}
-        height={termRows}
-        estimateHeight={6}
-        renderItem={renderExchange}
-        scrollTo={state.exchanges.length - 1}
-        cache={{
-          mode: "virtual",
-          isCacheable: (_ex, index) => index < state.exchanges.length - 1,
-        }}
-        listFooter={
-          <DemoFooter
-            controlRef={footerControlRef}
-            onSubmit={(text) => send({ type: "submit", text })}
-            streamPhase={state.streamPhase}
-            done={state.done}
-            compacting={state.compacting}
-            exchanges={state.exchanges}
-            contextBaseline={state.contextBaseline}
-            ctrlDPending={state.ctrlDPending}
-            nextMessage={getNextMessage(state, script, autoStart)}
-            autoTypingText={state.autoTyping ? state.autoTyping.full.slice(0, state.autoTyping.revealed) : null}
-          />
-        }
-      />
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-export async function main() {
-  const args = process.argv.slice(2)
-  const script = args.includes("--stress") ? generateStressScript() : SCRIPT
-  const mode = args.includes("--inline") ? "inline" : "fullscreen"
-
-  using handle = await run(
-    <AIChat script={script} autoStart={args.includes("--auto")} fastMode={args.includes("--fast")} />,
-    { mode: mode as "inline" | "fullscreen", focusReporting: true },
-  )
-  await handle.waitUntilExit()
-}
-
-if (import.meta.main) {
-  await main()
-}
-
-// ============================================================================
-// Hooks
-// ============================================================================
-
-function useAutoCompact(state: DemoState, send: (msg: DemoMsg) => void) {
-  useEffect(() => {
-    if (state.done || state.compacting) return
-    const cumulative = computeCumulativeTokens(state.exchanges)
-    const effective = Math.max(0, cumulative.currentContext - state.contextBaseline)
-    if (effective >= CONTEXT_WINDOW * 0.95) send({ type: "compact" })
-  }, [state.exchanges, state.done, state.compacting, state.contextBaseline, send])
-}
-
-function useAutoExit(autoStart: boolean, done: boolean, exit: () => void) {
-  useEffect(() => {
-    if (!autoStart || !done) return
-    const timer = setTimeout(exit, 1000)
-    return () => clearTimeout(timer)
-  }, [autoStart, done, exit])
-}
-
-function useKeyBindings(
-  state: DemoState,
-  send: (msg: DemoMsg) => void,
-  footerControlRef: React.RefObject<FooterControl>,
-) {
-  const lastCtrlDRef = useRef(0)
-
-  useInput((input: string, key: Key) => {
-    if (key.escape) return "exit"
-    if (key.ctrl && input === "d") {
-      const now = Date.now()
-      if (now - lastCtrlDRef.current < 500) return "exit"
-      lastCtrlDRef.current = now
-      send({ type: "setCtrlDPending", pending: true })
-      return
-    }
-    if (lastCtrlDRef.current > 0) {
-      lastCtrlDRef.current = 0
-      send({ type: "setCtrlDPending", pending: false })
-    }
-    if (key.tab) {
-      if (state.done || state.compacting) return
-      footerControlRef.current.submit()
-      return
-    }
-    if (key.ctrl && input === "l") {
-      send({ type: "compact" })
-    }
-  })
-}
-
-// ============================================================================
-// Inline UI fragments
-// ============================================================================
-
-function CompactingOverlay() {
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="$warning" paddingX={1} overflow="hidden">
-      <Text color="$warning" bold>
-        <Spinner type="arc" /> Compacting context
-      </Text>
-      <Text> </Text>
-      <Text color="$muted">Freezing exchanges into terminal scrollback. Scroll up to review.</Text>
-    </Box>
-  )
-}
-
-function SessionComplete() {
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="$success" paddingX={1}>
-      <Text color="$success" bold>
-        {"✓"} Session complete
-      </Text>
-      <Text color="$muted">Scroll up to review — colors, borders, and hyperlinks preserved in scrollback.</Text>
-    </Box>
-  )
-}