@polymorphism-tech/morph-spec 8.37.1 → 8.40.0

package/src/dashboard/app/hooks/useMorphQuery.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Fetch a `/api/morph/*` resource and refetch it whenever the dev server
+ * reports that the project's `.morph/` changed in the given scope.
+ *
+ * `scope` matches the server's invalidation: 'features' (feature.json,
+ * tasks.json, artifacts) or 'activity' (events.jsonl). A refetch keeps the old
+ * data on screen until the new one arrives — no flash of "loading" while an
+ * agent is working.
+ *
+ * @param {string|null} url - null skips the request
+ * @param {{ scope?: string|string[], project?: string }} [opts] - `scope`: 'features',
+ *   'activity' or 'projects'; `project`: only changes of this project refetch
+ * @returns {{ data: any, error: string|null, loading: boolean, refreshedAt: number|null, refetch: () => void }}
+ */
+export function useMorphQuery(url, { scope = 'features', project } = {}) {
+  const [state, setState] = useState({ data: null, error: null, loading: Boolean(url), refreshedAt: null });
+  const [tick, setTick] = useState(0);
+  const urlRef = useRef(url);
+
+  useEffect(() => {
+    if (urlRef.current !== url) {
+      urlRef.current = url;
+      setState({ data: null, error: null, loading: Boolean(url), refreshedAt: null });
+    }
+    if (!url) return undefined;
+    let cancelled = false;
+    fetch(url)
+      .then(async (res) => {
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
+        return body;
+      })
+      .then((data) => { if (!cancelled) setState({ data, error: null, loading: false, refreshedAt: Date.now() }); })
+      .catch((err) => { if (!cancelled) setState((s) => ({ ...s, error: err.message, loading: false })); });
+    return () => { cancelled = true; };
+  }, [url, tick]);
+
+  const scopes = Array.isArray(scope) ? scope.join(',') : scope;
+  useEffect(() => {
+    const hot = import.meta.hot;
+    if (!hot) return undefined;
+    const wanted = scopes.split(',');
+    const onChange = (payload) => {
+      if (payload?.project && project && payload.project !== project) return;
+      if (!payload?.scope || wanted.includes(payload.scope)) setTick((t) => t + 1);
+    };
+    hot.on('morph:changed', onChange);
+    return () => hot.off?.('morph:changed', onChange);
+  }, [scopes, project]);
+
+  return { ...state, refetch: () => setTick((t) => t + 1) };
+}

package/src/dashboard/app/hooks/usePref.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const PREFIX = 'morph-dashboard:';
+
+function read(key, fallback) {
+  try {
+    const raw = window.localStorage.getItem(PREFIX + key);
+    return raw === null ? fallback : JSON.parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * A per-browser preference (view mode, filters). Storage can be unavailable or
+ * throw (private mode, SSR); the value then simply does not persist.
+ */
+export function usePref(key, fallback) {
+  const [value, setValue] = useState(() => (typeof window === 'undefined' ? fallback : read(key, fallback)));
+  const set = useCallback((next) => {
+    setValue((prev) => {
+      const v = typeof next === 'function' ? next(prev) : next;
+      try { window.localStorage.setItem(PREFIX + key, JSON.stringify(v)); } catch { /* not persisted */ }
+      return v;
+    });
+  }, [key]);
+  return [value, set];
+}
+
+/** Re-render every `ms` so relative times ("há 30 s") and "working now" stay true. */
+export function useNow(ms = 15_000) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), ms);
+    return () => clearInterval(id);
+  }, [ms]);
+  return now;
+}

package/src/dashboard/app/lib/format.js

@@ -0,0 +1,69 @@
+const rtf = new Intl.RelativeTimeFormat('pt-BR', { numeric: 'auto' });
+const UNITS = [
+  ['year', 365 * 24 * 3600],
+  ['month', 30 * 24 * 3600],
+  ['week', 7 * 24 * 3600],
+  ['day', 24 * 3600],
+  ['hour', 3600],
+  ['minute', 60],
+];
+
+/** "há 12 minutos" — or an em dash when there is no date. */
+export function timeAgo(iso, now = Date.now()) {
+  const t = Date.parse(iso || '');
+  if (Number.isNaN(t)) return '—';
+  const diff = (t - now) / 1000;
+  for (const [unit, secs] of UNITS) {
+    if (Math.abs(diff) >= secs) return rtf.format(Math.round(diff / secs), unit);
+  }
+  return 'agora';
+}
+
+export function dateTime(iso) {
+  const t = Date.parse(iso || '');
+  if (Number.isNaN(t)) return '—';
+  return new Date(t).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' });
+}
+
+export function clock(iso) {
+  const t = Date.parse(iso || '');
+  if (Number.isNaN(t)) return '—';
+  return new Date(t).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
+}
+
+export function dayLabel(iso) {
+  const t = Date.parse(iso || '');
+  if (Number.isNaN(t)) return '—';
+  return new Date(t).toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' });
+}
+
+const compact = new Intl.NumberFormat('pt-BR', { notation: 'compact', maximumFractionDigits: 1 });
+export function num(n) {
+  return typeof n === 'number' && Number.isFinite(n) ? compact.format(n) : '—';
+}
+
+export function bytes(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n)) return '—';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function duration(seconds) {
+  if (typeof seconds !== 'number' || !Number.isFinite(seconds) || seconds <= 0) return '—';
+  const m = Math.round(seconds / 60);
+  if (m < 60) return `${m} min`;
+  return `${Math.floor(m / 60)} h ${m % 60} min`;
+}
+
+/** Strip a leading YAML frontmatter block, returning both parts. */
+export function splitFrontmatter(text) {
+  const m = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text || '');
+  if (!m) return { meta: null, body: text || '' };
+  const meta = {};
+  for (const line of m[1].split(/\r?\n/)) {
+    const kv = /^([\w-]+):\s*(.*)$/.exec(line);
+    if (kv) meta[kv[1]] = kv[2].replace(/^["']|["']$/g, '');
+  }
+  return { meta, body: text.slice(m[0].length) };
+}

package/src/dashboard/app/lib/phases.js

@@ -0,0 +1,56 @@
+/**
+ * Display vocabulary for the phase pipeline. The ORDER and the optional flag
+ * come from framework/phases.json (morphData.phases); this file only adds the
+ * words and the colour token each phase is shown with.
+ */
+import morphData from 'virtual:morph-data';
+
+const LABELS = {
+  proposal: 'Proposta',
+  uiux: 'UI/UX',
+  plan: 'Plano',
+  implement: 'Implementação',
+  review: 'Revisão',
+};
+
+export const PHASES = (morphData.phases?.list || []).map((p) => ({
+  id: p.id,
+  label: LABELS[p.id] || p.displayName || p.id,
+  optional: Boolean(p.optional),
+  folder: p.folder || null,
+  skill: p.skill || null,
+  color: `var(--color-phase-${p.id})`,
+}));
+
+export const PHASE_INDEX = Object.fromEntries(PHASES.map((p, i) => [p.id, i]));
+
+export function phaseMeta(id) {
+  return PHASES.find((p) => p.id === id) || { id, label: LABELS[id] || id || '—', color: 'var(--color-faint)', optional: false };
+}
+
+export const GATE_LABEL = {
+  proposal: 'Gate 1 (proposta)',
+  uiux: 'Gate UI/UX',
+  plan: 'Gate 2 (plano)',
+  review: 'Gate 3 (revisão)',
+};
+
+export const STATUS_LABEL = {
+  draft: 'Rascunho',
+  in_progress: 'Em andamento',
+  completed: 'Concluída',
+  abandoned: 'Abandonada',
+};
+
+export const WORKTYPE_LABEL = {
+  feature: 'feature',
+  bug: 'bug',
+  chore: 'chore',
+  hotfix: 'hotfix',
+};
+
+export const LOCATION_LABEL = {
+  root: 'raiz',
+  worktree: 'worktree',
+  archive: 'arquivo',
+};

package/src/dashboard/app/lib/project.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { usePref } from '../hooks/usePref.js';
+import { useMorphQuery } from '../hooks/useMorphQuery.js';
+
+/** The live API of one project. */
+export const apiBase = (id) => `/api/morph/p/${encodeURIComponent(id)}`;
+
+/** A page of one project: `/p/{id}/features`, `/p/{id}/features/{name}`, `/p/{id}/activity`. */
+export const projectHref = (id, sub = 'features') => `/p/${encodeURIComponent(id)}/${sub}`;
+
+export const featureHref = (project, name, query = '') =>
+  projectHref(project, `features/${encodeURIComponent(name)}`) + query;
+
+const PROJECTS_CHANGED = 'morph:projects-changed';
+
+/** Tell every reader of the portfolio (page, sidebar, search) to read it again. */
+export const announceProjectsChanged = () => window.dispatchEvent(new Event(PROJECTS_CHANGED));
+
+/** The portfolio: registered projects, their summaries, and the ones found next to them. */
+export function useProjects() {
+  const q = useMorphQuery('/api/morph/projects', { scope: 'projects' });
+  const refetch = useRef(q.refetch);
+  refetch.current = q.refetch;
+  useEffect(() => {
+    const on = () => refetch.current();
+    window.addEventListener(PROJECTS_CHANGED, on);
+    return () => window.removeEventListener(PROJECTS_CHANGED, on);
+  }, []);
+  return q;
+}
+
+/**
+ * The project the person is looking at: the one in the URL, else the last one
+ * they opened, else the one the dashboard was launched from. Knowledge pages
+ * have no project in the URL but the sidebar still needs one to link to.
+ *
+ * @param {{ launch?: string|null, projects?: Array<{id: string}> }|null} portfolio
+ * @returns {{ id: string|null, inUrl: boolean }}
+ */
+export function useCurrentProject(portfolio) {
+  const { pathname } = useLocation();
+  const m = /^\/p\/([^/]+)/.exec(pathname);
+  const fromUrl = m ? decodeURIComponent(m[1]) : null;
+  const [last, setLast] = usePref('project.last', null);
+  useEffect(() => { if (fromUrl && fromUrl !== last) setLast(fromUrl); }, [fromUrl, last, setLast]);
+  const known = (id) => id && (!portfolio?.projects || portfolio.projects.some((p) => p.id === id));
+  const id = fromUrl || (known(last) ? last : null) || portfolio?.launch || null;
+  return { id, inUrl: Boolean(fromUrl) };
+}

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

@@ -0,0 +1,24 @@
+import { useParams } from 'react-router-dom';
+import ActivityFeed from '../components/ActivityFeed.jsx';
+import { useProjects } from '../lib/project.js';
+
+export default function Activity() {
+  const { project } = useParams();
+  const { data } = useProjects();
+  const name = data?.projects?.find((p) => p.id === project)?.name;
+  return (
+    <div className="mx-auto max-w-4xl px-4 pb-24 pt-10 md:px-10 md:pt-16">
+      <header className="rise mb-8">
+        {name && <p className="text-sm text-[var(--color-dim)]">{name}</p>}
+        <h1 className="mt-1 text-4xl font-semibold tracking-tight">Atividade</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-[var(--color-dim)]">
+          O que o Claude fez no projeto, contado a partir da telemetria dos hooks: suas mensagens, as skills carregadas,
+          os sub-agents despachados, as tasks, os verifies e os gates. Atualiza sozinho enquanto ele trabalha.
+        </p>
+      </header>
+      <div className="rise-2 bezel">
+        <div className="bezel-core px-5 py-5"><ActivityFeed project={project} showFeature /></div>
+      </div>
+    </div>
+  );
+}