@steerable/agent-shell-web 0.6.15

package/src/components/chat/TaskProcessPanel.test.tsx

@@ -0,0 +1,111 @@
+/**
+ * TaskProcessPanel：拉 GET /tasks/:id/process 渲染时间线；
+ * task-process 广播更新 live 块。
+ */
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { TaskProcessPanel } from './TaskProcessPanel';
+
+afterEach(() => {
+  cleanup();
+  delete (window as { electron?: unknown }).electron;
+  vi.restoreAllMocks();
+});
+
+function installBridge(timeline: unknown[], live = false, stale = false) {
+  const request = vi.fn((input: { method: string; path: string }) => {
+    if (input.method === 'GET' && input.path.endsWith('/process')) {
+      return Promise.resolve({
+        task: {
+          id: 'task-1',
+          chatId: 'chat_1',
+          task: '问好循环',
+          status: live ? 'running' : 'completed',
+        },
+        timeline,
+        live,
+        stale,
+      });
+    }
+    return Promise.reject(new Error(`unexpected ${input.method} ${input.path}`));
+  });
+  const listeners: Array<
+    (payload: { chatId: string; taskId: string; timeline: unknown; live: boolean }) => void
+  > = [];
+  (window as { electron?: unknown }).electron = {
+    localBackend: { request },
+    onTaskProcess: (
+      cb: (payload: { chatId: string; taskId: string; timeline: unknown; live: boolean }) => void,
+    ) => {
+      listeners.push(cb);
+      return () => {
+        const i = listeners.indexOf(cb);
+        if (i >= 0) listeners.splice(i, 1);
+      };
+    },
+  };
+  return {
+    emit: (payload: { chatId: string; taskId: string; timeline: unknown; live: boolean }) => {
+      for (const cb of listeners) cb(payload);
+    },
+  };
+}
+
+describe('TaskProcessPanel', () => {
+  it('渲染历史推理与工具调用', async () => {
+    installBridge([
+      { type: 'reasoning', content: '先跑命令。' },
+      { type: 'tools', actions: [{ tool: 'local_exec_shell', success: true }] },
+      { type: 'text', content: '问好完成。' },
+    ]);
+    render(
+      <TaskProcessPanel
+        inspected={{ id: 'task-1', chatId: 'chat_1', title: '问好循环' }}
+        onClose={() => {}}
+      />,
+    );
+    await waitFor(() => screen.getByText('问好完成。'));
+    expect(screen.getByText(/1 次工具调用/)).toBeTruthy();
+    expect(screen.getByText(/已结束/)).toBeTruthy();
+  });
+
+  it('task-process 推送更新时间线', async () => {
+    const { emit } = installBridge([], true, false);
+    render(
+      <TaskProcessPanel
+        inspected={{ id: 'task-1', chatId: 'chat_1', title: '问好循环' }}
+        onClose={() => {}}
+      />,
+    );
+    await waitFor(() => screen.getByText(/正在推理/));
+    emit({
+      chatId: 'chat_1',
+      taskId: 'task-1',
+      live: true,
+      timeline: [{ type: 'reasoning', content: '开始第一轮。' }],
+    });
+    await waitFor(() => screen.getByText('开始第一轮。'));
+  });
+
+  it('live 增量时把滚动条钉在底部', async () => {
+    const scrollTo = vi.spyOn(HTMLElement.prototype, 'scrollTo').mockImplementation(() => {});
+    const { emit } = installBridge([], true, false);
+    render(
+      <TaskProcessPanel
+        inspected={{ id: 'task-1', chatId: 'chat_1', title: '问好循环' }}
+        onClose={() => {}}
+      />,
+    );
+    await waitFor(() => screen.getByText(/正在推理/));
+    scrollTo.mockClear();
+
+    emit({
+      chatId: 'chat_1',
+      taskId: 'task-1',
+      live: true,
+      timeline: [{ type: 'reasoning', content: '开始第一轮。' }],
+    });
+    await waitFor(() => screen.getByText('开始第一轮。'));
+    expect(scrollTo).toHaveBeenCalled();
+  });
+});

package/src/components/chat/TaskProcessPanel.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { LuArrowDown, LuLoaderCircle, LuTerminal } from 'react-icons/lu';
+import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
+import { getTaskProcess } from '@/lib/local-api';
+import { getElectronBridge } from '@/lib/electron-bridge';
+import { Markdown } from '@/components/chat/Markdown';
+import { TurnProcessGroup } from '@/components/chat/TurnProcessGroup';
+import { parseTurnBlocks, type TurnBlock } from '@/components/chat/turn-timeline';
+
+export interface InspectedTask {
+  id: string;
+  chatId: string;
+  title: string;
+}
+
+const NEAR_BOTTOM_THRESHOLD_PX = 100;
+
+/**
+ * 右侧栏：后台任务的模型推理过程（与主对话 TurnProcessGroup 同形）。
+ * 数据来自 GET /tasks/:id/process，live 增量走 task-process 广播。
+ */
+export function TaskProcessPanel({
+  inspected,
+  onClose,
+  onShowTerminal,
+}: {
+  inspected: InspectedTask;
+  onClose: () => void;
+  onShowTerminal?: () => void;
+}) {
+  const [blocks, setBlocks] = useState<TurnBlock[]>([]);
+  const [live, setLive] = useState(false);
+  const [stale, setStale] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  const checkAtBottom = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom =
+      el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD_PX;
+    setIsAtBottom(atBottom);
+  }, []);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (behavior === 'smooth') {
+      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+      return;
+    }
+    el.scrollTop = el.scrollHeight;
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener('scroll', checkAtBottom, { passive: true });
+    return () => {
+      el.removeEventListener('scroll', checkAtBottom);
+    };
+  }, [checkAtBottom]);
+
+  // 换任务 / 首屏：没有「之前在不在底部」可言，直接钉到底。
+  useLayoutEffect(() => {
+    scrollToBottom('instant' as ScrollBehavior);
+    setIsAtBottom(true);
+  }, [inspected.id, scrollToBottom]);
+
+  // live 增量只在用户还贴着底部时跟滚——往上翻看前面的工具调用时不要拽走。
+  const timelineSig = blocks
+    .map((block) =>
+      block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`,
+    )
+    .join('|');
+  useEffect(() => {
+    if (!isAtBottom) return;
+    scrollToBottom('smooth');
+  }, [timelineSig, live, isAtBottom, scrollToBottom]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const snapshot = await getTaskProcess(inspected.id);
+        if (cancelled) return;
+        setBlocks(parseTurnBlocks(snapshot.timeline) ?? []);
+        setLive(snapshot.live);
+        setStale(snapshot.stale);
+      } catch (err) {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+        setBlocks([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [inspected.id]);
+
+  useEffect(() => {
+    const bridge = getElectronBridge();
+    if (!bridge?.onTaskProcess) return;
+    return bridge.onTaskProcess((payload) => {
+      if (payload.taskId !== inspected.id) return;
+      const next = parseTurnBlocks(payload.timeline);
+      if (next) setBlocks(next);
+      else if (Array.isArray(payload.timeline) && payload.timeline.length === 0) {
+        setBlocks([]);
+      }
+      setLive(payload.live);
+      if (payload.live) setStale(false);
+    });
+  }, [inspected.id]);
+
+  const statusLabel = live
+    ? '正在推理'
+    : stale
+      ? '进程已中断（表上仍是运行中）'
+      : '已结束';
+
+  return (
+    <div
+      className="flex h-full w-full flex-col bg-agent-canvas text-agent-foreground"
+      data-testid="task-process-panel"
+    >
+      <DockPanelHeader
+        title={`后台推理 · ${statusLabel}`}
+        onClose={onClose}
+        closeLabel="关闭过程面板"
+        actions={
+          onShowTerminal && (
+            <DockHeaderButton
+              icon={<LuTerminal className="h-3 w-3" />}
+              label="终端"
+              title="切换到终端"
+              onClick={onShowTerminal}
+            />
+          )
+        }
+      />
+      <div className="border-b border-agent-border/60 px-3 py-2">
+        <div className="line-clamp-3 text-xs leading-relaxed text-agent-foreground">
+          {inspected.title}
+        </div>
+      </div>
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        <div
+          ref={containerRef}
+          className="h-full overflow-y-auto p-3"
+          data-testid="task-process-scroll"
+        >
+          {loading ? (
+            <div className="flex items-center gap-2 text-xs text-agent-muted-foreground">
+              <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
+              正在加载推理过程…
+            </div>
+          ) : error ? (
+            <div className="text-xs text-red-600 dark:text-red-300">{error}</div>
+          ) : (
+            <TurnProcessGroup
+              blocks={blocks}
+              isStreaming={live}
+              agents={[]}
+              chats={[]}
+              emptyFallback={
+                <div className="text-xs text-agent-muted-foreground">
+                  {stale
+                    ? '任务流已随进程结束，没有留下可回放的推理记录。'
+                    : live
+                      ? '任务已启动，推理过程会显示在这里。'
+                      : '没有可显示的推理过程。'}
+                </div>
+              }
+              renderAnswer={(block) => (
+                <div className="text-sm leading-relaxed text-agent-foreground">
+                  <Markdown agents={[]} chats={[]}>{block.content}</Markdown>
+                </div>
+              )}
+            />
+          )}
+        </div>
+        {!isAtBottom && !loading && (
+          <button
+            type="button"
+            onClick={() => {
+              setIsAtBottom(true);
+              scrollToBottom('smooth');
+            }}
+            className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
+            title="回到底部"
+            aria-label="回到底部"
+          >
+            <LuArrowDown className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TaskProcessPanel;

package/src/components/chat/TurnProcessGroup.test.tsx

@@ -0,0 +1,161 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { TurnBlock } from './turn-timeline';
+
+vi.mock('./Markdown', () => ({
+  Markdown: ({ children }: { children: string }) => <span>{children}</span>,
+}));
+
+vi.mock('./ExecutedActionsCard', () => ({
+  ToolsFlow: ({ actions }: { actions: Array<{ tool: string }> }) => (
+    <div data-testid="tools-flow">{actions.map((action) => action.tool).join(',')}</div>
+  ),
+}));
+
+const { TurnProcessGroup } = await import('./TurnProcessGroup');
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+const tool = (name: string): TurnBlock => ({
+  type: 'tools',
+  actions: [{ tool: name, arguments: {} }],
+});
+
+const blocks: TurnBlock[] = [
+  { type: 'reasoning', content: '先读配置' },
+  tool('csv_get_config'),
+  { type: 'reasoning', content: '再查天气' },
+  tool('web_fetch'),
+  { type: 'text', content: '本地 CSV 配置' },
+];
+
+function renderGroup(overrides: {
+  blocks?: TurnBlock[];
+  isStreaming?: boolean;
+  startedAtMs?: number;
+  durationMs?: number;
+} = {}) {
+  return render(
+    <TurnProcessGroup
+      blocks={overrides.blocks ?? blocks}
+      isStreaming={overrides.isStreaming ?? false}
+      startedAtMs={overrides.startedAtMs}
+      durationMs={overrides.durationMs}
+      agents={[]}
+      chats={[]}
+      emptyFallback={<div>empty</div>}
+      renderAnswer={(block) => <div data-testid="answer">{block.content}</div>}
+    />,
+  );
+}
+
+describe('TurnProcessGroup', () => {
+  it('collapses think+tool process after a finished summary, leaving the answer visible', () => {
+    renderGroup({ isStreaming: false });
+
+    const toggle = screen.getByRole('button');
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(toggle.textContent).toContain('2 次工具调用 · 已思考');
+    expect(screen.queryByText('先读配置')).toBeNull();
+    expect(screen.queryByTestId('tools-flow')).toBeNull();
+    expect(screen.getByTestId('answer').textContent).toBe('本地 CSV 配置');
+  });
+
+  it('keeps the process expanded while streaming, then auto-collapses when the summary lands', () => {
+    const view = renderGroup({
+      isStreaming: true,
+      blocks: blocks.slice(0, 4),
+    });
+
+    expect(screen.getByRole('button').textContent).toContain('正在执行…');
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByText('先读配置')).toBeTruthy();
+    expect(screen.queryByTestId('answer')).toBeNull();
+
+    view.rerender(
+      <TurnProcessGroup
+        blocks={blocks}
+        isStreaming={false}
+        agents={[]}
+        chats={[]}
+        emptyFallback={<div>empty</div>}
+        renderAnswer={(block) => <div data-testid="answer">{block.content}</div>}
+      />,
+    );
+
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toBe('false');
+    expect(screen.getByRole('button').textContent).toContain('2 次工具调用 · 已思考');
+    expect(screen.queryByText('先读配置')).toBeNull();
+    expect(screen.getByTestId('answer').textContent).toBe('本地 CSV 配置');
+  });
+
+  it('expands the process again when the disclosure is clicked', () => {
+    renderGroup({ isStreaming: false });
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByText('再查天气')).toBeTruthy();
+    expect(screen.getAllByTestId('tools-flow')).toHaveLength(2);
+  });
+
+  it('does not fold a tools-only turn that never produced a summary', () => {
+    renderGroup({
+      isStreaming: false,
+      blocks: [tool('csv_get_config')],
+    });
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByTestId('tools-flow').textContent).toBe('csv_get_config');
+    expect(screen.queryByTestId('answer')).toBeNull();
+  });
+
+  it('shows Codex-style elapsed while streaming', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-08T12:00:12.000Z'));
+    renderGroup({
+      isStreaming: true,
+      blocks: blocks.slice(0, 4),
+      startedAtMs: Date.parse('2026-09-08T12:00:00.000Z'),
+    });
+    expect(screen.getByRole('button').textContent).toContain('正在执行… 12s');
+  });
+
+  it('appends worked duration after the turn finishes', () => {
+    renderGroup({ isStreaming: false, durationMs: 83_000 });
+    expect(screen.getByRole('button').textContent).toContain(
+      '2 次工具调用 · 已思考 · 工作了 1m 23s',
+    );
+  });
+
+  it('omits worked duration for sub-second finished turns', () => {
+    renderGroup({ isStreaming: false, durationMs: 400 });
+    const label = screen.getByRole('button').textContent ?? '';
+    expect(label).toContain('2 次工具调用 · 已思考');
+    expect(label).not.toContain('工作了');
+  });
+
+  it('freezes live elapsed when the stream ends before durationMs lands', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-08T12:00:12.000Z'));
+    const startedAtMs = Date.parse('2026-09-08T12:00:00.000Z');
+    const view = renderGroup({
+      isStreaming: true,
+      blocks: blocks.slice(0, 4),
+      startedAtMs,
+    });
+    view.rerender(
+      <TurnProcessGroup
+        blocks={blocks}
+        isStreaming={false}
+        agents={[]}
+        chats={[]}
+        emptyFallback={<div>empty</div>}
+        renderAnswer={(block) => <div data-testid="answer">{block.content}</div>}
+      />,
+    );
+    expect(screen.getByRole('button').textContent).toContain(
+      '2 次工具调用 · 已思考 · 工作了 12s',
+    );
+  });
+});

package/src/components/chat/TurnProcessGroup.tsx

@@ -0,0 +1,193 @@
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
+import { LuChevronDown, LuChevronRight } from 'react-icons/lu';
+import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
+import { Markdown } from './Markdown';
+import { ToolsFlow } from './ExecutedActionsCard';
+import { formatElapsedCompact } from './elapsed';
+import {
+  countProcessTools,
+  processHasReasoning,
+  splitTurnProcess,
+  type TurnBlock,
+} from './turn-timeline';
+
+/**
+ * Codex / DeepSeek-style turn process: think + tool rows stay in one
+ * disclosure. Expanded while the turn streams; collapsed once the trailing
+ * summary is on screen. The summary itself stays outside the fold.
+ * Elapsed time ticks while streaming (Codex status line) and freezes as
+ * 「工作了 …」 after the turn ends.
+ */
+
+function useLiveElapsedMs(
+  startedAtMs: number | undefined,
+  enabled: boolean,
+): number | undefined {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!enabled || startedAtMs == null) return;
+    setNow(Date.now());
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [enabled, startedAtMs]);
+  if (startedAtMs == null) return undefined;
+  return Math.max(0, now - startedAtMs);
+}
+
+function processLabel(
+  process: TurnBlock[],
+  isStreaming: boolean,
+  elapsedMs: number | undefined,
+): string {
+  const elapsed =
+    elapsedMs != null && (isStreaming || elapsedMs >= 1000)
+      ? formatElapsedCompact(elapsedMs)
+      : null;
+  if (isStreaming) {
+    return elapsed ? `正在执行… ${elapsed}` : '正在执行…';
+  }
+  const parts: string[] = [];
+  const tools = countProcessTools(process);
+  if (tools > 0) parts.push(`${tools} 次工具调用`);
+  if (processHasReasoning(process)) parts.push('已思考');
+  if (elapsed) parts.push(`工作了 ${elapsed}`);
+  if (parts.length === 0) return '执行过程';
+  return parts.join(' · ');
+}
+
+function ProcessBlocks({
+  blocks,
+  isStreaming,
+  agents,
+  chats,
+}: {
+  blocks: TurnBlock[];
+  isStreaming: boolean;
+  agents: LocalChatAgent[];
+  chats: LocalChat[];
+}) {
+  const lastIndex = blocks.length - 1;
+  return (
+    <div className="space-y-1.5 border-l border-agent-border/70 pl-3">
+      {blocks.map((block, index) => {
+        const isLast = index === lastIndex;
+        if (block.type === 'reasoning') {
+          return (
+            <div
+              key={`reasoning-${index}`}
+              className="text-xs leading-relaxed text-agent-muted-foreground"
+            >
+              <Markdown agents={agents} chats={chats}>{block.content}</Markdown>
+              {isStreaming && isLast && (
+                <span className="ml-0.5 inline-block h-3 w-[2px] animate-agent-cursor-blink bg-agent-muted-foreground/60 align-text-bottom" />
+              )}
+            </div>
+          );
+        }
+        if (block.type === 'tools') {
+          return <ToolsFlow key={`tools-${index}`} actions={block.actions} compact />;
+        }
+        return (
+          <div
+            key={`text-${index}`}
+            className="markdown-content text-xs leading-relaxed text-agent-muted-foreground"
+          >
+            <Markdown agents={agents} chats={chats}>{block.content}</Markdown>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function TurnProcessGroup({
+  blocks,
+  isStreaming,
+  agents,
+  chats,
+  emptyFallback,
+  streamingHint,
+  startedAtMs,
+  durationMs,
+  renderAnswer,
+}: {
+  blocks: TurnBlock[];
+  isStreaming: boolean;
+  agents: LocalChatAgent[];
+  chats: LocalChat[];
+  emptyFallback: ReactNode;
+  /** Shown while streaming after a tools row and before the summary lands. */
+  streamingHint?: ReactNode;
+  /** Epoch ms when this turn started — live ticker while `isStreaming`. */
+  startedAtMs?: number;
+  /** Frozen wall-clock of a finished turn (metadata or just-ended stream). */
+  durationMs?: number;
+  renderAnswer: (block: Extract<TurnBlock, { type: 'text' }>, isLast: boolean) => ReactNode;
+}) {
+  const { process, answer } = splitTurnProcess(blocks);
+  const [open, setOpen] = useState(() => isStreaming || answer.length === 0);
+  const wasStreamingRef = useRef(isStreaming);
+  const liveElapsedMs = useLiveElapsedMs(startedAtMs, isStreaming);
+  const lastLiveElapsedRef = useRef<number | undefined>(undefined);
+  if (isStreaming && liveElapsedMs != null) {
+    lastLiveElapsedRef.current = liveElapsedMs;
+  }
+  const elapsedMs = isStreaming
+    ? liveElapsedMs
+    : durationMs ?? lastLiveElapsedRef.current;
+
+  useEffect(() => {
+    const wasStreaming = wasStreamingRef.current;
+    if (wasStreaming && !isStreaming && answer.length > 0) {
+      setOpen(false);
+    }
+    if (!wasStreaming && isStreaming) {
+      setOpen(true);
+    }
+    wasStreamingRef.current = isStreaming;
+  }, [isStreaming, answer.length]);
+
+  if (blocks.length === 0) return <>{emptyFallback}</>;
+
+  const showToggle = process.length > 0;
+  const showProcess = !showToggle || open;
+  const lastProcess = process[process.length - 1];
+  const showStreamingHint =
+    Boolean(streamingHint) && isStreaming && answer.length === 0 && lastProcess?.type === 'tools';
+
+  return (
+    <div className="space-y-1.5" data-turn-timeline>
+      {showToggle && (
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          className="flex w-full items-center gap-1 py-0.5 text-left text-xs text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+          aria-expanded={open}
+          data-turn-process=""
+          data-open={open || undefined}
+        >
+          {open ? (
+            <LuChevronDown className="h-3.5 w-3.5 shrink-0" />
+          ) : (
+            <LuChevronRight className="h-3.5 w-3.5 shrink-0" />
+          )}
+          <span className="truncate">{processLabel(process, isStreaming, elapsedMs)}</span>
+        </button>
+      )}
+      {showProcess && (
+        <ProcessBlocks
+          blocks={process}
+          isStreaming={isStreaming && answer.length === 0}
+          agents={agents}
+          chats={chats}
+        />
+      )}
+      {showStreamingHint ? streamingHint : null}
+      {answer.map((block, index) => (
+        <Fragment key={`answer-${index}`}>
+          {renderAnswer(block, index === answer.length - 1)}
+        </Fragment>
+      ))}
+    </div>
+  );
+}