refactor(ui): migrate documents and arena icons to the shared module (tranche 2)

src/App.tsx

@@ -126,7 +126,7 @@ import { startAgentHookStatusListener } from './store/agentHookStatus';
 import { applyPlanContent } from './store/canvas';
 import { startEvidenceAutoBuild } from './store/evidence-auto';
 import type { PlanContentMessage } from './store/canvas';
-import { SyncIcon } from './components/icons';
+import { GitHubMarkIcon, SyncIcon } from './components/icons';
 
 const ThinkingSpace = lazy(() =>
   import('./components/thinking/ThinkingSpace').then((m) => ({ default: m.ThinkingSpace })),
@@ -161,15 +161,7 @@ function DropOverlay() {
         'backdrop-filter': 'blur(4px)',
       }}
     >
-      <svg
-        width="48"
-        height="48"
-        viewBox="0 0 16 16"
-        fill={theme.accent}
-        style={{ opacity: '0.9' }}
-      >
-        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
-      </svg>
+      <GitHubMarkIcon size={48} style={{ color: theme.accent, opacity: '0.9' }} />
       <span
         style={{
           color: theme.fg,

src/arena/ArenaOverlay.tsx

@@ -5,6 +5,7 @@ import './arena-battle.css';
 import './arena-results.css';
 import './arena-history.css';
 import { Show, onMount } from 'solid-js';
+import { ScrambleIcon } from '../components/icons';
 import { arenaStore } from './store';
 import { loadArenaPresets, loadArenaHistory } from './persistence';
 import { ConfigScreen } from './ConfigScreen';
@@ -31,19 +32,7 @@ export function ArenaOverlay(props: ArenaOverlayProps) {
     <div class="arena-overlay">
       <div class="arena-header">
         <div class="arena-title">
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M3 3L13 13M9 12L12 9" />
-            <path d="M13 3L3 13M4 9L7 12" />
-          </svg>
+          <ScrambleIcon size={20} />
           AI Arena
         </div>
         <button class="arena-close-btn" onClick={handleClose}>

src/arena/BattleScreen.tsx

@@ -1,4 +1,5 @@
 import { For, Show, createSignal, createEffect, onCleanup } from 'solid-js';
+import { StopAltIcon } from '../components/icons';
 import { TerminalView } from '../components/TerminalView';
 import { ChangedFilesList } from '../components/ChangedFilesList';
 import { DiffViewerDialog } from '../components/DiffViewerDialog';
@@ -115,9 +116,7 @@ export function BattleScreen() {
                           onClick={() => handleStop(agentId)}
                           title="Stop"
                         >
-                          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                            <rect x="3" y="3" width="10" height="10" rx="1" />
-                          </svg>
+                          <StopAltIcon size={12} />
                         </button>
                       </Show>
                     </div>

src/arena/ConfigScreen.tsx

@@ -19,7 +19,7 @@ import { invoke } from '../lib/ipc';
 import { IPC } from '../../electron/ipc/channels';
 import { saveArenaPresets } from './persistence';
 import { ProjectSelect } from '../components/ProjectSelect';
-import { CloseIcon, HistoryIcon, PlusIcon } from '../components/icons';
+import { CloseIcon, HistoryIcon, PlusIcon, ScrambleIcon } from '../components/icons';
 import { MAX_COMPETITORS, MIN_COMPETITORS } from './store';
 import type { BattleCompetitor } from './types';
 
@@ -221,20 +221,7 @@ export function ConfigScreen() {
       {/* Actions */}
       <div class="arena-config-actions">
         <button class="arena-fight-btn" disabled={!canFight() || preparing()} onClick={handleFight}>
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style={{ 'margin-right': '6px' }}
-          >
-            <path d="M3 3L13 13M9 12L12 9" />
-            <path d="M13 3L3 13M4 9L7 12" />
-          </svg>
+          <ScrambleIcon size={20} style={{ 'margin-right': '6px' }} />
           Fight!
         </button>
       </div>

src/arena/HistoryScreen.tsx

@@ -4,6 +4,7 @@ import { saveArenaHistory } from './persistence';
 import { formatDuration } from './utils';
 import { confirm } from '../lib/dialog';
 import { invoke } from '../lib/ipc';
+import { ChevronLeftThinIcon, TrashAltIcon } from '../components/icons';
 import { IPC } from '../../electron/ipc/channels';
 
 function formatDate(iso: string): string {
@@ -82,18 +83,7 @@ export function HistoryScreen() {
           class="arena-close-btn"
           onClick={() => setPhase(arenaStore.previousPhase ?? 'config')}
         >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M10 3L5 8l5 5" />
-          </svg>
+          <ChevronLeftThinIcon size={14} />
           Back
         </button>
       </div>
@@ -123,18 +113,7 @@ export function HistoryScreen() {
                     title="Delete match and clean up worktrees"
                   >
                     <Show when={deleting() !== match.id} fallback={<span>...</span>}>
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <path d="M3 4h10M6 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1M5 4v9a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4" />
-                      </svg>
+                      <TrashAltIcon size={14} />
                     </Show>
                   </button>
                 </div>

src/arena/ResultsScreen.tsx

@@ -1,4 +1,14 @@
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
+import {
+  ChevronLeftThinIcon,
+  ClockAltIcon,
+  CompareIcon,
+  MergeIcon,
+  PlusThinIcon,
+  ShieldAltIcon,
+  StarIcon,
+  SyncAltIcon,
+} from '../components/icons';
 import { ChangedFilesList } from '../components/ChangedFilesList';
 import { DiffViewerDialog } from '../components/DiffViewerDialog';
 import { CommitDialog } from './CommitDialog';
@@ -259,9 +269,7 @@ export function ResultsScreen() {
                           onClick={() => setRating(competitor.id, star)}
                           title={`${star} star${star > 1 ? 's' : ''}`}
                         >
-                          <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor">
-                            <path d="M8 1.3l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L2.2 5.5l4-.6L8 1.3z" />
-                          </svg>
+                          <StarIcon size={28} />
                         </button>
                       )}
                     </For>
@@ -280,21 +288,7 @@ export function ResultsScreen() {
                         disabled={merge.merging() || merge.mergedId() !== null}
                         onClick={() => merge.handleMergeClick(competitor)}
                       >
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 16 16"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="1.5"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <circle cx="4" cy="4" r="2" />
-                          <circle cx="12" cy="4" r="2" />
-                          <circle cx="8" cy="13" r="2" />
-                          <path d="M4 6v1c0 2 4 4 4 4M12 6v1c0 2-4 4-4 4" />
-                        </svg>
+                        <MergeIcon size={14} />
                         {merge.merging() ? 'Merging...' : 'Merge'}
                       </button>
                     </Show>
@@ -312,104 +306,33 @@ export function ResultsScreen() {
 
       <Show when={projectLabel()}>
         <div class="arena-results-project">
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M2 4l6-2 6 2v8l-6 2-6-2z" />
-            <path d="M8 2v12" />
-          </svg>
+          <ShieldAltIcon size={14} />
           {projectLabel()}
         </div>
       </Show>
 
       <div class="arena-config-actions">
         <button class="arena-close-btn" onClick={() => void openCompareTask()}>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M3 3h4v10H3zM9 3h4v10H9zM5 6H3M5 8H3M5 10H3M11 6H9M11 8H9M11 10H9" />
-          </svg>
+          <CompareIcon size={14} />
           Compare All
         </button>
         <Show when={!isHistoryView()}>
           <button class="arena-close-btn" onClick={() => void resetForRematch()}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M2 8a6 6 0 0 1 10.2-4.3" />
-              <path d="M14 8a6 6 0 0 1-10.2 4.3" />
-              <path d="M12 1v3h-3" />
-              <path d="M4 15v-3h3" />
-            </svg>
+            <SyncAltIcon size={14} />
             Rematch
           </button>
           <button class="arena-close-btn" onClick={() => void resetForNewMatch()}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M8 3v10M3 8h10" />
-            </svg>
+            <PlusThinIcon size={14} />
             New Match
           </button>
           <button class="arena-close-btn" onClick={() => setPhase('history')}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="8" cy="8" r="6" />
-              <path d="M8 4.5V8l2.5 2.5" />
-            </svg>
+            <ClockAltIcon size={14} />
             History
           </button>
         </Show>
         <Show when={isHistoryView()}>
           <button class="arena-close-btn" onClick={returnToHistory}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M10 3L5 8l5 5" />
-            </svg>
+            <ChevronLeftThinIcon size={14} />
             Back to History
           </button>
         </Show>

src/components/CanvasTabStrip.tsx

@@ -4,12 +4,18 @@ import { sf } from '../lib/fontScale';
 import { canvasTabKey } from '../lib/canvas-tabs';
 import type { CanvasTab, CanvasTabKind } from '../store/types';
 import { IconButton } from './IconButton';
-import { CloseIcon, ExpandIcon, ExternalLinkIcon, PlusIcon, ScreenNormalIcon } from './icons';
+import {
+  CloseIcon,
+  DocumentIcon,
+  ExpandIcon,
+  ExternalLinkIcon,
+  PlusIcon,
+  ScreenNormalIcon,
+} from './icons';
 import { UnderstandButton, tourButtonStyle } from './understanding/UnderstandButton';
 import type { UnderstandingTourController } from '../lib/create-understanding-tour';
 import { isTourFilePath } from '../lib/tour-file';
 import { isEditableDocumentPath } from '../lib/document-path';
-import { DocumentIcon } from '../documents/DocumentIcon';
 
 interface CanvasTabStripProps {
   tabs: CanvasTab[];

src/components/ChangeTourButton.tsx

@@ -12,6 +12,7 @@ import {
 import { store } from '../store/store';
 import { askCodeLabel } from './understanding/ask-code-label';
 import { TourModelMenu } from './understanding/TourModelMenu';
+import { ArrowRightThinIcon, CloseAltIcon, CycleIcon } from './icons';
 
 export function ChangeTourButton(props: {
   tour: ChangeTourController;
@@ -117,26 +118,7 @@ export function ChangeTourButton(props: {
               <Show
                 when={props.tour.loading()}
                 fallback={
-                  <Show
-                    when={ready()}
-                    fallback={
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.25"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        aria-hidden="true"
-                      >
-                        <circle cx="4" cy="3" r="1.5" />
-                        <circle cx="12" cy="13" r="1.5" />
-                        <path d="M5.5 3h5a2.5 2.5 0 0 1 0 5h-5a2.5 2.5 0 0 0 0 5h5" />
-                      </svg>
-                    }
-                  >
+                  <Show when={ready()} fallback={<CycleIcon size={14} />}>
                     <span
                       aria-label="Tour ready"
                       style={{
@@ -172,19 +154,7 @@ export function ChangeTourButton(props: {
                   </span>
                 </Show>
               </span>
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <path d={props.tour.loading() ? 'm4 4 8 8M12 4l-8 8' : 'M3 8h10m-4-4 4 4-4 4'} />
-              </svg>
+              {props.tour.loading() ? <CloseAltIcon size={14} /> : <ArrowRightThinIcon size={14} />}
             </button>
           </div>
           {props.children}