wendkeep 0.71.1 → 0.72.0

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