@modesto_ma/dsh-channels 0.5.0-beta.3 → 0.5.0-beta.5

package/src/client/panel/credentials-card.tsx

@@ -1,16 +1,106 @@
 /**
- * 飞书应用凭据编辑器：值经 Host 的 DSH 凭据服务写入本机凭据库，面板只显示
- * 「已配置 / 未配置」，两个方向都不回显已存值。保存动作由页面外壳持有
- * （凭据保存独立于配置 draft）。
+ * 凭据行：值经 Host 的 DSH 凭据服务写入本机凭据库，面板只显示「已配置 /
+ * 未配置」，两个方向都不回显已存值。已配置时只显示「更换 / 移除」，点「更换」
+ * 才出现输入框。保存动作由页面外壳持有（凭据保存独立于配置 draft）。
  *
  * @module dsh-channels/client/panel/credentials-card
  */
 
+import { useEffect, useRef, useState } from 'react'
 import { PANEL_COPY } from '../../settings/contract.ts'
-import type { CredentialField, CredentialRefWire, PanelWire } from '../../settings/contract.ts'
-import type { CredentialsView } from './shared.tsx'
+import type { CredentialRefWire, FieldIssueWire, PanelWire } from '../../settings/contract.ts'
+import { Pill, Row, Section } from './shared.tsx'
+import type { BusyAction, CredentialsView } from './shared.tsx'
 
-export function CredentialsCard(props: {
+/** One credential slot as a setting row with its own input and actions. */
+export function CredentialRow(props: {
+  label: string
+  summary?: string
+  state: CredentialRefWire
+  value: string
+  secret: boolean
+  placeholder: string
+  issue?: FieldIssueWire
+  busy: BusyAction | null
+  disabled: boolean
+  onChange: (value: string) => void
+  onSave: () => void
+  onClear: () => void
+}): JSX.Element {
+  const { label, summary, state, value, secret, placeholder, issue, busy, disabled, onChange, onSave, onClear } = props
+  const [editing, setEditing] = useState(false)
+  // Close the replace input once a credential save finishes (the shell clears the value).
+  const previousBusy = useRef(busy)
+  useEffect(() => {
+    if (previousBusy.current === 'credentials' && busy === null) setEditing(false)
+    previousBusy.current = busy
+  }, [busy])
+  const showInput = !state.configured || editing || value !== ''
+  const source = `${PANEL_COPY.credentialStore} · ${state.ref}${state.source === undefined ? '' : ` · ${state.source}`}`
+  return (
+    <Row
+      label={label}
+      tags={(
+        <Pill tone={state.configured ? 'ok' : 'muted'}>
+          {state.configured ? PANEL_COPY.credentialConfigured : PANEL_COPY.credentialMissing}
+        </Pill>
+      )}
+      summary={summary === undefined ? <span className="dsh-channels-cfg__mono">{source}</span> : summary}
+      error={issue?.message ?? (state.writable ? undefined : PANEL_COPY.credentialReadOnly)}
+      control={showInput
+        ? (
+            <div className="dsh-channels-cfg__inputRow">
+              <input
+                type={secret ? 'password' : 'text'}
+                className={`dsh-channels-cfg__input dsh-channels-cfg__input--text${issue === undefined ? '' : ' dsh-channels-cfg__input--invalid'}`}
+                value={value}
+                placeholder={placeholder}
+                autoComplete="new-password"
+                aria-label={label}
+                disabled={disabled}
+                onChange={event => onChange(event.target.value)}
+              />
+              <button
+                type="button"
+                className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+                disabled={disabled || value.trim() === ''}
+                onClick={onSave}
+              >
+                {busy === 'credentials' ? PANEL_COPY.savingCredentials : PANEL_COPY.saveCredentials}
+              </button>
+              {state.configured
+                ? (
+                    <button
+                      type="button"
+                      className="dsh-channels-cfg__btn dsh-channels-cfg__btn--ghost"
+                      disabled={busy !== null}
+                      onClick={() => {
+                        setEditing(false)
+                        onChange('')
+                      }}
+                    >
+                      {PANEL_COPY.cancel}
+                    </button>
+                  )
+                : null}
+            </div>
+          )
+        : (
+            <div className="dsh-channels-cfg__inputRow">
+              <button type="button" className="dsh-channels-cfg__btn" disabled={disabled} onClick={() => setEditing(true)}>
+                {PANEL_COPY.replaceCredential}
+              </button>
+              <button type="button" className="dsh-channels-cfg__btn dsh-channels-cfg__btn--remove" disabled={disabled} onClick={onClear}>
+                {busy === 'credentials-clear' ? PANEL_COPY.removingCredential : PANEL_COPY.removeCredential}
+              </button>
+            </div>
+          )}
+    />
+  )
+}
+
+/** The Feishu application pair (App ID / App Secret). */
+export function CredentialsSection(props: {
   panel: PanelWire
   credentials: CredentialsView
 }): JSX.Element {
@@ -18,87 +108,34 @@ export function CredentialsCard(props: {
   const { appId, appSecret, issues, busy, locked, onAppIdChange, onAppSecretChange, onSave, onClear } = credentials
   const appIdState = panel.config.credentials.appId
   const appSecretState = panel.config.credentials.appSecret
-  const configured = appIdState.configured && appSecretState.configured
-  const writable = appIdState.writable || appSecretState.writable
-  const disabled = busy !== null || locked || !writable
-  const pending = appId.trim() !== '' || appSecret.trim() !== ''
-
-  const row = (
-    field: CredentialField,
-    label: string,
-    state: CredentialRefWire,
-    value: string,
-    type: 'text' | 'password',
-    placeholder: string,
-    onChange: (next: string) => void,
-  ): JSX.Element => {
-    const issue = issues.find(item => item.key === field)
-    const inputClass = `dsh-channels-cfg__input${issue === undefined ? '' : ' dsh-channels-cfg__input--invalid'}`
-    return (
-      <div className="dsh-channels-cfg__field" key={field}>
-        <div className="dsh-channels-cfg__labelRow">
-          <span className="dsh-channels-cfg__label">{label}</span>
-          <span className={`dsh-channels-cfg__badge dsh-channels-cfg__badge--${state.configured ? 'ok' : 'bad'}`}>
-            {state.configured ? PANEL_COPY.credentialConfigured : PANEL_COPY.credentialMissing}
-          </span>
-        </div>
-        <div className="dsh-channels-cfg__cred">
-          <input
-            type={type}
-            className={inputClass}
-            value={value}
-            placeholder={placeholder}
-            autoComplete="new-password"
-            aria-label={label}
-            disabled={disabled}
-            onChange={event => onChange(event.target.value)}
-          />
-          {state.configured
-            ? (
-                <button
-                  type="button"
-                  className="dsh-channels-cfg__btn"
-                  disabled={disabled}
-                  onClick={() => onClear(field)}
-                >
-                  {busy === 'credentials-clear' ? PANEL_COPY.removingCredential : PANEL_COPY.removeCredential}
-                </button>
-              )
-            : null}
-        </div>
-        <span className="dsh-channels-cfg__help">
-          {PANEL_COPY.credentialsRef}：<span className="dsh-channels-cfg__mono">{state.ref}</span>
-          {state.source === undefined ? '' : ` · ${state.source}`}
-        </span>
-        {issue === undefined ? null : <span className="dsh-channels-cfg__fieldError">{issue.message}</span>}
-      </div>
-    )
-  }
-
   return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.credentialsCard}</span>
-        <span className={`dsh-channels-cfg__badge dsh-channels-cfg__badge--${configured ? 'ok' : 'muted'}`}>
-          {configured ? PANEL_COPY.configuredBadge : PANEL_COPY.unconfiguredBadge}
-        </span>
-      </div>
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.credentialsCardHelp}</span>
-      {row('appId', PANEL_COPY.appIdLabel, appIdState, appId, 'text', PANEL_COPY.appIdPlaceholder, onAppIdChange)}
-      {row('appSecret', PANEL_COPY.appSecretLabel, appSecretState, appSecret, 'password', PANEL_COPY.appSecretPlaceholder, onAppSecretChange)}
-      {writable ? null : <span className="dsh-channels-cfg__fieldError">{PANEL_COPY.credentialReadOnly}</span>}
-      <div className="dsh-channels-cfg__footer">
-        <button
-          type="button"
-          className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
-          onClick={onSave}
-          disabled={disabled || !pending}
-        >
-          {busy === 'credentials' ? PANEL_COPY.savingCredentials : PANEL_COPY.saveCredentials}
-        </button>
-        <span className="dsh-channels-cfg__spacer" />
-        <span className="dsh-channels-cfg__help">{PANEL_COPY.credentialsPendingHint}</span>
-      </div>
-    </section>
+    <Section title={PANEL_COPY.credentialsTitle} footnote={PANEL_COPY.credentialsHint}>
+      <CredentialRow
+        label={PANEL_COPY.appIdLabel}
+        state={appIdState}
+        value={appId}
+        secret={false}
+        placeholder={PANEL_COPY.appIdPlaceholder}
+        issue={issues.find(item => item.key === 'appId')}
+        busy={busy}
+        disabled={busy !== null || locked || !appIdState.writable}
+        onChange={onAppIdChange}
+        onSave={onSave}
+        onClear={() => onClear('appId')}
+      />
+      <CredentialRow
+        label={PANEL_COPY.appSecretLabel}
+        state={appSecretState}
+        value={appSecret}
+        secret
+        placeholder={PANEL_COPY.appSecretPlaceholder}
+        issue={issues.find(item => item.key === 'appSecret')}
+        busy={busy}
+        disabled={busy !== null || locked || !appSecretState.writable}
+        onChange={onAppSecretChange}
+        onSave={onSave}
+        onClear={() => onClear('appSecret')}
+      />
+    </Section>
   )
 }

package/src/client/panel/fields-tab.tsx

@@ -0,0 +1,27 @@
+/**
+ * Tabs made only of Host fields (「会话」「模型」「附件与工具」): one titled
+ * section per field group the tab owns (`TAB_FIELD_GROUPS`).
+ *
+ * @module dsh-channels/client/panel/fields-tab
+ */
+
+import type { ReactNode } from 'react'
+import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import type { FieldGroup, PanelTabId } from '../../settings/contract.ts'
+import { FieldSections } from './shared.tsx'
+import type { FormView } from './shared.tsx'
+
+/** Footnotes under one group's section, per group. */
+const FOOTNOTES: Partial<Record<FieldGroup, ReactNode>> = {
+  model: PANEL_COPY.modelFootnote,
+}
+
+export function FieldsTab(props: { form: FormView; tab: PanelTabId; note?: string }): JSX.Element {
+  const { form, tab, note } = props
+  return (
+    <div className="dsh-channels-cfg__tabBody">
+      {note === undefined ? null : <p className="dsh-channels-cfg__secFoot">{note}</p>}
+      <FieldSections form={form} groups={TAB_FIELD_GROUPS[tab]} footnotes={FOOTNOTES} />
+    </div>
+  )
+}

package/src/client/panel/index.tsx

@@ -1,6 +1,6 @@
 /**
- * 设置 →「飞书渠道」页面：数据加载、5 秒状态轮询、全局 draft 与顶部状态头 /
- * tab 导航的外壳。
+ * 设置 →「飞书渠道」页面：数据加载、5 秒状态轮询、全局 draft、顶部状态头 /
+ * tab 导航与底部保存条的外壳。
  *
  * 所有 Host 交互（panel / status / catalog / config / credentials / access /
  * pick-directory）都集中在这里；tab 组件只接收渲染所需的数据与
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { KeyboardEvent } from 'react'
 import { PANEL_COPY, PANEL_TABS, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
 import type {
+  AccessMutationResponse,
   AccessWire,
   CatalogWire,
   ChannelStatusWire,
@@ -28,6 +29,7 @@ import type {
 import {
   addAccessGroup,
   addAccessUser,
+  addWikiUser,
   clearConfig,
   clearCredential,
   fetchCatalog,
@@ -37,6 +39,7 @@ import {
   reconnect,
   removeAccessGroup,
   removeAccessUser,
+  removeWikiUser,
   resolveAccessRequest,
   saveConfig,
   saveCredentials,
@@ -45,24 +48,26 @@ import { applyCatalogFields, catalogFromFields } from '../catalog.ts'
 import { AccessTab } from './access-tab.tsx'
 import { AdvancedTab } from './advanced-tab.tsx'
 import { ConnectionTab } from './connection-tab.tsx'
-import { ModelTab } from './model-tab.tsx'
-import { SessionsTab } from './sessions-tab.tsx'
+import { FieldsTab } from './fields-tab.tsx'
 import {
   fieldLabel,
+  formatUptime,
   messageOf,
   NoticeBar,
   phaseBadge,
-  phaseSummary,
+  Pill,
+  SaveBar,
   validateDraft,
 } from './shared.tsx'
 import type {
+  AnalyzeTokenView,
   BusyAction,
   CredentialsView,
   FormView,
   LoadState,
   Notice,
 } from './shared.tsx'
-import { WorkspaceTab } from './workspace-tab.tsx'
+import { WikiTab } from './wiki-tab.tsx'
 
 /** Owner props handed to a `settings.section` contribution (unused beyond parity). */
 export interface FeishuChannelsSectionProps {
@@ -80,6 +85,7 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
   const [pollError, setPollError] = useState<string | null>(null)
   const [appIdInput, setAppIdInput] = useState('')
   const [appSecretInput, setAppSecretInput] = useState('')
+  const [analyzeTokenInput, setAnalyzeTokenInput] = useState('')
   const [catalog, setCatalog] = useState<CatalogWire | null>(null)
   const [catalogBusy, setCatalogBusy] = useState(false)
   const [accessNotice, setAccessNotice] = useState<string | null>(null)
@@ -106,6 +112,7 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
       setDraft({})
       setAppIdInput('')
       setAppSecretInput('')
+      setAnalyzeTokenInput('')
     } catch (error) {
       setLoad({ phase: 'error', message: messageOf(error) })
     }
@@ -309,24 +316,14 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
     }
   }, [draft, panel])
 
-  /** Drop the draft keys owned by one tab (nothing is written). */
-  const discardTab = useCallback((tab: PanelTabId): void => {
+  /** Drop the whole draft (nothing is written). */
+  const discardDraft = useCallback((): void => {
     if (panel === null) return
-    const groups = new Set<string>(TAB_FIELD_GROUPS[tab])
-    const keys = new Set(
-      panel.config.fields.filter(field => groups.has(field.group)).map(field => field.key),
-    )
-    setDraft((previous) => {
-      const next = { ...previous }
-      for (const key of keys) delete next[key]
-      return next
-    })
+    setDraft({})
     setNotice(null)
-    if (tab === 'model') {
-      catalogTicket.current += 1
-      setCatalog(catalogFromFields(panel.config.fields))
-      setCatalogBusy(false)
-    }
+    catalogTicket.current += 1
+    setCatalog(catalogFromFields(panel.config.fields))
+    setCatalogBusy(false)
   }, [panel])
 
   /**
@@ -352,6 +349,10 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
 
   /** Drop every Web override and return the refreshed panel. */
   const onClear = useCallback(async (): Promise<void> => {
+    const confirmed = typeof window.confirm === 'function'
+      ? window.confirm(PANEL_COPY.clearConfirm)
+      : true
+    if (!confirmed) return
     setBusy('clear')
     setNotice(null)
     try {
@@ -453,18 +454,24 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
     }
   }, [applyAccess])
 
-  const onAddAccessUser = useCallback(async (userId: string, name: string): Promise<boolean> => {
+  /** Add one user to a whitelist; resolves true when the input should clear. */
+  const addUser = useCallback(async (
+    add: (userId: string, name: string) => Promise<AccessMutationResponse>,
+    userId: string,
+    name: string,
+    notice: string,
+  ): Promise<boolean> => {
     setBusy('access')
     setAccessError(null)
     setAccessNotice(null)
     try {
-      const result = await addAccessUser(userId, name)
+      const result = await add(userId, name)
       if (!result.ok) {
         setAccessError(result.error)
         return false
       }
       applyAccess(result.access)
-      setAccessNotice(PANEL_COPY.accessUserAdded)
+      setAccessNotice(notice)
       return true
     } catch (error) {
       setAccessError(messageOf(error))
@@ -474,18 +481,22 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
     }
   }, [applyAccess])
 
-  const onRemoveAccessUser = useCallback(async (userId: string): Promise<void> => {
+  const removeUser = useCallback(async (
+    remove: (userId: string) => Promise<AccessMutationResponse>,
+    userId: string,
+    notice: string,
+  ): Promise<void> => {
     setBusy('access')
     setAccessError(null)
     setAccessNotice(null)
     try {
-      const result = await removeAccessUser(userId)
+      const result = await remove(userId)
       if (!result.ok) {
         setAccessError(result.error)
         return
       }
       applyAccess(result.access)
-      setAccessNotice(PANEL_COPY.accessUserRemoved)
+      setAccessNotice(notice)
     } catch (error) {
       setAccessError(messageOf(error))
     } finally {
@@ -552,6 +563,28 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
     }
   }, [appIdInput, appSecretInput])
 
+  /** Save the analyze API token; it applies to the next request, no reconnect. */
+  const onSaveAnalyzeToken = useCallback(async (): Promise<void> => {
+    if (analyzeTokenInput.trim() === '') return
+    setBusy('credentials')
+    setNotice(null)
+    try {
+      const result = await saveCredentials({ analyzeToken: analyzeTokenInput })
+      if (!result.ok) {
+        setNotice({ kind: 'error', text: result.error, issues: result.issues })
+        return
+      }
+      setLoad({ phase: 'ready', panel: result.panel })
+      setStatus(result.panel.status)
+      setAnalyzeTokenInput('')
+      setNotice({ kind: 'ok', text: PANEL_COPY.analyzeTokenSaved })
+    } catch (error) {
+      setNotice({ kind: 'error', text: messageOf(error) })
+    } finally {
+      setBusy(null)
+    }
+  }, [analyzeTokenInput])
+
   const onClearCredential = useCallback(async (field: CredentialField): Promise<void> => {
     const confirmed = typeof window.confirm === 'function'
       ? window.confirm(PANEL_COPY.credentialRemoveConfirm)
@@ -569,7 +602,9 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
       setStatus(result.panel.status)
       setNotice({
         kind: 'ok',
-        text: result.reconnect === 'pending' ? PANEL_COPY.credentialRemovedPending : PANEL_COPY.credentialRemoved,
+        text: field === 'analyzeToken'
+          ? PANEL_COPY.analyzeTokenRemoved
+          : result.reconnect === 'pending' ? PANEL_COPY.credentialRemovedPending : PANEL_COPY.credentialRemoved,
       })
     } catch (error) {
       setNotice({ kind: 'error', text: messageOf(error) })
@@ -583,6 +618,10 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
     [notice],
   )
   const dirtyCount = Object.keys(draft).length
+  const restartCount = useMemo(
+    () => (panel?.config.fields ?? []).filter(field => field.restartRequired && field.key in draft).length,
+    [draft, panel],
+  )
 
   /** Which tabs currently own a dirty key (the dot is per tab, not global). */
   const dirtyTabs = useMemo<ReadonlySet<PanelTabId>>(() => {
@@ -608,13 +647,10 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
       issues,
       busy,
       locked: hostBusy,
-      dirtyCount,
       onChange: updateDraft,
-      onSave: () => { void onSave() },
-      onDiscardTab: discardTab,
       onPickDirectory,
     }
-  }, [busy, discardTab, dirtyCount, draft, hostBusy, issues, onPickDirectory, onSave, panel, renderedFields, updateDraft])
+  }, [busy, draft, hostBusy, issues, onPickDirectory, panel, renderedFields, updateDraft])
 
   const credentials = useMemo<CredentialsView>(() => ({
     appId: appIdInput,
@@ -628,6 +664,16 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
     onClear: (field: CredentialField) => { void onClearCredential(field) },
   }), [appIdInput, appSecretInput, busy, hostBusy, issues, onClearCredential, onSaveCredentials])
 
+  const analyzeToken = useMemo<AnalyzeTokenView>(() => ({
+    value: analyzeTokenInput,
+    issues,
+    busy,
+    locked: hostBusy,
+    onChange: setAnalyzeTokenInput,
+    onSave: () => { void onSaveAnalyzeToken() },
+    onClear: () => { void onClearCredential('analyzeToken') },
+  }), [analyzeTokenInput, busy, hostBusy, issues, onClearCredential, onSaveAnalyzeToken])
+
   if (load.phase === 'loading') {
     return (
       <div className="dsh-channels-cfg">
@@ -662,8 +708,14 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
         locked={hostBusy}
         onRefresh={() => { void onRefresh() }}
       />
-      <TabNav activeTab={activeTab} dirtyTabs={dirtyTabs} onChange={setActiveTab} />
-      {notice === null ? null : <NoticeBar notice={notice} />}
+      <TabNav
+        activeTab={activeTab}
+        dirtyTabs={dirtyTabs}
+        counts={{ access: load.panel.access.loaded ? load.panel.access.requests.length : 0 }}
+        onChange={setActiveTab}
+      />
+      {load.panel.access.mode === 'open' ? <div className="dsh-channels-cfg__banner">{PANEL_COPY.debugModeWarning}</div> : null}
+      {notice === null ? null : <NoticeBar kind={notice.kind} text={notice.text} />}
       <div
         role="tabpanel"
         id={`dsh-channels-tabpanel-${activeTab}`}
@@ -680,13 +732,11 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
               />
             )
           : null}
-        {activeTab === 'sessions' ? <SessionsTab form={form} /> : null}
-        {activeTab === 'model' ? <ModelTab form={form} catalogBusy={catalogBusy} /> : null}
-        {activeTab === 'workspace'
-          ? (
-              <WorkspaceTab form={form} />
-            )
+        {activeTab === 'sessions' ? <FieldsTab form={form} tab="sessions" /> : null}
+        {activeTab === 'model'
+          ? <FieldsTab form={form} tab="model" note={catalogBusy ? PANEL_COPY.catalogLoading : undefined} />
           : null}
+        {activeTab === 'attachments' ? <FieldsTab form={form} tab="attachments" /> : null}
         {activeTab === 'access'
           ? (
               <AccessTab
@@ -695,21 +745,40 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
                 accessError={accessError}
                 onAddGroup={onAddAccessGroup}
                 onRemoveGroup={chatId => { void onRemoveAccessGroup(chatId) }}
-                onAddUser={onAddAccessUser}
-                onRemoveUser={userId => { void onRemoveAccessUser(userId) }}
+                onAddUser={(userId, name) => addUser(addAccessUser, userId, name, PANEL_COPY.accessUserAdded)}
+                onRemoveUser={userId => { void removeUser(removeAccessUser, userId, PANEL_COPY.accessUserRemoved) }}
                 onResolveRequest={(token, decision) => { void onResolveAccessRequest(token, decision) }}
               />
             )
           : null}
+        {activeTab === 'wiki'
+          ? (
+              <WikiTab
+                form={form}
+                accessNotice={accessNotice}
+                accessError={accessError}
+                onAddUser={(userId, name) => addUser(addWikiUser, userId, name, PANEL_COPY.wikiUserAdded)}
+                onRemoveUser={userId => { void removeUser(removeWikiUser, userId, PANEL_COPY.wikiUserRemoved) }}
+              />
+            )
+          : null}
         {activeTab === 'advanced'
-          ? <AdvancedTab form={form} onClear={() => { void onClear() }} />
+          ? <AdvancedTab form={form} analyzeToken={analyzeToken} onClear={() => { void onClear() }} />
           : null}
       </div>
+      <SaveBar
+        dirtyCount={dirtyCount}
+        restartCount={restartCount}
+        busy={busy}
+        locked={hostBusy}
+        onSave={() => { void onSave() }}
+        onDiscard={discardDraft}
+      />
     </div>
   )
 }
 
-/** Page header: title + phase badge + refresh, visible on every tab. */
+/** Page header: title, phase pill, version and uptime, refresh; visible on every tab. */
 function PanelHeader(props: {
   status: ChannelStatusWire
   pollError: string | null
@@ -720,24 +789,24 @@ function PanelHeader(props: {
   const { status, pollError, busy, locked, onRefresh } = props
   const badge = phaseBadge(status.phase)
   return (
-    <header className="dsh-channels-cfg__panelHead" title={PANEL_COPY.description}>
+    <header className="dsh-channels-cfg__panelHead">
       <div className="dsh-channels-cfg__headRow">
         <h2 className="dsh-channels-cfg__title">{PANEL_COPY.title}</h2>
-        <span className={`dsh-channels-cfg__badge dsh-channels-cfg__badge--${badge.tone}`}>
-          <span className="dsh-channels-cfg__dot" />
-          {badge.text}
-        </span>
+        <Pill tone={badge.tone} dot>{badge.text}</Pill>
+        <span className="dsh-channels-cfg__meta dsh-channels-cfg__mono">v{status.version}</span>
+        {status.uptimeMs === undefined
+          ? null
+          : <span className="dsh-channels-cfg__meta">· {PANEL_COPY.uptimePrefix} {formatUptime(status.uptimeMs)}</span>}
         <span className="dsh-channels-cfg__spacer" />
         <button
           type="button"
-          className="dsh-channels-cfg__btn"
+          className="dsh-channels-cfg__btn dsh-channels-cfg__btn--ghost"
           onClick={onRefresh}
           disabled={busy !== null || locked}
         >
           {PANEL_COPY.refresh}
         </button>
       </div>
-      <p className="dsh-channels-cfg__summary">{phaseSummary(status.phase)}</p>
       {pollError === null
         ? null
         : (
@@ -753,9 +822,11 @@ function PanelHeader(props: {
 function TabNav(props: {
   activeTab: PanelTabId
   dirtyTabs: ReadonlySet<PanelTabId>
+  /** Items waiting for the operator per tab (pending access requests). */
+  counts: Partial<Record<PanelTabId, number>>
   onChange: (tab: PanelTabId) => void
 }): JSX.Element {
-  const { activeTab, dirtyTabs, onChange } = props
+  const { activeTab, dirtyTabs, counts, onChange } = props
   const refs = useRef<Array<HTMLButtonElement | null>>([])
 
   /** Roving-focus keyboard navigation between tabs (WAI-ARIA tabs pattern). */
@@ -794,12 +865,12 @@ function TabNav(props: {
             onKeyDown={event => onKeyDown(index, event)}
           >
             {tab.label}
+            {(counts[tab.id] ?? 0) > 0 ? <span className="dsh-channels-cfg__tabCount">{counts[tab.id]}</span> : null}
             {dirty
               ? (
                   <span
                     className="dsh-channels-cfg__tabDot"
-                    title={PANEL_COPY.dirtyCount}
-                    aria-label={PANEL_COPY.dirtyCount}
+                    aria-hidden="true"
                   />
                 )
               : null}