pilotswarm 0.5.32 → 0.5.34

package/ui/core/src/themes/hacker-x-matrix.js

@@ -1,9 +1,10 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_VSCODE } from "./helpers.js";
 
 const hackerXMatrixTheme = createTheme({
     id: "hacker-x-matrix",
     label: "Hacker X - Matrix",
     description: "Black-and-phosphor terminal palette with vivid green glow and CRT-style contrast.",
+    group: THEME_GROUP_VSCODE,
     page: {
         background: "#030603",
         foreground: "#c8ffc8",

package/ui/core/src/themes/hacker-x-orion-prime.js

@@ -1,9 +1,10 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_VSCODE } from "./helpers.js";
 
 const hackerXOrionPrimeTheme = createTheme({
     id: "hacker-x-orion-prime",
     label: "Hacker X - Orion Prime",
     description: "Deep-space navy palette with electric cyan, violet, and amber accents.",
+    group: THEME_GROUP_VSCODE,
     page: {
         background: "#0a0f1e",
         foreground: "#e8f2ff",

package/ui/core/src/themes/helpers.js

@@ -1,3 +1,20 @@
+// Picker groups. These sort by PROVENANCE, not by look: "VS Code" is a port of
+// a theme people already know from their editor, "Retro" is an homage to a
+// specific machine or piece of software, and everything PilotSwarm made for
+// itself falls to "Others". Sorting by look instead would put Terminal Green
+// and Hacker X - Matrix together and then have nowhere to put GitHub Light.
+export const THEME_GROUP_VSCODE = "VS Code";
+export const THEME_GROUP_RETRO = "Retro";
+export const THEME_GROUP_OTHER = "Others";
+
+// Display order for the picker. Not alphabetical: "Others" is the leftover
+// bucket and reads wrong anywhere but last.
+export const THEME_GROUP_ORDER = Object.freeze([
+    THEME_GROUP_VSCODE,
+    THEME_GROUP_RETRO,
+    THEME_GROUP_OTHER,
+]);
+
 function freezeTheme(theme) {
     return Object.freeze({
         ...theme,
@@ -41,7 +58,7 @@ export function isThemeLight(theme) {
     return getRelativeLuminance(background) >= 0.5;
 }
 
-export function createTheme({ id, label, description, page, terminal, tui = {}, richChat = false, icon = null }) {
+export function createTheme({ id, label, description, group = THEME_GROUP_OTHER, page, terminal, tui = {}, icon = null }) {
     const baseTui = {
         background: page?.background || terminal?.background || "#000000",
         surface: terminal?.background || page?.background || "#000000",
@@ -73,9 +90,10 @@ export function createTheme({ id, label, description, page, terminal, tui = {},
         id,
         label,
         description,
-        // Portal-only: this theme renders the chat transcript in the rich
-        // (desktop-style) view. The TUI ignores it.
-        richChat: Boolean(richChat),
+        // Which section of the picker this theme lands in. Defaulting to
+        // "Others" rather than throwing means a theme added without a group
+        // still shows up — it just shows up in the leftover bucket.
+        group,
         // Portal-only: an optional brand mark carried BY the theme. When set it
         // outranks the deployment's own logo, because a theme that restyles the
         // whole shell and then leaves a foreign logo in the corner reads as

package/ui/core/src/themes/high-contrast-mono.js

@@ -1,9 +1,10 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_OTHER } from "./helpers.js";
 
 const highContrastMonoTheme = createTheme({
     id: "high-contrast-mono",
     label: "High Contrast Mono",
     description: "Accessibility-first monochrome theme with cobalt selection and severity colors only where they matter.",
+    group: THEME_GROUP_OTHER,
     page: {
         background: "#000000",
         foreground: "#f8f8f2",

package/ui/core/src/themes/index.js

@@ -1,7 +1,7 @@
+import { THEME_GROUP_ORDER } from "./helpers.js";
 import githubDarkTheme from "./github-dark.js";
 import githubLightTheme from "./github-light.js";
 import workspaceDarkTheme from "./workspace-dark.js";
-import workspaceDarkRichTheme from "./workspace-dark-rich.js";
 import cobalt2Theme from "./cobalt2.js";
 import draculaTheme from "./dracula.js";
 import catppuccinMochaTheme from "./catppuccin-mocha.js";
@@ -10,17 +10,33 @@ import hackerXOrionPrimeTheme from "./hacker-x-orion-prime.js";
 import gruvboxDarkTheme from "./gruvbox-dark.js";
 import noctisTheme from "./noctis.js";
 import noctisObscuroTheme from "./noctis-obscuro.js";
-import darkHighContrastTheme from "./dark-high-contrast.js";
 import terminalGreenTheme from "./terminal-green.js";
 import highContrastMonoTheme from "./high-contrast-mono.js";
 import win95Theme from "./win95.js";
 import msDosTheme from "./ms-dos.js";
 import doomTheme from "./doom.js";
 import winampTheme from "./winamp.js";
+import rustTheme from "./rust.js";
+import spongebobTheme from "./spongebob.js";
+
+// Themes are ordered by GROUP first, then alphabetically inside it — the
+// picker renders a heading whenever the group changes, so this sort IS the
+// picker's structure. Sorting alphabetically across the whole list (which is
+// what this did before groups existed) would interleave the sections and the
+// headings would repeat.
+function byGroupThenLabel(left, right) {
+    const leftGroup = THEME_GROUP_ORDER.indexOf(left.group);
+    const rightGroup = THEME_GROUP_ORDER.indexOf(right.group);
+    // An unknown group sorts last rather than first: indexOf gives -1, which
+    // would otherwise float a mis-tagged theme above every real section.
+    const leftRank = leftGroup === -1 ? Number.MAX_SAFE_INTEGER : leftGroup;
+    const rightRank = rightGroup === -1 ? Number.MAX_SAFE_INTEGER : rightGroup;
+    if (leftRank !== rightRank) return leftRank - rightRank;
+    return left.label.localeCompare(right.label, undefined, { sensitivity: "base" });
+}
 
 const THEMES = Object.freeze([
     workspaceDarkTheme,
-    workspaceDarkRichTheme,
     draculaTheme,
     githubDarkTheme,
     githubLightTheme,
@@ -31,19 +47,22 @@ const THEMES = Object.freeze([
     gruvboxDarkTheme,
     noctisTheme,
     noctisObscuroTheme,
-    darkHighContrastTheme,
     terminalGreenTheme,
     highContrastMonoTheme,
     win95Theme,
     msDosTheme,
     doomTheme,
     winampTheme,
-].sort((left, right) => left.label.localeCompare(right.label, undefined, { sensitivity: "base" })));
+    rustTheme,
+    spongebobTheme,
+].sort(byGroupThenLabel));
 
 const THEME_MAP = new Map(THEMES.map((theme) => [theme.id, theme]));
 
 export const DEFAULT_THEME_ID = noctisObscuroTheme.id;
 
+export { THEME_GROUP_ORDER } from "./helpers.js";
+
 export function listThemes() {
     return THEMES;
 }

package/ui/core/src/themes/ms-dos.js

@@ -1,4 +1,4 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_RETRO } from "./helpers.js";
 
 // MS-DOS 2.0 (1983) — MDA/CGA, text only, no windows.
 //
@@ -19,6 +19,7 @@ const msDosTheme = createTheme({
     id: "ms-dos",
     label: "MS-DOS 2.0",
     description: "CGA light-grey on black, the 16-colour CGA palette with brown, and CP437 box framing.",
+    group: THEME_GROUP_RETRO,
     page: {
         background: "#000000",
         foreground: "#aaaaaa",

package/ui/core/src/themes/noctis-obscuro.js

@@ -1,9 +1,10 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_VSCODE } from "./helpers.js";
 
 const noctisObscuroTheme = createTheme({
     id: "noctis-obscuro",
     label: "Noctis Obscuro",
     description: "Deep obsidian palette with cool blue accents and restrained contrast for long sessions.",
+    group: THEME_GROUP_VSCODE,
     page: {
         background: "#0b1117",
         foreground: "#c7d1da",

package/ui/core/src/themes/noctis.js

@@ -1,9 +1,10 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_VSCODE } from "./helpers.js";
 
 const noctisTheme = createTheme({
     id: "noctis",
     label: "Noctis",
     description: "Dark cyan-tinted palette with warm and cold medium contrast accents.",
+    group: THEME_GROUP_VSCODE,
     page: {
         background: "#052529",
         foreground: "#b2cacd",

package/ui/core/src/themes/rust.js

@@ -0,0 +1,125 @@
+import { createTheme, THEME_GROUP_OTHER } from "./helpers.js";
+
+// Rust (2010–) — oxidised iron, and the compiler that talks to you.
+//
+// The obvious move is "orange theme". The better one is to notice that Rust's
+// real visual signature is not the logo, it is RUSTC OUTPUT: a warm accent on
+// cold graphite, a blue gutter rail down the left of every diagnostic, and a
+// strict three-level vocabulary — error red, warning yellow, help cyan — with
+// cargo's green reserved for the two lines that mean "it worked". That is a
+// status palette a session list can use directly, so it is the one this theme
+// adopts wholesale.
+//
+// The ground is stone graphite rather than the brown DOOM already owns. Iron
+// oxide is the ACCENT here, not the chrome; the frame stays cold so the orange
+// has something to be warm against. That single decision is what keeps the two
+// warm-dark themes from collapsing into each other.
+//
+// Note the cyan slot carries Ferris orange. The portal derives `--ps-accent`
+// from `tui.cyan` (see applyDocumentTheme), so the accent role travels on that
+// slot regardless of its name — and an orange accent is the entire point of a
+// Rust theme. rustc's cyan `help:` register is given to `blue` instead, which
+// is where the gutter rail lives anyway.
+const rustTheme = createTheme({
+    id: "rust",
+    label: "Rust",
+    description: "Graphite and iron oxide, Ferris in the corner, and rustc's diagnostic levels as the status palette.",
+    group: THEME_GROUP_OTHER,
+    // Ferris, drawn in blocks rather than curves — the repo's other marks are
+    // pixel art (see doom.js, winamp.js), and a smooth crab beside a 32px
+    // DOOM face would read as a different set. Blocks also survive favicon
+    // size, which a thin-limbed vector crab does not.
+    icon: {
+        viewBox: "0 0 32 32",
+        paths: [
+            { d: "M0 0h32v32H0z", fill: "#241f1c" },              // recessed bay
+            // Eyes sit just clear of the shell on stubby stalks. They were
+            // tall at first and the whole mark read as a Space Invader —
+            // Ferris is WIDE and LOW, and the silhouette only says crab once
+            // the shell is much broader than the gap above it.
+            { d: "M11.5 9.5h1.5v2h-1.5z", fill: "#d63a00" },
+            { d: "M19 9.5h1.5v2h-1.5z", fill: "#d63a00" },
+            { d: "M10.5 6h3.5v3.5h-3.5z", fill: "#ffe9dd" },
+            { d: "M18 6h3.5v3.5H18z", fill: "#ffe9dd" },
+            { d: "M11.5 7h1.5v1.5h-1.5z", fill: "#1a1210" },
+            { d: "M19 7h1.5v1.5H19z", fill: "#1a1210" },
+            // Shell, stepped out to a flat oval.
+            { d: "M10 11.5h12v2H10z", fill: "#ff7a3d" },          // top-lit dome
+            { d: "M7 13.5h18v3H7z", fill: "#f74c00" },
+            { d: "M5 16.5h22v4H5z", fill: "#f74c00" },
+            { d: "M7 20.5h18v1.8H7z", fill: "#f74c00" },
+            { d: "M14.5 18h3v1.4h-3z", fill: "#c23c00" },         // mouth
+            // Pincers: a solid block with the opening cut back out in the
+            // ground colour, which is cheaper than describing a C in one path.
+            // They are held ABOVE the shell's widest row with a sliver of
+            // ground between — butted straight onto it they merged into one
+            // wide mass and stopped reading as claws at all.
+            { d: "M0 11h4.5v6.5H0z", fill: "#d63a00" },
+            { d: "M0 13.2h3v2H0z", fill: "#241f1c" },
+            { d: "M27.5 11h4.5v6.5h-4.5z", fill: "#d63a00" },
+            { d: "M29 13.2h3v2h-3z", fill: "#241f1c" },
+            // Legs
+            { d: "M8.5 22.3h2.5v2.4H8.5z", fill: "#d63a00" },
+            { d: "M14.75 22.3h2.5v2.4h-2.5z", fill: "#d63a00" },
+            { d: "M21 22.3h2.5v2.4H21z", fill: "#d63a00" },
+        ],
+    },
+    page: {
+        background: "#1c1917",
+        foreground: "#e7e0d8",
+        overlayBackground: "#262220",
+        overlayForeground: "#e7e0d8",
+        hintColor: "#a39a8f",
+        modalBackdrop: "rgba(28, 25, 23, 0.82)",
+        modalBackground: "#262220",
+        modalBorder: "#4a4038",
+        modalForeground: "#e7e0d8",
+        modalMuted: "#a9a096",
+        // Selection is oxide, not a tint of the accent: a filled band of the
+        // colour iron actually goes when it rusts.
+        modalSelectedBackground: "#7c2d12",
+        modalSelectedBorder: "#ce422b",
+        modalSelectedForeground: "#ffeadf",
+    },
+    terminal: {
+        background: "#1c1917",
+        foreground: "#e7e0d8",
+        cursor: "#f74c00",
+        cursorAccent: "#1c1917",
+        selectionBackground: "#7c2d12",
+        black: "#1c1917",
+        red: "#f3554a",          // error[E0382]
+        green: "#6cc24a",        // Compiling / Finished
+        yellow: "#e5b02b",       // warning:
+        blue: "#58a6ff",         // the --> gutter rail and help:
+        magenta: "#c98bdf",
+        // Ferris, and therefore the portal accent. Measured at 5.0:1 on the
+        // ground, which clears the 4.5:1 the theme suite holds muted text to
+        // — so it stays usable for links and not just for decoration.
+        cyan: "#f74c00",
+        white: "#e7e0d8",
+        brightBlack: "#a39a8f",
+        brightRed: "#ff7b70",
+        brightGreen: "#8fdd6e",
+        brightYellow: "#ffcc55",
+        brightBlue: "#83c0ff",
+        brightMagenta: "#dcaaef",
+        brightCyan: "#ff7a3d",
+        brightWhite: "#fdf6ee",
+    },
+    tui: {
+        border: "#4a4038",
+        // Speakers keep the diagnostic register: the human is the amber
+        // `warning:` line, the accent stays reserved for the machine.
+        userChat: "#ffb454",
+        userChatLabel: "#ffd08a",
+        selectionBackground: "#7c2d12",
+        selectionForeground: "#ffeadf",
+        activeHighlightBackground: "#7c2d12",
+        activeHighlightForeground: "#ffeadf",
+        promptCursorBackground: "#f74c00",
+        promptCursorForeground: "#1c1917",
+    },
+});
+
+export default rustTheme;

package/ui/core/src/themes/spongebob.js

@@ -0,0 +1,110 @@
+import { createTheme, THEME_GROUP_OTHER } from "./helpers.js";
+
+// SpongeBob SquarePants (Stephen Hillenburg, 1999) — Bikini Bottom, not a
+// yellow screen.
+//
+// The obvious version of this theme is a yellow background, and it is
+// unusable: SpongeBob yellow is a 16:1 scream that no one can read a session
+// list on for eight hours. The show itself never does that either — SpongeBob
+// is yellow BECAUSE the ocean around him is deep blue-green. So the ground
+// here is Bikini Bottom at depth and the yellow is spent only where a portal
+// actually wants a bright accent.
+//
+// The cast supplies the status palette, which is the part that earns its keep:
+// Patrick pink, Squidward teal, Krabby-Patty lettuce green, the tie's red, and
+// the pineapple's orange are five hues that are already distinct in everyone's
+// head, which is exactly what a column of status dots needs.
+//
+// Note the cyan slot carries the sponge yellow: the portal derives
+// `--ps-accent` from `tui.cyan`, so that slot is the accent role regardless of
+// its name. Squidward's actual teal takes `blue`.
+const spongebobTheme = createTheme({
+    id: "spongebob",
+    label: "SpongeBob",
+    description: "Bikini Bottom at depth, sponge-yellow accents, and the cast as the status palette.",
+    group: THEME_GROUP_OTHER,
+    // The face. Big eyes and buck teeth are the whole silhouette — freckles
+    // and the nose are below the resolution that survives a 32px frame, so
+    // they are dropped rather than drawn as mud.
+    icon: {
+        viewBox: "0 0 32 32",
+        paths: [
+            { d: "M0 0h32v32H0z", fill: "#1a7fa8" },                 // the water
+            { d: "M7 2h18a3 3 0 0 1 3 3v15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3z", fill: "#ffe01b" },
+            // Pores. The one texture that says "sponge" rather than "square".
+            { d: "M6.2 6.4a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0-2.8 0z", fill: "#e3c00c" },
+            { d: "M23.4 4.8a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0z", fill: "#e3c00c" },
+            { d: "M5.4 18.2a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0z", fill: "#e3c00c" },
+            { d: "M24 19a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0-2.6 0z", fill: "#e3c00c" },
+            // Eyes
+            { d: "M7.3 10a4.2 4.2 0 1 0 8.4 0a4.2 4.2 0 1 0-8.4 0z", fill: "#ffffff" },
+            { d: "M16.3 10a4.2 4.2 0 1 0 8.4 0a4.2 4.2 0 1 0-8.4 0z", fill: "#ffffff" },
+            { d: "M9.4 10a2.1 2.1 0 1 0 4.2 0a2.1 2.1 0 1 0-4.2 0z", fill: "#3fa9d8" },
+            { d: "M18.4 10a2.1 2.1 0 1 0 4.2 0a2.1 2.1 0 1 0-4.2 0z", fill: "#3fa9d8" },
+            { d: "M10.5 10a1 1 0 1 0 2 0a1 1 0 1 0-2 0z", fill: "#10202b" },
+            { d: "M19.5 10a1 1 0 1 0 2 0a1 1 0 1 0-2 0z", fill: "#10202b" },
+            // Smile and the two teeth
+            { d: "M10 16.6c2 3.6 10 3.6 12 0c-1.2 5-10.8 5-12 0z", fill: "#6b4e00" },
+            { d: "M14 17.6h1.9v2.1H14z", fill: "#ffffff" },
+            { d: "M16.1 17.6H18v2.1h-1.9z", fill: "#ffffff" },
+            // Collar and tie
+            { d: "M6 23h20v3H6z", fill: "#ffffff" },
+            { d: "M14.4 24.6h3.2v2h-3.2z", fill: "#d2232a" },
+            { d: "M13 26.4h6l-3 5.2z", fill: "#d2232a" },
+        ],
+    },
+    page: {
+        background: "#07293c",
+        foreground: "#e6f4fb",
+        overlayBackground: "#0e3852",
+        overlayForeground: "#e6f4fb",
+        hintColor: "#8fb9cf",
+        modalBackdrop: "rgba(7, 41, 60, 0.84)",
+        modalBackground: "#0e3852",
+        modalBorder: "#1d6a8c",
+        modalForeground: "#e6f4fb",
+        modalMuted: "#95bed3",
+        // Selection is the sponge himself: a filled yellow block with the type
+        // knocked back to the water. Anything subtler on this ground reads as
+        // a bug rather than a highlight.
+        modalSelectedBackground: "#ffe01b",
+        modalSelectedBorder: "#fff08a",
+        modalSelectedForeground: "#07293c",
+    },
+    terminal: {
+        background: "#07293c",
+        foreground: "#e6f4fb",
+        cursor: "#ffe01b",
+        cursorAccent: "#07293c",
+        selectionBackground: "#ffe01b",
+        black: "#07293c",
+        red: "#ff6152",          // the tie, lifted off #d2232a to clear 3:1
+        green: "#7ed957",        // Krabby Patty lettuce
+        yellow: "#ffa62b",       // the pineapple
+        blue: "#7fd4c1",         // Squidward
+        magenta: "#ff9bd2",      // Patrick
+        cyan: "#ffe01b",         // SpongeBob, and therefore --ps-accent
+        white: "#e6f4fb",
+        brightBlack: "#8fb9cf",
+        brightRed: "#ff9084",
+        brightGreen: "#a5e888",
+        brightYellow: "#ffc46b",
+        brightBlue: "#a8e5d8",
+        brightMagenta: "#ffbde1",
+        brightCyan: "#fff08a",
+        brightWhite: "#ffffff",
+    },
+    tui: {
+        border: "#1d6a8c",
+        userChat: "#ffa62b",
+        userChatLabel: "#ffc46b",
+        selectionBackground: "#ffe01b",
+        selectionForeground: "#07293c",
+        activeHighlightBackground: "#ffe01b",
+        activeHighlightForeground: "#07293c",
+        promptCursorBackground: "#ffe01b",
+        promptCursorForeground: "#07293c",
+    },
+});
+
+export default spongebobTheme;

package/ui/core/src/themes/terminal-green.js

@@ -1,9 +1,10 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_RETRO } from "./helpers.js";
 
 const terminalGreenTheme = createTheme({
     id: "terminal-green",
     label: "Terminal Green",
     description: "Classic black terminal with phosphor green text, amber warnings, and crisp operator contrast.",
+    group: THEME_GROUP_RETRO,
     page: {
         background: "#020503",
         foreground: "#c9f7d3",

package/ui/core/src/themes/win95.js

@@ -1,4 +1,4 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_RETRO } from "./helpers.js";
 
 // Windows 95, as it actually was — not a pastel homage.
 //
@@ -14,6 +14,7 @@ const win95Theme = createTheme({
     id: "win95",
     label: "Windows 95",
     description: "Authentic 3D-bevelled grey, navy title bars, teal desktop, and the 16-colour VGA terminal set.",
+    group: THEME_GROUP_RETRO,
     page: {
         // Desktop teal behind the panes — the single most recognizable colour
         // of the era, and it makes the grey panes read as raised windows.

package/ui/core/src/themes/winamp.js

@@ -1,4 +1,4 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_RETRO } from "./helpers.js";
 
 // WinAMP 2.x (Nullsoft, 1997) — grey rack metal around a pane of lit glass.
 //
@@ -19,6 +19,7 @@ const winampTheme = createTheme({
     id: "winamp",
     label: "WinAMP",
     description: "Bevelled grey chrome, black glass panes, phosphor green, and the spectrum ramp as the status palette.",
+    group: THEME_GROUP_RETRO,
     // The spectrum analyser: one bar per agent, coloured along the status
     // ramp. Five rectangles, so it stays legible at favicon size — and it is
     // the rare mark that could legitimately animate off live fleet load.

package/ui/core/src/themes/workspace-dark.js

@@ -1,4 +1,4 @@
-import { createTheme } from "./helpers.js";
+import { createTheme, THEME_GROUP_OTHER } from "./helpers.js";
 
 /**
  * Workspace Dark — the admin-console language as a theme: tone-separated
@@ -12,6 +12,7 @@ const workspaceDarkTheme = createTheme({
     id: "workspace-dark",
     label: "Workspace Dark",
     description: "Flat workspace chrome: tone surfaces and hairlines instead of panel borders.",
+    group: THEME_GROUP_OTHER,
     page: {
         background: "#0d1117",
         foreground: "#e6edf3",