{line.label} {line.detail}

); } if (line.t === "done") { const ok = line.success !== false; return (

{line.text}

{line.summary && (

{line.summary.filesChanged} files +{line.summary.insertions} −{line.summary.deletions} {line.summary.testsPassed} tests passed

)}

); } if (line.t === "ask") { return (

NEEDS YOU {line.text}

{line.choices.map((c, i) => ( ))}

); } if (line.t === "err") { return {line.text}; } // default: out return ( {line.text || "\u00a0"} ); }; const Prompt = ({ session }) => { if (session.kind === "ssh") { return {session.user}@{session.host.split(".")[0]}:{session.cwd}$ ; } if (session.kind === "shell") { return {session.cwd} ❯ ; } if (session.kind === "agent" || session.kind === "group") { return @{session.short.split(" ")[0]} ❯ ; } return ❯ ; }; const InputBar = ({ session, quote, onClearQuote, onSend }) => { const [val, setVal] = React.useState(""); const ref = React.useRef(null); React.useEffect(() => { ref.current?.focus(); }, [session.id]); const submit = () => { if (!val.trim()) return; onSend(val); setVal(""); }; const placeholder = { agent: "Message the agent — Shift+Enter for newline", group: "Message the group — use @agent to address one", shell: "Type a shell command", process: "stdin to process", ssh: "Type a shell command on remote host", ci: "(read-only log stream)", hook: "(read-only log stream)", }[session.kind] || "Type a message…"; const readOnly = session.kind === "ci" || session.kind === "hook"; return (

setVal(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); }
          }}
          disabled={readOnly}
          placeholder={placeholder}
          rows={1}
          style={{
            flex: 1, background: "transparent", border: "none", outline: "none", resize: "none",
            color: "var(--text-strong)", fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
            lineHeight: 1.5, padding: "4px 0", minHeight: 22,
          }}
        />
        <div style={{ display: "flex", gap: 4, alignItems: "center", paddingTop: 2 }}>
          <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)", padding: "2px 5px", background: "#2d2d30", borderRadius: 3 }}>↵ send</span>
        </div>
      </div>
    </div>
  );
};

const TerminalPane = ({ session, reactions, onReact, onTogglePin, onToggleMute, onOpenDetails, detailsOpen, onSend }) => {
  const scrollRef = React.useRef(null);
  const [quote, setQuote] = React.useState(null);

React.useEffect(() => {
    setQuote(null);
    // scroll to bottom when session changes
    requestAnimationFrame(() => {
      if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    });
  }, [session.id]);

React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [session.lines.length]);

return (
    <main style={{ flex: 1, display: "flex", flexDirection: "column", background: "var(--editor-bg)", minWidth: 0 }}>
      <TermHeader session={session} onTogglePin={onTogglePin} onToggleMute={onToggleMute}
        onOpenDetails={onOpenDetails} detailsOpen={detailsOpen} />
      <div ref={scrollRef} style={{
        flex: 1, overflowY: "auto", padding: "10px 0 20px",
      }}>
        {session.lines.map((line, i) => (
          <TermLine key={i} line={line} idx={i} sessionId={session.id}
            reactions={reactions} onReact={onReact}
            onQuote={(l) => setQuote({ ...l, idx: i })}
            onForward={(l) => onSend && onSend(`/forward line #${i} to: `)}
          />
        ))}
        {session.status === "running" && (
          <div style={{ padding: "4px 16px", display: "flex", alignItems: "center", gap: 8 }}>
            <span className="cursor" style={{ width: 7, height: 14 }} />
          </div>
        )}
      </div>
      <InputBar session={session} quote={quote} onClearQuote={() => setQuote(null)} onSend={(t) => { onSend(t, quote); setQuote(null); }} />
    </main>
  );
};

Object.assign(window, { TerminalPane });