feat: Add Genesis app (Interface layer) support

- Add apps/ directory with hello-world.json sample (React + Tailwind)
- Update assemble.ts to handle space-bundle-app-item FileSystemTree
- Update validate.ts with app file validation
- Update README.md with Interface layer docs and app creation guide

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: johnxie

README.md

@@ -11,7 +11,7 @@ Every Taskade workspace is built from four types of DNA:
 | **Memory** | `projects/` | Structured data — task trees, checklists, notes |
 | **Intelligence** | `agents/` | AI agents with custom commands and personas |
 | **Reflexes** | `automations/` | Trigger-action workflows connecting services |
-| **Interface** | *(coming soon)* | Generated app UI via Parade engine |
+| **Interface** | `apps/` | Genesis app UI — React components via Parade engine |
 
 This repo contains one JSON file per DNA item — the same format that Taskade uses internally. No build toolchain required to understand or edit.
 
@@ -48,6 +48,8 @@ taskade-sample-app/
 ├── projects/
 │   ├── getting-started.json   # Onboarding checklist
 │   └── roadmap.json           # Product roadmap with phases
+├── apps/
+│   └── hello-world.json       # Sample Genesis app (React + Tailwind)
 ├── media/
 │   └── icon.svg               # App icon
 ├── scripts/
@@ -68,6 +70,7 @@ GitHub Repo                    Taskade Workspace Tab
 agents/*.json          ──►     [Agents] filter pill
 automations/*.json     ──►     [Automations] filter pill
 projects/*.json        ──►     [Projects] filter pill
+apps/*.json            ──►     [Apps] Genesis app UI
 ```
 
 Each JSON file is the same data shape that Taskade's internal `SpaceBundleData` uses. You can:
@@ -120,7 +123,23 @@ Each JSON file is the same data shape that Taskade's internal `SpaceBundleData`
    }
    ```
 
-4. Run `npm run build` to assemble and validate.
+4. **Add a Genesis app**: Create `apps/my-app.json` with a `FileSystemTree`:
+   ```json
+   {
+     "src": {
+       "directory": {
+         "App.tsx": {
+           "file": {
+             "contents": "import * as React from 'react';\nexport default function App() {\n  return <div>Hello World</div>;\n}\n"
+           }
+         }
+       }
+     }
+   }
+   ```
+   The file system tree mirrors the Parade base template structure. Each file node has `{ file: { contents: "..." } }` and directories use `{ directory: { ... } }`.
+
+5. Run `npm run build` to assemble and validate.
 
 ## Environment Variables
 

apps/hello-world.json

@@ -0,0 +1,21 @@
+{
+  "src": {
+    "directory": {
+      "App.tsx": {
+        "file": {
+          "contents": "import * as React from 'react';\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\n\nexport default function App() {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <div className=\"min-h-screen bg-background p-8\">\n      <div className=\"mx-auto max-w-2xl space-y-6\">\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Hello World</CardTitle>\n            <CardDescription>\n              A sample Genesis app built with Workspace DNA.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"flex items-center gap-3\">\n              <Button onClick={() => setCount((c) => c + 1)}>\n                Count: {count}\n              </Button>\n              <Badge variant=\"secondary\">Genesis App</Badge>\n            </div>\n            <p className=\"text-sm text-muted-foreground\">\n              This app was assembled from the taskade-sample-app template.\n              Edit <code>apps/hello-world.json</code> to customize it.\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"
+        }
+      },
+      "main.tsx": {
+        "file": {
+          "contents": "import './index.css';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n"
+        }
+      },
+      "index.css": {
+        "file": {
+          "contents": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --border: 240 5.9% 90%;\n    --ring: 240 5.9% 10%;\n    --radius: 0.5rem;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n"
+        }
+      }
+    }
+  }
+}

scripts/assemble.ts

@@ -1,5 +1,5 @@
 /**
- * Assembles individual JSON files from agents/, automations/, projects/
+ * Assembles individual JSON files from agents/, automations/, projects/, apps/
  * into a single SpaceBundleData workspace.json file.
  *
  * Usage: npx tsx scripts/assemble.ts
@@ -21,13 +21,20 @@ interface SpaceBundleData {
 function readJsonFiles(dir: string): Array<{ name: string; data: unknown }> {
   const fullPath = path.join(ROOT, dir);
   if (!fs.existsSync(fullPath)) return [];
-  return fs
-    .readdirSync(fullPath)
-    .filter((f) => f.endsWith('.json'))
-    .map((f) => ({
-      name: path.basename(f, '.json'),
-      data: JSON.parse(fs.readFileSync(path.join(fullPath, f), 'utf-8')),
-    }));
+  const results: Array<{ name: string; data: unknown }> = [];
+  for (const f of fs.readdirSync(fullPath).filter((f) => f.endsWith('.json'))) {
+    const filePath = path.join(fullPath, f);
+    try {
+      results.push({
+        name: path.basename(f, '.json'),
+        data: JSON.parse(fs.readFileSync(filePath, 'utf-8')),
+      });
+    } catch (err) {
+      console.error(`Error: Failed to parse ${dir}/${f}: ${(err as Error).message}`);
+      process.exit(1);
+    }
+  }
+  return results;
 }
 
 function generateRank(index: number): string {
@@ -79,6 +86,17 @@ for (const { name, data } of readJsonFiles('projects')) {
   };
 }
 
+// Apps (Genesis app file systems)
+for (const { name, data } of readJsonFiles('apps')) {
+  const id = `app-${name}`;
+  items[id] = {
+    type: 'space-bundle-app-item',
+    appId: id,
+    rank: generateRank(rankIndex++),
+    files: data,
+  };
+}
+
 const bundle: SpaceBundleData = {
   version: '1',
   name: manifest.name,
@@ -97,5 +115,6 @@ const counts = {
   agents: Object.values(items).filter((i: any) => i.type === 'space-bundle-agent-item').length,
   automations: Object.values(items).filter((i: any) => i.type === 'space-bundle-flow-item').length,
   projects: Object.values(items).filter((i: any) => i.type === 'space-bundle-project-item').length,
+  apps: Object.values(items).filter((i: any) => i.type === 'space-bundle-app-item').length,
 };
-console.log(`  Agents: ${counts.agents}, Automations: ${counts.automations}, Projects: ${counts.projects}`);
+console.log(`  Agents: ${counts.agents}, Automations: ${counts.automations}, Projects: ${counts.projects}, Apps: ${counts.apps}`);

scripts/validate.ts

@@ -284,7 +284,26 @@ if (fs.existsSync(projectsDir)) {
   pass('No projects/ directory (optional)');
 }
 
-// 5. Validate assembled workspace.json if it exists
+// 5. Validate individual app files (FileSystemTree)
+console.log('\nValidating apps/...');
+const appsDir = path.join(ROOT, 'apps');
+const FileSystemTreeZchema = z.record(z.string(), z.any());
+if (fs.existsSync(appsDir)) {
+  for (const file of fs.readdirSync(appsDir).filter((f) => f.endsWith('.json'))) {
+    const data = JSON.parse(fs.readFileSync(path.join(appsDir, file), 'utf-8'));
+    const result = FileSystemTreeZchema.safeParse(data);
+    if (result.success) {
+      const fileCount = JSON.stringify(data).split('"file"').length - 1;
+      pass(`${file} (${fileCount} files)`);
+    } else {
+      fail(`${file}: ${result.error.issues.map((i) => `${i.path.join('.')}: ${i.message}`).join(', ')}`);
+    }
+  }
+} else {
+  pass('No apps/ directory (optional)');
+}
+
+// 6. Validate assembled workspace.json if it exists
 const workspacePath = path.join(ROOT, 'dist', 'workspace.json');
 if (fs.existsSync(workspacePath)) {
   console.log('\nValidating dist/workspace.json...');