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

package/lib/client.js

@@ -4,8 +4,8 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
 		//#region src/settings/contract.ts
 		/**
 		* Web 设置面板的线上契约：Host 半侧的路由/面板数据与 Browser 半侧的渲染共用。
@@ -44,6 +44,14 @@ window.__ModuleLoader__.load({
 		* [`EditableFieldWire.browse`]，保留手写输入。
 		*/
 		const PICK_DIRECTORY_ROUTE = "/dsh-channels/pick-directory";
+		/** 会话的飞书来源（GET/HEAD，`?sessionId=`）：对话右侧栏「飞书来源」标签与会话头部入口使用。 */
+		const SESSION_ORIGIN_ROUTE = "/dsh-channels/session-origin";
+		/**
+		* `GET PROFILES_ROUTE?users=<user_id,...>&chats=<chat_id,...>`: live Feishu
+		* names and avatars for the users and chats the panel shows. At most
+		* {@link PROFILES_MAX_IDS} ids per list.
+		*/
+		const PROFILES_ROUTE = "/dsh-channels/profiles";
 		/**
 		* Top-level panel tabs, in render order. The panel shows the connection state
 		* header above every tab, so switching tabs never hides whether the bridge is
@@ -242,7 +250,10 @@ window.__ModuleLoader__.load({
 			cleared: "已恢复为 profile 配置",
 			debugModeWarning: "调试模式已打开：应用可用范围内的任何人都能和机器人对话。用完请在「访问授权」关闭。",
 			accessAdminMissingWarning: "没有可用的管理员，所有对话都会被拒绝。请在下方填写管理员 user_id（私聊机器人发送 /userid 获取）。",
-			accessAdminOwnerSummary: "未单独设置，正在使用应用所有者 {id}",
+			accessAdminCurrent: "当前管理员",
+			accessAdminSourceConfig: "已配置",
+			accessAdminSourceOwner: "应用所有者",
+			profilesWarning: "部分飞书名字和头像未能读取：{reason}",
 			accessNotLoaded: "飞书连接建立后加载授权列表",
 			accessRequestsTitle: "待处理申请",
 			accessGroupsTitle: "已授权群",
@@ -294,6 +305,69 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/icon.tsx
+		/**
+		* Paper-plane glyph drawn in `currentColor`, so it follows the row's text color.
+		* @param props - the sidebar's icon share.
+		* @returns decorative icon.
+		*/
+		function FeishuChannelsIcon({ size }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.6,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("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" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m10.1 13.9 4.4-4.4" })]
+			});
+		}
+		//#endregion
+		//#region src/client/avatar.tsx
+		/**
+		* 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
+		*/
+		/**
+		* 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.
+		*/
+		function Avatar(props) {
+			const { text, url, size = 26 } = props;
+			const [failed, setFailed] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				setFailed(false);
+			}, [url]);
+			const style = {
+				width: size,
+				height: size,
+				fontSize: Math.round(size * .46)
+			};
+			if (url !== void 0 && !failed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				className: "dsh-channels-avatar",
+				style,
+				src: url,
+				alt: "",
+				"aria-hidden": "true",
+				referrerPolicy: "no-referrer",
+				loading: "lazy",
+				onError: () => setFailed(true)
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-channels-avatar",
+				style,
+				"aria-hidden": "true",
+				children: Array.from(text)[0] ?? "?"
+			});
+		}
+		//#endregion
 		//#region src/client/api.ts
 		/**
 		* Same-origin HTTP client for the settings panel. No typert contract: the
@@ -312,9 +386,15 @@ window.__ModuleLoader__.load({
 			} catch {}
 			return `HTTP ${status}`;
 		}
-		async function request(path, init) {
+		/**
+		* 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, init) {
 			try {
-				return await fetch(path, {
+				return await fetch(route.slice(1), {
 					cache: "no-store",
 					credentials: "same-origin",
 					...init,
@@ -340,6 +420,41 @@ window.__ModuleLoader__.load({
 		async function fetchStatus() {
 			return readJson(await request(STATUS_ROUTE));
 		}
+		/** Feishu origin of one Session (`origin: null` when Feishu never routed it). */
+		async function fetchSessionOrigin(sessionId) {
+			return readJson(await request(`${SESSION_ORIGIN_ROUTE}?${new URLSearchParams({ sessionId }).toString()}`));
+		}
+		/**
+		* 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.
+		*/
+		async function fetchFeishuProfiles(userIds, chatIds) {
+			const requests = [];
+			const rounds = Math.max(1, Math.ceil(userIds.length / 200), Math.ceil(chatIds.length / 200));
+			for (let round = 0; round < rounds; round += 1) {
+				const window = (ids) => ids.slice(round * 200, (round + 1) * 200).join(",");
+				const query = new URLSearchParams({
+					users: window(userIds),
+					chats: window(chatIds)
+				}).toString();
+				requests.push(request(`${PROFILES_ROUTE}?${query}`).then((response) => readJson(response)));
+			}
+			const merged = {
+				users: {},
+				chats: {}
+			};
+			const warnings = /* @__PURE__ */ new Set();
+			for (const part of await Promise.all(requests)) {
+				Object.assign(merged.users, part.users);
+				Object.assign(merged.chats, part.chats);
+				if (part.warning !== void 0) 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
@@ -516,6 +631,257 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/origin-cache.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 = 15e3;
+		/** One settled or pending origin lookup per Session; failures are not kept. */
+		const lookups = /* @__PURE__ */ new Map();
+		/**
+		* 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.
+		*/
+		function loadSessionOrigin(sessionId, refresh = false) {
+			const cached = refresh ? void 0 : lookups.get(sessionId);
+			if (cached !== void 0 && (cached.nullAt === void 0 || Date.now() - cached.nullAt < NULL_ORIGIN_TTL_MS)) return cached.pending;
+			const pending = fetchSessionOrigin(sessionId).then((response) => response.origin);
+			const 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;
+		}
+		//#endregion
+		//#region src/client/origin.tsx
+		/**
+		* 对话里的「飞书来源」：会话头部的入口按钮（只在飞书发起的会话里出现）与
+		* 右侧栏的来源标签页。两者共用一份按会话缓存的来源查询。
+		*
+		* @module dsh-channels/client/origin
+		*/
+		/** Right-sidebar tab kind opened by the header button. */
+		const ORIGIN_TAB_KIND = "feishu-origin";
+		/** Tab-type implementation id and keyed body/title slot key. */
+		const ORIGIN_TAB_ID = "@modesto_ma/dsh-channels/origin";
+		/** Tab chip text. */
+		const ORIGIN_TAB_TITLE = "飞书来源";
+		/**
+		* 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, fresh = false) {
+			const [state, setState] = (0, react.useState)({ phase: "loading" });
+			const [reloadOf, setReloadOf] = (0, react.useState)({
+				sessionId,
+				ticket: 0
+			});
+			const ticket = reloadOf.sessionId === sessionId ? reloadOf.ticket : 0;
+			(0, react.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) => {
+					if (live) setState({
+						phase: "error",
+						message: error instanceof Error ? error.message : String(error)
+					});
+				});
+				return () => {
+					live = false;
+				};
+			}, [
+				fresh,
+				sessionId,
+				ticket
+			]);
+			return [state, (0, react.useCallback)(() => {
+				setReloadOf((current) => ({
+					sessionId,
+					ticket: current.sessionId === sessionId ? current.ticket + 1 : 1
+				}));
+			}, [sessionId])];
+		}
+		/** Header chip text: group name, or 私聊 with the peer's name. */
+		function sourceLabel$1(origin) {
+			if (origin.chatType === "p2p") return origin.senderName === void 0 ? "飞书私聊" : `私聊 · ${origin.senderName}`;
+			return origin.chatName === void 0 ? "飞书群聊" : origin.chatName;
+		}
+		/** Tab heading: the group, or the private-chat peer, with its avatar. */
+		function originHeading(origin) {
+			if (origin.chatType === "p2p") return {
+				title: origin.senderName ?? "飞书私聊",
+				...origin.senderAvatarUrl === void 0 ? {} : { avatarUrl: origin.senderAvatarUrl }
+			};
+			return {
+				title: origin.chatName ?? "飞书群聊",
+				...origin.chatAvatarUrl === void 0 ? {} : { 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 = 5e3;
+		/**
+		* 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.
+		*/
+		function OriginHeaderAction({ sessionId, openOrigin }) {
+			const [state, reload] = useSessionOrigin(sessionId);
+			const [retries, setRetries] = (0, react.useState)(0);
+			(0, react.useEffect)(() => {
+				setRetries(0);
+			}, [sessionId]);
+			const waiting = state.phase === "ready" && state.origin === null && retries < HEADER_NULL_RETRIES;
+			(0, react.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$1(state.origin);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dsh-channels-origin-chip",
+				title: `来自${label}，点击查看飞书来源`,
+				"aria-label": `飞书来源：${label}`,
+				onClick: openOrigin,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeishuChannelsIcon, {
+					size: 13,
+					active: false
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-channels-origin-chip__text",
+					children: label
+				})]
+			});
+		}
+		function formatTime(ms) {
+			const date = new Date(ms);
+			const pad = (value) => 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.
+		*/
+		function OriginTab({ sessionId }) {
+			const [state, reload] = useSessionOrigin(sessionId, true);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-origin",
+				children: [
+					state.phase === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-origin__muted",
+						children: "正在读取飞书来源…"
+					}) : null,
+					state.phase === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-origin__error",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["读取飞书来源失败：", state.message] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-channels-origin__link",
+							onClick: reload,
+							children: "重试"
+						})]
+					}) : null,
+					state.phase === "ready" && state.origin === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-origin__muted",
+						children: ["这个会话不是从飞书发起的。", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-channels-origin__link",
+							onClick: reload,
+							children: "刷新"
+						})]
+					}) : null,
+					state.phase === "ready" && state.origin !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OriginDetails, {
+						origin: state.origin,
+						onRefresh: reload
+					}) : null
+				]
+			});
+		}
+		function OriginDetails({ origin, onRefresh }) {
+			const p2p = origin.chatType === "p2p";
+			const rows = [["来源", p2p ? "私聊" : origin.kind === "thread" ? "群聊 · 话题" : "群聊"]];
+			if (!p2p && origin.chatName === void 0) rows.push(["群 ID", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-channels-origin__mono",
+				children: origin.chatId
+			})]);
+			rows.push([origin.shared ? "请求人" : "发起人", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "dsh-channels-origin__who",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+						text: origin.senderName ?? origin.senderUserId,
+						url: origin.senderAvatarUrl,
+						size: 20
+					}),
+					origin.senderName === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: origin.senderName }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-origin__mono dsh-channels-origin__muted",
+						children: origin.senderUserId
+					})
+				]
+			})]);
+			const heading = originHeading(origin);
+			if (origin.shared) rows.push(["说明", "日志平台分析话题，群内成员都可以继续"]);
+			rows.push(["开始于", formatTime(origin.createdAt)]);
+			rows.push(origin.bound && origin.lastActivityAt !== void 0 ? ["最近活跃", formatTime(origin.lastActivityAt)] : ["状态", "飞书侧已切换到新会话或已过期"]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-channels-origin__head",
+					children: [heading.avatarUrl === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeishuChannelsIcon, {
+						size: 16,
+						active: false
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+						text: heading.title,
+						url: heading.avatarUrl,
+						size: 28
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-origin__title",
+						children: heading.title
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+					className: "dsh-channels-origin__list",
+					children: rows.map(([label, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-origin__row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: value })]
+					}, label))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-channels-origin__actions",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "dsh-channels-origin__button",
+						href: origin.chatLink,
+						target: "_blank",
+						rel: "noreferrer",
+						children: "在飞书中打开"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-channels-origin__link",
+						onClick: onRefresh,
+						children: "刷新"
+					})]
+				})
+			] });
+		}
+		//#endregion
 		//#region src/client/catalog.ts
 		/**
 		* 浏览器半区的设置面板选择器目录折叠：把 Host 下发的字段描述与实时目录
@@ -1452,14 +1818,6 @@ window.__ModuleLoader__.load({
 				default: return PANEL_COPY.accessSourcePanel;
 			}
 		}
-		/** Round initial badge in front of a whitelist entry. */
-		function Avatar(props) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "dsh-channels-cfg__avatar",
-				"aria-hidden": "true",
-				children: Array.from(props.text)[0] ?? "?"
-			});
-		}
 		/**
 		* One titled whitelist with remove buttons and a collapsed add form.
 		* `onAdd` resolves true when the entry was added (the form then closes).
@@ -1484,7 +1842,10 @@ window.__ModuleLoader__.load({
 					!loaded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyRow, { text: PANEL_COPY.accessNotLoaded }) : null,
 					loaded && entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyRow, { text: empty }) : null,
 					entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-						leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, { text: avatar ?? entry.name ?? entry.id }),
+						leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+							text: avatar ?? entry.name ?? entry.id,
+							url: entry.avatarUrl
+						}),
 						label: entry.name ?? entry.id,
 						summary: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1554,15 +1915,20 @@ window.__ModuleLoader__.load({
 		}
 		/** Pending authorization requests, settled with the same resolver as the DM card. */
 		function RequestList(props) {
-			const { requests, disabled, working, onResolve } = props;
+			const { requests, profiles, disabled, working, onResolve } = props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
 				title: `${PANEL_COPY.accessRequestsTitle} · ${requests.length}`,
 				tone: "warn",
 				children: requests.map((request) => {
-					const target = request.name ?? request.targetId;
-					const where = request.kind === "user" && (request.groupName ?? request.chatId) !== void 0 ? fillCopy(PANEL_COPY.accessRequestIn, { group: request.groupName ?? request.chatId ?? "" }) : "";
+					const profile = request.kind === "user" ? profiles.user(request.targetId) : profiles.chat(request.targetId);
+					const target = profile?.name ?? request.name ?? request.targetId;
+					const group = request.chatId === void 0 ? request.groupName : profiles.chat(request.chatId)?.name ?? request.groupName ?? request.chatId;
+					const where = request.kind === "user" && group !== void 0 ? fillCopy(PANEL_COPY.accessRequestIn, { group }) : "";
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-						leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, { text: target }),
+						leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+							text: target,
+							url: profile?.avatarUrl
+						}),
 						label: `${target} ${where}${request.kind === "group" ? PANEL_COPY.accessRequestGroup : PANEL_COPY.accessRequestUser}`,
 						summary: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "dsh-channels-cfg__mono",
@@ -1601,15 +1967,10 @@ window.__ModuleLoader__.load({
 		* @module dsh-channels/client/panel/access-tab
 		*/
 		function AccessTab(props) {
-			const { form, accessNotice, accessError, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props;
+			const { form, profiles, 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;
-			const ownerAdmin = access.mode === "guarded" && access.admin.source === "owner" ? access.admin.userId : void 0;
-			const fields = ownerAdmin === void 0 ? form.fields : form.fields.map((field) => field.key === "adminUserId" ? {
-				...field,
-				summary: fillCopy(PANEL_COPY.accessAdminOwnerSummary, { id: ownerAdmin })
-			} : field);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsh-channels-cfg__tabBody",
 				children: [
@@ -1625,24 +1986,31 @@ window.__ModuleLoader__.load({
 						kind: "error",
 						text: access.admin.ownerLookupError === void 0 ? PANEL_COPY.accessAdminMissingWarning : `${PANEL_COPY.accessAdminMissingWarning}（${access.admin.ownerLookupError}）`
 					}) : null,
+					profiles.warning === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-channels-cfg__secFoot",
+						children: fillCopy(PANEL_COPY.profilesWarning, { reason: profiles.warning })
+					}),
 					access.loaded && access.requests.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestList, {
 						requests: access.requests,
+						profiles,
 						disabled,
 						working,
 						onResolve: onResolveRequest
 					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldSections, {
-						form: {
-							...form,
-							fields
-						},
-						groups: TAB_FIELD_GROUPS.access
+						form,
+						groups: TAB_FIELD_GROUPS.access,
+						extra: { access: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminRow, {
+							admin: access.admin,
+							profiles
+						}) }
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Whitelist, {
 						title: PANEL_COPY.accessGroupsTitle,
 						entries: access.groups.map((group) => ({
 							id: group.chatId,
-							name: group.name,
+							name: profiles.chat(group.chatId)?.name ?? group.name,
+							avatarUrl: profiles.chat(group.chatId)?.avatarUrl,
 							source: group.source
 						})),
 						avatar: "群",
@@ -1660,7 +2028,8 @@ window.__ModuleLoader__.load({
 						title: PANEL_COPY.accessUsersTitle,
 						entries: access.users.map((user) => ({
 							id: user.userId,
-							name: user.name,
+							name: profiles.user(user.userId)?.name ?? user.name,
+							avatarUrl: profiles.user(user.userId)?.avatarUrl,
 							source: user.source
 						})),
 						empty: PANEL_COPY.accessUsersEmpty,
@@ -1676,6 +2045,31 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** The effective administrator with their Feishu name and avatar; nothing while there is none. */
+		function AdminRow(props) {
+			const { admin, profiles } = props;
+			if (admin.userId === void 0) return null;
+			const profile = profiles.user(admin.userId);
+			const name = profile?.name ?? admin.userId;
+			const source = admin.source === "owner" ? PANEL_COPY.accessAdminSourceOwner : PANEL_COPY.accessAdminSourceConfig;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+					text: name,
+					url: profile?.avatarUrl
+				}),
+				label: name,
+				summary: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					PANEL_COPY.accessAdminCurrent,
+					" · ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__mono",
+						children: admin.userId
+					}),
+					" · ",
+					source
+				] })
+			});
+		}
 		//#endregion
 		//#region src/client/panel/credentials-card.tsx
 		/**
@@ -2159,6 +2553,76 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/panel/profiles.ts
+		/**
+		* Live Feishu names and avatars for every user and chat the access and wiki
+		* tabs show. The page asks the Host once on entry and again whenever the set
+		* of shown ids changes; a failed request keeps the previous answer.
+		*
+		* @module dsh-channels/client/panel/profiles
+		*/
+		/**
+		* The `user_id`s and `chat_id`s one access snapshot shows.
+		* @param access - the panel's access snapshot.
+		* @returns sorted, distinct ids per kind.
+		*/
+		function profileIds(access) {
+			const users = /* @__PURE__ */ new Set();
+			const chats = /* @__PURE__ */ new Set();
+			if (access.admin.userId !== void 0) users.add(access.admin.userId);
+			for (const user of access.users) users.add(user.userId);
+			for (const user of access.wikiUsers) users.add(user.userId);
+			for (const group of access.groups) chats.add(group.chatId);
+			for (const request of access.requests) {
+				if (request.kind === "user") users.add(request.targetId);
+				else chats.add(request.targetId);
+				if (request.chatId !== void 0) chats.add(request.chatId);
+			}
+			return {
+				users: [...users].sort(),
+				chats: [...chats].sort()
+			};
+		}
+		/**
+		* Profiles for one access snapshot; empty until the panel has loaded.
+		* @param access - the panel's access snapshot, null while loading.
+		* @returns lookups by id and the latest failure reason.
+		*/
+		function useFeishuProfiles(access) {
+			const ids = (0, react.useMemo)(() => access === null ? {
+				users: [],
+				chats: []
+			} : profileIds(access), [access]);
+			const key = `${ids.users.join(",")}|${ids.chats.join(",")}`;
+			const [answer, setAnswer] = (0, react.useState)({
+				users: {},
+				chats: {}
+			});
+			const [requestError, setRequestError] = (0, react.useState)(void 0);
+			(0, react.useEffect)(() => {
+				if (ids.users.length === 0 && ids.chats.length === 0) return;
+				let current = true;
+				fetchFeishuProfiles(ids.users, ids.chats).then((next) => {
+					if (!current) return;
+					setAnswer(next);
+					setRequestError(void 0);
+				}, (error) => {
+					if (current) setRequestError(error instanceof Error ? error.message : String(error));
+				});
+				return () => {
+					current = false;
+				};
+			}, [key]);
+			return (0, react.useMemo)(() => {
+				const warning = requestError ?? answer.warning;
+				return {
+					user: (userId) => answer.users[userId],
+					chat: (chatId) => answer.chats[chatId],
+					...warning === void 0 ? {} : { warning }
+				};
+			}, [answer, requestError]);
+		}
+		//#endregion
 		//#region src/client/panel/wiki-tab.tsx
 		/**
 		* 「知识库」tab：知识库工具字段（读取 / 编辑开关、可访问范围）+ 知识库
@@ -2168,7 +2632,7 @@ window.__ModuleLoader__.load({
 		* @module dsh-channels/client/panel/wiki-tab
 		*/
 		function WikiTab(props) {
-			const { form, accessNotice, accessError, onAddUser, onRemoveUser } = props;
+			const { form, profiles, accessNotice, accessError, onAddUser, onRemoveUser } = props;
 			const { access } = form.panel;
 			const disabled = form.busy !== null || form.locked || !access.loaded;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2182,6 +2646,10 @@ window.__ModuleLoader__.load({
 						kind: "error",
 						text: accessError
 					}),
+					profiles.warning === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-channels-cfg__secFoot",
+						children: fillCopy(PANEL_COPY.profilesWarning, { reason: profiles.warning })
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldSections, {
 						form,
 						groups: TAB_FIELD_GROUPS.wiki
@@ -2191,7 +2659,8 @@ window.__ModuleLoader__.load({
 						countLabel: fillCopy(PANEL_COPY.wikiUsersAdminPlus, { n: access.wikiUsers.length }),
 						entries: access.wikiUsers.map((user) => ({
 							id: user.userId,
-							name: user.name,
+							name: profiles.user(user.userId)?.name ?? user.name,
+							avatarUrl: profiles.user(user.userId)?.avatarUrl,
 							source: user.source
 						})),
 						empty: PANEL_COPY.wikiUsersEmpty,
@@ -2211,18 +2680,32 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/panel/index.tsx
 		/**
-		* 设置 →「飞书渠道」页面：数据加载、5 秒状态轮询、全局 draft、顶部状态头 /
+		* 左侧栏「飞书渠道」主区页面：数据加载、5 秒状态轮询、全局 draft、顶部状态头 /
 		* tab 导航与底部保存条的外壳。
 		*
 		* 所有 Host 交互（panel / status / catalog / config / credentials / access /
 		* pick-directory）都集中在这里；tab 组件只接收渲染所需的数据与
-		* 回调。页面不 import 任何 DSH 客户端包，只依赖 react 与 `settings.section`
-		* 槽位。
+		* 回调。页面不 import 任何 DSH 客户端包，只依赖 react 与 `main` 槽位。
 		*
 		* @module dsh-channels/client/panel
 		*/
-		/** Page shell: one panel payload, one status poll, one global config draft. */
-		function FeishuChannelsSection(_props) {
+		/**
+		* Main-column page for the `main` slot: a full-height scroll region with the
+		* centered panel column. The slot passes no owner props.
+		* @returns the page.
+		*/
+		function FeishuChannelsPage() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				className: "dsh-channels-page",
+				"aria-label": PANEL_COPY.title,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-channels-page__content",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeishuChannelsPanel, {})
+				})
+			});
+		}
+		/** Panel shell: one panel payload, one status poll, one global config draft. */
+		function FeishuChannelsPanel() {
 			const [load, setLoad] = (0, react.useState)({ phase: "loading" });
 			const [activeTab, setActiveTab] = (0, react.useState)("connection");
 			const [draft, setDraft] = (0, react.useState)({});
@@ -2844,6 +3327,7 @@ window.__ModuleLoader__.load({
 				renderedFields,
 				updateDraft
 			]);
+			const profiles = useFeishuProfiles(panel?.access ?? null);
 			const credentials = (0, react.useMemo)(() => ({
 				appId: appIdInput,
 				appSecret: appSecretInput,
@@ -2969,6 +3453,7 @@ window.__ModuleLoader__.load({
 							}) : null,
 							activeTab === "access" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessTab, {
 								form,
+								profiles,
 								accessNotice,
 								accessError,
 								onAddGroup: onAddAccessGroup,
@@ -2985,6 +3470,7 @@ window.__ModuleLoader__.load({
 							}) : null,
 							activeTab === "wiki" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WikiTab, {
 								form,
+								profiles,
 								accessNotice,
 								accessError,
 								onAddUser: (userId, name) => addUser(addWikiUser, userId, name, PANEL_COPY.wikiUserAdded),
@@ -3023,7 +3509,7 @@ window.__ModuleLoader__.load({
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dsh-channels-cfg__headRow",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 							className: "dsh-channels-cfg__title",
 							children: PANEL_COPY.title
 						}),
@@ -3131,7 +3617,7 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/styles.ts
 		/**
-		* Settings panel styling. DSH semantic tokens (`--dsw-alias-*`) with neutral
+		* Feishu channel page styling. DSH semantic tokens (`--dsw-alias-*`) with neutral
 		* fallbacks, aliased once to local `--dc-*` variables, so the page follows
 		* the active theme.
 		*
@@ -3139,10 +3625,13 @@ window.__ModuleLoader__.load({
 		*/
 		const STYLE_ATTRIBUTE = "data-dsh-channels-css";
 		const CSS = `
+.dsh-channels-page{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;scrollbar-gutter:stable;background:var(--dsw-alias-bg-base,#fff)}
+.dsh-channels-page__content{box-sizing:border-box;max-width:816px;margin:0 auto;padding:18px clamp(24px,4vw,48px) 48px}
+[data-platform='darwin'] .dsh-channels-page__content{padding-top:calc(18px + var(--dsh-frame-top-clearance,0px))}
 .dsh-channels-cfg{--dc-fg:var(--dsw-alias-label-primary,#1f2328);--dc-fg2:var(--dsw-alias-label-secondary,#5c6169);--dc-fg3:var(--dsw-alias-label-tertiary,#8a8f98);--dc-dim:var(--dsw-alias-label-dimmed,#b0b4ba);--dc-bg:var(--dsw-alias-bg-base,#fff);--dc-line:var(--dsw-alias-border-l2,rgba(0,0,0,.12));--dc-hover:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05));--dc-accent:var(--dsw-alias-state-business-primary,#0a67d3);--dc-ok:var(--dsw-alias-state-success-primary,#0a7d33);--dc-warn:var(--dsw-alias-state-warn-primary,#a15c00);--dc-bad:var(--dsw-alias-state-error-primary,#c62828);--dc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;container-type:inline-size;display:flex;flex-direction:column;gap:14px;width:100%;max-width:720px;color:var(--dc-fg);font-size:13px;line-height:20px}
 .dsh-channels-cfg__panelHead{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:10px 0 6px;background:var(--dc-bg)}
 .dsh-channels-cfg__headRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.dsh-channels-cfg__title{margin:0 2px 0 0;font-size:17px;font-weight:600;line-height:26px}
+.dsh-channels-cfg__title{margin:0 2px 0 0;font-size:20px;font-weight:500;line-height:28px}
 .dsh-channels-cfg__meta{color:var(--dc-fg3);font-size:12px}
 .dsh-channels-cfg__spacer{flex:1}
 .dsh-channels-cfg__mono{font-family:var(--dc-mono);font-size:12px}
@@ -3233,7 +3722,7 @@ window.__ModuleLoader__.load({
 .dsh-channels-cfg__scopeList li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
 .dsh-channels-cfg__scopeList .dsh-channels-cfg__link{font-size:12px}
 .dsh-channels-cfg__list>.dsh-channels-cfg__scopeList{border-top-width:0}
-.dsh-channels-cfg__avatar{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--dc-hover);color:var(--dc-fg2);font-size:12px}
+.dsh-channels-avatar{box-sizing:border-box;display:grid;place-items:center;flex:none;border-radius:50%;object-fit:cover;background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05));color:var(--dsw-alias-label-secondary,#5c6169);line-height:1}
 .dsh-channels-cfg__addRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px}
 .dsh-channels-cfg__addRow .dsh-channels-cfg__input{flex:1 1 160px;width:auto}
 .dsh-channels-cfg__emptyRow{padding:11px 14px;color:var(--dc-fg3);font-size:12px}
@@ -3246,6 +3735,26 @@ window.__ModuleLoader__.load({
 .dsh-channels-cfg__stepTitle{font-weight:500}
 .dsh-channels-cfg__error{padding:10px 12px;border:1px solid var(--dc-bad);border-radius:10px;color:var(--dc-bad);font-size:12px;line-height:18px;display:flex;flex-direction:column;gap:8px}
 .dsh-channels-cfg__loading{padding:16px 0;color:var(--dc-fg3);font-size:12px}
+.dsh-channels-origin-chip{display:inline-flex;align-items:center;gap:4px;max-width:180px;height:24px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary,#5c6169);font:inherit;font-size:12px;line-height:24px;cursor:pointer;white-space:nowrap}
+.dsh-channels-origin-chip:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05));color:var(--dsw-alias-label-primary,#1f2328)}
+.dsh-channels-origin-chip>svg{flex:none}
+.dsh-channels-origin__who{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
+.dsh-channels-origin-chip__text{overflow:hidden;text-overflow:ellipsis}
+.dsh-channels-origin{box-sizing:border-box;height:100%;overflow:auto;padding:16px;color:var(--dsw-alias-label-primary,#1f2328);font-size:13px;line-height:20px}
+.dsh-channels-origin__head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
+.dsh-channels-origin__title{font-size:15px;font-weight:600;line-height:22px;overflow-wrap:anywhere}
+.dsh-channels-origin__list{display:flex;flex-direction:column;margin:0;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:10px}
+.dsh-channels-origin__row{display:flex;gap:12px;padding:9px 12px}
+.dsh-channels-origin__row+.dsh-channels-origin__row{border-top:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12))}
+.dsh-channels-origin__row dt{flex:none;width:64px;color:var(--dsw-alias-label-tertiary,#8a8f98)}
+.dsh-channels-origin__row dd{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
+.dsh-channels-origin__mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
+.dsh-channels-origin__muted{color:var(--dsw-alias-label-tertiary,#8a8f98)}
+.dsh-channels-origin__error{display:flex;flex-direction:column;gap:6px;color:var(--dsw-alias-state-error-primary,#c62828);font-size:12px}
+.dsh-channels-origin__actions{display:flex;align-items:center;gap:14px;margin-top:14px}
+.dsh-channels-origin__button{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:7px;color:inherit;font-size:13px;text-decoration:none}
+.dsh-channels-origin__button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}
+.dsh-channels-origin__link{padding:0;border:0;background:none;color:var(--dsw-alias-state-business-primary,#0a67d3);font:inherit;font-size:13px;cursor:pointer}
 @media (prefers-reduced-motion:reduce){.dsh-channels-cfg__switch,.dsh-channels-cfg__switch::after{transition:none}}
 @container (max-width:560px){
 .dsh-channels-cfg__row:not(.dsh-channels-cfg__row--wide){flex-wrap:wrap}
@@ -3267,11 +3776,13 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/index.ts
 		/**
-		* 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
 		*/
@@ -3279,28 +3790,67 @@ window.__ModuleLoader__.load({
 		const name = "dsh-channels";
 		/** Required client services: the Slots registry is part of the web shell core. */
 		const inject = ["slots"];
-		/** Section id and nav order (built-ins: account -10, general 0, models 10, plugins 15, agent-presets 20). */
-		const SETTINGS_SECTION_ID = "feishu-channels";
-		const SETTINGS_SECTION_ORDER = 40;
 		/**
-		* Mount the settings section and its stylesheet.
+		* 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.
+		*/
+		const PANEL_ID = "feishu-channels";
+		/** Left-sidebar row order (built-ins: tasks 10; Plugins is pinned last by the sidebar). */
+		const PANEL_ORDER = 40;
+		/** Session header action order (after the preset label -10 and subagents 10). */
+		const ORIGIN_ACTION_ORDER = 30;
+		/**
+		* 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.
 		*/
 		function apply(ctx) {
-			if (typeof ctx.effect === "function") ctx.effect(() => installStyles(), "dsh-channels: settings styles");
+			if (typeof ctx.effect === "function") ctx.effect(() => installStyles(), "dsh-channels: panel styles");
 			else installStyles();
-			ctx.slots.inject("settings.section", () => ctx.slots.register({
-				name: "settings.section",
-				id: SETTINGS_SECTION_ID,
+			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: 40,
 				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.
+		*/
+		function mountOrigin(scope) {
+			const definition = {
+				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: 30,
+				inject: () => ({ openOrigin: () => {
+					scope.sidebarRight.openTab(ORIGIN_TAB_KIND);
+				} })
+			}, OriginHeaderAction));
 		}
 		//#endregion
-		exports.SETTINGS_SECTION_ID = SETTINGS_SECTION_ID;
-		exports.SETTINGS_SECTION_ORDER = SETTINGS_SECTION_ORDER;
+		exports.ORIGIN_ACTION_ORDER = ORIGIN_ACTION_ORDER;
+		exports.PANEL_ID = PANEL_ID;
+		exports.PANEL_ORDER = PANEL_ORDER;
 		exports.apply = apply;
 		exports.inject = inject;
+		exports.mountOrigin = mountOrigin;
 		exports.name = name;
 		return module.exports;
 	}