@patze/code-cli 0.16.2 → 0.17.2

package/opentui/src/App.tsx

@@ -0,0 +1,806 @@
+import {
+  InputRenderable,
+  TextAttributes,
+  type KeyEvent,
+  type SelectOption,
+} from "@opentui/core"
+import {
+  extend,
+  useKeyboard,
+  useRenderer,
+  useTerminalDimensions,
+} from "@opentui/react"
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { parseTranscriptLine } from "./line-parse.js"
+import { importPatzeDist } from "./patze-dist.js"
+import {
+  buildTranscriptLines,
+  type TranscriptEntry,
+  type TranscriptEntryKind,
+  type TranscriptLine,
+  type TranscriptPart,
+} from "./transcript-render.js"
+import { classifyPlainOutput, createTranscriptSink, inferErrorKind } from "./tui-sink.js"
+import { upsertTranscriptEntry } from "../../dist/cli/interactive/transcript-upsert.js"
+
+extend({ "tui-input": InputRenderable })
+
+type TuiInputProps = {
+  focused: boolean
+  placeholder: string
+  value: string
+  onInput: (value: string) => void
+  onSubmit: (value: string) => void
+}
+
+function TuiInput(props: TuiInputProps) {
+  return createElement("tui-input", props)
+}
+
+type ViewMode = "command" | "input" | "model"
+
+type CommandSelectItem = SelectOption & {
+  name: string
+  description: string
+  value: string
+}
+
+type ModelSelectItem = SelectOption & {
+  name: string
+  description: string
+  value: string
+}
+
+type InteractiveController = {
+  session: {
+    getModelOverride: () => string | null
+    setModelOverride: (value: string | null) => void
+    getExecutionMode: () => "local" | "cloud"
+    snapshot: () => Array<{ input: string; lines: string[] }>
+  }
+  cwd: string
+  renderHeaderLines: () => string[]
+  persistSession: () => void
+  processLine: (
+    rawLine: string,
+    output: { line: (text?: string) => void },
+    context?: { signal?: AbortSignal }
+  ) => Promise<{ exitShell: boolean; exitCode: number; streamed?: boolean }>
+}
+
+function parseCwdArg(): string {
+  const args = process.argv.slice(2)
+  for (let i = 0; i < args.length; i += 1) {
+    if (args[i] === "--cwd" && args[i + 1]) {
+      return args[++i]
+    }
+  }
+  return process.cwd()
+}
+
+export function App({ cwd: cwdArg }: { cwd?: string }) {
+  const cwd = cwdArg ?? parseCwdArg()
+  const renderer = useRenderer()
+  const { width: columns, height: rows } = useTerminalDimensions()
+  const nextIdRef = useRef(0)
+  const controllerRef = useRef<InteractiveController | null>(null)
+  const streamingIdRef = useRef<string | null>(null)
+  const scrollPinnedRef = useRef(true)
+  const activeAbortRef = useRef<AbortController | null>(null)
+
+  const [ready, setReady] = useState(false)
+  const [bootError, setBootError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [input, setInput] = useState("")
+  const [mode, setMode] = useState<ViewMode>("input")
+  const [modelSearch, setModelSearch] = useState("")
+  const [scrollOffset, setScrollOffset] = useState(0)
+  const [transcript, setTranscript] = useState<TranscriptEntry[]>([])
+  const [currentModel, setCurrentModel] = useState("composer-2.5-fast")
+  const [executionMode, setExecutionMode] = useState<"local" | "cloud">("local")
+  const [executionTarget, setExecutionTarget] = useState<string | null>(null)
+  const [supportedModels, setSupportedModels] = useState<string[]>([])
+  const [slashMenuReady, setSlashMenuReady] = useState(false)
+
+  const followTranscript = useCallback(() => {
+    if (scrollPinnedRef.current) {
+      setScrollOffset(0)
+    }
+  }, [])
+
+  const markScrollUnpinned = useCallback(() => {
+    scrollPinnedRef.current = false
+  }, [])
+
+  const markScrollPinned = useCallback(() => {
+    scrollPinnedRef.current = true
+    setScrollOffset(0)
+  }, [])
+
+  const nextId = useCallback(() => {
+    const id = nextIdRef.current
+    nextIdRef.current += 1
+    return String(id)
+  }, [])
+
+  const addEntry = useCallback(
+    (kind: TranscriptEntryKind, label: string, text: string) => {
+      setTranscript((items) => [
+        ...items,
+        { id: nextId(), kind, label, text },
+      ])
+      followTranscript()
+    },
+    [followTranscript, nextId]
+  )
+
+  const upsertTranscriptLine = useCallback(
+    (upsertKey: string, entry: Omit<TranscriptEntry, "id">) => {
+      setTranscript((items) =>
+        upsertTranscriptEntry(items, entry, upsertKey, nextId)
+      )
+      followTranscript()
+    },
+    [followTranscript, nextId]
+  )
+
+  const appendToLast = useCallback((text: string) => {
+    setTranscript((items) => {
+      if (!items.length) {
+        return items
+      }
+      const copy = [...items]
+      const last = copy[copy.length - 1]
+      copy[copy.length - 1] = {
+        ...last,
+        text: last.text ? `${last.text}\n${text}` : text,
+      }
+      return copy
+    })
+  }, [])
+
+  const upsertStreaming = useCallback(
+    (chunk: string) => {
+      if (!chunk) {
+        return
+      }
+      setTranscript((items) => {
+        const streamId = streamingIdRef.current
+        if (!streamId) {
+          const id = nextId()
+          streamingIdRef.current = id
+          return [...items, { id, kind: "assistant", label: "agent", text: chunk }]
+        }
+        return items.map((entry) =>
+          entry.id === streamId ? { ...entry, text: entry.text + chunk } : entry
+        )
+      })
+      followTranscript()
+    },
+    [followTranscript, nextId]
+  )
+
+  const clearStreaming = useCallback(() => {
+    streamingIdRef.current = null
+  }, [])
+
+  const refreshStatusMeta = useCallback(async () => {
+    const controller = controllerRef.current
+    if (!controller) {
+      return
+    }
+    const models = await importPatzeDist<typeof import("../../dist/config/models.js")>(
+      "config/models.js"
+    )
+    const config = await importPatzeDist<typeof import("../../dist/config/config.js")>(
+      "config/config.js"
+    )
+    const loaded = config.loadConfig(controller.cwd)
+    setCurrentModel(
+      models.resolveEffectiveModel({
+        sessionOverride: controller.session.getModelOverride(),
+        configModel: loaded.model,
+      })
+    )
+    setExecutionMode(controller.session.getExecutionMode())
+    setSupportedModels([...models.PATZE_SUPPORTED_MODELS])
+
+    const cloudGit = await importPatzeDist<
+      typeof import("../../dist/cli/interactive/cloud-git.js")
+    >("cli/interactive/cloud-git.js")
+    if (controller.session.getExecutionMode() === "cloud") {
+      const detection = cloudGit.detectCloudRepository(controller.cwd)
+      setExecutionTarget(
+        detection.ok ? cloudGit.formatCloudTarget(detection) : detection.message
+      )
+    } else {
+      setExecutionTarget(null)
+    }
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+
+    void (async () => {
+      try {
+        slashMenuModule = await importPatzeDist("cli/interactive/slash-menu.js")
+        setSlashMenuReady(true)
+
+        const mod = await importPatzeDist<typeof import("../../dist/cli/interactive/session-controller.js")>(
+          "cli/interactive/session-controller.js"
+        )
+        const controller = mod.createInteractiveController({
+          cwd,
+          interactive: true,
+          streamPartials: true,
+          onPartial: (chunk: string) => {
+            upsertStreaming(chunk)
+          },
+        }) as InteractiveController
+
+        if (cancelled) {
+          return
+        }
+
+        controllerRef.current = controller
+
+        const headerEntries = controller.renderHeaderLines().flatMap((line) => {
+          const parsed = parseTranscriptLine(line)
+          if (!parsed || parsed.continuation) {
+            return []
+          }
+          return [
+            {
+              id: nextId(),
+              kind: "meta" as const,
+              label: parsed.label || "info",
+              text: parsed.text || line,
+            },
+          ]
+        })
+
+        const restored: TranscriptEntry[] = []
+        for (const turn of controller.session.snapshot()) {
+          restored.push({
+            id: nextId(),
+            kind: "user",
+            label: "you",
+            text: turn.input,
+          })
+          for (const entry of classifyPlainOutput(turn.lines)) {
+            restored.push({ id: nextId(), ...entry })
+          }
+        }
+
+        setTranscript([...headerEntries, ...restored])
+        await refreshStatusMeta()
+        setReady(true)
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error)
+        setBootError(message)
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [cwd, nextId, refreshStatusMeta, upsertStreaming])
+
+  const exitApp = useCallback(() => {
+    controllerRef.current?.persistSession()
+    renderer.destroy()
+  }, [renderer])
+
+  const submitToController = useCallback(
+    async (rawLine: string) => {
+      const controller = controllerRef.current
+      if (!controller || busy) {
+        return
+      }
+
+      const value = rawLine.trim()
+      if (!value) {
+        return
+      }
+
+      setBusy(true)
+      clearStreaming()
+      markScrollPinned()
+
+      const abort = new AbortController()
+      activeAbortRef.current = abort
+
+      const sink = createTranscriptSink({
+        addEntry: (entry) => {
+          setTranscript((items) => [...items, { id: nextId(), ...entry }])
+          followTranscript()
+        },
+        upsertEntry: (upsertKey, entry) => {
+          upsertTranscriptLine(upsertKey, entry)
+        },
+        appendToLast,
+        upsertStreaming,
+        clearStreaming,
+      })
+
+      try {
+        const result = await controller.processLine(value, sink, { signal: abort.signal })
+        if (result.streamed) {
+          clearStreaming()
+        }
+        await refreshStatusMeta()
+        if (result.exitShell) {
+          exitApp()
+        }
+      } finally {
+        activeAbortRef.current = null
+        setBusy(false)
+        clearStreaming()
+      }
+    },
+    [
+      appendToLast,
+      busy,
+      clearStreaming,
+      exitApp,
+      followTranscript,
+      markScrollPinned,
+      nextId,
+      refreshStatusMeta,
+      upsertTranscriptLine,
+      upsertStreaming,
+    ]
+  )
+
+  const openModelPicker = useCallback(() => {
+    setModelSearch("")
+    setMode("model")
+  }, [])
+
+  const runCommand = useCallback(
+    async (rawCommand: string) => {
+      const trimmed = rawCommand.trim()
+      setMode("input")
+      setInput("")
+
+      if (!trimmed) {
+        return
+      }
+
+      const body = trimmed.replace(/^\//, "")
+      const [name, ...rest] = body.split(/\s+/)
+      const args = rest.join(" ")
+
+      switch (name?.toLowerCase()) {
+        case "help":
+          setInput("/")
+          setMode("command")
+          return
+        case "model":
+          if (!args.trim()) {
+            openModelPicker()
+            return
+          }
+          break
+        case "exit":
+        case "quit":
+          exitApp()
+          return
+        default:
+          break
+      }
+
+      await submitToController(trimmed)
+    },
+    [exitApp, openModelPicker, submitToController]
+  )
+
+  const submitInput = useCallback(
+    (value: string) => {
+      const prompt = value.trim()
+      setInput("")
+
+      if (!prompt || busy) {
+        return
+      }
+
+      if (prompt.startsWith("/")) {
+        void runCommand(prompt)
+        return
+      }
+
+      void submitToController(prompt)
+    },
+    [busy, runCommand, submitToController]
+  )
+
+  const selectModel = useCallback(
+    async (modelId: string) => {
+      const controller = controllerRef.current
+      if (!controller) {
+        return
+      }
+
+      const modelCommand = await importPatzeDist<
+        typeof import("../../dist/cli/interactive/model-command.js")
+      >("cli/interactive/model-command.js")
+
+      const result = modelCommand.dispatchModelCommand(controller.session as never, modelId)
+      for (const line of result.lines) {
+        addEntry(inferErrorKind(line), "model", line)
+      }
+      await refreshStatusMeta()
+      setMode("input")
+    },
+    [addEntry, refreshStatusMeta]
+  )
+
+  const commandSelectRows = Math.min(6, Math.max(3, rows - 10))
+  const modelSelectRows = Math.min(8, Math.max(3, rows - 10))
+  const commandPanelRows = 2 + commandSelectRows
+  const modelPanelRows = 3 + modelSelectRows
+
+  const transcriptViewportRows = Math.max(
+    4,
+    rows - (mode === "model" ? modelPanelRows + 4 : mode === "command" ? commandPanelRows + 4 : 6)
+  )
+
+  const scrollableEntries = useMemo(
+    () => [
+      { id: "status-cwd", kind: "meta" as const, label: "cwd", text: cwd },
+      {
+        id: "status-mode",
+        kind: "meta" as const,
+        label: "mode",
+        text: executionMode,
+      },
+      ...(executionTarget
+        ? [
+            {
+              id: "status-target",
+              kind: "meta" as const,
+              label: "target",
+              text: executionTarget,
+            },
+          ]
+        : []),
+      {
+        id: "status-model",
+        kind: "meta" as const,
+        label: "model",
+        text: currentModel,
+      },
+      ...transcript,
+    ],
+    [cwd, currentModel, executionMode, executionTarget, transcript]
+  )
+
+  const transcriptLines = useMemo(
+    () => buildTranscriptLines(scrollableEntries, columns),
+    [columns, scrollableEntries]
+  )
+
+  const maxScrollOffset = Math.max(0, transcriptLines.length - transcriptViewportRows)
+  const effectiveScrollOffset = Math.min(scrollOffset, maxScrollOffset)
+
+  const visibleTranscriptLines = useMemo(() => {
+    const end = transcriptLines.length - effectiveScrollOffset
+    const start = Math.max(0, end - transcriptViewportRows)
+    return transcriptLines.slice(start, end)
+  }, [effectiveScrollOffset, transcriptLines, transcriptViewportRows])
+
+  useEffect(() => {
+    setScrollOffset((offset) => Math.min(offset, maxScrollOffset))
+  }, [maxScrollOffset])
+
+  const commandItems = useMemo(() => {
+    if (!slashMenuReady || !input.startsWith("/") || input.includes(" ")) {
+      return []
+    }
+    return getCommandItems(input)
+  }, [input, slashMenuReady])
+
+  const modelItems = useMemo(() => {
+    const models = supportedModels.length
+      ? supportedModels
+      : ["composer-2.5-fast", "composer-2.5", "composer-2", "gpt-5.4-mini", "gpt-5.4"]
+    const normalized = modelSearch.trim().toLowerCase()
+    return models
+      .filter((model) => !normalized || model.toLowerCase().includes(normalized))
+      .map((model) => ({
+        name: model,
+        description: model === currentModel ? "current" : "",
+        value: model,
+      }))
+  }, [currentModel, modelSearch, supportedModels])
+
+  useKeyboard((key: KeyEvent) => {
+    const character = getInputCharacter(key)
+
+    if (key.ctrl && key.name === "c") {
+      if (busy && activeAbortRef.current) {
+        activeAbortRef.current.abort()
+        addEntry("status", "run", "cancelled · stream stopped locally")
+        return
+      }
+      if (!busy) {
+        exitApp()
+      }
+      return
+    }
+
+    if (mode === "model" && key.name === "escape") {
+      setMode("input")
+      return
+    }
+
+    if (mode === "model") {
+      if (key.name === "backspace" || key.name === "delete") {
+        setModelSearch((value) => value.slice(0, -1))
+      } else if (isSearchInput(character)) {
+        setModelSearch((value) => `${value}${character}`)
+      }
+      return
+    }
+
+    if (mode === "command" && key.name === "escape") {
+      setInput("")
+      setMode("input")
+      return
+    }
+
+    if (mode === "input") {
+      const pageSize = Math.max(1, transcriptViewportRows - 1)
+
+      if (key.name === "up") {
+        markScrollUnpinned()
+        setScrollOffset((offset) => Math.min(maxScrollOffset, offset + 1))
+      } else if (key.name === "down") {
+        setScrollOffset((offset) => {
+          const next = Math.max(0, offset - 1)
+          if (next === 0) {
+            scrollPinnedRef.current = true
+          }
+          return next
+        })
+      } else if (key.name === "pageup") {
+        markScrollUnpinned()
+        setScrollOffset((offset) => Math.min(maxScrollOffset, offset + pageSize))
+      } else if (key.name === "pagedown") {
+        setScrollOffset((offset) => {
+          const next = Math.max(0, offset - pageSize)
+          if (next === 0) {
+            scrollPinnedRef.current = true
+          }
+          return next
+        })
+      } else if (key.name === "home") {
+        markScrollUnpinned()
+        setScrollOffset(maxScrollOffset)
+      } else if (key.name === "end") {
+        markScrollPinned()
+      }
+    }
+  })
+
+  const selectCommandOption = (_index: number, option: SelectOption | null) => {
+    const item = option as CommandSelectItem | null
+    if (item?.value) {
+      void runCommand(item.value)
+    }
+  }
+
+  const selectModelOption = (_index: number, option: SelectOption | null) => {
+    const item = option as ModelSelectItem | null
+    if (item?.value) {
+      void selectModel(item.value)
+    }
+  }
+
+  if (bootError) {
+    return createElement(
+      "box",
+      { flexDirection: "column", height: rows, paddingX: 1 },
+      createElement("text", { content: `OpenTUI bootstrap failed: ${bootError}`, fg: "red" }),
+      createElement("text", {
+        content: "Run: npm run build (in packages/patze-code-cli)",
+        attributes: TextAttributes.DIM,
+      })
+    )
+  }
+
+  return createElement(
+    "box",
+    { flexDirection: "column", height: rows, paddingX: 1 },
+    createElement(
+      "box",
+      { flexDirection: "column", height: transcriptViewportRows },
+      visibleTranscriptLines.map((line) =>
+        createElement(TranscriptLine, { key: line.id, line })
+      )
+    ),
+    maxScrollOffset > 0
+      ? createElement(
+          "text",
+          { fg: "gray" },
+          `Scroll: Up/Down PgUp/PgDn Home/End · ${
+            effectiveScrollOffset === 0 ? "at bottom" : `${effectiveScrollOffset} lines up`
+          }`
+        )
+      : null,
+    mode === "command"
+      ? createElement(
+          "box",
+          {
+            border: true,
+            borderStyle: "single",
+            borderColor: "cyan",
+            flexDirection: "column",
+            marginTop: 1,
+            paddingX: 1,
+          },
+          createElement("text", {
+            content: "Commands",
+            attributes: TextAttributes.BOLD,
+          }),
+          createElement("text", {
+            content: "Use arrows and Enter, or Escape to cancel.",
+            fg: "gray",
+          }),
+          createElement("select", {
+            focused: mode === "command",
+            height: commandSelectRows,
+            options: commandItems,
+            onSelect: selectCommandOption,
+            showDescription: false,
+          })
+        )
+      : mode === "model"
+        ? createElement(
+            "box",
+            {
+              border: true,
+              borderStyle: "single",
+              borderColor: "magenta",
+              flexDirection: "column",
+              marginTop: 1,
+              paddingX: 1,
+            },
+            createElement("text", {
+              content: "Select a model",
+              attributes: TextAttributes.BOLD,
+            }),
+            createElement("text", {
+              content: "Type to search · Enter choose · Escape cancel",
+              fg: "gray",
+            }),
+            createElement("text", {
+              content: `Search: ${modelSearch || "all models"}`,
+              fg: "gray",
+            }),
+            modelItems.length === 0
+              ? createElement("text", { content: "No matching models.", fg: "yellow" })
+              : createElement("select", {
+                  focused: mode === "model",
+                  height: modelSelectRows,
+                  options: modelItems,
+                  onSelect: selectModelOption,
+                  showScrollIndicator: true,
+                })
+          )
+        : createElement(
+            "box",
+            {
+              border: true,
+              borderStyle: "single",
+              borderColor: busy ? "yellow" : "green",
+              marginTop: 1,
+              paddingX: 1,
+            },
+            createElement(TuiInput, {
+              focused: ready && !busy,
+              placeholder: busy
+                ? "Ctrl+C cancel · waiting for run…"
+                : ready
+                  ? "Ask or type /help"
+                  : "Loading Patze Code…",
+              value: input,
+              onInput: (value: string) => {
+                setInput(value)
+                if (busy) {
+                  return
+                }
+                if (value.startsWith("/") && !value.includes(" ")) {
+                  setMode("command")
+                } else {
+                  setMode("input")
+                }
+              },
+              onSubmit: submitInput,
+            })
+          ),
+    createElement("text", {
+      content: busy
+        ? "Esc exit · Ctrl+C cancel run · preview-first trust loop"
+        : "Esc exit · Ctrl+C quit · Patze trust loop (preview-first)",
+      attributes: TextAttributes.DIM,
+    })
+  )
+}
+
+function TranscriptLine({ line }: { line: TranscriptLine }) {
+  const color = {
+    assistant: "white",
+    error: "red",
+    meta: "cyan",
+    status: "yellow",
+    tool: "magenta",
+    user: "green",
+  }[line.kind]
+
+  return createElement(
+    "box",
+    null,
+    createElement("text", {
+      content: line.label.padEnd(7),
+      fg: color,
+      attributes: TextAttributes.BOLD,
+    }),
+    createElement(
+      "text",
+      null,
+      line.parts.map((part, index) =>
+        createElement(
+          "span",
+          {
+            key: index,
+            attributes: partToAttributes(part),
+            fg: part.color,
+          },
+          part.text
+        )
+      )
+    )
+  )
+}
+
+function partToAttributes(part: TranscriptPart) {
+  let attributes = TextAttributes.NONE
+  if (part.bold) {
+    attributes |= TextAttributes.BOLD
+  }
+  if (part.dimColor) {
+    attributes |= TextAttributes.DIM
+  }
+  return attributes
+}
+
+function getInputCharacter(key: KeyEvent): string {
+  if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+    return key.sequence
+  }
+  return ""
+}
+
+function isSearchInput(character: string): boolean {
+  return Boolean(character && character !== " " && character.charCodeAt(0) >= 32)
+}
+
+type SlashMenuModule = typeof import("../../dist/cli/interactive/slash-menu.js")
+
+let slashMenuModule: SlashMenuModule | null = null
+
+function getCommandItems(input: string): CommandSelectItem[] {
+  if (!slashMenuModule) {
+    return []
+  }
+  const menu = slashMenuModule.computeSlashMenuItems(input)
+  return menu.items.map((command) => ({
+    name: `/${command.name}`,
+    description: command.description,
+    value: `/${command.name}`,
+  }))
+}
+
+export { parseCwdArg }