fraim-framework 2.0.120 → 2.0.123

package/dist/src/cli/setup/user-level-sync.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureUserLevelDirectories = ensureUserLevelDirectories;
+exports.ensureUserLevelDependencies = ensureUserLevelDependencies;
 exports.syncUserLevelArtifacts = syncUserLevelArtifacts;
 /**
  * User-Level FRAIM Setup
@@ -23,8 +24,19 @@ exports.syncUserLevelArtifacts = syncUserLevelArtifacts;
  */
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
+const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
 const script_sync_utils_1 = require("../utils/script-sync-utils");
+/**
+ * Curated list of npm runtime dependencies that user-level scripts in
+ * ~/.fraim/scripts/ require at runtime. Keep this list narrow — only add deps
+ * that are actually `require()`d by a script in registry/scripts/.
+ *
+ * Tracked in FRAIM #301 (author-audio first-run failure).
+ */
+const USER_LEVEL_RUNTIME_DEPS = {
+    'node-edge-tts': '*', // used by scripts/author-audio.js
+};
 /**
  * Ensure the user-level FRAIM directory structure exists.
  * Creates personalized-employee dirs for user-level overrides.
@@ -44,6 +56,52 @@ function ensureUserLevelDirectories(userFraimDir) {
         }
     }
 }
+/**
+ * Ensure the curated set of npm runtime dependencies is installed under
+ * ~/.fraim/node_modules/. Maintains ~/.fraim/package.json so the deps survive
+ * a re-sync, and only runs `npm install` when something is actually missing.
+ *
+ * Soft-fails (yellow warning, no throw) if npm is unavailable or install
+ * errors — setup must not break because a downstream script's dep couldn't
+ * be installed.
+ */
+function ensureUserLevelDependencies(userFraimDir) {
+    const baseDir = userFraimDir || (0, script_sync_utils_1.getUserFraimDir)();
+    const pkgPath = path_1.default.join(baseDir, 'package.json');
+    const nodeModulesDir = path_1.default.join(baseDir, 'node_modules');
+    let pkg = {};
+    if (fs_1.default.existsSync(pkgPath)) {
+        try {
+            pkg = JSON.parse(fs_1.default.readFileSync(pkgPath, 'utf8'));
+        }
+        catch {
+            // Corrupt package.json — overwrite below rather than crash.
+            pkg = {};
+        }
+    }
+    pkg.name = pkg.name || 'fraim-user-runtime';
+    pkg.private = true;
+    pkg.dependencies = { ...(pkg.dependencies || {}), ...USER_LEVEL_RUNTIME_DEPS };
+    fs_1.default.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    const missing = Object.keys(USER_LEVEL_RUNTIME_DEPS).filter((dep) => !fs_1.default.existsSync(path_1.default.join(nodeModulesDir, dep)));
+    if (missing.length === 0) {
+        return;
+    }
+    console.log(chalk_1.default.blue(`📦 Installing user-level runtime dependencies (${missing.join(', ')})...`));
+    try {
+        (0, child_process_1.execSync)('npm install --no-audit --no-fund --no-save --no-package-lock --omit=dev', {
+            cwd: baseDir,
+            stdio: 'pipe',
+        });
+        console.log(chalk_1.default.green(`✅ Installed: ${missing.join(', ')}`));
+    }
+    catch (error) {
+        const stderr = error?.stderr?.toString?.() || error?.message || 'unknown error';
+        console.log(chalk_1.default.yellow(`⚠️  Could not install user-level deps (${missing.join(', ')}): ${stderr.split('\n')[0]}`));
+        console.log(chalk_1.default.gray(`   Skills that depend on these will surface a clear error when invoked.`));
+        console.log(chalk_1.default.gray(`   To retry manually: cd ${baseDir} && npm install`));
+    }
+}
 /**
  * Set up the user-level FRAIM directory.
  * Creates the personalized-employee structure so FRAIM works outside any project.
@@ -55,5 +113,6 @@ async function syncUserLevelArtifacts(userFraimDir) {
     console.log(chalk_1.default.blue('📦 Setting up user-level FRAIM directory...'));
     console.log(chalk_1.default.gray(`   Target: ${baseDir}`));
     ensureUserLevelDirectories(baseDir);
+    ensureUserLevelDependencies(baseDir);
     console.log(chalk_1.default.green('✅ User-level FRAIM directory ready'));
 }

package/dist/src/cli/utils/agent-adapters.js

@@ -12,6 +12,7 @@ const START_MARKER = '<!-- FRAIM_AGENT_ADAPTER_START -->';
 const END_MARKER = '<!-- FRAIM_AGENT_ADAPTER_END -->';
 const CURSOR_RULE_PATH = path_1.default.join('.cursor', 'rules', 'fraim.mdc');
 const CLAUDE_FRAIM_COMMAND_PATH = path_1.default.join('.claude', 'commands', 'fraim.md');
+const CLAUDE_FRAIM_SKILL_PATH = path_1.default.join('.claude', 'skills', 'fraim', 'SKILL.md');
 const VSCODE_FRAIM_PROMPT_PATH = path_1.default.join('.github', 'prompts', 'fraim.prompt.md');
 const CODEX_FRAIM_SKILL_PATH = path_1.default.join('.codex', 'skills', 'fraim', 'SKILL.md');
 const WINDSURF_FRAIM_COMMAND_PATH = path_1.default.join('.windsurf', 'commands', 'fraim.md');
@@ -108,7 +109,8 @@ ${ide_invocation_surfaces_1.FRAIM_INVOCATION_BODY}`;
         { path: CURSOR_RULE_PATH, content: cursorManagedBody },
         { path: VSCODE_FRAIM_PROMPT_PATH, content: vscodePrompt },
         { path: path_1.default.join(project_fraim_paths_1.WORKSPACE_FRAIM_DIRNAME, 'README.md'), content: fraimReadme },
-        { path: CLAUDE_FRAIM_COMMAND_PATH, content: (0, ide_invocation_surfaces_1.buildClaudeSlashCommandContent)() },
+        { path: CLAUDE_FRAIM_SKILL_PATH, content: (0, ide_invocation_surfaces_1.buildClaudeSkillContent)() },
+        { path: CLAUDE_FRAIM_COMMAND_PATH, content: (0, ide_invocation_surfaces_1.buildClaudeCommandShimContent)() },
         { path: CODEX_FRAIM_SKILL_PATH, content: (0, ide_invocation_surfaces_1.buildCodexSkillContent)() },
         { path: WINDSURF_FRAIM_COMMAND_PATH, content: (0, ide_invocation_surfaces_1.buildWindsurfCommandContent)() },
         { path: KIRO_FRAIM_COMMAND_PATH, content: (0, ide_invocation_surfaces_1.buildKiroCommandContent)() }
@@ -127,6 +129,7 @@ function ensureAgentAdapterFiles(projectRoot) {
             ? mergeCursorRule(existing, file.content)
             : file.path.endsWith('README.md')
                 || file.path === VSCODE_FRAIM_PROMPT_PATH
+                || file.path === CLAUDE_FRAIM_SKILL_PATH
                 || file.path === CLAUDE_FRAIM_COMMAND_PATH
                 || file.path === CODEX_FRAIM_SKILL_PATH
                 || file.path === WINDSURF_FRAIM_COMMAND_PATH

package/dist/src/core/quality-evidence.js

@@ -43,6 +43,8 @@ exports.QUALITY_REGISTRY = {
     'code-quality-assessment': { stage: 'product-quality', enforced: true },
     // Test Quality
     'test-quality-assessment': { stage: 'test-quality', enforced: true },
+    // Security
+    'security-review': { stage: 'security', enforced: true },
     // Fundraising
     'investor-pitch-preparation': { stage: 'fundraising', enforced: false },
     // Go-to-Market
@@ -67,6 +69,7 @@ exports.STAGE_DISPLAY_NAMES = {
     'branding': 'Branding',
     'product-quality': 'Product Quality',
     'test-quality': 'Test Quality',
+    'security': 'Security',
     'fundraising': 'Fundraising',
     'go-to-market': 'Go-to-Market',
 };
@@ -79,6 +82,7 @@ exports.ALL_STAGE_CATEGORIES = [
     'branding',
     'product-quality',
     'test-quality',
+    'security',
     'fundraising',
     'go-to-market',
 ];

package/package.json

@@ -1,146 +1,150 @@
-{
-  "name": "fraim-framework",
-  "version": "2.0.120",
-  "description": "FRAIM: AI Workforce Infrastructure — the organizational capability that turns AI agents into an accountable workforce, their operators into capable AI managers, and executives into leaders with clear optics on AI proficiency.",
-  "main": "index.js",
-  "bin": {
-    "fraim": "./index.js",
-    "fraim-framework": "./index.js"
-  },
-  "scripts": {
-    "dev": "tsx --watch src/fraim-mcp-server.ts > server.log 2>&1",
-    "dev:prod": "npm run build && node dist/src/fraim-mcp-server.js > server.log 2>&1",
-    "build": "tsc && npm run build:stubs && npm run build:fraim-brain && node scripts/copy-registry.js && node -e \"require('fs').copyFileSync('src/core/types.ts', 'registry/templates/manager/fraim-config-schema.ts')\" && npm run validate:registry && npm run validate:fraim-pro-assets && tsx scripts/validate-purity.ts",
-    "build:stubs": "tsx scripts/build-stub-registry.ts",
-    "build:fraim-brain": "node scripts/generate-fraim-brain.js",
-    "test-all": "npm run test && npm run test:isolated && npm run test:ui",
-    "test": "node scripts/test-with-server.js",
-    "test:isolated": "npx tsx --test --test-reporter=spec tests/isolated/test-*.ts",
-    "test:smoke": "node scripts/test-with-server.js --tags=smoke",
-    "test:coverage": "node scripts/test-with-server.js --tags=smoke --coverage",
-    "test:stripe": "node scripts/test-with-server.js tests/test-stripe-payment-complete.ts",
-    "test:stripe:ui": "playwright test tests/ui/test-payment-ui.spec.ts",
-    "test:perf": "node scripts/test-with-server.js tests/performance/analytics-perf.ts",
-    "test:ui": "playwright test",
-    "test:ui:headed": "playwright test --headed",
-    "start:fraim": "tsx src/fraim-mcp-server.ts",
-    "dev:fraim": "tsx --watch src/fraim-mcp-server.ts",
-    "serve:website": "node fraim-pro/serve.js",
-    "watch:fraimlogs": "tsx scripts/watch-fraim-logs.ts > prodlogs.log 2>&1",
-    "manage-keys": "tsx scripts/fraim/manage-keys.ts",
-    "manage-teams": "tsx scripts/fraim/manage-teams.ts",
-    "partner-discounts": "tsx scripts/fraim/manage-partner-discounts.ts",
-    "fix-key": "tsx scripts/fraim/fix-expired-key.ts",
-    "setup-stripe-webhook": "tsx scripts/fraim/setup-stripe-webhook.ts",
-    "view-signups": "tsx scripts/view-signups.ts",
-    "fraim:init": "npm run build && node index.js init",
-    "fraim:sync": "node index.js sync --local",
-    "postinstall": "fraim sync --skip-updates || echo 'FRAIM setup skipped.'",
-    "prepublishOnly": "npm run build",
-    "release": "npm version patch && npm run publish-both",
-    "publish-both": "node scripts/publish-both.js",
-    "publish-fraim-only": "node scripts/publish-fraim.js",
-    "publish-both-manual": "node scripts/publish-both.js",
-    "validate:registry": "tsx scripts/verify-registry-paths.ts && npm run validate:jobs && npm run validate:skills && npm run validate:registry-references && npm run validate:platform-agnostic && npm run validate:template-namespaces && npm run validate:config-fallbacks && npm run validate:bootstrap-config-coverage && npm run validate:provider-action-mappings && npm run validate:fidelity && npm run validate:config-tokens && npm run validate:brain-mapping && npm run validate:template-syntax",
-    "validate:registry-references": "tsx scripts/validate-registry-references.ts",
-    "validate:brain-mapping": "tsx scripts/validate-brain-mapping.ts",
-    "validate:fraim-pro-assets": "tsx scripts/validate-fraim-pro-assets.ts",
-    "validate:jobs": "tsx scripts/validate-jobs.ts",
-    "validate:platform-agnostic": "tsx scripts/validate-platform-agnostic.ts",
-    "validate:skills": "tsx scripts/validate-skills.ts",
-    "validate:template-namespaces": "tsx scripts/validate-template-namespaces.ts",
-    "validate:config-fallbacks": "tsx scripts/validate-config-fallbacks.ts",
-    "validate:bootstrap-config-coverage": "tsx scripts/validate-bootstrap-config-coverage.ts",
-    "validate:provider-action-mappings": "tsx scripts/validate-provider-action-mappings.ts",
-    "validate:fidelity": "tsx scripts/validate-fidelity.ts",
-    "validate:config-tokens": "tsx scripts/validate-config-tokens.ts",
-    "validate:template-syntax": "tsx scripts/validate-template-syntax.ts",
-    "validate:backup": "bash scripts/backup/validate-pitr-restore.sh"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mathursrus/FRAIM.git"
-  },
-  "keywords": [
-    "fraim",
-    "ai-management",
-    "ai-coordination",
-    "ai-agents",
-    "multi-agent",
-    "github",
-    "automation",
-    "gitops",
-    "cursor",
-    "claude",
-    "windsurf",
-    "rigor",
-    "enterprise",
-    "framework",
-    "ai-managers"
-  ],
-  "author": "Sid Mathur <sid.mathur@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/mathursrus/FRAIM/issues"
-  },
-  "homepage": "https://github.com/mathursrus/FRAIM#readme",
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.58.2",
-    "@types/adm-zip": "^0.5.7",
-    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.6",
-    "@types/node": "^20.0.0",
-    "@types/node-fetch": "^2.6.13",
-    "@types/prompts": "^2.4.9",
-    "@types/semver": "^7.7.1",
-    "fast-glob": "^3.3.3",
-    "html-to-docx": "^1.8.0",
-    "markdown-it": "^14.1.1",
-    "markdown-it-highlightjs": "^4.3.0",
-    "playwright": "^1.58.2",
-    "pptxgenjs": "^4.0.1",
-    "puppeteer": "^24.36.1",
-    "qrcode": "^1.5.4",
-    "sharp": "^0.34.5",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
-  },
-  "files": [
-    "dist/src/local-mcp-server/",
-    "dist/src/cli/",
-    "dist/src/core/",
-    "bin/fraim.js",
-    "bin/fraim-mcp.js",
-    "index.js",
-    "README.md",
-    "CHANGELOG.md",
-    "LICENSE",
-    "package.json"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@octokit/rest": "^22.0.1",
-    "adm-zip": "^0.5.16",
-    "axios": "^1.7.0",
-    "chalk": "4.1.2",
-    "commander": "^14.0.2",
-    "cors": "^2.8.5",
-    "dotenv": "^16.4.7",
-    "express": "^5.2.1",
-    "mongodb": "^7.0.0",
-    "node-edge-tts": "^1.2.10",
-    "nodemailer": "^8.0.3",
-    "prompts": "^2.4.2",
-    "resend": "^6.9.3",
-    "semver": "^7.7.4",
-    "stripe": "^20.3.1",
-    "toml": "^3.0.0",
-    "tree-kill": "^1.2.2",
-    "xml2js": "^0.6.2"
-  }
-}
+{
+  "name": "fraim-framework",
+  "version": "2.0.123",
+  "description": "FRAIM: AI Workforce Infrastructure — the organizational capability that turns AI agents into an accountable workforce, their operators into capable AI managers, and executives into leaders with clear optics on AI proficiency.",
+  "main": "index.js",
+  "bin": {
+    "fraim": "./index.js",
+    "fraim-framework": "./index.js"
+  },
+  "scripts": {
+    "dev": "tsx --watch src/fraim-mcp-server.ts > server.log 2>&1",
+    "dev:prod": "npm run build && node dist/src/fraim-mcp-server.js > server.log 2>&1",
+    "build": "tsc && npm run build:stubs && npm run build:fraim-brain && node scripts/copy-registry.js && node -e \"require('fs').copyFileSync('src/core/types.ts', 'registry/templates/manager/fraim-config-schema.ts')\" && npm run validate:registry && npm run validate:fraim-pro-assets && tsx scripts/validate-purity.ts",
+    "build:stubs": "tsx scripts/build-stub-registry.ts",
+    "build:fraim-brain": "node scripts/generate-fraim-brain.js",
+    "test-all": "npm run test && npm run test:isolated && npm run test:ui",
+    "test": "node scripts/test-with-server.js",
+    "test:isolated": "npx tsx --test --test-reporter=spec tests/isolated/test-*.ts",
+    "test:smoke": "node scripts/test-with-server.js --tags=smoke",
+    "test:coverage": "node scripts/test-with-server.js --tags=smoke --coverage",
+    "test:stripe": "node scripts/test-with-server.js tests/test-stripe-payment-complete.ts",
+    "test:stripe:ui": "playwright test tests/ui/test-payment-ui.spec.ts",
+    "test:perf": "node scripts/test-with-server.js tests/performance/analytics-perf.ts",
+    "test:ui": "playwright test",
+    "test:ui:headed": "playwright test --headed",
+    "hub:desktop": "npm run build && electron dist/src/ai-hub/desktop-main.js",
+    "start:fraim": "tsx src/fraim-mcp-server.ts",
+    "dev:fraim": "tsx --watch src/fraim-mcp-server.ts",
+    "serve:website": "node fraim-pro/serve.js",
+    "watch:fraimlogs": "tsx scripts/watch-fraim-logs.ts > prodlogs.log 2>&1",
+    "manage-keys": "tsx scripts/fraim/manage-keys.ts",
+    "manage-teams": "tsx scripts/fraim/manage-teams.ts",
+    "partner-discounts": "tsx scripts/fraim/manage-partner-discounts.ts",
+    "fix-key": "tsx scripts/fraim/fix-expired-key.ts",
+    "setup-stripe-webhook": "tsx scripts/fraim/setup-stripe-webhook.ts",
+    "view-signups": "tsx scripts/view-signups.ts",
+    "fraim:init": "npm run build && node index.js init",
+    "fraim:sync": "node index.js sync --local",
+    "postinstall": "fraim sync --skip-updates || echo 'FRAIM setup skipped.'",
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm run publish-both",
+    "publish-both": "node scripts/publish-both.js",
+    "publish-fraim-only": "node scripts/publish-fraim.js",
+    "publish-both-manual": "node scripts/publish-both.js",
+    "validate:registry": "tsx scripts/verify-registry-paths.ts && npm run validate:jobs && npm run validate:skills && npm run validate:registry-references && npm run validate:platform-agnostic && npm run validate:template-namespaces && npm run validate:config-fallbacks && npm run validate:bootstrap-config-coverage && npm run validate:provider-action-mappings && npm run validate:fidelity && npm run validate:config-tokens && npm run validate:brain-mapping && npm run validate:template-syntax",
+    "validate:registry-references": "tsx scripts/validate-registry-references.ts",
+    "validate:brain-mapping": "tsx scripts/validate-brain-mapping.ts",
+    "validate:fraim-pro-assets": "tsx scripts/validate-fraim-pro-assets.ts",
+    "validate:jobs": "tsx scripts/validate-jobs.ts",
+    "validate:platform-agnostic": "tsx scripts/validate-platform-agnostic.ts",
+    "validate:skills": "tsx scripts/validate-skills.ts",
+    "validate:template-namespaces": "tsx scripts/validate-template-namespaces.ts",
+    "validate:config-fallbacks": "tsx scripts/validate-config-fallbacks.ts",
+    "validate:bootstrap-config-coverage": "tsx scripts/validate-bootstrap-config-coverage.ts",
+    "validate:provider-action-mappings": "tsx scripts/validate-provider-action-mappings.ts",
+    "validate:fidelity": "tsx scripts/validate-fidelity.ts",
+    "validate:config-tokens": "tsx scripts/validate-config-tokens.ts",
+    "validate:template-syntax": "tsx scripts/validate-template-syntax.ts",
+    "validate:backup": "bash scripts/backup/validate-pitr-restore.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mathursrus/FRAIM.git"
+  },
+  "keywords": [
+    "fraim",
+    "ai-management",
+    "ai-coordination",
+    "ai-agents",
+    "multi-agent",
+    "github",
+    "automation",
+    "gitops",
+    "cursor",
+    "claude",
+    "windsurf",
+    "rigor",
+    "enterprise",
+    "framework",
+    "ai-managers"
+  ],
+  "author": "Sid Mathur <sid.mathur@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mathursrus/FRAIM/issues"
+  },
+  "homepage": "https://github.com/mathursrus/FRAIM#readme",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@types/adm-zip": "^0.5.7",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^20.0.0",
+    "@types/node-fetch": "^2.6.13",
+    "@types/prompts": "^2.4.9",
+    "@types/semver": "^7.7.1",
+    "fast-glob": "^3.3.3",
+    "html-to-docx": "^1.8.0",
+    "markdown-it": "^14.1.1",
+    "markdown-it-highlightjs": "^4.3.0",
+    "playwright": "^1.58.2",
+    "pptxgenjs": "^4.0.1",
+    "puppeteer": "^24.36.1",
+    "qrcode": "^1.5.4",
+    "sharp": "^0.34.5",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "dist/src/local-mcp-server/",
+    "dist/src/cli/",
+    "dist/src/ai-hub/",
+    "dist/src/core/",
+    "bin/fraim.js",
+    "bin/fraim-mcp.js",
+    "public/ai-hub/",
+    "index.js",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@octokit/rest": "^22.0.1",
+    "adm-zip": "^0.5.16",
+    "axios": "^1.7.0",
+    "chalk": "4.1.2",
+    "commander": "^14.0.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "electron": "^41.2.2",
+    "express": "^5.2.1",
+    "mongodb": "^7.0.0",
+    "node-edge-tts": "^1.2.10",
+    "nodemailer": "^8.0.3",
+    "prompts": "^2.4.2",
+    "resend": "^6.9.3",
+    "semver": "^7.7.4",
+    "stripe": "^20.3.1",
+    "toml": "^3.0.0",
+    "tree-kill": "^1.2.2",
+    "xml2js": "^0.6.2"
+  }
+}

package/public/ai-hub/index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Visa AI Hub</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='%230d3f8a'/%3E%3Cpath d='M13 31h6l3-14h-6zm10 0h6l3-14h-6zm11-14h-6l-3 14h6z' fill='%23f7b600'/%3E%3C/svg%3E">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div class="app-shell">
+    <header class="app-header">
+      <div class="brand-lockup">
+        <p class="brand-title">Visa AI Hub</p>
+        <p class="brand-subtitle">Powered by <a href="https://fraimworks.ai" target="_blank" rel="noreferrer">FRAIM</a></p>
+      </div>
+      <div class="topbar-card workspace-card">
+        <div class="workspace-section workspace-section-inline">
+          <span class="section-label">Employee</span>
+          <div class="employee-picker" id="employee-picker"></div>
+        </div>
+        <details class="project-path workspace-project">
+          <summary>
+            <span>Project Path</span>
+            <span class="project-path-preview" id="project-path-preview"></span>
+          </summary>
+          <div class="project-path-body">
+            <input id="project-path-input" class="text-input" type="text" />
+            <div class="project-actions">
+              <button id="browse-project" class="secondary-button" type="button">Choose Folder</button>
+              <button id="reload-project" class="secondary-button" type="button">Reload</button>
+            </div>
+            <p class="helper-text" id="project-status"></p>
+          </div>
+        </details>
+      </div>
+    </header>
+
+    <main class="workspace">
+      <section class="workspace-intro card">
+        <div class="workspace-intro-copy">
+          <p class="section-label">Pick A Job</p>
+          <p class="panel-intro">Manage your AI employees just like you manage your teams. Tell them what jobs they need to complete, review their results, coach them, expect them to learn from you, and expect to learn from your employees.</p>
+        </div>
+        <div class="workspace-intro-actions">
+          <p class="section-label">Job Category</p>
+          <div class="category-picker" id="category-picker"></div>
+        </div>
+      </section>
+
+      <section class="job-panel">
+        <div class="panel-head card">
+          <div class="panel-copy">
+            <p class="section-label">Job Category</p>
+            <h2 class="panel-title">Pick a job</h2>
+            <p class="muted">Choose the next assignment for your employee.</p>
+          </div>
+        </div>
+
+        <div class="job-list-card card">
+          <div class="job-list" id="job-list"></div>
+        </div>
+      </section>
+
+      <section class="interaction-panel">
+        <div class="card interaction-card">
+          <div class="run-toolbar">
+            <div class="selected-job-summary">
+              <div>
+                <p class="section-label">Selected Job</p>
+                <h2 id="selected-job-title">Select a job</h2>
+                <p id="selected-job-intent" class="muted"></p>
+              </div>
+              <ul class="job-outcomes" id="selected-job-outcomes"></ul>
+            </div>
+            <div class="run-toolbar-actions">
+              <button id="start-job" class="primary-button" type="button" disabled>Start Job</button>
+            </div>
+          </div>
+
+          <div class="interaction-body">
+            <div class="conversation-column">
+              <div class="interaction-head">
+                <div>
+                  <p class="section-label">Manager / Employee Interactions</p>
+                  <h2 id="conversation-title">No active job</h2>
+                </div>
+                <p class="muted" id="conversation-state">Select a job and coach your employee toward your desired outcome.</p>
+              </div>
+
+              <div class="timeline" id="timeline"></div>
+            </div>
+
+            <div class="manager-tools">
+              <div class="template-row">
+                <span class="section-label">Manager Templates</span>
+                <div class="template-chips" id="manager-templates"></div>
+              </div>
+
+              <label class="composer-label" for="manager-message">Coach your employee toward your desired outcome.</label>
+              <textarea id="manager-message" class="composer" placeholder='Use FRAIM job "marketing-content-creation" and include the audience, desired outcome, and any constraints.'></textarea>
+
+              <div class="composer-actions">
+                <button id="send-coaching" class="secondary-button" type="button" disabled>Send Coaching</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <details class="card micro-manage" id="micro-manage">
+          <summary>Micro-manage</summary>
+          <div class="micro-manage-body" id="raw-history"></div>
+        </details>
+      </section>
+    </main>
+  </div>
+
+  <template id="timeline-message-template">
+    <article class="message">
+      <div class="message-meta">
+        <span class="message-role"></span>
+        <time class="message-time"></time>
+      </div>
+      <p class="message-text"></p>
+    </article>
+  </template>
+
+  <script src="./script.js"></script>
+</body>
+</html>