@followbin/dsh-selection 0.0.0-stage → 0.2.0

package/src/worker/placement.mjs

@@ -0,0 +1,58 @@
+// Where the overlay window goes. No native code: overlay.mjs supplies the selection, the page's card
+// layout and the screen, all in the same top-left-origin points.
+
+const SCREEN_INSET = 6
+// With selection bounds the anchor is the selection's bottom edge; with only the mouse position it is
+// roughly mid-line, so keep half a line more distance.
+const GAP_PRECISE = 8
+const GAP_MOUSE = 18
+
+/**
+ * The top edge of a card, how tall it may grow, and whether it should fill that height at once. The
+ * top edge stays put afterwards, so text being read never moves.
+ * - Below the selection when at least `minRoom` fits there; the card then grows down as it fills,
+ *   up to the bottom of the screen.
+ * - Otherwise right above the selection, at its full `minRoom` from the start (`fill`), so its
+ *   bottom edge meets the selection while the answer fills it from the top.
+ * @param {{ x: number, y: number, top: number, precise: boolean }} anchor
+ * @param {number} minRoom
+ * @param {{ x: number, y: number, width: number, height: number } | null} screen
+ * @returns {{ top: number, room: number, fill: boolean }}
+ */
+export function place(anchor, minRoom, screen) {
+  const gap = anchor.precise ? GAP_PRECISE : GAP_MOUSE
+  const below = anchor.y + gap
+  if (!screen) return { top: below, room: Infinity, fill: false }
+  const floor = screen.y + screen.height - SCREEN_INSET
+  if (floor - below >= minRoom) return { top: below, room: floor - below, fill: false }
+  const ceiling = anchor.top - gap
+  const top = Math.max(screen.y + SCREEN_INSET, ceiling - minRoom)
+  if (ceiling - top >= minRoom) return { top, room: ceiling - top, fill: true }
+  // A selection filling nearly the whole screen leaves no room above either; then cover it.
+  return { top, room: floor - top, fill: false }
+}
+
+/** How tall a card whose top edge is at `top` may grow before it reaches the bottom of the screen. */
+export function roomBelow(top, screen) {
+  return screen ? screen.y + screen.height - SCREEN_INSET - top : Infinity
+}
+
+/**
+ * Window bounds from a wanted top-left, with every card inside the screen: it moves left only as far
+ * as the right edge requires, and likewise up. When a card is taller than the screen, its top edge,
+ * with the panel's controls, is the part that stays visible.
+ * @param {{ origin: { x: number, y: number }, layout: { width: number, height: number, primary: object, hits: object[] }, screen: object | null }} options
+ */
+export function fitWindow({ origin, layout, screen }) {
+  let { x, y } = origin
+  if (screen) {
+    const cards = layout.hits.length ? layout.hits : [layout.primary]
+    const left = Math.min(...cards.map((card) => card.x))
+    const right = Math.max(...cards.map((card) => card.x + card.width))
+    const top = Math.min(...cards.map((card) => card.y))
+    const bottom = Math.max(...cards.map((card) => card.y + card.height))
+    x = Math.max(screen.x + SCREEN_INSET - left, Math.min(x, screen.x + screen.width - SCREEN_INSET - right))
+    y = Math.max(screen.y + SCREEN_INSET - top, Math.min(y, screen.y + screen.height - SCREEN_INSET - bottom))
+  }
+  return { x: Math.round(x), y: Math.round(y), width: layout.width, height: layout.height }
+}

package/src/worker/speech.mjs

@@ -0,0 +1,136 @@
+// Reads text aloud with the system voice: `say` on macOS, SAPI through PowerShell on Windows.
+// The text goes through stdin, so nothing in it is ever parsed as a command-line argument.
+import { execFile, spawn } from 'node:child_process'
+
+/**
+ * @param {{ log: (level: string, message: string, fields?: object) => void, onChange: (speaking: boolean) => void }} options
+ */
+export function createSpeech({ log, onChange }) {
+  let current = null
+  let voices = null
+  // Bumped on every start and stop so a slow voice lookup cannot resurrect a cancelled request.
+  let generation = 0
+
+  async function macVoiceFor(text) {
+    voices ??= await listMacVoices().catch((error) => {
+      log('warn', 'listing voices failed', { error: error.message })
+      return []
+    })
+    return pickVoice(voices, localeOf(text))
+  }
+
+  async function speak(text) {
+    stop()
+    const token = ++generation
+    const args = process.platform === 'darwin' ? await macArgs(text) : []
+    if (token !== generation) return
+    const process_ = process.platform === 'darwin'
+      ? spawn('say', [...args, '-f', '-'], { stdio: ['pipe', 'ignore', 'pipe'] })
+      // stdin would otherwise be decoded with the OEM code page and garble anything but ASCII.
+      : spawn('powershell.exe', ['-NoProfile', '-NonInteractive', '-Command',
+        '[Console]::InputEncoding = [System.Text.Encoding]::UTF8; Add-Type -AssemblyName System.Speech; '
+        + '$s = New-Object System.Speech.Synthesis.SpeechSynthesizer; $s.Speak([Console]::In.ReadToEnd())'],
+        { stdio: ['pipe', 'ignore', 'pipe'], windowsHide: true })
+    current = process_
+    onChange(true)
+    process_.on('error', (error) => log('warn', 'speech failed to start', { error: error.message }))
+    process_.on('exit', () => {
+      if (current === process_) {
+        current = null
+        onChange(false)
+      }
+    })
+    // Stopping before the voice has read all of stdin closes the pipe; EPIPE is expected then.
+    process_.stdin.on('error', () => {})
+    process_.stdin.end(text)
+  }
+
+  async function macArgs(text) {
+    const voice = await macVoiceFor(text)
+    return voice ? ['-v', voice] : []
+  }
+
+  function stop() {
+    generation += 1
+    if (!current) return
+    const process_ = current
+    current = null
+    process_.kill()
+    onChange(false)
+  }
+
+  return {
+    /** Starts reading, or stops if something is already being read. */
+    toggle(text) {
+      if (current) stop()
+      else void speak(text)
+    },
+    stop,
+    get speaking() { return current !== null },
+  }
+}
+
+function listMacVoices() {
+  return new Promise((resolve, reject) => {
+    execFile('say', ['-v', '?'], { encoding: 'utf8', timeout: 5000 }, (error, stdout) => {
+      if (error) return reject(error)
+      resolve(parseVoices(stdout))
+    })
+  })
+}
+
+// `say -v ?` lists voices alphabetically, so the first one for a language is often a novelty voice
+// (Albert, Bad News…). Well-known voices go first; novelty voices are never chosen.
+const PREFERRED_VOICES = {
+  en_US: ['Samantha', 'Alex', 'Ava', 'Allison', 'Tom'],
+  zh_CN: ['Tingting', 'Lili', 'Yu-shu'],
+  ja_JP: ['Kyoko', 'Otoya'],
+  ko_KR: ['Yuna', 'Sora'],
+  ru_RU: ['Milena', 'Yuri', 'Katya'],
+}
+const NOVELTY_VOICES = new Set([
+  'Albert', 'Bad News', 'Bahh', 'Bells', 'Boing', 'Bubbles', 'Cellos', 'Good News', 'Jester', 'Organ',
+  'Superstar', 'Trinoids', 'Whisper', 'Wobble', 'Zarvox',
+])
+
+/** @returns {string | undefined} the voice name to pass to `say -v`, or undefined for the system voice */
+export function pickVoice(voices, locale) {
+  const base = (name) => name.replace(/\s*\(.*\)$/, '')
+  for (const name of PREFERRED_VOICES[locale] ?? []) {
+    const voice = voices.find((candidate) => candidate.locale === locale && base(candidate.name) === name)
+    if (voice) return voice.name
+  }
+  const usable = (voice) => !NOVELTY_VOICES.has(base(voice.name))
+  return voices.find((voice) => voice.locale === locale && usable(voice))?.name
+    ?? voices.find((voice) => voice.locale.startsWith(locale.slice(0, 2)) && usable(voice))?.name
+}
+
+/** Reads the output of `say -v ?`: one voice per line, then its locale, then a sample sentence. */
+export function parseVoices(stdout) {
+  const voices = []
+  for (const line of stdout.split('\n')) {
+    const match = /^(.+?)\s+([a-z]{2,3}_[A-Z0-9]{2,3})\s+#/.exec(line)
+    if (match) voices.push({ name: match[1].trim(), locale: match[2] })
+  }
+  return voices
+}
+
+/** Picks a voice locale from the script the text is written in. */
+export function localeOf(text) {
+  let han = 0
+  let kana = 0
+  let hangul = 0
+  let cyrillic = 0
+  for (const char of text) {
+    const code = char.codePointAt(0)
+    if (code >= 0x3040 && code <= 0x30ff) kana += 1
+    else if ((code >= 0xac00 && code <= 0xd7af) || (code >= 0x1100 && code <= 0x11ff)) hangul += 1
+    else if ((code >= 0x4e00 && code <= 0x9fff) || (code >= 0x3400 && code <= 0x4dbf)) han += 1
+    else if (code >= 0x0400 && code <= 0x04ff) cyrillic += 1
+  }
+  if (kana > 0) return 'ja_JP'
+  if (hangul > 0) return 'ko_KR'
+  if (han > 0) return 'zh_CN'
+  if (cyrillic > 0) return 'ru_RU'
+  return 'en_US'
+}

package/ui/markdown.js

@@ -0,0 +1,122 @@
+// A deliberately small Markdown renderer for model output. Everything is HTML-escaped first and only
+// tags produced here reach the page; links keep their target in data-href and open in the browser.
+// Classic script: the toolbar page inlines it, the tests import it, both read globalThis.DshMarkdown.
+(function (root) {
+  const ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+  const escapeHtml = (text) => String(text).replace(/[&<>"']/g, (char) => ESCAPES[char])
+
+  const FENCE = /^\s*(```|~~~)/
+  const HEADING = /^(#{1,6})\s+(.*)$/
+  const QUOTE = /^\s*>\s?/
+  const LIST_ITEM = /^\s*([-*+]|\d+[.)])\s+(.*)$/
+  const RULE = /^\s*(-{3,}|\*{3,}|_{3,})\s*$/
+  const TABLE_ROW = /^\s*\|.*\|\s*$/
+  const TABLE_DIVIDER = /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/
+
+  // A link target has no spaces, and parentheses only in balanced pairs, as in .../Python_(programming_language).
+  const LINK = /\[([^\]\n]+)\]\((https?:\/\/(?:[^\s()]|\([^\s()]*\))+)\)/g
+
+  function emphasis(html) {
+    return html
+      .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
+      .replace(/__([^_\n]+)__/g, '<strong>$1</strong>')
+      .replace(/(^|[^*\w])\*([^*\n]+)\*(?![*\w])/g, '$1<em>$2</em>')
+      .replace(/~~([^~\n]+)~~/g, '<del>$1</del>')
+  }
+
+  function inline(text) {
+    return String(text).replace(/\u0000/g, '').split(/(`[^`\n]+`)/g).map((part) => {
+      if (/^`[^`\n]+`$/.test(part)) return `<code>${escapeHtml(part.slice(1, -1))}</code>`
+      // Links are set aside while emphasis is applied, so an underscore or asterisk in a URL stays
+      // part of it, and **[a link](…)** still turns bold.
+      const links = []
+      const marked = part.replace(LINK, (match, label, href) => {
+        links.push(`<a data-href="${escapeHtml(href)}">${emphasis(escapeHtml(label))}</a>`)
+        return `\u0000${links.length - 1}\u0000`
+      })
+      return emphasis(escapeHtml(marked)).replace(/\u0000(\d+)\u0000/g, (match, index) => links[Number(index)])
+    }).join('')
+  }
+
+  function isBlockStart(line) {
+    return FENCE.test(line) || HEADING.test(line) || QUOTE.test(line) || LIST_ITEM.test(line) || RULE.test(line) || TABLE_ROW.test(line)
+  }
+
+  function cells(row) {
+    return row.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map((cell) => cell.trim())
+  }
+
+  function render(markdown) {
+    const lines = String(markdown ?? '').replace(/\r\n?/g, '\n').split('\n')
+    const out = []
+    let i = 0
+    while (i < lines.length) {
+      const line = lines[i]
+      if (!line.trim()) {
+        i += 1
+        continue
+      }
+      const fence = FENCE.exec(line)
+      if (fence) {
+        const code = []
+        i += 1
+        while (i < lines.length && !lines[i].trimStart().startsWith(fence[1])) code.push(lines[i++])
+        i += 1
+        out.push(`<pre><code>${escapeHtml(code.join('\n'))}</code></pre>`)
+        continue
+      }
+      const heading = HEADING.exec(line)
+      if (heading) {
+        const level = heading[1].length <= 2 ? 3 : 4
+        out.push(`<h${level}>${inline(heading[2])}</h${level}>`)
+        i += 1
+        continue
+      }
+      if (QUOTE.test(line)) {
+        const quote = []
+        while (i < lines.length && QUOTE.test(lines[i])) quote.push(lines[i++].replace(QUOTE, ''))
+        out.push(`<blockquote>${render(quote.join('\n'))}</blockquote>`)
+        continue
+      }
+      if (RULE.test(line)) {
+        out.push('<hr>')
+        i += 1
+        continue
+      }
+      if (TABLE_ROW.test(line) && i + 1 < lines.length && TABLE_DIVIDER.test(lines[i + 1])) {
+        const head = cells(line)
+        i += 2
+        const body = []
+        while (i < lines.length && TABLE_ROW.test(lines[i])) body.push(cells(lines[i++]))
+        out.push(`<table><thead><tr>${head.map((cell) => `<th>${inline(cell)}</th>`).join('')}</tr></thead>`
+          + `<tbody>${body.map((row) => `<tr>${row.map((cell) => `<td>${inline(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table>`)
+        continue
+      }
+      const item = LIST_ITEM.exec(line)
+      if (item) {
+        const ordered = /\d/.test(item[1])
+        const items = []
+        while (i < lines.length) {
+          const next = LIST_ITEM.exec(lines[i])
+          if (next && /\d/.test(next[1]) === ordered) {
+            items.push(next[2])
+          } else if (lines[i].trim() && /^\s{2,}/.test(lines[i]) && items.length) {
+            items[items.length - 1] += `\n${lines[i].trim()}`
+          } else {
+            break
+          }
+          i += 1
+        }
+        const tag = ordered ? 'ol' : 'ul'
+        out.push(`<${tag}>${items.map((text) => `<li>${text.split('\n').map(inline).join('<br>')}</li>`).join('')}</${tag}>`)
+        continue
+      }
+      const paragraph = []
+      while (i < lines.length && lines[i].trim() && !(paragraph.length && isBlockStart(lines[i]))) paragraph.push(lines[i++])
+      out.push(`<p>${paragraph.map(inline).join('<br>')}</p>`)
+    }
+    return out.join('')
+  }
+
+  root.DshMarkdown = { render, escapeHtml }
+})(globalThis)

package/ui/toolbar.css

@@ -0,0 +1,162 @@
+:root {
+  --surface: #ffffff;
+  --text: #1f1f1f;
+  --muted: #8a8a8e;
+  --soft: #f4f4f5;
+  --hairline: rgba(0, 0, 0, 0.08);
+  --hover: rgba(0, 0, 0, 0.05);
+  --press: rgba(0, 0, 0, 0.09);
+  --accent: #4d6bfe;
+  --danger: #d4302b;
+  --shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.1);
+  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface: #2b2b2e;
+    --text: #f2f2f3;
+    --muted: #9d9da3;
+    --soft: #37373b;
+    --hairline: rgba(255, 255, 255, 0.1);
+    --hover: rgba(255, 255, 255, 0.07);
+    --press: rgba(255, 255, 255, 0.12);
+    --accent: #8197ff;
+    --danger: #ff6b63;
+    --shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.4);
+    color-scheme: dark;
+  }
+}
+
+* { box-sizing: border-box; margin: 0; }
+/* Only the root hides overflow. Set on body as well, it would stop propagating to the viewport and
+   clip body's own box, cutting off the ⋯ menu, which is positioned outside the toolbar's flow. */
+html { background: transparent; overflow: hidden; }
+/* The margins hold the whole shadow; a clipped shadow shows as a hard grey box around the card. */
+body {
+  background: transparent;
+  padding: 12px 18px 24px;
+  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei UI", sans-serif;
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+}
+.stage { position: relative; display: inline-block; vertical-align: top; }
+.card { background: var(--surface); box-shadow: var(--shadow); }
+svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+
+button, select, textarea { font: inherit; color: inherit; }
+button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; border-radius: 8px; cursor: default; }
+/* Hover waits for a real pointer movement after each show (data-pointer, see toolbar.js). */
+[data-pointer] button:hover { background: var(--hover); }
+button:active, [data-pointer] button:active { background: var(--press); }
+button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.icon-button { width: 30px; height: 30px; padding: 0; color: var(--text); }
+.icon-button[disabled] { opacity: 0.35; pointer-events: none; }
+
+/* Toolbar */
+.bar { display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; white-space: nowrap; cursor: grab; }
+[data-mode="bar"] .bar { display: inline-flex; }
+.bar-skills { display: flex; gap: 2px; }
+.skill { height: 32px; padding: 0 10px 0 9px; font-weight: 500; letter-spacing: 0.1px; }
+.skill.done svg { color: #1f9d55; }
+.divider { width: 1px; height: 16px; margin: 0 4px; background: var(--hairline); }
+.more-button[aria-expanded="true"], .mini-button[aria-expanded="true"] { background: var(--press); }
+/* Mini toolbar: one icon, and every skill in its menu. */
+.mini-button { display: none; color: var(--accent); }
+.mini-button svg { width: 20px; height: 20px; }
+[data-style="mini"] .bar { padding: 3px; border-radius: 10px; }
+[data-style="mini"] .bar-skills, [data-style="mini"] .divider, [data-style="mini"] .more-button { display: none; }
+[data-style="mini"] .mini-button { display: inline-flex; }
+
+/* ⋯ menu, opened below the more button */
+.menu { display: none; position: absolute; min-width: 190px; padding: 6px; border-radius: 12px; z-index: 1; }
+[data-mode="bar"][data-menu="open"] .menu { display: block; }
+.menu-item { display: flex; width: 100%; justify-content: flex-start; height: 34px; padding: 0 10px; gap: 10px; white-space: nowrap; }
+.menu-item.plain { padding-left: 12px; }
+.menu-divider { height: 1px; margin: 6px 8px; background: var(--hairline); }
+.menu-skills:empty + .menu-divider { display: none; }
+
+/* Result panel */
+.panel { display: none; flex-direction: column; width: 420px; max-height: var(--room, none); border-radius: 14px; overflow: hidden; }
+[data-mode="panel"] .panel { display: flex; }
+.panel-head { flex: none; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px 0 14px; cursor: grab; }
+[data-dragging="true"], [data-dragging="true"] * { cursor: grabbing !important; }
+.panel-icon { display: inline-flex; color: var(--accent); margin-right: 6px; }
+.panel-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
+.panel-app { min-width: 0; margin-left: 8px; color: var(--muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.spacer { flex: 1; }
+/* Drawn by us rather than as a native pop-up button; the list that opens is still the system menu. */
+.panel-language {
+  display: none; height: 26px; max-width: 120px; margin-right: 4px; padding: 0 24px 0 10px;
+  border: 0; border-radius: 7px; outline: 0; -webkit-appearance: none; appearance: none;
+  background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 12px 12px;
+  color: var(--text); font-size: 12px; font-weight: 500; line-height: 26px; cursor: default;
+  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
+}
+[data-pointer] .panel-language:hover { background-color: var(--press); }
+[data-kind="translate"] .panel-language { display: inline-block; }
+.tool { width: 28px; height: 28px; color: var(--muted); }
+[data-pointer] .tool:hover { color: var(--text); }
+.tool[aria-pressed="true"] { color: var(--accent); background: var(--hover); }
+.tool.done { color: #1f9d55; }
+[data-kind="ask"] .tool[data-tool="retry"] { display: none; }
+
+.panel-body { flex: 0 1 auto; min-height: 0; padding: 0 16px 14px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
+[data-fill] .panel { height: var(--room); }
+[data-fill] .panel-body { flex-grow: 1; max-height: none; }
+/* A styled scrollbar, so Windows draws a thin bar without its classic arrow buttons. */
+.panel-body::-webkit-scrollbar { width: 8px; }
+.panel-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; border: 2px solid var(--surface); }
+.source {
+  padding: 7px 10px; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: 12px; line-height: 1.5;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word;
+}
+.source.expanded { display: block; -webkit-line-clamp: unset; }
+.result { margin-top: 10px; }
+[data-kind="ask"] .result { display: none; }
+.turn { display: flex; flex-direction: column; margin-top: 12px; }
+.question { align-self: flex-end; max-width: 85%; padding: 6px 10px; border-radius: 10px 10px 2px 10px; background: var(--soft); white-space: pre-wrap; word-break: break-word; }
+.answer { margin-top: 8px; }
+
+.pending::after { content: ""; display: inline-block; width: 18px; height: 6px; margin-left: 2px;
+  background: radial-gradient(circle, var(--muted) 2px, transparent 2.5px) 0 0 / 6px 6px repeat-x;
+  animation: pending 1s steps(4) infinite; vertical-align: middle; }
+.pending:empty::before { content: attr(data-pending); color: var(--muted); }
+@keyframes pending { from { width: 0 } to { width: 24px } }
+.failure { color: var(--danger); }
+.failure small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; word-break: break-word; }
+.failure button { margin-top: 6px; height: 26px; padding: 0 10px; background: var(--soft); color: var(--text); }
+
+.composer { flex: none; display: none; align-items: flex-end; gap: 6px; padding: 8px 10px 10px 14px; border-top: 1px solid var(--hairline); }
+[data-kind="ask"] .composer, [data-composer="shown"] .composer { display: flex; }
+.composer textarea {
+  flex: 1; min-height: 22px; max-height: 96px; padding: 4px 0; border: 0; outline: 0; resize: none; background: transparent;
+  overflow-y: hidden; scrollbar-width: none;
+  line-height: 1.5; user-select: text; -webkit-user-select: text; cursor: text;
+}
+/* Past its tallest size it scrolls with the wheel and the caret, without a bar. */
+.composer textarea::-webkit-scrollbar { display: none; }
+.composer textarea::placeholder { color: var(--muted); }
+.send { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; }
+[data-pointer] .send:hover { background: var(--accent); filter: brightness(1.08); }
+.send[disabled] { opacity: 0.35; }
+
+/* Model output */
+.markdown { font-size: 13.5px; line-height: 1.65; user-select: text; -webkit-user-select: text; cursor: text; word-break: break-word; }
+.markdown > * + * { margin-top: 0.6em; }
+.markdown h1, .markdown h2, .markdown h3, .markdown h4 { font-size: 14px; font-weight: 600; }
+.markdown ul, .markdown ol { padding-left: 1.4em; }
+.markdown li + li { margin-top: 0.2em; }
+.markdown code { font-family: var(--code); font-size: 12px; padding: 1px 4px; border-radius: 4px; background: var(--soft); }
+.markdown pre { padding: 8px 10px; border-radius: 8px; background: var(--soft); overflow-x: auto; }
+.markdown pre code { padding: 0; background: none; font-size: 12px; line-height: 1.5; }
+.markdown blockquote { padding-left: 10px; border-left: 3px solid var(--hairline); color: var(--muted); }
+.markdown a { color: var(--accent); text-decoration: none; cursor: pointer; }
+[data-pointer] .markdown a:hover { text-decoration: underline; }
+.markdown table { border-collapse: collapse; font-size: 12.5px; }
+.markdown th, .markdown td { padding: 4px 8px; border: 1px solid var(--hairline); text-align: left; vertical-align: top; }
+.markdown th { background: var(--soft); font-weight: 600; }
+.markdown hr { border: 0; border-top: 1px solid var(--hairline); }

package/ui/toolbar.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:">
+<title>DSH Selection</title>
+<link rel="stylesheet" href="toolbar.css">
+</head>
+<body data-mode="hidden">
+  <div class="stage">
+    <div class="card bar" role="toolbar">
+      <div class="bar-skills"></div>
+      <span class="divider" aria-hidden="true"></span>
+      <button type="button" class="icon-button more-button" data-i18n-label="more" aria-haspopup="menu" aria-expanded="false"></button>
+      <button type="button" class="icon-button mini-button" data-i18n-label="assistant" aria-haspopup="menu" aria-expanded="false"></button>
+    </div>
+
+    <div class="card menu" role="menu">
+      <div class="menu-skills"></div>
+      <div class="menu-divider" aria-hidden="true"></div>
+      <button type="button" class="menu-item plain" role="menuitem" data-menu-action="toolbar-style"></button>
+      <button type="button" class="menu-item plain" role="menuitem" data-menu-action="disable-app" data-i18n="disableApp"></button>
+      <button type="button" class="menu-item plain" role="menuitem" data-menu-action="settings" data-i18n="settings"></button>
+    </div>
+
+    <section class="card panel" aria-live="polite">
+      <header class="panel-head">
+        <span class="panel-icon"></span>
+        <h1 class="panel-title"></h1>
+        <span class="panel-app"></span>
+        <span class="spacer"></span>
+        <select class="panel-language" data-i18n-label="translateTo"></select>
+        <button type="button" class="icon-button tool" data-tool="pin" data-i18n-label="pin" aria-pressed="false"></button>
+        <button type="button" class="icon-button tool" data-tool="copy" data-i18n-label="copyResult"></button>
+        <button type="button" class="icon-button tool" data-tool="retry" data-i18n-label="retry"></button>
+        <button type="button" class="icon-button tool" data-tool="close" data-i18n-label="close"></button>
+      </header>
+      <div class="panel-body">
+        <p class="source" title=""></p>
+        <div class="result markdown"></div>
+        <div class="thread"></div>
+      </div>
+      <form class="composer">
+        <textarea rows="1" maxlength="2000" data-i18n-placeholder="askPlaceholder"></textarea>
+        <button type="submit" class="icon-button send" data-i18n-label="send"></button>
+      </form>
+    </section>
+  </div>
+<script src="icons.js"></script>
+<script src="markdown.js"></script>
+<script src="toolbar.js"></script>
+</body>
+</html>