agent-hub-sdd 0.1.7 → 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.7
+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.7`, 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.7
+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.7
+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/electron/main.mjs

@@ -188,7 +188,7 @@ function createWindow() {
       preload: path.join(here, "preload.cjs"),
       contextIsolation: true,
       nodeIntegration: false,
-      sandbox: true,
+      sandbox: false,
     },
   });
   win.once("ready-to-show", () => win.show());
@@ -207,6 +207,13 @@ function createWindow() {
     void shell.openExternal(url);
     return { action: "deny" };
   });
+  const paint = () => {
+    const cssFile = path.join(hubDir(), "src", "app", "shell.css");
+    if (!fs.existsSync(cssFile)) return;
+    void win.webContents.insertCSS(fs.readFileSync(cssFile, "utf8"));
+  };
+  win.webContents.on("did-finish-load", paint);
+  win.webContents.on("did-navigate", paint);
 }
 
 ipcMain.handle("pick-folder", async () => {

package/electron/stage-hub.test.ts

@@ -21,7 +21,7 @@ describe("stageHub", () => {
     temps.push(root);
     const pkg = path.join(root, "node_modules", "agent-hub-sdd");
     fs.mkdirSync(path.join(pkg, "src", "components"), { recursive: true });
-    fs.writeFileSync(path.join(pkg, "package.json"), JSON.stringify({ name: "agent-hub-sdd", version: "0.1.7" }));
+    fs.writeFileSync(path.join(pkg, "package.json"), JSON.stringify({ name: "agent-hub-sdd", version: "0.1.8" }));
     fs.writeFileSync(path.join(pkg, "postcss.config.mjs"), "export default { plugins: {} };\n");
     fs.writeFileSync(path.join(pkg, "src", "components", "desktop-chrome.tsx"), "export const DesktopChrome = () => null;\n");
     fs.writeFileSync(path.join(root, "node_modules", "sentinel"), "ok");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-hub-sdd",
-  "version": "0.1.7",
+  "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.7"
+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/layout.tsx

@@ -1,9 +1,12 @@
+import fs from "node:fs";
+import path from "node:path";
 import type { Metadata } from "next";
 import { DesktopChrome } from "@/components/desktop-chrome";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import "./fallback.css";
 import "./globals.css";
 
+const SHELL_CSS = fs.readFileSync(path.join(process.cwd(), "src/app/shell.css"), "utf8");
+
 export const metadata: Metadata = {
   title: "Agent Hub",
   description: "Harness visual local para agentes do SDLC",
@@ -13,6 +16,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html lang="pt-BR" className="dark h-full antialiased">
       <body className="flex min-h-dvh flex-col bg-black text-zinc-100">
+        <style id="agent-hub-shell" dangerouslySetInnerHTML={{ __html: SHELL_CSS }} />
         <TooltipProvider>
           <DesktopChrome />
           {children}

package/src/app/shell.css

@@ -0,0 +1,418 @@
+html, body {
+  margin: 0;
+  min-height: 100%;
+  background: #09090b;
+  color: #f4f4f5;
+  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+}
+a { color: inherit; text-decoration: none; }
+button, input, textarea { font: inherit; color: inherit; }
+button {
+  cursor: pointer;
+  background: #18181b;
+  border: 1px solid #3f3f46;
+  border-radius: 0.5rem;
+  padding: 0.35rem 0.7rem;
+}
+input, textarea {
+  background: #18181b;
+  border: 1px solid #3f3f46;
+  border-radius: 0.5rem;
+  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; }
+.h-full { height: 100%; }
+.h-dvh { height: 100dvh; }
+.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: #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; }
+.text-sm { font-size: 0.875rem; }
+.text-xs { font-size: 0.75rem; }
+.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