create-theokit 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-theokit",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "type": "module",
   "description": "Scaffold a new TheoKit project",
   "license": "Apache-2.0",

package/templates/default/app/layout.tsx

@@ -1,73 +1,30 @@
 import '@theokit/ui/styles.css'
 
 import { Outlet } from 'react-router'
-import { AgentProfile, ThemeSwitcher, CostMeter, type AgentProfileDescriptor } from '@theokit/ui'
-import { Sidebar, TopNav, Tooltip, Badge } from '@usetheo/ui'
-import { Bot, MessageSquare, History, Settings } from 'lucide-react'
-
-const AGENTS: AgentProfileDescriptor[] = [
-  {
-    id: 'theo',
-    name: 'Theo',
-    description: 'Edit the agent at agents/chat.ts.',
-    tone: 'primary',
-    initials: 'TH',
-    badge: 'Online',
-  },
-]
+import { ThemeSwitcher } from '@theokit/ui'
+import { Bot } from 'lucide-react'
 
+/**
+ * App shell — a slim top bar (product name + theme toggle) over the chat surface.
+ *
+ * Deliberately minimal: everything shown WORKS. A scaffold is an honest starting point, not a demo
+ * dashboard — so there is no fake cost meter, no fake token counter, and no dead History/Settings buttons.
+ * Add real chrome (a conversation list, usage from the stream, a settings route) as you build it.
+ */
 export default function RootLayout() {
   return (
     <div className="grid h-screen w-screen grid-rows-[auto_1fr] bg-background text-foreground">
-      <TopNav className="border-border/60 border-b px-4 py-2">
-        <TopNav.Left>
-          <Tooltip label="TheoKit agent surface" side="bottom">
-            <span className="inline-flex items-center gap-2">
-              <Bot className="size-5 text-primary" aria-hidden />
-              <span className="font-semibold text-sm tracking-tight">Theo Agent</span>
-              <Badge variant="outline" size="sm">
-                v0.1
-              </Badge>
-            </span>
-          </Tooltip>
-        </TopNav.Left>
-        <TopNav.Right>
-          <Tooltip label="Toggle theme" side="bottom" align="end">
-            <span>
-              <ThemeSwitcher />
-            </span>
-          </Tooltip>
-        </TopNav.Right>
-      </TopNav>
-
-      <div className="grid h-full grid-cols-[260px_1fr] overflow-hidden">
-        <Sidebar className="flex flex-col border-border/60 border-r p-3">
-          <Sidebar.Header>
-            <AgentProfile agents={AGENTS} activeId="theo" />
-          </Sidebar.Header>
-
-          <Sidebar.Section title="Workspace">
-            <Sidebar.Item icon={MessageSquare} active>
-              New conversation
-            </Sidebar.Item>
-            <Sidebar.Item icon={History}>History</Sidebar.Item>
-            <Sidebar.Item icon={Settings}>Settings</Sidebar.Item>
-          </Sidebar.Section>
-
-          <Sidebar.Footer className="mt-auto">
-            <CostMeter
-              compact
-              title="This session"
-              cost={0.0023}
-              delta={{ value: 0.0023, period: 'now' }}
-            />
-          </Sidebar.Footer>
-        </Sidebar>
+      <header className="flex items-center justify-between border-border/60 border-b px-4 py-2">
+        <span className="inline-flex items-center gap-2">
+          <Bot className="size-5 text-primary" aria-hidden />
+          <span className="font-semibold text-sm tracking-tight">Theo Agent</span>
+        </span>
+        <ThemeSwitcher />
+      </header>
 
-        <main className="flex h-full flex-col overflow-hidden">
-          <Outlet />
-        </main>
-      </div>
+      <main className="flex h-full flex-col overflow-hidden">
+        <Outlet />
+      </main>
     </div>
   )
 }

package/templates/default/app/page.test.tsx

@@ -9,17 +9,17 @@ import Page from './page'
  * must both type-check AND render. Renders the real React tree in jsdom.
  */
 describe('default chat page', () => {
-  it('opens with the agent greeting + quick actions + composer on first load', () => {
+  it('opens with the agent greeting + honest starter prompts + composer + a working New chat', () => {
     const { container } = render(<Page />)
-    // The agent greets first — the transcript starts warm (like the terminal surface). ChatMessage renders
-    // the text across markdown spans, so assert the assistant message container structurally, not by text.
+    // The agent greets first — the transcript starts warm. ChatMessage renders the text across markdown
+    // spans, so assert the assistant message container structurally, not by text.
     expect(container.querySelector('[data-theo-chat-message="assistant"]')).not.toBeNull()
-    // … with the quick-action suggestions and the composer.
-    expect(screen.getByText('Summarize this page')).toBeDefined()
-    expect(screen.getByText('Show available tools')).toBeDefined()
-    expect(screen.getByText('Start a new conversation')).toBeDefined()
-    expect(screen.getByPlaceholderText('Ask the agent…')).toBeDefined()
-    expect(screen.getByLabelText('Open command palette')).toBeDefined()
+    // Honest starter prompts (each sends a real message the agent can answer) + the composer.
+    expect(screen.getByText('What can you help me with?')).toBeDefined()
+    expect(screen.getByText('Write a haiku about TypeScript')).toBeDefined()
+    expect(screen.getByPlaceholderText('Message the agent…')).toBeDefined()
+    // `New chat` (reset) is real — no fake cost/token meters or dead History/Settings buttons here.
+    expect(screen.getByLabelText('New chat')).toBeDefined()
   })
 
   it('ChatMessage accepts a UIMessage and renders its message container (auto-dispatch)', () => {

package/templates/default/app/page.tsx

@@ -8,102 +8,55 @@ import {
   AgentStreaming,
   AgentErrorCard,
   QuickActionChips,
-  ContextWindowBar,
   type UIMessage,
   type QuickAction,
 } from '@theokit/ui'
-import { CommandPalette, Avatar, Tooltip, Button, ScrollArea, type CommandItem } from '@usetheo/ui'
-import { Sparkles, Wrench, RotateCcw, Command } from 'lucide-react'
+import { Button, ScrollArea } from '@usetheo/ui'
+import { Plus, Sparkles } from 'lucide-react'
 import { useAgent } from 'theokit/client'
 
 /**
- * Default scaffold — an Agent Surface, composed entirely from TheoUI.
+ * Default scaffold — a working agent chat, composed from TheoUI. Everything here FUNCTIONS: the thread
+ * streams real replies, `New chat` resets, the starter prompts send real messages, and the error card shows
+ * the real error. No fake cost/token meters.
  *
- *   ChatThread / ChatMessage  → conversation (ChatMessage auto-dispatches text,
- *                               tool-call, and reasoning parts of each UIMessage)
- *   AgentStreaming            → streaming indicator
- *   AgentErrorCard            → error display
- *   ChatComposer              → bottom input bar
- *   QuickActionChips          → first-load suggestions
- *   ContextWindowBar          → context usage at top
- *   CommandPalette            → ⌘K quick actions
- *   Avatar / Tooltip          → message faces + icon hints
- *
- * `useAgent` binds to the `agents/chat.ts` endpoint and consumes the ai-sdk `UIMessageStream`. It opens a
- * FRESH stream per send, so `messages` hold only the CURRENT turn (and carry no stable id) — we OWN the
- * transcript: `history` accumulates every finished turn with our own unique ids (`u-N` / `a-N` / `greeting`),
- * and the in-flight reply is shown live until it commits. This keeps the order correct, the history complete,
- * and every id unique. Edit `agents/chat.ts` to pick your model / add tools.
+ * `useAgent` opens a FRESH stream per send — its `messages` hold only the CURRENT turn (with no stable id),
+ * so we OWN the transcript: `history` accumulates each finished turn with our own unique ids, and the
+ * in-flight reply is shown live until it commits (correct order, complete history, unique ids). Edit
+ * `agents/chat.ts` to pick your model / add tools.
  */
 
-const QUICK_ACTIONS: QuickAction[] = [
-  { id: 'summarize', label: 'Summarize this page', icon: Sparkles },
-  { id: 'tools', label: 'Show available tools', icon: Wrench },
-  { id: 'reset', label: 'Start a new conversation', icon: RotateCcw },
-]
-
-const COMMAND_ITEMS: CommandItem[] = QUICK_ACTIONS.map((a) => ({
-  id: a.id,
-  label: a.label,
-  icon: a.icon,
-  group: 'Quick actions',
-}))
-
-// Display-only context-window hint. The agent's real model lives in `agents/chat.ts`
-// (`model: 'openai/gpt-4o-mini'`); wire real token counts from the stream when you need them.
-const CONTEXT_USED = 4_200
-const CONTEXT_TOTAL = 200_000
 const MODEL_NAME = 'gpt-4o-mini'
 
 /** The agent's opening line — so the conversation starts warm instead of empty. */
 const GREETING: UIMessage = {
   id: 'greeting',
   role: 'assistant',
-  parts: [
-    {
-      type: 'text',
-      text: "Hi — I'm your TheoKit agent. Ask me anything and I'll stream a reply. Try a quick action below or type your own.",
-    },
-  ],
+  parts: [{ type: 'text', text: "Hi — I'm your TheoKit agent. Ask me anything and I'll stream a reply." }],
 }
 
-const ASSISTANT_AVATAR = (
-  <Avatar size="sm" tone="primary">
-    <Avatar.Fallback>TH</Avatar.Fallback>
-  </Avatar>
-)
-const USER_AVATAR = (
-  <Avatar size="sm" tone="muted">
-    <Avatar.Fallback>YOU</Avatar.Fallback>
-  </Avatar>
-)
+/** Honest starter prompts — each sends a real message the scaffold agent can actually answer. */
+const STARTERS: QuickAction[] = [
+  { id: 'help', label: 'What can you help me with?', icon: Sparkles },
+  { id: 'haiku', label: 'Write a haiku about TypeScript', icon: Sparkles },
+  { id: 'async', label: 'Explain async/await in one paragraph', icon: Sparkles },
+]
 
 export default function Page() {
   const [composerValue, setComposerValue] = useState('')
-  const [paletteOpen, setPaletteOpen] = useState(false)
   const [history, setHistory] = useState<UIMessage[]>([GREETING])
-  const { messages, send, status, reset } = useAgent<{ message: string }>('/api/agents/chat')
-
-  // ⌘K / Ctrl+K opens the CommandPalette.
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        setPaletteOpen((v) => !v)
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [])
+  const { messages, send, status, reset, error } = useAgent<{ message: string }>('/api/agents/chat')
 
   const isStreaming = status === 'streaming'
+  const hasError = status === 'error'
+
   const users = history.filter((m) => m.role === 'user').length
   const replies = history.filter((m) => m.role === 'assistant' && m.id !== 'greeting').length
   // A sent prompt is still awaiting its committed reply — the current turn is "in flight".
   const pending = users > replies
 
   // Merge the in-flight turn's parts into ONE assistant message with our own unique id (the SDK's ids are
-  // empty, which would collide in the thread). `suffix` distinguishes the live copy from the committed one.
+  // empty, which would collide). `suffix` distinguishes the live copy from the committed one.
   const inflightReply = (suffix: string): UIMessage => ({
     id: `a-${String(replies)}${suffix}`,
     role: 'assistant',
@@ -133,45 +86,30 @@ export default function Page() {
     setComposerValue('')
   }
 
-  function handleQuickAction(id: string) {
-    setPaletteOpen(false)
-    if (id === 'reset') {
-      setHistory([GREETING])
-      reset()
-      return
-    }
-    const action = QUICK_ACTIONS.find((a) => a.id === id)
-    // Quick-action labels are strings; only a string can be sent as a prompt.
-    if (action && typeof action.label === 'string') handleSubmit(action.label)
+  function newChat() {
+    setHistory([GREETING])
+    reset()
+    setComposerValue('')
   }
 
-  const hasError = status === 'error'
-
   return (
     <>
-      <ContextWindowBar
-        used={CONTEXT_USED}
-        total={CONTEXT_TOTAL}
-        trailing={MODEL_NAME}
-        label="Context window"
-        compact
-        className="border-border/60 border-b px-6 py-2"
-      />
-
       <ScrollArea className="flex-1">
         <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-6 py-6">
           <ChatThread>
             {thread.map((message) => (
-              <ChatMessage
-                key={message.id}
-                message={message}
-                avatar={message.role === 'assistant' ? ASSISTANT_AVATAR : USER_AVATAR}
-              />
+              <ChatMessage key={message.id} message={message} />
             ))}
             {isStreaming && <AgentStreaming model={MODEL_NAME} />}
           </ChatThread>
           {onlyGreeting && (
-            <QuickActionChips actions={QUICK_ACTIONS} onSelect={handleQuickAction} />
+            <QuickActionChips
+              actions={STARTERS}
+              onSelect={(id) => {
+                const action = STARTERS.find((s) => s.id === id)
+                if (action && typeof action.label === 'string') handleSubmit(action.label)
+              }}
+            />
           )}
         </div>
       </ScrollArea>
@@ -182,11 +120,11 @@ export default function Page() {
             <div className="mb-3">
               <AgentErrorCard
                 kind="network"
-                title="Stream ended with an error"
-                detail="The connection to the agent endpoint was interrupted. Reset to try again."
+                title="The agent stream ended with an error"
+                detail={error?.message ?? 'Something went wrong. Start a new chat to try again.'}
                 actions={
-                  <Button variant="ghost" size="sm" onClick={() => reset()}>
-                    Reset
+                  <Button variant="ghost" size="sm" onClick={newChat}>
+                    New chat
                   </Button>
                 }
               />
@@ -197,32 +135,22 @@ export default function Page() {
             onValueChange={setComposerValue}
             onSubmit={handleSubmit}
             running={isStreaming}
-            placeholder="Ask the agent…"
+            placeholder="Message the agent…"
             leadingActions={
-              <Tooltip label="Open command palette (⌘K)" side="top">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setPaletteOpen(true)}
-                  aria-label="Open command palette"
-                >
-                  <Command className="size-4" />
-                </Button>
-              </Tooltip>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={newChat}
+                aria-label="New chat"
+                title="New chat"
+              >
+                <Plus className="size-4" />
+              </Button>
             }
           />
         </div>
       </div>
-
-      <CommandPalette
-        open={paletteOpen}
-        onOpenChange={setPaletteOpen}
-        items={COMMAND_ITEMS}
-        onSelect={handleQuickAction}
-        placeholder="Run a command…"
-        emptyMessage="No matching commands."
-      />
     </>
   )
 }

package/templates/default/package.json.tmpl

@@ -15,11 +15,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "theokit": "^0.30.2",
+    "theokit": "^0.30.3",
     "@theokit/agents": "^0.35.2",
     "@theokit/sdk": "^2.13.0",
     "@theokit/ui": "^1.0.0",
     "@usetheo/ui": "^0.14.0",
+    "ai": "^7.0.0",
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",