@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/pages/SchedulePage/components/WeekColumn.tsx

@@ -0,0 +1,75 @@
+import { useContext } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  draggable,
+  hourOf,
+  PickContext,
+  postLink,
+  sameDay,
+  STATE_LABEL,
+  useDayDropTarget,
+  WEEKDAYS,
+  type DragController,
+  type Post,
+} from "../../../lib/calendar";
+import { PlatformIcons } from "./PlatformIcons";
+import { PostThumb } from "./PostThumb";
+
+/* week: each day's posts, without time; hovering shows the time */
+export function WeekColumn({
+  d,
+  posts,
+  today,
+  goToDay,
+  drag,
+  drop,
+}: {
+  d: Date;
+  posts: Post[];
+  today: Date;
+  goToDay: (d: Date) => void;
+  drag: DragController;
+  drop: (p: Post, d: Date) => void;
+}) {
+  const navigate = useNavigate();
+  const ofDay = posts.filter(p => sameDay(p.when, d));
+  const target = useDayDropTarget(d, today, drag, drop);
+  const pick = useContext(PickContext);
+  return (
+    <div
+      className={`cal-column${sameDay(d, today) ? " today" : ""}${d < today ? " past" : ""}${target.className}`}
+      {...target.props}
+      onClick={pick ? () => pick(d) : undefined}
+    >
+      <button
+        className="cal-column-header"
+        onClick={e => {
+          e.stopPropagation();
+          goToDay(d);
+        }}
+        title="Abrir o dia"
+      >
+        <span>{WEEKDAYS[d.getDay()]}</span> <b>{d.getDate()}</b>
+      </button>
+      <div className="cal-column-posts">
+        {ofDay.map(p => (
+          <button
+            key={p.key}
+            className={`cal-card ${p.state}${drag.drag?.post.key === p.key ? " dragging" : ""}`}
+            onClick={() => {
+              if (!pick) navigate(postLink(p));
+            }}
+            aria-label={`${p.title}, ${hourOf(p.when)}`}
+            {...draggable(p, drag)}
+          >
+            <span className="cal-hour-hover">{hourOf(p.when)}</span>
+            <PostThumb post={p} />
+            <span className="cal-card-title">{p.title}</span>
+            <PlatformIcons ids={p.platforms} />
+            {p.state !== "scheduled" && <span className={`cal-status ${p.state}`}>{STATE_LABEL[p.state]}</span>}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/WeekView.tsx

@@ -0,0 +1,35 @@
+import { addDays, startOfWeek, type DragController, type Post } from "../../../lib/calendar";
+import { WeekColumn } from "./WeekColumn";
+
+export function WeekView({
+  cursor,
+  posts,
+  today,
+  goToDay,
+  drag,
+  drop,
+}: {
+  cursor: Date;
+  posts: Post[];
+  today: Date;
+  goToDay: (d: Date) => void;
+  drag: DragController;
+  drop: (p: Post, d: Date) => void;
+}) {
+  const start = startOfWeek(cursor);
+  return (
+    <div className="cal-week">
+      {Array.from({ length: 7 }, (_, i) => addDays(start, i)).map(d => (
+        <WeekColumn
+          key={d.toDateString()}
+          d={d}
+          posts={posts}
+          today={today}
+          goToDay={goToDay}
+          drag={drag}
+          drop={drop}
+        />
+      ))}
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/index.tsx

@@ -0,0 +1,285 @@
+/* Schedule: every video's scheduled publications (publication.json `schedule`, written by
+   `publish.mjs schedule`) and the ones already up (on the day and time they were published) in a
+   month, week and day calendar. The color tells the state: emerald published, red with an error,
+   white not public yet. Only the day view shows the time on the grid, each post at its exact time;
+   in the month, hovering a day shows its videos with the time; in the week, hovering a post shows
+   the time. Clicking a post opens the video's Publish stage.
+
+   Dragging reschedules (`publish.mjs schedule --reschedule`): in the month and week, dropping on
+   another day asks for the time; in the day, the time is where the card lands.
+
+   Picking the day: the Publish stage's "Agendar" brings a draft here (lib/publish-draft.ts).
+   Clicking a day (month or week) asks for the time; in the day view, clicking the grid already
+   gives the time at that point. Once picked, the page goes back to the Publish stage with
+   everything as it was and the day set. */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { ArrowLeft, ArrowRight, CalendarBlank } from "../../components/icons";
+import { Skeleton } from "../../components/ui/skeleton";
+import { useNow } from "../../hooks/useNow";
+import { useSchedule } from "../../hooks/useSchedule";
+import { useVideos } from "../../hooks/useVideos";
+import { api, enc, send } from "../../lib/api";
+import {
+  hourOf,
+  PickContext,
+  postFromDraft,
+  postsOf,
+  sameDay,
+  startOfDay,
+  stepCursor,
+  suggestedHour,
+  titleFor,
+  VIEWS,
+  withHour,
+  type CalendarView,
+  type Drag,
+  type DragController,
+  type PickHandler,
+  type Post,
+} from "../../lib/calendar";
+import { formatDayTime, toLocalInputValue } from "../../lib/format";
+import { pickingPublishDraft, savePublishDraft, type PublishDraft } from "../../lib/publish-draft";
+import { CalendarSkeleton } from "./components/CalendarSkeleton";
+import { DayView } from "./components/DayView";
+import { HourPicker } from "./components/HourPicker";
+import { MonthView } from "./components/MonthView";
+import { PostThumb } from "./components/PostThumb";
+import { WeekView } from "./components/WeekView";
+
+export function SchedulePage({ view: urlView }: { view?: string }) {
+  const view: CalendarView = urlView === "week" || urlView === "day" ? urlView : "month";
+  const navigate = useNavigate();
+  const { videos, error } = useVideos();
+  const { schedule } = useSchedule();
+  const agent = schedule?.agent ?? null;
+  const now = new Date(useNow(30_000));
+  const today = startOfDay(now);
+  const [draft] = useState(pickingPublishDraft);
+  /* picking again: opens on the day already picked, if it hasn't passed */
+  const [cursor, setCursor] = useState(() => {
+    const q = draft?.when ? startOfDay(new Date(draft.when)) : null;
+    return q && q >= today ? q : today;
+  });
+  const [picked, setPicked] = useState<{ day: Date; minutes?: number } | null>(null);
+  const [drag, setDrag] = useState<Drag>(null);
+  const [dropChoice, setDropChoice] = useState<{ post: Post; day: Date } | null>(null);
+  const [moved, setMoved] = useState<Record<string, Date>>({});
+  const [notice, setNotice] = useState<{ ok: boolean; text: string } | null>(null);
+
+  /* the new time leaves `moved` once publication.json brings it */
+  useEffect(() => {
+    if (!videos) return;
+    setMoved(m => {
+      const rest = Object.fromEntries(
+        Object.entries(m).filter(([slug, d]) => {
+          const q = videos.find(v => v.slug === slug)?.publication?.schedule?.when;
+          return q && Date.parse(q) !== d.getTime();
+        }),
+      );
+      return Object.keys(rest).length === Object.keys(m).length ? m : rest;
+    });
+  }, [videos]);
+
+  const posts = videos ? postsOf(videos, moved) : [];
+  const switchView = (v: CalendarView) =>
+    navigate(v === "month" ? { to: "/schedule" } : { to: "/schedule/$view", params: { view: v } });
+  const goToDay = (d: Date) => {
+    setCursor(d);
+    switchView("day");
+  };
+  const upcoming = posts.filter(p => p.when >= now && (p.state === "scheduled" || p.state === "publishing"));
+  const problems = posts.filter(p => p.state === "failed" || p.state === "missed");
+
+  /* saves the new time; returns the error, if any */
+  const reschedule = async (p: Post, when: Date): Promise<string | null> => {
+    setMoved(m => ({ ...m, [p.slug]: when }));
+    setNotice(null);
+    const r = await send(
+      api.videos[":slug"].publish.schedule.reschedule.$post({
+        param: { slug: enc(p.slug) },
+        json: { when: when.toISOString() },
+      }),
+    );
+    if (!r.ok) {
+      setMoved(({ [p.slug]: _, ...rest }) => rest);
+      return r.error ?? "Não deu para remarcar";
+    }
+    setNotice({
+      ok: true,
+      text: `“${p.title}” remarcado para ${when.toLocaleDateString("pt-BR", { weekday: "short", day: "numeric", month: "short" })}, ${hourOf(when)}.`,
+    });
+    return null;
+  };
+
+  const dragRef = useRef<Drag>(null);
+  const dragController: DragController = {
+    drag,
+    current: () => dragRef.current,
+    start: (p, e) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", p.slug);
+      const grabY = e.clientY - (e.currentTarget as HTMLElement).getBoundingClientRect().top;
+      dragRef.current = { post: p, grabY };
+      /* changing the DOM in dragstart itself makes the browser cancel the drag: the visual waits a frame */
+      requestAnimationFrame(() => setDrag(dragRef.current));
+    },
+    end: () => {
+      dragRef.current = null;
+      setDrag(null);
+    },
+  };
+  /* month and week: dropping on another day asks for the time */
+  const dropOnDay = (p: Post, d: Date) => {
+    if (!sameDay(p.when, d)) setDropChoice({ post: p, day: d });
+  };
+  /* day: the time is where it landed */
+  const dropOnHour = async (p: Post, when: Date) => {
+    const e = await reschedule(p, when);
+    if (e) setNotice({ ok: false, text: e });
+  };
+
+  /* picking the day: the modal asks for the time (in the day view, the clicked point's comes along) */
+  const pick: PickHandler = draft
+    ? (day, minutes) => {
+        if (startOfDay(day) < today) return;
+        setPicked({ day: startOfDay(day), minutes });
+      }
+    : null;
+  const backToPublish = (r: PublishDraft) => {
+    savePublishDraft(r);
+    navigate({ to: "/videos/$slug/$stage", params: { slug: r.slug, stage: "publish" } });
+  };
+
+  let body: ReactNode;
+  if (!videos) body = <CalendarSkeleton view={view} />;
+  else if (view === "month")
+    body = (
+      <MonthView cursor={cursor} posts={posts} today={today} goToDay={goToDay} drag={dragController} drop={dropOnDay} />
+    );
+  else if (view === "week")
+    body = (
+      <WeekView cursor={cursor} posts={posts} today={today} goToDay={goToDay} drag={dragController} drop={dropOnDay} />
+    );
+  else body = <DayView cursor={cursor} posts={posts} now={now} drag={dragController} reschedule={dropOnHour} />;
+
+  return (
+    <div className={`page schedule-page${drag ? " dragging" : ""}`}>
+      <header className="header">
+        <h1>Agenda</h1>
+        <span className="subtle">
+          {videos ? (
+            `${upcoming.length} ${upcoming.length === 1 ? "post agendado" : "posts agendados"}`
+          ) : (
+            <Skeleton className="row" style={{ display: "inline-block", width: 120, verticalAlign: "middle" }} />
+          )}
+          {problems.length > 0 && <span className="error"> · {problems.length} com problema</span>}
+        </span>
+        <span className="push-end" />
+        <div className="tabs cal-views" role="tablist">
+          {VIEWS.map(([v, name]) => (
+            <button
+              key={v}
+              role="tab"
+              aria-selected={view === v}
+              className={view === v ? "active" : ""}
+              onClick={() => switchView(v)}
+            >
+              {name}
+            </button>
+          ))}
+        </div>
+      </header>
+
+      {agent && !agent.loaded && upcoming.length > 0 && (
+        <p className="warning">
+          O agente da agenda está desligado: nada sobe na hora. Ligue em{" "}
+          <Link to="/settings/$category" params={{ category: "publishing" }} className="link">
+            Configurações → Publicação
+          </Link>
+          .
+        </p>
+      )}
+      {error && <p className="response error">{error}</p>}
+
+      {draft && (
+        <div className="cal-picking">
+          <PostThumb post={postFromDraft(draft, videos)} />
+          <span className="cal-picking-text">
+            <b>Escolha o dia para publicar “{draft.title}”</b>
+            <span className="subtle">
+              {view === "day" ? "Clique na hora, na grade." : "Clique num dia; depois, a hora."}
+              {draft.when ? ` Estava ${formatDayTime(draft.when)}.` : ""}
+            </span>
+          </span>
+          <button className="button small" onClick={() => backToPublish({ ...draft, picking: false })}>
+            <ArrowLeft className="ic" /> Voltar sem escolher
+          </button>
+        </div>
+      )}
+
+      <div className="cal-nav">
+        <button className="button small" onClick={() => setCursor(c => stepCursor(view, c, -1))} aria-label="anterior">
+          <ArrowLeft weight="bold" />
+        </button>
+        <button className="button small" onClick={() => setCursor(today)}>
+          <CalendarBlank className="ic" /> Hoje
+        </button>
+        <button className="button small" onClick={() => setCursor(c => stepCursor(view, c, 1))} aria-label="próximo">
+          <ArrowRight weight="bold" />
+        </button>
+        <h2 className="cal-title">{titleFor(view, cursor)}</h2>
+        <span className="push-end" />
+        {notice ? (
+          <span className={`response ${notice.ok ? "ok" : "error"}`}>{notice.text}</span>
+        ) : (
+          posts.length > 0 &&
+          !draft && (
+            <span className="hint">
+              Arraste um post para remarcar{view === "day" ? ": a hora é onde ele cair" : ""}.
+            </span>
+          )
+        )}
+      </div>
+
+      <PickContext.Provider value={pick}>
+        <div className={draft ? "cal-picking-body" : undefined}>{body}</div>
+      </PickContext.Provider>
+
+      {videos && !posts.length && !draft && (
+        <p className="hint">
+          Nada agendado. Agende na etapa <strong>Publicar</strong> de um vídeo: escolha "Agendar", o dia e a hora.
+        </p>
+      )}
+      {dropChoice && (
+        <HourPicker
+          post={dropChoice.post}
+          day={dropChoice.day}
+          now={now}
+          onSave={q => reschedule(dropChoice.post, q)}
+          onClose={() => setDropChoice(null)}
+        />
+      )}
+      {picked && draft && (
+        <HourPicker
+          post={postFromDraft(draft, videos)}
+          day={picked.day}
+          now={now}
+          title="Agendar"
+          showFrom={false}
+          initial={
+            picked.minutes != null
+              ? hourOf(withHour(picked.day, picked.minutes))
+              : suggestedHour(picked.day, now, draft)
+          }
+          onSave={async q => {
+            backToPublish({ ...draft, when: toLocalInputValue(q), picking: false });
+            return null;
+          }}
+          onClose={() => setPicked(null)}
+        />
+      )}
+    </div>
+  );
+}

package/studio/web/pages/SettingsPage/components/AgentAccounts.tsx

@@ -0,0 +1,263 @@
+/* The agent accounts (agents in the config, tools/lib/agents.mjs): N Claude dirs and N Codex homes in
+   rotation order. Each new session goes to the next free one; an account over its limit is set aside
+   until it resets and the session carries on in the next. ~/.claude is refused by the server. */
+
+import { useEffect, useState } from "react";
+import { useSaveAction } from "../../../hooks/useSaveAction";
+import { api } from "../../../lib/api";
+import type { AgentAccount, AgentProvider, AgentsSettings } from "../../../types/api";
+import { ArrowDown, ArrowUp, ClaudeMark, Key, Plus, Trash } from "../../../components/icons";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { SettingRow } from "../../../components/SettingRow";
+import { Badge } from "../../../components/ui/badge";
+import { Picker } from "../../../components/ui/picker";
+import { Switch } from "../../../components/ui/switch";
+
+type Draft = Pick<AgentAccount, "id" | "provider" | "dir" | "label" | "enabled">;
+
+const PROVIDER: Record<AgentProvider, string> = { claude: "Claude", codex: "Codex" };
+const SUGGESTED_DIR: Record<AgentProvider, string> = { claude: "~/.claude-personal", codex: "~/.codex" };
+
+const at = (ms: number) =>
+  new Date(ms).toLocaleString("pt-BR", { weekday: "short", hour: "2-digit", minute: "2-digit" });
+
+/* the next free dir name of a provider: ~/.codex, ~/.codex-2, … */
+function nextDir(provider: AgentProvider, taken: string[]) {
+  const base = SUGGESTED_DIR[provider];
+  if (!taken.includes(base)) return base;
+  for (let i = 2; ; i++) if (!taken.includes(`${base}-${i}`)) return `${base}-${i}`;
+}
+
+export function AgentAccounts({ agents, onSave }: { agents: AgentsSettings; onSave: () => void }) {
+  const initial = (): Draft[] =>
+    agents.accounts.map(({ id, provider, dir, label, enabled }) => ({ id, provider, dir, label, enabled }));
+  const [list, setList] = useState(initial);
+  const [adding, setAdding] = useState<AgentProvider | null>(null);
+  const [newDir, setNewDir] = useState("");
+  const { result, saving, save } = useSaveAction(onSave);
+  const login = useSaveAction(onSave);
+  useEffect(() => setList(initial()), [JSON.stringify(agents.accounts)]);
+
+  /* while a login waits for the browser, reread every 3 s */
+  const waiting = agents.accounts.some(a => a.logging_in?.state === "waiting" && !a.login);
+  useEffect(() => {
+    if (!waiting) return;
+    const t = setInterval(onSave, 3000);
+    return () => clearInterval(t);
+  }, [waiting]);
+
+  const store = (accounts: Draft[]) =>
+    save(() => api.settings.agents.$post({ json: { accounts: accounts.map(({ id, ...a }) => ({ id, ...a })) } }));
+  const move = (i: number, d: -1 | 1) => {
+    const next = [...list];
+    [next[i], next[i + d]] = [next[i + d], next[i]];
+    setList(next);
+    void store(next);
+  };
+  const toggle = (i: number, enabled: boolean) => {
+    const next = list.map((a, k) => (k === i ? { ...a, enabled } : a));
+    setList(next);
+    void store(next);
+  };
+  const remove = (i: number) => {
+    const next = list.filter((_, k) => k !== i);
+    setList(next);
+    void store(next);
+  };
+  const startAdding = (p: AgentProvider) => {
+    setAdding(p);
+    setNewDir(
+      nextDir(
+        p,
+        list.map(a => a.dir),
+      ),
+    );
+  };
+  const add = async () => {
+    if (!adding || !newDir.trim()) return;
+    const ok = await store([...list, { id: "", provider: adding, dir: newDir.trim(), label: "", enabled: true }]);
+    if (ok) setAdding(null);
+  };
+
+  return (
+    <SettingRow
+      label="Contas"
+      help={
+        <>
+          Cada sessão nova vai para a próxima conta da lista. Uma conta que bate o limite de uso sai do rodízio até
+          liberar, e a sessão segue na seguinte: de Claude para Claude na mesma conversa; para o Codex, numa conversa
+          nova com o resumo do que já foi feito
+        </>
+      }
+    >
+      <div className="claude-options agent-accounts">
+        {agents.accounts.map((a, i) => {
+          const limited = a.limited_until && a.limited_until > Date.now();
+          return (
+            <div
+              key={a.id}
+              className={`claude-option${a.id === agents.next ? " chosen" : ""}${a.enabled ? "" : " deactivated"}`}
+            >
+              {a.provider === "claude" ? <ClaudeMark size={20} /> : <span className="agent-mark">C</span>}
+              <span>
+                <b>
+                  {PROVIDER[a.provider]} <span className="mono subtle">{a.dir}</span>
+                </b>
+                {a.login ? (
+                  <small>{[a.login.email, a.login.detail].filter(Boolean).join(" · ") || "com login"}</small>
+                ) : (
+                  <small className="warning">
+                    Sem login. <code>{a.login_command}</code>
+                  </small>
+                )}
+                {limited ? <small className="warning">No limite de uso até {at(a.limited_until!)}</small> : null}
+                {a.logging_in?.state === "waiting" && !a.login ? (
+                  <small>
+                    Esperando o login no navegador
+                    {a.logging_in.url ? (
+                      <>
+                        {" · "}
+                        <a href={a.logging_in.url} target="_blank" rel="noreferrer">
+                          abrir o link
+                        </a>
+                      </>
+                    ) : null}
+                  </small>
+                ) : null}
+              </span>
+              <span className="agent-actions">
+                {a.id === agents.next && <Badge>Próxima</Badge>}
+                {limited ? (
+                  <button
+                    className="button small"
+                    disabled={login.saving}
+                    onClick={() => login.save(() => api.settings.agents["clear-limit"].$post({ json: { id: a.id } }))}
+                  >
+                    Liberar
+                  </button>
+                ) : null}
+                {!a.login && (
+                  <button
+                    className="button small"
+                    disabled={login.saving}
+                    onClick={() => login.save(() => api.settings.agents.login.$post({ json: { id: a.id } }))}
+                  >
+                    <Key className="ic" /> Entrar
+                  </button>
+                )}
+                <Switch
+                  checked={a.enabled}
+                  disabled={saving}
+                  onCheckedChange={v => toggle(i, v)}
+                  aria-label={a.enabled ? "Tirar do rodízio" : "Pôr no rodízio"}
+                />
+                <button className="button small" title="Subir" disabled={saving || i === 0} onClick={() => move(i, -1)}>
+                  <ArrowUp className="ic" />
+                </button>
+                <button
+                  className="button small"
+                  title="Descer"
+                  disabled={saving || i === agents.accounts.length - 1}
+                  onClick={() => move(i, 1)}
+                >
+                  <ArrowDown className="ic" />
+                </button>
+                <button
+                  className="button small"
+                  title="Remover da lista (a pasta e o login ficam)"
+                  disabled={saving || agents.accounts.length === 1}
+                  onClick={() => remove(i)}
+                >
+                  <Trash className="ic" />
+                </button>
+              </span>
+            </div>
+          );
+        })}
+      </div>
+      {adding ? (
+        <div className="setting-row agent-add">
+          <Badge>{PROVIDER[adding]}</Badge>
+          <input
+            className="mono"
+            value={newDir}
+            onChange={e => setNewDir(e.target.value)}
+            aria-label="Pasta da conta"
+            placeholder={SUGGESTED_DIR[adding]}
+          />
+          <button className="button primary" disabled={saving || !newDir.trim()} onClick={add}>
+            Adicionar
+          </button>
+          <button className="button" onClick={() => setAdding(null)}>
+            Cancelar
+          </button>
+        </div>
+      ) : (
+        <div className="setting-row">
+          <button className="button" onClick={() => startAdding("claude")}>
+            <Plus className="ic" /> Conta Claude
+          </button>
+          <button className="button" onClick={() => startAdding("codex")} disabled={!agents.codex.installed}>
+            <Plus className="ic" /> Conta Codex
+          </button>
+        </div>
+      )}
+      <p className="hint">
+        Cada conta é uma pasta com o próprio login (<code>CLAUDE_CONFIG_DIR</code> no Claude, <code>CODEX_HOME</code> no
+        Codex). O <code>~/.claude</code>, a conta padrão do Claude Code, é proibido aqui.
+        {!agents.codex.installed && " O Codex não está instalado: instale o app do ChatGPT ou o codex no PATH."}
+      </p>
+      <ResultMessage result={result ?? login.result} />
+    </SettingRow>
+  );
+}
+
+/* Codex's model, effort and sandbox: one setting for every Codex account */
+export function CodexSettings({ codex, onSave }: { codex: AgentsSettings["codex"]; onSave: () => void }) {
+  const { result, saving, save } = useSaveAction(onSave);
+  const models = codex.options.models;
+  const efforts = models.find(m => m.id === codex.model)?.efforts ?? ["low", "medium", "high", "xhigh"];
+  const set = (c: { model?: string; effort?: string; sandbox?: string }) =>
+    save(() => api.settings.agents.$post({ json: { codex: c } }));
+  return (
+    <SettingRow
+      label="Codex"
+      help="Modelo e sandbox das sessões que caem numa conta Codex. Sem os forks do Claude, as etapas usam os subagentes do Codex ou rodam em sequência"
+    >
+      <div className="model-picker">
+        <Picker
+          aria-label="Modelo do Codex"
+          value={codex.model}
+          disabled={saving}
+          onChange={model => set({ model })}
+          options={[
+            ...(models.some(m => m.id === codex.model) ? [] : [{ value: codex.model, label: codex.model }]),
+            ...models.map(m => ({ value: m.id, label: m.label })),
+          ]}
+        />
+        <Picker
+          aria-label="Effort do Codex"
+          value={codex.effort ?? ""}
+          disabled={saving}
+          onChange={effort => set({ effort })}
+          options={[{ value: "", label: "Padrão" }, ...efforts.map(e => ({ value: e, label: e }))]}
+        />
+        <Picker
+          aria-label="Sandbox do Codex"
+          value={codex.sandbox}
+          disabled={saving}
+          onChange={sandbox => set({ sandbox })}
+          options={[
+            { value: "auto", label: "Sandbox com revisão automática" },
+            { value: "full", label: "Sem sandbox" },
+          ]}
+        />
+      </div>
+      <p className="hint">
+        Na sandbox, o Codex escreve no projeto e nos estilos visuais e tem rede; o que precisa sair dela (o Chrome do
+        render) pede, e o revisor automático do Codex decide, como o modo auto do Claude.
+      </p>
+      <ResultMessage result={result} />
+    </SettingRow>
+  );
+}

package/studio/web/pages/SettingsPage/components/AgentCategory.tsx

@@ -0,0 +1,20 @@
+/* Configurações → Agente de IA: the agent accounts (Claude and Codex), Codex's options and the model per stage */
+
+import type { Settings } from "../../../types/api";
+import { Panel } from "../../../components/ui/panel";
+import { AgentAccounts, CodexSettings } from "./AgentAccounts";
+import { ModelsSettings } from "./ModelsSettings";
+
+export function AgentCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+  return (
+    <>
+      <Panel title="Contas de agente">
+        <AgentAccounts agents={settings.agents} onSave={reload} />
+        <CodexSettings codex={settings.agents.codex} onSave={reload} />
+      </Panel>
+      <Panel title="Modelos do Claude">
+        <ModelsSettings models={settings.models} onSave={reload} />
+      </Panel>
+    </>
+  );
+}