@kidsinai/kids-client 0.0.12 → 0.0.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@kidsinai/kids-client",
-  "version": "0.0.12",
+  "version": "0.0.16",
   "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",
@@ -34,7 +34,7 @@
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
     "react": "^18.3.1",
-    "@kidsinai/kids-opencode-plugin": "^0.0.1"
+    "@kidsinai/kids-opencode-plugin": "^0.0.16"
   },
   "devDependencies": {
     "@opencode-ai/sdk": "^1.14.51",

package/src/core/course-pack.ts

@@ -7,7 +7,7 @@
  * — used by CoursePackPicker.
  */
 
-import { readdirSync, statSync } from "node:fs"
+import { existsSync, readdirSync, statSync } from "node:fs"
 import { join } from "node:path"
 import {
   bundledCoursePacksDir,
@@ -52,38 +52,62 @@ export interface InstalledPack {
   shortDescription: string | null
   missionCount: number
   starsBudget: number
+  /** Project-type metadata for the picker, surfaced from pack.yml. */
+  icon: string | null
+  pickerLabel: string | null
+  typeCategory: "game" | "website" | "slides" | "video" | null
+  pickerOrder: number
 }
 
 /**
  * Enumerate packs available in the bundled course-packs/ directory. Used
  * by the picker screen. Tolerant of malformed packs (skips, doesn't
  * throw).
+ *
+ * Packs whose folder name starts with `_` (e.g. `_stub`) are hidden from
+ * the picker but remain loadable by id — they're CI fixtures, not kid content.
  */
 export function listInstalledPacks(): InstalledPack[] {
-  const dir = bundledCoursePacksDir()
-  let entries: string[]
-  try {
-    entries = readdirSync(dir)
-  } catch {
-    return []
-  }
+  // Walk both the public dir and the private submodule dir (if mounted).
+  // Same pack id appearing in both is deduped — private wins because the
+  // plugin's packDir() resolves private-first; listing follows the same order.
+  const publicDir = bundledCoursePacksDir()
+  const privateDir = join(publicDir, "private")
+  const dirs = [privateDir, publicDir].filter((d) => existsSync(d))
+  const seen = new Set<string>()
   const out: InstalledPack[] = []
-  for (const id of entries) {
+  for (const dir of dirs) {
+    let entries: string[]
     try {
-      const full = join(dir, id)
-      if (!statSync(full).isDirectory()) continue
-      const pack = loadCoursePack(id)
-      if (!pack) continue
-      out.push({
-        id: pack.id,
-        title: pack.title,
-        shortDescription: pack.short_description ?? null,
-        missionCount: pack.missions?.length ?? 0,
-        starsBudget: pack.estimated_stars_budget ?? 0,
-      })
+      entries = readdirSync(dir)
     } catch {
-      // skip malformed entry
+      continue
+    }
+    for (const id of entries) {
+      if (id.startsWith("_") || id.startsWith(".")) continue
+      if (seen.has(id)) continue
+      try {
+        const full = join(dir, id)
+        if (!statSync(full).isDirectory()) continue
+        const pack = loadCoursePack(id)
+        if (!pack) continue
+        seen.add(id)
+        out.push({
+          id: pack.id,
+          title: pack.title,
+          shortDescription: pack.short_description ?? null,
+          missionCount: pack.missions?.length ?? 0,
+          starsBudget: pack.estimated_stars_budget ?? 0,
+          icon: pack.icon ?? null,
+          pickerLabel: pack.picker_label ?? null,
+          typeCategory: pack.type_category ?? null,
+          pickerOrder: pack.picker_order ?? Number.MAX_SAFE_INTEGER,
+        })
+      } catch {
+        // skip malformed entry
+      }
     }
   }
+  out.sort((a, b) => a.pickerOrder - b.pickerOrder)
   return out
 }

package/src/core/env.ts

@@ -29,6 +29,10 @@ export interface KidsClientEnv {
   coursePack: string | null
   /** Optional mission id (e.g. "mission-1"). */
   mission: string | null
+  /** Optional guided-flow vibe id picked by the kid (e.g. "space"). */
+  vibeId: string | null
+  /** Optional kid-chosen project name. Surfaced in scaffold template vars. */
+  projectName: string | null
   /** Locale hint ("zh-Hans" / "en"). Picked from KIDS_LOCALE or $LANG. */
   locale: "zh-Hans" | "en"
   /** Path to opencode binary so client can spawn `opencode serve`. */
@@ -57,6 +61,8 @@ export function readEnv(): KidsClientEnv {
     bypassGateway: process.env.KIDS_LLM_BYPASS_GATEWAY === "1",
     coursePack: process.env.KIDS_COURSE_PACK || null,
     mission: process.env.KIDS_MISSION || null,
+    vibeId: process.env.KIDS_VIBE_ID || null,
+    projectName: process.env.KIDS_PROJECT_NAME || null,
     locale,
     opencodeBin: process.env.OPENCODE_BIN ?? "opencode",
     configDir: process.env.KIDS_OPENCODE_CONFIG_DIR ?? join(homedir(), ".config", "kids-opencode"),

package/src/index.tsx

@@ -31,6 +31,7 @@ import { listInstalledPacks, resolveContext } from "./core/course-pack.ts"
 import { readLastSession, writeLastSession } from "./core/last-session.ts"
 import { isCompletionTrigger, runCheck } from "./core/check-runner.ts"
 import { App } from "./render/ink/App.tsx"
+import { FREE_PLAY_PACK_ID } from "./render/ink/screens/CoursePackPicker.tsx"
 import { detectDangerousTopicEn, detectDangerousTopicZh } from "./dangerous-topic-bridge.ts"
 import { OAUTH_HANDOFF_EXIT_CODE, saveSetup, saveSetupOauth, type ProviderId } from "./core/setup.ts"
 import { reloadEnvFile } from "./core/env-reload.ts"
@@ -574,6 +575,12 @@ function makeFullHandlers(
       }
     },
     onPickPack: (packId) => {
+      if (packId === FREE_PLAY_PACK_ID) {
+        // Synthetic "I don't know yet — just chat" entry → free-play.
+        store.update({ coursePack: null, mission: null, packTitle: null, missionTitle: null, missionIndex: null, missionTotal: null })
+        store.update({ screen: { kind: "mission" } })
+        return
+      }
       store.update({ coursePack: packId, mission: null })
       refreshContext()
       store.update({ screen: { kind: "mission" } })

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

@@ -1,16 +1,21 @@
 /**
- * §3.1 [c] option — list installed Course Packs and let the kid pick one.
- * On selection, the parent transitions to MissionScreen with that pack
- * loaded.
+ * Project-type picker — first impression for a kid with no `--course` flag.
  *
- * Up / Down to move, Enter to select, Esc to go back.
+ * Lists installed packs (Game / Website / …) plus a synthetic "I don't know
+ * yet — just chat" entry that drops into free-play. Selection routes via the
+ * orchestrator's onPick callback; the magic `_free` id triggers free-play.
+ *
+ * Up / Down to move, Enter to select, Esc to go back to StartupScreen.
  */
 
-import React, { useState } from "react"
+import React, { useMemo, useState } from "react"
 import { Box, Text, useInput } from "ink"
 import { getTheme } from "../theme.ts"
 import type { InstalledPack } from "../../../core/course-pack.ts"
 
+/** Synthetic id reserved for the "just chat" entry; orchestrator maps this to free-play. */
+export const FREE_PLAY_PACK_ID = "_free"
+
 interface CoursePackPickerProps {
   locale: "zh-Hans" | "en"
   packs: InstalledPack[]
@@ -18,17 +23,30 @@ interface CoursePackPickerProps {
   onBack: () => void
 }
 
+interface PickerRow {
+  id: string
+  icon: string
+  label: string
+  description: string | null
+  /** Optional meta line ("3 missions · budget 40⭐") — null hides it. */
+  meta: string | null
+}
+
 export function CoursePackPicker({ locale, packs, onPick, onBack }: CoursePackPickerProps): React.ReactElement {
   const theme = getTheme()
+  const t = STRINGS[locale]
+  const rows: PickerRow[] = useMemo(() => buildRows(packs, t), [packs, t])
   const [idx, setIdx] = useState(0)
   useInput((_, key) => {
     if (key.escape) onBack()
     else if (key.upArrow) setIdx((i) => Math.max(0, i - 1))
-    else if (key.downArrow) setIdx((i) => Math.min(packs.length - 1, i + 1))
-    else if (key.return && packs[idx]) onPick(packs[idx]!.id)
+    else if (key.downArrow) setIdx((i) => Math.min(rows.length - 1, i + 1))
+    else if (key.return && rows[idx]) onPick(rows[idx]!.id)
   })
-  const t = STRINGS[locale]
-  if (packs.length === 0) {
+  const noRealPacks = packs.length === 0
+  if (noRealPacks) {
+    // Course Pack install is broken — surface it loudly, but still let the kid
+    // drop into free-play via the synthetic entry.
     return (
       <Box flexDirection="column" borderStyle="round" borderColor={theme.warn} paddingX={2} paddingY={1}>
         <Text color={theme.warn} bold>{t.empty}</Text>
@@ -45,17 +63,20 @@ export function CoursePackPicker({ locale, packs, onPick, onBack }: CoursePackPi
     <Box flexDirection="column" borderStyle="round" borderColor={theme.accent} paddingX={2} paddingY={1}>
       <Text color={theme.accent} bold>{t.title}</Text>
       <Box marginTop={1} flexDirection="column">
-        {packs.map((p, i) => {
+        {rows.map((row, i) => {
           const active = i === idx
           return (
-            <Box key={p.id} marginBottom={i === packs.length - 1 ? 0 : 0}>
+            <Box key={row.id}>
               <Text color={active ? theme.kid : theme.fg}>{active ? "▶ " : "  "}</Text>
+              <Text>{row.icon}{row.icon ? "  " : ""}</Text>
               <Box flexDirection="column" flexGrow={1}>
-                <Text color={active ? theme.accent : theme.fg} bold={active}>{p.title}</Text>
-                {p.shortDescription && (
-                  <Text color={theme.fgDim} dimColor={!active}>  {p.shortDescription}</Text>
+                <Text color={active ? theme.accent : theme.fg} bold={active}>{row.label}</Text>
+                {row.description && (
+                  <Text color={theme.fgDim} dimColor={!active}>  {row.description}</Text>
+                )}
+                {row.meta && (
+                  <Text color={theme.fgDim} dimColor>  {row.meta}</Text>
                 )}
-                <Text color={theme.fgDim} dimColor>  {t.meta(p.missionCount, p.starsBudget)}</Text>
               </Box>
             </Box>
           )
@@ -68,22 +89,50 @@ export function CoursePackPicker({ locale, packs, onPick, onBack }: CoursePackPi
   )
 }
 
+interface PickerStrings {
+  freePlayLabel: string
+  freePlayDescription: string
+  meta: (missions: number, stars: number) => string
+}
+
+function buildRows(packs: InstalledPack[], t: PickerStrings): PickerRow[] {
+  const rows: PickerRow[] = packs.map((p) => ({
+    id: p.id,
+    icon: p.icon ?? "📦",
+    label: p.pickerLabel ?? p.title,
+    description: p.shortDescription,
+    meta: p.missionCount > 0 ? t.meta(p.missionCount, p.starsBudget) : null,
+  }))
+  rows.push({
+    id: FREE_PLAY_PACK_ID,
+    icon: "🤔",
+    label: t.freePlayLabel,
+    description: t.freePlayDescription,
+    meta: null,
+  })
+  return rows
+}
+
 const STRINGS = {
   "zh-Hans": {
-    title: "选一个 Course Pack",
+    title: "你好呀. 今天想做点啥?",
     empty: "还没装任何 Course Pack",
     emptyHint: "Course Pack 是 Airbotix 老师做的引导式项目。请家长重新装 kids-opencode 把它带回来。",
     backHint: "[Esc / Enter] 返回",
     hints: "[↑↓] 选 · [Enter] 确认 · [Esc] 返回",
+    freePlayLabel: "还没想好 — 聊聊看",
+    freePlayDescription: "先跟 AI 聊一聊，再决定做啥也行。",
     meta: (missions: number, stars: number) =>
       stars > 0 ? `${missions} 个 Mission · 预算 ${stars}⭐` : `${missions} 个 Mission`,
   },
   en: {
-    title: "Pick a Course Pack",
+    title: "Welcome, friend. What do you want to make today?",
     empty: "No Course Packs installed yet",
     emptyHint: "Course Packs are guided projects from Airbotix. Ask a grown-up to reinstall kids-opencode.",
     backHint: "[Esc / Enter] Back",
     hints: "[↑↓] move · [Enter] choose · [Esc] back",
+    freePlayLabel: "I don't know yet — just chat",
+    freePlayDescription: "Talk to the AI first, then decide what to make.",
     meta: (missions: number, stars: number) =>
       stars > 0 ? `${missions} missions · budget ${stars}⭐` : `${missions} missions`,
   },

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

@@ -2,8 +2,10 @@
  * §3.1 Startup screen — first impression. Must paint within 5s.
  *
  * Quick keys:
- *   Enter → start a free-play session OR continue if a course pack is set
- *   c     → choose a Course Pack
+ *   Enter → if a Course Pack is preselected (via --course): continue.
+ *           Otherwise: open the project-type picker.
+ *   c     → open the project-type picker explicitly
+ *   f     → start a free-play session (no Course Pack)
  *   r     → resume the last session
  *   w     → open Airbotix Portal wallet / login in the parent's browser
  *   h     → show kid-friendly help
@@ -27,8 +29,9 @@ interface StartupScreenProps {
 export function StartupScreen({ locale, coursePack, toast, onStart, onOpenWallet }: StartupScreenProps): React.ReactElement {
   const theme = getTheme()
   useInput((input, key) => {
-    if (key.return) onStart(coursePack ? "course" : "free")
+    if (key.return) onStart("course")
     else if (input === "c") onStart("course")
+    else if (input === "f") onStart("free")
     else if (input === "r") onStart("resume")
     else if (input === "w" || input === "W") onOpenWallet()
     else if (input === "h") onStart("help")
@@ -53,8 +56,9 @@ export function StartupScreen({ locale, coursePack, toast, onStart, onOpenWallet
       </Box>
       <Box marginTop={2}>
         <KeyHints hints={[
-          { key: "Enter", label: coursePack ? t.startCourse : t.startFree },
-          { key: "c", label: t.pickCourse },
+          { key: "Enter", label: coursePack ? t.startCourse : t.pickCourse },
+          ...(coursePack ? [{ key: "c", label: t.pickCourse }] : []),
+          { key: "f", label: t.startFree },
           { key: "r", label: t.resume },
           { key: "w", label: t.wallet },
           { key: "h", label: t.help },