@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

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

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { FolderSimplePlus, X, ArrowRight } from '@phosphor-icons/react';
+import { FeatureRow, isWorking } from './Features.jsx';
+import { useProjects, projectHref, announceProjectsChanged } from '../lib/project.js';
+import { useNow } from '../hooks/usePref.js';
+import { timeAgo } from '../lib/format.js';
+
+const ACTIVE_SHOWN = 4;
+
+async function send(method, url, body) {
+  const res = await fetch(url, {
+    method,
+    headers: body ? { 'Content-Type': 'application/json' } : undefined,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const out = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(out.error || `HTTP ${res.status}`);
+  return out;
+}
+
+function ProjectBlock({ p, now, onRemove }) {
+  const s = p.summary;
+  const working = s ? s.activeFeatures.filter((f) => isWorking(f, now)).length : 0;
+  // What waits on you is already listed at the top of the page; here, the rest, latest first.
+  const rest = s ? s.activeFeatures.filter((f) => !f.awaiting) : [];
+  const shown = [...rest].sort((a, b) => (b.lastActivity?.ts || '').localeCompare(a.lastActivity?.ts || '')).slice(0, ACTIVE_SHOWN);
+  return (
+    <section className="bezel" aria-label={p.name}>
+      <div className="bezel-core overflow-hidden">
+        <header className="flex flex-col gap-3 px-5 py-4 md:flex-row md:items-center md:justify-between">
+          <div className="min-w-0">
+            <Link to={projectHref(p.id)} className="text-lg font-semibold tracking-tight hover:underline underline-offset-4">{p.name}</Link>
+            <p className="mt-0.5 truncate font-mono text-xs text-[var(--color-faint)]" title={p.dir}>{p.dir}</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-x-5 gap-y-1 whitespace-nowrap text-sm md:shrink-0">
+            {!s && <span className="text-[var(--color-faint)]">lendo…</span>}
+            {s && (
+              <>
+                <span className="text-[var(--color-dim)]"><span className="font-mono text-[var(--color-fg)]">{s.active}</span> ativas</span>
+                {s.awaiting > 0 && <span className="text-[var(--color-warn)]"><span className="font-mono">{s.awaiting}</span> esperando você</span>}
+                {working > 0 && <span className="text-[var(--color-phase-implement)]">agente trabalhando</span>}
+                <span className="text-xs text-[var(--color-faint)]">{s.lastActivityTs ? `atividade ${timeAgo(s.lastActivityTs, now)}` : `${s.total} features`}</span>
+              </>
+            )}
+            <Link to={projectHref(p.id)} aria-label={`Abrir ${p.name}`}
+              className="fluid flex h-8 w-8 items-center justify-center rounded-full bg-white/[0.05] text-[var(--color-dim)] transition-transform hover:translate-x-0.5 hover:text-[var(--color-fg)]">
+              <ArrowRight weight="light" size={15} />
+            </Link>
+            {!p.launch && (
+              <button type="button" onClick={() => onRemove(p)} aria-label={`Remover ${p.name} do portfólio`} title="Remover do portfólio (não apaga nada)"
+                className="fluid flex h-8 w-8 items-center justify-center rounded-full text-[var(--color-faint)] transition-colors hover:bg-white/[0.05] hover:text-[var(--color-dim)]">
+                <X weight="light" size={14} />
+              </button>
+            )}
+          </div>
+        </header>
+        {s && shown.length > 0 && (
+          <ul className="divide-y divide-[var(--color-hair)] border-t border-[var(--color-hair)]">
+            {shown.map((f) => <FeatureRow key={f.name} f={f} now={now} project={p.id} />)}
+          </ul>
+        )}
+        {s && rest.length > ACTIVE_SHOWN && (
+          <Link to={projectHref(p.id)} className="block border-t border-[var(--color-hair)] px-5 py-2.5 text-sm text-[var(--color-dim)] hover:text-[var(--color-fg)]">
+            Ver as {s.active} features ativas
+          </Link>
+        )}
+        {s && s.active === 0 && (
+          <p className="border-t border-[var(--color-hair)] px-5 py-3 text-sm text-[var(--color-faint)]">
+            {s.legacyStateOnly ? 'Projeto no modelo de estado antigo: rode morph-spec update nele.' : 'Nada em andamento.'}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function PortfolioView({ data, now = Date.now(), onAdd = () => {}, onRemove = () => {}, busy = null, error = null }) {
+  const projects = data.projects || [];
+  const ready = projects.filter((p) => p.summary);
+  const totalActive = ready.reduce((n, p) => n + p.summary.active, 0);
+  const totalAwaiting = ready.reduce((n, p) => n + p.summary.awaiting, 0);
+  const awaiting = ready.flatMap((p) => p.summary.activeFeatures.filter((f) => f.awaiting).map((f) => ({ f, p })));
+  const ordered = [...projects].sort((a, b) => (b.summary?.lastActivityTs || '').localeCompare(a.summary?.lastActivityTs || ''));
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 pb-24 pt-10 md:px-10 md:pt-14">
+      <header className="rise mb-10">
+        <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">Portfólio</h1>
+        <p className="mt-3 text-sm text-[var(--color-dim)]">
+          {projects.length} {projects.length === 1 ? 'projeto' : 'projetos'}, {totalActive} features ativas
+          {totalAwaiting > 0 && <span className="text-[var(--color-warn)]">, {totalAwaiting} esperando você</span>}
+        </p>
+      </header>
+
+      {awaiting.length > 0 && (
+        <section className="rise-2 mb-10">
+          <h2 className="mb-3 px-1 text-sm font-medium">Esperando você</h2>
+          <div className="bezel">
+            <ul className="bezel-core divide-y divide-[var(--color-hair)] overflow-hidden">
+              {awaiting.map(({ f, p }) => <FeatureRow key={`${p.id}:${f.name}`} f={f} now={now} project={p.id} projectName={p.name} />)}
+            </ul>
+          </div>
+        </section>
+      )}
+
+      <div className="rise-3 space-y-6">
+        {ordered.map((p) => <ProjectBlock key={p.id} p={p} now={now} onRemove={onRemove} />)}
+      </div>
+
+      <section className="mt-14" aria-labelledby="found">
+        <h2 id="found" className="px-1 text-sm font-medium">Outros projetos com morph-spec</h2>
+        <p className="mb-4 mt-1 px-1 text-sm text-[var(--color-dim)]">
+          Encontrados nas pastas vizinhas dos projetos acima. Projetos também entram sozinhos quando você roda
+          <code className="mx-1 font-mono text-[var(--color-fg)]">morph-spec init</code>,
+          <code className="mx-1 font-mono text-[var(--color-fg)]">update</code> ou
+          <code className="mx-1 font-mono text-[var(--color-fg)]">dashboard</code> neles.
+        </p>
+        {error && <p className="mb-3 px-1 text-sm text-[var(--color-bad)]">{error}</p>}
+        {(data.suggestions || []).length === 0 && <p className="px-1 text-sm text-[var(--color-faint)]">Nenhum outro encontrado.</p>}
+        <ul className="grid grid-cols-1 gap-2 md:grid-cols-2">
+          {(data.suggestions || []).map((s) => (
+            <li key={s.dir} className="flex min-w-0 items-center justify-between gap-3 rounded-xl px-4 py-3 shadow-[inset_0_0_0_1px_var(--color-hair)]">
+              <div className="min-w-0">
+                <p className="truncate text-sm text-[var(--color-fg)]">{s.name}</p>
+                <p className="truncate font-mono text-xs text-[var(--color-faint)]" title={s.dir}>{s.dir}</p>
+              </div>
+              <button type="button" onClick={() => onAdd(s.dir)} disabled={busy === s.dir}
+                className="fluid inline-flex shrink-0 items-center gap-1.5 rounded-full bg-white/[0.06] px-3 py-1.5 text-sm text-[var(--color-fg)] transition-colors hover:bg-white/[0.1] active:scale-[0.98] disabled:opacity-50">
+                <FolderSimplePlus weight="light" size={15} /> {busy === s.dir ? 'Adicionando…' : 'Adicionar'}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}
+
+export default function Portfolio() {
+  const { data, error } = useProjects();
+  const now = useNow();
+  const [busy, setBusy] = useState(null);
+  const [actionError, setActionError] = useState(null);
+  const run = async (dir, fn) => {
+    setBusy(dir); setActionError(null);
+    // The server also pushes the change; reading again here does not depend on it.
+    try { await fn(); announceProjectsChanged(); } catch (err) { setActionError(err.message); } finally { setBusy(null); }
+  };
+  const onAdd = (dir) => run(dir, () => send('POST', '/api/morph/projects', { dir }));
+  const onRemove = (p) => run(p.dir, () => send('DELETE', `/api/morph/projects?dir=${encodeURIComponent(p.dir)}`));
+
+  if (error) return <p className="px-10 pt-16 text-sm text-[var(--color-bad)]">Não consegui ler o portfólio: {error}</p>;
+  if (!data) return <p className="px-10 pt-16 text-sm text-[var(--color-faint)]">Lendo os projetos…</p>;
+  return <PortfolioView data={data} now={now} onAdd={onAdd} onRemove={onRemove} busy={busy} error={actionError} />;
+}

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

@@ -0,0 +1,101 @@
+import morphData from 'virtual:morph-data';
+import KnowledgeMarkdown from '../components/KnowledgeMarkdown.jsx';
+import { useSelection } from '../components/EntityLink.jsx';
+
+const DOCS = morphData.docs || { rubrics: [], proofRubrics: [] };
+const README = DOCS.rubrics.find((r) => r.id === 'README');
+const DIMENSIONS = DOCS.rubrics.filter((r) => r.id !== 'README' && r.id !== 'condensed');
+const CONDENSED = DOCS.rubrics.find((r) => r.id === 'condensed');
+const VALIDATORS = morphData.rubrics || [];
+
+const GROUPS = [
+  { title: 'Dimensões do avaliador', hint: 'o score composto sai destas quatro', items: DIMENSIONS.map((r) => ({ key: `dim:${r.id}`, title: r.title, doc: r })) },
+  { title: 'Versão curta', hint: 'usada na avaliação por task', items: CONDENSED ? [{ key: 'dim:condensed', title: CONDENSED.title, doc: CONDENSED }] : [] },
+  { title: 'Provas', hint: 'o que o avaliador precisa ver acontecer', items: DOCS.proofRubrics.filter((r) => r.id !== 'README').map((r) => ({ key: `proof:${r.id}`, title: r.title, doc: r })) },
+  { title: 'Validadores determinísticos', hint: 'pesos por categoria no verify', items: VALIDATORS.map((v) => ({ key: `val:${v.id}`, title: `Rubrica ${v.id}`, validator: v })) },
+].filter((g) => g.items.length);
+
+const ALL = GROUPS.flatMap((g) => g.items);
+
+function ValidatorRubric({ v }) {
+  return (
+    <article className="prose-morph">
+      <h1>Rubrica {v.id}</h1>
+      {v.description && <p>{v.description}</p>}
+      <table>
+        <thead><tr><th>Categoria</th><th>Peso</th><th>Validadores</th><th>O que mede</th></tr></thead>
+        <tbody>
+          {Object.entries(v.categories).map(([name, c]) => (
+            <tr key={name}>
+              <td>{name}</td>
+              <td className="font-mono">{c.weight ?? '—'}</td>
+              <td className="font-mono text-xs">{(c.validators || []).join(', ') || '—'}</td>
+              <td>{c.description || ''}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p>Aprova com <strong>{v.thresholds?.approve ?? '—'}</strong>; abaixo de <strong>{v.thresholds?.retry ?? '—'}</strong> a task volta para correção.</p>
+    </article>
+  );
+}
+
+export function RubricsView({ sel, onSel }) {
+  const current = ALL.find((i) => i.key === sel) || null;
+  return (
+    <div className="mx-auto max-w-7xl px-4 pb-24 pt-10 md:px-10 md:pt-14">
+      <header className="rise mb-8">
+        <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">Rubricas</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-[var(--color-dim)]">
+          Com o que o trabalho é julgado. O avaliador independente pontua cada dimensão de 0 a 10, e o Gate 3 exige score composto 9.
+          Os validadores rodam no <span className="font-mono text-[var(--color-fg)]">morph-spec verify</span>, sem modelo.
+        </p>
+      </header>
+      <div className="rise-2 grid gap-6 lg:grid-cols-[17rem_minmax(0,1fr)]">
+        <nav aria-label="Rubricas" className="lg:sticky lg:top-4 lg:self-start">
+          <button
+            type="button"
+            onClick={() => onSel(null)}
+            aria-current={!current ? 'page' : undefined}
+            className={['fluid mb-4 block w-full rounded-lg px-3 py-2 text-left text-sm transition-colors', !current ? 'bg-white/[0.08] text-[var(--color-fg)]' : 'text-[var(--color-dim)] hover:bg-white/[0.04]'].join(' ')}
+          >
+            Como a nota é calculada
+          </button>
+          {GROUPS.map((g) => (
+            <div key={g.title} className="mb-5">
+              <p className="px-3 text-xs text-[var(--color-faint)]">{g.title}</p>
+              <p className="mb-1.5 px-3 text-[11px] text-[var(--color-faint)]">{g.hint}</p>
+              <ul>
+                {g.items.map((i) => (
+                  <li key={i.key}>
+                    <button
+                      type="button"
+                      onClick={() => onSel(i.key)}
+                      aria-current={current?.key === i.key ? 'page' : undefined}
+                      className={['fluid block w-full truncate rounded-lg px-3 py-1.5 text-left text-sm transition-colors', current?.key === i.key ? 'bg-white/[0.08] text-[var(--color-fg)]' : 'text-[var(--color-dim)] hover:bg-white/[0.04] hover:text-[var(--color-fg)]'].join(' ')}
+                      title={i.title}
+                    >
+                      {i.title}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+        <div className="bezel min-w-0">
+          <div className="bezel-core min-w-0 px-6 py-8 md:px-12 md:py-10">
+            {!current && (README ? <KnowledgeMarkdown text={README.content} /> : <p className="text-sm text-[var(--color-dim)]">Escolha uma rubrica.</p>)}
+            {current?.doc && <KnowledgeMarkdown text={current.doc.content} />}
+            {current?.validator && <ValidatorRubric v={current.validator} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Rubrics() {
+  const [sel, setSel] = useSelection();
+  return <RubricsView sel={sel} onSel={setSel} />;
+}