@kidsinai/kids-client 0.0.1

package/src/render/ink/screens/MissionScreen.tsx

@@ -0,0 +1,85 @@
+/**
+ * §3.2 Mission-in-progress screen.
+ *
+ * Layout: Header (mission progress + Stars) on top, chat stream in the
+ * middle, input box at the bottom, optional Toast under that. Streaming
+ * AI replies render in-place via ChatStream's <Static>/live split.
+ *
+ * Esc key while thinking → calls onAbort (wired by App-level to
+ * client.session.abort()).
+ */
+
+import React, { useState } from "react"
+import { Box, Text, useInput } from "ink"
+import { Header } from "../components/Header.tsx"
+import { ChatStream } from "../components/ChatStream.tsx"
+import { Input } from "../components/Input.tsx"
+import { Thinking } from "../components/Thinking.tsx"
+import { Toast } from "../components/Toast.tsx"
+import { getTheme } from "../theme.ts"
+import type { KidsClientState } from "../../../core/store.ts"
+
+interface MissionScreenProps {
+  state: KidsClientState
+  locale: "zh-Hans" | "en"
+  onPrompt: (text: string) => void
+  onAbort: () => void
+}
+
+export function MissionScreen({ state, locale, onPrompt, onAbort }: MissionScreenProps): React.ReactElement {
+  const theme = getTheme()
+  const [draft, setDraft] = useState("")
+  const placeholder = locale === "zh-Hans" ? "想做什么？告诉我吧（中文/英文都行）" : "What would you like to make? (English or Chinese)"
+
+  useInput((_, key) => {
+    if (key.escape && state.thinking) onAbort()
+  })
+
+  const hint = locale === "zh-Hans"
+    ? "提示：做完一关时打 /check 或「我做完了」就能验收 · 按 Esc 打断 AI"
+    : "Tip: type /check or 'I'm done' to validate · Esc interrupts the AI"
+
+  return (
+    <Box flexDirection="column">
+      <Header
+        packTitle={state.packTitle}
+        missionTitle={state.missionTitle}
+        missionIndex={state.missionIndex}
+        missionTotal={state.missionTotal}
+        starsBalance={state.starsBalance}
+        starsBudget={state.starsBudget}
+      />
+      <Box marginTop={1} flexDirection="column" flexGrow={1}>
+        <ChatStream messages={state.messages} />
+        {state.thinking && (
+          <Box marginTop={1}>
+            <Thinking locale={locale} />
+          </Box>
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Input
+          value={draft}
+          onChange={setDraft}
+          onSubmit={(v) => {
+            const text = v.trim()
+            if (!text) return
+            setDraft("")
+            onPrompt(text)
+          }}
+          placeholder={placeholder}
+          disabled={state.thinking || state.pendingPermission !== null}
+        />
+      </Box>
+      {state.toast ? (
+        <Box marginTop={1}>
+          <Toast toast={state.toast} />
+        </Box>
+      ) : (
+        <Box marginTop={1}>
+          <Text color={theme.fgDim} dimColor>{hint}</Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/render/ink/screens/PermissionModal.tsx

@@ -0,0 +1,77 @@
+/**
+ * §3.4 Permission confirmation. Modal — blocks input until kid chooses
+ * y (allow once) / n (deny) / e (edit / I'll do it myself).
+ *
+ * y → client.permission.reply(id, { reply: "once" })
+ * n → client.permission.reply(id, { reply: "reject" })
+ * e → close modal, send a fresh kid prompt of the form "no, do it differently"
+ *
+ * The PRD uses "y/n/e" to avoid the engineering-vibes of allow/deny.
+ */
+
+import React from "react"
+import { Box, Text, useInput } from "ink"
+import { getTheme } from "../theme.ts"
+import type { PendingPermission } from "../../../core/store.ts"
+
+interface PermissionModalProps {
+  permission: PendingPermission
+  locale: "zh-Hans" | "en"
+  onAllow: () => void
+  onDeny: () => void
+  onEdit: () => void
+}
+
+export function PermissionModal({ permission, locale, onAllow, onDeny, onEdit }: PermissionModalProps): React.ReactElement {
+  const theme = getTheme()
+  useInput((input) => {
+    const ch = input.toLowerCase()
+    if (ch === "y") onAllow()
+    else if (ch === "n") onDeny()
+    else if (ch === "e") onEdit()
+  })
+  const t = STRINGS[locale]
+  return (
+    <Box flexDirection="column" borderStyle="double" borderColor={theme.warn} paddingX={2} paddingY={1}>
+      <Text color={theme.warn} bold>{t.title}</Text>
+      <Box marginTop={1}>
+        <Text color={theme.fg}>{permission.summary}</Text>
+      </Box>
+      {permission.tool && (
+        <Box marginTop={1}>
+          <Text color={theme.fgDim}>tool: {permission.tool}</Text>
+        </Box>
+      )}
+      {permission.starsEstimated && permission.starsEstimated > 0 && (
+        <Box marginTop={1}>
+          <Text color={theme.stars}>{t.starsCost(permission.starsEstimated)}</Text>
+        </Box>
+      )}
+      <Box marginTop={1}>
+        <Text color={theme.accent}>[y]</Text>
+        <Text color={theme.fg}> {t.yes}    </Text>
+        <Text color={theme.accent}>[n]</Text>
+        <Text color={theme.fg}> {t.no}    </Text>
+        <Text color={theme.accent}>[e]</Text>
+        <Text color={theme.fg}> {t.edit}</Text>
+      </Box>
+    </Box>
+  )
+}
+
+const STRINGS = {
+  "zh-Hans": {
+    title: "AI 想做这件事",
+    yes: "可以做",
+    no: "不要",
+    edit: "我来改",
+    starsCost: (n: number) => `预估消耗 ${n}⭐`,
+  },
+  en: {
+    title: "The AI wants to do this",
+    yes: "Go ahead",
+    no: "Stop",
+    edit: "I'll do it",
+    starsCost: (n: number) => `Estimated cost: ${n}⭐`,
+  },
+} as const

package/src/render/ink/screens/StartupScreen.tsx

@@ -0,0 +1,83 @@
+/**
+ * §3.1 Startup screen — first impression. Must paint within 5s.
+ *
+ * Quick keys:
+ *   Enter → start a free-play session
+ *   c     → choose a Course Pack (V0 MVP: hardcoded portfolio-site)
+ *   r     → resume the last session (V0 MVP: not implemented yet)
+ *   h     → show help (kid-friendly)
+ */
+
+import React from "react"
+import { Box, Text, useInput } from "ink"
+import { getTheme } from "../theme.ts"
+import { KeyHints } from "../components/KeyHints.tsx"
+
+interface StartupScreenProps {
+  locale: "zh-Hans" | "en"
+  coursePack: string | null
+  onStart: (mode: "free" | "course" | "resume" | "help") => void
+}
+
+export function StartupScreen({ locale, coursePack, onStart }: StartupScreenProps): React.ReactElement {
+  const theme = getTheme()
+  useInput((input, key) => {
+    if (key.return) onStart(coursePack ? "course" : "free")
+    else if (input === "c") onStart("course")
+    else if (input === "r") onStart("resume")
+    else if (input === "h") onStart("help")
+  })
+  const t = STRINGS[locale]
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      <Box borderStyle="double" borderColor={theme.border} paddingX={2} paddingY={1} flexDirection="column">
+        <Text color={theme.accent} bold>
+          Airbotix Kids OpenCode
+        </Text>
+        <Box marginTop={1} flexDirection="column">
+          <Text color={theme.fg}>{t.greet1}</Text>
+          <Text color={theme.fg}>{t.greet2}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.fgDim}>{t.disclaim}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.warn}>{t.helpline}</Text>
+        </Box>
+      </Box>
+      <Box marginTop={1}>
+        <KeyHints hints={[
+          { key: "Enter", label: coursePack ? t.startCourse : t.startFree },
+          { key: "c", label: t.pickCourse },
+          { key: "r", label: t.resume },
+          { key: "h", label: t.help },
+        ]} />
+      </Box>
+    </Box>
+  )
+}
+
+const STRINGS = {
+  "zh-Hans": {
+    greet1: "你好！我是 Kids OpenCode —— 帮你做编程项目的 AI 老师。",
+    greet2: "",
+    disclaim: "我不是真人，有时候会答错。遇到不懂的，问家长或老师。",
+    helpline: "澳大利亚紧急求助：Kids Helpline 1800 55 1800",
+    startFree: "开始新项目",
+    startCourse: "继续 Course Pack",
+    pickCourse: "选 Course Pack",
+    resume: "继续上次",
+    help: "帮助",
+  },
+  en: {
+    greet1: "Hi! I'm Kids OpenCode — the AI teacher who helps you build coding projects.",
+    greet2: "",
+    disclaim: "I'm not a real person and I can be wrong. Ask a parent or teacher if you're unsure.",
+    helpline: "In Australia: Kids Helpline 1800 55 1800",
+    startFree: "Start a new project",
+    startCourse: "Continue Course Pack",
+    pickCourse: "Pick a Course Pack",
+    resume: "Resume last session",
+    help: "Help",
+  },
+} as const

package/src/render/ink/theme.ts

@@ -0,0 +1,58 @@
+/**
+ * Kid-warm color tokens. Hand-tuned to satisfy WCAG AA on most terminals
+ * with dark backgrounds. High-contrast variant available via $KIDS_HC=1.
+ *
+ * Sourced conceptually from kids-tui-plugin/themes/kids-warm.json but
+ * inlined here because Ink consumes raw ANSI/chalk color names, not
+ * opentui theme JSON.
+ */
+
+export interface Theme {
+  fg: string
+  bg: string
+  fgDim: string
+  accent: string
+  warn: string
+  danger: string
+  success: string
+  agent: string
+  kid: string
+  system: string
+  border: string
+  stars: string
+}
+
+const DEFAULT: Theme = {
+  fg: "white",
+  bg: "black",
+  fgDim: "gray",
+  accent: "yellow",
+  warn: "yellow",
+  danger: "red",
+  success: "green",
+  agent: "cyan",
+  kid: "magenta",
+  system: "blueBright",
+  border: "yellow",
+  stars: "yellowBright",
+}
+
+const HIGH_CONTRAST: Theme = {
+  fg: "whiteBright",
+  bg: "black",
+  fgDim: "white",
+  accent: "yellowBright",
+  warn: "yellowBright",
+  danger: "redBright",
+  success: "greenBright",
+  agent: "cyanBright",
+  kid: "magentaBright",
+  system: "blueBright",
+  border: "whiteBright",
+  stars: "yellowBright",
+}
+
+export function getTheme(): Theme {
+  if (process.env.KIDS_HC === "1") return HIGH_CONTRAST
+  return DEFAULT
+}