@modesto_ma/dsh-channels 0.5.0-beta.4 → 0.5.0-beta.6

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,11 +1,10 @@
 /**
- * 设置 →「飞书渠道」页面：数据加载、5 秒状态轮询、全局 draft 与顶部状态头 /
- * tab 导航的外壳。
+ * 左侧栏「飞书渠道」主区页面：数据加载、5 秒状态轮询、全局 draft、顶部状态头 /
+ * tab 导航与底部保存条的外壳。
  *
  * 所有 Host 交互（panel / status / catalog / config / credentials / access /
  * pick-directory）都集中在这里；tab 组件只接收渲染所需的数据与
- * 回调。页面不 import 任何 DSH 客户端包，只依赖 react 与 `settings.section`
- * 槽位。
+ * 回调。页面不 import 任何 DSH 客户端包，只依赖 react 与 `main` 槽位。
  *
  * @module dsh-channels/client/panel
  */
@@ -48,14 +47,16 @@ 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 { useFeishuProfiles } from './profiles.ts'
 import {
   fieldLabel,
+  formatUptime,
   messageOf,
   NoticeBar,
   phaseBadge,
-  phaseSummary,
+  Pill,
+  SaveBar,
   validateDraft,
 } from './shared.tsx'
 import type {
@@ -67,15 +68,24 @@ import type {
   Notice,
 } from './shared.tsx'
 import { WikiTab } from './wiki-tab.tsx'
-import { WorkspaceTab } from './workspace-tab.tsx'
 
-/** Owner props handed to a `settings.section` contribution (unused beyond parity). */
-export interface FeishuChannelsSectionProps {
-  close?: () => void
+/**
+ * Main-column page for the `main` slot: a full-height scroll region with the
+ * centered panel column. The slot passes no owner props.
+ * @returns the page.
+ */
+export function FeishuChannelsPage(): JSX.Element {
+  return (
+    <section className="dsh-channels-page" aria-label={PANEL_COPY.title}>
+      <div className="dsh-channels-page__content">
+        <FeishuChannelsPanel />
+      </div>
+    </section>
+  )
 }
 
-/** Page shell: one panel payload, one status poll, one global config draft. */
-export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.Element | null {
+/** Panel shell: one panel payload, one status poll, one global config draft. */
+function FeishuChannelsPanel(): JSX.Element | null {
   const [load, setLoad] = useState<LoadState>({ phase: 'loading' })
   const [activeTab, setActiveTab] = useState<PanelTabId>('connection')
   const [draft, setDraft] = useState<EditableValues>({})
@@ -316,24 +326,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])
 
   /**
@@ -359,6 +359,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 {
@@ -624,6 +628,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>>(() => {
@@ -649,13 +657,12 @@ 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 profiles = useFeishuProfiles(panel?.access ?? null)
 
   const credentials = useMemo<CredentialsView>(() => ({
     appId: appIdInput,
@@ -713,8 +720,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}`}
@@ -731,17 +744,16 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
               />
             )
           : null}
-        {activeTab === 'sessions' ? <SessionsTab form={form} analyzeToken={analyzeToken} /> : 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
                 form={form}
+                profiles={profiles}
                 accessNotice={accessNotice}
                 accessError={accessError}
                 onAddGroup={onAddAccessGroup}
@@ -756,6 +768,7 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
           ? (
               <WikiTab
                 form={form}
+                profiles={profiles}
                 accessNotice={accessNotice}
                 accessError={accessError}
                 onAddUser={(userId, name) => addUser(addWikiUser, userId, name, PANEL_COPY.wikiUserAdded)}
@@ -764,14 +777,22 @@ export function FeishuChannelsSection(_props: FeishuChannelsSectionProps): JSX.E
             )
           : 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
@@ -782,24 +803,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>
+        <h1 className="dsh-channels-cfg__title">{PANEL_COPY.title}</h1>
+        <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
         : (
@@ -815,9 +836,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). */
@@ -856,12 +879,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}

package/src/client/panel/profiles.ts

@@ -0,0 +1,73 @@
+/**
+ * Live Feishu names and avatars for every user and chat the access and wiki
+ * tabs show. The page asks the Host once on entry and again whenever the set
+ * of shown ids changes; a failed request keeps the previous answer.
+ *
+ * @module dsh-channels/client/panel/profiles
+ */
+
+import { useEffect, useMemo, useState } from 'react'
+import type { AccessWire, FeishuProfilesWire, FeishuProfileWire } from '../../settings/contract.ts'
+import { fetchFeishuProfiles } from '../api.ts'
+
+/** Resolved profiles plus the reason some could not be read. */
+export interface ProfileView {
+  user: (userId: string) => FeishuProfileWire | undefined
+  chat: (chatId: string) => FeishuProfileWire | undefined
+  /** Feishu or request failure reason, when one lookup failed. */
+  warning?: string
+}
+
+/**
+ * The `user_id`s and `chat_id`s one access snapshot shows.
+ * @param access - the panel's access snapshot.
+ * @returns sorted, distinct ids per kind.
+ */
+export function profileIds(access: AccessWire): { users: string[]; chats: string[] } {
+  const users = new Set<string>()
+  const chats = new Set<string>()
+  if (access.admin.userId !== undefined) users.add(access.admin.userId)
+  for (const user of access.users) users.add(user.userId)
+  for (const user of access.wikiUsers) users.add(user.userId)
+  for (const group of access.groups) chats.add(group.chatId)
+  for (const request of access.requests) {
+    if (request.kind === 'user') users.add(request.targetId)
+    else chats.add(request.targetId)
+    if (request.chatId !== undefined) chats.add(request.chatId)
+  }
+  return { users: [...users].sort(), chats: [...chats].sort() }
+}
+
+/**
+ * Profiles for one access snapshot; empty until the panel has loaded.
+ * @param access - the panel's access snapshot, null while loading.
+ * @returns lookups by id and the latest failure reason.
+ */
+export function useFeishuProfiles(access: AccessWire | null): ProfileView {
+  const ids = useMemo(() => (access === null ? { users: [], chats: [] } : profileIds(access)), [access])
+  const key = `${ids.users.join(',')}|${ids.chats.join(',')}`
+  const [answer, setAnswer] = useState<FeishuProfilesWire>({ users: {}, chats: {} })
+  const [requestError, setRequestError] = useState<string | undefined>(undefined)
+  useEffect(() => {
+    if (ids.users.length === 0 && ids.chats.length === 0) return
+    let current = true
+    fetchFeishuProfiles(ids.users, ids.chats).then(
+      (next) => {
+        if (!current) return
+        setAnswer(next)
+        setRequestError(undefined)
+      },
+      (error: unknown) => { if (current) setRequestError(error instanceof Error ? error.message : String(error)) },
+    )
+    return () => { current = false }
+    // `key` carries `ids`: a new snapshot with the same ids does not re-ask.
+  }, [key])
+  return useMemo(() => {
+    const warning = requestError ?? answer.warning
+    return {
+      user: (userId: string) => answer.users[userId],
+      chat: (chatId: string) => answer.chats[chatId],
+      ...(warning === undefined ? {} : { warning }),
+    }
+  }, [answer, requestError])
+}