@kidsinai/kids-client 0.0.21 → 0.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@kidsinai/kids-client",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "type": "module",
   "description": "Own-client TUI for Kids OpenCode — talks to local `opencode serve` via @opencode-ai/sdk v2 with kid-warm rendering, mission progress, permission dialog, and stderr-tail audit pipeline.",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
     "react": "^18.3.1",
-    "@kidsinai/kids-opencode-plugin": "^0.0.21"
+    "@kidsinai/kids-opencode-plugin": "^0.0.22"
   },
   "devDependencies": {
     "@opencode-ai/sdk": "^1.14.51",

package/src/render/ink/components/ChatStream.tsx

@@ -1,14 +1,22 @@
 import React from "react"
 import { Box, Static, Text } from "ink"
 import { getTheme } from "../theme.ts"
+import { MessageBody } from "./MessageBody.tsx"
 import type { ChatMessage } from "../../../core/store.ts"
 
 interface ChatStreamProps {
   messages: ChatMessage[]
 }
 
-export function ChatStream({ messages }: ChatStreamProps): React.ReactElement {
+/** Agent text gets markdown/code rendering; kid + system stay plain. */
+function MessageText({ m }: { m: ChatMessage }): React.ReactElement {
   const theme = getTheme()
+  const color = colorFor(m.actor, theme)
+  if (m.actor === "agent") return <MessageBody text={m.text || " "} color={color} />
+  return <Text color={color}>{m.text || " "}</Text>
+}
+
+export function ChatStream({ messages }: ChatStreamProps): React.ReactElement {
   if (messages.length === 0) return <Box />
   // Settled messages go into <Static> so Ink doesn't re-render the entire
   // history every delta. The active streaming message (if any) renders
@@ -22,7 +30,7 @@ export function ChatStream({ messages }: ChatStreamProps): React.ReactElement {
           <Box key={m.id} flexDirection="row" marginBottom={1}>
             <ActorBadge actor={m.actor} />
             <Box flexDirection="column" flexGrow={1}>
-              <Text color={colorFor(m.actor, theme)}>{m.text || " "}</Text>
+              <MessageText m={m} />
             </Box>
           </Box>
         )}
@@ -31,7 +39,7 @@ export function ChatStream({ messages }: ChatStreamProps): React.ReactElement {
         <Box flexDirection="row" marginBottom={1}>
           <ActorBadge actor={active.actor} />
           <Box flexDirection="column" flexGrow={1}>
-            <Text color={colorFor(active.actor, theme)}>{active.text || " "}</Text>
+            <MessageText m={active} />
           </Box>
         </Box>
       )}

package/src/render/ink/components/MessageBody.tsx

@@ -0,0 +1,99 @@
+/**
+ * Lightweight markdown-ish renderer for the AI's chat messages — no heavy dep.
+ * Handles the things a kid actually sees from a coding mentor:
+ *   - fenced ```code``` blocks (incl. an unterminated one while streaming)
+ *   - headings (#, ##), bullet lists (-, *), and inline **bold** / `code`
+ * Everything else renders as plain wrapped text. Kid/system messages stay plain
+ * (they don't author markdown); only agent text is enriched.
+ */
+
+import React from "react"
+import { Box, Text } from "ink"
+import { getTheme } from "../theme.ts"
+
+type Theme = ReturnType<typeof getTheme>
+
+export interface Block {
+  type: "code" | "text"
+  /** code language label (may be ""); unused for text blocks. */
+  lang?: string
+  content: string
+}
+
+/** Split message text into fenced-code vs prose blocks. */
+export function splitBlocks(text: string): Block[] {
+  const lines = text.split("\n")
+  const blocks: Block[] = []
+  let mode: "text" | "code" = "text"
+  let buf: string[] = []
+  let lang = ""
+  const flush = (type: "code" | "text"): void => {
+    if (buf.length === 0 && type === "text") return
+    blocks.push({ type, lang: type === "code" ? lang : undefined, content: buf.join("\n") })
+    buf = []
+  }
+  for (const line of lines) {
+    const fence = line.match(/^```(\w*)\s*$/)
+    if (fence) {
+      if (mode === "text") { flush("text"); mode = "code"; lang = fence[1] ?? "" }
+      else { flush("code"); mode = "text"; lang = "" }
+      continue
+    }
+    buf.push(line)
+  }
+  // Unterminated fence while streaming → keep what we have as a code block.
+  flush(mode)
+  return blocks
+}
+
+/** Parse inline **bold** and `code` into Ink <Text> spans. */
+export function renderInline(line: string, theme: Theme, keyPrefix: string): React.ReactNode[] {
+  const out: React.ReactNode[] = []
+  const re = /(\*\*([^*]+)\*\*|`([^`]+)`)/g
+  let last = 0
+  let m: RegExpExecArray | null
+  let i = 0
+  while ((m = re.exec(line)) !== null) {
+    if (m.index > last) out.push(<Text key={`${keyPrefix}-t${i}`}>{line.slice(last, m.index)}</Text>)
+    if (m[2] !== undefined) out.push(<Text key={`${keyPrefix}-b${i}`} bold>{m[2]}</Text>)
+    else if (m[3] !== undefined) out.push(<Text key={`${keyPrefix}-c${i}`} color={theme.accent}>{m[3]}</Text>)
+    last = m.index + m[0].length
+    i++
+  }
+  if (last < line.length) out.push(<Text key={`${keyPrefix}-t${i}`}>{line.slice(last)}</Text>)
+  if (out.length === 0) out.push(<Text key={`${keyPrefix}-empty`}> </Text>)
+  return out
+}
+
+export function MessageBody({ text, color }: { text: string; color: string }): React.ReactElement {
+  const theme = getTheme()
+  const blocks = splitBlocks(text)
+  return (
+    <Box flexDirection="column">
+      {blocks.map((b, bi) => {
+        if (b.type === "code") {
+          return (
+            <Box key={`code-${bi}`} flexDirection="column" borderStyle="round" borderColor={theme.fgDim} paddingX={1}>
+              {b.lang ? <Text color={theme.fgDim} dimColor>{b.lang}</Text> : null}
+              {(b.content || " ").split("\n").map((l, li) => (
+                <Text key={li} color={theme.success}>{l || " "}</Text>
+              ))}
+            </Box>
+          )
+        }
+        return (
+          <Box key={`text-${bi}`} flexDirection="column">
+            {b.content.split("\n").map((line, li) => {
+              const key = `${bi}-${li}`
+              const heading = line.match(/^(#{1,3})\s+(.*)$/)
+              if (heading) return <Text key={key} color={theme.accent} bold>{heading[2]}</Text>
+              const bullet = line.match(/^\s*[-*]\s+(.*)$/)
+              if (bullet) return <Text key={key} color={color}>{"• "}{renderInline(bullet[1] ?? "", theme, key)}</Text>
+              return <Text key={key} color={color}>{renderInline(line, theme, key)}</Text>
+            })}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}