ompchamber 0.3.0

package/src/client/components/workspace/chat-timeline/MessageList.tsx

@@ -0,0 +1,122 @@
+import { useMemo } from 'preact/hooks';
+import { memo } from 'preact/compat';
+
+import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
+import { responseRunDurationMs } from '@/shared/lib/chat/duration';
+import type { ChatMessageData } from '@/shared/types';
+
+export interface MessageListProps {
+  messages: ChatMessageData[];
+  isGenerating: boolean;
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  modelNames?: Record<string, string>;
+  /** Session thinking level shown in the AI footer. */
+  thinkingLevel?: string;
+  onUndo?: (id: string, content?: string) => void;
+  onRetry?: (id: string) => void;
+  onNewChat?: (content: string) => void;
+  isMobile?: boolean;
+}
+
+/**
+ * Shared timeline body: the ordered message rows plus the per-run footer
+ * (model + duration) ownership rules. Desktop and mobile render the exact same
+ * rows — only the surrounding scroll container differs.
+ *
+ * Footer ownership: notice rows are transparent for footer purposes, so the
+ * last real AI message of a run still owns the footer even when a notice row
+ * follows it, and the notice itself never gets one.
+ */
+// Per-row lookups (next/prev non-notice neighbour, run durations) are built in
+// one O(n) pass and memoized on `messages`, so a streaming frame renders in
+// O(n) instead of re-scanning the array for every row. `memo` then skips the
+// rows entirely when the props are referentially unchanged.
+export const MessageList = memo(function MessageList({
+  messages,
+  isGenerating,
+  provider,
+  providerNames,
+  modelName,
+  modelNames,
+  thinkingLevel,
+  onUndo,
+  onRetry,
+  onNewChat,
+  isMobile = false,
+}: MessageListProps) {
+  const { lastAiIdx, nextNonNotice, prevNonNoticeIdx, durations } = useMemo(() => {
+    const count = messages.length;
+
+    // The streaming AI message is the last non-notice row: notice rows sit above
+    // the turn, so a plain "last item" check would mark the notice as streaming
+    // and render the footer early.
+    let lastAi = count - 1;
+    while (lastAi >= 0 && messages[lastAi].notice) lastAi--;
+
+    // nextNonNotice[idx]: nearest non-notice row strictly AFTER idx (or null).
+    const nextNonNotice: (ChatMessageData | null)[] = new Array(count);
+    let next: ChatMessageData | null = null;
+    for (let i = count - 1; i >= 0; i--) {
+      nextNonNotice[i] = next;
+      if (!messages[i].notice) next = messages[i];
+    }
+
+    // prevNonNoticeIdx[idx]: nearest non-notice row index strictly BEFORE idx.
+    const prevNonNoticeIdx: number[] = new Array(count);
+    let prevIdx = -1;
+    for (let i = 0; i < count; i++) {
+      prevNonNoticeIdx[i] = prevIdx;
+      if (!messages[i].notice) prevIdx = i;
+    }
+
+    // Footer-owning rows resolve their run duration once here (each is O(n) in
+    // the worst case, so doing it inline would be O(n²) overall).
+    const durations: (number | null)[] = new Array(count);
+    for (let i = 0; i < count; i++) {
+      const msg = messages[i];
+      const nextReal = nextNonNotice[i];
+      const ownsFooter = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
+      durations[i] = ownsFooter ? responseRunDurationMs(messages, i) : null;
+    }
+
+    return { lastAiIdx: lastAi, nextNonNotice, prevNonNoticeIdx, durations };
+  }, [messages]);
+
+  return (
+    <>
+      {messages.map((msg, idx) => {
+        const prev = messages[idx - 1];
+        const isLoading = isGenerating && idx === lastAiIdx && msg.role === 'ai';
+        const nextReal = nextNonNotice[idx];
+        const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
+        const isPrevNotice = Boolean(prev?.notice);
+        const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user' && !isPrevNotice;
+        const prevRealIdx = prevNonNoticeIdx[idx];
+        const prevReal = prevRealIdx >= 0 ? messages[prevRealIdx] : null;
+        const isPrevAssistant = Boolean(msg.role !== 'user' && prevReal && prevReal.role !== 'user');
+        return (
+          <ChatMessageItem
+            key={msg.id}
+            msg={msg}
+            provider={provider}
+            providerNames={providerNames}
+            modelName={modelName}
+            modelNames={modelNames}
+            thinkingLevel={thinkingLevel}
+            isStreaming={isLoading}
+            onUndo={onUndo}
+            onRetry={onRetry}
+            onNewChat={onNewChat}
+            footerVisible={isLastAi}
+            durationMs={durations[idx]}
+            isPrevAssistant={isPrevAssistant}
+            isMobile={isMobile}
+            className={msg.notice ? 'mt-3 mb-1' : isAiFragment ? 'mt-1' : 'mt-3'}
+          />
+        );
+      })}
+    </>
+  );
+});

package/src/client/components/workspace/chat-timeline/MinimapShortcuts.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'preact/hooks';
+
+interface MinimapShortcutsProps {
+  userMessages: any[];
+  onScrollTo: (id: string) => void;
+}
+
+export function MinimapShortcuts({ userMessages, onScrollTo }: MinimapShortcutsProps) {
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+  if (userMessages.length === 0) return null;
+
+  const lineWidth = (idx: number): string => {
+    if (hoveredIdx === null) return 'w-3';
+    const dist = Math.abs(idx - hoveredIdx);
+    if (dist === 0) return 'w-6';
+    if (dist === 1) return 'w-4';
+    return 'w-3';
+  };
+
+  return (
+    <div
+      className="absolute right-0.5 top-1/2 -translate-y-1/2 z-20 flex flex-col items-center py-4 w-6"
+      onMouseLeave={() => setHoveredIdx(null)}
+    >
+      {userMessages.map((msg, idx) => {
+        const isHovered = hoveredIdx === idx;
+        return (
+          <div
+            key={`minimap-${msg.id}`}
+            className="relative flex items-center justify-center w-full py-[3px] cursor-pointer"
+            onMouseEnter={() => setHoveredIdx(idx)}
+            onClick={() => onScrollTo(msg.id)}
+          >
+            <button
+              className={`block h-px rounded-full transition-all duration-200 ease-out ${lineWidth(idx)} ${isHovered ? 'bg-ink h-[2px]' : 'bg-ink/25'}`}
+              aria-label={`Jump to your message #${idx + 1}`}
+            />
+            <div className={`absolute right-full mr-3 top-1/2 transform -translate-y-1/2 w-64 p-3 bg-ink text-canvas text-xs rounded-md shadow-lg pointer-events-none transition-opacity duration-200 z-30 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+              <div className="line-clamp-3 whitespace-pre-wrap leading-relaxed">{msg.content}</div>
+              <div className="absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-ink rotate-45"></div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/NewChatModal.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'preact/hooks';
+import { X } from 'lucide-preact';
+import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+
+interface NewChatModalProps {
+  initialContent: string;
+  onClose: () => void;
+  onSend: (text: string, attachments: any[]) => void;
+  appSettings?: Record<string, any>;
+  accessMode: ApprovalMode;
+  onAccessModeChange: (mode: ApprovalMode) => void;
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+}
+
+export function NewChatModal({
+  initialContent,
+  onClose,
+  onSend,
+  appSettings,
+  accessMode,
+  onAccessModeChange,
+  composerModelRef,
+}: NewChatModalProps) {
+  const [inputValue, setInputValue] = useState(initialContent);
+  const [attachments, setAttachments] = useState<any[]>([]);
+
+  const handleSend = (atts: any[]) => {
+    onSend(inputValue, atts);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 animate-in fade-in duration-200 p-4">
+      <div 
+        className="bg-canvas border border-ink/15 rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-4 py-3 border-b border-ink/10 bg-paper">
+          <h2 className="text-[13px] font-semibold text-ink">New Chat</h2>
+          <button 
+            onClick={onClose}
+            className="p-1 rounded hover:bg-ink/10 text-ink/60 hover:text-ink transition-colors"
+          >
+            <X size={14} />
+          </button>
+        </div>
+        
+        <div className="p-4 flex-1 scrollbar-overlay-container scrollbar-overlay-static">
+          <p className="text-xs text-ink/60 mb-3">
+            Start a new session in this workspace based on the selected message.
+          </p>
+          <ChatInput
+            value={inputValue}
+            onChange={setInputValue}
+            attachments={attachments}
+            onAttachmentsChange={setAttachments}
+            onSend={handleSend}
+            isGenerating={false}
+            appSettings={appSettings}
+            accessMode={accessMode}
+            onAccessModeChange={onAccessModeChange}
+            composerModelRef={composerModelRef}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/QueueList.tsx

@@ -0,0 +1,94 @@
+import type { Dispatch, SetStateAction } from 'preact/compat';
+import { useRef } from 'preact/hooks';
+import { GripVertical, Pencil, Send, X } from 'lucide-preact';
+import type { QueuedMessage } from '@/shared/types';
+
+export type { QueuedMessage };
+
+interface QueueListProps {
+  queue: QueuedMessage[];
+  setQueue: Dispatch<SetStateAction<QueuedMessage[]>>;
+  /** True when every row in this panel is a steering delivery. */
+  isSteering?: boolean;
+  onEdit?: (item: QueuedMessage) => void;
+  /** Deliver the item now (Send Now / steer). */
+  onSendNow?: (item: QueuedMessage) => void;
+}
+
+const KIND_LABEL: Record<string, string> = {
+  steer: 'steer',
+  followup: 'follow-up',
+};
+
+export function QueueList({ queue, setQueue, isSteering = false, onEdit, onSendNow }: QueueListProps) {
+  const dragItem = useRef<number | null>(null);
+  const dragOverItem = useRef<number | null>(null);
+
+  const handleSort = () => {
+    if (dragItem.current === null || dragOverItem.current === null) return;
+    const _queue = [...queue];
+    const draggedItemContent = _queue.splice(dragItem.current, 1)[0];
+    _queue.splice(dragOverItem.current, 0, draggedItemContent);
+    dragItem.current = null;
+    dragOverItem.current = null;
+    setQueue(_queue);
+  };
+
+  if (queue.length === 0) return null;
+  const kind = isSteering ? 'steer' : 'followup';
+
+  return (
+    <div className="max-h-[150px] scrollbar-overlay-container scrollbar-overlay-static mb-2 space-y-1">
+      {queue.map((item, index) => (
+        <div
+          key={item.id}
+          draggable
+          onDragStart={() => { dragItem.current = index; }}
+          onDragEnter={() => { dragOverItem.current = index; }}
+          onDragEnd={handleSort}
+          onDragOver={(e) => e.preventDefault()}
+          className="flex items-center gap-2 px-2 py-1.5 bg-paper border border-ink/10 rounded shadow-sm text-xs group hover:border-ink/30 transition-colors"
+        >
+          <div className="cursor-grab text-ink/40 group-hover:text-ink/80">
+            <GripVertical size={14} />
+          </div>
+          <span
+            className={`shrink-0 text-[9px] font-mono uppercase tracking-wider px-1 py-px rounded ${
+              kind === 'steer' ? 'bg-error/10 text-error' : 'bg-ink/10 text-ink/70'
+            }`}
+          >
+            {KIND_LABEL[kind]}
+          </span>
+          <div className="flex-1 truncate text-ink/80 pr-2">
+            {item.text || (item.attachments.length > 0 ? `[${item.attachments.length} attachment${item.attachments.length > 1 ? 's' : ''}]` : 'Empty message')}
+          </div>
+          {onSendNow && kind === 'followup' && (
+            <button
+              onClick={() => onSendNow(item)}
+              className="text-ink/40 hover:text-ink/80 opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Send Now (Steering)"
+            >
+              <Send size={12} />
+            </button>
+          )}
+          {onEdit && (
+            <button
+              onClick={() => onEdit(item)}
+              className="text-ink/40 hover:text-ink/80 opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Edit"
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+          <button
+            onClick={() => setQueue(q => q.filter(i => i.id !== item.id))}
+            className="text-ink/40 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
+            title="Remove"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/SessionSkeleton.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'preact/hooks';
+
+/**
+ * Full-panel placeholder shown while a session's committed history is being
+ * fetched — the timeline container paints before /api/chat/:id resolves, and
+ * on a phone the fetch+parse of a large session is easily hundreds of
+ * milliseconds. Covers the whole chat timeline panel (message body + composer
+ * area) identically on desktop and mobile, so switching sessions never shows
+ * a half-drawn view. Neutral paper-shaped rows; no spinners, no layout shift
+ * once the real rows replace it.
+ */
+
+interface SkeletonRow {
+  role: 'user' | 'ai';
+  width: string;
+  lines: number;
+}
+
+const SKELETON_ROWS: SkeletonRow[] = [
+  { role: 'user', width: '58%', lines: 1 },
+  { role: 'ai', width: '100%', lines: 3 },
+  { role: 'user', width: '40%', lines: 1 },
+  { role: 'ai', width: '92%', lines: 2 },
+  { role: 'user', width: '52%', lines: 2 },
+  { role: 'ai', width: '100%', lines: 4 },
+];
+
+function SkeletonBubble({ row, index }: { row: SkeletonRow; index: number }) {
+  return (
+    <div className={`flex ${row.role === 'user' ? 'justify-end' : 'justify-start'} mb-3`}>
+      <div
+        className="rounded-lg bg-ink/5 border border-ink/5 px-3 py-2 space-y-1.5"
+        style={{ width: row.width, maxWidth: '85%' }}
+      >
+        {Array.from({ length: row.lines }, (_, l) => (
+          <div
+            key={l}
+            className="h-2.5 rounded bg-ink/8 animate-pulse"
+            style={{ width: l === row.lines - 1 ? '62%' : '100%', animationDelay: `${index * 120 + l * 60}ms` }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SessionSkeleton() {
+  const rows = useMemo(() => SKELETON_ROWS, []);
+
+  return (
+    <div aria-hidden className="flex flex-col h-full min-h-0 overflow-hidden">
+      {/* Timeline body — mirrors the real container's padding in both variants. */}
+      <div className="flex-1 min-h-0 overflow-hidden px-3 py-3 pb-8 sm:p-4 sm:pb-10">
+        <div className="mx-auto w-full max-w-[970px]">
+          {rows.map((row, i) => (
+            <SkeletonBubble key={i} row={row} index={i} />
+          ))}
+        </div>
+      </div>
+
+      {/* Composer area — skeleton chat input, mirrors the real footer padding. */}
+      <div className="flex-shrink-0 px-3 pt-1 pb-3 sm:p-4 sm:pt-1">
+        <div className="mx-auto w-full max-w-[970px]">
+          <div className="rounded-md border border-ink/20 bg-paper p-3 space-y-2">
+            <div className="h-9 rounded bg-ink/8 animate-pulse" style={{ animationDelay: '720ms' }} />
+            <div className="flex items-center justify-between">
+              <div className="h-5 w-28 rounded bg-ink/8 animate-pulse" style={{ animationDelay: '840ms' }} />
+              <div className="h-7 w-7 rounded bg-ink/8 animate-pulse" style={{ animationDelay: '960ms' }} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Slim inline indicator above the timeline while an older history window is
+ *  being fetched (scroll-to-top paging). */
+export function LoadingOlderIndicator() {
+  return (
+    <div className="flex justify-center py-2" role="status">
+      <div className="flex items-center gap-1.5 text-ink/40 text-[11px] font-mono">
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-ink/30 animate-pulse" />
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-ink/30 animate-pulse" style={{ animationDelay: '150ms' }} />
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-ink/30 animate-pulse" style={{ animationDelay: '300ms' }} />
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/SubagentView.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { ArrowLeft, Bot, Loader2, Lock } from 'lucide-preact';
+import type { SubagentInfo } from '@/shared/types';
+import { SubagentStatusIcon } from '@/client/components/common/SubagentStatusIcon';
+import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
+import { useSubagentTranscript } from '@/client/hooks/chat/subagent';
+import { useModelNames } from '@/client/hooks/models/use-model-names';
+import { formatCompactTokens } from '@/shared/lib/format/number';
+
+interface SubagentViewProps {
+  sessionId: string | null;
+  subagent: SubagentInfo | null;
+  onBack: () => void;
+  provider?: string;
+  providerNames?: Record<string, string>;
+  className?: string;
+}
+
+const STATUS_LABEL: Record<SubagentInfo['status'], string> = {
+  started: 'running',
+  completed: 'done',
+  failed: 'failed',
+  aborted: 'aborted',
+};
+
+/** Read-only subagent transcript: compact banner, live-growing message list,
+ *  and a notice row where the main timeline's composer would be. */
+export function SubagentView({ sessionId, subagent, onBack, provider, providerNames, className = '' }: SubagentViewProps) {
+  const { messages, isLoading, status, isActive } = useSubagentTranscript(sessionId, subagent, onBack);
+  const modelNames = useModelNames();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const effectiveStatus = status?.status ?? subagent?.status ?? 'started';
+  const isRunning = effectiveStatus === 'started';
+
+  // Auto-scroll to the newest row as the transcript grows (main timeline parity).
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const frame = requestAnimationFrame(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [messages.length, isRunning]);
+
+  if (!subagent || !isActive) return null;
+
+  const progress = status?.progress ?? subagent.progress;
+  const modelName = progress?.resolvedModel ?? subagent.agent;
+  const compactTokens = formatCompactTokens(progress?.tokens);
+  const meta = compactTokens ? `${compactTokens} tok` : '';
+  const rawTask = status?.task ?? status?.assignment ?? status?.description
+    ?? subagent.task ?? subagent.assignment ?? subagent.description;
+  const task = rawTask ? rawTask.replace(/\$0(\.00*)?/g, '').trim() : undefined;
+
+  return (
+    <div className={`flex flex-col h-full min-h-0 overflow-hidden bg-canvas ${className}`}>
+      {/* Banner: back, live status, agent identity, at-a-glance usage */}
+      <div className="flex items-center gap-2.5 border-b border-ink/15 bg-paper px-3 py-2 flex-shrink-0">
+        <button
+          type="button"
+          onClick={onBack}
+          title="Back to session"
+          className="flex items-center justify-center w-7 h-7 rounded-md border border-ink/15 text-ink/70 hover:text-ink hover:bg-ink/5 transition-colors shrink-0 cursor-pointer"
+        >
+          <ArrowLeft size={14} />
+        </button>
+        <SubagentStatusIcon status={effectiveStatus} live={isRunning} size={12} />
+        <Bot size={13} className="text-ink/60 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="font-mono text-[12px] font-semibold text-ink truncate">
+              {status?.agent ?? subagent.agent}
+            </span>
+            <span className="shrink-0 rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-ink/50">
+              {STATUS_LABEL[effectiveStatus]}
+            </span>
+          </div>
+          <p className="truncate text-[11px] text-ink/55 font-sans">
+            {task ?? 'Subagent transcript'}
+          </p>
+        </div>
+        {meta && (
+          <span className="hidden sm:inline shrink-0 font-mono text-[10px] text-ink/45">
+            {meta}
+          </span>
+        )}
+      </div>
+
+      {/* Transcript */}
+      <div
+        ref={scrollRef}
+        className="flex-1 min-h-0 overflow-y-auto overscroll-contain scrollbar-overlay-container timeline-scrollbar-visible p-4 pb-10"
+      >
+        <div className="mx-auto w-full max-w-[970px]">
+          {isLoading && messages.length === 0 ? (
+            <div className="flex items-center justify-center gap-2 py-12 text-[11px] font-mono text-ink/50">
+              <Loader2 size={14} className="animate-spin" />
+              <span>Loading transcript…</span>
+            </div>
+          ) : messages.length === 0 ? (
+            <div className="py-12 text-center text-[11.5px] font-mono text-ink/45">
+              No transcript messages yet.
+            </div>
+          ) : (
+            messages.map((msg, idx) => {
+              let lastAiIdx = messages.length - 1;
+              while (lastAiIdx >= 0 && messages[lastAiIdx].notice) lastAiIdx--;
+              const isLoading = isRunning && idx === lastAiIdx && msg.role !== 'user' && !msg.notice;
+              const nextReal = messages.slice(idx + 1).find((m) => !m.notice);
+              const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
+              let prevRealIdx = idx - 1;
+              while (prevRealIdx >= 0 && messages[prevRealIdx].notice) prevRealIdx--;
+              const prevReal = prevRealIdx >= 0 ? messages[prevRealIdx] : null;
+              const isPrevAssistant = Boolean(msg.role !== 'user' && prevReal && prevReal.role !== 'user');
+
+              return (
+                <ChatMessageItem
+                  key={msg.id}
+                  msg={msg}
+                  provider={msg.provider || provider}
+                  providerNames={providerNames}
+                  modelName={msg.model || modelName}
+                  modelNames={modelNames}
+                  isStreaming={isLoading}
+                  footerVisible={isLastAi}
+                  durationMs={msg.durationMs ?? null}
+                  isPrevAssistant={isPrevAssistant}
+                  className={msg.notice ? 'mt-3 mb-1' : isPrevAssistant ? 'mt-1' : 'mt-3'}
+                />
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* Read-only notice in place of the composer */}
+      <div className="flex-shrink-0 p-4 pt-1">
+        <div className="mx-auto w-full max-w-[970px]">
+          <div className="flex items-center justify-center gap-2 rounded-lg border border-ink/15 bg-paper px-3 py-2 text-[11px] font-mono text-ink/50 select-none">
+            <Lock size={11} className="text-ink/45" />
+            <span>Read-only transcript — subagents cannot receive messages</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}