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

package/package.json

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

package/src/access/cards.ts

@@ -49,6 +49,8 @@ export interface UserRequestCardInput {
   requesterName?: string
   /** Opaque request token. */
   token: string
+  /** Whether whitelisted users may also use private chats (`dmAllowWhitelist`). */
+  dmAllowWhitelist?: boolean
   /** Render timestamp (defaults to now). */
   now?: number
 }
@@ -158,7 +160,9 @@ export function buildUserRequestCard(input: UserRequestCardInput): object {
   }
   elements.push(field('申请时间', formatTime(input.now)))
   elements.push(divider())
-  elements.push(note('授权后该用户可在所有已授权群里使用；私聊仍仅管理员可用。'))
+  elements.push(note(input.dmAllowWhitelist === true
+    ? '授权后该用户可在所有已授权群里使用，也可以私聊机器人。'
+    : '授权后该用户可在所有已授权群里使用；私聊仍仅管理员可用。'))
   elements.push(decisionButtons(input.token, '授权用户', '忽略'))
   return standaloneCard('**🙋 用户授权申请**', elements)
 }

package/src/access/controller.ts

@@ -6,14 +6,15 @@
  * matrix lives in `policy.ts`; this module owns the user-facing behavior on
  * denial:
  *
- *  - private chats: non-administrators get one fixed notice (10 s per-sender
+ *  - private chats: denied senders (non-administrators, or non-whitelisted
+ *    users with `dmAllowWhitelist`) get one fixed notice (10 s per-sender
  *    cooldown); with no administrator configured they get the bootstrap
  *    notice instead;
  *  - group chats: fully silent, except that addressed denials call back into
  *    the authorization-request lifecycle so the administrator can be asked;
  *  - slash commands: `/userid` stays available to every private sender, the
  *    administrator's commands always pass (including inside an unauthorized
- *    group), everything else must pass admission.
+ *    group), everything else must pass admission (in private chats too).
  *
  * The controller never creates a Session or a workspace.
  *
@@ -30,6 +31,9 @@ import type { AccessStore, AccessStoreSnapshot } from './store.ts'
 /** Fixed private-chat notice for non-administrators (no model call). */
 export const DM_DENY_TEXT = '非管理员禁用私聊功能哦～如需使用，请在管理员授权的群里 @ 我；或联系管理员把你的 user_id 加入白名单。'
 
+/** Fixed private-chat notice for non-whitelisted users while `dmAllowWhitelist` is on. */
+export const DM_DENY_WHITELIST_TEXT = '你还不在白名单里，暂时不能私聊哦～发送 /userid 查看你的 user_id，请管理员加入白名单后即可使用。'
+
 /** Fixed private-chat notice while no administrator is configured. */
 export const DM_UNCONFIGURED_TEXT = '机器人尚未配置管理员。发送 /userid 可查看你的 user_id，交给部署者配置后即可启用。'
 
@@ -123,8 +127,9 @@ export class AccessController {
   /**
    * Slash-command admission. Runs before any command card/topic/Session side
    * effect. `open` mode keeps the legacy behavior; otherwise private chats
-   * stay administrator-only (with `/userid` as the bootstrap exception) and
-   * group chats must pass the full admission matrix; the administrator is
+   * admit whoever the admission matrix admits (with `/userid` as the
+   * bootstrap exception) and group chats must pass the full admission
+   * matrix; the administrator is
    * never constrained by the whitelists, so all of their commands pass even
    * inside an unauthorized group (`/auth` is the in-conversation grant
    * entry).
@@ -136,7 +141,7 @@ export class AccessController {
         // `/userid` is the bootstrap entry for everyone: it only echoes the
         // sender's own user_id and has no storage/model side effect.
         if (commandName === 'userid') return true
-        if (this.isAdmin(msg.senderId)) return true
+        if (this.decide(msg).kind === 'allow') return true
         await this.noticeDeniedDm(msg)
         return false
       }
@@ -207,7 +212,10 @@ export class AccessController {
     const last = this.dmNoticeAt.get(msg.senderId)
     if (last !== undefined && now - last < DM_NOTICE_COOLDOWN_MS) return
     this.dmNoticeAt.set(msg.senderId, now)
-    const text = this.config().adminUserId === undefined ? DM_UNCONFIGURED_TEXT : DM_DENY_TEXT
+    const config = this.config()
+    const text = config.adminUserId === undefined
+      ? DM_UNCONFIGURED_TEXT
+      : config.dmAllowWhitelist ? DM_DENY_WHITELIST_TEXT : DM_DENY_TEXT
     await this.sendText(msg.chatId, text, msg.messageId)
   }
 

package/src/access/policy.ts

@@ -11,7 +11,9 @@
  * Access model:
  *  - the administrator may start/continue a conversation in any private chat
  *    or any group, regardless of the whitelists;
- *  - private chats: non-administrators are refused;
+ *  - private chats: non-administrators are refused, unless
+ *    `dmAllowWhitelist` is on and their user_id is on the global user
+ *    whitelist;
  *  - group chats: non-administrators need the group to be authorized AND
  *    their user_id to be on the global user whitelist.
  *
@@ -56,7 +58,7 @@ export type AccessDecision =
   }
 
 /** The configuration slice admission reads (allows easy fakes in tests). */
-export type AccessPolicyConfig = Pick<FeishuConfig, 'accessMode' | 'adminUserId'>
+export type AccessPolicyConfig = Pick<FeishuConfig, 'accessMode' | 'adminUserId' | 'dmAllowWhitelist'>
 
 /** True when `userId` is exactly the configured administrator. */
 export function isAdminUserId(
@@ -90,6 +92,9 @@ export function decideAccess(
   if (subject.senderId.trim() === admin) return { kind: 'allow', reason: 'admin' }
 
   if (subject.chatType === 'p2p') {
+    if (config.dmAllowWhitelist && snapshot.users.has(subject.senderId)) {
+      return { kind: 'allow', reason: 'authorized-user' }
+    }
     return { kind: 'deny', reason: 'dm-non-admin' }
   }
 

package/src/access/requests.ts

@@ -350,6 +350,7 @@ export class AccessRequests {
         ...(groupName === undefined ? {} : { groupName }),
         ...(msg.senderName === undefined ? {} : { requesterName: msg.senderName }),
         token: record.token,
+        dmAllowWhitelist: this.config().dmAllowWhitelist,
         now,
       }), record)
       return true

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/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>
+    </>
+  )
+}