@keyou007/agent-bot 0.1.14-alpha.0 → 0.1.14-alpha.2

package/src/feishu/CardRenderer.ts

@@ -11,7 +11,7 @@ import type {
   ToolState,
 } from "../runtime/types.js";
 import type { TurnActivity, TurnViewState, TurnViewStatus } from "../presentation/turnViewTypes.js";
-import { truncateMiddle, truncateText } from "../utils/markdown.js";
+import { truncateText } from "../utils/markdown.js";
 import { localCardImage } from "./LocalCardImage.js";
 
 export interface StartupStatusView {
@@ -177,6 +177,43 @@ export interface TaskListCardEntry {
   current?: boolean;
 }
 
+export interface SessionTaskCardEntry {
+  reference: string;
+  summary: string;
+  detailLines: string[];
+  actions?: TaskListCardAction[];
+  current?: boolean;
+}
+
+export interface SessionTaskCardGroup {
+  title: string;
+  entries: SessionTaskCardEntry[];
+  actions?: TaskListCardAction[];
+}
+
+export interface DirectoryBrowserCardEntry {
+  name: string;
+  kind: "directory" | "drive" | "file" | "image" | "binary";
+  openAction?: TaskListCardAction;
+  actions?: TaskListCardAction[];
+}
+
+export interface DirectoryBrowserCardView {
+  directory: string;
+  entries: DirectoryBrowserCardEntry[];
+  currentActions: TaskListCardAction[];
+  navigationActions: TaskListCardAction[];
+  footerLines: string[];
+}
+
+const DIRECTORY_BROWSER_ROW_COUNT = 16;
+
+export type ThinkingCardLayout = "grouped" | "timeline";
+
+export interface CardRendererOptions {
+  thinkingCardLayout?: ThinkingCardLayout;
+}
+
 export interface ResetHistoryCardEntry extends TaskListCardEntry {
   sequence: number;
   graphNodeLine: string;
@@ -190,6 +227,12 @@ export interface ResetHistoryCardView {
 }
 
 export class CardRenderer {
+  private readonly thinkingCardLayout: ThinkingCardLayout;
+
+  constructor(options: CardRendererOptions = {}) {
+    this.thinkingCardLayout = options.thinkingCardLayout ?? "grouped";
+  }
+
   renderExecutionSettings(view: ExecutionSettingsCardView): Record<string, unknown> {
     const baseAction: Record<string, string> = {
       contextKey: view.contextKey,
@@ -807,7 +850,9 @@ export class CardRenderer {
   }
 
   renderTurn(state: TurnViewState): Record<string, unknown> {
-    const elements = renderTurnElements(state, "hidden");
+    const elements = this.thinkingCardLayout === "timeline"
+      ? renderTurnElements(state, "hidden")
+      : renderGroupedTurnElements(state, "hidden");
     if (isTurnStoppable(state.status)) {
       elements.push({ tag: "hr" }, taskActionRow([{
         text: "Stop",
@@ -843,10 +888,27 @@ export class CardRenderer {
   }
 
   renderActivityHistory(state: TurnViewState, requestedPage: number): Record<string, unknown> {
-    const pages = activityPages(turnActivities(state));
+    const grouped = this.thinkingCardLayout === "grouped";
+    const activities = turnActivities(state);
+    const allGroups = grouped ? groupTurnActivities(activities).flatMap(splitGroupedExecutionActivity) : [];
+    const historyGroups = grouped
+      ? groupedLiveActivityPage(groupedActivityPagesFromGroups(allGroups, state.projectCwd), state.projectCwd).historyGroups
+      : [];
+    const usesHistoricalPrefixPages = historyGroups.length > 0;
+    const pages = grouped
+      ? groupedActivityPagesFromGroups(
+        usesHistoricalPrefixPages ? historyGroups : allGroups,
+        state.projectCwd,
+        {
+        fullActivityText: true,
+        includeReasoningHistory: true,
+        },
+      )
+      : activityPages(activities);
     if (pages.length === 0) {
       return this.renderSectionsCard("思考活动历史", [{ lines: ["没有保存到活动记录。"] }]);
     }
+    const totalPages = usesHistoricalPrefixPages ? pages.length + 1 : pages.length;
     const page = Math.max(0, Math.min(Math.trunc(requestedPage), pages.length - 1));
     const actions: TaskListCardAction[] = [
       ...(pages.length > 1 ? [{
@@ -857,15 +919,20 @@ export class CardRenderer {
         text: "上一页",
         value: { action: "activity_history", turnId: state.turnId, page: String(page - 1) },
       }] : []),
-      ...(page < pages.length - 2 ? [{
+      ...(page < pages.length - (usesHistoricalPrefixPages ? 1 : 2) ? [{
         text: "下一页",
         value: { action: "activity_history", turnId: state.turnId, page: String(page + 1) },
       }] : []),
     ];
     const elements: Record<string, unknown>[] = [];
     if (actions.length > 0) elements.push(taskActionRow(actions), { tag: "hr" });
-    elements.push(...renderActivities(pages[page] ?? [], state.projectCwd, true));
-    return sectionCard(`思考活动历史 · ${page + 1}/${pages.length}`, elements.length > 0 ? elements : [markdown("无")]);
+    elements.push(...(grouped
+      ? renderGroupedActivityGroups(pages[page] as GroupedTurnActivity[] | undefined ?? [], state.projectCwd, {
+        fullActivityText: true,
+        includeReasoningHistory: true,
+      })
+      : renderActivities(pages[page] as TurnActivity[] | undefined ?? [], state.projectCwd, true)));
+    return sectionCard(`思考活动历史 · ${page + 1}/${totalPages}`, elements.length > 0 ? elements : [markdown("无")]);
   }
 
   renderSessionStarted(session: RuntimeSession): Record<string, unknown> {
@@ -990,6 +1057,68 @@ export class CardRenderer {
     };
   }
 
+  renderSessionTaskListCard(
+    title: string,
+    sectionTitle: string,
+    groups: SessionTaskCardGroup[],
+    footerLines: string[],
+    footerActions: TaskListCardAction[] = [],
+  ): Record<string, unknown> {
+    const elements: Record<string, unknown>[] = [markdown(`**${sectionTitle}**`)];
+    if (groups.length === 0) {
+      elements.push(markdown("无"));
+    } else {
+      groups.forEach((group) => {
+        elements.push(sessionProjectRow(group));
+        elements.push(...group.entries.map(sessionTaskPanel));
+      });
+    }
+    if (footerActions.length > 0) {
+      elements.push(taskActionRow(footerActions));
+    }
+    if (footerLines.length > 0) {
+      elements.push(markdown(footerLines.join("\n")));
+    }
+    return {
+      schema: "2.0",
+      config: {
+        update_multi: true,
+        width_mode: "fill",
+      },
+      header: {
+        template: "blue",
+        title: {
+          tag: "plain_text",
+          content: title,
+        },
+      },
+      body: {
+        vertical_spacing: "4px",
+        elements,
+      },
+    };
+  }
+
+  renderDirectoryBrowserCard(view: DirectoryBrowserCardView): Record<string, unknown> {
+    const elements: Record<string, unknown>[] = [
+      markdown(`**当前目录**：${inlineCode(view.directory)}`),
+      taskActionRow(view.currentActions),
+      { tag: "hr" },
+    ];
+    const entryRows = view.entries.length === 0
+      ? [directoryBrowserEmptyRow()]
+      : view.entries.slice(0, DIRECTORY_BROWSER_ROW_COUNT).map(directoryBrowserEntryRow);
+    while (entryRows.length < DIRECTORY_BROWSER_ROW_COUNT) entryRows.push(directoryBrowserPlaceholderRow());
+    elements.push(...entryRows);
+    if (view.navigationActions.length > 0) {
+      elements.push({ tag: "hr" }, taskActionRow(view.navigationActions));
+    }
+    if (view.footerLines.length > 0) {
+      elements.push({ tag: "hr" }, markdown(view.footerLines.join("\n")));
+    }
+    return sectionCard("文件浏览", elements, "blue", "2px");
+  }
+
   renderResetHistoryCard(view: ResetHistoryCardView): Record<string, unknown> {
     const elements: Record<string, unknown>[] = [
       {
@@ -1124,6 +1253,77 @@ function renderTurnElements(
   return elements;
 }
 
+function renderGroupedTurnElements(
+  state: TurnViewState,
+  assistantTextMode: "hidden" | "always",
+): Record<string, unknown>[] {
+  const elements: Record<string, unknown>[] = [];
+  const allActivities = turnActivities(state);
+  const livePages = groupedActivityPages(allActivities, state.projectCwd);
+  const visible = groupedLiveActivityPage(livePages, state.projectCwd);
+  const historyPages = groupedActivityPagesFromGroups(visible.historyGroups, state.projectCwd, {
+    fullActivityText: true,
+    includeReasoningHistory: true,
+  });
+  if (state.plan.length > 0) elements.push(planPanel(state.plan));
+  if (historyPages.length > 0) {
+    elements.push(taskActionRow([{
+      text: `查看历史思考（共 ${historyPages.length + 1} 页）`,
+      value: {
+        action: "activity_history",
+        turnId: state.turnId,
+        page: String(historyPages.length - 1),
+      },
+    }]));
+  }
+  if (state.activitiesTruncated && visible.groups[0]?.kind !== "gap") elements.push(markdown("…"));
+  elements.push(...renderGroupedActivityGroups(visible.groups, state.projectCwd));
+  if (state.fileSummary.length > 0) elements.push(fileSummaryPanel(state));
+
+  if (state.approval) {
+    const request = state.approval;
+    elements.push(markdown([
+      `**${request.title}**`,
+      request.command ? codeBlock(request.command, 800) : undefined,
+      request.reason,
+    ].filter(Boolean).join("\n")));
+    elements.push({
+      tag: "column_set",
+      flex_mode: "flow",
+      horizontal_spacing: "8px",
+      vertical_spacing: "8px",
+      columns: request.options.map((option) => ({
+        tag: "column",
+        width: "auto",
+        elements: [{
+          tag: "button",
+          text: { tag: "plain_text", content: approvalDecisionLabel(option.id) },
+          type: option.id === "accept" || option.id === "acceptForSession" ? "primary" : option.id === "cancel" ? "danger" : "default",
+          behaviors: [{
+            type: "callback",
+            value: {
+              action: "approval",
+              sessionId: state.sessionId,
+              turnId: state.turnId,
+              requestId: request.id,
+              decision: option.id,
+            },
+          }],
+        }],
+      })),
+    });
+  }
+  if (state.error) elements.push(markdown(codeBlock(state.error, 2_000)));
+  const showAssistantText = state.assistantText && assistantTextMode === "always";
+  if (showAssistantText) {
+    if (elements.length > 0) elements.push({ tag: "hr" });
+    const heading = state.status === "completed" ? "回答" : "回答生成中";
+    elements.push(markdown(`**${heading}**\n${truncateText(state.assistantText, 3_000)}`));
+  }
+  if (elements.length === 0) elements.push(markdown(emptyTurnText(state.status, state.agentLabel)));
+  return elements;
+}
+
 function emptyTurnText(status: TurnViewStatus, agentLabel?: string): string {
   const label = agentLabel?.trim().replace(/[\r\n]+/g, " ") || "Agent";
   if (status === "starting") return `正在连接 ${label}…`;
@@ -1216,6 +1416,135 @@ function renderActivities(
   return elements;
 }
 
+type GroupedTurnActivity =
+  | { kind: "activity"; activity: TurnActivity }
+  | { kind: "gap"; id: string }
+  | {
+      kind: "execution";
+      id: string;
+      latestReasoning?: Extract<TurnActivity, { kind: "reasoning" }>;
+      reasonings: Array<Extract<TurnActivity, { kind: "reasoning" }>>;
+      tools: ToolState[];
+    };
+
+function renderGroupedActivityGroups(
+  groups: GroupedTurnActivity[],
+  projectCwd?: string,
+  options: {
+    fullActivityText?: boolean;
+    includeReasoningHistory?: boolean;
+  } = {},
+): Record<string, unknown>[] {
+  return groups.flatMap((group) => {
+    if (group.kind === "gap") return [markdown("…")];
+    if (group.kind === "activity") {
+      return renderActivity(group.activity, projectCwd, options.fullActivityText === true);
+    }
+    if (group.tools.length === 0) {
+      const reasonings = options.includeReasoningHistory
+        ? group.reasonings
+        : group.latestReasoning ? [group.latestReasoning] : [];
+      return renderReasoningGroup(reasonings);
+    }
+    return [executionActivityPanel(group, projectCwd, options.includeReasoningHistory === true)];
+  });
+}
+
+function groupTurnActivities(activities: TurnActivity[]): GroupedTurnActivity[] {
+  const groups: GroupedTurnActivity[] = [];
+  let segment: TurnActivity[] = [];
+  const flushSegment = (): void => {
+    if (segment.length === 0) return;
+    let execution: Extract<GroupedTurnActivity, { kind: "execution" }> | undefined;
+    let executionPosition = -1;
+    for (let index = 0; index < segment.length; index += 1) {
+      const activity = segment[index]!;
+      if (isRawReasoning(activity)) {
+        execution ??= { kind: "execution", id: activity.id, reasonings: [], tools: [] };
+        execution.reasonings.push(activity);
+        execution.latestReasoning = activity;
+        executionPosition = index;
+      } else if (activity.kind === "tool") {
+        execution ??= { kind: "execution", id: activity.id, reasonings: [], tools: [] };
+        execution.tools.push(activity.tool);
+        executionPosition = index;
+      }
+    }
+    for (let index = 0; index < segment.length; index += 1) {
+      const activity = segment[index]!;
+      if (index === executionPosition && execution) groups.push(execution);
+      if (!isRawReasoning(activity) && activity.kind !== "tool") {
+        groups.push({ kind: "activity", activity });
+      }
+    }
+    segment = [];
+  };
+
+  for (const activity of activities) {
+    if (!isCommentaryActivity(activity)) {
+      segment.push(activity);
+      continue;
+    }
+    flushSegment();
+    groups.push({ kind: "activity", activity });
+  }
+  flushSegment();
+  return groups;
+}
+
+function isCommentaryActivity(activity: TurnActivity): boolean {
+  return activity.kind === "assistant"
+    || (activity.kind === "reasoning" && activity.id.startsWith("commentary:"));
+}
+
+function executionActivityPanel(
+  group: Extract<GroupedTurnActivity, { kind: "execution" }>,
+  projectCwd: string | undefined,
+  includeReasoningHistory = false,
+): Record<string, unknown> {
+  const status = executionActivityStatus(group.tools);
+  const elements = [
+    ...(includeReasoningHistory ? renderReasoningGroup(group.reasonings) : []),
+    ...group.tools.map((tool) => toolPanel(tool, projectCwd)),
+  ];
+  return collapsiblePanel(
+    executionActivityTitle(group, status),
+    elements,
+    {
+      elementId: executionActivityPanelElementId(group.id),
+      expanded: false,
+      borderColor: status === "running" ? "blue" : "grey",
+      compact: true,
+    },
+  );
+}
+
+function executionActivityStatus(tools: ToolState[]): ToolState["status"] {
+  if (tools.some((tool) => tool.status === "running")) return "running";
+  return "completed";
+}
+
+function executionActivityTitle(
+  group: Extract<GroupedTurnActivity, { kind: "execution" }>,
+  status: ToolState["status"],
+): string {
+  const icon = status === "running" ? "⏳" : "💭";
+  const latestReasoning = group.latestReasoning?.text
+    ? removeMarkdownBold(group.latestReasoning.text).replace(/\s+/g, " ").trim()
+    : "";
+  const summary = latestReasoning
+    ? truncateText(latestReasoning, 90)
+    : status === "running"
+      ? "正在执行工具"
+      : "已执行工具";
+  return `${icon} ${summary} · ${group.tools.length} 个工具`;
+}
+
+function executionActivityPanelElementId(activityId: string): string {
+  const digest = createHash("sha256").update(activityId).digest("hex").slice(0, 10);
+  return `turn_exec_${digest}`;
+}
+
 function renderReasoningGroup(
   activities: Array<Extract<TurnActivity, { kind: "reasoning" }>>,
 ): Record<string, unknown>[] {
@@ -1237,6 +1566,10 @@ function isRawReasoning(
 }
 
 const ACTIVITIES_PER_PAGE = 40;
+const GROUPED_TOOLS_PER_PANEL = 8;
+const GROUPED_PAGE_ACTIVITY_BYTES = 24 * 1024;
+const GROUPED_PAGE_ACTIVITY_COMPONENTS = 160;
+const PINNED_LIVE_COMMENTARIES = 3;
 const MAX_LIVE_ASSISTANT_TEXT = 2_000;
 const ACTIVITY_TEXT_CHUNK = 2_500;
 
@@ -1252,6 +1585,159 @@ function activityPages(activities: TurnActivity[]): TurnActivity[][] {
   return pages;
 }
 
+function groupedActivityPages(
+  activities: TurnActivity[],
+  projectCwd?: string,
+  renderOptions: {
+    fullActivityText?: boolean;
+    includeReasoningHistory?: boolean;
+  } = {},
+): GroupedTurnActivity[][] {
+  const groups = groupTurnActivities(activities).flatMap(splitGroupedExecutionActivity);
+  return groupedActivityPagesFromGroups(groups, projectCwd, renderOptions);
+}
+
+function groupedActivityPagesFromGroups(
+  groups: GroupedTurnActivity[],
+  projectCwd?: string,
+  renderOptions: {
+    fullActivityText?: boolean;
+    includeReasoningHistory?: boolean;
+  } = {},
+): GroupedTurnActivity[][] {
+  if (groups.length === 0) return [];
+
+  const newestFirst: GroupedTurnActivity[][] = [];
+  let page: GroupedTurnActivity[] = [];
+  for (let index = groups.length - 1; index >= 0; index -= 1) {
+    const group = groups[index]!;
+    const candidate = [group, ...page];
+    if (page.length > 0 && !groupedActivityPageFits(candidate, projectCwd, renderOptions)) {
+      newestFirst.push(page);
+      page = [];
+    }
+    page.unshift(group);
+  }
+  if (page.length > 0) newestFirst.push(page);
+  return newestFirst.reverse();
+}
+
+function groupedActivityPageFits(
+  groups: GroupedTurnActivity[],
+  projectCwd: string | undefined,
+  renderOptions: {
+    fullActivityText?: boolean;
+    includeReasoningHistory?: boolean;
+  },
+): boolean {
+  const elements = renderGroupedActivityGroups(groups, projectCwd, renderOptions);
+  return Buffer.byteLength(JSON.stringify(elements), "utf8") <= GROUPED_PAGE_ACTIVITY_BYTES
+    && countCardComponents(elements) <= GROUPED_PAGE_ACTIVITY_COMPONENTS;
+}
+
+interface LiveGroupedActivityPage {
+  groups: GroupedTurnActivity[];
+  historyGroups: GroupedTurnActivity[];
+}
+
+function groupedLiveActivityPage(
+  pages: GroupedTurnActivity[][],
+  projectCwd?: string,
+): LiveGroupedActivityPage {
+  const latest = pages.at(-1) ?? [];
+  if (pages.length <= 1) return { groups: latest, historyGroups: [] };
+
+  const groups = pages.flat();
+  const latestStart = groups.length - latest.length;
+  const commentaryIndexes = groups
+    .map((group, index) => isCommentaryGroup(group) ? index : -1)
+    .filter((index) => index >= 0);
+  if (commentaryIndexes.length === 0) {
+    return { groups: latest, historyGroups: groups.slice(0, latestStart) };
+  }
+
+  const selected = new Set<number>();
+  const pinnedCommentaries = commentaryIndexes.slice(0, PINNED_LIVE_COMMENTARIES);
+  for (const index of pinnedCommentaries) selected.add(index);
+  const latestCommentary = commentaryIndexes.at(-1)!;
+  for (let index = latestCommentary; index < groups.length; index += 1) selected.add(index);
+
+  const renderSelection = (selection: ReadonlySet<number>): LiveGroupedActivityPage => ({
+    groups: groupsWithGaps(groups, selection),
+    historyGroups: groups.filter((_group, index) => index < latestCommentary || !selection.has(index)),
+  });
+  const fits = (selection: ReadonlySet<number>): boolean => {
+    const view = renderSelection(selection);
+    return groupedActivityPageFits(view.groups, projectCwd, {});
+  };
+
+  if (!fits(selected)) {
+    const latestExecutions = [...selected]
+      .filter((index) => index > latestCommentary && groups[index]?.kind === "execution")
+      .sort((left, right) => left - right);
+    const newestExecution = latestExecutions.at(-1);
+    for (const index of latestExecutions) {
+      if (fits(selected) || index === newestExecution) break;
+      selected.delete(index);
+    }
+  }
+
+  return renderSelection(selected);
+}
+
+function isCommentaryGroup(group: GroupedTurnActivity): boolean {
+  return group.kind === "activity" && isCommentaryActivity(group.activity);
+}
+
+function groupsWithGaps(
+  groups: GroupedTurnActivity[],
+  selected: ReadonlySet<number>,
+): GroupedTurnActivity[] {
+  const indexes = [...selected].sort((left, right) => left - right);
+  const visible: GroupedTurnActivity[] = [];
+  const append = (group: GroupedTurnActivity): void => {
+    if (group.kind === "gap" && visible.at(-1)?.kind === "gap") return;
+    visible.push(group);
+  };
+  let previous = -1;
+  for (const index of indexes) {
+    if (previous >= 0 && index > previous + 1) {
+      append({ kind: "gap", id: `gap:${previous}:${index}` });
+    }
+    const group = groups[index];
+    if (group) append(group);
+    previous = index;
+  }
+  return visible;
+}
+
+function countCardComponents(value: unknown): number {
+  if (Array.isArray(value)) {
+    return value.reduce((total, entry) => total + countCardComponents(entry), 0);
+  }
+  if (!value || typeof value !== "object") return 0;
+  const record = value as Record<string, unknown>;
+  return (typeof record.tag === "string" ? 1 : 0)
+    + Object.values(record).reduce<number>((total, entry) => total + countCardComponents(entry), 0);
+}
+
+function splitGroupedExecutionActivity(group: GroupedTurnActivity): GroupedTurnActivity[] {
+  if (group.kind !== "execution" || group.tools.length <= GROUPED_TOOLS_PER_PANEL) return [group];
+  const chunks: Array<Extract<GroupedTurnActivity, { kind: "execution" }>> = [];
+  for (let index = 0; index < group.tools.length; index += GROUPED_TOOLS_PER_PANEL) {
+    const tools = group.tools.slice(index, index + GROUPED_TOOLS_PER_PANEL);
+    const isLast = index + GROUPED_TOOLS_PER_PANEL >= group.tools.length;
+    chunks.push({
+      kind: "execution",
+      id: index === 0 ? group.id : tools[0]?.id ?? `${group.id}:${index}`,
+      ...(isLast && group.latestReasoning ? { latestReasoning: group.latestReasoning } : {}),
+      reasonings: isLast ? group.reasonings : [],
+      tools,
+    });
+  }
+  return chunks;
+}
+
 function splitText(value: string, maxLength: number): string[] {
   if (!value) return [];
   const chunks: string[] = [];
@@ -1302,20 +1788,26 @@ function toolPanelElementId(toolId: string): string {
 function collapsiblePanel(
   title: string,
   content: string | Record<string, unknown>[],
-  options: { expanded?: boolean; borderColor?: string; elementId?: string } = {},
+  options: {
+    expanded?: boolean;
+    borderColor?: string;
+    elementId?: string;
+    compact?: boolean;
+  } = {},
 ): Record<string, unknown> {
+  const compact = options.compact === true;
   return {
     tag: "collapsible_panel",
     ...(options.elementId ? { element_id: options.elementId } : {}),
     direction: "vertical",
-    vertical_spacing: "4px",
-    padding: "8px",
+    vertical_spacing: compact ? "2px" : "4px",
+    padding: compact ? "4px 6px" : "8px",
     margin: "0px",
     expanded: options.expanded ?? false,
     header: {
       title: { tag: "plain_text", content: title },
       vertical_align: "center",
-      padding: "4px 8px 4px 8px",
+      padding: compact ? "2px 4px 2px 4px" : "4px 8px 4px 8px",
     },
     border: {
       color: options.borderColor ?? "grey",
@@ -1325,6 +1817,68 @@ function collapsiblePanel(
   };
 }
 
+function sessionTaskPanel(entry: SessionTaskCardEntry): Record<string, unknown> {
+  const elements: Record<string, unknown>[] = [markdown(entry.detailLines.join("\n"))];
+  if (entry.actions?.length) elements.push(sessionActionOverflow(entry.actions));
+  return collapsiblePanel(entry.summary, elements, {
+    elementId: sessionTaskPanelElementId(entry.reference),
+    borderColor: entry.current ? "green" : "grey",
+    compact: true,
+  });
+}
+
+function sessionProjectRow(group: SessionTaskCardGroup): Record<string, unknown> {
+  return {
+    tag: "column_set",
+    flex_mode: "none",
+    horizontal_spacing: "8px",
+    vertical_align: "center",
+    margin: "6px 0px 0px 0px",
+    columns: [
+      {
+        tag: "column",
+        width: "weighted",
+        weight: 1,
+        vertical_align: "center",
+        elements: [markdown(`**${escapeCardActionText(group.title)}**`)],
+      },
+      ...(group.actions ?? []).map((action) => ({
+        tag: "column",
+        width: "auto",
+        vertical_align: "center",
+        elements: [sessionActionButton(action)],
+      })),
+    ],
+  };
+}
+
+function sessionTaskPanelElementId(reference: string): string {
+  return `session_task_${createHash("sha256").update(reference).digest("hex").slice(0, 16)}`;
+}
+
+function sessionActionOverflow(actions: TaskListCardAction[]): Record<string, unknown> {
+  return {
+    tag: "overflow",
+    options: actions.map((action) => ({
+      text: { tag: "plain_text", content: action.text },
+      value: JSON.stringify(action.value),
+    })),
+  };
+}
+
+function sessionActionButton(action: TaskListCardAction): Record<string, unknown> {
+  return {
+    tag: "button",
+    text: { tag: "plain_text", content: action.text },
+    type: action.type === "danger" ? "danger" : "default",
+    size: "tiny",
+    behaviors: [{
+      type: "callback",
+      value: action.value,
+    }],
+  };
+}
+
 function renderToolDetails(tool: ToolState, projectCwd?: string): string {
   const command = tool.command ?? tool.title;
   const fileSummary = tool.files?.length
@@ -1335,13 +1889,22 @@ function renderToolDetails(tool: ToolState, projectCwd?: string): string {
   const result = tool.error ?? tool.output ?? fileSummary;
   const normalizedCommand = stripAnsi(command).trim();
   const displayCommand = tool.kind === "command"
-    ? unwrapPowerShellCommand(normalizedCommand) ?? normalizedCommand
+    ? unwrapShellCommand(normalizedCommand) ?? normalizedCommand
     : normalizedCommand;
-  const commandText = truncateText(displayCommand, 800);
-  const resultText = result ? truncateMiddle(stripAnsi(result).trim(), 1_200) : undefined;
+  const commandText = truncateText(displayCommand, 600);
+  const resultText = result ? truncateToolResult(stripAnsi(result).trim()) : undefined;
   return codeBlock([`$ ${commandText}`, resultText].filter((part): part is string => part !== undefined).join("\n"), 2_003);
 }
 
+function truncateToolResult(result: string): string {
+  const maxLength = 900;
+  const marker = "\n...\n";
+  const tailLength = 600;
+  if (result.length <= maxLength) return result;
+  const headLength = maxLength - marker.length - tailLength;
+  return `${result.slice(0, headLength)}${marker}${result.slice(-tailLength)}`;
+}
+
 function displayFilePath(filePath: string, projectCwd?: string): string {
   if (!projectCwd) return filePath;
   const pathApi = usesWindowsPaths(projectCwd, filePath) ? path.win32 : path;
@@ -1370,7 +1933,7 @@ function toolPanelTitle(tool: ToolState): string {
   const command = stripAnsi(tool.command ?? tool.title).trim();
   const meaningfulCommand = tool.kind === "web_search"
     ? tool.title
-    : unwrapPowerShellCommand(command) ?? tool.title;
+    : unwrapShellCommand(command) ?? tool.title;
   const duration = toolDuration(tool);
   const prefix = `${icon} `;
   const suffix = duration ? ` · ${duration}` : "";
@@ -1419,6 +1982,10 @@ function formatTurnDuration(durationMs: number): string {
   return `${seconds}s`;
 }
 
+function unwrapShellCommand(command: string): string | undefined {
+  return unwrapPowerShellCommand(command) ?? unwrapPosixShellCommand(command);
+}
+
 function unwrapPowerShellCommand(command: string): string | undefined {
   const executable = command.match(
     /^(?:"[^"]*(?:pwsh|powershell)\.exe"|(?:\S*[\\/])?(?:pwsh|powershell)(?:\.exe)?)(?=\s|$)/i,
@@ -1429,6 +1996,71 @@ function unwrapPowerShellCommand(command: string): string | undefined {
   if (!commandFlag) return undefined;
   const payload = args.slice(commandFlag.index + commandFlag[0].length).trim();
   if (!payload) return undefined;
+  return unwrapQuotedPayload(payload);
+}
+
+function unwrapPosixShellCommand(command: string): string | undefined {
+  let executable = readCommandWord(command, 0);
+  if (!executable) return undefined;
+
+  if (posixExecutableName(executable.value) === "env") {
+    let cursor = executable.end;
+    while (true) {
+      const candidate = readCommandWord(command, cursor);
+      if (!candidate) return undefined;
+      const name = posixExecutableName(candidate.value);
+      if (isPosixShell(name)) {
+        executable = candidate;
+        break;
+      }
+      if (!candidate.value.startsWith("-") && !/^[A-Za-z_][A-Za-z0-9_]*=/.test(candidate.value)) {
+        return undefined;
+      }
+      cursor = candidate.end;
+    }
+  } else if (!isPosixShell(posixExecutableName(executable.value))) {
+    return undefined;
+  }
+
+  const args = command.slice(executable.end);
+  const commandFlag = /(?:^|\s)(?:-[A-Za-z]*c[A-Za-z]*|--command)(?:\s+|=)/.exec(args);
+  if (!commandFlag) return undefined;
+  const payload = args.slice(commandFlag.index + commandFlag[0].length).trim();
+  if (!payload) return undefined;
+  return unwrapQuotedPayload(payload);
+}
+
+function readCommandWord(command: string, start: number): { value: string; end: number } | undefined {
+  let cursor = start;
+  while (cursor < command.length && /\s/.test(command[cursor] ?? "")) cursor += 1;
+  if (cursor >= command.length) return undefined;
+
+  const quote = command[cursor];
+  if (quote === "\"" || quote === "'") {
+    const endQuote = command.indexOf(quote, cursor + 1);
+    if (endQuote < 0) return undefined;
+    return { value: command.slice(cursor + 1, endQuote), end: endQuote + 1 };
+  }
+
+  const word = /^\S+/.exec(command.slice(cursor));
+  if (!word) return undefined;
+  return { value: word[0], end: cursor + word[0].length };
+}
+
+function posixExecutableName(executable: string): string {
+  return executable.replaceAll("\\", "/").split("/").at(-1)?.toLowerCase() ?? "";
+}
+
+function isPosixShell(executable: string): boolean {
+  return executable === "sh"
+    || executable === "bash"
+    || executable === "zsh"
+    || executable === "dash"
+    || executable === "ksh"
+    || executable === "fish";
+}
+
+function unwrapQuotedPayload(payload: string): string {
   const quote = payload[0];
   if ((quote === "\"" || quote === "'") && payload.at(-1) === quote) return payload.slice(1, -1).trim();
   return payload;
@@ -1726,6 +2358,69 @@ function taskActionRow(actions: TaskListCardAction[]): Record<string, unknown> {
   };
 }
 
+function directoryBrowserEntryRow(entry: DirectoryBrowserCardEntry): Record<string, unknown> {
+  const label = `${directoryBrowserEntryIcon(entry.kind)} ${entry.name}`;
+  return {
+    tag: "column_set",
+    flex_mode: "none",
+    horizontal_spacing: "12px",
+    vertical_align: "center",
+    margin: "0px",
+    columns: [
+      {
+        tag: "column",
+        width: "weighted",
+        weight: 1,
+        vertical_align: "center",
+        elements: entry.openAction
+          ? [taskActionElement({ ...entry.openAction, text: label })]
+          : [markdown(escapeCardHtml(label))],
+      },
+      ...(entry.actions ?? []).map((action) => ({
+        tag: "column",
+        width: "auto",
+        vertical_align: "center",
+        elements: [taskActionElement(action)],
+      })),
+    ],
+  };
+}
+
+function directoryBrowserEmptyRow(): Record<string, unknown> {
+  return directoryBrowserStaticRow("这个目录为空。");
+}
+
+function directoryBrowserPlaceholderRow(): Record<string, unknown> {
+  return directoryBrowserStaticRow("\u00a0");
+}
+
+function directoryBrowserStaticRow(content: string): Record<string, unknown> {
+  return {
+    tag: "column_set",
+    flex_mode: "none",
+    horizontal_spacing: "12px",
+    vertical_align: "center",
+    margin: "0px",
+    columns: [{
+      tag: "column",
+      width: "weighted",
+      weight: 1,
+      vertical_align: "center",
+      elements: [markdown(content)],
+    }],
+  };
+}
+
+function directoryBrowserEntryIcon(kind: DirectoryBrowserCardEntry["kind"]): string {
+  switch (kind) {
+    case "directory": return "📁";
+    case "drive": return "💽";
+    case "image": return "🖼️";
+    case "binary": return "📦";
+    case "file": return "📄";
+  }
+}
+
 function taskActionElement(action: TaskListCardAction): Record<string, unknown> {
   return {
     tag: "interactive_container",
@@ -1733,7 +2428,7 @@ function taskActionElement(action: TaskListCardAction): Record<string, unknown>
     padding: "0px",
     has_border: false,
     elements: [markdown(
-      `<font color='${action.type === "danger" ? "red" : "blue"}'>${escapeCardHtml(action.text)}</font>`,
+      `<font color='${action.type === "danger" ? "red" : "blue"}'>${escapeCardActionText(action.text)}</font>`,
     )],
     behaviors: [{
       type: "callback",
@@ -1742,6 +2437,10 @@ function taskActionElement(action: TaskListCardAction): Record<string, unknown>
   };
 }
 
+function escapeCardActionText(value: string): string {
+  return escapeCardHtml(value).replaceAll("\\", "&#92;");
+}
+
 function helpCommandRow(command: HelpCardCommand): Record<string, unknown> {
   const details = [
     command.usage ? `**${command.usage}**` : undefined,
@@ -1812,6 +2511,7 @@ function sectionCard(
   title: string,
   elements: Record<string, unknown>[],
   template = "blue",
+  verticalSpacing = "8px",
 ): Record<string, unknown> {
   return {
     schema: "2.0",
@@ -1829,7 +2529,7 @@ function sectionCard(
     },
     body: {
       direction: "vertical",
-      vertical_spacing: "8px",
+      vertical_spacing: verticalSpacing,
       padding: "12px 12px 12px 12px",
       elements,
     },