create-janux 0.2.0 → 0.2.1

package/template/src/routes/index.tsx

@@ -1,29 +1,27 @@
-import { loadTasks } from '../server/tasks.api';
-import { TaskBoard } from '../components/TaskBoard';
-import { ThemeToggle } from '../components/ThemeToggle';
-import { Copilot } from '../components/Copilot';
+import { Counter } from '../components/Counter';
+import { AgentPanel } from '../components/AgentPanel';
 
 export const meta = {
-  title: 'Tasks — a Janux app',
-  description: 'A task board with two faces: a UI for you, typed tools for your copilot.',
+  title: 'Welcome to Janux',
+  description: 'One component, two faces: a UI for you, typed tools for agents.',
 };
 
-export default async function Home() {
-  const saved: any = await loadTasks({});
-
+export default function Home() {
   return (
     <div class="app">
-      <header class="topbar">
-        <span class="brand">✦ Tasks</span>
-        <ThemeToggle />
+      <header class="bar">
+        <span class="brand">⚡ Janux</span>
+        <span class="bar-hint">The counter is your UI · the right panel is what an agent sees</span>
       </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 class="split">
+        <section class="preview">
+          <Counter />
+          <p class="curl">
+            Same surface over HTTP: <code>curl localhost:3000/_janux/manifest</code>
+          </p>
+        </section>
+        <AgentPanel eager />
       </main>
-      <Copilot persist />
     </div>
   );
 }

package/template/src/styles.css

@@ -1,24 +1,9 @@
 :root {
-  --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;
+  --ink: #0f172a;
   --violet: #7c3aed;
-  --cyan: #0891b2;
   --border: #e2e8f0;
+  --muted: #64748b;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
 * {
@@ -28,305 +13,265 @@
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  transition: background 0.25s, color 0.25s;
+  background: #fff;
+  color: var(--ink);
 }
 
-.topbar {
+.bar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 560px;
-  margin: 0 auto;
-  padding: 22px 16px 0;
+  align-items: baseline;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
 }
 
 .brand {
   font-weight: 800;
-  font-size: 20px;
-  background: linear-gradient(90deg, var(--violet), var(--cyan));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.theme-toggle {
-  padding: 7px 14px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--card);
-  color: var(--text);
-  cursor: pointer;
-  font-size: 13px;
-}
-
-main {
-  max-width: 560px;
-  margin: 24px auto 120px;
-  padding: 0 16px;
+  font-size: 1rem;
 }
 
-.hint {
-  text-align: center;
+.bar-hint {
   color: var(--muted);
   font-size: 13px;
 }
 
-.hint code {
-  background: var(--card-2);
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-size: 12px;
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  height: calc(100vh - 46px);
 }
 
-/* ── 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);
+.preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  border-right: 1px solid var(--border);
 }
 
-.board header {
+/* ── Counter ────────────────────────────────────────────────────── */
+.counter {
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 14px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
 }
 
-.board h2 {
+.counter h1 {
   margin: 0;
-  font-size: 1.3rem;
-  letter-spacing: -0.02em;
-}
-
-.board .count {
-  color: var(--muted);
-  font-size: 13px;
+  font-size: 3.75rem;
+  font-weight: 800;
+  color: #1e1b4b;
 }
 
-.board form {
+.counter .row {
   display: flex;
-  gap: 8px;
+  gap: 12px;
 }
 
-.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;
+.counter button {
+  padding: 10px 28px;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
 }
 
-.board input:focus {
-  border-color: var(--violet);
+.counter .dec {
+  background: #64748b;
 }
 
-.board button {
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 600;
+.counter .dec:hover {
+  background: #475569;
 }
 
-.board form button {
-  padding: 0 18px;
+.counter .inc {
   background: linear-gradient(90deg, #7c3aed, #06b6d4);
-  color: #fff;
 }
 
-.filters {
-  display: flex;
-  gap: 6px;
-  margin: 14px 0 6px;
+.counter .inc:hover {
+  opacity: 0.9;
 }
 
-.filters button {
-  padding: 5px 14px;
-  border-radius: 999px;
-  background: transparent;
+.curl {
   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;
-}
-
-.list li {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 4px;
-  border-bottom: 1px solid var(--border);
+.curl code {
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: #ede9fe;
+  color: #5b21b6;
+  font-size: 12px;
+  font-family: var(--mono);
 }
 
-.list li span {
-  flex: 1;
-  font-size: 15px;
+/* ── Agent pane ─────────────────────────────────────────────────── */
+.agent-pane {
+  overflow-y: auto;
+  padding: 14px;
+  background: #f8fafc;
 }
 
-.list li.done span {
-  text-decoration: line-through;
-  color: var(--muted);
+.agent-pane h2 {
+  margin: 0 0 10px;
+  font-size: 0.95rem;
 }
 
-.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;
+.agent-pane .tool-row {
+  margin-bottom: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #fff;
+  font-size: 13px;
 }
 
-li.done .check {
-  background: var(--violet);
-  color: #fff;
+.agent-pane .tool-row code {
+  font-size: 12px;
+  font-family: var(--mono);
 }
 
-.x {
-  background: transparent;
+.agent-pane .tool-row small {
+  display: block;
+  margin-top: 2px;
   color: var(--muted);
-  font-size: 14px;
-  padding: 4px 8px;
 }
 
-.x:hover {
-  color: var(--danger);
+.agent-pane .tool-row .example {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  color: var(--muted);
 }
 
-.board footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
+.agent-pane .guard {
+  margin-left: 6px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
 }
 
-.clear {
-  background: transparent;
-  color: var(--muted);
-  font-size: 13px;
-  padding: 6px 10px;
+.agent-pane .guard.auto {
+  background: #ecfdf5;
+  color: #047857;
 }
 
-.clear:hover {
-  color: var(--danger);
+.agent-pane .guard.confirm {
+  background: #fffbeb;
+  color: #92400e;
 }
 
-/* ── Copilot ────────────────────────────────────────────────────── */
-.copilot-toggle {
-  position: fixed;
-  right: 22px;
-  bottom: 22px;
-  z-index: 50;
-  padding: 12px 20px;
+.agent-pane .tool-row button {
+  display: block;
+  margin-top: 8px;
+  padding: 5px 12px;
   border: none;
-  border-radius: 999px;
-  background: linear-gradient(90deg, #7c3aed, #06b6d4);
+  border-radius: 8px;
+  background: var(--ink);
   color: #fff;
-  font-weight: 700;
+  font-size: 12px;
   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;
-  width: 340px;
-  max-height: 480px;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: var(--card);
-  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
+.agent-pane .resource-block {
+  margin-top: 14px;
 }
 
-.copilot-panel .chat {
-  flex: 1;
+.agent-pane .resource {
   margin: 0;
-  padding: 14px;
-  list-style: none;
-  overflow-y: auto;
-  min-height: 100px;
+  padding: 12px;
+  border-radius: 10px;
+  max-height: 220px;
+  overflow: auto;
+  background: #16143a;
+  color: #a5f3fc;
+  font-size: 12px;
+  font-family: var(--mono);
 }
 
-.copilot-panel .chat li {
-  margin-bottom: 8px;
-  padding: 9px 13px;
+/* ── Proposal (guard: confirm) ──────────────────────────────────── */
+.proposal-card {
+  margin-top: 12px;
+  padding: 14px;
+  border: 2px solid #dc2626;
   border-radius: 12px;
+  background: #fef2f2;
+  color: #991b1b;
+  font-size: 13px;
+  animation: proposal-pulse 1.2s ease-in-out 2;
+}
+
+.proposal-card p {
+  margin: 0 0 6px;
+  line-height: 1.5;
+}
+
+.proposal-card .proposal-title {
+  font-weight: 800;
   font-size: 13.5px;
-  max-width: 88%;
+  color: #b91c1c;
 }
 
-.copilot-panel .chat li.user {
-  margin-left: auto;
-  background: #6d28d9;
-  color: #fff;
+.proposal-card .proposal-why {
+  color: #b45309;
 }
 
-.copilot-panel .chat li.assistant {
-  background: var(--card-2);
+.proposal-card code {
+  background: #fee2e2;
+  color: #991b1b;
+  font-family: var(--mono);
 }
 
-.copilot-panel form {
+.proposal-actions {
   display: flex;
   gap: 8px;
-  padding: 10px;
-  border-top: 1px solid var(--border);
-}
-
-.copilot-panel input {
-  flex: 1;
-  padding: 9px 12px;
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  background: var(--bg);
-  color: var(--text);
-  font-size: 13.5px;
-  outline: none;
+  margin-top: 10px;
 }
 
-.copilot-panel button {
+.proposal-actions .approve {
+  padding: 8px 18px;
   border: none;
-  border-radius: 9px;
-  padding: 9px 14px;
-  background: var(--violet);
+  border-radius: 8px;
+  background: #dc2626;
   color: #fff;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
 }
 
-.proposal {
-  margin: 0 14px 10px;
-  padding: 10px 12px;
-  border: 1px solid #fbbf24;
-  border-radius: 10px;
-  background: rgba(251, 191, 36, 0.1);
-  font-size: 13px;
+.proposal-actions .reject {
+  padding: 8px 18px;
+  border: 1px solid #dc2626;
+  border-radius: 8px;
+  background: #fff;
+  color: #b91c1c;
+  font-weight: 700;
+  cursor: pointer;
 }
 
-.proposal button {
-  margin-right: 6px;
-  margin-top: 6px;
+@keyframes proposal-pulse {
+  50% {
+    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.25);
+  }
+}
+
+@media (max-width: 800px) {
+  .split {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .preview {
+    min-height: 60vh;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
 }

package/template/tsconfig.json

@@ -5,6 +5,7 @@
     "moduleResolution": "bundler",
     "strict": true,
     "skipLibCheck": true,
+    "types": ["bun"],
     "noEmit": true,
     "jsx": "react-jsx",
     "jsxImportSource": "janux"

package/template/.env.example

@@ -1,9 +0,0 @@
-# Copilot model — pick ONE option (RFC §8.1 resolution order)
-
-# Option 1: explicit model
-# JANUX_MODEL=anthropic/claude-fable-5
-
-# Option 2: provider key only — default model inferred
-# ANTHROPIC_API_KEY=sk-ant-...
-# OPENAI_API_KEY=sk-...
-# GOOGLE_GENERATIVE_AI_API_KEY=...

package/template/src/agent.ts

@@ -1,8 +0,0 @@
-import { defineAgent } from '@janux/agent';
-
-export default defineAgent({
-  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/components/Copilot.tsx

@@ -1,103 +0,0 @@
-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>
-  ),
-});