@modesto_ma/dsh-channels 0.1.0 → 0.3.0

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

@@ -0,0 +1,23 @@
+/**
+ * 「模型」tab：模型服务商 / 模型 id / 推理档位 / Agent 预设四个选择器。
+ * 选项来自 Host 实时目录（页面外壳负责 provider→model→effort 级联刷新），
+ * 目录读取中时在表单上方提示。
+ *
+ * @module dsh-channels/client/panel/model-tab
+ */
+
+import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
+import type { FormView } from './shared.tsx'
+
+export function ModelTab(props: { form: FormView; catalogBusy: boolean }): JSX.Element {
+  const { form, catalogBusy } = props
+  return (
+    <div className="dsh-channels-cfg__tabBody">
+      <TabHelp text={PANEL_COPY.modelTabHelp} />
+      {catalogBusy ? <span className="dsh-channels-cfg__help">{PANEL_COPY.catalogLoading}</span> : null}
+      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.model} />
+      <SaveBar form={form} tab="model" />
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 「会话与行为」tab：行为 + 内容与附件两组字段（私聊/群聊触发方式、
+ * 首次引导、权限切换、附件接收）。表单字段完全由 Host 描述驱动。
+ *
+ * @module dsh-channels/client/panel/sessions-tab
+ */
+
+import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
+import type { FormView } from './shared.tsx'
+
+export function SessionsTab(props: { form: FormView }): JSX.Element {
+  const { form } = props
+  return (
+    <div className="dsh-channels-cfg__tabBody">
+      <TabHelp text={PANEL_COPY.sessionsTabHelp} />
+      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.sessions} />
+      <SaveBar form={form} tab="sessions" />
+    </div>
+  )
+}

package/src/client/panel/shared.tsx

@@ -0,0 +1,488 @@
+/**
+ * 设置面板共享层：页面状态类型、Host 字段渲染原语（FieldRow / FieldsCard /
+ * SaveBar）、生命周期徽标与纯格式化工具。
+ *
+ * 这一层不发请求、不持有页面状态，只把 Host 下发的 wire 数据渲染成控件；
+ * 页面外壳在 `index.tsx`，各 tab 只组合这些原语。
+ *
+ * @module dsh-channels/client/panel/shared
+ */
+
+import { useState } from 'react'
+import { FIELD_GROUP_LABELS, PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import type {
+  AccessWire,
+  ChannelPhaseWire,
+  CleanupPreviewWire,
+  ConfigValue,
+  CredentialField,
+  EditableFieldWire,
+  EditableKey,
+  EditableValues,
+  FieldGroup,
+  FieldIssueWire,
+  PanelTabId,
+  PanelWire,
+} from '../../settings/contract.ts'
+
+/** Initial panel load: one request, retried from the error card. */
+export type LoadState =
+  | { phase: 'loading' }
+  | { phase: 'error'; message: string }
+  | { phase: 'ready'; panel: PanelWire }
+
+/** One transient banner above the tab body (save/credentials/reconnect/catalog). */
+export interface Notice {
+  kind: 'ok' | 'error'
+  text: string
+  /** Per-field validation failures rendered inline by FieldRow. */
+  issues?: FieldIssueWire[]
+}
+
+/** One in-flight panel mutation (only one action runs at a time). */
+export type BusyAction =
+  | 'save'
+  | 'clear'
+  | 'reconnect'
+  | 'credentials'
+  | 'credentials-clear'
+  | 'cleanup'
+  | 'access'
+
+/** Tone of a small badge; maps onto `dsh-channels-cfg__badge--*` classes. */
+export type BadgeTone = 'ok' | 'warn' | 'bad' | 'muted'
+
+export function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+/** Human-readable byte size for the cleanup preview/result (base-2 units). */
+export function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  const digits = unit === 0 || value >= 10 ? 0 : 1
+  return `${value.toFixed(digits)} ${units[unit] ?? 'B'}`
+}
+
+/** Compact duration for the connection card. */
+export function formatUptime(ms: number | undefined): string {
+  if (ms === undefined || !Number.isFinite(ms)) return PANEL_COPY.unknownValue
+  const totalSeconds = Math.max(0, Math.floor(ms / 1_000))
+  const days = Math.floor(totalSeconds / 86_400)
+  const hours = Math.floor((totalSeconds % 86_400) / 3_600)
+  const minutes = Math.floor((totalSeconds % 3_600) / 60)
+  if (days > 0) return `${days} 天 ${hours} 小时`
+  if (hours > 0) return `${hours} 小时 ${minutes} 分`
+  if (minutes > 0) return `${minutes} 分 ${totalSeconds % 60} 秒`
+  return `${totalSeconds} 秒`
+}
+
+/** Effective value for one key (falling back to the profile base). */
+export function effectiveValue(panel: PanelWire, key: EditableKey): ConfigValue | undefined {
+  return panel.config.effective[key] ?? panel.config.base[key]
+}
+
+/** Host label for one editable key; the raw key is the technical fallback. */
+export function fieldLabel(fields: readonly EditableFieldWire[], key: EditableKey): string {
+  return fields.find(field => field.key === key)?.label ?? key
+}
+
+/** Effective access-mode label, reusing the Host field options for consistency. */
+export function accessModeLabel(panel: PanelWire, mode: AccessWire['mode']): string {
+  const field = panel.config.fields.find(item => item.key === 'accessMode')
+  return field?.options?.find(option => option.value === mode)?.label ?? mode
+}
+
+/** Numeric draft kept as the raw input string; parsed on save. */
+function numericDraft(field: EditableFieldWire, raw: ConfigValue | undefined): number | undefined {
+  if (typeof raw === 'number') return raw
+  if (typeof raw !== 'string' || raw.trim() === '') return undefined
+  const parsed = Number(raw)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
+/**
+ * Turn the dirty draft into the wire payload, keeping the Host-descriptor
+ * bounds check client-side. Field messages stay technical (the Host re-validates
+ * every value on save).
+ */
+export function validateDraft(
+  panel: PanelWire,
+  draft: EditableValues,
+): { values: EditableValues; issues: FieldIssueWire[] } {
+  const values: EditableValues = {}
+  const issues: FieldIssueWire[] = []
+  for (const field of panel.config.fields) {
+    if (!(field.key in draft)) continue
+    const raw = draft[field.key]
+    if (field.kind === 'number') {
+      const parsed = numericDraft(field, raw)
+      if (parsed === undefined) {
+        issues.push({ key: field.key, message: '请输入数字' })
+        continue
+      }
+      if (field.min !== undefined && parsed < field.min) {
+        issues.push({ key: field.key, message: `不得小于 ${field.min}` })
+        continue
+      }
+      if (field.max !== undefined && parsed > field.max) {
+        issues.push({ key: field.key, message: `不得大于 ${field.max}` })
+        continue
+      }
+      values[field.key] = parsed
+      continue
+    }
+    if (field.kind === 'boolean') {
+      values[field.key] = raw === true
+      continue
+    }
+    values[field.key] = String(raw ?? '')
+  }
+  return { values, issues }
+}
+
+/** Header badge for the Host-derived lifecycle phase. */
+export function phaseBadge(phase: ChannelPhaseWire): { text: string; tone: BadgeTone } {
+  switch (phase) {
+    case 'connected': return { text: PANEL_COPY.phaseConnected, tone: 'ok' }
+    case 'connecting': return { text: PANEL_COPY.phaseConnecting, tone: 'warn' }
+    case 'error': return { text: PANEL_COPY.phaseError, tone: 'bad' }
+    case 'idle': return { text: PANEL_COPY.phaseIdle, tone: 'muted' }
+    default: return { text: PANEL_COPY.phaseUnconfigured, tone: 'muted' }
+  }
+}
+
+/** One-line explanation shown under the page title for the current phase. */
+export function phaseSummary(phase: ChannelPhaseWire): string {
+  switch (phase) {
+    case 'connected': return PANEL_COPY.statusSummaryConnected
+    case 'connecting': return PANEL_COPY.statusSummaryConnecting
+    case 'error': return PANEL_COPY.statusSummaryError
+    case 'idle': return PANEL_COPY.statusSummaryIdle
+    default: return PANEL_COPY.statusSummaryUnconfigured
+  }
+}
+
+/** Credential editor data owned by the page shell, rendered by the connection tab. */
+export interface CredentialsView {
+  appId: string
+  appSecret: string
+  issues: FieldIssueWire[]
+  busy: BusyAction | null
+  /** Host-side lifecycle busy (connecting/restarting): block writes. */
+  locked: boolean
+  onAppIdChange: (value: string) => void
+  onAppSecretChange: (value: string) => void
+  onSave: () => void
+  onClear: (field: CredentialField) => void
+}
+
+/** Everything a field-bearing tab needs from the page shell's single draft. */
+export interface FormView {
+  panel: PanelWire
+  /** Host descriptors after the live selector catalog has been layered on. */
+  fields: readonly EditableFieldWire[]
+  draft: EditableValues
+  issues: FieldIssueWire[]
+  busy: BusyAction | null
+  /** Host-side lifecycle busy (connecting/restarting): block writes. */
+  locked: boolean
+  dirtyCount: number
+  onChange: (key: EditableKey, value: ConfigValue) => void
+  onSave: () => void
+  /** Drop only the draft keys owned by one tab. */
+  onDiscardTab: (tab: PanelTabId) => void
+  /**
+   * Open the Host's native directory chooser and write the picked absolute
+   * path into the draft (not saved until「保存更改」). Absent when the Host
+   * cannot offer a native chooser.
+   */
+  onPickDirectory?: (key: EditableKey) => Promise<void>
+}
+
+/**
+ * Text input paired with the host-native「选择目录…」button. The button owns
+ * its own busy state: the OS dialog can stay open for a long time, so the
+ * rest of the form stays usable while the operator browses.
+ */
+function DirectoryTextInput(props: {
+  field: EditableFieldWire
+  value: ConfigValue | undefined
+  inputClass: string
+  disabled: boolean
+  onChange: (key: EditableKey, value: ConfigValue) => void
+  onPick: () => Promise<void>
+}): JSX.Element {
+  const { field, value, inputClass, disabled, onChange, onPick } = props
+  const [picking, setPicking] = useState(false)
+  const pick = async (): Promise<void> => {
+    setPicking(true)
+    try {
+      await onPick()
+    } finally {
+      setPicking(false)
+    }
+  }
+  return (
+    <div className="dsh-channels-cfg__inputRow">
+      <input
+        type="text"
+        className={inputClass}
+        value={String(value ?? '')}
+        placeholder={field.placeholder}
+        aria-label={field.label}
+        disabled={disabled || picking}
+        onChange={event => onChange(field.key, event.target.value)}
+      />
+      <button
+        type="button"
+        className="dsh-channels-cfg__btn dsh-channels-cfg__btn--browse"
+        disabled={disabled || picking}
+        onClick={() => { void pick() }}
+      >
+        {picking ? PANEL_COPY.browsingDirectory : PANEL_COPY.browseDirectory}
+      </button>
+    </div>
+  )
+}
+
+/** One generic form control driven by the Host field descriptor. */
+export function FieldRow(props: {
+  field: EditableFieldWire
+  value: ConfigValue | undefined
+  issues: FieldIssueWire[]
+  disabled?: boolean
+  onChange: (key: EditableKey, value: ConfigValue) => void
+  /** Present only for `field.browse === 'directory'` rows the page can serve. */
+  onPickDirectory?: () => Promise<void>
+}): JSX.Element {
+  const { field, value, issues, disabled = false, onChange, onPickDirectory } = props
+  const issue = issues.find(item => item.key === field.key)
+  const inputClass = `dsh-channels-cfg__input${issue === undefined ? '' : ' dsh-channels-cfg__input--invalid'}`
+  const fieldClass = `dsh-channels-cfg__field${field.wide === true ? ' dsh-channels-cfg__field--wide' : ''}`
+  return (
+    <div className={fieldClass}>
+      <div className="dsh-channels-cfg__labelRow">
+        <span className="dsh-channels-cfg__label">{field.label}</span>
+        {field.restartRequired
+          ? <span className="dsh-channels-cfg__tag dsh-channels-cfg__tag--restart">{PANEL_COPY.restartTag}</span>
+          : null}
+      </div>
+      {field.kind === 'boolean'
+        ? (
+            <label className="dsh-channels-cfg__check">
+              <input
+                type="checkbox"
+                className="dsh-channels-cfg__checkbox"
+                checked={value === true}
+                aria-label={field.label}
+                disabled={disabled}
+                onChange={event => onChange(field.key, event.target.checked)}
+              />
+              <span>{value === true ? PANEL_COPY.enabled : PANEL_COPY.disabled}</span>
+            </label>
+          )
+        : null}
+      {field.kind === 'select'
+        ? (
+            <select
+              className={inputClass}
+              value={String(value ?? '')}
+              disabled={disabled || field.disabled === true}
+              aria-label={field.label}
+              onChange={event => onChange(field.key, event.target.value)}
+            >
+              {(field.options ?? []).map(option => (
+                <option key={option.value} value={option.value}>{option.label}</option>
+              ))}
+            </select>
+          )
+        : null}
+      {field.kind === 'number'
+        ? (
+            <input
+              type="number"
+              className={inputClass}
+              value={value === undefined || value === '' ? '' : String(value)}
+              min={field.min}
+              max={field.max}
+              step={field.step}
+              aria-label={field.label}
+              disabled={disabled}
+              onChange={event => onChange(field.key, event.target.value)}
+            />
+          )
+        : null}
+      {field.kind === 'text'
+        ? (field.browse === 'directory' && onPickDirectory !== undefined
+            ? (
+                <DirectoryTextInput
+                  field={field}
+                  value={value}
+                  inputClass={inputClass}
+                  disabled={disabled}
+                  onChange={onChange}
+                  onPick={onPickDirectory}
+                />
+              )
+            : (
+                <input
+                  type="text"
+                  className={inputClass}
+                  value={String(value ?? '')}
+                  placeholder={field.placeholder}
+                  aria-label={field.label}
+                  disabled={disabled}
+                  onChange={event => onChange(field.key, event.target.value)}
+                />
+              ))
+        : null}
+      {field.help === undefined ? null : <span className="dsh-channels-cfg__help">{field.help}</span>}
+      {issue === undefined ? null : <span className="dsh-channels-cfg__fieldError">{issue.message}</span>}
+    </div>
+  )
+}
+
+/**
+ * One tab's editable fields, partitioned by the Host field groups that the tab
+ * owns (`TAB_FIELD_GROUPS`). Empty groups render nothing, so a Host that moves
+ * every key out of a group does not leave a stray heading behind.
+ */
+export function FieldsCard(props: {
+  form: FormView
+  groups: readonly FieldGroup[]
+}): JSX.Element | null {
+  const { form, groups } = props
+  const sections = groups
+    .map(group => ({
+      group,
+      label: FIELD_GROUP_LABELS[group],
+      fields: form.fields.filter(field => field.group === group),
+    }))
+    .filter(section => section.fields.length > 0)
+  if (sections.length === 0) return null
+  return (
+    <section className="dsh-channels-cfg__card">
+      {sections.map(section => (
+        <div className="dsh-channels-cfg__group" key={section.group}>
+          <div className="dsh-channels-cfg__labelRow">
+            <span className="dsh-channels-cfg__cardTitle">{section.label}</span>
+          </div>
+          <div className="dsh-channels-cfg__grid">
+            {section.fields.map((field) => {
+              const onPick = form.onPickDirectory
+              return (
+                <FieldRow
+                  key={field.key}
+                  field={field}
+                  value={form.draft[field.key] ?? effectiveValue(form.panel, field.key)}
+                  issues={form.issues}
+                  disabled={form.locked}
+                  onChange={form.onChange}
+                  onPickDirectory={onPick === undefined ? undefined : () => onPick(field.key)}
+                />
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </section>
+  )
+}
+
+/** The unified per-tab action bar: save every dirty field or drop the draft. */
+export function SaveBar(props: { form: FormView; tab: PanelTabId }): JSX.Element {
+  const { form, tab } = props
+  const groups = new Set<string>(TAB_FIELD_GROUPS[tab])
+  const pageDirty = form.fields.filter(field => groups.has(field.group) && field.key in form.draft).length
+  // Saving submits the whole draft, so any dirty key (any tab) enables it;
+  // discarding only clears this tab, so it follows this tab's own count.
+  const dirty = form.dirtyCount > 0
+  const disabled = !dirty || form.busy !== null || form.locked
+  return (
+    <div className="dsh-channels-cfg__footer">
+      <button
+        type="button"
+        className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+        onClick={form.onSave}
+        disabled={disabled}
+      >
+        {form.busy === 'save' ? PANEL_COPY.saving : PANEL_COPY.save}
+      </button>
+      <button
+        type="button"
+        className="dsh-channels-cfg__btn"
+        onClick={() => form.onDiscardTab(tab)}
+        disabled={pageDirty === 0 || form.busy !== null || form.locked}
+      >
+        {PANEL_COPY.discardTab}
+      </button>
+      <span className="dsh-channels-cfg__spacer" />
+      {pageDirty > 0
+        ? (
+            <span className="dsh-channels-cfg__tag dsh-channels-cfg__tag--dirty">
+              {PANEL_COPY.dirtyCount} {pageDirty}
+            </span>
+          )
+        : dirty
+          ? (
+              <span className="dsh-channels-cfg__tag dsh-channels-cfg__tag--dirty">
+                {PANEL_COPY.dirtyCount} {form.dirtyCount}（其他标签页）
+              </span>
+            )
+          : null}
+      <span className="dsh-channels-cfg__help">
+        {dirty ? PANEL_COPY.saveHintDirty : PANEL_COPY.saveHintClean}
+      </span>
+    </div>
+  )
+}
+
+/** Muted help paragraph introducing one tab. */
+export function TabHelp(props: { text: string }): JSX.Element {
+  return <p className="dsh-channels-cfg__tabHelp">{props.text}</p>
+}
+
+/** Transient page-level banner (save / credentials / reconnect / catalog). */
+export function NoticeBar(props: { notice: Notice }): JSX.Element {
+  const { notice } = props
+  return (
+    <div
+      className={`dsh-channels-cfg__notice dsh-channels-cfg__notice--${notice.kind === 'ok' ? 'ok' : 'error'}`}
+      role="status"
+      aria-live="polite"
+    >
+      <span>{notice.text}</span>
+    </div>
+  )
+}
+
+/** Muted empty/blocked state (e.g. access lists before the channel connects). */
+export function EmptyState(props: { text: string }): JSX.Element {
+  return <div className="dsh-channels-cfg__emptyState">{props.text}</div>
+}
+
+/** Human label for the official SDK's WebSocket lifecycle state. */
+export function connectionStateLabel(state: string | undefined): { text: string; tone: BadgeTone } {
+  switch (state) {
+    case 'connected': return { text: PANEL_COPY.phaseConnected, tone: 'ok' }
+    case 'connecting': return { text: PANEL_COPY.phaseConnecting, tone: 'warn' }
+    case 'reconnecting': return { text: PANEL_COPY.phaseConnecting, tone: 'warn' }
+    case 'failed': return { text: PANEL_COPY.phaseError, tone: 'bad' }
+    case 'idle': return { text: PANEL_COPY.phaseIdle, tone: 'muted' }
+    default: return { text: state ?? PANEL_COPY.unknownValue, tone: 'muted' }
+  }
+}
+
+/** Retention label, reusing the Host field options so the copy stays on the Host. */
+export function retentionLabel(panel: PanelWire, cleanup: CleanupPreviewWire): string {
+  const field = panel.config.fields.find(item => item.key === 'workspaceRetention')
+  return field?.options?.find(option => option.value === cleanup.retention)?.label
+    ?? (cleanup.retention === 'off' ? PANEL_COPY.cleanupRetentionOff : cleanup.retention)
+}

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

@@ -0,0 +1,40 @@
+/**
+ * 「工作区」tab：工作区根目录 / 过期保留策略 / 自动清理字段 + 目录清理卡。
+ * 表单保存栏在字段卡正下方，清理卡（独立动作，不走 draft）在其后。
+ *
+ * @module dsh-channels/client/panel/workspace-tab
+ */
+
+import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import type { CleanupPreviewWire, CleanupRunWire } from '../../settings/contract.ts'
+import { CleanupCard } from './cleanup-card.tsx'
+import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
+import type { FormView } from './shared.tsx'
+
+export interface WorkspaceTabProps {
+  form: FormView
+  cleanup: CleanupPreviewWire
+  cleanupResult: CleanupRunWire | null
+  cleanupError: string | null
+  onRunCleanup: () => void
+}
+
+export function WorkspaceTab(props: WorkspaceTabProps): JSX.Element {
+  const { form, cleanup, cleanupResult, cleanupError, onRunCleanup } = props
+  return (
+    <div className="dsh-channels-cfg__tabBody">
+      <TabHelp text={PANEL_COPY.workspaceTabHelp} />
+      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.workspace} />
+      <SaveBar form={form} tab="workspace" />
+      <CleanupCard
+        panel={form.panel}
+        cleanup={cleanup}
+        busy={form.busy}
+        locked={form.locked}
+        result={cleanupResult}
+        error={cleanupError}
+        onRun={onRunCleanup}
+      />
+    </div>
+  )
+}

package/src/client/styles.ts

@@ -10,14 +10,23 @@ const STYLE_ATTRIBUTE = 'data-dsh-channels-css'
 
 const CSS = `
 .dsh-channels-cfg{container-type:inline-size;display:flex;flex-direction:column;gap:12px;width:100%;max-width:720px;color:var(--dsw-alias-label-primary,#1f2328);font-size:13px;line-height:20px}
-.dsh-channels-cfg__head{display:flex;flex-direction:column;gap:4px}
+.dsh-channels-cfg__panelHead{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:10px 0 8px;background:var(--dsw-alias-bg-base,#fff);border-bottom:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12))}
+.dsh-channels-cfg__headRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .dsh-channels-cfg__title{margin:0;font-size:16px;font-weight:500;line-height:24px}
-.dsh-channels-cfg__desc{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
+.dsh-channels-cfg__summary{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
+.dsh-channels-cfg__tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12))}
+.dsh-channels-cfg__tab{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dsw-alias-label-secondary,#5c6169);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
+.dsh-channels-cfg__tab:hover{color:var(--dsw-alias-label-primary,#1f2328)}
+.dsh-channels-cfg__tab:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0a67d3);outline-offset:-2px}
+.dsh-channels-cfg__tab[aria-selected="true"]{color:var(--dsw-alias-state-business-primary,#0a67d3);border-bottom-color:currentColor;font-weight:500}
+.dsh-channels-cfg__tabDot{width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-state-warning-primary,#a15c00);flex:none}
+.dsh-channels-cfg__tabBody{display:flex;flex-direction:column;gap:12px}
+.dsh-channels-cfg__tabHelp{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
 .dsh-channels-cfg__card{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:12px}
 .dsh-channels-cfg__cardHead{display:flex;align-items:center;gap:8px;min-height:20px;flex-wrap:wrap}
 .dsh-channels-cfg__cardTitle{font-size:13px;font-weight:500}
 .dsh-channels-cfg__cardMeta{margin-left:auto;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px}
-.dsh-channels-cfg__statusRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dsh-channels-cfg__group{display:flex;flex-direction:column;gap:8px}
 .dsh-channels-cfg__badge{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));font-size:12px;line-height:18px;white-space:nowrap}
 .dsh-channels-cfg__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
 .dsh-channels-cfg__badge--ok{color:var(--dsw-alias-state-business-primary,#0a7d33);border-color:currentColor}
@@ -42,29 +51,37 @@ const CSS = `
 .dsh-channels-cfg__labelRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
 .dsh-channels-cfg__label{font-size:12px;color:var(--dsw-alias-label-secondary,#5c6169)}
 .dsh-channels-cfg__tag{display:inline-flex;align-items:center;padding:0 5px;border-radius:4px;border:1px dashed currentColor;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,#8a8f98);white-space:nowrap}
-.dsh-channels-cfg__tag--override{color:var(--dsw-alias-state-business-primary,#0a67d3);border-style:solid}
 .dsh-channels-cfg__tag--restart{color:var(--dsw-alias-state-warning-primary,#a15c00)}
+.dsh-channels-cfg__tag--dirty{color:var(--dsw-alias-state-warning-primary,#a15c00);border-style:solid}
 .dsh-channels-cfg__help{color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:11px;line-height:16px}
 .dsh-channels-cfg__reasonBad{color:var(--dsw-alias-state-danger-primary,#c62828)}
 .dsh-channels-cfg__input{box-sizing:border-box;width:100%;min-height:28px;padding:3px 10px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:8px;background:var(--dsw-alias-bg-layer-1,transparent);color:inherit;font:inherit;font-size:13px;outline:none}
+.dsh-channels-cfg__inputRow{display:flex;align-items:center;gap:8px;min-width:0}
+.dsh-channels-cfg__inputRow .dsh-channels-cfg__input{flex:1 1 auto;width:auto;min-width:0}
+.dsh-channels-cfg__btn--browse{flex:none}
 .dsh-channels-cfg__input:focus{border-color:var(--dsw-alias-state-business-primary,#0a67d3)}
 .dsh-channels-cfg__input--invalid{border-color:var(--dsw-alias-state-danger-primary,#c62828)}
 select.dsh-channels-cfg__input{appearance:auto;cursor:pointer}
 .dsh-channels-cfg__check{display:inline-flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;font-size:13px}
 .dsh-channels-cfg__checkbox{width:15px;height:15px;margin:0;accent-color:var(--dsw-alias-state-business-primary,#0a67d3);cursor:pointer}
 .dsh-channels-cfg__fieldError{color:var(--dsw-alias-state-danger-primary,#c62828);font-size:11px;line-height:16px}
-.dsh-channels-cfg__notice{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:18px}
+.dsh-channels-cfg__notice{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:18px;overflow-wrap:anywhere}
 .dsh-channels-cfg__notice--ok{color:var(--dsw-alias-state-business-primary,#0a7d33);background:color-mix(in srgb,currentColor 8%,transparent)}
 .dsh-channels-cfg__notice--error{color:var(--dsw-alias-state-danger-primary,#c62828);background:color-mix(in srgb,currentColor 8%,transparent)}
 .dsh-channels-cfg__banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:8px;border:1px dashed var(--dsw-alias-state-warning-primary,#a15c00);color:var(--dsw-alias-state-warning-primary,#a15c00);font-size:12px;line-height:18px}
 .dsh-channels-cfg__footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px}
 .dsh-channels-cfg__spacer{flex:1}
+.dsh-channels-cfg__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.dsh-channels-cfg__step{display:flex;align-items:flex-start;gap:10px}
+.dsh-channels-cfg__stepIndex{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;color:var(--dsw-alias-state-business-primary,#0a67d3);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
+.dsh-channels-cfg__stepBody{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dsh-channels-cfg__stepTitle{font-size:13px;font-weight:500}
+.dsh-channels-cfg__emptyState{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px dashed var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:8px;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
 .dsh-channels-cfg__readOnly{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
 .dsh-channels-cfg__kv{display:flex;flex-direction:column;gap:2px;min-width:0}
 .dsh-channels-cfg__kvKey{color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:16px}
 .dsh-channels-cfg__kvValue{overflow-wrap:anywhere}
 .dsh-channels-cfg__mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
-.dsh-channels-cfg__creds{display:flex;flex-direction:column;gap:6px}
 .dsh-channels-cfg__cred{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .dsh-channels-cfg__cred .dsh-channels-cfg__input{flex:1 1 240px;min-width:0;width:auto}
 .dsh-channels-cfg__accessSection{display:flex;flex-direction:column;gap:6px}
@@ -81,6 +98,7 @@ select.dsh-channels-cfg__input{appearance:auto;cursor:pointer}
 @container (max-width:560px){
 .dsh-channels-cfg__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dsh-channels-cfg__grid,.dsh-channels-cfg__readOnly{grid-template-columns:minmax(0,1fr)}
+.dsh-channels-cfg__tabs{flex-wrap:nowrap;overflow-x:auto}
 }
 `