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

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/panel/access-card.tsx

@@ -54,10 +54,7 @@ export function AccessCard(props: AccessCardProps): JSX.Element {
   const { access } = panel
   const [groupChatId, setGroupChatId] = useState('')
   const [groupName, setGroupName] = useState('')
-  const [userUserId, setUserUserId] = useState('')
-  const [userName, setUserName] = useState('')
   const groups: readonly AccessGroupWire[] = access.groups
-  const users: readonly AccessUserWire[] = access.users
   const requests: readonly AccessRequestWire[] = access.requests
   const working = busy === 'access'
   const disabled = busy !== null || locked || !access.loaded
@@ -70,14 +67,6 @@ export function AccessCard(props: AccessCardProps): JSX.Element {
     }
   }
 
-  const submitUser = async (): Promise<void> => {
-    if (userUserId.trim() === '') return
-    if (await onAddUser(userUserId, userName)) {
-      setUserUserId('')
-      setUserName('')
-    }
-  }
-
   return (
     <section className="dsh-channels-cfg__card">
       <div className="dsh-channels-cfg__cardHead">
@@ -170,65 +159,16 @@ export function AccessCard(props: AccessCardProps): JSX.Element {
                 </div>
               </div>
 
-              <div className="dsh-channels-cfg__accessSection">
-                <div className="dsh-channels-cfg__labelRow">
-                  <span className="dsh-channels-cfg__label">{PANEL_COPY.accessUsersTitle}</span>
-                  <span className="dsh-channels-cfg__cardMeta">{users.length} 个</span>
-                </div>
-                {users.length === 0
-                  ? <span className="dsh-channels-cfg__help">{PANEL_COPY.accessUsersEmpty}</span>
-                  : (
-                      <ul className="dsh-channels-cfg__accessList">
-                        {users.map(user => (
-                          <li className="dsh-channels-cfg__accessRow" key={user.userId}>
-                            <span className="dsh-channels-cfg__accessMain">
-                              <span>{user.name ?? user.userId}</span>
-                              <span className="dsh-channels-cfg__accessMeta">
-                                <span className="dsh-channels-cfg__mono">{user.userId}</span>
-                                {` · ${accessSourceLabel(user.source)} · ${formatAccessDate(user.addedAt)}`}
-                              </span>
-                            </span>
-                            <button
-                              type="button"
-                              className="dsh-channels-cfg__btn"
-                              disabled={disabled}
-                              onClick={() => onRemoveUser(user.userId)}
-                            >
-                              {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove}
-                            </button>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                <div className="dsh-channels-cfg__accessAdd">
-                  <input
-                    type="text"
-                    className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
-                    value={userUserId}
-                    placeholder={PANEL_COPY.accessUserIdPlaceholder}
-                    aria-label={PANEL_COPY.accessUserIdPlaceholder}
-                    disabled={disabled}
-                    onChange={event => setUserUserId(event.target.value)}
-                  />
-                  <input
-                    type="text"
-                    className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
-                    value={userName}
-                    placeholder={PANEL_COPY.accessUserNamePlaceholder}
-                    aria-label={PANEL_COPY.accessUserNamePlaceholder}
-                    disabled={disabled}
-                    onChange={event => setUserName(event.target.value)}
-                  />
-                  <button
-                    type="button"
-                    className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
-                    disabled={disabled || userUserId.trim() === ''}
-                    onClick={() => { void submitUser() }}
-                  >
-                    {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddUser}
-                  </button>
-                </div>
-              </div>
+              <UserWhitelist
+                title={PANEL_COPY.accessUsersTitle}
+                empty={PANEL_COPY.accessUsersEmpty}
+                addLabel={PANEL_COPY.accessAddUser}
+                users={access.users}
+                disabled={disabled}
+                working={working}
+                onAdd={onAddUser}
+                onRemove={onRemoveUser}
+              />
 
               <div className="dsh-channels-cfg__accessSection">
                 <div className="dsh-channels-cfg__labelRow">
@@ -301,3 +241,89 @@ export function AccessCard(props: AccessCardProps): JSX.Element {
     </section>
   )
 }
+
+/** One user whitelist (user `user_id` list with add/remove), shared by the access and wiki tabs. */
+export function UserWhitelist(props: {
+  title: string
+  empty: string
+  addLabel: string
+  users: readonly AccessUserWire[]
+  disabled: boolean
+  working: boolean
+  onAdd: (userId: string, name: string) => Promise<boolean>
+  onRemove: (userId: string) => void
+}): JSX.Element {
+  const { title, empty, addLabel, users, disabled, working, onAdd, onRemove } = props
+  const [userUserId, setUserUserId] = useState('')
+  const [userName, setUserName] = useState('')
+
+  const submitUser = async (): Promise<void> => {
+    if (userUserId.trim() === '') return
+    if (await onAdd(userUserId, userName)) {
+      setUserUserId('')
+      setUserName('')
+    }
+  }
+
+  return (
+    <div className="dsh-channels-cfg__accessSection">
+      <div className="dsh-channels-cfg__labelRow">
+        <span className="dsh-channels-cfg__label">{title}</span>
+        <span className="dsh-channels-cfg__cardMeta">{users.length} 个</span>
+      </div>
+      {users.length === 0
+        ? <span className="dsh-channels-cfg__help">{empty}</span>
+        : (
+            <ul className="dsh-channels-cfg__accessList">
+              {users.map(user => (
+                <li className="dsh-channels-cfg__accessRow" key={user.userId}>
+                  <span className="dsh-channels-cfg__accessMain">
+                    <span>{user.name ?? user.userId}</span>
+                    <span className="dsh-channels-cfg__accessMeta">
+                      <span className="dsh-channels-cfg__mono">{user.userId}</span>
+                      {` · ${accessSourceLabel(user.source)} · ${formatAccessDate(user.addedAt)}`}
+                    </span>
+                  </span>
+                  <button
+                    type="button"
+                    className="dsh-channels-cfg__btn"
+                    disabled={disabled}
+                    onClick={() => onRemove(user.userId)}
+                  >
+                    {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+      <div className="dsh-channels-cfg__accessAdd">
+        <input
+          type="text"
+          className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
+          value={userUserId}
+          placeholder={PANEL_COPY.accessUserIdPlaceholder}
+          aria-label={PANEL_COPY.accessUserIdPlaceholder}
+          disabled={disabled}
+          onChange={event => setUserUserId(event.target.value)}
+        />
+        <input
+          type="text"
+          className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
+          value={userName}
+          placeholder={PANEL_COPY.accessUserNamePlaceholder}
+          aria-label={PANEL_COPY.accessUserNamePlaceholder}
+          disabled={disabled}
+          onChange={event => setUserName(event.target.value)}
+        />
+        <button
+          type="button"
+          className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+          disabled={disabled || userUserId.trim() === ''}
+          onClick={() => { void submitUser() }}
+        >
+          {working ? PANEL_COPY.accessWorking : addLabel}
+        </button>
+      </div>
+    </div>
+  )
+}