@cdoing/opentuicli 0.1.2

package/src/components/message-list.tsx

@@ -0,0 +1,338 @@
+/**
+ * MessageList — renders chat messages with tool calls, streaming, and markdown
+ *
+ * Uses a custom inline markdown renderer for assistant messages (matching the CLI's
+ * RenderMarkdown approach) with OpenTUI's <markdown> component for fenced code blocks.
+ * The scrollbox is managed by the parent (session.tsx) to ensure proper flex height
+ * calculation (matching OpenCode's pattern).
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useTheme, type Theme } from "../context/theme";
+
+// ── Types ──────────────────────────────────────────────
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  toolName?: string;
+  toolStatus?: "running" | "done" | "error";
+  isError?: boolean;
+  timestamp: number;
+}
+
+// ── Tool Icons ─────────────────────────────────────────
+
+const TOOL_ICONS: Record<string, string> = {
+  file_read: "📖", file_write: "✏️", file_edit: "🔧", multi_edit: "🔧",
+  shell_exec: "💻", file_run: "▶", glob_search: "🔍", grep_search: "🔎",
+  codebase_search: "🔎", web_fetch: "🌐", web_search: "🔮", sub_agent: "🤖",
+  todo: "📋", list_dir: "📁", view_diff: "📊", view_repo_map: "🗺️",
+  code_verify: "✅", system_info: "ℹ️", ast_edit: "🌳", notebook_edit: "📓",
+};
+
+// ── Inline Markdown Helpers ──────────────────────────────
+
+/** Strip markdown inline syntax markers: **bold** → bold, *italic* → italic, `code` → code */
+function stripInlineMarkdown(text: string): string {
+  return text
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/(?<!\w)\*([^*]+)\*(?!\w)/g, "$1");
+}
+
+// ── Custom Markdown Renderer ─────────────────────────────
+// Renders markdown content using OpenTUI primitives with proper styling.
+// Strips markdown syntax (##, **, *, `, ---) and renders styled text.
+// Uses <markdown> component only for fenced code blocks (syntax highlighting).
+
+function RenderMarkdown(props: { text: string; theme: Theme }) {
+  const t = props.theme;
+  const { syntaxStyle } = useTheme();
+  const lines = props.text.split("\n");
+
+  const rendered: React.ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // ── Fenced code block — use OpenTUI <markdown> for syntax highlighting ──
+    if (line.startsWith("```")) {
+      const codeLines: string[] = [line];
+      i++;
+      while (i < lines.length) {
+        codeLines.push(lines[i]);
+        if (lines[i].startsWith("```")) {
+          i++;
+          break;
+        }
+        i++;
+      }
+      const codeBlock = codeLines.join("\n");
+      rendered.push(
+        <box key={`code-${i}`} marginY={0}>
+          <markdown
+            syntaxStyle={syntaxStyle}
+            streaming={false}
+            content={codeBlock}
+            conceal={true}
+          />
+        </box>
+      );
+      continue;
+    }
+
+    // ── Headers ──
+    if (line.startsWith("### ")) {
+      rendered.push(
+        <text key={i} fg={t.info} attributes={TextAttributes.BOLD}>
+          {`  ▸ ${stripInlineMarkdown(line.slice(4))}`}
+        </text>
+      );
+      i++;
+      continue;
+    }
+    if (line.startsWith("## ")) {
+      rendered.push(
+        <text key={i} fg={t.primary} attributes={TextAttributes.BOLD}>
+          {` ▸▸ ${stripInlineMarkdown(line.slice(3))}`}
+        </text>
+      );
+      i++;
+      continue;
+    }
+    if (line.startsWith("# ")) {
+      rendered.push(
+        <text key={i} fg={t.primary} attributes={TextAttributes.BOLD}>
+          {`▸▸▸ ${stripInlineMarkdown(line.slice(2))}`}
+        </text>
+      );
+      i++;
+      continue;
+    }
+
+    // ── Horizontal rule ──
+    if (/^---+$/.test(line) || /^===+$/.test(line) || /^\*\*\*+$/.test(line)) {
+      rendered.push(
+        <text key={i} fg={t.textDim}>{"─".repeat(40)}</text>
+      );
+      i++;
+      continue;
+    }
+
+    // ── Bullet list ──
+    const bulletMatch = line.match(/^(\s*)[-*] (.*)/);
+    if (bulletMatch) {
+      const indent = bulletMatch[1] || "";
+      const content = stripInlineMarkdown(bulletMatch[2]);
+      rendered.push(
+        <text key={i}>{`${indent}● ${content}`}</text>
+      );
+      i++;
+      continue;
+    }
+
+    // ── Numbered list ──
+    const numMatch = line.match(/^(\s*)(\d+)\. (.*)/);
+    if (numMatch) {
+      const content = stripInlineMarkdown(numMatch[3]);
+      rendered.push(
+        <text key={i}>{`${numMatch[1]}${numMatch[2]}. ${content}`}</text>
+      );
+      i++;
+      continue;
+    }
+
+    // ── Blockquote ──
+    if (line.startsWith("> ")) {
+      rendered.push(
+        <text key={i} fg={t.textMuted}>{`│ ${stripInlineMarkdown(line.slice(2))}`}</text>
+      );
+      i++;
+      continue;
+    }
+
+    // ── Empty line ──
+    if (!line.trim()) {
+      rendered.push(<text key={i}>{" "}</text>);
+      i++;
+      continue;
+    }
+
+    // ── Plain text — strip markdown syntax ──
+    rendered.push(
+      <text key={i}>{stripInlineMarkdown(line)}</text>
+    );
+    i++;
+  }
+
+  return <box flexDirection="column">{rendered}</box>;
+}
+
+// ── Component ──────────────────────────────────────────
+
+function formatTimestamp(ts: number): string {
+  const d = new Date(ts);
+  let h = d.getHours();
+  const m = d.getMinutes();
+  const ampm = h >= 12 ? "PM" : "AM";
+  h = h % 12 || 12;
+  return `${h}:${m.toString().padStart(2, "0")} ${ampm}`;
+}
+
+/**
+ * Renders message content only (no scrollbox wrapper).
+ * Parent should wrap this in a <scrollbox> for proper flex height.
+ */
+export function MessageList(props: {
+  messages: Message[];
+  streamingText?: string;
+  isStreaming?: boolean;
+  showTimestamps?: boolean;
+}) {
+  const { theme } = useTheme();
+  const t = theme;
+
+  return (
+    <>
+      {/* Empty state */}
+      {props.messages.length === 0 && !props.isStreaming && (
+        <box paddingX={2} paddingY={1}>
+          <text fg={t.textMuted}>
+            {"Type a message to start chatting. Use / for commands, @ for context."}
+          </text>
+        </box>
+      )}
+
+      {/* Messages */}
+      {props.messages.map((msg) => {
+        if (msg.role === "user") {
+          return (
+            <box key={msg.id} paddingX={1} paddingY={0} flexDirection="row">
+              <text fg={t.userText} attributes={TextAttributes.BOLD}>
+                {"❯ "}
+              </text>
+              <text fg={t.userText} flexGrow={1}>{msg.content}</text>
+              {props.showTimestamps && msg.timestamp && (
+                <text fg={t.textDim}>{`  ${formatTimestamp(msg.timestamp)}`}</text>
+              )}
+            </box>
+          );
+        }
+
+        if (msg.role === "assistant") {
+          return (
+            <box key={msg.id} paddingLeft={1} marginTop={1} flexShrink={0} flexDirection="column">
+              <box flexDirection="row">
+                <text fg={t.primary} attributes={TextAttributes.BOLD}>
+                  {"◆ "}
+                </text>
+                {props.showTimestamps && msg.timestamp && (
+                  <text fg={t.textDim}>{`  ${formatTimestamp(msg.timestamp)}`}</text>
+                )}
+              </box>
+              <box paddingLeft={2}>
+                <RenderMarkdown text={msg.content.trim()} theme={t} />
+              </box>
+            </box>
+          );
+        }
+
+        if (msg.role === "system") {
+          return (
+            <box key={msg.id} paddingX={1} flexDirection="row">
+              <text fg={t.systemText} flexGrow={1}>{`⚡ ${msg.content}`}</text>
+              {props.showTimestamps && msg.timestamp && (
+                <text fg={t.textDim}>{`  ${formatTimestamp(msg.timestamp)}`}</text>
+              )}
+            </box>
+          );
+        }
+
+        if (msg.role === "tool") {
+          return (
+            <ToolCallRow
+              key={msg.id}
+              name={msg.toolName || "unknown"}
+              content={msg.content}
+              status={msg.toolStatus || (msg.isError ? "error" : "done")}
+            />
+          );
+        }
+
+        return null;
+      })}
+
+      {/* Streaming indicator */}
+      {props.isStreaming && (
+        <box paddingLeft={1} marginTop={1} flexShrink={0} flexDirection="column">
+          <box flexDirection="row">
+            <text fg={t.primary} attributes={TextAttributes.BOLD}>
+              {"◆ "}
+            </text>
+            <text fg={t.primary}>{"▊"}</text>
+          </box>
+          {(props.streamingText || "").trim() && (
+            <box paddingLeft={2}>
+              <RenderMarkdown text={(props.streamingText || "").trim()} theme={t} />
+            </box>
+          )}
+        </box>
+      )}
+    </>
+  );
+}
+
+// ── Tool Call Row ──────────────────────────────────────
+
+function ToolCallRow(props: {
+  name: string;
+  content: string;
+  status: "running" | "done" | "error";
+}) {
+  const { theme } = useTheme();
+  const t = theme;
+
+  const icon = TOOL_ICONS[props.name] || "⚙️";
+  const statusIcon = (() => {
+    switch (props.status) {
+      case "running": return "⏳";
+      case "done": return "✓";
+      case "error": return "✗";
+    }
+  })();
+  const statusColor = (() => {
+    switch (props.status) {
+      case "running": return t.toolRunning;
+      case "done": return t.toolDone;
+      case "error": return t.toolError;
+    }
+  })();
+
+  const shortName = (() => {
+    const names: Record<string, string> = {
+      file_read: "Read", file_write: "Write", file_edit: "Edit",
+      multi_edit: "MultiEdit", shell_exec: "Bash", glob_search: "Search files",
+      grep_search: "Search code", web_fetch: "Fetch", sub_agent: "Agent",
+      list_dir: "List dir", codebase_search: "Codebase search",
+    };
+    return names[props.name] || props.name.replace(/_/g, " ");
+  })();
+
+  return (
+    <box paddingX={2}>
+      <text fg={statusColor}>{`${statusIcon} `}</text>
+      <text fg={t.toolText}>{`${icon} ${shortName}`}</text>
+      {props.content && (
+        <text fg={t.textDim}>{` — ${trimText(props.content, 60)}`}</text>
+      )}
+    </box>
+  );
+}
+
+function trimText(s: string, max: number): string {
+  const first = s.split("\n")[0] || "";
+  return first.length > max ? first.substring(0, max) + "…" : first;
+}

package/src/components/permission-prompt.tsx

@@ -0,0 +1,71 @@
+/**
+ * PermissionPrompt — asks user to allow/deny a tool action
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "../context/theme";
+
+export interface PermissionPromptProps {
+  toolName: string;
+  message: string;
+  onDecision: (decision: "allow" | "always" | "deny") => void;
+}
+
+const OPTIONS = [
+  { key: "1", label: "Allow once", value: "allow" as const },
+  { key: "2", label: "Always allow", value: "always" as const },
+  { key: "3", label: "Deny", value: "deny" as const },
+];
+
+export function PermissionPrompt(props: PermissionPromptProps) {
+  const { theme } = useTheme();
+  const t = theme;
+  const [selected, setSelected] = useState(0);
+
+  useKeyboard((key: any) => {
+    if (key.name === "up" || key.name === "k") {
+      setSelected((s) => Math.max(0, s - 1));
+    } else if (key.name === "down" || key.name === "j") {
+      setSelected((s) => Math.min(OPTIONS.length - 1, s + 1));
+    } else if (key.name === "return") {
+      props.onDecision(OPTIONS[selected].value);
+    } else if (key.name === "1") {
+      props.onDecision("allow");
+    } else if (key.name === "2") {
+      props.onDecision("always");
+    } else if (key.name === "3") {
+      props.onDecision("deny");
+    }
+  });
+
+  return (
+    <box
+      borderStyle="single"
+      borderColor={t.warning}
+      paddingX={1}
+      paddingY={0}
+      flexDirection="column"
+    >
+      <text fg={t.warning} attributes={TextAttributes.BOLD}>
+        {"🔐 Permission Required"}
+      </text>
+      <text fg={t.text}>
+        {`  ${props.toolName}: ${props.message}`}
+      </text>
+      <text fg={t.textDim}>{""}</text>
+      {OPTIONS.map((opt, i) => (
+        <box key={opt.key}>
+          <text
+            fg={selected === i ? t.primary : t.textMuted}
+            attributes={selected === i ? TextAttributes.BOLD : undefined}
+          >
+            {`  ${selected === i ? "❯" : " "} [${opt.key}] ${opt.label}`}
+          </text>
+        </box>
+      ))}
+      <text fg={t.textDim}>{"\n  ↑↓ Navigate  Enter Select  1-3 Quick pick"}</text>
+    </box>
+  );
+}

package/src/components/session-browser.tsx

@@ -0,0 +1,220 @@
+/**
+ * SessionBrowser — Interactive TUI overlay for browsing saved conversations
+ *
+ * Features:
+ *   - Arrow keys to navigate
+ *   - Enter to resume a conversation
+ *   - d to delete, f to fork, v to view
+ *   - Escape to close
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState, useMemo } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { useTheme } from "../context/theme";
+import {
+  listConversations,
+  deleteConversation,
+  forkConversation,
+  formatRelativeDate,
+  type Conversation,
+} from "../lib/history";
+
+export interface SessionBrowserProps {
+  onResume: (conv: Conversation) => void;
+  onClose: () => void;
+}
+
+export function SessionBrowser(props: SessionBrowserProps) {
+  const { theme } = useTheme();
+  const t = theme;
+  const dims = useTerminalDimensions();
+
+  const [conversations, setConversations] = useState(() => listConversations());
+  const [selected, setSelected] = useState(0);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [viewMode, setViewMode] = useState(false);
+  const [viewScroll, setViewScroll] = useState(0);
+
+  const maxVisible = Math.max(5, Math.floor((dims.height || 20) - 10));
+
+  const scrollOffset = useMemo(() => {
+    if (selected < maxVisible) return 0;
+    return selected - maxVisible + 1;
+  }, [selected, maxVisible]);
+
+  const visibleConvs = conversations.slice(scrollOffset, scrollOffset + maxVisible);
+
+  useKeyboard((key: any) => {
+    if (viewMode) {
+      // View mode controls
+      if (key.name === "escape" || key.name === "q") {
+        setViewMode(false);
+        setViewScroll(0);
+      } else if (key.name === "up" || key.name === "k") {
+        setViewScroll((s) => Math.max(0, s - 1));
+      } else if (key.name === "down" || key.name === "j") {
+        const conv = conversations[selected];
+        if (conv) {
+          const msgs = conv.messages.filter((m) => m.role !== "tool");
+          setViewScroll((s) => Math.min(msgs.length - 1, s + 1));
+        }
+      } else if (key.name === "return") {
+        const conv = conversations[selected];
+        if (conv) props.onResume(conv);
+      }
+      return;
+    }
+
+    if (confirmDelete) {
+      if (key.name === "y") {
+        const conv = conversations[selected];
+        if (conv) {
+          deleteConversation(conv.id);
+          const updated = listConversations();
+          setConversations(updated);
+          setSelected((s) => Math.min(s, updated.length - 1));
+        }
+        setConfirmDelete(false);
+      } else {
+        setConfirmDelete(false);
+      }
+      return;
+    }
+
+    if (key.name === "escape" || key.name === "q") {
+      props.onClose();
+    } else if (key.name === "up" || key.name === "k") {
+      setSelected((s) => Math.max(0, s - 1));
+    } else if (key.name === "down" || key.name === "j") {
+      setSelected((s) => Math.min(conversations.length - 1, s + 1));
+    } else if (key.name === "return") {
+      const conv = conversations[selected];
+      if (conv) props.onResume(conv);
+    } else if (key.name === "d") {
+      if (conversations.length > 0) setConfirmDelete(true);
+    } else if (key.name === "f") {
+      const conv = conversations[selected];
+      if (conv) {
+        const forked = forkConversation(conv);
+        if (forked) {
+          setConversations(listConversations());
+        }
+      }
+    } else if (key.name === "v") {
+      if (conversations.length > 0) {
+        setViewMode(true);
+        setViewScroll(0);
+      }
+    }
+  });
+
+  if (conversations.length === 0) {
+    return (
+      <box
+        borderStyle="single"
+        borderColor={t.primary}
+        paddingX={2}
+        paddingY={1}
+        flexDirection="column"
+        flexGrow={1}
+      >
+        <text fg={t.primary} attributes={TextAttributes.BOLD}>
+          {"Sessions"}
+        </text>
+        <text fg={t.textDim}>{"\nNo saved conversations.\n"}</text>
+        <text fg={t.textMuted}>{"Esc  Close"}</text>
+      </box>
+    );
+  }
+
+  // View mode — show messages from selected conversation
+  if (viewMode) {
+    const conv = conversations[selected];
+    const msgs = conv ? conv.messages.filter((m) => m.role !== "tool") : [];
+    const visibleMsgs = msgs.slice(viewScroll, viewScroll + maxVisible);
+    const total = msgs.length;
+
+    return (
+      <box
+        borderStyle="single"
+        borderColor={t.primary}
+        paddingX={1}
+        paddingY={0}
+        flexDirection="column"
+        flexGrow={1}
+      >
+        <text fg={t.primary} attributes={TextAttributes.BOLD}>
+          {`Viewing: ${conv?.title || "Untitled"}`}
+        </text>
+        <text fg={t.textDim}>
+          {`${viewScroll + 1}–${Math.min(viewScroll + maxVisible, total)} of ${total} messages`}
+        </text>
+        <text>{""}</text>
+        {visibleMsgs.map((m, i) => {
+          const prefix = m.role === "user" ? "❯" : "◆";
+          const color = m.role === "user" ? t.success : t.text;
+          const content = m.content.length > 120 ? m.content.substring(0, 117) + "..." : m.content;
+          return (
+            <text key={`view-${viewScroll + i}`} fg={color}>
+              {`  ${prefix} ${content.replace(/\n/g, " ")}`}
+            </text>
+          );
+        })}
+        <text>{""}</text>
+        <text fg={t.textMuted}>{"  ↑↓ Scroll  Enter Resume  Esc Back"}</text>
+      </box>
+    );
+  }
+
+  // List mode
+  return (
+    <box
+      borderStyle="single"
+      borderColor={t.primary}
+      paddingX={1}
+      paddingY={0}
+      flexDirection="column"
+      flexGrow={1}
+    >
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>
+        {"Sessions"}
+      </text>
+      <text fg={t.textDim}>
+        {`${conversations.length} conversation${conversations.length !== 1 ? "s" : ""}`}
+      </text>
+      <text>{""}</text>
+      {visibleConvs.map((conv, i) => {
+        const idx = scrollOffset + i;
+        const isSelected = idx === selected;
+        const date = formatRelativeDate(conv.updatedAt);
+        const msgCount = conv.messages.filter((m) => m.role === "user").length;
+        const title = conv.title.length > 40 ? conv.title.substring(0, 37) + "..." : conv.title;
+
+        return (
+          <box key={conv.id} flexDirection="row">
+            <text
+              fg={isSelected ? t.primary : t.textMuted}
+              attributes={isSelected ? TextAttributes.BOLD : undefined}
+            >
+              {`  ${isSelected ? "❯" : " "} ${title}`}
+            </text>
+            <text fg={t.textDim}>
+              {`  ${date}  (${msgCount} msgs)`}
+            </text>
+          </box>
+        );
+      })}
+      {confirmDelete && (
+        <box>
+          <text>{""}</text>
+          <text fg={t.warning} attributes={TextAttributes.BOLD}>
+            {`  Delete "${conversations[selected]?.title}"? (y/n)`}
+          </text>
+        </box>
+      )}
+      <text>{""}</text>
+      <text fg={t.textMuted}>{"  ↑↓ Navigate  Enter Resume  v View  d Delete  f Fork  Esc Close"}</text>
+    </box>
+  );
+}

package/src/components/session-footer.tsx

@@ -0,0 +1,30 @@
+/**
+ * SessionFooter — bottom status line with directory and shortcut hints.
+ */
+
+import { useTheme } from "../context/theme";
+
+export interface SessionFooterProps {
+  workingDir: string;
+  isProcessing: boolean;
+}
+
+export function SessionFooter(props: SessionFooterProps) {
+  const { theme } = useTheme();
+  const t = theme;
+
+  const home = process.env.HOME || "";
+  const shortDir = home && props.workingDir.startsWith(home)
+    ? "~" + props.workingDir.slice(home.length)
+    : props.workingDir;
+
+  const shortcuts = "^N:New  ^P:Model  ^T:Theme  ^S:Sessions  ^B:Sidebar";
+
+  return (
+    <box height={1} flexDirection="row">
+      <text fg={t.textDim}>{` ${shortDir}`}</text>
+      <box flexGrow={1} />
+      <text fg={t.textMuted}>{`${shortcuts} `}</text>
+    </box>
+  );
+}

package/src/components/session-header.tsx

@@ -0,0 +1,39 @@
+/**
+ * SessionHeader — top-line session info bar.
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useTheme } from "../context/theme";
+
+export interface SessionHeaderProps {
+  title: string;
+  provider: string;
+  model: string;
+  tokens?: { input: number; output: number };
+  contextPercent?: number;
+  status: string;
+}
+
+export function SessionHeader(props: SessionHeaderProps) {
+  const { theme } = useTheme();
+  const t = theme;
+
+  const inTok = props.tokens ? props.tokens.input.toLocaleString() : "0";
+  const outTok = props.tokens ? props.tokens.output.toLocaleString() : "0";
+  const pct = props.contextPercent ? Math.round(props.contextPercent) : 0;
+  const pctColor = pct > 75 ? t.error : pct > 50 ? t.warning : t.success;
+  const statusColor = props.status === "Error" ? t.error
+    : props.status === "Processing..." ? t.warning : t.success;
+
+  const left = ` ◆ ${props.title || "Session"} │ ${props.provider}/${props.model} │ ${inTok}→${outTok} tokens`;
+
+  return (
+    <box height={1} flexDirection="row">
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>{left}</text>
+      <text fg={t.border}>{" │ "}</text>
+      <text fg={pctColor}>{`${pct}%`}</text>
+      <box flexGrow={1} />
+      <text fg={statusColor}>{`${props.status} `}</text>
+    </box>
+  );
+}