@polymorphism-tech/morph-spec 9.8.0 → 10.1.1

package/src/commands/validation/verify.js

@@ -14,6 +14,7 @@ import { afterHeavyRun } from '../../lib/heavy/cleanup.js';
 import { memoryBusyHint } from '../../lib/heavy/live-stacks.js';
 import { readHeavyConfig } from '../../../framework/hooks/shared/heavy-config.js';
 import { runCiVerify, CiUsageError, reusableLocalStamp } from '../../lib/ci/ci-verify.js';
+import { syncStackRules } from '../../lib/installers/stack-sync.js';
 
 function statusIcon(status) {
   if (status === 'pass') return chalk.green('✓');
@@ -57,12 +58,6 @@ function formatVerifyResult(result) {
     for (const line of result.feedback) lines.push(`  ${line}`);
   }
 
-  if (result.traceability?.warnings?.length > 0) {
-    lines.push('');
-    lines.push(chalk.yellow('Traceability warnings (advisory — never fails verify):'));
-    for (const w of result.traceability.warnings) lines.push(`  ⚠ ${w}`);
-  }
-
   lines.push('');
   return lines.join('\n');
 }
@@ -180,6 +175,8 @@ export async function verifyCommand(featureName, options = {}) {
     process.exit(2);
   }
 
+  syncStackRules(process.cwd(), { persistTags: false, log: (line) => console.error(chalk.gray(line)) });
+
   if (options.ci) {
     const conflict = CI_EXCLUSIVE_FLAGS.find(([flag]) => options[flag])?.[1];
     if (conflict) {

package/src/core/paths/output-schema.js

@@ -3,12 +3,12 @@ import { join } from 'path';
 export const OUTPUT_SCHEMA = {
   plan:           { filename: 'plan.md',               phaseDir: '2-plan',      phase: 'plan',      protected: true,  approvalGate: 'plan' },
   checks:         { filename: 'checks.json',           phaseDir: '2-plan',      phase: 'plan',      protected: true,  approvalGate: 'plan' },
+  planCritique:   { filename: 'critica.md',            phaseDir: '2-plan',      phase: 'plan',      protected: false },
+  planView:       { filename: 'plan.html',             phaseDir: '2-plan',      phase: 'plan',      protected: false },
 
-  uiDesignSystem: { filename: 'design-system.md',      phaseDir: '1-design',    phase: 'uiux',      protected: true,  approvalGate: 'uiux' },
   uiMockups:      { filename: 'mockups.md',            phaseDir: '1-design',    phase: 'uiux',      protected: true,  approvalGate: 'uiux' },
-  uiComponents:   { filename: 'components.md',         phaseDir: '1-design',    phase: 'uiux',      protected: true,  approvalGate: 'uiux' },
-  uiFlows:        { filename: 'flows.md',              phaseDir: '1-design',    phase: 'uiux',      protected: true,  approvalGate: 'uiux' },
 
+  implementReport: { filename: 'report.md',           phaseDir: '3-implement', phase: 'implement', protected: false },
   evidencias:     { dirname: 'evidencias', filenamePattern: '^C\\d+\\.md$', displayFilename: '{Cn}.md',
                     phaseDir: '3-implement', phase: 'implement', protected: false, multi: true },
 

package/src/core/state/state-manager.js

@@ -450,10 +450,8 @@ export async function markOutput(featureName, outputType) {
     if (suggestion) {
       errorMsg += `\n\nDid you mean '${suggestion}'?`;
       const kebabAlternative = {
-        'uiDesignSystem': 'ui-design-system',
         'uiMockups': 'ui-mockups',
-        'uiComponents': 'ui-components',
-        'uiFlows': 'ui-flows'
+        'implementReport': 'implement-report'
       }[suggestion];
       if (kebabAlternative) {
         errorMsg += ` (also accepts '${kebabAlternative}')`;
@@ -462,7 +460,7 @@ export async function markOutput(featureName, outputType) {
 
     errorMsg += `\n\nValid types:\n`;
     errorMsg += `  ${validCamelCaseTypes.join(', ')}\n`;
-    errorMsg += `\nNote: kebab-case is also accepted (e.g., 'ui-design-system', 'stack-scan')`;
+    errorMsg += `\nNote: kebab-case is also accepted (e.g., 'ui-mockups', 'implement-report')`;
 
     throw new Error(errorMsg);
   }

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

@@ -8,7 +8,7 @@ import { useMorphQuery } from '../hooks/useMorphQuery.js';
 import { apiBase, projectHref, featureHref } from '../lib/project.js';
 
 const KIND_LABEL = {
-  page: 'Página', project: 'Projeto', feature: 'Feature', slice: 'Fatia', skill: 'Skill', persona: 'Persona',
+  page: 'Página', project: 'Projeto', feature: 'Feature', skill: 'Skill', persona: 'Persona',
   standard: 'Standard', rule: 'Rule', hook: 'Hook', guide: 'Guia',
 };
 
@@ -46,9 +46,6 @@ function featureIndex(project, features, projectName = null) {
   const where = (text) => (projectName ? (text ? `${projectName}: ${text}` : projectName) : text);
   for (const f of features || []) {
     out.push({ kind: 'feature', title: f.name, hint: where(f.description), to: featureHref(project, f.name), hay: `${f.name} ${f.description || ''} ${projectName || ''}` });
-    for (const sl of f.sliceIndex || []) {
-      out.push({ kind: 'slice', title: `${sl.id} ${sl.title}`, hint: where(f.name), to: featureHref(project, f.name, '?tab=slices'), hay: `${sl.id} ${sl.title} ${f.name} ${projectName || ''}` });
-    }
   }
   return out;
 }
@@ -112,7 +109,7 @@ export default function CommandPalette({ open, onClose, portfolio, project }) {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={onKey}
-              placeholder="Buscar features, fatias, skills, personas, standards, seções do guia…"
+              placeholder="Buscar features, skills, personas, standards, seções do guia…"
               className="w-full bg-transparent text-base text-[var(--color-fg)] outline-none focus-visible:outline-none placeholder:text-[var(--color-faint)]"
               aria-controls="palette-results"
               aria-activedescendant={results[active] ? `palette-${active}` : undefined}

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/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),
   ));
 }