@mohou/panel 1.0.20

package/src/settings/author-mcp-view.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState, type ReactNode } from 'react'
+
+import { Dialog } from '../ui/dialog.tsx'
+import { Tooltip } from '../ui/tooltip.tsx'
+import { readAuthorMcpAgentIds, writeAuthorMcpAgentIds } from './author-mcp.ts'
+import type { PanelAbout, PanelAuthorMcpStatus } from './client.ts'
+import { installingCaption, shortHomePath, toggleId } from './install-row.tsx'
+
+/**
+ * Authoring MCP dest list. One-click merge into assistant MCP files.
+ * Generate-snippet stays as a fallback.
+ * @param props - status loaders, about reader, and chrome labels
+ */
+export function AuthorMcpInstall(props: {
+  readonly label: (key: string) => string
+  readonly readAbout?: () => Promise<PanelAbout>
+  readonly readAuthorMcp?: () => Promise<PanelAuthorMcpStatus>
+  readonly installAuthorMcp?: (agentIds: readonly string[], description: string) => Promise<PanelAuthorMcpStatus>
+  readonly revealAuthorMcp?: (dest: string) => Promise<void>
+}): ReactNode {
+  const [status, setStatus] = useState<PanelAuthorMcpStatus | undefined>(undefined)
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [picked, setPicked] = useState<ReadonlySet<string>>(() => new Set(readAuthorMcpAgentIds() ?? []))
+  const [snippetOpen, setSnippetOpen] = useState(false)
+  const [about, setAbout] = useState<PanelAbout | undefined>(undefined)
+  useEffect(() => {
+    if (props.readAuthorMcp === undefined) return
+    void props.readAuthorMcp().then((next) => {
+      setStatus(next)
+      if (readAuthorMcpAgentIds() === undefined) {
+        setPicked(new Set(next.agents.filter(agent => agent.homePresent).map(agent => agent.id)))
+      }
+    }, () => setStatus(undefined))
+  }, [props.readAuthorMcp])
+  if (props.readAuthorMcp === undefined && props.readAbout === 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('mcp-authoring')}</p>
+      <p className="mt-1 mb-3 text-xs text-muted-foreground">{props.label('mcp-authoring-help')}</p>
+      {props.readAuthorMcp === undefined ? null : (
+        <ul className="m-0 mb-3 flex list-none flex-col gap-1 p-0">
+          {(status?.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)
+                writeAuthorMcpAgentIds([...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) : authorMcpCaption(agent, props.label)}
+                {agent.installed && props.revealAuthorMcp !== 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.revealAuthorMcp?.(agent.dest) }}>{shortHomePath(agent.dest)}</button></Tooltip>
+                ) : null}
+              </span>
+              {agent.adapter === undefined ? null : (
+                <span className="ml-auto shrink-0 rounded-full border px-2 py-0.5 font-mono text-[10px] tracking-normal text-muted-foreground" data-adapter={agent.adapter}>{agent.adapter}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="flex flex-wrap gap-2">
+        {props.installAuthorMcp === undefined ? null : (
+          <button type="button" className="h-8 rounded-lg border px-3 text-sm hover:bg-muted disabled:opacity-60" disabled={busy} onClick={() => {
+            const install = props.installAuthorMcp
+            if (install === undefined) return
+            setBusy(true)
+            setFailed(false)
+            void install([...picked], props.label('mcp-authoring-blurb')).then(setStatus, () => setFailed(true)).finally(() => setBusy(false))
+          }}>{busy ? '…' : props.label(authorMcpNeedsUpdate(status, picked) ? 'mcp-authoring-update-install' : 'mcp-authoring-install')}</button>
+        )}
+        {props.readAbout === undefined ? null : (
+          <button type="button" className="h-8 rounded-lg border px-3 text-sm hover:bg-muted" onClick={() => {
+            const read = props.readAbout
+            if (read === undefined) return
+            void read().then((value) => {
+              setAbout(value)
+              setSnippetOpen(true)
+            }, () => setAbout(undefined))
+          }}>{props.label('mcp-authoring-generate')}</button>
+        )}
+      </div>
+      {failed ? <p className="mt-2 mb-0 text-xs text-destructive">{props.label('mcp-authoring-failed')}</p> : null}
+      {snippetOpen && about !== undefined ? (
+        <AuthoringDialog about={about} label={props.label} onClose={() => setSnippetOpen(false)} />
+      ) : null}
+    </div>
+  )
+}
+
+function authorMcpCaption(
+  row: { readonly installed: boolean; readonly updateAvailable: boolean },
+  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>
+  )
+}
+
+function authorMcpNeedsUpdate(status: PanelAuthorMcpStatus | undefined, picked: ReadonlySet<string>): boolean {
+  if (status === undefined) return false
+  return status.agents.some(agent => picked.has(agent.id) && agent.updateAvailable)
+}
+
+function AuthoringDialog(props: {
+  readonly about: PanelAbout
+  readonly label: (key: string) => string
+  readonly onClose: () => void
+}): ReactNode {
+  const [copied, setCopied] = useState(false)
+  const snippet = authoringSnippet(props.about.authoring.url, props.about.authoring.token, props.label('mcp-authoring-blurb'))
+  return (
+    <Dialog width="wide" onClose={props.onClose}>
+      <h5 className="m-0 text-base font-semibold">{props.label('mcp-authoring')}</h5>
+      <p className="mt-1 text-sm text-muted-foreground">{props.label('mcp-authoring-help')}</p>
+      <ul className="mt-4 max-h-56 overflow-auto rounded-xl border bg-muted/40 p-2">
+        {props.about.authoring.tools.map(tool => (
+          <li key={tool.name} className="rounded-lg px-3 py-2">
+            <p className="m-0 font-mono text-sm font-medium">{tool.name}</p>
+            <p className="mt-0.5 mb-0 text-xs leading-5 text-muted-foreground">{tool.description}</p>
+          </li>
+        ))}
+      </ul>
+      <pre className="mt-4 overflow-auto rounded-xl border bg-muted p-3 font-mono text-xs">{snippet}</pre>
+      <div className="mt-3 flex justify-end gap-2">
+        <button type="button" className="h-8 rounded-lg border px-3 text-sm" onClick={() => {
+          void navigator.clipboard.writeText(snippet).then(() => {
+            setCopied(true)
+            window.setTimeout(() => setCopied(false), 1600)
+          })
+        }}>{copied ? props.label('mcp-copied') : props.label('mcp-copy')}</button>
+        <button type="button" className="h-8 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground" onClick={props.onClose}>{props.label('confirm')}</button>
+      </div>
+    </Dialog>
+  )
+}
+
+function authoringSnippet(url: string, token: string, description: string): string {
+  return `${JSON.stringify({
+    'mini-app': {
+      url,
+      transport: 'streamable-http',
+      description,
+      headers: { Authorization: `Bearer ${token}` },
+      _monkeyagent: { description },
+    },
+  }, null, 2)}\n`
+}

package/src/settings/author-mcp.ts

@@ -0,0 +1,24 @@
+const selectedKey = 'mini-app.panel.mcp-agents'
+
+/** Assistants remembered for the authoring MCP install. */
+export function readAuthorMcpAgentIds(): string[] | undefined {
+  if (typeof localStorage === 'undefined') return undefined
+  try {
+    const raw = localStorage.getItem(selectedKey)
+    if (raw === null || raw.length === 0) return undefined
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return undefined
+    const ids = parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+    return ids.length === 0 ? undefined : ids
+  } catch {
+    return undefined
+  }
+}
+
+export function writeAuthorMcpAgentIds(ids: readonly string[]): void {
+  try {
+    localStorage.setItem(selectedKey, JSON.stringify([...ids]))
+  } catch {
+    // A failed write still changes the current view.
+  }
+}

package/src/settings/client.ts

@@ -0,0 +1,205 @@
+/** Public host policy the settings form can read. No secrets. */
+export interface PanelPolicy {
+  readonly theme: 'system' | 'light' | 'dark'
+  readonly palette: string
+  readonly locale: string
+  readonly chatLanguage: string
+  readonly hostPort: number
+  readonly llm: { readonly provider: string; readonly model: string } | null
+  readonly runtimeProvider: { readonly id: string }
+  readonly defaultWorkbenchId?: string
+}
+
+export interface PanelPolicyWrite {
+  readonly policy: PanelPolicy
+  readonly restartRequired: boolean
+}
+
+export interface PanelProbe {
+  readonly healthy: boolean
+  readonly code?: string
+  readonly message?: string
+}
+
+/** Writing skill install status for one assistant or custom folder. */
+export interface PanelSkillCopy {
+  readonly dest: string
+  readonly installed: boolean
+  readonly version: string | null
+  readonly updateAvailable: boolean
+}
+
+export interface PanelSkillAgent extends PanelSkillCopy {
+  readonly id: string
+  readonly label: string
+  readonly skillsDir: string
+  readonly homePresent: boolean
+}
+
+export interface PanelSkillStatus {
+  readonly skillId: string
+  readonly version: string | null
+  readonly agents: readonly PanelSkillAgent[]
+  readonly customs: readonly (PanelSkillCopy & { readonly dir: string })[]
+}
+
+/** Authoring MCP install status for one assistant. */
+export interface PanelAuthorMcpAgent {
+  readonly id: string
+  readonly label: string
+  readonly dest: string
+  readonly homePresent: boolean
+  readonly installed: boolean
+  readonly updateAvailable: boolean
+  readonly adapter?: string
+}
+
+export interface PanelAuthorMcpStatus {
+  readonly agents: readonly PanelAuthorMcpAgent[]
+}
+
+/** Owner about block, including the authoring MCP snippet. */
+export interface PanelAbout {
+  readonly name: string
+  readonly current: string
+  readonly platform: string
+  readonly authoring: {
+    readonly url: string
+    readonly token: string
+    readonly tools: readonly { readonly name: string; readonly description: string }[]
+  }
+}
+
+/** Why an install did not finish. Closed: the panel owns the wording of each code. */
+export const panelUpdateFailureCodes = ['timeout', 'exit', 'prepare', 'closed', 'leftover', 'verify', 'boot'] as const
+
+export type PanelUpdateFailureCode = (typeof panelUpdateFailureCodes)[number]
+
+/**
+ * What the launcher recorded about the last install, in the runtime root.
+ * `from` is the version that was running when the attempt started, and `at` is epoch milliseconds.
+ */
+export type PanelUpdateAttempt =
+  | {
+    readonly state: 'done'
+    readonly from?: string
+    readonly to?: string
+    readonly at: number
+  }
+  | {
+    readonly state: 'failed'
+    readonly code: PanelUpdateFailureCode
+    readonly from?: string
+    readonly to?: string
+    readonly rolledBack: boolean
+    readonly exitCode?: number
+    readonly log?: string
+    readonly at: number
+  }
+
+/** One registry check. `latest` is missing when the registry did not answer. */
+export interface PanelUpdateCheck {
+  readonly name: string
+  readonly current: string
+  readonly latest: string | null
+  readonly updateAvailable: boolean
+  readonly channel?: 'registry' | 'tarball'
+  readonly installable?: boolean
+  readonly error?: string
+  /** The last install this machine recorded, when one is on disk. The panel shows it once. */
+  readonly lastAttempt?: PanelUpdateAttempt
+}
+
+/** One registered brain and the vendor/model pairs it publishes. */
+export interface PanelRuntime {
+  readonly id: string
+  readonly label?: string
+  readonly models: readonly { readonly provider: string; readonly models: readonly string[] }[]
+}
+
+/** Settings calls. Absent means the settings entry is hidden. No route string lives here. */
+export interface PanelSettingsClient {
+  readPolicy(): Promise<PanelPolicy>
+  writePolicy(policy: PanelPolicy): Promise<PanelPolicyWrite>
+  probe(id: string): Promise<PanelProbe>
+  readAbout?(): Promise<PanelAbout>
+  checkUpdate?(): Promise<PanelUpdateCheck>
+  installUpdate?(version: string): Promise<void>
+  /** Tell Host the launcher's last attempt was shown, so the next check does not open it again. */
+  ackUpdate?(at: number): Promise<void>
+  restartHost?(): Promise<void>
+  listRuntimes?(): Promise<readonly PanelRuntime[]>
+  readSkill?(customDirs?: readonly string[]): Promise<PanelSkillStatus>
+  installSkill?(agentIds: readonly string[], customDirs: readonly string[]): Promise<PanelSkillStatus>
+  revealSkill?(dest: string): Promise<void>
+  readAuthorMcp?(): Promise<PanelAuthorMcpStatus>
+  installAuthorMcp?(agentIds: readonly string[], description: string): Promise<PanelAuthorMcpStatus>
+  revealAuthorMcp?(dest: string): Promise<void>
+  /** Names, descriptions, and whether the store accepts a write. A secret never crosses this. */
+  readCredentials?(): Promise<PanelCredentials>
+  /**
+   * Save one account. An omitted secret keeps the one already stored, which is how the form edits a
+   * description without the owner pasting a secret again. Host reads the stored value; the panel
+   * never receives one.
+   */
+  putCredential?(name: string, description: string, secret?: string): Promise<void>
+  removeCredential?(name: string): Promise<void>
+  listMcp?(): Promise<PanelMcpList>
+  writeMcp?(servers: readonly McpServerDraft[]): Promise<{ unresolved: readonly PanelMcpFailure[] }>
+  checkMcp?(server: McpServerDraft): Promise<McpCheckResult>
+  admitMcp?(text: string): Promise<readonly McpServerDraft[]>
+  importMcp?(source: string): Promise<readonly McpServerDraft[]>
+}
+
+/** One stored account, as the editor lists it. No secret: values are write-only. */
+export interface PanelCredential {
+  readonly name: string
+  readonly description: string
+}
+
+export interface PanelCredentials {
+  readonly credentials: readonly PanelCredential[]
+  /** False when the store is read-only, and then the form shows no write control. */
+  readonly writable: boolean
+}
+
+/** One server the last boot left out, and why. */
+export interface PanelMcpFailure {
+  readonly id: string
+  readonly code: string
+  readonly message: string
+}
+
+export interface PanelMcpList {
+  readonly servers: readonly McpServerDraft[]
+  readonly unresolved: readonly PanelMcpFailure[]
+}
+
+/** One MCP server the settings section can edit. */
+export interface McpServerDraft {
+  readonly id: string
+  readonly description?: string
+  readonly enabled?: boolean
+  readonly command?: string
+  readonly args?: readonly string[]
+  readonly env?: Readonly<Record<string, string>>
+  readonly url?: string
+  readonly transport?: 'sse' | 'streamable-http'
+  readonly headers?: Readonly<Record<string, string>>
+}
+
+/** One tool a check listed, with the schemas the server declared. */
+export interface McpToolRow {
+  readonly name: string
+  readonly description?: string
+  readonly inputSchema?: Record<string, unknown>
+  readonly outputSchema?: Record<string, unknown>
+}
+
+/** Result of trying one server without saving. */
+export interface McpCheckResult {
+  readonly ok: boolean
+  readonly tools: readonly McpToolRow[]
+  readonly code?: string
+  readonly message?: string
+}

package/src/settings/credentials-view.tsx

@@ -0,0 +1,195 @@
+import { KeyRound } from 'lucide-react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+
+import { panelText, type PanelLabelMode, type PanelLocale } from '../labels.ts'
+import { Dialog } from '../ui/dialog.tsx'
+import type { PanelCredential, PanelSettingsClient } from './client.ts'
+
+interface Draft {
+  readonly name: string
+  readonly description: string
+  readonly secret: string
+  /** The name being replaced, when the form edits a row instead of adding one. */
+  readonly editing: string | undefined
+}
+
+const emptyDraft: Draft = { name: '', description: '', secret: '', editing: undefined }
+
+/**
+ * Credentials settings. The list carries names and descriptions only: a secret is written once and
+ * never read back, so the form has no field that can show an existing value.
+ * A read-only store keeps the list and hides every write control.
+ * @param props - settings client and chrome locale
+ */
+export function CredentialSettings(props: {
+  readonly client: PanelSettingsClient
+  readonly locale: PanelLocale
+  readonly mode: PanelLabelMode
+}): ReactNode {
+  const label = (key: string) => panelText(props.locale, key, props.mode)
+  const [rows, setRows] = useState<readonly PanelCredential[]>([])
+  const [writable, setWritable] = useState(false)
+  const [draft, setDraft] = useState<Draft | undefined>(undefined)
+  const [removing, setRemoving] = useState<string | undefined>(undefined)
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState('')
+  const [notice, setNotice] = useState('')
+  const loaded = useRef(false)
+  const read = props.client.readCredentials
+
+  useEffect(() => {
+    if (read === undefined || loaded.current) return
+    loaded.current = true
+    const client = props.client
+    void read.call(client).then((next) => {
+      setRows(next.credentials)
+      setWritable(next.writable)
+    }, () => setFailed(label('credentials-load-failed')))
+  }, [read, props.client, label])
+
+  if (read === undefined) return <p className="text-sm text-muted-foreground">{label('credentials-empty')}</p>
+
+  const refresh = async (): Promise<void> => {
+    const next = await read.call(props.client)
+    setRows(next.credentials)
+    setWritable(next.writable)
+  }
+
+  const save = async (value: Draft): Promise<void> => {
+    const put = props.client.putCredential
+    if (put === undefined) return
+    setBusy(true)
+    setFailed('')
+    try {
+      // Blank means "keep the stored secret": Host resolves it, and the panel has no value to send.
+      const secret = value.secret.length === 0 ? undefined : value.secret
+      await put.call(props.client, value.name.trim(), value.description.trim(), secret)
+      await refresh()
+      setDraft(undefined)
+      setNotice(label(secret === undefined ? 'credentials-saved-description' : 'credentials-saved'))
+    } catch {
+      setFailed(label('credentials-save-failed'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const remove = async (name: string): Promise<void> => {
+    const drop = props.client.removeCredential
+    setRemoving(undefined)
+    if (drop === undefined) return
+    setBusy(true)
+    setFailed('')
+    try {
+      await drop.call(props.client, name)
+      await refresh()
+      setNotice('')
+    } catch {
+      setFailed(label('credentials-save-failed'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h4 className="m-0">{label('section-credentials')}</h4>
+          {rows.length === 0 ? <p className="mt-1 text-xs text-muted-foreground">{label('credentials-empty')}</p> : null}
+          <p className="mt-1 text-xs text-muted-foreground">{label('mcp-reference-hint')}</p>
+        </div>
+        {writable ? (
+          <button type="button" className="h-8 shrink-0 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground" onClick={() => setDraft(emptyDraft)}>
+            {label('credentials-add')}
+          </button>
+        ) : <span className="shrink-0 text-xs text-muted-foreground">{label('credentials-read-only')}</span>}
+      </div>
+      <ul className="flex flex-col gap-2">
+        {rows.map(row => (
+          <li key={row.name} className="flex items-start gap-3 rounded-xl border bg-card px-3 py-2">
+            <span className="mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-lg border text-muted-foreground">
+              <KeyRound size={14} />
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className="m-0 truncate text-sm font-medium">{row.name}</p>
+              <p className="m-0 truncate text-xs text-muted-foreground">{row.description}</p>
+              <p className="m-0 mt-1 font-mono text-[11px] text-muted-foreground">{label('credentials-reference').replace('{reference}', `\${credential:${row.name}}`)}</p>
+            </div>
+            {writable ? (
+              <div className="flex shrink-0 gap-1">
+                <button type="button" className="h-7 rounded-md px-2 text-xs hover:bg-muted" onClick={() => setDraft({ name: row.name, description: row.description, secret: '', editing: row.name })}>
+                  {label('credentials-edit')}
+                </button>
+                <button type="button" className="h-7 rounded-md px-2 text-xs text-destructive hover:bg-muted" onClick={() => setRemoving(row.name)}>
+                  {label('delete')}
+                </button>
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+      {notice.length > 0 ? <p className="text-xs text-muted-foreground">{notice}</p> : null}
+      {failed.length > 0 ? <p className="text-xs text-destructive">{failed}</p> : null}
+      {draft === undefined ? null : (
+        <Dialog onClose={() => setDraft(undefined)}>
+          <h4 className="m-0">{label(draft.editing === undefined ? 'credentials-new' : 'credentials-edit')}</h4>
+          <div className="mt-4 flex flex-col gap-3">
+            <Field label={label('credentials-name')} hint={label('credentials-name-hint')} value={draft.name} disabled={draft.editing !== undefined} onChange={name => setDraft({ ...draft, name })} />
+            <Field label={label('credentials-description')} hint={label('credentials-desc-hint')} value={draft.description} onChange={description => setDraft({ ...draft, description })} />
+            <Field label={label('credentials-secret')} hint={label('credentials-secret-hint')} value={draft.secret} password onChange={secret => setDraft({ ...draft, secret })} />
+            {draft.editing === undefined ? null : <p className="m-0 text-xs text-muted-foreground">{label('credentials-replace-hint')}</p>}
+          </div>
+          <div className="mt-4 flex items-center justify-end gap-2">
+            {draft.name.trim().length === 0
+              ? <span className="mr-auto text-xs text-muted-foreground">{label('credentials-need-name')}</span>
+              : draft.editing === undefined && draft.secret.length === 0
+                ? <span className="mr-auto text-xs text-muted-foreground">{label('credentials-need-secret')}</span>
+                : null}
+            <button type="button" className="h-8 rounded-lg border px-3 text-sm" onClick={() => setDraft(undefined)}>{label('cancel')}</button>
+            <button
+              type="button"
+              className="h-8 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground disabled:opacity-50"
+              disabled={busy || draft.name.trim().length === 0 || (draft.editing === undefined && draft.secret.length === 0)}
+              onClick={() => { void save(draft) }}
+            >
+              {label('credentials-save')}
+            </button>
+          </div>
+        </Dialog>
+      )}
+      {removing === undefined ? null : (
+        <Dialog width="sm" onClose={() => setRemoving(undefined)}>
+          <p className="m-0 text-sm">{label('credentials-delete-confirm')}</p>
+          <div className="mt-4 flex justify-end gap-2">
+            <button type="button" className="h-8 rounded-lg border px-3 text-sm" onClick={() => setRemoving(undefined)}>{label('cancel')}</button>
+            <button type="button" className="h-8 rounded-lg bg-destructive px-3 text-sm font-semibold text-destructive-foreground" onClick={() => { void remove(removing) }}>{label('delete')}</button>
+          </div>
+        </Dialog>
+      )}
+    </div>
+  )
+}
+
+function Field(props: {
+  readonly label: string
+  readonly hint: string
+  readonly value: string
+  readonly password?: boolean
+  readonly disabled?: boolean
+  readonly onChange: (value: string) => void
+}): ReactNode {
+  return (
+    <label className="flex flex-col gap-1 text-xs">
+      <span className="text-muted-foreground">{props.label}</span>
+      <input
+        type={props.password === true ? 'password' : 'text'}
+        className="h-8 rounded-lg border bg-background px-2 text-sm text-foreground disabled:opacity-60"
+        placeholder={props.hint}
+        value={props.value}
+        disabled={props.disabled === true}
+        onChange={event => props.onChange(event.target.value)}
+      />
+    </label>
+  )
+}

package/src/settings/form.ts

@@ -0,0 +1,27 @@
+import { isPanelLocale, type PanelLocale } from '../labels.ts'
+
+/** Settings port range. Locked in the product decisions, not a host tunable. */
+export const panelPortBound = { min: 1024, max: 65535 } as const
+
+export type PanelPortResult =
+  | { readonly ok: true; readonly port: number }
+  | { readonly ok: false; readonly key: 'port-invalid' }
+
+/**
+ * Admit a settings port before any write. A bad value is not sent to Host.
+ * @param value - the form value
+ */
+export function admitPanelPort(value: unknown): PanelPortResult {
+  if (typeof value !== 'number' || !Number.isInteger(value)) return { ok: false, key: 'port-invalid' }
+  if (value < panelPortBound.min || value > panelPortBound.max) return { ok: false, key: 'port-invalid' }
+  return { ok: true, port: value }
+}
+
+/**
+ * The one language control. Both fields are the same locale.
+ * @param locale - `en` or `zh-CN`
+ */
+export function panelLanguageFields(locale: string): { locale: PanelLocale; chatLanguage: PanelLocale } {
+  if (!isPanelLocale(locale)) throw new Error(`panel locale is not supported: ${locale}`)
+  return { locale, chatLanguage: locale }
+}

package/src/settings/install-row.tsx

@@ -0,0 +1,35 @@
+import { Loader2 } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+/** Toggle one id in a remembered pick set. */
+export function toggleId(current: ReadonlySet<string>, id: string): ReadonlySet<string> {
+  const next = new Set(current)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  return next
+}
+
+/** Home-relative dest shown next to the status caption. */
+export function shortHomePath(dest: string): string {
+  const unix = dest.match(/^(\/Users\/[^/]+|\/home\/[^/]+)/)
+  if (unix !== null && unix[1] !== undefined) return `~${dest.slice(unix[1].length)}`
+  const windows = dest.match(/^[A-Za-z]:\\Users\\[^\\]+/)
+  if (windows !== null && windows[0] !== undefined) return `~${dest.slice(windows[0].length).replace(/\\/g, '/')}`
+  return dest
+}
+
+/** Custom dests must end with a `skills` folder. */
+export function endsWithSkills(raw: string): boolean {
+  const text = raw.trim().replace(/\\/g, '/').replace(/\/+$/, '')
+  return text === 'skills' || text.endsWith('/skills')
+}
+
+/** Caption while a picked dest is being written. */
+export function installingCaption(label: (key: string) => string): ReactNode {
+  return (
+    <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground">
+      <Loader2 size={11} className="animate-spin" />
+      {label('installing')}
+    </span>
+  )
+}