agent-hub-sdd 0.1.8 → 0.1.9

package/README.md

@@ -15,10 +15,10 @@ npm run app
 Pelo npm (precisa do Node 20+ no PATH):
 
 ```powershell
-npx --yes agent-hub-sdd@0.1.8
+npx --yes agent-hub-sdd@0.1.9
 ```
 
-Na primeira abertura a janela diz que está compilando. O **N** no canto é o Next.js em modo dev, não o app. Sem `@0.1.8`, o Windows pode reusar cache antigo.
+Na primeira abertura a janela diz que está compilando. O **N** no canto é o Next.js em modo dev, não o app. Sem `@0.1.9`, o Windows pode reusar cache antigo.
 
 Se ainda abrir a 0.1.2, ou se o npm disser `EBUSY` / `resource busy or locked`, o Next da tentativa antiga ainda está com o cache aberto. O `Stop-Process electron` não mata esse `node`:
 
@@ -27,13 +27,13 @@ Get-CimInstance Win32_Process | Where-Object {
   $_.CommandLine -and ($_.CommandLine -match 'agent-hub|_npx|next dev|43147')
 } | ForEach-Object { Stop-Process -Id $_.ProcessId -Force -ErrorAction SilentlyContinue }
 Remove-Item -Recurse -Force "$env:LOCALAPPDATA\npm-cache\_npx" -ErrorAction SilentlyContinue
-npx --yes agent-hub-sdd@0.1.8
+npx --yes agent-hub-sdd@0.1.9
 ```
 
 Instalar global evita o rename do `npx` nessa pasta:
 
 ```powershell
-npm install -g agent-hub-sdd@0.1.8
+npm install -g agent-hub-sdd@0.1.9
 agent-hub-sdd
 ```
 
@@ -76,7 +76,9 @@ O Hub não carrega skills, MCP, plugins, hooks nem regras. Quem carrega é a CLI
 
 ## Simulador
 
-Se a CLI pedida não estiver no `PATH`, o Hub responde no simulador e não edita o projeto.
+Se a CLI pedida (`agent` / `cursor-agent` ou `claude`) não estiver no `PATH`, o Hub **cai no Simulador**: respostas fictícias com prefixo `[mock]`, custo zero, disco intocado. A faixa âmbar e o selo **Simulador · Cursor** (ou Claude) deixam isso explícito — o hub não finge que a CLI está viva.
+
+Com a CLI da assinatura no PATH e login feito (`agent login` ou `claude auth login`), os turnos passam a ser reais. O Hub nunca envia chave de API.
 
 ## Dados
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-hub-sdd",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "license": "MIT",
   "author": "Agent Hub",

package/scripts/kill-hub.ps1

@@ -8,4 +8,4 @@ Get-CimInstance Win32_Process |
 Stop-Process -Name electron -Force
 $npx = Join-Path $env:LOCALAPPDATA "npm-cache\_npx"
 if (Test-Path $npx) { Remove-Item -Recurse -Force $npx }
-Write-Host "Cache do npx limpo. Rode: npx --yes agent-hub-sdd@0.1.8"
+Write-Host "Cache do npx limpo. Rode: npx --yes agent-hub-sdd@0.1.9"

package/src/app/gastos/page.tsx

@@ -7,5 +7,9 @@ export const dynamic = "force-dynamic";
 
 export default function GastosPage() {
   const events = listUsage();
-  return <SpendView events={events} agents={listAgents()} summary={aggregateSpend(events)} />;
+  return (
+    <div className="min-h-0 flex-1 overflow-auto">
+      <SpendView events={events} agents={listAgents()} summary={aggregateSpend(events)} />
+    </div>
+  );
 }

package/src/app/shell.css

@@ -1,7 +1,7 @@
 html, body {
   margin: 0;
   min-height: 100%;
-  background: #000;
+  background: #09090b;
   color: #f4f4f5;
   font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
 }
@@ -10,21 +10,23 @@ button, input, textarea { font: inherit; color: inherit; }
 button {
   cursor: pointer;
   background: #18181b;
-  border: 1px solid #27272a;
+  border: 1px solid #3f3f46;
   border-radius: 0.5rem;
-  padding: 0.25rem 0.6rem;
+  padding: 0.35rem 0.7rem;
 }
 input, textarea {
   background: #18181b;
-  border: 1px solid #27272a;
+  border: 1px solid #3f3f46;
   border-radius: 0.5rem;
-  padding: 0.35rem 0.55rem;
+  padding: 0.4rem 0.6rem;
 }
 .flex { display: flex; }
 .flex-col { flex-direction: column; }
 .flex-1 { flex: 1 1 0%; }
+.flex-wrap { flex-wrap: wrap; }
 .items-center { align-items: center; }
 .justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
 .min-h-0 { min-height: 0; }
 .min-h-dvh { min-height: 100dvh; }
 .min-w-0 { min-width: 0; }
@@ -33,22 +35,32 @@ input, textarea {
 .h-9 { height: 2.25rem; }
 .w-full { width: 100%; }
 .w-\[280px\] { width: 280px; }
+.w-\[300px\] { width: 300px; }
 .max-w-md { max-width: 28rem; }
 .max-w-\[280px\] { max-width: 280px; }
+.max-w-\[300px\] { max-width: 300px; }
 .shrink-0 { flex-shrink: 0; }
 .gap-1 { gap: 0.25rem; }
+.gap-1\.5 { gap: 0.375rem; }
 .gap-2 { gap: 0.5rem; }
 .gap-3 { gap: 0.75rem; }
 .overflow-hidden { overflow: hidden; }
 .overflow-auto { overflow: auto; }
 .grid { display: grid; }
 .hidden { display: none; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .border { border: 1px solid #27272a; }
 .border-r { border-right: 1px solid #27272a; }
 .border-b { border-bottom: 1px solid #27272a; }
+.border-t { border-top: 1px solid #27272a; }
 .border-zinc-800 { border-color: #27272a; }
-.bg-black { background: #000; }
+.bg-black { background: #09090b; }
+.bg-zinc-950 { background: #09090b; }
+.bg-zinc-900 { background: #18181b; }
+.bg-zinc-800 { background: #27272a; }
+.text-zinc-50 { color: #fafafa; }
 .text-zinc-100 { color: #f4f4f5; }
+.text-zinc-200 { color: #e4e4e7; }
 .text-zinc-300 { color: #d4d4d8; }
 .text-zinc-400 { color: #a1a1aa; }
 .text-zinc-500 { color: #71717a; }
@@ -57,17 +69,349 @@ input, textarea {
 .text-lg { font-size: 1.125rem; }
 .font-medium { font-weight: 500; }
 .font-semibold { font-weight: 600; }
+.p-2 { padding: 0.5rem; }
 .p-3 { padding: 0.75rem; }
 .p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
 .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
 .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
 .pr-8 { padding-right: 2rem; }
+.ml-auto { margin-left: auto; }
+.mb-1 { margin-bottom: 0.25rem; }
+.size-3 { width: 0.75rem; height: 0.75rem; }
+.size-3\.5 { width: 0.875rem; height: 0.875rem; }
+.rounded-md { border-radius: 0.375rem; }
 .rounded-lg { border-radius: 0.5rem; }
+.rounded-2xl { border-radius: 1rem; }
 .rounded-full { border-radius: 9999px; }
 .leading-6 { line-height: 1.5rem; }
 .text-center { text-align: center; }
+.text-left { text-align: left; }
+.size-2 { width: 0.5rem; height: 0.5rem; }
 .ah-drag { -webkit-app-region: drag; app-region: drag; }
 .ah-no-drag { -webkit-app-region: no-drag; app-region: no-drag; }
+
+.hub-sidebar {
+  background: #0a0a0a;
+  border-right: 1px solid #27272a;
+}
+.hub-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+}
+.hub-mark {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 0.2rem;
+  background: #f4f4f5;
+  box-shadow: 3px 3px 0 0 #52525b;
+}
+.hub-status {
+  border-radius: 0.6rem;
+  padding: 0.55rem 0.7rem;
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+.hub-status-mock {
+  background: rgba(245, 158, 11, 0.12);
+  color: #fde68a;
+  border: 1px solid rgba(245, 158, 11, 0.35);
+}
+.hub-status-live {
+  background: rgba(16, 185, 129, 0.1);
+  color: #a7f3d0;
+  border: 1px solid rgba(16, 185, 129, 0.28);
+}
+.hub-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid #3f3f46;
+  padding: 0.1rem 0.5rem;
+  font-size: 0.7rem;
+  color: #a1a1aa;
+}
+.hub-chip-on {
+  border-color: rgba(16, 185, 129, 0.4);
+  background: rgba(16, 185, 129, 0.12);
+  color: #6ee7b7;
+}
+.hub-chip-off {
+  color: #71717a;
+}
+.hub-chip-mock {
+  border-color: rgba(245, 158, 11, 0.45);
+  background: rgba(245, 158, 11, 0.12);
+  color: #fde68a;
+}
+.hub-agent {
+  border: 1px solid #27272a;
+  border-radius: 0.7rem;
+  margin-bottom: 0.5rem;
+  background: #0c0c0e;
+  overflow: hidden;
+}
+.hub-agent-title {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 0.5rem;
+}
+.hub-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+.hub-stage {
+  margin-left: auto;
+  font-size: 0.65rem;
+  color: #a1a1aa;
+  background: #18181b;
+  border: 1px solid #27272a;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  flex-shrink: 0;
+}
+.hub-home {
+  width: 100%;
+  max-width: 36rem;
+  display: grid;
+  gap: 1rem;
+}
+.hub-home h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+.hub-card-grid {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: 1fr;
+}
+.hub-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+  text-align: left;
+  background: #111113;
+  border: 1px solid #27272a;
+  border-radius: 0.75rem;
+  padding: 0.8rem 0.9rem;
+}
+.hub-card:hover {
+  border-color: #3f3f46;
+  background: #18181b;
+}
+.hub-banner-mock {
+  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
+  background: rgba(245, 158, 11, 0.1);
+  color: #fde68a;
+  padding: 0.6rem 1rem;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+.hub-kicker {
+  margin: 0;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #71717a;
+}
+.hub-card-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.hub-card-copy {
+  color: #a1a1aa;
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+.hub-topbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid #27272a;
+  padding: 0.7rem 1rem;
+  background: #0c0c0e;
+}
+.hub-composer {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  margin: 0.75rem;
+  padding: 0.55rem 0.6rem;
+  border: 1px solid #27272a;
+  border-radius: 1rem;
+  background: #111113;
+}
+.hub-msg {
+  max-width: 85%;
+  border-radius: 1rem;
+  padding: 0.55rem 0.85rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+.hub-msg-user {
+  margin-left: auto;
+  background: #27272a;
+  color: #fafafa;
+}
+.hub-msg-agent {
+  margin-right: auto;
+  background: #18181b;
+  color: #f4f4f5;
+  border: 1px solid #27272a;
+}
+.hub-msg-tool {
+  margin-right: auto;
+  max-width: 90%;
+  border-radius: 0.5rem;
+  border: 1px solid #27272a;
+  background: #09090b;
+  padding: 0.3rem 0.55rem;
+  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 1.25rem;
+  color: #a1a1aa;
+}
+.hub-msg-handoff {
+  margin-right: auto;
+  border-radius: 0;
+  border-left: 2px solid #fbbf24;
+  background: #18181b;
+  color: #f4f4f5;
+}
+.hub-msg-error {
+  margin-right: auto;
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  background: rgba(239, 68, 68, 0.1);
+  color: #fecaca;
+}
+.hub-empty-chat {
+  max-width: 32rem;
+  margin: 1.5rem auto 0.5rem;
+  display: grid;
+  gap: 0.4rem;
+  text-align: center;
+  color: #a1a1aa;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+.hub-empty-chat h2 {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: #fafafa;
+  letter-spacing: -0.03em;
+}
+.hub-session {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  overflow: hidden;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  font-size: 0.75rem;
+  color: #d4d4d8;
+}
+.hub-session:hover { background: #18181b; }
+.hub-session-active {
+  background: #27272a;
+  color: #fafafa;
+}
+.hub-session-tag {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.62rem;
+  color: #6ee7b7;
+}
+.hub-session-tag-err { color: #fca5a5; }
+.hub-quiet-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 0.75rem;
+  color: #a1a1aa;
+}
+.hub-quiet-btn:hover { color: #e4e4e7; }
+.hub-footer-link {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-shrink: 0;
+  padding: 0.85rem 1rem;
+  font-size: 0.875rem;
+  color: #a1a1aa;
+}
+.hub-footer-link:hover { color: #f4f4f5; }
+.hub-spend {
+  width: 100%;
+  max-width: 56rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+.hub-spend h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+.hub-stat-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr;
+}
+.hub-stat {
+  border: 1px solid #27272a;
+  border-radius: 0.85rem;
+  padding: 0.9rem 1rem;
+  background: #111113;
+}
+.hub-stat p {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #a1a1aa;
+}
+.hub-stat strong {
+  display: block;
+  margin-top: 0.35rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+.hub-table-wrap { overflow-x: auto; }
+@media (min-width: 640px) {
+  .hub-stat-grid { grid-template-columns: 1fr 1fr 1fr; }
+}
+@media (min-width: 700px) {
+  .hub-card-grid { grid-template-columns: 1fr 1fr; }
+}
 @media (min-width: 768px) {
   .md\:block { display: block; }
   .md\:hidden { display: none; }

package/src/components/agent-dialog.tsx

@@ -81,7 +81,7 @@ export function AgentDialog({
         <DialogHeader>
           <DialogTitle>{agent ? "Editar agente" : "Novo agente"}</DialogTitle>
           <DialogDescription>
-            Nome, etapa e harness definem como esta persona atua no workspace.
+            Nome, etapa e harness definem como esta persona atua no workspace. Simulador não chama CLI e não edita o disco.
           </DialogDescription>
         </DialogHeader>
         <form

package/src/components/chat-pane.tsx

@@ -1,13 +1,20 @@
 "use client";
 
 import { useEffect, useRef, type ReactNode } from "react";
+import { ArrowRightLeft, GitBranch } from "lucide-react";
 import { Composer } from "@/components/composer";
 import { MarkdownLite } from "@/components/markdown-lite";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { WorkspaceField } from "@/components/workspace-field";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { HARNESS_LABEL, STAGE_LABEL } from "@/lib/labels";
+import {
+  STAGE_LABEL,
+  clisMissing,
+  isHarnessSimulated,
+  liveHarnessLabel,
+  simulatedBanner,
+  type HarnessAvailability,
+} from "@/lib/labels";
 import { cn } from "@/lib/utils";
 import type { Agent, ChatMessage, Session } from "@/lib/types";
 
@@ -15,57 +22,90 @@ export type LiveSegment =
   | { id: string; kind: "assistant"; text: string }
   | { id: string; kind: "tool"; name: string; detail: string; status: "started" | "completed" };
 
-const CLI_BANNER = "Nenhum CLI encontrado. O Simulador está ativo — o projeto no disco não será editado.";
-
-function Bubble({ role, children, live }: { role: ChatMessage["role"]; children: ReactNode; live?: boolean }) {
+function Bubble({
+  role,
+  children,
+  live,
+  simulated,
+}: {
+  role: ChatMessage["role"];
+  children: ReactNode;
+  live?: boolean;
+  simulated?: boolean;
+}) {
   if (role === "tool") {
-    return (
-      <div className="mr-auto max-w-[90%] rounded-md border border-zinc-800 bg-black px-2 py-1 font-mono text-[11px] leading-5 text-zinc-400">
-        {children}
-      </div>
-    );
+    return <div className="hub-msg hub-msg-tool">{children}</div>;
   }
   if (role === "handoff") {
-    return (
-      <div className="mr-auto max-w-[85%] border-l-2 border-amber-400 bg-zinc-900 px-3 py-2 text-sm text-zinc-100">
-        {children}
-      </div>
-    );
+    return <div className="hub-msg hub-msg-handoff">{children}</div>;
   }
   if (role === "system") {
     return <p className="text-center text-xs text-zinc-500">{children}</p>;
   }
   const user = role === "user";
   return (
-    <div
-      className={cn(
-        "max-w-[85%] rounded-2xl px-3 py-2 text-sm leading-6",
-        user ? "ml-auto bg-zinc-800 text-zinc-50" : "mr-auto bg-zinc-900 text-zinc-100",
-      )}
-    >
+    <div className={cn("hub-msg", user ? "hub-msg-user" : "hub-msg-agent")}>
       <span className="sr-only">{user ? "Você" : "Agente"}</span>
+      {!user && simulated && <p className="hub-kicker mb-1">Simulador</p>}
       {children}
       {live && <span className="ml-0.5 inline-block animate-pulse text-zinc-500">▍</span>}
     </div>
   );
 }
 
+function HomeBoard({
+  agents,
+  workspaceMissing,
+  onNewSession,
+}: {
+  agents: Agent[];
+  workspaceMissing: boolean;
+  onNewSession: (agentId: string) => void;
+}) {
+  return (
+    <div className="hub-home">
+      <p className="hub-kicker">SDLC</p>
+      <h1>Escolha um agente para começar</h1>
+      <p className="text-sm leading-6 text-zinc-400">
+        Cada persona opera no workspace local. Handoff passa o contexto para a próxima etapa; subagente abre uma conversa
+        filha sem sair desta.
+      </p>
+      {workspaceMissing && (
+        <p className="hub-status hub-status-mock">
+          O workspace ainda está vazio. Informe o caminho na barra lateral. Sem pasta, o Simulador responde e o disco não
+          é alterado.
+        </p>
+      )}
+      <div className="hub-card-grid">
+        {agents.map((agent) => (
+          <button key={agent.id} type="button" className="hub-card" onClick={() => onNewSession(agent.id)}>
+            <span className="hub-card-row">
+              <span className="hub-dot" style={{ backgroundColor: agent.color }} />
+              <span className="font-medium text-zinc-50">{agent.name}</span>
+              <span className="hub-stage">{STAGE_LABEL[agent.stage]}</span>
+            </span>
+            <span className="hub-card-copy">{agent.specs}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function ChatPane({
   phase,
   agent,
   session,
+  agents,
   messages,
   live,
   streamError,
   running,
-  cliMissing,
-  workspace,
+  harness,
   workspaceMissing,
-  ready,
-  onWorkspaceChange,
-  onWorkspaceCommit,
   onCreateAgent,
   onLoadStarters,
+  onNewSession,
   onRetry,
   onSend,
   onHandoff,
@@ -73,21 +113,19 @@ export function ChatPane({
   draft,
   onDraftChange,
 }: {
-  phase: "loading" | "error" | "workspace" | "agents" | "session" | "chat";
+  phase: "loading" | "error" | "agents" | "session" | "chat";
   agent: Agent | null;
   session: Session | null;
+  agents: Agent[];
   messages: ChatMessage[];
   live: LiveSegment[];
   streamError: string | null;
   running: boolean;
-  cliMissing: boolean;
-  workspace: string;
+  harness: HarnessAvailability | null;
   workspaceMissing: boolean;
-  ready: boolean;
-  onWorkspaceChange: (value: string) => void;
-  onWorkspaceCommit: (value?: string) => void;
   onCreateAgent: () => void;
   onLoadStarters: () => void;
+  onNewSession: (agentId: string) => void;
   onRetry: () => void;
   onSend: (text: string) => Promise<boolean>;
   onHandoff: () => void;
@@ -100,23 +138,30 @@ export function ChatPane({
     endRef.current?.scrollIntoView({ block: "end" });
   }, [messages, live, streamError, phase]);
 
+  const simulated = agent ? isHarnessSimulated(agent.harness, harness) : clisMissing(harness);
+  const emptyChat = messages.length === 0 && live.length === 0 && !streamError;
+
   return (
     <section className="flex min-h-0 min-w-0 flex-1 flex-col bg-zinc-950">
-      {cliMissing && (
-        <p className="border-b border-amber-500/30 bg-amber-500/10 px-4 py-2 text-sm text-amber-200">{CLI_BANNER}</p>
+      {simulated && (
+        <p className="hub-banner-mock">{agent ? simulatedBanner(agent.harness) : "Nenhum CLI encontrado. O Simulador está ativo — o projeto no disco não será editado."}</p>
       )}
       {phase === "chat" && agent && session ? (
         <>
-          <header className="flex flex-wrap items-center gap-2 border-b border-zinc-800 px-4 py-3">
+          <header className="hub-topbar">
             <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: agent.color }} />
             <span className="font-medium">{agent.name}</span>
             <Badge variant="secondary">{STAGE_LABEL[agent.stage]}</Badge>
-            <Badge variant="outline">{HARNESS_LABEL[agent.harness]}</Badge>
+            <span className={cn("hub-chip", simulated ? "hub-chip-mock" : "hub-chip-on")}>
+              {liveHarnessLabel(agent.harness, harness)}
+            </span>
             <span className="min-w-0 flex-1 truncate text-sm text-zinc-400">{session.title}</span>
             <Button type="button" size="sm" variant="outline" disabled={running} onClick={onHandoff}>
+              <ArrowRightLeft />
               Handoff
             </Button>
             <Button type="button" size="sm" variant="outline" disabled={running} onClick={onSubagent}>
+              <GitBranch />
               Subagente
             </Button>
           </header>
@@ -128,8 +173,20 @@ export function ChatPane({
           <div className="relative min-h-0 flex-1">
             <ScrollArea className="absolute inset-0">
               <div className="flex flex-col gap-3 p-4">
+                {emptyChat && (
+                  <div className="hub-empty-chat">
+                    <p className="hub-kicker">{STAGE_LABEL[agent.stage]}</p>
+                    <h2>{agent.name}</h2>
+                    <p>{agent.specs}</p>
+                    {simulated ? (
+                      <p className="text-amber-200/90">Modo Simulador — nada será gravado no disco neste turno.</p>
+                    ) : (
+                      <p>Escreva o pedido. O agente usa a CLI da sua assinatura no workspace.</p>
+                    )}
+                  </div>
+                )}
                 {messages.map((message) => (
-                  <Bubble key={message.id} role={message.role}>
+                  <Bubble key={message.id} role={message.role} simulated={simulated}>
                     {message.role === "user" || message.role === "tool" || message.role === "system" ? (
                       <span className="whitespace-pre-wrap">
                         {message.role === "tool" && message.toolName ? `${message.toolName} · ` : ""}
@@ -146,18 +203,18 @@ export function ChatPane({
                       {segment.name} · {segment.status}: {segment.detail}
                     </Bubble>
                   ) : (
-                    <Bubble key={segment.id} role="assistant" live={running && index === live.length - 1}>
+                    <Bubble key={segment.id} role="assistant" live={running && index === live.length - 1} simulated={simulated}>
                       <MarkdownLite text={segment.text} />
                     </Bubble>
                   ),
                 )}
                 {running && live.length === 0 && (
                   <Bubble role="assistant" live>
-                    <span className="text-zinc-500">…</span>
+                    <span className="text-zinc-500">Aguardando o harness…</span>
                   </Bubble>
                 )}
                 {streamError && (
-                  <div className="mr-auto max-w-[85%] rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+                  <div className="hub-msg hub-msg-error">
                     <p>{streamError}</p>
                     <p className="mt-1 text-xs text-red-200/80">Envie a mensagem de novo para tentar outra vez.</p>
                   </div>
@@ -171,6 +228,7 @@ export function ChatPane({
             sessionId={session.id}
             draft={draft}
             disabled={running}
+            simulated={simulated}
             onDraftChange={onDraftChange}
             onSend={onSend}
           />
@@ -186,23 +244,10 @@ export function ChatPane({
               </Button>
             </div>
           )}
-          {phase === "workspace" && (
-            <div className="grid w-full max-w-md gap-3">
-              <h1 className="text-lg font-medium">Informe o caminho do workspace</h1>
-              <p className="text-sm leading-6 text-zinc-400">
-                No app do Windows, use Pasta e escolha o repositório. Ou cole um caminho absoluto como C:\src\meu-app.
-              </p>
-              <WorkspaceField
-                value={workspace}
-                disabled={!ready}
-                onChange={onWorkspaceChange}
-                onCommit={onWorkspaceCommit}
-              />
-            </div>
-          )}
           {phase === "agents" && (
-            <div className="grid w-full max-w-md gap-3">
-              <h1 className="text-lg font-medium">Nenhum agente neste hub</h1>
+            <div className="hub-home">
+              <p className="hub-kicker">Agentes</p>
+              <h1>Nenhum agente neste hub</h1>
               <p className="text-sm leading-6 text-zinc-400">
                 Crie uma persona ou carregue os seis agentes do SDLC: Spec, Arquiteto, Implementador, Revisor, Testador e
                 Release.
@@ -218,10 +263,7 @@ export function ChatPane({
             </div>
           )}
           {phase === "session" && (
-            <div className="grid max-w-md gap-2 text-center">
-              <h1 className="text-lg font-medium">Escolha ou comece uma conversa</h1>
-              <p className="text-sm text-zinc-400">Selecione um agente na barra lateral e abra uma conversa nova.</p>
-            </div>
+            <HomeBoard agents={agents} workspaceMissing={workspaceMissing} onNewSession={onNewSession} />
           )}
         </div>
       )}

package/src/components/composer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ArrowUp } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 
@@ -7,12 +8,14 @@ export function Composer({
   sessionId,
   draft,
   disabled,
+  simulated,
   onDraftChange,
   onSend,
 }: {
   sessionId: string;
   draft: string;
   disabled: boolean;
+  simulated: boolean;
   onDraftChange: (sessionId: string, text: string) => void;
   onSend: (text: string) => Promise<boolean>;
 }) {
@@ -28,7 +31,7 @@ export function Composer({
 
   return (
     <form
-      className="flex items-end gap-2 border-t border-zinc-800 bg-black p-3"
+      className="hub-composer"
       onSubmit={(event) => {
         event.preventDefault();
         void submit();
@@ -38,8 +41,14 @@ export function Composer({
         value={draft}
         disabled={disabled}
         rows={2}
-        placeholder={disabled ? "Aguardando a resposta do agente…" : "Escreva uma mensagem"}
-        className="max-h-40 min-h-16 flex-1 resize-none bg-zinc-950"
+        placeholder={
+          disabled
+            ? "Aguardando a resposta do agente…"
+            : simulated
+              ? "Escreva no Simulador — o disco não será alterado"
+              : "Escreva uma mensagem"
+        }
+        className="max-h-40 min-h-16 flex-1 resize-none border-0 bg-transparent shadow-none focus-visible:ring-0"
         onChange={(event) => onDraftChange(sessionId, event.target.value)}
         onKeyDown={(event) => {
           if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
@@ -47,8 +56,8 @@ export function Composer({
           void submit();
         }}
       />
-      <Button type="submit" disabled={disabled || !trimmed}>
-        Enviar
+      <Button type="submit" size="icon" disabled={disabled || !trimmed} aria-label="Enviar">
+        <ArrowUp />
       </Button>
     </form>
   );

package/src/components/desktop-chrome.tsx

@@ -7,5 +7,12 @@ export function DesktopChrome() {
   const [windows, setWindows] = useState(false);
   useEffect(() => setWindows(isWindowsDesktop()), []);
   if (!windows) return null;
-  return <div className="ah-drag h-9 shrink-0 bg-black" aria-hidden />;
+  return (
+    <div className="ah-drag flex h-9 shrink-0 items-center bg-black px-3" aria-hidden>
+      <span className="hub-brand text-xs text-zinc-400">
+        <span className="hub-mark" />
+        Agent Hub
+      </span>
+    </div>
+  );
 }

package/src/components/hub-shell.tsx

@@ -113,19 +113,16 @@ export function HubShell() {
 
   const selectedSession = sessions.find((session) => session.id === selectedSessionId) ?? null;
   const selectedAgent = selectedSession ? (agents.find((agent) => agent.id === selectedSession.agentId) ?? null) : null;
-  const cliMissing = harness !== null && !harness.cursor && !harness.claude;
   const workspaceMissing = !(settings?.workspace ?? "").trim();
   const phase = !ready
     ? loadError
       ? "error"
       : "loading"
-    : workspaceMissing && !selectedSession
-      ? "workspace"
-      : agents.length === 0 && !selectedSession
-        ? "agents"
-        : selectedSession && selectedAgent
-          ? "chat"
-          : "session";
+    : agents.length === 0 && !selectedSession
+      ? "agents"
+      : selectedSession && selectedAgent
+        ? "chat"
+        : "session";
 
   async function commitWorkspace(next?: string) {
     const workspace = next ?? workspaceDraft;
@@ -347,7 +344,7 @@ export function HubShell() {
 
   return (
     <div className="flex h-dvh min-h-0 w-full overflow-hidden bg-black text-zinc-100">
-      <aside className="hidden h-full w-[280px] shrink-0 border-r border-zinc-800 md:block">
+      <aside className="hidden h-full w-[300px] shrink-0 border-r border-zinc-800 md:block">
         <Sidebar idPrefix="desktop" {...sidebarProps} />
       </aside>
       <div className="flex min-h-0 min-w-0 flex-1 flex-col">
@@ -355,24 +352,25 @@ export function HubShell() {
           <Button type="button" variant="ghost" size="icon" aria-label="Abrir menu" onClick={() => setSheetOpen(true)}>
             <Menu />
           </Button>
-          <span className="text-sm font-medium">Agent Hub</span>
+          <span className="hub-brand text-sm">
+            <span className="hub-mark" aria-hidden />
+            Agent Hub
+          </span>
         </div>
         <ChatPane
           phase={phase}
           agent={selectedAgent}
           session={selectedSession}
+          agents={agents}
           messages={messages}
           live={live}
           streamError={streamError}
           running={selectedSession?.status === "running"}
-          cliMissing={cliMissing}
-          workspace={workspaceDraft}
+          harness={harness}
           workspaceMissing={workspaceMissing}
-          ready={ready}
-          onWorkspaceChange={setWorkspaceDraft}
-          onWorkspaceCommit={(value) => void commitWorkspace(value)}
           onCreateAgent={openCreate}
           onLoadStarters={() => void loadStarters()}
+          onNewSession={(agentId) => void createSession(agentId)}
           onRetry={() => {
             setReady(false);
             setLoadError(null);
@@ -394,7 +392,7 @@ export function HubShell() {
         />
       </div>
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent side="left" className="w-[280px] max-w-[280px] gap-0 bg-black p-0 sm:max-w-[280px]">
+        <SheetContent side="left" className="w-[300px] max-w-[300px] gap-0 bg-black p-0 sm:max-w-[300px]">
           <SheetTitle className="sr-only">Agent Hub</SheetTitle>
           <Sidebar idPrefix="mobile" {...sidebarProps} />
         </SheetContent>

package/src/components/sidebar.tsx

@@ -1,31 +1,22 @@
 "use client";
 
 import Link from "next/link";
+import { MessageSquarePlus, Pencil, Plus, Wallet } from "lucide-react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { WorkspaceField } from "@/components/workspace-field";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { sessionsForAgent } from "@/lib/group-sessions";
-import { STAGE_LABEL } from "@/lib/labels";
+import { clisMissing, STAGE_LABEL, type HarnessAvailability } from "@/lib/labels";
 import { cn } from "@/lib/utils";
 import type { Agent, Session } from "@/lib/types";
 
-export type HarnessAvailability = {
-  cursor: boolean;
-  claude: boolean;
-};
+export type { HarnessAvailability };
 
-function Chip({ label, ok }: { label: string; ok: boolean }) {
+function Chip({ label, on }: { label: string; on: boolean }) {
   return (
-    <span
-      title={ok ? `${label} disponível` : `${label} ausente`}
-      className={cn(
-        "rounded-full border px-2 py-0.5 text-[11px]",
-        ok ? "border-emerald-500/40 bg-emerald-500/15 text-emerald-400" : "border-zinc-700 bg-zinc-800 text-zinc-500",
-      )}
-    >
+    <span className={cn("hub-chip", on ? "hub-chip-on" : "hub-chip-off")} title={on ? `${label} no PATH` : `${label} ausente`}>
       {label}
     </span>
   );
@@ -66,11 +57,15 @@ export function Sidebar({
 }) {
   const selected = sessions.find((session) => session.id === selectedSessionId);
   const fallbackAgentId = selected?.agentId ?? agents[0]?.id;
+  const mocked = clisMissing(harness);
 
   return (
-    <div className="flex h-full w-full flex-col bg-black text-zinc-100">
+    <div className="hub-sidebar flex h-full w-full flex-col text-zinc-100">
       <div className="flex shrink-0 flex-col gap-3 p-3">
-        <div className="pr-8 text-sm font-semibold tracking-tight">Agent Hub</div>
+        <div className="hub-brand">
+          <span className="hub-mark" aria-hidden />
+          Agent Hub
+        </div>
         <label className="grid gap-1 text-xs text-zinc-400" htmlFor={`${idPrefix}-workspace`}>
           Workspace
           <WorkspaceField
@@ -82,14 +77,29 @@ export function Sidebar({
           />
         </label>
         {harness ? (
-          <div className="flex flex-wrap gap-1.5">
-            <Chip label="Cursor" ok={harness.cursor} />
-            <Chip label="Claude" ok={harness.claude} />
-            <Chip label="Simulador" ok />
-          </div>
+          mocked ? (
+            <p className="hub-status hub-status-mock">
+              Simulador ativo. Cursor e Claude Code não estão no PATH — as respostas são fictícias e o disco não é
+              alterado.
+            </p>
+          ) : (
+            <div className="grid gap-1.5">
+              <p className="hub-status hub-status-live">CLI da assinatura encontrada. O Hub não usa chave de API.</p>
+              <div className="flex flex-wrap gap-1.5">
+                <Chip label="Cursor" on={harness.cursor} />
+                <Chip label="Claude" on={harness.claude} />
+              </div>
+            </div>
+          )
         ) : (
           <p className="text-xs text-zinc-500">Verificando CLIs…</p>
         )}
+        {harness && mocked && (
+          <div className="flex flex-wrap gap-1.5">
+            <Chip label="Cursor" on={false} />
+            <Chip label="Claude" on={false} />
+          </div>
+        )}
         <div className="grid grid-cols-2 gap-2">
           <Button
             type="button"
@@ -99,9 +109,11 @@ export function Sidebar({
               if (fallbackAgentId) onNewSession(fallbackAgentId);
             }}
           >
+            <MessageSquarePlus />
             Nova conversa
           </Button>
           <Button type="button" size="sm" variant="outline" onClick={onNewAgent}>
+            <Plus />
             Novo agente
           </Button>
         </div>
@@ -123,31 +135,22 @@ export function Sidebar({
                 {agents.map((agent) => {
                   const rows = sessionsForAgent(sessions, agent.id);
                   return (
-                    <AccordionItem key={agent.id} value={agent.id} className="border-zinc-800">
+                    <AccordionItem key={agent.id} value={agent.id} className="hub-agent border-zinc-800">
                       <AccordionTrigger className="px-2 hover:no-underline">
-                        <span className="flex min-w-0 flex-1 items-center gap-2">
-                          <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: agent.color }} />
+                        <span className="hub-agent-title">
+                          <span className="hub-dot" style={{ backgroundColor: agent.color }} />
                           <span className="truncate">{agent.name}</span>
-                          <Badge variant="secondary" className="ml-auto">
-                            {STAGE_LABEL[agent.stage]}
-                          </Badge>
+                          <span className="hub-stage">{STAGE_LABEL[agent.stage]}</span>
                         </span>
                       </AccordionTrigger>
                       <AccordionContent className="pb-2">
                         <div className="grid gap-1">
                           <div className="flex items-center justify-between px-2">
-                            <button
-                              type="button"
-                              className="text-xs text-zinc-400 hover:text-zinc-100"
-                              onClick={() => onNewSession(agent.id)}
-                            >
+                            <button type="button" className="hub-quiet-btn" onClick={() => onNewSession(agent.id)}>
                               Nova conversa
                             </button>
-                            <button
-                              type="button"
-                              className="text-xs text-zinc-400 hover:text-zinc-100"
-                              onClick={() => onEditAgent(agent)}
-                            >
+                            <button type="button" className="hub-quiet-btn" onClick={() => onEditAgent(agent)}>
+                              <Pencil className="size-3" />
                               Editar
                             </button>
                           </div>
@@ -161,15 +164,15 @@ export function Sidebar({
                                 title={session.title}
                                 aria-current={session.id === selectedSessionId ? "true" : undefined}
                                 className={cn(
-                                  "truncate rounded-md py-1.5 pr-2 text-left text-xs hover:bg-zinc-900",
-                                  session.id === selectedSessionId ? "bg-zinc-800 text-zinc-50" : "text-zinc-300",
+                                  "hub-session",
+                                  session.id === selectedSessionId && "hub-session-active",
                                 )}
                                 style={{ paddingLeft: 8 + depth * 12 }}
                                 onClick={() => onSelectSession(session.id)}
                               >
-                                {session.title}
-                                {session.status === "running" ? " · em curso" : ""}
-                                {session.status === "error" ? " · erro" : ""}
+                                <span className="truncate">{session.title}</span>
+                                {session.status === "running" && <span className="hub-session-tag">em curso</span>}
+                                {session.status === "error" && <span className="hub-session-tag hub-session-tag-err">erro</span>}
                               </button>
                             ))
                           )}
@@ -184,7 +187,8 @@ export function Sidebar({
         </ScrollArea>
       </div>
       <Separator className="shrink-0" />
-      <Link href="/gastos" className="shrink-0 px-3 py-3 text-sm text-zinc-400 hover:text-zinc-100">
+      <Link href="/gastos" className="hub-footer-link">
+        <Wallet className="size-3.5" />
         Gastos
       </Link>
     </div>

package/src/components/spend-view.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
 import { HARNESS_LABEL } from "@/lib/labels";
 import { usageDay, type SpendSummary } from "@/lib/spend";
 import type { Agent, UsageEvent } from "@/lib/types";
@@ -59,7 +60,7 @@ function Table({
   rows: string[][];
 }) {
   return (
-    <div className="overflow-x-auto">
+    <div className="hub-table-wrap">
       <table className="w-full border-collapse text-left text-sm">
         <caption className="mb-2 text-left font-medium text-zinc-100">{caption}</caption>
         <thead>
@@ -133,32 +134,34 @@ export function SpendView({
   const columns = ["Grupo", "Execuções", "Duração", ...tokenHeaders, "USD"];
 
   return (
-    <main className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 p-6">
+    <main className="hub-spend">
       <div className="flex flex-wrap items-end justify-between gap-3">
         <div className="grid gap-1">
-          <h1 className="text-lg font-medium">Gastos</h1>
+          <p className="hub-kicker">Uso</p>
+          <h1>Gastos</h1>
           <p className="max-w-2xl text-sm leading-6 text-zinc-400">{DISCLAIMER}</p>
         </div>
-        <Link href="/" className="text-sm text-zinc-200 underline">
+        <Link href="/" className="hub-quiet-btn">
+          <ArrowLeft className="size-3.5" />
           Voltar ao hub
         </Link>
       </div>
-      <section className="grid gap-3 sm:grid-cols-3">
-        <div className="rounded-lg border border-zinc-800 px-3 py-3">
-          <p className="text-xs text-zinc-400">Total USD</p>
-          <p className="mt-1 text-lg">{summary.hasAnyCost ? formatUsd(summary.totalCostUsd) : "—"}</p>
+      <section className="hub-stat-grid">
+        <div className="hub-stat">
+          <p>Total USD</p>
+          <strong>{summary.hasAnyCost ? formatUsd(summary.totalCostUsd) : "—"}</strong>
         </div>
-        <div className="rounded-lg border border-zinc-800 px-3 py-3">
-          <p className="text-xs text-zinc-400">Execuções</p>
-          <p className="mt-1 text-lg">{events.length}</p>
+        <div className="hub-stat">
+          <p>Execuções</p>
+          <strong>{events.length}</strong>
         </div>
-        <div className="rounded-lg border border-zinc-800 px-3 py-3">
-          <p className="text-xs text-zinc-400">Duração</p>
-          <p className="mt-1 text-lg">{formatDuration(sumDuration(events))}</p>
+        <div className="hub-stat">
+          <p>Duração</p>
+          <strong>{formatDuration(sumDuration(events))}</strong>
         </div>
       </section>
       {events.length === 0 ? (
-        <p className="text-sm text-zinc-400">Nenhuma execução registrada.</p>
+        <p className="text-sm text-zinc-400">Nenhuma execução registrada. Os turnos do Simulador entram aqui com custo zero.</p>
       ) : (
         <div className="grid gap-6">
           <Table caption="Por agente" columns={["Agente", ...columns.slice(1)]} rows={agentRows} />

package/src/lib/labels.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { clisMissing, isHarnessSimulated, liveHarnessLabel, simulatedBanner } from "./labels";
+
+describe("harness labels", () => {
+  it("treats missing CLIs as the simulator", () => {
+    expect(clisMissing(null)).toBe(false);
+    expect(clisMissing({ cursor: false, claude: false })).toBe(true);
+    expect(clisMissing({ cursor: true, claude: false })).toBe(false);
+  });
+
+  it("simulates a cursor agent when the Cursor CLI is absent", () => {
+    expect(isHarnessSimulated("cursor", { cursor: false, claude: true })).toBe(true);
+    expect(isHarnessSimulated("cursor", { cursor: true, claude: false })).toBe(false);
+    expect(isHarnessSimulated("mock", { cursor: true, claude: true })).toBe(true);
+    expect(liveHarnessLabel("cursor", { cursor: false, claude: false })).toBe("Simulador · Cursor");
+    expect(liveHarnessLabel("cursor", { cursor: true, claude: false })).toBe("Cursor");
+    expect(liveHarnessLabel("mock", { cursor: true, claude: true })).toBe("Simulador");
+    expect(simulatedBanner("cursor")).toMatch(/Cursor/);
+    expect(simulatedBanner("mock")).toMatch(/Simulador/);
+  });
+});

package/src/lib/labels.ts

@@ -18,3 +18,32 @@ export const HARNESS_LABEL: Record<HarnessId, string> = {
 
 export const STAGES: SdlcStage[] = ["spec", "architect", "implement", "review", "test", "release", "custom"];
 export const HARNESSES: HarnessId[] = ["cursor", "claude", "mock"];
+
+export type HarnessAvailability = {
+  cursor: boolean;
+  claude: boolean;
+};
+
+export function clisMissing(avail: HarnessAvailability | null): boolean {
+  return avail !== null && !avail.cursor && !avail.claude;
+}
+
+export function isHarnessSimulated(harness: HarnessId, avail: HarnessAvailability | null): boolean {
+  if (harness === "mock") return true;
+  if (!avail) return false;
+  if (harness === "cursor") return !avail.cursor;
+  return !avail.claude;
+}
+
+export function liveHarnessLabel(harness: HarnessId, avail: HarnessAvailability | null): string {
+  if (!isHarnessSimulated(harness, avail)) return HARNESS_LABEL[harness];
+  if (harness === "mock") return "Simulador";
+  return `Simulador · ${HARNESS_LABEL[harness]}`;
+}
+
+export function simulatedBanner(harness: HarnessId): string {
+  if (harness === "mock") {
+    return "Este agente está no Simulador. As respostas são fictícias e o projeto no disco não é editado.";
+  }
+  return `A CLI do ${HARNESS_LABEL[harness]} não está no PATH. Este turno usa o Simulador — o projeto no disco não será editado.`;
+}