create-theokit 1.2.5 → 1.2.6

package/package.json

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

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

@@ -1,5 +1,5 @@
 import { Box, Text, useApp, useInput } from 'ink'
-import { useMemo, useState, type ReactElement } from 'react'
+import { useEffect, useState, type ReactElement } from 'react'
 import {
   AgentStreaming,
   AppStatusBar,
@@ -38,11 +38,13 @@ const apiKey = (): string =>
 
 /**
  * M46 — the terminal surface, composed from `@theokit/tui` the way a Claude Code / OpenCode / Codex CLI is:
- * a `WelcomeBanner` header, a scrolling `<ChatThread>`, a live `<AgentStreaming>` indicator, the Claude-Code
- * bordered `<ChatComposer>`, and a persistent `<AppStatusBar>` footer. The agent is driven by the UNIFIED
- * `useAgent` hook (M41). `useAgent` reconstructs only the ASSISTANT turns, so — like the web surface — we
- * track the user's turns locally and INTERLEAVE them, then project the whole thread onto `<ChatThread>` via
- * the `@theokit/tui/ai-sdk` adapter (so both your prompts and the replies show, in order).
+ * `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).
  */
 const transport = new InProcessTransport({
   run: (input) => streamAgentTurnInProcess(chatAgent, apiKey(), input),
@@ -50,24 +52,35 @@ const transport = new InProcessTransport({
 
 export function App(): ReactElement {
   const agent = useAgent<{ message: string }>(transport)
-  const [userMessages, setUserMessages] = useState<UIMessage[]>([])
   const streaming = agent.status === 'streaming'
   const elapsed = useTurnElapsed(streaming)
   const { exit } = useApp()
 
-  // Interleave local user turns with the reconstructed assistant turns (mirrors the web surface), after the
-  // opening greeting — so the full conversation history renders, your prompt included.
-  const thread = useMemo<UIMessage[]>(() => {
-    const out: UIMessage[] = [GREETING]
-    const turns = Math.max(userMessages.length, agent.messages.length)
-    for (let i = 0; i < turns; i++) {
-      const user = userMessages[i]
-      const assistant = agent.messages[i]
-      if (user !== undefined) out.push(user)
-      if (assistant !== undefined) out.push(assistant)
+  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('')])
     }
-    return out
-  }, [userMessages, agent.messages])
+    // 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
 
   // Esc cancels a running turn, or quits when idle (the Claude Code affordance).
   useInput((_input, key) => {
@@ -80,13 +93,13 @@ export function App(): ReactElement {
     const trimmed = text.trim()
     if (trimmed.length === 0) return
     if (trimmed === '/clear') {
-      setUserMessages([])
+      setHistory([GREETING])
       agent.reset()
       return
     }
-    setUserMessages((prev) => [
-      ...prev,
-      { id: `u-${String(prev.length)}`, role: 'user', parts: [{ type: 'text', text: trimmed }] },
+    setHistory((h) => [
+      ...h,
+      { id: `u-${String(h.length)}`, role: 'user', parts: [{ type: 'text', text: trimmed }] },
     ])
     agent.send({ message: trimmed })
   }