@cdoing/opentuicli 0.1.2 → 0.1.18

package/src/components/message-list.tsx

@@ -18,18 +18,41 @@ export interface Message {
   content: string;
   toolName?: string;
   toolStatus?: "running" | "done" | "error";
+  toolInput?: Record<string, any>;
   isError?: boolean;
   timestamp: number;
 }
 
-// ── Tool Icons ─────────────────────────────────────────
+// ── Tool Config ───────────────────────────────────────
 
-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: "📓",
+interface ToolConfig {
+  label: string;
+  icon: string;
+  verb: string;
+}
+
+const TOOL_CONFIG: Record<string, ToolConfig> = {
+  file_read:        { label: "Read",            icon: "◇", verb: "Reading" },
+  file_write:       { label: "Write",           icon: "◈", verb: "Writing" },
+  file_edit:        { label: "Edit",            icon: "◈", verb: "Editing" },
+  multi_edit:       { label: "MultiEdit",       icon: "◈", verb: "Editing" },
+  apply_patch:      { label: "Patch",           icon: "◈", verb: "Patching" },
+  shell_exec:       { label: "Bash",            icon: "$", verb: "Running" },
+  file_run:         { label: "Run",             icon: "▶", verb: "Running" },
+  glob_search:      { label: "Search files",    icon: "◎", verb: "Searching" },
+  grep_search:      { label: "Search",          icon: "◎", verb: "Searching" },
+  codebase_search:  { label: "Codebase",        icon: "◎", verb: "Searching" },
+  web_fetch:        { label: "Fetch",           icon: "◌", verb: "Fetching" },
+  web_search:       { label: "Web Search",      icon: "◌", verb: "Searching" },
+  sub_agent:        { label: "Agent",           icon: "◆", verb: "Running" },
+  todo:             { label: "Todo",            icon: "☐", verb: "Updating" },
+  list_dir:         { label: "List Dir",        icon: "├", verb: "Listing" },
+  view_diff:        { label: "Diff",            icon: "±", verb: "Viewing" },
+  view_repo_map:    { label: "Repo Map",        icon: "⊞", verb: "Mapping" },
+  code_verify:      { label: "Verify",          icon: "✓", verb: "Verifying" },
+  system_info:      { label: "System Info",     icon: "i", verb: "Checking" },
+  ast_edit:         { label: "AST Edit",        icon: "⌥", verb: "Editing" },
+  notebook_edit:    { label: "Notebook",        icon: "⊡", verb: "Editing" },
 };
 
 // ── Inline Markdown Helpers ──────────────────────────────
@@ -258,6 +281,7 @@ export function MessageList(props: {
               name={msg.toolName || "unknown"}
               content={msg.content}
               status={msg.toolStatus || (msg.isError ? "error" : "done")}
+              input={msg.toolInput}
             />
           );
         }
@@ -285,54 +309,238 @@ export function MessageList(props: {
   );
 }
 
+// ── Tool Helpers ──────────────────────────────────────
+
+function trimText(s: string, max: number): string {
+  const first = s.split("\n")[0] || "";
+  return first.length > max ? first.substring(0, max) + "…" : first;
+}
+
+function shortPath(p: string): string {
+  const home = process.env.HOME || "";
+  let s = (home && p.startsWith(home)) ? "~" + p.slice(home.length) : p;
+  // Show last 2 segments if too long
+  if (s.length > 50) {
+    const parts = s.split("/");
+    s = "…/" + parts.slice(-2).join("/");
+  }
+  return s;
+}
+
+function countLines(s: string): number {
+  return s ? s.split("\n").length : 0;
+}
+
+/** Extract a short description from tool input, per tool type */
+function getToolDescription(name: string, input?: Record<string, any>): string {
+  if (!input) return "";
+  switch (name) {
+    case "file_read":
+      return input.file_path ? shortPath(input.file_path) : "";
+    case "file_write":
+      return input.file_path ? shortPath(input.file_path) : "";
+    case "file_edit":
+    case "multi_edit":
+    case "apply_patch":
+      return input.file_path ? shortPath(input.file_path) : "";
+    case "shell_exec":
+      return input.command ? trimText(input.command, 55) : "";
+    case "file_run":
+      return input.file_path ? shortPath(input.file_path) : "";
+    case "glob_search":
+      return input.pattern ? `"${trimText(input.pattern, 40)}"` : "";
+    case "grep_search":
+      return input.pattern ? `"${trimText(input.pattern, 30)}"${input.path ? ` in ${shortPath(input.path)}` : ""}` : "";
+    case "codebase_search":
+      return input.query ? `"${trimText(input.query, 40)}"` : "";
+    case "web_fetch":
+      return input.url ? trimText(input.url, 50) : "";
+    case "web_search":
+      return input.query ? `"${trimText(input.query, 40)}"` : "";
+    case "sub_agent":
+      return input.description ? trimText(input.description, 50) : "";
+    case "list_dir":
+      return input.path ? shortPath(input.path) : "";
+    default:
+      return input.description || "";
+  }
+}
+
+/** Get a summary of the output for the collapsed view */
+function getOutputSummary(name: string, output: string, isError?: boolean): string {
+  if (!output) return "";
+  if (isError) return trimText(output, 50);
+
+  const lines = countLines(output);
+  switch (name) {
+    case "file_read":
+      return `${lines} lines`;
+    case "shell_exec":
+    case "file_run":
+      return lines > 1 ? `${lines} lines` : trimText(output, 40);
+    case "grep_search":
+    case "glob_search":
+    case "codebase_search": {
+      const results = output.split("\n").filter((l) => l.trim()).length;
+      return `${results} result${results !== 1 ? "s" : ""}`;
+    }
+    case "file_write":
+    case "file_edit":
+    case "multi_edit":
+    case "apply_patch":
+      return output.includes("+") || output.includes("-") ? trimText(output, 40) : "done";
+    default:
+      return lines > 1 ? `${lines} lines` : trimText(output, 40);
+  }
+}
+
 // ── Tool Call Row ──────────────────────────────────────
 
 function ToolCallRow(props: {
   name: string;
   content: string;
   status: "running" | "done" | "error";
+  input?: Record<string, any>;
 }) {
   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, " ");
-  })();
+  const config = TOOL_CONFIG[props.name] || { label: props.name.replace(/_/g, " "), icon: "⚙", verb: "Running" };
+  const isRunning = props.status === "running";
+  const isError = props.status === "error";
+
+  // Status indicator
+  const statusIcon = isRunning ? "⟳" : isError ? "✗" : "✓";
+  const statusColor = isRunning ? t.toolRunning : isError ? t.toolError : t.toolDone;
+
+  // Description from input args
+  const description = getToolDescription(props.name, props.input);
+
+  // Output summary (shown after → arrow)
+  const outputSummary = !isRunning ? getOutputSummary(props.name, props.content, isError) : "";
+
+  // For shell commands, show the command inline
+  const isShell = props.name === "shell_exec" || props.name === "file_run";
+  const shellCmd = isShell && props.input?.command ? trimText(props.input.command, 55) : "";
+
+  // For file ops, show the path
+  const isFileOp = ["file_read", "file_write", "file_edit", "multi_edit", "apply_patch"].includes(props.name);
+  const filePath = isFileOp && props.input?.file_path ? shortPath(props.input.file_path) : "";
+
+  // For search ops, show the pattern
+  const isSearch = ["grep_search", "glob_search", "codebase_search"].includes(props.name);
+  const searchPattern = isSearch && (props.input?.pattern || props.input?.query) ?
+    trimText(props.input?.pattern || props.input?.query, 35) : "";
+
+  // Diff preview for edits
+  const hasEditDiff = (props.name === "file_edit" || props.name === "multi_edit") &&
+    props.input?.old_string && props.input?.new_string;
+  const oldStr = hasEditDiff ? trimText(props.input!.old_string, 50) : "";
+  const newStr = hasEditDiff ? trimText(props.input!.new_string, 50) : "";
+
+  // Output content lines (for expanded view)
+  const outputLines = props.content ? props.content.split("\n") : [];
+  const maxPreviewLines = 6;
+  const previewLines = outputLines.slice(0, maxPreviewLines);
+  const hasMoreLines = outputLines.length > maxPreviewLines;
 
   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 flexDirection="column" paddingLeft={2} paddingRight={1}>
+      {/* ── Header row: status + icon + label + description + output summary ── */}
+      <box flexDirection="row" height={1}>
+        <text fg={statusColor} attributes={isRunning ? TextAttributes.BOLD : undefined}>
+          {`${statusIcon} `}
+        </text>
+        <text fg={t.textMuted}>{`${config.icon} `}</text>
+        <text fg={isRunning ? t.toolRunning : t.text} attributes={TextAttributes.BOLD}>
+          {isRunning ? `${config.verb}...` : config.label}
+        </text>
+
+        {/* Inline detail: file path, command, or search pattern */}
+        {filePath && !isRunning ? (
+          <text fg={t.info}>{` ${filePath}`}</text>
+        ) : shellCmd ? (
+          <text fg={isRunning ? t.textDim : t.textMuted}>{` $ ${shellCmd}`}</text>
+        ) : searchPattern ? (
+          <text fg={t.warning}>{` "${searchPattern}"`}</text>
+        ) : description && !filePath && !shellCmd ? (
+          <text fg={t.textDim}>{` ${description}`}</text>
+        ) : null}
+
+        {/* Output summary after arrow */}
+        {outputSummary && !isRunning ? (
+          <>
+            <text fg={t.textDim}>{" → "}</text>
+            <text fg={isError ? t.error : t.toolDone}>{outputSummary}</text>
+          </>
+        ) : null}
+      </box>
+
+      {/* ── Edit diff preview (for file_edit) ── */}
+      {hasEditDiff && !isRunning && (
+        <box flexDirection="column" paddingLeft={3}>
+          <box flexDirection="row" height={1}>
+            <text fg={t.diffRemove}>{`  - ${oldStr}`}</text>
+          </box>
+          <box flexDirection="row" height={1}>
+            <text fg={t.diffAdd}>{`  + ${newStr}`}</text>
+          </box>
+        </box>
+      )}
+
+      {/* ── Shell output preview (for bash/run) ── */}
+      {isShell && !isRunning && previewLines.length > 0 && (
+        <box flexDirection="column" paddingLeft={3}>
+          <box height={1}>
+            <text fg={t.border}>{"  ┌" + "─".repeat(40)}</text>
+          </box>
+          {previewLines.map((line, i) => (
+            <box key={i} height={1}>
+              <text fg={t.textDim}>{`  │ ${trimText(line, 55)}`}</text>
+            </box>
+          ))}
+          {hasMoreLines && (
+            <box height={1}>
+              <text fg={t.textDim}>{`  │ … ${outputLines.length - maxPreviewLines} more lines`}</text>
+            </box>
+          )}
+          <box height={1}>
+            <text fg={t.border}>{"  └" + "─".repeat(40)}</text>
+          </box>
+        </box>
+      )}
+
+      {/* ── Search results preview ── */}
+      {isSearch && !isRunning && previewLines.length > 0 && (
+        <box flexDirection="column" paddingLeft={3}>
+          {previewLines.slice(0, 4).map((line, i) => (
+            <box key={i} height={1}>
+              <text fg={t.textDim}>{`  ${trimText(line, 60)}`}</text>
+            </box>
+          ))}
+          {outputLines.length > 4 && (
+            <box height={1}>
+              <text fg={t.textDim}>{`  … ${outputLines.length - 4} more`}</text>
+            </box>
+          )}
+        </box>
+      )}
+
+      {/* ── Error output ── */}
+      {isError && props.content && (
+        <box flexDirection="column" paddingLeft={3}>
+          <box height={1}>
+            <text fg={t.error}>{`  ✗ ${trimText(props.content, 70)}`}</text>
+          </box>
+        </box>
+      )}
+
+      {/* ── Running indicator for shell commands ── */}
+      {isShell && isRunning && (
+        <box paddingLeft={3} height={1}>
+          <text fg={t.toolRunning}>{"  ▊ Executing command..."}</text>
+        </box>
       )}
     </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

@@ -20,7 +20,7 @@ const OPTIONS = [
 ];
 
 export function PermissionPrompt(props: PermissionPromptProps) {
-  const { theme } = useTheme();
+  const { theme, customBg } = useTheme();
   const t = theme;
   const [selected, setSelected] = useState(0);
 
@@ -44,6 +44,7 @@ export function PermissionPrompt(props: PermissionPromptProps) {
     <box
       borderStyle="single"
       borderColor={t.warning}
+      backgroundColor={customBg || t.bg}
       paddingX={1}
       paddingY={0}
       flexDirection="column"

package/src/components/session-browser.tsx

@@ -6,10 +6,11 @@
  *   - Enter to resume a conversation
  *   - d to delete, f to fork, v to view
  *   - Escape to close
+ *   - Native <scrollbox> for smooth scrolling
  */
 
 import { TextAttributes } from "@opentui/core";
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { useTheme } from "../context/theme";
 import {
@@ -26,7 +27,7 @@ export interface SessionBrowserProps {
 }
 
 export function SessionBrowser(props: SessionBrowserProps) {
-  const { theme } = useTheme();
+  const { theme, customBg } = useTheme();
   const t = theme;
   const dims = useTerminalDimensions();
 
@@ -38,13 +39,6 @@ export function SessionBrowser(props: SessionBrowserProps) {
 
   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
@@ -114,16 +108,19 @@ export function SessionBrowser(props: SessionBrowserProps) {
       <box
         borderStyle="single"
         borderColor={t.primary}
+        backgroundColor={customBg || t.bg}
         paddingX={2}
         paddingY={1}
         flexDirection="column"
         flexGrow={1}
       >
-        <text fg={t.primary} attributes={TextAttributes.BOLD}>
-          {"Sessions"}
-        </text>
+        <box flexDirection="row" flexShrink={0}>
+          <text fg={t.primary} attributes={TextAttributes.BOLD} flexGrow={1}>
+            {"Sessions"}
+          </text>
+          <text fg={t.textDim}>{"esc"}</text>
+        </box>
         <text fg={t.textDim}>{"\nNo saved conversations.\n"}</text>
-        <text fg={t.textMuted}>{"Esc  Close"}</text>
       </box>
     );
   }
@@ -140,29 +137,36 @@ export function SessionBrowser(props: SessionBrowserProps) {
         borderStyle="single"
         borderColor={t.primary}
         paddingX={1}
-        paddingY={0}
+        paddingY={1}
         flexDirection="column"
         flexGrow={1}
       >
-        <text fg={t.primary} attributes={TextAttributes.BOLD}>
-          {`Viewing: ${conv?.title || "Untitled"}`}
-        </text>
-        <text fg={t.textDim}>
+        <box flexDirection="row" flexShrink={0}>
+          <text fg={t.primary} attributes={TextAttributes.BOLD} flexGrow={1}>
+            {`Viewing: ${conv?.title || "Untitled"}`}
+          </text>
+          <text fg={t.textDim}>{"esc"}</text>
+        </box>
+        <text fg={t.textDim} flexShrink={0}>
           {`${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>
+        <text flexShrink={0}>{""}</text>
+        <scrollbox flexGrow={1}>
+          <box flexShrink={0}>
+            {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>
+              );
+            })}
+          </box>
+        </scrollbox>
+        <text flexShrink={0}>{""}</text>
+        <text fg={t.textMuted} flexShrink={0}>{"  ↑↓ Scroll  Enter Resume  Esc Back"}</text>
       </box>
     );
   }
@@ -172,49 +176,56 @@ export function SessionBrowser(props: SessionBrowserProps) {
     <box
       borderStyle="single"
       borderColor={t.primary}
+      backgroundColor={customBg || t.bg}
       paddingX={1}
-      paddingY={0}
+      paddingY={1}
       flexDirection="column"
       flexGrow={1}
     >
-      <text fg={t.primary} attributes={TextAttributes.BOLD}>
-        {"Sessions"}
-      </text>
-      <text fg={t.textDim}>
+      <box flexDirection="row" flexShrink={0}>
+        <text fg={t.primary} attributes={TextAttributes.BOLD} flexGrow={1}>
+          {"Sessions"}
+        </text>
+        <text fg={t.textDim}>{"esc"}</text>
+      </box>
+      <text fg={t.textDim} flexShrink={0}>
         {`${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;
+      <text flexShrink={0}>{""}</text>
+      <scrollbox flexGrow={1}>
+        <box flexShrink={0}>
+          {conversations.map((conv, idx) => {
+            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>
-        );
-      })}
+            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>
+            );
+          })}
+        </box>
+      </scrollbox>
       {confirmDelete && (
-        <box>
+        <box flexShrink={0}>
           <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>
+      <text flexShrink={0}>{""}</text>
+      <text fg={t.textMuted} flexShrink={0}>{"  ↑↓ Navigate  Enter Resume  v View  d Delete  f Fork  Esc Close"}</text>
     </box>
   );
 }

package/src/components/session-footer.tsx

@@ -18,10 +18,10 @@ export function SessionFooter(props: SessionFooterProps) {
     ? "~" + props.workingDir.slice(home.length)
     : props.workingDir;
 
-  const shortcuts = "^N:New  ^P:Model  ^T:Theme  ^S:Sessions  ^B:Sidebar";
+  const shortcuts = "^P:Commands  ^O:Model  ^T:Theme  ^S:Sessions  ^B:Sidebar";
 
   return (
-    <box height={1} flexDirection="row">
+    <box height={1} flexDirection="row" backgroundColor={t.bgSubtle}>
       <text fg={t.textDim}>{` ${shortDir}`}</text>
       <box flexGrow={1} />
       <text fg={t.textMuted}>{`${shortcuts} `}</text>

package/src/components/session-header.tsx

@@ -28,7 +28,7 @@ export function SessionHeader(props: SessionHeaderProps) {
   const left = ` ◆ ${props.title || "Session"} │ ${props.provider}/${props.model} │ ${inTok}→${outTok} tokens`;
 
   return (
-    <box height={1} flexDirection="row">
+    <box height={1} flexDirection="row" backgroundColor={t.bgSubtle}>
       <text fg={t.primary} attributes={TextAttributes.BOLD}>{left}</text>
       <text fg={t.border}>{" │ "}</text>
       <text fg={pctColor}>{`${pct}%`}</text>