@kidsinai/kids-client 0.0.4 → 0.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@kidsinai/kids-client",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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",

package/src/core/env.ts

@@ -60,11 +60,14 @@ export function validateEnv(env: KidsClientEnv): { ok: true } | { ok: false; rea
   }
   // Accept any supported provider's API key, not just DeepRouter. The
   // setup wizard writes whatever the parent picked into ~/.config/kids-opencode/env
-  // which the wrapper sources before exec.
+  // which the wrapper sources before exec. KIDS_OAUTH_PROVIDER marks an
+  // OAuth flow that opencode handles via its own auth.json store —
+  // we trust opencode to gate on actual token validity at serve time.
   const hasAnyKey =
     env.deeprouterApiKey
     || process.env.ANTHROPIC_API_KEY
     || process.env.OPENAI_API_KEY
+    || process.env.KIDS_OAUTH_PROVIDER
   if (!env.bypassGateway && !hasAnyKey) {
     return {
       ok: false,

package/src/core/setup.ts

@@ -16,6 +16,17 @@ import { dirname, join } from "node:path"
 
 export type ProviderId = "anthropic" | "openai" | "deeprouter"
 
+/**
+ * Wire protocol between SetupScreen and bin/kids-opencode wrapper:
+ * kids-client exits with this code to ask the wrapper to run
+ * `opencode auth login --provider <p>` (interactive OAuth that needs the
+ * TTY), then re-exec kids-client. See bin/kids-opencode §11 loop.
+ */
+export const OAUTH_HANDOFF_EXIT_CODE = 123
+
+/** Providers that support OAuth login via the upstream opencode kernel. */
+export const OAUTH_PROVIDERS: ReadonlyArray<ProviderId> = ["anthropic"] as const
+
 export interface ProviderChoice {
   id: ProviderId
   label: string
@@ -53,10 +64,10 @@ export const PROVIDERS: ProviderChoice[] = [
   },
   {
     id: "deeprouter",
-    label: "DeepRouter (Airbotix's own gateway)",
-    hint: "Not yet live for public use; recommended for staff dogfood only.",
+    label: "DeepRouter (OpenAI-compatible gateway)",
+    hint: "Cheaper than going direct + one key for all models (Anthropic, OpenAI, Google). Built-in kid-safe filters (NSFW + prompt-injection guard). Limited beta — invite-only.",
     envVar: "DEEPROUTER_API_KEY",
-    apiKeyUrl: "https://app.airbotix.ai/portal/wallet",
+    apiKeyUrl: "https://deeprouter.ai/",
     config: (env) => ({
       deeprouter: {
         type: "openai-compatible",
@@ -93,12 +104,54 @@ export function saveSetup(opts: SaveOptions): void {
   const envPath = join(opts.configDir, "env")
   const existing = readEnvFile(envPath)
   existing[provider.envVar] = opts.apiKey
+  // If the user previously chose OAuth and is now switching to API key, drop
+  // the marker so validateEnv doesn't keep routing through OAuth handoff.
+  delete existing.KIDS_OAUTH_PROVIDER
   writeEnvFile(envPath, existing)
 
   // 2. Rewrite opencode.json provider section.
-  const configPath = join(opts.configDir, "opencode.json")
+  writeOpencodeConfig(opts.configDir, provider, { withApiKey: true })
+}
+
+export interface SaveOauthOptions {
+  configDir: string
+  provider: ProviderId
+}
+
+/**
+ * Stage the OAuth handoff. We write opencode.json without an apiKey block
+ * (opencode reads OAuth tokens from its own auth.json), drop any stale
+ * provider API keys, and write a KIDS_OAUTH_PROVIDER marker so the
+ * wrapper knows which provider to log into. The actual
+ * `opencode auth login --provider <p>` invocation happens in
+ * bin/kids-opencode after kids-client exits with OAUTH_HANDOFF_EXIT_CODE.
+ */
+export function saveSetupOauth(opts: SaveOauthOptions): void {
+  const provider = findProvider(opts.provider)
+  ensureConfigDir(opts.configDir)
+
+  // 1. Update env file: clear this provider's API key (avoid stale leakage),
+  //    set marker pointing at the OAuth provider.
+  const envPath = join(opts.configDir, "env")
+  const existing = readEnvFile(envPath)
+  delete existing[provider.envVar]
+  existing.KIDS_OAUTH_PROVIDER = opts.provider
+  writeEnvFile(envPath, existing)
+
+  // 2. opencode.json without apiKey — opencode uses its auth.json store.
+  writeOpencodeConfig(opts.configDir, provider, { withApiKey: false })
+}
+
+function writeOpencodeConfig(
+  configDir: string,
+  provider: ProviderChoice,
+  flags: { withApiKey: boolean },
+): void {
+  const configPath = join(configDir, "opencode.json")
   const config = readJsonOrEmpty(configPath)
-  config.provider = provider.config(provider.envVar)
+  config.provider = flags.withApiKey
+    ? provider.config(provider.envVar)
+    : { [provider.id]: {} }
   config.model = provider.defaultModel
   if (!config.permission) {
     config.permission = {
@@ -120,11 +173,15 @@ export function saveSetup(opts: SaveOptions): void {
 export function hasAnyProviderKey(configDir: string): boolean {
   const env = readEnvFile(join(configDir, "env"))
   if (env.ANTHROPIC_API_KEY || env.OPENAI_API_KEY || env.DEEPROUTER_API_KEY) return true
+  // OAuth handoff completed earlier? The marker means opencode has its own
+  // auth.json credentials; opencode itself will gate on actual token validity.
+  if (env.KIDS_OAUTH_PROVIDER) return true
   // Also accept keys present in the parent shell env (advanced users).
   return !!(
     process.env.ANTHROPIC_API_KEY
     || process.env.OPENAI_API_KEY
     || process.env.DEEPROUTER_API_KEY
+    || process.env.KIDS_OAUTH_PROVIDER
   )
 }
 

package/src/index.tsx

@@ -32,7 +32,7 @@ import { readLastSession, writeLastSession } from "./core/last-session.ts"
 import { isCompletionTrigger, runCheck } from "./core/check-runner.ts"
 import { App } from "./render/ink/App.tsx"
 import { detectDangerousTopicEn, detectDangerousTopicZh } from "./dangerous-topic-bridge.ts"
-import { saveSetup, type ProviderId } from "./core/setup.ts"
+import { OAUTH_HANDOFF_EXIT_CODE, saveSetup, saveSetupOauth, type ProviderId } from "./core/setup.ts"
 import { reloadEnvFile } from "./core/env-reload.ts"
 import type { InstalledPack } from "./core/course-pack.ts"
 import { loadCoursePack } from "@kidsinai/kids-opencode-plugin"
@@ -73,6 +73,7 @@ interface AppHandlers {
   onSetupSave: (provider: ProviderId, apiKey: string) => Promise<{ ok: true } | { ok: false; reason: string }>
   onSetupContinue: () => Promise<void>
   onSetupSkip: () => void
+  onSetupOAuthHandoff: (provider: ProviderId) => Promise<void>
 }
 
 async function main(): Promise<void> {
@@ -197,6 +198,17 @@ function makeHandlers(
       const r = getResolveSetup()
       if (r) r()
     },
+    onSetupOAuthHandoff: async (provider) => {
+      try {
+        saveSetupOauth({ configDir: env.configDir, provider })
+      } catch (err) {
+        console.error("kids-client: OAuth handoff prep failed:", err)
+        process.exit(1)
+      }
+      // Hand the TTY to bin/kids-opencode so it can run
+      // `opencode auth login --provider <p>` interactively, then re-exec us.
+      process.exit(OAUTH_HANDOFF_EXIT_CODE)
+    },
   }
 }
 

package/src/render/ink/App.tsx

@@ -43,6 +43,7 @@ export interface AppDeps {
   onSetupSave: (provider: ProviderId, apiKey: string) => Promise<{ ok: true } | { ok: false; reason: string }>
   onSetupContinue: () => Promise<void>
   onSetupSkip: () => void
+  onSetupOAuthHandoff: (provider: ProviderId) => Promise<void>
 }
 
 export function App(deps: AppDeps): React.ReactElement {
@@ -75,7 +76,7 @@ export function App(deps: AppDeps): React.ReactElement {
     case "loading":
       return <LoadingScreen locale={deps.locale} message={state.screen.message} />
     case "setup":
-      return <SetupScreen locale={deps.locale} onSave={deps.onSetupSave} onContinue={deps.onSetupContinue} onSkip={deps.onSetupSkip} />
+      return <SetupScreen locale={deps.locale} onSave={deps.onSetupSave} onContinue={deps.onSetupContinue} onSkip={deps.onSetupSkip} onOAuthHandoff={deps.onSetupOAuthHandoff} />
     case "startup":
       return <StartupScreen locale={deps.locale} coursePack={state.coursePack} onStart={deps.onStart} />
     case "mission":

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

@@ -20,6 +20,7 @@ import { KidsLogo } from "../components/KidsLogo.tsx"
 import {
   findProvider,
   looksLikeApiKey,
+  OAUTH_PROVIDERS,
   PROVIDERS,
   type ProviderId,
 } from "../../../core/setup.ts"
@@ -30,6 +31,8 @@ type Step =
   | "engine_done"
   | "intro"
   | "provider"
+  | "auth_choice"
+  | "oauth_handoff"
   | "apikey"
   | "saving"
   | "done"
@@ -42,14 +45,21 @@ interface SetupScreenProps {
   onContinue: () => Promise<void>
   /** Skip key — useful for advanced users who set env vars themselves. */
   onSkip: () => void
+  /**
+   * Hand off to bin/kids-opencode for `opencode auth login --provider <p>`.
+   * Implementation writes opencode.json + the KIDS_OAUTH_PROVIDER marker,
+   * then process.exit(OAUTH_HANDOFF_EXIT_CODE). Never returns.
+   */
+  onOAuthHandoff: (provider: ProviderId) => Promise<void>
 }
 
-export function SetupScreen({ locale, onSave, onContinue, onSkip }: SetupScreenProps): React.ReactElement {
+export function SetupScreen({ locale, onSave, onContinue, onSkip, onOAuthHandoff }: SetupScreenProps): React.ReactElement {
   const theme = getTheme()
   const t = STRINGS[locale]
   const initialStep: Step = hasOpencodeBinary() ? "intro" : "engine_install"
   const [step, setStep] = useState<Step>(initialStep)
   const [providerIdx, setProviderIdx] = useState(0)
+  const [authChoiceIdx, setAuthChoiceIdx] = useState(0)  // 0 = subscription, 1 = api key
   const [apiKey, setApiKey] = useState("")
   const [errorMsg, setErrorMsg] = useState("")
   const [engineLog, setEngineLog] = useState<string[]>([])
@@ -86,8 +96,54 @@ export function SetupScreen({ locale, onSave, onContinue, onSkip }: SetupScreenP
     } else if (step === "provider") {
       if (key.upArrow) setProviderIdx((i) => Math.max(0, i - 1))
       else if (key.downArrow) setProviderIdx((i) => Math.min(PROVIDERS.length - 1, i + 1))
-      else if (key.return) setStep("apikey")
+      else if (key.return) {
+        // Anthropic supports both Pro/Max subscription OAuth and API key —
+        // surface the choice. Other providers go straight to api-key input.
+        const picked = PROVIDERS[providerIdx]!
+        if (OAUTH_PROVIDERS.includes(picked.id)) {
+          setAuthChoiceIdx(0)
+          setStep("auth_choice")
+        } else {
+          setStep("apikey")
+        }
+      }
       else if (key.escape) setStep("intro")
+    } else if (step === "auth_choice") {
+      if (key.upArrow) setAuthChoiceIdx((i) => Math.max(0, i - 1))
+      else if (key.downArrow) setAuthChoiceIdx((i) => Math.min(1, i + 1))
+      else if (key.return) {
+        if (authChoiceIdx === 0) {
+          // Pro/Max OAuth — render a brief handoff screen, then exit so
+          // the wrapper can run `opencode auth login` with full TTY.
+          setStep("oauth_handoff")
+          // Fire-and-forget — onOAuthHandoff calls process.exit, never returns.
+          void onOAuthHandoff(PROVIDERS[providerIdx]!.id)
+        } else {
+          setStep("apikey")
+        }
+      }
+      else if (key.escape) setStep("provider")
+    } else if (step === "apikey") {
+      // Picked the wrong provider? Esc bounces back to the picker.
+      // (Enter is consumed by TextInput's onSubmit below, so we only need Esc here.)
+      if (key.escape) {
+        setApiKey("")
+        setStep("provider")
+      } else if (
+        (input === "d" || input === "D")
+        && provider.id !== "deeprouter"
+        && apiKey === ""
+      ) {
+        // Funnel: parent decides Anthropic/OpenAI billing is too much friction
+        // — switch to DeepRouter inline without re-traversing the picker.
+        // Guarded by `apiKey === ""` so the keystroke only diverts before
+        // the user has started typing; otherwise `d` is just a character.
+        const dIdx = PROVIDERS.findIndex((p) => p.id === "deeprouter")
+        if (dIdx >= 0) {
+          setProviderIdx(dIdx)
+          setApiKey("")
+        }
+      }
     } else if (step === "done") {
       if (key.return) {
         // Inline boot — no exit.
@@ -207,13 +263,68 @@ export function SetupScreen({ locale, onSave, onContinue, onSkip }: SetupScreenP
     )
   }
 
+  if (step === "auth_choice") {
+    const choices = t.authChoice.options
+    return (
+      <Box flexDirection="column" borderStyle="double" borderColor={theme.accent} paddingX={2} paddingY={1}>
+        <Text color={theme.accent} bold>{t.authChoice.title(providerObj.label)}</Text>
+        <Box marginTop={1} flexDirection="column">
+          {choices.map((c, i) => {
+            const active = i === authChoiceIdx
+            return (
+              <Box key={i}>
+                <Text color={active ? theme.kid : theme.fg}>{active ? "▶ " : "  "}</Text>
+                <Box flexDirection="column" flexGrow={1}>
+                  <Text color={active ? theme.accent : theme.fg} bold={active}>{c.label}</Text>
+                  <Text color={theme.fgDim} dimColor={!active}>  {c.hint}</Text>
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.accent}>{t.authChoice.keys}</Text>
+        </Box>
+      </Box>
+    )
+  }
+
+  if (step === "oauth_handoff") {
+    return (
+      <Box flexDirection="column" alignItems="center" paddingY={1}>
+        <KidsLogo />
+        <Box marginTop={2} borderStyle="round" borderColor={theme.accent} paddingX={2} paddingY={1} flexDirection="column">
+          <Box>
+            <Text color={theme.accent}>
+              <Spinner type="dots" />
+            </Text>
+            <Text color={theme.accent} bold> {t.oauthHandoff.title}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text color={theme.fgDim}>{t.oauthHandoff.line1}</Text>
+          </Box>
+          <Box>
+            <Text color={theme.fgDim}>{t.oauthHandoff.line2}</Text>
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+
   if (step === "apikey") {
+    const steps = t.providerSteps[provider.id]
     return (
       <Box flexDirection="column" borderStyle="double" borderColor={theme.accent} paddingX={2} paddingY={1}>
         <Text color={theme.accent} bold>{t.apiKeyTitle(providerObj.label)}</Text>
         <Box marginTop={1} flexDirection="column">
           <Text color={theme.fgDim}>{t.apiKeyHint(providerObj.apiKeyUrl)}</Text>
         </Box>
+        <Box marginTop={1} flexDirection="column" paddingX={1}>
+          <Text color={theme.accent}>{t.stepsHeader}</Text>
+          {steps.map((line, i) => (
+            <Text key={i} color={theme.fgDim}>  {line}</Text>
+          ))}
+        </Box>
         <Box marginTop={1}>
           <Text color={theme.kid}>🔑  </Text>
           <TextInput
@@ -243,6 +354,14 @@ export function SetupScreen({ locale, onSave, onContinue, onSkip }: SetupScreenP
         <Box marginTop={1}>
           <Text color={theme.fgDim}>{t.apiKeyEnter}</Text>
         </Box>
+        <Box>
+          <Text color={theme.fgDim}>{t.apiKeyBack}</Text>
+        </Box>
+        {provider.id !== "deeprouter" && (
+          <Box>
+            <Text color={theme.accent}>{t.apiKeyToDR}</Text>
+          </Box>
+        )}
       </Box>
     )
   }
@@ -303,11 +422,55 @@ const STRINGS = {
     providerTitle: "选一个 AI 服务",
     providerKeys: "[↑↓] 选 · [Enter] 下一步 · [Esc] 返回",
     getKey: "去拿 key",
+    authChoice: {
+      title: (label: string) => `${label} 怎么用？`,
+      keys: "[↑↓] 选 · [Enter] 确认 · [Esc] 返回",
+      options: [
+        {
+          label: "用我的 Claude Pro/Max 订阅（推荐）",
+          hint: "不用 API key、不用充值；用现有 claude.ai 账号一键登录",
+        },
+        {
+          label: "用 API key（按量计费 ~$5/月）",
+          hint: "公司账号、没订阅、或想分账时选这个",
+        },
+      ],
+    },
+    oauthHandoff: {
+      title: "正在让 Claude 登录接管屏幕…",
+      line1: "马上会跳出浏览器让你登录 claude.ai 账号。",
+      line2: "登录完后我会自动接回来，给孩子继续。",
+    },
     apiKeyTitle: (label: string) => `输入 ${label} 的 API key`,
     apiKeyHint: (url: string) => `没 key？打开浏览器：${url}`,
     apiKeyPlaceholder: (env: string) => `${env}（粘进来后按 Enter）`,
     apiKeyEnter: "[Enter] 保存 · 你的 key 只存在本地",
+    apiKeyBack: "[Esc] 选错了？回去重选",
+    apiKeyToDR: "[d] 不想充值？改用 DeepRouter — 无需信用卡（输入前按）",
     apiKeyInvalid: (env: string) => `这看起来不是有效的 ${env}。再试一次。`,
+    stepsHeader: "在哪里点开：",
+    providerSteps: {
+      anthropic: [
+        "1. 打开浏览器 → console.anthropic.com",
+        "2. 用 Google 账号登录，或邮箱注册（免费）",
+        "3. 右上角点头像 → Billing → Add credits → 充 $5 起（信用卡 / Apple Pay）",
+        "4. 左侧菜单点 API Keys → 按 \"Create Key\" 按钮 → 起个名（比如 kids）",
+        "5. 弹窗里复制 sk-ant- 开头的整串，回到这里粘上",
+      ],
+      openai: [
+        "1. 打开浏览器 → platform.openai.com/api-keys",
+        "2. 用 Google 账号登录，或邮箱注册",
+        "3. 左侧 Billing → Add to credit balance → 充 $5 起（信用卡）",
+        "4. 回到 API Keys → 按 \"+ Create new secret key\" → 起个名（比如 kids）",
+        "5. 弹窗里复制 sk- 开头的整串（只显示一次！），回来粘上",
+      ],
+      deeprouter: [
+        "1. 打开浏览器 → deeprouter.ai（目前内测，需要邀请码）",
+        "2. 拿邀请码注册账号",
+        "3. 控制台 → API Keys → 创建新 key",
+        "4. 复制 key，回到这里粘上",
+      ],
+    },
     saving: "保存中…",
     errTitle: "出了点问题",
     errRetry: "[Enter] 再试",
@@ -328,11 +491,55 @@ const STRINGS = {
     providerTitle: "Pick an AI service",
     providerKeys: "[↑↓] choose · [Enter] next · [Esc] back",
     getKey: "Get key at",
+    authChoice: {
+      title: (label: string) => `How will you connect to ${label}?`,
+      keys: "[↑↓] choose · [Enter] confirm · [Esc] back",
+      options: [
+        {
+          label: "Use my Claude Pro/Max subscription (recommended)",
+          hint: "No API key, no top-up — sign in with your existing claude.ai account",
+        },
+        {
+          label: "Use an API key (pay-as-you-go ~$5/month)",
+          hint: "Pick this for company accounts, no subscription, or separate billing",
+        },
+      ],
+    },
+    oauthHandoff: {
+      title: "Handing off to Claude login…",
+      line1: "A browser window will open to sign in to your claude.ai account.",
+      line2: "I'll pick back up automatically once you're done.",
+    },
     apiKeyTitle: (label: string) => `Enter your ${label} API key`,
     apiKeyHint: (url: string) => `Don't have a key yet? Open: ${url}`,
     apiKeyPlaceholder: (env: string) => `${env} (paste then Enter)`,
     apiKeyEnter: "[Enter] save · Your key stays on this machine.",
+    apiKeyBack: "[Esc] Picked wrong one? Go back and re-pick.",
+    apiKeyToDR: "[d] Skip the billing — use DeepRouter instead (no credit card). Press before typing.",
     apiKeyInvalid: (env: string) => `That doesn't look like a valid ${env}. Try again.`,
+    stepsHeader: "Where to click:",
+    providerSteps: {
+      anthropic: [
+        "1. Open in browser → console.anthropic.com",
+        "2. Sign in with Google, or sign up with email (free)",
+        "3. Top-right profile → Billing → Add credits → top up $5+ (card / Apple Pay)",
+        "4. Left menu → API Keys → \"Create Key\" → name it (e.g. kids)",
+        "5. Copy the sk-ant-… string from the popup, paste it here",
+      ],
+      openai: [
+        "1. Open in browser → platform.openai.com/api-keys",
+        "2. Sign in with Google, or sign up with email",
+        "3. Left menu → Billing → Add to credit balance → top up $5+ (card)",
+        "4. Back to API Keys → \"+ Create new secret key\" → name it (e.g. kids)",
+        "5. Copy the sk- string from the popup (shown only once!), paste it here",
+      ],
+      deeprouter: [
+        "1. Open in browser → deeprouter.ai (closed beta — invite code required)",
+        "2. Sign up with the invite code",
+        "3. Dashboard → API Keys → Create new key",
+        "4. Copy the key, paste it here",
+      ],
+    },
     saving: "Saving…",
     errTitle: "Something went wrong",
     errRetry: "[Enter] Try again",