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

package/src/analyze/server.ts

@@ -0,0 +1,201 @@
+/**
+ * The analyze API's dedicated HTTP listener.
+ *
+ * Serves exactly `POST /dsh-channels/analyze` (see `./contract.ts`) on the
+ * `analyzeListen` address. This module owns the transport-level checks, in
+ * order: path, method, bearer token, `Idempotency-Key`, media type, body size,
+ * and JSON validation; everything after validation belongs to the
+ * {@link AnalyzeHandler}. Bodies, tokens, and prompts are never logged.
+ *
+ * @module dsh-channels/analyze/server
+ */
+
+import { createHash, timingSafeEqual } from 'node:crypto'
+import { createServer } from 'node:http'
+import type { IncomingMessage, Server, ServerResponse } from 'node:http'
+import type { AddressInfo } from 'node:net'
+import {
+  ANALYZE_MAX_BODY_BYTES, ANALYZE_ROUTE, IDEMPOTENCY_KEY_PATTERN, parseAnalyzeRequest,
+} from './contract.ts'
+import type { AnalyzeRequest, AnalyzeResponse } from './contract.ts'
+
+/** The business side of the listener. */
+export interface AnalyzeHandler {
+  /**
+   * Resolve the expected bearer token for this request.
+   * @returns the token, or undefined when it is not configured.
+   */
+  token(): Promise<string | undefined>
+  /**
+   * Accept one validated request.
+   * @param request - the validated body.
+   * @param idempotencyKey - the request's `Idempotency-Key`.
+   * @returns the HTTP answer.
+   */
+  analyze(request: AnalyzeRequest, idempotencyKey: string): Promise<AnalyzeResponse>
+}
+
+/** A bound analyze listener. */
+export interface AnalyzeServer {
+  /** The bound address (the real port when `0` was requested). */
+  readonly address: AddressInfo
+  /** Stop accepting connections and close idle ones. */
+  close(): Promise<void>
+}
+
+class HttpError extends Error {
+  constructor(readonly status: number, message: string) {
+    super(message)
+  }
+}
+
+function send(res: ServerResponse, response: AnalyzeResponse): void {
+  const body = JSON.stringify(response.body)
+  res.writeHead(response.status, {
+    'content-type': 'application/json; charset=utf-8',
+    'cache-control': 'no-store',
+    'content-length': Buffer.byteLength(body),
+  })
+  res.end(body)
+}
+
+function refuse(res: ServerResponse, status: number, error: string, headers: Record<string, string> = {}): void {
+  for (const [name, value] of Object.entries(headers)) res.setHeader(name, value)
+  send(res, { status, body: { ok: false, error } })
+}
+
+/** Constant-time token comparison over fixed-length digests. */
+function tokenMatches(presented: string, expected: string): boolean {
+  const left = createHash('sha256').update(presented).digest()
+  const right = createHash('sha256').update(expected).digest()
+  return timingSafeEqual(left, right)
+}
+
+/** The bearer credential of one request, or undefined. */
+function bearerOf(req: IncomingMessage): string | undefined {
+  const header = req.headers.authorization
+  if (header === undefined) return undefined
+  const match = /^Bearer[ \t]+(\S+)[ \t]*$/iu.exec(header)
+  return match?.[1]
+}
+
+/** Read the body up to {@link ANALYZE_MAX_BODY_BYTES}; larger bodies fail with 413. */
+async function readBody(req: IncomingMessage): Promise<string> {
+  const declared = Number(req.headers['content-length'])
+  if (Number.isFinite(declared) && declared > ANALYZE_MAX_BODY_BYTES) {
+    throw new HttpError(413, `请求体超过 ${ANALYZE_MAX_BODY_BYTES} 字节`)
+  }
+  const chunks: Buffer[] = []
+  let size = 0
+  for await (const chunk of req) {
+    const buffer = chunk as Buffer
+    size += buffer.length
+    if (size > ANALYZE_MAX_BODY_BYTES) throw new HttpError(413, `请求体超过 ${ANALYZE_MAX_BODY_BYTES} 字节`)
+    chunks.push(buffer)
+  }
+  return Buffer.concat(chunks).toString('utf8')
+}
+
+/**
+ * Handle one HTTP request against the analyze contract.
+ * @param req - the incoming request.
+ * @param res - its response.
+ * @param handler - the business side.
+ */
+export async function handleAnalyzeHttp(
+  req: IncomingMessage,
+  res: ServerResponse,
+  handler: AnalyzeHandler,
+): Promise<void> {
+  const pathname = new URL(req.url ?? '/', 'http://analyze.invalid').pathname
+  if (pathname !== ANALYZE_ROUTE) {
+    refuse(res, 404, '未知路径')
+    return
+  }
+  if ((req.method ?? 'GET').toUpperCase() !== 'POST') {
+    refuse(res, 405, '只接受 POST', { allow: 'POST' })
+    return
+  }
+  const expected = await handler.token()
+  if (expected === undefined || expected === '') {
+    refuse(res, 503, '分析接口未配置访问令牌，请联系部署者配置 analyzeToken 引用的凭据')
+    return
+  }
+  const presented = bearerOf(req)
+  if (presented === undefined || !tokenMatches(presented, expected)) {
+    refuse(res, 401, '访问令牌无效', { 'www-authenticate': 'Bearer' })
+    return
+  }
+  const idempotencyKey = req.headers['idempotency-key']
+  if (typeof idempotencyKey !== 'string' || !IDEMPOTENCY_KEY_PATTERN.test(idempotencyKey)) {
+    refuse(res, 400, '缺少或不合法的 Idempotency-Key 请求头（1-200 个可见 ASCII 字符）')
+    return
+  }
+  const mediaType = (req.headers['content-type'] ?? '').split(';')[0]?.trim().toLowerCase()
+  if (mediaType !== 'application/json') {
+    refuse(res, 415, 'Content-Type 必须是 application/json')
+    return
+  }
+  let raw: unknown
+  try {
+    raw = JSON.parse(await readBody(req))
+  } catch (error) {
+    if (error instanceof HttpError) {
+      refuse(res, error.status, error.message)
+      return
+    }
+    refuse(res, 400, '请求体不是合法的 JSON')
+    return
+  }
+  const parsed = parseAnalyzeRequest(raw)
+  if (!parsed.ok) {
+    refuse(res, 400, parsed.error)
+    return
+  }
+  send(res, await handler.analyze(parsed.value, idempotencyKey))
+}
+
+/** Split `host:port` (`[v6]:port` allowed) into listen arguments. */
+export function parseListenAddress(listen: string): { host: string; port: number } {
+  const separator = listen.lastIndexOf(':')
+  const host = listen.slice(0, separator).replace(/^\[(.*)\]$/u, '$1')
+  return { host, port: Number(listen.slice(separator + 1)) }
+}
+
+/**
+ * Bind the analyze listener.
+ * @param listen - `host:port` address (`analyzeListen`).
+ * @param handler - the business side.
+ * @param warn - diagnostics sink for unexpected handler failures.
+ * @returns the bound server; rejects when the address cannot be bound.
+ */
+export async function startAnalyzeServer(
+  listen: string,
+  handler: AnalyzeHandler,
+  warn: (message: string, ...args: unknown[]) => void,
+): Promise<AnalyzeServer> {
+  const server: Server = createServer((req, res) => {
+    handleAnalyzeHttp(req, res, handler).catch((error: unknown) => {
+      warn('dsh-channels: analyze request failed: %s', String(error))
+      if (!res.headersSent) refuse(res, 500, `分析请求处理失败：${String(error)}`)
+      else res.destroy()
+    })
+  })
+  const { host, port } = parseListenAddress(listen)
+  await new Promise<void>((resolve, reject) => {
+    const onError = (error: Error): void => { reject(error) }
+    server.once('error', onError)
+    server.listen(port, host, () => {
+      server.off('error', onError)
+      resolve()
+    })
+  })
+  server.on('error', (error) => { warn('dsh-channels: analyze listener error: %s', String(error)) })
+  return {
+    address: server.address() as AddressInfo,
+    close: () => new Promise<void>((resolve) => {
+      server.close(() => { resolve() })
+      server.closeIdleConnections()
+    }),
+  }
+}

package/src/cards/analyze.ts

@@ -0,0 +1,116 @@
+/**
+ * Root card of a log-platform analysis: who started which analysis when, the
+ * log-platform detail pages behind it, and a status tag (分析中 → 已完成 /
+ * 已停止 / 失败 / 已中断). The analysis itself streams in the topic below the
+ * card through the ordinary streaming card.
+ *
+ * @module dsh-channels/cards/analyze
+ */
+
+import { CARD_CONFIG, CARD_SCHEMA, markdown, note } from './primitives.ts'
+
+/** One log-platform detail page listed on the root card. */
+export interface AnalyzeLogDetail {
+  readonly name: string
+  readonly url: string
+}
+
+/** Subject of one analysis, as the root card names it. */
+export interface AnalyzeSubject {
+  /** Requester user_id (rendered as an @-mention). */
+  readonly requesterUserId: string
+  /** Trigger time as the platform sent it (shown verbatim). */
+  readonly triggeredAt: string
+  readonly app: string
+  readonly errorCode: string
+  readonly logDetails: readonly AnalyzeLogDetail[]
+}
+
+/**
+ * Root card status: `running` until the first turn settles (`done`,
+ * `stopped`, `error`), `failed` when the analysis could not start, or
+ * `interrupted` when DSH restarted before the first turn settled.
+ */
+export type AnalyzeStatus =
+  | { readonly kind: 'running' }
+  | { readonly kind: 'done' }
+  | { readonly kind: 'stopped' }
+  | { readonly kind: 'error' }
+  | { readonly kind: 'failed'; readonly reason: string }
+  | { readonly kind: 'interrupted' }
+
+/** Rows per table page (Feishu caps `page_size` at 10). */
+const TABLE_PAGE_SIZE = 10
+
+/** Escape markdown emphasis characters in platform-supplied text. */
+function plain(text: string): string {
+  return text.replace(/([*_~`[\]\\])/gu, '\\$1')
+}
+
+/** Percent-encode the characters that would end a markdown link target early. */
+function linkTarget(url: string): string {
+  return url.replace(/[()\s]/gu, char => `%${char.charCodeAt(0).toString(16).toUpperCase().padStart(2, '0')}`)
+}
+
+/** Header tag text, tag color, and header template of each status. */
+function statusLook(status: AnalyzeStatus): { tag: string; color: string; template: string } {
+  switch (status.kind) {
+    case 'running': return { tag: '分析中', color: 'blue', template: 'blue' }
+    case 'done': return { tag: '已完成', color: 'green', template: 'green' }
+    case 'stopped': return { tag: '已停止', color: 'neutral', template: 'grey' }
+    case 'error':
+    case 'failed': return { tag: '失败', color: 'red', template: 'red' }
+    case 'interrupted': return { tag: '已中断', color: 'orange', template: 'orange' }
+  }
+}
+
+/** Footer line of each status. */
+function statusNote(status: AnalyzeStatus): string {
+  switch (status.kind) {
+    case 'running': return '分析过程在本卡片下的话题内实时输出；群内已授权的成员可以在话题内直接回复追问。'
+    case 'done': return '分析已完成，结果见话题；在话题内回复即可继续追问。'
+    case 'stopped': return '分析已停止；在话题内回复即可继续。'
+    case 'error': return '分析回合失败，原因见话题；在话题内回复即可重试或追问。'
+    case 'failed': return `分析未能开始：${plain(status.reason)}`
+    case 'interrupted': return 'DSH 重启导致分析中断；在话题内回复即可继续。'
+  }
+}
+
+/**
+ * The analysis root card.
+ * @param subject - the analysis subject.
+ * @param status - the status the card shows.
+ * @returns card JSON.
+ */
+export function buildAnalyzeRootCard(subject: AnalyzeSubject, status: AnalyzeStatus): object {
+  const look = statusLook(status)
+  return {
+    schema: CARD_SCHEMA,
+    config: CARD_CONFIG,
+    header: {
+      title: { tag: 'plain_text', content: '日志分析' },
+      template: look.template,
+      text_tag_list: [{ tag: 'text_tag', text: { tag: 'plain_text', content: look.tag }, color: look.color }],
+    },
+    body: {
+      elements: [
+        markdown(`<at id=${subject.requesterUserId}></at> 于 ${plain(subject.triggeredAt)} 发起了对 **${plain(subject.app)}** 应用 **${plain(subject.errorCode)}** 错误码不良日志的分析。`),
+        {
+          tag: 'table',
+          page_size: TABLE_PAGE_SIZE,
+          row_height: 'low',
+          header_style: { background_style: 'grey', bold: true, lines: 1 },
+          columns: [
+            { name: 'name', display_name: '日志', data_type: 'text', width: 'auto' },
+            { name: 'link', display_name: '详情页', data_type: 'markdown', width: 'auto' },
+          ],
+          rows: subject.logDetails.map(detail => ({
+            name: detail.name,
+            link: `[查看](${linkTarget(detail.url)})`,
+          })),
+        },
+        note(statusNote(status)),
+      ],
+    },
+  }
+}

package/src/cards/index.ts

@@ -11,3 +11,4 @@ export * from './onboarding.ts'
 export * from './approval.ts'
 export * from './question.ts'
 export * from './picker.ts'
+export * from './analyze.ts'

package/src/cards/streaming.ts

@@ -58,6 +58,9 @@ export const PANEL_TITLES: Record<PanelPhase, string> = {
 /** `decision` carried by the streaming card's stop button. */
 export const STOP_ACTION = 'turn-stop'
 
+/** `decision` carried by a queued card's "add to the current reply" button. */
+export const STEER_ACTION = 'turn-steer'
+
 /**
  * Stop control state on the streaming card: `ready` offers the button,
  * `stopping` shows it disabled after the owner clicked it.
@@ -146,6 +149,14 @@ export interface CardState {
   stop?: StopControl
   /** Add the owner-only notice under the stop button (a non-owner clicked it). */
   stopDenied?: boolean
+  /**
+   * The message waits behind another turn of the same session: the main card
+   * renders only the queue notice and the steer button, never the panel,
+   * body or footer. Ignored on continuation cards.
+   */
+  queued?: boolean
+  /** Add the owner-only notice under the steer button (a non-owner clicked it). */
+  queuedDenied?: boolean
   stats: CardStats
 }
 
@@ -399,6 +410,31 @@ function stopElements(stop: StopControl, denied: boolean): object[] {
   return elements
 }
 
+/** Body of a card whose message waits behind the session's running turn. */
+export const QUEUED_NOTICE = '⏳ 排队中：上一轮回复结束后再处理这条消息'
+
+/** Label of the queued card's button that moves the message into the running turn. */
+export const STEER_LABEL = '⚡ 立即补充到当前回复'
+
+/** Body of a queued card after its message moved into the running turn. */
+export const MERGED_NOTICE = '↪️ 已补充到当前回复：当前这一步结束后模型就会读到这条消息，回复继续在上一张卡片中输出'
+
+/** The queued card: notice, steer button and the optional owner-only notice. */
+function queuedElements(denied: boolean): object[] {
+  const elements: object[] = [
+    markdown(QUEUED_NOTICE),
+    textButton({
+      label: STEER_LABEL,
+      type: 'default',
+      width: 'default',
+      margin: '8px 0 0 0',
+      value: { decision: STEER_ACTION },
+    }),
+  ]
+  if (denied) elements.push(note('ℹ️ 仅发起该会话的用户可补充'))
+  return elements
+}
+
 // ---- rendering ------------------------------------------------------------
 
 /** Render one card. `reasoning`/`body` are the already-budgeted texts. */
@@ -410,6 +446,7 @@ function renderCard(
 ): object {
   const segment = options.segment
   const main = segment === undefined
+  if (main && state.queued === true) return card(queuedElements(state.queuedDenied === true))
   const elements: object[] = []
 
   if (main) {
@@ -629,3 +666,24 @@ export function initialStreamingCard(sessionId: string): object {
   }
   return buildCard(state)
 }
+
+/**
+ * The first frame for a message that waits behind the session's running turn:
+ * the queue notice plus the button that moves the message into that turn.
+ * The streamer re-renders it as a normal streaming card once the message's
+ * own turn becomes the active one.
+ */
+export function queuedStreamingCard(sessionId: string): object {
+  return buildCard({
+    phase: 'thinking',
+    reasoning: '',
+    body: '',
+    queued: true,
+    stats: { sessionId, inputTokens: 0, outputTokens: 0 },
+  })
+}
+
+/** Terminal card of a queued message that moved into the running turn. */
+export function buildMergedCard(): object {
+  return card([markdown(MERGED_NOTICE)])
+}

package/src/client/api.ts

@@ -10,6 +10,7 @@ import {
   ACCESS_REQUESTS_ROUTE,
   ACCESS_ROUTE,
   ACCESS_USERS_ROUTE,
+  ACCESS_WIKI_USERS_ROUTE,
   CATALOG_ROUTE,
   CONFIG_ROUTE,
   CREDENTIALS_ROUTE,
@@ -253,6 +254,20 @@ export async function removeAccessUser(userId: string): Promise<AccessMutationRe
   return mutateAccess(ACCESS_USERS_ROUTE, 'DELETE', { userId })
 }
 
+/** Add one user `user_id` to the wiki whitelist. */
+export async function addWikiUser(userId: string, name?: string): Promise<AccessMutationResponse> {
+  return mutateAccess(
+    ACCESS_WIKI_USERS_ROUTE,
+    'POST',
+    name === undefined || name === '' ? { userId } : { userId, name },
+  )
+}
+
+/** Remove one user from the wiki whitelist (takes effect on the next wiki tool call). */
+export async function removeWikiUser(userId: string): Promise<AccessMutationResponse> {
+  return mutateAccess(ACCESS_WIKI_USERS_ROUTE, 'DELETE', { userId })
+}
+
 /** Settle one pending authorization request (same resolver as the Feishu card). */
 export async function resolveAccessRequest(
   token: string,

package/src/client/number-field.ts

@@ -0,0 +1,97 @@
+/**
+ * 浏览器半区的 `number` 字段辅助：按 Host 描述的 `scale` 在显示单位与存储
+ * 单位之间换算、保存前校验上下界，以及字节数的 MiB 读数。
+ *
+ * 不含 JSX/React，便于单测。Host 保存时按 config schema 复核。
+ *
+ * @module dsh-channels/client/number-field
+ */
+
+import { fillCopy, PANEL_COPY } from '../settings/contract.ts'
+import type { ConfigValue, EditableFieldWire } from '../settings/contract.ts'
+
+/** Drop float noise from `stored / scale` (e.g. 0.30000000000000004). */
+function tidy(value: number): number {
+  return Number(value.toPrecision(12))
+}
+
+/**
+ * Value the input shows for one field.
+ *
+ * @param field - The Host descriptor (`kind: 'number'`).
+ * @param value - Draft (the typed string) or effective value (stored units).
+ * @returns The input text.
+ */
+export function numberInputValue(field: EditableFieldWire, value: ConfigValue | undefined): string {
+  if (typeof value === 'string') return value
+  if (typeof value !== 'number') return ''
+  return String(field.scale === undefined ? value : tidy(value / field.scale))
+}
+
+/**
+ * Input `step` in display units.
+ *
+ * @param field - The Host descriptor (`kind: 'number'`).
+ * @returns The step, or `undefined` when the Host gives none.
+ */
+export function numberInputStep(field: EditableFieldWire): number | undefined {
+  if (field.step === undefined) return undefined
+  return field.scale === undefined ? field.step : tidy(field.step / field.scale)
+}
+
+/** One bound in display units with the field's unit appended. */
+function boundLabel(field: EditableFieldWire, stored: number): string {
+  const shown = field.scale === undefined ? stored : tidy(stored / field.scale)
+  return field.unit === undefined ? String(shown) : `${shown} ${field.unit}`
+}
+
+/**
+ * Turn one number draft into its save payload, checking the Host bounds.
+ *
+ * @param field - The Host descriptor (`kind: 'number'`).
+ * @param raw - The draft: the typed string, or a stored-unit number.
+ * @returns The stored-unit value (`''` clears an optional field), or the reason it is rejected.
+ */
+export function numberDraftValue(
+  field: EditableFieldWire,
+  raw: ConfigValue | undefined,
+): { ok: true; value: number | '' } | { ok: false; message: string } {
+  let stored: number
+  if (typeof raw === 'number') {
+    stored = raw
+  } else {
+    const text = typeof raw === 'string' ? raw.trim() : ''
+    if (text === '') {
+      return field.optional === true ? { ok: true, value: '' } : { ok: false, message: PANEL_COPY.numberInvalid }
+    }
+    const parsed = Number(text)
+    if (!Number.isFinite(parsed)) return { ok: false, message: PANEL_COPY.numberInvalid }
+    stored = field.scale === undefined ? parsed : Math.round(parsed * field.scale)
+  }
+  if (field.min !== undefined && stored < field.min) {
+    return { ok: false, message: fillCopy(PANEL_COPY.numberMin, { n: boundLabel(field, field.min) }) }
+  }
+  if (field.max !== undefined && stored > field.max) {
+    return { ok: false, message: fillCopy(PANEL_COPY.numberMax, { n: boundLabel(field, field.max) }) }
+  }
+  return { ok: true, value: stored }
+}
+
+/**
+ * Human reading of a byte count, e.g. `20 MiB`.
+ *
+ * @param text - The input text (bytes).
+ * @returns The reading, or `undefined` when the text is not a positive number.
+ */
+export function bytesReading(text: string): string | undefined {
+  const bytes = Number(text)
+  if (text.trim() === '' || !Number.isFinite(bytes) || bytes <= 0) return undefined
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  return `${Number(value.toFixed(value >= 100 || unit === 0 ? 0 : 1))} ${units[unit]}`
+}

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

@@ -1,15 +1,18 @@
 /**
- * 「访问授权」tab：准入与授权字段表单（管理员 user_id / 准入模式 /
- * 申请有效期）+ 白名单与待处理申请卡。表单保存走全局 draft，白名单
- * 增删是独立即时 mutation。
+ * 「访问授权」tab：待处理申请（有才显示，置顶）、准入字段（调试模式 /
+ * 管理员 / 申请有效期）与群、用户白名单。字段保存走全局 draft，白名单增删
+ * 与申请处理是独立即时 mutation。
+ *
+ * `access.loaded === false`（飞书未连接、插件 storage 域未打开）时白名单与
+ * 申请列表是「未知」而不是「空」，因此只渲染连接提示并禁用全部写操作。
  *
  * @module dsh-channels/client/panel/access-tab
  */
 
-import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
-import { AccessCard } from './access-card.tsx'
-import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
+import { fillCopy, PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import { FieldSections, NoticeBar } from './shared.tsx'
 import type { FormView } from './shared.tsx'
+import { RequestList, Whitelist } from './whitelist.tsx'
 
 export interface AccessTabProps {
   form: FormView
@@ -24,22 +27,60 @@ export interface AccessTabProps {
 
 export function AccessTab(props: AccessTabProps): JSX.Element {
   const { form, accessNotice, accessError, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props
+  const { access } = form.panel
+  const working = form.busy === 'access'
+  const disabled = form.busy !== null || form.locked || !access.loaded
+  // The administrator row says who is in charge right now when the owner fallback applies.
+  const ownerAdmin = access.mode === 'guarded' && access.admin.source === 'owner' ? access.admin.userId : undefined
+  const fields = ownerAdmin === undefined
+    ? form.fields
+    : form.fields.map(field => field.key === 'adminUserId'
+      ? { ...field, summary: fillCopy(PANEL_COPY.accessAdminOwnerSummary, { id: ownerAdmin }) }
+      : field)
   return (
     <div className="dsh-channels-cfg__tabBody">
-      <TabHelp text={PANEL_COPY.accessTabHelp} />
-      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.access} />
-      <SaveBar form={form} tab="access" />
-      <AccessCard
-        panel={form.panel}
-        busy={form.busy}
-        locked={form.locked}
-        notice={accessNotice}
-        error={accessError}
-        onAddGroup={onAddGroup}
-        onRemoveGroup={onRemoveGroup}
-        onAddUser={onAddUser}
-        onRemoveUser={onRemoveUser}
-        onResolveRequest={onResolveRequest}
+      {accessNotice === null ? null : <NoticeBar kind="ok" text={accessNotice} />}
+      {accessError === null ? null : <NoticeBar kind="error" text={accessError} />}
+      {access.loaded && access.mode === 'guarded' && !access.admin.configured
+        ? (
+            <NoticeBar
+              kind="error"
+              text={access.admin.ownerLookupError === undefined
+                ? PANEL_COPY.accessAdminMissingWarning
+                : `${PANEL_COPY.accessAdminMissingWarning}（${access.admin.ownerLookupError}）`}
+            />
+          )
+        : null}
+      {access.loaded && access.requests.length > 0
+        ? <RequestList requests={access.requests} disabled={disabled} working={working} onResolve={onResolveRequest} />
+        : null}
+      <FieldSections form={{ ...form, fields }} groups={TAB_FIELD_GROUPS.access} />
+      <Whitelist
+        title={PANEL_COPY.accessGroupsTitle}
+        entries={access.groups.map(group => ({ id: group.chatId, name: group.name, source: group.source }))}
+        avatar="群"
+        empty={PANEL_COPY.accessGroupsEmpty}
+        loaded={access.loaded}
+        addLabel={PANEL_COPY.accessAddGroup}
+        idPlaceholder={PANEL_COPY.accessGroupChatIdPlaceholder}
+        namePlaceholder={PANEL_COPY.accessGroupNamePlaceholder}
+        disabled={disabled}
+        working={working}
+        onAdd={onAddGroup}
+        onRemove={onRemoveGroup}
+      />
+      <Whitelist
+        title={PANEL_COPY.accessUsersTitle}
+        entries={access.users.map(user => ({ id: user.userId, name: user.name, source: user.source }))}
+        empty={PANEL_COPY.accessUsersEmpty}
+        loaded={access.loaded}
+        addLabel={PANEL_COPY.accessAddUser}
+        idPlaceholder={PANEL_COPY.accessUserIdPlaceholder}
+        namePlaceholder={PANEL_COPY.accessUserNamePlaceholder}
+        disabled={disabled}
+        working={working}
+        onAdd={onAddUser}
+        onRemove={onRemoveUser}
       />
     </div>
   )