@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/client/ReasoningCard.tsx

@@ -0,0 +1,306 @@
+import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { StreamMotionContext } from './streaming.js';
+import type { ReactNode } from 'react';
+import { REASON_CHASE_HOLD, REASON_HOLD, REASON_LINES, REASON_STEP, reasoningTarget } from './reasoning-follow.js';
+import css from './Reader.module.css';
+
+const EASING = 'cubic-bezier(.22,1,.36,1)';
+
+/** One real transcript: reference transform while following, native scroll while reading. */
+export function ReasoningCard({ children, step, active, motion, selected, onRead }: {
+  children: ReactNode; step: number; active: boolean; motion: boolean; selected: boolean; onRead: () => void;
+}) {
+  const viewport = useRef<HTMLDivElement>(null);
+  const track = useRef<HTMLDivElement>(null);
+  const content = useRef<HTMLDivElement>(null);
+  const controls = useId();
+  const [expanded, setExpanded] = useState(false);
+  const [following, setFollowing] = useState(true);
+  const [overflow, setOverflow] = useState(false);
+  const [edges, setEdges] = useState('none');
+  const lastHeight = useRef(0);
+  const resize = useRef<Animation | null>(null);
+  const previousExpanded = useRef(expanded);
+  const stopFollow = useRef<() => void>(() => {});
+  const { paused = false } = useContext(StreamMotionContext);
+  const allowed = following && active && motion && !selected && !paused;
+
+  const pause = useCallback(() => {
+    stopFollow.current();
+    setFollowing(false);
+    onRead();
+  }, [onRead]);
+
+  useLayoutEffect(() => {
+    // The parent's selection observer can suspend this card before its own
+    // listener runs. Clearing a selection must not silently resume following.
+    if (!selected) return;
+    stopFollow.current();
+    setFollowing(false);
+  }, [selected]);
+
+  useLayoutEffect(() => {
+    if (!expanded) return;
+    const port = viewport.current;
+    const host = port?.closest<HTMLElement>('[data-conversation-scroll]');
+    if (!port || !host) return;
+    const fit = () => {
+      // Public DSH layout variable, updated by the native composer's observer.
+      // Leave room for the permanent identity, footer and reading margin.
+      const composer = parseFloat(getComputedStyle(host).getPropertyValue('--dsh-composer-height')) || 152;
+      const heading = port.parentElement?.querySelector<HTMLElement>('[data-reader-reasoning-heading]')?.offsetHeight || 30;
+      const footer = port.parentElement?.querySelector<HTMLElement>('[data-ud-check=reasoning-controls]')?.offsetHeight || 38;
+      const available = Math.max(120, host.clientHeight - composer - heading - footer - 32);
+      port.style.setProperty('--reason-reading-height', `${available}px`);
+    };
+    fit();
+    const observer = new ResizeObserver(fit); observer.observe(host);
+    return () => { observer.disconnect(); };
+  }, [expanded]);
+
+  useLayoutEffect(() => {
+    const port = viewport.current;
+    const text = content.current;
+    const scrollTrack = track.current;
+    if (!port || !text || !scrollTrack) return;
+    let frame = 0;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let nextAt = performance.now() + REASON_HOLD;
+    let alive = true;
+    let automatic = false;
+    let lastPainted = port.scrollTop;
+    let targetOffset = lastPainted;
+    const tail = () => Math.max(0, text.offsetHeight - port.clientHeight);
+    const clamp = (value: number) => Math.max(0, Math.min(tail(), value));
+    const paintedOffset = () => {
+      if (!automatic) return port.scrollTop;
+      const transform = getComputedStyle(scrollTrack).transform;
+      // Reduced-motion CSS may win before React receives the media change.
+      // Retain the last painted position rather than snapping back to the top.
+      return clamp(transform === 'none' ? lastPainted : port.scrollTop - new DOMMatrixReadOnly(transform).m42);
+    };
+    const hasSelection = () => {
+      const selection = document.getSelection();
+      return !!selection && !selection.isCollapsed && !!selection.anchorNode && text.contains(selection.anchorNode);
+    };
+    const cancel = () => {
+      cancelAnimationFrame(frame); frame = 0;
+      clearTimeout(timer); timer = undefined;
+      delete port.dataset.reasoningMoving;
+    };
+    const manual = () => {
+      if (!automatic) return;
+      const top = paintedOffset();
+      automatic = false;
+      scrollTrack.style.transition = 'none';
+      scrollTrack.style.transform = 'none';
+      // Set both in the same layout effect/event, before a frame can paint.
+      // The first wheel gesture must already have a native scrollable viewport.
+      port.style.overflow = 'auto';
+      port.scrollTop = top;
+      lastPainted = port.scrollTop;
+      port.dataset.reasoningMode = 'manual';
+    };
+    const follow = () => {
+      if (automatic) return;
+      targetOffset = lastPainted = clamp(port.scrollTop);
+      scrollTrack.style.transition = 'none';
+      scrollTrack.style.transform = `translateY(-${lastPainted}px)`;
+      port.scrollTop = 0;
+      port.style.overflow = 'hidden';
+      automatic = true;
+      port.dataset.reasoningMode = 'transform';
+    };
+    const measure = (recordHeight = true) => {
+      const previewHeight = parseFloat(getComputedStyle(port).getPropertyValue('--reason-preview-height'));
+      setOverflow(text.offsetHeight > previewHeight + 1);
+      lastPainted = paintedOffset();
+      const top = lastPainted > 1;
+      const bottom = tail() - lastPainted > 1;
+      const next = top ? bottom ? 'both' : 'top' : bottom ? 'bottom' : 'none';
+      setEdges(value => value === next ? value : next);
+      if (recordHeight && !resize.current) lastHeight.current = port.clientHeight;
+    };
+    stopFollow.current = () => { cancel(); manual(); measure(false); };
+    const canFollow = () => allowed && alive && !document.hidden && !hasSelection();
+    const schedule = () => {
+      if (!canFollow() || frame || timer !== undefined) return;
+      follow();
+      if (tail() - paintedOffset() < 1) return;
+      timer = setTimeout(start, Math.max(0, nextAt - performance.now()));
+    };
+    const start = () => {
+      timer = undefined;
+      if (!canFollow()) return;
+      const from = paintedOffset();
+      const lineHeight = parseFloat(getComputedStyle(text).lineHeight) || 24;
+      // How much unpainted text is waiting. A fast model pushes this far past the
+      // reference step, and chasing it is what keeps the scroll continuous.
+      const backlogLines = Math.max(0, (tail() - from) / lineHeight);
+      const target = reasoningTarget(from, text.offsetHeight, port.clientHeight, lineHeight, backlogLines);
+      if (target - from < 1) return;
+      const began = performance.now();
+      // Still behind after this step: take the next one almost immediately instead
+      // of holding the reading beat, so motion tracks the text rather than stalling.
+      nextAt = began + (backlogLines > REASON_LINES ? REASON_CHASE_HOLD : REASON_HOLD);
+      targetOffset = target;
+      // The supplied recipe: commit the start pose, then transition the track.
+      // No per-frame scrollTop writes and no catch-up across unread lines.
+      scrollTrack.style.transition = 'none';
+      scrollTrack.style.transform = `translateY(-${from}px)`;
+      void scrollTrack.offsetHeight;
+      scrollTrack.style.transition = 'transform var(--reason-step) var(--reason-ease)';
+      scrollTrack.style.transform = `translateY(-${target}px)`;
+      port.dataset.reasoningMoving = 'true';
+      port.dataset.reasoningFrom = String(from);
+      port.dataset.reasoningTarget = String(target);
+      port.dataset.reasoningBegan = String(began);
+      const tick = (now: number) => {
+        frame = 0;
+        if (!canFollow()) { cancel(); manual(); return; }
+        // Observe the browser's actual CSS interpolation for masks and handoff.
+        measure();
+        if (now - began < REASON_STEP || Math.abs(lastPainted - target) > .05) frame = requestAnimationFrame(tick);
+        else { delete port.dataset.reasoningMoving; schedule(); }
+      };
+      frame = requestAnimationFrame(tick);
+    };
+    const onScroll = () => {
+      measure();
+      // Focus/keyboard-induced native scroll wins even while the track moves.
+      if (automatic && port.scrollTop > 1) pause();
+    };
+    const onWheel = (event: WheelEvent) => {
+      if (!event.deltaY) return;
+      // The compositor picks a wheel scroller before handlers run. A clipped
+      // transform viewport would otherwise lose this first gesture or scroll
+      // the conversation. Consume only this handoff; later wheels stay native.
+      const handoff = automatic && event.cancelable;
+      if (handoff) event.preventDefault();
+      const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? parseFloat(getComputedStyle(text).lineHeight) || 24
+        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? port.clientHeight : 1;
+      pause();
+      if (handoff) { port.scrollTop = clamp(port.scrollTop + event.deltaY * unit); measure(); }
+    };
+    const onSelection = () => { if (hasSelection()) pause(); };
+    const onVisibility = () => {
+      cancel(); manual();
+      nextAt = performance.now() + REASON_HOLD;
+      if (!document.hidden) schedule();
+    };
+    const observer = new ResizeObserver(() => {
+      if (automatic && targetOffset > tail() + 1) {
+        cancel(); manual();
+        nextAt = performance.now() + REASON_HOLD;
+      }
+      measure(); schedule();
+    });
+    observer.observe(text); observer.observe(port);
+    port.addEventListener('scroll', onScroll, { passive: true });
+    port.addEventListener('wheel', onWheel, { passive: false });
+    document.addEventListener('selectionchange', onSelection);
+    document.addEventListener('visibilitychange', onVisibility);
+    // Keep the previous layout height until the resize effect can sample it.
+    measure(false); schedule();
+    return () => {
+      alive = false; cancel(); manual(); observer.disconnect();
+      port.removeEventListener('scroll', onScroll); port.removeEventListener('wheel', onWheel);
+      document.removeEventListener('selectionchange', onSelection);
+      document.removeEventListener('visibilitychange', onVisibility);
+      stopFollow.current = () => {};
+    };
+  }, [allowed, pause]);
+
+  useLayoutEffect(() => {
+    const port = viewport.current;
+    if (!port) return;
+    const changed = expanded !== previousExpanded.current;
+    previousExpanded.current = expanded;
+    const from = resize.current ? port.clientHeight : lastHeight.current;
+    resize.current?.cancel(); resize.current = null;
+    port.style.maxHeight = ''; port.style.height = '';
+    const target = port.clientHeight;
+    // Explicit reading adjusts only the conversation, never the outer app.
+    // The card is also a reader anchor so resizing cannot pin a later answer
+    // in place at the expense of this card's visible heading.
+    if (changed && !selected) {
+      const card = port.parentElement;
+      const host = port.closest<HTMLElement>('[data-conversation-scroll]');
+      if (card && host) {
+        const composer = parseFloat(getComputedStyle(host).getPropertyValue('--dsh-composer-height')) || 152;
+        const region = host.getBoundingClientRect();
+        const box = card.getBoundingClientRect();
+        const top = region.top + 16;
+        const bottom = region.bottom - composer - 16;
+        const delta = box.top < top ? box.top - top : box.bottom > bottom ? Math.min(box.bottom - bottom, box.top - top) : 0;
+        if (Math.abs(delta) > 1) host.scrollTo({ top: Math.max(0, host.scrollTop + delta), behavior: motion ? 'smooth' : 'instant' });
+      }
+    }
+    if (!changed || !motion || from < 1 || Math.abs(target - from) < 1) {
+      lastHeight.current = target;
+      return;
+    }
+    // max-height otherwise clamps the very first collapse frame to the new cap.
+    port.style.maxHeight = 'none';
+    const animation = port.animate([{ height: `${from}px` }, { height: `${target}px` }], { duration: 300, easing: EASING, fill: 'both' });
+    resize.current = animation;
+    const restore = () => {
+      // `max-height` was cleared so the first frame could exceed the old cap; it has
+      // to come back even if the animation never reports finishing, or the card keeps
+      // the inline styles the animation was driving.
+      port.style.maxHeight = ''; port.style.height = '';
+      lastHeight.current = port.clientHeight;
+    };
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      if (resize.current === animation) resize.current = null;
+      animation.cancel();
+      restore();
+    };
+    animation.onfinish = settle;
+    // `fill: 'both'` holds whichever keyframe the animation stopped on, so a run that
+    // never finishes — cancelled by a re-run, unmounted, or skipped by the compositor —
+    // would leave the card at the previous height with its inline styles still
+    // overridden. Restore on a deadline too.
+    const deadline = window.setTimeout(settle, 300 + 240);
+    return () => { window.clearTimeout(deadline); };
+  }, [expanded, motion, selected]);
+  useEffect(() => () => resize.current?.cancel(), []);
+
+  const toggleReading = () => {
+    // Resize the same transcript without changing follow intent or position.
+    // Wheel, selection and viewport focus still explicitly pause following.
+    onRead();
+    setExpanded(value => !value);
+  };
+
+  return <div className={css.reasonCard} data-reader-reasoning-card data-reader-anchor data-expanded={expanded} data-following={allowed} data-overflow={overflow} data-ud-motion="reader-reasoning-size">
+    <div className={css.reasonHeading} data-reader-reasoning-heading data-ud-check="reasoning-identity">
+      <span className={css.reasonLabel} data-reader-reasoning-label>思考</span>
+      <span>步骤 {step}</span>
+    </div>
+    <div ref={viewport} id={controls} className={css.reasonViewport} data-reader-reasoning-scroll data-edges={edges}
+      data-ud-motion="reader-reasoning-scroll" role="region" aria-label={`步骤 ${step} 的思考${overflow ? '，可滚动阅读' : ''}`}
+      tabIndex={overflow ? 0 : undefined} onPointerDown={pause} onFocus={pause}>
+      <div ref={track} className={css.reasonTrack} data-reader-reasoning-track>
+        <div ref={content} className={css.reasonText} data-reader-reasoning-text>{children}</div>
+      </div>
+    </div>
+    {(overflow || expanded) && <div className={css.reasonFooter} data-ud-check="reasoning-controls">
+      {active && motion ? <button type="button" className={css.reasonAction} disabled={selected} aria-controls={controls}
+        aria-label={following ? '暂停自动跟随思考' : '继续跟随最新思考'}
+        title={selected ? '取消文字选择后可继续跟随' : undefined}
+        onClick={() => { if (following) pause(); else { onRead(); setFollowing(true); } }}>
+        <svg width="12" height="12" viewBox="0 0 16 16" aria-hidden="true">{following ? <path d="M5.5 4v8m5-8v8" /> : <path d="M8 3v10m-4-4 4 4 4-4" />}</svg>
+        {following ? '暂停跟随' : '跟随最新'}
+      </button> : <span className={css.reasonCaption}>{expanded ? '手动阅读' : '可滚动阅读'}</span>}
+      <button type="button" className={css.reasonAction} aria-expanded={expanded} aria-controls={controls}
+        aria-label={expanded ? '收起完整思考' : '展开阅读完整思考'} onClick={toggleReading}>
+        {expanded ? '收起' : '展开阅读'}
+        <svg width="12" height="12" viewBox="0 0 16 16" aria-hidden="true">{expanded ? <path d="m4 10 4-4 4 4" /> : <path d="m4 6 4 4 4-4" />}</svg>
+      </button>
+    </div>}
+  </div>;
+}

package/src/client/SettingsSection.module.css

@@ -0,0 +1,184 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  width: 100%;
+  max-width: 720px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+.rowText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 24px;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.desc {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.switch {
+  flex: none;
+  width: 40px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-module-platform);
+  position: relative;
+  cursor: pointer;
+}
+
+.switch::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-primary);
+  transition: transform 160ms ease;
+}
+
+.switch[data-on]::after {
+  transform: translateX(16px);
+}
+
+.switch[data-on] {
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.block {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 11px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+
+.badge[data-ok] {
+  background: rgba(16, 185, 129, 0.14);
+  color: #059669;
+}
+
+.pre {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.roots {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.button {
+  height: 32px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.segment {
+  display: flex;
+  width: 100%;
+  margin-top: 8px;
+  padding: 2px;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-module-platform);
+  gap: 2px;
+}
+
+.segmentStop {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+
+.segmentStop[data-on] {
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  box-shadow: 0 0 0 0.5px var(--dsw-alias-border-l2);
+}
+
+.slider {
+  width: 100%;
+  margin: 10px 0 0;
+  accent-color: var(--dsw-alias-state-business-primary);
+}

package/src/client/SettingsSection.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
+import { bubblesOf, foldIntensityOf, frostedGlassOf, type FoldIntensity } from './fold-intensity.js';
+import { deliverableOpenModeOf, type DeliverableOpenMode } from './open-file.js';
+import { settingsCopyFor, type SettingsCopy, type SettingsCopyKey } from './settings-copy.js';
+import { CONVENTIONAL_SKILL_ROOTS, detectGenerativeMcpappsSkill, shortestInstallCommand, type SkillStatusProbe, type SkillStatusSnapshot } from './skill-status.js';
+import css from './SettingsSection.module.css';
+
+export interface ReaderPrefsSnapshot {
+  deliverableOpenMode?: DeliverableOpenMode;
+  frostedGlass?: boolean;
+  bubbles?: boolean;
+  foldIntensity?: FoldIntensity;
+  autoFold?: boolean;
+  processOnly?: boolean;
+}
+
+export interface OpenPrefs {
+  getSnapshot: () => ReaderPrefsSnapshot;
+  subscribe: (fn: () => void) => () => void;
+  actions: {
+    setDeliverableOpenMode: (value: DeliverableOpenMode) => void;
+    setFrostedGlass: (value: boolean) => void;
+    setBubbles?: (value: boolean) => void;
+    setFoldIntensity?: (value: FoldIntensity) => void;
+    setAutoFold?: (value: boolean) => void;
+  };
+}
+
+export interface BetterDisplaySettingsInjected {
+  prefs: OpenPrefs;
+  copy?: SettingsCopy;
+  languageTag?: string;
+  checkSkill: SkillStatusProbe;
+}
+
+type SettingsProps = BetterDisplaySettingsInjected & {
+  /** Official settings.section owner share; unused here. */
+  close?: () => void;
+  t?: (key: SettingsCopyKey) => string;
+};
+
+function text(props: SettingsProps, copy: SettingsCopy, key: keyof SettingsCopy): string {
+  if (typeof props.t === 'function') {
+    try {
+      const value = props.t(key);
+      if (typeof value === 'string' && value.length > 0 && value !== key) return value;
+    } catch {
+      // Fall through to the bundled dictionaries.
+    }
+  }
+  return copy[key];
+}
+
+const FOLD_STOPS: { value: FoldIntensity; key: 'foldNone' | 'foldStandard' | 'foldSummary' }[] = [
+  { value: 0, key: 'foldNone' },
+  { value: 1, key: 'foldStandard' },
+  { value: 2, key: 'foldSummary' },
+];
+
+export function SettingsSection(props: SettingsProps) {
+  const copy = props.copy ?? settingsCopyFor(props.languageTag);
+  const snap = useSyncExternalStore(
+    props.prefs.subscribe,
+    () => props.prefs.getSnapshot() ?? ({} as ReaderPrefsSnapshot),
+    () => ({} as ReaderPrefsSnapshot),
+  );
+  const mode = deliverableOpenModeOf(snap.deliverableOpenMode);
+  const glass = frostedGlassOf(snap);
+  const bubbles = bubblesOf(snap);
+  const autoFold = snap.autoFold !== false && snap.foldIntensity !== 0;
+  const setMode = (value: DeliverableOpenMode) => {
+    props.prefs.actions.setDeliverableOpenMode(value);
+  };
+  const on = mode === 'sidebar';
+  const [skill, setSkill] = useState<SkillStatusSnapshot | undefined>();
+  const [checking, setChecking] = useState(false);
+
+  const recheck = useCallback(async () => {
+    setChecking(true);
+    try {
+      setSkill(await detectGenerativeMcpappsSkill(props.checkSkill));
+    } catch {
+      setSkill({
+        name: 'generative-mcpapps',
+        installed: false,
+        via: null,
+        roots: [],
+        hostReached: false,
+      });
+    } finally {
+      setChecking(false);
+    }
+  }, [props.checkSkill]);
+
+  useEffect(() => { void recheck(); }, [recheck]);
+
+  return (
+    <div className={css.section} data-better-display-settings>
+      <div className={css.row}>
+        <div className={css.rowText}>
+          <div className={css.title}>{text(props, copy, 'openTitle')}</div>
+          <div className={css.desc}>{text(props, copy, 'openDescription')}</div>
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={on}
+          className={css.switch}
+          data-on={on || undefined}
+          data-better-display-open-mode={mode}
+          onClick={() => { setMode(on ? 'external' : 'sidebar'); }}
+        />
+      </div>
+
+      <div className={css.row}>
+        <div className={css.rowText}>
+          <div className={css.title}>{text(props, copy, 'glassTitle')}</div>
+          <div className={css.desc}>{text(props, copy, 'glassDescription')}</div>
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={glass}
+          className={css.switch}
+          data-on={glass || undefined}
+          data-better-display-glass={glass ? 'on' : 'off'}
+          onClick={() => { props.prefs.actions.setFrostedGlass(!glass); }}
+        />
+      </div>
+
+      <div className={css.row}>
+        <div className={css.rowText}>
+          <div className={css.title}>{text(props, copy, 'bubbleTitle')}</div>
+          <div className={css.desc}>{text(props, copy, 'bubbleDescription')}</div>
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={bubbles}
+          className={css.switch}
+          data-on={bubbles || undefined}
+          data-better-display-bubbles={bubbles ? 'on' : 'off'}
+          onClick={() => { props.prefs.actions.setBubbles?.(!bubbles); }}
+        />
+      </div>
+
+      <div className={css.row}>
+        <div className={css.rowText}>
+          <div className={css.title}>{text(props, copy, 'foldTitle')}</div>
+          <div className={css.desc}>{text(props, copy, 'foldDescription')}</div>
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={autoFold}
+          className={css.switch}
+          data-on={autoFold || undefined}
+          data-better-display-auto-fold={autoFold ? 'on' : 'off'}
+          onClick={() => {
+            props.prefs.actions.setAutoFold?.(!autoFold);
+            props.prefs.actions.setFoldIntensity?.(!autoFold ? 1 : 0);
+          }}
+        />
+      </div>
+
+      <section className={css.block} data-better-display-skill={skill?.installed ? 'installed' : 'missing'}>
+        <div className={css.title}>{text(props, copy, 'skillTitle')}</div>
+        <div className={css.status}>
+          <span className={css.badge} data-ok={skill?.installed || undefined}>
+            {skill?.installed ? text(props, copy, 'skillInstalled') : text(props, copy, 'skillMissing')}
+          </span>
+        </div>
+        <p className={css.desc}>{text(props, copy, 'skillPurpose')}</p>
+        <p className={css.desc}>{text(props, copy, 'skillPluginNote')}</p>
+        {skill && !skill.installed ? (
+          <>
+            <p className={css.desc}>{skill.hostReached ? text(props, copy, 'skillInstall') : text(props, copy, 'skillUnavailable')}</p>
+            <pre className={css.pre}>{shortestInstallCommand()}</pre>
+            <ul className={css.roots} data-better-display-skill-roots>
+              {CONVENTIONAL_SKILL_ROOTS.map(root => (
+                <li key={root}>{root}</li>
+              ))}
+            </ul>
+          </>
+        ) : null}
+        <div className={css.actions}>
+          <button type="button" className={css.button} disabled={checking} onClick={() => { void recheck(); }}>
+            {checking ? text(props, copy, 'skillChecking') : text(props, copy, 'skillRecheck')}
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}