create-janux 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-janux",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scaffold a new Janux app: bunx create-janux my-app",
   "repository": {
     "type": "git",

package/template/README.md

@@ -0,0 +1,34 @@
+# __APP_NAME__
+
+A [Janux](https://github.com/aralroca/Janux) app. One component, two faces: this task board is a UI for you **and** a set of typed tools for your copilot.
+
+## Run it
+
+```bash
+bun install
+bun run dev        # http://localhost:3000
+bun test           # the example unit test — no browser needed
+```
+
+Enable the copilot (optional): copy `.env.example` to `.env` and set `JANUX_MODEL` or one provider API key.
+
+## What's inside
+
+| File | Shows |
+|---|---|
+| `src/components/TaskBoard.tsx` | State, derived, intents, a `confirm` guard, a debounced persist effect, events |
+| `src/components/ThemeToggle.tsx` | Two islands sharing a store |
+| `src/stores.ts` | Shared state as `store://theme` |
+| `src/server/tasks.api.ts` | api(): endpoint + client stub + agent tool from one definition |
+| `src/components/Copilot.tsx` | The copilot chrome: turn protocol + proposals with human approve |
+| `src/components/TaskBoard.test.ts` | Testing intents & guards without a browser |
+
+## See the second face
+
+```bash
+curl -s localhost:3000/_janux/manifest | jq        # what agents see
+```
+
+Try asking the copilot: *"add a task to buy milk, then show me what's left"* — and watch `tasks.clearDone` come back as a proposal you approve on screen.
+
+Docs: start with the [tutorial](https://github.com/aralroca/Janux/tree/main/apps/docs/content/tutorial) — it builds exactly this app.

package/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "__APP_NAME__",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "janux dev",

package/template/src/agent.ts

@@ -1,5 +1,8 @@
 import { defineAgent } from '@janux/agent';
 
 export default defineAgent({
-  instructions: 'You are this app’s copilot. Use the counter tools and api.hello.greet.',
+  instructions:
+    'You are this task app’s copilot. Use the tasks.* tools to add, toggle, filter and clear ' +
+    'tasks, api.tasks.taskStats for stats, and theme.toggle for appearance. clearDone needs ' +
+    'human approval — propose it, never insist.',
 });

package/template/src/client.ts

@@ -1,4 +1,7 @@
 import { boot } from 'janux/client';
-import { Counter } from './components/Counter';
+import { TaskBoard } from './components/TaskBoard';
+import { ThemeToggle } from './components/ThemeToggle';
+import { Copilot } from './components/Copilot';
+import { theme } from './stores';
 
-boot({ defs: [Counter] });
+boot({ defs: [TaskBoard, ThemeToggle, Copilot, theme] });

package/template/src/components/Copilot.tsx

@@ -0,0 +1,103 @@
+import { component, intent, schema, str, bool, enums, list } from 'janux';
+
+let wire: any[] = [];
+
+async function postAgent(messages: unknown[], path: string): Promise<any> {
+  const response = await fetch('/_janux/agent', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ messages, path }),
+  });
+
+  return response.json();
+}
+
+async function converse(state: any, path: string): Promise<void> {
+  let reply = await postAgent(wire, path);
+
+  while (reply.type === 'ui_calls') {
+    wire = reply.messages;
+    for (const call of reply.calls) {
+      const result = await (window as any).janux
+        .call(call.name, call.input)
+        .catch((error: unknown) => ({ error: String(error) }));
+
+      if (result?.status === 'proposal') state.proposal = { id: result.id, tool: call.name };
+      wire.push({ role: 'tool', toolCallId: call.id, content: JSON.stringify(result ?? null) });
+    }
+    reply = await postAgent(wire, path);
+  }
+  wire = reply.messages ?? wire;
+  state.messages.push({ role: 'assistant', text: reply.type === 'setup' ? reply.message : reply.text });
+}
+
+export const Copilot = component({
+  name: 'copilot',
+  description: 'Built-in copilot operating this app through the agent bridge.',
+
+  state: schema({
+    open: bool(),
+    busy: bool(),
+    messages: list({ role: enums(['user', 'assistant']), text: str() }),
+    proposal: schema({ id: str(), tool: str() }).nullable(),
+  }),
+
+  intents: {
+    toggle: intent({ description: 'Open/close the copilot', run: ({ state }: any) => (state.open = !state.open) }),
+    send: intent({
+      description: 'Send a message to the copilot',
+      input: schema({ text: str().min(1) }),
+      run: async ({ state, input }: any) => {
+        state.messages.push({ role: 'user', text: input.text });
+        state.busy = true;
+        wire.push({ role: 'user', content: input.text });
+        await converse(state, window.location.pathname).finally(() => (state.busy = false));
+      },
+    }),
+    approve: intent({
+      guard: 'forbidden',
+      run: async ({ state }: any) => {
+        await (window as any).janux.approve(state.proposal.id);
+        state.messages.push({ role: 'assistant', text: `Approved ${state.proposal.tool} ✔` });
+        state.proposal = null;
+      },
+    }),
+    reject: intent({
+      guard: 'forbidden',
+      run: ({ state }: any) => {
+        (window as any).janux.reject(state.proposal?.id);
+        state.proposal = null;
+      },
+    }),
+  },
+
+  view: ({ state, intents }: any) => (
+    <aside class="copilot">
+      <button class="copilot-toggle" on={intents.toggle}>
+        {state.open ? '×' : '✦ Copilot'}
+      </button>
+      {state.open ? (
+        <div class="copilot-panel">
+          <ol class="chat">
+            {state.messages.map((message: any, index: number) => (
+              <li key={String(index)} class={message.role}>
+                {message.text}
+              </li>
+            ))}
+          </ol>
+          {state.proposal ? (
+            <div class="proposal">
+              <p>Run “{state.proposal.tool}”?</p>
+              <button on={intents.approve}>Approve</button>
+              <button on={intents.reject}>Reject</button>
+            </div>
+          ) : null}
+          <form intent={intents.send}>
+            <input name="text" placeholder={state.busy ? 'Thinking…' : 'Try: add a task to buy milk'} />
+            <button type="submit">Send</button>
+          </form>
+        </div>
+      ) : null}
+    </aside>
+  ),
+});

package/template/src/components/TaskBoard.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'bun:test';
+import { createInstance } from 'janux';
+import { TaskBoard } from './TaskBoard';
+
+describe('TaskBoard', () => {
+  it('adds, toggles and counts tasks', async () => {
+    const board = createInstance(TaskBoard);
+
+    await board.intents.add!({ title: 'Ship it' });
+    await board.intents.add!({ title: 'Write tests' });
+    const [first] = board.snapshot().tasks as any[];
+
+    await board.intents.toggle!({ id: first.id });
+    expect((board.snapshot().tasks as any[])[0].done).toBe(true);
+    expect(board.derived.remaining).toBe(1);
+  });
+
+  it('rejects empty titles', () => {
+    const board = createInstance(TaskBoard);
+
+    expect(board.intents.add!({ title: '' })).rejects.toThrow(/below min/);
+  });
+
+  it('clearDone is a proposal for agents — nothing happens until approval', async () => {
+    let proposal: any;
+    const board = createInstance(TaskBoard, { onProposal: (p) => (proposal = p) });
+
+    await board.intents.add!({ title: 'done thing' });
+    await board.intents.toggle!({ id: (board.snapshot().tasks as any[])[0].id });
+
+    const result: any = await board.intents.clearDone!({}, { origin: 'agent' });
+
+    expect(result.status).toBe('proposal');
+    expect(board.snapshot().tasks).toHaveLength(1);
+    await proposal.execute();
+    expect(board.snapshot().tasks).toHaveLength(0);
+  });
+});

package/template/src/components/TaskBoard.tsx

@@ -0,0 +1,125 @@
+import { component, intent, effect, schema, str, bool, int, enums, list } from 'janux';
+import { saveTasks } from '../server/tasks.api';
+import { theme } from '../stores';
+
+const FILTERS = ['all', 'active', 'done'] as const;
+
+function taskId(): string {
+  return `t_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function visibleTasks(tasks: any[], filter: string): any[] {
+  if (filter === 'active') return tasks.filter((task) => !task.done);
+  if (filter === 'done') return tasks.filter((task) => task.done);
+
+  return tasks;
+}
+
+export const TaskBoard = component({
+  name: 'tasks',
+  description: 'A task board. Agents can add, toggle, filter and (with approval) clear done tasks.',
+
+  state: schema({
+    tasks: list({ id: str(), title: str(), done: bool() }),
+    filter: enums([...FILTERS]),
+  }),
+
+  derived: {
+    remaining: (s: any) => s.tasks.filter((task: any) => !task.done).length,
+  },
+
+  effects: {
+    persist: effect({
+      description: 'Saves tasks to the server after changes settle',
+      when: (s: any) => s.tasks,
+      debounce: '400ms',
+      run: ({ state }: any) => saveTasks({ tasks: state.tasks }).then(() => {}),
+    }),
+  },
+
+  emits: { 'tasks.cleared': schema({ count: int() }) },
+
+  use: { theme },
+
+  intents: {
+    add: intent({
+      description: 'Add a task by title',
+      input: schema({ title: str().min(1) }),
+      run: ({ state, input }: any) => state.tasks.push({ id: taskId(), title: input.title, done: false }),
+    }),
+    toggle: intent({
+      description: 'Toggle a task done/undone by id',
+      input: schema({ id: str() }),
+      run: ({ state, input }: any) => {
+        const task = state.tasks.find((candidate: any) => candidate.id === input.id);
+
+        if (task) task.done = !task.done;
+      },
+    }),
+    remove: intent({
+      description: 'Delete a task by id',
+      input: schema({ id: str() }),
+      run: ({ state, input }: any) => {
+        state.tasks = state.tasks.filter((task: any) => task.id !== input.id);
+      },
+    }),
+    setFilter: intent({
+      description: 'Show all, active or done tasks',
+      input: schema({ filter: enums([...FILTERS]) }),
+      run: ({ state, input }: any) => (state.filter = input.filter),
+    }),
+    clearDone: intent({
+      description: 'Remove every completed task. Destructive — needs approval.',
+      guard: 'confirm',
+      run: ({ state, emit }: any) => {
+        const count = state.tasks.filter((task: any) => task.done).length;
+
+        state.tasks = state.tasks.filter((task: any) => !task.done);
+        emit('tasks.cleared', { count });
+      },
+    }),
+  },
+
+  view: ({ state, derived, intents }: any) => (
+    <section class="board">
+      <header>
+        <h2>Tasks</h2>
+        <span class="count">{derived.remaining} left</span>
+      </header>
+      <form intent={intents.add}>
+        <input name="title" placeholder="What needs doing?" autocomplete="off" />
+        <button type="submit">Add</button>
+      </form>
+      <nav class="filters">
+        {FILTERS.map((filter) => (
+          <button
+            key={filter}
+            class={state.filter === filter ? 'on' : undefined}
+            on={intents.setFilter}
+            data-input={JSON.stringify({ filter })}
+          >
+            {filter}
+          </button>
+        ))}
+      </nav>
+      <ul class="list">
+        {visibleTasks(state.tasks, state.filter).map((task: any) => (
+          <li key={task.id} class={task.done ? 'done' : undefined}>
+            <button class="check" on={intents.toggle} data-input={JSON.stringify({ id: task.id })}>
+              {task.done ? '✓' : ''}
+            </button>
+            <span>{task.title}</span>
+            <button class="x" on={intents.remove} data-input={JSON.stringify({ id: task.id })}>
+              ✕
+            </button>
+          </li>
+        ))}
+      </ul>
+      <footer>
+        <button class="clear" on={intents.clearDone}>
+          Clear done
+        </button>
+      </footer>
+    </section>
+  ),
+});

package/template/src/components/ThemeToggle.tsx

@@ -0,0 +1,23 @@
+import { component, intent } from 'janux';
+import { theme } from '../stores';
+
+/** Second island sharing the theme store — cross-island state, no props. */
+export const ThemeToggle = component({
+  name: 'theme-toggle',
+  description: 'Switches the shared theme between dark and light.',
+
+  use: { theme },
+
+  intents: {
+    toggle: intent({
+      description: 'Toggle dark/light mode',
+      run: ({ use }: any) => use.theme.intents.toggle({}),
+    }),
+  },
+
+  view: ({ use, intents }: any) => (
+    <button class="theme-toggle" on={intents.toggle}>
+      {use.theme.state.mode === 'dark' ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  ),
+});

package/template/src/routes/index.tsx

@@ -1,14 +1,29 @@
-import { Counter } from '../components/Counter';
+import { loadTasks } from '../server/tasks.api';
+import { TaskBoard } from '../components/TaskBoard';
+import { ThemeToggle } from '../components/ThemeToggle';
+import { Copilot } from '../components/Copilot';
+
+export const meta = {
+  title: 'Tasks — a Janux app',
+  description: 'A task board with two faces: a UI for you, typed tools for your copilot.',
+};
+
+export default async function Home() {
+  const saved: any = await loadTasks({});
 
-export default function Home() {
   return (
-    <main>
-      <h1>Welcome to Janux</h1>
-      <p>This heading is static HTML (0 KB JS). The counter below is a resumable island.</p>
-      <Counter />
-      <p>
-        Try the agent surface: <code>curl localhost:3000/_janux/manifest</code>
-      </p>
-    </main>
+    <div class="app">
+      <header class="topbar">
+        <span class="brand">✦ Tasks</span>
+        <ThemeToggle />
+      </header>
+      <main>
+        <TaskBoard initial={{ tasks: saved.tasks, filter: 'all' }} />
+        <p class="hint">
+          This board is also an agent surface — <code>curl localhost:3000/_janux/manifest</code>
+        </p>
+      </main>
+      <Copilot persist />
+    </div>
   );
 }

package/template/src/server/tasks.api.ts

@@ -0,0 +1,31 @@
+import { api } from '@janux/server';
+import { schema, str, bool, int, list } from 'janux';
+
+const TASK_SHAPE = { id: str(), title: str(), done: bool() };
+const saved = new Map<string, unknown[]>();
+
+export const loadTasks = api({
+  description: 'Load the saved task list',
+  output: schema({ tasks: list(TASK_SHAPE) }),
+  run: ({ ctx }) => ({ tasks: (saved.get(String(ctx.userId ?? 'anon')) as any[]) ?? [] }),
+});
+
+export const saveTasks = api({
+  description: 'Persist the task list',
+  input: schema({ tasks: list(TASK_SHAPE) }),
+  run: ({ input, ctx }) => {
+    saved.set(String(ctx.userId ?? 'anon'), input.tasks);
+
+    return { saved: input.tasks.length };
+  },
+});
+
+export const taskStats = api({
+  description: 'Aggregate stats over the saved tasks',
+  output: schema({ total: int(), done: int() }),
+  run: ({ ctx }) => {
+    const tasks = (saved.get(String(ctx.userId ?? 'anon')) as any[]) ?? [];
+
+    return { total: tasks.length, done: tasks.filter((task) => task.done).length };
+  },
+});

package/template/src/stores.ts

@@ -0,0 +1,17 @@
+import { store, intent, schema, enums } from 'janux';
+
+/** Shared theme, projected to agents as store://theme. */
+export const theme = store({
+  name: 'theme',
+  description: 'UI theme shared by every island.',
+  state: schema({ mode: enums(['dark', 'light']).default('dark') }),
+  intents: {
+    toggle: intent({
+      description: 'Switch between dark and light mode',
+      run: ({ state }) => {
+        state.mode = state.mode === 'dark' ? 'light' : 'dark';
+        if (typeof document !== 'undefined') document.documentElement.dataset.theme = state.mode;
+      },
+    }),
+  },
+});

package/template/src/styles.css

@@ -1,10 +1,24 @@
 :root {
-  --ink: #1e1b4b;
+  --bg: #0e0d24;
+  --card: #1b1938;
+  --card-2: #242150;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --violet: #a78bfa;
+  --cyan: #22d3ee;
+  --border: #312e81;
+  --danger: #f87171;
+}
+
+:root[data-theme='light'] {
+  --bg: #f8fafc;
+  --card: #ffffff;
+  --card-2: #eef2ff;
+  --text: #0f172a;
+  --muted: #64748b;
   --violet: #7c3aed;
-  --cyan: #06b6d4;
-  --text: #334155;
+  --cyan: #0891b2;
   --border: #e2e8f0;
-  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 }
 
 * {
@@ -13,208 +27,306 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
+  background: var(--bg);
   color: var(--text);
-  background: #f8fafc;
-  -webkit-font-smoothing: antialiased;
+  transition: background 0.25s, color 0.25s;
 }
 
-main {
-  max-width: 960px;
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 560px;
   margin: 0 auto;
-  padding: 48px 24px 120px;
+  padding: 22px 16px 0;
 }
 
-main.shop {
-  display: grid;
-  grid-template-columns: 1fr 400px;
-  gap: 28px;
+.brand {
+  font-weight: 800;
+  font-size: 20px;
+  background: linear-gradient(90deg, var(--violet), var(--cyan));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
-main.shop > h1 {
-  grid-column: 1 / -1;
+.theme-toggle {
+  padding: 7px 14px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--card);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 13px;
 }
 
-h1 {
-  margin: 0 0 20px;
-  font-size: 2.1rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-  color: var(--ink);
+main {
+  max-width: 560px;
+  margin: 24px auto 120px;
+  padding: 0 16px;
 }
 
-h2,
-h3 {
-  color: var(--ink);
+.hint {
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.hint code {
+  background: var(--card-2);
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+/* ── Board ──────────────────────────────────────────────────────── */
+.board {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 22px;
+  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
+}
+
+.board header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 14px;
+}
+
+.board h2 {
+  margin: 0;
+  font-size: 1.3rem;
   letter-spacing: -0.02em;
 }
 
-a {
-  color: var(--violet);
-  font-weight: 600;
+.board .count {
+  color: var(--muted);
+  font-size: 13px;
 }
 
-code {
-  padding: 2px 6px;
-  border-radius: 6px;
-  background: #ede9fe;
-  color: #5b21b6;
-  font-family: var(--mono);
-  font-size: 0.88em;
+.board form {
+  display: flex;
+  gap: 8px;
+}
+
+.board input {
+  flex: 1;
+  padding: 11px 14px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14.5px;
+  outline: none;
 }
 
-button {
-  padding: 8px 16px;
+.board input:focus {
+  border-color: var(--violet);
+}
+
+.board button {
   border: none;
-  border-radius: 9px;
-  background: var(--ink);
-  color: #fff;
-  font-size: 14px;
-  font-weight: 600;
+  border-radius: 10px;
   cursor: pointer;
-  transition: transform 0.12s, opacity 0.12s;
+  font-weight: 600;
 }
 
-button:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
+.board form button {
+  padding: 0 18px;
+  background: linear-gradient(90deg, #7c3aed, #06b6d4);
+  color: #fff;
 }
 
-/* ── Cart ───────────────────────────────────────────────────────── */
-.cart {
-  padding: 24px;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 8px 30px -18px rgba(30, 27, 75, 0.35);
+.filters {
+  display: flex;
+  gap: 6px;
+  margin: 14px 0 6px;
 }
 
-.cart ul {
-  margin: 12px 0;
-  padding: 0;
+.filters button {
+  padding: 5px 14px;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  border: 1px solid transparent;
+  font-size: 13px;
+  text-transform: capitalize;
+}
+
+.filters button.on {
+  background: var(--card-2);
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.list {
   list-style: none;
+  margin: 8px 0;
+  padding: 0;
 }
 
-.cart .catalog li,
-.cart .items li {
+.list li {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
   padding: 10px 4px;
   border-bottom: 1px solid var(--border);
+}
+
+.list li span {
+  flex: 1;
   font-size: 15px;
 }
 
-.cart .catalog button {
-  background: linear-gradient(90deg, var(--violet), var(--cyan));
+.list li.done span {
+  text-decoration: line-through;
+  color: var(--muted);
 }
 
-.cart .items li {
-  color: var(--ink);
-  font-weight: 600;
+.check {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2px solid var(--violet) !important;
+  background: transparent;
+  color: var(--cyan);
+  font-size: 14px;
+  line-height: 1;
 }
 
-.cart .total {
-  margin: 16px 0 8px;
-  font-size: 1.2rem;
-  font-weight: 800;
-  color: var(--ink);
+li.done .check {
+  background: var(--violet);
+  color: #fff;
 }
 
-.cart .order {
-  padding: 10px 14px;
-  border-radius: 10px;
-  background: #ecfdf5;
-  color: #047857;
-  font-weight: 600;
+.x {
+  background: transparent;
+  color: var(--muted);
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.x:hover {
+  color: var(--danger);
+}
+
+.board footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.clear {
+  background: transparent;
+  color: var(--muted);
+  font-size: 13px;
+  padding: 6px 10px;
+}
+
+.clear:hover {
+  color: var(--danger);
 }
 
 /* ── Copilot ────────────────────────────────────────────────────── */
-.copilot {
+.copilot-toggle {
+  position: fixed;
+  right: 22px;
+  bottom: 22px;
+  z-index: 50;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #7c3aed, #06b6d4);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 10px 30px -8px rgba(124, 58, 237, 0.6);
+}
+
+.copilot-panel {
+  position: fixed;
+  right: 22px;
+  bottom: 78px;
+  z-index: 50;
   display: flex;
   flex-direction: column;
-  height: fit-content;
-  padding: 20px;
+  width: 340px;
+  max-height: 480px;
   border: 1px solid var(--border);
   border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 8px 30px -18px rgba(30, 27, 75, 0.35);
-}
-
-.copilot h3 {
-  margin: 0 0 12px;
+  background: var(--card);
+  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
 }
 
-.copilot .chat {
-  margin: 0 0 12px;
-  padding: 0;
+.copilot-panel .chat {
+  flex: 1;
+  margin: 0;
+  padding: 14px;
   list-style: none;
-  max-height: 340px;
   overflow-y: auto;
+  min-height: 100px;
 }
 
-.copilot .chat li {
+.copilot-panel .chat li {
   margin-bottom: 8px;
   padding: 9px 13px;
   border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 13.5px;
   max-width: 88%;
 }
 
-.copilot .chat li.user {
+.copilot-panel .chat li.user {
   margin-left: auto;
-  background: linear-gradient(90deg, var(--violet), #6d28d9);
+  background: #6d28d9;
   color: #fff;
 }
 
-.copilot .chat li.assistant {
-  background: #f1f5f9;
-  color: var(--ink);
+.copilot-panel .chat li.assistant {
+  background: var(--card-2);
 }
 
-.copilot form {
+.copilot-panel form {
   display: flex;
   gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--border);
 }
 
-.copilot input {
+.copilot-panel input {
   flex: 1;
-  padding: 9px 13px;
+  padding: 9px 12px;
   border: 1px solid var(--border);
   border-radius: 9px;
-  font-size: 14px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13.5px;
   outline: none;
 }
 
-.copilot input:focus {
-  border-color: var(--violet);
-  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
+.copilot-panel button {
+  border: none;
+  border-radius: 9px;
+  padding: 9px 14px;
+  background: var(--violet);
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .proposal {
-  margin: 0 0 12px;
-  padding: 14px;
-  border: 1px solid #fde68a;
-  border-radius: 12px;
-  background: #fffbeb;
-}
-
-.proposal p {
-  margin: 0 0 10px;
-  font-size: 14px;
-  color: #92400e;
-}
-
-.proposal button + button {
-  margin-left: 8px;
-  background: #e2e8f0;
-  color: var(--ink);
+  margin: 0 14px 10px;
+  padding: 10px 12px;
+  border: 1px solid #fbbf24;
+  border-radius: 10px;
+  background: rgba(251, 191, 36, 0.1);
+  font-size: 13px;
 }
 
-@media (max-width: 900px) {
-  main.shop {
-    grid-template-columns: 1fr;
-  }
+.proposal button {
+  margin-right: 6px;
+  margin-top: 6px;
 }

package/template/src/components/Counter.tsx

@@ -1,29 +0,0 @@
-import { component, intent, schema, int } from 'janux';
-
-export const Counter = component({
-  name: 'counter',
-  description: 'A counter. Agents can read it (ui://counter) and bump it (counter.inc).',
-
-  state: schema({ n: int() }),
-
-  intents: {
-    inc: intent({
-      description: 'Increment the counter',
-      input: schema({ by: int().default(1) }),
-      run: ({ state, input }) => (state.n += input.by),
-    }),
-    reset: intent({
-      description: 'Reset the counter to zero',
-      guard: 'confirm',
-      run: ({ state }) => (state.n = 0),
-    }),
-  },
-
-  view: ({ state, intents }) => (
-    <section>
-      <output>{state.n}</output>
-      <button on={intents.inc}>+1</button>
-      <button on={intents.reset}>Reset</button>
-    </section>
-  ),
-});

package/template/src/server/hello.api.ts

@@ -1,8 +0,0 @@
-import { api } from '@janux/server';
-import { schema, str } from 'janux';
-
-export const greet = api({
-  description: 'Greet someone by name',
-  input: schema({ name: str() }),
-  run: ({ input }) => ({ message: `Hello, ${input.name}! — from a Janux api() tool` }),
-});