nastechai-desktop 18.1.0

package/src/lib/markdown-preprocess.ts

@@ -0,0 +1,386 @@
+import { isLikelyProseFence, sanitizeLanguageTag } from '@/lib/markdown-code'
+import { stripPreviewTargets } from '@/lib/preview-targets'
+
+const REASONING_BLOCK_RE = /<(think|thinking|reasoning|scratchpad|analysis)>[\s\S]*?<\/\1>\s*/gi
+const PREVIEW_MARKER_RE = /\[Preview:[^\]]+\]\(#preview[:/][^)]+\)/gi
+
+const FENCE_LINE_RE = /^([ \t]*)(`{3,}|~{3,})([^\n]*)$/
+const EMPTY_FENCE_BLOCK_RE = /(^|\n)[ \t]*(?:`{3,}|~{3,})[^\n]*\n[ \t]*(?:`{3,}|~{3,})[ \t]*(?=\n|$)/g
+const CODE_FENCE_SPLIT_RE = /((?:```|~~~)[\s\S]*?(?:```|~~~))/g
+const INLINE_CODE_SPLIT_RE = /(`[^`\n]+`)/g
+// Bare-URL autolink matcher. The character classes EXCLUDE `*` so a URL that
+// abuts markdown emphasis with no separating space (e.g. `**label: https://x**`,
+// a very common LLM pattern) doesn't swallow the trailing `**` into the href.
+// `*` is never meaningful in a real URL path, and GFM's own autolink extension
+// likewise strips trailing emphasis/punctuation — so dropping it here is safe
+// and keeps the emphasis run intact. Other trailing punctuation is still peeled
+// off by the final `[^\s<>"'`*.,;:!?]` class.
+const RAW_URL_RE = /https?:\/\/[^\s<>"'`*]+[^\s<>"'`*.,;:!?]/g
+const LOCAL_PREVIEW_URL_RE = /(^|\s)https?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\])(?::\d+)?\/?[^\s<>"'`]*/gi
+const LOCAL_PREVIEW_ONLY_RE = /^https?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\])(?::\d+)?\/?$/i
+const URL_ONLY_LINE_RE = /^\s*https?:\/\/\S+\s*$/i
+const CITATION_MARKER_RE = /(?<=[\p{L}\p{N})\].,!?:;"'”’])\[(?:\d+(?:\s*,\s*\d+)*)\](?!\()/gu
+
+/**
+ * Returns true when `body` contains a line that's exactly `marker` (modulo
+ * leading/trailing horizontal whitespace) — i.e. an unambiguous close fence
+ * for an opening fence with the same marker.
+ *
+ * Implemented with string comparisons (not RegExp) so that input-derived
+ * `marker` values can never bleed into a regex pattern. This matters for
+ * CodeQL's `js/incomplete-hostname-regexp` dataflow, which would otherwise
+ * trace test-fixture URLs from the input through `marker` into the regex
+ * source, even though `marker` is captured by `(`{3,}|~{3,})` and can only
+ * ever be backticks or tildes.
+ */
+function hasCloseFenceLine(body: string, marker: string): boolean {
+  const lines = body.split('\n')
+
+  // Original regex required `\n` immediately before the close fence, so the
+  // first line of `body` (which has no preceding newline within `body`)
+  // cannot itself be the close fence.
+  for (let i = 1; i < lines.length; i += 1) {
+    const line = lines[i]
+    let lo = 0
+    let hi = line.length
+
+    while (lo < hi && (line[lo] === ' ' || line[lo] === '\t')) {
+      lo += 1
+    }
+
+    while (hi > lo && (line[hi - 1] === ' ' || line[hi - 1] === '\t')) {
+      hi -= 1
+    }
+
+    if (line.slice(lo, hi) === marker) {
+      return true
+    }
+  }
+
+  return false
+}
+
+function scrubBacktickNoise(text: string): string {
+  const balancedFenceRe = /(^|\n)([ \t]*)(`{3,}|~{3,})([^\n]*)\n([\s\S]*?)\n[ \t]*\3[ \t]*(?=\n|$)/g
+  const protectedRanges: { end: number; start: number }[] = []
+  let match: RegExpExecArray | null
+
+  while ((match = balancedFenceRe.exec(text)) !== null) {
+    const start = match.index + match[1].length
+
+    protectedRanges.push({ end: balancedFenceRe.lastIndex, start })
+  }
+
+  const danglingCodeFenceRe = /(^|\n)[ \t]*(`{3,}|~{3,})([a-z0-9][a-z0-9+#-]{0,15})[ \t]*\n([\s\S]*)$/gi
+
+  while ((match = danglingCodeFenceRe.exec(text)) !== null) {
+    const start = match.index + match[1].length
+    const marker = match[2] || '```'
+    const info = match[3] || ''
+    const body = match[4] || ''
+
+    if (!hasCloseFenceLine(body, marker) && sanitizeLanguageTag(info) && !isLikelyProseFence(info, body)) {
+      protectedRanges.push({ end: text.length, start })
+
+      break
+    }
+  }
+
+  protectedRanges.sort((a, b) => a.start - b.start)
+
+  const fenceNoiseRe = /`{3,}/g
+  let out = ''
+  let cursor = 0
+
+  for (const range of protectedRanges) {
+    out += text.slice(cursor, range.start).replace(fenceNoiseRe, '')
+    out += text.slice(range.start, range.end)
+    cursor = range.end
+  }
+
+  out += text.slice(cursor).replace(fenceNoiseRe, '')
+
+  for (let pass = 0; pass < 2; pass += 1) {
+    // Match EXACTLY 2 backticks (not part of a longer run) on each side.
+    // Without the lookbehind/lookahead, two adjacent triple-backtick
+    // fences with only whitespace between them get spliced together —
+    // e.g. ```bash\n...\n```\n\n```latex matches the regex's
+    // last-2-of-bash-close + \n\n + first-2-of-latex-open and the
+    // surrounding fence markers collapse into a single longer block,
+    // which the markdown parser then treats as ONE giant code block.
+    out = out.replace(/(?<!`)``(?!`)\s*(?<!`)``(?!`)/g, '')
+    out = out.replace(/(^|[^`])``(?=\s|[.,;:!?)\]'"\u2014\u2013-]|$)/g, '$1')
+  }
+
+  return out
+}
+
+function stripEmptyFenceBlocks(text: string): string {
+  return text.replace(EMPTY_FENCE_BLOCK_RE, '$1')
+}
+
+function isUrlOnlyBlock(lines: string[]): boolean {
+  const nonEmpty = lines.filter(line => line.trim())
+
+  return nonEmpty.length > 0 && nonEmpty.every(line => URL_ONLY_LINE_RE.test(line))
+}
+
+function autoLinkRawUrls(text: string): string {
+  return text.replace(RAW_URL_RE, (url: string, index: number) => {
+    const previous = text[index - 1] || ''
+    const beforePrevious = text[index - 2] || ''
+
+    if (previous === '<' || (beforePrevious === ']' && previous === '(')) {
+      return url
+    }
+
+    return `<${url}>`
+  })
+}
+
+function normalizeVisibleProse(text: string): string {
+  return text
+    .split(INLINE_CODE_SPLIT_RE)
+    .map(part =>
+      part.startsWith('`')
+        ? part
+        : autoLinkRawUrls(
+            part.replace(/`{3,}/g, '').replace(LOCAL_PREVIEW_URL_RE, '$1').replace(CITATION_MARKER_RE, '')
+          )
+    )
+    .join('')
+}
+
+function pushProseFence(out: string[], indent: string, info: string, lines: string[]) {
+  if (info) {
+    out.push(`${indent}${info}`.trimEnd())
+  }
+
+  out.push(...lines)
+}
+
+function findClosingFence(lines: string[], start: number, marker: string): number {
+  for (let cursor = start + 1; cursor < lines.length; cursor += 1) {
+    const closeMatch = (lines[cursor] || '').match(FENCE_LINE_RE)
+
+    if (!closeMatch) {
+      continue
+    }
+
+    const closeMarker = closeMatch[2] || ''
+    const closeInfo = (closeMatch[3] || '').trim()
+
+    if (!closeInfo && closeMarker[0] === marker[0] && closeMarker.length >= marker.length) {
+      return cursor
+    }
+  }
+
+  return -1
+}
+
+// Languages that should be routed to the math (KaTeX) renderer instead of
+// being shown as a syntax-highlighted code block.
+//
+// We deliberately recognize ONLY `math` here, not `latex` or `tex`.
+// Reasoning: GitHub-style markdown uses ` ```math ` to mean "render as
+// math" and ` ```latex `/` ```tex ` to mean "show LaTeX/TeX source code"
+// (syntax highlighted). Conflating the two breaks code blocks where a
+// user is *discussing* LaTeX rather than embedding it (e.g.,
+// ```latex\n\begin{equation}\n  E = mc^2\n\end{equation}``` shown as a
+// teaching example). Anyone who wants math rendered should use ```math.
+const MATH_FENCE_LANGUAGES = new Set(['math'])
+
+function isMathFence(language: string): boolean {
+  return MATH_FENCE_LANGUAGES.has(language.toLowerCase())
+}
+
+function normalizeFenceBlocks(text: string): string {
+  const sourceLines = text.split('\n')
+  const out: string[] = []
+  let index = 0
+
+  while (index < sourceLines.length) {
+    const line = sourceLines[index] || ''
+    const match = line.match(FENCE_LINE_RE)
+
+    if (!match) {
+      out.push(line)
+      index += 1
+
+      continue
+    }
+
+    const indent = match[1] || ''
+    const marker = match[2] || '```'
+    const infoRaw = (match[3] || '').trim()
+    const languageToken = infoRaw.split(/\s+/, 1)[0] || ''
+    const language = sanitizeLanguageTag(languageToken)
+    const openerValid = !infoRaw || Boolean(language)
+
+    if (!openerValid) {
+      out.push(`${indent}${infoRaw}`.trimEnd())
+      index += 1
+
+      continue
+    }
+
+    const closeIndex = findClosingFence(sourceLines, index, marker)
+    const bodyLines = sourceLines.slice(index + 1, closeIndex === -1 ? sourceLines.length : closeIndex)
+    const body = bodyLines.join('\n')
+
+    if (closeIndex !== -1 && !body.trim()) {
+      index = closeIndex + 1
+
+      continue
+    }
+
+    if (closeIndex !== -1 && LOCAL_PREVIEW_ONLY_RE.test(body.trim())) {
+      index = closeIndex + 1
+
+      continue
+    }
+
+    if (closeIndex !== -1 && isUrlOnlyBlock(bodyLines)) {
+      out.push(...bodyLines)
+      index = closeIndex + 1
+
+      continue
+    }
+
+    if (closeIndex === -1) {
+      if (!body.trim()) {
+        index += 1
+
+        continue
+      }
+
+      if (isLikelyProseFence(infoRaw, body)) {
+        pushProseFence(out, indent, infoRaw, bodyLines)
+      } else if (isMathFence(language)) {
+        // Streaming math fence — rewrite the language tag to "math".
+        // remark-math + rehype-katex pick up ```math fenced blocks via
+        // the language-math class on the resulting <code> element. We
+        // keep the fence intact (instead of converting to $$..$$) so
+        // any literal `$$` characters in the body don't collide with
+        // an outer math wrapper. No close emitted yet — streaming.
+        out.push(`${indent}${marker}math`)
+        out.push(...bodyLines)
+      } else {
+        out.push(`${indent}${marker}${language}`)
+        out.push(...bodyLines)
+      }
+
+      break
+    }
+
+    if (isLikelyProseFence(infoRaw, body)) {
+      pushProseFence(out, indent, infoRaw, bodyLines)
+      index = closeIndex + 1
+
+      continue
+    }
+
+    if (isMathFence(language)) {
+      // Closed math fence — rewrite the language tag to "math" so
+      // rehype-katex's language-math class detection picks it up.
+      // Body stays untouched (no $$..$$ rewrite) so authors can write
+      // arbitrary LaTeX including `$$display$$` markers without them
+      // colliding with our wrapper. Without this rewrite the block
+      // would render as a syntax-highlighted "latex" code listing.
+      out.push(`${indent}${marker}math`)
+      out.push(...bodyLines)
+      out.push(`${indent}${marker}`)
+      index = closeIndex + 1
+
+      continue
+    }
+
+    out.push(`${indent}${marker}${language}`)
+    out.push(...bodyLines)
+    out.push(`${indent}${marker}`)
+    index = closeIndex + 1
+  }
+
+  return out.join('\n')
+}
+
+// Convert LaTeX bracket delimiters to remark-math's dollar-sign syntax.
+// Models often emit `\(...\)` for inline math and `\[...\]` for display
+// math (the standard LaTeX convention) instead of `$...$` / `$$...$$`.
+// remark-math only natively recognizes the dollar form, so we rewrite at
+// preprocess time. Done with simple non-greedy matches keyed on the
+// escaped-bracket sequences — these are rare enough in non-math content
+// (you'd have to write a literal `\(` followed eventually by a literal
+// `\)` with NO interleaving newline-paragraph-break) that false positives
+// are extremely unlikely.
+const LATEX_INLINE_RE = /\\\(([^\n]+?)\\\)/g
+const LATEX_DISPLAY_RE = /\\\[([\s\S]+?)\\\]/g
+
+function rewriteLatexBracketDelimiters(text: string): string {
+  return text
+    .replace(LATEX_INLINE_RE, (_, body: string) => `$${body}$`)
+    .replace(LATEX_DISPLAY_RE, (_, body: string) => `$$${body}$$`)
+}
+
+// Escape `$<digit>` patterns so they don't get eaten as math delimiters.
+// Models commonly write currency amounts ($5, $19.99, $1,299) in prose.
+// With `singleDollarTextMath: true`, remark-math is greedy and matches
+// EVERY pair of `$`s — including the open of `$5` to the next `$10`,
+// rendering "5 in my pocket and you have " as italicized math text.
+// The de-facto convention across math-supporting LLM UIs is to treat
+// `$` followed by a digit as currency rather than math, since math
+// expressions almost always start with a letter or `\command`. Trade-
+// off: a math expression like `$5x = 10$` would have its leading 5
+// escaped — annoying but rare. The escape `\$` survives to render as
+// a literal `$` in the final output.
+const CURRENCY_DOLLAR_RE = /(^|[^\\])\$(?=\d)/g
+
+function escapeCurrencyDollars(text: string): string {
+  return text.replace(CURRENCY_DOLLAR_RE, '$1\\$')
+}
+
+export function preprocessMarkdown(text: string): string {
+  const cleaned = text.replace(REASONING_BLOCK_RE, '').replace(PREVIEW_MARKER_RE, '')
+  const scrubbed = scrubBacktickNoise(cleaned)
+  const normalizedFences = normalizeFenceBlocks(scrubbed)
+  const strippedEmptyFences = stripEmptyFenceBlocks(normalizedFences)
+
+  return strippedEmptyFences
+    .split(CODE_FENCE_SPLIT_RE)
+    .map(part => {
+      // Fence blocks pass through untouched.
+      if (/^(?:```|~~~)/.test(part)) {
+        return part
+      }
+
+      // Whitespace-only segments (e.g. the `\n\n` between two adjacent
+      // fences) must NOT go through stripPreviewTargets — its internal
+      // .trim() would collapse them to '' and glue the surrounding
+      // fences together, producing things like ``````math which the
+      // markdown parser then reads as a single 6-backtick block.
+      if (!part.trim()) {
+        return part
+      }
+
+      // Preserve leading/trailing whitespace around the prose body so
+      // that fence-prose-fence sequences keep their blank-line gaps.
+      // stripPreviewTargets internally calls .trim() on its result for
+      // the benefit of its other (single-segment) callers; here we're
+      // operating on a SEGMENT of a larger document where outer
+      // whitespace is structural and must survive.
+      const leading = part.match(/^\s*/)?.[0] ?? ''
+      const trailing = part.match(/\s*$/)?.[0] ?? ''
+
+      // rewriteLatexBracketDelimiters runs only on prose segments so
+      // we don't accidentally touch `\(` inside a code block.
+      // escapeCurrencyDollars likewise only runs on prose, so legit
+      // `$5` literals inside fenced code stay intact.
+      const transformed = normalizeVisibleProse(
+        stripPreviewTargets(rewriteLatexBracketDelimiters(escapeCurrencyDollars(part)))
+      )
+
+      return leading + transformed + trailing
+    })
+    .join('')
+    .replace(/[ \t]+\n/g, '\n')
+}

package/src/lib/media.remote.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { $connection } from '@/store/session'
+
+import { filePathFromMediaPath, gatewayMediaDataUrl, isRemoteGateway } from './media'
+
+describe('isRemoteGateway', () => {
+  afterEach(() => {
+    $connection.set(null)
+  })
+
+  it('is false with no connection', () => {
+    $connection.set(null)
+    expect(isRemoteGateway()).toBe(false)
+  })
+
+  it('is false in local mode', () => {
+    $connection.set({ mode: 'local' } as never)
+    expect(isRemoteGateway()).toBe(false)
+  })
+
+  it('is true in remote mode', () => {
+    $connection.set({ mode: 'remote' } as never)
+    expect(isRemoteGateway()).toBe(true)
+  })
+})
+
+describe('filePathFromMediaPath', () => {
+  it('passes through a plain path', () => {
+    expect(filePathFromMediaPath('/home/u/.nastech/images/a.png')).toBe('/home/u/.nastech/images/a.png')
+  })
+
+  it('decodes a file:// URL with encoded characters', () => {
+    expect(filePathFromMediaPath('file:///tmp/a%20b.png')).toBe('/tmp/a b.png')
+  })
+})
+
+describe('gatewayMediaDataUrl', () => {
+  const api = vi.fn(async () => ({ data_url: 'data:image/png;base64,ZHVtbXk=' }))
+
+  beforeEach(() => {
+    api.mockClear()
+    vi.stubGlobal('window', { NASTECHDesktop: { api } })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('requests the encoded gateway path and returns the data URL', async () => {
+    const url = await gatewayMediaDataUrl('/home/u/.nastech/images/a b.png')
+
+    expect(url).toBe('data:image/png;base64,ZHVtbXk=')
+    expect(api).toHaveBeenCalledWith({
+      path: '/api/media?path=%2Fhome%2Fu%2F.nastech%2Fimages%2Fa%20b.png'
+    })
+  })
+})

package/src/lib/media.ts

@@ -0,0 +1,111 @@
+import { $connection } from '@/store/session'
+
+export type MediaKind = 'audio' | 'image' | 'video' | 'file'
+
+interface MediaInfo {
+  kind: MediaKind
+  mime: string
+}
+
+const MEDIA_BY_EXT: Record<string, MediaInfo> = {
+  avi: { kind: 'video', mime: 'video/x-msvideo' },
+  bmp: { kind: 'image', mime: 'image/bmp' },
+  flac: { kind: 'audio', mime: 'audio/flac' },
+  gif: { kind: 'image', mime: 'image/gif' },
+  jpeg: { kind: 'image', mime: 'image/jpeg' },
+  jpg: { kind: 'image', mime: 'image/jpeg' },
+  m4a: { kind: 'audio', mime: 'audio/mp4' },
+  mkv: { kind: 'video', mime: 'video/x-matroska' },
+  mov: { kind: 'video', mime: 'video/quicktime' },
+  mp3: { kind: 'audio', mime: 'audio/mpeg' },
+  mp4: { kind: 'video', mime: 'video/mp4' },
+  ogg: { kind: 'audio', mime: 'audio/ogg' },
+  opus: { kind: 'audio', mime: 'audio/ogg; codecs=opus' },
+  png: { kind: 'image', mime: 'image/png' },
+  svg: { kind: 'image', mime: 'image/svg+xml' },
+  wav: { kind: 'audio', mime: 'audio/wav' },
+  webm: { kind: 'video', mime: 'video/webm' },
+  webp: { kind: 'image', mime: 'image/webp' }
+}
+
+function mediaInfo(path: string): MediaInfo | undefined {
+  const ext = path.split(/[?#]/, 1)[0]?.split('.').pop()?.toLowerCase()
+
+  return ext ? MEDIA_BY_EXT[ext] : undefined
+}
+
+export function mediaKind(path: string): MediaKind {
+  return mediaInfo(path)?.kind ?? 'file'
+}
+
+export function mediaMime(path: string): string {
+  return mediaInfo(path)?.mime ?? 'application/octet-stream'
+}
+
+export function mediaName(path: string): string {
+  try {
+    const url = new URL(path)
+
+    return url.pathname.split('/').filter(Boolean).pop() || path
+  } catch {
+    return path.split(/[\\/]/).filter(Boolean).pop() || path
+  }
+}
+
+export function mediaMarkdownHref(path: string): string {
+  return `#media:${encodeURIComponent(path)}`
+}
+
+export function mediaExternalUrl(path: string): string {
+  return /^(?:https?|file):/i.test(path) ? path : `file://${path}`
+}
+
+// Custom Electron scheme (registered in electron/main.cjs) that streams a local
+// file with Range support. Used for audio/video so playback bypasses the data
+// URL size cap and supports seeking. `path` may be a plain path or `file://…`.
+export function mediaStreamUrl(path: string): string {
+  return `NASTECH-media://stream/${encodeURIComponent(filePathFromMediaPath(path))}`
+}
+
+export function mediaPathFromMarkdownHref(href?: string): string | null {
+  if (!href?.startsWith('#media:')) {
+    return null
+  }
+
+  try {
+    return decodeURIComponent(href.slice('#media:'.length))
+  } catch {
+    return null
+  }
+}
+
+export function filePathFromMediaPath(path: string): string {
+  if (!path.startsWith('file:')) {
+    return path
+  }
+
+  try {
+    return decodeURIComponent(new URL(path).pathname)
+  } catch {
+    return path.replace(/^file:\/\//, '')
+  }
+}
+
+export function mediaDisplayLabel(path: string): string {
+  const escaped = mediaName(path).replace(/[[\]\\]/g, '\\$&')
+  const kind = mediaKind(path)
+
+  return `${kind[0].toUpperCase()}${kind.slice(1)}: ${escaped}`
+}
+
+export function isRemoteGateway(): boolean {
+  return $connection.get()?.mode === 'remote'
+}
+
+export async function gatewayMediaDataUrl(path: string): Promise<string> {
+  const result = await window.NASTECHDesktop.api<{ data_url: string }>({
+    path: `/api/media?path=${encodeURIComponent(path)}`
+  })
+
+  return result.data_url
+}

package/src/lib/model-status-label.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { displayModelName, formatModelStatusLabel, reasoningEffortLabel } from './model-status-label'
+
+describe('model-status-label', () => {
+  it('formats display names consistently', () => {
+    expect(displayModelName('anthropic/claude-opus-4.8-fast')).toBe('Opus 4.8')
+    expect(displayModelName('openai/gpt-5.5')).toBe('GPT-5.5')
+  })
+
+  it('maps reasoning effort to compact labels', () => {
+    expect(reasoningEffortLabel('high')).toBe('High')
+    expect(reasoningEffortLabel('xhigh')).toBe('Max')
+    expect(reasoningEffortLabel('')).toBe('')
+  })
+
+  it('appends fast + effort session state to the status label', () => {
+    expect(formatModelStatusLabel('openai/gpt-5.5', { fastMode: true, reasoningEffort: 'high' })).toBe(
+      'GPT-5.5 · Fast High'
+    )
+  })
+
+  it('always surfaces the effort (default medium) so the level is visible', () => {
+    expect(formatModelStatusLabel('openai/gpt-5.5', { reasoningEffort: 'medium' })).toBe('GPT-5.5 · Med')
+    expect(formatModelStatusLabel('openai/gpt-5.5')).toBe('GPT-5.5 · Med')
+  })
+
+  it('returns just the placeholder name when there is no model', () => {
+    expect(formatModelStatusLabel('')).toBe('No model')
+  })
+})

package/src/lib/model-status-label.ts

@@ -0,0 +1,103 @@
+const REASONING_LABELS: Record<string, string> = {
+  none: 'Off',
+  minimal: 'Min',
+  low: 'Low',
+  medium: 'Med',
+  high: 'High',
+  xhigh: 'Max'
+}
+
+export function reasoningEffortLabel(effort: string): string {
+  const key = effort.trim().toLowerCase()
+
+  if (!key) {
+    return ''
+  }
+
+  return REASONING_LABELS[key] ?? effort
+}
+
+/** Strip provider prefix and normalize for display. */
+export function modelBaseId(model: string): string {
+  const trimmed = model.trim()
+  const slash = trimmed.lastIndexOf('/')
+
+  return slash >= 0 ? trimmed.slice(slash + 1) : trimmed
+}
+
+// Trailing model-id variants that should render as a grayed tag beside the
+// name (e.g. "Opus 4.8" + "Fast") rather than collapsing two distinct ids to
+// the same display name.
+const VARIANT_TAGS: ReadonlyArray<readonly [RegExp, string]> = [
+  [/-fast$/i, 'Fast'],
+  [/-thinking$/i, 'Thinking'],
+  [/-preview$/i, 'Preview'],
+  [/-latest$/i, 'Latest']
+]
+
+const titleCase = (text: string): string => text.replace(/\b\w/g, char => char.toUpperCase()).trim()
+
+function prettifyBase(base: string): string {
+  if (/^claude-/i.test(base)) {
+    return titleCase(base.replace(/^claude-/i, '').replace(/-/g, ' '))
+  }
+
+  if (/^gpt-/i.test(base)) {
+    return base.replace(/^gpt-/i, 'GPT-')
+  }
+
+  if (/^gemini-/i.test(base)) {
+    return base.replace(/^gemini-/i, 'Gemini ').replace(/-/g, ' ')
+  }
+
+  return titleCase(base.replace(/-/g, ' '))
+}
+
+/** Split a model id into a clean display name plus an optional grayed variant
+ *  tag, so distinct ids (e.g. `…-4.8` vs `…-4.8-fast`) don't collapse. */
+export function modelDisplayParts(model: string): { name: string; tag: string } {
+  let base = modelBaseId(model)
+  let tag = ''
+
+  for (const [pattern, label] of VARIANT_TAGS) {
+    if (pattern.test(base)) {
+      tag = label
+      base = base.replace(pattern, '')
+
+      break
+    }
+  }
+
+  return { name: prettifyBase(base) || model.trim() || 'No model', tag }
+}
+
+/** Friendly one-line model name for menus and the status bar. */
+export function displayModelName(model: string): string {
+  return modelDisplayParts(model).name
+}
+
+/** Status bar trigger label — model name plus the live session state (effort/fast). */
+export function formatModelStatusLabel(
+  model: string,
+  options?: { fastMode?: boolean; reasoningEffort?: string }
+): string {
+  const name = displayModelName(model)
+
+  if (!model.trim()) {
+    return name
+  }
+
+  const parts: string[] = []
+
+  // Fast is shown when the speed=fast param is on (options.fastMode) OR the
+  // active model is a `…-fast` variant (fast via a separate model id).
+  if (options?.fastMode || /-fast$/i.test(modelBaseId(model))) {
+    parts.push('Fast')
+  }
+
+  // Always surface the effort (empty = NasTech default of medium) so the
+  // current reasoning level is visible at a glance, not just when non-default.
+  parts.push(reasoningEffortLabel(options?.reasoningEffort ?? '') || 'Med')
+
+  return `${name} · ${parts.join(' ')}`
+}

package/src/lib/mutable-ref.ts

@@ -0,0 +1,6 @@
+import type { MutableRefObject } from 'react'
+
+/** Imperative ref write — extracted so react-compiler doesn't flag hook-arg refs. */
+export function setMutableRef<T>(ref: MutableRefObject<T>, value: T) {
+  ref.current = value
+}