@castari/cli 0.0.7 → 0.0.9

package/dist/commands/init.js

@@ -26,7 +26,7 @@ export async function init(options = {}) {
         },
         dependencies: {
             '@castari/sdk': '^0.0.6',
-            '@anthropic-ai/claude-agent-sdk': '^0.1.44',
+            '@anthropic-ai/claude-agent-sdk': '^0.1.50',
         },
         castari: {
             volume: 'default-data',
@@ -41,8 +41,7 @@ export async function init(options = {}) {
             skipLibCheck: true,
         },
     };
-    const agentTs = `import { serve } from '@castari/sdk/server'
-import { tool } from '@castari/sdk'
+    const agentTs = `import { serve, tool } from '@castari/sdk'
 
 // Define your agent tools and logic here
 const myTool = tool({
@@ -65,7 +64,7 @@ serve({
   systemPrompt: 'You are a helpful Castari agent.',
 })
 `;
-    const envExample = `ANTHROPIC_API_KEY=sk-ant-...\nCASTARI_CLIENT_ID=your-client-id\n# CASTARI_PLATFORM_URL=https://api.castari.com\n`;
+    const envExample = `ANTHROPIC_API_KEY=sk-ant-...\nCASTARI_CLIENT_ID=your-client-id\nCASTARI_API_KEY=castari_your-api-key\n# CASTARI_PLATFORM_URL=https://api.castari.com\n`;
     await writeFile('package.json', JSON.stringify(packageJson, null, 2));
     await writeFile('tsconfig.json', JSON.stringify(tsConfig, null, 2));
     await writeFile('.env.example', envExample);
@@ -111,7 +110,7 @@ async function initDemo() {
         },
         include: ['src'],
     });
-    await writeFile(join(agentDir, '.env.example'), 'ANTHROPIC_API_KEY=sk-ant-...\nCASTARI_CLIENT_ID=your-client-id\n# CASTARI_PLATFORM_URL=http://localhost:3000\n');
+    await writeFile(join(agentDir, '.env.example'), 'ANTHROPIC_API_KEY=sk-ant-...\nCASTARI_CLIENT_ID=your-client-id\nCASTARI_API_KEY=castari_your-api-key\n# CASTARI_PLATFORM_URL=http://localhost:3000\n');
     await writeFile(join(agentDir, 'src', 'agent.ts'), `import { serve } from '@castari/sdk'
 
 serve({
@@ -126,6 +125,7 @@ serve({
     // Web scaffold
     await mkdir(join(webDir, 'app', 'api', 'chat'), { recursive: true });
     await mkdir(join(webDir, 'lib'), { recursive: true });
+    await mkdir(join(webDir, 'public'), { recursive: true });
     await writeJson(join(webDir, 'package.json'), {
         name: 'castari-demo-web',
         version: '0.1.0',
@@ -187,11 +187,16 @@ const nextConfig = {
 
 export default nextConfig
 `);
-    await writeFile(join(webDir, '.env.example'), 'ANTHROPIC_API_KEY=sk-ant-...\nCASTARI_CLIENT_ID=your-client-id\n# CASTARI_PLATFORM_URL=http://localhost:3000\n# CASTARI_DEBUG=false\n');
+    await writeFile(join(webDir, '.env.example'), 'ANTHROPIC_API_KEY=sk-ant-...\nCASTARI_CLIENT_ID=your-client-id\nCASTARI_API_KEY=castari_your-api-key\n# CASTARI_PLATFORM_URL=http://localhost:3000\n# CASTARI_DEBUG=false\n');
     await writeFile(join(webDir, 'app', 'globals.css'), `:root {
-  color-scheme: light;
-  background: #f5f5f5;
-  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color-scheme: dark;
+  --bg: #131418;
+  --panel: #1c1d24;
+  --border: #2a2b36;
+  --muted: #888888;
+  --text: #ffffff;
+  --accent: #ffffff;
+  font-family: var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 * {
@@ -200,9 +205,10 @@ export default nextConfig
 
 body {
   margin: 0;
-  background: radial-gradient(circle at 20% 20%, #f7f0ff 0, #f5f5f5 35%), radial-gradient(circle at 80% 0%, #e0f4ff 0, #f5f5f5 30%);
-  color: #0f172a;
+  background-color: var(--bg);
+  color: var(--text);
   min-height: 100vh;
+  font-weight: 300;
 }
 
 a {
@@ -210,139 +216,261 @@ a {
   text-decoration: none;
 }
 
-.chat-container {
-  max-width: 760px;
-  margin: 0 auto;
-  padding: 32px 16px 64px;
+.page-shell {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  padding: 36px 20px 72px;
+}
+
+.content {
+  position: relative;
+  width: min(1180px, 100%);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 28px;
+  z-index: 1;
 }
 
-.card {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(6px);
-  border: 1px solid rgba(15, 23, 42, 0.06);
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
-  padding: 24px;
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
 }
 
-.heading {
+.brand {
   display: flex;
   align-items: center;
+  gap: 14px;
+}
+
+.brand-logo {
+  width: 32px;
+  height: auto;
+}
+
+.brand-name {
+  font-family: var(--font-orbitron), 'Orbitron', sans-serif;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-size: 18px;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.top-pills {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
   gap: 12px;
-  font-size: 22px;
-  font-weight: 700;
+  padding: 40px 0 20px;
+  align-items: center;
+  text-align: center;
 }
 
-.badge {
-  font-size: 12px;
+.hero-title {
+  font-family: var(--font-orbitron), 'Orbitron', sans-serif;
+  font-size: clamp(30px, 4vw, 44px);
+  margin: 0;
+  letter-spacing: 0.02em;
   font-weight: 600;
-  color: #0ea5e9;
-  background: rgba(14, 165, 233, 0.1);
-  padding: 6px 10px;
-  border-radius: 999px;
-  border: 1px solid rgba(14, 165, 233, 0.2);
+}
+
+.hero-copy {
+  color: var(--muted);
+  font-size: 18px;
+  line-height: 1.6;
+  max-width: 600px;
+  margin: 0;
+}
+
+.card {
+  position: relative;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 22px;
+}
+
+.panel {
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.panel-copy {
+  color: var(--muted);
+  font-size: 14px;
+  margin: 4px 0 0;
+}
+
+.pill-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
 }
 
 .messages {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  background: #16171d;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 14px;
+  min-height: 300px;
 }
 
 .bubble {
   padding: 14px 16px;
   border-radius: 14px;
-  max-width: 90%;
   line-height: 1.5;
   font-size: 15px;
+  max-width: 85%;
 }
 
 .bubble.assistant {
-  background: #0f172a;
-  color: white;
+  background: #1c1d24;
+  color: var(--text);
   align-self: flex-start;
-  border-bottom-left-radius: 4px;
+  border: 1px solid var(--border);
 }
 
 .bubble.user {
-  background: white;
-  color: #0f172a;
-  border: 1px solid rgba(15, 23, 42, 0.06);
+  background: #ffffff;
+  color: #000000;
   align-self: flex-end;
-  border-bottom-right-radius: 4px;
 }
 
 .form {
   display: flex;
   gap: 12px;
-  margin-top: 8px;
+  align-items: center;
+  margin-top: 16px;
+  background: #16171d;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 10px;
 }
 
 .input {
   flex: 1;
-  padding: 14px 16px;
+  padding: 12px 14px;
   border-radius: 12px;
-  border: 1px solid rgba(15, 23, 42, 0.08);
+  border: 1px solid transparent;
   font-size: 15px;
   outline: none;
-  transition: border-color 0.15s ease;
+  background: transparent;
+  color: var(--text);
 }
 
-.input:focus {
-  border-color: #0ea5e9;
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
+.input::placeholder {
+  color: #666666;
 }
 
 .button {
-  background: linear-gradient(135deg, #0ea5e9, #6366f1);
-  color: white;
+  background: #ffffff;
+  color: #000000;
   border: none;
   border-radius: 12px;
-  padding: 12px 18px;
-  font-weight: 700;
+  padding: 12px 24px;
+  font-weight: 600;
   cursor: pointer;
-  box-shadow: 0 12px 25px rgba(99, 102, 241, 0.35);
-  min-width: 110px;
-  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+  transition: opacity 0.2s;
 }
 
 .button:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
-  box-shadow: none;
 }
 
-.button:not(:disabled):hover {
-  transform: translateY(-1px);
-  box-shadow: 0 16px 30px rgba(99, 102, 241, 0.45);
+.button:hover:not(:disabled) {
+  opacity: 0.9;
 }
 
 .status {
   font-size: 13px;
-  color: #475569;
-  margin-top: 6px;
-}
-
-.pill-row {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
+  color: var(--muted);
+  margin-top: 10px;
+  text-align: center;
 }
 
 .pill {
-  padding: 6px 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
   border-radius: 999px;
-  background: rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted);
   font-size: 12px;
-  color: #0f172a;
-  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.pill-accent {
+  color: var(--text);
+  border-color: var(--text);
+}
+
+.pill-ghost {
+  border-color: var(--border);
+  color: var(--muted);
+}
+
+@media (max-width: 720px) {
+  .page-shell {
+    padding: 28px 16px 56px;
+  }
+
+  .form {
+    flex-direction: column;
+  }
+
+  .button {
+    width: 100%;
+  }
 }
 `);
     await writeFile(join(webDir, 'app', 'layout.tsx'), `import './globals.css'
 import { ReactNode } from 'react'
+import { Inter, Orbitron } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  weight: ['300', '500', '700'],
+  variable: '--font-inter',
+})
+
+const orbitron = Orbitron({
+  subsets: ['latin'],
+  weight: ['600'],
+  variable: '--font-orbitron',
+})
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
@@ -350,7 +478,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <head>
         <title>Castari Demo Chat</title>
       </head>
-      <body>{children}</body>
+      <body className={\`\${inter.variable} \${orbitron.variable}\`}>{children}</body>
     </html>
   )
 }
@@ -358,6 +486,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     await writeFile(join(webDir, 'app', 'page.tsx'), `"use client"
 
 import { FormEvent, useState } from 'react'
+import Image from 'next/image'
 
 type ChatMessage = {
   role: 'assistant' | 'user'
@@ -437,43 +566,68 @@ export default function Home() {
   }
 
   return (
-    <main className="chat-container">
-      <div className="card">
-        <div className="heading">
-          <span>Castari Demo Chat</span>
-          <span className="badge">Single sandbox</span>
-        </div>
-        <p style={{ margin: '8px 0 16px', color: '#475569' }}>
-          This UI connects to a Castari agent running in a Daytona sandbox. Messages reuse the same
-          sandbox (via labels) so the conversation stays warm while the sandbox is alive.
-        </p>
-
-        <div className="pill-row" style={{ marginBottom: 12 }}>
-          <span className="pill">Snapshot: castari-demo-agent</span>
-          <span className="pill">Volume: castari-demo-workspace</span>
-          <span className="pill">Labels: app=castari-demo, env=local</span>
-        </div>
-
-        <div className="messages">
-          {messages.map((m, idx) => (
-            <div key={idx} className={\`bubble \${m.role}\`}>
-              {m.content}
+    <main className="page-shell">
+      <div className="content">
+        <header className="topbar">
+          <div className="brand">
+            <Image
+              src="/logo.svg"
+              alt="Castari Logo"
+              width={32}
+              height={32}
+              className="brand-logo"
+            />
+            <div>
+              <div className="brand-name">Castari</div>
             </div>
-          ))}
-        </div>
-
-        <form className="form" onSubmit={sendMessage}>
-          <input
-            className="input"
-            placeholder="Ask the Castari agent anything..."
-            value={input}
-            onChange={e => setInput(e.target.value)}
-          />
-          <button className="button" type="submit" disabled={sending}>
-            {sending ? 'Talking…' : 'Send'}
-          </button>
-        </form>
-        {status && <div className="status">{status}</div>}
+          </div>
+
+          <div className="top-pills">
+            <span className="pill pill-ghost">Demo sandbox</span>
+          </div>
+        </header>
+
+        <section className="hero">
+          <h1 className="hero-title">Production-Ready Agents</h1>
+          <p className="hero-copy">
+            Secure, sandboxed AI agents for your infrastructure.
+          </p>
+        </section>
+
+        <section className="card panel">
+          <div className="panel-header">
+            <div>
+              <div className="panel-title">Chat with Castari</div>
+            </div>
+            <span className="pill pill-accent">Live</span>
+          </div>
+
+          <div className="pill-row">
+            <span className="pill">Snapshot: castari-demo-agent</span>
+            <span className="pill">Volume: castari-demo-workspace</span>
+          </div>
+
+          <div className="messages">
+            {messages.map((m, idx) => (
+              <div key={idx} className={\`bubble \${m.role}\`}>
+                {m.content}
+              </div>
+            ))}
+          </div>
+
+          <form className="form" onSubmit={sendMessage}>
+            <input
+              className="input"
+              placeholder="Ask the Castari agent anything..."
+              value={input}
+              onChange={e => setInput(e.target.value)}
+            />
+            <button className="button" type="submit" disabled={sending}>
+              {sending ? 'Talking…' : 'Send'}
+            </button>
+          </form>
+          {status && <div className="status">{status}</div>}
+        </section>
       </div>
     </main>
   )
@@ -495,10 +649,11 @@ async function createClient() {
 
     const client = new CastariClient({
         snapshot: SNAPSHOT,
-        volume: VOLUME,
+        // volume: VOLUME, // opt-in; omit to run ephemeral unless provided
         labels: LABELS,
         platformUrl: process.env.CASTARI_PLATFORM_URL,
         clientId: process.env.CASTARI_CLIENT_ID,
+        platformApiKey: process.env.CASTARI_API_KEY,
         anthropicApiKey,
         debug: process.env.CASTARI_DEBUG === 'true',
     })
@@ -652,6 +807,35 @@ export async function POST(request: Request) {
         },
     })
 }
+`);
+    // Logo SVG
+    await writeFile(join(webDir, 'public', 'logo.svg'), `<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 32L31.619 0L63.2381 32L31.619 64L0 32Z" fill="#A44A0C"/>
+<path d="M31.527 31.8743H6.87042L24.3595 24.3417L31.527 7.24737V31.8743Z" fill="white"/>
+<path d="M31.527 31.8743H6.87042L24.3595 24.3417L31.527 31.8743Z" fill="url(#paint0_linear_173_2089)"/>
+<path d="M31.5268 31.872L31.5192 6.91829L24.0817 24.6204L31.5268 31.872Z" fill="url(#paint1_linear_173_2089)"/>
+<path d="M31.7116 32.128L31.7192 57.0817L38.9973 39.3796L31.7116 32.128Z" fill="url(#paint2_linear_173_2089)"/>
+<path d="M31.7117 32.1258H56.3683L38.8792 39.6584L31.7117 56.7527V32.1258Z" fill="white"/>
+<path d="M31.7117 32.1258H56.3683L38.8792 39.6584L31.7117 32.1258Z" fill="url(#paint3_linear_173_2089)"/>
+<defs>
+<linearGradient id="paint0_linear_173_2089" x1="53.6475" y1="32.6825" x2="36.7362" y2="37.9872" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#EACAB4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_173_2089" x1="6.97479" y1="59.2675" x2="54.1923" y2="54.7965" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#EDEDED"/>
+</linearGradient>
+<linearGradient id="paint2_linear_173_2089" x1="6.97479" y1="59.2675" x2="54.1923" y2="54.7965" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#EDEDED"/>
+</linearGradient>
+<linearGradient id="paint3_linear_173_2089" x1="53.6475" y1="32.6825" x2="36.7362" y2="37.9872" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#EACAB4"/>
+</linearGradient>
+</defs>
+</svg>
 `);
     // Demo README
     await writeFile(join(demoRoot, 'README.md'), `# Castari Demo (Web + Agent)
@@ -666,12 +850,20 @@ Structure:
 - Bun (for the Castari CLI and scripts)
 - Node 18+ (for the Next.js app)
 - \`ANTHROPIC_API_KEY\`
+- Castari credentials (\`CASTARI_CLIENT_ID\` and \`CASTARI_API_KEY\`)
 - Castari Platform running locally or reachable via \`CASTARI_PLATFORM_URL\`
 
+## Getting Castari Credentials
+Generate your clientId and apiKey by running:
+\`\`\`bash
+castari generate-client-id
+\`\`\`
+Or via the Castari Platform Console if available.
+
 ## 1) Prepare and deploy the agent
 \`\`\`bash
 cd castari_demo/agent
-cp .env.example .env  # add ANTHROPIC_API_KEY (and CASTARI_PLATFORM_URL if self-hosted)
+cp .env.example .env  # add ANTHROPIC_API_KEY, CASTARI_CLIENT_ID, CASTARI_API_KEY
 bun install           # pulls @castari/sdk from npm
 castari deploy        # builds snapshot castari-demo-agent (CLI must be installed)
 # Optional: bun run src/agent.ts   # run locally without the CLI
@@ -680,7 +872,7 @@ castari deploy        # builds snapshot castari-demo-agent (CLI must be installe
 ## 2) Run the web app
 \`\`\`bash
 cd ../web
-cp .env.example .env  # add ANTHROPIC_API_KEY and CASTARI_PLATFORM_URL if needed
+cp .env.example .env  # add ANTHROPIC_API_KEY, CASTARI_CLIENT_ID, CASTARI_API_KEY
 npm install           # or bun install
 npm run dev           # opens http://localhost:3000
 \`\`\`

package/dist/commands/start.js

@@ -28,10 +28,13 @@ export async function start(options) {
     if (volumeName) {
         console.log(chalk.blue(`📦 Using volume: ${volumeName}`));
     }
+    else {
+        console.log(chalk.blue(`📦 No volume specified (sandbox will be ephemeral)`));
+    }
     const platformUrl = process.env.CASTARI_PLATFORM_URL;
     const clientOptions = {
         snapshot: snapshotName,
-        volume: volumeName,
+        ...(volumeName ? { volume: volumeName } : {}),
         platformUrl,
         debug: true, // Enable debug logs for CLI
         anthropicApiKey: process.env.ANTHROPIC_API_KEY,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@castari/cli",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "type": "module",
     "bin": {
         "castari": "./dist/index.js"
@@ -18,7 +18,7 @@
     },
     "dependencies": {
         "@anthropic-ai/claude-agent-sdk": "^0.1.44",
-        "@castari/sdk": "^0.0.6",
+        "@castari/sdk": "^0.0.7",
         "adm-zip": "^0.5.16",
         "cac": "^6.7.14",
         "chalk": "^5.3.0",