@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/shared/components/GlideSelect.jsx

@@ -1,266 +0,0 @@
-'use client';
-
-// Adapted from the React Bits GlideSelect source supplied for this integration.
-// Mint adds portal positioning, scrollable lists, focus visibility, and corrected pointer hit testing.
-import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { ArrowDown01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
-import './GlideSelect.css';
-
-const SIZES = {
-  sm: { chip: 28, row: 26, font: 12 },
-  md: { chip: 32, row: 30, font: 13 },
-  lg: { chip: 44, row: 40, font: 14 }
-};
-const GAP = 1;
-const MENU_GAP = 6;
-const DEFAULT_OPTIONS = ['One', 'Two', 'Three'];
-const norm = o => typeof o === 'string' ? { value: o, label: o } : o;
-const textOf = it => typeof it.label === 'string' ? it.label : it.value;
-const typeaheadIndex = (items, from, ch) => {
-  const c = ch.toLowerCase();
-  for (let k = 1; k <= items.length; k++) {
-    const i = (from + k) % items.length;
-    if (textOf(items[i]).toLowerCase().startsWith(c)) return i;
-  }
-  return from;
-};
-
-export default function GlideSelect({
-  options = DEFAULT_OPTIONS, value, defaultValue, onChange, placeholder = 'Select…', showTags = true,
-  accentColor = '#f5f5f5', surfaceColor = '#27272a', highlightColor = '#3f3f46', textColor = '#f5f5f5',
-  size = 'md', radius = 10, menuWidth = 176, placement = 'bottom', align = 'left',
-  popDuration = 180, glideDuration = 220, rememberPosition = true, disabled = false,
-  ariaLabel = 'Select', className = '', id: triggerId, labelledBy, title, style, fullWidth = false
-}) {
-  const items = options.map(norm);
-  const [inner, setInner] = useState(defaultValue ?? '');
-  const current = value ?? inner;
-  const selected = items.findIndex(it => it.value === current);
-  const [phase, setPhase] = useState('closed');
-  const [active, setActive] = useState(null);
-  const [side, setSide] = useState(placement);
-  const [position, setPosition] = useState({ top: 0, left: 0, width: menuWidth, maxHeight: 300 });
-  const rootRef = useRef(null);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const listRef = useRef(null);
-  const pillRef = useRef(null);
-  const instant = useRef(false);
-  const closeTimer = useRef(undefined);
-  const scrub = useRef(null);
-  const id = useId();
-  const S = SIZES[size] ?? SIZES.md;
-  const step = S.row + GAP;
-  const popOut = Math.round(popDuration * 2 / 3);
-  const unavailable = disabled || items.length === 0;
-
-  useLayoutEffect(() => {
-    if (phase !== 'open') return;
-    const el = menuRef.current;
-    const trigger = triggerRef.current;
-    if (!el || !trigger) return;
-    const place = () => {
-      const r = trigger.getBoundingClientRect();
-      const below = Math.max(0, window.innerHeight - r.bottom - MENU_GAP - 8);
-      const above = Math.max(0, r.top - MENU_GAP - 8);
-      const desired = Math.min(300, items.length * step + 7);
-      const nextSide = placement === 'bottom'
-        ? (below < desired && above > below ? 'top' : 'bottom')
-        : (above < desired && below > above ? 'bottom' : 'top');
-      const maxHeight = Math.min(300, nextSide === 'bottom' ? below : above);
-      const height = Math.min(desired, maxHeight);
-      const width = Math.min(Math.max(menuWidth, r.width), window.innerWidth - 16);
-      const left = Math.max(8, Math.min(align === 'right' ? r.right - width : r.left, window.innerWidth - width - 8));
-      setSide(nextSide);
-      setPosition({ fontFamily: getComputedStyle(trigger).fontFamily, top: nextSide === 'bottom' ? r.bottom + MENU_GAP : r.top - MENU_GAP - height, left, width, maxHeight });
-    };
-    place();
-    // Pointer and keyboard opens both retain the authored pop transition.
-    el.dataset.state = 'closed';
-    void el.offsetHeight;
-    el.dataset.state = 'open';
-    const p = pillRef.current;
-    if (p) {
-      p.style.transition = 'none';
-      p.style.transform = `translateY(${Math.max(0, selected) * step}px)`;
-      p.style.opacity = '0';
-      void p.offsetHeight;
-      p.style.transition = '';
-    }
-    const onScroll = e => { if (!menuRef.current?.contains(e.target)) place(); };
-    window.addEventListener('resize', place);
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('resize', place);
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [phase, placement, align, menuWidth, items.length, step]);
-
-  useLayoutEffect(() => {
-    const p = pillRef.current;
-    if (!p || phase !== 'open') return;
-    if (active === null) { p.style.opacity = '0'; return; }
-    const jump = instant.current || p.style.opacity !== '1';
-    p.style.transitionDuration = jump ? '0ms, 150ms' : '';
-    p.style.transform = `translateY(${active * step}px)`;
-    p.style.opacity = '1';
-    instant.current = false;
-    const list = listRef.current;
-    if (list) {
-      const top = active * step;
-      if (top < list.scrollTop) list.scrollTop = top;
-      else if (top + S.row > list.scrollTop + list.clientHeight) list.scrollTop = top + S.row - list.clientHeight;
-    }
-  }, [active, phase, step, S.row, position.maxHeight]);
-
-  const open = viaKey => {
-    if (unavailable) return;
-    clearTimeout(closeTimer.current);
-    instant.current = true;
-    setActive(selected >= 0 ? selected : viaKey ? 0 : null);
-    setPhase('open');
-  };
-  const close = mode => {
-    setActive(null);
-    scrub.current = null;
-    clearTimeout(closeTimer.current);
-    const el = menuRef.current;
-    if (mode === 'instant' || !el) { setPhase('closed'); return; }
-    el.style.transitionDuration = '';
-    el.dataset.state = 'closed';
-    setPhase('closing');
-    closeTimer.current = setTimeout(() => setPhase('closed'), popOut + 20);
-  };
-  const pick = (i, viaKey) => {
-    const it = items[i];
-    if (!it) { close('instant'); return; }
-    if (it.value !== current) {
-      if (value === undefined) setInner(it.value);
-      onChange?.(it.value, it);
-      if (!viaKey && rootRef.current) rootRef.current.dataset.swap = '';
-    }
-    close('instant');
-    triggerRef.current?.focus({ preventScroll: true });
-  };
-  const onTriggerKey = e => {
-    const k = e.key;
-    const n = items.length;
-    const cur = active ?? Math.max(0, selected);
-    if (phase !== 'open') {
-      if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(k)) { e.preventDefault(); open(true); }
-      return;
-    }
-    const go = i => { e.preventDefault(); instant.current = true; setActive(Math.min(n - 1, Math.max(0, i))); };
-    if (k === 'ArrowDown' || k === 'ArrowUp') go(active === null ? cur : cur + (k === 'ArrowDown' ? 1 : -1));
-    else if (k === 'Home' || k === 'End') go(k === 'Home' ? 0 : n - 1);
-    else if (k === 'Enter' || k === ' ') { e.preventDefault(); pick(cur, true); }
-    else if (k === 'Escape' || k === 'Tab') { if (k === 'Escape') { e.preventDefault(); e.stopPropagation(); } close('instant'); }
-    else if (k.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) go(typeaheadIndex(items, cur, k));
-  };
-  useEffect(() => {
-    if (phase === 'closed') return;
-    const onDown = e => {
-      if (!rootRef.current?.contains(e.target) && !menuRef.current?.contains(e.target)) close('pop');
-    };
-    const onFocus = e => {
-      if (!rootRef.current?.contains(e.target) && !menuRef.current?.contains(e.target)) close('instant');
-    };
-    document.addEventListener('pointerdown', onDown, true);
-    document.addEventListener('focusin', onFocus);
-    return () => { document.removeEventListener('pointerdown', onDown, true); document.removeEventListener('focusin', onFocus); };
-  }, [phase]);
-  useEffect(() => { if (unavailable && phase !== 'closed') close('instant'); }, [unavailable]);
-  useEffect(() => () => clearTimeout(closeTimer.current), []);
-
-  const rowAt = (y, x) => {
-    const list = listRef.current;
-    if (!scrub.current || !list) return null;
-    const r = list.getBoundingClientRect();
-    if (y < r.top || y >= r.bottom || x < r.left || x >= r.right) return null;
-    const offset = y - r.top + list.scrollTop;
-    const i = Math.floor(offset / step);
-    return i >= 0 && i < items.length && offset % step < S.row ? i : null;
-  };
-  const onListDown = e => {
-    if (scrub.current || e.button !== 0) return;
-    // Let a touch gesture scroll long lists; a tap is picked by the row's click handler.
-    if (e.pointerType === 'touch') return;
-    e.preventDefault();
-    try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
-    scrub.current = { id: e.pointerId };
-    instant.current = true;
-    setActive(rowAt(e.clientY, e.clientX));
-  };
-  const onListMove = e => {
-    if (!scrub.current || scrub.current.id !== e.pointerId) return;
-    const i = rowAt(e.clientY, e.clientX);
-    if (i !== active) setActive(i);
-  };
-  const onListUp = e => {
-    if (!scrub.current || scrub.current.id !== e.pointerId) return;
-    const i = e.type === 'pointerup' ? rowAt(e.clientY, e.clientX) : null;
-    scrub.current = null;
-    if (i !== null) pick(i, false);
-    else if (!rememberPosition) setActive(null);
-  };
-  const onListOver = e => {
-    if (e.pointerType === 'touch' || scrub.current) return;
-    const row = e.target.closest('[data-index]');
-    if (!row) return;
-    const i = Number(row.dataset.index);
-    if (i !== active) setActive(i);
-  };
-  const variables = {
-    '--gs-accent': accentColor, '--gs-surface': surfaceColor, '--gs-highlight': highlightColor, '--gs-text': textColor,
-    '--gs-radius': `${radius}px`, '--gs-inner-radius': `${Math.max(3, radius - 4)}px`, '--gs-chip': `${S.chip}px`,
-    '--gs-row': `${S.row}px`, '--gs-font': `${S.font}px`, '--gs-menu-w': `${menuWidth}px`,
-    '--gs-pop': `${popDuration}ms`, '--gs-pop-out': `${popOut}ms`, '--gs-glide': `${glideDuration}ms`,
-    '--gs-origin': `${side === 'bottom' ? 'top' : 'bottom'} ${align}`
-  };
-  return (
-    <div ref={rootRef} className={`glide-select${className ? ` ${className}` : ''}`} data-size={size}
-      data-disabled={unavailable ? '' : undefined} data-full-width={fullWidth ? '' : undefined} style={{ ...variables, ...style }}
-      onAnimationEnd={e => { if (e.animationName === 'gs-swap' && rootRef.current) delete rootRef.current.dataset.swap; }}>
-      <button ref={triggerRef} id={triggerId} title={title} type="button" role="combobox" aria-haspopup="listbox"
-        aria-expanded={phase === 'open'} aria-controls={phase !== 'closed' ? `${id}-list` : undefined}
-        aria-activedescendant={phase === 'open' && active !== null ? `${id}-${active}` : undefined}
-        aria-label={labelledBy ? undefined : ariaLabel} aria-labelledby={labelledBy} disabled={unavailable}
-        className="glide-select__trigger"
-        onPointerDown={e => {
-          if (e.button !== 0 || unavailable) return;
-          e.currentTarget.focus({ preventScroll: true });
-          if (phase === 'open') close('pop'); else open(false);
-        }}
-        onClick={e => { if (e.detail === 0 && phase === 'closed') open(true); }}
-        onKeyDown={onTriggerKey}>
-        <span className="glide-select__label" key={current} data-empty={selected < 0 ? '' : undefined}>
-          {selected >= 0 ? items[selected].label : placeholder}
-        </span>
-        <span className="glide-select__chevron" aria-hidden="true"><HugeiconsIcon icon={ArrowDown01Icon} size={12} strokeWidth={2.5} /></span>
-      </button>
-      {phase !== 'closed' && createPortal(
-        <div ref={menuRef} className="glide-select__menu" data-state="open" data-side={side} data-align={align}
-          style={{ ...variables, top: position.top, left: position.left, width: position.width, maxHeight: position.maxHeight, fontFamily: position.fontFamily }}>
-          <div ref={listRef} id={`${id}-list`} role="listbox" aria-label={ariaLabel} className="glide-select__list"
-            style={{ maxHeight: Math.max(0, position.maxHeight - 8) }} data-live={active !== null ? '' : undefined}
-            onPointerOver={onListOver} onPointerLeave={() => { if (!scrub.current && !rememberPosition) setActive(null); }}
-            onPointerDown={onListDown} onPointerMove={onListMove} onPointerUp={onListUp}
-            onPointerCancel={onListUp} onLostPointerCapture={onListUp}>
-            <span ref={pillRef} className="glide-select__pill" aria-hidden="true" />
-            {items.map((it, i) => (
-              <div key={it.value} id={`${id}-${i}`} role="option" aria-selected={i === selected} data-index={i}
-                className="glide-select__option" onClick={e => { if (e.detail === 0 || e.nativeEvent.pointerType === 'touch') pick(i, false); }}>
-                <span className="glide-select__name">{it.label}</span>
-                {showTags && it.tag ? <span className="glide-select__tag">{it.tag}</span> : null}
-                <span className="glide-select__check" data-on={i === selected ? '' : undefined} aria-hidden="true">
-                  <HugeiconsIcon icon={Tick02Icon} size={13} strokeWidth={2.5} />
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>, document.body)}
-    </div>
-  );
-}

package/src/renderer/shared/components/InlineThoughtNote.tsx

@@ -1,27 +0,0 @@
-/**
- * shared/components/InlineThoughtNote.tsx
- * Renders a short, inline agent thought note in the activity timeline.
- * These are brief notes like "Switched provider", "Using JSON mode fallback",
- * or the agent's short reasoning about what to do next — distinct from
- * extended model thinking (which goes in ThinkingBlock).
- * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
- */
-import { renderFormattedMessage } from '../utils/markdown'
-import { cleanIntermediateThought } from '../utils/agentActivity'
-
-interface Props {
-  thought: string
-}
-
-export function InlineThoughtNote({ thought }: Props) {
-  const cleaned = cleanIntermediateThought(thought)
-  if (!cleaned) return null
-  return (
-    <div className="inline-thought-note">
-      <div className="inline-thought-note-text">
-        {renderFormattedMessage(cleaned) ?? cleaned}
-      </div>
-    </div>
-  )
-}
-

package/src/renderer/shared/components/ModSessionControls.tsx

@@ -1,8 +0,0 @@
-import type { ModTestReport } from '../mods'
-
-export function ModSessionControls({ enabled, busy, onToggle }: { enabled: boolean; busy: boolean; onToggle: (enabled: boolean) => void }) {
-  return <div className="mod-session-controls"><button type="button" disabled={busy} aria-pressed={enabled} onClick={() => onToggle(!enabled)}>Hot reload: {enabled ? 'On' : 'Off'}</button><p className="mod-hint">Applies to this session. Mods with permissions require review for each new revision.</p></div>
-}
-export function ModTestResults({ report }: { report: ModTestReport }) {
-  return <section aria-label="Mod test results"><p role="status">{report.passed} passed · {report.failed} failed</p>{report.tests.map((test,i) => <div key={i}><strong>{test.passed ? '✓' : '✗'} {test.name}</strong><p className="mod-hint">{test.file}</p>{test.error && <pre className="mod-error">{test.error}</pre>}</div>)}</section>
-}

package/src/renderer/shared/components/ModUi.tsx

@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react'
-import type { ModNode } from '../mods'
-
-function ModInput({ node, color, onAction }: { node: ModNode; color: string; onAction: (action: string, value?: string) => void }) {
-  const value = String(node.value ?? '')
-  const [draft, setDraft] = useState(value)
-  useEffect(() => { setDraft(value) }, [value, node.action])
-  return <label className={`mod-input${color}`}>{node.label}<input value={draft} onChange={event => setDraft(event.target.value)} onKeyDown={event => {
-    if (event.key === 'Enter' && node.action) { event.preventDefault(); onAction(node.action, event.currentTarget.value) }
-  }} /></label>
-}
-
-export function ModUi({ node, onAction, inheritedColor }: { node: ModNode; onAction: (action: string, value?: string) => void; inheritedColor?: ModNode['color'] }) {
-  const selectedColor = node.color ?? inheritedColor
-  const color = ['default', 'yellow', 'cyan', 'blue', 'magenta', 'red'].includes(selectedColor ?? '') ? ` mod-color-${selectedColor}` : ''
-  switch (node.type) {
-    case 'stack': return <div className={`mod-stack${node.direction === 'row' ? ' mod-stack-row' : ''}${color}`}>{node.children?.map((child, i) => <ModUi key={i} node={child} onAction={onAction} inheritedColor={selectedColor} />)}</div>
-    case 'text': return <p className={`mod-text${color}`}>{node.text}</p>
-    case 'badge': return <span className={`mod-badge${color}`}>{node.text}</span>
-    case 'button': return <button className={color.trim() || undefined} type="button" onClick={() => node.action && onAction(node.action)}>{node.label}</button>
-    case 'input': return <ModInput node={node} color={color} onAction={onAction} />
-    case 'progress': return <label className={`mod-progress${color}`}>{node.label}<progress aria-label={node.label} value={Number(node.value)} max={node.max} /></label>
-    case 'table': return <div className={`mod-table-scroll${color}`}><table><thead><tr>{node.columns?.map((column, i) => <th key={i}>{column}</th>)}</tr></thead><tbody>{node.rows?.map((row, i) => <tr key={i}>{row.map((cell, j) => <td key={j}>{cell}</td>)}</tr>)}</tbody></table></div>
-    default: return null
-  }
-}

package/src/renderer/shared/components/ProgressActivity.tsx

@@ -1,17 +0,0 @@
-import { memo, useCallback } from 'react'
-import type { AgentProgress } from '../types'
-import { activitiesFrom } from '../utils/agentActivity'
-import { AgentActivityDrawer } from './AgentActivityDrawer'
-
-export const ProgressActivity = memo(function ProgressActivity({ progress, id, isOpen, onToggle, historical = false, pendingApproval = false }: {
-  progress: AgentProgress[]
-  id: string
-  isOpen: boolean
-  onToggle: (id: string) => void
-  historical?: boolean
-  pendingApproval?: boolean
-}) {
-  const toggle = useCallback(() => onToggle(id), [id, onToggle])
-  return <AgentActivityDrawer activityView={activitiesFrom(progress)} rawProgress={progress}
-    isOpen={isOpen} onToggle={toggle} isHistorical={historical} pendingApproval={pendingApproval} />
-})

package/src/renderer/shared/components/ReviewHistory.tsx

@@ -1,42 +0,0 @@
-import { useEffect, useRef } from 'react'
-import type { WorkspaceHistoryEntry } from '../types'
-
-export function undoDescription(entry: WorkspaceHistoryEntry) {
-  switch (entry.kind) {
-    case 'edit': return entry.backup ? 'Restore the saved content from before this edit.' : 'Move the file created by this edit to Trash.'
-    case 'create': return 'Move this created file or folder to Trash.'
-    case 'trash': return 'Restore this file or folder to its original location.'
-    case 'move': return `Move ${entry.destination || entry.path} back to ${entry.path}.`
-    default: return entry.label
-  }
-}
-
-export function HistoryDetails({ entry }: { entry: WorkspaceHistoryEntry }) {
-  return <dl className="review-history-details">
-    <dt>File</dt><dd>{entry.path}</dd>
-    <dt>Action</dt><dd>{entry.label.replace(/^Undo /, '')}</dd>
-    {entry.destination && <><dt>Destination</dt><dd>{entry.destination}</dd></>}
-    <dt>Undo will</dt><dd>{undoDescription(entry)}</dd>
-  </dl>
-}
-
-export function UndoConfirmation({ entry, busy, error, onCancel, onConfirm }: {
-  entry: WorkspaceHistoryEntry; busy: boolean; error: string; onCancel: () => void; onConfirm: () => void
-}) {
-  const dialog = useRef<HTMLDialogElement>(null)
-  useEffect(() => {
-    const element = dialog.current
-    element?.showModal()
-    return () => element?.close()
-  }, [])
-  return <dialog ref={dialog} className="review-undo-dialog" aria-labelledby="review-undo-title" onCancel={event => { event.preventDefault(); if (!busy) onCancel() }}>
-    <h3 id="review-undo-title">Confirm Undo</h3>
-    <HistoryDetails entry={entry} />
-    <p>Undo is refused if the file has changed since this action or the destination is occupied.</p>
-    {error && <p role="alert">{error}</p>}
-    <div className="review-undo-actions">
-      <button type="button" autoFocus disabled={busy} onClick={onCancel}>Cancel</button>
-      <button type="button" disabled={busy} onClick={onConfirm}>{busy ? 'Undoing…' : 'Confirm Undo'}</button>
-    </div>
-  </dialog>
-}

package/src/renderer/shared/components/RunSummaryDashboard.tsx

@@ -1,143 +0,0 @@
-import React from 'react'
-import type { RunTelemetrySummary } from '../types'
-import {
-  CheckCircle2,
-  XCircle,
-  RotateCcw,
-  Clock,
-  Coins,
-  Wrench,
-  FileCode2,
-  Activity,
-} from 'lucide-react'
-
-interface Props {
-  summary: RunTelemetrySummary
-  className?: string
-}
-
-export function RunSummaryDashboard({ summary, className = '' }: Props) {
-  const isSuccess = summary.outcome === 'SUCCESS'
-  const isRolledBack = summary.outcome === 'ROLLED_BACK'
-  const isFailed = summary.outcome === 'FAILED'
-
-  const formattedTokens =
-    summary.totalTokens >= 1000
-      ? `${(summary.totalTokens / 1000).toFixed(1)}k`
-      : summary.totalTokens.toString()
-
-  const badgeClass = isSuccess
-    ? 'run-summary-badge success'
-    : isRolledBack
-      ? 'run-summary-badge rollback'
-      : 'run-summary-badge failure'
-
-  return (
-    <div className={`run-summary-card ${className}`}>
-      {/* Header */}
-      <div className="run-summary-header">
-        <div className="run-summary-title">
-          <Activity size={16} aria-hidden="true" />
-          <span className="run-summary-heading"><strong>Run summary</strong><small title={`Run ${summary.runId}`}>#{summary.runId}</small></span>
-        </div>
-        <div>
-          <span className={badgeClass}>
-            {isSuccess && <CheckCircle2 style={{ width: '12px', height: '12px' }} />}
-            {isRolledBack && <RotateCcw style={{ width: '12px', height: '12px' }} />}
-            {isFailed && <XCircle style={{ width: '12px', height: '12px' }} />}
-            <span>{isSuccess ? 'Success' : isRolledBack ? 'Rolled Back' : 'Failure'}</span>
-          </span>
-        </div>
-      </div>
-
-      {/* KPI Grid */}
-      <div className="run-kpi-grid">
-        <div className="run-kpi-box">
-          <div className="run-kpi-label">
-            <Clock style={{ width: '12px', height: '12px' }} />
-            <span>Duration</span>
-          </div>
-          <div className="run-kpi-value">{summary.durationSecs.toFixed(1)}s</div>
-        </div>
-
-        <div className="run-kpi-box">
-          <div className="run-kpi-label">
-            <Coins style={{ width: '12px', height: '12px' }} />
-            <span>Tokens</span>
-          </div>
-          <div className="run-kpi-value">{formattedTokens}</div>
-        </div>
-
-        <div className="run-kpi-box">
-          <div className="run-kpi-label">
-            <Wrench style={{ width: '12px', height: '12px' }} />
-            <span>Tools</span>
-          </div>
-          <div className="run-kpi-value">
-            {summary.toolCallsCount}
-            {summary.retriesCount > 0 && <span className="run-kpi-subtext"> · {summary.retriesCount} retried</span>}
-          </div>
-        </div>
-
-        <div className="run-kpi-box">
-          <div className="run-kpi-label">
-            <FileCode2 style={{ width: '12px', height: '12px' }} />
-            <span>Files</span>
-          </div>
-          <div className="run-kpi-value">
-            {summary.filesCreated && summary.filesCreated.length > 0 && summary.filesChanged.length - summary.filesCreated.length > 0 ? (
-              <>
-                {summary.filesCreated.length} <span className="run-kpi-subtext">created</span>, {summary.filesChanged.length - summary.filesCreated.length} <span className="run-kpi-subtext">modified</span>
-              </>
-            ) : summary.filesCreated && summary.filesCreated.length > 0 ? (
-              <>
-                {summary.filesCreated.length}{' '}
-                <span className="run-kpi-subtext">created</span>
-              </>
-            ) : summary.filesChanged.length > 0 ? (
-              <>
-                {summary.filesChanged.length}{' '}
-                <span className="run-kpi-subtext">modified</span>
-              </>
-            ) : <>0 <span className="run-kpi-subtext">files</span></>}
-          </div>
-        </div>
-      </div>
-
-      {/* Tool call timeline */}
-      {summary.toolTimeline && summary.toolTimeline.length > 0 && (
-        <div className="run-timeline-container">
-          <div className="run-timeline-title">Tool call timeline</div>
-          <div className="run-timeline-list">
-            {summary.toolTimeline.map((item, idx) => (
-              <div key={idx} className="run-timeline-item">
-                <div className="run-timeline-left">
-                  <span className="run-timeline-step">
-                    {String(item.step).padStart(2, '0')}s
-                  </span>
-                  {!item.success ? (
-                    <XCircle style={{ width: '14px', height: '14px', color: 'var(--status-error, #ef4444)', flexShrink: 0 }} />
-                  ) : item.retried ? (
-                    <RotateCcw style={{ width: '14px', height: '14px', color: '#f59e0b', flexShrink: 0 }} />
-                  ) : (
-                    <CheckCircle2 style={{ width: '14px', height: '14px', color: 'var(--status-speaking, #22c55e)', flexShrink: 0 }} />
-                  )}
-                  <span className="run-timeline-action">{item.action}</span>
-                  {item.target && <span className="run-timeline-target">[{item.target}]</span>}
-                </div>
-                <div>
-                  {!item.success && (
-                    <span className="run-timeline-note-failed">(failed)</span>
-                  )}
-                  {item.retried && item.success && (
-                    <span className="run-timeline-note-retry">(self-corrected)</span>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/renderer/shared/components/SelectField.tsx

@@ -1,38 +0,0 @@
-import { Children, Fragment, isValidElement, type CSSProperties, type ReactNode } from 'react'
-import GlideSelect, { type GlideOption } from './GlideSelect'
-
-interface SelectFieldProps {
-  children: ReactNode
-  value?: string | number
-  defaultValue?: string | number
-  onValueChange?: (value: string) => void
-  disabled?: boolean
-  id?: string
-  'aria-label'?: string
-  'aria-labelledby'?: string
-  className?: string
-  title?: string
-  style?: CSSProperties
-  fullWidth?: boolean
-}
-
-function optionsFromChildren(children: ReactNode): GlideOption[] {
-  return Children.toArray(children).flatMap(child => {
-    if (!isValidElement<{ value?: string | number; children?: ReactNode }>(child)) return []
-    if (child.type === Fragment) return optionsFromChildren(child.props.children)
-    if (child.type !== 'option') return []
-    const label = Children.toArray(child.props.children).join('')
-    return [{ value: String(child.props.value ?? label), label }]
-  })
-}
-
-/** Shared field adapter keeps Mint's dynamic option lists and value callbacks intact. */
-export default function SelectField({ children, value, defaultValue, onValueChange, disabled,
-  id, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, className, title, style, fullWidth = true }: SelectFieldProps) {
-  return <GlideSelect options={optionsFromChildren(children)}
-    value={value === undefined ? undefined : String(value)}
-    defaultValue={defaultValue === undefined ? undefined : String(defaultValue)}
-    onChange={onValueChange} disabled={disabled} id={id} ariaLabel={ariaLabel ?? title ?? 'Select'} labelledBy={labelledBy}
-    className={className ? `mint-select-field ${className}` : 'mint-select-field'} title={title}
-    style={style} fullWidth={fullWidth} />
-}

package/src/renderer/shared/components/SessionSources.tsx

@@ -1,48 +0,0 @@
-import { useState } from 'react'
-import { File, FileText, Globe, Image, Paperclip, Video } from 'lucide-react'
-import type { SessionSource } from '../utils/sessionSources'
-import '../css/session-sources.css'
-
-function SourceIcon({ source }: { source: SessionSource }) {
-  const src = source.kind === 'web' ? source.faviconUrl : source.thumbnailDataUri
-  const [failedSrc, setFailedSrc] = useState<string>()
-  const Icon = source.kind === 'web' ? Globe : source.kind === 'image' ? Image : source.kind === 'video' ? Video : /\.(pdf|md|txt|docx?)$/i.test(source.name) ? FileText : File
-  return <span className={`session-source-icon is-${source.kind}`}>
-    {src && src !== failedSrc ? <img src={src} alt="" loading="lazy" referrerPolicy="no-referrer" onError={() => setFailedSrc(src)} /> : <Icon size={15} aria-hidden="true" />}
-  </span>
-}
-
-export default function SessionSources({ sources, loading, error, onRetry, onOpenLibrary }: {
-  sources: SessionSource[]; loading: boolean; error: string; onRetry: () => void; onOpenLibrary: (url: string) => void
-}) {
-  const [expanded, setExpanded] = useState(false)
-  const groups = [
-    { label: 'Images', kinds: ['image'] },
-    { label: 'Files', kinds: ['file', 'video'] },
-    { label: 'Web searches', kinds: ['web'] },
-  ]
-  const initialSources = groups.flatMap(group => sources.filter(source => group.kinds.includes(source.kind)).slice(0, 2))
-  const shown = expanded ? sources : initialSources
-  return <section className="session-sources" aria-label="Session sources">
-    <header className="session-sources-heading"><span><Paperclip size={13} aria-hidden="true" />Sources <small>This session</small></span><span>{sources.length}</span></header>
-    {loading && <p className="session-sources-empty" role="status">Loading session sources…</p>}
-    {error && <div className="session-sources-error" role="status"><span>Could not load saved sources.</span><button type="button" onClick={onRetry}>Retry</button></div>}
-    {!loading && !error && sources.length === 0 && <p className="session-sources-empty">Images and files you send, and pages found by web search, will appear here.</p>}
-    {groups.map(group => {
-      const items = shown.filter(source => group.kinds.includes(source.kind))
-      if (!items.length) return null
-      return <div className="session-sources-group" key={group.label}>
-        <h3>{group.label}</h3>
-        <ul>{items.map(source => {
-          const content = <><SourceIcon source={source} /><span className="session-source-copy"><strong>{source.name}</strong><small>{source.detail}</small></span></>
-          return <li key={source.id}>{source.url ? <a className="session-source-row" href={source.url} target={source.kind === 'web' ? '_blank' : undefined} rel={source.kind === 'web' ? 'noopener noreferrer' : undefined} title={source.url} onClick={event => {
-            if (source.kind === 'web' || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
-            event.preventDefault()
-            onOpenLibrary(source.url)
-          }}>{content}</a> : <div className="session-source-row" title={source.name}>{content}</div>}</li>
-        })}</ul>
-      </div>
-    })}
-    {sources.length > initialSources.length && <button type="button" className="session-sources-more" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{expanded ? 'Show less' : `Show ${sources.length - shown.length} more sources`}</button>}
-  </section>
-}