wendkeep 0.71.1 → 0.72.1

package/src/observer.mjs

@@ -2,18 +2,22 @@ import { homedir } from 'node:os';
 import { isAbsolute, resolve } from 'node:path';
 import { appendObserverEvent, readObserverIndex, registerObserverProject } from './observer-store.mjs';
 import { buildProjectSnapshot } from './observer-snapshot.mjs';
-import { compareMemoryParity, publishObserverMemory } from './observer-memory-publish.mjs';
+import { compareMemoryParity } from './observer-memory-publish.mjs';
+import { publishObserverSql } from './observer-sql-publish.mjs';
 import { startObserverServer } from './observer-server.mjs';
+import { ensureObserverDatabase, migrateObserverDatabase, listSqlProjects, OBSERVER_SQL_FILE, OBSERVER_SQL_SCHEMA_VERSION } from './observer-sql-store.mjs';
 import { resolveProjectVault } from '../packages/vault/src/project-vault.mjs';
+import { observerAuthHeaders, resolveObserverToken } from './observer-auth.mjs';
 
 export const OBSERVER_HELP = `wendkeep observer — Observer local multi-projeto
 
 Uso:
   wendkeep observer serve [--data-dir P] [--host 127.0.0.1] [--port 8787]
-                          [--allow-non-loopback]
+                          [--allow-non-loopback] [--token TOKEN]
   wendkeep observer register --project P [--vault V] [--data-dir D] [--json]
   wendkeep observer publish --project P [--vault V] [--data-dir D] [--json]
-  wendkeep observer memory import --project P [--vault V] [--url U] [--json]
+  wendkeep observer memory import --project P [--vault V] [--url U] [--token TOKEN]
+                                    [--capture-level metadata|messages|full-transcript] [--json]
   wendkeep observer status [--data-dir D] [--json]
 
 O Observer local pode manter snapshots operacionais e uma cópia completa da memória em volume
@@ -54,6 +58,21 @@ function summary(index) {
   };
 }
 
+function databaseSummary(dir) {
+  const db = ensureObserverDatabase(dir);
+  try {
+    const migrations = migrateObserverDatabase(db);
+    return {
+      engine: 'sqlite',
+      file: OBSERVER_SQL_FILE,
+      schema_version: OBSERVER_SQL_SCHEMA_VERSION,
+      migrations: migrations.applied.length,
+      projects: listSqlProjects(db).length,
+      ready: true,
+    };
+  } finally { db.close(); }
+}
+
 export async function runObserver(argv = [], { write = (chunk) => process.stdout.write(chunk) } = {}) {
   const [sub] = argv;
   const asJson = argv.includes('--json');
@@ -62,9 +81,10 @@ export async function runObserver(argv = [], { write = (chunk) => process.stdout
     return 0;
   }
   const dir = dataDir(argv);
+  const token = resolveObserverToken(optionValue(argv, '--token'));
 
   if (sub === 'status') {
-    print(summary(readObserverIndex(dir)), asJson, write);
+    print({ ...summary(readObserverIndex(dir)), database: databaseSummary(dir) }, asJson, write);
     return 0;
   }
 
@@ -75,6 +95,7 @@ export async function runObserver(argv = [], { write = (chunk) => process.stdout
       host,
       port: Number(optionValue(argv, '--port') || 8787),
       allowNonLoopback: argv.includes('--allow-non-loopback'),
+      token,
     });
     const address = server.address();
     process.stdout.write(`wendkeep observer listening: http://${address.address}:${address.port}\n`);
@@ -89,7 +110,7 @@ export async function runObserver(argv = [], { write = (chunk) => process.stdout
     const snapshot = buildProjectSnapshot({ vaultBase: vault, projectRoot: root });
     const url = optionValue(argv, '--url') || process.env.WENDKEEP_OBSERVER_URL || '';
     if (!url) throw new Error('observer memory import: --url ou WENDKEEP_OBSERVER_URL é obrigatório.');
-    const headers = { 'content-type': 'application/json', accept: 'application/json' };
+    const headers = observerAuthHeaders(token, { 'content-type': 'application/json', accept: 'application/json' });
     const registration = await fetch(
       String(url).replace(/\/$/, '') + '/v1/projects/' + encodeURIComponent(snapshot.project_id),
       {
@@ -103,20 +124,24 @@ export async function runObserver(argv = [], { write = (chunk) => process.stdout
       },
     );
     if (!registration.ok) throw new Error('Observer não registrou o projeto: HTTP ' + registration.status + '.');
-    const memory = await publishObserverMemory({
+    const sql = await publishObserverSql({
       vaultBase: vault,
       projectId: snapshot.project_id,
       url,
+      token,
+      captureLevel: optionValue(argv, '--capture-level') || process.env.WENDKEEP_OBSERVER_CAPTURE_LEVEL || 'metadata',
     });
     const parity = await compareMemoryParity({
       vaultBase: vault,
       projectId: snapshot.project_id,
       url,
+      token,
     });
     const result = {
-      ok: memory.ok && parity.missing === 0 && parity.mismatched === 0,
+      ok: sql.ok && parity.missing === 0 && parity.mismatched === 0,
       project_id: snapshot.project_id,
-      memory,
+      sql,
+      memory: { ...sql, authority: 'sqlite' },
       parity,
     };
     print(result, asJson, write);

package/src/release-changelog.mjs

@@ -1,5 +1,5 @@
 // Pure helper: extract a single version's release notes from a Keep-a-Changelog
-// file. Reused by scripts/release.mjs and .github/workflows/release.yml so the
+// file. Reused by scripts/release.mjs and .github/workflows/auto-tag.yml so the
 // GitHub Release body always matches the committed CHANGELOG.
 
 const HEADER_RE = /^##\s*\[([^\]]+)\]\s*[—–-]\s*(.+?)\s*$/;

package/src/release-provenance.mjs

@@ -0,0 +1,68 @@
+const DEPENDENCY_FIELDS = Object.freeze([
+  'dependencies',
+  'devDependencies',
+  'optionalDependencies',
+  'peerDependencies',
+]);
+
+export function packageHasSelfDependency(pkg = {}) {
+  const name = String(pkg.name || '');
+  if (!name) return false;
+  return DEPENDENCY_FIELDS.some((field) => Object.hasOwn(pkg[field] || {}, name));
+}
+
+export function evaluateReleaseProvenance({
+  name,
+  version,
+  headCommit,
+  tagCommit = '',
+  publishedIntegrity = '',
+  localIntegrity = '',
+  requirePublished = false,
+} = {}) {
+  const tag = `v${version}`;
+  if (tagCommit && tagCommit !== headCommit) {
+    return {
+      ok: false,
+      code: 'tag_commit_mismatch',
+      message: `${tag} aponta para ${tagCommit.slice(0, 7)}, não para ${headCommit.slice(0, 7)}. Bump a versão antes de alterar a árvore publicada.`,
+    };
+  }
+  if (publishedIntegrity && !tagCommit) {
+    return {
+      ok: false,
+      code: 'published_tag_missing',
+      message: `${name}@${version} está publicado, mas ${tag} não comprova o commit correspondente.`,
+    };
+  }
+  if (requirePublished && !publishedIntegrity) {
+    return {
+      ok: false,
+      code: 'published_artifact_missing',
+      message: `${name}@${version} ainda não possui integridade consultável no npm.`,
+    };
+  }
+  if (publishedIntegrity && localIntegrity && publishedIntegrity !== localIntegrity) {
+    return {
+      ok: false,
+      code: 'tarball_integrity_mismatch',
+      message: `o tarball de ${tag} diverge do artefato publicado no npm.`,
+    };
+  }
+  if (publishedIntegrity && !localIntegrity) {
+    return {
+      ok: false,
+      code: 'local_integrity_missing',
+      message: `não foi possível calcular a integridade do tarball de ${tag}.`,
+    };
+  }
+  return {
+    ok: true,
+    code: publishedIntegrity ? 'verified' : 'release_candidate',
+    name,
+    version,
+    tag,
+    commit: headCommit,
+    integrity: publishedIntegrity || localIntegrity || '',
+  };
+}

package/src/taxonomy.mjs

@@ -131,7 +131,7 @@ export const RUNNABLE_HOOKS = [
 // the MOST agent-agnostic mechanism it supports; the Claude Code plugin entry
 // (extraKnownMarketplaces + enabledPlugins) is an additive bonus, never the base.
 //   - mcp:          .mcp.json server entry (works on any MCP-capable agent)
-//   - wendkeepHook: a wendkeep-authored hook (runs via `npx wendkeep hook`, any agent)
+//   - wendkeepHook: a wendkeep-authored hook (runs via `npx --no-install wendkeep hook`, any agent)
 //   - installer:    cross-agent install script (used on non-Claude agents)
 // marketplace/plugin shapes are verified against a real ~/.claude/settings.json.
 export const COMPANIONS = [

package/src/vault-readme.mjs

@@ -52,7 +52,7 @@ export function renderVaultReadme({ projectName, vaultPath, withMcp = true, loca
     const mcpIntro = withMcp ? ', and read/written by the **MCPVault** MCP server' : '';
     const access = [`- **Obsidian:** open this folder with "Open folder as vault" → \`${vaultPath}\``];
     if (withMcp) access.push('- **Agent (MCP):** the `wendkeep-vault` server (MCPVault) points at this vault (set in `.mcp.json`), giving the agent read/write on the notes.');
-    access.push('- **Hooks:** Codex and Claude Code call `npx wendkeep hook <name>`; the vault is discovered from the project-local `.wendkeep.json` binding and checked against `.brain/PROJECT.json`.');
+    access.push('- **Hooks:** Codex and Claude Code call `npx --no-install wendkeep hook <name>`; the vault is discovered from the project-local `.wendkeep.json` binding and checked against `.brain/PROJECT.json`.');
     return `# Obsidian vault — ${name}
 
 > Knowledge base of **${name}**, captured automatically by wendkeep from AI coding-agent
@@ -84,7 +84,7 @@ ${access.join('\n')}
   const mcpIntro = withMcp ? ', e lida/escrita pelo MCP server **MCPVault**' : '';
   const access = [`- **Obsidian:** abra esta pasta com "Open folder as vault" → \`${vaultPath}\``];
   if (withMcp) access.push('- **Agente (MCP):** o servidor `wendkeep-vault` (MCPVault) é apontado para este vault pelo `wendkeep init` (em `.mcp.json`), dando ao agente leitura/escrita das notas.');
-  access.push('- **Hooks:** Codex e Claude Code chamam `npx wendkeep hook <name>`; o vault é descoberto pelo vínculo local `.wendkeep.json` e validado contra `.brain/PROJECT.json`.');
+  access.push('- **Hooks:** Codex e Claude Code chamam `npx --no-install wendkeep hook <name>`; o vault é descoberto pelo vínculo local `.wendkeep.json` e validado contra `.brain/PROJECT.json`.');
   return `# Vault Obsidian — ${name}
 
 > Base de conhecimento de **${name}**, capturada automaticamente pelo wendkeep a

package/web/observer/app.mjs

@@ -96,11 +96,82 @@ export async function loadProjectMemory(fetchImpl = globalThis.fetch, projectId
   return { tree, sync };
 }
 
+export function usageQuery(filters = {}) {
+  const params = new URLSearchParams();
+  const keys = ['from', 'to', 'agent_id', 'subagent_id', 'provider', 'model_provider', 'model', 'change', 'session_id', 'role'];
+  for (const key of keys) {
+    const value = filters[key] ?? filters[key.replace('_id', 'Id')] ?? '';
+    if (String(value).trim()) params.set(key, String(value));
+  }
+  const query = params.toString();
+  return query ? `?${query}` : '';
+}
+
+export async function loadProjectUsage(fetchImpl = globalThis.fetch, projectId = '', filters = {}) {
+  const id = encodeURIComponent(projectId);
+  const query = usageQuery(filters);
+  const [summary, breakdown, calls] = await Promise.all([
+    requestJson(fetchImpl, `/v1/projects/${id}/usage/summary${query}`),
+    requestJson(fetchImpl, `/v1/projects/${id}/usage/breakdown${query}`),
+    requestJson(fetchImpl, `/v1/projects/${id}/usage/calls${query}`),
+  ]);
+  return { summary, breakdown, calls, filters: { ...filters } };
+}
+
+export function buildUsageViewModel(usage = {}) {
+  const summary = usage.summary || {};
+  const agents = (Array.isArray(usage.breakdown?.agents) ? usage.breakdown.agents : []).map((agent) => ({ ...agent, children: [] }));
+  const byId = new Map(agents.map((agent) => [agent.agent_id, agent]));
+  for (const agent of agents) {
+    const parent = agent.parent_agent_id ? byId.get(agent.parent_agent_id) : null;
+    if (parent && parent !== agent) parent.children.push(agent);
+  }
+  const roots = agents.filter((agent) => !agent.parent_agent_id || !byId.has(agent.parent_agent_id));
+  const tokens = {
+    input: Number(summary.tokens?.input || 0),
+    cacheWrite: Number(summary.tokens?.cache_write || 0),
+    cacheRead: Number(summary.tokens?.cache_read || 0),
+    output: Number(summary.tokens?.output || 0),
+    reasoning: Number(summary.tokens?.reasoning || 0),
+    total: Number(summary.tokens?.total || 0),
+  };
+  const coverage = summary.coverage || {};
+  const complete = Number(coverage.complete || 0);
+  const summaryOnly = Number(coverage.summary_only || 0);
+  return {
+    totalCost: Number(summary.cost_usd || 0),
+    mainCost: Number(summary.main_cost_usd || 0),
+    subagentCost: Number(summary.subagent_cost_usd || 0),
+    wastedCost: Number(summary.wasted_usd || 0),
+    calls: Array.isArray(usage.calls?.calls) ? usage.calls.calls : [],
+    callCount: Number(summary.calls || usage.calls?.total || 0),
+    sessions: Number(summary.sessions || 0),
+    agentsCount: Number(summary.agents || 0),
+    subagentsCount: Number(summary.subagents || 0),
+    modelsCount: Number(summary.models || 0),
+    tokens,
+    trend: Array.isArray(summary.by_day) ? summary.by_day : [],
+    agents: roots,
+    allAgents: agents,
+    coverage: {
+      complete,
+      summaryOnly,
+      total: Number(coverage.transcripts || complete + summaryOnly),
+      label: `${complete} completo${complete === 1 ? '' : 's'} · ${summaryOnly} agregado${summaryOnly === 1 ? '' : 's'}`,
+    },
+    hasUnknownPricing: Number(summary.unknown_priced_rollups || 0) > 0,
+  };
+}
+
 export async function loadMemoryDocument(fetchImpl = globalThis.fetch, projectId = '', logicalPath = '') {
   const query = new URLSearchParams({ path: logicalPath });
   return requestJson(fetchImpl, '/v1/projects/' + encodeURIComponent(projectId) + '/memory/document?' + query.toString());
 }
 
+export async function loadProjectTranscript(fetchImpl = globalThis.fetch, projectId = '', transcriptId = '') {
+  return requestJson(fetchImpl, `/v1/projects/${encodeURIComponent(projectId)}/transcripts/${encodeURIComponent(transcriptId)}`);
+}
+
 export async function searchProjectMemory(fetchImpl = globalThis.fetch, projectId = '', query = '') {
   const params = new URLSearchParams({ q: query });
   return requestJson(fetchImpl, '/v1/projects/' + encodeURIComponent(projectId) + '/memory/search?' + params.toString());
@@ -401,6 +472,165 @@ function renderSync(container, sync, projectId = '') {
   container.replaceChildren(heading, facts, note, exportLink);
 }
 
+function formatNumber(value) {
+  return new Intl.NumberFormat('pt-BR').format(Number(value) || 0);
+}
+
+function formatUsd(value) {
+  return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'USD', minimumFractionDigits: 4 }).format(Number(value) || 0);
+}
+
+function usageFilter(label, name, value, type = 'text') {
+  const wrapper = node('label', 'usage-filter');
+  wrapper.append(node('span', '', label));
+  const input = node('input');
+  input.name = name;
+  input.type = type;
+  input.value = String(value || '');
+  wrapper.append(input);
+  return wrapper;
+}
+
+function usageSelect(label, name, value, options) {
+  const wrapper = node('label', 'usage-filter');
+  wrapper.append(node('span', '', label));
+  const select = node('select');
+  select.name = name;
+  for (const [optionValue, optionLabel] of options) {
+    const option = node('option', '', optionLabel);
+    option.value = optionValue;
+    option.selected = optionValue === String(value || '');
+    select.append(option);
+  }
+  wrapper.append(select);
+  return wrapper;
+}
+
+function renderUsage(container, projectId, usage, { onFiltersChanged, onTranscript } = {}) {
+  const view = buildUsageViewModel(usage);
+  const filters = usage?.filters || {};
+  const heading = node('div', 'workspace-section-heading');
+  heading.append(node('p', 'eyebrow', 'PROJECT CONSUMPTION'), node('h2', '', 'Consumo'));
+
+  const filterForm = node('form', 'usage-filters');
+  filterForm.append(
+    usageFilter('De', 'from', filters.from, 'date'),
+    usageFilter('Até', 'to', filters.to, 'date'),
+    usageSelect('Escopo', 'role', filters.role, [['', 'Principal + subagentes'], ['main', 'Principal'], ['subagent', 'Subagentes']]),
+    usageFilter('Agente', 'agent_id', filters.agent_id || filters.agentId),
+    usageFilter('Subagente', 'subagent_id', filters.subagent_id || filters.subagentId),
+    usageFilter('Provedor', 'provider', filters.provider),
+    usageFilter('Provedor do modelo', 'model_provider', filters.model_provider || filters.modelProvider),
+    usageFilter('Modelo', 'model', filters.model),
+    usageFilter('Change', 'change', filters.change || filters.changeSlug),
+    usageFilter('Sessão', 'session_id', filters.session_id || filters.sessionId),
+    node('button', 'button-primary', 'Aplicar filtros'),
+  );
+  filterForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const form = new FormData(filterForm);
+    onFiltersChanged?.({
+      from: form.get('from') || '', to: form.get('to') || '', role: form.get('role') || '',
+      agent_id: form.get('agent_id') || '', subagent_id: form.get('subagent_id') || '',
+      provider: form.get('provider') || '', model_provider: form.get('model_provider') || '', model: form.get('model') || '',
+      change: form.get('change') || '', session_id: form.get('session_id') || '',
+    });
+  });
+
+  const cards = node('div', 'usage-summary-grid');
+  const summaryCards = [
+    ['Custo total', formatUsd(view.totalCost), `${formatUsd(view.mainCost)} principal · ${formatUsd(view.subagentCost)} subagentes`],
+    ['Tokens', formatNumber(view.tokens.total), `entrada ${formatNumber(view.tokens.input)} · saída ${formatNumber(view.tokens.output)}`],
+    ['Chamadas', formatNumber(view.callCount), `${formatNumber(view.sessions)} sessões · ${formatNumber(view.modelsCount)} modelos`],
+    ['Cobertura', view.coverage.label, `${formatNumber(view.coverage.total)} transcript(s)`],
+  ];
+  for (const [label, value, caption] of summaryCards) {
+    const card = node('article', 'usage-summary-card');
+    card.append(node('span', 'metric-label', label), node('strong', 'usage-summary-value', value), node('span', 'metric-caption', caption));
+    cards.append(card);
+  }
+
+  const content = [];
+  if (view.hasUnknownPricing) content.push(node('div', 'usage-warning', 'Há modelos sem tarifa conhecida. Os custos históricos registrados não foram recalculados.'));
+  if (view.wastedCost > 0) content.push(node('div', 'usage-callout', `Desperdício registrado em workflows interrompidos: ${formatUsd(view.wastedCost)}.`));
+
+  const tokenPanel = node('section', 'usage-panel');
+  tokenPanel.append(node('h3', '', 'Tokens por categoria'));
+  const tokenGrid = node('div', 'usage-token-grid');
+  for (const [label, value] of [['Entrada', view.tokens.input], ['Cache write', view.tokens.cacheWrite], ['Cache read', view.tokens.cacheRead], ['Saída', view.tokens.output], ['Reasoning', view.tokens.reasoning], ['Total', view.tokens.total]]) {
+    tokenGrid.append(fact(label, formatNumber(value)));
+  }
+  tokenPanel.append(tokenGrid);
+  content.push(tokenPanel);
+
+  const trendPanel = node('section', 'usage-panel');
+  trendPanel.append(node('h3', '', 'Tendência diária'));
+  const trend = node('div', 'usage-trend');
+  if (!view.trend.length) trend.append(node('p', 'muted', 'Sem atividade no período selecionado.'));
+  else for (const day of view.trend) {
+    const row = node('div', 'usage-trend-row');
+    row.append(node('span', '', day.date), node('span', '', `${formatNumber(day.tokens_total)} tokens`), node('strong', '', formatUsd(day.cost_usd)));
+    trend.append(row);
+  }
+  trendPanel.append(trend);
+  content.push(trendPanel);
+
+  const hierarchy = node('section', 'usage-panel usage-hierarchy');
+  hierarchy.append(node('h3', '', 'Agentes, modelos e subagentes'));
+  if (!view.agents.length) hierarchy.append(node('p', 'muted', 'Nenhum agente com consumo no período.'));
+  const renderAgent = (agent) => {
+    const details = node('details', 'usage-agent');
+    const summary = node('summary');
+    summary.append(node('strong', '', agent.agent_name || agent.agent_id), node('span', 'usage-agent-meta', `${agent.role} · ${formatNumber(agent.tokens_total)} tokens · ${formatUsd(agent.cost_usd)}`));
+    details.append(summary);
+    const models = node('div', 'usage-model-list');
+    for (const model of agent.models || []) {
+      const row = node('div', 'usage-model-row');
+      row.append(node('span', '', `${model.model_provider || '—'} · ${model.model || 'modelo sem nome'}`), node('span', '', `${formatNumber(model.tokens_total)} tokens`), node('strong', '', formatUsd(model.cost_usd)));
+      models.append(row);
+    }
+    details.append(models);
+    for (const child of agent.children || []) details.append(renderAgent(child));
+    return details;
+  };
+  for (const agent of view.agents) hierarchy.append(renderAgent(agent));
+  content.push(hierarchy);
+
+  const callsPanel = node('section', 'usage-panel usage-calls');
+  callsPanel.append(node('h3', '', 'Chamadas e transcripts'));
+  if (!view.calls.length) callsPanel.append(node('p', 'muted', 'Nenhuma chamada individual disponível; históricos agregados aparecem acima.'));
+  for (const call of view.calls) {
+    const details = node('details', 'usage-call');
+    const summary = node('summary');
+    summary.append(node('strong', '', call.model || 'modelo sem nome'), node('span', 'usage-agent-meta', `${call.role || 'principal'} · ${formatNumber(call.tokens?.total)} tokens · ${formatUsd(call.cost_usd)}`));
+    details.append(summary);
+    const copy = node('div', 'usage-call-copy');
+    copy.append(node('p', '', `Sessão: ${call.session_id || '—'} · Agente: ${call.agent_id || '—'}`));
+    copy.append(node('h4', '', 'Prompt'), node('pre', '', call.prompt || '—'), node('h4', '', 'Resposta'), node('pre', '', call.response || '—'));
+    if (call.transcript_id) {
+      const transcriptButton = node('button', 'reader-toggle', 'Abrir transcript completo');
+      const transcriptTarget = node('pre', 'usage-transcript', 'Carregando transcript…');
+      transcriptTarget.hidden = true;
+      transcriptButton.addEventListener('click', async () => {
+        transcriptTarget.hidden = false;
+        if (transcriptTarget.dataset.loaded) return;
+        try {
+          const transcript = await onTranscript?.(call.transcript_id);
+          transcriptTarget.textContent = transcript?.content || 'Transcript vazio.';
+          transcriptTarget.dataset.loaded = 'true';
+        } catch (error) {
+          transcriptTarget.textContent = error.message || 'Transcript indisponível.';
+        }
+      });
+      copy.append(transcriptButton, transcriptTarget);
+    }
+    details.append(copy);
+    callsPanel.append(details);
+  }
+  content.push(callsPanel);
+  container.replaceChildren(heading, filterForm, cards, ...content);
+}
+
 function renderReader(container, document) {
   const heading = node('div', 'reader-heading');
   heading.append(node('p', 'eyebrow', document.category), node('h2', '', document.title));
@@ -438,6 +668,8 @@ function startDashboardV2() {
     selectedId: '',
     filter: '',
     memory: new Map(),
+    usage: new Map(),
+    usageFilters: new Map(),
     route: parseObserverRoute(globalThis.location?.hash || ''),
   };
   const dashboardError = byId('dashboard-error');
@@ -497,6 +729,12 @@ function startDashboardV2() {
     if (!state.memory.has(projectId)) state.memory.set(projectId, await loadProjectMemory(fetchJson, projectId));
     return state.memory.get(projectId);
   };
+  const ensureProjectUsage = async (projectId) => {
+    const filters = state.usageFilters.get(projectId) || {};
+    const usage = await loadProjectUsage(fetchJson, projectId, filters);
+    state.usage.set(projectId, usage);
+    return usage;
+  };
   const renderSearchRoute = async (query) => {
     const model = state.models.find((item) => item.projectId === state.selectedId) || state.models[0];
     setHidden(dashboardPanel, true);
@@ -542,7 +780,16 @@ function startDashboardV2() {
         renderReader(workspaceContent, buildMemoryDocumentViewModel(payload, payload.content));
         return;
       }
-      if (route.section === 'sessions') renderSessions(workspaceContent, model.projectId, documents);
+      if (route.section === 'usage') {
+        const usage = await ensureProjectUsage(model.projectId);
+        renderUsage(workspaceContent, model.projectId, usage, {
+          onFiltersChanged: (filters) => {
+            state.usageFilters.set(model.projectId, filters);
+            renderWorkspaceRoute({ ...route });
+          },
+          onTranscript: (transcriptId) => loadProjectTranscript(fetchJson, model.projectId, transcriptId),
+        });
+      } else if (route.section === 'sessions') renderSessions(workspaceContent, model.projectId, documents);
       else if (route.section === 'memory') renderMemory(workspaceContent, model.projectId, documents);
       else if (route.section === 'changes') renderChanges(workspaceContent, model.projectId, documents);
       else if (route.section === 'sync') renderSync(workspaceContent, memory.sync, model.projectId);

package/web/observer/index.html

@@ -96,6 +96,7 @@
             <aside class="workspace-rail panel" aria-label="Navegação do projeto">
               <nav id="workspace-nav" class="workspace-nav">
                 <a data-workspace-section="overview" href="#project/project-a/overview">Overview</a>
+                <a data-workspace-section="usage" href="#project/project-a/usage">Consumo</a>
                 <a data-workspace-section="sessions" href="#project/project-a/sessions">Sessões</a>
                 <a data-workspace-section="memory" href="#project/project-a/memory">Memória</a>
                 <a data-workspace-section="changes" href="#project/project-a/changes">Changes</a>

package/web/observer/styles.css

@@ -183,6 +183,33 @@ input::placeholder { color: var(--faint); }
 .markdown-gap { height: .35em; }
 .sync-callout, .workspace-error { margin-top: 24px; padding: 17px; border: 1px solid rgba(156, 224, 198, .2); border-radius: var(--radius-sm); color: var(--muted); background: rgba(156, 224, 198, .05); font-size: .8rem; line-height: 1.5; }
 .workspace-error { border-color: rgba(245, 139, 131, .28); color: var(--red); background: rgba(245, 139, 131, .07); }
+.usage-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: 20px 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(7, 16, 21, .28); }
+.usage-filter { display: grid; gap: 5px; min-width: 112px; color: var(--faint); font-size: .61rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.usage-filter input, .usage-filter select { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: rgba(7, 16, 21, .65); font-size: .73rem; text-transform: none; }
+.button-primary { padding: 9px 12px; border: 1px solid rgba(156, 224, 198, .3); border-radius: 7px; color: var(--ink-950); background: var(--mint); font-size: .7rem; font-weight: 700; }
+.button-primary:hover { background: var(--mint-bright); }
+.usage-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
+.usage-summary-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(20, 43, 50, .45); }
+.usage-summary-value { display: block; overflow: hidden; margin: 10px 0 5px; color: var(--mint-bright); font-family: Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.75rem); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
+.usage-warning { margin-bottom: 12px; padding: 13px 15px; border: 1px solid rgba(246, 189, 114, .3); border-radius: var(--radius-sm); color: var(--amber); background: rgba(246, 189, 114, .07); font-size: .76rem; line-height: 1.45; }
+.usage-panel { margin-top: 14px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(7, 16, 21, .25); }
+.usage-panel h3 { margin: 0 0 13px; color: var(--mint-bright); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
+.usage-token-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
+.usage-token-grid .fact { min-width: 0; padding: 10px; }
+.usage-trend { display: grid; gap: 6px; }
+.usage-trend-row, .usage-model-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 11px; border-radius: 7px; color: var(--muted); background: rgba(20, 43, 50, .38); font-size: .72rem; }
+.usage-trend-row strong, .usage-model-row strong { color: var(--mint); font-weight: 600; }
+.usage-agent { border-top: 1px solid var(--line); }
+.usage-agent:first-of-type { border-top: 0; }
+.usage-agent summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; cursor: pointer; color: var(--text); font-size: .78rem; }
+.usage-agent-meta { color: var(--muted); font-size: .68rem; font-weight: 400; }
+.usage-model-list { display: grid; gap: 6px; padding: 0 0 12px 17px; }
+.usage-call { border-top: 1px solid var(--line); }
+.usage-call:first-of-type { border-top: 0; }
+.usage-call summary { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; cursor: pointer; font-size: .76rem; }
+.usage-call-copy { padding: 0 0 15px 17px; color: var(--muted); font-size: .72rem; }
+.usage-call-copy h4 { margin: 13px 0 6px; color: var(--faint); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
+.usage-call-copy pre, .usage-transcript { max-height: 260px; overflow: auto; margin: 6px 0; padding: 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--mint-bright); background: rgba(7, 16, 21, .62); font-family: "Cascadia Code", "Consolas", monospace; font-size: .7rem; line-height: 1.5; white-space: pre-wrap; }
 .footer-note { display: flex; justify-content: center; gap: 8px; padding: 18px 0 28px; color: var(--faint); font-size: .7rem; }
 .footer-separator { color: var(--line-strong); }
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@@ -196,7 +223,7 @@ input::placeholder { color: var(--faint); }
   .detail-panel { min-height: 420px; }
   .workspace-layout { grid-template-columns: 1fr; }
   .workspace-rail { order: 0; }
-  .workspace-nav { grid-template-columns: repeat(5, 1fr); }
+  .workspace-nav { grid-template-columns: repeat(6, 1fr); }
   .workspace-nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 9px 6px; text-align: center; }
   .workspace-nav a:hover, .workspace-nav a.is-active { border-bottom-color: var(--amber); border-left-color: transparent; }
   .workspace-meta { display: none; }
@@ -212,12 +239,18 @@ input::placeholder { color: var(--faint); }
   .panel-heading { flex-direction: column; }
   .search-field, .search-field input { width: 100%; }
   .detail-facts { grid-template-columns: 1fr; }
+  .usage-summary-grid { grid-template-columns: repeat(2, 1fr); }
+  .usage-token-grid { grid-template-columns: repeat(3, 1fr); }
   .detail-header { flex-direction: column; }
   .workspace-header { grid-template-columns: 1fr auto; align-items: start; gap: 13px; }
   .workspace-header .back-link { grid-column: 1 / -1; }
   .workspace-header h1 { font-size: 2.8rem; }
   .workspace-content { padding: 20px 15px; }
   .workspace-nav { grid-template-columns: repeat(3, 1fr); }
+  .usage-filters { align-items: stretch; flex-direction: column; }
+  .usage-filter, .usage-filter input, .usage-filter select, .button-primary { width: 100%; }
+  .usage-summary-grid { grid-template-columns: 1fr; }
+  .usage-token-grid { grid-template-columns: repeat(2, 1fr); }
   .memory-document-row { grid-template-columns: 28px minmax(0, 1fr); }
   .memory-document-size { display: none; }
   .footer-note { flex-direction: column; align-items: center; gap: 4px; }