@mohou/panel 1.0.20

package/src/settings/skill-dirs.ts

@@ -0,0 +1,41 @@
+const customKey = 'mini-app.panel.skill-dirs'
+const selectedKey = 'mini-app.panel.skill-agents'
+
+/** Custom `.../skills` directories remembered in this browser. */
+export function readSkillCustomDirs(): string[] {
+  return readList(customKey)
+}
+
+export function writeSkillCustomDirs(dirs: readonly string[]): void {
+  writeList(customKey, dirs)
+}
+
+export function readSkillAgentIds(): string[] | undefined {
+  const rows = readList(selectedKey)
+  return rows.length === 0 ? undefined : rows
+}
+
+export function writeSkillAgentIds(ids: readonly string[]): void {
+  writeList(selectedKey, ids)
+}
+
+function readList(key: string): string[] {
+  if (typeof localStorage === 'undefined') return []
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw === null || raw.length === 0) return []
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+  } catch {
+    return []
+  }
+}
+
+function writeList(key: string, dirs: readonly string[]): void {
+  try {
+    localStorage.setItem(key, JSON.stringify([...dirs]))
+  } catch {
+    // A failed write still changes the current view.
+  }
+}

package/src/settings/skill-install.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState, type ReactNode } from 'react'
+
+import { Tooltip } from '../ui/tooltip.tsx'
+import type { PanelSkillCopy, PanelSkillStatus } from './client.ts'
+import { endsWithSkills, installingCaption, shortHomePath, toggleId } from './install-row.tsx'
+import { readSkillAgentIds, readSkillCustomDirs, writeSkillAgentIds, writeSkillCustomDirs } from './skill-dirs.ts'
+
+/**
+ * Writing-skill dest list. One-click copy into the assistants Shell named.
+ * @param props - status loaders and chrome labels
+ */
+export function SkillInstall(props: {
+  readonly label: (key: string) => string
+  readonly readSkill?: (customDirs?: readonly string[]) => Promise<PanelSkillStatus>
+  readonly installSkill?: (agentIds: readonly string[], customDirs: readonly string[]) => Promise<PanelSkillStatus>
+  readonly revealSkill?: (dest: string) => Promise<void>
+}): ReactNode {
+  const [skill, setSkill] = useState<PanelSkillStatus | undefined>(undefined)
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [picked, setPicked] = useState<ReadonlySet<string>>(() => new Set(readSkillAgentIds() ?? []))
+  const [customDirs, setCustomDirs] = useState<readonly string[]>(() => readSkillCustomDirs())
+  const [customDraft, setCustomDraft] = useState('')
+  const [customError, setCustomError] = useState(false)
+  useEffect(() => {
+    if (props.readSkill === undefined) return
+    void props.readSkill(customDirs).then((status) => {
+      setSkill(status)
+      if (readSkillAgentIds() === undefined) {
+        setPicked(new Set(status.agents.filter(agent => agent.homePresent).map(agent => agent.id)))
+      }
+    }, () => setSkill(undefined))
+  }, [props.readSkill, customDirs])
+  if (props.readSkill === undefined) return null
+  return (
+    <div className="rounded-2xl border bg-card px-4 py-3">
+      <p className="m-0 text-sm font-medium">{props.label('skill-install')}</p>
+      <p className="mt-1 mb-3 text-xs text-muted-foreground">
+        {props.label('skill-help')}
+        {skill?.version === null || skill?.version === undefined ? null : ` ${props.label('skill-version').replace('{n}', skill.version)}`}
+      </p>
+      <ul className="m-0 flex list-none flex-col gap-1 p-0">
+        {(skill?.agents ?? []).map(agent => (
+          <li key={agent.id} className={agent.homePresent ? 'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-muted' : 'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 opacity-50 hover:bg-muted'}>
+            <input type="checkbox" checked={picked.has(agent.id)} onChange={() => {
+              const next = toggleId(picked, agent.id)
+              setPicked(next)
+              writeSkillAgentIds([...next])
+            }} />
+            <span className="text-sm">{agent.label}</span>
+            <span className="ml-4 flex min-w-0 items-center gap-2">
+              {agent.homePresent ? null : <span className="text-[11px] text-muted-foreground">{props.label('skill-missing-home')}</span>}
+              {busy && picked.has(agent.id) ? installingCaption(props.label) : skillCopyCaption(agent, props.label)}
+              {agent.installed && props.revealSkill !== undefined ? (
+                <Tooltip text={agent.dest}><button type="button" className="max-w-[28rem] truncate font-mono text-[11px] text-muted-foreground underline-offset-2 hover:underline" onClick={() => { void props.revealSkill?.(agent.dest) }}>{shortHomePath(agent.dest)}</button></Tooltip>
+              ) : null}
+            </span>
+          </li>
+        ))}
+      </ul>
+      <div className="mt-3">
+        <p className="mb-1 text-xs text-muted-foreground">{props.label('skill-custom')}</p>
+        <div className="flex gap-2">
+          <input className="h-9 min-w-0 flex-1 rounded-lg border bg-background px-3 text-sm outline-none" placeholder={props.label('skill-custom-hint')} value={customDraft} onChange={(event) => { setCustomDraft(event.target.value); setCustomError(false) }} />
+          <button type="button" className="h-9 rounded-lg border px-3 text-sm" onClick={() => {
+            const dir = customDraft.trim()
+            if (!endsWithSkills(dir)) {
+              setCustomError(true)
+              return
+            }
+            if (customDirs.includes(dir)) {
+              setCustomDraft('')
+              return
+            }
+            const next = [...customDirs, dir]
+            setCustomDirs(next)
+            writeSkillCustomDirs(next)
+            setCustomDraft('')
+            setCustomError(false)
+          }}>{props.label('skill-add-dir')}</button>
+        </div>
+        {customError ? <p className="mt-1 mb-0 text-xs text-destructive">{props.label('skill-custom-format')}</p> : null}
+        <ul className="mt-2 flex list-none flex-col gap-1 p-0">
+          {customDirs.map((dir) => {
+            const row = skill?.customs.find(item => item.dir === dir || item.dir.endsWith(dir.replace(/^~/, '')))
+            return (
+              <li key={dir} className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-muted">
+                <span className="max-w-[28rem] truncate font-mono text-xs">{dir}</span>
+                {busy ? installingCaption(props.label) : row === undefined ? null : skillCopyCaption(row, props.label)}
+                {row?.installed === true && props.revealSkill !== undefined ? (
+                  <Tooltip text={row.dest}><button type="button" className="max-w-[28rem] truncate font-mono text-[11px] text-muted-foreground underline-offset-2 hover:underline" onClick={() => { void props.revealSkill?.(row.dest) }}>{shortHomePath(row.dest)}</button></Tooltip>
+                ) : null}
+                <button type="button" className="text-[11px] text-muted-foreground" onClick={() => {
+                  const next = customDirs.filter(item => item !== dir)
+                  setCustomDirs(next)
+                  writeSkillCustomDirs(next)
+                }}>×</button>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+      <button type="button" className="mt-3 h-8 rounded-lg border px-3 text-sm hover:bg-muted disabled:opacity-60" disabled={busy || props.installSkill === undefined} onClick={() => {
+        const install = props.installSkill
+        if (install === undefined) return
+        setBusy(true)
+        setFailed(false)
+        void install([...picked], customDirs).then(setSkill, () => setFailed(true)).finally(() => setBusy(false))
+      }}>{busy ? '…' : props.label(skillNeedsUpdate(skill, picked, customDirs) ? 'skill-update-install' : 'skill-install')}</button>
+      {failed ? <p className="mt-2 mb-0 text-xs text-destructive">{props.label('skill-failed')}</p> : null}
+    </div>
+  )
+}
+
+function skillCopyCaption(row: PanelSkillCopy, label: (key: string) => string): ReactNode {
+  if (!row.installed) return null
+  return (
+    <>
+      <span className={row.updateAvailable ? 'text-[11px] text-primary' : 'text-[11px] text-muted-foreground'}>
+        {label(row.updateAvailable ? 'skill-update' : 'skill-installed')}
+      </span>
+      {row.version === null ? null : <span className="text-[11px] text-muted-foreground">{row.version}</span>}
+    </>
+  )
+}
+
+function skillNeedsUpdate(skill: PanelSkillStatus | undefined, picked: ReadonlySet<string>, customDirs: readonly string[]): boolean {
+  if (skill === undefined) return false
+  if (skill.agents.some(agent => picked.has(agent.id) && agent.updateAvailable)) return true
+  return customDirs.some((dir) => {
+    const row = skill.customs.find(item => item.dir === dir || item.dir.endsWith(dir.replace(/^~/, '')))
+    return row?.updateAvailable === true
+  })
+}

package/src/settings/state.ts

@@ -0,0 +1,225 @@
+import { admitPanelPort, panelLanguageFields } from './form.ts'
+import type { PanelPolicy, PanelPolicyWrite, PanelSettingsClient } from './client.ts'
+
+export interface SettingsState {
+  readonly saved?: PanelPolicy
+  readonly theme: PanelPolicy['theme']
+  readonly palette: string
+  readonly locale: string
+  readonly port: string
+  readonly providerId: string
+  readonly modelProvider: string
+  readonly model: string
+  readonly workbenchId: string
+  readonly dirty: boolean
+  readonly portError: boolean
+  readonly saveError: boolean
+  readonly saveMessage?: string
+  readonly pending?: 'close' | 'restore'
+  readonly closed: boolean
+  readonly restartRequired: boolean
+  /** True when restart is required because hostPort changed (MCP URL must be refreshed). */
+  readonly restartPort: boolean
+  /** True when restart is required because runtimeProvider.id changed. */
+  readonly restartRuntime: boolean
+  readonly probe?: string
+}
+
+export type SettingsAction =
+  | { readonly type: 'loaded'; readonly policy: PanelPolicy }
+  | { readonly type: 'edit-theme'; readonly theme: PanelPolicy['theme'] }
+  | { readonly type: 'edit-palette'; readonly palette: string }
+  | { readonly type: 'edit-locale'; readonly locale: string }
+  | { readonly type: 'edit-port'; readonly port: string }
+  | { readonly type: 'edit-provider'; readonly providerId: string }
+  | { readonly type: 'edit-model'; readonly provider: string; readonly model: string }
+  | { readonly type: 'edit-workbench'; readonly workbenchId: string }
+  | { readonly type: 'saved'; readonly result: PanelPolicyWrite }
+  /** Host policy written elsewhere (theme menu). Keeps appearance fields in sync. */
+  | { readonly type: 'host-policy'; readonly policy: PanelPolicy }
+  | { readonly type: 'port-invalid' }
+  | { readonly type: 'save-failed'; readonly message?: string }
+  | { readonly type: 'escape' }
+  | { readonly type: 'restore' }
+  | { readonly type: 'confirm' }
+  | { readonly type: 'probed'; readonly message: string }
+  | { readonly type: 'update-failed' }
+
+/** Empty form before the policy load. */
+export function settingsState(): SettingsState {
+  return {
+    theme: 'system',
+    palette: '',
+    locale: 'en',
+    port: '',
+    providerId: '',
+    modelProvider: '',
+    model: '',
+    workbenchId: 'default',
+    dirty: false,
+    portError: false,
+    saveError: false,
+    closed: false,
+    restartRequired: false,
+    restartPort: false,
+    restartRuntime: false,
+  }
+}
+
+/**
+ * Settings form transition. Port and language checks happen before a write.
+ * Escape cancels a confirm first, then closes a clean form.
+ * A dirty form asks before close and before restore.
+ * @param state - current form
+ * @param action - one edit or client result
+ */
+export function reduceSettings(state: SettingsState, action: SettingsAction): SettingsState {
+  switch (action.type) {
+    case 'loaded':
+      return fromPolicy(action.policy)
+    case 'edit-theme':
+      return { ...state, theme: action.theme, dirty: true, saveError: false }
+    case 'edit-palette':
+      return { ...state, palette: action.palette, dirty: true, saveError: false }
+    case 'edit-locale':
+      return { ...state, locale: action.locale, dirty: true, saveError: false }
+    case 'edit-port':
+      return { ...state, port: action.port, dirty: true, portError: false, saveError: false }
+    case 'edit-provider':
+      return { ...state, providerId: action.providerId, dirty: true, saveError: false }
+    case 'edit-model':
+      return { ...state, modelProvider: action.provider, model: action.model, dirty: true, saveError: false }
+    case 'edit-workbench':
+      return { ...state, workbenchId: action.workbenchId, dirty: true, saveError: false }
+    case 'saved': {
+      const portChanged = state.saved !== undefined && state.saved.hostPort !== action.result.policy.hostPort
+      const runtimeChanged = state.saved !== undefined
+        && state.saved.runtimeProvider.id !== action.result.policy.runtimeProvider.id
+      return {
+        ...fromPolicy(action.result.policy),
+        restartRequired: action.result.restartRequired,
+        restartPort: action.result.restartRequired && portChanged,
+        restartRuntime: action.result.restartRequired && runtimeChanged,
+      }
+    }
+    case 'host-policy': {
+      const policy = action.policy
+      if (!state.dirty) {
+        const next = fromPolicy(policy)
+        // Save updates parent hostPolicy immediately; do not drop the restart banner.
+        if (!state.restartRequired) return next
+        return {
+          ...next,
+          restartRequired: state.restartRequired,
+          restartPort: state.restartPort,
+          restartRuntime: state.restartRuntime,
+        }
+      }
+      return {
+        ...state,
+        theme: policy.theme,
+        palette: policy.palette,
+        saved: state.saved === undefined
+          ? policy
+          : { ...state.saved, theme: policy.theme, palette: policy.palette },
+      }
+    }
+    case 'port-invalid':
+      return { ...state, portError: true, dirty: true }
+    case 'save-failed':
+      return {
+        ...omitSaveMessage(state),
+        saveError: true,
+        dirty: true,
+        ...action.message ? { saveMessage: action.message } : {},
+      }
+    case 'escape':
+      if (state.pending !== undefined) return omitPending(state)
+      if (!state.dirty) return { ...state, closed: true }
+      return { ...state, pending: 'close' }
+    case 'restore':
+      if (!state.dirty) return state.saved === undefined ? state : fromPolicy(state.saved)
+      if (state.pending === 'restore') return state.saved === undefined ? omitPending(state) : fromPolicy(state.saved)
+      return { ...state, pending: 'restore' }
+    case 'confirm':
+      if (state.pending === 'restore') return state.saved === undefined ? omitPending(state) : fromPolicy(state.saved)
+      // Abandon close: restore the snapshot so previews can be discarded.
+      if (state.pending === 'close') {
+        if (state.saved === undefined) return { ...omitPending(state), closed: true }
+        return { ...fromPolicy(state.saved), closed: true }
+      }
+      return state
+    case 'probed':
+      return { ...state, probe: action.message }
+    case 'update-failed':
+      return { ...state, probe: 'update-failed' }
+    default:
+      return action satisfies never
+  }
+}
+
+/** Policy to write, or a port error that must not be sent. */
+export function settingsDraft(state: SettingsState): { ok: true; policy: PanelPolicy } | { ok: false } {
+  const port = admitPanelPort(Number(state.port))
+  if (!port.ok) return { ok: false }
+  let language: ReturnType<typeof panelLanguageFields>
+  try {
+    language = panelLanguageFields(state.locale)
+  } catch {
+    return { ok: false }
+  }
+  return {
+    ok: true,
+    policy: {
+      theme: state.theme,
+      palette: state.palette,
+      locale: language.locale,
+      chatLanguage: language.chatLanguage,
+      hostPort: port.port,
+      llm: state.modelProvider === '' && state.model === '' ? null : { provider: state.modelProvider, model: state.model },
+      runtimeProvider: { id: state.providerId },
+      ...state.workbenchId === 'default' ? {} : { defaultWorkbenchId: state.workbenchId },
+    },
+  }
+}
+
+/** Load policy into the form. */
+export async function loadSettings(
+  client: PanelSettingsClient,
+  dispatch: (action: SettingsAction) => void,
+): Promise<void> {
+  dispatch({ type: 'loaded', policy: await client.readPolicy() })
+}
+
+function fromPolicy(policy: PanelPolicy): SettingsState {
+  return {
+    saved: policy,
+    theme: policy.theme,
+    palette: policy.palette,
+    locale: policy.locale,
+    port: String(policy.hostPort),
+    providerId: policy.runtimeProvider.id,
+    modelProvider: policy.llm?.provider ?? '',
+    model: policy.llm?.model ?? '',
+    workbenchId: policy.defaultWorkbenchId ?? 'default',
+    dirty: false,
+    portError: false,
+    saveError: false,
+    closed: false,
+    restartRequired: false,
+    restartPort: false,
+    restartRuntime: false,
+  }
+}
+
+function omitPending(state: SettingsState): Omit<SettingsState, 'pending'> {
+  const { pending: gone, ...rest } = state
+  void gone
+  return rest
+}
+
+function omitSaveMessage(state: SettingsState): Omit<SettingsState, 'saveMessage'> {
+  const { saveMessage: gone, ...rest } = state
+  void gone
+  return rest
+}

package/src/settings/update-dialog.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { Loader2 } from 'lucide-react'
+
+import { panelText, type PanelLabelMode, type PanelLocale } from '../labels.ts'
+import { Dialog } from '../ui/dialog.tsx'
+
+import type { PanelUpdateAttempt, PanelUpdateFailureCode } from './client.ts'
+
+/** The one update card. The on-open check and the settings check open this card. */
+export type UpdateCard =
+  | { readonly kind: 'offer'; readonly current: string; readonly latest: string; readonly channel?: 'registry' | 'tarball' }
+  | { readonly kind: 'installing'; readonly version: string; readonly startedAt: number }
+  | { readonly kind: 'failed'; readonly reason: UpdateReason; readonly target?: string; readonly back?: string; readonly log?: string }
+  | { readonly kind: 'done'; readonly version: string }
+
+/** A request that never reached the launcher carries its own text. A recorded outcome carries a closed code. */
+export type UpdateReason =
+  | { readonly code: 'timeout' }
+  | { readonly code: 'exit'; readonly exitCode?: number }
+  | { readonly code: 'prepare' }
+  | { readonly code: 'closed' }
+  | { readonly code: 'leftover' }
+  | { readonly code: 'verify' }
+  | { readonly code: 'boot' }
+  | { readonly text: string }
+
+const reasonKeys = {
+  timeout: 'update-reason-timeout',
+  exit: 'update-reason-exit',
+  prepare: 'update-reason-prepare',
+  closed: 'update-reason-closed',
+  leftover: 'update-reason-leftover',
+  verify: 'update-reason-verify',
+  boot: 'update-reason-boot',
+} as const satisfies Record<PanelUpdateFailureCode, string>
+
+const channelKeys = {
+  tarball: 'update-channel-tarball',
+  registry: 'update-channel-registry',
+} as const
+
+/** What the launcher recorded, as the card shows it. `current` is the version running now. */
+export function attemptCard(attempt: PanelUpdateAttempt, current: string): UpdateCard {
+  if (attempt.state === 'done') return { kind: 'done', version: attempt.to ?? current }
+  return {
+    kind: 'failed',
+    reason: attempt.code === 'exit'
+      ? { code: 'exit', ...attempt.exitCode === undefined ? {} : { exitCode: attempt.exitCode } }
+      : { code: attempt.code },
+    ...attempt.to === undefined ? {} : { target: attempt.to },
+    ...attempt.rolledBack && attempt.from !== undefined ? { back: attempt.from } : {},
+    ...attempt.log === undefined ? {} : { log: attempt.log },
+  }
+}
+
+/**
+ * One update card: offer, install in progress, failure, or the version now running.
+ * @param props - card state and the two actions the card offers
+ */
+export function UpdateDialog(props: {
+  readonly locale: PanelLocale
+  readonly mode: PanelLabelMode
+  readonly card: UpdateCard
+  readonly onClose: () => void
+  readonly onInstall: (version: string) => void
+}): ReactNode {
+  const label = (key: string) => panelText(props.locale, key, props.mode)
+  return (
+    <div className="fixed inset-0 z-50">
+      <Dialog width="md" onClose={props.card.kind === 'installing' ? () => undefined : props.onClose}>
+        {props.card.kind === 'offer' ? <Offer card={props.card} label={label} onClose={props.onClose} onInstall={props.onInstall} /> : null}
+        {props.card.kind === 'installing' ? <Installing card={props.card} label={label} /> : null}
+        {props.card.kind === 'failed' ? <Failed card={props.card} label={label} onClose={props.onClose} onInstall={props.onInstall} /> : null}
+        {props.card.kind === 'done' ? <Done card={props.card} label={label} onClose={props.onClose} /> : null}
+      </Dialog>
+    </div>
+  )
+}
+
+function Offer(props: {
+  readonly card: Extract<UpdateCard, { kind: 'offer' }>
+  readonly label: (key: string) => string
+  readonly onClose: () => void
+  readonly onInstall: (version: string) => void
+}): ReactNode {
+  return (
+    <>
+      <h3 className="m-0 text-base font-semibold">{props.label('update-card-title')}</h3>
+      <div className="mt-4 flex items-end gap-4">
+        <Version caption={props.label('update-card-current')} version={props.card.current} />
+        <span className="pb-1.5 text-muted-foreground" aria-hidden>→</span>
+        <Version caption={props.label('update-card-latest')} version={props.card.latest} strong />
+        {props.card.channel === undefined ? null : (
+          <span className="mb-0.5 rounded-full border px-2 py-0.5 text-[10px] text-muted-foreground">
+            {props.label(channelKeys[props.card.channel])}
+          </span>
+        )}
+      </div>
+      <p className="mt-4 text-sm text-muted-foreground">{props.label('update-card-note')}</p>
+      <div className="mt-5 flex justify-end gap-2">
+        <button type="button" className="h-8 rounded-lg border px-3 text-sm" onClick={props.onClose}>{props.label('cancel')}</button>
+        <button
+          type="button"
+          className="h-8 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground"
+          onClick={() => props.onInstall(props.card.latest)}
+        >{props.label('update-install')}</button>
+      </div>
+    </>
+  )
+}
+
+function Installing(props: {
+  readonly card: Extract<UpdateCard, { kind: 'installing' }>
+  readonly label: (key: string) => string
+}): ReactNode {
+  const [elapsed, setElapsed] = useState(() => Math.max(0, Date.now() - props.card.startedAt))
+  useEffect(() => {
+    const started = props.card.startedAt
+    const tick = setInterval(() => setElapsed(Math.max(0, Date.now() - started)), 1_000)
+    return () => { clearInterval(tick) }
+  }, [props.card.startedAt])
+  return (
+    <>
+      <h3 className="m-0 flex items-center gap-2 text-base font-semibold">
+        <Loader2 size={16} className="animate-spin" aria-hidden />
+        {props.label('update-installing-title').replace('{n}', props.card.version)}
+      </h3>
+      <div className="mt-5 h-0.5 w-full overflow-hidden rounded-full bg-muted">
+        <span className="block h-full w-1/3 animate-pulse rounded-full bg-foreground/40" />
+      </div>
+      <p className="mt-4 font-mono text-sm text-muted-foreground">{props.label('update-installing-elapsed').replace('{n}', clockText(elapsed))}</p>
+      <p className="mt-1 text-sm text-muted-foreground">{props.label('update-installing-note')}</p>
+    </>
+  )
+}
+
+function Failed(props: {
+  readonly card: Extract<UpdateCard, { kind: 'failed' }>
+  readonly label: (key: string) => string
+  readonly onClose: () => void
+  readonly onInstall: (version: string) => void
+}): ReactNode {
+  return (
+    <>
+      <h3 className="m-0 text-base font-semibold">{props.label('update-failed-title')}</h3>
+      <p className="mt-3 text-sm">{reasonText(props.card.reason, props.label)}</p>
+      {props.card.back === undefined ? null : (
+        <p className="mt-1 text-sm text-muted-foreground">{props.label('update-failed-back').replace('{n}', props.card.back)}</p>
+      )}
+      {props.card.log === undefined ? null : (
+        <p className="mt-3 break-all font-mono text-[11px] text-muted-foreground">{props.label('update-log').replace('{n}', props.card.log)}</p>
+      )}
+      <div className="mt-5 flex justify-end gap-2">
+        <button type="button" className="h-8 rounded-lg border px-3 text-sm" onClick={props.onClose}>{props.label('update-card-close')}</button>
+        {props.card.target === undefined ? null : (
+          <button
+            type="button"
+            className="h-8 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground"
+            onClick={() => {
+              const target = props.card.target
+              if (target !== undefined) props.onInstall(target)
+            }}
+          >{props.label('update-card-retry')}</button>
+        )}
+      </div>
+    </>
+  )
+}
+
+function Done(props: {
+  readonly card: Extract<UpdateCard, { kind: 'done' }>
+  readonly label: (key: string) => string
+  readonly onClose: () => void
+}): ReactNode {
+  return (
+    <>
+      <h3 className="m-0 text-base font-semibold">{props.label('update-card-done-title').replace('{n}', props.card.version)}</h3>
+      <p className="mt-3 text-sm text-muted-foreground">{props.label('update-card-done-note')}</p>
+      <div className="mt-5 flex justify-end">
+        <button type="button" className="h-8 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground" onClick={props.onClose}>
+          {props.label('update-card-ok')}
+        </button>
+      </div>
+    </>
+  )
+}
+
+function Version(props: { readonly caption: string; readonly version: string; readonly strong?: boolean }): ReactNode {
+  return (
+    <span className="flex flex-col gap-1">
+      <span className="text-[10px] tracking-wide text-muted-foreground uppercase">{props.caption}</span>
+      <span className={props.strong === true ? 'font-mono text-lg font-semibold' : 'font-mono text-lg'}>{props.version}</span>
+    </span>
+  )
+}
+
+function reasonText(reason: UpdateReason, label: (key: string) => string): string {
+  if ('text' in reason) return reason.text
+  const text = label(reasonKeys[reason.code])
+  if (reason.code !== 'exit') return text
+  return reason.exitCode === undefined ? label('update-reason-exit-plain') : text.replace('{n}', String(reason.exitCode))
+}
+
+function clockText(milliseconds: number): string {
+  const total = Math.floor(milliseconds / 1_000)
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`
+}