luxlabs 1.0.3 → 1.0.5

package/commands/interface/boilerplate.js

@@ -3,24 +3,11 @@ const path = require('path');
 
 /**
  * Get the templates directory path
- * Tries multiple paths to support both:
- * - Electron app: electron/bin/lux-cli/commands/interface/ → 4 levels up
- * - npm package: luxlabs/commands/interface/ → 2 levels up
+ * Templates are stored in lux-cli/templates/interface-boilerplate
+ * This is the single source of truth - used by both CLI and Electron app
  */
 function getTemplatesDir() {
-  const candidates = [
-    path.join(__dirname, '../../../../templates/interface-boilerplate'),  // Electron app
-    path.join(__dirname, '../../templates/interface-boilerplate'),        // npm package
-  ];
-
-  for (const candidate of candidates) {
-    if (fs.existsSync(candidate)) {
-      return candidate;
-    }
-  }
-
-  // Return first candidate for error message
-  return candidates[0];
+  return path.join(__dirname, '../../templates/interface-boilerplate');
 }
 
 /**

package/commands/interface/init.js

@@ -157,14 +157,6 @@ async function initInterface(options) {
       console.log(chalk.yellow('  ⚠ Vercel project not created (may need VERCEL_TOKEN)'));
     }
 
-    // Output parseable format for API wrapper
-    console.log(`App created: ${interfaceId}`);
-    if (githubRepoUrl) {
-      console.log(`GitHub repo: ${githubRepoUrl}`);
-    }
-    if (vercelProjectId) {
-      console.log(`Vercel project: ${vercelProjectId}`);
-    }
     console.log(chalk.dim('─'.repeat(50)));
 
     // Set up local files and push to GitHub
@@ -315,6 +307,15 @@ async function initInterface(options) {
       }
       console.log(chalk.dim('─'.repeat(50)));
 
+      // Output parseable format for IPC handler AFTER all steps complete successfully
+      console.log(`App created: ${interfaceId}`);
+      if (githubRepoUrl) {
+        console.log(`GitHub repo: ${githubRepoUrl}`);
+      }
+      if (vercelProjectId) {
+        console.log(`Vercel project: ${vercelProjectId}`);
+      }
+
       console.log(chalk.green('\n✅ Interface created successfully!\n'));
       console.log(chalk.dim('  Created:'));
       console.log(chalk.dim('    • Registered in system.interfaces'));
@@ -332,6 +333,9 @@ async function initInterface(options) {
       console.log(chalk.dim('    • Edit your code'));
       console.log(chalk.dim('    • Run'), chalk.white('lux i deploy'), chalk.dim('to push to GitHub (auto-deploys to Vercel)\n'));
     } else {
+      // No GitHub URL - output parseable format anyway (cloud-only interface)
+      console.log(`App created: ${interfaceId}`);
+
       console.log(chalk.yellow('\n⚠ No GitHub URL returned - skipping local setup'));
       console.log(chalk.dim('\n  Created:'));
       console.log(chalk.dim('    • Registered in system.interfaces'));

package/commands/tools.js

@@ -0,0 +1,299 @@
+/**
+ * Tools CLI Commands
+ *
+ * List and manage AI tools (both default and custom) that agents can use.
+ */
+
+const axios = require('axios');
+const chalk = require('chalk');
+const {
+  getStudioApiUrl,
+  getProjectId,
+  isAuthenticated,
+  loadConfig,
+} = require('../lib/config');
+const {
+  error,
+  success,
+  info,
+  formatTable,
+} = require('../lib/helpers');
+
+/**
+ * Get auth headers for Studio API
+ */
+function getStudioAuthHeaders() {
+  const config = loadConfig();
+  if (!config || !config.apiKey || !config.orgId) {
+    return {};
+  }
+  return {
+    'Authorization': `Bearer ${config.apiKey}`,
+    'X-Org-Id': config.orgId,
+    'Content-Type': 'application/json',
+  };
+}
+
+/**
+ * Get tools API URL
+ */
+function getToolsApiUrl() {
+  const studioApiUrl = getStudioApiUrl();
+  const projectId = getProjectId();
+  if (!projectId) {
+    throw new Error('No project ID found. Run this command from a Lux Studio project directory.');
+  }
+  return `${studioApiUrl}/api/projects/${projectId}/tools`;
+}
+
+async function handleTools(args) {
+  // Check authentication
+  if (!isAuthenticated()) {
+    console.log(
+      chalk.red('❌ Not authenticated. Run'),
+      chalk.white('lux login'),
+      chalk.red('first.')
+    );
+    process.exit(1);
+  }
+
+  const command = args[0];
+
+  if (!command) {
+    console.log(`
+${chalk.bold('Usage:')} lux tools <command> [args]
+
+${chalk.bold('Commands:')}
+  list                    List all available tools (default + custom)
+  list-default            List only default (built-in) tools
+  list-custom             List only custom tools
+  get <tool-id>           Get details of a specific tool
+
+${chalk.bold('Options:')}
+  --json                  Output in JSON format
+
+${chalk.bold('Examples:')}
+  lux tools list
+  lux tools list-default
+  lux tools list-custom
+  lux tools get tool_abc123
+  lux tools list --json
+`);
+    process.exit(0);
+  }
+
+  const isJsonOutput = args.includes('--json');
+
+  try {
+    switch (command) {
+      case 'list': {
+        info('Loading tools...');
+        const toolsApiUrl = getToolsApiUrl();
+        const { data } = await axios.get(toolsApiUrl, {
+          headers: getStudioAuthHeaders(),
+        });
+
+        const tools = data.tools || [];
+
+        if (isJsonOutput) {
+          console.log(JSON.stringify(tools, null, 2));
+          return;
+        }
+
+        if (tools.length === 0) {
+          console.log('\n(No tools found)\n');
+          return;
+        }
+
+        const defaultTools = tools.filter(t => t.isDefault);
+        const customTools = tools.filter(t => !t.isDefault);
+
+        // Display default tools
+        if (defaultTools.length > 0) {
+          console.log(`\n${chalk.bold.cyan('Default Tools')} (${defaultTools.length}):\n`);
+          formatTable(defaultTools.map(t => ({
+            name: t.name,
+            method: t.httpMethod,
+            category: t.category || '-',
+            description: t.description?.substring(0, 60) + (t.description?.length > 60 ? '...' : '') || '-',
+          })));
+        }
+
+        // Display custom tools
+        if (customTools.length > 0) {
+          console.log(`\n${chalk.bold.green('Custom Tools')} (${customTools.length}):\n`);
+          formatTable(customTools.map(t => ({
+            id: t.id,
+            name: t.name,
+            method: t.httpMethod,
+            endpoint: t.apiEndpoint?.substring(0, 40) + (t.apiEndpoint?.length > 40 ? '...' : '') || '-',
+          })));
+        }
+
+        console.log(`\n${chalk.green('✓')} Total: ${tools.length} tool(s) (${defaultTools.length} default, ${customTools.length} custom)\n`);
+        break;
+      }
+
+      case 'list-default': {
+        info('Loading default tools...');
+        const toolsApiUrl = getToolsApiUrl();
+        const { data } = await axios.get(toolsApiUrl, {
+          headers: getStudioAuthHeaders(),
+        });
+
+        const defaultTools = (data.tools || []).filter(t => t.isDefault);
+
+        if (isJsonOutput) {
+          console.log(JSON.stringify(defaultTools, null, 2));
+          return;
+        }
+
+        if (defaultTools.length === 0) {
+          console.log('\n(No default tools found)\n');
+          return;
+        }
+
+        console.log(`\n${chalk.bold('Default Tools')} (${defaultTools.length}):\n`);
+
+        for (const tool of defaultTools) {
+          console.log(chalk.cyan(`  ${tool.name}`));
+          console.log(chalk.gray(`    ${tool.description || 'No description'}`));
+          console.log(chalk.gray(`    Method: ${tool.httpMethod} | Category: ${tool.category || 'General'}`));
+
+          // Show input parameters if available
+          if (tool.inputSchema?.properties) {
+            const params = Object.entries(tool.inputSchema.properties)
+              .filter(([key]) => !key.startsWith('orgId') && !key.startsWith('projectId'))
+              .map(([key, schema]) => {
+                const required = tool.inputSchema.required?.includes(key) ? '*' : '';
+                return `${key}${required}`;
+              });
+            if (params.length > 0) {
+              console.log(chalk.gray(`    Parameters: ${params.join(', ')}`));
+            }
+          }
+          console.log('');
+        }
+
+        console.log(`${chalk.green('✓')} ${defaultTools.length} default tool(s)\n`);
+        break;
+      }
+
+      case 'list-custom': {
+        info('Loading custom tools...');
+        const toolsApiUrl = getToolsApiUrl();
+        const { data } = await axios.get(toolsApiUrl, {
+          headers: getStudioAuthHeaders(),
+        });
+
+        const customTools = (data.tools || []).filter(t => !t.isDefault);
+
+        if (isJsonOutput) {
+          console.log(JSON.stringify(customTools, null, 2));
+          return;
+        }
+
+        if (customTools.length === 0) {
+          console.log('\n(No custom tools found)\n');
+          return;
+        }
+
+        console.log(`\n${chalk.bold('Custom Tools')} (${customTools.length}):\n`);
+
+        for (const tool of customTools) {
+          console.log(chalk.green(`  ${tool.name}`));
+          console.log(chalk.gray(`    ID: ${tool.id}`));
+          console.log(chalk.gray(`    ${tool.description || 'No description'}`));
+          console.log(chalk.gray(`    Endpoint: ${tool.httpMethod} ${tool.apiEndpoint}`));
+          if (tool.authCredentialType) {
+            console.log(chalk.gray(`    Auth: ${tool.authCredentialType}`));
+          }
+
+          // Show input parameters if available
+          if (tool.inputSchema?.properties) {
+            const params = Object.entries(tool.inputSchema.properties)
+              .filter(([key]) => !key.startsWith('orgId') && !key.startsWith('projectId'))
+              .map(([key, schema]) => {
+                const required = tool.inputSchema.required?.includes(key) ? '*' : '';
+                return `${key}${required}`;
+              });
+            if (params.length > 0) {
+              console.log(chalk.gray(`    Parameters: ${params.join(', ')}`));
+            }
+          }
+          console.log('');
+        }
+
+        console.log(`${chalk.green('✓')} ${customTools.length} custom tool(s)\n`);
+        break;
+      }
+
+      case 'get': {
+        const toolId = args[1];
+        if (!toolId) {
+          error('Missing tool ID. Usage: lux tools get <tool-id>');
+          return;
+        }
+
+        info(`Loading tool: ${toolId}`);
+        const toolsApiUrl = getToolsApiUrl();
+        const { data } = await axios.get(`${toolsApiUrl}/${toolId}`, {
+          headers: getStudioAuthHeaders(),
+        });
+
+        const tool = data.tool;
+
+        if (isJsonOutput) {
+          console.log(JSON.stringify(tool, null, 2));
+          return;
+        }
+
+        console.log(`\n${chalk.bold('Tool Details')}\n`);
+        console.log(`  Name: ${chalk.cyan(tool.name)}`);
+        console.log(`  ID: ${tool.id}`);
+        console.log(`  Type: ${tool.isDefault ? 'Default' : 'Custom'}`);
+        console.log(`  Description: ${tool.description || '-'}`);
+        console.log(`  Method: ${tool.httpMethod}`);
+        console.log(`  Endpoint: ${tool.apiEndpoint}`);
+        if (tool.category) {
+          console.log(`  Category: ${tool.category}`);
+        }
+        if (tool.authCredentialType) {
+          console.log(`  Auth: ${tool.authCredentialType}`);
+        }
+
+        // Show input schema
+        if (tool.inputSchema?.properties) {
+          console.log(`\n  ${chalk.bold('Parameters:')}`);
+          for (const [key, schema] of Object.entries(tool.inputSchema.properties)) {
+            if (key.startsWith('orgId') || key.startsWith('projectId')) {
+              continue; // Skip system params
+            }
+            const required = tool.inputSchema.required?.includes(key);
+            console.log(`    ${key} (${schema.type})${required ? chalk.red(' *required') : ''}`);
+            if (schema.description) {
+              console.log(chalk.gray(`      ${schema.description}`));
+            }
+            if (schema.enum) {
+              console.log(chalk.gray(`      Options: ${schema.enum.join(', ')}`));
+            }
+            if (schema.default !== undefined) {
+              console.log(chalk.gray(`      Default: ${schema.default}`));
+            }
+          }
+        }
+
+        console.log('');
+        break;
+      }
+
+      default:
+        error(`Unknown command: ${command}\n\nRun 'lux tools' to see available commands`);
+    }
+  } catch (err) {
+    const errorMessage = err.response?.data?.error || err.message || 'Unknown error';
+    error(errorMessage);
+  }
+}
+
+module.exports = { handleTools };

package/lux.js

@@ -22,6 +22,7 @@ const { handleProject } = require('./commands/project');
 const { handleServers, handleLogs } = require('./commands/servers');
 const { handleTest } = require('./commands/webview');
 const { handleABTests } = require('./commands/ab-tests');
+const { handleTools } = require('./commands/tools');
 
 program
   .name('lux')
@@ -152,6 +153,15 @@ program
     handleABTests(subcommand ? [subcommand, ...(args || [])] : []);
   });
 
+// Tools commands - list AI tools (default and custom)
+program
+  .command('tools [subcommand] [args...]')
+  .description('AI tools management (list, list-default, list-custom, get)')
+  .allowUnknownOption()
+  .action((subcommand, args) => {
+    handleTools(subcommand ? [subcommand, ...(args || [])] : []);
+  });
+
 // Validate data-lux attributes
 program
   .command('validate-data-lux [interface-id]')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxlabs",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "CLI tool for Lux - Upload and deploy interfaces from your terminal",
   "author": "Jason Henkel <jason@uselux.ai>",
   "license": "SEE LICENSE IN LICENSE",

package/templates/interface-boilerplate/app/dashboard/page.tsx

@@ -3,6 +3,9 @@
 import { useEffect } from "react";
 import { useSession, signOut } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("Dashboard");
 
 export default function DashboardPage() {
   const { data: session, isPending } = useSession();
@@ -16,7 +19,7 @@ export default function DashboardPage() {
 
   if (isPending) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center" data-lux={lux("loading")}>
         <p>Loading...</p>
       </div>
     );
@@ -32,17 +35,18 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="min-h-screen bg-zinc-50 p-8">
-      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
-        <h1 className="text-2xl font-semibold mb-4">Dashboard</h1>
-        <p className="text-zinc-600 mb-2">
+    <div className="min-h-screen bg-zinc-50 p-8" data-lux={lux("container")}>
+      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md" data-lux={lux("card")}>
+        <h1 className="text-2xl font-semibold mb-4" data-lux={lux("title")}>Dashboard</h1>
+        <p className="text-zinc-600 mb-2" data-lux={lux("welcome")}>
           Welcome, <span className="font-medium">{session.user.name}</span>!
         </p>
-        <p className="text-zinc-600 mb-6">
+        <p className="text-zinc-600 mb-6" data-lux={lux("email")}>
           Email: {session.user.email}
         </p>
         <button
           onClick={handleSignOut}
+          data-lux={lux("signout-button")}
           className="px-4 py-2 bg-black text-white rounded-md hover:bg-zinc-800"
         >
           Sign Out

package/templates/interface-boilerplate/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { Suspense } from "react";
+import { PostHogProvider, PostHogPageView } from "@/components/providers/posthog-provider";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -27,7 +29,12 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <PostHogProvider>
+          <Suspense fallback={null}>
+            <PostHogPageView />
+          </Suspense>
+          {children}
+        </PostHogProvider>
       </body>
     </html>
   );

package/templates/interface-boilerplate/app/page.tsx

@@ -1,36 +1,41 @@
 import Link from "next/link";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("Home");
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-white">
+    <div className="min-h-screen flex flex-col bg-white" data-lux={lux("container")}>
       <main className="flex-1 flex flex-col items-center justify-center px-6">
         <div className="max-w-2xl w-full text-center">
-          <p className="text-sm font-medium tracking-widest text-zinc-400 uppercase mb-4">
+          <p className="text-sm font-medium tracking-widest text-zinc-400 uppercase mb-4" data-lux={lux("tagline")}>
             Boilerplate
           </p>
-          <h1 className="text-6xl font-semibold tracking-tight text-black mb-6">
+          <h1 className="text-6xl font-semibold tracking-tight text-black mb-6" data-lux={lux("title")}>
             Lux
           </h1>
-          <p className="text-lg text-zinc-500 mb-12 max-w-md mx-auto">
+          <p className="text-lg text-zinc-500 mb-12 max-w-md mx-auto" data-lux={lux("description")}>
             Authentication, database, and UI components. Everything you need to start building.
           </p>
 
           <div className="flex gap-4 justify-center mb-16">
             <Link
               href="/sign-in"
+              data-lux={lux("signin-button")}
               className="px-8 py-3 bg-black text-white text-sm font-medium rounded-full hover:bg-zinc-800 transition-colors"
             >
               Sign In
             </Link>
             <Link
               href="/sign-up"
+              data-lux={lux("signup-button")}
               className="px-8 py-3 border border-zinc-200 text-black text-sm font-medium rounded-full hover:bg-zinc-50 transition-colors"
             >
               Sign Up
             </Link>
           </div>
 
-          <div className="flex items-center justify-center gap-8 text-sm text-zinc-400">
+          <div className="flex items-center justify-center gap-8 text-sm text-zinc-400" data-lux={lux("features")}>
             <span>Next.js</span>
             <span className="w-1 h-1 bg-zinc-300 rounded-full" />
             <span>Auth</span>
@@ -42,7 +47,7 @@ export default function Home() {
         </div>
       </main>
 
-      <footer className="py-6 text-center text-sm text-zinc-400">
+      <footer className="py-6 text-center text-sm text-zinc-400" data-lux={lux("footer")}>
         <p>Ready to ship.</p>
       </footer>
     </div>

package/templates/interface-boilerplate/app/settings/page.tsx

@@ -3,6 +3,9 @@
 import { useSession, signOut } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("Settings");
 
 export default function SettingsPage() {
   const { data: session, isPending } = useSession();
@@ -16,7 +19,7 @@ export default function SettingsPage() {
 
   if (isPending) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center" data-lux={lux("loading")}>
         <div className="text-gray-500">Loading...</div>
       </div>
     );
@@ -32,25 +35,25 @@ export default function SettingsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50" data-lux={lux("container")}>
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
-          <p className="mt-2 text-sm text-gray-600">
+          <h1 className="text-3xl font-bold text-gray-900" data-lux={lux("title")}>Settings</h1>
+          <p className="mt-2 text-sm text-gray-600" data-lux={lux("subtitle")}>
             Manage your account settings
           </p>
         </div>
 
-        <div className="bg-white shadow rounded-lg p-6">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">Account</h2>
+        <div className="bg-white shadow rounded-lg p-6" data-lux={lux("card")}>
+          <h2 className="text-lg font-medium text-gray-900 mb-4" data-lux={lux("section-title")}>Account</h2>
 
           <div className="space-y-4">
-            <div>
+            <div data-lux={lux("name-field")}>
               <label className="block text-sm font-medium text-gray-700">Name</label>
               <p className="mt-1 text-sm text-gray-900">{session.user.name}</p>
             </div>
 
-            <div>
+            <div data-lux={lux("email-field")}>
               <label className="block text-sm font-medium text-gray-700">Email</label>
               <p className="mt-1 text-sm text-gray-900">{session.user.email}</p>
             </div>
@@ -59,6 +62,7 @@ export default function SettingsPage() {
           <div className="mt-6 pt-6 border-t border-gray-200">
             <button
               onClick={handleSignOut}
+              data-lux={lux("signout-button")}
               className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
             >
               Sign Out

package/templates/interface-boilerplate/components/providers/posthog-provider.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { useEffect, useRef } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY
+const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com'
+const LUX_INTERFACE_ID = process.env.NEXT_PUBLIC_LUX_INTERFACE_ID
+const LUX_ORG_ID = process.env.NEXT_PUBLIC_LUX_ORG_ID
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  const initialized = useRef(false)
+
+  useEffect(() => {
+    if (!POSTHOG_KEY || initialized.current) {
+      if (!POSTHOG_KEY) {
+        console.log('[PostHog] No API key configured, skipping initialization')
+      }
+      return
+    }
+
+    posthog.init(POSTHOG_KEY, {
+      api_host: POSTHOG_HOST,
+      persistence: 'localStorage',
+      capture_pageview: false, // We capture manually for better control
+      capture_pageleave: true,
+      loaded: (ph) => {
+        // Register lux properties with all events for filtering
+        const props: Record<string, string> = {}
+        if (LUX_INTERFACE_ID) props.$lux_interface_id = LUX_INTERFACE_ID
+        if (LUX_ORG_ID) props.$lux_org_id = LUX_ORG_ID
+        if (Object.keys(props).length > 0) {
+          ph.register(props)
+        }
+      },
+    })
+
+    initialized.current = true
+  }, [])
+
+  if (!POSTHOG_KEY) {
+    return <>{children}</>
+  }
+
+  return <PHProvider client={posthog}>{children}</PHProvider>
+}
+
+export function PostHogPageView() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (!POSTHOG_KEY) return
+
+    const url = window.origin + pathname
+    const search = searchParams?.toString()
+    const fullUrl = search ? `${url}?${search}` : url
+
+    posthog.capture('$pageview', {
+      $current_url: fullUrl,
+      $pathname: pathname,
+    })
+  }, [pathname, searchParams])
+
+  return null
+}

package/templates/interface-boilerplate/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
     "better-auth": "^1.4.5",
+    "posthog-js": "^1.252.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",