@polymorphism-tech/morph-spec 9.7.0 → 10.0.0

package/src/dashboard/app/components/GatePauses.jsx

@@ -0,0 +1,116 @@
+import { useMorphQuery } from '../hooks/useMorphQuery.js';
+import { apiBase } from '../lib/project.js';
+
+// Validated with the dataviz palette checker against --color-core (#12151b), dark mode.
+const SESSION = '#26a69a';
+const HUMAN = '#d07f27';
+// Not a series: pauses logged before the resolver existed, so nobody knows who cleared them.
+const UNKNOWN = 'var(--color-gray-500)';
+const GATE_ORDER = ['plan', 'uiux', 'review'];
+const GATE_LABEL = { plan: 'Plano', uiux: 'Design', review: 'Gate 3' };
+
+function split(s = {}) {
+  const unknown = s.pausedUnattributed ?? 0;
+  const human = Math.max(0, (s.pausedForHuman ?? 0) - unknown);
+  return { human, unknown, session: Math.max(0, (s.paused ?? 0) - human - unknown) };
+}
+
+export function gateRows(gates = {}) {
+  const known = GATE_ORDER.filter((g) => gates[g]);
+  const extra = Object.keys(gates).filter((g) => !GATE_ORDER.includes(g)).sort();
+  return [...known, ...extra].map((g) => ({ gate: g, label: GATE_LABEL[g] ?? g, decisions: gates[g].decisions ?? 0, ...split(gates[g]) }));
+}
+
+export function humanSignals(gates = {}, top = 5) {
+  return Object.entries(gates)
+    .flatMap(([gate, slot]) => Object.entries(slot.bySignal ?? {}).map(([signal, s]) => ({ gate, signal, ...split(s) })))
+    .filter((r) => r.human > 0 || r.unknown > 0)
+    .sort((a, b) => b.human - a.human || b.unknown - a.unknown || a.signal.localeCompare(b.signal))
+    .slice(0, top);
+}
+
+function Swatch({ color, children }) {
+  return <span className="flex items-center gap-1.5"><span className="h-2.5 w-2.5 rounded-sm" style={{ background: color }} />{children}</span>;
+}
+
+function Bar({ row, max }) {
+  const parts = [
+    ['session', row.session, SESSION, 'a sessão resolveu'],
+    ['human', row.human, HUMAN, 'foi para você'],
+    ['unknown', row.unknown, UNKNOWN, 'antes do registro'],
+  ].filter(([, n]) => n > 0);
+  const total = row.session + row.human + row.unknown;
+  const describe = parts.map(([, n, , what]) => `${what} ${n}`).join(', ');
+  return (
+    <div className="grid grid-cols-[4.5rem_1fr_auto] items-center gap-3">
+      <span className="text-sm text-[var(--color-fg)]">{row.label}</span>
+      <div className="flex h-3 gap-[2px]" role="img" aria-label={`${row.label}: ${describe || 'nenhuma pausa'}`}>
+        {parts.map(([key, n, color, what], i) => (
+          <span key={key} className={`h-full ${i === 0 ? 'rounded-l-[4px]' : ''} ${i === parts.length - 1 ? 'rounded-r-[4px]' : ''}`}
+            style={{ width: `${(n / max) * 100}%`, background: color }} title={`${row.label} · ${what}: ${n}`} />
+        ))}
+      </div>
+      <span className="text-right text-xs tabular-nums text-[var(--color-dim)]">
+        {total === 0 ? `nenhuma pausa em ${row.decisions}` : `${row.human} de ${total} para você`}
+      </span>
+    </div>
+  );
+}
+
+export function GatePausesView({ gates }) {
+  const rows = gateRows(gates);
+  if (rows.length === 0) {
+    return <p className="text-sm text-[var(--color-faint)]">Nenhuma decisão de gate na telemetria ainda.</p>;
+  }
+  const max = Math.max(1, ...rows.map((r) => r.session + r.human + r.unknown));
+  const signals = humanSignals(gates);
+  const anyUnknown = rows.some((r) => r.unknown > 0);
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h2 className="text-base font-semibold">Pausas por gate</h2>
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-[var(--color-dim)]" aria-hidden="true">
+          <Swatch color={SESSION}>a sessão resolveu</Swatch>
+          <Swatch color={HUMAN}>foi para você</Swatch>
+          {anyUnknown && <Swatch color={UNKNOWN}>antes do registro</Swatch>}
+        </div>
+      </div>
+      <div className="space-y-2.5">{rows.map((r) => <Bar key={r.gate} row={r} max={max} />)}</div>
+      {anyUnknown && (
+        <p className="text-xs text-[var(--color-faint)]">Pausas gravadas antes de o morph-spec registrar quem resolve cada uma: não entram na conta de "para você".</p>
+      )}
+      {signals.length > 0 && (
+        <table className="w-full text-sm">
+          <caption className="mb-2 text-left text-xs text-[var(--color-dim)]">O que mais te chamou</caption>
+          <thead className="text-xs text-[var(--color-faint)]">
+            <tr>
+              <th className="pb-1 text-left font-normal">sinal</th>
+              <th className="pb-1 text-left font-normal">gate</th>
+              <th className="pb-1 text-right font-normal">para você</th>
+              <th className="pb-1 text-right font-normal">sessão</th>
+              {anyUnknown && <th className="pb-1 text-right font-normal">antes</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {signals.map((s) => (
+              <tr key={`${s.gate}:${s.signal}`} className="border-t border-[var(--color-hair)]">
+                <td className="py-1.5 font-mono text-xs text-[var(--color-fg)]">{s.signal}</td>
+                <td className="py-1.5 text-[var(--color-dim)]">{GATE_LABEL[s.gate] ?? s.gate}</td>
+                <td className="py-1.5 text-right tabular-nums text-[var(--color-fg)]">{s.human}</td>
+                <td className="py-1.5 text-right tabular-nums text-[var(--color-dim)]">{s.session}</td>
+                {anyUnknown && <td className="py-1.5 text-right tabular-nums text-[var(--color-faint)]">{s.unknown}</td>}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+export default function GatePauses({ project }) {
+  const { data, error } = useMorphQuery(`${apiBase(project)}/gates`, { scope: 'activity', project });
+  if (error) return <p className="text-sm text-[var(--color-bad)]">Não consegui ler os gates: {error}</p>;
+  if (!data) return <p className="text-sm text-[var(--color-faint)]">Lendo a telemetria…</p>;
+  return <GatePausesView gates={data.gates} />;
+}

package/src/dashboard/app/components/SessionMap.jsx

@@ -0,0 +1,77 @@
+import { clock, timeAgo } from '../lib/format.js';
+
+const MARK = {
+  verify: { label: 'verify', color: (m) => (m.status === 'fail' ? 'var(--color-bad)' : 'var(--color-ok)') },
+  failure: { label: 'falha', color: () => 'var(--color-bad)' },
+  gate: { label: 'gate', color: () => 'var(--color-fg)' },
+  dispatch: { label: 'sub-agent', color: () => 'var(--color-phase-uiux)' },
+  handback: { label: 'sub-agent', color: () => 'var(--color-phase-uiux)' },
+  prompt: { label: 'você', color: () => 'var(--color-dim)' },
+  question: { label: 'você', color: () => 'var(--color-dim)' },
+};
+const LEGEND = [
+  ['verify verde', 'var(--color-ok)'], ['verify vermelho ou falha', 'var(--color-bad)'],
+  ['gate', 'var(--color-fg)'], ['sub-agent', 'var(--color-phase-uiux)'], ['você', 'var(--color-dim)'],
+];
+
+function Strip({ session }) {
+  const start = Date.parse(session.start);
+  const span = Math.max(1, Date.parse(session.end) - start);
+  return (
+    <div className="relative h-6" role="img"
+      aria-label={`${session.marks.length} marcos entre ${clock(session.start)} e ${clock(session.end)}`}>
+      <div className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--color-hair-strong)]" />
+      {session.marks.map((m, i) => {
+        const at = ((Date.parse(m.ts) - start) / span) * 100;
+        return (
+          <span key={`${m.ts}:${i}`} title={`${clock(m.ts)} · ${m.title}`}
+            className="absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-[var(--color-core)]"
+            style={{ left: `${at}%`, background: (MARK[m.kind] ?? MARK.gate).color(m) }} />
+        );
+      })}
+    </div>
+  );
+}
+
+export default function SessionMap({ session, now = Date.now() }) {
+  if (session === undefined) return <p className="text-sm text-[var(--color-faint)]">Lendo a telemetria…</p>;
+  if (!session) return <p className="text-sm text-[var(--color-faint)]">Nenhuma ação registrada para esta feature ainda.</p>;
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-[var(--color-dim)]">
+        Última sessão: <span className="text-[var(--color-fg)]">{clock(session.start)}–{clock(session.end)}</span>,
+        {' '}{timeAgo(session.end, now)} · {session.actions} ações
+      </p>
+      <div>
+        <Strip session={session} />
+        <div className="mt-1 flex justify-between font-mono text-[11px] text-[var(--color-faint)]">
+          <span>{clock(session.start)}</span><span>{clock(session.end)}</span>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-[var(--color-dim)]" aria-hidden="true">
+        {LEGEND.map(([label, color]) => (
+          <span key={label} className="flex items-center gap-1.5"><span className="h-2 w-2 rounded-full" style={{ background: color }} />{label}</span>
+        ))}
+      </div>
+      {session.lastFailure && (
+        <p className="text-sm text-[var(--color-bad)]">
+          Parou em: {session.lastFailure.title}, {clock(session.lastFailure.ts)}
+          {session.lastFailure.detail && <span className="mt-0.5 block truncate font-mono text-xs text-[var(--color-dim)]">{session.lastFailure.detail}</span>}
+        </p>
+      )}
+      {session.files.length > 0 && (
+        <div>
+          <p className="mb-1.5 text-xs text-[var(--color-faint)]">Mexeu mais em</p>
+          <ul className="space-y-1">
+            {session.files.map((f) => (
+              <li key={f.path} className="flex items-baseline justify-between gap-3 text-sm">
+                <span className="min-w-0 truncate font-mono text-xs text-[var(--color-fg)]" title={f.path}>{f.path}</span>
+                <span className="shrink-0 tabular-nums text-xs text-[var(--color-dim)]">{f.edits}×</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/dashboard/app/main.jsx

@@ -1,13 +1,13 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App.jsx';
-import './styles/index.css';
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>
-);
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

package/src/dashboard/app/pages/Activity.jsx

@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom';
 import ActivityFeed from '../components/ActivityFeed.jsx';
+import GatePauses from '../components/GatePauses.jsx';
 import { useProjects } from '../lib/project.js';
 
 export default function Activity() {
@@ -16,6 +17,9 @@ export default function Activity() {
           os sub-agents despachados, os verifies e os gates. Atualiza sozinho enquanto ele trabalha.
         </p>
       </header>
+      <div className="rise-2 bezel mb-6">
+        <div className="bezel-core px-5 py-5"><GatePauses project={project} /></div>
+      </div>
       <div className="rise-2 bezel">
         <div className="bezel-core px-5 py-5"><ActivityFeed project={project} showFeature /></div>
       </div>

package/src/dashboard/app/pages/AgentMap.jsx

@@ -76,9 +76,8 @@ function buildLayout(nodes, edges) {
 }
 
 function dispatchingSkills(agent) {
-  const implementer = (agent.activePhases || []).includes('implement');
   return (morphData.skills || []).filter((s) => (s.dispatches || []).some(
-    (d) => (d.personas || []).includes(agent.id) || (d.generic && implementer),
+    (d) => (d.personas || []).includes(agent.id),
   ));
 }