ompchamber 3.1.0 → 3.2.0

package/src/client/components/workspace/diff-panel/index.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useSessionUiState } from '@/client/hooks/workspace/session-state';
 import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
-import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
-import { DiffToolbar, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { DiffToolbar, type DiffContentMode, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
 import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
 import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
@@ -30,6 +30,8 @@ export function DiffPanel({
 }: DiffPanelProps) {
   // Read and persist view mode & whitespace preference in session_ui_state
   const [viewMode, setViewMode] = useSessionUiState<DiffViewMode>('diff.viewMode', 'unified');
+  const [contentMode, setContentMode] = useSessionUiState<DiffContentMode>('diff.contentMode', 'full');
+  const [wordWrap, setWordWrap] = useSessionUiState<boolean>('diff.wordWrap', true);
   const [ignoreWhitespace, setIgnoreWhitespace] = useSessionUiState<boolean>('diff.ignoreWhitespace', false);
 
   const [rawDiff, setRawDiff] = useState<string>('');
@@ -66,6 +68,11 @@ export function DiffPanel({
         staged: staged ? '1' : '0',
         repo: repo || '.',
       });
+      // `fullContext=1` makes git emit the whole file rather than the hunks.
+      // Only the user's own toggle changes it, so it is safe as a callback
+      // dependency (unlike the staged/status copies above, which the action
+      // path updates while a fetch of its own is already in flight).
+      if (contentMode === 'full') params.set('fullContext', '1');
       if (statusForFetch) params.set('status', statusForFetch);
       if (root) params.set('root', root);
 
@@ -99,7 +106,7 @@ export function DiffPanel({
     } finally {
       if (seq === fetchSeqRef.current) setIsLoading(false);
     }
-  }, [filePath, repo, root]);
+  }, [filePath, repo, root, contentMode]);
 
   useEffect(() => {
     setCurrentStatus(status);
@@ -112,13 +119,31 @@ export function DiffPanel({
     void fetchDiff();
   }, [fetchDiff]);
 
-  const parsed = parseUnifiedDiff(rawDiff, ignoreWhitespace);
+  // Full-code mode parses the whole file, not the hunks, so the parse is keyed
+  // to its inputs: every render used to re-walk the diff (measured 21 ms on an
+  // 80k-line file), for a result that only changes when the diff or the
+  // whitespace toggle does.
+  // Only the rendered view is built: `views` keeps the shared flush (so the
+  // whitespace decision and the counts cannot diverge) while skipping the
+  // object graph nobody draws.
+  const parsed = useMemo(
+    () => parseUnifiedDiff(rawDiff, { ignoreWhitespace, views: viewMode === 'split' ? 'split' : 'unified' }),
+    [rawDiff, ignoreWhitespace, viewMode],
+  );
   const language = getLanguageFromPath(filePath);
 
   const handleSetViewMode = (mode: DiffViewMode) => {
     setViewMode(mode);
   };
 
+  const handleSetContentMode = (mode: DiffContentMode) => {
+    setContentMode(mode);
+  };
+
+  const handleToggleWordWrap = () => {
+    setWordWrap(!wordWrap);
+  };
+
   const handleToggleWhitespace = () => {
     setIgnoreWhitespace(!ignoreWhitespace);
   };
@@ -218,6 +243,8 @@ export function DiffPanel({
         status={currentStatus}
         isStaged={currentStaged}
         viewMode={viewMode}
+        contentMode={contentMode}
+        wordWrap={wordWrap}
         ignoreWhitespace={ignoreWhitespace}
         additions={parsed.additions}
         deletions={parsed.deletions}
@@ -225,6 +252,8 @@ export function DiffPanel({
         isCopied={isCopied}
         isBusy={isBusy}
         onSetViewMode={handleSetViewMode}
+        onSetContentMode={handleSetContentMode}
+        onToggleWordWrap={handleToggleWordWrap}
         onToggleWhitespace={handleToggleWhitespace}
         onStageUnstage={handleStageUnstage}
         onDiscard={handleDiscard}
@@ -268,9 +297,9 @@ export function DiffPanel({
             </button>
           </div>
         ) : viewMode === 'split' ? (
-          <SplitView rows={parsed.splitRows} language={language} />
+          <SplitView rows={parsed.splitRows} language={language} wordWrap={wordWrap} />
         ) : (
-          <UnifiedView lines={parsed.lines} language={language} />
+          <UnifiedView lines={parsed.lines} language={language} wordWrap={wordWrap} />
         )}
       </div>
 

package/src/client/components/workspace/editor/Toolbar.tsx

@@ -68,14 +68,21 @@ export function EditorToolbar({
           : 'Save file (Ctrl+S)';
 
   return (
-    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
+    // `@container`: the path below hides on a NARROW PANEL, not a narrow
+    // viewport. At the editor panel's 320px floor the action strip is 273px of
+    // `flex-shrink-0`, which left the path a measured 23px — a truncated
+    // fragment of a filename is not information, and the tab above already
+    // carries it.
+    <div className="@container flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
       {/* Left status */}
-      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
+      <div className="hidden @[420px]:flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
         <span className="truncate max-w-[300px]" title={path}>{path}</span>
       </div>
 
-      {/* Right actions */}
-      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0">
+      {/* Right actions. `ml-auto` keeps them right-aligned once the path block
+          above is hidden, which `justify-between` alone would not do (a single
+          child sits at the start). */}
+      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0 ml-auto">
         {!isImage && (
           <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
             <button

package/src/client/components/workspace/git-panel/commit-modal/CommitDiffViewer.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'preact/hooks';
 import { ChevronDown, ChevronUp } from 'lucide-preact';
-import { getLanguageFromPath, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { highlightLines } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 
 interface DiffLineItem {

package/src/client/hooks/chat/omp/session-list.tsx

@@ -32,6 +32,16 @@ export interface SidebarDataHandle {
   initializing: boolean;
   /** Fire a refresh (dedup: while a load is in flight this is a no-op). */
   refresh: () => void;
+  /**
+   * User-initiated refresh: the same load as `refresh`, but it also raises
+   * `refreshing` until THAT load settles, so a toolbar button can spin while
+   * it runs. The background paths (idle poll, stream events, status ack) go
+   * through `refresh` and deliberately never raise the flag — a spinner that
+   * turns on by itself every 30s reads as a broken list.
+   */
+  refreshNow: () => void;
+  /** True while a `refreshNow` load is in flight. */
+  refreshing: boolean;
   /**
    * Mark a session's one-shot terminal badge as seen NOW: strips the check
    * optimistically for this mount and POSTs the server ack. No-op unless the
@@ -74,6 +84,22 @@ export function SidebarDataProvider({ children, initialFolders = [] }: { childre
     };
   }, [fetcher]);
 
+  // User-initiated refresh. Unlike `refresh` it does NOT skip an in-flight
+  // load — a click is an explicit "read it again now", and the fetcher aborts
+  // the superseded request rather than letting two answer. The spinner follows
+  // THIS load only: a token marks the newest click, so a background poll
+  // settling in between cannot stop a spin that is still running, and a
+  // superseded click cannot stop the newer one's.
+  const [refreshing, setRefreshing] = useState(false);
+  const refreshTokenRef = useRef(0);
+  const refreshNow = useCallback(() => {
+    const token = ++refreshTokenRef.current;
+    setRefreshing(true);
+    void fetcher.load('/api/sessions/list').finally(() => {
+      if (refreshTokenRef.current === token) setRefreshing(false);
+    });
+  }, [fetcher]);
+
   // Idle keep-alive: the throttled stream-event hook and useStreamPoll only
   // fire while THIS client streams, so changes made elsewhere (another tab,
   // a background omp process finishing, an archive from a second browser)
@@ -142,10 +168,12 @@ export function SidebarDataProvider({ children, initialFolders = [] }: { childre
       isMock: data?.isMock ?? false,
       initializing: !hasLoaded,
       refresh,
+      refreshNow,
+      refreshing,
       markSeen,
       hasSeen: (id) => seen.has(String(id)),
     };
-  }, [fetcher.data, initialFolders, hasLoaded, refresh, markSeen]);
+  }, [fetcher.data, initialFolders, hasLoaded, refresh, refreshNow, refreshing, markSeen]);
 
   return <SidebarDataContext.Provider value={value}>{children}</SidebarDataContext.Provider>;
 }
@@ -163,6 +191,8 @@ export function useSidebarData(): SidebarDataHandle {
     isMock: false,
     initializing: true,
     refresh: () => {},
+    refreshNow: () => {},
+    refreshing: false,
     markSeen: () => {},
     hasSeen: () => false,
   };

package/src/client/hooks/chat/omp/session-sidebar-controller.ts

@@ -51,6 +51,10 @@ export interface SessionSidebarController {
   folders: WorkspaceFolderData[];
   initializing: boolean;
   refresh: () => void;
+  /** User-initiated refresh — raises `refreshing` until that load settles. */
+  refreshNow: () => void;
+  /** True while a `refreshNow` load is in flight (drives the toolbar spinner). */
+  refreshing: boolean;
   activeSessionId: number | string | null;
   sessionParam: string | null;
   searchQuery: string;
@@ -71,7 +75,7 @@ export function useSessionSidebarController(
   options: SessionSidebarControllerOptions = {},
 ): SessionSidebarController {
   const { includePendingSessions = false, onSelectSession, onAfterSelect } = options;
-  const { folders, initializing, refresh, markSeen, hasSeen } = useSidebarData();
+  const { folders, initializing, refresh, refreshNow, refreshing, markSeen, hasSeen } = useSidebarData();
   const [searchParams, setSearchParams] = useSearchParams();
   const sessionParam = searchParams.get('sessionId');
   const activeSessionId = sessionParam
@@ -232,6 +236,8 @@ export function useSessionSidebarController(
     folders,
     initializing,
     refresh: revalidate,
+    refreshNow,
+    refreshing,
     activeSessionId,
     sessionParam,
     searchQuery,

package/src/client/hooks/chat/subagent/index.ts

@@ -2,7 +2,7 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import type { ChatMessageData, SubagentInfo } from '@/shared/types';
 import { isRecord } from '@/shared/lib/util/guards';
-import { parseSubagentLifecycle, parseSubagentProgress } from '@/shared/lib/omp/subagent/parse';
+import { parseSubagentLifecycle, readSubagentProgressFrame } from '@/shared/lib/omp/subagent/parse';
 import { convertMessages, mergeMessages, requestHistoryPage, requestSubagentPage } from '@/shared/lib/omp/subagent/transcript-client';
 
 /**
@@ -86,6 +86,9 @@ export function useSubagentTranscript(
   const nextByteRef = useRef(0);
   const sessionFileRef = useRef<string | undefined>(undefined);
   const readyRef = useRef(false);
+  /** False once the live RPC has refused this subagent (its process is gone).
+   *  Later tail fetches then read the on-disk transcript directly. */
+  const rpcAvailableRef = useRef(true);
   const flushingRef = useRef(false);
   const queuedRef = useRef(false);
   const flushTimerRef = useRef<number | null>(null);
@@ -103,8 +106,25 @@ export function useSubagentTranscript(
     flushingRef.current = true;
     const generation = generationRef.current;
     try {
-      const page = await requestSubagentPage(sid, active.id, sessionFileRef.current, nextByteRef.current);
-      if (generation !== generationRef.current || !page) return;
+      const fromByte = nextByteRef.current;
+      // Once the RPC has answered "not managed", stop probing it: the child is
+      // gone for the rest of this view's life, and every later tail would pay a
+      // refused round-trip before falling back anyway. The disk path below is
+      // the same transcript file the RPC was reading.
+      let page = rpcAvailableRef.current
+        ? await requestSubagentPage(sid, active.id, sessionFileRef.current, fromByte)
+        : null;
+      if (generation !== generationRef.current) return;
+      if (!page) {
+        // The session's omp process is gone (the child finished, the idle
+        // reclaim took it, or the chamber restarted) — the RPC is refused for
+        // an unmanaged session rather than respawning one for a read. Continue
+        // on disk; without this the view froze on whatever the last live page
+        // held, which is exactly the final turns of a just-finished subagent.
+        rpcAvailableRef.current = false;
+        page = await requestHistoryPage(sid, active.id, fromByte);
+        if (generation !== generationRef.current || !page) return;
+      }
       sessionFileRef.current = page.sessionFile || sessionFileRef.current;
       const converted = convertMessages(page.messages, true);
       if (page.reset) {
@@ -163,6 +183,7 @@ export function useSubagentTranscript(
     nextByteRef.current = 0;
     sessionFileRef.current = initial?.sessionFile;
     readyRef.current = false;
+    rpcAvailableRef.current = true;
 
     const scheduleTail = () => {
       if (flushTimerRef.current !== null) return;
@@ -188,8 +209,10 @@ export function useSubagentTranscript(
         if (!isCurrent()) return;
         if (!result && !viaHistory && fromByte === 0) {
           // The parent RPC dropped this subagent (already finished) — the
-          // on-disk transcript is authoritative from here on.
+          // on-disk transcript is authoritative from here on, and the tail
+          // fetch must not keep probing a refused RPC.
           viaHistory = true;
+          rpcAvailableRef.current = false;
           result = await requestHistoryPage(sessionId, subagentId, 0);
           if (!isCurrent()) return;
         }
@@ -236,15 +259,18 @@ export function useSubagentTranscript(
       if (!detail) return;
       const payload = isRecord(detail.payload) ? detail.payload : null;
       if (!payload) return;
-      const payloadId = typeof payload.id === 'string' ? payload.id : null;
-      if (payloadId && payloadId !== subagentId) return;
-      if (!payloadId) {
-        const payloadIndex = typeof payload.index === 'number' ? payload.index : null;
+      // `subagent_progress` nests the child's AgentProgress under `progress`
+      // (SubagentProgressPayload), and only the NESTED snapshot carries the id
+      // plus the resolved model/thinking level — reading the wrapper alone
+      // dropped every field it reports.
+      const progress = readSubagentProgressFrame(payload);
+      if (!progress) return;
+      if (progress.id !== undefined) {
+        if (progress.id !== subagentId) return;
+      } else {
         // Index is only unique within a spawning batch — require the exact match.
-        if (payloadIndex === null || payloadIndex !== (subagentRef.current?.index ?? -1)) return;
+        if (progress.index === undefined || progress.index !== (subagentRef.current?.index ?? -1)) return;
       }
-      const progress = parseSubagentProgress(payload);
-      if (!progress) return;
       setStatus(prev => {
         if (!prev || prev.id !== subagentId) return prev;
         const next: SubagentInfo = { ...prev, progress: { ...prev.progress, ...progress } };

package/src/client/hooks/editor/use-file-editor.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
 import { getImageMimeType } from '@/shared/lib/fs/file-kind';
 import { buildFsRawUrl } from '@/shared/lib/fs/paths';
 import { detectLineEnding, toDiskText, toLf, type LineEnding } from '@/shared/lib/code/line-endings';

package/src/client/hooks/settings/master-detail.ts

@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'preact/hooks';
+
+/** Which of a two-pane settings category's screens a phone is showing. */
+export type SettingsPane = 'list' | 'detail';
+
+export interface SettingsMasterDetailHandle {
+  pane: SettingsPane;
+  /** Called by the category's own row handler, never derived from selection. */
+  openDetail: () => void;
+  back: () => void;
+}
+
+/**
+ * Pane state for the settings categories that are two panes on a desktop.
+ *
+ * A phone has no room for a 224px list beside a detail pane: measured on a
+ * 412x915 Android viewport, the detail was left 186px wide, and the categories
+ * whose container stacked gave it 48px of height. Below `md` the two panes are
+ * therefore two screens, and this is which one is up.
+ *
+ * The pane is opened by an EXPLICIT row choice, never by a selection that
+ * merely exists: `useCrudList` selects its first row on load and the provider
+ * list falls back to `connectedProviders[0]`, so deriving the pane from
+ * `selectedId` would drop the user into a detail pane they never asked for and
+ * hide the list they came to browse. Desktop ignores this state entirely —
+ * `md:` shows both panes.
+ */
+export function useSettingsMasterDetail(): SettingsMasterDetailHandle {
+  const [pane, setPane] = useState<SettingsPane>('list');
+  const openDetail = useCallback(() => setPane('detail'), []);
+  const back = useCallback(() => setPane('list'), []);
+  return { pane, openDetail, back };
+}

package/src/client/hooks/workspace/expanded-sessions.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Expanded-session rows, shared by the desktop and mobile session sidebars.
+ *
+ * A session row's roster (its `SubagentList`) is shown while that row's id is
+ * in the expanded set, so both sidebars must read and write ONE set — persisted
+ * in `app_settings.omp_sidebar_expanded_sessions` — or a row expanded on the
+ * phone would come back collapsed on the desktop.
+ *
+ * The `?subagent=` deep link auto-expands its session row: a reload on a
+ * subagent transcript must leave the roster entry that opened it visible.
+ */
+
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { loadExpandedSessionIds, saveExpandedSessionIds } from '@/shared/lib/workspace/sidebar-expanded';
+
+export interface ExpandedSessionsHandle {
+  expandedSessionIds: Set<string>;
+  /** Collapse an expanded row, or expand a collapsed one. Persists the result. */
+  toggleSession: (sessionId: string) => void;
+}
+
+export function useExpandedSessions(): ExpandedSessionsHandle {
+  const [searchParams] = useSearchParams();
+  const urlSubagentId = searchParams.get('subagent');
+  const urlSessionId = searchParams.get('sessionId');
+  const [expandedSessionIds, setExpandedSessionIds] = useState<Set<string>>(() => new Set());
+
+  useEffect(() => {
+    const saved = loadExpandedSessionIds();
+    if (saved && saved.size > 0) {
+      setExpandedSessionIds(saved);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!urlSubagentId || !urlSessionId) return;
+    setExpandedSessionIds(prev => {
+      if (prev.has(urlSessionId)) return prev;
+      const next = new Set(prev);
+      next.add(urlSessionId);
+      return next;
+    });
+  }, [urlSubagentId, urlSessionId]);
+
+  const toggleSession = useCallback((sessionId: string) => {
+    setExpandedSessionIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(sessionId)) next.delete(sessionId);
+      else next.add(sessionId);
+      saveExpandedSessionIds(next);
+      return next;
+    });
+  }, []);
+
+  return { expandedSessionIds, toggleSession };
+}

package/src/server/lib/bundler/css.test.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { mkdtemp, rm } from 'fs/promises';
+import { tmpdir } from 'os';
+import { join } from 'path';
+
+import cssPlugin from '@/server/lib/bundler/css';
+
+/**
+ * Build one stylesheet through the REAL plugin with the options the client
+ * build uses (`target: 'bun'`, `minify: true`), and return the emitted CSS.
+ *
+ * This is the end-to-end gate for the nesting bug: Bun's minifier re-nests a
+ * rule's nested at-rule as `@supports (…) { & { … } }` for a non-browser
+ * target, and Chrome then drops it whenever the parent selector names a
+ * pseudo-element. Asserting on the flattener's own output cannot catch that —
+ * only the bundle the browser is actually served can.
+ */
+async function buildThroughPlugin(css: string): Promise<string> {
+  const dir = await mkdtemp(join(tmpdir(), 'ompchamber-css-'));
+  try {
+    await Bun.write(join(dir, 'probe.css'), css);
+    const result = await Bun.build({
+      entrypoints: [join(dir, 'probe.css')],
+      outdir: join(dir, 'out'),
+      target: 'bun',
+      minify: true,
+      plugins: [cssPlugin],
+    });
+    if (!result.success) throw new Error(result.logs.map((log) => log.message).join('\n'));
+    return await Bun.file(join(dir, 'out', 'probe.css')).text();
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+}
+
+describe('css plugin — nested at-rules reach the browser flattened', () => {
+  test('a placeholder colour refinement survives as a top-level @supports', async () => {
+    const out = await buildThroughPlugin(`.probe::placeholder {
+  color: var(--color-ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-ink) 40%, transparent);
+  }
+}
+`);
+
+    // No `&` anywhere: a nested rule under `::placeholder` is inert in Chrome,
+    // which leaves the rule's full-opacity fallback as the final colour.
+    expect(out).not.toMatch(/(?<!\\)&/);
+    expect(out).toContain('@supports');
+    expect(out).toContain('::placeholder');
+    expect(out).toContain('40%');
+  });
+
+  test('a scrollbar thumb keeps its translucent refinement', async () => {
+    const out = await buildThroughPlugin(`::-webkit-scrollbar-thumb {
+  background: var(--theme-ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--theme-ink) 20%, transparent);
+  }
+}
+`);
+
+    expect(out).not.toMatch(/(?<!\\)&/);
+    expect(out).toContain('20%');
+  });
+
+  test('declarations written after the at-rule keep their order in the bundle', async () => {
+    const out = await buildThroughPlugin(`.probe {
+  background: var(--theme-ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--theme-ink) 20%, transparent);
+  }
+  border-radius: 3px;
+}
+`);
+
+    // The trailing declaration must not be hoisted above the at-rule: that
+    // would let the at-rule's `background` win over a later one.
+    expect(out.indexOf('border-radius')).toBeGreaterThan(out.indexOf('@supports'));
+    expect(out).not.toMatch(/(?<!\\)&/);
+  });
+});

package/src/server/lib/bundler/css.ts

@@ -42,6 +42,15 @@
  *    never does), so there is no "build finished" moment to flush at. Writing
  *    each source's faces as its `onLoad` returns is order-independent and works
  *    identically under both entry points.
+ *
+ * 3. **Nested at-rules are flattened** (`flattenNestedAtRules`, registered
+ *    AFTER Tailwind so it sees the expanded tree). Bun's CSS minifier keeps the
+ *    nesting it is handed and, for `target: 'bun'`, re-nests a rule's nested
+ *    at-rule as `@supports (…) { & { … } }` — and Chrome drops a nested rule
+ *    whose parent selector names a pseudo-element. Tailwind emits its colour
+ *    fallbacks in exactly that shape, so the whole app's placeholder and
+ *    scrollbar colours silently collapsed to their fallback. See that module for
+ *    the measurement; this one only has to run it.
  */
 
 import { basename, dirname, isAbsolute, join, resolve as resolvePath } from 'path';
@@ -51,6 +60,7 @@ import type { BunPlugin } from 'bun';
 
 import { FONT_FACE_DIR } from '@/server/lib/assets/font-css.server';
 import { FONT_ROUTE_PREFIX, packageRoot } from '@/server/lib/assets/fonts.server';
+import { flattenNestedAtRules } from '@/server/lib/bundler/nested-at-rules';
 
 /** A `url(...)` whose target is a font file. */
 const URL_FUNCTION = /url\(\s*(['"]?)([^'")]+)\1\s*\)/g;
@@ -100,8 +110,13 @@ const plugin: BunPlugin = {
     build.onLoad({ filter: /\.css$/ }, async (args) => {
       const source = await Bun.file(args.path).text();
       // Tailwind first: it parses `@import "tailwindcss"` and `@theme`, and the
-      // urls it emits are the ones the extraction below has to recognise.
-      const expanded = await postcss([tailwind()]).process(source, { from: args.path });
+      // urls it emits are the ones the extraction below has to recognise. The
+      // flattener runs after it, because the nesting it removes is Tailwind's
+      // own output — and before the font extraction, so a hoisted face is still
+      // recognised as a face.
+      const expanded = await postcss([tailwind(), flattenNestedAtRules()]).process(source, {
+        from: args.path,
+      });
       const { rest, faces } = splitFontFaces(expanded.css, dirname(args.path));
       if (faces.length > 0) {
         const target = join(packageRoot(), FONT_FACE_DIR, `${basename(args.path)}`);

package/src/server/lib/bundler/nested-at-rules.test.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+import postcss from 'postcss';
+
+import { flattenNestedAtRules } from '@/server/lib/bundler/nested-at-rules';
+
+/** Run the flattener and return the CSS it produced. */
+async function flatten(css: string): Promise<string> {
+  const result = await postcss([flattenNestedAtRules()]).process(css, { from: undefined });
+  return result.css;
+}
+
+/** Every `&` left outside an escaped class name — an unflattened nesting marker. */
+const unescapedAmpersands = (css: string): number => (css.match(/(?<!\\)&/g) ?? []).length;
+
+describe('flattenNestedAtRules', () => {
+  test('hoists a nested @supports out of a pseudo-element rule', async () => {
+    // Tailwind's shape: a fallback declaration, then the color-mix refinement.
+    const out = await flatten(
+      `.placeholder-ink\\/40::placeholder {
+        color: var(--color-ink);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-ink) 40%, transparent);
+        }
+      }`,
+    );
+
+    // The at-rule is at the top level and carries the resolved selector itself:
+    // a nested rule whose parent names a pseudo-element is dropped by Chrome.
+    expect(unescapedAmpersands(out)).toBe(0);
+    expect(out).not.toMatch(/::placeholder\s*\{[^}]*@supports/);
+    const root = postcss.parse(out);
+    const atRules = root.nodes.filter((n) => n.type === 'atrule');
+    expect(atRules).toHaveLength(1);
+    expect(atRules[0].name).toBe('supports');
+    expect(atRules[0].toString()).toContain('.placeholder-ink\\/40::placeholder');
+    expect(atRules[0].toString()).toContain('color-mix');
+  });
+
+  test('keeps declaration order, so the cascade is unchanged', async () => {
+    const out = await flatten(
+      `.a { color: red; @supports (display: block) { color: blue; } border-radius: 3px; }`,
+    );
+
+    const root = postcss.parse(out);
+    const order = root.nodes.map((node) =>
+      node.toString().replace(/\s+/g, ' '),
+    );
+    // `border-radius` was written AFTER the at-rule and must still follow it —
+    // moving it before would let the at-rule's `color` be overridden.
+    expect(order).toHaveLength(3);
+    expect(order[0]).toBe('.a { color: red; }');
+    expect(order[1]).toContain('@supports');
+    expect(order[2]).toBe('.a { border-radius: 3px; }');
+  });
+
+  test('hoists inside the layer that contained the rule, not to the root', async () => {
+    const out = await flatten(
+      `@layer base { .b::placeholder { color: red; @supports (display: block) { color: blue; } } }`,
+    );
+    expect(out).not.toMatch(/::placeholder\s*\{[^}]*@supports/);
+    expect(unescapedAmpersands(out)).toBe(0);
+    // The refinement stays inside `@layer base` — hoisting it past the layer
+    // boundary would change which layer wins.
+    const layer = postcss.parse(out).nodes.find((n) => n.type === 'atrule' && n.name === 'layer');
+    expect(layer?.toString()).toContain('@supports');
+  });
+
+  test('resolves an explicit & and leaves other rules alone', async () => {
+    const out = await flatten(
+      `.card { color: red; @supports (display: block) { & { color: blue; } } }
+       .plain { color: green; }`,
+    );
+    expect(out).not.toContain('&');
+    const root = postcss.parse(out);
+    const supports = root.nodes.find((n) => n.type === 'atrule');
+    expect(supports?.toString()).toContain('.card');
+    expect(root.toString()).toContain('.plain');
+  });
+
+  test('flattens a rule nested inside the hoisted at-rule on the next pass', async () => {
+    const out = await flatten(
+      `.outer { @supports (display: block) { .inner { color: blue; } } }`,
+    );
+    expect(unescapedAmpersands(out)).toBe(0);
+    // The inner rule's selector is resolved against its parent, not left bare.
+    expect(postcss.parse(out).toString()).toContain('.outer .inner');
+  });
+
+  test('leaves an already-flat stylesheet byte-identical', async () => {
+    const flat = `.a { color: red; }
+@supports (display: block) { .a { color: blue; } }
+@layer base { .b { color: green; } }`;
+    expect(await flatten(flat)).toBe(flat);
+  });
+});