create-theokit 1.0.16 → 1.0.17

package/package.json

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

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

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { ChatThread, ChatMessage, type UIMessage } from '@theokit/ui'
+import Page from './page'
+
+/**
+ * Guards the chat page against `@theokit/ui` API drift (issue #80): a fresh scaffold
+ * must both type-check AND render. Renders the real React tree in jsdom.
+ */
+describe('default chat page', () => {
+  it('renders the empty state + quick actions + composer on first load', () => {
+    render(<Page />)
+    expect(screen.getByText('What should we build today?')).toBeDefined()
+    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()
+  })
+
+  it('ChatMessage accepts a UIMessage and renders its message container (auto-dispatch)', () => {
+    const assistant: UIMessage = {
+      id: 'a-0',
+      role: 'assistant',
+      parts: [{ type: 'text', text: 'Reading src/index.ts', state: 'done' }],
+    }
+    const { container } = render(
+      <ChatThread>
+        <ChatMessage message={assistant} />
+      </ChatThread>,
+    )
+    expect(container.querySelector('[data-slot="chat-message"]')).not.toBeNull()
+    expect(container.querySelector('[data-theo-chat-message="assistant"]')).not.toBeNull()
+  })
+})

package/templates/default/app/page.tsx

@@ -5,14 +5,12 @@ import {
   ChatThread,
   ChatMessage,
   ChatComposer,
-  ToolCallCard,
   AgentStreaming,
   AgentErrorCard,
   QuickActionChips,
   ContextWindowBar,
-  type Message,
+  type UIMessage,
   type QuickAction,
-  type ToolCallStatus,
 } from '@theokit/ui'
 import {
   EmptyState,
@@ -29,35 +27,23 @@ import { useAgent } from 'theokit/client'
 /**
  * Default scaffold — an Agent Surface, composed entirely from TheoUI.
  *
- *   ChatThread / ChatMessage  → conversation
- *   ToolCallCard              → expandable tool invocations
+ *   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
  *   EmptyState                → first-load screen
  *   ContextWindowBar          → context usage at top
  *   CommandPalette            → ⌘K quick actions
- *   Avatar                    → assistant face in messages
+ *   Avatar                    → assistant/user face in messages
  *   Tooltip                   → hints on icons
  *
  * `useAgent` binds to the `agents/chat.ts` endpoint, consumes the ai-sdk
  * `UIMessageStream`, and handles AbortController cleanup + StrictMode safety.
- * Edit `agents/chat.ts` to pick your model / add tools.
+ * `messages` are the reconstructed ASSISTANT `UIMessage[]`; user turns are tracked
+ * locally and interleaved. Edit `agents/chat.ts` to pick your model / add tools.
  */
 
-type ConversationItem =
-  | { kind: 'message'; id: string; role: 'user' | 'assistant'; content: string; timestamp: string }
-  | {
-      kind: 'tool'
-      id: string
-      tool: string
-      target?: string
-      status: ToolCallStatus
-      output?: string
-      timestamp: string
-    }
-  | { kind: 'error'; id: string; message: string; timestamp: string }
-
 const QUICK_ACTIONS: QuickAction[] = [
   { id: 'summarize', label: 'Summarize this page', icon: Sparkles },
   { id: 'tools', label: 'Show available tools', icon: Wrench },
@@ -90,7 +76,7 @@ const USER_AVATAR = (
 
 export default function Page() {
   const [composerValue, setComposerValue] = useState('')
-  const [userMessages, setUserMessages] = useState<ConversationItem[]>([])
+  const [userMessages, setUserMessages] = useState<UIMessage[]>([])
   const [paletteOpen, setPaletteOpen] = useState(false)
   const { messages, send, status, reset } = useAgent<{ message: string }>('/api/agents/chat')
 
@@ -106,64 +92,29 @@ export default function Page() {
     return () => window.removeEventListener('keydown', onKey)
   }, [])
 
-  // Derive the conversation view from the reconstructed assistant UIMessages
-  // (ai-sdk `UIMessageStream`): text parts → messages, tool parts → tool cards.
-  const items = useMemo<ConversationItem[]>(() => {
-    const ts = new Date().toISOString()
-    const agentItems: ConversationItem[] = []
-    for (const message of messages) {
-      if (message.role !== 'assistant') continue
-      message.parts.forEach((part, i) => {
-        const id = `${message.id}-${i}`
-        if (part.type === 'text') {
-          agentItems.push({
-            kind: 'message',
-            id,
-            role: 'assistant',
-            content: part.text,
-            timestamp: ts,
-          })
-        } else if (part.type === 'dynamic-tool') {
-          agentItems.push({
-            kind: 'tool',
-            id,
-            tool: part.toolName,
-            target:
-              part.input && typeof part.input === 'object'
-                ? Object.entries(part.input as Record<string, unknown>)
-                    .map(([k, v]) => `${k}=${JSON.stringify(v)}`)
-                    .join(' ')
-                : undefined,
-            status:
-              part.state === 'output-available'
-                ? 'success'
-                : part.state === 'output-error'
-                  ? 'error'
-                  : 'running',
-            output:
-              part.state === 'output-available'
-                ? typeof part.output === 'string'
-                  ? part.output
-                  : JSON.stringify(part.output, null, 2)
-                : part.state === 'output-error'
-                  ? part.errorText
-                  : undefined,
-            timestamp: ts,
-          })
-        }
-      })
+  // Interleave local user turns with the reconstructed assistant UIMessages,
+  // turn by turn. `ChatMessage` renders each message's parts (text/tool/reasoning).
+  const thread = useMemo<UIMessage[]>(() => {
+    const out: UIMessage[] = []
+    const turns = Math.max(userMessages.length, messages.length)
+    for (let i = 0; i < turns; i++) {
+      const user = userMessages[i]
+      const assistant = messages[i]
+      if (user) out.push(user)
+      if (assistant) out.push(assistant)
     }
-    return [...userMessages, ...agentItems]
+    return out
   }, [userMessages, messages])
 
   function handleSubmit(value: string) {
     const trimmed = value.trim()
     if (!trimmed) return
-    const id = `u-${userMessages.length}`
-    setUserMessages((prev) => [
-      ...prev,
-      { kind: 'message', id, role: 'user', content: trimmed, timestamp: new Date().toISOString() },
-    ])
+    const userMessage: UIMessage = {
+      id: `u-${String(userMessages.length)}`,
+      role: 'user',
+      parts: [{ type: 'text', text: trimmed }],
+    }
+    setUserMessages((prev) => [...prev, userMessage])
     send({ message: trimmed })
     setComposerValue('')
   }
@@ -176,11 +127,12 @@ export default function Page() {
       return
     }
     const action = QUICK_ACTIONS.find((a) => a.id === id)
-    if (action) handleSubmit(action.label)
+    // Quick-action labels are strings; only a string can be sent as a prompt.
+    if (action && typeof action.label === 'string') handleSubmit(action.label)
   }
 
   const isStreaming = status === 'streaming'
-  const isEmpty = items.length === 0 && !isStreaming
+  const isEmpty = thread.length === 0 && !isStreaming
   const hasError = status === 'error'
 
   return (
@@ -206,45 +158,13 @@ export default function Page() {
             />
           ) : (
             <ChatThread>
-              {items.map((item) => {
-                if (item.kind === 'message') {
-                  const message: Message = {
-                    id: item.id,
-                    role: item.role,
-                    content: item.content,
-                    timestamp: item.timestamp,
-                    model: item.role === 'assistant' ? MODEL_NAME : undefined,
-                  }
-                  return (
-                    <ChatMessage
-                      key={item.id}
-                      message={message}
-                      avatar={item.role === 'assistant' ? ASSISTANT_AVATAR : USER_AVATAR}
-                    />
-                  )
-                }
-                if (item.kind === 'tool') {
-                  return (
-                    <ToolCallCard
-                      key={item.id}
-                      tool={item.tool}
-                      icon={Wrench}
-                      target={item.target}
-                      status={item.status}
-                      output={item.output}
-                      timestamp={item.timestamp}
-                    />
-                  )
-                }
-                return (
-                  <AgentErrorCard
-                    key={item.id}
-                    kind="model"
-                    title="Agent error"
-                    description={item.message}
-                  />
-                )
-              })}
+              {thread.map((message) => (
+                <ChatMessage
+                  key={message.id}
+                  message={message}
+                  avatar={message.role === 'assistant' ? ASSISTANT_AVATAR : USER_AVATAR}
+                />
+              ))}
               {isStreaming && <AgentStreaming model={MODEL_NAME} />}
             </ChatThread>
           )}
@@ -258,8 +178,8 @@ export default function Page() {
               <AgentErrorCard
                 kind="network"
                 title="Stream ended with an error"
-                description="The connection to the agent endpoint was interrupted. Reset to try again."
-                action={
+                detail="The connection to the agent endpoint was interrupted. Reset to try again."
+                actions={
                   <Button variant="ghost" size="sm" onClick={() => reset()}>
                     Reset
                   </Button>

package/templates/default/dot-claude/skills/theokit-agents/SKILL.md

@@ -72,8 +72,8 @@ import { z } from 'zod'
 const currentTimeTool = defineAgentTool({
   name: 'current_time',
   description: 'Return the current ISO timestamp',
-  input: z.object({}),
-  execute: async () => ({ time: new Date().toISOString() }),
+  inputSchema: z.object({}),
+  handler: async () => new Date().toISOString(),
 })
 
 export default defineAgent({
@@ -157,7 +157,7 @@ Before writing custom tools, check if they already exist:
 | Package | What it provides | When to use |
 |---------|-----------------|-------------|
 | `@theokit/sdk` | `Agent.create()`, `defineTool()` (primitive), `Run.stream()` | Core agent runtime — always installed |
-| `@theokit/sdk-tools` | Ready-made tools: `createReadFileTool`, `createWriteFileTool`, `createSearchTool`, etc. | **Check here FIRST** before writing custom tools for coding agents |
+| `@theokit/sdk-tools` | Ready-made tools: `createReadFileTool`, `createWriteFileTool`, `createSearchTextTool`, `createGlobTool`, `createShellTool`, etc. | **Check here FIRST** before writing custom tools for coding agents |
 | `@theokit/di-agent` | DI-powered agent with decorator injection | When using dependency injection pattern |
 | `@theokit/di` | Core DI container (`@Injectable`, `@Inject`) | When `@theokit/di-agent` needs explicit bindings |
 

package/templates/default/package.json.tmpl

@@ -15,8 +15,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "theokit": "^0.15.1",
-    "@theokit/agents": "^0.30.1",
+    "theokit": "^0.15.2",
+    "@theokit/agents": "^0.30.2",
     "@theokit/sdk": "^2.13.0",
     "@theokit/ui": "^1.0.0",
     "@usetheo/ui": "^0.14.0",
@@ -27,8 +27,11 @@
     "zod": "^4.0.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.0",
     "tailwindcss": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "eslint": "^9.0.0",

package/templates/default/tsconfig.json

@@ -9,7 +9,9 @@
     "skipLibCheck": true,
     "jsx": "react-jsx",
     "isolatedModules": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   },
   "include": ["app/**/*.ts", "app/**/*.tsx", "server/**/*.ts", "agents/**/*.ts"]
 }