create-theokit 1.2.4 → 1.2.6

package/package.json

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

package/templates/default/package.json.tmpl

@@ -15,7 +15,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "theokit": "^0.30.1",
+    "theokit": "^0.30.2",
     "@theokit/agents": "^0.35.2",
     "@theokit/sdk": "^2.13.0",
     "@theokit/ui": "^1.0.0",

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

@@ -1,5 +1,5 @@
 import { Box, Text, useApp, useInput } from 'ink'
-import { type ReactElement } from 'react'
+import { useEffect, useState, type ReactElement } from 'react'
 import {
   AgentStreaming,
   AppStatusBar,
@@ -10,6 +10,7 @@ import {
   WelcomeBanner,
 } from '@theokit/tui'
 import { uiMessagesToChatThread } from '@theokit/tui/ai-sdk'
+import type { UIMessage } from 'ai'
 import { InProcessTransport, useAgent } from 'theokit/client'
 import { streamAgentTurnInProcess } from 'theokit/server/agent'
 
@@ -19,17 +20,31 @@ import * as chatAgent from '../agents/chat.js'
 const MODEL = 'openai/gpt-4o-mini'
 const CWD = process.cwd()
 
+/** The agent's opening line — so the conversation starts warm instead of empty (like a coding-agent CLI). */
+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. Type below and press Enter · /clear resets · esc cancels.",
+    },
+  ],
+}
+
 /** Resolve the provider key from the environment (OpenRouter / Anthropic / OpenAI). */
 const apiKey = (): string =>
   process.env.OPENROUTER_API_KEY ?? process.env.ANTHROPIC_API_KEY ?? process.env.OPENAI_API_KEY ?? ''
 
 /**
  * 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>` (slash-commands, `@` file mentions, Alt+Enter newline — all shipped), and a
- * persistent `<AppStatusBar>` footer (model · cwd · state). The agent is driven by the UNIFIED `useAgent`
- * hook (M41) over the in-process seam — its `UIMessage[]` projected onto `<ChatThread>` by the
- * `@theokit/tui/ai-sdk` adapter. We compose shipped primitives: no hand-rolled input, no bespoke reader.
+ * `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),
@@ -41,6 +56,32 @@ 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
+
   // Esc cancels a running turn, or quits when idle (the Claude Code affordance).
   useInput((_input, key) => {
     if (!key.escape) return
@@ -52,9 +93,14 @@ 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 })
   }
 
@@ -69,7 +115,7 @@ export function App(): ReactElement {
           <Text dimColor>cwd: {CWD}</Text>
         </WelcomeBanner>
 
-        <ChatThread messages={uiMessagesToChatThread(agent.messages)} />
+        <ChatThread messages={uiMessagesToChatThread(thread)} />
 
         {streaming ? <AgentStreaming thought="Thinking…" elapsedSeconds={elapsed} showCancelHint /> : null}
         {agent.error ? <Text color="red">⚠ {agent.error.message}</Text> : null}