0 ? "active" : "idle" }} size={58} ring />

{name}

{count > 0 && }

Orchestrator · {count} agent{count === 1 ? "" : "s"} reporting

onQuickSet(patch)} />

{chat.msgs.length === 0 && !chat.busy && (

Talk to your orchestrator. It routes work to the team.

)} {chat.msgs.map((m, i) => ( ))}

<div className="composer-bar">
          {chat.busy && <span className="badge"><span className="dotpulse" />thinking</span>}
          <div style={{ flex: 1 }} />
          <button className="send-btn" aria-label="Send message to orchestrator" onClick={submit} disabled={chat.busy}><Icon name="send" size={16} /></button>
        </div>
      </div>
    </div>
  );
}

// ---- Per-agent tile ----
function OpsAgentTile({ agent, models, jobCount, onGear, onRun, onQuickSet, toast }) {
  const chat = useOpsChat(opsSessionKey(agent.id), agent.model, agent.effort, agent.systemPrompt);
  const [draft, setDraft] = useState("");
  const scrollRef = useRef(null);

useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [chat.msgs, chat.busy]);

return (
    <div className="card agent-tile">
      <div className="ahead">
        <div className="agent-emoji" style={agent.color !== "var(--primary)" ? { background: `color-mix(in oklab, ${agent.color} 20%, var(--surface-3))`, borderColor: agent.color } : null}>{agent.emoji}</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700 }}>{agent.name}</div>
          <OpsMiniPickers model={agent.model} effort={agent.effort} models={models} ariaPrefix={agent.name} onChange={(patch) => onQuickSet(patch)} />
        </div>
        <button className="icon-btn" style={{ width: 30, height: 30 }} aria-label={`Open settings for ${agent.name}`} onClick={onGear}><Icon name="settings" size={15} /></button>
      </div>

<div className="agent-mini" ref={scrollRef}>
        {chat.msgs.length === 0 && !chat.busy
          ? <div className="faint" style={{ fontSize: 12, margin: "auto", padding: 6 }}>No messages yet.</div>
          : chat.msgs.map((m, i) => (
            <div key={i} className={cls("mbubble", m.role === "user" && "me")} style={{ whiteSpace: "pre-wrap" }}>
              {m.text || (chat.busy && i === chat.msgs.length - 1 ? <span className="dotpulse" /> : "")}
            </div>
          ))}
      </div>

<div className="composer" style={{ padding: 6 }}>
        <textarea value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={onKey} rows={1} placeholder="Message…" style={{ minHeight: 34 }} />
        <div className="composer-bar">
          <span className="faint mono" style={{ fontSize: 11 }}>{jobCount > 0 ? `${jobCount} scheduled job${jobCount === 1 ? "" : "s"}` : "Manual only"}</span>
          <div style={{ flex: 1 }} />
          <button className="icon-btn" style={{ width: 32, height: 32 }} aria-label="Run now" title="Run now" onClick={agent.needsSetup ? onGear : onRun}><Icon name="play" size={15} /></button>
          <button className="send-btn" aria-label={`Send message to ${agent.name}`} onClick={submit} disabled={chat.busy} style={{ width: 32, height: 32 }}><Icon name="send" size={14} /></button>
        </div>
      </div>
    </div>
  );
}

// Compact on-card pickers — switch an agent's model/effort in one click
// without opening the settings drawer. Clearing the model clears effort too.
function OpsMiniPickers({ model, effort, models, onChange, ariaPrefix }) {
  return (
    <div className="mini-row">
      <select
        className="mini-select"
        aria-label={`${ariaPrefix} model`}
        value={model || ""}
        onClick={(e) => e.stopPropagation()}
        onChange={(e) => onChange({ model: e.target.value, effort: e.target.value ? effort || "" : "" })}
      >
        <option value="">Default (Hermes)</option>
        {(models || []).map((m) => {
          const meta = modelMeta(m);
          return <option key={m} value={m}>{meta.prov ? `${meta.prov} · ${meta.short}` : m}</option>;
        })}
      </select>
      {!!model && (
        <select
          className="mini-select"
          aria-label={`${ariaPrefix} reasoning effort`}
          value={effort || ""}
          onClick={(e) => e.stopPropagation()}
          onChange={(e) => onChange({ model, effort: e.target.value })}
        >
          <option value="">effort · default</option>
          {OPS_EFFORTS.map((e2) => <option key={e2} value={e2}>effort · {e2}</option>)}
        </select>
      )}
    </div>
  );
}

// ---- Shared model + effort fields (drawer, orchestrator, new-agent) ----
// Gateway models are the ones the per-agent router can actually serve; the
// effort tier only applies to those, so it stays hidden for the default.
function OpsModelField({ value, onChange, models, defaultLabel }) {
  return (
    <div className="field">
      <label>Model</label>
      <select className="select" value={value} onChange={(e) => onChange(e.target.value)}>
        <option value="">{defaultLabel || "Default (auto)"}</option>
        {(models || []).map((m) => {
          const meta = modelMeta(m);
          return <option key={m} value={m}>{meta.prov ? `${meta.prov} · ${meta.short}` : m}</option>;
        })}
      </select>
    </div>
  );
}

function OpsEffortField({ value, onChange, visible }) {
  if (!visible) return null;
  return (
    <div className="field">
      <label>Reasoning effort</label>
      <select className="select" value={value} onChange={(e) => onChange(e.target.value)}>
        <option value="">Default</option>
        {OPS_EFFORTS.map((e) => <option key={e} value={e}>{e[0].toUpperCase() + e.slice(1)}</option>)}
      </select>
      <div className="faint" style={{ fontSize: 11.5, marginTop: 4 }}>How hard the model thinks per reply. Applies to the selected model.</div>
    </div>
  );
}

// ---- New Agent modal ----
function OpsNewAgentModal({ models, onClose, onCreate, toast }) {
  const [tpl, setTpl] = useState("blank");
  const [name, setName] = useState("");
  const [emoji, setEmoji] = useState("✨");
  const [model, setModel] = useState("");
  const [description, setDescription] = useState("");
  const [systemPrompt, setSystemPrompt] = useState("");
  const [saving, setSaving] = useState(false);

const pickTpl = (t) => {
    setTpl(t.id);
    setName(t.id === "blank" ? "" : t.name);
    setEmoji(t.emoji || "✨");
    setDescription(t.description || "");
    setSystemPrompt(t.systemPrompt || "");
  };

return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="ic"><Icon name="profiles" size={20} /></div>
          <div>
            <h2>New Agent</h2>
            <p>Add a persistent Operations agent to the roster.</p>
          </div>
          <button className="icon-btn x" aria-label="Close new agent dialog" style={{ width: 32, height: 32 }} onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Start from a template</label>
            <div className="tpl-row">
              {OPS_PICKER.map((t) => (
                <button key={t.id} className={cls("tpl-chip", tpl === t.id && "on")} onClick={() => pickTpl(t)}>
                  <span className="em">{t.emoji}</span>{t.name}
                </button>
              ))}
            </div>
          </div>
          <div className="split">
            <div className="field">
              <label>Name</label>
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Sage" />
            </div>
            <div className="field" style={{ maxWidth: 90 }}>
              <label>Emoji</label>
              <input className="emoji-input" value={emoji} onChange={(e) => setEmoji(e.target.value)} maxLength={4} />
            </div>
          </div>
          <div className="field">
            <label>Model</label>
            <select className="select" value={model} onChange={(e) => setModel(e.target.value)}>
              <option value="">Default (auto)</option>
              {(models || []).map((m) => {
                const meta = modelMeta(m);
                return <option key={m} value={m}>{meta.prov ? `${meta.prov} · ${meta.short}` : m}</option>;
              })}
            </select>
          </div>
          <div className="field">
            <label>Description</label>
            <input className="input" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What does this agent do?" />
          </div>
          <div className="field">
            <label>System Prompt</label>
            <textarea className="input" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} rows={7} style={{ resize: "vertical", minHeight: 140, fontFamily: "inherit", lineHeight: 1.5 }} placeholder="You are…" />
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={create} disabled={saving}>{saving ? "Saving…" : "Create Agent"}</button>
        </div>
      </div>
    </div>
  );
}

// ---- Agent Settings drawer ----
function OpsAgentDrawer({ agent, models, onClose, onSave, onDelete, toast }) {
  const [name, setName] = useState(agent.name);
  const [emoji, setEmoji] = useState(agent.emoji);
  const [model, setModel] = useState(agent.model);
  const [effort, setEffort] = useState(agent.effort || "");
  const [description, setDescription] = useState(agent.description);
  const [systemPrompt, setSystemPrompt] = useState(agent.systemPrompt);
  const [saving, setSaving] = useState(false);
  const [deleting, setDeleting] = useState(false);

return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head">
          <div>
            <div className="eyebrow">Agent Settings</div>
            <h2 style={{ fontSize: 18, fontWeight: 700, margin: "2px 0 0" }}>{agent.name}</h2>
            <p className="faint" style={{ fontSize: 13, margin: "2px 0 0" }}>Update this agent without leaving the roster.</p>
          </div>
          <button className="icon-btn" aria-label="Close agent settings" style={{ width: 32, height: 32 }} onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="drawer-body">
          <div className="field">
            <label>Display name</label>
            <input className="input" value={name} onChange={(e) => setName(e.target.value)} />
          </div>
          <div className="field" style={{ maxWidth: 110 }}>
            <label>Emoji</label>
            <input className="emoji-input" value={emoji} onChange={(e) => setEmoji(e.target.value)} maxLength={4} />
          </div>
          <OpsModelField value={model} onChange={setModel} models={models} defaultLabel="Default (Hermes runtime · full tools)" />
          <OpsEffortField value={effort} onChange={setEffort} visible={!!model} />
          <div className="field">
            <label>Description</label>
            <input className="input" value={description} onChange={(e) => setDescription(e.target.value)} />
          </div>
          <div className="field">
            <label>System Prompt</label>
            <textarea className="input" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} rows={8} style={{ resize: "vertical", minHeight: 160, fontFamily: "inherit", lineHeight: 1.5 }} />
          </div>
          <div className="flex" style={{ gap: 10, justifyContent: "space-between", marginTop: 4 }}>
            <button className="btn btn-danger" onClick={del} disabled={deleting || agent.id === "default"}>{deleting ? "Deleting…" : "Delete agent"}</button>
            <button className="btn btn-primary" onClick={save} disabled={saving}>{saving ? "Saving…" : "Save"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- Orchestrator Settings modal ----
function OpsOrchestratorModal({ name, model, effort, models, onClose, onSave }) {
  const [val, setVal] = useState(name);
  const [mdl, setMdl] = useState(model || "");
  const [eff, setEff] = useState(effort || "");
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal sm" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="ic"><Icon name="conductor" size={20} /></div>
          <div><h2>Orchestrator Settings</h2><p>Name, model, and reasoning effort for your Main Agent.</p></div>
          <button className="icon-btn x" aria-label="Close orchestrator settings" style={{ width: 32, height: 32 }} onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Name</label>
            <input className="input" value={val} onChange={(e) => setVal(e.target.value)} placeholder="Main Agent" />
          </div>
          <OpsModelField value={mdl} onChange={setMdl} models={models} defaultLabel="Hermes runtime (full tools + delegation)" />
          {!!mdl && <div className="faint" style={{ fontSize: 11.5, marginTop: -6 }}>Direct models chat via the provider gateway — hermes-side tools (delegation, file actions) don't apply on them.</div>}
          <OpsEffortField value={eff} onChange={setEff} visible={!!mdl} />
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={() => { onSave({ name: val.trim() || "Main Agent", model: mdl, effort: mdl ? eff : "" }); onClose(); }}>Save</button>
        </div>
      </div>
    </div>
  );
}

// ---- Operations Settings modal ----
function OpsSettingsModal({ models, settings, delegation, onClose, onSave }) {
  const [defaultModel, setDefaultModel] = useState(settings.defaultModel || "");
  const [activityFeedLength, setActivityFeedLength] = useState(settings.activityFeedLength || 5);
  const [autoApprove, setAutoApprove] = useState(!!settings.autoApprove);
  const [subModel, setSubModel] = useState((delegation && delegation.model) || "");
  const [subEffort, setSubEffort] = useState((delegation && delegation.effort) || "");
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal sm" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="ic"><Icon name="sliders" size={20} /></div>
          <div><h2>Operations Settings</h2><p>Defaults for your agent team.</p></div>
          <button className="icon-btn x" aria-label="Close operations settings" style={{ width: 32, height: 32 }} onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Default model for new agents</label>
            <select className="select" value={defaultModel} onChange={(e) => setDefaultModel(e.target.value)}>
              <option value="">Default (auto)</option>
              {(models || []).map((m) => {
                const meta = modelMeta(m);
                return <option key={m} value={m}>{meta.prov ? `${meta.prov} · ${meta.short}` : m}</option>;
              })}
            </select>
          </div>
          <div className="field">
            <label>Activity feed length</label>
            <input className="input" type="number" min={1} max={50} value={activityFeedLength} onChange={(e) => setActivityFeedLength(Number(e.target.value) || 5)} />
          </div>
          <div className="flex" style={{ justifyContent: "space-between", alignItems: "center" }}>
            <div><div style={{ fontSize: 13.5, fontWeight: 650 }}>Auto-approve agent actions</div><div className="faint" style={{ fontSize: 12 }}>Skip confirmation before agents run.</div></div>
            <Toggle on={autoApprove} onChange={setAutoApprove} />
          </div>
          <div style={{ borderTop: "1px solid var(--line)", margin: "14px 0 12px" }} />
          <div style={{ fontSize: 13.5, fontWeight: 650, marginBottom: 2 }}>Subagents</div>
          <p className="faint" style={{ fontSize: 12, margin: "0 0 10px" }}>When an agent delegates a task, the child agents run on this model and effort. "Inherit" = same as the delegating agent.</p>
          <div className="field">
            <label>Subagent model</label>
            <select className="select" value={subModel} onChange={(e) => { setSubModel(e.target.value); if (!e.target.value) setSubEffort(""); }}>
              <option value="">Inherit (parent's model)</option>
              {(models || []).map((m) => {
                const meta = modelMeta(m);
                return <option key={m} value={m}>{meta.prov ? `${meta.prov} · ${meta.short}` : m}</option>;
              })}
            </select>
          </div>
          <div className="field">
            <label>Subagent reasoning effort</label>
            <select className="select" value={subEffort} onChange={(e) => setSubEffort(e.target.value)}>
              <option value="">Inherit</option>
              {OPS_EFFORTS.map((e2) => <option key={e2} value={e2}>{e2[0].toUpperCase() + e2.slice(1)}</option>)}
            </select>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={() => { onSave({ defaultModel, activityFeedLength, autoApprove, delegation: { model: subModel, effort: subEffort } }); onClose(); }}>Save Settings</button>
        </div>
      </div>
    </div>
  );
}

// ---- Main page ----
function PageOperations({ toast }) {
  const [tab, setTab] = useState("overview");
  const [agents, setAgents] = useState(null);   // null = loading
  const [models, setModels] = useState([]);
  const [jobs, setJobs] = useState([]);
  const [live, setLive] = useState(null);       // null=loading, true=backend, false=offline
  const [orchName, setOrchName] = useState(() => {
    try { return localStorage.getItem(OPS_ORCH_KEY) || "Main Agent"; } catch (e) { return "Main Agent"; }
  });
  const [orchModel, setOrchModel] = useState(() => {
    try { return localStorage.getItem(OPS_ORCH_MODEL_KEY) || ""; } catch (e) { return ""; }
  });
  const [orchEffort, setOrchEffort] = useState(() => {
    try { return localStorage.getItem(OPS_ORCH_EFFORT_KEY) || ""; } catch (e) { return ""; }
  });
  const [gwModels, setGwModels] = useState([]);  // provider-gateway ids (direct-routable)
  const [delegation, setDelegation] = useState({ model: "", effort: "" }); // subagent slot (hermes delegation config)
  const [opsSettings, setOpsSettings] = useState({ defaultModel: "", autoApprove: false, activityFeedLength: 5 });

const [showNew, setShowNew] = useState(false);
  const [showOpsSettings, setShowOpsSettings] = useState(false);
  const [showOrchSettings, setShowOrchSettings] = useState(false);
  const [drawerAgent, setDrawerAgent] = useState(null);

useEffect(() => {
    let alive = true;
    loadAgents();
    HERMES.listModels()
      .then((res) => { if (alive) setModels(opsNormalizeModels(res)); })
      .catch(() => { if (alive) setModels((window.DATA && window.DATA.models) || []); });
    HERMES.req("/api/ops/models")
      .then((res) => { if (alive) setGwModels((res && res.models) || []); })
      .catch(() => { /* gateway unreachable — pickers show BFF models only */ });
    HERMES.req("/api/ops/delegation")
      .then((res) => { if (alive && res) setDelegation({ model: res.model || "", effort: res.effort || "" }); })
      .catch(() => { /* dashboard unreachable — subagent section shows defaults */ });
    HERMES.listJobs()
      .then((res) => { if (alive) setJobs((res && res.jobs) || []); })
      .catch(() => { if (alive) setJobs([]); });
    return () => { alive = false; };
  }, [loadAgents]);

const jobCountFor = useCallback((id) => jobs.filter((j) => j && typeof j.name === "string" && j.name.startsWith(`ops:${id}:`)).length, [jobs]);

// ---- mutations ----
  const createAgent = async ({ name, model, emoji, description, systemPrompt, color }) => {
    if (live === false) { toast && toast("Connect a backend to create agents."); throw new Error("offline"); }
    await HERMES.createProfile({ name, model: model || undefined });
    if (systemPrompt || description) {
      try { await HERMES.updateProfile(name, { system_prompt: systemPrompt, description }); } catch (e) { /* meta still saved locally */ }
    }
    opsWriteMeta(name, { emoji, description, systemPrompt, color, createdAt: new Date().toISOString() });
    await loadAgents();
    toast && toast(`Agent "${name}" created`);
  };

// Direct-routable gateway models first — they're the ones the per-agent
  // router serves; BFF-reported models follow for completeness.
  const pickerModels = [...new Set([...gwModels, ...models])];

// ---- outputs (derive recent runs from jobs lastRun) ----
  const outputs = jobs
    .filter((j) => j && (j.lastRun || j.last_run))
    .map((j) => ({ id: j.id, name: j.name, when: j.lastRun || j.last_run, status: j.status }))
    .slice(0, opsSettings.activityFeedLength * 2);

const badge = live === false
    ? <span className="badge warn"><span className="d" />preview data</span>
    : live === true
      ? <span className="badge ok"><span className="d" />live</span>
      : null;

const count = (agents || []).length;

return (
    <div className="page">
      <PageHead eyebrow="Sylar's WorkSpace" title="Operations" sub="Your persistent agent team.">
        {badge}
        <div className="tabs">
          <button className={cls("tab", tab === "overview" && "on")} onClick={() => setTab("overview")}>Overview</button>
          <button className={cls("tab", tab === "outputs" && "on")} onClick={() => setTab("outputs")}>Outputs</button>
        </div>
        <button className="btn btn-primary" onClick={() => setShowNew(true)}><Icon name="plus" size={16} />New Agent</button>
        <button className="icon-btn" aria-label="Operations settings" onClick={() => setShowOpsSettings(true)}><Icon name="settings" size={17} /></button>
      </PageHead>

{tab === "overview" && (
        <div className="split" style={{ alignItems: "start" }}>
          <OpsOrchestrator count={count} name={orchName} model={orchModel} effort={orchEffort} models={pickerModels} onQuickSet={({ model, effort }) => { saveOrch({ name: orchName, model, effort }); toast && toast(model ? `Orchestrator → ${modelMeta(model).short}${effort ? ` · ${effort}` : ""}` : "Orchestrator → Hermes runtime"); }} onGear={() => setShowOrchSettings(true)} toast={toast} />

<div className="team-grid">
            {agents === null && <div className="card muted" style={{ gridColumn: "1/-1", textAlign: "center" }}>Loading agents…</div>}
            {(agents || []).map((a) => (
              <OpsAgentTile
                key={a.id}
                agent={a}
                models={pickerModels}
                jobCount={jobCountFor(a.id)}
                onGear={() => setDrawerAgent(a)}
                onRun={() => runAgent(a)}
                onQuickSet={({ model, effort }) => saveAgent(a, { emoji: a.emoji, description: a.description, systemPrompt: a.systemPrompt, model, effort })}
                toast={toast}
              />
            ))}
            <button className="add-tile" onClick={() => setShowNew(true)}>
              <Icon name="plus" size={24} />
              <span style={{ fontWeight: 600 }}>Add Agent</span>
            </button>
          </div>
        </div>
      )}

{tab === "outputs" && (
        <div className="card">
          <div className="card-head">
            <div>
              <h2 className="section-title">Outputs</h2>
              <p className="faint mono" style={{ fontSize: 12 }}>{outputs.length} recent run{outputs.length === 1 ? "" : "s"} across the team</p>
            </div>
          </div>
          {outputs.length === 0
            ? (
              <div className="empty">
                <Icon name="jobs" size={22} className="faint" />
                <p className="muted" style={{ marginTop: 8 }}>No agent outputs yet. Configure cron jobs in agent settings to get started.</p>
              </div>
            )
            : (
              <div className="rows">
                {outputs.map((o) => (
                  <div className="row" key={o.id}>
                    <div className="glyph"><Icon name="jobs" size={15} /></div>
                    <div className="row-main">
                      <b>{o.name}</b>
                      <div className="row-sub mono"><span>{o.status || "ran"}</span></div>
                    </div>
                    <span className="faint mono" style={{ fontSize: 11.5 }}>{typeof o.when === "string" ? o.when : new Date(o.when).toLocaleString()}</span>
                  </div>
                ))}
              </div>
            )}
        </div>
      )}

{showNew && <OpsNewAgentModal models={pickerModels} onClose={() => setShowNew(false)} onCreate={createAgent} toast={toast} />}
      {showOpsSettings && (
        <OpsSettingsModal
          models={pickerModels}
          settings={opsSettings}
          delegation={delegation}
          onClose={() => setShowOpsSettings(false)}
          onSave={async (s) => {
            setOpsSettings({ defaultModel: s.defaultModel, activityFeedLength: s.activityFeedLength, autoApprove: s.autoApprove });
            if (s.delegation && (s.delegation.model !== delegation.model || s.delegation.effort !== delegation.effort)) {
              try {
                await HERMES.req("/api/ops/delegation", { method: "POST", body: JSON.stringify(s.delegation) });
                setDelegation(s.delegation);
                toast && toast(s.delegation.model ? `Subagents → ${modelMeta(s.delegation.model).short}${s.delegation.effort ? ` · ${s.delegation.effort}` : ""}` : "Subagents → inherit parent model");
              } catch (e) { toast && toast(e.message || "Failed to save subagent settings"); }
            }
          }}
        />
      )}
      {showOrchSettings && <OpsOrchestratorModal name={orchName} model={orchModel} effort={orchEffort} models={pickerModels} onClose={() => setShowOrchSettings(false)} onSave={saveOrch} />}
      {drawerAgent && (
        <OpsAgentDrawer
          agent={drawerAgent}
          models={pickerModels}
          onClose={() => setDrawerAgent(null)}
          onSave={(patch) => saveAgent(drawerAgent, patch)}
          onDelete={() => deleteAgent(drawerAgent)}
          toast={toast}
        />
      )}
    </div>
  );
}

window.PageOperations = PageOperations;