// Task detail drawer — right-side panel that streams the agent's live conversation
function TaskDrawer({ taskId, onClose }) {
  if (!taskId) return null;
  const stream = window.Gastronaut?.useTaskStream?.(taskId);
  const task = stream?.task;
  const messages = stream?.messages || [];
  const status = task?.status || "running";
  const agentColor = task?.agentColor === "gold" ? "var(--gold)" : "var(--accent)";
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages.length]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const statusPill = {
    running: { bg: "rgba(6,182,212,0.15)", c: "var(--accent)", label: "running" },
    queued:  { bg: "rgba(255,255,255,0.06)", c: "var(--ink-2)", label: "queued" },
    done:    { bg: "rgba(34,197,94,0.15)",  c: "var(--good)",   label: "done" },
    error:   { bg: "rgba(239,68,68,0.15)",   c: "var(--danger)", label: "error" },
  }[status] || { bg: "rgba(255,255,255,0.06)", c: "var(--ink-2)", label: status };

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 1900,
        background: "rgba(4,5,8,0.45)",
        backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)",
        animation: "fadeIn 160ms ease",
        display: "flex", justifyContent: "flex-end",
      }}
    >
      <div
        className="glass"
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(620px, 100%)",
          height: "100%",
          borderRadius: 0,
          borderLeft: "1px solid var(--line-2)",
          display: "flex", flexDirection: "column",
          animation: "slideIn 220ms cubic-bezier(0.2,0.8,0.2,1)",
        }}
      >
        <style>{`@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }`}</style>

        {/* Header */}
        <div style={{ padding: "20px 24px 14px", borderBottom: "1px solid var(--line-1)" }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="eyebrow" style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 7, height: 7, borderRadius: "50%", background: agentColor, boxShadow: `0 0 8px ${agentColor}` }}/>
                <span>{task?.agentName || "Agent"}</span>
                <span style={{ color: "var(--ink-4)" }}>·</span>
                <span className="mono" style={{ padding: "2px 8px", borderRadius: 4, background: statusPill.bg, color: statusPill.c, fontSize: 10 }}>{statusPill.label}</span>
              </div>
              <div style={{ fontSize: 15, color: "var(--ink-1)", marginTop: 8, lineHeight: 1.4 }}>
                {task?.prompt || "…"}
              </div>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 6 }}>
                {taskId} {task?.createdAt ? "· " + new Date(task.createdAt).toLocaleTimeString() : ""}
              </div>
            </div>
            <button
              onClick={onClose}
              style={{
                width: 28, height: 28, borderRadius: 8,
                border: "1px solid var(--line-2)", background: "rgba(255,255,255,0.03)",
                color: "var(--ink-2)", cursor: "pointer",
                display: "grid", placeItems: "center", fontSize: 14,
                flex: "none",
              }}
            >×</button>
          </div>
        </div>

        {/* Messages */}
        <div ref={bodyRef} className="scroll-y" style={{ flex: 1, overflowY: "auto", padding: "16px 24px", display: "flex", flexDirection: "column", gap: 14 }}>
          {messages.length === 0 && (
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textAlign: "center", padding: 40 }}>
              waiting for agent…
            </div>
          )}
          {messages.map((m, i) => <DrawerMessage key={i} msg={m} color={agentColor}/>)}
          {status === "running" && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-3)", fontSize: 11.5 }}>
              <span className="dot live"/>
              <span className="mono">agent is thinking…</span>
            </div>
          )}
        </div>

        {/* Footer */}
        <div style={{ padding: "12px 24px", borderTop: "1px solid var(--line-1)", display: "flex", alignItems: "center", justifyContent: "space-between", background: "rgba(0,0,0,0.2)" }}>
          <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>
            {messages.length} message{messages.length === 1 ? "" : "s"}
            {task?.finishedAt ? " · " + Math.round((new Date(task.finishedAt) - new Date(task.createdAt))/1000) + "s" : ""}
          </span>
          <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)" }}>esc to close</span>
        </div>
      </div>
    </div>
  );
}

function DrawerMessage({ msg, color }) {
  if (msg.role === "user") {
    return (
      <div style={{ alignSelf: "flex-end", maxWidth: "85%", background: "rgba(255,255,255,0.05)", border: "1px solid var(--line-1)", padding: "10px 14px", borderRadius: "14px 14px 4px 14px", fontSize: 13.5, color: "var(--ink-1)", lineHeight: 1.5, whiteSpace: "pre-wrap" }}>
        {msg.text}
      </div>
    );
  }
  if (msg.role === "assistant") {
    return (
      <div style={{ alignSelf: "flex-start", maxWidth: "95%" }}>
        <div className="eyebrow" style={{ marginBottom: 6, color }}>assistant</div>
        <div style={{ fontSize: 13.5, color: "var(--ink-1)", lineHeight: 1.55, whiteSpace: "pre-wrap" }}>{msg.text}</div>
      </div>
    );
  }
  if (msg.role === "tool_use") {
    const input = msg.input ? (typeof msg.input === "string" ? msg.input : JSON.stringify(msg.input, null, 2)) : "";
    return (
      <div style={{ alignSelf: "flex-start", maxWidth: "95%", background: "rgba(0,0,0,0.25)", border: "1px solid var(--line-1)", borderRadius: 8, padding: "8px 12px" }}>
        <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
          → tool · {msg.tool}
        </div>
        {input && <pre className="mono" style={{ margin: "6px 0 0", fontSize: 11, color: "var(--ink-2)", whiteSpace: "pre-wrap", maxHeight: 180, overflow: "auto" }}>{input.slice(0, 1200)}</pre>}
      </div>
    );
  }
  if (msg.role === "tool_result") {
    return (
      <div style={{ alignSelf: "flex-start", maxWidth: "95%", background: msg.isError ? "rgba(239,68,68,0.08)" : "rgba(34,197,94,0.06)", border: `1px solid ${msg.isError ? "rgba(239,68,68,0.3)" : "var(--line-1)"}`, borderRadius: 8, padding: "8px 12px" }}>
        <div className="mono" style={{ fontSize: 10.5, color: msg.isError ? "var(--danger)" : "var(--good)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
          ← {msg.isError ? "tool error" : "tool result"}
        </div>
        {msg.text && <pre className="mono" style={{ margin: "6px 0 0", fontSize: 11, color: "var(--ink-2)", whiteSpace: "pre-wrap", maxHeight: 200, overflow: "auto" }}>{msg.text}</pre>}
      </div>
    );
  }
  if (msg.role === "error") {
    return (
      <div style={{ alignSelf: "stretch", background: "rgba(239,68,68,0.1)", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 8, padding: "10px 14px", color: "var(--danger)", fontSize: 12.5 }}>
        {msg.text}
      </div>
    );
  }
  return null;
}

// New Task modal — chat-style composer with agent assignment
function NewTaskModal({ open, onClose, onSubmitted }) {
  const [text, setText] = React.useState("");
  const [agentId, setAgentId] = React.useState("auto");
  const [priority, setPriority] = React.useState("normal");

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const agents = [
    { id: "auto", name: "Auto-route", role: "Prime decides", color: "cyan" },
    { id: "prime", name: "Prime", role: "Orchestrator", color: "cyan" },
    { id: "market", name: "Market Sentry", role: "Markets & risk", color: "gold" },
    { id: "creative", name: "Creative Director", role: "Brand & copy", color: "cyan" },
    { id: "research", name: "Research Specialist", role: "Primary research", color: "cyan" },
    { id: "ops", name: "Ops Steward", role: "Infra & secrets", color: "cyan" },
    { id: "scribe", name: "Scribe", role: "Git & docs", color: "cyan" },
    { id: "tape", name: "Tape Reader", role: "Tick ingest", color: "gold" },
  ];

  const chosen = agents.find(a => a.id === agentId) || agents[0];
  const chosenColor = chosen.color === "gold" ? "var(--gold)" : "var(--accent)";

  const [sending, setSending] = React.useState(false);
  const submit = async () => {
    if (!text.trim() || sending) return;
    setSending(true);
    let taskId = null;
    try {
      if (window.Gastronaut?.submitTask) {
        const r = await window.Gastronaut.submitTask({ prompt: text, agentId, priority });
        taskId = r?.id || null;
      }
    } catch (e) {
      console.error("[new-task] submit failed", e);
    } finally {
      setSending(false);
      onClose();
      setText("");
      setAgentId("auto");
      if (taskId && onSubmitted) onSubmitted(taskId);
    }
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 2000,
        background: "rgba(4,5,8,0.55)",
        backdropFilter: "blur(14px)",
        WebkitBackdropFilter: "blur(14px)",
        display: "grid", placeItems: "center",
        padding: 20,
        animation: "fadeIn 180ms ease",
      }}
    >
      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes riseIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
      `}</style>

      <div
        className="glass"
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(720px, 100%)",
          padding: 0,
          borderRadius: 22,
          overflow: "hidden",
          animation: "riseIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1)",
        }}
      >
        {/* Header */}
        <div style={{ padding: "20px 24px 0", display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
          <div>
            <div className="eyebrow">New task</div>
            <h2 className="display" style={{ fontSize: 28, margin: "6px 0 0", letterSpacing: "-0.02em" }}>
              What should the team do?
            </h2>
          </div>
          <button
            onClick={onClose}
            style={{
              width: 28, height: 28, borderRadius: 8,
              border: "1px solid var(--line-2)",
              background: "rgba(255,255,255,0.03)",
              color: "var(--ink-2)",
              cursor: "pointer",
              display: "grid", placeItems: "center",
              fontSize: 14,
            }}
          >×</button>
        </div>

        {/* Chat-style composer */}
        <div style={{ padding: "18px 24px 0" }}>
          <div style={{
            border: "1px solid var(--line-2)",
            borderRadius: 16,
            background: "rgba(255,255,255,0.02)",
            padding: "16px 18px 12px",
            transition: "border-color 200ms",
          }}>
            <textarea
              autoFocus
              value={text}
              onChange={(e) => setText(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit(); }}
              placeholder="Describe the task in plain language. e.g. Draft three hero variants for the VPS landing page in the Gastronaut voice…"
              rows={5}
              style={{
                width: "100%",
                background: "transparent",
                border: "none",
                outline: "none",
                resize: "none",
                color: "var(--ink-1)",
                fontSize: 14.5,
                fontFamily: "var(--font-sans)",
                lineHeight: 1.55,
                letterSpacing: "-0.005em",
              }}
            />

            {/* Toolbar inside composer */}
            <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 8, borderTop: "1px solid var(--line-1)" }}>
              <PillButton icon={<Icon.Plus size={12}/>} label="Attach"/>
              <PillButton icon={<Icon.Terminal size={12}/>} label="Context"/>
              <PillButton icon={<Icon.Clock size={12}/>} label="Schedule"/>
              <div style={{ flex: 1 }}/>
              <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{text.length} chars</span>
            </div>
          </div>
        </div>

        {/* Assign strip */}
        <div style={{ padding: "18px 24px 4px" }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Assign to</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {agents.map(a => {
              const on = a.id === agentId;
              const c = a.color === "gold" ? "var(--gold)" : "var(--accent)";
              return (
                <button
                  key={a.id}
                  onClick={() => setAgentId(a.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 8,
                    padding: "7px 12px 7px 9px",
                    borderRadius: 999,
                    border: `1px solid ${on ? c : "var(--line-2)"}`,
                    background: on ? `color-mix(in oklch, ${c} 12%, transparent)` : "rgba(255,255,255,0.02)",
                    color: on ? "var(--ink-1)" : "var(--ink-2)",
                    fontSize: 12.5,
                    cursor: "pointer",
                    fontFamily: "inherit",
                    transition: "all 160ms",
                    boxShadow: on ? `0 0 0 3px color-mix(in oklch, ${c} 12%, transparent)` : "none",
                  }}
                >
                  <span style={{
                    width: 8, height: 8, borderRadius: "50%",
                    background: a.id === "auto" ? "transparent" : c,
                    border: a.id === "auto" ? "1px dashed var(--ink-3)" : "none",
                    boxShadow: a.id === "auto" ? "none" : `0 0 6px ${c}`,
                  }}/>
                  <span>{a.name}</span>
                  <span style={{ color: "var(--ink-4)", fontSize: 11 }}>· {a.role}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Footer: priority + assign button */}
        <div style={{
          padding: "18px 24px 22px",
          marginTop: 14,
          borderTop: "1px solid var(--line-1)",
          display: "flex", alignItems: "center", gap: 12,
          background: "linear-gradient(180deg, transparent, rgba(255,255,255,0.015))",
        }}>
          <div style={{ display: "flex", gap: 4, padding: 3, borderRadius: 999, border: "1px solid var(--line-2)", background: "rgba(255,255,255,0.02)" }}>
            {["low", "normal", "high"].map(p => (
              <button
                key={p}
                onClick={() => setPriority(p)}
                style={{
                  padding: "5px 12px",
                  borderRadius: 999,
                  border: "none",
                  background: priority === p ? "rgba(255,255,255,0.08)" : "transparent",
                  color: priority === p ? "var(--ink-1)" : "var(--ink-3)",
                  fontSize: 11.5,
                  cursor: "pointer",
                  fontFamily: "inherit",
                  textTransform: "capitalize",
                }}
              >{p}</button>
            ))}
          </div>

          <div style={{ flex: 1 }}/>

          <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>
            <span className="kbd">⌘</span> <span className="kbd">↵</span> to assign
          </div>

          <button
            className="btn primary"
            onClick={submit}
            disabled={!text.trim()}
            style={{
              padding: "10px 18px",
              opacity: text.trim() ? 1 : 0.4,
              pointerEvents: text.trim() ? "auto" : "none",
              background: chosen.color === "gold"
                ? "linear-gradient(180deg, oklch(0.88 0.14 80), oklch(0.72 0.14 80))"
                : "linear-gradient(180deg, oklch(0.88 0.16 220), oklch(0.72 0.16 220))",
              boxShadow: `0 0 0 1px ${chosenColor} inset, 0 8px 24px -8px ${chosenColor}`,
              color: "#041018",
            }}
          >
            <Icon.Bolt size={13}/>
            <span>Assign {chosen.id === "auto" ? "automatically" : `to ${chosen.name}`}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

function PillButton({ icon, label }) {
  return (
    <button style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "4px 10px",
      borderRadius: 999,
      border: "1px solid var(--line-1)",
      background: "transparent",
      color: "var(--ink-3)",
      fontSize: 11.5,
      cursor: "pointer",
      fontFamily: "inherit",
    }}
    onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--line-2)"}
    onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--line-1)"}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}

// ---- Terminal view ----
function TerminalView() {
  const live = !!window.Gastronaut?.live;
  const liveRef = React.useRef(null);
  const sendLive = window.Gastronaut?.useLiveTerminal?.(liveRef);

  const [lines, setLines] = React.useState(live ? [] : [
    { k: "sys", t: "Connected to vps-03.gastronaut.internal · NYC-03" },
    { k: "sys", t: "claude-code v0.9.2 · node v20.11.1 · 8 vCPU / 16 GB" },
    { k: "in",  t: "claude status --all" },
    { k: "out", t: "prime            live    Sonnet 4.6   13d 4h   load 0.52" },
    { k: "out", t: "market-sentry    live    Haiku 4.5    13d 4h   load 0.68" },
    { k: "out", t: "creative-dir     working Sonnet 4.6   6d 12h   load 0.42" },
    { k: "out", t: "research-spec    live    Sonnet 4.6   6d 12h   load 0.31" },
    { k: "out", t: "ops-steward      idle    Haiku 4.5    13d 4h   load 0.08" },
    { k: "out", t: "scribe           working Haiku 4.5    3d 2h    load 0.22" },
    { k: "out", t: "tape-reader      live    Haiku 4.5    13d 4h   load 0.81" },
  ]);
  const [input, setInput] = React.useState("");
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
    if (liveRef.current) liveRef.current.scrollTop = liveRef.current.scrollHeight;
  }, [lines, input]);

  const run = () => {
    if (!input.trim()) return;
    const cmd = input;
    setInput("");
    if (live && sendLive) {
      sendLive(cmd + "\n");
      return;
    }
    const out = mockRun(cmd);
    setLines(l => [...l, { k: "in", t: cmd }, ...out.map(t => ({ k: "out", t }))]);
  };

  return (
    <div style={{ padding: "40px 48px 60px", position: "relative" }}>
      <div className="bg-aurora"/>
      <SectionHead
        eyebrow="Terminal · w8h8.com"
        title="Direct line to the VPS."
        sub="A live bash session on the VPS. Agents mirror here when they run code. Nothing is hidden from you."
        action={<div style={{ display: "flex", gap: 8 }}>
          <button className="btn"><Icon.Shield size={13}/> sudo</button>
          <button className="btn"><Icon.Clock size={13}/> History</button>
        </div>}
      />

      <Card style={{ padding: 0, overflow: "hidden", marginTop: 10 }}>
        {/* Window chrome */}
        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line-1)", display: "flex", alignItems: "center", gap: 10, background: "rgba(0,0,0,0.2)" }}>
          <div style={{ display: "flex", gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#FF5F57", opacity: 0.9 }}/>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#FEBC2E", opacity: 0.9 }}/>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#28C840", opacity: 0.9 }}/>
          </div>
          <div className="mono" style={{ flex: 1, textAlign: "center", fontSize: 11, color: "var(--ink-3)" }}>
            claude@w8h8: ~ — bash
          </div>
          <span className="dot live"/>
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>SSH · ed25519</span>
        </div>

        <div
          ref={ref}
          className="scroll-y"
          style={{
            padding: "16px 20px",
            height: 480,
            overflowY: "auto",
            fontFamily: "var(--font-mono)",
            fontSize: 12.5,
            lineHeight: 1.6,
            background: "rgba(0,0,0,0.15)",
          }}
        >
          {live ? (
            <pre ref={liveRef} style={{ margin: 0, color: "var(--ink-1)", whiteSpace: "pre-wrap", fontFamily: "inherit", fontSize: "inherit", lineHeight: "inherit" }}/>
          ) : (
            lines.map((l, i) => {
              if (l.k === "sys") return <div key={i} style={{ color: "var(--ink-3)" }}>{"# "}{l.t}</div>;
              if (l.k === "in") return <div key={i} style={{ color: "var(--ink-1)" }}><span style={{ color: "var(--accent)" }}>➜</span> <span style={{ color: "var(--gold)" }}>~/gastronaut</span> <span style={{ color: "var(--ink-2)" }}>{l.t}</span></div>;
              return <div key={i} style={{ color: "var(--ink-2)" }}>{l.t}</div>;
            })
          )}
          {/* Prompt line */}
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
            <span style={{ color: "var(--accent)" }}>➜</span>
            <span style={{ color: "var(--gold)" }}>~/gastronaut</span>
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") run(); }}
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                outline: "none",
                color: "var(--ink-1)",
                fontFamily: "inherit",
                fontSize: "inherit",
              }}
              placeholder="type a command — claude, ls, tail, trade…"
              autoFocus
            />
            <span style={{ width: 7, height: 14, background: "var(--accent)", animation: "pulse 1s steps(2) infinite" }}/>
          </div>
        </div>

        {/* Status bar */}
        <div style={{ padding: "10px 16px", borderTop: "1px solid var(--line-1)", display: "flex", gap: 16, fontSize: 10.5, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>
          <span><span style={{ color: "var(--good)" }}>●</span> online</span>
          <span>user: claude</span>
          <span>pwd: /home/claude</span>
          <span>host: w8h8.com</span>
          <div style={{ flex: 1 }}/>
          <span>CPU 42% · MEM 3.1G · DISK 28%</span>
        </div>
      </Card>

      {/* Snippets */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginTop: 20 }}>
        <Card>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Common commands</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { c: "claude status --all", d: "Roster snapshot" },
              { c: "claude ask prime 'summarize today'", d: "Talk to Prime" },
              { c: "tail -f events.log", d: "Live stream" },
              { c: "gastronaut budgets", d: "Spend today" },
            ].map(s => (
              <div key={s.c} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 10px", borderRadius: 6, background: "rgba(255,255,255,0.02)", border: "1px solid var(--line-1)" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--ink-1)" }}>{s.c}</span>
                <span style={{ fontSize: 11, color: "var(--ink-3)" }}>{s.d}</span>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Active sessions</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              { u: "sefa", h: "this window", n: "zsh" },
              { u: "prime", h: "agent shell", n: "claude-code" },
              { u: "scribe", h: "git worker", n: "node" },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="dot live"/>
                <span className="mono" style={{ fontSize: 12, flex: 1 }}>{s.u}@{s.h}</span>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{s.n}</span>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Safety</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
            Destructive commands (<span className="mono">rm -rf</span>, <span className="mono">dd</span>, force-push) require a second confirmation from Prime. Real-money trade tools are not installed in this shell.
          </div>
        </Card>
      </div>
    </div>
  );
}

function mockRun(cmd) {
  const c = cmd.trim().toLowerCase();
  if (c.startsWith("ls")) return ["agents/  charter.yaml  events.log  secrets/  tools/"];
  if (c.startsWith("claude ask prime")) return ["prime: on it. summary pending.", "(response streamed in ~14s)"];
  if (c.startsWith("gastronaut budgets")) return ["daily cap   $120.00  used $41.20 (34%)", "per-agent   $30.00 / 24h"];
  if (c === "whoami") return ["sefa"];
  if (c === "date") return ["Tue Apr 21 14:03:12 UTC 2026"];
  if (c.startsWith("claude status")) return [
    "prime            live    load 0.52",
    "market-sentry    live    load 0.68",
    "creative-dir     working load 0.42",
    "research-spec    live    load 0.31",
    "ops-steward      idle    load 0.08",
  ];
  return [`zsh: command not found: ${cmd}`];
}

window.NewTaskModal = NewTaskModal;
window.TerminalView = TerminalView;
window.TaskDrawer = TaskDrawer;