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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@modesto_ma/dsh-channels",
-  "version": "0.5.0-beta.4",
-  "description": "DeepSeek Harness (DSH) 飞书渠道插件：一个 dsh 实例对应一个飞书机器人，私聊/群聊/话题群 @ 触发会话，话题绑定 session，卡片 2.0 流式回复；Web 设置里提供「飞书渠道」状态与常用配置面板",
+  "version": "0.5.0-beta.6",
+  "description": "DeepSeek Harness (DSH) 飞书渠道插件：一个 dsh 实例对应一个飞书机器人，私聊/群聊/话题群 @ 触发会话，话题绑定 session，卡片 2.0 流式回复；Web 左侧栏提供「飞书渠道」状态与常用配置面板",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/modestoma/dsh_channels.git"

package/src/client/api.ts

@@ -16,7 +16,10 @@ import {
   CREDENTIALS_ROUTE,
   PANEL_ROUTE,
   PICK_DIRECTORY_ROUTE,
+  PROFILES_MAX_IDS,
+  PROFILES_ROUTE,
   RECONNECT_ROUTE,
+  SESSION_ORIGIN_ROUTE,
   STATUS_ROUTE,
 } from '../settings/contract.ts'
 import type {
@@ -28,12 +31,14 @@ import type {
   ClearCredentialResponse,
   CredentialField,
   EditableValues,
+  FeishuProfilesWire,
   PanelWire,
   PickDirectoryResponse,
   ReconnectResponse,
   SaveConfigResponse,
   SaveCredentialsRequest,
   SaveCredentialsResponse,
+  SessionOriginResponse,
 } from '../settings/contract.ts'
 
 function messageOf(error: unknown): string {
@@ -51,9 +56,15 @@ function errorFromBody(status: number, text: string): string {
   return `HTTP ${status}`
 }
 
-async function request(path: string, init?: RequestInit): Promise<Response> {
+/**
+ * Fetch one Host route. Routes are registered as absolute pathnames, but the
+ * browser addresses them relative to the DSH document (`<base href="./">`), so
+ * a reverse proxy that mounts DSH under a prefix such as `/dsh/` still routes
+ * them to DSH with the login cookie it scoped to that prefix.
+ */
+async function request(route: string, init?: RequestInit): Promise<Response> {
   try {
-    return await fetch(path, {
+    return await fetch(route.slice(1), {
       cache: 'no-store',
       credentials: 'same-origin',
       ...init,
@@ -80,6 +91,38 @@ export async function fetchStatus(): Promise<ChannelStatusWire> {
   return readJson<ChannelStatusWire>(await request(STATUS_ROUTE))
 }
 
+/** Feishu origin of one Session (`origin: null` when Feishu never routed it). */
+export async function fetchSessionOrigin(sessionId: string): Promise<SessionOriginResponse> {
+  const query = new URLSearchParams({ sessionId }).toString()
+  return readJson<SessionOriginResponse>(await request(`${SESSION_ORIGIN_ROUTE}?${query}`))
+}
+
+/**
+ * Live Feishu names and avatars of the given users and chats, split into
+ * requests of at most {@link PROFILES_MAX_IDS} ids per list and merged.
+ * @param userIds - user `user_id`s.
+ * @param chatIds - chat `chat_id`s.
+ * @returns the profiles Feishu resolved, by id, with every request's warning.
+ */
+export async function fetchFeishuProfiles(userIds: readonly string[], chatIds: readonly string[]): Promise<FeishuProfilesWire> {
+  const requests: Array<Promise<FeishuProfilesWire>> = []
+  const rounds = Math.max(1, Math.ceil(userIds.length / PROFILES_MAX_IDS), Math.ceil(chatIds.length / PROFILES_MAX_IDS))
+  for (let round = 0; round < rounds; round += 1) {
+    const window = (ids: readonly string[]): string => ids.slice(round * PROFILES_MAX_IDS, (round + 1) * PROFILES_MAX_IDS).join(',')
+    const query = new URLSearchParams({ users: window(userIds), chats: window(chatIds) }).toString()
+    requests.push(request(`${PROFILES_ROUTE}?${query}`).then(response => readJson<FeishuProfilesWire>(response)))
+  }
+  const merged: FeishuProfilesWire = { users: {}, chats: {} }
+  const warnings = new Set<string>()
+  for (const part of await Promise.all(requests)) {
+    Object.assign(merged.users, part.users)
+    Object.assign(merged.chats, part.chats)
+    if (part.warning !== undefined) warnings.add(part.warning)
+  }
+  if (warnings.size > 0) merged.warning = [...warnings].join('；')
+  return merged
+}
+
 /**
  * Model-selector catalog for one route: providers, the provider's models, the
  * model's reasoning efforts, and the preset roster. The client re-queries it

package/src/client/avatar.tsx

@@ -0,0 +1,36 @@
+/**
+ * Round Feishu avatar: the user or chat image when Feishu returned one,
+ * otherwise (and when the image fails to load) the first character of the
+ * display text.
+ *
+ * @module dsh-channels/client/avatar
+ */
+
+import { useEffect, useState } from 'react'
+
+/**
+ * One avatar badge. Decorative: the adjacent label names the user or chat.
+ * @param props - `text` supplies the fallback initial, `url` the image, `size` the diameter in px (default 26).
+ * @returns the badge.
+ */
+export function Avatar(props: { text: string; url?: string; size?: number }): JSX.Element {
+  const { text, url, size = 26 } = props
+  const [failed, setFailed] = useState(false)
+  useEffect(() => { setFailed(false) }, [url])
+  const style = { width: size, height: size, fontSize: Math.round(size * 0.46) }
+  if (url !== undefined && !failed) {
+    return (
+      <img
+        className="dsh-channels-avatar"
+        style={style}
+        src={url}
+        alt=""
+        aria-hidden="true"
+        referrerPolicy="no-referrer"
+        loading="lazy"
+        onError={() => setFailed(true)}
+      />
+    )
+  }
+  return <span className="dsh-channels-avatar" style={style} aria-hidden="true">{Array.from(text)[0] ?? '?'}</span>
+}

package/src/client/icon.tsx

@@ -0,0 +1,25 @@
+/**
+ * 左侧栏「飞书渠道」行的装饰图标；行本身负责可访问名称（列表注册的 label）。
+ *
+ * @module dsh-channels/client/icon
+ */
+
+/** Owner share of `sidebar.panellist`: requested square edge and selection state. */
+export interface FeishuChannelsIconProps {
+  size: number
+  active: boolean
+}
+
+/**
+ * Paper-plane glyph drawn in `currentColor`, so it follows the row's text color.
+ * @param props - the sidebar's icon share.
+ * @returns decorative icon.
+ */
+export function FeishuChannelsIcon({ size }: FeishuChannelsIconProps): JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M21 3 3.5 10.2a.6.6 0 0 0 0 1.1l6.6 2.6 2.6 6.6a.6.6 0 0 0 1.1 0L21 3Z" />
+      <path d="m10.1 13.9 4.4-4.4" />
+    </svg>
+  )
+}

package/src/client/index.ts

@@ -1,35 +1,52 @@
 /**
- * dsh-channels client half: 设置 →「飞书渠道」分区。
+ * dsh-channels client half: 左侧栏全局入口「飞书渠道」+ 主区整页设置面板，
+ * 以及对话内的「飞书来源」（会话头部入口 + 右侧栏标签页）。
  *
  * 只依赖平台核心的 `slots` 服务与 react（bundle 里 react 走平台模块表，
- * 其余全部内联）。页面数据来自 Host 半侧的 `/dsh-channels/*` 路由，因此
- * 不需要 typert 契约，也不 import 任何 DSH 客户端包。
+ * 其余全部内联）；右侧栏服务存在时才注册来源标签页。页面数据来自 Host
+ * 半侧的 `/dsh-channels/*` 路由，因此不需要 typert 契约，也不 import 任何
+ * DSH 客户端包。
  *
  * @module dsh-channels/client
  */
 
 import { PANEL_COPY } from '../settings/contract.ts'
-import { FeishuChannelsSection } from './panel/index.tsx'
+import { FeishuChannelsIcon } from './icon.tsx'
+import { ORIGIN_TAB_ID, ORIGIN_TAB_KIND, ORIGIN_TAB_TITLE, OriginHeaderAction, OriginTab } from './origin.tsx'
+import { FeishuChannelsPage } from './panel/index.tsx'
 import { installStyles } from './styles.ts'
 
-// 平台 client runtime 的最小结构声明：只声明本 bundle 用到的两个能力。
-// 与安装的 DSH Web 版本（0.2.x）的 slots 运行时 API 一致。
+// 平台 client runtime 的最小结构声明：只声明本 bundle 用到的能力。
+// 与安装的 DSH Web 版本（0.2.x）的 slots 运行时 API 一致：list 槽按 `id`
+// 注册，keyed 槽按 `key` 注册；`inject` 回调按会话作用域槽收到 sessionId。
 export interface ClientSlots {
   inject(slot: string, contribution: () => unknown): void
   register(
-    declaration: {
-      name: string
-      id: string
-      order?: number
-      label: () => string
-    },
-    component: (props: { close?: () => void }) => unknown,
+    declaration:
+      | { name: string; id: string; order?: number; label?: () => string; inject?: (sessionId: string) => object }
+      | { name: string; key: string },
+    component: (props: never) => unknown,
   ): () => void
 }
 
+/** Static right-sidebar tab type (`ctx.sidebarRightTabs.register`). */
+export interface SidebarRightTabDefinition {
+  id: string
+  kind: string
+  title: (address: string) => string
+}
+
+/** Right-sidebar services the origin tab needs. */
+export interface SidebarRightScope extends ClientContext {
+  sidebarRightTabs: { register(definition: SidebarRightTabDefinition): () => void }
+  sidebarRight: { openTab(kind: string): void }
+}
+
 export interface ClientContext {
   slots: ClientSlots
   effect?(callback: () => void | (() => void), label?: string): void
+  /** Run `callback` in a child scope while every named service is available. */
+  inject?(deps: string[], callback: (scope: SidebarRightScope) => void): void
 }
 
 /** Cordis client plugin name. */
@@ -38,24 +55,62 @@ export const name = 'dsh-channels'
 /** Required client services: the Slots registry is part of the web shell core. */
 export const inject = ['slots']
 
-/** Section id and nav order (built-ins: account -10, general 0, models 10, plugins 15, agent-presets 20). */
-export const SETTINGS_SECTION_ID = 'feishu-channels'
-export const SETTINGS_SECTION_ORDER = 40
+/**
+ * Main panel id: the `sidebar.panellist` row id and the matching `main` slot key.
+ * Must not change once released: DSH keys navigation state by it.
+ */
+export const PANEL_ID = 'feishu-channels'
+/** Left-sidebar row order (built-ins: tasks 10; Plugins is pinned last by the sidebar). */
+export const PANEL_ORDER = 40
+/** Session header action order (after the preset label -10 and subagents 10). */
+export const ORIGIN_ACTION_ORDER = 30
 
 /**
- * Mount the settings section and its stylesheet.
+ * Mount the left-sidebar entry, its main-column page, the stylesheet, and —
+ * while the right sidebar is present — the Feishu origin header entry and tab.
  * @param ctx - client plugin context carrying the slots registry.
  */
 export function apply(ctx: ClientContext): void {
   if (typeof ctx.effect === 'function') {
-    ctx.effect(() => installStyles(), 'dsh-channels: settings styles')
+    ctx.effect(() => installStyles(), 'dsh-channels: panel styles')
   } else {
     installStyles()
   }
-  ctx.slots.inject('settings.section', () => ctx.slots.register({
-    name: 'settings.section',
-    id: SETTINGS_SECTION_ID,
-    order: SETTINGS_SECTION_ORDER,
+  ctx.slots.inject('main', () => ctx.slots.register({
+    name: 'main',
+    key: PANEL_ID,
+  }, FeishuChannelsPage))
+  ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({
+    name: 'sidebar.panellist',
+    id: PANEL_ID,
+    order: PANEL_ORDER,
     label: () => PANEL_COPY.title,
-  }, FeishuChannelsSection))
+  }, FeishuChannelsIcon))
+  ctx.inject?.(['sidebarRightTabs', 'sidebarRight'], mountOrigin)
+}
+
+/**
+ * Register the origin tab type, its body and title, and the header entry that
+ * opens it. Everything lives as long as the right-sidebar services do.
+ * @param scope - child context holding the right-sidebar services.
+ */
+export function mountOrigin(scope: SidebarRightScope): void {
+  const definition: SidebarRightTabDefinition = {
+    id: ORIGIN_TAB_ID,
+    kind: ORIGIN_TAB_KIND,
+    title: () => ORIGIN_TAB_TITLE,
+  }
+  scope.effect?.(() => scope.sidebarRightTabs.register(definition), 'dsh-channels: origin tab type')
+  scope.slots.inject('sidebar.right.pane.tab', () => scope.slots.register({
+    name: 'sidebar.right.pane.tab',
+    key: ORIGIN_TAB_ID,
+  }, OriginTab))
+  scope.slots.inject('conversation.session.header.actions', () => scope.slots.register({
+    name: 'conversation.session.header.actions',
+    id: 'dsh-channels-origin',
+    order: ORIGIN_ACTION_ORDER,
+    inject: () => ({
+      openOrigin: () => { scope.sidebarRight.openTab(ORIGIN_TAB_KIND) },
+    }),
+  }, OriginHeaderAction))
 }

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/origin-cache.ts

@@ -0,0 +1,45 @@
+/**
+ * 按会话缓存的飞书来源查询，会话头部入口与右侧栏标签页共用。
+ *
+ * @module dsh-channels/client/origin-cache
+ */
+
+import type { SessionOriginWire } from '../settings/contract.ts'
+import { fetchSessionOrigin } from './api.ts'
+
+/**
+ * How long a "not from Feishu" answer is reused. A Session shows up in the
+ * Web list before its Feishu route is written, so an early null must expire.
+ */
+const NULL_ORIGIN_TTL_MS = 15_000
+
+interface Lookup {
+  pending: Promise<SessionOriginWire | null>
+  /** Epoch ms when the Host answered null; absent while pending or for an origin. */
+  nullAt?: number
+}
+
+/** One settled or pending origin lookup per Session; failures are not kept. */
+const lookups = new Map<string, Lookup>()
+
+/**
+ * Origin of one Session through the shared cache. An origin is kept for the
+ * page's lifetime; a null answer only for {@link NULL_ORIGIN_TTL_MS}.
+ * @param sessionId - DSH session id.
+ * @param refresh - drop the cached answer and ask the Host again.
+ * @returns the origin, or null for a Session Feishu never routed.
+ */
+export function loadSessionOrigin(sessionId: string, refresh = false): Promise<SessionOriginWire | null> {
+  const cached = refresh ? undefined : lookups.get(sessionId)
+  if (cached !== undefined && (cached.nullAt === undefined || Date.now() - cached.nullAt < NULL_ORIGIN_TTL_MS)) {
+    return cached.pending
+  }
+  const pending = fetchSessionOrigin(sessionId).then(response => response.origin)
+  const lookup: Lookup = { pending }
+  lookups.set(sessionId, lookup)
+  pending.then(
+    (origin) => { if (origin === null) lookup.nullAt = Date.now() },
+    () => { if (lookups.get(sessionId) === lookup) lookups.delete(sessionId) },
+  )
+  return pending
+}

package/src/client/origin.tsx

@@ -0,0 +1,201 @@
+/**
+ * 对话里的「飞书来源」：会话头部的入口按钮（只在飞书发起的会话里出现）与
+ * 右侧栏的来源标签页。两者共用一份按会话缓存的来源查询。
+ *
+ * @module dsh-channels/client/origin
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import type { SessionOriginWire } from '../settings/contract.ts'
+import { Avatar } from './avatar.tsx'
+import { loadSessionOrigin } from './origin-cache.ts'
+import { FeishuChannelsIcon } from './icon.tsx'
+
+/** Right-sidebar tab kind opened by the header button. */
+export const ORIGIN_TAB_KIND = 'feishu-origin'
+/** Tab-type implementation id and keyed body/title slot key. */
+export const ORIGIN_TAB_ID = '@modesto_ma/dsh-channels/origin'
+/** Tab chip text. */
+export const ORIGIN_TAB_TITLE = '飞书来源'
+
+type OriginState =
+  | { phase: 'loading' }
+  | { phase: 'ready'; origin: SessionOriginWire | null }
+  | { phase: 'error'; message: string }
+
+/**
+ * Load one Session's origin; `reload` asks the Host again. `fresh` skips the
+ * shared cache on the first load too, so names and avatars are current.
+ */
+function useSessionOrigin(sessionId: string, fresh = false): [OriginState, () => void] {
+  const [state, setState] = useState<OriginState>({ phase: 'loading' })
+  // A reload is tied to the Session it was asked for, so switching Sessions
+  // never shows the previous Session's origin while the new one loads.
+  const [reloadOf, setReloadOf] = useState<{ sessionId: string; ticket: number }>({ sessionId, ticket: 0 })
+  const ticket = reloadOf.sessionId === sessionId ? reloadOf.ticket : 0
+  useEffect(() => {
+    let live = true
+    setState(current => (current.phase === 'ready' && ticket > 0 ? current : { phase: 'loading' }))
+    loadSessionOrigin(sessionId, fresh || ticket > 0).then(
+      origin => { if (live) setState({ phase: 'ready', origin }) },
+      (error: unknown) => {
+        if (live) setState({ phase: 'error', message: error instanceof Error ? error.message : String(error) })
+      },
+    )
+    return () => { live = false }
+  }, [fresh, sessionId, ticket])
+  const reload = useCallback(() => {
+    setReloadOf(current => ({ sessionId, ticket: current.sessionId === sessionId ? current.ticket + 1 : 1 }))
+  }, [sessionId])
+  return [state, reload]
+}
+
+/** Header chip text: group name, or 私聊 with the peer's name. */
+function sourceLabel(origin: SessionOriginWire): string {
+  if (origin.chatType === 'p2p') return origin.senderName === undefined ? '飞书私聊' : `私聊 · ${origin.senderName}`
+  return origin.chatName === undefined ? '飞书群聊' : origin.chatName
+}
+
+/** Tab heading: the group, or the private-chat peer, with its avatar. */
+function originHeading(origin: SessionOriginWire): { title: string; avatarUrl?: string } {
+  if (origin.chatType === 'p2p') {
+    return { title: origin.senderName ?? '飞书私聊', ...(origin.senderAvatarUrl === undefined ? {} : { avatarUrl: origin.senderAvatarUrl }) }
+  }
+  return { title: origin.chatName ?? '飞书群聊', ...(origin.chatAvatarUrl === undefined ? {} : { avatarUrl: origin.chatAvatarUrl }) }
+}
+
+/** Times a mounted header re-asks after a null answer, and the delay between asks. */
+const HEADER_NULL_RETRIES = 3
+const HEADER_NULL_RETRY_MS = 5_000
+
+/** Props of the header entry: the session standard kit's `sessionId`. */
+export interface OriginHeaderActionProps {
+  sessionId: string
+  /** Open the origin tab in this Session's right sidebar. */
+  openOrigin: () => void
+}
+
+/**
+ * Header button shown only for Sessions Feishu routed; renders nothing for
+ * every other Session and while the lookup is pending or failed.
+ * @param props - session id and the tab opener.
+ * @returns the button or null.
+ */
+export function OriginHeaderAction({ sessionId, openOrigin }: OriginHeaderActionProps): JSX.Element | null {
+  const [state, reload] = useSessionOrigin(sessionId)
+  const [retries, setRetries] = useState(0)
+  useEffect(() => { setRetries(0) }, [sessionId])
+  // A Session opened while Feishu is still creating it answers null until its
+  // route is written; look again a few times while the header stays mounted.
+  const waiting = state.phase === 'ready' && state.origin === null && retries < HEADER_NULL_RETRIES
+  useEffect(() => {
+    if (!waiting) return
+    const timer = setTimeout(() => {
+      setRetries(value => value + 1)
+      reload()
+    }, HEADER_NULL_RETRY_MS)
+    return () => { clearTimeout(timer) }
+  }, [waiting, reload])
+  if (state.phase !== 'ready' || state.origin === null) return null
+  const label = sourceLabel(state.origin)
+  return (
+    <button
+      type="button"
+      className="dsh-channels-origin-chip"
+      title={`来自${label}，点击查看飞书来源`}
+      aria-label={`飞书来源：${label}`}
+      onClick={openOrigin}
+    >
+      <FeishuChannelsIcon size={13} active={false} />
+      <span className="dsh-channels-origin-chip__text">{label}</span>
+    </button>
+  )
+}
+
+/** Props of the tab body: the session standard kit's `sessionId`. */
+export interface OriginTabProps {
+  sessionId: string
+}
+
+function formatTime(ms: number): string {
+  const date = new Date(ms)
+  const pad = (value: number): string => String(value).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+/**
+ * Right-sidebar body: where this Session came from in Feishu.
+ * @param props - the tab's Session.
+ * @returns the origin page.
+ */
+export function OriginTab({ sessionId }: OriginTabProps): JSX.Element {
+  const [state, reload] = useSessionOrigin(sessionId, true)
+  return (
+    <div className="dsh-channels-origin">
+      {state.phase === 'loading' ? <div className="dsh-channels-origin__muted">正在读取飞书来源…</div> : null}
+      {state.phase === 'error'
+        ? (
+            <div className="dsh-channels-origin__error">
+              <span>读取飞书来源失败：{state.message}</span>
+              <button type="button" className="dsh-channels-origin__link" onClick={reload}>重试</button>
+            </div>
+          )
+        : null}
+      {state.phase === 'ready' && state.origin === null
+        ? (
+            <div className="dsh-channels-origin__muted">
+              这个会话不是从飞书发起的。
+              <button type="button" className="dsh-channels-origin__link" onClick={reload}>刷新</button>
+            </div>
+          )
+        : null}
+      {state.phase === 'ready' && state.origin !== null ? <OriginDetails origin={state.origin} onRefresh={reload} /> : null}
+    </div>
+  )
+}
+
+function OriginDetails({ origin, onRefresh }: { origin: SessionOriginWire; onRefresh: () => void }): JSX.Element {
+  const p2p = origin.chatType === 'p2p'
+  const rows: Array<[string, JSX.Element | string]> = [
+    ['来源', p2p ? '私聊' : (origin.kind === 'thread' ? '群聊 · 话题' : '群聊')],
+  ]
+  // The heading already names a resolved group; an unnamed one shows its id.
+  if (!p2p && origin.chatName === undefined) {
+    rows.push(['群 ID', <span className="dsh-channels-origin__mono">{origin.chatId}</span>])
+  }
+  rows.push([origin.shared ? '请求人' : '发起人', (
+    <span className="dsh-channels-origin__who">
+      <Avatar text={origin.senderName ?? origin.senderUserId} url={origin.senderAvatarUrl} size={20} />
+      {origin.senderName === undefined ? null : <span>{origin.senderName}</span>}
+      <span className="dsh-channels-origin__mono dsh-channels-origin__muted">{origin.senderUserId}</span>
+    </span>
+  )])
+  const heading = originHeading(origin)
+  if (origin.shared) rows.push(['说明', '日志平台分析话题，群内成员都可以继续'])
+  rows.push(['开始于', formatTime(origin.createdAt)])
+  rows.push(origin.bound && origin.lastActivityAt !== undefined
+    ? ['最近活跃', formatTime(origin.lastActivityAt)]
+    : ['状态', '飞书侧已切换到新会话或已过期'])
+  return (
+    <>
+      <div className="dsh-channels-origin__head">
+        {heading.avatarUrl === undefined
+          ? <FeishuChannelsIcon size={16} active={false} />
+          : <Avatar text={heading.title} url={heading.avatarUrl} size={28} />}
+        <span className="dsh-channels-origin__title">{heading.title}</span>
+      </div>
+      <dl className="dsh-channels-origin__list">
+        {rows.map(([label, value]) => (
+          <div key={label} className="dsh-channels-origin__row">
+            <dt>{label}</dt>
+            <dd>{value}</dd>
+          </div>
+        ))}
+      </dl>
+      <div className="dsh-channels-origin__actions">
+        <a className="dsh-channels-origin__button" href={origin.chatLink} target="_blank" rel="noreferrer">在飞书中打开</a>
+        <button type="button" className="dsh-channels-origin__link" onClick={onRefresh}>刷新</button>
+      </div>
+    </>
+  )
+}