interference-agent 0.1.0

package/src/tui/ConfirmDialog.tsx

@@ -0,0 +1,46 @@
+import { useState, type FC } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface Props {
+  tool: string;
+  preview: string;
+  onResolve: (allowed: boolean) => void;
+}
+
+export const ConfirmDialog: FC<Props> = ({ tool, preview, onResolve }) => {
+  const [selected, setSelected] = useState<"allow" | "deny">("deny");
+
+  useInput((input, key) => {
+    if (key.leftArrow || key.rightArrow) {
+      setSelected((s) => (s === "allow" ? "deny" : "allow"));
+    }
+    if (key.return) {
+      onResolve(selected === "allow");
+    }
+    const c = input.toLowerCase();
+    if (c === "y") onResolve(true);
+    if (c === "n" || key.escape) onResolve(false);
+  }, { isActive: true });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" padding={1}>
+      <Box marginBottom={1}>
+        <Text color="yellow" bold>
+          Allow {tool}?
+        </Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text dimColor>{preview.slice(0, 300)}</Text>
+      </Box>
+      <Box gap={2}>
+        <Text color={selected === "allow" ? "green" : undefined} bold={selected === "allow"}>
+          {selected === "allow" ? "▸ Allow" : "  Allow"}
+        </Text>
+        <Text color={selected === "deny" ? "red" : undefined} bold={selected === "deny"}>
+          {selected === "deny" ? "▸ Deny" : "  Deny"}
+        </Text>
+        <Text dimColor>(←→ arrows, Enter, y/n)</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/tui/DiffView.tsx

@@ -0,0 +1,88 @@
+export interface DiffLine {
+  type: "same" | "add" | "remove";
+  text: string;
+}
+
+export function computeDiff(oldLines: string[], newLines: string[]): DiffLine[] {
+  const result: DiffLine[] = [];
+  let oi = 0;
+  let ni = 0;
+
+  while (oi < oldLines.length && ni < newLines.length) {
+    const old = oldLines[oi]!;
+    const nw = newLines[ni]!;
+
+    if (old === nw) {
+      result.push({ type: "same", text: old });
+      oi++;
+      ni++;
+      continue;
+    }
+
+    const oldEnd = findEnd(oldLines, newLines, oi, ni);
+    if (oldEnd.oi === oi) {
+      result.push({ type: "add", text: nw });
+      ni++;
+      continue;
+    }
+    if (oldEnd.ni === ni) {
+      result.push({ type: "remove", text: old });
+      oi++;
+      continue;
+    }
+
+    while (oi < oldEnd.oi) {
+      result.push({ type: "remove", text: oldLines[oi]! });
+      oi++;
+    }
+    while (ni < oldEnd.ni) {
+      result.push({ type: "add", text: newLines[ni]! });
+      ni++;
+    }
+  }
+
+  while (oi < oldLines.length) {
+    result.push({ type: "remove", text: oldLines[oi]! });
+    oi++;
+  }
+  while (ni < newLines.length) {
+    result.push({ type: "add", text: newLines[ni]! });
+    ni++;
+  }
+
+  return result;
+}
+
+function findEnd(
+  oldLines: string[],
+  newLines: string[],
+  oi: number,
+  ni: number,
+): { oi: number; ni: number } {
+  for (let o = oi + 1; o <= oldLines.length; o++) {
+    for (let n = ni; n < newLines.length; n++) {
+      if (oldLines[o] === newLines[n]) {
+        return { oi: o, ni: n };
+      }
+    }
+  }
+  return { oi: oldLines.length, ni: newLines.length };
+}
+
+export function formatDiff(diff: DiffLine[]): string {
+  const lines: string[] = [];
+  for (const d of diff.slice(0, 80)) {
+    switch (d.type) {
+      case "add":
+        lines.push(`+ ${d.text}`);
+        break;
+      case "remove":
+        lines.push(`- ${d.text}`);
+        break;
+      default:
+        lines.push(`  ${d.text}`);
+    }
+  }
+  if (diff.length > 80) lines.push(`… and ${diff.length - 80} more lines`);
+  return lines.join("\n");
+}

package/src/tui/MarkdownText.tsx

@@ -0,0 +1,63 @@
+import { Box, Text } from "ink";
+import type { ReactNode } from "react";
+
+// Rendering markdown minimale per il terminale (no dipendenze):
+// - fenced code ``` → blocco dim
+// - heading #..###### → bold
+// - bullet -, * → •
+// - inline **bold** e `code`
+// Volutamente conservativo: meglio testo pulito che parsing fragile.
+
+function renderInline(text: string, keyBase: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  const re = /(\*\*[^*]+\*\*|`[^`]+`)/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  let k = 0;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    const tok = m[0];
+    if (tok.startsWith("**")) {
+      out.push(<Text key={`${keyBase}-b${k++}`} bold>{tok.slice(2, -2)}</Text>);
+    } else {
+      out.push(<Text key={`${keyBase}-c${k++}`} color="cyan">{tok.slice(1, -1)}</Text>);
+    }
+    last = m.index + tok.length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+export function MarkdownText({ content }: { content: string }) {
+  const lines = content.split("\n");
+  const blocks: ReactNode[] = [];
+  let inFence = false;
+
+  lines.forEach((line, i) => {
+    if (line.trimStart().startsWith("```")) {
+      inFence = !inFence;
+      return; // nascondi i marker di fence
+    }
+    if (inFence) {
+      blocks.push(<Text key={i} dimColor>  {line}</Text>);
+      return;
+    }
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading) {
+      blocks.push(<Text key={i} bold>{heading[2]}</Text>);
+      return;
+    }
+    const bullet = /^(\s*)[-*]\s+(.*)$/.exec(line);
+    if (bullet) {
+      blocks.push(
+        <Text key={i}>
+          {bullet[1]}• {renderInline(bullet[2] ?? "", `l${i}`)}
+        </Text>,
+      );
+      return;
+    }
+    blocks.push(<Text key={i}>{renderInline(line, `l${i}`)}</Text>);
+  });
+
+  return <Box flexDirection="column">{blocks}</Box>;
+}

package/src/tui/Message.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { Box, Text } from "ink";
+
+interface Props {
+  role: "user" | "assistant";
+  children: ReactNode;
+}
+
+export function Message({ role, children }: Props) {
+  return (
+    <Box flexDirection="row" marginBottom={1}>
+      <Text color={role === "user" ? "cyan" : "green"} bold>
+        {role === "user" ? "› " : "· "}
+      </Text>
+      <Text>{children}</Text>
+    </Box>
+  );
+}
+
+export function ReasoningBlock({ text }: { text: string }) {
+  return (
+    <Text dimColor>
+      ┄ {text}
+    </Text>
+  );
+}

package/src/tui/ModelPicker.tsx

@@ -0,0 +1,44 @@
+import { useState, type FC } from "react";
+import { Box, Text, useInput } from "ink";
+import { currentModel, setModel, setProvider, PROVIDERS, type ProviderId } from "../config.ts";
+
+export const ModelPicker: FC<{ onCancel: () => void }> = ({ onCancel }) => {
+  const current = currentModel();
+  const flat: { id: string; label: string; provider: string; providerId: ProviderId }[] = [];
+  for (const [pid, def] of Object.entries(PROVIDERS)) {
+    for (const m of def.models) {
+      flat.push({ id: m.id, label: m.label, provider: def.label, providerId: pid as ProviderId });
+    }
+  }
+
+  const [idx, setIdx] = useState(Math.max(0, flat.findIndex((m) => m.id === current)));
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") setIdx((i) => (i > 0 ? i - 1 : flat.length - 1));
+      else if (key.downArrow || input === "j") setIdx((i) => (i < flat.length - 1 ? i + 1 : 0));
+      else if (key.return) {
+        const m = flat[idx];
+        if (m) { setProvider(m.providerId); setModel(m.id); onCancel(); }
+      }
+      else if (key.escape || input === "q") onCancel();
+    },
+    { isActive: true },
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="blue" padding={1}>
+      <Box marginBottom={1}><Text bold>Select model</Text></Box>
+      {flat.map((m, i) => (
+        <Box key={m.id}>
+          <Text color={i === idx ? "cyan" : undefined} bold={i === idx}>
+            {i === idx ? "▸ " : "  "}{m.label}
+          </Text>
+          <Text dimColor> · {m.provider}</Text>
+          {m.id === current && <Text color="cyan"> (active)</Text>}
+        </Box>
+      ))}
+      <Box marginTop={1}><Text dimColor>↑↓ j/k navigate · Enter select · Esc cancel</Text></Box>
+    </Box>
+  );
+};

package/src/tui/Panel.tsx

@@ -0,0 +1,39 @@
+import { Box, Text, useStdout } from "ink";
+import { PANEL, padRight, panelWidth } from "./theme.ts";
+
+// Pannello con sfondo REALE: ogni riga è un <Text backgroundColor> riempito di
+// spazi fino alla larghezza, così il colore si vede (il bg dei <Box> in Ink non
+// riempie il padding). Barra laterale opzionale come primo carattere della riga.
+export function Panel({
+  content,
+  bar,
+  barColor,
+  bold,
+}: {
+  content: string;
+  bar?: string;
+  barColor?: string;
+  bold?: boolean;
+}) {
+  const { stdout } = useStdout();
+  const w = panelWidth(stdout?.columns);
+  const prefix = bar ? `${bar} ` : "";
+  const lines = content.split("\n");
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {lines.map((ln, i) => (
+        <Text key={i} backgroundColor={PANEL} color="white" bold={bold}>
+          {bar && i === 0 ? (
+            <Text backgroundColor={PANEL} color={barColor} bold>
+              {prefix}
+            </Text>
+          ) : (
+            <Text backgroundColor={PANEL}>{bar ? "  " : ""}</Text>
+          )}
+          {padRight(ln, w - prefix.length)}
+        </Text>
+      ))}
+    </Box>
+  );
+}

package/src/tui/ProviderPicker.tsx

@@ -0,0 +1,111 @@
+import { useState, useEffect, type FC } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { PROVIDERS, type ProviderId } from "../config.ts";
+import { loadAuth, setProviderKey, removeProviderKey, applyAuthToEnv } from "../auth.ts";
+
+export const ProviderPicker: FC<{ onClose: () => void }> = ({ onClose }) => {
+  const providers = Object.entries(PROVIDERS) as [ProviderId, typeof PROVIDERS[ProviderId]][];
+  const [idx, setIdx] = useState(0);
+  const [phase, setPhase] = useState<"list" | "add" | "remove">("list");
+  const [keyInput, setKeyInput] = useState("");
+  const [connected, setConnected] = useState<Set<string>>(new Set());
+  const [status, setStatus] = useState("");
+
+  useEffect(() => {
+    loadAuth().then((auth) => {
+      const c = new Set(Object.keys(auth).filter((k) => !!auth[k]));
+      setConnected(c);
+    });
+  }, []);
+
+  async function handleSelect() {
+    const [pid, def] = providers[idx]!;
+    if (connected.has(pid)) {
+      setPhase("remove");
+      setStatus(`Remove key for ${def.label}? (y/n)`);
+    } else {
+      setPhase("add");
+      setKeyInput("");
+      setStatus(`Enter API key for ${def.label}:`);
+    }
+  }
+
+  async function submitKey() {
+    const [pid] = providers[idx]!;
+    const key = keyInput.trim();
+    if (!key) { setPhase("list"); return; }
+    await setProviderKey(pid, key);
+    applyAuthToEnv(await loadAuth(), Object.fromEntries(
+      Object.entries(PROVIDERS).map(([pid, def]) => [pid, { label: def.label, envKey: def.envKey }])
+    ));
+    setConnected((c) => new Set([...c, pid]));
+    setPhase("list");
+    setStatus(`Connected to ${PROVIDERS[pid].label}.`);
+    setTimeout(() => setStatus(""), 2000);
+  }
+
+  async function confirmRemove() {
+    const [pid] = providers[idx]!;
+    await removeProviderKey(pid);
+    delete process.env[PROVIDERS[pid].envKey];
+    setConnected((c) => { const n = new Set(c); n.delete(pid); return n; });
+    setPhase("list");
+    setStatus(`Disconnected from ${PROVIDERS[pid].label}.`);
+    setTimeout(() => setStatus(""), 2000);
+  }
+
+  useInput(
+    (input, key) => {
+      if (phase === "remove") {
+        if (input === "y" || key.return) confirmRemove();
+        else { setPhase("list"); setStatus(""); }
+        return;
+      }
+      if (phase === "add") return;
+      if (key.upArrow || input === "k") setIdx((i) => (i > 0 ? i - 1 : providers.length - 1));
+      else if (key.downArrow || input === "j") setIdx((i) => (i < providers.length - 1 ? i + 1 : 0));
+      else if (key.return) handleSelect();
+      else if (key.escape || input === "q") onClose();
+    },
+    { isActive: true },
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="blue" padding={1}>
+      <Box marginBottom={1}><Text bold>Providers</Text></Box>
+
+      {phase === "list" && (
+        <>
+          {providers.map(([pid, def], i) => (
+            <Box key={pid}>
+              <Text color={i === idx ? "cyan" : undefined} bold={i === idx}>
+                {i === idx ? "▸ " : "  "}{def.label}
+              </Text>
+              <Text dimColor> ({def.models[0]?.id ?? def.defaultModel})</Text>
+              {connected.has(pid)
+                ? <Text color="green"> ● connected</Text>
+                : <Text dimColor> ○ not connected</Text>}
+            </Box>
+          ))}
+          <Box marginTop={1}>
+            <Text dimColor>↑↓ navigate · Enter {connected.has(providers[idx]![0]) ? "disconnect" : "add key"} · Esc close</Text>
+          </Box>
+          {status && <Box marginTop={1}><Text>{status}</Text></Box>}
+        </>
+      )}
+
+      {phase === "add" && (
+        <Box flexDirection="column">
+          <Text>{status}</Text>
+          <Box><Text dimColor>Key: </Text><TextInput value={keyInput} onChange={setKeyInput} onSubmit={submitKey} /></Box>
+          <Text dimColor>Enter to confirm · Esc to cancel</Text>
+        </Box>
+      )}
+
+      {phase === "remove" && (
+        <Text>{status}</Text>
+      )}
+    </Box>
+  );
+};

package/src/tui/QuestionDialog.tsx

@@ -0,0 +1,64 @@
+import { useState, type FC } from "react";
+import { Box, Text, useInput } from "ink";
+import { Select, MultiSelect } from "@inkjs/ui";
+import type { QuestionSpec, Answers } from "../tools/question.ts";
+
+interface Props {
+  questions: QuestionSpec[];
+  onResolve: (answers: Answers) => void;
+}
+
+export const QuestionDialog: FC<Props> = ({ questions, onResolve }) => {
+  const [qIdx, setQIdx] = useState(0);
+  // Risposte accumulate (label selezionate) per domanda.
+  const [acc, setAcc] = useState<Answers>(() => questions.map(() => []));
+
+  const q = questions[qIdx]!;
+  const multiple = q.multiple ?? false;
+  const total = questions.length;
+
+  // value = indice opzione (stringa); risaliamo alla label al commit.
+  const options = q.options.map((o, i) => ({
+    label: o.description ? `${o.label}  — ${o.description}` : o.label,
+    value: String(i),
+  }));
+
+  function commit(values: string[]) {
+    const labels = values.map((v) => q.options[Number(v)]!.label);
+    const next = acc.map((a, i) => (i === qIdx ? labels : a));
+    if (qIdx + 1 < total) {
+      setAcc(next);
+      setQIdx(qIdx + 1);
+    } else {
+      onResolve(next);
+    }
+  }
+
+  // Esc salta tutto. Le altre frecce/spazio/Invio sono gestiti da Select/MultiSelect.
+  useInput((_i, key) => {
+    if (key.escape) onResolve(questions.map(() => []));
+  }, { isActive: true });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1} marginBottom={1}>
+      <Box>
+        {q.header ? <Text color="cyan" bold>[{q.header}] </Text> : null}
+        <Text bold>{q.question}</Text>
+        {total > 1 ? <Text dimColor>  ({qIdx + 1}/{total})</Text> : null}
+      </Box>
+      <Box marginTop={1}>
+        {multiple ? (
+          // key={qIdx}: remount per domanda → stato interno azzerato
+          <MultiSelect key={qIdx} options={options} onSubmit={commit} />
+        ) : (
+          <Select key={qIdx} options={options} onChange={(v) => commit([v])} />
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>
+          ↑↓ move · {multiple ? "space toggle · Enter confirm" : "Enter select"} · Esc skip
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/tui/SessionList.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect, useCallback, type FC } from "react";
+import { Box, Text, useInput } from "ink";
+import { listSessions, loadSession, type SessionMeta } from "../session/store.ts";
+
+interface Props {
+  onSelect: (sessionId: string) => void;
+  onCancel: () => void;
+}
+
+const PAGE_SIZE = 15;
+
+export const SessionList: FC<Props> = ({ onSelect, onCancel }) => {
+  const [sessions, setSessions] = useState<SessionMeta[]>([]);
+  const [idx, setIdx] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    listSessions().then((list) => {
+      setSessions(list);
+      setLoading(false);
+    });
+  }, []);
+
+  useInput((input, key) => {
+    if (key.upArrow || input === "k") {
+      setIdx((i) => (i > 0 ? i - 1 : Math.max(0, sessions.length - 1)));
+    } else if (key.downArrow || input === "j") {
+      setIdx((i) => (i < sessions.length - 1 ? i + 1 : 0));
+    } else if (key.return) {
+      const s = sessions[idx];
+      if (s) onSelect(s.id);
+    } else if (key.escape || input === "q") {
+      onCancel();
+    }
+  }, { isActive: true });
+
+  if (loading) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="blue" padding={1}>
+        <Text>Loading sessions...</Text>
+      </Box>
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="blue" padding={1}>
+        <Text>No sessions found.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="blue" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold>Sessions ({sessions.length})</Text>
+      </Box>
+      {sessions.slice(0, PAGE_SIZE).map((s, i) => (
+        <Box key={s.id}>
+          <Text color={i === idx ? "cyan" : undefined} bold={i === idx}>
+            {i === idx ? "▸" : " "}
+          </Text>
+          <Text dimColor>{s.id.slice(0, 12)}</Text>
+          <Text> {s.mode} · {s.turnCount}t · {s.updatedAt.slice(0, 10)}</Text>
+        </Box>
+      ))}
+      <Box marginTop={1}>
+        <Text dimColor>↑↓ j/k navigate · Enter select · Esc/q cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/tui/SlashAutocomplete.tsx

@@ -0,0 +1,33 @@
+import { Box, Text } from "ink";
+import { matchCommands } from "../commands/index.ts";
+
+interface Props {
+  filter: string;
+  /** Indice selezionato (navigato con ↑↓ da App). */
+  selected: number;
+}
+
+// Hint con selezione: le frecce (gestite da App) muovono `selected`; l'Invio
+// (gestito dal TextInput) esegue il comando evidenziato. Niente useInput qui
+// per non confliggere col campo di testo sull'Invio.
+export function SlashAutocomplete({ filter, selected }: Props) {
+  const matches = matchCommands(filter);
+  if (matches.length === 0) return null;
+
+  const shown = matches.slice(0, 8);
+  const sel = ((selected % matches.length) + matches.length) % matches.length;
+
+  return (
+    <Box flexDirection="column" marginBottom={1} borderStyle="round" borderColor="blue" paddingX={1}>
+      {shown.map((c, i) => (
+        <Box key={c.name}>
+          <Text color={i === sel ? "cyan" : undefined} bold={i === sel}>
+            {i === sel ? "▸ " : "  "}/{c.name}
+          </Text>
+          <Text dimColor> {c.description.slice(0, 70)}</Text>
+        </Box>
+      ))}
+      <Text dimColor>↑↓ navigate · Enter run · type to filter</Text>
+    </Box>
+  );
+}

package/src/tui/StatusFooter.tsx

@@ -0,0 +1,71 @@
+import { Box, Text } from "ink";
+
+interface Props {
+  mode: string;
+  model: string;
+  provider: string;
+  thinking: string;
+  contextPct: number;
+  busy: boolean;
+  statusLine: string;
+  turnCount: number;
+  cost: string;
+  gitBranch: string;
+  inputTokens: number;
+  outputTokens: number;
+}
+
+function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+export function StatusFooter({
+  mode,
+  model,
+  provider,
+  thinking,
+  contextPct,
+  busy,
+  statusLine,
+  turnCount,
+  cost,
+  gitBranch,
+  inputTokens,
+  outputTokens,
+}: Props) {
+  const modeColor = mode === "build" ? "yellow" : "blue";
+  const tokenTotal = inputTokens + outputTokens;
+  const contextColor = contextPct > 80 ? "yellow" : contextPct > 60 ? undefined : undefined;
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row" justifyContent="space-between">
+        <Box gap={1}>
+          {busy && <Text color="yellow">◉</Text>}
+          <Text dimColor>{provider}</Text>
+          <Text dimColor>·</Text>
+          <Text>{model}</Text>
+          <Text dimColor>·</Text>
+          <Text color={modeColor} bold>{mode.toUpperCase()}</Text>
+          {thinking && thinking !== "off" && (
+            <Text dimColor>◇ {thinking}</Text>
+          )}
+          <Text dimColor>·</Text>
+          <Text dimColor color={contextColor}>
+            {fmt(tokenTotal)} tok {contextPct}%
+          </Text>
+          <Text dimColor>·</Text>
+          <Text dimColor>{cost}</Text>
+          <Text dimColor>·</Text>
+          <Text dimColor>#{turnCount}</Text>
+          {gitBranch && <Text dimColor>⎇ {gitBranch}</Text>}
+        </Box>
+        <Box>
+          {statusLine && <Text dimColor>{statusLine}</Text>}
+        </Box>
+      </Box>
+    </Box>
+  );
+}