@aiworkbench/vibe-cli 0.0.6 → 0.0.8

package/dist/index.js

@@ -5853,6 +5853,9 @@ bridge.navigation.navigate("/some/host/path");
 
 This triggers a host-level route change. It is fire-and-forget — your mini-app will
 be unmounted as the host navigates away.
+
+See the \`host-design-system\` skill for the complete list of host routes, dynamic
+segments, query parameters, and navigation code examples.
 `;
 }
 function getViewSwitchingExample(framework) {
@@ -6743,13 +6746,36 @@ The host application has these routes. Use \`bridge.navigation.navigate(path)\`
 
 | Route | Page |
 |-------|------|
-| \`/chat\` | Chat with agents |
+| \`/[agentId]/chat\` | Chat with a specific agent |
+| \`/[agentId]/talk\` | Voice conversation |
 | \`/marketplace\` | Marketplace landing |
-| \`/marketplace/agents?state=PUBLISHED\` | Published agents |
+| \`/marketplace/agents\` | Agent directory |
+| \`/marketplace/servers\` | MCP server directory |
+| \`/builder\` | Builder landing |
+| \`/builder/agent\` | Agent builder |
 | \`/playground\` | Prompt playground |
-| \`/builder\` | Agent builder |
+| \`/playground/[appId]\` | Mini-app sandbox |
 | \`/documents\` | Document library |
-| \`/administration\` | Admin panel (admins only) |
+
+### Dynamic Segments
+
+| Segment | Description | Example |
+|---------|-------------|---------|
+| \`[agentId]\` | Agent UUID — identifies which agent to chat with or call | \`a1b2c3d4-e5f6-7890-abcd-ef1234567890\` |
+| \`[appId]\` | Mini-app ID from \`manifest.json\` — loads that app in the sandbox | \`my-mini-app\` |
+
+### Navigation Examples
+
+\`\`\`typescript
+// Navigate to a specific agent's chat
+bridge.navigation.navigate(\`/\${agentId}/chat\`);
+
+// Open the marketplace agent directory
+bridge.navigation.navigate("/marketplace/agents");
+
+// Open a mini-app in the playground sandbox
+bridge.navigation.navigate(\`/playground/\${appId}\`);
+\`\`\`
 
 ## Dark Mode Support
 
@@ -7091,6 +7117,103 @@ private render() {
   }
 }
 
+// src/skills/platform-design-philosophy.ts
+function generatePlatformDesignPhilosophy(_config) {
+  return `# Platform Design Philosophy
+
+## Core Principle: Be Invisible
+
+A successful mini-app is one the user cannot distinguish from the host. If someone
+can tell where the host ends and your mini-app begins, the design has failed. Your
+goal is not to build something that "looks good" — it is to build something that
+**disappears** into the platform.
+
+This means: no branding, no personality, no signature style. The host IS the style.
+You are extending it, not decorating it.
+
+## Design Thinking for Platform Consistency
+
+### Match Visual Weight
+
+Every element in the host has a deliberate visual weight. Buttons are small and quiet.
+Cards have thin borders and minimal shadow. Headings are understated. If your mini-app
+introduces elements that are heavier — bolder, larger, more colorful, more shadowed —
+it will feel foreign even if the colors technically match.
+
+Before adding any element, look at the host's equivalent. How heavy is it? Match that
+weight exactly.
+
+### Respect Information Hierarchy
+
+The host uses a strict hierarchy:
+1. **Content** comes first — data, text, interactive elements
+2. **Chrome** is minimal — thin borders, subtle backgrounds, small labels
+3. **Decoration** is absent — no gradients, no illustrations, no ornamental elements
+
+Your mini-app should follow the same hierarchy. If you're spending time on decoration,
+you're diverging from the platform aesthetic.
+
+### Grayscale-First Philosophy
+
+The host is intentionally grayscale. Color is used as a **signal**, not a **style**:
+- **Tertiary accent** (yellow-green) marks featured or promoted items
+- **Destructive red** marks dangerous actions
+- **Chart/data colors** convey meaning in visualizations
+
+Everything else — backgrounds, borders, text, icons, cards, buttons — is grayscale.
+If your UI uses color for anything other than semantic signaling, it will clash.
+
+## What "Native" Means in This Platform
+
+| Aspect | Native Approach |
+|--------|----------------|
+| **Typography** | Geist Sans and Geist Mono. No other fonts, ever. |
+| **Color palette** | OKLCh grayscale with a single accent. No brand colors, no blues, no greens. |
+| **Component style** | shadcn/UI "New York" variant — clean, dense, slightly austere. |
+| **Density** | Dense but not cramped. Cards use \`1rem\` padding, grids use \`0.75rem–1.5rem\` gaps. |
+| **Interactions** | Subtle and fast. \`150–180ms\` transitions. No bouncing, no sliding, no scaling. |
+| **Borders** | \`1px solid\` in muted gray. Never thicker. Never colored. |
+| **Shadows** | Flat by default. Shadow appears only on hover for interactive cards. |
+| **Icons** | Lucide at \`16–20px\`, stroke-only, \`currentColor\`. No filled icons, no custom icon sets. |
+
+## Quick Decision Checklist
+
+Use this before writing any component:
+
+- [ ] **Card radius** — \`8px\` standard, \`12px\` for marketplace-style cards, \`6px\` for buttons/inputs
+- [ ] **Grayscale chrome** — Is every non-content element (borders, backgrounds, labels) grayscale?
+- [ ] **Type scale** — Body at \`0.875rem\`, headings at \`1.125rem\`, labels at \`0.6875rem\` uppercase
+- [ ] **Transition timing** — \`180ms ease\` for hover/shadow, \`150ms ease\` for color/opacity
+- [ ] **Border width** — \`1px\` everywhere, no exceptions
+- [ ] **Shadow** — None at rest, \`0 2px 6px rgba(0,0,0,0.15)\` on hover for interactive cards only
+- [ ] **Font** — Geist Sans via \`var(--font-geist-sans)\`, Geist Mono via \`var(--font-geist-mono)\`
+- [ ] **Spacing** — Multiples of \`0.25rem\` (4px base unit), common values: 8px, 12px, 16px, 24px
+
+## Anti-Patterns
+
+These immediately break the native feel. Avoid them completely:
+
+| Anti-Pattern | Why It Fails |
+|-------------|-------------|
+| **Colored backgrounds** | The host uses white/near-white. Colored sections scream "third-party." |
+| **Custom fonts** | Even "nice" fonts like Inter or Roboto break consistency. Only Geist. |
+| **Animated entrances** | Fade-ins, slide-ups, scale animations on mount. The host doesn't do this. |
+| **Gradient chrome** | Gradient backgrounds, gradient borders, gradient buttons. The host is flat. |
+| **Shadows at rest** | Drop shadows on cards, panels, or containers that aren't being hovered. |
+| **Saturated color palettes** | Blues, greens, oranges for UI elements. Only grayscale + the tertiary accent. |
+| **Oversized headings** | Headings larger than \`1.125rem\`. The host's headings are deliberately small. |
+| **Thick borders** | Borders thicker than \`1px\`. The host uses hairline borders exclusively. |
+| **Rounded-full pills** | Pill-shaped elements (\`border-radius: 9999px\`). Cards are \`8–12px\`, badges are \`6px\`. |
+| **Icon-heavy UI** | Large icons, colored icons, icon grids. The host uses small, monochrome icons sparingly. |
+
+## Cross-Reference
+
+This skill establishes the **design mindset**. For specific implementation values — exact
+colors, spacing tokens, component CSS, and dark mode support — load the \`host-design-system\`
+skill. Both skills should be consulted before writing any UI code.
+`;
+}
+
 // src/scaffold/write-agent-docs.ts
 var PERMISSION_DOCS = {
   auth: `### auth
@@ -7287,6 +7410,19 @@ cleanups.forEach((fn) => fn());
 | "Unresolved external" build warning | Dependency not in Vite external config | Add to \`rollupOptions.external\` or bundle it |
 | HMR not reflecting changes | Custom element re-registration conflict | Hard refresh the page (Cmd+Shift+R / Ctrl+Shift+R) |
 
+## Always-Loaded Design Skills
+
+**IMPORTANT**: Always load these two skills BEFORE writing any UI code. They are
+mandatory for every task that involves creating or modifying visual components.
+
+| Skill | Purpose |
+|-------|---------|
+| \`platform-design-philosophy\` | Design mindset — ensures your UI feels native to the host platform |
+| \`host-design-system\` | Design tokens — exact colors, spacing, typography, and component CSS |
+
+Load both skills at the start of any UI task. The philosophy skill establishes the
+approach; the design system skill provides the implementation details.
+
 ## Skills Reference
 
 This project includes detailed skill guides for specific topics. Skills are **not loaded by
@@ -7307,7 +7443,6 @@ reference than to guess.
 | \`debugging\` | Troubleshooting issues, tracing bridge calls, fixing HMR problems |
 | \`navigation-patterns\` | Building multi-view UIs, tabs, wizards, or steppers (no URL routing) |
 | \`asset-handling\` | Working with images, SVGs, fonts, or other static assets |
-| \`host-design-system\` | Styling components to match the host application's design tokens and visual language |
 ${testing ? `| \`testing-guide\` | Writing or modifying tests, mocking the bridge, test setup |
 ` : ""}
 **How to use skills:** Read the skill file for the relevant topic before implementing. Multiple
@@ -7349,7 +7484,8 @@ function generateEmbeddedSkills(config) {
     { name: "Debugging", content: generateDebugging(config) },
     { name: "Navigation Patterns", content: generateNavigationPatterns(config) },
     { name: "Asset Handling", content: generateAssetHandling(config) },
-    { name: "Host Design System", content: generateHostDesignSystem(config) }
+    { name: "Host Design System", content: generateHostDesignSystem(config) },
+    { name: "Platform Design Philosophy", content: generatePlatformDesignPhilosophy(config) }
   ];
   if (config.testing) {
     skills.push({ name: "Testing Guide", content: generateTestingGuide(config) });
@@ -7691,6 +7827,11 @@ var SKILL_DEFS = [
     name: "host-design-system",
     description: "Host app design tokens, typography, spacing, colors, and component patterns",
     generate: generateHostDesignSystem
+  },
+  {
+    name: "platform-design-philosophy",
+    description: "Design mindset and principles for building UI that feels native to the host platform",
+    generate: generatePlatformDesignPhilosophy
   }
 ];
 async function writeFolderSkill(baseDir, skill, content) {
@@ -8772,7 +8913,47 @@ async function configCommand(args) {
 // src/commands/release.ts
 import { resolve as resolve4 } from "node:path";
 import { readFile as readFile11, writeFile as writeFile9 } from "node:fs/promises";
-import { execSync as execSync2 } from "node:child_process";
+import { execFileSync } from "node:child_process";
+var REQUIRED_ENV_VARS = [
+  "VIBE_STORAGE_ACCOUNT_NAME",
+  "VIBE_STORAGE_ACCOUNT_KEY",
+  "VIBE_STORAGE_CONTAINER_NAME",
+  "VIBE_REGISTRY_REPO",
+  "VIBE_REGISTRY_TOKEN"
+];
+function parseDotenv(content) {
+  const env = {};
+  for (const line of content.split(`
+`)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#"))
+      continue;
+    const eqIdx = trimmed.indexOf("=");
+    if (eqIdx === -1)
+      continue;
+    const key = trimmed.slice(0, eqIdx).trim();
+    let value = trimmed.slice(eqIdx + 1).trim();
+    if (value.startsWith('"') && value.endsWith('"') || value.startsWith("'") && value.endsWith("'")) {
+      value = value.slice(1, -1);
+    }
+    env[key] = value;
+  }
+  return env;
+}
+async function validateEnvVars(cwd) {
+  let dotenv = {};
+  try {
+    const content = await readFile11(resolve4(cwd, ".env"), "utf-8");
+    dotenv = parseDotenv(content);
+  } catch {}
+  const missing = [];
+  for (const key of REQUIRED_ENV_VARS) {
+    if (!dotenv[key] && !process.env[key]) {
+      missing.push(key);
+    }
+  }
+  return missing.length === 0 ? { ok: true } : { ok: false, missing };
+}
 function bumpVersion(version, type) {
   if (type === "keep")
     return version;
@@ -8792,8 +8973,8 @@ function bumpVersion(version, type) {
       return `${major + 1}.0.0`;
   }
 }
-function git(cmd, cwd) {
-  return execSync2(`git ${cmd}`, { cwd, encoding: "utf-8" }).trim();
+function git(args, cwd) {
+  return execFileSync("git", args, { cwd, encoding: "utf-8" }).trim();
 }
 function parseGitHubRepo(remoteUrl, host = "github.com") {
   const escaped = host.replace(/\./g, "\\.");
@@ -8840,6 +9021,47 @@ async function releaseCommand(dir) {
   });
   const newVersion = bumpVersion(currentVersion, bumpType);
   const tag = `v${newVersion}`;
+  const publishMode = await dist_default5({
+    message: "Publish method:",
+    choices: [
+      {
+        name: "Local publish (uses .env credentials)",
+        value: "local"
+      },
+      {
+        name: "CI publish (push tag → GitHub Actions)",
+        value: "ci"
+      }
+    ]
+  });
+  let environment = "dev";
+  if (publishMode === "local") {
+    environment = await dist_default5({
+      message: "Target environment:",
+      choices: [
+        { name: "dev", value: "dev" },
+        { name: "staging", value: "staging" },
+        { name: "prod", value: "prod" }
+      ]
+    });
+    const envResult = await validateEnvVars(outputDir);
+    if (!envResult.ok) {
+      blank();
+      error("Missing required environment variables for local publish:");
+      for (const key of envResult.missing) {
+        info(`  • ${key}`);
+      }
+      blank();
+      info("Add them to a .env file in your project root, or export them in your shell.");
+      info("Example .env:");
+      blank();
+      for (const key of REQUIRED_ENV_VARS) {
+        info(`  ${key}=your-value-here`);
+      }
+      blank();
+      process.exit(1);
+    }
+  }
   blank();
   if (bumpType === "keep") {
     info(`Version: ${currentVersion} (unchanged)`);
@@ -8847,6 +9069,7 @@ async function releaseCommand(dir) {
     info(`Version: ${currentVersion} → ${newVersion}`);
   }
   info(`Tag:     ${tag}`);
+  info(`Mode:    ${publishMode === "local" ? `Local publish → ${environment}` : "CI publish"}`);
   blank();
   const proceed = await dist_default3({
     message: "Proceed with release?",
@@ -8863,9 +9086,28 @@ async function releaseCommand(dir) {
 `, "utf-8");
     success(`Updated manifest.json to ${newVersion}`);
   }
+  if (publishMode === "local") {
+    info("Building mini-app...");
+    try {
+      execFileSync("bun", ["run", "build"], { cwd: outputDir, stdio: "inherit" });
+      success("Build complete.");
+    } catch {
+      error("Build failed. Fix the errors above and retry.");
+      process.exit(1);
+    }
+    info(`Publishing to ${environment}...`);
+    try {
+      execFileSync("npx", ["@aiworkbench/vibe-publish", "-e", environment, "--direct-push", "--app-dir", "."], { cwd: outputDir, stdio: "inherit" });
+      success(`Published to ${environment} registry.`);
+    } catch {
+      error("Publish failed. Fix the error above and retry.");
+      info("Your manifest.json has been updated but no git operations were performed.");
+      process.exit(1);
+    }
+  }
   try {
-    git(`add manifest.json`, outputDir);
-    git(`commit -m "release: ${tag}"`, outputDir);
+    git(["add", "manifest.json"], outputDir);
+    git(["commit", "-m", `release: ${tag}`], outputDir);
     success(`Committed: release: ${tag}`);
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);
@@ -8881,7 +9123,7 @@ async function releaseCommand(dir) {
     }
   }
   try {
-    git(`tag ${tag}`, outputDir);
+    git(["tag", tag], outputDir);
     success(`Tagged: ${tag}`);
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);
@@ -8894,8 +9136,8 @@ async function releaseCommand(dir) {
     process.exit(1);
   }
   try {
-    git(`push`, outputDir);
-    git(`push --tags`, outputDir);
+    git(["push"], outputDir);
+    git(["push", "--tags"], outputDir);
     success(`Pushed commit and tag.`);
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);
@@ -8906,20 +9148,24 @@ async function releaseCommand(dir) {
     process.exit(1);
   }
   blank();
-  success(`Released ${tag} — CI will now build and publish your mini-app.`);
-  try {
-    const remoteUrl = git("remote get-url origin", outputDir);
-    const globalConfig = await loadGlobalConfig();
-    const host = globalConfig.githubHost ?? "github.com";
-    const repo = parseGitHubRepo(remoteUrl, host);
-    if (repo) {
-      blank();
-      info(`Check CI progress: https://${host}/${repo}/actions`);
-      if (globalConfig.registryRepo) {
-        info(`After CI completes, your app will appear in: https://${host}/${globalConfig.registryRepo}`);
+  if (publishMode === "local") {
+    success(`Released ${tag} — published locally to ${environment} registry.`);
+  } else {
+    success(`Released ${tag} — CI will now build and publish your mini-app.`);
+    try {
+      const remoteUrl = git(["remote", "get-url", "origin"], outputDir);
+      const globalConfig = await loadGlobalConfig();
+      const host = globalConfig.githubHost ?? "github.com";
+      const repo = parseGitHubRepo(remoteUrl, host);
+      if (repo) {
+        blank();
+        info(`Check CI progress: https://${host}/${repo}/actions`);
+        if (globalConfig.registryRepo) {
+          info(`After CI completes, your app will appear in: https://${host}/${globalConfig.registryRepo}`);
+        }
       }
-    }
-  } catch {}
+    } catch {}
+  }
   blank();
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiworkbench/vibe-cli",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "publishConfig": {
     "access": "public"
   },

package/templates/react/vite.config.ts

@@ -3,6 +3,9 @@ import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
   build: {
     lib: {
       entry: "./src/main.tsx",
@@ -11,7 +14,7 @@ export default defineConfig({
       formats: ["es"],
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime"],
       output: {
         globals: {
           react: "React",

package/templates/vanilla/vite.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from "vite";
 
 export default defineConfig({
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
   build: {
     lib: {
       entry: "./src/main.ts",

package/templates/vue/vite.config.ts

@@ -3,6 +3,9 @@ import vue from "@vitejs/plugin-vue";
 
 export default defineConfig({
   plugins: [vue()],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
   build: {
     lib: {
       entry: "./src/main.ts",