@crievo/omni 0.1.2 → 0.1.4

package/studio/web/pages/BenchoPage/registry.ts

@@ -0,0 +1,174 @@
+/* The Bencho ports shown on the /bencho gallery: one entry per component (components/bencho/<Name>.tsx, styles in
+   styles/components/bencho/<id>.css). `id` is the block's id on bencho.dev; `fill` and `glass` are what the site's stage
+   gives it (the card color it draws with and whether it reads the glass tokens). */
+
+import { lazy, type ComponentType, type LazyExoticComponent } from "react";
+
+export type BenchoEntry = {
+  id: string;
+  title: string;
+  description: string;
+  category: string;
+  fill: boolean;
+  glass: boolean;
+  Component: LazyExoticComponent<ComponentType>;
+};
+
+const load = (loader: () => Promise<Record<string, ComponentType>>, name: string) =>
+  lazy(() => loader().then(m => ({ default: m[name] as ComponentType })));
+
+export const BENCHO: BenchoEntry[] = [
+  {
+    id: "pull",
+    title: "Puxar para atualizar",
+    description: "Puxe o cartão para baixo: ele estica e, passando da linha, solta e atualiza.",
+    category: "Drag",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/PullToRefresh"), "PullToRefresh"),
+  },
+  {
+    id: "liq-toggle",
+    title: "Switch líquido",
+    description: "Uma gota que se alonga ao cruzar o trilho; clique ou arraste.",
+    category: "Press",
+    fill: false,
+    glass: true,
+    Component: load(() => import("../../components/bencho/LiquidToggle"), "LiquidToggle"),
+  },
+  {
+    id: "checklist",
+    title: "Lista de tarefas",
+    description: "A caixa enche, o check se desenha e o texto é riscado.",
+    category: "Press",
+    fill: true,
+    glass: true,
+    Component: load(() => import("../../components/bencho/Checklist"), "Checklist"),
+  },
+  {
+    id: "sound",
+    title: "Tocando agora",
+    description: "Uma barra de reprodução que abre em player completo e volta como um só objeto.",
+    category: "Press",
+    fill: true,
+    glass: true,
+    Component: load(() => import("../../components/bencho/NowPlaying"), "NowPlaying"),
+  },
+  {
+    id: "dock",
+    title: "Dock com lupa",
+    description: "Os ícones crescem em direção ao cursor, o mais próximo cresce mais.",
+    category: "Hover",
+    fill: true,
+    glass: true,
+    Component: load(() => import("../../components/bencho/MagnifyDock"), "MagnifyDock"),
+  },
+  {
+    id: "slosh",
+    title: "Slider líquido",
+    description: "O preenchimento tem peso: arraste rápido e ele balança além da alça.",
+    category: "Slide",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/SloshSlider"), "SloshSlider"),
+  },
+  {
+    id: "liq-create",
+    title: "Menu de criar",
+    description: "Aperte a pílula e ela se abre no menu de criar.",
+    category: "Press",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/CreateMenu"), "CreateMenu"),
+  },
+  {
+    id: "picker",
+    title: "Atribuir pessoas",
+    description: "Escolha pessoas numa lista e os rostos se empilham na pílula.",
+    category: "Select",
+    fill: true,
+    glass: true,
+    Component: load(() => import("../../components/bencho/AssigneePicker"), "AssigneePicker"),
+  },
+  {
+    id: "slide-confirm",
+    title: "Deslizar para confirmar",
+    description: "Empurre a alça; passando da marca, ela termina sozinha.",
+    category: "Drag",
+    fill: true,
+    glass: true,
+    Component: load(() => import("../../components/bencho/SlideToConfirm"), "SlideToConfirm"),
+  },
+  {
+    id: "image-accordion",
+    title: "Acordeão de imagens",
+    description: "Passe o mouse numa imagem e ela abre enquanto as vizinhas cedem.",
+    category: "Hover",
+    fill: false,
+    glass: false,
+    Component: load(() => import("../../components/bencho/ImageAccordion"), "ImageAccordion"),
+  },
+  {
+    id: "action-node",
+    title: "Nó de ação",
+    description: "Um cartão de etapa com os controles dobrados no canto.",
+    category: "Hover",
+    fill: true,
+    glass: true,
+    Component: load(() => import("../../components/bencho/ActionNode"), "ActionNode"),
+  },
+  {
+    id: "generate",
+    title: "Gerar imagem",
+    description: "Aperte Gerar e a imagem se resolve sob o vidro, das formas largas aos detalhes.",
+    category: "Press",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/GenerateImage"), "GenerateImage"),
+  },
+  {
+    id: "one-time-code",
+    title: "Código de uso único",
+    description: "Vários campos que são um só: colar, preencher e apagar funcionam.",
+    category: "Type",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/OneTimeCode"), "OneTimeCode"),
+  },
+  {
+    id: "upload-dropzone",
+    title: "Envio por arrastar",
+    description: "Arraste um arquivo para a caixa; um grande demais é recusado.",
+    category: "Drag",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/UploadDropzone"), "UploadDropzone"),
+  },
+  {
+    id: "voice-note",
+    title: "Nota de voz",
+    description: "Segure para gravar a onda, deslize para a esquerda para descartar, solte para ouvir.",
+    category: "Press",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/VoiceNote"), "VoiceNote"),
+  },
+  {
+    id: "toast-stack",
+    title: "Pilha de avisos",
+    description: "Três avisos empilhados; aponte e eles se abrem em lista.",
+    category: "Hover",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/ToastStack"), "ToastStack"),
+  },
+  {
+    id: "stacked-bars",
+    title: "Barras empilhadas",
+    description: "Um mês de visitas em barras; um dia é destacado e o tooltip desliza junto.",
+    category: "Hover",
+    fill: true,
+    glass: false,
+    Component: load(() => import("../../components/bencho/StackedBars"), "StackedBars"),
+  },
+];

package/studio/web/pages/GettingStartedPage/components/ComputerCard.tsx

@@ -0,0 +1,102 @@
+/* "Este computador", on top of Getting started: what `omni up` is still preparing on this Mac, live.
+   Being on the page already means the login and the studio connection work (the hosted studio only
+   answers through this computer's runner). The four programs come from checkDeps: while one is
+   missing it reads "preparando…" (the CLI is downloading it; nothing for the user to do). The skills'
+   permission rules are written by Claude, on the user's yes, through the plugin's MCP: the studio only
+   says what to ask for. The Claude Code account is looked for where the plugin's hook found it, else
+   ~/.claude; without a login there, the user enters or gives the folder in Settings. */
+
+import { Link } from "@tanstack/react-router";
+import { Badge } from "../../../components/ui/badge";
+import { Markdown } from "../../../components/Markdown";
+import { Check, X } from "../../../components/icons";
+import { useRunner } from "../../../hooks/useRunner";
+import type { OnboardingComputer } from "../../../types/api";
+
+type Row = { id: string; title: string; value: string | null; detail?: string };
+
+export function ComputerCard({ computer: c, markdown }: { computer: OnboardingComputer; markdown: string }) {
+  const { hosted, name } = useRunner();
+  const rulesOk = c.dev || c.missing_rules.length === 0;
+  const programs: Row[] = [
+    { id: "ffmpeg", title: "ffmpeg", value: c.ffmpeg },
+    { id: "ffprobe", title: "ffprobe", value: c.ffprobe },
+    { id: "chrome", title: "Chrome sem janela", value: c.chrome },
+    { id: "python", title: "Python das ferramentas", value: c.python },
+    { id: "ytdlp", title: "yt-dlp", value: c.ytdlp },
+  ];
+  const state = !c.ready ? "preparing" : !c.agent.ok ? "agent" : rulesOk ? "ok" : "rules";
+  return (
+    <section className={`onboarding-computer ${state}`} aria-live="polite" aria-labelledby="computer-title">
+      <header>
+        <h2 id="computer-title">Este computador</h2>
+        {state === "ok" && <Badge variant="ok">Computador pronto</Badge>}
+        {state === "rules" && <Badge variant="warning">Falta liberar as skills</Badge>}
+        {state === "agent" && <Badge variant="warning">Falta a conta do Claude Code</Badge>}
+        {state === "preparing" && (
+          <Badge variant="running">
+            <span className="spinning" aria-hidden="true" /> Preparando…
+          </Badge>
+        )}
+      </header>
+      {state === "preparing" && (
+        <p className="subtle">
+          O OmniVideo está baixando o que falta. Leva alguns minutos e não precisa fazer nada: siga pelos passos abaixo
+          enquanto isso.
+        </p>
+      )}
+      <ul className="onboarding-items">
+        <li className="ok">
+          <span className="onboarding-item-mark">
+            <Check weight="bold" />
+          </span>
+          <b>Login e studio conectados</b>
+          <span className="subtle">
+            {hosted ? (name ? `conectado pelo ${name}` : "conectado") : "studio aberto neste computador"}
+          </span>
+        </li>
+        {programs.map(p => (
+          <li key={p.id} className={p.value ? "ok" : "preparing"}>
+            <span className="onboarding-item-mark">
+              {p.value ? <Check weight="bold" /> : <span className="spinning" aria-hidden="true" />}
+            </span>
+            <b>{p.title}</b>
+            <span className="subtle">{p.value ?? "preparando…"}</span>
+          </li>
+        ))}
+        <li className={c.agent.ok ? "ok" : "missing"}>
+          <span className="onboarding-item-mark">{c.agent.ok ? <Check weight="bold" /> : <X weight="bold" />}</span>
+          <b>Conta do Claude Code</b>
+          <span className="subtle">{c.agent.detail}</span>
+        </li>
+        <li className={rulesOk ? "ok" : "missing"}>
+          <span className="onboarding-item-mark">{rulesOk ? <Check weight="bold" /> : <X weight="bold" />}</span>
+          <b>Permissão das skills no Claude Code</b>
+          <span className="subtle">
+            {c.missing_rules.length === 0
+              ? "liberadas"
+              : c.dev
+                ? "repositório de desenvolvimento: as skills são as dele"
+                : "ainda não liberadas"}
+          </span>
+        </li>
+      </ul>
+      {!c.agent.ok && (
+        <p className="onboarding-ask">
+          Não achei o login do seu Claude Code. Se ele usa outra pasta, coloque ela em{" "}
+          <Link to="/settings/$category" params={{ category: "agent" }}>
+            Configurações → Agente de IA
+          </Link>
+          ; se é essa mesma, entre por lá.
+        </p>
+      )}
+      {!rulesOk && (
+        <p className="onboarding-ask">
+          No Claude Code, diga: <q>libere as skills do OmniVideo</q>. O Claude mostra as regras, pede o seu ok e grava.
+          Esta tela atualiza sozinha.
+        </p>
+      )}
+      {markdown && <Markdown text={markdown} />}
+    </section>
+  );
+}

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/NewVideoPage/index.tsx

@@ -3,7 +3,7 @@
    scene approvals); carousel goes up to the export; both, the video first and its carousel after. */
 
 import { useState } from "react";
-import { Link, useNavigate } from "@tanstack/react-router";
+import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 import { api, send } from "../../lib/api";
 import { useReferences } from "../../hooks/useReferences";
 import { useVoiceProfiles } from "../../hooks/useVoiceProfiles";
@@ -20,7 +20,11 @@ export function NewVideoPage() {
   const { references } = useReferences();
   const [request, setRequest] = useState("");
   const [format, setFormat] = useState("9:16");
-  const [deliverables, setDeliverables] = useState<Deliverable[]>(["video"]);
+  /* the sidebar's Criar menu opens this form with the carousel already checked (router history state, typed in Sidebar.tsx) */
+  const asked = useLocation({ select: l => l.state.deliverables });
+  const [deliverables, setDeliverables] = useState<Deliverable[]>(
+    asked?.length && asked.every(d => d === "video" || d === "carousel") ? asked : ["video"],
+  );
   const hasVideo = deliverables.includes("video");
   const [reference, setReference] = useState("");
   const { profiles, defaultId, reload: reloadProfiles } = useVoiceProfiles();

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

@@ -3,6 +3,7 @@
    which becomes an agent session (measure and write the guide). */
 
 import { useEffect, useState } from "react";
+import { useLocation } from "@tanstack/react-router";
 import { useReferences } from "../../hooks/useReferences";
 import { Plus } from "../../components/icons";
 import { NewReferenceForm } from "./components/NewReferenceForm";
@@ -11,7 +12,9 @@ import { ReferenceGridSkeleton } from "./components/ReferenceGridSkeleton";
 
 export function ReferencesPage() {
   const { references, error } = useReferences();
-  const [creating, setCreating] = useState(false);
+  /* the sidebar's Criar menu comes here with the new-style form already open (router history state, typed in Sidebar.tsx) */
+  const asked = useLocation({ select: l => l.state.creating === true });
+  const [creating, setCreating] = useState(asked);
   useEffect(() => {
     document.title = "Estilos visuais · Omni";
   }, []);

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} />