@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/SessionPanel.tsx

@@ -0,0 +1,352 @@
+/* The agent inside the UI: the studio session of a video, a reference, the metrics analysis or
+   an edit (what it is doing, where it stopped, what it asked) and the reply box, which resumes
+   the same session. Omni drives the same panel by voice (lib/omni-ui: useOmniClaude): it reads the
+   state, presses Parar, writes in the box and sends, all on screen. */
+
+import { useLayoutEffect, useRef, useState } from "react";
+import { useSessionFor } from "../hooks/useSessions";
+import { useNow } from "../hooks/useNow";
+import { useLiveQuery } from "../hooks/useLiveQuery";
+import { api, enc, send as request, type ActionResult } from "../lib/api";
+import { formatElapsed, timeAgo, toMs } from "../lib/format";
+import { queryKeys } from "../lib/query-client";
+import { chatRequest, costLabel, EMPTY_COPY, SESSION_STATE, turnRequest, type TurnHistory } from "../lib/sessions";
+import { useOmniClaude } from "../lib/omni-ui";
+import type { SessionType } from "../types/api";
+import { AgentMark } from "./AgentMark";
+import { AgentWalking } from "./AgentWalking";
+import { ChatCircleText, PaperPlane, Stop } from "./icons";
+import { LogStream } from "./LogStream";
+import { Markdown } from "./Markdown";
+import { Badge } from "./ui/badge";
+
+/* `before`: what the page must do before sending (the editor saves the timeline); false cancels the send */
+type Before = () => Promise<boolean>;
+
+function ReplyBox({
+  type,
+  target,
+  label,
+  hint,
+  required,
+  before,
+}: {
+  type: SessionType;
+  target: string;
+  label: string;
+  hint: string;
+  required?: boolean;
+  before?: Before;
+}) {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  /* what is in the box right now, even before the re-render (Omni writes and sends in a row) */
+  const latest = useRef(text);
+  latest.current = text;
+  const send = async () => {
+    setSending(true);
+    setResult(null);
+    if (before && !(await before())) {
+      setSending(false);
+      return { ok: false, error: "o envio foi cancelado pela tela" };
+    }
+    const r = await request(chatRequest(type, target, latest.current));
+    setSending(false);
+    setResult(r);
+    if (r.ok) setText("");
+    return r;
+  };
+  /* chat prompt box: grows with the text up to a cap, no resize handle */
+  const box = useRef<HTMLTextAreaElement>(null);
+  const canSendNow = () => !sending && (!!latest.current.trim() || !required);
+  useOmniClaude(type, target, {
+    write: (value, append) => {
+      const next = append && latest.current.trim() ? `${latest.current.trimEnd()}\n${value}` : value;
+      latest.current = next;
+      setText(next);
+      setResult(null);
+      box.current?.focus();
+    },
+    send: async () => {
+      if (!canSendNow()) return { ok: false, error: sending ? "já está enviando" : "a caixa está vazia" };
+      const r = await send();
+      return r.ok ? { ok: true, output: r.output } : { ok: false, error: r.error };
+    },
+  });
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 220)}px`;
+  }, [text]);
+  const canSend = !sending && (!!text.trim() || !required);
+  return (
+    <div className="reply">
+      <div className="prompt">
+        <textarea
+          ref={box}
+          aria-label="Mensagem para o agente"
+          value={text}
+          onChange={e => setText(e.target.value)}
+          /* Enter sends; Shift + Enter breaks the line (and the Enter of someone composing an accent doesn't count) */
+          onKeyDown={e => {
+            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+              e.preventDefault();
+              if (canSend) send();
+            }
+          }}
+          rows={1}
+          placeholder={hint}
+        />
+        <button
+          className="prompt-send"
+          disabled={!canSend}
+          onClick={send}
+          title={`${label} (Enter)`}
+          aria-label={label}
+        >
+          {sending ? <span className="prompt-spinning" aria-hidden="true" /> : <PaperPlane weight="bold" />}
+        </button>
+      </div>
+      <span className="hint prompt-hint">Enter envia · Shift + Enter quebra a linha</span>
+      {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>}
+    </div>
+  );
+}
+
+/* Chat mode (the editor): the conversation scrolls, turn by turn, and the message box sticks to
+   the bottom, with the conversation passing behind it. With the agent working the box goes away
+   and the conversation takes everything, with the turn's live log at the end. */
+function SessionChat({ type, target, before }: { type: SessionType; target: string; before?: Before }) {
+  const s = useSessionFor(type, target);
+  const now = useNow();
+  const [stopping, setStopping] = useState(false);
+  const running = s?.state === "running";
+  /* the history, refetched when a turn starts or ends (the SSE "sessions" event invalidates ["session"]) */
+  const { data } = useLiveQuery(
+    queryKeys.session(s?.id ?? ""),
+    s ? () => api.sessions[":id"].$get({ param: { id: enc(s.id) } }) : null,
+  );
+  const turns: TurnHistory[] = s ? (data?.history ?? []) : [];
+  const scroller = useRef<HTMLDivElement>(null);
+  /* the conversation goes down to the end when something new arrives */
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [turns, running]);
+  const stop = async () => {
+    if (s) await stopFor(s.id, setStopping);
+  };
+  const section = useRef<HTMLElement>(null);
+  useOmniClaude(type, target, {
+    reveal: () => section.current?.scrollIntoView({ block: "nearest", behavior: "smooth" }),
+    state: () => ({ state: s?.state ?? "none", now: s?.now ?? null, turns: s?.turns ?? 0 }),
+    ...(running ? { stop: () => stopFor(s!.id, setStopping) } : {}),
+  });
+  return (
+    <section ref={section} className={`claude chat${s ? ` ${s.state}` : ""}`}>
+      <div ref={scroller} className={`chat-scroll${running ? " full" : ""}`}>
+        {!turns.length && !running && <p className="chat-empty">{EMPTY_COPY[type].none}</p>}
+        {turns.map(t => {
+          const request = turnRequest(t.prompt);
+          const last = t.n === turns.length;
+          return (
+            <div key={t.n} className="chat-turn">
+              {request && <div className="chat-msg user">{request}</div>}
+              {t.result && (
+                <div className={`chat-msg agent${t.result.error ? " error" : ""}`}>
+                  <Markdown text={t.result.text} />
+                  {!!t.result.denied.length && (
+                    <p className="hint warning">Negado por falta de permissão: {t.result.denied.join(" · ")}</p>
+                  )}
+                </div>
+              )}
+              {!t.result && last && !running && (
+                <p className="note">O turno parou no meio, sem resposta final. Mande o agente continuar.</p>
+              )}
+            </div>
+          );
+        })}
+        {running && s && (
+          <div className="chat-msg agent working">
+            <span className="chat-working">
+              <AgentWalking className="in-corner" /> {s.now ?? "Trabalhando…"}
+              <button className="button small push-end" disabled={stopping} onClick={stop}>
+                <Stop className="ic" /> {stopping ? "Parando…" : "Parar"}
+              </button>
+            </span>
+            <LogStream key={`${s.id}-${s.turns}`} id={s.id} src={`/api/sessions/${s.id}/log`} height={260} />
+          </div>
+        )}
+      </div>
+      {!running && (
+        <div className="chat-input">
+          <ReplyBox
+            type={type}
+            target={target}
+            label={EMPTY_COPY[type].label}
+            hint={EMPTY_COPY[type].hint}
+            required
+            before={before}
+          />
+        </div>
+      )}
+    </section>
+  );
+}
+
+/* the Parar button of both layouts (and Omni's stop_claude) */
+async function stopFor(id: string, setStopping: (v: boolean) => void) {
+  setStopping(true);
+  const r = await request(api.sessions[":id"].stop.$post({ param: { id: enc(id) }, json: {} }));
+  setStopping(false);
+  return r.ok ? { ok: true, output: r.output } : { ok: false, error: r.error };
+}
+
+/* `chat`: the editor's chat mode; else the session block (state, live log, last answer, reply box) */
+export function SessionPanel({
+  type,
+  target,
+  before,
+  chat,
+}: {
+  type: SessionType;
+  target: string;
+  before?: Before;
+  chat?: boolean;
+}) {
+  if (chat) return <SessionChat type={type} target={target} before={before} />;
+  return <SessionPanelBlock type={type} target={target} before={before} />;
+}
+
+function SessionPanelBlock({ type, target, before }: { type: SessionType; target: string; before?: Before }) {
+  const s = useSessionFor(type, target);
+  const now = useNow();
+  const [showAll, setShowAll] = useState(false);
+  const [stopping, setStopping] = useState(false);
+  const [open, setOpen] = useState(false);
+  const section = useRef<HTMLElement>(null);
+  const running = s?.state === "running";
+  useOmniClaude(type, target, {
+    reveal: () => {
+      if (!s) setOpen(true);
+      section.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    },
+    state: () => ({ state: s?.state ?? "none", now: s?.now ?? null, turns: s?.turns ?? 0 }),
+    ...(running ? { stop: () => stopFor(s!.id, setStopping) } : {}),
+  });
+
+  if (!s) {
+    return (
+      <section ref={section} className="claude empty-claude">
+        <header className="claude-top">
+          <span className="claude-mark">
+            <AgentMark /> Agente
+          </span>
+          <span className="subtle">{EMPTY_COPY[type].none}</span>
+          {!open && type !== "edit" && (
+            <button className="button small push-end" onClick={() => setOpen(true)}>
+              <ChatCircleText className="ic" /> {EMPTY_COPY[type].label}
+            </button>
+          )}
+        </header>
+        {/* the edit chat opens with the box already: that is its job */}
+        {(open || type === "edit") && (
+          <ReplyBox
+            type={type}
+            target={target}
+            label={EMPTY_COPY[type].label}
+            hint={EMPTY_COPY[type].hint}
+            required={type !== "video"}
+            before={before}
+          />
+        )}
+      </section>
+    );
+  }
+
+  const st = SESSION_STATE[s.state];
+  const result = s.turn?.result;
+  const stop = () => stopFor(s.id, setStopping);
+  return (
+    <section ref={section} className={`claude ${s.state}`}>
+      <header className="claude-top">
+        <span className="claude-mark">
+          <AgentMark /> Agente
+        </span>
+        <Badge variant={st.variant}>{st.text}</Badge>
+        <span className="subtle">
+          {running
+            ? `Turno ${s.turn?.n} há ${formatElapsed(now - (toMs(s.turn?.started_at) ?? now))}`
+            : `${s.turns} ${s.turns === 1 ? "turno" : "turnos"} · ${timeAgo(s.activity)}`}
+          {costLabel(s)}
+        </span>
+        <span className="subtle mono claude-id" title={`claude --resume ${s.id}`}>
+          {s.id.slice(0, 8)}
+        </span>
+        {running && (
+          <button className="button small" disabled={stopping} onClick={stop}>
+            <Stop className="ic" /> {stopping ? "Parando…" : "Parar"}
+          </button>
+        )}
+        {running && <AgentWalking className="in-corner" />}
+      </header>
+
+      {running && (
+        <>
+          {s.now && <p className="claude-now">{s.now}</p>}
+          <LogStream key={`${s.id}-${s.turns}`} id={s.id} src={`/api/sessions/${s.id}/log`} height={360} />
+        </>
+      )}
+
+      {!running && (
+        <>
+          {result && (
+            <div className="claude-line">
+              <Markdown text={result.text} />
+            </div>
+          )}
+          {s.state === "interrupted" && (
+            <p className="note">
+              O turno parou no meio, sem resposta final (o claude foi encerrado ou não abriu). Veja a sessão abaixo e
+              mande ele continuar.
+            </p>
+          )}
+          {!!result?.denied.length && (
+            <div className="claude-denied">
+              <strong>Negado por falta de permissão ({result.denied.length})</strong>
+              <ul>
+                {result.denied.map((n, i) => (
+                  <li key={i}>
+                    <code>{n}</code>
+                  </li>
+                ))}
+              </ul>
+              <p className="hint">
+                Para liberar, acrescente a regra em <code>studio.claude.allow</code> no omnivideo.config.json e responda
+                pedindo para tentar de novo.
+              </p>
+            </div>
+          )}
+          <ReplyBox
+            type={type}
+            target={target}
+            label={type === "edit" ? "Editar" : "Responder"}
+            hint={
+              type === "edit"
+                ? EMPTY_COPY.edit.hint
+                : "Responda ao agente: ajuste, decisão, ou só “siga”. A mesma sessão continua, com tudo o que ele já sabe."
+            }
+            required={s.state === "stopped" || type === "edit"}
+            before={before}
+          />
+          <button className="subtle-link" onClick={() => setShowAll(!showAll)}>
+            {showAll ? "Esconder a sessão" : "Ver a sessão inteira"}
+          </button>
+          {showAll && <LogStream key={`${s.id}-${s.turns}`} id={s.id} src={`/api/sessions/${s.id}/log`} height={480} />}
+        </>
+      )}
+    </section>
+  );
+}

package/studio/web/components/SettingRow.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+/* a settings row: label (and help) on the left, the field on the right */
+export function SettingRow({ label, help, children }: { label: string; help?: ReactNode; children: ReactNode }) {
+  return (
+    <div className="setting">
+      <div className="setting-label">
+        <span>{label}</span>
+        {help && <small>{help}</small>}
+      </div>
+      <div className="setting-field">{children}</div>
+    </div>
+  );
+}

package/studio/web/components/SettingsCategorySkeleton.tsx

@@ -0,0 +1,25 @@
+/* a settings category before the settings arrive: header and label + field rows */
+
+import { Skeleton } from "./ui/skeleton";
+
+export function SettingsCategorySkeleton() {
+  return (
+    <section className="category" aria-busy="true" aria-label="Carregando as configurações">
+      <header className="category-header">
+        <Skeleton style={{ height: 28, width: 220 }} />
+        <Skeleton className="row" style={{ width: "60%", marginTop: 8 }} />
+      </header>
+      {Array.from({ length: 4 }, (_, i) => (
+        <div key={i} className="setting">
+          <div className="setting-label">
+            <Skeleton className="row" style={{ width: 110 }} />
+            <Skeleton className="row" style={{ width: "90%", height: 12 }} />
+          </div>
+          <div className="setting-field">
+            <Skeleton style={{ height: 36, width: "100%", maxWidth: 360, borderRadius: "var(--el-radius-control)" }} />
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}

package/studio/web/components/SidePanel.tsx

@@ -0,0 +1,77 @@
+/* Right sidebar that starts collapsed. Collapsed, it is a floating tab in the corner; open, the
+   page loses its width (class `with-panel` on the page) and the sidebar takes the side, without
+   covering the content. The choice is remembered in this browser (hooks/useSidePanel). */
+
+import { useEffect, type ReactNode } from "react";
+import { ArrowRight, X } from "./icons";
+
+export function SidePanel({
+  open,
+  onToggle,
+  title,
+  subtitle,
+  tab,
+  status = "",
+  tabLabel,
+  lockEscape = false,
+  floatingTab = true,
+  children,
+}: {
+  open: boolean;
+  onToggle: (open: boolean) => void;
+  title: string;
+  subtitle?: string;
+  tab: string /* the floating tab's second line */;
+  status?: string /* class `process-status <status>`: the tab color */;
+  tabLabel?: string;
+  lockEscape?: boolean /* a drawer open on top keeps Esc */;
+  /* false: collapsed, nothing floats (the page opens it from its own button; the corner is Omni's) */
+  floatingTab?: boolean;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    if (!open || lockEscape) return;
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onToggle(false);
+    };
+    window.addEventListener("keydown", esc);
+    return () => window.removeEventListener("keydown", esc);
+  }, [open, lockEscape]);
+
+  if (!open) {
+    if (!floatingTab) return null;
+    return (
+      <button
+        type="button"
+        className={`panel-tab process-status ${status}`}
+        onClick={() => onToggle(true)}
+        title={`Abrir: ${tabLabel ?? title}`}
+      >
+        <span className="process-mark" />
+        <span className="panel-tab-text">
+          <b>{title}</b>
+          <small>{tab}</small>
+        </span>
+        <ArrowRight className="ic" style={{ transform: "rotate(180deg)" }} />
+      </button>
+    );
+  }
+  return (
+    <aside className="process-panel" aria-label={title}>
+      <header className="process-panel-top">
+        <b>{title}</b>
+        {subtitle && <span className="subtle">{subtitle}</span>}
+        <button
+          type="button"
+          className="mini-button"
+          onClick={() => onToggle(false)}
+          aria-label={`Recolher: ${title}`}
+          title="Recolher (Esc)"
+        >
+          <X />
+        </button>
+      </header>
+      {children}
+    </aside>
+  );
+}