@crievo/omni 0.1.1 → 0.1.3

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

@@ -1,50 +1,22 @@
-/* Getting started: the docs/onboarding.md guide, one step per section, each with what the machine
-   already has (tools/setup.mjs check) and the shortcut to the screen where it gets solved. The text
-   is the guide's: changed there, changes here. Opens on the first missing step. */
+/* Getting started: the docs/onboarding.md guide, one step per section. On top, "Este computador": what
+   the CLI is still preparing on this Mac, live (the page asks again every 5 s until it's ready). Below,
+   the steps that keep the user busy meanwhile (voice, platforms, style, first video), each with its
+   state and the shortcut to the screen where it gets solved. The text is the guide's: changed there,
+   changes here. Opens on the first missing step. */
 
 import { useEffect, useState, type ReactNode } from "react";
-import { Link } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { useOnboarding } from "../../hooks/useOnboarding";
+import { useSettings } from "../../hooks/useSettings";
+import { invalidate, queryKeys } from "../../lib/query-client";
 import { Badge } from "../../components/ui/badge";
 import { Skeleton } from "../../components/ui/skeleton";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion";
 import { Markdown } from "../../components/Markdown";
-import { ArrowClockwise, Check, Gear, Microphone, Plug, Plus, Sparkle, Stack, X } from "../../components/icons";
+import { CloneVoiceDialog } from "../../components/CloneVoiceDialog";
+import { ArrowClockwise, Check, Gear, Microphone, Plug, Plus, Stack, X } from "../../components/icons";
 import type { OnboardingCheck, OnboardingStep } from "../../types/api";
-
-/* where each step gets solved in the studio */
-const STEP_ACTIONS: Record<string, ReactNode> = {
-  claude: (
-    <Link to="/settings/$category" params={{ category: "agent" }} className="button">
-      <Sparkle className="ic" /> Configurações → Agente de IA
-    </Link>
-  ),
-  voice: (
-    <>
-      <Link to="/settings/$category" params={{ category: "providers" }} className="button">
-        <Gear className="ic" /> Provedores de voz
-      </Link>
-      <Link to="/settings/$category" params={{ category: "voice" }} className="button">
-        <Microphone className="ic" /> Clonar a minha voz
-      </Link>
-    </>
-  ),
-  reference: (
-    <Link to="/styles" className="button">
-      <Stack className="ic" /> Abrir Estilos visuais
-    </Link>
-  ),
-  "first-video": (
-    <Link to="/new" className="button primary">
-      <Plus className="ic" /> Criar vídeo
-    </Link>
-  ),
-  publish: (
-    <Link to="/settings/$category" params={{ category: "platforms" }} className="button">
-      <Plug className="ic" /> Conectar as plataformas
-    </Link>
-  ),
-};
+import { ComputerCard } from "./components/ComputerCard";
 
 const STEP_MARK: Record<OnboardingCheck["state"], ReactNode> = {
   ok: <Check weight="bold" />,
@@ -54,8 +26,9 @@ const STEP_MARK: Record<OnboardingCheck["state"], ReactNode> = {
 
 function stepBadge(s: OnboardingStep) {
   if (s.state === "ok") return <Badge variant="ok">Pronto</Badge>;
+  if (s.optional) return <Badge variant="neutral">Opcional</Badge>;
   if (s.state === "missing") return <Badge variant="error">Falta</Badge>;
-  if (s.state === "warning") return <Badge variant="warning">{s.optional ? "Opcional" : "Atenção"}</Badge>;
+  if (s.state === "warning") return <Badge variant="warning">Atenção</Badge>;
   return null;
 }
 
@@ -64,17 +37,60 @@ const withoutImages = (md: string) => md.replace(/!\[[^\]]*\]\([^)]*\)\n?/g, "")
 
 export function GettingStartedPage() {
   const { onboarding: d, error: loadError, checking, reload } = useOnboarding();
+  const { settings, reload: reloadSettings } = useSettings();
+  const navigate = useNavigate();
+  const [cloning, setCloning] = useState(false);
   const [open, setOpen] = useState<string>("");
+  const computerStep = d?.steps.find(s => s.id === "computer");
+  const steps = d?.steps.filter(s => s.id !== "computer") ?? [];
   /* opens on the first missing step; checking again doesn't close what you opened */
   useEffect(() => {
-    if (d) setOpen(o => o || (d.steps.find(s => s.state === "missing")?.id ?? ""));
+    if (d)
+      setOpen(o => o || (d.steps.find(s => s.id !== "computer" && !s.optional && s.state === "missing")?.id ?? ""));
   }, [d]);
+  useEffect(() => {
+    document.title = "Primeiros passos · Omni";
+  }, []);
   const error = loadError ?? d?.error ?? null;
 
   const required = d?.steps.filter(s => !s.optional) ?? [];
   const ready = required.filter(s => s.state === "ok" || s.state === "warning").length;
   const pct = required.length ? Math.round((ready / required.length) * 100) : 0;
 
+  /* where each step gets solved in the studio */
+  const actions: Record<string, ReactNode> = {
+    "voice-key": (
+      <Link to="/settings/$category" params={{ category: "providers" }} className="button">
+        <Gear className="ic" /> Provedores de voz
+      </Link>
+    ),
+    "voice-clone": (
+      <button type="button" className="button" onClick={() => setCloning(true)} disabled={!settings}>
+        <Microphone className="ic" /> Clonar a minha voz
+      </button>
+    ),
+    "voice-default": (
+      <Link to="/voice" className="button">
+        <Microphone className="ic" /> Perfil de voz
+      </Link>
+    ),
+    platforms: (
+      <Link to="/settings/$category" params={{ category: "platforms" }} className="button">
+        <Plug className="ic" /> Conectar as plataformas
+      </Link>
+    ),
+    style: (
+      <Link to="/styles" className="button">
+        <Stack className="ic" /> Abrir Estilos visuais
+      </Link>
+    ),
+    "first-video": (
+      <Link to="/new" className="button primary">
+        <Plus className="ic" /> Criar vídeo
+      </Link>
+    ),
+  };
+
   return (
     <div className="page onboarding">
       <header className="header">
@@ -87,7 +103,7 @@ export function GettingStartedPage() {
           </span>
         )}
         <span className="push-end" />
-        <button className="button" onClick={() => reload(true)} disabled={checking}>
+        <button type="button" className="button" onClick={() => reload(true)} disabled={checking}>
           <ArrowClockwise className="ic" /> {checking ? "Conferindo…" : "Conferir de novo"}
         </button>
       </header>
@@ -106,37 +122,33 @@ export function GettingStartedPage() {
       {!d && !error && (
         <div
           aria-busy="true"
-          aria-label="Conferindo a máquina"
+          aria-label="Conferindo o computador"
           style={{ display: "flex", flexDirection: "column", gap: 10 }}
         >
           <Skeleton className="row" style={{ width: "70%" }} />
-          <Skeleton className="row" style={{ width: "55%" }} />
-          {Array.from({ length: 8 }, (_, i) => (
-            <Skeleton key={i} style={{ height: 48, width: "100%", marginTop: i ? 0 : 6 }} />
+          <Skeleton style={{ height: 180, width: "100%", marginTop: 6 }} />
+          {Array.from({ length: 6 }, (_, i) => (
+            <Skeleton key={i} style={{ height: 48, width: "100%" }} />
           ))}
         </div>
       )}
       {d && (
         <>
           <Markdown text={withoutImages(d.intro)} />
+          {d.computer && <ComputerCard computer={d.computer} markdown={computerStep?.markdown ?? ""} />}
           {d.ready && (
             <div className="onboarding-ready">
               <Check weight="bold" className="ic" />
               <span>
-                <b>Tudo pronto para o primeiro vídeo.</b> Publicar nas redes fica para depois, no passo 8.
+                <b>Tudo pronto para o primeiro vídeo.</b> Conectar as redes pode ficar para depois.
               </span>
               <Link to="/new" className="button primary">
                 <Plus className="ic" /> Criar vídeo
               </Link>
             </div>
           )}
-          {!d.checked && (
-            <p className="warning">
-              Não deu para conferir a máquina (tools/setup.mjs check). Os passos abaixo valem do mesmo jeito.
-            </p>
-          )}
           <Accordion type="single" collapsible value={open} onValueChange={setOpen} className="onboarding-steps">
-            {d.steps.map((s, i) => (
+            {steps.map((s, i) => (
               <AccordionItem key={s.id} value={s.id} className={`onboarding-step ${s.state ?? ""}`}>
                 <AccordionTrigger>
                   <span className={`onboarding-mark ${s.state ?? ""}`}>
@@ -157,18 +169,32 @@ export function GettingStartedPage() {
                       ))}
                     </ul>
                   )}
-                  {STEP_ACTIONS[s.id] && <div className="actions onboarding-actions">{STEP_ACTIONS[s.id]}</div>}
+                  {actions[s.id] && <div className="actions onboarding-actions">{actions[s.id]}</div>}
                   <Markdown text={s.markdown} />
                 </AccordionContent>
               </AccordionItem>
             ))}
           </Accordion>
-          <p className="hint">
-            Este guia é o <code>docs/onboarding.md</code> do repositório. No terminal,{" "}
-            <code>node tools/setup.mjs check</code> faz a mesma conferência.
-          </p>
         </>
       )}
+      {cloning && settings && (
+        <CloneVoiceDialog
+          settings={settings}
+          reload={reloadSettings}
+          onClose={() => setCloning(false)}
+          onAlreadyHave={() => {
+            setCloning(false);
+            void navigate({ to: "/voice" });
+          }}
+          onCreate={warnings => {
+            setCloning(false);
+            reloadSettings();
+            void invalidate(queryKeys.onboarding);
+            /* a provider that didn't create the clone gets fixed in the voice's editor */
+            if (warnings.length) void navigate({ to: "/voice" });
+          }}
+        />
+      )}
     </div>
   );
 }

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

@@ -1,6 +1,7 @@
 /* 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. */
+   until it resets and the session carries on in the next. With no list saved, the one account is the Claude
+   Code this machine uses; when it has no login there, the screen asks for its folder. */
 
 import { useEffect, useState } from "react";
 import { useSaveAction } from "../../../hooks/useSaveAction";
@@ -16,7 +17,7 @@ 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 SUGGESTED_DIR: Record<AgentProvider, string> = { claude: "~/.claude", codex: "~/.codex" };
 
 const at = (ms: number) =>
   new Date(ms).toLocaleString("pt-BR", { weekday: "short", hour: "2-digit", minute: "2-digit" });
@@ -34,6 +35,7 @@ export function AgentAccounts({ agents, onSave }: { agents: AgentsSettings; onSa
   const [list, setList] = useState(initial);
   const [adding, setAdding] = useState<AgentProvider | null>(null);
   const [newDir, setNewDir] = useState("");
+  const [claudeDir, setClaudeDir] = useState("");
   const { result, saving, save } = useSaveAction(onSave);
   const login = useSaveAction(onSave);
   useEffect(() => setList(initial()), [JSON.stringify(agents.accounts)]);
@@ -78,6 +80,13 @@ export function AgentAccounts({ agents, onSave }: { agents: AgentsSettings; onSa
     const ok = await store([...list, { id: "", provider: adding, dir: newDir.trim(), label: "", enabled: true }]);
     if (ok) setAdding(null);
   };
+  /* the default account without a login: the user's Claude Code lives in another folder */
+  const own = agents.accounts.length === 1 && agents.accounts[0].implicit && !agents.accounts[0].login;
+  const useClaudeDir = async () => {
+    if (!claudeDir.trim()) return;
+    const ok = await store([{ id: "", provider: "claude", dir: claudeDir.trim(), label: "", enabled: true }]);
+    if (ok) setClaudeDir("");
+  };
 
   return (
     <SettingRow
@@ -90,6 +99,24 @@ export function AgentAccounts({ agents, onSave }: { agents: AgentsSettings; onSa
         </>
       }
     >
+      {own && (
+        <div className="setting-row agent-add agent-missing">
+          <small className="warning">
+            Não achei o login do Claude Code em <code>{agents.accounts[0].dir}</code>. Se ele usa outra pasta (a do{" "}
+            <code>CLAUDE_CONFIG_DIR</code>), coloque ela aqui; se é essa mesma, use Entrar.
+          </small>
+          <input
+            className="mono"
+            value={claudeDir}
+            onChange={e => setClaudeDir(e.target.value)}
+            aria-label="Pasta do Claude Code"
+            placeholder="~/.claude-outra"
+          />
+          <button className="button primary" disabled={saving || !claudeDir.trim()} onClick={useClaudeDir}>
+            Usar esta pasta
+          </button>
+        </div>
+      )}
       <div className="claude-options agent-accounts">
         {agents.accounts.map((a, i) => {
           const limited = a.limited_until && a.limited_until > Date.now();
@@ -204,7 +231,7 @@ export function AgentAccounts({ agents, onSave }: { agents: AgentsSettings; onSa
       )}
       <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.
+        Codex). Sem nenhuma conta salva, vale o Claude Code deste computador.
         {!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} />

package/studio/web/styles/pages/getting-started.css

@@ -164,3 +164,49 @@
     padding-left: 16px;
   }
 }
+
+/* --- "Este computador": what the CLI is still preparing, live -------------------------------- */
+.onboarding-computer {
+  margin: 16px 0 4px;
+  padding: 14px 16px 16px;
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.onboarding-computer.ok {
+  background: var(--ok-bg);
+}
+.onboarding-computer > header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.onboarding-computer h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+.onboarding-computer > p {
+  margin: 0 0 12px;
+  font-size: 13px;
+}
+.onboarding-computer .badge .spinning {
+  width: 10px;
+  height: 10px;
+  border-width: 1.5px;
+}
+.onboarding-computer .onboarding-items li.preparing .onboarding-item-mark {
+  background: none;
+}
+.onboarding-computer .onboarding-items li.preparing .spinning {
+  width: 12px;
+  height: 12px;
+}
+.onboarding-ask {
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--warning-bg);
+}
+.onboarding-ask q {
+  font-weight: 600;
+}

package/studio/web/styles/pages/settings/shell.css

@@ -359,3 +359,7 @@
   flex: 1;
   min-width: 0;
 }
+/* the default Claude Code without a login: the sentence above the folder field */
+.agent-missing small {
+  flex-basis: 100%;
+}

package/tools/lib/agents.mjs

@@ -8,20 +8,28 @@
      a session stays on the account it runs on while that one is free.
    - Limit: an account that hits its usage limit is set aside until it resets
      (`.accounts/state.json`), and the work goes on in the next free one.
-   - ~/.claude (Claude Code's default account, which may be the work one) is
-     refused here, whatever the config says.
+   - Empty list: the Claude Code this machine uses, the folder the plugin's hook
+     recorded (claude-settings.mjs), else ~/.claude. Without a login there the
+     studio says so and the user puts the right folder in Settings. A machine
+     that must stay off ~/.claude (a work account) lists its accounts.
+   - ~/.claude is Claude Code's own folder: its login is ~/.claude.json and the
+     child runs without CLAUDE_CONFIG_DIR (set to it, Claude Code looks for
+     another keychain entry and finds no login).
    ============================================================================ */
 
 import { cpSync, existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { delimiter, join, resolve } from "node:path";
+import { DEFAULT_CLAUDE_DIR, recordedClaudeDir } from "./claude-settings.mjs";
 
 export const PROVIDERS = ["claude", "codex"];
 export const PROVIDER_LABEL = { claude: "Claude", codex: "Codex" };
-/* the one dir no account may use */
-export const FORBIDDEN_DIR = join(homedir(), ".claude");
-/* before `agents` existed, the studio only ran here */
-export const DEFAULT_ACCOUNTS = [{ id: "claude-personal", provider: "claude", dir: "~/.claude-personal" }];
+/* with no list: the Claude Code this machine uses */
+export const defaultAccounts = () => [
+  { id: "claude", provider: "claude", dir: recordedClaudeDir() ?? DEFAULT_CLAUDE_DIR },
+];
+/* Claude Code's own folder, which runs without CLAUDE_CONFIG_DIR */
+const isDefaultClaude = a => a.provider === "claude" && expandHome(a.dir) === DEFAULT_CLAUDE_DIR;
 /* the Codex CLI the ChatGPT app ships, when there is no `codex` on the PATH */
 export const CODEX_APP_BIN = "/Applications/ChatGPT.app/Contents/Resources/codex-cli/bin/codex";
 export const CODEX_DEFAULTS = { model: "gpt-6-luna", effort: "medium", sandbox: "auto" };
@@ -70,8 +78,6 @@ export function accountProblem(a) {
   if (!PROVIDERS.includes(a?.provider)) return `provedor desconhecido: ${a?.provider}`;
   if (!String(a.dir ?? "").trim()) return "falta a pasta da conta";
   const dir = expandHome(a.dir);
-  if (dir === FORBIDDEN_DIR || dir.startsWith(`${FORBIDDEN_DIR}/`))
-    return "o ~/.claude é a conta padrão do Claude Code (pode ser a do trabalho): o omnivideo não roda nela";
   if (dir === homedir()) return "a pasta da conta não pode ser a home";
   return null;
 }
@@ -84,12 +90,13 @@ const slug = s =>
     .replace(/^-|-$/g, "") || "conta";
 
 /**
- * The accounts in order, normalized: `dir` absolute, `id` unique, the forbidden ones left out.
- * @returns {{ id: string, provider: "claude"|"codex", dir: string, label: string, enabled: boolean }[]}
+ * The accounts in order, normalized: `dir` absolute, `id` unique, the invalid ones left out. `implicit`:
+ * the default account, from an empty list.
+ * @returns {{ id: string, provider: "claude"|"codex", dir: string, label: string, enabled: boolean, implicit: boolean }[]}
  */
 export function accountsOf(cfg) {
-  const raw =
-    Array.isArray(cfg?.agents?.accounts) && cfg.agents.accounts.length ? cfg.agents.accounts : DEFAULT_ACCOUNTS;
+  const listed = Array.isArray(cfg?.agents?.accounts) && cfg.agents.accounts.length > 0;
+  const raw = listed ? cfg.agents.accounts : defaultAccounts();
   const seen = new Set();
   const out = [];
   for (const a of raw) {
@@ -105,6 +112,7 @@ export function accountsOf(cfg) {
       dir,
       label: String(a.label ?? "").trim() || tildify(dir),
       enabled: a.enabled !== false,
+      implicit: !listed,
     });
   }
   return out;
@@ -151,7 +159,8 @@ const jwtPayload = token => {
  */
 export function loginOf(a) {
   if (a.provider === "claude") {
-    const o = readJson(join(a.dir, ".claude.json"))?.oauthAccount;
+    const file = isDefaultClaude(a) ? join(homedir(), ".claude.json") : join(a.dir, ".claude.json");
+    const o = readJson(file)?.oauthAccount;
     if (!o) return null;
     const org =
       o.organizationName && o.organizationName !== `${o.emailAddress}'s Organization` ? o.organizationName : null;
@@ -171,6 +180,7 @@ export function loginOf(a) {
 /* the command that logs an account in, for the screen and the CLI hints */
 export function loginCommand(a, cfg) {
   const dir = tildify(a.dir);
+  if (isDefaultClaude(a)) return "claude auth login";
   return a.provider === "claude"
     ? `CLAUDE_CONFIG_DIR=${dir} claude auth login`
     : `CODEX_HOME=${dir} ${codexBin(cfg) === "codex" ? "codex" : `"${codexBin(cfg)}"`} login`;
@@ -194,6 +204,7 @@ export const binOf = (a, cfg) => (a.provider === "claude" ? claudeBin(cfg) : cod
 export function envFor(a, base = process.env, extra = {}) {
   const env = { ...base, ...extra };
   for (const k of INHERITED) delete env[k];
+  if (isDefaultClaude(a)) return env;
   if (a.provider === "claude") env.CLAUDE_CONFIG_DIR = a.dir;
   else env.CODEX_HOME = a.dir;
   return env;

package/tools/lib/claude-settings.mjs

@@ -3,15 +3,44 @@
    call `<cli> run …` through Bash, and their sibling files sit in a temporary folder outside the working
    one. Written only with the user's yes (the MCP's omni_allow_skills, after Claude asks, or `omni setup`).
 
-   The settings file is $CLAUDE_CONFIG_DIR/settings.json, else ~/.claude/settings.json. The rules are added
-   to permissions.allow; nothing else in the file changes. */
+   The settings file is settings.json in the Claude Code folder (claudeConfigDir). The rules are added to
+   permissions.allow; nothing else in the file changes.
+
+   The Claude Code folder is $CLAUDE_CONFIG_DIR, else the one `omni up --hook` recorded in ~/.omni/claude.json,
+   else ~/.claude. The hook runs inside the user's session, with its CLAUDE_CONFIG_DIR; the studio service
+   runs outside it and only knows the folder through that record. */
 
 import { existsSync, mkdirSync, readFileSync, realpathSync, renameSync, writeFileSync } from "node:fs";
 import { homedir, tmpdir } from "node:os";
 import { dirname, join } from "node:path";
 import { CLI_COMMAND } from "./cli.mjs";
+import { OMNI_DIR } from "./deps.mjs";
+
+/* Claude Code's own folder when CLAUDE_CONFIG_DIR is unset (its login then sits in ~/.claude.json) */
+export const DEFAULT_CLAUDE_DIR = join(homedir(), ".claude");
+const RECORD = join(OMNI_DIR, "claude.json");
+
+/** the folder the hook recorded, or null  @returns {string | null} */
+export function recordedClaudeDir() {
+  try {
+    const dir = JSON.parse(readFileSync(RECORD, "utf8")).config_dir;
+    return typeof dir === "string" && dir ? dir : null;
+  } catch {
+    return null;
+  }
+}
+
+/** records the session's Claude Code folder (on the hook only: a terminal may lack the variable)
+ *  @returns {boolean} whether it changed */
+export function recordClaudeDir(dir = process.env.CLAUDE_CONFIG_DIR || DEFAULT_CLAUDE_DIR) {
+  if (recordedClaudeDir() === dir) return false;
+  mkdirSync(OMNI_DIR, { recursive: true });
+  writeFileSync(RECORD, `${JSON.stringify({ config_dir: dir }, null, 2)}\n`);
+  return true;
+}
 
-export const settingsFile = () => join(process.env.CLAUDE_CONFIG_DIR || join(homedir(), ".claude"), "settings.json");
+export const claudeConfigDir = () => process.env.CLAUDE_CONFIG_DIR || recordedClaudeDir() || DEFAULT_CLAUDE_DIR;
+export const settingsFile = () => join(claudeConfigDir(), "settings.json");
 
 /** the rules, for this CLI command and this machine's temporary folder (both spellings of it on macOS) */
 export function skillRules(cli = CLI_COMMAND) {