@kukonce/dsh-loomy 0.0.0-stage → 0.3.1

package/client/index.js

@@ -0,0 +1,1092 @@
+/**
+ * Client half: the Loomy card inside Settings.
+ *
+ * One card, one account list. Every account is an independent Loomy login with its own
+ * points balance, so the tab strip switches which account is being *looked at* — it
+ * never changes who is signed in.
+ *
+ * The card's jobs, in the order a user meets them: sign in (SMS or by adopting the
+ * desktop app's own session), see what the account has left (每日赠送 5000 + 长期),
+ * claim today's quota if the automatic run did not happen, and see which models the
+ * account may run.
+ *
+ * The packaged desktop app has no devtools, so each load stage also reports to
+ * `POST /loomy/client-log`, which lands in the host log — that is how "the bundle never
+ * loaded" stays distinguishable from "loaded, but apply() threw".
+ */
+
+window.__ModuleLoader__.load({
+  id: '@loomy/dsh-loomy',
+  factory(require) {
+    const report = (stage) => {
+      try {
+        void fetch('/loomy/client-log', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ stage }),
+          keepalive: true
+        }).catch(() => {})
+      } catch {
+        // diagnostics must never break the panel
+      }
+    }
+    report('module-evaluated')
+
+    const React = require('react')
+    const h = React.createElement
+
+    const API = '/loomy'
+
+    /**
+     * The card's own wording.
+     *
+     * Kept in this bundle rather than read from `locale/*.json`: those files describe
+     * the plugin to the inventory, while these strings are panel chrome that changes far
+     * more often. The host's locale service gets the same dictionary through
+     * `locale.register` so both paths agree.
+     */
+    const DICT = {
+      'zh-CN': {
+        section: 'Loomy',
+        title: 'Loomy 模型',
+        intro: 'Loomy 是讯飞桌面端的模型服务，按积分计费。每个账号每天有 5000 每日赠送积分，软件启动时与每天 0 点各自动领取一次。',
+        accounts: '账户',
+        noAccount: '还没有登录任何 Loomy 账号',
+        noAccountHint: '用手机号加短信验证码登录，或直接导入本机 Loomy 桌面端已登录的会话。',
+        masked: '手机号',
+        useridLabel: '用户标识',
+        source: '来源',
+        sourceSms: '短信登录',
+        sourceDesktop: '桌面端导入',
+        statusSignedIn: '已登录',
+        statusExpired: '登录已失效',
+        expiredAt: (when) => `失效于 ${when}`,
+        dailyCredits: '每日赠送积分',
+        permanentCredits: '长期积分',
+        availableCredits: '可用合计',
+        creditsEmpty: '积分未读取',
+        refreshCredits: '刷新积分',
+        claim: '领取今日 5000 积分',
+        claiming: '领取中…',
+        claimedToday: '今日已领取',
+        claimHint: '手动触发今天的每日额度领取（服务端按天幂等，重复调用不会重复发放）',
+        models: '可用模型',
+        modelsHint: '登录后这里显示该账号能调用的模型',
+        modelsCount: (n) => `${n} 个模型`,
+        modelsCached: (when) => `本地缓存 · ${when}`,
+        refreshModels: '刷新模型列表',
+        emptyModels: '没有读取到模型',
+        catalogFailed: '取不到模型列表',
+        vision: '视觉',
+        tools: '工具',
+        reasoning: '思考',
+        loginTitle: '手机号登录',
+        phone: '手机号',
+        phonePlaceholder: '11 位大陆手机号',
+        code: '验证码',
+        codePlaceholder: '短信验证码',
+        sendCode: '获取验证码',
+        sending: '发送中…',
+        codeSent: (expire) => `验证码已发送，${expire} 秒内有效`,
+        verify: '登录',
+        verifying: '登录中…',
+        labelOptional: '备注（可选）',
+        labelPlaceholder: '例如：工作号',
+        importDesktop: '导入 Loomy 桌面端登录',
+        importing: '导入中…',
+        desktopMissing: '本机没有找到 Loomy 桌面端登录态',
+        desktopPaths: (paths) => `已查找：${paths.join('、')}`,
+        logout: '退出登录',
+        loggingOut: '退出中…',
+        rename: '保存备注',
+        renaming: '保存中…',
+        renamePlaceholder: '账号备注',
+        loading: '加载中…',
+        unknown: '未知',
+        gateway: '网关',
+        version: '客户端版本',
+        defaultModel: '默认模型',
+        noAccounts: '没有账号',
+        failed: (message) => `操作失败：${message}`,
+        notMounted: '（provider 路由未挂载，需重启宿主）',
+        pillTitle: 'Loomy 每日赠送积分：每日额度与可用合计，点击看明细',
+        pillPrefix: '每日赠送积分',
+        pillDaily: '每日剩余',
+        pillAvailable: '可用合计',
+        pillClaimed: '今日已领',
+        pillNotClaimed: '今日未领',
+        pillStale: '数据已过期',
+        pillLoading: '读取中…',
+        pillExhausted: '每日额度已用完',
+        pillNoAccount: '未登录',
+        pillNote: '余额随对话实时扣减，每 30 秒刷新；「刷新积分」后与服务器完全同步。',
+        pillFetched: (when) => `读取于 ${when}`,
+        pillError: (message) => `读取失败：${message}`
+      },
+      en: {
+        section: 'Loomy',
+        title: 'Loomy Models',
+        intro: 'Loomy is iFlytek’s desktop model service, metered in points. Each account gets 5,000 daily points, claimed automatically at startup and at local midnight.',
+        accounts: 'Accounts',
+        noAccount: 'No Loomy account is signed in yet',
+        noAccountHint: 'Sign in with a phone number and an SMS code, or import the session the Loomy desktop app already has on this machine.',
+        masked: 'Phone',
+        useridLabel: 'User id',
+        source: 'Source',
+        sourceSms: 'SMS login',
+        sourceDesktop: 'Desktop import',
+        statusSignedIn: 'Signed in',
+        statusExpired: 'Session expired',
+        expiredAt: (when) => `expired ${when}`,
+        dailyCredits: 'Daily points',
+        permanentCredits: 'Permanent points',
+        availableCredits: 'Available',
+        creditsEmpty: 'Points not read yet',
+        refreshCredits: 'Refresh points',
+        claim: 'Claim today’s 5,000',
+        claiming: 'Claiming…',
+        claimedToday: 'Claimed today',
+        claimHint: 'Ask for today’s daily quota now. The server is idempotent per day, so repeating it never grants twice.',
+        models: 'Models',
+        modelsHint: 'Models this account may call appear here once it is signed in',
+        modelsCount: (n) => `${n} model${n === 1 ? '' : 's'}`,
+        modelsCached: (when) => `cached · ${when}`,
+        refreshModels: 'Refresh models',
+        emptyModels: 'No models were returned',
+        catalogFailed: 'Could not read the model list',
+        vision: 'vision',
+        tools: 'tools',
+        reasoning: 'reasoning',
+        loginTitle: 'Sign in with a phone number',
+        phone: 'Phone',
+        phonePlaceholder: '11-digit mainland number',
+        code: 'Code',
+        codePlaceholder: 'SMS code',
+        sendCode: 'Send code',
+        sending: 'Sending…',
+        codeSent: (expire) => `Code sent — valid for ${expire}s`,
+        verify: 'Sign in',
+        verifying: 'Signing in…',
+        labelOptional: 'Label (optional)',
+        labelPlaceholder: 'e.g. work account',
+        importDesktop: 'Import the Loomy desktop session',
+        importing: 'Importing…',
+        desktopMissing: 'No Loomy desktop session was found on this machine',
+        desktopPaths: (paths) => `Looked in: ${paths.join(', ')}`,
+        logout: 'Sign out',
+        loggingOut: 'Signing out…',
+        rename: 'Save label',
+        renaming: 'Saving…',
+        renamePlaceholder: 'Account label',
+        loading: 'Loading…',
+        unknown: 'unknown',
+        gateway: 'Gateway',
+        version: 'Client version',
+        defaultModel: 'Default model',
+        noAccounts: 'No accounts',
+        failed: (message) => `Failed: ${message}`,
+        notMounted: ' (provider route is not mounted — restart the host)',
+        pillTitle: 'Loomy daily gift points: daily quota and available balance, click for details',
+        pillPrefix: 'Daily gift points',
+        pillDaily: 'Daily left',
+        pillAvailable: 'Available',
+        pillClaimed: 'Claimed today',
+        pillNotClaimed: 'Not claimed today',
+        pillStale: 'Stale',
+        pillLoading: 'Loading…',
+        pillExhausted: 'Daily quota exhausted',
+        pillNoAccount: 'Not signed in',
+        pillNote: 'The balance tracks chat in real time and refreshes every 30 seconds; “Refresh points” re-syncs with the server.',
+        pillFetched: (when) => `read ${when}`,
+        pillError: (message) => `Read failed: ${message}`
+      }
+    }
+
+    const dictFor = (localeId) => (String(localeId).toLowerCase().startsWith('zh') ? DICT['zh-CN'] : DICT.en)
+
+    const CSS = `
+.lo-root {
+  --lo-accent: #2f6bd8; --lo-accent-strong: #2456b0; --lo-accent-soft: rgba(47,107,216,.12);
+  --lo-line: var(--dsw-alias-border-l1, rgba(128,138,150,.28));
+  --lo-line-soft: var(--dsw-alias-border-l2, rgba(128,138,150,.16));
+  --lo-muted: var(--dsw-alias-label-secondary, #9aa1ab);
+  --lo-text: var(--dsw-alias-label-primary, #e6e8eb);
+  --lo-surface: var(--dsw-alias-bg-layer-1, rgba(128,138,150,.04));
+  --lo-surface-hover: var(--dsw-alias-bg-layer-2, rgba(128,138,150,.09));
+  --lo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  max-width: 820px; padding: 4px 0 40px; font-size: 13px; line-height: 1.6; color: var(--lo-text);
+}
+.lo-title { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
+.lo-intro { margin: 0 0 20px; font-size: 12.5px; line-height: 1.7; color: var(--lo-muted); max-width: 66ch; }
+.lo-card { border: 1px solid var(--lo-line); background: var(--lo-surface); border-radius: 14px; overflow: hidden; }
+.lo-card + .lo-card { margin-top: 16px; }
+.lo-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 12px; }
+.lo-card-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lo-muted); }
+.lo-head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
+/* One asset, both themes: the mark is a mask painted with the accent colour. */
+.lo-logo { flex: none; width: 30px; height: 30px; display: block; background: var(--lo-accent-strong);
+  -webkit-mask: url('/loomy/icon-mask.png') center / contain no-repeat;
+  mask: url('/loomy/icon-mask.png') center / contain no-repeat; }
+.lo-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; border-bottom: 1px solid var(--lo-line-soft); }
+.lo-tab { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px;
+  padding: 8px 12px 9px; cursor: pointer; border: 0; border-bottom: 2px solid transparent;
+  border-radius: 9px 9px 0 0; background: transparent; color: var(--lo-muted);
+  transition: color .15s, background .15s, border-color .15s; }
+.lo-tab:hover { background: var(--lo-surface-hover); color: var(--lo-text); }
+.lo-tab-on { background: var(--lo-accent-soft); color: var(--lo-accent-strong); border-bottom-color: var(--lo-accent); font-weight: 600; }
+.lo-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
+.lo-tab-sub { font-size: 11.5px; font-weight: 400; color: var(--lo-muted); }
+.lo-body { padding: 14px 16px 4px; }
+.lo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 28px; }
+.lo-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.lo-field-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--lo-muted); }
+.lo-field-value { font-size: 13px; overflow-wrap: anywhere; }
+.lo-num { font-variant-numeric: tabular-nums; }
+.lo-big { font-size: 19px; font-weight: 650; color: var(--lo-accent-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.lo-mono { font-family: var(--lo-mono); font-size: 12px; }
+.lo-muted { color: var(--lo-muted); }
+.lo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.lo-btn { font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; padding: 7px 13px; border-radius: 8px;
+  cursor: pointer; border: 1px solid var(--lo-line); background: var(--lo-surface-hover); color: var(--lo-text);
+  transition: background .15s, border-color .15s, color .15s, opacity .15s; }
+.lo-btn:hover:not(:disabled) { background: var(--lo-accent-soft); border-color: var(--lo-accent); color: var(--lo-accent-strong); }
+.lo-btn:focus-visible { outline: 2px solid var(--lo-accent); outline-offset: 1px; }
+.lo-btn:disabled { opacity: .38; cursor: not-allowed; }
+.lo-btn-primary { border-color: var(--lo-accent); background: var(--lo-accent); color: #fff; }
+.lo-btn-primary:hover:not(:disabled) { background: var(--lo-accent-strong); border-color: var(--lo-accent-strong); color: #fff; }
+.lo-btn-ghost { background: transparent; color: var(--lo-muted); }
+.lo-btn-ghost:hover:not(:disabled) { background: var(--lo-accent-soft); color: var(--lo-accent-strong); }
+.lo-btn-danger { border-color: rgba(229,72,77,.35); background: rgba(229,72,77,.07); color: #e5484d; }
+.lo-btn-danger:hover:not(:disabled) { border-color: rgba(229,72,77,.6); background: rgba(229,72,77,.14); color: #e5484d; }
+.lo-icon-btn { font: inherit; font-size: 13px; line-height: 1; padding: 5px 7px; border-radius: 6px; cursor: pointer;
+  border: 0; background: transparent; color: var(--lo-muted); transition: background .15s, color .15s; }
+.lo-icon-btn:hover:not(:disabled) { background: var(--lo-accent-soft); color: var(--lo-accent-strong); }
+.lo-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
+.lo-input { font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
+  border: 1px solid var(--lo-line); background: transparent; color: var(--lo-text); min-width: 0; }
+.lo-input::placeholder { color: var(--lo-muted); }
+.lo-input:focus { outline: none; border-color: var(--lo-accent); }
+.lo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 4px 16px 16px; }
+.lo-form-item { display: flex; flex-direction: column; gap: 4px; }
+.lo-form-item .lo-input { min-width: 150px; }
+.lo-tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 999px;
+  font-size: 11px; line-height: 1.55; white-space: nowrap; background: var(--lo-surface-hover);
+  color: var(--lo-muted); font-weight: 500; }
+.lo-tag-accent { background: var(--lo-accent-soft); color: var(--lo-accent-strong); }
+.lo-tag-ok { background: rgba(63,164,91,.14); color: #3fa45b; }
+.lo-tag-warn { background: rgba(216,150,20,.15); color: #d89614; }
+.lo-tag-bad { background: rgba(229,72,77,.13); color: #e5484d; }
+.lo-error { margin: 0 0 16px; padding: 11px 14px; border: 1px solid rgba(229,72,77,.4); border-radius: 10px;
+  background: rgba(229,72,77,.08); color: #e5484d; font-size: 12.5px; line-height: 1.65; }
+.lo-note { margin: 0 16px 14px; padding: 11px 14px; border: 1px solid var(--lo-line);
+  border-left: 3px solid var(--lo-accent); background: var(--lo-accent-soft); border-radius: 10px;
+  font-size: 12.5px; line-height: 1.7; color: var(--lo-muted); }
+.lo-note code { font-family: var(--lo-mono); font-size: 12px; color: var(--lo-text); word-break: break-all; }
+.lo-section { border-top: 1px solid var(--lo-line-soft); }
+.lo-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 13px 16px 8px; }
+.lo-section-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lo-muted); }
+.lo-badge { font-size: 11.5px; line-height: 17px; padding: 0 7px; border-radius: 6px;
+  background: var(--lo-surface-hover); color: var(--lo-muted); font-variant-numeric: tabular-nums; }
+.lo-models { max-height: 340px; overflow: auto; padding: 2px 16px 12px; scrollbar-width: thin;
+  scrollbar-gutter: stable; scrollbar-color: var(--lo-line) transparent; }
+.lo-models::-webkit-scrollbar { width: 8px; }
+.lo-models::-webkit-scrollbar-thumb { background: var(--lo-line); border-radius: 8px; }
+.lo-model { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13px; }
+.lo-model + .lo-model { border-top: 1px solid var(--lo-line-soft); }
+.lo-model-name { flex: none; width: 170px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lo-model-id { flex: 1 1 auto; min-width: 0; font-family: var(--lo-mono); font-size: 11.5px; color: var(--lo-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lo-model-tail { flex: none; display: inline-flex; align-items: center; gap: 6px; }
+.lo-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--lo-muted); }
+.lo-loading { font-size: 13px; color: var(--lo-muted); animation: lo-pulse 1.6s ease-in-out infinite; }
+@keyframes lo-pulse { 0%, 100% { opacity: .5 } 50% { opacity: .95 } }
+.lo-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 16px 14px; font-size: 11.5px; color: var(--lo-muted); }
+`
+
+    const formatTime = (ms, fallback) => (typeof ms === 'number' && ms > 0 ? new Date(ms).toLocaleString() : fallback)
+    const formatPoints = (value) => (typeof value === 'number' && Number.isFinite(value)
+      ? (Number.isInteger(value) ? value.toLocaleString() : value.toFixed(2))
+      : '—')
+    /** Local calendar day, matching the Host's bookkeeping key for the daily grant. */
+    const localDayKey = (now = new Date()) => {
+      const pad = (value) => String(value).padStart(2, '0')
+      return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
+    }
+
+    /**
+     * One panel request.
+     *
+     * The Host answers failures as `{ error }` with a non-2xx status, so the message a
+     * user needs is in the body, not in the status line — reading the body first is what
+     * turns "HTTP 400" into "验证码格式不正确".
+     */
+    async function request(path, options) {
+      const response = await fetch(`${API}${path}`, {
+        headers: {
+          accept: 'application/json',
+          ...(options?.body === undefined ? {} : { 'content-type': 'application/json' })
+        },
+        ...options
+      })
+      let json = {}
+      try {
+        json = await response.json()
+      } catch {
+        json = {}
+      }
+      if (!response.ok) throw new Error(json.error ?? `HTTP ${response.status}`)
+      return json
+    }
+
+    /** The plugin's own mark, painted through a CSS mask so it follows the accent. */
+    function Logomark() {
+      return h('span', { className: 'lo-logo', 'aria-hidden': 'true' })
+    }
+
+    const tag = (text, tone = '', extra = {}) => h('span', {
+      className: `lo-tag${tone.length === 0 ? '' : ` ${tone}`}`,
+      ...extra
+    }, text)
+
+    /** One labelled field; the whole card is built from these. */
+    const field = (label, value, extra = '') => h('div', { className: `lo-field${extra}` },
+      h('span', { className: 'lo-field-label' }, label),
+      typeof value === 'string' || typeof value === 'number'
+        ? h('span', { className: 'lo-field-value' }, value)
+        : value
+    )
+
+    function LoomySettings({ t }) {
+      const [state, setState] = React.useState(null)
+      /** Which account's details are shown; display-only, never a login action. */
+      const [activeId, setActiveId] = React.useState('')
+      const [error, setError] = React.useState('')
+      /** `verb:id` of whatever action is running, so the right button says so. */
+      const [busy, setBusy] = React.useState('')
+      /** Per-account live balance, from `/credits` rather than the grant ledger. */
+      const [creditsMap, setCreditsMap] = React.useState({})
+      /** Per-account model list, loaded on demand. */
+      const [modelMap, setModelMap] = React.useState({})
+      const [phone, setPhone] = React.useState('')
+      const [code, setCode] = React.useState('')
+      const [msgid, setMsgid] = React.useState('')
+      const [codeInfo, setCodeInfo] = React.useState('')
+      /** The rename box of the active account. */
+      const [labelDraft, setLabelDraft] = React.useState('')
+      /** The optional label typed into the login form — a login may create a different account. */
+      const [newLabel, setNewLabel] = React.useState('')
+
+      const load = React.useCallback(async () => {
+        try {
+          const next = await request('/state')
+          setState(next)
+          setError('')
+          setActiveId((current) => {
+            const accounts = Array.isArray(next?.accounts) ? next.accounts : []
+            // Keep the tab the user picked; fall back to the first signed-in account so
+            // the panel never opens on an empty one when another is usable.
+            if (current.length > 0 && accounts.some((entry) => entry.id === current)) return current
+            return (accounts.find((entry) => entry.signedIn === true) ?? accounts[0])?.id ?? ''
+          })
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : String(cause))
+        }
+      }, [])
+
+      React.useEffect(() => { void load() }, [load])
+
+      const refreshCredits = React.useCallback(async (id) => {
+        if (id === undefined || id.length === 0) return
+        try {
+          const result = await request(`/credits?id=${encodeURIComponent(id)}`)
+          setCreditsMap((current) => ({ ...current, [id]: result }))
+        } catch (cause) {
+          // A failed balance read is reported inline but must not blank the card: the
+          // rest of the account row is still true.
+          setCreditsMap((current) => ({ ...current, [id]: { error: cause instanceof Error ? cause.message : String(cause) } }))
+        }
+      }, [])
+
+      const refreshModels = React.useCallback(async (id, force = false) => {
+        if (id === undefined || id.length === 0) return
+        setModelMap((current) => ({ ...current, [id]: { ...current[id], loading: true } }))
+        try {
+          const result = await request(`/models?id=${encodeURIComponent(id)}${force ? '&refresh=1' : ''}`)
+          setModelMap((current) => ({ ...current, [id]: { list: result.models ?? [], source: result.source, cachedAt: result.cachedAt } }))
+        } catch (cause) {
+          setModelMap((current) => ({ ...current, [id]: { error: cause instanceof Error ? cause.message : String(cause) } }))
+        }
+      }, [])
+
+      const accounts = Array.isArray(state?.accounts) ? state.accounts : []
+      const account = accounts.find((entry) => entry.id === activeId) ?? accounts[0]
+
+      // Load the active account's numbers once each, and again whenever the selection
+      // changes. Depend on the id and the login state only: re-reading on every render
+      // would hammer an endpoint that costs an upstream round trip.
+      React.useEffect(() => {
+        if (account === undefined || account.signedIn !== true) return
+        if (creditsMap[account.id] === undefined) void refreshCredits(account.id)
+        if (modelMap[account.id] === undefined) void refreshModels(account.id)
+      }, [account?.id, account?.signedIn])
+
+      React.useEffect(() => {
+        setLabelDraft(account?.label ?? '')
+      }, [account?.id, account?.label])
+
+      /** Run one action with a busy marker, an inline error, and a state re-read. */
+      const act = async (key, task) => {
+        setBusy(key)
+        setError('')
+        try {
+          await task()
+          await load()
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : String(cause))
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const sendCode = async () => {
+        setBusy('send')
+        setError('')
+        setCodeInfo('')
+        try {
+          const result = await request('/login/send', { method: 'POST', body: JSON.stringify({ phone }) })
+          setMsgid(result.msgid ?? '')
+          setCodeInfo(t('codeSent')(result.expire ?? 300))
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : String(cause))
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const verify = async () => {
+        setBusy('verify')
+        setError('')
+        try {
+          const result = await request('/login/verify', {
+            method: 'POST',
+            body: JSON.stringify({ phone, code, msgid, label: newLabel })
+          })
+          setCode('')
+          setMsgid('')
+          setCodeInfo('')
+          const id = result?.account?.id
+          if (typeof id === 'string' && id.length > 0) setActiveId(id)
+          await load()
+          if (typeof id === 'string') void refreshCredits(id)
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : String(cause))
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const importDesktop = async () => {
+        setBusy('import')
+        setError('')
+        try {
+          const result = await request('/login/import', { method: 'POST', body: JSON.stringify({}) })
+          const id = result?.account?.id
+          if (typeof id === 'string' && id.length > 0) setActiveId(id)
+          await load()
+          if (typeof id === 'string') void refreshCredits(id)
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : String(cause))
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const claim = async (id) => {
+        await act(`claim:${id}`, async () => {
+          await request('/credits/claim', { method: 'POST', body: JSON.stringify({ id }) })
+          await refreshCredits(id)
+        })
+      }
+
+      const logout = async (id) => {
+        await act(`logout:${id}`, async () => {
+          await request('/logout', { method: 'POST', body: JSON.stringify({ id }) })
+          setModelMap((current) => ({ ...current, [id]: undefined }))
+          setCreditsMap((current) => ({ ...current, [id]: undefined }))
+        })
+      }
+
+      const rename = async (id) => {
+        await act(`label:${id}`, async () => {
+          await request('/label', { method: 'POST', body: JSON.stringify({ id, label: labelDraft }) })
+        })
+      }
+
+      /** Status dot and word for one account. */
+      const statusOf = (entry) => {
+        if (entry.signedIn !== true) return { text: t('statusExpired'), tone: 'lo-tag-bad' }
+        if (entry.expired === true) return { text: t('statusExpired'), tone: 'lo-tag-warn' }
+        return { text: t('statusSignedIn'), tone: 'lo-tag-ok' }
+      }
+
+      const accountTabs = () => {
+        if (accounts.length === 0) return null
+        return h('div', { className: 'lo-tabs', role: 'tablist' },
+          accounts.map((entry) => h('button', {
+            key: entry.id,
+            type: 'button',
+            role: 'tab',
+            'aria-selected': entry.id === account?.id,
+            className: entry.id === account?.id ? 'lo-tab lo-tab-on' : 'lo-tab',
+            onClick: () => setActiveId(entry.id)
+          },
+          h('span', {
+            className: 'lo-dot',
+            style: {
+              background: entry.expired === true
+                ? 'var(--dsw-alias-state-warn-primary, #d89614)'
+                : (entry.signedIn === true ? 'var(--dsw-alias-state-success-primary, #3fa45b)' : 'var(--dsw-alias-state-idle-primary, #8a8f98)')
+            }
+          }),
+          entry.label.length > 0 ? entry.label : (entry.phone.length > 0 ? entry.phone : entry.id),
+          entry.phone.length > 0 ? h('span', { className: 'lo-tab-sub' }, entry.phone) : null
+          ))
+        )
+      }
+
+      /** The signed-in account's numbers and actions. */
+      const accountDetail = (entry) => {
+        const status = statusOf(entry)
+        const live = creditsMap[entry.id]
+        const summary = live?.credits ?? entry.credits
+        const grantedToday = live?.grantedToday === true || entry.grantedToday === true
+        return h('div', { className: 'lo-body' },
+          h('div', { className: 'lo-grid' },
+            field(t('masked'), h('span', { className: 'lo-row' },
+              h('span', { className: 'lo-field-value lo-num' }, entry.phone.length > 0 ? entry.phone : t('unknown')),
+              tag(status.text, status.tone)
+            )),
+            field(t('useridLabel'), h('span', { className: 'lo-field-value lo-mono lo-muted' }, entry.userid || t('unknown'))),
+            field(t('source'), entry.source === 'desktop' ? t('sourceDesktop') : t('sourceSms')),
+            field(t('dailyCredits'), h('span', { className: 'lo-row' },
+              h('span', { className: 'lo-big' }, summary === null || summary === undefined ? '—' : formatPoints(summary.dailyBalance)),
+              summary === null || summary === undefined || summary.dailyQuota === undefined
+                ? null
+                : h('span', { className: 'lo-muted lo-num' }, `/ ${formatPoints(summary.dailyQuota)}`)
+            )),
+            field(t('permanentCredits'), h('span', { className: 'lo-big' },
+              summary === null || summary === undefined ? '—' : formatPoints(summary.permanentBalance))),
+            field(t('availableCredits'), h('span', { className: 'lo-field-value lo-num' },
+              summary === null || summary === undefined ? '—' : formatPoints(summary.availableBalance)))
+          ),
+          h('div', { className: 'lo-row', style: { margin: '14px 0 16px' } },
+            h('button', {
+              type: 'button',
+              className: 'lo-btn lo-btn-primary',
+              disabled: busy === `claim:${entry.id}` || entry.signedIn !== true,
+              title: t('claimHint'),
+              onClick: () => void claim(entry.id)
+            }, busy === `claim:${entry.id}` ? t('claiming') : (grantedToday ? t('claimedToday') : t('claim'))),
+            h('button', {
+              type: 'button',
+              className: 'lo-btn lo-btn-ghost',
+              disabled: busy.length > 0 || entry.signedIn !== true,
+              onClick: () => void refreshCredits(entry.id)
+            }, t('refreshCredits')),
+            entry.expired === true
+              ? tag(t('expiredAt')(formatTime(entry.expiredAt, t('unknown'))), 'lo-tag-warn', { title: entry.expiredReason })
+              : null,
+            summary?.error === undefined
+              ? null
+              : h('span', { className: 'lo-muted' }, summary.error)
+          ),
+          h('div', { className: 'lo-row', style: { margin: '0 0 16px' } },
+            h('input', {
+              className: 'lo-input',
+              type: 'text',
+              value: labelDraft,
+              placeholder: t('renamePlaceholder'),
+              'aria-label': t('rename'),
+              onChange: (event) => setLabelDraft(event.target.value)
+            }),
+            h('button', {
+              type: 'button',
+              className: 'lo-btn',
+              disabled: busy === `label:${entry.id}`,
+              onClick: () => void rename(entry.id)
+            }, busy === `label:${entry.id}` ? t('renaming') : t('rename')),
+            h('button', {
+              type: 'button',
+              className: 'lo-btn lo-btn-danger',
+              style: { marginLeft: 'auto' },
+              disabled: busy === `logout:${entry.id}`,
+              onClick: () => void logout(entry.id)
+            }, busy === `logout:${entry.id}` ? t('loggingOut') : t('logout'))
+          )
+        )
+      }
+
+      /** The model list for the active account. */
+      const modelSection = (entry) => {
+        const data = modelMap[entry.id]
+        const list = Array.isArray(data?.list) ? data.list : []
+        return h('div', { className: 'lo-section' },
+          h('div', { className: 'lo-section-head' },
+            h('span', { className: 'lo-section-title' }, t('models')),
+            h('span', { className: 'lo-badge' }, t('modelsCount')(list.length)),
+            data?.source === 'cache-stale' || data?.source === 'cache-fresh'
+              ? h('span', { className: 'lo-muted' }, t('modelsCached')(formatTime(data.cachedAt, t('unknown'))))
+              : null,
+            entry.mounted === true ? null : h('span', { className: 'lo-muted' }, t('notMounted')),
+            h('button', {
+              type: 'button',
+              className: 'lo-icon-btn',
+              style: { marginLeft: 'auto' },
+              title: t('refreshModels'),
+              'aria-label': t('refreshModels'),
+              disabled: data?.loading === true,
+              onClick: () => void refreshModels(entry.id, true)
+            }, data?.loading === true ? '…' : '⟳')
+          ),
+          entry.signedIn !== true
+            ? h('div', { className: 'lo-empty' }, t('modelsHint'))
+            : data?.loading === true && list.length === 0
+              ? h('div', { className: 'lo-empty' }, t('loading'))
+              : data?.error !== undefined
+                ? h('div', { className: 'lo-empty' }, t('catalogFailed'))
+                : list.length === 0
+                  ? h('div', { className: 'lo-empty' }, t('emptyModels'))
+                  : h('div', { className: 'lo-models' }, list.map((model) => h('div', { key: model.id, className: 'lo-model' },
+                    h('span', { className: 'lo-model-name', title: model.name }, model.name),
+                    h('span', { className: 'lo-model-id', title: model.id }, model.id),
+                    h('span', { className: 'lo-model-tail' },
+                      model.vision ? tag(t('vision'), 'lo-tag-accent') : null,
+                      model.toolCalls ? tag(t('tools')) : null,
+                      model.reasoning ? tag(t('reasoning')) : null
+                    )
+                  )))
+        )
+      }
+
+      /** SMS login plus the desktop import, always visible — it is the way in. */
+      const loginSection = () => h('div', { className: 'lo-card' },
+        h('div', { className: 'lo-card-head' },
+          h('span', { className: 'lo-card-title' }, t('loginTitle')),
+          h('div', { className: 'lo-head-right' },
+            h('button', {
+              type: 'button',
+              className: 'lo-btn lo-btn-ghost',
+              disabled: busy === 'import',
+              title: state?.desktop?.available === true
+                ? t('importDesktop')
+                : `${t('desktopMissing')} ${t('desktopPaths')(state?.desktop?.paths ?? [])}`,
+              onClick: () => void importDesktop()
+            }, busy === 'import' ? t('importing') : t('importDesktop'))
+          )
+        ),
+        h('div', { className: 'lo-form' },
+          h('label', { className: 'lo-form-item' },
+            h('span', { className: 'lo-field-label' }, t('phone')),
+            h('input', {
+              className: 'lo-input',
+              type: 'tel',
+              value: phone,
+              placeholder: t('phonePlaceholder'),
+              onChange: (event) => setPhone(event.target.value)
+            })
+          ),
+          h('button', {
+            type: 'button',
+            className: 'lo-btn',
+            disabled: busy === 'send' || phone.trim().length === 0,
+            onClick: () => void sendCode()
+          }, busy === 'send' ? t('sending') : t('sendCode')),
+          h('label', { className: 'lo-form-item' },
+            h('span', { className: 'lo-field-label' }, t('code')),
+            h('input', {
+              className: 'lo-input',
+              type: 'text',
+              inputMode: 'numeric',
+              value: code,
+              placeholder: t('codePlaceholder'),
+              onChange: (event) => setCode(event.target.value)
+            })
+          ),
+          h('label', { className: 'lo-form-item' },
+            h('span', { className: 'lo-field-label' }, t('labelOptional')),
+            h('input', {
+              className: 'lo-input',
+              type: 'text',
+              value: newLabel,
+              placeholder: t('labelPlaceholder'),
+              onChange: (event) => setNewLabel(event.target.value)
+            })
+          ),
+          h('button', {
+            type: 'button',
+            className: 'lo-btn lo-btn-primary',
+            disabled: busy === 'verify' || phone.trim().length === 0 || code.trim().length === 0,
+            onClick: () => void verify()
+          }, busy === 'verify' ? t('verifying') : t('verify'))
+        ),
+        codeInfo.length === 0
+          ? null
+          : h('div', { className: 'lo-note' }, codeInfo)
+      )
+
+      return h('section', { className: 'lo-root', 'aria-label': t('title') },
+        h('style', null, CSS),
+        h('h2', { className: 'lo-title' }, t('title')),
+        h('p', { className: 'lo-intro' }, t('intro')),
+        error.length > 0 ? h('p', { className: 'lo-error', role: 'alert' }, t('failed')(error)) : null,
+
+        h('div', { className: 'lo-card' },
+          h('div', { className: 'lo-card-head' },
+            h(Logomark, null),
+            h('span', { className: 'lo-card-title' }, t('accounts')),
+            state === null ? h('span', { className: 'lo-loading' }, t('loading')) : null,
+            h('div', { className: 'lo-head-right' },
+              h('span', { className: 'lo-badge' }, accounts.length === 0 ? t('noAccounts') : String(accounts.length)))
+          ),
+          accountTabs(),
+          accounts.length === 0
+            ? h('div', { className: 'lo-body' },
+              h('div', { className: 'lo-empty' }, t('noAccount')),
+              h('div', { className: 'lo-empty lo-muted' }, t('noAccountHint')))
+            : (account === undefined ? null : accountDetail(account))
+        ),
+
+        account === undefined || account.signedIn !== true ? null : h('div', { className: 'lo-card' }, modelSection(account)),
+
+        loginSection(),
+
+        h('div', { className: 'lo-card' },
+          h('div', { className: 'lo-foot' },
+            h('span', null, `${t('gateway')}：${state?.gateway ?? '—'}`),
+            h('span', null, `${t('version')}：${state?.version ?? '—'}`),
+            state?.defaultModel === undefined || state.defaultModel.length === 0
+              ? null
+              : h('span', null, `${t('defaultModel')}：${state.defaultModel}`),
+            h('span', null, `${localDayKey()}`)
+          )
+        )
+      )
+    }
+
+    /**
+     * The composer pill's own stylesheet, rendered with the pill itself.
+     *
+     * The settings card's <style> only exists while that page is mounted, and the pill
+     * lives on the conversation screen — so the pill carries its stylesheet with it.
+     * The --lo-* custom properties are re-declared on .lo-anchor for the same reason:
+     * their definitions on .lo-root do not reach this subtree.
+     */
+    const PILL_CSS = `
+  .lo-anchor { --lo-accent: #2f6bd8; --lo-accent-strong: #2456b0; --lo-accent-soft: rgba(47,107,216,.12);
+    --lo-line: var(--dsw-alias-border-l1, rgba(128,138,150,.28));
+    --lo-line-soft: var(--dsw-alias-border-l2, rgba(128,138,150,.16));
+    --lo-muted: var(--dsw-alias-label-secondary, #9aa1ab);
+    --lo-text: var(--dsw-alias-label-primary, #e6e8eb);
+    --lo-surface: var(--dsw-alias-bg-layer-1, rgba(128,138,150,.04));
+    --lo-surface-hover: var(--dsw-alias-bg-layer-2, rgba(128,138,150,.09));
+    position: relative; display: inline-flex; }
+  .lo-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
+    border: 1px solid var(--lo-line); background: var(--lo-surface); color: var(--lo-text);
+    font: inherit; font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap;
+    transition: background .15s, border-color .15s; }
+  .lo-pill:hover { background: var(--lo-surface-hover); border-color: var(--lo-accent); }
+  .lo-pill:focus-visible { outline: 2px solid var(--lo-accent); outline-offset: 1px; }
+  .lo-pill-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
+  .lo-pill-prefix { color: var(--lo-muted); }
+  .lo-pill-text { font-variant-numeric: tabular-nums; }
+  .lo-pill-text-bad { color: #e5484d; }
+  .lo-pill-stale { color: var(--lo-muted); }
+  .lo-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: 264px; padding: 12px 14px;
+    border: 1px solid var(--lo-line); border-radius: 12px; background: var(--dsw-alias-bg-layer-1, #1c1e22);
+    box-shadow: 0 8px 28px rgba(0,0,0,.28); color: var(--lo-text); font-size: 12.5px; line-height: 1.6; }
+  .lo-pop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
+  .lo-pop-title { font-weight: 600; }
+  .lo-pop-stale { font-size: 11px; color: var(--lo-muted); }
+  .lo-pop-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
+  .lo-pop-row + .lo-pop-row { border-top: 1px solid var(--lo-line-soft); }
+  .lo-pop-label { color: var(--lo-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .lo-pop-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .lo-pop-note { margin-top: 6px; font-size: 11.5px; color: var(--lo-muted); overflow-wrap: anywhere; }
+  `
+
+    /** How often the pill re-reads /state, and how many silent cycles make it stale. */
+    const PILL_CADENCE_MS = 30_000
+    const PILL_STALE_CADENCES = 3
+
+    /**
+     * The provider id the conversation currently points at, or undefined when neither
+     * side of a model switch carries one. An empty string counts as "nothing": reading
+     * it as a choice would hide the pill for one frame in the middle of switching.
+     */
+    const selectedProviderOf = (selection) => {
+      const providerOf = (candidate) => {
+        const provider = candidate?.provider
+        return typeof provider === 'string' && provider.length > 0 ? provider : undefined
+      }
+      return providerOf(selection?.next) ?? providerOf(selection?.lastUsed)
+    }
+
+    /**
+     * Poll /state while mounted: one read, then a self-chained timer so a slow answer
+     * never overlaps the next one. Failures keep the last reading on screen (only the
+     * wording and the staleness mark change) — a transient error must not blank a pill
+     * the user is reading. /state costs no upstream round trip, so polling it is free.
+     */
+    function useLoomyState(cadenceMs) {
+      const [data, setData] = React.useState(null)
+      const [error, setError] = React.useState(null)
+      const [loadedOnce, setLoadedOnce] = React.useState(false)
+      const [updatedAt, setUpdatedAt] = React.useState(0)
+      React.useEffect(() => {
+        let alive = true
+        let timer = null
+        const stop = () => {
+          alive = false
+          if (timer !== null) clearTimeout(timer)
+        }
+        const read = async () => {
+          try {
+            const next = await request('/state')
+            if (!alive) return
+            setData(next)
+            setError(null)
+            setUpdatedAt(Date.now())
+          } catch (cause) {
+            if (!alive) return
+            setError(cause instanceof Error ? cause.message : String(cause))
+          } finally {
+            if (alive) {
+              setLoadedOnce(true)
+              timer = setTimeout(() => void read(), cadenceMs)
+            }
+          }
+        }
+        void read()
+        return stop
+      }, [cadenceMs])
+      return { data, error, loadedOnce, updatedAt }
+    }
+
+    /**
+     * The pill's reading from one /state answer, summed over signed-in accounts.
+     *
+     * The credits behind /state are the grant ledger, not a live upstream read; the
+     * pill presents that as the balance and lets the settings card do a live refresh.
+     * `readable` is false when no signed-in account has been granted yet — the pill
+     * prints "—" rather than a sum of zeros, which would read as "used up".
+     */
+    const readingOf = (accounts) => {
+      const list = Array.isArray(accounts) ? accounts.filter((entry) => entry?.signedIn === true) : []
+      if (list.length === 0) return { kind: 'no-account' }
+      const sumOf = (pick) => list.reduce((sum, entry) => {
+        const value = pick(entry)
+        return typeof value === 'number' && Number.isFinite(value) ? sum + value : sum
+      }, 0)
+      const readable = list.some((entry) => entry.credits !== null && entry.credits !== undefined)
+      return {
+        kind: 'reading',
+        daily: sumOf((entry) => entry.credits?.dailyBalance),
+        quota: sumOf((entry) => entry.credits?.dailyQuota),
+        available: sumOf((entry) => entry.credits?.availableBalance),
+        readable,
+        claimedToday: list.every((entry) => entry.grantedToday === true),
+        accounts: list
+      }
+    }
+
+    /** Traffic light: the daily pot is what runs out, so it drives the colour. */
+    const tierOf = (reading) => {
+      if (reading.kind !== 'reading' || reading.readable !== true) return 'unknown'
+      return reading.daily > 0 ? 'ok' : 'exhausted'
+    }
+
+    const TIER_DOT = {
+      ok: 'var(--dsw-alias-state-success-primary, #3fa45b)',
+      exhausted: 'var(--dsw-alias-state-error-primary, #e5484d)',
+      unknown: 'var(--dsw-alias-state-idle-primary, #8a8f98)'
+    }
+
+    /** The popover: one row per signed-in account, plus the notes the pill omits. */
+    function PillPopover({ t, reading, stale, error, updatedAt }) {
+      return h('div', { className: 'lo-pop', role: 'dialog', 'aria-label': t('pillTitle') },
+        h('style', null, PILL_CSS),
+        h('div', { className: 'lo-pop-head' },
+          h('span', { className: 'lo-pop-title' }, t('pillTitle')),
+          stale ? h('span', { className: 'lo-pop-stale' }, t('pillStale')) : null),
+        reading.accounts.map((entry) => h('div', { className: 'lo-pop-row', key: entry.id },
+          h('span', { className: 'lo-pop-label', title: entry.label || entry.phone || entry.id },
+            entry.label.length > 0 ? entry.label : (entry.phone.length > 0 ? entry.phone : entry.id)),
+          h('span', { className: 'lo-pop-value' },
+            `${formatPoints(entry.credits?.dailyBalance)} / ${formatPoints(entry.credits?.dailyQuota)}` +
+            ` · ${t('pillAvailable')} ${formatPoints(entry.credits?.availableBalance)}`))),
+        error !== null && error !== undefined && error !== ''
+          ? h('div', { className: 'lo-pop-note' }, t('pillError')(error))
+          : null,
+        updatedAt > 0 ? h('div', { className: 'lo-pop-note' }, t('pillFetched')(new Date(updatedAt).toLocaleTimeString())) : null,
+        h('div', { className: 'lo-pop-note' }, t('pillNote')))
+    }
+
+    /**
+     * The pill body, mounted only while a Loomy model is selected. `open` lives here
+     * rather than in the outer gate: the gate must call `useProjection` unconditionally
+     * and may return null, so any hook added there would run in a different order on
+     * the frames where the pill is hidden versus shown.
+     */
+    function LoomyPillBody({ t }) {
+      const { data, error, loadedOnce, updatedAt } = useLoomyState(PILL_CADENCE_MS)
+      const [open, setOpen] = React.useState(false)
+      const anchorRef = React.useRef(null)
+      React.useEffect(() => {
+        if (!open) return
+        // pointerdown (not click): by the time click fires, the toggle has already run,
+        // so a listener that counts the trigger as "inside" must capture pointerdown
+        // or the popover would close and reopen in one gesture.
+        const onPointerDown = (event) => {
+          const anchor = anchorRef.current
+          if (anchor && typeof anchor.contains === 'function' && anchor.contains(event.target)) return
+          setOpen(false)
+        }
+        const onKeyDown = (event) => {
+          if (event.key === 'Escape') setOpen(false)
+        }
+        document.addEventListener('pointerdown', onPointerDown, true)
+        document.addEventListener('keydown', onKeyDown)
+        return () => {
+          document.removeEventListener('pointerdown', onPointerDown, true)
+          document.removeEventListener('keydown', onKeyDown)
+        }
+      }, [open])
+
+      const reading = readingOf(data?.accounts)
+      const pending = !loadedOnce && data === null
+      const stale = reading.kind === 'reading' && updatedAt > 0 &&
+        Date.now() - updatedAt > PILL_CADENCE_MS * PILL_STALE_CADENCES
+      const tier = tierOf(reading)
+      const title = [t('pillTitle'),
+        error !== null && error !== undefined && error !== '' ? t('pillError')(error) : null,
+        stale ? t('pillStale') : null].filter(Boolean).join(' · ')
+
+      let text
+      if (pending) text = '…'
+      else if (reading.kind === 'no-account') text = t('pillNoAccount')
+      else if (reading.readable !== true) text = '—'
+      else text = `${formatPoints(reading.daily)}${reading.quota > 0 ? ` / ${formatPoints(reading.quota)}` : ''}` +
+        ` · ${t('pillAvailable')} ${formatPoints(reading.available)}`
+
+      return h('span', { className: 'lo-anchor', ref: anchorRef },
+        h('style', null, PILL_CSS),
+        h('button', {
+          type: 'button',
+          className: 'lo-pill',
+          title,
+          'aria-label': title,
+          'aria-expanded': open,
+          'aria-haspopup': 'dialog',
+          onClick: () => setOpen((current) => !current)
+        },
+        h('span', { className: 'lo-pill-dot', 'aria-hidden': 'true', style: { background: TIER_DOT[tier] } }),
+        reading.kind === 'reading' && reading.readable === true
+          ? h('span', { className: 'lo-pill-prefix' }, `${t('pillPrefix')} · `)
+          : null,
+        h('span', {
+          className: tier === 'exhausted' && reading.readable === true ? 'lo-pill-text lo-pill-text-bad' : 'lo-pill-text'
+        }, text),
+        reading.kind === 'reading' && reading.readable === true
+          ? h('span', { className: 'lo-pill-prefix' }, reading.claimedToday ? ` · ${t('pillClaimed')}` : ` · ${t('pillNotClaimed')}`)
+          : null,
+        stale ? h('span', { className: 'lo-pill-stale' }, ` · ${t('pillStale')}`) : null),
+        open ? h(PillPopover, { t, reading, stale, error, updatedAt }) : null)
+    }
+
+    /**
+     * The gate: calls `useProjection` exactly once per render, unconditionally, and
+     * mounts the pill only when the conversation points at a Loomy account. Any other
+     * provider renders nothing and starts nothing — the polling hook lives inside the
+     * pill body, so a hidden pill also makes no requests.
+     */
+    function LoomyComposerPill(props) {
+      const provider = selectedProviderOf(props.useProjection?.('modelSelection'))
+      if (typeof provider !== 'string' || !provider.startsWith('@loomy/dsh-loomy/')) return null
+      return h(LoomyPillBody, { t: props.t })
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        // A throwing apply() leaves the slot silently empty, so every optional client
+        // service is probed and the whole registration is contained; the failure is
+        // reported to the host log through the same beacon as the load stages.
+        try {
+          const get = typeof ctx.get === 'function' ? ctx.get.bind(ctx) : () => undefined
+          const locale = get('locale')
+
+          /**
+           * Translate through the host's locale service, falling back to this bundle's
+           * own copy.
+           *
+           * The service keeps the dictionary it was first given, so a hot-reloaded client
+           * asking for a key added since then gets the key itself back. Falling back here
+           * keeps new strings working without an app restart.
+           */
+          const localise = (localeId, key) => dictFor(localeId)[key]
+          const boundT = locale !== undefined && typeof locale.bind === 'function' ? locale.bind('loomy') : null
+          const currentLocale = locale !== undefined && typeof locale.getLocale === 'function'
+            ? String(locale.getLocale().locale ?? 'zh-CN')
+            : 'zh-CN'
+          const t = (key) => {
+            if (boundT !== null) {
+              const fromService = boundT(key)
+              if (fromService !== undefined && fromService !== key) return fromService
+            }
+            const local = localise(currentLocale, key)
+            return local === undefined ? key : local
+          }
+
+          if (locale !== undefined && typeof locale.register === 'function' && typeof locale.getLocale === 'function') {
+            const registered = []
+            for (const entry of locale.getLocale().locales) {
+              registered.push(locale.register('loomy', entry.id, dictFor(entry.id)))
+            }
+            if (typeof ctx.effect === 'function') {
+              ctx.effect(() => () => {
+                for (const dispose of registered) dispose()
+              }, 'dsh-loomy: locale dictionaries')
+            }
+          }
+
+          ctx.slots.inject('settings.section', () => ctx.slots.register({
+            name: 'settings.section',
+            id: 'loomy',
+            order: 16,
+            label: () => t('section')
+          }, (props) => h(LoomySettings, { ...props, t })))
+
+          /**
+           * The composer pill, next to the model picker. Only mounted per-conversation
+           * when a Loomy model is selected — see LoomyComposerPill's gate. A failed
+           * registration is reported but must not take the settings card down with it.
+           */
+          try {
+            ctx.slots.inject('conversation.input.right', () => ctx.slots.register({
+              name: 'conversation.input.right',
+              id: 'loomy-composer-pill',
+              order: 4,
+              inject: () => ({ t })
+            }, LoomyComposerPill))
+          } catch (failure) {
+            report(`pill-register-failed: ${failure instanceof Error ? failure.message : String(failure)}`)
+          }
+
+          report('applied')
+        } catch (failure) {
+          report(`apply-failed: ${failure instanceof Error ? failure.message : String(failure)}`)
+        }
+      }
+    }
+  }
+})