@cdoing/opentuicli 0.1.21 → 0.1.26

package/src/components/sidebar.tsx

@@ -1,183 +0,0 @@
-/**
- * Sidebar — collapsible right panel with sections.
- * Uses single text per line to avoid layout concatenation issues.
- */
-
-import { TextAttributes } from "@opentui/core";
-import { useTheme } from "../context/theme";
-
-const W = 34; // content width (inside the border)
-
-export interface SidebarProps {
-  provider: string;
-  model: string;
-  workingDir: string;
-  tokens?: { input: number; output: number };
-  contextPercent?: number;
-  activeTool?: string;
-  status: string;
-  sessionTitle?: string;
-  themeId?: string;
-  modifiedFiles?: Array<{ path: string; additions: number; deletions: number }>;
-}
-
-function trunc(str: string, max: number): string {
-  return str.length > max ? str.slice(0, max - 1) + "…" : str;
-}
-
-function bar(pct: number, len: number): string {
-  const filled = Math.round((pct / 100) * len);
-  return "█".repeat(filled) + "░".repeat(len - filled);
-}
-
-export function Sidebar(props: SidebarProps) {
-  const { theme } = useTheme();
-  const t = theme;
-
-  const home = process.env.HOME || "";
-  const dir = home && props.workingDir.startsWith(home)
-    ? "~" + props.workingDir.slice(home.length) : props.workingDir;
-
-  const pct = props.contextPercent ? Math.round(props.contextPercent) : 0;
-  const pctColor = pct > 75 ? t.error : pct > 50 ? t.warning : t.success;
-  const inTok = props.tokens ? props.tokens.input.toLocaleString() : "0";
-  const outTok = props.tokens ? props.tokens.output.toLocaleString() : "0";
-  const statusColor = props.status === "Error" ? t.error
-    : props.status === "Processing..." ? t.warning : t.success;
-
-  // Each line is a single string rendered in one <text> to avoid concatenation issues
-  const lines: Array<{ text: string; fg: any; bold?: boolean }> = [];
-
-  const sep = () => lines.push({ text: "│", fg: t.border });
-  const header = (title: string) => {
-    lines.push({ text: `│ ${title}`, fg: t.primary, bold: true });
-  };
-  const row = (label: string, value: string, fg?: any) => {
-    const padded = label ? `│   ${label.padEnd(10)} ${trunc(value, W - 14)}` : `│   ${trunc(value, W - 4)}`;
-    lines.push({ text: padded, fg: fg || t.text });
-  };
-  const shortcut = (key: string, label: string) => {
-    lines.push({ text: `│   ${key.padEnd(10)} ${label}`, fg: t.textDim });
-  };
-
-  // ── Session ──
-  header("Session");
-  row("", props.sessionTitle || "New Session");
-  row("Dir", trunc(dir, W - 14));
-  row("Provider", props.provider);
-  row("Model", props.model);
-  if (props.themeId) row("Theme", props.themeId);
-  sep();
-
-  // ── Context ──
-  header("Context");
-  row("Input", `${inTok} tokens`);
-  row("Output", `${outTok} tokens`);
-  lines.push({ text: `│   ${bar(pct, 16)} ${pct}%`, fg: pctColor });
-  sep();
-
-  // ── Activity ──
-  header("Activity");
-  lines.push({ text: `│   Status     ${props.status}`, fg: statusColor });
-  if (props.activeTool) {
-    lines.push({ text: `│   Tool       ${trunc(props.activeTool, W - 14)}`, fg: t.toolRunning });
-  }
-  sep();
-
-  // ── Modified Files ──
-  if (props.modifiedFiles && props.modifiedFiles.length > 0) {
-    header(`Files (${props.modifiedFiles.length})`);
-    for (const f of props.modifiedFiles.slice(0, 6)) {
-      const name = f.path.split("/").pop() || f.path;
-      const diff = (f.additions > 0 ? ` +${f.additions}` : "") + (f.deletions > 0 ? ` -${f.deletions}` : "");
-      lines.push({ text: `│   ${trunc(name, W - 12)}${diff}`, fg: t.text });
-    }
-    if (props.modifiedFiles.length > 6) {
-      lines.push({ text: `│   … ${props.modifiedFiles.length - 6} more`, fg: t.textDim });
-    }
-    sep();
-  }
-
-  // ── LSP ──
-  header("LSP");
-  row("", "LSPs will activate as files are read");
-  sep();
-
-  // ── Shortcuts ──
-  header("Shortcuts");
-  shortcut("Ctrl+P", "Commands");
-  shortcut("Ctrl+O", "Model");
-  shortcut("Ctrl+T", "Theme");
-  shortcut("Ctrl+N", "New session");
-  shortcut("Ctrl+S", "Sessions");
-  shortcut("Ctrl+B", "Sidebar");
-  shortcut("F1", "Help");
-
-  // ── Getting started card ──
-  const cardW = W - 2;
-  const cardLines: Array<{ text: string; fg: any; bold?: boolean }> = [];
-  cardLines.push({ text: `  ◆ Getting started`, fg: t.primary, bold: true });
-  cardLines.push({ text: ``, fg: t.textDim });
-  cardLines.push({ text: `  Cdoing includes free models`, fg: t.textMuted });
-  cardLines.push({ text: `  so you can start immediately.`, fg: t.textMuted });
-  cardLines.push({ text: ``, fg: t.textDim });
-  cardLines.push({ text: `  Connect from 75+ providers to`, fg: t.textMuted });
-  cardLines.push({ text: `  use other models, including`, fg: t.textMuted });
-  cardLines.push({ text: `  Claude, GPT, Gemini etc`, fg: t.textMuted });
-  cardLines.push({ text: ``, fg: t.textDim });
-  cardLines.push({ text: `  Connect provider      /setup`, fg: t.text, bold: true });
-
-  return (
-    <box width={W + 2} flexDirection="column" backgroundColor={t.bgSubtle}>
-      <box flexDirection="column" flexGrow={1}>
-        {lines.map((line, i) => (
-          <box key={i} height={1}>
-            <text
-              fg={line.fg}
-              attributes={line.bold ? TextAttributes.BOLD : undefined}
-            >
-              {line.text}
-            </text>
-          </box>
-        ))}
-        {/* Fill remaining space */}
-        <box flexGrow={1}>
-          <text fg={t.border}>{"│"}</text>
-        </box>
-        {/* Getting started card at bottom */}
-        <box flexDirection="column" paddingX={1}>
-          <box height={1}>
-            <text fg={t.border}>{"┌" + "─".repeat(cardW) + "┐"}</text>
-          </box>
-          {cardLines.map((cl, i) => (
-            <box key={`card-${i}`} height={1}>
-              <text fg={t.border}>{"│"}</text>
-              <text fg={cl.fg} attributes={cl.bold ? TextAttributes.BOLD : undefined}>
-                {cl.text.padEnd(cardW)}
-              </text>
-              <text fg={t.border}>{"│"}</text>
-            </box>
-          ))}
-          <box height={1}>
-            <text fg={t.border}>{"└" + "─".repeat(cardW) + "┘"}</text>
-          </box>
-        </box>
-        {/* Working dir + version footer */}
-        <box height={1} paddingX={1}>
-          <text fg={t.textDim}>
-            {trunc((() => {
-              const home = process.env.HOME || "";
-              return home && props.workingDir.startsWith(home)
-                ? "~" + props.workingDir.slice(home.length) : props.workingDir;
-            })(), W - 2)}
-          </text>
-        </box>
-        <box height={1} paddingX={1}>
-          <text fg={t.success}>{"● "}</text>
-          <text fg={t.text} attributes={TextAttributes.BOLD}>{"Cdoing"}</text>
-          <text fg={t.textDim}>{" Agent"}</text>
-        </box>
-      </box>
-    </box>
-  );
-}

package/src/components/status-bar.tsx

@@ -1,76 +0,0 @@
-/**
- * StatusBar — bottom bar with model info, tokens, context %, keybinds
- */
-
-import { TextAttributes } from "@opentui/core";
-import { useTheme } from "../context/theme";
-
-export interface StatusBarProps {
-  provider: string;
-  model: string;
-  mode: string;
-  workingDir: string;
-  tokens?: { input: number; output: number };
-  contextPercent?: number;
-  activeTool?: string;
-  isProcessing?: boolean;
-}
-
-export function StatusBar(props: StatusBarProps) {
-  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 tokenInfo = props.tokens
-    ? ` ${props.tokens.input.toLocaleString()}→${props.tokens.output.toLocaleString()}`
-    : "";
-
-  const pct = props.contextPercent ? Math.round(props.contextPercent) : 0;
-  const contextBar = pct > 0 ? ` ctx:${pct}%` : "";
-
-  return (
-    <box height={1} flexDirection="row" justifyContent="space-between" backgroundColor={t.bgSubtle}>
-      <box flexDirection="row">
-        <text fg={t.primary} attributes={TextAttributes.BOLD}>
-          {` ${props.provider}`}
-        </text>
-        <text fg={t.textMuted}>{`/${props.model}`}</text>
-        <text fg={t.textDim}>{" │ "}</text>
-        <text fg={t.warning}>{props.mode}</text>
-        {tokenInfo && (
-          <>
-            <text fg={t.textDim}>{" │"}</text>
-            <text fg={t.textMuted}>{tokenInfo}</text>
-          </>
-        )}
-        {contextBar && (
-          <>
-            <text fg={t.textDim}>{" │"}</text>
-            <text fg={pct > 75 ? t.warning : t.textMuted}>{contextBar}</text>
-          </>
-        )}
-        {props.activeTool && (
-          <>
-            <text fg={t.textDim}>{" │ "}</text>
-            <text fg={t.toolRunning}>{`⏳ ${props.activeTool}`}</text>
-          </>
-        )}
-        {props.isProcessing && !props.activeTool && (
-          <>
-            <text fg={t.textDim}>{" │ "}</text>
-            <text fg={t.primary}>{"thinking..."}</text>
-          </>
-        )}
-      </box>
-      <box flexDirection="row">
-        <text fg={t.textDim}>{shortDir}</text>
-        <text fg={t.textDim}>{" │ "}</text>
-        <text fg={t.textMuted}>{"^P:Commands  ^O:Model  ^C:Quit"}</text>
-      </box>
-    </box>
-  );
-}

package/src/components/toast.tsx

@@ -1,139 +0,0 @@
-/**
- * Toast Notification System — transient notifications for the TUI
- *
- * Provides a ToastProvider context and useToast hook for showing
- * auto-dismissing notifications with type-based styling.
- */
-
-import { createContext, useContext, useState, useEffect, useCallback, useRef } from "react";
-import type { ReactNode } from "react";
-import { useTheme } from "../context/theme";
-import type { Theme } from "../context/theme";
-import type { RGBA } from "@opentui/core";
-
-// ── Types ────────────────────────────────────────────
-
-export type ToastType = "info" | "success" | "warning" | "error";
-
-interface ToastItem {
-  id: number;
-  type: ToastType;
-  message: string;
-  duration: number;
-}
-
-interface ToastContextValue {
-  toast: (type: ToastType, message: string, duration?: number) => void;
-}
-
-// ── Icons & Colors ───────────────────────────────────
-
-const TOAST_ICONS: Record<ToastType, string> = {
-  info: "\u2139",     // i
-  success: "\u2713",  // checkmark
-  warning: "\u26A0",  // warning sign
-  error: "\u2717",    // x mark
-};
-
-function getToastColor(type: ToastType, theme: Theme): RGBA {
-  switch (type) {
-    case "info":    return theme.info;
-    case "success": return theme.success;
-    case "warning": return theme.warning;
-    case "error":   return theme.error;
-  }
-}
-
-// ── Context ──────────────────────────────────────────
-
-const ToastContext = createContext<ToastContextValue | undefined>(undefined);
-
-const DEFAULT_DURATION = 3000;
-const MAX_VISIBLE = 3;
-
-// ── Provider ─────────────────────────────────────────
-
-export function ToastProvider(props: { children: ReactNode }) {
-  const { theme } = useTheme();
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-  const idRef = useRef(0);
-  const timersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
-
-  const removeToast = useCallback((id: number) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-    const timer = timersRef.current.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      timersRef.current.delete(id);
-    }
-  }, []);
-
-  const toast = useCallback((type: ToastType, message: string, duration?: number) => {
-    const id = ++idRef.current;
-    const dur = duration ?? DEFAULT_DURATION;
-    const item: ToastItem = { id, type, message, duration: dur };
-
-    setToasts((prev) => {
-      const next = [...prev, item];
-      // Keep only the most recent MAX_VISIBLE toasts
-      if (next.length > MAX_VISIBLE) {
-        const removed = next.splice(0, next.length - MAX_VISIBLE);
-        // Clean up timers for removed toasts
-        for (const r of removed) {
-          const timer = timersRef.current.get(r.id);
-          if (timer) {
-            clearTimeout(timer);
-            timersRef.current.delete(r.id);
-          }
-        }
-      }
-      return next;
-    });
-
-    // Set auto-dismiss timer
-    const timer = setTimeout(() => {
-      removeToast(id);
-    }, dur);
-    timersRef.current.set(id, timer);
-  }, [removeToast]);
-
-  // Clean up all timers on unmount
-  useEffect(() => {
-    return () => {
-      for (const timer of timersRef.current.values()) {
-        clearTimeout(timer);
-      }
-      timersRef.current.clear();
-    };
-  }, []);
-
-  return (
-    <ToastContext.Provider value={{ toast }}>
-      {props.children}
-      {/* Toast overlay — positioned at the bottom, above status bar */}
-      {toasts.length > 0 && (
-        <box flexDirection="column" alignItems="flex-end">
-          {toasts.map((t) => {
-            const color = getToastColor(t.type, theme);
-            const icon = TOAST_ICONS[t.type];
-            return (
-              <box key={t.id} height={1} flexDirection="row" justifyContent="flex-end">
-                <text fg={color}>{` ${icon} `}</text>
-                <text fg={theme.text}>{t.message}</text>
-                <text fg={theme.textDim}>{" "}</text>
-              </box>
-            );
-          })}
-        </box>
-      )}
-    </ToastContext.Provider>
-  );
-}
-
-// ── Hook ─────────────────────────────────────────────
-
-export function useToast(): ToastContextValue {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within ToastProvider");
-  return ctx;
-}

package/src/context/sdk.tsx

@@ -1,40 +0,0 @@
-/**
- * SDK Context — wraps AgentRunner, ToolRegistry, PermissionManager,
- * and exposes callbacks for runtime model/provider changes and agent rebuild.
- */
-
-import { createContext, useContext } from "react";
-import type { ReactNode } from "react";
-import type { AgentRunner } from "@cdoing/ai";
-import type { ToolRegistry, PermissionManager } from "@cdoing/core";
-
-export interface SDKState {
-  agent: AgentRunner;
-  registry: ToolRegistry;
-  permissionManager: PermissionManager;
-  workingDir: string;
-  provider: string;
-  model: string;
-  /** Request a permission decision from the UI */
-  requestPermission?: (toolName: string, message: string) => Promise<"allow" | "always" | "deny">;
-  /** Rebuild the agent after model/provider change */
-  rebuildAgent?: (provider: string, model: string, apiKey?: string) => void;
-  /** Change working directory */
-  setWorkingDir?: (dir: string) => void;
-}
-
-const SDKContext = createContext<SDKState | undefined>(undefined);
-
-export function SDKProvider(props: { value: SDKState; children: ReactNode }) {
-  return (
-    <SDKContext.Provider value={props.value}>
-      {props.children}
-    </SDKContext.Provider>
-  );
-}
-
-export function useSDK() {
-  const ctx = useContext(SDKContext);
-  if (!ctx) throw new Error("useSDK must be used within SDKProvider");
-  return ctx;
-}