interference-agent 0.1.0

package/src/tui/ThinkingPicker.tsx

@@ -0,0 +1,57 @@
+import { useState, type FC } from "react";
+import { Box, Text, useInput } from "ink";
+import { currentProvider, currentThinking, type ThinkingLevel } from "../config.ts";
+
+interface Props {
+  onSelect: (level: ThinkingLevel) => void;
+  onCancel: () => void;
+}
+
+const HINT: Partial<Record<ThinkingLevel, string>> = {
+  off: "no reasoning (fastest)",
+  max: "deepest reasoning",
+};
+
+export const ThinkingPicker: FC<Props> = ({ onSelect, onCancel }) => {
+  const provider = currentProvider();
+  const levels = provider.thinkingLevels;
+  const current = currentThinking();
+  const [idx, setIdx] = useState(Math.max(0, levels.indexOf(current)));
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") {
+        setIdx((i) => (i > 0 ? i - 1 : levels.length - 1));
+      } else if (key.downArrow || input === "j") {
+        setIdx((i) => (i < levels.length - 1 ? i + 1 : 0));
+      } else if (key.return) {
+        const l = levels[idx];
+        if (l) onSelect(l);
+      } else if (key.escape || input === "q") {
+        onCancel();
+      }
+    },
+    { isActive: true },
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="magenta" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold>Thinking level · {provider.label}</Text>
+      </Box>
+      {levels.map((l, i) => (
+        <Box key={l}>
+          <Text color={i === idx ? "magenta" : undefined} bold={i === idx}>
+            {i === idx ? "▸ " : "  "}
+            {l}
+          </Text>
+          {l === current && <Text dimColor> (current)</Text>}
+          {HINT[l] && <Text dimColor> — {HINT[l]}</Text>}
+        </Box>
+      ))}
+      <Box marginTop={1}>
+        <Text dimColor>↑↓ j/k navigate · Enter select · Esc cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/tui/Toast.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect, useCallback, useRef, type FC, type ReactNode } from "react";
+import { Box, Text } from "ink";
+
+interface Toast {
+  id: number;
+  message: string;
+  type: "success" | "error" | "info" | "warning";
+}
+
+interface Props {
+  toasts: Toast[];
+}
+
+export function ToastContainer({ toasts }: Props) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <Box flexDirection="column">
+      {toasts.slice(0, 3).map((t) => (
+        <Box key={t.id} marginBottom={0}>
+          <Text
+            color={
+              t.type === "success"
+                ? "green"
+                : t.type === "error"
+                  ? "red"
+                  : t.type === "warning"
+                    ? "yellow"
+                    : "blue"
+            }
+          >
+            {t.type === "success" ? "✓" : t.type === "error" ? "✗" : t.type === "warning" ? "△" : "ℹ"}{" "}
+            {t.message}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+let nextToastId = 1;
+
+export function useToast() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const timers = useRef(new Set<ReturnType<typeof setTimeout>>());
+
+  const addToast = useCallback((message: string, type: Toast["type"] = "info") => {
+    const id = nextToastId++;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    const timer = setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      timers.current.delete(timer);
+    }, 3000);
+    timers.current.add(timer);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      for (const t of timers.current) clearTimeout(t);
+    };
+  }, []);
+
+  return { toasts, addToast };
+}

package/src/tui/TodoList.tsx

@@ -0,0 +1,49 @@
+import { Box, Text } from "ink";
+import type { Todo, TodoStatus } from "../tools/todowrite.ts";
+
+const SYMBOL: Record<TodoStatus, string> = {
+  pending: "○",
+  in_progress: "◐",
+  completed: "✓",
+  cancelled: "✗",
+};
+
+const COLOR: Record<TodoStatus, string | undefined> = {
+  pending: undefined,
+  in_progress: "yellow",
+  completed: "green",
+  cancelled: "gray",
+};
+
+export function TodoList({ todos }: { todos: Todo[] }) {
+  if (todos.length === 0) return null;
+  const done = todos.filter((t) => t.status === "completed").length;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="gray"
+      borderTop={false}
+      borderRight={false}
+      borderBottom={false}
+      paddingLeft={1}
+      marginBottom={1}
+    >
+      <Text dimColor bold>
+        ☰ todos {done}/{todos.length}
+      </Text>
+      {todos.map((t, i) => (
+        <Text key={i} color={COLOR[t.status]} dimColor={t.status === "cancelled"}>
+          {SYMBOL[t.status]}{" "}
+          <Text strikethrough={t.status === "completed" || t.status === "cancelled"}>
+            {t.content}
+          </Text>
+          {t.priority && t.priority !== "medium" ? (
+            <Text dimColor> ({t.priority})</Text>
+          ) : null}
+        </Text>
+      ))}
+    </Box>
+  );
+}

package/src/tui/ToolStep.tsx

@@ -0,0 +1,184 @@
+import { Box, Text } from "ink";
+import { Spinner } from "@inkjs/ui";
+import type { DiffLine } from "./DiffView.tsx";
+
+// Vista di un tool step (call → result). Allineata a ToolEntry in App.tsx.
+export interface ToolView {
+  toolName: string;
+  input: unknown;
+  output?: string;
+  isError?: boolean;
+  diff?: DiffLine[] | null;
+}
+
+// Icone per tipo (convenzione opencode, adattata — fonte: opencode-dev/packages/tui).
+const ICON: Record<string, string> = {
+  bash: "$",
+  read: "→",
+  ls: "→",
+  glob: "✱",
+  grep: "✱",
+  write: "←",
+  edit: "←",
+  webfetch: "%",
+  websearch: "◈",
+  todowrite: "⚙",
+  question: "?",
+  task: "│",
+};
+
+// Tool con output complesso → blocco con bordo sinistro. Gli altri → riga inline.
+const BLOCK = new Set(["bash", "write", "edit"]);
+
+function rec(input: unknown): Record<string, unknown> {
+  return input && typeof input === "object" ? (input as Record<string, unknown>) : {};
+}
+
+// Descrizione sintetica (path/comando/pattern) invece del JSON grezzo.
+function describe(toolName: string, input: unknown): string {
+  const i = rec(input);
+  const s = (v: unknown) => (typeof v === "string" ? v : "");
+  switch (toolName) {
+    case "bash":
+      return s(i.command);
+    case "read":
+    case "write":
+    case "edit":
+      return s(i.path) || s(i.filePath);
+    case "ls":
+      return s(i.path) || ".";
+    case "glob":
+    case "grep":
+      return s(i.pattern);
+    case "webfetch":
+      return s(i.url);
+    case "websearch":
+      return s(i.query);
+    case "todowrite":
+      return "todos";
+    case "question":
+      return Array.isArray(i.questions) ? `${i.questions.length} question(s)` : "question";
+    case "task":
+      return s(i.description) || s(i.prompt).slice(0, 60);
+    default: {
+      const str = typeof input === "string" ? input : JSON.stringify(input);
+      return str.length > 80 ? str.slice(0, 80) + "…" : str;
+    }
+  }
+}
+
+function oneLine(s: string, max = 120): string {
+  const flat = s.replace(/\s*\n\s*/g, " ").trim();
+  return flat.length > max ? flat.slice(0, max) + "…" : flat;
+}
+
+export function ToolStep({ tool }: { tool: ToolView }) {
+  const icon = ICON[tool.toolName] ?? "·";
+  const desc = describe(tool.toolName, tool.input);
+  const pending = tool.output === undefined;
+  return BLOCK.has(tool.toolName) ? (
+    <BlockTool tool={tool} icon={icon} desc={desc} pending={pending} />
+  ) : (
+    <InlineTool tool={tool} icon={icon} desc={desc} pending={pending} />
+  );
+}
+
+function InlineTool({
+  tool,
+  icon,
+  desc,
+  pending,
+}: {
+  tool: ToolView;
+  icon: string;
+  desc: string;
+  pending: boolean;
+}) {
+  const iconColor = tool.isError ? "red" : "cyan";
+  return (
+    <Box flexDirection="column" paddingLeft={3}>
+      <Box>
+        <Text color={iconColor}>{icon} </Text>
+        <Text color={tool.isError ? "red" : undefined} dimColor={!tool.isError && !pending}>
+          {tool.toolName} {desc}
+        </Text>
+        {pending && <Spinner label="" />}
+      </Box>
+      {!pending && tool.output && (
+        <Text dimColor color={tool.isError ? "red" : undefined}>
+          {"  "}
+          {oneLine(tool.output)}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+function BlockTool({
+  tool,
+  icon,
+  desc,
+  pending,
+}: {
+  tool: ToolView;
+  icon: string;
+  desc: string;
+  pending: boolean;
+}) {
+  const title =
+    tool.toolName === "bash" ? oneLine(desc, 160) : `${tool.toolName} ${desc}`;
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={tool.isError ? "red" : "gray"}
+      borderTop={false}
+      borderRight={false}
+      borderBottom={false}
+      paddingLeft={1}
+      marginTop={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text color={tool.isError ? "red" : "cyan"} bold>
+          {icon}{" "}
+        </Text>
+        <Text bold>{title}</Text>
+        {pending && <Spinner label="" />}
+      </Box>
+      {tool.diff && tool.diff.length > 0 ? (
+        <DiffBody diff={tool.diff} />
+      ) : (
+        !pending &&
+        tool.output && (
+          <Text dimColor color={tool.isError ? "red" : undefined}>
+            {clip(tool.output)}
+          </Text>
+        )
+      )}
+    </Box>
+  );
+}
+
+function DiffBody({ diff }: { diff: DiffLine[] }) {
+  return (
+    <Box flexDirection="column">
+      {diff.slice(0, 15).map((d, i) => (
+        <Text
+          key={i}
+          color={d.type === "add" ? "green" : d.type === "remove" ? "red" : undefined}
+          dimColor={d.type === "same"}
+        >
+          {d.type === "add" ? "+ " : d.type === "remove" ? "- " : "  "}
+          {d.text.slice(0, 100)}
+        </Text>
+      ))}
+      {diff.length > 15 && <Text dimColor>… {diff.length - 15} more lines</Text>}
+    </Box>
+  );
+}
+
+function clip(s: string, max = 500): string {
+  const lines = s.split("\n").slice(0, 12).join("\n");
+  return lines.length > max ? lines.slice(0, max) + "\n… [truncated]" : lines;
+}

package/src/tui/Welcome.tsx

@@ -0,0 +1,87 @@
+import { Box, Text } from "ink";
+import { currentThinking } from "../config.ts";
+import { WORDMARK } from "./wordmark.ts";
+import { PANEL, padRight } from "./theme.ts";
+
+// Larghezza del pannello wordmark = riga più lunga + margini.
+const WM_W = Math.max(...WORDMARK.map((l) => l.length)) + 4;
+// Righe del pannello: una vuota sopra/sotto + il wordmark, tutte riempite.
+const WM_LINES = ["", ...WORDMARK, ""].map((l) => padRight("  " + l, WM_W));
+
+// Colori per tema scuro (NON usare #0a0a0a sul testo → invisibile).
+const FG = "white";
+const ACCENT = "cyan";
+const MUTED = "gray";
+const GREEN = "#2e8b57";
+const RED = "#cd5c5c";
+
+interface Props {
+  provider: string;
+  model: string;
+  sessionCount: number;
+}
+
+function Tip({ cmd, desc }: { cmd: string; desc: string }) {
+  return (
+    <Box>
+      <Box width={11}>
+        <Text color={ACCENT}>{cmd}</Text>
+      </Box>
+      <Text color={MUTED}>{desc}</Text>
+    </Box>
+  );
+}
+
+// Branding-only: l'input è condiviso (gestito da App), così gli slash e
+// l'autocomplete funzionano anche dalla home.
+export function Welcome({ provider, model, sessionCount }: Props) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {/* Header centrato: wordmark su pannello (sfondo reale via Text) + tagline */}
+      <Box flexDirection="column" alignItems="center" marginBottom={1}>
+        <Box flexDirection="column">
+          {WM_LINES.map((line, i) => (
+            <Text key={i} bold color={FG} backgroundColor={PANEL}>
+              {line}
+            </Text>
+          ))}
+        </Box>
+        <Box marginTop={1}>
+          <Text color={MUTED}>The open-source coding agent that lives in your terminal.</Text>
+        </Box>
+      </Box>
+
+      {/* Stato: provider · model · thinking */}
+      <Box justifyContent="center">
+        <Text color={MUTED}>
+          {provider} · {model} · <Text color="magenta">◇ {currentThinking()}</Text>
+        </Text>
+      </Box>
+      {sessionCount > 0 && (
+        <Box justifyContent="center">
+          <Text color={MUTED}>
+            {sessionCount} previous session{sessionCount !== 1 ? "s" : ""} · <Text color={ACCENT}>--continue</Text> to resume
+          </Text>
+        </Box>
+      )}
+
+      {/* Tips (blocco, centrato) */}
+      <Box flexDirection="column" alignItems="center" marginTop={1}>
+        <Box flexDirection="column">
+          <Tip cmd="/help" desc="show all commands" />
+          <Tip cmd="/build" desc="switch to full-access mode" />
+          <Tip cmd="/thinking" desc="set reasoning level" />
+          <Tip cmd="/init" desc="generate AGENTS.md" />
+        </Box>
+      </Box>
+
+      {/* Made in Italy (discreto) */}
+      <Box marginTop={1} justifyContent="center">
+        <Text backgroundColor={GREEN}> </Text>
+        <Text backgroundColor="white"> </Text>
+        <Text backgroundColor={RED}> </Text>
+        <Text color={MUTED}> made in Italy</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/__tests__/tui-render.test.tsx

@@ -0,0 +1,59 @@
+import { describe, test, expect } from "bun:test";
+import React from "react";
+import { render } from "ink-testing-library";
+import { ToolStep } from "../ToolStep.tsx";
+import { MarkdownText } from "../MarkdownText.tsx";
+
+function frame(el: React.ReactElement): string {
+  const { lastFrame, unmount } = render(el);
+  const out = lastFrame() ?? "";
+  unmount();
+  return out;
+}
+
+describe("ToolStep rendering (iter 18)", () => {
+  test("inline tool: icon + name + synthetic label, no raw JSON", () => {
+    const out = frame(<ToolStep tool={{ toolName: "read", input: { path: "src/y.ts" }, output: "10 lines" }} />);
+    expect(out).toContain("→");
+    expect(out).toContain("read src/y.ts");
+    expect(out).not.toContain("{"); // niente JSON grezzo
+  });
+
+  test("bash block: command rendered with $ and output", () => {
+    const out = frame(<ToolStep tool={{ toolName: "bash", input: { command: "bun test" }, output: "77 pass" }} />);
+    expect(out).toContain("$ bun test");
+    expect(out).toContain("77 pass");
+  });
+
+  test("edit block: diff lines with +/-", () => {
+    const out = frame(
+      <ToolStep
+        tool={{
+          toolName: "edit",
+          input: { path: "src/x.ts" },
+          output: "ok",
+          diff: [
+            { type: "remove", text: "const a=1" },
+            { type: "add", text: "const a=2" },
+          ],
+        }}
+      />,
+    );
+    expect(out).toContain("← edit src/x.ts");
+    expect(out).toContain("- const a=1");
+    expect(out).toContain("+ const a=2");
+  });
+});
+
+describe("MarkdownText rendering (iter 18)", () => {
+  test("strips markdown markers, keeps content", () => {
+    const out = frame(<MarkdownText content={"# Titolo\nUn **bold** e `code`.\n- item"} />);
+    expect(out).toContain("Titolo");
+    expect(out).toContain("bold");
+    expect(out).toContain("code");
+    expect(out).toContain("• item");
+    expect(out).not.toContain("**");
+    expect(out).not.toContain("`");
+    expect(out).not.toContain("#");
+  });
+});

package/src/tui/theme.ts

@@ -0,0 +1,16 @@
+// Palette condivisa della TUI. Brand: bianco/nero (niente colori).
+// Il contrasto nasce dal PANEL (sfondo applicato sui <Text>, non sui <Box>:
+// in Ink il backgroundColor del Box non riempie il padding → si usa il Text).
+export const PANEL = "#262626"; // sfondo pannello (grigio scuro, stacca dal nero)
+export const USER_BAR = "white"; // barra messaggi utente
+export const ASSISTANT_BAR = "gray"; // barra risposte assistant
+
+// Pad a destra fino a w caratteri (per estendere lo sfondo del Text).
+export function padRight(s: string, w: number): string {
+  return s.length >= w ? s : s + " ".repeat(w - s.length);
+}
+
+// Larghezza utile del pannello dato lo stdout (clamp ragionevole).
+export function panelWidth(columns: number | undefined, max = 96): number {
+  return Math.max(24, Math.min((columns ?? 80) - 4, max));
+}

package/src/tui/wordmark.ts

@@ -0,0 +1,7 @@
+// Wordmark "interference" — generato da cfonts font "tiny" (blocchi pieni, ~48 col).
+// Fedele al wordmark del brand (logo/interference-wordmark.svg). Niente mark: il simbolo
+// reale (due sorgenti d onda) non e riproducibile fedelmente in ASCII.
+export const WORDMARK: string[] = [
+  " █ █▄ █ ▀█▀ █▀▀ █▀█ █▀▀ █▀▀ █▀█ █▀▀ █▄ █ █▀▀ █▀▀",
+  " █ █ ▀█  █  ██▄ █▀▄ █▀  ██▄ █▀▄ ██▄ █ ▀█ █▄▄ ██▄",
+];

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "types": ["bun"],
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true
+  },
+  "include": ["src"]
+}