{agent.name}

{agent.role}{agent.lead ? " · lead" : ""}

{allAgents.map((a) => ( ))}

{log.map((m, i) => (

{m.role === "bot" &&

{m.who}

} {m.text} {m.action === "open-auto" && ( )}

))}

{conf.suggest.map((s) => )}

setVal(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }} />
        <button className="send" onClick={() => send()}>{I.send}</button>
      </div>
    </div>
  );
}

/* ---------- Live automation panel (right rail) ---------- */
function AutomationRunner({ auto, agents, autoPublish }) {
  const [running, setRunning] = useState(false);
  const [active, setActive] = useState(-1);   // index currently processing
  const [done, setDone] = useState([]);       // indices done
  const [gated, setGated] = useState(false);
  const [post, setPost] = useState(auto.post);
  const timers = useRef([]);

const allDone = done.length === auto.steps.length;
  function stepState(i) {
    if (done.includes(i)) return "done";
    if (gated && auto.steps[i].gate && active === i) return "gate";
    if (active === i && running) return "active";
    if (active >= i || done.length > 0) return active > i ? "done" : "pending";
    return "pending";
  }

return (
    <div className="auto-panel">
      <div className="auto-card">
        <div style={{ display: "flex", alignItems: "flex-start", gap: 11 }}>
          <div className="risk-ico" style={{ background: "var(--accent-soft)", color: "var(--accent-ink)" }}>{I.flow}</div>
          <div style={{ flex: 1 }}>
            <div className="auto-title">{auto.name}</div>
            <div className="auto-cad">{auto.cadence}</div>
          </div>
        </div>

<div className="steps">
          {auto.steps.map((s, i) => {
            const st = stepState(i);
            return (
              <div key={s.id} className="step" data-state={st}>
                <div className="step-line"></div>
                <div className="step-node">
                  {st === "done" ? I.check : st === "active" ? <span className="spin"></span> : st === "gate" ? "!" : i + 1}
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="stt">{s.title}</div>
                  <div className="std">{s.detail}</div>
                  <div className="sts">{s.source}{st === "active" ? " · working…" : st === "gate" ? " · awaiting you" : ""}</div>

{/* Verification result, shown once the verify step completes */}
                  {i === 1 && (done.includes(1) || st === "done") && auto.detected && (
                    <div className="verify">
                      <div className="vr"><b>{auto.detected.type}</b></div>
                      <div className="vr">{auto.detected.date} · {auto.detected.time} · {auto.detected.duration} · {auto.detected.file}</div>
                      <div className="vnote">{I.check} {auto.detected.note}</div>
                    </div>
                  )}

{/* Editable post preview at the approval gate */}
                  {st === "gate" && (
                    <div className="post-edit">
                      <div className="post-badges">
                        <span className="pbadge ch">{I.flow} {post.channel} channel</span>
                        <span className="pbadge sh">{post.sharing}</span>
                      </div>
                      <div className="post-flabel">Title</div>
                      <input value={post.title} onChange={(e) => editPost("title", e.target.value)} />
                      <div className="post-flabel">What they'll learn</div>
                      <textarea rows="3" value={post.description} onChange={(e) => editPost("description", e.target.value)} />
                      <div className="post-flabel">A question to ponder</div>
                      <textarea className="post-q" rows="3" value={post.question} onChange={(e) => editPost("question", e.target.value)} />
                      <div className="actions">
                        <button className="btn btn-primary btn-sm" onClick={approveGate}>{I.check} Approve & post to Replays</button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

<div style={{ marginTop: 16, display: "flex", gap: 8 }}>
          {!running && !allDone && <button className="btn btn-primary btn-sm" onClick={start}>{I.play} Run now</button>}
          {(running || allDone) && <button className="btn btn-ghost btn-sm" onClick={reset}>Reset</button>}
          {allDone && <span style={{ fontSize: 12, color: "var(--accent-ink)", alignSelf: "center", fontWeight: 600 }}>✓ Posted to Replays</span>}
        </div>
      </div>

<p style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.5, marginTop: 16 }}>
        Anubis finds the call, then <b style={{ color: "var(--ink-2)" }}>verifies it's a Recalibration Call or Creator Workshop</b> by date & time — private calls are skipped. It opens link sharing, Iris drafts the post, and it publishes to the Replays channel only after you approve. Toggle auto-publish in Tweaks to skip the gate.
      </p>
    </div>
  );
}

Object.assign(window, { I, Avatar, Sidebar, ChatDock, AutomationRunner });