ompchamber 1.0.0 → 1.2.0

package/src/client/components/layout/session-sidebar/SessionItem.tsx

@@ -33,6 +33,15 @@ export function SessionItem({
   onToggleExpand,
 }: SessionItemProps) {
   const showChevron = Boolean(expandable && hasSubagents && onToggleExpand);
+  // The slot shows one glyph, never two side by side. A live run signal owns
+  // it at rest — the spinner, or the blocked-on-a-question cue, which says it
+  // is YOUR turn. With nothing live to report the chevron is PINNED, collapsed
+  // or expanded: it is the only affordance left worth showing, and making it
+  // hover-only would leave the roster reachable only by hovering exactly the
+  // right 16px.
+  const liveRun = awaitingInput || status === 'stream';
+  const chevronPinned = showChevron && !liveRun;
+  const showStatus = Boolean(awaitingInput || status) && !chevronPinned;
   const {
     isEditing,
     draft,
@@ -52,11 +61,16 @@ export function SessionItem({
           : 'text-ink/75 hover:text-ink hover:bg-ink/5'
       }`}
     >
-      {/* One 16px slot owns both icons: the run-status indicator (spinner /
-          check) shows at rest, and the expand toggle takes the slot over on
-          hover — or permanently while the roster is open. Never two icons.
-          The toggle is pointer-inert while invisible so the slot keeps
-          selecting the session until the chevron is what you see. */}
+      {/* One 16px slot owns both icons — never two side by side. A live run
+          signal (blocked question, run spinner) holds the slot; otherwise the
+          chevron is pinned, collapsed or expanded. While the signal holds it,
+          hovering hands the slot to the chevron so the roster stays reachable
+          mid-run.
+          Both layers are pointer-inert for the opposite state: the toggle
+          while hidden, the status glyph ALWAYS (it is painted after the
+          toggle, so without that it wins the hit test over the revealed
+          chevron and every click on a badged row selects the session instead
+          of expanding it). */}
       <span className="relative w-4 h-4 shrink-0">
         {showChevron && onToggleExpand && (
           <button
@@ -67,18 +81,18 @@ export function SessionItem({
             }}
             title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
             aria-expanded={isExpanded}
-            className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer text-ink/40 transition-opacity hover:text-ink ${
-              isExpanded
-                ? ''
-                : 'pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
+            className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer transition-opacity ${
+              chevronPinned
+                ? 'text-ink/60 hover:text-ink'
+                : 'text-ink/40 hover:text-ink pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
             }`}
           >
-            {isExpanded ? <ChevronDown size={13} className="text-ink/70" /> : <ChevronRight size={13} />}
+            {isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
           </button>
         )}
-        {(awaitingInput || status) && !(showChevron && isExpanded) && (
+        {showStatus && (
           <span
-            className={`absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
+            className={`pointer-events-none absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
               showChevron ? 'group-hover/item:opacity-0 peer-focus-visible:opacity-0' : ''
             }`}
           >

package/src/client/components/layout/session-sidebar/SubagentList.tsx

@@ -3,6 +3,7 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { SubagentStatusIcon } from '@/client/components/common/SubagentStatusIcon';
 import { isRecord } from '@/shared/lib/util/guards';
 import { fetchSubagentHistory, historyEntryToSubagentInfo } from '@/shared/lib/omp/subagent/history/client';
+import { subagentRowLabel } from '@/shared/lib/omp/subagent/label';
 import { mergeSubagentRoster, parseSubagentLifecycle, parseSubagentProgress, parseSubagentRosterResponse } from '@/shared/lib/omp/subagent/parse';
 import type { SubagentInfo, SubagentProgress } from '@/shared/types';
 
@@ -123,13 +124,14 @@ export function SubagentList({ sessionId, isActiveSession }: SubagentListProps)
         </div>
       ) : (
         subagents.map((subagent) => {
-          const taskText = subagent.task ?? subagent.description ?? subagent.assignment ?? subagent.agent ?? '';
+          const label = subagentRowLabel(subagent);
+          const brief = subagent.task ?? subagent.assignment ?? subagent.description ?? label;
           const isViewed = subagent.id === viewedSubagentId;
           return (
             <button
               key={subagent.id}
               type="button"
-              title={taskText}
+              title={brief}
               onClick={() => window.dispatchEvent(new CustomEvent('omp:view-subagent', { detail: { sessionId: String(sessionId), subagent } }))}
               className={`w-full flex items-center text-left text-xs rounded-md px-2 py-1 cursor-pointer transition-colors select-none group/subagent ${isViewed ? 'bg-ink/10 font-medium text-ink' : 'text-ink/70 hover:text-ink hover:bg-ink/5'}`}
             >
@@ -141,8 +143,8 @@ export function SubagentList({ sessionId, isActiveSession }: SubagentListProps)
               {/* Gap between subagent icon and task text */}
               <span className="w-2 shrink-0" />
 
-              {/* Subagent task description text */}
-              <span className="flex-1 min-w-0 truncate leading-snug">{taskText}</span>
+              {/* Subagent label: `id (agent): target` */}
+              <span className="flex-1 min-w-0 truncate leading-snug">{label}</span>
             </button>
           );
         })

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -2,6 +2,7 @@ import { useState } from 'preact/hooks';
 import { AlertTriangle, Loader2 } from 'lucide-preact';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { CodeSurface } from '@/client/components/common/code-surface';
+import { ImageViewer } from '@/client/components/common/image-viewer';
 import { EditorHeader } from '@/client/components/mobile/mobile-right-sidebar/Header';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { useFileEditor } from '@/client/hooks/editor/use-file-editor';
@@ -48,6 +49,7 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         isPreview={isPreview}
         wordWrap={wordWrap}
         copied={editor.copied}
+        isImage={editor.isImage}
         onClose={onClose}
         onTogglePreview={() => setIsPreview(!isPreview)}
         onToggleWrap={() => setWordWrap(!wordWrap)}
@@ -57,46 +59,52 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         onDownload={editor.download}
       />
 
-      {/* Editor Content Area - Desktop styled: bg-paper text-ink */}
-      <div onScroll={handleScroll} className={`flex-1 min-h-0 overflow-auto relative bg-paper text-ink select-text ${scrollbarFadeClass(isScrolling)}`}>
-        {editor.isLoading ? (
-          <div className="flex items-center justify-center h-full text-ink/40 text-xs gap-2">
-            <Loader2 size={14} className="animate-spin" />
-            <span>Loading file content...</span>
-          </div>
-        ) : editor.loadError ? (
-          <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
-            <AlertTriangle size={20} className="text-error" />
-            <span className="text-xs text-error font-sans">Could not read {file.name}</span>
-            <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
-          </div>
-        ) : isMd && isPreview ? (
-          /* Markdown Preview Mode */
-          <div className="p-4 bg-paper text-ink min-h-full font-sans prose prose-sm max-w-none">
-            <MarkdownRenderer content={content} />
-          </div>
-        ) : (
-          /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
-          <CodeSurface
-            value={content}
-            onValueChange={editor.onChange}
-            language={lang}
-            wordWrap={wordWrap}
-            rootClassName="flex min-h-full bg-paper"
-            gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
-            editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
-            editorClassName="focus:outline-none"
-            editorStyle={{
-              fontFamily: 'monospace',
-              fontSize: `${fontSize}px`,
-              lineHeight: '20px',
-              backgroundColor: 'transparent',
-              minHeight: '100%',
-              color: 'var(--theme-ink)',
-            }}
-          />
-        )}
-      </div>
+      {/* Editor Content Area - Desktop styled: bg-paper text-ink. An image owns
+          its own pan/zoom, so it replaces the scrolling text container rather
+          than living inside it. */}
+      {editor.isImage && editor.imageUrl ? (
+        <ImageViewer src={editor.imageUrl} name={file.name} className="flex-1 min-h-0" />
+      ) : (
+        <div onScroll={handleScroll} className={`flex-1 min-h-0 overflow-auto relative bg-paper text-ink select-text ${scrollbarFadeClass(isScrolling)}`}>
+          {editor.isLoading ? (
+            <div className="flex items-center justify-center h-full text-ink/40 text-xs gap-2">
+              <Loader2 size={14} className="animate-spin" />
+              <span>Loading file content...</span>
+            </div>
+          ) : editor.loadError ? (
+            <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
+              <AlertTriangle size={20} className="text-error" />
+              <span className="text-xs text-error font-sans">Could not read {file.name}</span>
+              <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
+            </div>
+          ) : isMd && isPreview ? (
+            /* Markdown Preview Mode */
+            <div className="p-4 bg-paper text-ink min-h-full font-sans prose prose-sm max-w-none">
+              <MarkdownRenderer content={content} />
+            </div>
+          ) : (
+            /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
+            <CodeSurface
+              value={content}
+              onValueChange={editor.onChange}
+              language={lang}
+              wordWrap={wordWrap}
+              rootClassName="flex min-h-full bg-paper"
+              gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
+              editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
+              editorClassName="focus:outline-none"
+              editorStyle={{
+                fontFamily: 'monospace',
+                fontSize: `${fontSize}px`,
+                lineHeight: '20px',
+                backgroundColor: 'transparent',
+                minHeight: '100%',
+                color: 'var(--theme-ink)',
+              }}
+            />
+          )}
+        </div>
+      )}
 
       {/* Bottom Status Bar - Desktop styled: bg-canvas border-t border-ink/10 */}
       <footer
@@ -109,9 +117,15 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         }}
       >
         <div className="flex items-center space-x-3">
-          <span>{linesCount} lines</span>
-          <span>{content.length} chars</span>
-          <span className="uppercase">{lang}</span>
+          {editor.isImage ? (
+            <span className="uppercase">Image</span>
+          ) : (
+            <>
+              <span>{linesCount} lines</span>
+              <span>{content.length} chars</span>
+              <span className="uppercase">{lang}</span>
+            </>
+          )}
         </div>
         <div className="flex items-center space-x-2">
           {editor.saveStatus === 'saving' && (

package/src/client/components/mobile/mobile-right-sidebar/Header.tsx

@@ -8,6 +8,8 @@ interface EditorHeaderProps {
   isPreview: boolean;
   wordWrap: boolean;
   copied: boolean;
+  /** Raster image: wrap and font zoom are text-only, so both are hidden. */
+  isImage?: boolean;
   onClose: () => void;
   onTogglePreview: () => void;
   onToggleWrap: () => void;
@@ -24,6 +26,7 @@ export function EditorHeader({
   isPreview,
   wordWrap,
   copied,
+  isImage = false,
   onClose,
   onTogglePreview,
   onToggleWrap,
@@ -71,32 +74,36 @@ export function EditorHeader({
           </button>
         )}
 
-        <button
-          type="button"
-          onClick={onToggleWrap}
-          className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${wordWrap ? 'text-ink' : ''}`}
-          title="Toggle word wrap"
-        >
-          <WrapText size={15} />
-        </button>
+        {!isImage && (
+          <>
+            <button
+              type="button"
+              onClick={onToggleWrap}
+              className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${wordWrap ? 'text-ink' : ''}`}
+              title="Toggle word wrap"
+            >
+              <WrapText size={15} />
+            </button>
 
-        <button
-          type="button"
-          onClick={onZoomOut}
-          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
-          title="Decrease font size"
-        >
-          <ZoomOut size={15} />
-        </button>
+            <button
+              type="button"
+              onClick={onZoomOut}
+              className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+              title="Decrease font size"
+            >
+              <ZoomOut size={15} />
+            </button>
 
-        <button
-          type="button"
-          onClick={onZoomIn}
-          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
-          title="Increase font size"
-        >
-          <ZoomIn size={15} />
-        </button>
+            <button
+              type="button"
+              onClick={onZoomIn}
+              className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+              title="Increase font size"
+            >
+              <ZoomIn size={15} />
+            </button>
+          </>
+        )}
 
         <button
           type="button"

package/src/client/components/settings/Modal.tsx

@@ -40,6 +40,7 @@ const DEFAULT_SETTINGS: SettingsState = {
   editorFont: 'JetBrains Mono',
   streamResponses: true,
   streamTransport: 'websocket',
+  autoSessionTitle: true,
   expandedThinking: true,
   detailedToolCalls: false,
   notificationsEnabled: true,

package/src/client/components/settings/categories/ChatSettings.tsx

@@ -1,6 +1,7 @@
 import type { SettingsState } from '@/shared/types';
 import { ChatFollowUpSection } from '@/client/components/settings/categories/chat-settings/FollowUpSection';
 import { ChatKeybindingsSection } from '@/client/components/settings/categories/chat-settings/KeybindingsSection';
+import { ChatTitleSection } from '@/client/components/settings/categories/chat-settings/TitleSection';
 import { ChatTransportSection } from '@/client/components/settings/categories/chat-settings/TransportSection';
 
 interface ChatSettingsProps {
@@ -14,10 +15,13 @@ export function ChatSettings({ settings, onUpdate }: ChatSettingsProps) {
       {/* 1. Streaming Transport (WebSocket vs SSE) */}
       <ChatTransportSection settings={settings} onUpdate={onUpdate} />
 
-      {/* 2. Follow-up Behavior (Interactive Selector Cards) */}
+      {/* 2. Session Titles (automatic generation) */}
+      <ChatTitleSection settings={settings} onUpdate={onUpdate} />
+
+      {/* 3. Follow-up Behavior (Interactive Selector Cards) */}
       <ChatFollowUpSection settings={settings} onUpdate={onUpdate} />
 
-      {/* 3. Keyboard Shortcuts Configurator */}
+      {/* 4. Keyboard Shortcuts Configurator */}
       <ChatKeybindingsSection settings={settings} onUpdate={onUpdate} />
     </div>
   );

package/src/client/components/settings/categories/chat-settings/TitleSection.tsx

@@ -0,0 +1,99 @@
+import { Check, Sparkles, Type } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+
+interface ChatTitleSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+const OPTIONS: Array<{
+  enabled: boolean;
+  label: string;
+  badge: string;
+  icon: typeof Sparkles;
+  description: string;
+  note: string;
+}> = [
+  {
+    enabled: true,
+    label: 'Generate Automatically',
+    badge: 'Default',
+    icon: Sparkles,
+    description:
+      'After the first run settles, the session is named from the conversation using omp\'s own tiny title model. Sessions stop showing "New Session - <timestamp>" in the sidebar.',
+    note: 'One small model call per session',
+  },
+  {
+    enabled: false,
+    label: 'Manual Only',
+    badge: 'Opt-out',
+    icon: Type,
+    description:
+      'Sessions keep their timestamp placeholder until you rename them from the sidebar. Choose this when every title should be deliberate, or to avoid the extra model call.',
+    note: 'No background model calls',
+  },
+];
+
+export function ChatTitleSection({ settings, onUpdate }: ChatTitleSectionProps) {
+  const active = settings.autoSessionTitle ?? true;
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold text-ink">Session Titles</h4>
+        <p className="text-[11px] text-ink/60 mt-0.5">
+          How a session gets its display name. A name you set yourself is never replaced.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {OPTIONS.map(({ enabled, label, badge, icon: Icon, description, note }) => {
+          const selected = active === enabled;
+          const select = () => onUpdate({ autoSessionTitle: enabled });
+          return (
+            <div
+              key={label}
+              onClick={select}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => e.key === 'Enter' && select()}
+              className={`p-3.5 rounded-lg border text-left transition-all cursor-pointer flex flex-col justify-between select-none ${
+                selected
+                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20 shadow-xs'
+                  : 'border-ink/15 bg-paper hover:border-ink/30 hover:bg-ink/[0.02]'
+              }`}
+            >
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`w-7 h-7 rounded-md flex items-center justify-center ${
+                        selected ? 'bg-ink text-paper' : 'bg-ink/5 text-ink/70'
+                      }`}
+                    >
+                      <Icon size={15} />
+                    </div>
+                    <span className="font-semibold text-xs text-ink">{label}</span>
+                  </div>
+                  <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70 font-medium">
+                    {badge}
+                  </span>
+                </div>
+                <p className="text-[11px] text-ink/70 leading-relaxed">{description}</p>
+              </div>
+
+              <div className="mt-3 pt-2.5 border-t border-ink/10 flex items-center justify-between text-[11px]">
+                <span className="text-ink/50">{note}</span>
+                {selected && (
+                  <span className="flex items-center gap-1 text-ink font-medium">
+                    <Check size={12} /> Active
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/client/components/workspace/btw-panel/AskCard.tsx

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The ask card — the top card of the side-question form.
+ *
+ * It is the form's own entry, not the chat's: the question typed here is always
+ * a question of its own (a new topic), which is why it carries its own `⟳`
+ * (start over) and `✕` (leave the form). The topic history and promotion ride
+ * along here because the form replaced the composer that used to hold them.
+ */
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { TargetedKeyboardEvent } from 'preact';
+import { ChevronDown, ExternalLink, RefreshCw, X } from 'lucide-preact';
+import type { BtwTopic } from '@/shared/types';
+import { BtwTopicMenu } from '@/client/components/workspace/btw-panel/TopicMenu';
+
+export interface BtwAskCardProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  /** `⟳` — clear the question and fall back to the newest topic. */
+  onNewQuestion: () => void;
+  /** `✕` — leave the side-question form. */
+  onClose: () => void;
+  /** A side answer is streaming: starting over waits for it. */
+  running: boolean;
+  topics: BtwTopic[];
+  activeTopicId: string | null;
+  onSelectTopic: (id: string) => void;
+  onDeleteTopic: (id: string) => void;
+  canPromote: boolean;
+  onPromote: () => void;
+}
+
+const GHOST_BUTTON =
+  'p-1.5 rounded text-ink/45 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-ink/45';
+
+export function BtwAskCard({
+  value,
+  onChange,
+  onSubmit,
+  onNewQuestion,
+  onClose,
+  running,
+  topics,
+  activeTopicId,
+  onSelectTopic,
+  onDeleteTopic,
+  canPromote,
+  onPromote,
+}: BtwAskCardProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Grow with the text and collapse again once it is submitted or cleared.
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+
+  const handleKeyDown = (event: TargetedKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    if (event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <div className="bg-paper border border-ink/20 rounded-2xl shadow-sm flex items-center gap-1 pl-1.5 pr-2 py-1 focus-within:border-ink transition-colors">
+      <button
+        type="button"
+        onClick={() => {
+          onNewQuestion();
+          // The button took the focus; asking again means typing again.
+          textareaRef.current?.focus();
+        }}
+        disabled={running}
+        className={GHOST_BUTTON}
+        aria-label="New side question"
+        title="New side question"
+      >
+        <RefreshCw size={14} strokeWidth={2} />
+      </button>
+
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        onInput={(event) => onChange(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Ask your question"
+        aria-label="Ask your question"
+        className="flex-1 min-w-0 bg-transparent text-[13px] text-ink placeholder-ink/40 resize-none outline-none py-1.5 max-h-32 leading-6"
+      />
+
+      {topics.length > 0 && (
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setMenuOpen((open) => !open)}
+            className={GHOST_BUTTON}
+            aria-label="Side question history"
+            title="Side question history"
+            aria-expanded={menuOpen}
+            data-btw-menu-anchor=""
+          >
+            <ChevronDown size={14} strokeWidth={2} />
+          </button>
+          {menuOpen && (
+            <BtwTopicMenu
+              topics={topics}
+              activeTopicId={activeTopicId}
+              onSelectTopic={onSelectTopic}
+              onDeleteTopic={onDeleteTopic}
+              onCloseMenu={() => setMenuOpen(false)}
+            />
+          )}
+        </div>
+      )}
+
+      {canPromote && (
+        <button
+          type="button"
+          onClick={onPromote}
+          className={GHOST_BUTTON}
+          aria-label="Promote answer into chat"
+          title="Promote answer into chat"
+        >
+          <ExternalLink size={14} strokeWidth={2} />
+        </button>
+      )}
+
+      <button
+        type="button"
+        onClick={onClose}
+        className={GHOST_BUTTON}
+        aria-label="Close side questions"
+        title="Close side questions"
+      >
+        <X size={14} strokeWidth={2} />
+      </button>
+    </div>
+  );
+}