create-theokit 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-theokit",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "description": "Scaffold a new TheoKit project",
   "license": "Apache-2.0",
@@ -15,7 +15,7 @@
     "cross-spawn": "^7.0.6"
   },
   "publishConfig": {
-    "provenance": true,
+    "provenance": false,
     "access": "public"
   },
   "engines": {

package/templates/default/app/hooks/use-transcript.test.ts

@@ -1,12 +1,22 @@
 // @vitest-environment jsdom
 import { act, renderHook } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
+import type { UIMessage } from 'ai'
 
-// Mock the agent client so the hook's transcript logic is tested deterministically (no real stream).
+// Mock the agent client. Since M46 the store owns the conversation `thread`; the hook is a thin
+// projection, so we drive the mock's `thread`/`status` and assert the hook maps + delegates correctly.
 const send = vi.fn()
 const resetAgent = vi.fn()
+let agentThread: UIMessage[] = []
+let agentStatus = 'idle'
 vi.mock('theokit/client', () => ({
-  useAgent: () => ({ messages: [], send, status: 'idle', reset: resetAgent, error: undefined }),
+  useAgent: () => ({
+    thread: agentThread,
+    send,
+    status: agentStatus,
+    reset: resetAgent,
+    error: undefined,
+  }),
 }))
 
 const { useChatTranscript } = await import('./use-transcript')
@@ -17,29 +27,45 @@ function textOf(part: unknown): string {
 
 describe('useChatTranscript', () => {
   it('starts warm — the thread is just the greeting, and onlyGreeting is true', () => {
+    agentThread = []
+    agentStatus = 'idle'
     const { result } = renderHook(() => useChatTranscript())
     expect(result.current.thread).toHaveLength(1)
     expect(result.current.thread[0].id).toBe('greeting')
     expect(result.current.onlyGreeting).toBe(true)
   })
 
-  it('sendMessage appends the user message and starts an agent turn', () => {
+  it('sendMessage delegates to the store (which owns appending the user turn)', () => {
+    agentThread = []
+    agentStatus = 'idle'
     const { result } = renderHook(() => useChatTranscript())
     act(() => result.current.sendMessage('hello'))
-    const last = result.current.thread[result.current.thread.length - 1]
-    expect(last.role).toBe('user')
-    expect(textOf(last.parts[0])).toBe('hello')
     expect(send).toHaveBeenCalledWith({ message: 'hello' })
-    // A user message means the greeting is no longer alone.
+  })
+
+  it('projects the store thread after the greeting; onlyGreeting is false once a turn exists', () => {
+    agentThread = [
+      { id: 'u-0', role: 'user', parts: [{ type: 'text', text: 'hi' }] },
+      { id: 'a-0', role: 'assistant', parts: [{ type: 'text', text: 'hello there' }] },
+    ]
+    agentStatus = 'done'
+    const { result } = renderHook(() => useChatTranscript())
+    expect(result.current.thread).toHaveLength(3) // greeting + user + assistant
+    expect(result.current.thread[0].id).toBe('greeting')
+    const last = result.current.thread[2]
+    expect(last.role).toBe('assistant')
+    expect(textOf(last.parts[0])).toBe('hello there')
     expect(result.current.onlyGreeting).toBe(false)
   })
 
-  it('reset clears the transcript back to the greeting and cancels the stream', () => {
+  it('reset delegates to the store reset and the transcript returns to the greeting', () => {
+    // After reset the store yields an empty thread; the hook must project back to just the greeting.
+    agentThread = []
+    agentStatus = 'idle'
     const { result } = renderHook(() => useChatTranscript())
-    act(() => result.current.sendMessage('hi'))
     act(() => result.current.reset())
+    expect(resetAgent).toHaveBeenCalled()
     expect(result.current.thread).toHaveLength(1)
     expect(result.current.thread[0].id).toBe('greeting')
-    expect(resetAgent).toHaveBeenCalled()
   })
 })

package/templates/default/app/hooks/use-transcript.ts

@@ -1,23 +1,18 @@
 'use client'
 
 import { type UIMessage } from '@theokit/ui'
-import { useEffect, useState } from 'react'
 import { useAgent } from 'theokit/client'
 
 import { GREETING } from '../lib/constants'
 
 /**
- * Owns the chat transcript — the subtle part of an agent UI, so it lives in a hook, not the view. This is
- * the convergent pattern across AI chat frontends (Vercel ai-chatbot's `use-active-chat`, the AI SDK docs):
- * transcript + streaming state in a hook; the page + components stay presentational.
- *
- * Why a hook is needed: `useAgent` opens a FRESH stream per send, so its `messages` hold only the CURRENT
- * turn (with no stable id). We OWN the full transcript here — `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 keys.
+ * Owns the chat transcript for the view. Since M46, the framework's client store accumulates the full
+ * conversation `thread` (committed turns + the in-flight streaming reply, with stable ids), so this hook
+ * is a thin projection: prepend the warm greeting and map status to the flags the UI reads. The 88-line
+ * hand-rolled transcript (local history + commit-once effect + inflight-merge) is gone — the store owns it.
  */
 export interface ChatTranscript {
-  /** The full transcript to render (committed history + the in-flight reply while streaming). */
+  /** The full transcript to render (greeting + committed history + the in-flight reply while streaming). */
   thread: UIMessage[]
   isStreaming: boolean
   hasError: boolean
@@ -31,58 +26,14 @@ export interface ChatTranscript {
 }
 
 export function useChatTranscript(): ChatTranscript {
-  const [history, setHistory] = useState<UIMessage[]>([GREETING])
-  const {
-    messages,
-    send,
-    status,
-    reset: resetAgent,
-    error,
-  } = useAgent<{ message: string }>('/api/agents/chat')
-
-  const isStreaming = status === 'streaming'
-  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). `suffix` distinguishes the live copy from the committed one.
-  const inflightReply = (suffix: string): UIMessage => ({
-    id: `a-${String(replies)}${suffix}`,
-    role: 'assistant',
-    parts: messages.flatMap((m) => m.parts),
-  })
-
-  // Commit the finished reply into history exactly once (the next send resets `messages`). Deps are the
-  // stream-transition inputs; `inflightReply` is deliberately NOT a dep — it's a fresh closure each render
-  // that would re-fire the effect, and it only reads `messages`/`replies`, which ARE deps. (If you enable
-  // the `react-hooks/exhaustive-deps` lint rule, add an eslint-disable for this line.)
-  useEffect(() => {
-    if (!isStreaming && pending && messages.length > 0) {
-      setHistory((h) => [...h, inflightReply('')])
-    }
-  }, [isStreaming, pending, messages, replies])
-
-  // Transcript = committed history + the in-flight reply (shown until it commits — no flicker, no double).
-  const thread = pending && messages.length > 0 ? [...history, inflightReply('-live')] : history
-
+  const { thread, send, status, reset, error } = useAgent<{ message: string }>('/api/agents/chat')
   return {
-    thread,
-    isStreaming,
+    thread: [GREETING, ...thread],
+    isStreaming: status === 'streaming',
     hasError: status === 'error',
     error,
-    onlyGreeting: history.length === 1 && !isStreaming,
-    sendMessage(text) {
-      setHistory((h) => [
-        ...h,
-        { id: `u-${String(h.length)}`, role: 'user', parts: [{ type: 'text', text }] },
-      ])
-      send({ message: text })
-    },
-    reset() {
-      setHistory([GREETING])
-      resetAgent()
-    },
+    onlyGreeting: thread.length === 0 && status !== 'streaming',
+    sendMessage: (text) => send({ message: text }),
+    reset,
   }
 }

package/templates/default/package.json.tmpl

@@ -15,7 +15,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "theokit": "^0.36.0",
+    "theokit": "^0.38.0",
     "@theokit/agents": "^0.38.0",
     "@theokit/sdk": "^2.25.0",
     "@theokit/ui": "^1.0.0",

package/templates/surfaces/desktop/frontend/src/App.tsx.tmpl

@@ -1,4 +1,4 @@
-import { useEffect, useState, type CSSProperties, type ReactElement } from 'react'
+import { useState, type CSSProperties, type ReactElement } from 'react'
 import {
   ChatThread,
   ChatMessage,
@@ -92,50 +92,23 @@ const styles = {
 
 export function App(): ReactElement {
   const [composerValue, setComposerValue] = useState('')
-  const [history, setHistory] = useState<UIMessage[]>([GREETING])
-  const { messages, send, status, reset, error } = useAgent<{ message: string }>(transport)
+  const { thread: agentThread, send, status, reset, error } = useAgent<{ message: string }>(transport)
 
   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). `suffix` distinguishes the live copy from the committed one.
-  const inflightReply = (suffix: string): UIMessage => ({
-    id: `a-${String(replies)}${suffix}`,
-    role: 'assistant',
-    parts: messages.flatMap((m) => m.parts),
-  })
-
-  // Commit the finished reply into history exactly once (the next send resets `messages`).
-  useEffect(() => {
-    if (!isStreaming && pending && messages.length > 0) {
-      setHistory((h) => [...h, inflightReply('')])
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isStreaming, pending, messages, replies])
-
-  // Transcript = committed history + the in-flight reply (shown until it commits — no flicker, no double).
-  const thread = pending && messages.length > 0 ? [...history, inflightReply('-live')] : history
-  const onlyGreeting = history.length === 1 && !isStreaming
+  // The store owns the conversation (M46) — prepend the warm greeting and render.
+  const thread = [GREETING, ...agentThread]
+  const onlyGreeting = agentThread.length === 0 && !isStreaming
 
   function handleSubmit(value: string): void {
     const trimmed = value.trim()
     if (trimmed.length === 0) return
-    setHistory((h) => [
-      ...h,
-      { id: `u-${String(h.length)}`, role: 'user', parts: [{ type: 'text', text: trimmed }] },
-    ])
     send({ message: trimmed })
     setComposerValue('')
   }
 
   function newChat(): void {
-    setHistory([GREETING])
     reset()
     setComposerValue('')
   }

package/templates/surfaces/tui/tui/App.tsx.tmpl

@@ -1,5 +1,5 @@
 import { Box, Text, useApp, useInput } from 'ink'
-import { useEffect, useState, type ReactElement } from 'react'
+import { type ReactElement } from 'react'
 import {
   AgentStreaming,
   AppStatusBar,
@@ -42,10 +42,9 @@ const apiKey = (): string =>
  * `WelcomeBanner` header, scrolling `<ChatThread>`, live `<AgentStreaming>`, bordered `<ChatComposer>`, and a
  * persistent `<AppStatusBar>` footer. Driven by the unified `useAgent` hook (M41).
  *
- * `useAgent` opens a FRESH stream per send — its `messages` hold only the CURRENT turn (and the SDK assigns
- * them no stable id), so we OWN the transcript: `history` accumulates every finished turn with our own unique
- * ids (`u-N` / `a-N`), and the in-flight reply is shown live until it commits. This keeps the order correct,
- * the history complete, and every id unique (ChatThread rejects duplicates).
+ * The full conversation comes straight from `useAgent().thread` (M46): the client store accumulates every
+ * finished turn plus the in-flight streaming reply, with stable ids — so no hand-rolled history/commit-once
+ * here. Prepend the warm `GREETING` and render.
  */
 const transport = new InProcessTransport({
   run: (input) => streamAgentTurnInProcess(chatAgent, apiKey(), input),
@@ -57,31 +56,8 @@ export function App(): ReactElement {
   const elapsed = useTurnElapsed(streaming)
   const { exit } = useApp()
 
-  const [history, setHistory] = useState<UIMessage[]>([GREETING])
-
-  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.
-  const inflightReply = (suffix: string): UIMessage => ({
-    id: `a-${String(replies)}${suffix}`,
-    role: 'assistant',
-    parts: agent.messages.flatMap((m) => m.parts),
-  })
-
-  // Commit the finished reply into history exactly once (the next send resets `agent.messages`).
-  useEffect(() => {
-    if (!streaming && pending && agent.messages.length > 0) {
-      setHistory((h) => [...h, inflightReply('')])
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [streaming, pending, agent.messages, replies])
-
-  // Transcript = committed history + the in-flight reply (shown until it commits — no flicker, no double).
-  const thread = pending && agent.messages.length > 0 ? [...history, inflightReply('-live')] : history
+  // The store owns the conversation (M46) — prepend the warm greeting and render.
+  const thread = [GREETING, ...agent.thread]
 
   // Esc cancels a running turn, or quits when idle (the Claude Code affordance).
   useInput((_input, key) => {
@@ -94,14 +70,9 @@ export function App(): ReactElement {
     const trimmed = text.trim()
     if (trimmed.length === 0) return
     if (trimmed === '/clear') {
-      setHistory([GREETING])
       agent.reset()
       return
     }
-    setHistory((h) => [
-      ...h,
-      { id: `u-${String(h.length)}`, role: 'user', parts: [{ type: 'text', text: trimmed }] },
-    ])
     agent.send({ message: trimmed })
   }