feat(web): establish redesign primitives and shell

AGENTS.md

@@ -203,6 +203,7 @@ Architecture and its constraints: `docs/internals/overview.md`. Glossary: `docs/
   projection, tight loops) or duplicate an existing tracing boundary; explain that choice nearby.
   Named `Effect.fn` creates a span; the unnamed form does not. Preserve existing span names and
   options, and pass combinators as additional function-builder arguments.
+- Before building UI, open `/design-system` in a dev build: it renders every primitive, variant and type role. Text takes a role (`<Text variant>` or `text-title` … `text-micro`), not `text-sm` or `font-medium`; a clickable thing is a `components/ui` control, not a styled `<button>` or `<a>`. `t3code/no-raw-type-classes` and `t3code/no-styled-raw-controls` fail lint, and their per-file ceilings in `vite.config.ts` only go down.
 - Inferred types over annotations. `any` is the enemy.
 - Default to no comment. Write one only for a constraint, an external quirk, or an invariant the code can't show, in one line where you can and four at most. Don't restate names or signatures, narrate steps, record history, or explain the fix you just made; the PR carries that. `t3code/no-low-value-comments` enforces the length cap and the mechanical cases.
 - React effects are for synchronizing with something outside React. Derive in render and act in handlers instead of syncing state, but don't hide real lifecycle work in refs or stores to dodge one. The `t3code/no-unreasoned-state-sync` lint rule reports every effect; one that stays states its reason with `// oxlint-disable-next-line t3code/no-unreasoned-state-sync -- <why>`.

apps/desktop/src/app/DesktopLifecycle.test.ts

@@ -64,7 +64,9 @@ function layerElectronApp(
 
 const layerElectronTheme = Layer.succeed(ElectronTheme.ElectronTheme, {
   shouldUseDarkColors: Effect.succeed(false),
+  shouldUseDarkChrome: Effect.succeed(false),
   setSource: () => Effect.void,
+  setBlackChrome: () => Effect.void,
   onUpdated: () => Effect.void,
 });
 

apps/desktop/src/electron/ElectronTheme.ts

@@ -26,7 +26,14 @@ export class ElectronTheme extends Context.Service<
   ElectronTheme,
   {
     readonly shouldUseDarkColors: Effect.Effect<boolean>;
+    /**
+     * Whether the window chrome (native background, caption button symbols)
+     * is dark: the dark appearance, or the renderer's light, black chrome.
+     */
+    readonly shouldUseDarkChrome: Effect.Effect<boolean>;
     readonly setSource: (theme: DesktopTheme) => Effect.Effect<void, ElectronThemeSetSourceError>;
+    /** The renderer's light, black chrome appearance; notifies onUpdated listeners. */
+    readonly setBlackChrome: (enabled: boolean) => Effect.Effect<void>;
     readonly onUpdated: (listener: () => void) => Effect.Effect<void, never, Scope.Scope>;
   }
 >()("@t3tools/desktop/electron/ElectronTheme") {}
@@ -38,6 +45,10 @@ type WatchSystemColorScheme = (onChange: (scheme: LinuxColorScheme) => void) =>
 export const makeWith = Effect.fn("ElectronTheme.make")(function* (
   watchSystemColorScheme: WatchSystemColorScheme | undefined,
 ) {
+  // Black chrome is renderer state, not a native theme source, so the service
+  // keeps it and fans changes out to the same listeners as native updates.
+  let blackChrome = false;
+  const blackChromeListeners = new Set<() => void>();
   let source: DesktopTheme = Electron.nativeTheme.themeSource;
   let systemScheme: LinuxColorScheme = null;
   // On Linux, Electron reads the desktop color scheme once and then ignores the settings
@@ -64,6 +75,7 @@ export const makeWith = Effect.fn("ElectronTheme.make")(function* (
 
   return ElectronTheme.of({
     shouldUseDarkColors: Effect.sync(() => Electron.nativeTheme.shouldUseDarkColors),
+    shouldUseDarkChrome: Effect.sync(() => Electron.nativeTheme.shouldUseDarkColors || blackChrome),
     setSource: Effect.fn("ElectronTheme.setSource")(function (theme) {
       return Effect.try({
         try: () => {
@@ -73,15 +85,24 @@ export const makeWith = Effect.fn("ElectronTheme.make")(function* (
         catch: (cause) => new ElectronThemeSetSourceError({ source: theme, cause }),
       });
     }),
+    setBlackChrome: Effect.fn("ElectronTheme.setBlackChrome")(function (enabled) {
+      return Effect.sync(() => {
+        if (blackChrome === enabled) return;
+        blackChrome = enabled;
+        for (const listener of blackChromeListeners) listener();
+      });
+    }),
     onUpdated: Effect.fn("ElectronTheme.onUpdated")(function (listener) {
       return Effect.acquireRelease(
         Effect.suspend(() => {
           Electron.nativeTheme.on("updated", listener);
+          blackChromeListeners.add(listener);
           return Effect.void;
         }),
         () =>
           Effect.suspend(() => {
             Electron.nativeTheme.removeListener("updated", listener);
+            blackChromeListeners.delete(listener);
             return Effect.void;
           }),
       );

apps/desktop/src/ipc/DesktopIpcHandlers.ts

@@ -54,8 +54,10 @@ import {
   toLocalBackendPath,
   pickProjectFavicon,
   pickThemeFiles,
+  setBlackChrome,
   setTheme,
   syncHtmlFullscreen,
+  setWindowButtonsVisible,
   showContextMenu,
 } from "./methods/window.ts";
 import {
@@ -152,6 +154,7 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
   yield* ipc.handle(pickProjectFavicon);
   yield* ipc.handle(pickThemeFiles);
   yield* ipc.handle(setTheme);
+  yield* ipc.handle(setBlackChrome);
   yield* ipc.handle(showContextMenu);
   yield* ipc.handle(openExternal);
   yield* ipc.handle(readMedia);
@@ -162,6 +165,7 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
   yield* ipc.handle(pasteAsText);
   yield* ipc.handle(revealWindow);
   yield* ipc.handle(syncHtmlFullscreen);
+  yield* ipc.handle(setWindowButtonsVisible);
   yield* ipc.handle(probeRemoteEditors);
   yield* ipc.handle(getUpdateState);
   yield* ipc.handle(setUpdateChannel);

apps/desktop/src/ipc/channels.ts

@@ -4,6 +4,7 @@ export const SET_NOTIFICATION_BADGE_CHANNEL = "desktop:set-notification-badge";
 export const PICK_PROJECT_FAVICON_CHANNEL = "desktop:pick-project-favicon";
 export const PICK_THEME_FILES_CHANNEL = "desktop:pick-theme-files";
 export const SET_THEME_CHANNEL = "desktop:set-theme";
+export const SET_BLACK_CHROME_CHANNEL = "desktop:set-black-chrome";
 export const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 export const OPEN_EXTERNAL_CHANNEL = "desktop:open-external";
 export const READ_MEDIA_CHANNEL = "desktop:read-media";
@@ -21,6 +22,7 @@ export const TRACKPAD_SCROLL_END_CHANNEL = "desktop:trackpad-scroll-end";
 export const GET_WINDOW_FULLSCREEN_STATE_CHANNEL = "desktop:get-window-fullscreen-state";
 export const WINDOW_FULLSCREEN_STATE_CHANNEL = "desktop:window-fullscreen-state";
 export const SYNC_HTML_FULLSCREEN_CHANNEL = "desktop:sync-html-fullscreen";
+export const SET_WINDOW_BUTTONS_VISIBLE_CHANNEL = "desktop:set-window-buttons-visible";
 export const DESKTOP_APP_ACTIVATION_READY_CHANNEL = "desktop:app-activation-ready";
 export const DESKTOP_APP_ACTIVATION_COMPLETE_CHANNEL = "desktop:app-activation-complete";
 export const DESKTOP_APP_ACTIVATION_REQUEST_CHANNEL = "desktop:app-activation-request";