cli-jaw 2.17.62 → 2.17.63

package/public/manager/src/settings/pages/SpeechKeys.tsx

@@ -31,10 +31,10 @@ import {
     PageError,
     PageLoading,
     PageOffline,
+    SettingsNote,
     usePageSnapshot,
 } from './page-shell';
 import { expandPatch } from './path-utils';
-import { EngineSubsection } from './components/EngineSubsection';
 
 export const STT_ENGINES = ['auto', 'gemini', 'openai', 'whisper', 'vertex'] as const;
 export type SttEngine = (typeof STT_ENGINES)[number];
@@ -231,43 +231,41 @@ export default function SpeechKeys({ port, client, dirty, registerSave }: Settin
                     title="Gemini"
                     hint="Google AI Studio key. Used by the Gemini transcription path."
                 >
-                    <EngineSubsection title="Credentials">
-                        <SecretField
-                            id="stt-gemini-key"
-                            label="API key"
-                            value={geminiApiKey}
-                            placeholder={geminiPlaceholder}
-                            onChange={(next) => {
-                                setGeminiApiKey(next);
-                                if (next.length === 0) {
-                                    dirty.remove('stt.geminiApiKey');
-                                    return;
-                                }
-                                setEntry('stt.geminiApiKey', {
-                                    value: next,
-                                    // Server doesn't echo the secret back, so
-                                    // we use empty-string as the original. Any
-                                    // typed value is a real change.
-                                    original: '',
-                                    valid: true,
-                                });
-                            }}
-                        />
-                        <TextField
-                            id="stt-gemini-model"
-                            label="Model"
-                            value={geminiModel}
-                            placeholder="gemini-2.5-flash-lite"
-                            onChange={(next) => {
-                                setGeminiModel(next);
-                                setEntry('stt.geminiModel', {
-                                    value: next,
-                                    original: original.geminiModel ?? '',
-                                    valid: true,
-                                });
-                            }}
-                        />
-                    </EngineSubsection>
+                    <SecretField
+                        id="stt-gemini-key"
+                        label="API key"
+                        value={geminiApiKey}
+                        placeholder={geminiPlaceholder}
+                        onChange={(next) => {
+                            setGeminiApiKey(next);
+                            if (next.length === 0) {
+                                dirty.remove('stt.geminiApiKey');
+                                return;
+                            }
+                            setEntry('stt.geminiApiKey', {
+                                value: next,
+                                // Server doesn't echo the secret back, so
+                                // we use empty-string as the original. Any
+                                // typed value is a real change.
+                                original: '',
+                                valid: true,
+                            });
+                        }}
+                    />
+                    <TextField
+                        id="stt-gemini-model"
+                        label="Model"
+                        value={geminiModel}
+                        placeholder="gemini-2.5-flash-lite"
+                        onChange={(next) => {
+                            setGeminiModel(next);
+                            setEntry('stt.geminiModel', {
+                                value: next,
+                                original: original.geminiModel ?? '',
+                                valid: true,
+                            });
+                        }}
+                    />
                 </SettingsSection>
             ) : null}
 
@@ -276,54 +274,52 @@ export default function SpeechKeys({ port, client, dirty, registerSave }: Settin
                     title="OpenAI"
                     hint="Compatible with OpenAI-style transcription endpoints (incl. self-hosted)."
                 >
-                    <EngineSubsection title="Credentials">
-                        <SecretField
-                            id="stt-openai-key"
-                            label="API key"
-                            value={openaiApiKey}
-                            placeholder={openaiPlaceholder}
-                            onChange={(next) => {
-                                setOpenaiApiKey(next);
-                                if (next.length === 0) {
-                                    dirty.remove('stt.openaiApiKey');
-                                    return;
-                                }
-                                setEntry('stt.openaiApiKey', {
-                                    value: next,
-                                    original: '',
-                                    valid: true,
-                                });
-                            }}
-                        />
-                        <TextField
-                            id="stt-openai-base-url"
-                            label="Base URL (optional)"
-                            value={openaiBaseUrl}
-                            placeholder="https://api.openai.com/v1"
-                            onChange={(next) => {
-                                setOpenaiBaseUrl(next);
-                                setEntry('stt.openaiBaseUrl', {
-                                    value: next,
-                                    original: original.openaiBaseUrl ?? '',
-                                    valid: true,
-                                });
-                            }}
-                        />
-                        <TextField
-                            id="stt-openai-model"
-                            label="Model"
-                            value={openaiModel}
-                            placeholder="whisper-1"
-                            onChange={(next) => {
-                                setOpenaiModel(next);
-                                setEntry('stt.openaiModel', {
-                                    value: next,
-                                    original: original.openaiModel ?? '',
-                                    valid: true,
-                                });
-                            }}
-                        />
-                    </EngineSubsection>
+                    <SecretField
+                        id="stt-openai-key"
+                        label="API key"
+                        value={openaiApiKey}
+                        placeholder={openaiPlaceholder}
+                        onChange={(next) => {
+                            setOpenaiApiKey(next);
+                            if (next.length === 0) {
+                                dirty.remove('stt.openaiApiKey');
+                                return;
+                            }
+                            setEntry('stt.openaiApiKey', {
+                                value: next,
+                                original: '',
+                                valid: true,
+                            });
+                        }}
+                    />
+                    <TextField
+                        id="stt-openai-base-url"
+                        label="Base URL (optional)"
+                        value={openaiBaseUrl}
+                        placeholder="https://api.openai.com/v1"
+                        onChange={(next) => {
+                            setOpenaiBaseUrl(next);
+                            setEntry('stt.openaiBaseUrl', {
+                                value: next,
+                                original: original.openaiBaseUrl ?? '',
+                                valid: true,
+                            });
+                        }}
+                    />
+                    <TextField
+                        id="stt-openai-model"
+                        label="Model"
+                        value={openaiModel}
+                        placeholder="whisper-1"
+                        onChange={(next) => {
+                            setOpenaiModel(next);
+                            setEntry('stt.openaiModel', {
+                                value: next,
+                                original: original.openaiModel ?? '',
+                                valid: true,
+                            });
+                        }}
+                    />
                 </SettingsSection>
             ) : null}
 
@@ -332,22 +328,20 @@ export default function SpeechKeys({ port, client, dirty, registerSave }: Settin
                     title="Whisper (local MLX)"
                     hint="Runs on-device via mlx-whisper. No API key required."
                 >
-                    <EngineSubsection title="Model">
-                        <TextField
-                            id="stt-whisper-model"
-                            label="Model identifier"
-                            value={whisperModel}
-                            placeholder="mlx-community/whisper-large-v3-mlx"
-                            onChange={(next) => {
-                                setWhisperModel(next);
-                                setEntry('stt.whisperModel', {
-                                    value: next,
-                                    original: original.whisperModel ?? '',
-                                    valid: true,
-                                });
-                            }}
-                        />
-                    </EngineSubsection>
+                    <TextField
+                        id="stt-whisper-model"
+                        label="Model identifier"
+                        value={whisperModel}
+                        placeholder="mlx-community/whisper-large-v3-mlx"
+                        onChange={(next) => {
+                            setWhisperModel(next);
+                            setEntry('stt.whisperModel', {
+                                value: next,
+                                original: original.whisperModel ?? '',
+                                valid: true,
+                            });
+                        }}
+                    />
                 </SettingsSection>
             ) : null}
 
@@ -356,41 +350,40 @@ export default function SpeechKeys({ port, client, dirty, registerSave }: Settin
                     title="Vertex AI"
                     hint="Service-account credentials JSON for Google Cloud Vertex transcription."
                 >
-                    <EngineSubsection
-                        title="Service account"
-                        hint="Paste the service-account credentials JSON. Treated as a secret — invalid JSON refuses to save."
-                    >
-                        <JsonEditorField
-                            id="stt-vertex-config"
-                            label="Credentials JSON"
-                            value={vertexConfig}
-                            onChange={(next, valid) => {
-                                // JsonEditorField stores either parsed JSON
-                                // (valid) or the draft string (invalid). We
-                                // need a string for the dirty entry so the
-                                // server receives the raw JSON it expects.
-                                const asString =
-                                    typeof next === 'string'
-                                        ? next
-                                        : next === null || next === undefined
-                                          ? ''
-                                          : JSON.stringify(next);
-                                setVertexConfig(asString);
-                                const validity = validateVertexConfig(asString);
-                                setVertexError(valid ? null : validity.error);
-                                setEntry('stt.vertexConfig', {
-                                    value: asString,
-                                    original: original.vertexConfig ?? '',
-                                    valid: valid && validity.valid,
-                                });
-                            }}
-                        />
-                        {vertexError ? (
-                            <p className="settings-field-error" role="alert">
-                                {vertexError}
-                            </p>
-                        ) : null}
-                    </EngineSubsection>
+                    <SettingsNote>
+                        Paste the service-account credentials JSON. Treated as a
+                        secret — invalid JSON refuses to save.
+                    </SettingsNote>
+                    <JsonEditorField
+                        id="stt-vertex-config"
+                        label="Credentials JSON"
+                        value={vertexConfig}
+                        onChange={(next, valid) => {
+                            // JsonEditorField stores either parsed JSON
+                            // (valid) or the draft string (invalid). We
+                            // need a string for the dirty entry so the
+                            // server receives the raw JSON it expects.
+                            const asString =
+                                typeof next === 'string'
+                                    ? next
+                                    : next === null || next === undefined
+                                      ? ''
+                                      : JSON.stringify(next);
+                            setVertexConfig(asString);
+                            const validity = validateVertexConfig(asString);
+                            setVertexError(valid ? null : validity.error);
+                            setEntry('stt.vertexConfig', {
+                                value: asString,
+                                original: original.vertexConfig ?? '',
+                                valid: valid && validity.valid,
+                            });
+                        }}
+                    />
+                    {vertexError ? (
+                        <SettingsNote tone="error" role="alert">
+                            {vertexError}
+                        </SettingsNote>
+                    ) : null}
                 </SettingsSection>
             ) : null}
 
@@ -398,10 +391,10 @@ export default function SpeechKeys({ port, client, dirty, registerSave }: Settin
                 title="Probe"
                 hint="A live mic-test isn't available yet — verify by triggering speech-to-text from the active channel."
             >
-                <p className="settings-section-hint">
+                <SettingsNote>
                     No backend self-test endpoint is exposed for speech today;
                     this lands as a Phase 9 polish.
-                </p>
+                </SettingsNote>
             </SettingsSection>
         </form>
     );

package/public/manager/src/settings/pages/TelegramHub.tsx

@@ -7,7 +7,16 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { SettingsPageProps } from '../types';
 import { ToggleField, SecretField, TextField } from '../fields';
-import { SettingsSection, PageError, PageLoading, usePageSnapshot } from './page-shell';
+import {
+    SettingsSection,
+    PageError,
+    PageLoading,
+    usePageSnapshot,
+    SettingsKeyValue,
+    SettingsNote,
+    StatusBadge,
+} from './page-shell';
+import type { StatusTone } from './page-shell';
 
 // Local mirror of MANAGED_INSTANCE_PORT_FROM/TO (src/manager/constants.ts). The frontend
 // bundle must not import server modules; the backend validates the real range authoritatively.
@@ -119,8 +128,41 @@ export default function TelegramHub({ port, client, dirty, registerSave, manager
     if (loadError) return <PageError message={loadError} />;
     if (!config) return <PageLoading label="Loading Telegram hub…" />;
 
+    const runtimeTone: StatusTone =
+        runtime?.state === 'polling' ? 'ok'
+            : runtime?.state === 'starting' ? 'warn'
+                : runtime?.state === 'error' ? 'error'
+                    : 'neutral';
+
     return (
         <form className="settings-page-form settings-form" onSubmit={(e) => { e.preventDefault(); void onSave(); }}>
+            <SettingsSection title="Status" hint="Live hub runtime reported by the manager.">
+                <SettingsKeyValue
+                    items={[
+                        {
+                            label: 'Hub',
+                            value: enabled ? (
+                                <StatusBadge tone="ok">Enabled</StatusBadge>
+                            ) : (
+                                <StatusBadge tone="neutral">Disabled</StatusBadge>
+                            ),
+                        },
+                        ...(runtime
+                            ? [{
+                                label: 'Runtime',
+                                value: <StatusBadge tone={runtimeTone}>{runtime.state}</StatusBadge>,
+                            }]
+                            : []),
+                        ...(runtime?.chatId
+                            ? [{ label: 'Bound chat', value: runtime.chatId, mono: true }]
+                            : []),
+                    ]}
+                />
+                {runtime?.error ? (
+                    <SettingsNote tone="error" role="alert">{runtime.error}</SettingsNote>
+                ) : null}
+            </SettingsSection>
+
             <SettingsSection title="Telegram hub" hint="One dashboard-owned bot routes Telegram chat topics to instances 3457–3506.">
                 <ToggleField
                     id="hub-enabled" label="Enable hub" value={enabled}
@@ -135,11 +177,6 @@ export default function TelegramHub({ port, client, dirty, registerSave, manager
                     id="hub-chat-id" label="Hub chat ID" value={chatId} placeholder="823… or -100…"
                     onChange={(next) => { setChatId(next); dirty.set('hub.chatId', { value: next, original: config.chatId, valid: true }); }}
                 />
-                {runtime ? (
-                    <p className="settings-help">
-                        Runtime: {runtime.state}{runtime.chatId ? ` · ${runtime.chatId}` : ''}{runtime.error ? ` · ${runtime.error}` : ''}
-                    </p>
-                ) : null}
                 <label className="settings-field" htmlFor="hub-default-port">
                     <span className="settings-field-label">Default port</span>
                     <input
@@ -155,21 +192,31 @@ export default function TelegramHub({ port, client, dirty, registerSave, manager
 
             <SettingsSection title="Topic routes" hint="(chatId, threadId) → instance port. Bind in a bot private topic or group topic with /setthread <port>.">
                 {config.routes.length === 0 ? (
-                    <p className="settings-empty">No routes yet.</p>
+                    <SettingsNote>No routes yet.</SettingsNote>
                 ) : (
-                    <table className="settings-table">
-                        <thead><tr><th>Thread</th><th>Port</th><th>Label</th><th>Model</th><th>Prompt</th><th>On</th><th /></tr></thead>
-                        <tbody>
-                            {config.routes.map((r) => (
-                                <tr key={`${r.chatId}:${r.threadId}`}>
-                                    <td>{r.threadId}</td><td>{r.port}</td><td>{r.label || '—'}</td>
-                                    <td>{r.model || '—'}</td><td>{r.systemPrompt ? '✓' : '—'}</td>
-                                    <td>{r.enabled ? '✓' : '—'}</td>
-                                    <td><button type="button" onClick={() => void removeRoute(r)}>Delete</button></td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                    <div className="settings-card-scroll">
+                        <table className="settings-overrides-table">
+                            <thead><tr><th>Thread</th><th>Port</th><th>Label</th><th>Model</th><th>Prompt</th><th>On</th><th /></tr></thead>
+                            <tbody>
+                                {config.routes.map((r) => (
+                                    <tr key={`${r.chatId}:${r.threadId}`}>
+                                        <td>{r.threadId}</td><td>{r.port}</td><td>{r.label || '—'}</td>
+                                        <td>{r.model || '—'}</td><td>{r.systemPrompt ? '✓' : '—'}</td>
+                                        <td>{r.enabled ? '✓' : '—'}</td>
+                                        <td>
+                                            <button
+                                                type="button"
+                                                className="settings-action settings-action-danger"
+                                                onClick={() => void removeRoute(r)}
+                                            >
+                                                Delete
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
                 )}
             </SettingsSection>
         </form>

package/public/manager/src/settings/pages/components/AvatarCard.tsx

@@ -6,6 +6,7 @@
 // page-level dirty store: uploads are atomic side-effects, not pending edits.
 
 import { useEffect, useRef, useState } from 'react';
+import { icon } from '../../../../../js/icons';
 
 type AvatarKind = 'agent' | 'user';
 
@@ -123,9 +124,11 @@ export function AvatarCard({ kind, port }: Props) {
                 ) : kind === 'agent' ? (
                     <img className="settings-avatar-mascot" src="/icons/mascot.png" alt="" aria-hidden="true" />
                 ) : (
-                    <span className="settings-avatar-placeholder" aria-hidden="true">
-                        👤
-                    </span>
+                    <span
+                        className="settings-avatar-placeholder"
+                        aria-hidden="true"
+                        dangerouslySetInnerHTML={{ __html: icon('user', 28) }}
+                    />
                 )}
             </div>
             <div className="settings-avatar-controls">
@@ -143,7 +146,7 @@ export function AvatarCard({ kind, port }: Props) {
                 <div className="settings-avatar-buttons">
                     <button
                         type="button"
-                        className="settings-action settings-action-secondary"
+                        className="settings-action"
                         onClick={onPick}
                         disabled={busy}
                     >
@@ -152,7 +155,7 @@ export function AvatarCard({ kind, port }: Props) {
                     {imageUrl ? (
                         <button
                             type="button"
-                            className="settings-action settings-action-discard"
+                            className="settings-action settings-action-danger"
                             onClick={() => void onClear()}
                             disabled={busy}
                         >
@@ -161,9 +164,7 @@ export function AvatarCard({ kind, port }: Props) {
                     ) : null}
                 </div>
                 {error ? (
-                    <span className="settings-field-error" role="alert">
-                        {error}
-                    </span>
+                    <p className="settings-field-error" role="alert">{error}</p>
                 ) : null}
             </div>
         </div>

package/public/manager/src/settings/pages/components/ChannelSetupEntry.tsx

@@ -24,13 +24,13 @@ export function ChannelSetupEntry({ channel, client, dirty, open, onOpenChange,
     }, [client, dirty, key]);
     const pendingDraft = !open && dirty.isDirty();
     return <>
-        <button ref={trigger} type="button" data-onboard-channel={channel}
+        <button ref={trigger} type="button" className="settings-action" data-onboard-channel={channel}
             disabled={disabled || open || pendingDraft} onClick={() => {
                 if (disabled || dirty.isDirty()) return;
                 dirty.set(key, { value: true, original: false, valid: false });
                 onOpenChange(true);
             }}>{t('onboarding.open')}</button>
-        {pendingDraft && <p className="settings-field-hint">Save or discard your changes before opening setup.</p>}
+        {pendingDraft && <span className="settings-field-hint">Save or discard your changes before opening setup.</span>}
         {open && <ChannelSetupDialog key={channel} channel={channel} client={client} t={t}
             initialDraft={{}} returnFocus={trigger.current}
             onBeforeSave={() => async () => {

package/public/manager/src/settings/pages/components/EmployeeRow.tsx

@@ -5,6 +5,7 @@
 
 import { useId } from 'react';
 import { TextField, ToggleField, SelectField } from '../../fields';
+import { SettingsSection, SettingsActions } from '../page-shell';
 import type { EmployeeRecord } from './employees-helpers';
 import { DEFAULT_CLI_OPTIONS } from './employees-helpers';
 import { metaFor } from './agent/agent-meta';
@@ -49,14 +50,7 @@ export function EmployeeRow({
     const renderedNameError = nameError ?? dupeError;
 
     return (
-        <fieldset
-            className="settings-employee-row"
-            aria-label={`Employee ${index + 1}${employee.name ? ` (${employee.name})` : ''}`}
-        >
-            <legend className="settings-employee-legend">
-                {employee.name || `Employee ${index + 1}`}
-            </legend>
-
+        <SettingsSection title={employee.name || `Employee ${index + 1}`}>
             <ToggleField
                 id={`${idBase}-active`}
                 label="Active"
@@ -103,16 +97,16 @@ export function EmployeeRow({
                 />
             </label>
 
-            <div className="settings-employee-footer">
+            <SettingsActions>
                 <button
                     type="button"
-                    className="settings-action settings-action-discard"
+                    className="settings-action settings-action-danger"
                     onClick={onRemove}
                     aria-label={`Remove employee ${employee.name || index + 1}`}
                 >
                     Remove
                 </button>
-            </div>
-        </fieldset>
+            </SettingsActions>
+        </SettingsSection>
     );
 }

package/public/manager/src/settings/pages/components/HealthBadge.tsx

@@ -9,6 +9,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { SettingsClient } from '../../types';
 import { SettingsRequestError } from '../../settings-client';
+import { StatusBadge } from '../page-shell';
+import type { StatusTone } from '../page-shell';
 
 export type HealthState =
     | { kind: 'idle' }
@@ -66,21 +68,24 @@ export function HealthBadge({ client, label, endpoint, method = 'GET', interpret
         };
     }, [auto, probe]);
 
+    const tone: StatusTone =
+        state.kind === 'ok' ? 'ok'
+            : state.kind === 'degraded' ? 'warn'
+                : state.kind === 'error' ? 'error'
+                    : 'neutral';
     return (
-        <div className="settings-health-badge" role="status" aria-live="polite">
+        <div className="settings-health-badge settings-card-toolbar" role="status" aria-live="polite">
             <button
                 type="button"
-                className="settings-action settings-action-discard"
+                className="settings-action"
                 onClick={() => void probe()}
                 disabled={state.kind === 'checking'}
             >
                 {state.kind === 'checking' ? 'Checking…' : `Check ${label}`}
             </button>
-            <span className={`settings-health-pill is-${state.kind}`}>
-                {pillLabel(state)}
-            </span>
+            <StatusBadge tone={tone}>{pillLabel(state)}</StatusBadge>
             {detailFor(state) ? (
-                <span className="settings-health-detail">{detailFor(state)}</span>
+                <span className="settings-health-detail settings-field-hint">{detailFor(state)}</span>
             ) : null}
         </div>
     );