herm-tui 1.0.0-dev.1

package/src/components/chat/PromptCard.tsx

@@ -0,0 +1,359 @@
+// Inline agent prompts — approval / clarify / sudo / secret.
+//
+// These render *in the transcript* as a Part of the in-progress
+// assistant message, not in a modal. The composer stays focused for
+// approval/clarify; the shell's global key handler routes keys to
+// the pending card via the imperative handle so number/arrow/Enter
+// work without the textarea eating them. Sudo/secret own a masked
+// <input> and take focus explicitly (the value must never echo into
+// the composer).
+//
+// Responding is exactly-once per card but NOT unmount-triggered — the
+// card can scroll out of the viewport (culling) without auto-denying.
+// Esc is the only cancel path.
+
+import {
+  memo, useRef, useState, forwardRef, useImperativeHandle,
+} from "react"
+import { LEFT_BAR } from "../../ui/borders"
+import type { ParsedKey, SubmitEvent } from "@opentui/core"
+import { useTheme } from "../../theme"
+import { useGateway } from "../../app/gateway"
+import type { PromptPart, PromptReq, Part } from "../../types/message"
+
+// ── Shared ───────────────────────────────────────────────────────────
+
+export type PromptCardHandle = {
+  /** Offer a key to the pending card. Returns true if consumed. */
+  feed: (key: ParsedKey) => boolean
+  /** True if this card owns a focused <input> (sudo/secret). */
+  masked: boolean
+}
+
+type Answer = (label: string, ok: boolean) => void
+
+function digit(name: string): number | null {
+  const n = parseInt(name, 10)
+  return Number.isFinite(n) ? n : null
+}
+
+// ┃-bar panel frame — matches the oc permission grammar that prompts
+// already used inside the modal, minus the fixed width.
+const Frame = (p: { tint: import("@opentui/core").RGBA; children: React.ReactNode }) => {
+  const theme = useTheme().theme
+  return (
+    <box
+      flexDirection="column"
+      border={["left"]}
+      borderColor={p.tint}
+      customBorderChars={LEFT_BAR}
+      backgroundColor={theme.backgroundPanel}
+      marginBottom={1}
+    >
+      {p.children}
+    </box>
+  )
+}
+
+const Pill = (p: { on: boolean; hot: string; label: string; onPick: () => void }) => {
+  const theme = useTheme().theme
+  return (
+    <box height={1} paddingX={1}
+         backgroundColor={p.on ? theme.primary : undefined}
+         onMouseDown={p.onPick}>
+      <text>
+        <span fg={p.on ? theme.background : theme.textMuted}>{p.hot} </span>
+        <span fg={p.on ? theme.background : theme.text}>{p.label}</span>
+      </text>
+    </box>
+  )
+}
+
+// ── Approval ─────────────────────────────────────────────────────────
+
+const CHOICES = ["once", "session", "always", "deny"] as const
+type Choice = typeof CHOICES[number]
+const LABELS: Record<Choice, string> = {
+  once: "Allow once",
+  session: "Allow this session",
+  always: "Always allow",
+  deny: "Deny",
+}
+
+const Approval = forwardRef<PromptCardHandle, {
+  req: Extract<PromptReq, { variant: "approval" }>
+  onAnswer: Answer
+}>((p, ref) => {
+  const theme = useTheme().theme
+  const gw = useGateway()
+  const [sel, setSel] = useState(0)
+  const done = useRef(false)
+
+  const send = (c: Choice) => {
+    if (done.current) return
+    done.current = true
+    void gw.request("approval.respond", { choice: c }).catch(() => {})
+    p.onAnswer(LABELS[c], c !== "deny")
+  }
+
+  useImperativeHandle(ref, () => ({
+    masked: false,
+    feed: (key) => {
+      if (key.name === "left" || key.name === "h") {
+        setSel(s => (s + CHOICES.length - 1) % CHOICES.length); return true
+      }
+      if (key.name === "right" || key.name === "l") {
+        setSel(s => (s + 1) % CHOICES.length); return true
+      }
+      if (key.name === "return") { send(CHOICES[sel]); return true }
+      if (key.name === "escape") { send("deny"); return true }
+      const n = digit(key.name)
+      if (n !== null && n >= 1 && n <= CHOICES.length) { send(CHOICES[n - 1]); return true }
+      return false
+    },
+  }), [sel])
+
+  return (
+    <Frame tint={theme.warning}>
+      <box flexDirection="column" gap={1} paddingLeft={1} paddingRight={2} paddingY={1}>
+        <box flexDirection="row" gap={1} height={1}>
+          <text fg={theme.warning}>△</text>
+          <text fg={theme.text}>Permission required</text>
+        </box>
+        <box flexDirection="row" gap={1} paddingLeft={2} minHeight={1}>
+          <text fg={theme.textMuted}>#</text>
+          <text fg={theme.text} wrapMode="word">{p.req.description || "Shell command"}</text>
+        </box>
+        <box paddingLeft={2} minHeight={1}>
+          <text fg={theme.text} wrapMode="word">$ {p.req.command}</text>
+        </box>
+      </box>
+      <box flexDirection="row" gap={2} flexShrink={0}
+           paddingX={2} paddingY={1} backgroundColor={theme.backgroundElement}>
+        {CHOICES.map((c, i) => (
+          <Pill key={c} on={sel === i} hot={String(i + 1)} label={LABELS[c]}
+                onPick={() => send(c)} />
+        ))}
+        <box flexGrow={1} />
+        <box height={1}>
+          <text fg={theme.textMuted}>←/→ · enter · esc deny</text>
+        </box>
+      </box>
+    </Frame>
+  )
+})
+
+// ── Clarify ──────────────────────────────────────────────────────────
+
+const Clarify = forwardRef<PromptCardHandle, {
+  req: Extract<PromptReq, { variant: "clarify" }>
+  onAnswer: Answer
+}>((p, ref) => {
+  const theme = useTheme().theme
+  const gw = useGateway()
+  const choices = p.req.choices ?? []
+  const [sel, setSel] = useState(0)
+  const [typing, setTyping] = useState(choices.length === 0)
+  const [custom, setCustom] = useState("")
+  const done = useRef(false)
+
+  const send = (answer: string) => {
+    if (done.current) return
+    done.current = true
+    void gw.request("clarify.respond", {
+      request_id: p.req.request_id, answer,
+    }).catch(() => {})
+    p.onAnswer(answer || "(cancelled)", answer !== "")
+  }
+
+  useImperativeHandle(ref, () => ({
+    // Freeform mode owns a focused <input>; list mode doesn't.
+    masked: typing,
+    feed: (key) => {
+      if (typing) {
+        // <input> handles text; we only intercept cancel-back.
+        if (key.name === "escape") {
+          if (choices.length) { setTyping(false); return true }
+          send(""); return true
+        }
+        return false
+      }
+      if (key.name === "escape") { send(""); return true }
+      if (key.name === "up")   { setSel(s => Math.max(0, s - 1)); return true }
+      if (key.name === "down") { setSel(s => Math.min(choices.length, s + 1)); return true }
+      if (key.name === "return") {
+        if (sel === choices.length) { setTyping(true); return true }
+        const c = choices[sel]
+        if (c) send(c)
+        return true
+      }
+      const n = digit(key.name)
+      if (n !== null && n >= 1 && n <= choices.length) { send(choices[n - 1]); return true }
+      return false
+    },
+  }), [typing, sel, choices])
+
+  const head = (
+    <box minHeight={1}>
+      <text wrapMode="word">
+        <span fg={theme.accent}><strong>ask </strong></span>
+        <span fg={theme.text}><strong>{p.req.question}</strong></span>
+      </text>
+    </box>
+  )
+
+  return (
+    <Frame tint={theme.accent}>
+      <box flexDirection="column" paddingLeft={1} paddingRight={2} paddingY={1}>
+        {head}
+        <box height={1} />
+        {typing ? (
+          <>
+            <box flexDirection="row" height={1}>
+              <text fg={theme.textMuted}>{"> "}</text>
+              <input
+                value={custom} onInput={setCustom}
+                onSubmit={(() => send(custom)) as unknown as (e: SubmitEvent) => void}
+                focused flexGrow={1}
+                textColor={theme.text}
+                backgroundColor={theme.backgroundElement}
+                focusedBackgroundColor={theme.backgroundElement}
+              />
+            </box>
+            <text fg={theme.textMuted}>Enter send · Esc {choices.length ? "back" : "cancel"}</text>
+          </>
+        ) : (
+          <>
+            {[...choices, "Other (type your answer)"].map((c, i) => (
+              <box key={i} height={1} onMouseDown={() =>
+                    i === choices.length ? setTyping(true) : send(choices[i])}>
+                <text fg={sel === i ? theme.text : theme.textMuted}>
+                  {sel === i ? "▸ " : "  "}{i + 1}. {c}
+                </text>
+              </box>
+            ))}
+            <box height={1} />
+            <text fg={theme.textMuted}>↑/↓ · Enter · 1-{choices.length} · Esc cancel</text>
+          </>
+        )}
+      </box>
+    </Frame>
+  )
+})
+
+// ── Masked (sudo / secret) ───────────────────────────────────────────
+
+const Masked = forwardRef<PromptCardHandle, {
+  title: string
+  note: string
+  onSubmit: (v: string) => void
+  onAnswer: Answer
+}>((p, ref) => {
+  const theme = useTheme().theme
+  const [value, setValue] = useState("")
+  const done = useRef(false)
+
+  const go = (v: string) => {
+    if (done.current) return
+    done.current = true
+    p.onSubmit(v)
+    p.onAnswer(v ? "(provided)" : "(cancelled)", v !== "")
+  }
+
+  useImperativeHandle(ref, () => ({
+    masked: true,
+    feed: (key) => {
+      if (key.name === "escape") { go(""); return true }
+      return false
+    },
+  }), [])
+
+  return (
+    <Frame tint={theme.warning}>
+      <box flexDirection="column" paddingLeft={1} paddingRight={2} paddingY={1}>
+        <text fg={theme.warning}><strong>{p.title}</strong></text>
+        <text fg={theme.text}>{p.note}</text>
+        <box height={1} />
+        <box flexDirection="row" height={1} position="relative">
+          <text fg={theme.textMuted}>{"> "}</text>
+          <input
+            value={value} onInput={setValue}
+            onSubmit={(() => go(value)) as unknown as (e: SubmitEvent) => void}
+            focused flexGrow={1}
+            textColor={theme.backgroundElement}
+            cursorColor={theme.accent}
+            backgroundColor={theme.backgroundElement}
+            focusedBackgroundColor={theme.backgroundElement}
+          />
+          <box position="absolute" left={2} top={0} height={1}>
+            <text fg={theme.text} bg={theme.backgroundElement}>{"•".repeat(value.length)}</text>
+          </box>
+        </box>
+        <text fg={theme.textMuted}>Enter submit · Esc cancel</text>
+      </box>
+    </Frame>
+  )
+})
+
+// ── Answered (collapsed) ─────────────────────────────────────────────
+
+const Outcome = memo(({ part }: { part: PromptPart }) => {
+  const theme = useTheme().theme
+  const a = part.answered!
+  const glyph = a.ok ? "✓" : "✗"
+  const fg = a.ok ? theme.success : theme.error
+  const what =
+    part.variant === "approval" ? a.label
+    : part.variant === "clarify" ? `chose: ${a.label}`
+    : part.variant === "sudo" ? `sudo ${a.label}`
+    : `${(part.req as { env_var?: string }).env_var ?? "secret"} ${a.label}`
+  return (
+    <box height={1} paddingLeft={3} marginBottom={1}>
+      <text>
+        <span fg={fg}>{glyph} </span>
+        <span fg={theme.textMuted}>{what}</span>
+      </text>
+    </box>
+  )
+})
+
+// ── Dispatch ─────────────────────────────────────────────────────────
+
+export const PromptCard = memo(forwardRef<PromptCardHandle, {
+  part: PromptPart
+  onAnswer: (id: string, label: string, ok: boolean) => void
+}>((p, ref) => {
+  const gw = useGateway()
+  if (p.part.answered) return <Outcome part={p.part} />
+  const answer: Answer = (label, ok) => p.onAnswer(p.part.id, label, ok)
+  const req = p.part.req
+  if (req.variant === "approval")
+    return <Approval ref={ref} req={req} onAnswer={answer} />
+  if (req.variant === "clarify")
+    return <Clarify ref={ref} req={req} onAnswer={answer} />
+  if (req.variant === "sudo")
+    return <Masked ref={ref} title="🔒 Sudo required"
+                   note="Enter your password to elevate privileges."
+                   onSubmit={v => void gw.request("sudo.respond",
+                     { request_id: req.request_id, password: v }).catch(() => {})}
+                   onAnswer={answer} />
+  return <Masked ref={ref} title={`🔑 Secret: ${req.env_var}`}
+                 note={req.prompt}
+                 onSubmit={v => void gw.request("secret.respond",
+                   { request_id: req.request_id, value: v }).catch(() => {})}
+                 onAnswer={answer} />
+}))
+
+/** Find the single pending prompt across all messages. The gateway
+ *  blocks on the answer, so there's at most one. */
+export function pending(messages: ReadonlyArray<{ role: string; parts: ReadonlyArray<Part> }>): PromptPart | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i]
+    if (m.role !== "assistant") continue
+    for (let j = m.parts.length - 1; j >= 0; j--) {
+      const part = m.parts[j]
+      if (part.type === "prompt" && !part.answered) return part
+    }
+  }
+  return null
+}

package/src/components/chat/SlashPopover.tsx

@@ -0,0 +1,158 @@
+/**
+ * Slash command popover — OpenCode-inspired visual style.
+ *
+ * Purely presentational. Keyboard navigation lives in the parent (app.tsx
+ * useKeyboard) to avoid OpenTUI's global keyboard event conflicts.
+ *
+ * Uses a sliding window that follows the cursor rather than scrollbox
+ * (scrollbox requires focus to scroll, which would conflict with the input).
+ */
+
+import { useMemo, memo } from "react"
+import type { RGBA } from "@opentui/core"
+import { useTheme } from "../../theme"
+import type { Theme } from "../../theme"
+import type { SlashCommand, SlashSource } from "../../commands/slash"
+import { sort } from "../../commands/slash"
+
+type Props = {
+  readonly commands: ReadonlyArray<SlashCommand>
+  readonly cursor: number
+  readonly onCursor: (idx: number) => void
+  readonly onSelect: (cmd: SlashCommand) => void
+}
+
+type Row =
+  | { type: "header"; cat: string }
+  | { type: "cmd"; cmd: SlashCommand; flat: number }
+
+const MAX_VISIBLE = 14
+
+/** Color for the source badge. Returns null for sources that shouldn't render. */
+function badge(source: SlashSource, theme: Theme): RGBA | null {
+  if (source === "skill") return theme.success
+  if (source === "plugin") return theme.info
+  if (source === "mcp") return theme.warning
+  return null // "command" and "local" get no badge
+}
+
+export const SlashPopover = memo(({ commands: cmds, cursor, onCursor, onSelect }: Props) => {
+  const theme = useTheme().theme
+
+  if (cmds.length === 0) {
+    return (
+      <box
+        border
+        borderStyle="single"
+        borderColor={theme.border}
+        backgroundColor={theme.backgroundPanel}
+        paddingX={1}
+        height={3}
+      >
+        <text fg={theme.textMuted}>No matching commands</text>
+      </box>
+    )
+  }
+
+  // Build flat row list with category headers, stable order (sort by category).
+  const rows = useMemo(() => {
+    const sorted = sort(cmds)
+    const result: Row[] = []
+    let flat = 0
+    let lastCat = ""
+    for (const cmd of sorted) {
+      if (cmd.category !== lastCat) {
+        result.push({ type: "header", cat: cmd.category })
+        lastCat = cmd.category
+      }
+      result.push({ type: "cmd", cmd, flat: flat++ })
+    }
+    return result
+  }, [cmds])
+
+  // Find the row index of the cursor to drive the sliding window.
+  const cursorRow = rows.findIndex(r => r.type === "cmd" && r.flat === cursor)
+  const start = Math.max(0, Math.min(cursorRow - 2, rows.length - MAX_VISIBLE))
+  const visible = rows.slice(start, start + MAX_VISIBLE)
+  const clipped = rows.length > MAX_VISIBLE
+  const above = clipped && start > 0
+  const below = clipped && start + MAX_VISIBLE < rows.length
+  const height = visible.length + 2 + (above ? 1 : 0) + (below ? 1 : 0)
+
+  return (
+    <box
+      flexDirection="column"
+      border
+      borderStyle="single"
+      borderColor={theme.border}
+      backgroundColor={theme.backgroundPanel}
+      paddingX={1}
+      height={height}
+    >
+      {above ? (
+        <box height={1} paddingLeft={1}>
+          <text fg={theme.textMuted}>↑ more</text>
+        </box>
+      ) : null}
+      {visible.map((row) => {
+        if (row.type === "header") {
+          return (
+            <box key={`h-${row.cat}`} height={1} paddingLeft={1}>
+              <text>
+                <span fg={theme.textMuted}>
+                  <strong>{row.cat}</strong>
+                </span>
+              </text>
+            </box>
+          )
+        }
+
+        const active = row.flat === cursor
+        const color = badge(row.cmd.source, theme)
+
+        return (
+          <box
+            key={`c-${row.cmd.name}`}
+            height={1}
+            flexDirection="row"
+            backgroundColor={active ? theme.backgroundElement : undefined}
+            onMouseOver={() => onCursor(row.flat)}
+            onMouseDown={() => onSelect(row.cmd)}
+            paddingLeft={2}
+            paddingRight={1}
+          >
+            {/* Left: /name [args]  description */}
+            <box flexGrow={1} height={1}>
+              <text>
+                <span fg={active ? theme.primary : theme.text}>/{row.cmd.name}</span>
+                {row.cmd.argsHint ? (
+                  <span fg={theme.textMuted}> {row.cmd.argsHint}</span>
+                ) : null}
+                <span fg={theme.textMuted}>  {row.cmd.description}</span>
+              </text>
+            </box>
+
+            {/* Right: source badge + keybind */}
+            <box height={1} flexDirection="row">
+              {color ? (
+                <text>
+                  <span fg={color}> {row.cmd.source}</span>
+                </text>
+              ) : null}
+              {row.cmd.keybind ? (
+                <text>
+                  <span fg={theme.textMuted}>  {row.cmd.keybind}</span>
+                </text>
+              ) : null}
+            </box>
+          </box>
+        )
+      })}
+      {below ? (
+        <box height={1} paddingLeft={1}>
+          <text fg={theme.textMuted}>↓ more</text>
+        </box>
+      ) : null}
+    </box>
+  )
+})