@askable-ui/create-app 0.6.3

package/README.md

@@ -0,0 +1,25 @@
+# @askable-ui/create-app
+
+Scaffold a runnable **React + Vite + CopilotKit + askable-ui** starter app.
+
+## Usage
+
+```bash
+npm create @askable-ui/app my-app
+cd my-app
+npm install
+npm run dev
+```
+
+The generated app includes:
+
+- a small analytics dashboard annotated with `data-askable`
+- `useAskable()` pre-wired for hover + click focus tracking
+- `useCopilotReadable()` pushing current and recent Askable context into CopilotKit
+- a local Express runtime wired to `@copilotkit/runtime`
+- a starter README and `.env.example`
+
+## Notes
+
+- The scaffold writes files only. It does **not** auto-run `npm install`.
+- If `OPENAI_API_KEY` is missing, the generated runtime still starts so the app boots locally, but Copilot responses stay disabled until you add a real key.

package/bin/create-askable-app.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { runCli } from '../src/scaffold.js';
+
+runCli(process.argv.slice(2)).catch((error) => {
+  console.error(`\n✖ ${error instanceof Error ? error.message : String(error)}`);
+  process.exitCode = 1;
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@askable-ui/create-app",
+  "version": "0.6.3",
+  "description": "Scaffold a React + Vite + CopilotKit + askable-ui starter app",
+  "type": "module",
+  "bin": {
+    "create-askable-app": "bin/create-askable-app.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "template",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/askable-ui/askable.git",
+    "directory": "packages/create-askable-app"
+  },
+  "keywords": [
+    "askable",
+    "copilotkit",
+    "vite",
+    "react",
+    "scaffold"
+  ],
+  "homepage": "https://askable-ui.com",
+  "license": "MIT",
+  "scripts": {
+    "test": "node --test"
+  }
+}

package/src/scaffold.js

@@ -0,0 +1,80 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ASKABLE_VERSION = '0.6.3';
+const COPILOTKIT_VERSION = '1.56.2';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATE_DIR = path.resolve(__dirname, '..', 'template');
+
+export function toPackageName(rawName) {
+  return rawName
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-_]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-{2,}/g, '-');
+}
+
+export function isDirectoryEmpty(targetDir) {
+  if (!fs.existsSync(targetDir)) {
+    return true;
+  }
+
+  const entries = fs.readdirSync(targetDir).filter((entry) => entry !== '.DS_Store');
+  return entries.length === 0;
+}
+
+function render(content, projectName) {
+  return content
+    .replaceAll('__APP_NAME__', projectName)
+    .replaceAll('__PACKAGE_NAME__', toPackageName(projectName) || 'askable-app')
+    .replaceAll('__ASKABLE_VERSION__', ASKABLE_VERSION)
+    .replaceAll('__COPILOTKIT_VERSION__', COPILOTKIT_VERSION);
+}
+
+function copyTemplate(templateDir, targetDir, projectName) {
+  for (const entry of fs.readdirSync(templateDir, { withFileTypes: true })) {
+    const sourcePath = path.join(templateDir, entry.name);
+    const outputName = entry.name === '_gitignore' ? '.gitignore' : entry.name;
+    const targetPath = path.join(targetDir, outputName);
+
+    if (entry.isDirectory()) {
+      fs.mkdirSync(targetPath, { recursive: true });
+      copyTemplate(sourcePath, targetPath, projectName);
+      continue;
+    }
+
+    const raw = fs.readFileSync(sourcePath, 'utf8');
+    fs.writeFileSync(targetPath, render(raw, projectName));
+  }
+}
+
+export async function runCli(args) {
+  const [projectArg] = args;
+
+  if (!projectArg || projectArg === '--help' || projectArg === '-h') {
+    console.log(`create-askable-app\n\nUsage:\n  npm create @askable-ui/app my-app\n`);
+    return;
+  }
+
+  const projectName = projectArg.trim();
+  const targetDir = path.resolve(process.cwd(), projectName);
+
+  if (!isDirectoryEmpty(targetDir)) {
+    throw new Error(`Target directory is not empty: ${targetDir}`);
+  }
+
+  fs.mkdirSync(targetDir, { recursive: true });
+  copyTemplate(TEMPLATE_DIR, targetDir, projectName);
+
+  console.log(`\n✔ askable starter created at ${targetDir}\n`);
+  console.log('Next steps:');
+  console.log(`  cd ${projectName}`);
+  console.log('  npm install');
+  console.log('  cp .env.example .env');
+  console.log('  npm run dev');
+  console.log('\nTip: add OPENAI_API_KEY to .env when you want the CopilotKit runtime to answer.');
+}

package/template/.env.example

@@ -0,0 +1,5 @@
+VITE_COPILOT_RUNTIME_URL=http://localhost:3001/api/copilotkit
+PORT=3001
+CORS_ORIGIN=http://localhost:5173
+OPENAI_API_KEY=
+OPENAI_MODEL=gpt-4o-mini

package/template/README.md

@@ -0,0 +1,57 @@
+# __APP_NAME__
+
+A starter project generated by `create-askable-app`.
+
+This template wires together:
+
+- **askable-ui** for UI focus tracking with `useAskable()`
+- **CopilotKit** for the chat sidebar and runtime
+- **React + Vite** for the frontend
+- **Express + @copilotkit/runtime** for the local backend runtime
+
+## Quick start
+
+```bash
+npm install
+cp .env.example .env
+npm run dev
+```
+
+The app opens at `http://localhost:5173` and the Copilot runtime listens on `http://localhost:3001/api/copilotkit`.
+
+## Environment
+
+Update `.env` with your own provider key:
+
+```bash
+OPENAI_API_KEY=<your key>
+OPENAI_MODEL=gpt-4o-mini
+```
+
+If `OPENAI_API_KEY` is blank, the runtime still starts so the dashboard loads, but Copilot responses stay disabled until you add a real key.
+
+## How Askable and CopilotKit fit together
+
+1. Dashboard panels are annotated with `data-askable` metadata and curated `data-askable-text` summaries.
+2. `useAskable()` observes the page and produces prompt-ready context like:
+   - current focus
+   - recent interaction history
+3. `useCopilotReadable()` forwards those Askable strings into CopilotKit.
+4. CopilotKit sends the chat request to the local runtime at `/api/copilotkit`.
+5. The runtime calls the LLM and answers with the current dashboard context already attached.
+
+## Starter structure
+
+- `src/App.tsx` — annotated dashboard + `useCopilotReadable()` wiring
+- `src/styles.css` — dashboard styling
+- `server/index.ts` — local CopilotKit runtime
+- `.env.example` — runtime URL, OpenAI key, model, and CORS settings
+
+## Useful scripts
+
+```bash
+npm run dev         # Vite frontend + local Copilot runtime
+npm run build       # Build the frontend and compile the runtime
+npm run preview     # Preview the built frontend
+npm run start       # Run the compiled runtime from dist-server/
+```

package/template/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+dist-server
+.env

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
+    "dev:client": "vite",
+    "dev:server": "tsx server/index.ts",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build",
+    "build:server": "tsc -p tsconfig.server.json",
+    "preview": "vite preview",
+    "start": "node dist-server/index.js"
+  },
+  "dependencies": {
+    "@askable-ui/react": "^__ASKABLE_VERSION__",
+    "@copilotkit/react-core": "__COPILOTKIT_VERSION__",
+    "@copilotkit/react-ui": "__COPILOTKIT_VERSION__",
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@copilotkit/runtime": "__COPILOTKIT_VERSION__",
+    "@types/cors": "2.8.19",
+    "@types/express": "5.0.6",
+    "@types/node": "25.6.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.1",
+    "concurrently": "9.2.1",
+    "cors": "2.8.6",
+    "dotenv": "17.4.2",
+    "express": "5.2.1",
+    "openai": "6.34.0",
+    "tsx": "4.21.0",
+    "typescript": "6.0.3",
+    "vite": "8.0.9"
+  }
+}

package/template/server/index.ts

@@ -0,0 +1,55 @@
+import 'dotenv/config';
+import cors from 'cors';
+import express from 'express';
+import type { Request, Response } from 'express';
+import { BuiltInAgent, CopilotRuntime, createCopilotExpressHandler } from '@copilotkit/runtime/v2';
+
+const port = Number(process.env.PORT ?? 3001);
+const endpoint = '/api/copilotkit';
+const frontendOrigin = process.env.CORS_ORIGIN ?? 'http://localhost:5173';
+const openAiApiKey = process.env.OPENAI_API_KEY;
+const openAiModel = process.env.OPENAI_MODEL ?? 'gpt-4o-mini';
+
+const runtime = new CopilotRuntime({
+  agents: {
+    default: new BuiltInAgent({
+      model: `openai/${openAiModel}`,
+      apiKey: openAiApiKey,
+      prompt:
+        'You are a helpful revenue operations copilot. Use the Askable current-focus context and recent focus history to answer precisely about the currently selected KPI, chart, or deal row. If the user has not selected anything yet, ask them what they want to inspect.',
+    }),
+  },
+});
+
+const app = express();
+app.use(express.json({ limit: '2mb' }));
+app.use(cors({ origin: frontendOrigin, credentials: true }));
+app.use(
+  createCopilotExpressHandler({
+    runtime,
+    basePath: endpoint,
+    mode: 'single-route',
+    cors: {
+      origin: frontendOrigin,
+      credentials: true,
+    },
+  }),
+);
+
+app.get('/health', (_req: Request, res: Response) => {
+  res.json({
+    ok: true,
+    endpoint,
+    llmReady: Boolean(openAiApiKey),
+    model: `openai/${openAiModel}`,
+  });
+});
+
+app.listen(port, () => {
+  const status = openAiApiKey
+    ? `BuiltInAgent using openai/${openAiModel}`
+    : `BuiltInAgent using openai/${openAiModel} (set OPENAI_API_KEY to enable live responses)`;
+  console.log(`Copilot runtime listening on http://localhost:${port}${endpoint}`);
+  console.log(`Frontend origin: ${frontendOrigin}`);
+  console.log(`Agent: ${status}`);
+});

package/template/src/App.tsx

@@ -0,0 +1,254 @@
+import { useMemo, useRef, useState } from 'react';
+import { CopilotSidebar } from '@copilotkit/react-ui';
+import { useCopilotReadable } from '@copilotkit/react-core';
+import { useAskable } from '@askable-ui/react';
+
+type MetricCard = {
+  id: string;
+  label: string;
+  value: string;
+  delta: string;
+  narrative: string;
+  detail: string;
+};
+
+type Deal = {
+  id: string;
+  company: string;
+  stage: string;
+  value: string;
+  owner: string;
+};
+
+const metrics: MetricCard[] = [
+  {
+    id: 'pipeline-coverage',
+    label: 'Pipeline coverage',
+    value: '3.9x',
+    delta: '+0.4x week over week',
+    narrative: 'Coverage exceeds the 3.5x target after enterprise expansion in financial services.',
+    detail: 'AI focus summary: pipeline coverage is 3.9x against a 3.5x target, driven by enterprise pipeline growth.',
+  },
+  {
+    id: 'net-revenue-retention',
+    label: 'Net revenue retention',
+    value: '118%',
+    delta: '+6 pts quarter over quarter',
+    narrative: 'Existing accounts expanded after onboarding automation shipped to the top five teams.',
+    detail: 'AI focus summary: NRR is 118%, up 6 points quarter over quarter due to expansion in installed accounts.',
+  },
+  {
+    id: 'support-backlog',
+    label: 'Support backlog',
+    value: '24 tickets',
+    delta: '-31% since last Friday',
+    narrative: 'Backlog is falling after the self-serve billing flow and routing updates reduced triage load.',
+    detail: 'AI focus summary: support backlog fell to 24 tickets, down 31%, after self-serve billing and routing improvements.',
+  },
+];
+
+const deals: Deal[] = [
+  { id: 'acme', company: 'Acme Foods', stage: 'Security review', value: '$84k', owner: 'Nina' },
+  { id: 'northstar', company: 'Northstar Health', stage: 'Champion identified', value: '$122k', owner: 'Sam' },
+  { id: 'lattice', company: 'Lattice Cloud', stage: 'Commercials', value: '$61k', owner: 'Aria' },
+  { id: 'meridian', company: 'Meridian Retail', stage: 'Pilot live', value: '$48k', owner: 'Jon' },
+];
+
+function askableMeta(meta: Record<string, string>) {
+  return JSON.stringify(meta);
+}
+
+export default function App() {
+  const { ctx, promptContext } = useAskable();
+  const [selectedPanel, setSelectedPanel] = useState<string | null>(null);
+  const panelRefs = useRef<Record<string, HTMLElement | null>>({});
+
+  const currentContext = promptContext || 'No panel selected yet. Hover or click a KPI card or deal row to feed Askable context into CopilotKit.';
+  const recentContext = useMemo(() => {
+    const history = ctx.toHistoryContext(4);
+    return history || 'Recent UI history will appear here after a few interactions.';
+  }, [ctx, promptContext]);
+
+  useCopilotReadable(
+    {
+      description: 'The Askable UI panel the user is currently focused on.',
+      value: currentContext,
+    },
+    [currentContext],
+  );
+
+  useCopilotReadable(
+    {
+      description: 'Recent Askable UI focus history from newest to oldest.',
+      value: recentContext,
+    },
+    [recentContext],
+  );
+
+  function focusPanel(id: string) {
+    const panel = panelRefs.current[id];
+    if (!panel) return;
+    ctx.select(panel);
+    setSelectedPanel(id);
+  }
+
+  return (
+    <div className="app-shell">
+      <main className="workspace">
+        <section className="hero card">
+          <div>
+            <p className="eyebrow">askable-ui + CopilotKit starter</p>
+            <h1>Ship a UI-aware copilot in one scaffold.</h1>
+            <p className="hero-copy">
+              Hover or click any panel to update Askable context. CopilotKit receives the current focus and recent history via
+              <code> useCopilotReadable() </code>
+              so the assistant can answer about exactly what the user sees.
+            </p>
+          </div>
+          <div className="hero-actions">
+            <button type="button" onClick={() => focusPanel('pipeline-coverage')}>
+              Ask about pipeline
+            </button>
+            <button type="button" className="secondary" onClick={() => focusPanel('northstar')}>
+              Ask about Northstar
+            </button>
+          </div>
+        </section>
+
+        <section className="metrics-grid">
+          {metrics.map((metric) => (
+            <article
+              key={metric.id}
+              ref={(node) => {
+                panelRefs.current[metric.id] = node;
+              }}
+              className={`card metric-card ${selectedPanel === metric.id ? 'is-selected' : ''}`}
+              data-askable={askableMeta({
+                area: 'executive dashboard',
+                panel: metric.label,
+                value: metric.value,
+                delta: metric.delta,
+              })}
+              data-askable-text={metric.detail}
+            >
+              <div className="metric-head">
+                <span>{metric.label}</span>
+                <span className="delta">{metric.delta}</span>
+              </div>
+              <strong>{metric.value}</strong>
+              <p>{metric.narrative}</p>
+              <button type="button" className="link-button" onClick={() => focusPanel(metric.id)}>
+                Ask AI about this card
+              </button>
+            </article>
+          ))}
+        </section>
+
+        <section className="grid-two">
+          <article
+            className={`card chart-card ${selectedPanel === 'forecast' ? 'is-selected' : ''}`}
+            ref={(node) => {
+              panelRefs.current.forecast = node;
+            }}
+            data-askable={askableMeta({
+              area: 'forecast',
+              chart: 'quarterly revenue',
+              trend: 'up and to the right',
+              confidence: 'medium-high',
+            })}
+            data-askable-text="AI focus summary: quarterly revenue is rising steadily from $1.2M in Q1 to a projected $1.9M in Q4, with strongest momentum in enterprise expansions."
+          >
+            <div className="section-head">
+              <div>
+                <p className="eyebrow">Forecast</p>
+                <h2>Quarterly revenue outlook</h2>
+              </div>
+              <button type="button" className="link-button" onClick={() => focusPanel('forecast')}>
+                Ask AI about this chart
+              </button>
+            </div>
+            <div className="bars" aria-hidden="true">
+              <span style={{ height: '46%' }} />
+              <span style={{ height: '59%' }} />
+              <span style={{ height: '74%' }} />
+              <span style={{ height: '92%' }} />
+            </div>
+            <p className="chart-caption">Q4 upside comes from larger multi-product expansions rather than raw logo growth.</p>
+          </article>
+
+          <article className="card context-card">
+            <div className="section-head compact">
+              <div>
+                <p className="eyebrow">Live Askable context</p>
+                <h2>What CopilotKit can currently read</h2>
+              </div>
+            </div>
+            <pre>{currentContext}</pre>
+            <h3>Recent focus history</h3>
+            <pre>{recentContext}</pre>
+          </article>
+        </section>
+
+        <section className="card deals-card">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">Pipeline drilldown</p>
+              <h2>Priority deals</h2>
+            </div>
+          </div>
+          <div className="table-head">
+            <span>Account</span>
+            <span>Stage</span>
+            <span>Value</span>
+            <span>Owner</span>
+          </div>
+          <div className="deal-list">
+            {deals.map((deal) => (
+              <button
+                key={deal.id}
+                type="button"
+                ref={(node) => {
+                  panelRefs.current[deal.id] = node;
+                }}
+                className={`deal-row ${selectedPanel === deal.id ? 'is-selected' : ''}`}
+                data-askable={askableMeta({
+                  area: 'pipeline drilldown',
+                  account: deal.company,
+                  stage: deal.stage,
+                  value: deal.value,
+                  owner: deal.owner,
+                })}
+                data-askable-text={`AI focus summary: ${deal.company} is in ${deal.stage}, worth ${deal.value}, owned by ${deal.owner}.`}
+                onClick={() => focusPanel(deal.id)}
+              >
+                <span>{deal.company}</span>
+                <span>{deal.stage}</span>
+                <span>{deal.value}</span>
+                <span>{deal.owner}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      </main>
+
+      <aside className="copilot-panel">
+        <div className="copilot-panel-header">
+          <p className="eyebrow">CopilotKit sidebar</p>
+          <h2>Ask about whatever is selected</h2>
+          <p>
+            Add <code>OPENAI_API_KEY</code> to <code>.env</code> to enable responses from the local runtime.
+          </p>
+        </div>
+        <CopilotSidebar
+          instructions="You are a helpful revenue operations copilot. Use the Askable context and recent focus history to answer precisely about the currently selected panel. If no panel is selected, ask the user what they want to inspect."
+          defaultOpen
+          clickOutsideToClose={false}
+          labels={{
+            title: 'Askable Copilot',
+            initial: 'Ask about the highlighted KPI, chart, or deal.',
+          }}
+        />
+      </aside>
+    </div>
+  );
+}

package/template/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CopilotKit } from '@copilotkit/react-core';
+import '@copilotkit/react-ui/styles.css';
+import './styles.css';
+import App from './App';
+
+const runtimeUrl = import.meta.env.VITE_COPILOT_RUNTIME_URL ?? 'http://localhost:3001/api/copilotkit';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <CopilotKit runtimeUrl={runtimeUrl}>
+      <App />
+    </CopilotKit>
+  </StrictMode>,
+);

package/template/src/styles.css

@@ -0,0 +1,304 @@
+ :root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #07111f;
+  color: #e5eefb;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 24%),
+    radial-gradient(circle at top right, rgba(14, 165, 233, 0.15), transparent 18%),
+    linear-gradient(180deg, #07111f 0%, #0b1729 100%);
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+code,
+pre {
+  font-family: 'SFMono-Regular', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 420px;
+  min-height: 100vh;
+}
+
+.workspace {
+  padding: 32px;
+  display: grid;
+  gap: 24px;
+}
+
+.card {
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  background: rgba(10, 17, 31, 0.78);
+  backdrop-filter: blur(14px);
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 0 18px 48px rgba(2, 8, 23, 0.28);
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.72rem;
+  color: #7dd3fc;
+  margin: 0 0 12px;
+}
+
+.hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  align-items: flex-end;
+}
+
+.hero h1,
+.section-head h2,
+.context-card h2,
+.copilot-panel-header h2 {
+  margin: 0;
+  font-size: clamp(1.6rem, 3vw, 2.8rem);
+  line-height: 1.05;
+}
+
+.hero-copy,
+.copilot-panel-header p,
+.metric-card p,
+.chart-caption {
+  color: #b7c6dc;
+  line-height: 1.65;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+button {
+  border: 0;
+  border-radius: 999px;
+  padding: 0.82rem 1.1rem;
+  background: linear-gradient(135deg, #38bdf8, #2563eb);
+  color: #eff6ff;
+  cursor: pointer;
+  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
+  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.28);
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+
+button.secondary,
+.link-button {
+  background: rgba(30, 41, 59, 0.85);
+  color: #d8e7fb;
+  box-shadow: none;
+}
+
+.link-button {
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+  color: #7dd3fc;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.metric-card strong {
+  display: block;
+  font-size: 2rem;
+  margin-bottom: 12px;
+}
+
+.metric-head,
+.section-head,
+.table-head,
+.deal-row {
+  display: grid;
+  align-items: center;
+}
+
+.metric-head {
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  color: #d8e7fb;
+  margin-bottom: 18px;
+}
+
+.delta {
+  color: #7dd3fc;
+  font-size: 0.9rem;
+}
+
+.grid-two {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+  gap: 20px;
+}
+
+.section-head {
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.section-head.compact {
+  grid-template-columns: 1fr;
+}
+
+.bars {
+  height: 220px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: end;
+  gap: 18px;
+  padding: 12px 0 0;
+}
+
+.bars span {
+  border-radius: 20px 20px 10px 10px;
+  background: linear-gradient(180deg, #38bdf8 0%, #1d4ed8 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
+}
+
+.context-card pre {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 18px;
+  padding: 14px;
+  color: #d9e7f8;
+  line-height: 1.55;
+}
+
+.context-card h3 {
+  margin: 18px 0 10px;
+  font-size: 0.95rem;
+  color: #8acdf3;
+}
+
+.table-head,
+.deal-row {
+  grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr;
+  gap: 12px;
+}
+
+.table-head {
+  color: #8da2c0;
+  font-size: 0.84rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  padding: 0 0 10px;
+}
+
+.deal-list {
+  display: grid;
+  gap: 12px;
+}
+
+.deal-row {
+  width: 100%;
+  text-align: left;
+  padding: 16px 18px;
+  border-radius: 18px;
+  background: rgba(15, 23, 42, 0.92);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  color: #e2ebf8;
+}
+
+.metric-card.is-selected,
+.chart-card.is-selected,
+.deal-row.is-selected {
+  border-color: rgba(56, 189, 248, 0.9);
+  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 18px 48px rgba(2, 8, 23, 0.28);
+}
+
+.copilot-panel {
+  border-left: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(2, 6, 23, 0.75);
+  padding: 24px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 18px;
+  min-height: 100vh;
+  position: sticky;
+  top: 0;
+}
+
+.copilot-panel-header {
+  padding: 12px 4px 0;
+}
+
+.copilot-panel :where(.copilotKitWindow, .copilotKitSidebar, .copilotKitChat) {
+  height: 100%;
+  max-height: calc(100vh - 160px);
+}
+
+@media (max-width: 1180px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .copilot-panel {
+    position: static;
+    min-height: auto;
+    border-left: 0;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+  }
+}
+
+@media (max-width: 920px) {
+  .metrics-grid,
+  .grid-two {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 720px) {
+  .workspace,
+  .copilot-panel {
+    padding: 18px;
+  }
+
+  .table-head {
+    display: none;
+  }
+
+  .deal-row {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.server.json" }]
+}

package/template/tsconfig.server.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "rootDir": "server",
+    "outDir": "dist-server",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["server/**/*.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});