@polymorphism-tech/morph-spec 4.18.0 → 4.20.0

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

@@ -0,0 +1,346 @@
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import morphData from 'virtual:morph-data';
+import FlowGraph from '../components/FlowGraph.jsx';
+import DetailPanel from '../components/DetailPanel.jsx';
+import { useDetailPanel } from '../hooks/useDetailPanel.js';
+
+// ─── Hover Context ────────────────────────────────────────────────────────────
+
+const HoverContext = createContext({ hoveredPhase: null, setHoveredPhase: () => {} });
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+// Canonical phase order (we render exactly these 7 columns)
+const PHASE_ORDER = ['proposal', 'uiux', 'design', 'plan', 'tasks', 'implement', 'sync'];
+
+const PHASE_X_GAP = 200;
+const PHASE_W = 160;
+const ROW_H = 130;
+const LABEL_W = 160;
+const LABEL_X = -LABEL_W - 20;
+const PHASE_START_X = 0;
+
+// ─── Node Components ──────────────────────────────────────────────────────────
+
+function WorkflowLabelNode({ data }) {
+  return (
+    <div
+      className="rounded-lg px-4 py-3 cursor-pointer select-none"
+      style={{
+        width: LABEL_W,
+        background: '#0f172a',
+        border: '1.5px solid #334155',
+        boxShadow: '0 0 8px #33415533',
+      }}
+    >
+      <Handle type="source" position={Position.Right} style={{ background: '#475569', width: 7, height: 7 }} />
+      <div className="text-white text-xs font-bold leading-tight truncate" title={data.label}>
+        {data.label}
+      </div>
+      <div className="text-gray-400 text-[10px] mt-1 leading-snug line-clamp-2" title={data.description}>
+        {data.description}
+      </div>
+    </div>
+  );
+}
+
+function WorkflowPhaseNode({ data }) {
+  const { hoveredPhase, setHoveredPhase } = useContext(HoverContext);
+  const isSkipped = data.skipped;
+  const phaseName = data.phase;
+
+  const isHighlighted = hoveredPhase !== null && hoveredPhase === phaseName;
+  const isDimmed = hoveredPhase !== null && hoveredPhase !== phaseName;
+
+  const bg = isSkipped ? '#111827' : '#1e3a5f';
+  const border = isSkipped ? '#374151' : isHighlighted ? '#60a5fa' : '#3b82f6';
+  const textColor = isSkipped ? '#6b7280' : '#93c5fd';
+
+  let opacity = isSkipped ? 0.5 : 1;
+  if (isDimmed) opacity = isSkipped ? 0.25 : 0.35;
+
+  const boxShadow = isHighlighted
+    ? '0 0 0 2px #60a5fa, 0 0 12px #3b82f6aa'
+    : isSkipped
+    ? 'none'
+    : '0 0 6px #3b82f622';
+
+  return (
+    <div
+      className="rounded-lg px-3 py-2 select-none cursor-default"
+      style={{
+        width: PHASE_W - 20,
+        background: isHighlighted ? '#1e4a7f' : bg,
+        border: `1.5px ${isSkipped ? 'dashed' : 'solid'} ${border}`,
+        boxShadow,
+        opacity,
+        transition: 'opacity 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease',
+      }}
+      onMouseEnter={() => setHoveredPhase(phaseName)}
+      onMouseLeave={() => setHoveredPhase(null)}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: border, width: 6, height: 6 }} />
+      <Handle type="source" position={Position.Right} style={{ background: border, width: 6, height: 6 }} />
+      <div
+        className="text-xs font-semibold leading-tight"
+        style={{
+          color: isSkipped ? '#6b7280' : isHighlighted ? '#bfdbfe' : '#ffffff',
+          textDecoration: isSkipped ? 'line-through' : 'none',
+        }}
+      >
+        {data.label}
+      </div>
+      {isSkipped && (
+        <div className="text-[9px] mt-0.5" style={{ color: '#6b7280' }}>skip</div>
+      )}
+      {!isSkipped && (
+        <div className="text-[9px] mt-0.5" style={{ color: textColor }}>run</div>
+      )}
+    </div>
+  );
+}
+
+const nodeTypes = { workflowLabelNode: WorkflowLabelNode, workflowPhaseNode: WorkflowPhaseNode };
+
+// ─── Graph Builder ────────────────────────────────────────────────────────────
+
+function buildGraph(workflows) {
+  const nodes = [];
+  const edges = [];
+
+  // Sort workflows by priority (ascending: lower priority = simpler = shown first)
+  const sorted = [...workflows].sort((a, b) => (a.priority || 0) - (b.priority || 0));
+
+  sorted.forEach((wf, rowIdx) => {
+    const rowY = rowIdx * ROW_H;
+    const skipSet = new Set(wf.phases.skip || []);
+
+    // Label node on the left
+    nodes.push({
+      id: `wf-label-${wf.id}`,
+      type: 'workflowLabelNode',
+      position: { x: LABEL_X, y: rowY + 10 },
+      data: {
+        label: wf.name,
+        description: wf.description,
+        wfRef: wf,
+      },
+    });
+
+    // Phase nodes
+    PHASE_ORDER.forEach((phase, colIdx) => {
+      const isSkipped = skipSet.has(phase);
+      const phaseNodeId = `wf-${wf.id}-phase-${phase}`;
+
+      nodes.push({
+        id: phaseNodeId,
+        type: 'workflowPhaseNode',
+        position: { x: PHASE_START_X + colIdx * PHASE_X_GAP, y: rowY },
+        data: {
+          label: phase,
+          skipped: isSkipped,
+          active: !isSkipped,
+          wfId: wf.id,
+          phase,
+        },
+      });
+
+      // Edge to next phase in this row
+      const nextPhase = PHASE_ORDER[colIdx + 1];
+      if (nextPhase) {
+        const nextNodeId = `wf-${wf.id}-phase-${nextPhase}`;
+        const isNextSkipped = skipSet.has(nextPhase);
+        edges.push({
+          id: `edge-${wf.id}-${phase}-${nextPhase}`,
+          source: phaseNodeId,
+          target: nextNodeId,
+          type: 'smoothstep',
+          style: {
+            stroke: (isSkipped || isNextSkipped) ? '#374151' : '#3b82f6',
+            strokeWidth: 1.2,
+            strokeDasharray: (isSkipped || isNextSkipped) ? '4 3' : undefined,
+            opacity: (isSkipped || isNextSkipped) ? 0.3 : 0.7,
+          },
+        });
+      }
+    });
+  });
+
+  return { nodes, edges };
+}
+
+// ─── Detail Content ───────────────────────────────────────────────────────────
+
+function WorkflowDetail({ wf }) {
+  return (
+    <div className="text-sm text-gray-200 space-y-4">
+      <p className="text-gray-300 text-xs leading-relaxed">{wf.description}</p>
+
+      <div className="flex gap-2">
+        <span className="px-2 py-0.5 bg-blue-900/50 border border-blue-700 rounded text-xs text-blue-300">
+          priority {wf.priority}
+        </span>
+      </div>
+
+      {/* Phases */}
+      <div>
+        <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Run Phases</p>
+        <div className="flex flex-wrap gap-1">
+          {(wf.phases.run || []).map((p) => (
+            <span key={p} className="px-2 py-0.5 bg-blue-900/50 border border-blue-700 rounded text-xs text-blue-300 font-mono">{p}</span>
+          ))}
+        </div>
+      </div>
+
+      {wf.phases.skip?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Skip Phases</p>
+          <div className="flex flex-wrap gap-1">
+            {wf.phases.skip.map((p) => (
+              <span key={p} className="px-2 py-0.5 bg-gray-800 border border-dashed border-gray-600 rounded text-xs text-gray-500 font-mono line-through">{p}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Pause points */}
+      {wf.pausePoints?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Pause Points</p>
+          <div className="space-y-1.5">
+            {wf.pausePoints.map((pp, i) => (
+              <div key={i} className="px-2 py-1.5 bg-yellow-900/20 border border-yellow-700/40 rounded text-xs">
+                <div className="flex items-center gap-2 mb-0.5">
+                  <span className="text-yellow-400 font-mono text-[10px]">{pp.phase}</span>
+                  {pp.condition && (
+                    <span className="text-gray-500 text-[10px]">if: {pp.condition}</span>
+                  )}
+                </div>
+                <p className="text-yellow-200">{pp.question}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Keywords */}
+      {wf.keywords?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Keywords</p>
+          <div className="flex flex-wrap gap-1">
+            {wf.keywords.map((k) => (
+              <span key={k} className="px-1.5 py-0.5 bg-gray-800 border border-gray-700 rounded text-xs text-gray-400">{k}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Outputs */}
+      {wf.outputs?.required?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Required Outputs</p>
+          <div className="flex flex-wrap gap-1">
+            {wf.outputs.required.map((o) => (
+              <span key={o} className="px-2 py-0.5 bg-green-900/50 border border-green-700 rounded text-xs text-green-300 font-mono">{o}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {wf.outputs?.optional?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Optional Outputs</p>
+          <div className="flex flex-wrap gap-1">
+            {wf.outputs.optional.map((o) => (
+              <span key={o} className="px-2 py-0.5 bg-gray-800 border border-gray-700 rounded text-xs text-gray-400 font-mono">{o}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Criteria */}
+      {wf.criteria && Object.keys(wf.criteria).length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Criteria</p>
+          <pre className="p-2 bg-gray-950 border border-gray-800 rounded text-[9px] font-mono text-gray-400 overflow-x-auto">
+            {JSON.stringify(wf.criteria, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export default function Workflows() {
+  const { workflows } = morphData;
+  const { panel, openPanel, closePanel } = useDetailPanel();
+  const [hoveredPhase, setHoveredPhase] = useState(null);
+
+  const { nodes, edges } = useMemo(() => buildGraph(workflows), [workflows]);
+
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.type === 'workflowLabelNode') {
+        const wf = node.data.wfRef;
+        if (wf) openPanel(wf.name, <WorkflowDetail wf={wf} />);
+      }
+    },
+    [openPanel]
+  );
+
+  const hoverContextValue = useMemo(
+    () => ({ hoveredPhase, setHoveredPhase }),
+    [hoveredPhase]
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-800 flex-shrink-0">
+        <h1 className="text-white text-xl font-bold">Workflow Configs</h1>
+        <p className="text-gray-400 text-sm mt-0.5">
+          {workflows.length} workflow{workflows.length !== 1 ? 's' : ''} — each row shows 7 phases, grayed out phases are skipped. Click a workflow label to inspect.
+        </p>
+      </div>
+
+      <div className="flex-1 relative">
+        <HoverContext.Provider value={hoverContextValue}>
+        <FlowGraph
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          onNodeClick={handleNodeClick}
+          fitView
+        />
+        </HoverContext.Provider>
+
+        <div className="absolute top-3 left-3 bg-gray-900/90 border border-gray-700 rounded-lg p-3 text-xs space-y-2 z-10">
+          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-2">Legend</p>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-10 h-4 rounded-sm" style={{ background: '#1e3a5f', border: '1.5px solid #3b82f6' }} />
+            <span className="text-gray-300">Active phase</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-10 h-4 rounded-sm opacity-50" style={{ background: '#111827', border: '1.5px dashed #374151' }} />
+            <span className="text-gray-300">Skipped phase</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-10 h-4 rounded-sm" style={{ background: '#0f172a', border: '1.5px solid #334155' }} />
+            <span className="text-gray-300">Workflow label</span>
+          </div>
+        </div>
+
+        <div className="absolute top-3 right-3 bg-gray-900/90 border border-gray-700 rounded-lg px-3 py-1.5 text-xs text-gray-400 z-10">
+          {workflows.length} workflows · 7 phases
+        </div>
+      </div>
+
+      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
+        {panel.content}
+      </DetailPanel>
+    </div>
+  );
+}

package/src/dashboard/app/styles/index.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+@import "@xyflow/react/dist/style.css";
+
+:root {
+  --tier-1: #ef4444;
+  --tier-2: #f97316;
+  --tier-3: #3b82f6;
+  --tier-4: #8b5cf6;
+  --gate-color: #fbbf24;
+}
+
+/* React Flow dark theme overrides */
+.react-flow {
+  background: #030712;
+}
+
+.react-flow__minimap {
+  background: #111827;
+}
+
+.react-flow__minimap-mask {
+  fill: #1f2937;
+}
+
+.react-flow__controls {
+  background: #111827;
+  border: 1px solid #374151;
+}
+
+.react-flow__controls-button {
+  background: #111827;
+  border-bottom: 1px solid #374151;
+  color: #9ca3af;
+}
+
+.react-flow__controls-button:hover {
+  background: #1f2937;
+  color: #f9fafb;
+}
+
+.react-flow__edge-path {
+  stroke: #4b5563;
+}
+
+.react-flow__node {
+  border-radius: 0.5rem;
+}

package/src/dashboard/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" class="dark bg-gray-950">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>morph-spec Dashboard</title>
+  </head>
+  <body class="dark bg-gray-950 text-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/app/main.jsx"></script>
+  </body>
+</html>

package/src/dashboard/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "morph-spec-dashboard",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "@xyflow/react": "^12.0.0",
+    "@dagrejs/dagre": "^1.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.4.0",
+    "vite": "^6.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/src/dashboard/scanner/agents-scanner.js

@@ -0,0 +1,35 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join, basename } from 'path';
+
+function findMdFiles(dir) {
+  const results = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) results.push(...findMdFiles(fullPath));
+    else if (entry.name.endsWith('.md') && entry.name !== 'README.md') results.push(fullPath);
+  }
+  return results;
+}
+
+export function scanAgents(frameworkDir) {
+  const agentsJsonPath = join(frameworkDir, 'agents.json');
+  const agentsDir = join(frameworkDir, 'agents');
+  if (!existsSync(agentsJsonPath) || !existsSync(agentsDir)) {
+    return { version: 'unknown', total: 0, tiers: {}, list: [] };
+  }
+  const agentsJson = JSON.parse(readFileSync(agentsJsonPath, 'utf8'));
+  const mdFiles = findMdFiles(agentsDir);
+  const promptMap = {};
+  for (const filePath of mdFiles) {
+    promptMap[basename(filePath, '.md')] = readFileSync(filePath, 'utf8');
+  }
+  const list = Object.entries(agentsJson.agents).map(([id, agent]) => ({
+    id, color: agent.color, tier: agent.tier, title: agent.title, group: agent.group,
+    activePhases: agent.active_phases, reportsTo: agent.reports_to,
+    domains: agent.domains || [], keywords: agent.keywords || [],
+    validators: agent.validators || [], standards: agent.standards || [],
+    stacks: agent.stacks || [], prompt: promptMap[id] || '',
+    teammate: agent.teammate || null,
+  }));
+  return { version: agentsJson.version, total: agentsJson.total_agents, tiers: agentsJson.tiers, list };
+}

package/src/dashboard/scanner/hooks-scanner.js

@@ -0,0 +1,41 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join, basename, dirname } from 'path';
+
+function findJsFiles(dir) {
+  const results = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) results.push(...findJsFiles(fullPath));
+    else if (entry.name.endsWith('.js')) results.push(fullPath);
+  }
+  return results;
+}
+
+function extractJsDocDescription(source) {
+  const match = source.match(/\/\*\*\s*\n([\s\S]*?)\*\//);
+  if (!match) return '';
+  return match[1].split('\n').map(l => l.replace(/^\s*\*\s?/, '').trim()).filter(Boolean).join(' ');
+}
+
+function extractImports(source) {
+  const imports = [];
+  const regex = /import\s+.*?from\s+['"](.+?)['"]/g;
+  let m;
+  while ((m = regex.exec(source)) !== null) imports.push(m[1]);
+  return imports;
+}
+
+export function scanHooks(frameworkDir) {
+  const hooksDir = join(frameworkDir, 'hooks', 'claude-code');
+  if (!existsSync(hooksDir)) return [];
+  return findJsFiles(hooksDir).map(filePath => {
+    const source = readFileSync(filePath, 'utf8');
+    return {
+      event: basename(dirname(filePath)),
+      name: basename(filePath, '.js'),
+      filename: basename(filePath),
+      source, imports: extractImports(source),
+      description: extractJsDocDescription(source),
+    };
+  });
+}

package/src/dashboard/scanner/index.js

@@ -0,0 +1,21 @@
+import { scanAgents } from './agents-scanner.js';
+import { scanPhases } from './phases-scanner.js';
+import { scanHooks } from './hooks-scanner.js';
+import { scanSkills } from './skills-scanner.js';
+import { scanStandards } from './standards-scanner.js';
+import { scanWorkflows } from './workflows-scanner.js';
+import { scanRules } from './rules-scanner.js';
+import { scanSquads } from './squads-scanner.js';
+import { scanRubrics } from './rubrics-scanner.js';
+import { scanState } from './state-scanner.js';
+
+export function scanAll(frameworkDir, projectDir) {
+  const agents = scanAgents(frameworkDir);
+  return {
+    agents, phases: scanPhases(frameworkDir), hooks: scanHooks(frameworkDir),
+    skills: scanSkills(frameworkDir), standards: scanStandards(frameworkDir, agents.list),
+    workflows: scanWorkflows(frameworkDir), rules: scanRules(frameworkDir),
+    squads: scanSquads(frameworkDir), rubrics: scanRubrics(frameworkDir),
+    liveState: scanState(projectDir || process.cwd()),
+  };
+}

package/src/dashboard/scanner/phases-scanner.js

@@ -0,0 +1,15 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+export function scanPhases(frameworkDir) {
+  const phasesJson = JSON.parse(readFileSync(join(frameworkDir, 'phases.json'), 'utf8'));
+  const list = Object.values(phasesJson.phases).map((p) => ({
+    id: p.id, index: p.index, folder: p.folder || null, displayName: p.displayName,
+    optional: p.optional || false, goals: p.goals || [], requiredOutputs: p.requiredOutputs || [],
+    optionalOutputs: p.optionalOutputs || [], recommendedMCPs: p.recommendedMCPs || [],
+    pausePoints: p.pausePoints || [], agentTiers: p.agentTiers || [],
+    requiredSkills: p.requiredSkills || [],
+  }));
+  list.sort((a, b) => a.index - b.index);
+  return { version: phasesJson.version, list };
+}

package/src/dashboard/scanner/rubrics-scanner.js

@@ -0,0 +1,12 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+export function scanRubrics(frameworkDir) {
+  const dir = join(frameworkDir, 'rubrics');
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter(f => f.endsWith('.json')).map(f => {
+    const d = JSON.parse(readFileSync(join(dir, f), 'utf8'));
+    return { id: d.id, version: d.version || '1.0.0', description: d.description || '',
+      categories: d.categories || {}, thresholds: d.thresholds || { approve: 8.0, retry: 6.0 } };
+  });
+}

package/src/dashboard/scanner/rules-scanner.js

@@ -0,0 +1,37 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join, basename } from 'path';
+
+function parseFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) return { paths: [], stacks: [] };
+  const yaml = match[1];
+  const paths = []; const stacks = []; let currentList = null;
+  for (const line of yaml.split('\n')) {
+    if (line.startsWith('paths:')) { currentList = paths; continue; }
+    if (line.startsWith('stacks:')) { currentList = stacks; continue; }
+    if (line.match(/^\w/)) { currentList = null; continue; }
+    if (currentList !== null) {
+      const m = line.match(/^\s+-\s+"?(.+?)"?\s*$/);
+      if (m) currentList.push(m[1]);
+    }
+  }
+  return { paths, stacks };
+}
+
+function extractStandardRefs(content) {
+  const refs = [];
+  const regex = /@\.morph\/framework\/standards\/(.+\.md)/g;
+  let m;
+  while ((m = regex.exec(content)) !== null) refs.push(m[1]);
+  return refs;
+}
+
+export function scanRules(frameworkDir) {
+  const dir = join(frameworkDir, 'rules');
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter(f => f.endsWith('.md')).map(f => {
+    const content = readFileSync(join(dir, f), 'utf8');
+    const { paths, stacks } = parseFrontmatter(content);
+    return { name: basename(f, '.md'), filename: f, paths, stacks, content, standardRefs: extractStandardRefs(content) };
+  });
+}

package/src/dashboard/scanner/skills-scanner.js

@@ -0,0 +1,43 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+function parseYamlFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) return {};
+  const yaml = {};
+  for (const line of match[1].split('\n')) {
+    const colonIdx = line.indexOf(':');
+    if (colonIdx === -1) continue;
+    const key = line.slice(0, colonIdx).trim();
+    let value = line.slice(colonIdx + 1).trim();
+    if (value === 'true') value = true;
+    else if (value === 'false') value = false;
+    yaml[key] = value;
+  }
+  return yaml;
+}
+
+export function scanSkills(frameworkDir) {
+  const skillsDir = join(frameworkDir, 'skills');
+  if (!existsSync(skillsDir)) return [];
+  const skills = [];
+  for (const levelDir of readdirSync(skillsDir, { withFileTypes: true })) {
+    if (!levelDir.isDirectory()) continue;
+    const levelPath = join(skillsDir, levelDir.name);
+    for (const skillDir of readdirSync(levelPath, { withFileTypes: true })) {
+      if (!skillDir.isDirectory()) continue;
+      const skillPath = join(levelPath, skillDir.name, 'SKILL.md');
+      if (!existsSync(skillPath)) continue;
+      const content = readFileSync(skillPath, 'utf8');
+      const fm = parseYamlFrontmatter(content);
+      skills.push({
+        id: skillDir.name, name: fm.name || skillDir.name,
+        description: fm.description || '', level: levelDir.name,
+        userInvocable: fm['user-invocable'] === true || fm['user-invocable'] === 'true',
+        allowedTools: typeof fm['allowed-tools'] === 'string' ? fm['allowed-tools'].split(',').map(t => t.trim()) : [],
+        content,
+      });
+    }
+  }
+  return skills;
+}

package/src/dashboard/scanner/squads-scanner.js

@@ -0,0 +1,13 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+export function scanSquads(frameworkDir) {
+  const dir = join(frameworkDir, 'squad-templates');
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter(f => f.endsWith('.json')).map(f => {
+    const d = JSON.parse(readFileSync(join(dir, f), 'utf8'));
+    return { id: d.id, name: d.name, description: d.description || '',
+      parallel: d.parallel || false, coordination: d.coordination || null,
+      agents: d.agents || [], agentTeam: d.agent_team || null };
+  });
+}