@spacek33z/autoauto 0.0.1

package/src/components/AgentPanel.tsx

@@ -0,0 +1,254 @@
+import { useMemo } from "react"
+import type { ExperimentResult } from "../lib/run.ts"
+import { parseSecondaryValues } from "../lib/run.ts"
+import type { SecondaryMetric } from "../lib/programs.ts"
+import { syntaxStyle } from "../lib/syntax-theme.ts"
+import { statusColor } from "./ResultsTable.tsx"
+
+interface AgentPanelProps {
+  streamingText: string
+  toolStatus: string | null
+  isRunning: boolean
+  selectedResult?: ExperimentResult | null
+  phaseLabel?: string | null
+  experimentNumber?: number
+  secondaryMetrics?: Record<string, SecondaryMetric>
+}
+
+function ExperimentDetail({ result, secondaryMetrics }: {
+  result: ExperimentResult
+  secondaryMetrics?: Record<string, SecondaryMetric>
+}) {
+  const { quality_gates: gateValues, secondary_metrics: secondaryValues } = parseSecondaryValues(result.secondary_values)
+  const gateEntries = Object.entries(gateValues)
+  const secondaryEntries = Object.entries(secondaryValues)
+
+  return (
+    <box flexDirection="column" paddingX={1} gap={1}>
+      <box flexDirection="column">
+        <text selectable><strong fg="#ffffff">Experiment #{result.experiment_number}</strong></text>
+        <text fg="#666666">{"─".repeat(40)}</text>
+      </box>
+
+      <box flexDirection="column">
+        <text selectable><strong fg="#ffffff">Status:  </strong><strong fg={statusColor(result.status)}>{result.status}</strong></text>
+        <text selectable><strong fg="#ffffff">Commit:  </strong><strong fg="#ffffff">{result.commit}</strong></text>
+        <text selectable><strong fg="#ffffff">Metric:  </strong><strong fg="#ffffff">{result.metric_value ?? "—"}</strong></text>
+      </box>
+
+      {gateEntries.length > 0 && (
+        <box flexDirection="column">
+          <text><strong fg="#ffffff">Quality Gates:</strong></text>
+          {gateEntries.map(([key, val]) => (
+            <text key={key} fg="#ffffff" selectable>  {key}: {String(val)}</text>
+          ))}
+        </box>
+      )}
+
+      {secondaryEntries.length > 0 && (
+        <box flexDirection="column">
+          <text><strong fg="#ffffff">Secondary Metrics:</strong></text>
+          {secondaryEntries.map(([key, val]) => {
+            const dir = secondaryMetrics?.[key]?.direction
+            const dirLabel = dir ? ` (${dir} is better)` : ""
+            return (
+              <text key={key} fg="#ffffff" selectable>  {key}: {String(val)}{dirLabel}</text>
+            )
+          })}
+        </box>
+      )}
+
+      <box flexDirection="column">
+        <text><strong fg="#ffffff">Description:</strong></text>
+        <text fg="#ffffff" selectable>{result.description}</text>
+      </box>
+    </box>
+  )
+}
+
+type StreamSegment =
+  | { type: "text"; content: string }
+  | { type: "event"; time: number; status?: string }
+
+function parseStreamSegments(text: string): StreamSegment[] {
+  const segments: StreamSegment[] = []
+  const lines = text.split("\n")
+  let textLines: string[] = []
+
+  function flushText() {
+    if (textLines.length > 0) {
+      const content = textLines.join("\n")
+      if (content.trim()) {
+        segments.push({ type: "text", content })
+      }
+      textLines = []
+    }
+  }
+
+  for (let i = 0; i < lines.length; i++) {
+    const timeMatch = lines[i].match(/^\[time:(\d+)\]$/)
+
+    if (timeMatch) {
+      flushText()
+      const epoch = Number(timeMatch[1])
+      // Merge with following tool marker if present
+      const nextToolMatch = lines[i + 1]?.match(/^\[tool\] (.+)$/)
+      if (nextToolMatch) {
+        segments.push({ type: "event", time: epoch, status: nextToolMatch[1] })
+        i++
+      } else {
+        segments.push({ type: "event", time: epoch })
+      }
+    } else if (lines[i].startsWith("[tool] ")) {
+      flushText()
+      segments.push({ type: "event", time: 0, status: lines[i].slice(7) })
+    } else {
+      textLines.push(lines[i])
+    }
+  }
+
+  flushText()
+  return segments
+}
+
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+
+function formatTimestamp(epoch: number): string {
+  if (epoch === 0) return ""
+  const date = new Date(epoch)
+  const now = new Date()
+  const isToday = date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate()
+
+  const hours = String(date.getHours()).padStart(2, "0")
+  const minutes = String(date.getMinutes()).padStart(2, "0")
+  const time = `${hours}:${minutes}`
+
+  if (isToday) return time
+  return `${MONTH_NAMES[date.getMonth()]} ${date.getDate()} ${time}`
+}
+
+export function AgentPanel({ streamingText, toolStatus, isRunning, selectedResult, phaseLabel, experimentNumber, secondaryMetrics }: AgentPanelProps) {
+  const { segments, hasMarkers, lastTextIdx } = useMemo(() => {
+    const segs = parseStreamSegments(streamingText)
+    return {
+      segments: segs,
+      hasMarkers: segs.some(s => s.type === "event"),
+      lastTextIdx: segs.findLastIndex(s => s.type === "text"),
+    }
+  }, [streamingText])
+
+  if (selectedResult) {
+    return (
+      <box flexDirection="column" flexGrow={1}>
+        <scrollbox flexGrow={1}>
+          <ExperimentDetail result={selectedResult} secondaryMetrics={secondaryMetrics} />
+        </scrollbox>
+        <box paddingX={1}>
+          <text fg="#666666">Esc to return to live view</text>
+        </box>
+      </box>
+    )
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <scrollbox flexGrow={1} stickyScroll stickyStart="bottom">
+        {!streamingText && isRunning && (
+          <box paddingX={1} flexDirection="column">
+            <WaitingIndicator phaseLabel={phaseLabel} experimentNumber={experimentNumber} toolStatus={toolStatus} />
+          </box>
+        )}
+        {streamingText && (
+          <box paddingX={1} flexDirection="column">
+            {toolStatus && isRunning && !hasMarkers && (
+              <text fg="#666666" selectable>{toolStatus}</text>
+            )}
+            {hasMarkers ? (
+              segments.map((segment, i) => {
+                if (segment.type === "event") {
+                  const ts = formatTimestamp(segment.time)
+                  if (segment.status) {
+                    return (
+                      <text key={i} fg="#666666" selectable>
+                        {ts ? <><span fg="#555555">{ts}</span>{"  "}</> : null}{segment.status}
+                      </text>
+                    )
+                  }
+                  return ts ? <text key={i} fg="#555555" selectable>{ts}</text> : null
+                }
+                return (
+                  <markdown key={i} content={segment.content} syntaxStyle={syntaxStyle} streaming={isRunning && i === lastTextIdx} />
+                )
+              })
+            ) : (
+              <markdown content={streamingText} syntaxStyle={syntaxStyle} streaming={isRunning} />
+            )}
+          </box>
+        )}
+      </scrollbox>
+    </box>
+  )
+}
+
+function WaitingIndicator({ phaseLabel, experimentNumber, toolStatus }: { phaseLabel?: string | null; experimentNumber?: number; toolStatus?: string | null }) {
+  const expLabel = experimentNumber ? `#${experimentNumber}` : ""
+
+  // Phase-specific status
+  if (phaseLabel) {
+    const lower = phaseLabel.toLowerCase()
+    if (lower.includes("baseline") && !lower.includes("re-baseline")) {
+      return (
+        <box flexDirection="column">
+          <text><span fg="#ffffff">{">"}</span> <span fg="#ffffff">Establishing baseline</span></text>
+          <text fg="#666666">  Running measurement to set the starting metric</text>
+        </box>
+      )
+    }
+    if (lower.includes("measuring") || lower.includes("re-baseline")) {
+      return (
+        <box flexDirection="column">
+          <text><span fg="#ffffff">{">"}</span> <span fg="#ffffff">{phaseLabel}</span></text>
+          <text fg="#666666">  Evaluating experiment {expLabel} via measure.sh</text>
+        </box>
+      )
+    }
+    if (lower.includes("reverting")) {
+      return (
+        <box flexDirection="column">
+          <text><span fg="#ffffff">{">"}</span> <span fg="#e0af68">{phaseLabel}</span></text>
+          <text fg="#666666">  Resetting to last known good state</text>
+        </box>
+      )
+    }
+    if (lower.includes("kept")) {
+      return <text><span fg="#ffffff">{">"}</span> <span fg="#9ece6a">{phaseLabel}</span></text>
+    }
+    if (lower.includes("starting daemon")) {
+      return (
+        <box flexDirection="column">
+          <text><span fg="#ffffff">{">"}</span> <span fg="#ffffff">Starting daemon</span></text>
+          <text fg="#666666">  Creating worktree and spawning background process</text>
+        </box>
+      )
+    }
+  }
+
+  // Agent running but no text yet — show tool if available, otherwise thinking
+  if (toolStatus) {
+    return (
+      <box flexDirection="column">
+        <text><span fg="#ffffff">{">"}</span> <span fg="#ffffff">Agent working</span> <span fg="#666666">{expLabel}</span></text>
+        <text fg="#666666">  {toolStatus}</text>
+      </box>
+    )
+  }
+
+  return (
+    <box flexDirection="column">
+      <text><span fg="#ffffff">{">"}</span> <span fg="#ffffff">Agent thinking</span> <span fg="#666666">{expLabel}</span></text>
+      <text fg="#666666">  Building context and waiting for first response</text>
+    </box>
+  )
+}

package/src/components/Chat.test.tsx

@@ -0,0 +1,71 @@
+import { afterEach, describe, expect, test } from "bun:test"
+import { TextareaRenderable, type Renderable } from "@opentui/core"
+import { testRender } from "@opentui/react/test-utils"
+import { act } from "react"
+import { Chat } from "./Chat.tsx"
+import { setProvider } from "../lib/agent/index.ts"
+import { MockProvider } from "../lib/agent/mock-provider.ts"
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | null = null
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup?.renderer.destroy()
+    })
+    testSetup = null
+  }
+})
+
+function findTextarea(renderable: Renderable): TextareaRenderable | null {
+  if (renderable instanceof TextareaRenderable) return renderable
+  for (const child of renderable.getChildren()) {
+    const textarea = findTextarea(child)
+    if (textarea) return textarea
+  }
+  return null
+}
+
+async function pressRaw(sequence: string): Promise<void> {
+  await act(async () => {
+    await testSetup?.mockInput.pressKeys([sequence])
+    await testSetup?.renderOnce()
+  })
+}
+
+describe("Chat", () => {
+  test("expands textarea after Shift+Enter newline", async () => {
+    setProvider("claude", new MockProvider([]))
+    testSetup = await testRender(<Chat provider="claude" />, {
+      width: 80,
+      height: 20,
+      useKittyKeyboard: {},
+    })
+
+    await act(async () => {
+      await testSetup?.renderOnce()
+    })
+
+    const textarea = findTextarea(testSetup.renderer.root)
+    expect(textarea).not.toBeNull()
+
+    await pressRaw("h")
+    await pressRaw("e")
+    await pressRaw("l")
+    await pressRaw("l")
+    await pressRaw("o")
+    await pressRaw("\x1b[13;2u")
+    await pressRaw("w")
+    await pressRaw("o")
+    await pressRaw("r")
+    await pressRaw("l")
+    await pressRaw("d")
+
+    expect(textarea!.plainText).toBe("hello\nworld")
+    expect(textarea!.height).toBe(2)
+
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toContain("hello")
+    expect(frame).toContain("world")
+  })
+})

package/src/components/Chat.tsx

@@ -0,0 +1,308 @@
+import { useState, useEffect, useRef, useCallback } from "react"
+import { useKeyboard } from "@opentui/react"
+import type { TextareaRenderable } from "@opentui/core"
+import { DEFAULT_SYSTEM_PROMPT } from "../lib/system-prompts/index.ts"
+import type { EffortLevel } from "../lib/config.ts"
+import { syntaxStyle } from "../lib/syntax-theme.ts"
+import { getProvider, type AgentProviderID, type AgentSession } from "../lib/agent/index.ts"
+import { formatToolEvent } from "../lib/tool-events.ts"
+import { formatShellError } from "../lib/git.ts"
+
+const SPINNER_CHARS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+function ToolStatusSpinner({ status }: { status: string }) {
+  const [tick, setTick] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => setTick((t) => t + 1), 100)
+    return () => clearInterval(interval)
+  }, [])
+
+  const spinner = SPINNER_CHARS[tick % SPINNER_CHARS.length]
+  const seconds = Math.floor(tick / 10)
+  const timeStr =
+    seconds >= 60
+      ? `${Math.floor(seconds / 60)}m${String(seconds % 60).padStart(2, "0")}s`
+      : `${seconds}s`
+
+  return (
+    <text fg="#888888" selectable>
+      {spinner} {status} ({timeStr})
+    </text>
+  )
+}
+
+interface ChatMessage {
+  id: string
+  role: "user" | "assistant"
+  content: string
+}
+
+
+interface ChatProps {
+  /** Working directory for agent tools (target repo path) */
+  cwd?: string
+  /** System prompt for the agent */
+  systemPrompt?: string
+  /** Tools to make available to the agent */
+  tools?: string[]
+  /** Tools to auto-allow without permission prompts */
+  allowedTools?: string[]
+  /** Max conversation turns (user message + assistant response pairs) */
+  maxTurns?: number
+  /** Model alias ('sonnet', 'opus') or full model ID */
+  model?: string
+  provider?: AgentProviderID
+  /** Reasoning effort level */
+  effort?: EffortLevel
+  /** Auto-submit this message on mount as the first user message */
+  initialMessage?: string
+  /** Hint shown in the empty chat area before any messages */
+  emptyStateHint?: string
+  /** Placeholder text for the input field */
+  inputPlaceholder?: string
+  /** Title shown on the scrollbox border */
+  title?: string
+}
+
+export function Chat({
+  cwd,
+  systemPrompt = DEFAULT_SYSTEM_PROMPT,
+  tools,
+  allowedTools,
+  maxTurns,
+  model,
+  provider = "claude",
+  effort,
+  initialMessage,
+  emptyStateHint,
+  inputPlaceholder,
+  title,
+}: ChatProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [streamingText, setStreamingText] = useState("")
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [toolStatus, setToolStatus] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const sessionRef = useRef<AgentSession | null>(null)
+  const textareaRef = useRef<TextareaRenderable | null>(null)
+  const [inputKey, setInputKey] = useState(0)
+  const [inputBoxHeight, setInputBoxHeight] = useState(3)
+
+  // Capture config in refs — the agent session is long-lived and should not
+  // restart when parent re-renders. These are stable for the component lifetime.
+  const configRef = useRef({ cwd, systemPrompt, tools, allowedTools, maxTurns, provider, model, effort, initialMessage })
+  const defaultPlaceholder = inputPlaceholder ?? "Ask something..."
+
+  useEffect(() => {
+    const config = configRef.current
+    const session = getProvider(config.provider).createSession({
+      systemPrompt: config.systemPrompt,
+      tools: config.tools ?? [],
+      allowedTools: config.allowedTools,
+      maxTurns: config.maxTurns,
+      cwd: config.cwd,
+      model: config.model,
+      effort: config.effort,
+    })
+    sessionRef.current = session
+
+    // Auto-submit initial message if provided
+    if (config.initialMessage) {
+      const text = config.initialMessage.trim()
+      if (text) {
+        setMessages([{ id: crypto.randomUUID(), role: "user", content: text }])
+        session.pushMessage(text)
+        setIsStreaming(true)
+        setInputKey((k) => k + 1)
+      }
+    }
+
+    ;(async () => {
+      try {
+        for await (const event of session) {
+          switch (event.type) {
+            case "text_delta":
+              setStreamingText((prev) => prev + event.text)
+              setToolStatus(null)
+              break
+            case "tool_use":
+              setToolStatus(formatToolEvent(event.tool, event.input ?? {}))
+              break
+            case "assistant_complete":
+              // Skip tool-only turns that produced no visible text
+              if (event.text.trim()) {
+                setMessages((prev) => [
+                  ...prev,
+                  {
+                    id: crypto.randomUUID(),
+                    role: "assistant",
+                    content: event.text,
+                  },
+                ])
+              }
+              setStreamingText("")
+              setIsStreaming(false)
+              setToolStatus(null)
+              break
+            case "error":
+              setError(event.error)
+              setIsStreaming(false)
+              break
+            case "result":
+              if (!event.success && event.error) {
+                setError(`Agent error: ${event.error}`)
+              }
+              setIsStreaming(false)
+              break
+          }
+        }
+      } catch (err: unknown) {
+        setError(formatShellError(err))
+        setIsStreaming(false)
+      }
+    })()
+
+    return () => {
+      session.close()
+      sessionRef.current = null
+    }
+  }, [])
+
+  const handleSubmit = useCallback(
+    (value: string) => {
+      const text = value.trim()
+      if (!text || isStreaming || !sessionRef.current) return
+
+      setMessages((prev) => [
+        ...prev,
+        { id: crypto.randomUUID(), role: "user", content: text },
+      ])
+
+      sessionRef.current.pushMessage(text)
+
+      setIsStreaming(true)
+      setStreamingText("")
+      setError(null)
+      setInputKey((k) => k + 1)
+    },
+    [isStreaming]
+  )
+
+  const handleTextareaSubmit = useCallback(
+    () => {
+      const textarea = textareaRef.current
+      if (!textarea) return
+      const value = textarea.plainText
+      handleSubmit(value)
+      textarea.setText("")
+    },
+    [handleSubmit],
+  )
+
+  // Wire up onSubmit and auto-grow imperatively — React reconciler only maps these for <input>, not <textarea>
+  useEffect(() => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+    textarea.onSubmit = handleTextareaSubmit
+    textarea.onContentChange = () => {
+      // +2 for top/bottom border
+      const h = Math.min(8, Math.max(3, Math.max(textarea.lineCount, textarea.virtualLineCount) + 2))
+      setInputBoxHeight(h)
+    }
+    // Reset height on remount (after submit clears content)
+    setInputBoxHeight(3)
+  }, [inputKey, handleTextareaSubmit])
+
+  // Auto-focus textarea when user starts typing while a non-interactable
+  // element (e.g. the messages scrollbox) has focus
+  useKeyboard((key) => {
+    const textarea = textareaRef.current
+    if (!textarea || isStreaming) return
+    if (textarea.focused) return
+    // Only intercept printable single-character keys (no ctrl/meta combos)
+    if (key.ctrl || key.meta || key.name.length !== 1) return
+    textarea.focus()
+    textarea.insertText(key.name)
+    key.stopPropagation()
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <scrollbox
+        focused={isStreaming}
+        flexGrow={1}
+        border
+        borderStyle="rounded"
+        stickyScroll
+        stickyStart="bottom"
+        title={title}
+      >
+        {messages.length === 0 && !streamingText ? (
+          <text fg="#888888">
+            {emptyStateHint ?? "Type a message below and press Enter to start a conversation."}
+          </text>
+        ) : (
+          <box flexDirection="column">
+            {messages.map((msg) => (
+              <box key={msg.id} flexDirection="column" backgroundColor={msg.role === "user" ? "#1a1a2e" : undefined}>
+                <text fg={msg.role === "user" ? "#ffffff" : "#9ece6a"}>
+                  <strong>{msg.role === "user" ? "You" : "AutoAuto"}</strong>
+                </text>
+                {msg.role === "assistant" ? (
+                  <markdown content={msg.content} syntaxStyle={syntaxStyle} />
+                ) : (
+                  <text selectable>{msg.content}</text>
+                )}
+                <text>{""}</text>
+              </box>
+            ))}
+
+            {streamingText && (
+              <box flexDirection="column">
+                <text fg="#9ece6a">
+                  <strong>AutoAuto</strong>
+                </text>
+                <markdown content={streamingText} syntaxStyle={syntaxStyle} streaming />
+              </box>
+            )}
+
+            {isStreaming && !streamingText && (
+              <box flexDirection="column">
+                <text fg="#9ece6a">
+                  <strong>AutoAuto</strong>
+                </text>
+                {toolStatus ? (
+                  <ToolStatusSpinner key={toolStatus} status={toolStatus} />
+                ) : (
+                  <text fg="#888888">Thinking...</text>
+                )}
+              </box>
+            )}
+
+            {toolStatus && isStreaming && streamingText && (
+              <ToolStatusSpinner key={toolStatus} status={toolStatus} />
+            )}
+
+            {error && <text fg="#ff5555" selectable>Error: {error}</text>}
+          </box>
+        )}
+      </scrollbox>
+
+      <box border borderStyle="rounded" height={inputBoxHeight} maxHeight={8} title="Message (Shift+Enter for newline)">
+        <textarea
+          key={inputKey}
+          ref={textareaRef}
+          placeholder={
+            isStreaming ? "Waiting for response..." : defaultPlaceholder
+          }
+          focused={!isStreaming}
+          keyBindings={[
+            { name: "return", action: "submit" as const },
+            { name: "return", shift: true, action: "newline" as const },
+          ]}
+        />
+      </box>
+    </box>
+  )
+}

package/src/components/CycleField.tsx

@@ -0,0 +1,23 @@
+interface CycleFieldProps {
+  label: string
+  value: string
+  description?: string
+  isFocused: boolean
+}
+
+export function CycleField({ label, value, description, isFocused }: CycleFieldProps) {
+  return (
+    <box flexDirection="column">
+      <text>
+        {isFocused ? (
+          <span fg="#7aa2f7"><strong>{`  ${label}: \u25C2 ${value} \u25B8`}</strong></span>
+        ) : (
+          `  ${label}: ${value}`
+        )}
+      </text>
+      {isFocused && description && (
+        <text fg="#888888">{`  ${description}`}</text>
+      )}
+    </box>
+  )
+}