ompchamber 3.0.0 → 3.1.1

package/src/client/hooks/workspace/file-tree-actions.ts

@@ -0,0 +1,250 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Everything a file-tree row does that is not rendering: the context menu's
+ * action dispatch, the create/rename/delete dialogs and their server calls.
+ *
+ * Extracted from the row component because it is a stateful cluster with one
+ * shared dependency (`/api/fs/action` and the fetcher that submits to it), and
+ * because the row is at the repository's line ceiling. The component keeps the
+ * markup and the handlers that need its own DOM node; this keeps the behavior.
+ */
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { FormEvent, RefObject } from 'preact/compat';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import { toAbsolutePath } from '@/shared/lib/fs/paths';
+import { copyToClipboard } from '@/client/hooks/ui/clipboard';
+
+/** The shape `/api/fs/action` answers with, as far as a row reads it. */
+interface FsActionResponse {
+  success?: boolean;
+  /** Present on the git-history payload, which the history modal reads. */
+  type?: string;
+  /** Relative path of a freshly created file. */
+  path?: string;
+  error?: string;
+}
+
+export interface FileActionTarget {
+  path: string;
+  name: string;
+  /** Absolute base dir of the listing, anchoring Copy Path. */
+  basePath?: string;
+  rootPath?: string;
+  repo?: string;
+}
+
+export interface FileActionDeps {
+  file: FileActionTarget;
+  /** Which diff to open, when the row is a changed file. */
+  diff?: { staged?: boolean; status?: string };
+  onOpenFile?: (file: { path: string; name: string; root?: string; repo?: string }) => void;
+  onActionComplete: () => void;
+}
+
+export interface FileActions {
+  contextMenu: { x: number; y: number } | null;
+  contextMenuRef: RefObject<HTMLDivElement>;
+  openContextMenu: (x: number, y: number) => void;
+  closeContextMenu: () => void;
+  showRenameModal: boolean;
+  showDeleteModal: boolean;
+  showHistoryModal: boolean;
+  showCreateModal: boolean;
+  /** The server's refusal for the create request, rendered inside its dialog. */
+  createError: string | null;
+  createName: string;
+  setCreateName: (value: string) => void;
+  renameValue: string;
+  setRenameValue: (value: string) => void;
+  /** True while a request is in flight; every dialog's buttons read it. */
+  busy: boolean;
+  /** The fetcher's own state/data, for the history modal. */
+  fetcherState: string;
+  fetcherData: FsActionResponse | undefined;
+  handleAction: (actionType: string) => void;
+  submitCreate: (e: FormEvent) => void;
+  submitRename: (e: FormEvent) => void;
+  submitDelete: () => void;
+  closeCreate: () => void;
+  closeDelete: () => void;
+  closeRename: () => void;
+  closeHistory: () => void;
+}
+
+export function useFileActions({ file, diff, onOpenFile, onActionComplete }: FileActionDeps): FileActions {
+  const actionFetcher = useFetcher<FsActionResponse>();
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const [showRenameModal, setShowRenameModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showHistoryModal, setShowHistoryModal] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [createName, setCreateName] = useState('');
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState(file.path);
+  /** Which dialog the in-flight request belongs to, so its result is routed. */
+  const pendingActionRef = useRef<'create' | null>(null);
+
+  const repo = file.repo;
+  const rootPath = file.rootPath;
+
+  /**
+   * The payload already acted on.
+   *
+   * The fetcher keeps `data` until the next request, and the callbacks below
+   * (`onActionComplete` → the panel's refresh → a re-render with a fresh
+   * callback identity) would otherwise re-run this effect for the SAME
+   * response forever: an unguarded effect here is an infinite refresh loop that
+   * pins the tab the moment a file is created.
+   */
+  const handledRef = useRef<FsActionResponse | null>(null);
+
+  useEffect(() => {
+    if (actionFetcher.state !== 'idle' || !actionFetcher.data) return;
+    const data = actionFetcher.data;
+    if (handledRef.current === data) return;
+    handledRef.current = data;
+    // The fetcher parses the body whatever the status, so a refusal arrives as
+    // `data.error` rather than as a throw — which is what lets the create
+    // dialog stay open and put the reason beside the field.
+    if (pendingActionRef.current === 'create') {
+      pendingActionRef.current = null;
+      if (data.success && data.path) {
+        // The user asked for a file to work on, so it opens: closing the dialog
+        // and refreshing the tree alone would leave them hunting for the empty
+        // row they just created.
+        setShowCreateModal(false);
+        setCreateName('');
+        setCreateError(null);
+        onActionComplete();
+        onOpenFile?.({
+          path: data.path,
+          name: data.path.split('/').pop() || data.path,
+          root: rootPath,
+          repo: repo || '.',
+        });
+      } else {
+        setCreateError(data.error || 'Could not create the file');
+      }
+      return;
+    }
+    if (data.success && !data.type) {
+      setShowRenameModal(false);
+      setShowDeleteModal(false);
+      onActionComplete();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionFetcher.state, actionFetcher.data]);
+
+  const submitAction = (formData: FormData) => {
+    if (repo && repo !== '.') formData.append('repo', repo);
+    if (rootPath) formData.append('root', rootPath);
+    void actionFetcher.submit(formData, { method: 'post', action: '/api/fs/action' });
+  };
+
+  const openFile = () => {
+    onOpenFile?.({ path: file.path, name: file.name, root: rootPath, repo: repo || '.' });
+  };
+
+  const handleAction = (actionType: string) => {
+    setContextMenu(null);
+    if (actionType === 'view') {
+      openFile();
+    } else if (actionType === 'diff') {
+      window.dispatchEvent(new CustomEvent('omp:open-diff', {
+        detail: {
+          file: file.path,
+          staged: diff?.staged,
+          status: diff?.status || 'M',
+          repo: repo || '.',
+          root: rootPath,
+        },
+      }));
+    } else if (actionType === 'explorer') {
+      const fd = new FormData();
+      fd.append('actionType', 'open_explorer');
+      fd.append('path', file.path);
+      submitAction(fd);
+    } else if (actionType === 'copy_path') {
+      void copyToClipboard(toAbsolutePath(file.basePath, file.path));
+    } else if (actionType === 'copy_relative') {
+      void copyToClipboard(file.path);
+    } else if (actionType === 'history') {
+      setShowHistoryModal(true);
+      const fd = new FormData();
+      fd.append('actionType', 'git_history');
+      fd.append('path', file.path);
+      submitAction(fd);
+    } else if (actionType === 'rename') {
+      setRenameValue(file.path);
+      setShowRenameModal(true);
+    } else if (actionType === 'new_file') {
+      setCreateName('');
+      setCreateError(null);
+      setShowCreateModal(true);
+    } else if (actionType === 'delete') {
+      setShowDeleteModal(true);
+    }
+  };
+
+  const submitCreate = (e: FormEvent) => {
+    e.preventDefault();
+    const name = createName.trim();
+    if (!name) return;
+    setCreateError(null);
+    pendingActionRef.current = 'create';
+    const fd = new FormData();
+    fd.append('actionType', 'create');
+    fd.append('path', file.path);
+    fd.append('name', name);
+    submitAction(fd);
+  };
+
+  const submitRename = (e: FormEvent) => {
+    e.preventDefault();
+    const fd = new FormData();
+    fd.append('actionType', 'rename');
+    fd.append('path', file.path);
+    fd.append('newPath', renameValue);
+    submitAction(fd);
+  };
+
+  const submitDelete = () => {
+    const fd = new FormData();
+    fd.append('actionType', 'delete');
+    fd.append('path', file.path);
+    submitAction(fd);
+  };
+
+  return {
+    contextMenu,
+    contextMenuRef,
+    openContextMenu: (x, y) => setContextMenu({ x, y }),
+    closeContextMenu: () => setContextMenu(null),
+    showRenameModal,
+    showDeleteModal,
+    showHistoryModal,
+    showCreateModal,
+    createError,
+    createName,
+    setCreateName,
+    renameValue,
+    setRenameValue,
+    busy: actionFetcher.state !== 'idle',
+    fetcherState: actionFetcher.state,
+    fetcherData: actionFetcher.data,
+    handleAction,
+    submitCreate,
+    submitRename,
+    submitDelete,
+    closeCreate: () => setShowCreateModal(false),
+    closeDelete: () => setShowDeleteModal(false),
+    closeRename: () => setShowRenameModal(false),
+    closeHistory: () => setShowHistoryModal(false),
+  };
+}

package/src/client/hooks/workspace/session-todos.ts

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Reads a session's live todo list for the right-panel view.
+ *
+ * The list belongs to omp and its only durable home is the session transcript,
+ * so this hook is a reader: it fetches `GET /api/omp/session-todos` and re-reads
+ * on two triggers —
+ *
+ *   - a poll (`usePanelRefresh`, paused while hidden), which covers a list the
+ *     agent changed while this client was not the one driving it;
+ *   - `omp:session-updated`, which the chat dispatches at every turn boundary
+ *     and therefore right after each `todo` tool call, so the panel follows a
+ *     running agent without waiting out the poll.
+ *
+ * The event path is throttled: one run emits the signal several times around a
+ * single tool call, and the read is a disk parse. A read already in flight is
+ * not cancelled by a newer trigger — the server answers an unchanged session
+ * from a stat, so the extra request is cheap, and dropping the newer one would
+ * leave the panel showing the list from before the call that just finished.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import { usePanelRefresh } from '@/client/hooks/workspace/panel-refresh';
+import { TODO_REFRESH_EVENT_THROTTLE_MS } from '@/shared/lib/workspace/refresh-cadence';
+import type { SessionTodosPayload } from '@/shared/types/todo';
+
+export interface SessionTodosState {
+  data: SessionTodosPayload | null;
+  isLoading: boolean;
+  /** Set when the last read failed; the previous payload is kept meanwhile. */
+  error: string | null;
+  reload: () => void;
+}
+
+export function useSessionTodos(sessionId: string | null, enabled: boolean): SessionTodosState {
+  const [data, setData] = useState<SessionTodosPayload | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Latest session id for the fetcher, so switching sessions does not have to
+  // rebuild the callback (and with it the poll interval) on every render.
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
+  // Guards against a response for a session the user has already left being
+  // written into the panel that now shows a different one.
+  const requestRef = useRef(0);
+
+  const load = useCallback(() => {
+    const id = sessionIdRef.current;
+    if (!id) {
+      setData(null);
+      return;
+    }
+    const request = ++requestRef.current;
+    setIsLoading(true);
+    fetch(`/api/omp/session-todos?sessionId=${encodeURIComponent(id)}`)
+      .then((response) => {
+        if (!response.ok) throw new Error(`Todo request failed (${response.status})`);
+        return response.json() as Promise<SessionTodosPayload>;
+      })
+      .then((payload) => {
+        if (requestRef.current !== request) return;
+        setData(payload);
+        setError(null);
+      })
+      .catch((err: unknown) => {
+        if (requestRef.current !== request) return;
+        setError(err instanceof Error ? err.message : 'Failed to load todos');
+      })
+      .finally(() => {
+        if (requestRef.current === request) setIsLoading(false);
+      });
+  }, []);
+
+  // A session switch must not render the previous session's list under the new
+  // title: drop the payload and re-read immediately.
+  useEffect(() => {
+    setData(null);
+    setError(null);
+    if (sessionId) load();
+  }, [sessionId, load]);
+
+  usePanelRefresh(load, enabled);
+
+  const throttleRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useChamberEvent('omp:session-updated', () => {
+    if (!enabled || throttleRef.current !== undefined) return;
+    throttleRef.current = setTimeout(() => {
+      throttleRef.current = undefined;
+      load();
+    }, TODO_REFRESH_EVENT_THROTTLE_MS);
+  });
+
+  useEffect(() => () => clearTimeout(throttleRef.current), []);
+
+  return { data, isLoading, error, reload: load };
+}

package/src/client/tailwind.css

@@ -246,6 +246,36 @@
  * The selector keys off the variant attribute, not a list of theme ids. */
 .shiki span { color: var(--shiki-light); }
 html[data-theme-variant="dark"] .shiki span { color: var(--shiki-dark); }
+
+/* Find matches, painted inside the token spans the highlighter emits. An
+ * inline <mark> colours a background without moving a glyph, which is what
+ * keeps the transparent <textarea> above aligned with this layer — a block or
+ * a padding would shift the text under the caret. `color: inherit` is required:
+ * a <mark> would otherwise take the UA's own black-on-yellow, ignoring the
+ * dual-theme token colour it sits inside.
+ *
+ * No `border-radius`, and the current match is marked with TOP/BOTTOM borders
+ * rather than an outline: a match spanning several tokens (`const alpha` is
+ * three) is emitted as one <mark> per token, so any per-fragment decoration
+ * that draws vertical edges — radius, outline, left/right border — paints a
+ * seam in the middle of the match. Horizontal edges join seamlessly. */
+.shiki .find-match {
+  color: inherit;
+  background: color-mix(in srgb, var(--theme-warning) 32%, transparent);
+}
+/* An extra ⌘D selection: same geometry as a find match, different ink. The
+ * caret can only live in the primary range, so the two must not look alike —
+ * the user has to see where their keystrokes will land. */
+.shiki .find-match[data-occurrence] {
+  background: color-mix(in srgb, var(--theme-info) 30%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--theme-info) 55%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--theme-info) 55%, transparent);
+}
+.shiki .find-match[data-find-current] {
+  background: color-mix(in srgb, var(--theme-warning) 55%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--theme-warning) 75%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--theme-warning) 75%, transparent);
+}
 .prose-content .katex-display { overflow-x: auto; overflow-y: hidden; }
 
 /* Math placeholder: `marked.ts` emits a `.math-pending` span and KaTeX is

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);
+  });
+});