@polymorphism-tech/morph-spec 4.18.0 → 4.20.0

package/framework/skills/level-1-workflows/morph-phase-uiux/SKILL.md

@@ -4,7 +4,7 @@ description: MORPH-SPEC Phase 2 (UI/UX). Creates design-system.md, mockups.md, c
 argument-hint: "[feature-name]"
 user-invocable: false
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.18.0"
+cliVersion: "4.20.0"
 ---
 
 # MORPH UI/UX Design - Phase 2
@@ -43,8 +43,10 @@ Conditional phase for features with front-end. Collects UI/UX requirements, gene
 | Capture existing app | **Playwright MCP** `browser_navigate()` + `browser_take_screenshot()` | — |
 | Read Tailwind config | **Read** `tailwind.config.{js,ts}` | **Grep** `colors:` |
 | Trend research | **Context7 MCP** / **WebSearch** | — |
+| Generate AI screen designs | **Stitch MCP** `generate_screen_from_text()` + `fetch_screen_image()` | HTML mockup + Playwright (Step 3.5) |
+| Export design tokens from Stitch | **Stitch MCP** `fetch_screen_code()` | Manual design-system.md creation |
 
-**MCPs for this phase:** Playwright (preview, inspection, responsiveness), Context7 (component docs).
+**MCPs for this phase:** Playwright (preview, inspection, responsiveness), Context7 (component docs), Stitch (optional: AI screen generation, design.md export).
 
 **Anti-patterns:**
 - Task agent to read a screenshot (use Read directly on image)
@@ -244,6 +246,37 @@ Track: `dsExists` (bool).
 | **B** | `dsExists` AND NOT `cssTokensFound` | Print: `✓ Design system found (no CSS tokens to cross-check)`. Proceed to Step 1. |
 | **C** | NOT `dsExists` AND tokens found | Auto-generate `.morph/context/design-system.md` from ALL scanned token sources (CSS vars, Tailwind config, etc.). Merge tokens from multiple sources, preferring Tailwind/Theme config over raw CSS. If Step 0.2 produced `existing-ui-analysis.md`, cross-reference visual analysis with extracted tokens. Proceed to Step 1. |
 | **D** | NOT `dsExists` AND NOT `cssTokensFound` | Greenfield project. Ask user for aesthetic direction + brand color using `AskUserQuestion` (same options as morph-init). Scaffold from template. Proceed to Step 1. |
+| **E** | Stitch MCP available AND `design.md` found in project root | Parse Stitch design.md, extract color/typography/spacing/radius/shadow tokens, map into `.morph/context/design-system.md` template. If `dsExists`, merge (Stitch fills gaps, manually-set tokens preserved). Add changelog entry. Proceed to Step 1. |
+
+**Case E — Stitch design.md integration:**
+
+> **Prerequisite:** Stitch MCP detected (tools matching pattern `stitch` found) OR a `design.md` file exists in the project root.
+
+1. If Stitch MCP is available, check for existing projects:
+   ```
+   stitch__list_projects({})
+   ```
+   If projects exist, list screens and fetch the design export:
+   ```
+   stitch__list_screens({ projectId: selectedProjectId })
+   stitch__fetch_screen_code({ screenId: screenId })
+   ```
+
+2. If `design.md` exists in project root (manual export from Stitch), read it directly.
+
+3. Parse the design.md content and map tokens into `design-system.md` template sections:
+   - Color values → `## Color Tokens` (map to `--color-primary`, `--color-accent`, etc.)
+   - Font families/sizes → `## Typography` (map to `--font-display`, `--font-body`)
+   - Spacing values → `## Spacing Tokens`
+   - Border radius → `## Border Radius Tokens`
+   - Shadow definitions → `## Shadow Tokens`
+
+4. Write or merge into `.morph/context/design-system.md` using the existing template structure.
+
+5. Add changelog entry:
+   `- [today's date] [morph-phase-uiux] Tokens imported from Stitch design.md ({N} tokens)`
+
+Print: `✓ Design system populated from Stitch design — .morph/context/design-system.md`
 
 **Case C — auto-generate from scanned tokens:**
 
@@ -416,11 +449,79 @@ Detect the stack from `.morph/config/config.json` and recommend the appropriate
 
 > **MCP:** After selecting the UI library, use **Context7 MCP** (`resolve-library-id` → `query-docs`) to fetch the library's latest component API (e.g., shadcn/ui primitives, Radix props, MUI component APIs). This ensures component specs in `components.md` reference real, current props — not outdated or hallucinated ones. If Context7 is not available, use **WebSearch** + **WebFetch** to check the official component documentation.
 
-### Step 3.5: Visual Mockup (Playwright MCP)
+### Step 3.5: Visual Mockup (Playwright MCP or Stitch MCP)
 
-> **Purpose:** Generate a real HTML preview using project design tokens before writing formal specs.
+> **Purpose:** Generate a real visual preview using project design tokens before writing formal specs.
 > Seeing the actual visual before committing to components prevents misaligned specs.
 
+#### 3.5.0 — Stitch MCP Path (Alternative to HTML Mockup)
+
+> **Skip if:** Stitch MCP is NOT available. Fall through to 3.5.1 (HTML mockup).
+> **Use when:** Stitch MCP is detected and user wants AI-generated screen designs.
+
+If Stitch MCP is available, present the user with a choice:
+
+```json
+{
+  "questions": [{
+    "header": "Design Tool",
+    "question": "Stitch MCP is available for AI-generated screen designs. How would you like to create visual mockups?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Use Stitch", "description": "Generate screens via Google Stitch AI — higher fidelity, exportable design.md" },
+      { "label": "Use HTML mockup", "description": "Generate HTML file + Playwright screenshots — current default workflow" }
+    ]
+  }]
+}
+```
+
+**If "Use Stitch" selected:**
+
+1. **Create or select project:**
+   ```
+   stitch__create_project({ name: "{feature-name}-design" })
+   ```
+   Or if project already exists (from Case E in Step 0.5.3), reuse it.
+
+2. **Generate screens from design brief:**
+   Build a prompt from the aesthetic direction (Step 1.5), selected trends (Step 1.3), and user input (Step 2):
+   ```
+   stitch__generate_screen_from_text({
+     projectId: projectId,
+     prompt: "Create a {detectedDomain} screen with {aestheticDirection} direction. Colors: {primaryColor}, {accentColor}. Font: {fontPair}. Layout: {layoutDescription}. Features: {componentList}"
+   })
+   ```
+
+3. **Fetch screen images for review:**
+   ```
+   stitch__list_screens({ projectId: projectId })
+   stitch__fetch_screen_image({ screenId: screenId })
+   ```
+   Save images to `.morph/features/$ARGUMENTS/1-ui/stitch-screen-*.png`
+
+4. **Present to user for feedback** (same approval loop as 3.5.3):
+   - Show Stitch-generated screen images
+   - Ask: "Does this visual direction match your intent?"
+   - Iterate: regenerate via `generate_screen_from_text` with refined prompts
+
+5. **Export design tokens:**
+   ```
+   stitch__fetch_screen_code({ screenId: approvedScreenId })
+   ```
+   Parse the design.md export and update `.morph/context/design-system.md` with any new or refined tokens.
+
+6. **Skip to Step 4** — Stitch screens replace the HTML mockup. `mockups.md` still documents states and interactions textually.
+
+> **Key advantage:** Unlike screenshots, the Stitch MCP transmits real HTML/CSS code via `fetch_screen_code()`.
+> This produces dramatically higher fidelity results than screenshot-based workflows because Claude Code
+> receives the actual component structure, CSS properties, and design tokens — not pixel approximations.
+> Use `react-components` or `shadcn-ui` companion skills to convert Stitch HTML into production React components.
+
+**If "Use HTML mockup" selected:**
+→ Proceed to 3.5.1 (existing workflow, unchanged)
+
+---
+
 #### 3.5.1 — Generate HTML Mockup
 
 Create an HTML file that represents the main screen/layout using **real tokens from `.morph/context/design-system.md`**:
@@ -533,6 +634,13 @@ Create the following files in `.morph/features/$ARGUMENTS/`:
   - Spacing and layout (grid, margins, paddings)
   - Base components (buttons, inputs, cards)
 
+**If Stitch was used (Step 3.5.0):**
+- Derive `design-system.md` primarily from Stitch's exported design.md
+- Map Stitch tokens into existing template sections (Color Tokens, Typography, Spacing, etc.)
+- Cross-reference with tokens from Step 0.5 — preserve manually-set tokens, let Stitch values fill gaps
+- Add to `## Aesthetic Direction`: "Visual direction generated via Google Stitch (project: {projectName})"
+- Ensure all CSS custom properties use the standard `--color-*`, `--font-*`, `--space-*` naming convention
+
 #### 4.2. `mockups.md`
 
 ASCII wireframes + descriptions:
@@ -666,13 +774,13 @@ Use `AskUserQuestion` to capture explicit approval before advancing:
 
 ## Phase Outputs
 
-<!-- morph-outputs:uiux -->
-| Output | Caminho |
-|--------|---------|
-| `uiDesignSystem` | `.morph/features/{feature}/1-ui/design-system.md` |
-| `uiMockups` | `.morph/features/{feature}/1-ui/mockups.md` |
-| `uiComponents` | `.morph/features/{feature}/1-ui/components.md` |
-| `uiFlows` | `.morph/features/{feature}/1-ui/flows.md` |
+<!-- morph-outputs:uiux -->
+| Output | Caminho |
+|--------|---------|
+| `uiDesignSystem` | `.morph/features/{feature}/1-ui/design-system.md` |
+| `uiMockups` | `.morph/features/{feature}/1-ui/mockups.md` |
+| `uiComponents` | `.morph/features/{feature}/1-ui/components.md` |
+| `uiFlows` | `.morph/features/{feature}/1-ui/flows.md` |
 <!-- /morph-outputs -->
 
 ---

package/framework/skills/level-1-workflows/morph-scope-escalation/SKILL.md

@@ -4,7 +4,7 @@ description: Guided workflow for mid-implementation scope escalation — analyze
 user-invocable: true
 argument-hint: "[feature-name]"
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.18.0"
+cliVersion: "4.20.0"
 ---
 
 # Scope Escalation Workflow

package/framework/standards/ai-agents/production.md

@@ -118,10 +118,13 @@ Expose agents as interoperable web services using the standardized A2A protocol.
 ### Packages
 
 ```xml
-<!-- ⚠️ MAF packages are in PREVIEW — API surface may change before GA -->
-<PackageReference Include="Microsoft.Agents.AI.Hosting.A2A.AspNetCore" Version="1.0.0-preview.*" />
+<!-- A2A hosting — not yet published on NuGet, uncomment when GA -->
+<!-- <PackageReference Include="Microsoft.Agents.AI.Hosting.A2A.AspNetCore" Version="1.0.0-preview.*" /> -->
 ```
 
+> **Note:** The A2A hosting package is part of the MAF preview and is **not yet available on NuGet**.
+> The patterns below reflect the expected API surface. Until GA, implement A2A manually via HTTP endpoints.
+
 ### Expose Agent via A2A
 
 ```csharp

package/framework/standards/ai-agents/setup.md

@@ -14,23 +14,23 @@ Semantic Kernel is superseded. Do NOT use `Kernel`, `KernelFunction`, or `Invoke
 
 ```xml
 <!-- .csproj -->
-<!-- ⚠️ MAF packages are in PREVIEW — API surface may change before GA -->
-<PackageReference Include="Microsoft.Agents.AI" Version="1.0.0-preview.*" />
-<PackageReference Include="Microsoft.Agents.AI.Abstractions" Version="1.0.0-preview.*" />
-<PackageReference Include="Microsoft.Agents.AI.OpenAI" Version="1.0.0-preview.*" />
-
-<!-- For Web API hosting + A2A -->
-<PackageReference Include="Microsoft.Agents.AI.Hosting" Version="1.0.0-preview.*" />
+<!-- Microsoft.Extensions.AI — STABLE abstractions for IChatClient, AIFunctionFactory, tools -->
+<PackageReference Include="Microsoft.Extensions.AI" Version="9.5.0" />
+<PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.3.0-preview.*" />
 
 <!-- For Azure OpenAI -->
 <PackageReference Include="Azure.AI.OpenAI" Version="2.*" />
 <PackageReference Include="Azure.Identity" Version="1.*" />
 
-<!-- For Microsoft.Extensions.AI abstractions (STABLE — use as fallback when MAF preview breaks) -->
-<PackageReference Include="Microsoft.Extensions.AI" Version="9.5.0" />
-<PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.3.0-preview.*" />
+<!-- For A2A protocol hosting (when GA) -->
+<!-- <PackageReference Include="Microsoft.Agents.AI.Hosting.A2A.AspNetCore" Version="1.0.0-preview.*" /> -->
 ```
 
+> **Note:** The Microsoft Agent Framework (MAF) packages (`Microsoft.Agents.AI.*`) are **not yet published on NuGet**.
+> Use `Microsoft.Extensions.AI` as the primary package — it provides `IChatClient`, `AIFunctionFactory`,
+> and all abstractions shown in this guide. The MAF `ChatClientAgent`, `AsAIAgent()`, and `AgentWorkflowBuilder`
+> APIs documented here reflect the expected GA surface. Until MAF ships, implement agents using `IChatClient` directly.
+
 ---
 
 ## Quick Start (Minimal Agent)
@@ -38,7 +38,7 @@ Semantic Kernel is superseded. Do NOT use `Kernel`, `KernelFunction`, or `Invoke
 ```csharp
 using Azure.AI.OpenAI;
 using Azure.Identity;
-using Microsoft.Agents.AI;
+using Microsoft.Extensions.AI;
 
 AIAgent agent = new AzureOpenAIClient(
     new Uri("https://your-resource.openai.azure.com/"),
@@ -104,7 +104,6 @@ builder.Services.AddSingleton<IChatClient>(sp =>
 ### Using ChatClientAgent
 
 ```csharp
-using Microsoft.Agents.AI;
 using Microsoft.Extensions.AI;
 
 public class OrderAnalysisAgent
@@ -374,7 +373,7 @@ builder.Services.AddOpenTelemetry()
 
 ## Checklist
 
-- [ ] `Microsoft.Agents.AI` + `Microsoft.Agents.AI.OpenAI` installed
+- [ ] `Microsoft.Extensions.AI` + `Microsoft.Extensions.AI.OpenAI` installed
 - [ ] `IChatClient` registered as singleton via DI
 - [ ] Agents created with `ChatClientAgent` or `AsAIAgent()`
 - [ ] Agents registered with `builder.AddAIAgent()` (keyed services)
@@ -391,7 +390,7 @@ builder.Services.AddOpenTelemetry()
 
 | Wrong | Correct |
 |-------|---------|
-| `using Microsoft.SemanticKernel` | `using Microsoft.Agents.AI` |
+| `using Microsoft.SemanticKernel` | `using Microsoft.Extensions.AI` |
 | `Kernel.InvokePromptAsync()` | `agent.RunAsync()` |
 | `[KernelFunction]` | `AIFunctionFactory.Create()` |
 | `[AgentTool]` attribute | `[Description]` + `AIFunctionFactory` |

package/framework/standards/ai-agents/workflows.md

@@ -23,11 +23,14 @@ Workflows compose multiple agents and executors into coordinated pipelines using
 ### Packages
 
 ```xml
-<!-- ⚠️ MAF packages are in PREVIEW — API surface may change before GA -->
-<PackageReference Include="Microsoft.Agents.AI" Version="1.0.0-preview.*" />
-<PackageReference Include="Microsoft.Agents.AI.Workflows" Version="1.0.0-preview.*" />
+<!-- Microsoft.Extensions.AI — core abstractions -->
+<PackageReference Include="Microsoft.Extensions.AI" Version="9.5.0" />
 ```
 
+> **Note:** Workflow orchestration APIs (`AgentWorkflowBuilder`, `BuildSequential`, `CreateGroupChatBuilderWith`)
+> are part of the MAF preview that is **not yet published on NuGet**. The patterns documented here reflect
+> the expected GA surface. Until MAF ships, implement sequential/parallel workflows manually using `IChatClient`.
+
 ---
 
 ## 5 Orchestration Patterns
@@ -51,8 +54,7 @@ Agents execute in order — each agent receives the output of the previous one.
 ```
 
 ```csharp
-using Microsoft.Agents.AI;
-using Microsoft.Agents.AI.Workflows;
+using Microsoft.Extensions.AI;
 
 AIAgent writer = new ChatClientAgent(chatClient, new ChatClientAgentOptions
 {
@@ -330,7 +332,7 @@ var agent = chatClient.AsAIAgent(instructions: prompt, name: "Analyst");
 
 ## Checklist
 
-- [ ] `Microsoft.Agents.AI.Workflows` package installed
+- [ ] `Microsoft.Extensions.AI` package installed
 - [ ] Orchestration pattern selected and justified
 - [ ] Agents have clear, single responsibilities
 - [ ] Workflow built with `AgentWorkflowBuilder`

package/framework/standards/backend/database/vector-search-rag.md

@@ -239,7 +239,7 @@ EF.Functions.VectorDistance(vector1, vector2, DistanceFunction.Cosine)
 ### Implementação RAG com Agent Framework
 
 ```csharp
-using Microsoft.Agents.AI;
+using Microsoft.Extensions.AI;
 
 public interface IDocumentAssistantAgent
 {

package/framework/templates/code/dotnet/jobs/agent.cs

@@ -5,7 +5,6 @@
 
 using System.ComponentModel;
 using System.Text.Json;
-using Microsoft.Agents.AI;
 using Microsoft.Extensions.AI;
 using Microsoft.Extensions.Logging;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymorphism-tech/morph-spec",
-  "version": "4.18.0",
+  "version": "4.20.0",
   "description": "MORPH-SPEC: AI-First development framework with validation pipeline and multi-stack support",
   "keywords": [
     "claude-code",

package/src/commands/dashboard/dashboard.js

@@ -0,0 +1,53 @@
+import { spawn } from 'child_process';
+import { existsSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export async function dashboardCommand(options = {}) {
+  const port = options.port || '3200';
+  const dashboardDir = resolve(__dirname, '..', '..', 'dashboard');
+  const nodeModules = resolve(dashboardDir, 'node_modules');
+
+  // Check if dashboard dependencies are installed
+  if (!existsSync(nodeModules)) {
+    console.log(chalk.yellow('Installing dashboard dependencies...'));
+    const install = spawn('npm', ['install'], {
+      cwd: dashboardDir,
+      stdio: 'inherit',
+      shell: true,
+    });
+    await new Promise((res, rej) => {
+      install.on('close', (code) => (code === 0 ? res() : rej(new Error(`npm install failed with code ${code}`))));
+    });
+  }
+
+  console.log(chalk.cyan(`\n  Starting morph-spec dashboard at http://localhost:${port}\n`));
+
+  const env = {
+    ...process.env,
+    MORPH_PROJECT_DIR: process.cwd(),
+  };
+
+  const viteArgs = ['vite', '--port', port];
+  if (options.open !== false) viteArgs.push('--open');
+
+  const vite = spawn('npx', viteArgs, {
+    cwd: dashboardDir,
+    stdio: 'inherit',
+    shell: true,
+    env,
+  });
+
+  vite.on('error', (err) => {
+    console.error(chalk.red(`Failed to start dashboard: ${err.message}`));
+    process.exit(1);
+  });
+
+  process.on('SIGINT', () => {
+    vite.kill();
+    process.exit(0);
+  });
+}

package/src/commands/mcp/mcp-setup.js

@@ -16,6 +16,7 @@ import ora from 'ora';
 import {
   orchestrateMcpSetup,
   installAutoMcps,
+  installCompanionSkills,
   installMcpWithCredentials,
   generateSetupInstructions,
   formatMcpStatusTable,
@@ -120,6 +121,16 @@ async function autoInstall(targetPath, stack, existingMcps) {
     console.log(chalk.gray(`  Skipped (already configured): ${result.skipped.join(', ')}`));
   }
 
+  // Install companion skills for MCPs that define them
+  const skillResults = installCompanionSkills(orchestration.autoInstallable);
+  for (const r of skillResults) {
+    if (r.success) {
+      console.log(chalk.green(`  ✓ Companion skills installed: ${r.repo}`));
+    } else {
+      console.log(chalk.yellow(`  ⚠ Failed to install companion skills: ${r.repo}`));
+    }
+  }
+
   console.log('');
 }
 
@@ -305,6 +316,16 @@ async function interactiveWizard(targetPath, stack, existingMcps) {
       const spinner = ora('Installing...').start();
       const result = await installAutoMcps(targetPath, orchestration.autoInstallable);
       spinner.succeed(`Installed: ${result.added.join(', ')}`);
+
+      // Install companion skills for MCPs that define them
+      const skillResults = installCompanionSkills(orchestration.autoInstallable);
+      for (const r of skillResults) {
+        if (r.success) {
+          console.log(chalk.green(`  ✓ Companion skills: ${r.repo}`));
+        } else {
+          console.log(chalk.yellow(`  ⚠ Companion skills failed: ${r.repo}`));
+        }
+      }
     }
   }
 

package/src/commands/project/init.js

@@ -20,6 +20,7 @@ import { generateSettings, saveIntegrations } from '../../lib/generators/setting
 import {
   orchestrateMcpSetup,
   installAutoMcps,
+  installCompanionSkills,
   installMcpWithCredentials,
   generateSetupInstructions,
   formatMcpStatusTable,
@@ -256,6 +257,16 @@ export async function initCommand(options) {
               for (const name of result.added) {
                 autoInstalled[name] = orchestration.autoInstallable[name];
               }
+
+              // Install companion skills for MCPs that define them (e.g., Stitch agent skills)
+              const skillResults = installCompanionSkills(orchestration.autoInstallable);
+              for (const r of skillResults) {
+                if (r.success) {
+                  logger.info(`✓ Companion skills installed: ${r.repo}`);
+                } else {
+                  logger.warn(`Failed to install companion skills: ${r.repo}`);
+                }
+              }
             }
           }
 

package/src/dashboard/app/App.jsx

@@ -0,0 +1,31 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Sidebar from './components/Sidebar.jsx';
+import AgentMap from './pages/AgentMap.jsx';
+import PhasePipeline from './pages/PhasePipeline.jsx';
+import HookInspector from './pages/HookInspector.jsx';
+import SkillsLibrary from './pages/SkillsLibrary.jsx';
+import RulesMap from './pages/RulesMap.jsx';
+import Standards from './pages/Standards.jsx';
+import Workflows from './pages/Workflows.jsx';
+import LiveState from './pages/LiveState.jsx';
+
+export default function App() {
+  return (
+    <div className="flex h-screen bg-gray-950 text-gray-100 overflow-hidden">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        <Routes>
+          <Route path="/" element={<Navigate to="/agents" replace />} />
+          <Route path="/agents" element={<AgentMap />} />
+          <Route path="/phases" element={<PhasePipeline />} />
+          <Route path="/hooks" element={<HookInspector />} />
+          <Route path="/skills" element={<SkillsLibrary />} />
+          <Route path="/rules" element={<RulesMap />} />
+          <Route path="/standards" element={<Standards />} />
+          <Route path="/workflows" element={<Workflows />} />
+          <Route path="/state" element={<LiveState />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+export default function DetailPanel({ open, title, onClose, children }) {
+  return (
+    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
+      <div className="flex items-center justify-between p-4 border-b border-gray-700">
+        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
+        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
+      </div>
+      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
+
+export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
+  return (
+    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
+      <ReactFlow
+        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
+        fitView={fitView} proOptions={{ hideAttribution: true }}
+        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
+      >
+        <Background color="#1e293b" gap={20} />
+        <Controls position="bottom-right" />
+        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
+      </ReactFlow>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+export default function SearchFilter({ placeholder = 'Search...', filters = [], onSearchChange, onFilterChange }) {
+  const [search, setSearch] = useState('');
+  function handleSearchChange(e) {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  }
+  return (
+    <div className="flex items-center gap-3 p-3 bg-gray-900 border-b border-gray-800">
+      <input type="text" value={search} onChange={handleSearchChange} placeholder={placeholder}
+        className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-3 py-1.5 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500" />
+      {filters.map(({ name, label, options, value }) => (
+        <select key={name} value={value} onChange={(e) => onFilterChange?.(name, e.target.value)}
+          className="bg-gray-800 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
+          <option value="">{label}: All</option>
+          {options.map((opt) => (<option key={opt} value={opt}>{opt}</option>))}
+        </select>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { NavLink } from 'react-router-dom';
+
+const NAV_ITEMS = [
+  { to: '/agents', label: 'Agent Map', icon: '🗺️' },
+  { to: '/phases', label: 'Phases', icon: '⚡' },
+  { to: '/hooks', label: 'Hooks', icon: '🔗' },
+  { to: '/skills', label: 'Skills', icon: '🧩' },
+  { to: '/rules', label: 'Rules', icon: '📏' },
+  { to: '/standards', label: 'Standards', icon: '📋' },
+  { to: '/workflows', label: 'Workflows', icon: '🔄' },
+  { to: '/state', label: 'Live State', icon: '📊' },
+];
+
+export default function Sidebar() {
+  return (
+    <nav className="w-52 flex-shrink-0 bg-gray-900 border-r border-gray-800 flex flex-col">
+      <div className="px-4 py-4 border-b border-gray-800">
+        <h1 className="text-sm font-semibold text-gray-300 tracking-wide uppercase">
+          morph-spec
+        </h1>
+        <p className="text-xs text-gray-500 mt-0.5">Dashboard</p>
+      </div>
+      <ul className="flex-1 py-2">
+        {NAV_ITEMS.map(({ to, label, icon }) => (
+          <li key={to}>
+            <NavLink
+              to={to}
+              className={({ isActive }) =>
+                [
+                  'flex items-center gap-2.5 px-4 py-2 text-sm transition-colors',
+                  isActive
+                    ? 'bg-blue-900/40 border-r-2 border-blue-500 text-blue-300'
+                    : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200',
+                ].join(' ')
+              }
+            >
+              <span className="text-base leading-none">{icon}</span>
+              <span>{label}</span>
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { useState, useCallback } from 'react';
+
+export function useDetailPanel() {
+  const [panel, setPanel] = useState({ open: false, title: '', content: null });
+
+  const openPanel = useCallback((title, content) => {
+    setPanel({ open: true, title, content });
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setPanel((prev) => ({ ...prev, open: false }));
+  }, []);
+
+  return { panel, openPanel, closePanel };
+}

package/src/dashboard/app/main.jsx

@@ -0,0 +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>
+);