{t(settings.locale, "loading")}
}
diff --git a/src/renderer/src/assets/theme-backgrounds/cat.png b/src/renderer/src/assets/theme-backgrounds/cat.png
new file mode 100644
index 00000000..1e12215b
Binary files /dev/null and b/src/renderer/src/assets/theme-backgrounds/cat.png differ
diff --git a/src/renderer/src/assets/theme-backgrounds/forest-cabin.png b/src/renderer/src/assets/theme-backgrounds/forest-cabin.png
new file mode 100644
index 00000000..ed0c7f01
Binary files /dev/null and b/src/renderer/src/assets/theme-backgrounds/forest-cabin.png differ
diff --git a/src/renderer/src/assets/theme-backgrounds/gold-black.png b/src/renderer/src/assets/theme-backgrounds/gold-black.png
new file mode 100644
index 00000000..b79a15fd
Binary files /dev/null and b/src/renderer/src/assets/theme-backgrounds/gold-black.png differ
diff --git a/src/renderer/src/assets/theme-backgrounds/gothic-eclipse.png b/src/renderer/src/assets/theme-backgrounds/gothic-eclipse.png
new file mode 100644
index 00000000..a9efaff5
Binary files /dev/null and b/src/renderer/src/assets/theme-backgrounds/gothic-eclipse.png differ
diff --git a/src/renderer/src/assets/theme-backgrounds/matrix.png b/src/renderer/src/assets/theme-backgrounds/matrix.png
new file mode 100644
index 00000000..308773d9
Binary files /dev/null and b/src/renderer/src/assets/theme-backgrounds/matrix.png differ
diff --git a/src/renderer/src/assets/theme-backgrounds/sakura.png b/src/renderer/src/assets/theme-backgrounds/sakura.png
new file mode 100644
index 00000000..1810c0c0
Binary files /dev/null and b/src/renderer/src/assets/theme-backgrounds/sakura.png differ
diff --git a/src/renderer/src/components/TitleBar.tsx b/src/renderer/src/components/TitleBar.tsx
index 95e86f88..ed998bdd 100644
--- a/src/renderer/src/components/TitleBar.tsx
+++ b/src/renderer/src/components/TitleBar.tsx
@@ -1,6 +1,6 @@
import type { LocaleId, WindowState } from "../../../shared/contracts";
import appManifest from "../../../../package.json";
-import { ProviderIcon } from "./ProviderIcon";
+import appLogo from "../../../../docs/assets/canvastty-logo-dark.svg?url";
import { UiIcon } from "./UiIcon";
import { t } from "../lib/i18n";
@@ -36,7 +36,7 @@ export function TitleBar({ locale, windowState, onWindowStateChange }: TitleBarP
-
+ {pixelSkinTheme && (
+
- (null);
+ const [files, setFiles] = useState>>({});
+ const [previews, setPreviews] = useState>>({});
+ const [apertures, setApertures] = useState(DEFAULT_PIXEL_SKIN_APERTURES);
+ const [apertureLevel, setApertureLevel] = useState("minimal");
+ const [error, setError] = useState(null);
+ const [installing, setInstalling] = useState(false);
+ const [promptCopied, setPromptCopied] = useState(false);
+ const bulkInput = useRef(null);
+ const zipInput = useRef(null);
+
+ useEffect(() => {
+ const urls = Object.fromEntries(Object.entries(files).map(([slot, file]) => [slot, URL.createObjectURL(file)]));
+ setPreviews(urls);
+ return () => Object.values(urls).forEach((url) => URL.revokeObjectURL(url));
+ }, [files]);
+
+ useEffect(() => {
+ if (!open) return;
+ const onKeyDown = (event: KeyboardEvent): void => {
+ if (event.key === "Escape" && !installing) setOpen(false);
+ };
+ window.addEventListener("keydown", onKeyDown);
+ return () => window.removeEventListener("keydown", onKeyDown);
+ }, [open, installing]);
+
+ const assign = (slot: PixelSkinSlot, file: File | undefined): void => {
+ if (!file) return;
+ if (!isPng(file)) {
+ setError(ru ? "Нужен файл PNG." : "A PNG file is required.");
+ return;
+ }
+ setFiles((current) => ({ ...current, [slot]: file }));
+ setZipFile(null);
+ setError(null);
+ };
+
+ const assignMany = (selected: FileList | File[]): void => {
+ const assigned: Partial> = {};
+ for (const file of Array.from(selected)) {
+ if (!isPng(file)) continue;
+ const slot = pixelPackSlotForFilename(file.name);
+ if (slot) assigned[slot] = file;
+ }
+ if (Object.keys(assigned).length === 0) {
+ setError(ru ? "Не удалось определить роли по именам PNG." : "No PNG roles were found in filenames.");
+ return;
+ }
+ setFiles((current) => ({ ...current, ...assigned }));
+ setZipFile(null);
+ setError(null);
+ };
+
+ const assignZip = (file: File | undefined): void => {
+ if (!file) return;
+ if (!file.name.toLowerCase().endsWith(".zip") || file.size > 150 * 1024 * 1024) {
+ setError(ru ? "Нужен ZIP размером до 150 МБ." : "Choose a ZIP smaller than 150 MB.");
+ return;
+ }
+ setZipFile(file);
+ setFiles({});
+ if (!name.trim()) setName(file.name.replace(/\.zip$/i, "").slice(0, 64));
+ setError(null);
+ };
+
+ const copyAgentPrompt = (): void => {
+ window.canvasTTY.clipboard.writeText(pixelThemeAgentPrompt(locale));
+ setPromptCopied(true);
+ };
+
+ const openAgentGuide = (): void => {
+ void window.canvasTTY.external.openUrl(PIXEL_THEME_AGENT_GUIDE_URL).catch((cause: unknown) => {
+ setError(cause instanceof Error ? cause.message : String(cause));
+ });
+ };
+
+ const install = async (): Promise => {
+ if (!name.trim() || (!zipFile && SLOTS.some((slot) => !files[slot]))) return;
+ setInstalling(true);
+ setError(null);
+ try {
+ const pack = zipFile
+ ? await window.canvasTTY.pixelSkins.installZip({
+ name: name.trim(), apertures, archive: new Uint8Array(await zipFile.arrayBuffer())
+ })
+ : await (async () => {
+ const bytes = await Promise.all(SLOTS.map(async (slot) => [slot, new Uint8Array(await files[slot]!.arrayBuffer())] as const));
+ return window.canvasTTY.pixelSkins.install({
+ name: name.trim(), apertures,
+ files: Object.fromEntries(bytes) as Record
+ });
+ })();
+ onCreated(pack);
+ setOpen(false);
+ setName("");
+ setFiles({});
+ setZipFile(null);
+ setApertures(DEFAULT_PIXEL_SKIN_APERTURES);
+ setApertureLevel("minimal");
+ } catch (cause) {
+ setError(cause instanceof Error ? cause.message : String(cause));
+ } finally {
+ setInstalling(false);
+ }
+ };
+
+ const count = SLOTS.filter((slot) => files[slot]).length;
+ const aperture: PixelSkinAperture = apertures[apertureLevel];
+ return (
+ <>
+
+ {open && createPortal(
+ (null);
const [updaterState, setUpdaterState] = useState({ status: "idle" });
+ const [pixelPacks, setPixelPacks] = useState([]);
+ const [pixelPacksState, setPixelPacksState] = useState<"loading" | "ready" | "error">("loading");
+
+ useEffect(() => {
+ let active = true;
+ let revision = 0;
+ const refresh = async (): Promise => {
+ const request = ++revision;
+ try {
+ const packs = await window.canvasTTY.pixelSkins.list();
+ if (!active || request !== revision) return;
+ setPixelPacks(packs);
+ setPixelPacksState("ready");
+ } catch {
+ if (active && request === revision) setPixelPacksState("error");
+ }
+ };
+ const unsubscribe = window.canvasTTY.pixelSkins.onChanged(() => void refresh());
+ void refresh();
+ return () => { active = false; unsubscribe(); };
+ }, []);
useEffect(() => {
const unsubscribe = window.canvasTTY.updater.onState(({ state }) => setUpdaterState(state));
@@ -514,9 +556,20 @@ export function SettingsPanel({
onChange={(value) => void onChange({ sessionRowColorMode: value as SessionRowColorMode })}
/>
+
+ [value, t(locale, value)])}
+ wrap
+ onChange={(value) => void onChange({ pattern: value as CanvasPatternId })}
+ />
+
(
[value, label, [CANVAS_COLOR_PREVIEWS[value]]]
))}
- onChange={(value) => void onChange(canvasColorPatch(value as CanvasColorId))}
+ onChange={(value) => void onChange({ ...canvasColorPatch(value as CanvasColorId), canvasBackground: "none" })}
+ />
+
+
+ void onChange({ canvasBackground })} />
+ {pixelPacksState !== "ready" && {pixelPacksState === "loading"
+ ? (locale === "ru" ? "Загрузка пользовательских фонов…" : "Loading custom backgrounds…")
+ : (locale === "ru" ? "Не удалось загрузить пользовательские фоны." : "Custom backgrounds could not be loaded.")}}
+
+
+ setPixelPacks((current) => current.some((item) => item.id === pack.id) ? current : [...current, pack])}
+ onChange={(terminalBorderSkin) => void onChange({ terminalBorderSkin })}
/>
-
+
[value, t(locale, value)])}
- wrap
- onChange={(value) => void onChange({ pattern: value as CanvasPatternId })}
+ value={settings.terminalSkinDetail}
+ options={[
+ ["minimal", t(locale, "terminalSkinDetailMinimal")],
+ ["detailed", t(locale, "terminalSkinDetailDetailed")]
+ ]}
+ onChange={(terminalSkinDetail) => void onChange({ terminalSkinDetail: terminalSkinDetail as PixelSkinPreferredDetail })}
+ />
+
+
+ void onChange({ appSkin })}
/>
@@ -1002,9 +1085,6 @@ export function SettingsPanel({
-
-
)}
@@ -1365,6 +1445,414 @@ function Segmented({
);
}
+const BACKGROUND_ASSETS = import.meta.glob("../../assets/theme-backgrounds/*.png", {
+ eager: true, query: "?url", import: "default"
+});
+
+function CanvasBackgroundChoices({ locale, value, pixelPacks, onChange }: {
+ locale: LocaleId;
+ value: CanvasBackgroundId;
+ pixelPacks: PixelSkinPackSummary[];
+ onChange(value: CanvasBackgroundId): void;
+}): React.JSX.Element {
+ const labelKeys = {
+ sakura: "borderSkinSakura", matrix: "borderSkinMatrix", "forest-cabin": "borderSkinForestCabin",
+ "gold-black": "borderSkinGoldBlack", cat: "borderSkinCat", "gothic-eclipse": "borderSkinGothicEclipse"
+ } as const;
+ return ([]);
+ const [customSkinsLoadState, setCustomSkinsLoadState] = useState<"loading" | "ready" | "error">("loading");
+ useEffect(() => {
+ let active = true;
+ let requestRevision = 0;
+ const refresh = async (): Promise => {
+ const revision = ++requestRevision;
+ try {
+ const response: unknown = await window.canvasTTY.skins.list();
+ if (!Array.isArray(response) || response.some((item) => item && typeof item === "object"
+ && (item as Record).id === "custom:skin-registry"
+ && (item as Record).status === "error")) throw new Error("Skin registry unavailable.");
+ const items = normalizeTerminalBorderSkinList(response);
+ if (!active || revision !== requestRevision) return;
+ setCustomSkins(items);
+ setCustomSkinsLoadState("ready");
+ } catch {
+ if (!active || revision !== requestRevision) return;
+ setCustomSkins([]);
+ setCustomSkinsLoadState("error");
+ }
+ };
+
+ let unsubscribe = (): void => undefined;
+ try {
+ unsubscribe = window.canvasTTY.skins.onChanged(() => void refresh());
+ } catch {
+ setCustomSkinsLoadState("error");
+ }
+ void refresh();
+ return () => {
+ active = false;
+ requestRevision += 1;
+ unsubscribe();
+ };
+ }, []);
+
+ const choices: readonly [TerminalBorderSkinId, Parameters[1]][] = [
+ ["classic", "borderSkinClassic"],
+ ["minimal", "borderSkinMinimal"],
+ ["glass", "borderSkinGlass"],
+ ["cyber", "borderSkinCyber"],
+ ["nord", "borderSkinNord"],
+ ["gradient", "borderSkinGradient"],
+ ["cybercore", "borderSkinCybercore"],
+ ["titanium", "borderSkinTitanium"],
+ ["retro", "borderSkinRetro"],
+ ["sakura", "borderSkinSakura"],
+ ["matrix", "borderSkinMatrix"],
+ ["forest-cabin", "borderSkinForestCabin"],
+ ["gold-black", "borderSkinGoldBlack"],
+ ["cat", "borderSkinCat"],
+ ["gothic-eclipse", "borderSkinGothicEclipse"]
+ ];
+ const selectedCustomSkinId = isCustomTerminalBorderSkinId(value) ? value : null;
+ const selectedCustomSkin = customSkins.find((skin) => skin.id === selectedCustomSkinId);
+ const previewStyleController = useRef | null>(null);
+ useEffect(() => {
+ const controller = createTerminalBorderSkinPreviewStyleController(window.canvasTTY.skins, document);
+ previewStyleController.current = controller;
+ return () => {
+ controller.dispose();
+ previewStyleController.current = null;
+ };
+ }, []);
+ useEffect(() => {
+ const previewIds = customSkins.map((skin) => skin.id);
+ if (selectedCustomSkinId && !previewIds.includes(selectedCustomSkinId)) previewIds.push(selectedCustomSkinId);
+ previewStyleController.current?.setActive(previewIds);
+ }, [customSkins, selectedCustomSkinId]);
+ const customSkinStatus = (skin: TerminalBorderSkinListItem): string => skin.status === "ready"
+ ? t(locale, "borderSkinReady")
+ : t(locale, "borderSkinError");
+
+ return (
+ (null);
+ useEffect(() => {
+ let active = true;
+ let objectUrl: string | null = null;
+ setUrl(null);
+ void window.canvasTTY.pixelSkins.readAsset(id, slot).then((bytes) => {
+ if (!active || !bytes) return;
+ objectUrl = URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: "image/png" }));
+ setUrl(objectUrl);
+ }).catch(() => { if (active) setUrl(null); });
+ return () => {
+ active = false;
+ if (objectUrl) URL.revokeObjectURL(objectUrl);
+ };
+ }, [id, slot]);
+ return url ? 
: ;
+}
+
+function PixelBorderSkinThumbnail({ theme }: { theme: PixelSkinThemeId }): React.JSX.Element {
+ const filename = pixelSkinAssetFilename(theme, "detailed", "idle");
+ const url = filename ? PILOT_SKIN_ASSETS[filename] : undefined;
+ return url
+ ?
+ : ;
+}
+
+function PixelBorderSkinPreview({
+ locale,
+ theme,
+}: {
+ locale: LocaleId;
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId;
+}): React.JSX.Element {
+ const previewRef = useRef(null);
+ const [size, setSize] = useState({ width: 0, height: 0 });
+ const [detail, setDetail] = useState>("detailed");
+ const [status, setStatus] = useState>("idle");
+ const isRussian = locale === "ru";
+ const details: readonly [Exclude, string, string][] = [
+ ["minimal", isRussian ? "Минимал" : "Minimal", isRussian ? "Минимал" : "Minimal"],
+ ["detailed", isRussian ? "Детальная" : "Detailed", isRussian ? "Детальная" : "Detailed"],
+ ["master", "Master", isRussian ? "Master — оформление оркестратора" : "Master — orchestrator appearance"]
+ ];
+ const states: readonly [Extract, string, string][] = [
+ ["idle", isRussian ? "Ожидание" : "Idle", isRussian ? "Ожидание" : "Idle"],
+ ["working", isRussian ? "Работа" : "Working", isRussian ? "Работа" : "Working"],
+ ["done", isRussian ? "Готово" : "Done", isRussian ? "Готово" : "Done"]
+ ];
+
+ useLayoutEffect(() => {
+ const element = previewRef.current;
+ if (!element) return;
+ const measure = (): void => {
+ const bounds = element.getBoundingClientRect();
+ setSize({ width: Math.round(bounds.width), height: Math.round(bounds.height) });
+ };
+ const observer = new ResizeObserver(measure);
+ observer.observe(element);
+ measure();
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+ [1]][] = [
+ ["classic", "appSkinClassic"],
+ ["atelier", "appSkinAtelier"],
+ ["signal", "appSkinSignal"],
+ ["greenhouse", "appSkinGreenhouse"],
+ ["midnight", "appSkinMidnight"]
+ ];
+
+ return (
+ = {
+ sakura: "#ef5a9e",
+ matrix: "#24ee76",
+ "forest-cabin": "#ef9d50",
+ "gold-black": "#f2bc37",
+ cat: "#f5a742",
+ "gothic-eclipse": "#db7955"
+};
+
+interface ViewState {
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId;
+ status: SessionStatus;
+ artState: PixelSkinArtState;
+ width: number;
+ height: number;
+ detail: ArtworkDetail;
+ assetUrl: string | null;
+ loadedUrl: string | null;
+ image: HTMLImageElement | null;
+ surfaceBounds: PixelSkinSurfaceBounds;
+}
+
+function paintFallback(context: CanvasRenderingContext2D, state: ViewState, width: number, height: number): void {
+ const themeColor = isPixelSkinThemeId(state.theme) ? THEME_COLORS[state.theme] : "#9fbacb";
+ const statusColor = state.status === "failed" ? "#ed7f84"
+ : state.status === "needs_approval" ? "#f2be65" : themeColor;
+ context.strokeStyle = statusColor;
+ context.lineWidth = 3;
+ context.strokeRect(2, 2, Math.max(0, width - 4), Math.max(0, height - 4));
+ context.fillStyle = statusColor;
+ for (const x of [4, Math.max(4, width - 12)]) {
+ for (const y of [4, Math.max(4, height - 12)]) context.fillRect(x, y, 8, 8);
+ }
+ if (state.status === "working" && width > 72) {
+ for (let index = 0; index < 3; index += 1) context.fillRect(width / 2 - 13 + index * 10, 3, 4, 4);
+ }
+}
+
+function imageHasTransparentCenter(image: HTMLImageElement): boolean {
+ const probe = document.createElement("canvas");
+ probe.width = probe.height = 1;
+ const context = probe.getContext("2d", { willReadFrequently: true });
+ if (!context) return false;
+ context.imageSmoothingEnabled = false;
+ context.drawImage(image, Math.floor(image.naturalWidth / 2), Math.floor(image.naturalHeight / 2), 1, 1, 0, 0, 1, 1);
+ return context.getImageData(0, 0, 1, 1).data[3] <= 8;
+}
+
+function paint(canvas: HTMLCanvasElement, state: ViewState, frameOnly = false): void {
+ const { width, height, detail, status } = state;
+ if (width <= 0 || height <= 0) return;
+
+ const ratio = Math.min(window.devicePixelRatio || 1, 2, Math.sqrt(MAX_CANVAS_PIXELS / (width * height)));
+ const pixelWidth = Math.max(1, Math.ceil(width * ratio));
+ const pixelHeight = Math.max(1, Math.ceil(height * ratio));
+ if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+ canvas.width = pixelWidth;
+ canvas.height = pixelHeight;
+ }
+ const context = canvas.getContext("2d");
+ if (!context) return;
+ context.setTransform(pixelWidth / width, 0, 0, pixelHeight / height, 0, 0);
+ context.imageSmoothingEnabled = false;
+ context.clearRect(0, 0, width, height);
+
+ const image = state.loadedUrl === state.assetUrl ? state.image : null;
+ if (frameOnly) {
+ if (!image) return;
+ const { left, right, top, bottom } = state.surfaceBounds;
+ if (![left, right, top, bottom].every(Number.isFinite) || left >= right || top >= bottom) return;
+ context.save();
+ // Expand the opening outward so fractional CSS bounds cannot cover terminal glyphs.
+ context.beginPath();
+ context.rect(0, 0, width, height);
+ context.rect(Math.floor(left), Math.floor(top), Math.ceil(right) - Math.floor(left), Math.ceil(bottom) - Math.floor(top));
+ context.clip("evenodd");
+ }
+ if (!image) {
+ paintFallback(context, state, width, height);
+ } else {
+ try {
+ const art = pixelSkinArtworkBounds(state.theme, detail);
+ context.drawImage(image,
+ art.x * image.naturalWidth, art.y * image.naturalHeight,
+ art.width * image.naturalWidth, art.height * image.naturalHeight,
+ 0, 0, width, height);
+ } catch {
+ context.clearRect(0, 0, width, height);
+ paintFallback(context, state, width, height);
+ }
+ }
+
+ if (isPixelSkinThemeId(state.theme)
+ && needsGoldMinimalWorkingMarker(state.theme, detail, state.artState, PILOT_SKIN_ASSETS) && width >= 64) {
+ context.fillStyle = "#6b4a0b";
+ context.fillRect(width / 2 - 8, 4, 16, 8);
+ context.fillStyle = "#f2bc37";
+ context.fillRect(width / 2 - 5, 6, 3, 4);
+ context.fillRect(width / 2 - 1, 6, 3, 4);
+ context.fillRect(width / 2 + 3, 6, 3, 4);
+ }
+ if (frameOnly) context.restore();
+}
+
+export function Canvas2DSkinView({ theme, status, artState, width, height, detail, surfaceBounds }: {
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId;
+ status: SessionStatus;
+ artState?: PixelSkinArtState;
+ width: number;
+ height: number;
+ detail: ArtworkDetail;
+ surfaceBounds?: PixelSkinSurfaceBounds;
+}): React.JSX.Element {
+ const canvasRef = useRef(null);
+ const frameRef = useRef(null);
+ const [centerMode, setCenterMode] = useState<{ url: string; transparent: boolean } | null>(null);
+ const packUrls = usePixelSkinPackAssets(isPixelSkinPackId(theme) ? theme : null);
+ const stateName = artState ?? pixelSkinStateForSession(status);
+ const resolution = isPixelSkinThemeId(theme)
+ ? resolvePixelSkinViewAsset(theme, detail, stateName, PILOT_SKIN_ASSETS)
+ : null;
+ const assetUrl = resolution?.kind === "asset" ? resolution.url
+ : packUrls ? packUrls[`${detail}_${stateName}`] : null;
+ const transparentCenter = centerMode?.url === assetUrl && centerMode.transparent;
+ const opaqueCenter = centerMode?.url === assetUrl && !centerMode.transparent;
+ const bounds = surfaceBounds ?? pixelSkinSurfaceBounds(theme, detail, width, height);
+ const state = useRef({
+ theme, status, artState: stateName, width, height,
+ detail: "minimal", assetUrl, loadedUrl: null, image: null,
+ surfaceBounds: bounds
+ });
+
+ useEffect(() => {
+ if (!assetUrl) {
+ state.current.image = null;
+ state.current.loadedUrl = null;
+ setCenterMode(null);
+ return;
+ }
+ const acquired = acquireSkinImage(assetUrl);
+ let mounted = true;
+ void acquired.image.then((image) => {
+ if (!mounted) return;
+ state.current.image = image;
+ state.current.loadedUrl = assetUrl;
+ setCenterMode({ url: assetUrl, transparent: imageHasTransparentCenter(image) });
+ if (canvasRef.current) paint(canvasRef.current, state.current);
+ }).catch(() => {
+ if (!mounted) return;
+ state.current.image = null;
+ state.current.loadedUrl = assetUrl;
+ setCenterMode(null);
+ if (canvasRef.current) paint(canvasRef.current, state.current);
+ });
+ return () => {
+ mounted = false;
+ acquired.release();
+ };
+ }, [assetUrl]);
+
+ useEffect(() => {
+ const current = state.current;
+ current.theme = theme;
+ current.status = status;
+ current.artState = stateName;
+ current.width = width;
+ current.height = height;
+ current.detail = detail;
+ current.assetUrl = assetUrl;
+ current.surfaceBounds = bounds;
+ if (canvasRef.current) paint(canvasRef.current, current);
+ if (frameRef.current) paint(frameRef.current, current, true);
+ }, [theme, status, stateName, width, height, detail, assetUrl,
+ bounds.left, bounds.right, bounds.top, bounds.bottom, opaqueCenter]);
+
+ return <>
+
+ {opaqueCenter && }
+ ;
+}
diff --git a/src/renderer/src/features/skins/README.md b/src/renderer/src/features/skins/README.md
new file mode 100644
index 00000000..17a212b9
--- /dev/null
+++ b/src/renderer/src/features/skins/README.md
@@ -0,0 +1,78 @@
+# CanvasTTY Pixel Theme Contract
+
+A pixel theme has ten PNGs: three terminal sizes (`minimal`, `detailed`,
+`master`) times three visual states (`idle`, `working`, `completed`), plus one
+workspace `background`. PNGs are inert local images, not CSS or scripts.
+
+## Import in CanvasTTY
+
+Open Settings > Appearance > Terminal borders > Create pixel theme. Give the
+theme a name, drop one PNG on each labeled slot, and press Create theme. The
+Add PNGs button also accepts all ten files at once when their names end in:
+
+```
+minimal_idle.png minimal_working.png minimal_completed.png
+detailed_idle.png detailed_working.png detailed_completed.png
+master_idle.png master_working.png master_completed.png
+background.png
+```
+
+A theme prefix is allowed, for example `my_theme_master_done.png`. Legacy
+`l1`/`l2` map to minimal/detailed, and `done`/`complete` map to completed.
+Files with other names can still be assigned manually. ZIP extraction is not
+needed; select the ten PNGs together after generating them.
+
+All nine terminal PNGs must have identical dimensions. The authoring target is
+1536x1024 (3:2), matching the fixed 1200x800 logical terminal card. Every PNG must be
+320-4096 pixels wide and 200-4096 pixels high, and at most 20 MiB; the whole pack is at most
+150 MiB. A static background may have different dimensions. The importer
+validates the package and copies it atomically into
+`userData/pixel-skins//`. A rejected package is not installed.
+
+The three aperture tabs in the importer set a separate usable terminal opening
+for minimal, detailed, and master, as percentages of frame width/height. Keep
+the opening free of important art;
+the engine draws the frame beneath a transparent xterm surface, so the artwork
+remains visible around the real terminal content. The title, search,
+close/restart controls, and PTY stay real
+UI, never pixels baked into the image. Leave button artwork and labels out of
+the PNG. Reserve a blank control plaque near the top right of every frame,
+starting around 73% of image width and 7% of image height, at least 18% wide
+and 6% high. The live search, restart, and close buttons are placed there. The
+terminal card has a fixed 1200x800 logical size; canvas zoom scales the whole
+card without changing the selected art or layout.
+
+## Runtime behavior
+
+- Settings choose minimal or detailed at every zoom level. F4 toggles master
+ only for the active terminal; a second F4 returns it to the selected level.
+- `working` comes from the provider lifecycle, not terminal text. A provider
+ `Stop`, `StopFailure`, or `StopCancelled` hook, or a process `done`/`failed`
+ status, selects `completed`. A plain return to `idle` does not. The next
+ working turn clears the completed art.
+- The frame canvas is noninteractive and below the transparent xterm surface.
+ The terminal, title, and controls remain interactive.
+- The workspace background uses `cover`. Terminal PNGs are static; no tiny
+ procedural Sakura animation is added.
+
+Five built-in themes ship: Sakura, Matrix, Forest Cabin, Gold & Black, and Cat.
+Each has three detail levels and completed art. Gold & Black minimal working
+currently uses its idle PNG with an activity marker on the top rail; imported
+themes require a distinct PNG for every slot.
+
+## App API
+
+The isolated renderer bridge exposes `window.canvasTTY.pixelSkins.list()`,
+`install(request)`, `readAsset(id, slot)`, and `onChanged(listener)`. `install`
+accepts `{ name, apertures, files }`, where `files` maps the ten slot names
+above to `Uint8Array` PNG bytes. It returns a summary with all three aperture
+profiles; set
+`settings.terminalBorderSkin` to that ID to activate it. The same validation
+and storage are used by the UI. This is an in-app API, not a network endpoint.
+
+## Checks
+
+Run `npm run typecheck`, `npm test`, and `npm run build`. Visual acceptance
+still requires an isolated Electron dev profile: inspect each level and state,
+type and select text in the live terminal, use search/close, change
+zoom, press F4 twice, and verify no artwork or controls cover the output.
diff --git a/src/renderer/src/features/skins/SkinAssets.ts b/src/renderer/src/features/skins/SkinAssets.ts
new file mode 100644
index 00000000..cf4fb4b1
--- /dev/null
+++ b/src/renderer/src/features/skins/SkinAssets.ts
@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import type { PixelSkinPackSummary, PixelSkinSlot, PixelTerminalBorderSkinId } from "../../../../shared/contracts";
+
+interface CachedImage { image: HTMLImageElement; references: number; promise: Promise }
+const images = new Map();
+
+export type PixelSkinPackUrls = Readonly>;
+interface CachedPack {
+ references: number;
+ promise: Promise;
+ urls?: PixelSkinPackUrls;
+ releaseTimer?: ReturnType;
+}
+const packs = new Map();
+const PACK_SLOTS: readonly PixelSkinSlot[] = [
+ "minimal_idle", "minimal_working", "minimal_completed",
+ "detailed_idle", "detailed_working", "detailed_completed",
+ "master_idle", "master_working", "master_completed", "background"
+];
+
+const pilotModules = import.meta.glob("./assets/pilots/*.png", {
+ eager: true,
+ query: "?url",
+ import: "default"
+});
+
+export const PILOT_SKIN_ASSETS: Readonly> = Object.fromEntries(
+ Object.entries(pilotModules).map(([path, url]) => [path.slice(path.lastIndexOf("/") + 1), url])
+);
+
+export function acquireSkinImage(url: string): { image: Promise; release(): void } {
+ let entry = images.get(url);
+ if (!entry) {
+ const image = new Image();
+ const promise = new Promise((resolve, reject) => {
+ image.onload = () => resolve(image);
+ image.onerror = () => reject(new Error("Skin image could not be decoded."));
+ image.src = url;
+ });
+ entry = { image, references: 0, promise };
+ images.set(url, entry);
+ }
+ entry.references += 1;
+ let released = false;
+ return {
+ image: entry.promise,
+ release() {
+ if (released) return;
+ released = true;
+ if (--entry.references === 0) images.delete(url);
+ }
+ };
+}
+
+export function cachedSkinImageCount(): number { return images.size; }
+
+export function isPixelSkinPackId(value: unknown): value is PixelTerminalBorderSkinId {
+ return typeof value === "string" && /^pixel:[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(value);
+}
+
+function acquirePixelSkinPack(id: PixelTerminalBorderSkinId): { urls: Promise; release(): void } {
+ let entry = packs.get(id);
+ if (!entry) {
+ entry = {
+ references: 0,
+ promise: Promise.all(PACK_SLOTS.map(async (slot) => {
+ const bytes = await window.canvasTTY.pixelSkins.readAsset(id, slot);
+ if (!bytes) throw new Error(`Pixel skin asset ${slot} is unavailable.`);
+ const copy = new Uint8Array(bytes.byteLength);
+ copy.set(bytes);
+ return [slot, copy] as const;
+ })).then((slots) => {
+ const urls = Object.fromEntries(slots.map(([slot, bytes]) => [
+ slot, URL.createObjectURL(new Blob([bytes], { type: "image/png" }))
+ ])) as Record;
+ const current = packs.get(id);
+ if (current) current.urls = urls;
+ return urls;
+ }).catch((error) => {
+ packs.delete(id);
+ throw error;
+ })
+ };
+ packs.set(id, entry);
+ }
+ if (entry.releaseTimer) clearTimeout(entry.releaseTimer);
+ entry.references += 1;
+ let released = false;
+ return {
+ urls: entry.promise,
+ release() {
+ if (released) return;
+ released = true;
+ if (--entry!.references > 0) return;
+ entry!.releaseTimer = setTimeout(() => {
+ if (entry!.references > 0) return;
+ packs.delete(id);
+ if (entry!.urls) Object.values(entry!.urls).forEach((url) => URL.revokeObjectURL(url));
+ }, 30_000);
+ }
+ };
+}
+
+export function usePixelSkinPackAssets(id: PixelTerminalBorderSkinId | null): PixelSkinPackUrls | null {
+ const [urls, setUrls] = useState(null);
+ useEffect(() => {
+ setUrls(null);
+ if (!id) return;
+ let active = true;
+ const acquired = acquirePixelSkinPack(id);
+ void acquired.urls.then((value) => {
+ if (active) setUrls(value);
+ }).catch(() => {
+ if (active) setUrls(null);
+ });
+ return () => {
+ active = false;
+ acquired.release();
+ };
+ }, [id]);
+ return urls;
+}
+
+export function usePixelSkinPackSummary(id: PixelTerminalBorderSkinId | null): PixelSkinPackSummary | null {
+ const [summary, setSummary] = useState(null);
+ useEffect(() => {
+ setSummary(null);
+ if (!id) return;
+ let active = true;
+ void window.canvasTTY.pixelSkins.list().then((items) => {
+ if (active) setSummary(items.find((item) => item.id === id) ?? null);
+ }).catch(() => {
+ if (active) setSummary(null);
+ });
+ return () => { active = false; };
+ }, [id]);
+ return summary;
+}
diff --git a/src/renderer/src/features/skins/SkinLayout.ts b/src/renderer/src/features/skins/SkinLayout.ts
new file mode 100644
index 00000000..1585f9dc
--- /dev/null
+++ b/src/renderer/src/features/skins/SkinLayout.ts
@@ -0,0 +1,274 @@
+import type { SkinRect, TiledFrame } from "./skinSchema";
+import type { PixelSkinThemeId } from "./skinCatalog";
+import type { PixelSkinDetailLevel } from "./skinCatalog";
+import type { PixelSkinAperture, PixelSkinPreferredDetail, PixelTerminalBorderSkinId } from "../../../../shared/contracts";
+
+export interface SkinDrawOperation { source: SkinRect; destination: SkinRect }
+export type SkinDetailLevel = PixelSkinDetailLevel;
+
+export interface PixelSkinSurfaceBounds {
+ left: number;
+ right: number;
+ top: number;
+ bottom: number;
+}
+
+export interface PixelSkinSurfaceInsetProfile {
+ left: number;
+ right: number;
+ top: number;
+ bottom: number;
+}
+
+export interface PixelSkinControlLayout {
+ left: number;
+ top: number;
+ width: number;
+ height: number;
+ buttonSize: number;
+ fontSize: number;
+}
+
+export interface PixelSkinArtworkBounds {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+}
+
+type PlaqueRect = readonly [x: number, y: number, width: number, height: number];
+
+const CONTROL_PLAQUES: Record> = {
+ sakura: { minimal: [72.5, 7.3, 16, 3.5], detailed: [70.5, 9.1, 16, 4.6], master: [69.4, 9.1, 17.9, 5.3] },
+ matrix: { minimal: [75, 7.9, 17, 4], detailed: [75, 7.9, 17, 4], master: [75.5, 6.1, 16.5, 4.6] },
+ "forest-cabin": { minimal: [77.4, 9.5, 16, 3.8], detailed: [76.5, 9.3, 15.5, 5.2], master: [76, 14.5, 16.5, 6.1] },
+ "gold-black": { minimal: [79, 10, 14, 3.4], detailed: [79, 9.9, 14.2, 3.8], master: [75, 9.2, 13, 3.8] },
+ cat: { minimal: [74, 10, 19, 3.9], detailed: [70, 9.3, 23.5, 4.7], master: [69.2, 9.4, 24.9, 5] },
+ "gothic-eclipse": { minimal: [77.8, 7.5, 14.5, 6], detailed: [77.8, 7.5, 14.5, 6], master: [77.8, 7.5, 14.5, 6] }
+};
+
+// Source-space bounds of the visible art, including a few pixels of breathing room.
+// The generated PNG sheets have uneven transparent margins that must not become card geometry.
+const ART_BOUNDS: Record> = {
+ sakura: { minimal: [28, 66, 1507, 950], detailed: [23, 71, 1509, 921], master: [9, 5, 1527, 971] },
+ matrix: { minimal: [32, 69, 1504, 911], detailed: [25, 64, 1510, 919], master: [10, 37, 1526, 939] },
+ "forest-cabin": { minimal: [35, 84, 1500, 934], detailed: [21, 66, 1518, 881], master: [0, 3, 1536, 1002] },
+ "gold-black": { minimal: [19, 78, 1516, 931], detailed: [0, 54, 1536, 968], master: [4, 35, 1536, 968] },
+ cat: { minimal: [29, 85, 1506, 887], detailed: [18, 59, 1523, 892], master: [13, 47, 1525, 941] },
+ "gothic-eclipse": { minimal: [0, 0, 1536, 1024], detailed: [0, 0, 1536, 1024], master: [0, 0, 1536, 1024] }
+};
+
+export function pixelSkinArtworkBounds(
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId,
+ detail: SkinDetailLevel
+): PixelSkinArtworkBounds {
+ const source = ART_BOUNDS[theme as PixelSkinThemeId]?.[detail];
+ if (!source) return { x: 0, y: 0, width: 1, height: 1 };
+ return {
+ x: source[0] / 1536,
+ y: source[1] / 1024,
+ width: (source[2] - source[0]) / 1536,
+ height: (source[3] - source[1]) / 1024
+ };
+}
+
+function mapArtworkX(percent: number, bounds: PixelSkinArtworkBounds, width: number): number {
+ return width * (percent / 100 - bounds.x) / bounds.width;
+}
+
+function mapArtworkY(percent: number, bounds: PixelSkinArtworkBounds, height: number): number {
+ return height * (percent / 100 - bounds.y) / bounds.height;
+}
+
+/** Plaque bounds are measured from the artwork, in image percentages. */
+export function pixelSkinControlLayout(
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId,
+ detail: SkinDetailLevel,
+ width: number,
+ height: number
+): PixelSkinControlLayout {
+ const [x, y, plaqueWidth, plaqueHeight] = CONTROL_PLAQUES[theme]?.[detail] ?? [73, 7, 18, 6];
+ const art = pixelSkinArtworkBounds(theme, detail);
+ const controlWidth = width * plaqueWidth / 100 / art.width;
+ const controlHeight = height * plaqueHeight / 100 / art.height;
+ const buttonSize = Math.max(0, Math.min(22, controlHeight - 4, (controlWidth - 14) / 2));
+ return {
+ left: mapArtworkX(x, art, width),
+ top: mapArtworkY(y, art, height),
+ width: controlWidth,
+ height: controlHeight,
+ buttonSize,
+ fontSize: buttonSize * 0.7
+ };
+}
+
+export function pixelSkinSurfaceInsetProfile(
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId,
+ detail: SkinDetailLevel,
+ aperture?: PixelSkinAperture
+): PixelSkinSurfaceInsetProfile {
+ if (aperture) return aperture;
+ if (theme === "matrix" && detail === "minimal") {
+ return { left: 6, right: 6, top: 12, bottom: 16 };
+ }
+ if (theme === "sakura" && detail === "minimal") {
+ return { left: 6, right: 6, top: 12, bottom: 16 };
+ }
+ if (theme === "sakura" && detail === "detailed") {
+ return { left: 7, right: 7, top: 16, bottom: 27 };
+ }
+ if (theme === "forest-cabin" && detail === "detailed") {
+ return { left: 7, right: 7, top: 14, bottom: 16 };
+ }
+ if (theme === "sakura" && detail === "master") {
+ return { left: 12, right: 12, top: 16, bottom: 14 };
+ }
+ if (theme === "matrix" && detail === "master") {
+ return { left: 7, right: 7, top: 15, bottom: 13 };
+ }
+ if (theme === "forest-cabin" && detail === "master") {
+ return { left: 15, right: 16, top: 24, bottom: 22 };
+ }
+ if (theme === "gold-black" && detail === "master") {
+ return { left: 12, right: 12, top: 16, bottom: 12 };
+ }
+ if (theme === "gothic-eclipse") {
+ if (detail === "minimal") return { left: 10.5, right: 10.5, top: 22, bottom: 12 };
+ if (detail === "detailed") return { left: 15, right: 16, top: 22, bottom: 12 };
+ return { left: 17, right: 16, top: 23, bottom: 11 };
+ }
+ if (theme === "cat" && detail === "master") {
+ return { left: 14.5, right: 8, top: 18.5, bottom: 20 };
+ }
+ if (theme === "cat" && detail === "detailed") {
+ return { left: 8, right: 8, top: 18, bottom: 21 };
+ }
+ if (theme === "cat" && detail === "minimal") {
+ return { left: 8.5, right: 8, top: 17, bottom: 21 };
+ }
+ if (detail === "detailed") return { left: 7, right: 7, top: 14, bottom: 12 };
+ return { left: 6, right: 6, top: 12, bottom: 10 };
+}
+
+export function pixelSkinSurfaceBounds(
+ theme: PixelSkinThemeId | PixelTerminalBorderSkinId,
+ detail: SkinDetailLevel,
+ width: number,
+ height: number,
+ _headerHeight = 26,
+ aperture?: PixelSkinAperture
+): PixelSkinSurfaceBounds {
+ const profile = pixelSkinSurfaceInsetProfile(theme, detail, aperture);
+ const art = pixelSkinArtworkBounds(theme, detail);
+ return {
+ left: mapArtworkX(profile.left, art, width),
+ right: mapArtworkX(100 - profile.right, art, width),
+ top: mapArtworkY(profile.top, art, height),
+ bottom: mapArtworkY(100 - profile.bottom, art, height)
+ };
+}
+
+export function skinDetailLevel(
+ preferred: PixelSkinPreferredDetail,
+ forceMasterDetail: boolean
+): SkinDetailLevel {
+ return forceMasterDetail ? "master" : preferred;
+}
+
+/** Nine-slice rendering keeps ornate corners at a uniform scale while the rails absorb resize. */
+export function layoutNineSliceFrame(
+ frameWidth: number,
+ frameHeight: number,
+ width: number,
+ height: number,
+ cornerWidth = 220,
+ cornerHeight = 220
+): SkinDrawOperation[] {
+ if (![frameWidth, frameHeight, width, height, cornerWidth, cornerHeight].every(Number.isFinite)
+ || frameWidth <= 0 || frameHeight <= 0 || width <= 0 || height <= 0
+ || cornerWidth <= 0 || cornerHeight <= 0) return [];
+
+ const sourceCornerWidth = Math.min(cornerWidth, frameWidth / 2);
+ const sourceCornerHeight = Math.min(cornerHeight, frameHeight / 2);
+ const scale = Math.min(width / frameWidth, height / frameHeight);
+ const destCornerWidth = sourceCornerWidth * scale;
+ const destCornerHeight = sourceCornerHeight * scale;
+ const middleSourceWidth = frameWidth - 2 * sourceCornerWidth;
+ const middleSourceHeight = frameHeight - 2 * sourceCornerHeight;
+ const middleDestWidth = width - 2 * destCornerWidth;
+ const middleDestHeight = height - 2 * destCornerHeight;
+
+ const operation = (source: SkinRect, destination: SkinRect): SkinDrawOperation => ({ source, destination });
+ return [
+ operation(
+ { x: sourceCornerWidth, y: 0, width: middleSourceWidth, height: sourceCornerHeight },
+ { x: destCornerWidth, y: 0, width: middleDestWidth, height: destCornerHeight }
+ ),
+ operation(
+ { x: sourceCornerWidth, y: frameHeight - sourceCornerHeight, width: middleSourceWidth, height: sourceCornerHeight },
+ { x: destCornerWidth, y: height - destCornerHeight, width: middleDestWidth, height: destCornerHeight }
+ ),
+ operation(
+ { x: 0, y: sourceCornerHeight, width: sourceCornerWidth, height: middleSourceHeight },
+ { x: 0, y: destCornerHeight, width: destCornerWidth, height: middleDestHeight }
+ ),
+ operation(
+ { x: frameWidth - sourceCornerWidth, y: sourceCornerHeight, width: sourceCornerWidth, height: middleSourceHeight },
+ { x: width - destCornerWidth, y: destCornerHeight, width: destCornerWidth, height: middleDestHeight }
+ ),
+ operation(
+ { x: 0, y: 0, width: sourceCornerWidth, height: sourceCornerHeight },
+ { x: 0, y: 0, width: destCornerWidth, height: destCornerHeight }
+ ),
+ operation(
+ { x: frameWidth - sourceCornerWidth, y: 0, width: sourceCornerWidth, height: sourceCornerHeight },
+ { x: width - destCornerWidth, y: 0, width: destCornerWidth, height: destCornerHeight }
+ ),
+ operation(
+ { x: 0, y: frameHeight - sourceCornerHeight, width: sourceCornerWidth, height: sourceCornerHeight },
+ { x: 0, y: height - destCornerHeight, width: destCornerWidth, height: destCornerHeight }
+ ),
+ operation(
+ { x: frameWidth - sourceCornerWidth, y: frameHeight - sourceCornerHeight, width: sourceCornerWidth, height: sourceCornerHeight },
+ { x: width - destCornerWidth, y: height - destCornerHeight, width: destCornerWidth, height: destCornerHeight }
+ )
+ ];
+}
+
+function pushTiles(
+ operations: SkinDrawOperation[], source: SkinRect,
+ start: number, end: number, fixed: number, tileLength: number, thickness: number,
+ horizontal: boolean
+): void {
+ for (let offset = start; offset < end;) {
+ const length = Math.min(tileLength, end - offset);
+ const ratio = length / tileLength;
+ operations.push(horizontal
+ ? { source: { ...source, width: source.width * ratio }, destination: { x: offset, y: fixed, width: length, height: thickness } }
+ : { source: { ...source, height: source.height * ratio }, destination: { x: fixed, y: offset, width: thickness, height: length } });
+ offset += length;
+ }
+}
+
+/** Corners keep their proportions; only repeated edge tiles absorb resize. */
+export function layoutTiledFrame(frame: TiledFrame, width: number, height: number): SkinDrawOperation[] {
+ if (width <= 0 || height <= 0) return [];
+ const cornerWidth = Math.min(frame.cornerWidth, width / 2);
+ const cornerHeight = Math.min(frame.cornerHeight, height / 2);
+ const thickness = Math.min(frame.edgeThickness, cornerWidth, cornerHeight);
+ const [top, right, bottom, left] = frame.edges;
+ const [topOffset, rightOffset, bottomOffset, leftOffset] = frame.edgeOffsets;
+ const operations: SkinDrawOperation[] = [];
+ pushTiles(operations, top, cornerWidth, width - cornerWidth, topOffset, frame.tileLength, thickness, true);
+ pushTiles(operations, bottom, cornerWidth, width - cornerWidth, height - bottomOffset, frame.tileLength, thickness, true);
+ pushTiles(operations, left, cornerHeight, height - cornerHeight, leftOffset, frame.tileLength, thickness, false);
+ pushTiles(operations, right, cornerHeight, height - cornerHeight, width - rightOffset, frame.tileLength, thickness, false);
+ const positions: SkinRect[] = [
+ { x: 0, y: 0, width: cornerWidth, height: cornerHeight },
+ { x: width - cornerWidth, y: 0, width: cornerWidth, height: cornerHeight },
+ { x: 0, y: height - cornerHeight, width: cornerWidth, height: cornerHeight },
+ { x: width - cornerWidth, y: height - cornerHeight, width: cornerWidth, height: cornerHeight }
+ ];
+ frame.corners.forEach((source, index) => operations.push({ source, destination: positions[index] }));
+ return operations;
+}
diff --git a/src/renderer/src/features/skins/SkinScheduler.ts b/src/renderer/src/features/skins/SkinScheduler.ts
new file mode 100644
index 00000000..9c6a4d95
--- /dev/null
+++ b/src/renderer/src/features/skins/SkinScheduler.ts
@@ -0,0 +1,107 @@
+type Draw = (now: number) => void;
+
+interface Entry {
+ draw: Draw;
+ visible: boolean;
+ fps: number;
+ nextAt: number;
+}
+
+/** One clock for every decorated terminal in the renderer window. */
+export class SkinScheduler {
+ private readonly entries = new Set();
+ private readonly documentTarget: Document;
+ private timer: ReturnType | undefined;
+ private frame: number | undefined;
+
+ constructor(documentTarget: Document) {
+ this.documentTarget = documentTarget;
+ documentTarget.addEventListener("visibilitychange", this.onVisibilityChange);
+ }
+
+ register(draw: Draw): { update(visible: boolean, fps: number): void; invalidate(): void; dispose(): void } {
+ const entry: Entry = { draw, visible: false, fps: 0, nextAt: 0 };
+ this.entries.add(entry);
+ return {
+ update: (visible, fps) => {
+ const becameVisible = visible && !entry.visible;
+ entry.visible = visible;
+ entry.fps = Math.max(0, Math.min(24, fps));
+ entry.nextAt = 0;
+ if (becameVisible) this.drawEntry(entry, performance.now());
+ this.schedule();
+ },
+ invalidate: () => {
+ entry.nextAt = 0;
+ if (entry.visible) this.drawEntry(entry, performance.now());
+ this.schedule();
+ },
+ dispose: () => {
+ this.entries.delete(entry);
+ this.schedule();
+ }
+ };
+ }
+
+ get size(): number { return this.entries.size; }
+
+ dispose(): void {
+ this.documentTarget.removeEventListener("visibilitychange", this.onVisibilityChange);
+ this.entries.clear();
+ this.cancelScheduled();
+ }
+
+ private onVisibilityChange = (): void => {
+ if (this.documentTarget.hidden) {
+ this.cancelScheduled();
+ return;
+ }
+ const now = performance.now();
+ for (const entry of this.entries) if (entry.visible) this.drawEntry(entry, now);
+ this.schedule();
+ };
+
+ private drawEntry(entry: Entry, now: number): void {
+ if (this.documentTarget.hidden || !entry.visible) return;
+ try {
+ entry.draw(now);
+ } catch {
+ // A decorative renderer must not break terminal input or the shared clock.
+ entry.fps = 0;
+ }
+ entry.nextAt = entry.fps > 0 ? now + 1000 / entry.fps : Infinity;
+ }
+
+ private cancelScheduled(): void {
+ if (this.timer !== undefined) clearTimeout(this.timer);
+ if (this.frame !== undefined) cancelAnimationFrame(this.frame);
+ this.timer = undefined;
+ this.frame = undefined;
+ }
+
+ private schedule(): void {
+ this.cancelScheduled();
+ if (this.documentTarget.hidden) return;
+ let nextAt = Infinity;
+ for (const entry of this.entries) {
+ if (entry.visible && entry.fps > 0) nextAt = Math.min(nextAt, entry.nextAt);
+ }
+ if (!Number.isFinite(nextAt)) return;
+ this.timer = setTimeout(() => {
+ this.timer = undefined;
+ this.frame = requestAnimationFrame((now) => {
+ this.frame = undefined;
+ for (const entry of this.entries) {
+ if (entry.visible && entry.fps > 0 && now >= entry.nextAt - 1) this.drawEntry(entry, now);
+ }
+ this.schedule();
+ });
+ }, Math.max(0, nextAt - performance.now() - 8));
+ }
+}
+
+let sharedScheduler: SkinScheduler | undefined;
+export function getSkinScheduler(): SkinScheduler {
+ sharedScheduler ??= new SkinScheduler(document);
+ return sharedScheduler;
+}
diff --git a/src/renderer/src/features/skins/assets/ASSET-PROVENANCE.md b/src/renderer/src/features/skins/assets/ASSET-PROVENANCE.md
new file mode 100644
index 00000000..6ff4b6b3
--- /dev/null
+++ b/src/renderer/src/features/skins/assets/ASSET-PROVENANCE.md
@@ -0,0 +1,36 @@
+# Sakura frame asset
+
+- File: `sakura-frame.png` (1536 x 1024 RGBA PNG)
+- Created: 2026-09-25 with the built-in `image_gen` tool.
+- Reference: the Sakura CanvasTTY concept image supplied by the user in this
+ conversation. No third-party theme files were copied.
+- Initial generation prompt: "Create a production-ready transparent PNG
+ pixel-art NINE-SLICE BORDER ASSET for a resizable terminal window, inspired
+ by the attached Sakura CanvasTTY reference. Artwork only, no UI mockup, no
+ words, no logos, no cursor, no terminal text. A precise rectangular frame
+ viewed straight-on, 3:2 ratio, outer edges all visible, with a completely
+ transparent large central opening occupying at least 78% width and 72%
+ height. Dark charcoal and plum pixel-metal rails 22-28px thick, luminous
+ pale pink highlights, detailed cherry blossom branches growing from upper
+ left and upper right corners but confined to the border zone, a few petals
+ and a small hanging lantern confined to the outer right border. Bottom
+ border has dark pixel-stone sill and tiny blossom clusters. Crisp hard-edged
+ pixels, meticulous layered shading, absolutely no anti-aliased painted
+ look, no gradients, no shadows outside frame. This must work as CSS
+ border-image with preserved corners and stretched middle edge strips.
+ Center must remain fully alpha transparent so real terminal text can be
+ read. Asset, not a poster. Output transparent background."
+- Final edit prompt: "Edit this existing pixel-art terminal border asset ONLY
+ to remove its background. Preserve the cherry blossom branches, lantern,
+ rails, pixel shapes, colors, and exact outer geometry. Make every pixel
+ INSIDE the frame opening fully transparent alpha, and every pixel OUTSIDE
+ the outermost frame fully transparent alpha. Do not fill either region with
+ black, purple, checkerboard, glow, or gradient. Keep only the frame rails
+ and their attached blossoms/lantern/petals as opaque or naturally
+ semi-transparent pixel art. The frame must remain a complete rectangle and
+ be suitable as a CSS nine-slice border image. No text or UI. Export actual
+ RGBA PNG with transparency."
+
+The P0 Canvas 2D renderer draws only the corner and edge regions of this
+asset. It does not draw the center over the terminal. Pixel-level alpha quality
+still needs visual acceptance in the separate dev application.
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_detailed_completed.png b/src/renderer/src/features/skins/assets/pilots/cat_detailed_completed.png
new file mode 100644
index 00000000..a084c28c
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_detailed_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_detailed_idle.png b/src/renderer/src/features/skins/assets/pilots/cat_detailed_idle.png
new file mode 100644
index 00000000..61beb53e
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_detailed_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_detailed_working.png b/src/renderer/src/features/skins/assets/pilots/cat_detailed_working.png
new file mode 100644
index 00000000..768a61f8
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_detailed_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_master_completed.png b/src/renderer/src/features/skins/assets/pilots/cat_master_completed.png
new file mode 100644
index 00000000..9fa72cd4
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_master_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_master_idle.png b/src/renderer/src/features/skins/assets/pilots/cat_master_idle.png
new file mode 100644
index 00000000..c056e9e1
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_master_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_master_working.png b/src/renderer/src/features/skins/assets/pilots/cat_master_working.png
new file mode 100644
index 00000000..8f6f80c0
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_master_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_minimal_completed.png b/src/renderer/src/features/skins/assets/pilots/cat_minimal_completed.png
new file mode 100644
index 00000000..9f7ebe67
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_minimal_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_minimal_idle.png b/src/renderer/src/features/skins/assets/pilots/cat_minimal_idle.png
new file mode 100644
index 00000000..34df11d8
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_minimal_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/cat_minimal_working.png b/src/renderer/src/features/skins/assets/pilots/cat_minimal_working.png
new file mode 100644
index 00000000..89f38c7b
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/cat_minimal_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_completed.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_completed.png
new file mode 100644
index 00000000..f15e05b0
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_idle.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_idle.png
new file mode 100644
index 00000000..d36d12ee
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_working.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_working.png
new file mode 100644
index 00000000..09689e5a
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_detailed_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_completed.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_completed.png
new file mode 100644
index 00000000..9d82cdfa
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_idle.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_idle.png
new file mode 100644
index 00000000..ff70da9a
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_working.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_working.png
new file mode 100644
index 00000000..56bb18b3
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_master_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_completed.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_completed.png
new file mode 100644
index 00000000..67f23296
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_idle.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_idle.png
new file mode 100644
index 00000000..0ebd777b
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_working.png b/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_working.png
new file mode 100644
index 00000000..a2d6da16
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/forest_cabin_minimal_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_completed.png b/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_completed.png
new file mode 100644
index 00000000..550d53d5
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_idle.png b/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_idle.png
new file mode 100644
index 00000000..d3af20cd
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_working.png b/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_working.png
new file mode 100644
index 00000000..4a3ce29d
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_detailed_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_l1_completed.png b/src/renderer/src/features/skins/assets/pilots/gold_black_l1_completed.png
new file mode 100644
index 00000000..8b145a60
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_l1_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_l1_idle.png b/src/renderer/src/features/skins/assets/pilots/gold_black_l1_idle.png
new file mode 100644
index 00000000..733e5ea9
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_l1_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_master_completed.png b/src/renderer/src/features/skins/assets/pilots/gold_black_master_completed.png
new file mode 100644
index 00000000..1688217b
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_master_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_master_idle.png b/src/renderer/src/features/skins/assets/pilots/gold_black_master_idle.png
new file mode 100644
index 00000000..5f6653b8
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_master_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gold_black_master_working.png b/src/renderer/src/features/skins/assets/pilots/gold_black_master_working.png
new file mode 100644
index 00000000..37dc83f8
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gold_black_master_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_completed.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_completed.png
new file mode 100644
index 00000000..6e3c157a
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_idle.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_idle.png
new file mode 100644
index 00000000..c2fca72e
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_working.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_working.png
new file mode 100644
index 00000000..a7faff1a
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_detailed_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_completed.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_completed.png
new file mode 100644
index 00000000..389eddad
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_idle.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_idle.png
new file mode 100644
index 00000000..b7244036
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_working.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_working.png
new file mode 100644
index 00000000..45f3c9fb
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_master_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_completed.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_completed.png
new file mode 100644
index 00000000..01d58e81
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_idle.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_idle.png
new file mode 100644
index 00000000..9e952b09
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_working.png b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_working.png
new file mode 100644
index 00000000..134cb868
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/gothic_eclipse_minimal_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_l1_completed.png b/src/renderer/src/features/skins/assets/pilots/matrix_l1_completed.png
new file mode 100644
index 00000000..4da8bbaf
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_l1_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_l1_idle.png b/src/renderer/src/features/skins/assets/pilots/matrix_l1_idle.png
new file mode 100644
index 00000000..05218660
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_l1_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_l1_working.png b/src/renderer/src/features/skins/assets/pilots/matrix_l1_working.png
new file mode 100644
index 00000000..7bef1a9d
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_l1_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_l2_completed.png b/src/renderer/src/features/skins/assets/pilots/matrix_l2_completed.png
new file mode 100644
index 00000000..aa0a32e4
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_l2_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_l2_idle.png b/src/renderer/src/features/skins/assets/pilots/matrix_l2_idle.png
new file mode 100644
index 00000000..837c4b48
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_l2_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_l2_working.png b/src/renderer/src/features/skins/assets/pilots/matrix_l2_working.png
new file mode 100644
index 00000000..4655a4da
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_l2_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_master_completed.png b/src/renderer/src/features/skins/assets/pilots/matrix_master_completed.png
new file mode 100644
index 00000000..2fc1edd3
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_master_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_master_idle.png b/src/renderer/src/features/skins/assets/pilots/matrix_master_idle.png
new file mode 100644
index 00000000..c25edd2a
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_master_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/matrix_master_working.png b/src/renderer/src/features/skins/assets/pilots/matrix_master_working.png
new file mode 100644
index 00000000..1b11a30a
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/matrix_master_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_l1_completed.png b/src/renderer/src/features/skins/assets/pilots/sakura_l1_completed.png
new file mode 100644
index 00000000..004e14ae
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_l1_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_l1_idle.png b/src/renderer/src/features/skins/assets/pilots/sakura_l1_idle.png
new file mode 100644
index 00000000..ce5973c8
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_l1_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_l1_working.png b/src/renderer/src/features/skins/assets/pilots/sakura_l1_working.png
new file mode 100644
index 00000000..f6347170
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_l1_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_l2_completed.png b/src/renderer/src/features/skins/assets/pilots/sakura_l2_completed.png
new file mode 100644
index 00000000..625e9ab8
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_l2_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_l2_idle.png b/src/renderer/src/features/skins/assets/pilots/sakura_l2_idle.png
new file mode 100644
index 00000000..53c2b989
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_l2_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_l2_working.png b/src/renderer/src/features/skins/assets/pilots/sakura_l2_working.png
new file mode 100644
index 00000000..4d0e2a73
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_l2_working.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_master_completed.png b/src/renderer/src/features/skins/assets/pilots/sakura_master_completed.png
new file mode 100644
index 00000000..ab815f71
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_master_completed.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_master_idle.png b/src/renderer/src/features/skins/assets/pilots/sakura_master_idle.png
new file mode 100644
index 00000000..2c1a7c25
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_master_idle.png differ
diff --git a/src/renderer/src/features/skins/assets/pilots/sakura_master_working.png b/src/renderer/src/features/skins/assets/pilots/sakura_master_working.png
new file mode 100644
index 00000000..e62ae8fb
Binary files /dev/null and b/src/renderer/src/features/skins/assets/pilots/sakura_master_working.png differ
diff --git a/src/renderer/src/features/skins/assets/sakura-frame.png b/src/renderer/src/features/skins/assets/sakura-frame.png
new file mode 100644
index 00000000..aafca5c5
Binary files /dev/null and b/src/renderer/src/features/skins/assets/sakura-frame.png differ
diff --git a/src/renderer/src/features/skins/pixelSkinCardGeometry.ts b/src/renderer/src/features/skins/pixelSkinCardGeometry.ts
new file mode 100644
index 00000000..545e009b
--- /dev/null
+++ b/src/renderer/src/features/skins/pixelSkinCardGeometry.ts
@@ -0,0 +1,44 @@
+import type { Point, SessionBounds, Size } from "../../../../shared/contracts";
+
+export const PIXEL_SKIN_CARD_SIZE: Size = { width: 1200, height: 800 };
+// Keep the old export for consumers that used it as the initial sizing target.
+export const PIXEL_SKIN_MIN_CARD_SIZE = PIXEL_SKIN_CARD_SIZE;
+const CARD_GAP = 40;
+
+interface PositionedCard {
+ id: string;
+ position: Point;
+ size: Size;
+}
+
+function overlaps(a: SessionBounds, b: SessionBounds): boolean {
+ return a.position.x < b.position.x + b.size.width + CARD_GAP
+ && a.position.x + a.size.width + CARD_GAP > b.position.x
+ && a.position.y < b.position.y + b.size.height + CARD_GAP
+ && a.position.y + a.size.height + CARD_GAP > b.position.y;
+}
+
+/** Normalize themed terminals to one frame size without stacking changed cards. */
+export function expandedPixelSkinCardBounds(cards: readonly PositionedCard[]): Array<{ id: string; bounds: SessionBounds }> {
+ const occupied: SessionBounds[] = cards
+ .filter((card) => card.size.width === PIXEL_SKIN_CARD_SIZE.width
+ && card.size.height === PIXEL_SKIN_CARD_SIZE.height)
+ .map(({ position, size }) => ({ position, size }));
+ const changed: Array<{ id: string; bounds: SessionBounds }> = [];
+ const ordered = cards
+ .filter((card) => card.size.width !== PIXEL_SKIN_CARD_SIZE.width
+ || card.size.height !== PIXEL_SKIN_CARD_SIZE.height)
+ .sort((a, b) => a.position.x - b.position.x || a.position.y - b.position.y);
+ for (const card of ordered) {
+ const size = { ...PIXEL_SKIN_CARD_SIZE };
+ const bounds = { position: { ...card.position }, size };
+ let collision = occupied.find((other) => overlaps(bounds, other));
+ while (collision) {
+ bounds.position.x = collision.position.x + collision.size.width + CARD_GAP;
+ collision = occupied.find((other) => overlaps(bounds, other));
+ }
+ changed.push({ id: card.id, bounds });
+ occupied.push(bounds);
+ }
+ return changed;
+}
diff --git a/src/renderer/src/features/skins/skinCatalog.ts b/src/renderer/src/features/skins/skinCatalog.ts
new file mode 100644
index 00000000..101f9773
--- /dev/null
+++ b/src/renderer/src/features/skins/skinCatalog.ts
@@ -0,0 +1,65 @@
+import type { SessionStatus } from "../../../../shared/contracts";
+
+export const PIXEL_SKIN_THEMES = ["sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse"] as const;
+export type PixelSkinThemeId = typeof PIXEL_SKIN_THEMES[number];
+export type PixelSkinDetailLevel = "minimal" | "detailed" | "master";
+export type PixelSkinArtState = "idle" | "working" | "completed";
+export type PixelSkinImageState = PixelSkinArtState;
+
+interface PixelSkinDefinition {
+ fileStem: string;
+ detailStems: Readonly>;
+}
+
+export const PIXEL_SKIN_CATALOG: Readonly> = {
+ sakura: { fileStem: "sakura", detailStems: { minimal: "l1", detailed: "l2", master: "master" } },
+ matrix: { fileStem: "matrix", detailStems: { minimal: "l1", detailed: "l2", master: "master" } },
+ "forest-cabin": { fileStem: "forest_cabin", detailStems: { minimal: "minimal", detailed: "detailed", master: "master" } },
+ "gold-black": { fileStem: "gold_black", detailStems: { minimal: "l1", detailed: "detailed", master: "master" } },
+ cat: { fileStem: "cat", detailStems: { minimal: "minimal", detailed: "detailed", master: "master" } },
+ "gothic-eclipse": { fileStem: "gothic_eclipse", detailStems: { minimal: "minimal", detailed: "detailed", master: "master" } }
+};
+
+export function pixelSkinAssetFilename(
+ theme: PixelSkinThemeId,
+ detail: PixelSkinDetailLevel,
+ state: PixelSkinArtState
+): string {
+ const definition = PIXEL_SKIN_CATALOG[theme];
+ return `${definition.fileStem}_${definition.detailStems[detail]}_${state}.png`;
+}
+
+export function isPixelSkinThemeId(value: unknown): value is PixelSkinThemeId {
+ return typeof value === "string" && (PIXEL_SKIN_THEMES as readonly string[]).includes(value);
+}
+
+export type PixelSkinAssetResolution =
+ | { kind: "asset"; filename: string; resolvedDetail: PixelSkinDetailLevel; url: string }
+ | { kind: "missing"; filename: string };
+
+/**
+ * A missing detail may use a lower-resolution image from the same theme and
+ * state. It never borrows another theme or another state.
+ */
+export function resolvePixelSkinAsset(
+ theme: PixelSkinThemeId,
+ detail: PixelSkinDetailLevel,
+ state: PixelSkinImageState,
+ availableAssets: Readonly>
+): PixelSkinAssetResolution {
+ const levels: PixelSkinDetailLevel[] = ["minimal", "detailed", "master"];
+ const requestedIndex = levels.indexOf(detail);
+ for (const candidate of levels.slice(0, requestedIndex + 1).reverse()) {
+ const filename = pixelSkinAssetFilename(theme, candidate, state);
+ const url = availableAssets[filename];
+ if (url) return { kind: "asset", filename, resolvedDetail: candidate, url };
+ }
+ return { kind: "missing", filename: pixelSkinAssetFilename(theme, detail, state) };
+}
+
+/** Both process exit paths are terminal states, independent of success. */
+export function pixelSkinStateForSession(status: SessionStatus, turnCompleted = false): PixelSkinImageState {
+ if (status === "working") return "working";
+ if (status === "done" || status === "failed") return "completed";
+ return status === "idle" && turnCompleted ? "completed" : "idle";
+}
diff --git a/src/renderer/src/features/skins/skinSchema.ts b/src/renderer/src/features/skins/skinSchema.ts
new file mode 100644
index 00000000..557cf6a7
--- /dev/null
+++ b/src/renderer/src/features/skins/skinSchema.ts
@@ -0,0 +1,43 @@
+export interface SkinRect { x: number; y: number; width: number; height: number }
+export interface TiledFrame {
+ corners: readonly [SkinRect, SkinRect, SkinRect, SkinRect];
+ edges: readonly [SkinRect, SkinRect, SkinRect, SkinRect];
+ cornerWidth: number;
+ cornerHeight: number;
+ edgeThickness: number;
+ tileLength: number;
+ edgeOffsets: readonly [number, number, number, number];
+}
+export interface SkinDefinition {
+ id: string;
+ atlasUrl: string;
+ frame: TiledFrame;
+ safeInsets: { left: number; right: number; bottom: number };
+}
+
+export function createSakuraSkin(atlasUrl: string): SkinDefinition {
+ return {
+ id: "sakura",
+ atlasUrl,
+ frame: {
+ corners: [
+ { x: 0, y: 0, width: 360, height: 260 },
+ { x: 1176, y: 0, width: 360, height: 260 },
+ { x: 0, y: 764, width: 360, height: 260 },
+ { x: 1176, y: 764, width: 360, height: 260 }
+ ],
+ edges: [
+ { x: 690, y: 58, width: 56, height: 80 },
+ { x: 1410, y: 460, width: 80, height: 56 },
+ { x: 690, y: 888, width: 56, height: 80 },
+ { x: 46, y: 460, width: 80, height: 56 }
+ ],
+ cornerWidth: 68,
+ cornerHeight: 58,
+ edgeThickness: 22,
+ tileLength: 18,
+ edgeOffsets: [12, 29, 34, 7]
+ },
+ safeInsets: { left: 28, right: 28, bottom: 58 }
+ };
+}
diff --git a/src/renderer/src/features/skins/skinViewAssets.ts b/src/renderer/src/features/skins/skinViewAssets.ts
new file mode 100644
index 00000000..7dbe573d
--- /dev/null
+++ b/src/renderer/src/features/skins/skinViewAssets.ts
@@ -0,0 +1,32 @@
+import type { PixelSkinAssetResolution, PixelSkinDetailLevel, PixelSkinImageState, PixelSkinThemeId } from "./skinCatalog.ts";
+import { pixelSkinAssetFilename, resolvePixelSkinAsset } from "./skinCatalog.ts";
+
+export function resolvePixelSkinViewAsset(
+ theme: PixelSkinThemeId,
+ detail: PixelSkinDetailLevel,
+ state: PixelSkinImageState,
+ availableAssets: Readonly>
+): PixelSkinAssetResolution {
+ const resolution = resolvePixelSkinAsset(theme, detail, state, availableAssets);
+ if (resolution.kind === "asset" || theme !== "gold-black" || detail !== "minimal" || state !== "working") {
+ return resolution;
+ }
+
+ const filename = pixelSkinAssetFilename(theme, "minimal", "idle");
+ const url = filename ? availableAssets[filename] : undefined;
+ return url && filename
+ ? { kind: "asset", filename, resolvedDetail: "minimal", url }
+ : resolution;
+}
+
+export function needsGoldMinimalWorkingMarker(
+ theme: PixelSkinThemeId,
+ detail: PixelSkinDetailLevel,
+ state: PixelSkinImageState,
+ availableAssets: Readonly>
+): boolean {
+ if (theme !== "gold-black" || detail !== "minimal" || state !== "working") return false;
+ if (resolvePixelSkinAsset(theme, detail, state, availableAssets).kind === "asset") return false;
+ const idleFilename = pixelSkinAssetFilename(theme, "minimal", "idle");
+ return Boolean(idleFilename && availableAssets[idleFilename]);
+}
diff --git a/src/renderer/src/features/terminal/TerminalCard.tsx b/src/renderer/src/features/terminal/TerminalCard.tsx
index a2b764ad..64c9eb0a 100644
--- a/src/renderer/src/features/terminal/TerminalCard.tsx
+++ b/src/renderer/src/features/terminal/TerminalCard.tsx
@@ -16,12 +16,15 @@ import type {
Point,
FocusActivation,
SessionBounds,
- SessionSnapshot
+ SessionSnapshot,
+ PixelSkinPreferredDetail,
+ TerminalBorderSkinId
} from "../../../../shared/contracts";
import { usePluginCardDecorations } from "../plugins/cardDecorations";
import { ProviderIcon } from "../../components/ProviderIcon";
import { UiIcon } from "../../components/UiIcon";
import { t } from "../../lib/i18n";
+import { isCustomTerminalBorderSkinId, terminalBorderSkinFallback } from "../../lib/skinStyles";
import { sessionStatusLabel } from "../../lib/sessionStatus";
import { attachTerminalMouseCoordinateAdapter, attachTerminalScrollbarCoordinateAdapter } from "./terminalMouseCoordinates";
import {
@@ -46,11 +49,17 @@ import { terminalCanvasWidgetId } from "../workspace/canvasWidgetFocus";
import { renameCommit, visibleTerminalTitle } from "./terminalTitle";
import { canvasCardPropsEqual } from "./terminalCardProps";
import { webglContextPool } from "./webglContextPool";
+import { Canvas2DSkinView } from "../skins/Canvas2DSkinView";
+import { isPixelSkinThemeId, pixelSkinStateForSession } from "../skins/skinCatalog";
+import { isPixelSkinPackId, usePixelSkinPackSummary } from "../skins/SkinAssets";
+import { pixelSkinControlLayout, pixelSkinSurfaceBounds, skinDetailLevel } from "../skins/SkinLayout";
interface TerminalCardProps {
session: SessionSnapshot;
locale: LocaleId;
palette: PaletteId;
+ borderSkin: TerminalBorderSkinId;
+ skinDetail: PixelSkinPreferredDetail;
zoom: number;
stackIndex: number;
snapEnabled: boolean;
@@ -60,7 +69,8 @@ interface TerminalCardProps {
focused: boolean;
focusChangeSource: "explicit" | "hover";
selected: boolean;
- /** Multi-select group member: gets the selected outline without focus side effects. */
+ forceMasterDetail: boolean;
+ /** Multi-select group member: gets the selected outline without focus/WebGL side effects. */
groupSelected?: boolean;
renaming: boolean;
fullscreen: boolean;
@@ -117,6 +127,8 @@ function TerminalCardView({
session,
locale,
palette,
+ borderSkin: selectedBorderSkin,
+ skinDetail,
zoom,
stackIndex,
snapEnabled,
@@ -126,6 +138,7 @@ function TerminalCardView({
focused,
focusChangeSource,
selected,
+ forceMasterDetail,
groupSelected,
renaming,
fullscreen,
@@ -141,6 +154,11 @@ function TerminalCardView({
onOpenUrl,
restoreEnabled = false
}: TerminalCardProps): React.JSX.Element {
+ const borderSkin = terminalBorderSkinFallback(selectedBorderSkin);
+ const customBorderSkin = isCustomTerminalBorderSkinId(selectedBorderSkin) ? selectedBorderSkin : undefined;
+ const pixelSkinTheme = isPixelSkinThemeId(borderSkin) || isPixelSkinPackId(borderSkin) ? borderSkin : null;
+ const pixelPack = usePixelSkinPackSummary(isPixelSkinPackId(borderSkin) ? borderSkin : null);
+ const pixelArtState = pixelSkinStateForSession(session.status, session.turnCompleted);
const terminalHost = useRef(null);
const terminalRef = useRef(null);
const onOpenUrlRef = useRef(onOpenUrl);
@@ -165,6 +183,16 @@ function TerminalCardView({
const resizeState = useRef(null);
const [position, setPosition] = useState(session.position);
const [size, setSize] = useState(session.size);
+ const pixelDetail = pixelSkinTheme
+ ? skinDetailLevel(skinDetail, forceMasterDetail || session.role === "orchestrator")
+ : "minimal";
+ const pixelSurfaceBounds = pixelSkinTheme
+ ? pixelSkinSurfaceBounds(pixelSkinTheme, pixelDetail, size.width, size.height, 26,
+ pixelPack?.apertures[pixelDetail] ?? pixelPack?.aperture)
+ : null;
+ const pixelControls = pixelSkinTheme
+ ? pixelSkinControlLayout(pixelSkinTheme, pixelDetail, size.width, size.height)
+ : null;
const [restarting, setRestarting] = useState(false);
const [optionsOpen, setOptionsOpen] = useState(false);
const [noteDismissed, setNoteDismissed] = useState(null);
@@ -190,7 +218,7 @@ function TerminalCardView({
const liveBounds = useRef({ position: session.position, size: session.size });
const summaryMode = zoom < 0.5;
const summaryScale = summaryMode ? Math.min(2.5, Math.max(1, 0.5 / zoom)) : 1;
- const terminalBackground = terminalTheme(palette).background;
+ const terminalBackground = terminalTheme(palette, pixelSkinTheme).background;
const searchAddonRef = useRef(null);
const webglAddonRef = useRef(null);
const fitRef = useRef<(() => void) | null>(null);
@@ -245,7 +273,7 @@ function TerminalCardView({
// count) are proposed API in xterm; without this flag findNext throws and
// the counter never leaves 0/0. The flag only unlocks that surface.
allowProposedApi: true,
- theme: terminalTheme(palette),
+ theme: terminalTheme(palette, pixelSkinTheme),
// OSC 8 hyperlinks are handled by xterm itself rather than WebLinksAddon.
// Without an explicit handler, xterm shows its own confirm() prompt and
// attempts window.open(), bypassing CanvasTTY's link destination chooser.
@@ -304,6 +332,11 @@ function TerminalCardView({
};
fitRef.current = fit;
terminal.attachCustomKeyEventHandler((event) => {
+ if ((event.key === "F4" || event.code === "F4")
+ && !event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey
+ && terminalHost.current?.closest(".terminal-card")?.getAttribute("data-pixel-skin") === "true") {
+ return false;
+ }
if (shouldSearchTerminalOutput(event)) {
// Ctrl+Shift+F belongs to the card's scrollback search, never the shell.
event.preventDefault();
@@ -413,8 +446,8 @@ function TerminalCardView({
useEffect(() => {
const terminal = terminalRef.current;
- if (terminal) terminal.options.theme = terminalTheme(palette);
- }, [palette]);
+ if (terminal) terminal.options.theme = terminalTheme(palette, pixelSkinTheme);
+ }, [palette, pixelSkinTheme]);
const enableWebgl = (terminal: Terminal): boolean => {
if (webglAddonRef.current) return true;
@@ -699,6 +732,66 @@ function TerminalCardView({
};
const searchCount = `${searchMatches.current}/${searchMatches.total}`;
+ const terminalActions = (
+ {
onSelect(session.id);
- if (!renaming && !summaryMode && !(event.target as HTMLElement).closest("button, input")) {
+ if (!renaming && !summaryMode && !(event.target as HTMLElement).closest("button, input, .terminal-card__skin-drag")) {
terminalRef.current?.focus();
}
}}
@@ -753,8 +849,12 @@ function TerminalCardView({
zIndex: stackIndex,
transform: `translate(${position.x}px, ${position.y}px)`,
"--summary-scale": summaryScale,
- "--summary-content-width": `${Math.max(0, (size.width - 72) / summaryScale)}px`,
- "--terminal-background": terminalBackground
+ "--summary-content-width": `${Math.max(0, ((pixelSurfaceBounds ? pixelSurfaceBounds.right - pixelSurfaceBounds.left : size.width) - 72) / summaryScale)}px`,
+ "--terminal-background": terminalBackground,
+ "--pixel-skin-left-inset": `${pixelSurfaceBounds?.left ?? 28}px`,
+ "--pixel-skin-right-inset": `${size.width - (pixelSurfaceBounds?.right ?? (size.width - 28))}px`,
+ "--pixel-skin-top-inset": `${pixelSurfaceBounds?.top ?? 70}px`,
+ "--pixel-skin-bottom-inset": `${size.height - (pixelSurfaceBounds?.bottom ?? (size.height - 58))}px`
} as React.CSSProperties}
>
{fullscreen && (
@@ -824,73 +924,19 @@ function TerminalCardView({
))}
- {
+ if (event.target === event.currentTarget && !installing) setOpen(false);
+ }}>
+
, document.body
+ )}
+
+ );
+}
diff --git a/src/renderer/src/features/settings/ProviderSecretsSettings.tsx b/src/renderer/src/features/settings/ProviderSecretsSettings.tsx
index 56a10e2e..1f6fcec1 100644
--- a/src/renderer/src/features/settings/ProviderSecretsSettings.tsx
+++ b/src/renderer/src/features/settings/ProviderSecretsSettings.tsx
@@ -84,7 +84,12 @@ export function ProviderSecretsSettings({ locale }: ProviderSecretsSettingsProps
spellCheck={false}
placeholder={secretId}
aria-label={`${SECRET_LABELS[secretId]} ${secretId}`}
- onChange={(event) => setDrafts((current) => ({ ...current, [secretId]: event.currentTarget.value }))}
+ onChange={(event) => {
+ // Read the value while the event is dispatching: React may run the updater
+ // later (a paste over a pending edit), when currentTarget is already null.
+ const value = event.currentTarget.value;
+ setDrafts((current) => ({ ...current, [secretId]: value }));
+ }}
onKeyDown={(event) => {
if (event.key === "Enter") void save(secretId);
}}
diff --git a/src/renderer/src/features/settings/SettingsPanel.tsx b/src/renderer/src/features/settings/SettingsPanel.tsx
index 32440890..a240d38f 100644
--- a/src/renderer/src/features/settings/SettingsPanel.tsx
+++ b/src/renderer/src/features/settings/SettingsPanel.tsx
@@ -3,6 +3,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
import appManifest from "../../../../../package.json";
import type {
AppSettings,
+ AppSkinId,
AgentCliAvailability,
AgentProviderId,
BrowserActivityEvent,
@@ -11,9 +12,11 @@ import type {
BrowserSnapshot,
CanvasLauncherItemId,
CanvasColorId,
+ CanvasBackgroundId,
CanvasOverlayPlacement,
CanvasPatternId,
CanvasWheelCaptureMode,
+ CustomTerminalBorderSkinId,
EdgePanSpeed,
FocusActivation,
GithubPluginSearchResult,
@@ -29,15 +32,23 @@ import type {
PluginManifest,
PluginInstallPreview,
PluginUpdateStatus,
+ PixelSkinPackSummary,
+ PixelSkinPreferredDetail,
+ PixelSkinSlot,
+ PixelTerminalBorderSkinId,
RadialLauncherItemId,
SessionRestoreMode,
SessionRowColorMode,
+ SessionStatus,
ShortcutAction,
+ TerminalBorderSkinListItem,
+ TerminalBorderSkinId,
UpdaterState,
ZoomSensitivity
} from "../../../../shared/contracts";
import {
BROWSER_PROVIDER_COLORS,
+ BUNDLED_CANVAS_BACKGROUND_IDS,
CANVAS_LAUNCHER_ITEMS,
DEFAULT_CANVAS_LAUNCHER_ITEMS,
DEFAULT_RADIAL_LAUNCHER_ITEMS,
@@ -51,7 +62,6 @@ import {
defaultCanvasWheelBinding
} from "../../../../shared/canvasNavigation";
import { ProviderIcon } from "../../components/ProviderIcon";
-import { ShortcutReference } from "../../components/ShortcutReference";
import { UiIcon, type UiIconName } from "../../components/UiIcon";
import {
CanvasMenuDivider,
@@ -69,6 +79,11 @@ import {
} from "../../lib/providers";
import { shortcutFromKeyboardEvent, shortcutFromPointerEvent } from "../../lib/shortcuts";
import { t } from "../../lib/i18n";
+import {
+ createTerminalBorderSkinPreviewStyleController,
+ isCustomTerminalBorderSkinId,
+ normalizeTerminalBorderSkinList
+} from "../../lib/skinStyles";
import { PluginSettingsSection } from "../plugins/PluginSettingsSection";
import { HomeAppearanceSettings } from "../home/HomeAppearanceSettings";
import {
@@ -86,6 +101,12 @@ import { UpdatesSettings } from "./UpdatesSettings";
import { setCanvasLauncherItemEnabled } from "../launcher/canvasLauncher";
import { itemLabel } from "../launcher/QuickRadialMenu";
import { setRadialLauncherItemEnabled } from "../launcher/radialLauncher";
+import { Canvas2DSkinView } from "../skins/Canvas2DSkinView";
+import { isPixelSkinPackId, PILOT_SKIN_ASSETS } from "../skins/SkinAssets";
+import { isPixelSkinThemeId, pixelSkinAssetFilename } from "../skins/skinCatalog";
+import type { PixelSkinThemeId } from "../skins/skinCatalog";
+import type { SkinDetailLevel } from "../skins/SkinLayout";
+import { PixelSkinPackCreator } from "./PixelSkinPackCreator";
type SettingsSection = "general" | "appearance" | "agents" | "controls" | "browser" | "plugins" | "updates" | "about";
@@ -186,6 +207,27 @@ export function SettingsPanel({
const [clearingBrowserData, setClearingBrowserData] = useState(false);
const [browserDataMessage, setBrowserDataMessage] = useState
+
+
+
+ {ru ? "Новая пиксельная тема" : "New pixel theme"}
+ +
+
+
+
+ ![{ru]({PILOT_SKIN_ASSETS[pixelSkinAssetFilename("sakura",)
+ {ru ? "Пример: детальная рамка «Сакура»" : "Example: detailed Sakura border"}
+
+
+
+
+ {ru ? "Соберите тему с помощью агента" : "Build a theme with your agent"}
+-
+
- {ru ? "Скопируйте задание ниже, вставьте его в чат агента, опишите стиль и приложите референс." : "Copy the brief below, paste it into your agent chat, describe the style, and attach a reference."} +
- {ru ? "Загрузите готовый ZIP от агента или 10 PNG: 9 рамок и 1 фон Canvas." : "Upload the agent’s ZIP or 10 PNGs: 9 borders and 1 Canvas background."} +
- {ru ? "Назовите тему и нажмите «Создать тему». Её рамки и фон можно выбирать независимо в оформлении." : "Name the theme and select “Create theme”. Its borders and background can be selected independently in Appearance."} +
+
+ {
+ if (event.target.files) assignMany(event.target.files);
+ event.target.value = "";
+ }} />
+ {
+ assignZip(event.target.files?.[0]);
+ event.target.value = "";
+ }} />
+
+
+
+
+
+
+
+ {zipFile + ? (ru ? "ZIP будет проверен при создании темы. Предпросмотр рамок появится после установки." : "The ZIP will be validated when you create the theme. Border previews are available after installation.") + : (ru ? "Ниже — места для ваших PNG, а не готовые варианты. Нажмите на ячейку или перетащите PNG: в ней появится превью. Строки — простая рамка, детальная и Master для оркестратора; столбцы — ожидание, работа и готово." : "These are slots for your PNGs, not existing designs. Click a slot or drop a PNG to see its preview. Rows are simple, detailed, and Master for an orchestrator; columns are idle, working, and completed.")}
+ {zipFile ?
+ {zipFile.name}
+
+
:
+ {LEVELS.map((level) => STATES.map((state) => {
+ const slot = `${level}_${state}` as PixelSkinSlot;
+ const label = `${levelLabels[level]} · ${stateLabels[state]}`;
+ return (
+
+ );
+ }))}
+
}
+
+ {!zipFile && }
+
+
+
+ {ru ? "Отступы оставляют место для рамки вокруг текста терминала. Меняйте их, если рисунок перекрывает текст." : "Insets reserve space for the border around terminal text. Adjust them if the artwork overlaps the text."}
+
+ {LEVELS.map((level) => (
+
+ ))}
+
+ {(["left", "right", "top", "bottom"] as const).map((edge) => (
+
+ ))}
+
+ {error ?? (zipFile ? zipFile.name : `${count}/10 PNG`)}
+
+
+ {shortcutError}
)}
+
+ {BUNDLED_CANVAS_BACKGROUND_IDS.map((id) => )}
+ {pixelPacks.map((pack) => )}
+ {isPixelSkinPackId(value) && !pixelPacks.some((pack) => pack.id === value) &&
+ {locale === "ru" ? "Выбранный пользовательский фон недоступен." : "The selected custom background is unavailable."}
+ }
+
;
+}
+
+function BorderSkinChoices({
+ locale,
+ value,
+ pixelPacks,
+ onPackCreated,
+ onChange
+}: {
+ locale: LocaleId;
+ value: TerminalBorderSkinId;
+ pixelPacks: PixelSkinPackSummary[];
+ onPackCreated(pack: PixelSkinPackSummary): void;
+ onChange(value: TerminalBorderSkinId): void;
+}): React.JSX.Element {
+ const [customSkins, setCustomSkins] = useState
+ {choices.map(([skin, labelKey]) => {
+ const pixelTheme = isPixelSkinThemeId(skin) ? skin : null;
+ return (
+
+ );
+ })}
+ {customSkins.map((skin) => {
+ const label = skin.status === "ready" ? skin.name : (skin.name || skin.id.slice("custom:".length));
+ const status = customSkinStatus(skin);
+ return (
+
+ );
+ })}
+ {pixelPacks.map((pack) => (
+
+ ))}
+ {
+ onPackCreated(pack);
+ onChange(pack.id);
+ }} />
+ {selectedCustomSkinId && !selectedCustomSkin && (
+
+ )}
+ {(isPixelSkinThemeId(value) || isPixelSkinPackId(value)) && (
+
+ );
+}
+
+function PixelSkinPackThumbnail({ id, slot = "detailed_idle" }: { id: PixelTerminalBorderSkinId; slot?: PixelSkinSlot }): React.JSX.Element {
+ const [url, setUrl] = useState
+
+ );
+}
+
+function CustomTerminalBorderSkinPreview({
+ skinId,
+ selected = false
+}: {
+ skinId: CustomTerminalBorderSkinId;
+ selected?: boolean;
+}): React.JSX.Element {
+ return (
+
+ );
+}
+
+function AppSkinChoices({
+ locale,
+ value,
+ onChange
+}: {
+ locale: LocaleId;
+ value: AppSkinId;
+ onChange(value: AppSkinId): void;
+}): React.JSX.Element {
+ const choices: readonly [AppSkinId, Parameters
+ {isRussian ? "Режим предпросмотра" : "Preview mode"}
+
+ {isRussian ? "Переключатели ниже меняют только пример. Детализация рабочих окон задаётся в настройке «Детализация терминалов»." : "The controls below change only this example. Set live window detail in “Terminal detail”."}
+{isRussian ? "Minimal — простая рамка, Detailed — детальная, Master — вариант для оформления оркестратора." : "Minimal is a simple border, Detailed adds decoration, and Master is the variant for an orchestrator window."}
+
+
+
+ {details.map(([value, label, accessibleLabel]) => (
+
+ ))}
+
+
+ {states.map(([value, label, accessibleLabel]) => (
+
+ ))}
+
+ value === detail)?.[2]}, ${states.find(([value]) => value === status)?.[2]}`}
+ >
+
+ {size.width > 0 && size.height > 0 && (
+
+
+ {choices.map(([skin, labelKey]) => (
+
+ ))}
+
+ );
+}
+
function SwatchChoices({
value,
options,
diff --git a/src/renderer/src/features/settings/pixelPackFiles.ts b/src/renderer/src/features/settings/pixelPackFiles.ts
new file mode 100644
index 00000000..61fbee31
--- /dev/null
+++ b/src/renderer/src/features/settings/pixelPackFiles.ts
@@ -0,0 +1,11 @@
+import type { PixelSkinSlot } from "../../../../shared/contracts";
+
+export function pixelPackSlotForFilename(filename: string): PixelSkinSlot | null {
+ const stem = filename.toLowerCase().replace(/\.png$/, "").replace(/[\s-]+/g, "_");
+ if (stem === "background" || stem.endsWith("_background")) return "background";
+ const match = /(?:^|_)(minimal|l1|detailed|l2|master)_(idle|working|completed|complete|done)$/.exec(stem);
+ if (!match) return null;
+ const level = match[1] === "l1" ? "minimal" : match[1] === "l2" ? "detailed" : match[1];
+ const state = match[2] === "done" || match[2] === "complete" ? "completed" : match[2];
+ return `${level}_${state}` as PixelSkinSlot;
+}
diff --git a/src/renderer/src/features/settings/pixelThemeAgentPrompt.ts b/src/renderer/src/features/settings/pixelThemeAgentPrompt.ts
new file mode 100644
index 00000000..593f6fc3
--- /dev/null
+++ b/src/renderer/src/features/settings/pixelThemeAgentPrompt.ts
@@ -0,0 +1,10 @@
+import type { LocaleId } from "../../../../shared/contracts";
+
+export const PIXEL_THEME_AGENT_GUIDE_URL = "https://github.com/teo-nex/CanvasTTY-design-for-agents/blob/main/AGENT_START.md";
+
+export function pixelThemeAgentPrompt(locale: LocaleId): string {
+ if (locale === "ru") {
+ return `Создай для CanvasTTY новую пиксельную тему по приложенному референсу. Набор для агента: https://github.com/teo-nex/CanvasTTY-design-for-agents. Сначала изучи README, ${PIXEL_THEME_AGENT_GUIDE_URL} и SPEC.ru.md в этом репозитории. Актуальный импортёр и валидатор проверь в https://github.com/howdeploy/CanvasTTY. Референс задаёт художественное направление, но результат должен соответствовать техническому формату CanvasTTY. Сделай три уровня (minimal, detailed, master) и три отчётливо различимых состояния каждого (idle, working, completed), плюс отдельный background.png. Выдай установочный ZIP только с десятью финальными PNG и точными именами из инструкции; исходники и промежуточные файлы храни отдельно. Проверь ZIP реальным валидатором CanvasTTY, просмотри все девять кадров и фон, укажи отступы прозрачного проёма для каждого уровня. Не утверждай, что тема установлена в моём приложении, если ты её там не установил и не проверил. Референс прикрепляю к этому сообщению.`;
+ }
+ return `Create a new CanvasTTY pixel theme from the attached visual reference. Agent kit: https://github.com/teo-nex/CanvasTTY-design-for-agents. First read its README, ${PIXEL_THEME_AGENT_GUIDE_URL}, and SPEC.ru.md. Confirm the current importer and validator contract in https://github.com/howdeploy/CanvasTTY. The reference guides the art, but the output must satisfy CanvasTTY's technical format. Produce minimal, detailed, and master levels, each with visibly distinct idle, working, and completed states, plus a separate background.png. Deliver an install ZIP containing only the ten final PNGs with the exact filenames from the guide; keep sources and intermediate files separate. Validate the ZIP with CanvasTTY's validator, visually inspect all nine frames and the background, and report transparent-aperture insets for each level. Do not claim the theme is installed in my app unless you actually install and verify it. I am attaching the reference to this message.`;
+}
diff --git a/src/renderer/src/features/skins/Canvas2DSkinView.tsx b/src/renderer/src/features/skins/Canvas2DSkinView.tsx
new file mode 100644
index 00000000..2e6fab68
--- /dev/null
+++ b/src/renderer/src/features/skins/Canvas2DSkinView.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useRef, useState } from "react";
+import type { PixelTerminalBorderSkinId, SessionStatus } from "../../../../shared/contracts";
+import { acquireSkinImage, isPixelSkinPackId, PILOT_SKIN_ASSETS, usePixelSkinPackAssets } from "./SkinAssets";
+import { pixelSkinArtworkBounds, pixelSkinSurfaceBounds } from "./SkinLayout";
+import type { PixelSkinSurfaceBounds, SkinDetailLevel } from "./SkinLayout";
+import { needsGoldMinimalWorkingMarker, resolvePixelSkinViewAsset } from "./skinViewAssets";
+import { isPixelSkinThemeId, pixelSkinStateForSession } from "./skinCatalog";
+import type { PixelSkinArtState, PixelSkinThemeId } from "./skinCatalog";
+
+const MAX_CANVAS_PIXELS = 2_000_000;
+type ArtworkDetail = SkinDetailLevel;
+const THEME_COLORS: Record
+ {!summaryMode && (
+
+ )}
+ {session.exitCode !== null && (
+
+ )}
+ {session.exitCode !== null && session.provider !== "terminal" && (
+
+ )}
+ {hasOptions && (
+
+ )}
+
+
+
+ );
return (
- {!summaryMode && (
-
- )}
- {session.exitCode !== null && (
-
- )}
- {session.exitCode !== null && session.provider !== "terminal" && (
-
- )}
- {hasOptions && (
-
- )}
-
-
-
+ {!pixelControls && terminalActions}
{ if (event.key === "Escape") setOptionsOpen(false); }}>
{restoreEnabled && (
@@ -1025,8 +1071,8 @@ function TerminalCardView({
);
}
-function terminalTheme(palette: PaletteId): { background: string; foreground: string; cursor: string; selectionBackground: string } {
- const background = palette === "night" ? "#171a24" : "#202430";
+function terminalTheme(palette: PaletteId, pixelSkin: string | null = null): { background: string; foreground: string; cursor: string; selectionBackground: string } {
+ const background = pixelSkin ? "#00000000" : palette === "night" ? "#171a24" : "#202430";
return {
background,
foreground: "#f7f4ec",
diff --git a/src/renderer/src/features/terminal/terminalShortcuts.ts b/src/renderer/src/features/terminal/terminalShortcuts.ts
index 9778c536..34f83ddb 100644
--- a/src/renderer/src/features/terminal/terminalShortcuts.ts
+++ b/src/renderer/src/features/terminal/terminalShortcuts.ts
@@ -1,9 +1,10 @@
-import { matchesPhysicalOrLayoutKey } from "../../lib/shortcuts.ts";
+import { matchesPhysicalOrLayoutKey, matchesShortcut } from "../../lib/shortcuts.ts";
interface TerminalKeyEvent {
type: string;
key: string;
code: string;
+ repeat?: boolean;
ctrlKey: boolean;
shiftKey: boolean;
metaKey: boolean;
@@ -12,6 +13,22 @@ interface TerminalKeyEvent {
export const SHIFT_ENTER_SEQUENCE = "\u001b[13;2u";
+export function shouldTogglePixelSkinMasterView(
+ event: TerminalKeyEvent,
+ selectedTerminalExists: boolean,
+ reservedShortcuts: readonly string[]
+): boolean {
+ return selectedTerminalExists
+ && event.type === "keydown"
+ && !event.repeat
+ && (event.key === "F4" || event.code === "F4")
+ && !event.ctrlKey
+ && !event.shiftKey
+ && !event.metaKey
+ && !event.altKey
+ && !reservedShortcuts.some((shortcut) => matchesShortcut(event, shortcut));
+}
+
export function shouldSendTerminalLineBreak(event: TerminalKeyEvent): boolean {
return event.type === "keydown"
&& (event.key === "Enter" || event.code === "Enter" || event.code === "NumpadEnter")
diff --git a/src/renderer/src/features/workspace/WorkspaceCanvas.tsx b/src/renderer/src/features/workspace/WorkspaceCanvas.tsx
index ba106913..10138867 100644
--- a/src/renderer/src/features/workspace/WorkspaceCanvas.tsx
+++ b/src/renderer/src/features/workspace/WorkspaceCanvas.tsx
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BUNDLED_CANVAS_BACKGROUND_IDS } from "../../../../shared/contracts";
import type {
AgentProviderId,
AppSettings,
@@ -36,6 +37,9 @@ import { StickyNoteCard } from "../notes/StickyNoteCard";
import { stickyNoteAtPoint } from "../notes/stickyNoteBounds";
import { PluginCanvasCard } from "../plugins/PluginCanvasCard";
import { TerminalCard } from "../terminal/TerminalCard";
+import { shouldTogglePixelSkinMasterView } from "../terminal/terminalShortcuts";
+import { isPixelSkinThemeId } from "../skins/skinCatalog";
+import { isPixelSkinPackId, usePixelSkinPackAssets } from "../skins/SkinAssets";
import { CanvasCommandPalette } from "./CanvasCommandPalette";
import { CanvasContextMenu } from "./CanvasContextMenu";
import { CanvasMinimap } from "./CanvasMinimap";
@@ -86,7 +90,7 @@ import { useCanvasWheelNavigation } from "./useCanvasWheelNavigation";
import { useCanvasWidgetFocus } from "./useCanvasWidgetFocus";
import { webglContextPool } from "../terminal/webglContextPool";
-const CANVAS_OVERLAY_PLACEMENTS: CanvasOverlayPlacement[] = [
+const CANVAS_OVERLAY_PLACEMENTS: readonly CanvasOverlayPlacement[] = [
"top-left",
"top-right",
"bottom-left",
@@ -239,8 +243,11 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
const [noteEditRequest, setNoteEditRequest] = useState<{ id: string; version: number } | null>(null);
const [regionMovePreview, setRegionMovePreview] = useState(null);
const [marqueeSelection, setMarqueeSelection] = useState>(EMPTY_MARQUEE_SELECTION);
+ const [masterPixelSkinSessionIds, setMasterPixelSkinSessionIds] = useState>(() => new Set());
const overlays = useRef(null);
const [overlayRects, setOverlayRects] = useState([]);
+ const sessionsRef = useRef(sessions);
+ sessionsRef.current = sessions;
const cameraRef = useRef(camera);
cameraRef.current = camera;
const commitCamera = useCallback((next: CameraState): void => {
@@ -749,6 +756,25 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
return;
}
const handleShortcut = (event: KeyboardEvent): void => {
+ if (activeSessionId !== null
+ && (isPixelSkinThemeId(settings.terminalBorderSkin) || isPixelSkinPackId(settings.terminalBorderSkin))
+ && shouldTogglePixelSkinMasterView(
+ event,
+ sessionsRef.current.some((session) => session.id === activeSessionId),
+ [settings.shortcuts.home, settings.shortcuts.renameWindow]
+ )
+ && !isShortcutCaptureTarget(event.target)
+ && !isRenameInputTarget(event.target)) {
+ event.preventDefault();
+ event.stopPropagation();
+ setMasterPixelSkinSessionIds((current) => {
+ const next = new Set(current);
+ if (next.has(activeSessionId)) next.delete(activeSessionId);
+ else next.add(activeSessionId);
+ return next;
+ });
+ return;
+ }
// Alt+arrow is a canvas gesture of its own; the Ctrl/Cmd chords below stay untouched.
const direction = event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey
? CANVAS_FOCUS_ARROWS[event.key]
@@ -778,11 +804,20 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
};
window.addEventListener("keydown", handleShortcut, true);
return () => window.removeEventListener("keydown", handleShortcut, true);
- }, [browserViewVisible, homeEditing, onOpenSettings]);
+ }, [activeSessionId, browserViewVisible, homeEditing, onOpenSettings,
+ settings.shortcuts.home, settings.shortcuts.renameWindow, settings.terminalBorderSkin]);
+
+ const themeBackground = (BUNDLED_CANVAS_BACKGROUND_IDS as readonly string[]).includes(settings.canvasBackground)
+ ? settings.canvasBackground : undefined;
+ const packBackground = usePixelSkinPackAssets(
+ isPixelSkinPackId(settings.canvasBackground) ? settings.canvasBackground : null
+ )?.background;
return (
{
if (openRadialLauncher(event)) return;
@@ -907,6 +942,8 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
session={withGroupNudge(terminalLayerId(session.id), session)}
locale={settings.locale}
palette={settings.palette}
+ borderSkin={settings.terminalBorderSkin}
+ skinDetail={settings.terminalSkinDetail}
zoom={camera.zoom}
stackIndex={canvasLayerZIndex(layerOrder, terminalLayerId(session.id))}
snapEnabled={settings.snapToGrid}
@@ -916,6 +953,7 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
focused={widgetFocus.id === terminalCanvasWidgetId(session.id)}
focusChangeSource={widgetFocus.source}
selected={activeSessionId === session.id}
+ forceMasterDetail={masterPixelSkinSessionIds.has(session.id)}
groupSelected={marqueeSelection.has(terminalLayerId(session.id))}
renaming={renamingSessionId === session.id}
fullscreen={fullscreenSessionId === session.id}
@@ -1050,6 +1088,8 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
session={withGroupNudge(terminalLayerId(session.id), session)}
locale={settings.locale}
palette={settings.palette}
+ borderSkin={settings.terminalBorderSkin}
+ skinDetail={settings.terminalSkinDetail}
zoom={1}
stackIndex={9999}
snapEnabled={false}
@@ -1059,6 +1099,7 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
focused={widgetFocus.id === terminalCanvasWidgetId(session.id)}
focusChangeSource={widgetFocus.source}
selected={activeSessionId === session.id}
+ forceMasterDetail={true}
groupSelected={false}
renaming={renamingSessionId === session.id}
fullscreen={true}
diff --git a/src/renderer/src/lib/i18n.ts b/src/renderer/src/lib/i18n.ts
index a735ec3e..2cd04231 100644
--- a/src/renderer/src/lib/i18n.ts
+++ b/src/renderer/src/lib/i18n.ts
@@ -269,6 +269,9 @@ const ru = {
providerSecretNotConfigured: "Не задан",
providerSecretSave: "Сохранить",
providerSecretClear: "Удалить",
+ rendererRecoveryTitle: "Окно CanvasTTY столкнулось с ошибкой",
+ rendererRecoveryText: "Сессии продолжают работать. Перезагрузите окно, чтобы вернуться к ним.",
+ rendererRecoveryReload: "Перезагрузить окно",
apiProfiles: "API-профили",
apiProfilesDescription: "Бэкенды для CLI с поддержкой BYOK. Профиль — не агент: он лишь задаёт endpoint и ключ для совместимых рантаймов.",
apiProfileSave: "Сохранить",
@@ -339,6 +342,37 @@ const ru = {
canvasColorRose: "Роза",
canvasColorSlate: "Графит",
canvasPattern: "Рисунок канваса",
+ terminalBorderSkin: "Рамки терминалов",
+ terminalSkinDetail: "Детализация терминалов",
+ terminalSkinDetailMinimal: "Минимал",
+ terminalSkinDetailDetailed: "Детальный",
+ terminalSkinAnimation: "Анимация рамок",
+ appSkin: "Оформление приложения",
+ appSkinClassic: "Классика",
+ appSkinAtelier: "Ателье",
+ appSkinSignal: "Сигнал",
+ appSkinGreenhouse: "Оранжерея",
+ appSkinMidnight: "Полночь",
+ borderSkinClassic: "Классика",
+ borderSkinMinimal: "Минимал",
+ borderSkinGlass: "Стекло",
+ borderSkinCyber: "Кибер",
+ borderSkinNord: "Норд",
+ borderSkinGradient: "Градиент",
+ borderSkinCybercore: "Киберрама",
+ borderSkinTitanium: "Титан",
+ borderSkinRetro: "Ретро",
+ borderSkinSakura: "Сакура",
+ borderSkinMatrix: "Матрица",
+ borderSkinForestCabin: "Лесная хижина",
+ borderSkinGoldBlack: "Золото и чёрный",
+ borderSkinCat: "Кот",
+ borderSkinGothicEclipse: "Готическое затмение",
+ borderSkinReady: "Готова",
+ borderSkinError: "Ошибка",
+ borderSkinLoading: "Загрузка…",
+ borderSkinUnavailable: "Недоступна; используется классическая рамка",
+ borderSkinListError: "Не удалось загрузить список рамок",
homeLauncherAgents: "Агенты в панели запуска",
agentCliNotFound: "CLI агента не найден",
agentCliDetection: "Поиск установленных агентов",
@@ -937,6 +971,9 @@ const en: Record = {
providerSecretNotConfigured: "Not set",
providerSecretSave: "Save",
providerSecretClear: "Remove",
+ rendererRecoveryTitle: "The CanvasTTY window hit an error",
+ rendererRecoveryText: "Your sessions are still running. Reload the window to get back to them.",
+ rendererRecoveryReload: "Reload window",
apiProfiles: "API profiles",
apiProfilesDescription: "Backends for BYOK-capable CLIs. A profile is not an agent: it only supplies an endpoint and key reference to compatible runtimes.",
apiProfileSave: "Save",
@@ -1007,6 +1044,37 @@ const en: Record = {
canvasColorRose: "Rose",
canvasColorSlate: "Slate",
canvasPattern: "Canvas pattern",
+ terminalBorderSkin: "Terminal borders",
+ terminalSkinDetail: "Terminal detail",
+ terminalSkinDetailMinimal: "Minimal",
+ terminalSkinDetailDetailed: "Detailed",
+ terminalSkinAnimation: "Border animation",
+ appSkin: "Application style",
+ appSkinClassic: "Classic",
+ appSkinAtelier: "Atelier",
+ appSkinSignal: "Signal",
+ appSkinGreenhouse: "Greenhouse",
+ appSkinMidnight: "Midnight",
+ borderSkinClassic: "Classic",
+ borderSkinMinimal: "Minimal",
+ borderSkinGlass: "Glass",
+ borderSkinCyber: "Cyber",
+ borderSkinNord: "Nord",
+ borderSkinGradient: "Gradient",
+ borderSkinCybercore: "Cyberframe",
+ borderSkinTitanium: "Titanium",
+ borderSkinRetro: "Retro",
+ borderSkinSakura: "Sakura",
+ borderSkinMatrix: "Matrix",
+ borderSkinForestCabin: "Forest Cabin",
+ borderSkinGoldBlack: "Gold & Black",
+ borderSkinCat: "Cat",
+ borderSkinGothicEclipse: "Gothic Eclipse",
+ borderSkinReady: "Ready",
+ borderSkinError: "Error",
+ borderSkinLoading: "Loading…",
+ borderSkinUnavailable: "Unavailable; using the classic border",
+ borderSkinListError: "Could not load border skins",
homeLauncherAgents: "Agents in the launcher",
agentCliNotFound: "Agent CLI not found",
agentCliDetection: "Find installed agents",
diff --git a/src/renderer/src/lib/skinStyles.ts b/src/renderer/src/lib/skinStyles.ts
new file mode 100644
index 00000000..cf1da9ef
--- /dev/null
+++ b/src/renderer/src/lib/skinStyles.ts
@@ -0,0 +1,489 @@
+import type {
+ CustomTerminalBorderSkinId,
+ TerminalBorderSkinId,
+ TerminalBorderSkinListItem,
+ TerminalBorderSkinReadResult
+} from "../../../shared/contracts";
+
+export interface TerminalBorderSkinApi {
+ list(): Promise;
+ get(id: CustomTerminalBorderSkinId): Promise;
+ onChanged(listener: () => void): () => void;
+}
+
+const MAX_SKIN_ID_LENGTH = 55;
+const SKIN_SLUG_PATTERN = /^custom:[a-z0-9]+(?:-[a-z0-9]+)*$/u;
+const ALLOWED_BORDER_PROPERTIES = /^(?:border(?:-(?:top|right|bottom|left))?(?:-(?:color|style|width))?|border-radius|border-image(?:-(?:source|slice|width|outset|repeat))?|outline(?:-(?:color|style|width|offset))?|box-shadow|background(?:-(?:color|image|position|size|repeat|origin|clip))?|color|opacity)$/u;
+const DANGEROUS_CSS = /(?:@import|\burl\s*\(|\bexpression\s*\(|\b(?:javascript|vbscript|file|data)\s*:|(?:https?:)?\/\/|-moz-binding|(?:^|[;{\s])behavior\s*:|@namespace|@font-face|@document|@supports|@media|paint\s*\(|element\s*\()/iu;
+
+export function isCustomTerminalBorderSkinId(value: unknown): value is CustomTerminalBorderSkinId {
+ if (typeof value !== "string" || value.length > MAX_SKIN_ID_LENGTH) return false;
+ const match = SKIN_SLUG_PATTERN.exec(value);
+ return Boolean(match && value.slice("custom:".length).length <= 48);
+}
+
+export function terminalBorderSkinFallback(skinId: TerminalBorderSkinId): TerminalBorderSkinId {
+ return typeof skinId === "string" && skinId.startsWith("custom:") ? "classic" : skinId;
+}
+
+export function normalizeTerminalBorderSkinList(value: unknown): TerminalBorderSkinListItem[] {
+ if (!Array.isArray(value)) return [];
+
+ const seen = new Set();
+ const skins: TerminalBorderSkinListItem[] = [];
+ for (const item of value) {
+ if (!item || typeof item !== "object") continue;
+ const candidate = item as Record;
+ if (!isCustomTerminalBorderSkinId(candidate.id) || seen.has(candidate.id)) continue;
+ if (candidate.status === "ready"
+ && typeof candidate.name === "string"
+ && candidate.name.trim().length > 0
+ && typeof candidate.revision === "string"
+ && candidate.revision.trim().length > 0) {
+ skins.push({
+ id: candidate.id,
+ name: candidate.name,
+ revision: candidate.revision,
+ status: "ready"
+ });
+ seen.add(candidate.id);
+ } else if (candidate.status === "error" && typeof candidate.error === "string" && candidate.error.length > 0) {
+ skins.push({
+ id: candidate.id,
+ ...(typeof candidate.name === "string" ? { name: candidate.name } : {}),
+ ...(typeof candidate.revision === "string" ? { revision: candidate.revision } : {}),
+ status: "error",
+ error: candidate.error
+ });
+ seen.add(candidate.id);
+ }
+ }
+ return skins;
+}
+
+function isReadySkinResult(value: unknown, expectedId: CustomTerminalBorderSkinId): value is Extract {
+ if (!value || typeof value !== "object") return false;
+ const candidate = value as Record;
+ return candidate.id === expectedId
+ && candidate.status === "ready"
+ && typeof candidate.name === "string"
+ && candidate.name.trim().length > 0
+ && typeof candidate.revision === "string"
+ && candidate.revision.trim().length > 0
+ && typeof candidate.css === "string";
+}
+
+function isWellFormedSkinList(value: unknown): value is TerminalBorderSkinListItem[] {
+ if (!Array.isArray(value)) return false;
+ const ids = new Set();
+ for (const item of value) {
+ if (!item || typeof item !== "object") return false;
+ const candidate = item as Record;
+ const isRegistryError = candidate.id === "custom:skin-registry" && candidate.status === "error";
+ if ((!isCustomTerminalBorderSkinId(candidate.id) && !isRegistryError)
+ || typeof candidate.id !== "string" || ids.has(candidate.id)) return false;
+ if (candidate.status === "ready") {
+ if (typeof candidate.name !== "string" || !candidate.name.trim()
+ || typeof candidate.revision !== "string" || !candidate.revision.trim()) return false;
+ } else if (candidate.status === "error") {
+ if (typeof candidate.error !== "string" || !candidate.error
+ || (candidate.name !== undefined && typeof candidate.name !== "string")
+ || (candidate.revision !== undefined && typeof candidate.revision !== "string")) return false;
+ } else {
+ return false;
+ }
+ ids.add(candidate.id);
+ }
+ return true;
+}
+
+function stripCssComments(css: string): string | null {
+ let result = "";
+ let quote: "'" | '"' | null = null;
+ let escaped = false;
+ for (let index = 0; index < css.length; index += 1) {
+ const character = css[index];
+ const next = css[index + 1];
+ if (quote) {
+ result += character;
+ if (escaped) escaped = false;
+ else if (character === "\\") escaped = true;
+ else if (character === quote) quote = null;
+ continue;
+ }
+ if (character === "'" || character === '"') {
+ quote = character;
+ result += character;
+ continue;
+ }
+ if (character === "/" && next === "*") {
+ const end = css.indexOf("*/", index + 2);
+ if (end < 0) return null;
+ result += " ";
+ index = end + 1;
+ continue;
+ }
+ result += character;
+ }
+ return quote ? null : result;
+}
+
+function readRuleOpen(css: string, start: number): number {
+ let quote: "'" | '"' | null = null;
+ let escaped = false;
+ let parentheses = 0;
+ let brackets = 0;
+ for (let index = start; index < css.length; index += 1) {
+ const character = css[index];
+ if (quote) {
+ if (escaped) escaped = false;
+ else if (character === "\\") escaped = true;
+ else if (character === quote) quote = null;
+ continue;
+ }
+ if (character === "'" || character === '"') quote = character;
+ else if (character === "(") parentheses += 1;
+ else if (character === ")") {
+ if (parentheses === 0) return -1;
+ parentheses -= 1;
+ } else if (character === "[") brackets += 1;
+ else if (character === "]") {
+ if (brackets === 0) return -1;
+ brackets -= 1;
+ } else if (character === "{" && parentheses === 0 && brackets === 0) return index;
+ else if (character === "}" && parentheses === 0 && brackets === 0) return -1;
+ }
+ return -1;
+}
+
+function readRuleClose(css: string, start: number): number {
+ let quote: "'" | '"' | null = null;
+ let escaped = false;
+ let parentheses = 0;
+ let brackets = 0;
+ for (let index = start; index < css.length; index += 1) {
+ const character = css[index];
+ if (quote) {
+ if (escaped) escaped = false;
+ else if (character === "\\") escaped = true;
+ else if (character === quote) quote = null;
+ continue;
+ }
+ if (character === "'" || character === '"') quote = character;
+ else if (character === "(") parentheses += 1;
+ else if (character === ")") {
+ if (parentheses === 0) return -1;
+ parentheses -= 1;
+ } else if (character === "[") brackets += 1;
+ else if (character === "]") {
+ if (brackets === 0) return -1;
+ brackets -= 1;
+ } else if (character === "{" && parentheses === 0 && brackets === 0) return -1;
+ else if (character === "}" && parentheses === 0 && brackets === 0) return index;
+ }
+ return -1;
+}
+
+function splitTopLevel(value: string, delimiter: "," | ";"): string[] | null {
+ const parts: string[] = [];
+ let start = 0;
+ let quote: "'" | '"' | null = null;
+ let escaped = false;
+ let parentheses = 0;
+ let brackets = 0;
+ for (let index = 0; index < value.length; index += 1) {
+ const character = value[index];
+ if (quote) {
+ if (escaped) escaped = false;
+ else if (character === "\\") escaped = true;
+ else if (character === quote) quote = null;
+ continue;
+ }
+ if (character === "'" || character === '"') quote = character;
+ else if (character === "(") parentheses += 1;
+ else if (character === ")") {
+ if (parentheses === 0) return null;
+ parentheses -= 1;
+ } else if (character === "[") brackets += 1;
+ else if (character === "]") {
+ if (brackets === 0) return null;
+ brackets -= 1;
+ } else if (character === delimiter && parentheses === 0 && brackets === 0) {
+ parts.push(value.slice(start, index));
+ start = index + 1;
+ }
+ }
+ if (quote || parentheses !== 0 || brackets !== 0) return null;
+ parts.push(value.slice(start));
+ return parts;
+}
+
+function hasValidDeclarations(body: string): boolean {
+ const declarations = splitTopLevel(body, ";");
+ if (!declarations) return false;
+ for (const declaration of declarations) {
+ const trimmed = declaration.trim();
+ if (!trimmed) continue;
+ const separator = trimmed.indexOf(":");
+ if (separator < 1) return false;
+ const property = trimmed.slice(0, separator).trim().toLowerCase();
+ const value = trimmed.slice(separator + 1).trim();
+ if (!/^(?:--[a-z0-9_-]+|[a-z][a-z0-9-]*)$/u.test(property) || !value) return false;
+ if (!property.startsWith("--") && !ALLOWED_BORDER_PROPERTIES.test(property)) return false;
+ if (/!\s*important/iu.test(value)) return false;
+ }
+ return declarations.some((declaration) => declaration.trim().length > 0);
+}
+
+function selectorEscapesCard(selector: string): boolean {
+ let quote: "'" | '"' | null = null;
+ let parentheses = 0;
+ let brackets = 0;
+ for (const character of selector) {
+ if (quote) {
+ if (character === quote) quote = null;
+ continue;
+ }
+ if (character === "'" || character === '"') quote = character;
+ else if (character === "(") parentheses += 1;
+ else if (character === ")") parentheses -= 1;
+ else if (character === "[") brackets += 1;
+ else if (character === "]") brackets -= 1;
+ else if (parentheses === 0 && brackets === 0 && (character === "+" || character === "~")) return true;
+ }
+ return false;
+}
+
+function isCardScopedSelector(selector: string): boolean {
+ const normalized = selector.trim();
+ if (!normalized.startsWith(".terminal-card")) return false;
+ const next = normalized[".terminal-card".length];
+ if (next && !/[.#:[\s>+~]/u.test(next)) return false;
+ return !(/:global\b|:host\b|::slotted\b/iu.test(normalized) || selectorEscapesCard(normalized));
+}
+
+function scopeSelector(selector: string, scope: string, target: "card" | "preview"): string {
+ const trimmed = selector.trim();
+ if (target === "card") return trimmed.replace(/^\.terminal-card/u, scope);
+ const previewSelector = trimmed
+ .replace(/\.terminal-card(__[a-z0-9_-]+|--[a-z0-9_-]+)?/gu, (className) =>
+ className.replace(".terminal-card", ".border-skin-preview"))
+ .replace(/(\.border-skin-preview__actions\s+)button\b/gu, "$1.border-skin-preview__action");
+ return previewSelector.replace(/^\.border-skin-preview/u, scope);
+}
+
+/** Parse ordinary style rules only and scope every selector to one card or settings preview. */
+export function scopeTerminalBorderSkinCss(css: unknown, skinId: unknown, target: "card" | "preview" = "card"): string | null {
+ if (typeof css !== "string" || css.trim().length === 0 || new TextEncoder().encode(css).byteLength > 64 * 1024) return null;
+ if (!isCustomTerminalBorderSkinId(skinId)) return null;
+ if (/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/u.test(css) || css.includes("<") || css.includes("\\")) return null;
+ const source = stripCssComments(css);
+ if (!source || DANGEROUS_CSS.test(source)) return null;
+ const scope = target === "preview"
+ ? `.border-skin-preview--custom[data-custom-border-skin="${skinId}"]`
+ : `.terminal-card[data-custom-border-skin="${skinId}"]`;
+ const output: string[] = [];
+ let cursor = 0;
+
+ while (cursor < source.length) {
+ while (/\s/u.test(source[cursor] ?? "")) cursor += 1;
+ if (cursor >= source.length) break;
+ const open = readRuleOpen(source, cursor);
+ if (open < 0) return null;
+ const selectorText = source.slice(cursor, open).trim();
+ if (!selectorText || selectorText.startsWith("@") || selectorText.includes("@") || selectorText.includes(";")) return null;
+ const selectors = splitTopLevel(selectorText, ",");
+ if (!selectors || selectors.some((selector) => !isCardScopedSelector(selector))) return null;
+ const close = readRuleClose(source, open + 1);
+ if (close < 0) return null;
+ const body = source.slice(open + 1, close);
+ if (!hasValidDeclarations(body)) return null;
+ output.push(`${selectors.map((selector) => scopeSelector(selector, scope, target)).join(", ")} { ${body.trim()} }`);
+ cursor = close + 1;
+ }
+
+ return output.length > 0 ? output.join("\n") : null;
+}
+
+export interface TerminalBorderSkinStyleController {
+ setActive(skinId: TerminalBorderSkinId): void;
+ dispose(): void;
+}
+
+export function createTerminalBorderSkinStyleController(
+ api: TerminalBorderSkinApi,
+ documentTarget: Document
+): TerminalBorderSkinStyleController {
+ return createSingleTerminalBorderSkinStyleController(api, documentTarget);
+}
+
+function createSingleTerminalBorderSkinStyleController(
+ api: TerminalBorderSkinApi,
+ documentTarget: Document
+): TerminalBorderSkinStyleController {
+ const styleElements = new Map();
+ const generations = new Map();
+ let activeSkinId: CustomTerminalBorderSkinId | null = null;
+ let disposed = false;
+
+ const loadActiveSkin = async (skinId: CustomTerminalBorderSkinId): Promise => {
+ const generation = (generations.get(skinId) ?? 0) + 1;
+ generations.set(skinId, generation);
+ try {
+ const list: unknown = await api.list();
+ if (disposed || generations.get(skinId) !== generation || !isWellFormedSkinList(list)) return;
+ // The backend uses this error entry when the registry root itself is unavailable.
+ // In that case absence is unknown, so retain any last-good styles.
+ if (list.some((item) => item.id === "custom:skin-registry" && item.status === "error")) return;
+ if (!list.some((item) => item.id === skinId)) {
+ const previousStyle = styleElements.get(skinId);
+ previousStyle?.remove();
+ styleElements.delete(skinId);
+ return;
+ }
+
+ const result = await api.get(skinId);
+ if (disposed || generations.get(skinId) !== generation || !isReadySkinResult(result, skinId)) return;
+ const scopedCss = scopeTerminalBorderSkinCss(result.css, skinId);
+ if (!scopedCss) return;
+
+ const nextStyle = documentTarget.createElement("style");
+ nextStyle.setAttribute("data-terminal-border-skin-style", skinId);
+ nextStyle.textContent = scopedCss;
+ const previousStyle = styleElements.get(skinId);
+ if (previousStyle?.isConnected) previousStyle.replaceWith(nextStyle);
+ else documentTarget.head.append(nextStyle);
+ styleElements.set(skinId, nextStyle);
+ } catch {
+ // Keep the last-good style installed; cards use the built-in classic fallback otherwise.
+ }
+ };
+
+ let unsubscribe = (): void => undefined;
+ try {
+ unsubscribe = api.onChanged(() => {
+ if (activeSkinId) void loadActiveSkin(activeSkinId);
+ });
+ } catch {
+ // Skin loading still works on selection; live reload is simply unavailable.
+ }
+
+ return {
+ setActive(skinId) {
+ const nextSkinId = isCustomTerminalBorderSkinId(skinId) ? skinId : null;
+ if (nextSkinId === activeSkinId) return;
+ activeSkinId = nextSkinId;
+ if (activeSkinId) void loadActiveSkin(activeSkinId);
+ },
+ dispose() {
+ if (disposed) return;
+ disposed = true;
+ unsubscribe();
+ for (const style of styleElements.values()) style.remove();
+ styleElements.clear();
+ generations.clear();
+ activeSkinId = null;
+ }
+ };
+}
+
+export interface TerminalBorderSkinPreviewStyleController {
+ setActive(skinIds: readonly CustomTerminalBorderSkinId[]): void;
+ dispose(): void;
+}
+
+/** Loads preview-only styles for each visible custom-skin choice in one list request. */
+export function createTerminalBorderSkinPreviewStyleController(
+ api: TerminalBorderSkinApi,
+ documentTarget: Document
+): TerminalBorderSkinPreviewStyleController {
+ const styleElements = new Map();
+ const generations = new Map();
+ let activeSkinIds = new Set();
+ let disposed = false;
+
+ const removeStyle = (skinId: CustomTerminalBorderSkinId): void => {
+ styleElements.get(skinId)?.remove();
+ styleElements.delete(skinId);
+ };
+
+ const refresh = async (): Promise => {
+ const requested = [...activeSkinIds].map((id) => {
+ const generation = (generations.get(id) ?? 0) + 1;
+ generations.set(id, generation);
+ return { id, generation };
+ });
+ if (requested.length === 0) return;
+
+ try {
+ const list: unknown = await api.list();
+ if (disposed || !isWellFormedSkinList(list)) return;
+ // A registry-level error makes every missing skin ambiguous, so keep last-good previews.
+ if (list.some((item) => item.id === "custom:skin-registry" && item.status === "error")) return;
+
+ const listedIds = new Set(list.map((item) => item.id));
+ const present = requested.filter(({ id, generation }) => {
+ if (generations.get(id) !== generation || !activeSkinIds.has(id)) return false;
+ if (listedIds.has(id)) return true;
+ removeStyle(id);
+ return false;
+ });
+ const results = await Promise.all(present.map(async ({ id, generation }) => {
+ try {
+ return { id, generation, result: await api.get(id) };
+ } catch {
+ return { id, generation, result: null };
+ }
+ }));
+
+ for (const { id, generation, result } of results) {
+ if (disposed || generations.get(id) !== generation || !activeSkinIds.has(id)
+ || !isReadySkinResult(result, id)) continue;
+ const scopedCss = scopeTerminalBorderSkinCss(result.css, id, "preview");
+ if (!scopedCss) continue;
+
+ const nextStyle = documentTarget.createElement("style");
+ nextStyle.setAttribute("data-terminal-border-skin-preview-style", id);
+ nextStyle.textContent = scopedCss;
+ const previousStyle = styleElements.get(id);
+ if (previousStyle?.isConnected) previousStyle.replaceWith(nextStyle);
+ else documentTarget.head.append(nextStyle);
+ styleElements.set(id, nextStyle);
+ }
+ } catch {
+ // Keep last-good previews on registry or IPC errors.
+ }
+ };
+
+ let unsubscribe = (): void => undefined;
+ try {
+ unsubscribe = api.onChanged(() => void refresh());
+ } catch {
+ // Preview styling still loads on selection; live reload is simply unavailable.
+ }
+
+ return {
+ setActive(skinIds) {
+ const nextSkinIds = new Set(skinIds.filter(isCustomTerminalBorderSkinId));
+ const changed = nextSkinIds.size !== activeSkinIds.size
+ || [...nextSkinIds].some((skinId) => !activeSkinIds.has(skinId));
+ if (!changed) return;
+ for (const previousId of activeSkinIds) {
+ if (nextSkinIds.has(previousId)) continue;
+ generations.set(previousId, (generations.get(previousId) ?? 0) + 1);
+ removeStyle(previousId);
+ }
+ activeSkinIds = nextSkinIds;
+ void refresh();
+ },
+ dispose() {
+ if (disposed) return;
+ disposed = true;
+ unsubscribe();
+ for (const style of styleElements.values()) style.remove();
+ styleElements.clear();
+ generations.clear();
+ activeSkinIds.clear();
+ }
+ };
+}
diff --git a/src/renderer/src/lib/uncaughtErrorRecovery.ts b/src/renderer/src/lib/uncaughtErrorRecovery.ts
new file mode 100644
index 00000000..a04befe3
--- /dev/null
+++ b/src/renderer/src/lib/uncaughtErrorRecovery.ts
@@ -0,0 +1,93 @@
+import type { LocaleId } from "../../../shared/contracts";
+import { t } from "./i18n";
+
+// An error thrown while React renders, and not caught by a component, unmounts the whole root: the renderer
+// process stays alive, so the main process's render-process-gone recovery never runs, and the window stays
+// black until the app is restarted. The root reports such errors here. The first one reloads the
+// application surface in place (sessions live in the main process and survive it, as after a renderer
+// crash). A second one within the cooldown would only loop, so it gets a static page with a Reload button.
+
+export const UNCAUGHT_ERROR_RELOAD_KEY = "canvastty.uncaughtErrorReloadAt";
+export const UNCAUGHT_ERROR_RELOAD_COOLDOWN_MS = 30_000;
+
+export interface UncaughtErrorRecoveryHost {
+ now(): number;
+ readLastReloadAt(): number | null;
+ /** False when the reload time cannot be remembered: reloading then could loop forever. */
+ writeLastReloadAt(at: number): boolean;
+ reload(): void;
+ showRecoveryPage(): void;
+}
+
+export type UncaughtErrorRecovery = "reload" | "recovery-page";
+
+export function recoverFromUncaughtError(host: UncaughtErrorRecoveryHost): UncaughtErrorRecovery {
+ const now = host.now();
+ const last = host.readLastReloadAt();
+ if (last !== null && now >= last && now - last < UNCAUGHT_ERROR_RELOAD_COOLDOWN_MS) {
+ host.showRecoveryPage();
+ return "recovery-page";
+ }
+ if (!host.writeLastReloadAt(now)) {
+ host.showRecoveryPage();
+ return "recovery-page";
+ }
+ host.reload();
+ return "reload";
+}
+
+function recoveryLocale(): LocaleId {
+ return navigator.language.toLowerCase().startsWith("ru") ? "ru" : "en";
+}
+
+/** Plain DOM, no React: the React root is what just failed. */
+function showRecoveryPage(container: HTMLElement): void {
+ const locale = recoveryLocale();
+ const page = document.createElement("div");
+ page.className = "renderer-recovery";
+ page.setAttribute("role", "alert");
+ const title = document.createElement("strong");
+ title.textContent = t(locale, "rendererRecoveryTitle");
+ const text = document.createElement("p");
+ text.textContent = t(locale, "rendererRecoveryText");
+ const button = document.createElement("button");
+ button.type = "button";
+ button.textContent = t(locale, "rendererRecoveryReload");
+ button.addEventListener("click", () => window.location.reload());
+ page.append(title, text, button);
+ container.replaceChildren(page);
+}
+
+function sessionStore(): Storage | null {
+ try {
+ return window.sessionStorage;
+ } catch {
+ return null;
+ }
+}
+
+export function handleUncaughtRenderError(container: HTMLElement, error: unknown, componentStack?: string): void {
+ console.error("CanvasTTY hit an uncaught render error; recovering the application surface.", error, componentStack ?? "");
+ const storage = sessionStore();
+ recoverFromUncaughtError({
+ now: () => Date.now(),
+ readLastReloadAt: () => {
+ try {
+ const value = Number(storage?.getItem(UNCAUGHT_ERROR_RELOAD_KEY) ?? Number.NaN);
+ return Number.isFinite(value) ? value : null;
+ } catch {
+ return null;
+ }
+ },
+ writeLastReloadAt: (at) => {
+ try {
+ storage?.setItem(UNCAUGHT_ERROR_RELOAD_KEY, String(at));
+ return storage?.getItem(UNCAUGHT_ERROR_RELOAD_KEY) === String(at);
+ } catch {
+ return false;
+ }
+ },
+ reload: () => window.location.reload(),
+ showRecoveryPage: () => showRecoveryPage(container)
+ });
+}
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 12fa92d9..e5b40d6c 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -2,11 +2,22 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@xterm/xterm/css/xterm.css";
import { App } from "./App";
+import { handleUncaughtRenderError } from "./lib/uncaughtErrorRecovery";
import "./styles/tokens.css";
import "./styles/app.css";
+import "./styles/terminalSkins.css";
+import "./styles/ornateTerminalSkins.css";
+import "./styles/pixelTerminalSkins.css";
+import "./styles/pixelSkinPackCreator.css";
+import "./styles/appSkins.css";
import "./styles/patterns.css";
-createRoot(document.getElementById("root")!).render(
+const container = document.getElementById("root")!;
+createRoot(container, {
+ // React unmounts the whole tree on an uncaught render error while the renderer process lives on:
+ // without this the window stays black and the main process has no crash to recover from.
+ onUncaughtError: (error, errorInfo) => handleUncaughtRenderError(container, error, errorInfo.componentStack)
+}).render(
diff --git a/src/renderer/src/styles/app.css b/src/renderer/src/styles/app.css
index ba8e980d..5d5e2e9e 100644
--- a/src/renderer/src/styles/app.css
+++ b/src/renderer/src/styles/app.css
@@ -25,8 +25,7 @@ button { border: 0; }
.titlebar__build--dev { border-color: rgba(239,208,132,.34); color: var(--yellow); background: rgba(239,208,132,.09); }
.titlebar__build--release { border-color: rgba(184,207,153,.34); color: var(--primary); background: rgba(184,207,153,.09); }
.titlebar__subtitle { color: rgba(255,255,255,.43); font-size: 11px; }
-.titlebar__logo { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #373842; background: var(--primary); }
-.titlebar__logo .provider-icon { width: 20px; height: 20px; }
+.titlebar__logo { width: 25px; height: 25px; display: block; flex: 0 0 auto; object-fit: contain; }
.titlebar__drag { flex: 1; height: 100%; -webkit-app-region: drag; }
.titlebar__controls { height: 100%; display: flex; -webkit-app-region: no-drag; }
.titlebar__controls button { width: 46px; display: grid; place-items: center; color: rgba(255,255,255,.76); background: transparent; cursor: pointer; transition: background .15s ease, color .15s ease; }
@@ -36,8 +35,7 @@ button { border: 0; }
.titlebar__macos-controls-space { flex: 0 0 78px; height: 100%; -webkit-app-region: no-drag; }
.titlebar--macos .titlebar__brand { padding-left: 0; gap: 7px; }
.titlebar--macos .titlebar__brand strong { font-size: 12px; }
-.titlebar--macos .titlebar__logo { width: 21px; height: 21px; border-radius: 6px; }
-.titlebar--macos .titlebar__logo .provider-icon { width: 17px; height: 17px; }
+.titlebar--macos .titlebar__logo { width: 21px; height: 21px; }
.workspace {
position: absolute;
@@ -619,7 +617,10 @@ button { border: 0; }
.role-note { margin-top: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; color: var(--text-dark); background: rgba(255,255,255,.34); font-size: 12px; line-height: 1.35; }
.role-note--off { box-shadow: inset 0 0 0 2px rgba(227,97,94,.35); }
.role-note__enable { align-self: flex-start; padding: 8px 14px; border-radius: 10px; color: white; background: var(--surface); font-weight: 800; cursor: pointer; }
-.profile-row { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr 96px; gap: 9px; }
+.profile-row { margin-top: 13px; display: flex; gap: 9px; }
+.profile-row > .profile-button { min-width: 0; flex: 1; }
+.profile-row > .launch-submit { flex: 0 0 96px; }
+.profile-row > .launch-submit:only-child { flex: 1; }
.profile-button, .launch-submit { min-height: 70px; border-radius: 16px; cursor: pointer; font-weight: 900; transition: transform .15s ease, background .15s ease; }
.profile-button { color: var(--text-dark); background: rgba(255,255,255,.38); }
.profile-button:hover, .launch-submit:hover { transform: translateY(-2px); }
@@ -728,7 +729,7 @@ button { border: 0; }
.provider-secret-row .provider-secret__controls { flex-wrap: wrap; justify-content: flex-end; }
.provider-secret-row .provider-secret__input { flex: 1 1 18em; }
.settings-error { margin: 8px 2px 0; color: #8a3d33; font-size: 11px; font-weight: 700; }
-.agent-hooks__core { min-height: 62px; padding: 9px 10px 9px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-radius: 12px; background: rgba(255,255,255,.43); }
+.agent-hooks__core { margin-top: 14px; min-height: 62px; padding: 9px 10px 9px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-radius: 12px; background: rgba(255,255,255,.43); }
.agent-hooks__core > span, .agent-hooks__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-hooks__core strong, .agent-hooks__copy strong { font-size: 12px; }
.agent-hooks__core small, .agent-hooks__copy small, .agent-hooks__copy > span { color: var(--text-muted); font-size: 10px; font-weight: 720; line-height: 1.4; }
@@ -1188,3 +1189,7 @@ button { border: 0; }
.terminal-card__confirm span { font-weight: 500; line-height: 1.35; }
.terminal-card__confirm-actions { display: flex; gap: 6px; }
.terminal-card__confirm-actions button { padding: 4px 10px; border-radius: 7px; color: white; background: rgba(255,255,255,.12); font: inherit; cursor: pointer; }
+.renderer-recovery { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: #353442; color: #f8f7f1; text-align: center; }
+.renderer-recovery strong { font-size: 16px; }
+.renderer-recovery p { margin: 0; max-width: 420px; color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.5; }
+.renderer-recovery button { padding: 8px 16px; border: 0; border-radius: 10px; background: #b8cf99; color: #30313d; font: inherit; font-weight: 700; cursor: pointer; }
diff --git a/src/renderer/src/styles/appSkins.css b/src/renderer/src/styles/appSkins.css
new file mode 100644
index 00000000..f61f1154
--- /dev/null
+++ b/src/renderer/src/styles/appSkins.css
@@ -0,0 +1,819 @@
+/**
+ * CanvasTTY Application Skins
+ *
+ * Data-attribute keyed application skins:
+ * - atelier: Warm studio, drafting clay, parchment and terracotta accents
+ * - signal: High-clarity technical avionics and amber telemetry
+ * - greenhouse: Deep botanical moss, evergreen, and sage/mint accents
+ * - midnight: Astronomical obsidian navy and crystalline starlight cyan
+ *
+ * Preserves terminal contrast, text legibility, and existing classic default.
+ */
+
+/* ==========================================================================
+ 1. Atelier Skin
+ Warm tactile studio, terracotta accents, balanced drafting paper tones
+ ========================================================================== */
+
+:root[data-app-skin="atelier"],
+[data-app-skin="atelier"] {
+ --skin-bg-canvas: #191816;
+ --skin-bg-chrome: #141312;
+ --skin-bg-sidebar: #171614;
+ --skin-bg-surface: #211f1c;
+ --skin-bg-surface-elevated: #292723;
+ --skin-bg-surface-soft: #2f2c27;
+ --skin-bg-surface-hover: #37332e;
+
+ --skin-border-subtle: rgba(198, 180, 156, 0.14);
+ --skin-border-base: rgba(198, 180, 156, 0.24);
+ --skin-border-strong: rgba(198, 180, 156, 0.42);
+ --skin-border-focus: #d97746;
+
+ --skin-text-primary: #f2eee8;
+ --skin-text-secondary: #cec5b8;
+ --skin-text-muted: #9c9384;
+
+ --skin-accent: #d97746;
+ --skin-accent-hover: #e58756;
+ --skin-accent-active: #c56534;
+ --skin-accent-soft: rgba(217, 119, 70, 0.16);
+ --skin-accent-contrast: #181512;
+
+ --skin-status-ok: #78a87b;
+ --skin-status-warn: #e09f4e;
+ --skin-status-err: #d6645a;
+ --skin-status-info: #79a6ba;
+
+ --skin-shadow-sm: 0 1px 3px rgba(12, 11, 10, 0.35);
+ --skin-shadow-md: 0 4px 14px rgba(12, 11, 10, 0.42);
+ --skin-shadow-lg: 0 10px 28px rgba(12, 11, 10, 0.52);
+
+ /* Standard variable bridging */
+ --primary: var(--skin-accent);
+ --secondary: #c99a5e;
+ --surface-soft: var(--skin-bg-surface-soft);
+ --text: var(--skin-text-primary);
+ --text-muted-on-dark: var(--skin-text-muted);
+ --background: var(--skin-bg-canvas);
+ --border: var(--skin-border-base);
+}
+
+/* ==========================================================================
+ 2. Signal Skin
+ Technical telemetry, tactical graphite, high-visibility amber & cyan
+ ========================================================================== */
+
+:root[data-app-skin="signal"],
+[data-app-skin="signal"] {
+ --skin-bg-canvas: #0f1216;
+ --skin-bg-chrome: #0b0d10;
+ --skin-bg-sidebar: #0d1014;
+ --skin-bg-surface: #151920;
+ --skin-bg-surface-elevated: #1b212b;
+ --skin-bg-surface-soft: #222a36;
+ --skin-bg-surface-hover: #2a3443;
+
+ --skin-border-subtle: rgba(100, 130, 165, 0.16);
+ --skin-border-base: rgba(100, 130, 165, 0.28);
+ --skin-border-strong: rgba(100, 130, 165, 0.46);
+ --skin-border-focus: #f59e0b;
+
+ --skin-text-primary: #f8fafc;
+ --skin-text-secondary: #cbd5e1;
+ --skin-text-muted: #8494a8;
+
+ --skin-accent: #f59e0b;
+ --skin-accent-hover: #fbbf24;
+ --skin-accent-active: #d97706;
+ --skin-accent-soft: rgba(245, 158, 11, 0.16);
+ --skin-accent-contrast: #0f1216;
+
+ --skin-status-ok: #34d399;
+ --skin-status-warn: #fbbf24;
+ --skin-status-err: #f87171;
+ --skin-status-info: #38bdf8;
+
+ --skin-shadow-sm: 0 1px 3px rgba(5, 7, 9, 0.45);
+ --skin-shadow-md: 0 4px 14px rgba(5, 7, 9, 0.55);
+ --skin-shadow-lg: 0 10px 30px rgba(5, 7, 9, 0.65);
+
+ /* Standard variable bridging */
+ --primary: var(--skin-accent);
+ --secondary: #38bdf8;
+ --surface-soft: var(--skin-bg-surface-soft);
+ --text: var(--skin-text-primary);
+ --text-muted-on-dark: var(--skin-text-muted);
+ --background: var(--skin-bg-canvas);
+ --border: var(--skin-border-base);
+}
+
+/* ==========================================================================
+ 3. Greenhouse Skin
+ Deep botanical forest, evergreen tones, soothing sage & mint accents
+ ========================================================================== */
+
+:root[data-app-skin="greenhouse"],
+[data-app-skin="greenhouse"] {
+ --skin-bg-canvas: #0e1511;
+ --skin-bg-chrome: #090e0b;
+ --skin-bg-sidebar: #0c130f;
+ --skin-bg-surface: #131f18;
+ --skin-bg-surface-elevated: #192a20;
+ --skin-bg-surface-soft: #203529;
+ --skin-bg-surface-hover: #294234;
+
+ --skin-border-subtle: rgba(110, 175, 135, 0.16);
+ --skin-border-base: rgba(110, 175, 135, 0.26);
+ --skin-border-strong: rgba(110, 175, 135, 0.44);
+ --skin-border-focus: #34d399;
+
+ --skin-text-primary: #f0fdf4;
+ --skin-text-secondary: #c3e6cb;
+ --skin-text-muted: #7ca387;
+
+ --skin-accent: #34d399;
+ --skin-accent-hover: #4ade80;
+ --skin-accent-active: #10b981;
+ --skin-accent-soft: rgba(52, 211, 153, 0.16);
+ --skin-accent-contrast: #08110b;
+
+ --skin-status-ok: #34d399;
+ --skin-status-warn: #fbbf24;
+ --skin-status-err: #f87171;
+ --skin-status-info: #5eead4;
+
+ --skin-shadow-sm: 0 1px 3px rgba(4, 8, 6, 0.45);
+ --skin-shadow-md: 0 4px 14px rgba(4, 8, 6, 0.55);
+ --skin-shadow-lg: 0 10px 28px rgba(4, 8, 6, 0.65);
+
+ /* Standard variable bridging */
+ --primary: var(--skin-accent);
+ --secondary: #6ee7b7;
+ --surface-soft: var(--skin-bg-surface-soft);
+ --text: var(--skin-text-primary);
+ --text-muted-on-dark: var(--skin-text-muted);
+ --background: var(--skin-bg-canvas);
+ --border: var(--skin-border-base);
+}
+
+/* ==========================================================================
+ 4. Midnight Skin
+ Astronomical dark navy, deep obsidian, celestial starlight cyan & indigo
+ ========================================================================== */
+
+:root[data-app-skin="midnight"],
+[data-app-skin="midnight"] {
+ --skin-bg-canvas: #090c13;
+ --skin-bg-chrome: #05080d;
+ --skin-bg-sidebar: #070a10;
+ --skin-bg-surface: #0f1624;
+ --skin-bg-surface-elevated: #151f33;
+ --skin-bg-surface-soft: #1d2b45;
+ --skin-bg-surface-hover: #253657;
+
+ --skin-border-subtle: rgba(105, 145, 220, 0.16);
+ --skin-border-base: rgba(105, 145, 220, 0.26);
+ --skin-border-strong: rgba(105, 145, 220, 0.45);
+ --skin-border-focus: #38bdf8;
+
+ --skin-text-primary: #f8fafc;
+ --skin-text-secondary: #c8d5e8;
+ --skin-text-muted: #788ba8;
+
+ --skin-accent: #38bdf8;
+ --skin-accent-hover: #67e8f9;
+ --skin-accent-active: #0284c7;
+ --skin-accent-soft: rgba(56, 189, 248, 0.16);
+ --skin-accent-contrast: #040810;
+
+ --skin-status-ok: #34d399;
+ --skin-status-warn: #fbbf24;
+ --skin-status-err: #f87171;
+ --skin-status-info: #38bdf8;
+
+ --skin-shadow-sm: 0 1px 3px rgba(3, 5, 8, 0.5);
+ --skin-shadow-md: 0 4px 14px rgba(3, 5, 8, 0.6);
+ --skin-shadow-lg: 0 10px 30px rgba(3, 5, 8, 0.72);
+
+ /* Standard variable bridging */
+ --primary: var(--skin-accent);
+ --secondary: #818cf8;
+ --surface-soft: var(--skin-bg-surface-soft);
+ --text: var(--skin-text-primary);
+ --text-muted-on-dark: var(--skin-text-muted);
+ --background: var(--skin-bg-canvas);
+ --border: var(--skin-border-base);
+}
+
+/* ==========================================================================
+ 5. Comprehensive Component & Surface Selectors for Active Skins
+ Applies cleanly when any of the 4 skins is active
+ ========================================================================== */
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) {
+ color-scheme: dark;
+ background-color: var(--skin-bg-canvas);
+ color: var(--skin-text-primary);
+ --canvas-bg: var(--skin-bg-canvas);
+ --surface: var(--skin-bg-surface);
+ --primary-hover: var(--skin-accent-hover);
+ --text-dark: var(--skin-accent-contrast);
+ --shadow-lg: var(--skin-shadow-lg);
+}
+
+/* App chrome, root layout, and window frames */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.app, .app-shell, .app-container, .window-frame) {
+ background-color: var(--skin-bg-canvas);
+ color: var(--skin-text-primary);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.app-chrome, .titlebar, .title-bar, .app-header, .top-bar) {
+ background-color: var(--skin-bg-chrome);
+ border-bottom: 1px solid var(--skin-border-subtle);
+ color: var(--skin-text-secondary);
+}
+
+/* Sidebar and navigation surfaces */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.sidebar, .sidebar__nav, .sidebar-nav, .app-sidebar) {
+ background-color: var(--skin-bg-sidebar);
+ border-right: 1px solid var(--skin-border-subtle);
+ color: var(--skin-text-secondary);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.sidebar__item, .sidebar-item, .nav-item, .nav-button, .sidebar-button) {
+ color: var(--skin-text-muted);
+ border: 1px solid transparent;
+ border-radius: 6px;
+ transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.sidebar__item, .sidebar-item, .nav-item, .nav-button, .sidebar-button):hover {
+ background-color: var(--skin-bg-surface);
+ color: var(--skin-text-primary);
+ border-color: var(--skin-border-subtle);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.sidebar__item, .sidebar-item, .nav-item, .nav-button, .sidebar-button):is(.active, [aria-selected="true"], [aria-current="page"]) {
+ background-color: var(--skin-accent-soft);
+ color: var(--skin-accent);
+ border-color: var(--skin-border-base);
+ font-weight: 600;
+}
+
+/* Panels, sections, and cards */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.panel, .side-panel, .settings-panel, .theme-panel, .card, .settings-section) {
+ background-color: var(--skin-bg-surface);
+ border: 1px solid var(--skin-border-subtle);
+ border-radius: 8px;
+ color: var(--skin-text-primary);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.panel__header, .panel-header, .card__header, .section-header) {
+ background-color: var(--skin-bg-surface-elevated);
+ border-bottom: 1px solid var(--skin-border-subtle);
+ color: var(--skin-text-primary);
+}
+
+/* Tabs and tab bars */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.tabs, .tab-bar, .tab-list, .tabs-container) {
+ background-color: var(--skin-bg-chrome);
+ border-bottom: 1px solid var(--skin-border-subtle);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.tab, .tab-item) {
+ background-color: transparent;
+ color: var(--skin-text-muted);
+ border: 1px solid transparent;
+ border-bottom: none;
+ border-radius: 6px 6px 0 0;
+ transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.tab, .tab-item):hover {
+ background-color: var(--skin-bg-surface-elevated);
+ color: var(--skin-text-primary);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.tab, .tab-item):is(.tab--active, .active, [aria-selected="true"]) {
+ background-color: var(--skin-bg-surface);
+ color: var(--skin-text-primary);
+ border-color: var(--skin-border-base);
+ border-top: 2px solid var(--skin-accent);
+ font-weight: 600;
+}
+
+/* Command surfaces, search bars, inputs, and selectors */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.command-palette, .command-bar, .command-box, .omni-palette) {
+ background-color: var(--skin-bg-surface-elevated);
+ border: 1px solid var(--skin-border-strong);
+ box-shadow: var(--skin-shadow-lg);
+ border-radius: 8px;
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(
+ input[type="text"],
+ input[type="search"],
+ input[type="number"],
+ select,
+ textarea,
+ .command-input,
+ .search-input,
+ .input,
+ .form-control
+) {
+ background-color: var(--skin-bg-surface-soft);
+ border: 1px solid var(--skin-border-base);
+ color: var(--skin-text-primary);
+ border-radius: 6px;
+ outline: none;
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(
+ input[type="text"],
+ input[type="search"],
+ input[type="number"],
+ select,
+ textarea,
+ .command-input,
+ .search-input,
+ .input,
+ .form-control
+):focus-visible {
+ border-color: var(--skin-border-focus);
+ box-shadow: 0 0 0 2px var(--skin-accent-soft);
+}
+
+/* Buttons and action elements */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.btn, .button, .icon-btn, .icon-button, .action-btn) {
+ background-color: var(--skin-bg-surface-soft);
+ border: 1px solid var(--skin-border-subtle);
+ color: var(--skin-text-secondary);
+ border-radius: 6px;
+ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.btn, .button, .icon-btn, .icon-button, .action-btn):hover {
+ background-color: var(--skin-bg-surface-hover);
+ border-color: var(--skin-border-base);
+ color: var(--skin-text-primary);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.btn, .button):is(.btn-primary, .btn--primary, [data-variant="primary"]) {
+ background-color: var(--skin-accent);
+ border-color: var(--skin-accent);
+ color: var(--skin-accent-contrast);
+ font-weight: 600;
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.btn, .button):is(.btn-primary, .btn--primary, [data-variant="primary"]):hover {
+ background-color: var(--skin-accent-hover);
+ border-color: var(--skin-accent-hover);
+}
+
+/* Status bars, indicators, and badges */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.status-bar, .statusbar, .status-footer) {
+ background-color: var(--skin-bg-chrome);
+ border-top: 1px solid var(--skin-border-subtle);
+ color: var(--skin-text-muted);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.badge, .status-badge, .tag, .pill) {
+ border-radius: 4px;
+ border: 1px solid var(--skin-border-subtle);
+ background-color: var(--skin-bg-surface-soft);
+ color: var(--skin-text-secondary);
+}
+
+/* Modal and dialog surfaces */
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.modal-backdrop, .modal-overlay) {
+ background-color: rgba(0, 0, 0, 0.72);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.modal, .modal-content, .modal-card, .dialog, dialog) {
+ background-color: var(--skin-bg-surface-elevated);
+ border: 1px solid var(--skin-border-strong);
+ box-shadow: var(--skin-shadow-lg);
+ border-radius: 8px;
+ color: var(--skin-text-primary);
+}
+
+:is(
+ [data-app-skin="atelier"],
+ [data-app-skin="signal"],
+ [data-app-skin="greenhouse"],
+ [data-app-skin="midnight"]
+) :is(.modal-header, .dialog-header) {
+ border-bottom: 1px solid var(--skin-border-subtle);
+}
+
+/* ==========================================================================
+ 6. Terminal Card Harmonization
+ Preserves terminal contrast, layout, and text legibility while tuning chrome
+ ========================================================================== */
+
+[data-app-skin="atelier"] .terminal-card[data-border-skin="classic"] {
+ border-color: rgba(198, 180, 156, 0.28);
+ box-shadow: 0 6px 20px rgba(18, 16, 14, 0.38);
+}
+[data-app-skin="atelier"] .terminal-card[data-border-skin="classic"] .terminal-card__header {
+ background: #252320;
+ border-bottom: 1px solid rgba(198, 180, 156, 0.16);
+}
+[data-app-skin="atelier"] .terminal-card[data-border-skin="classic"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 2px #d97746, 0 8px 24px rgba(18, 16, 14, 0.44);
+}
+
+[data-app-skin="signal"] .terminal-card[data-border-skin="classic"] {
+ border-color: rgba(100, 130, 165, 0.32);
+ box-shadow: 0 6px 22px rgba(8, 10, 14, 0.45);
+}
+[data-app-skin="signal"] .terminal-card[data-border-skin="classic"] .terminal-card__header {
+ background: #181d26;
+ border-bottom: 1px solid rgba(100, 130, 165, 0.2);
+}
+[data-app-skin="signal"] .terminal-card[data-border-skin="classic"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 2px #f59e0b, 0 8px 26px rgba(8, 10, 14, 0.52);
+}
+
+[data-app-skin="greenhouse"] .terminal-card[data-border-skin="classic"] {
+ border-color: rgba(110, 175, 135, 0.3);
+ box-shadow: 0 6px 20px rgba(7, 12, 9, 0.45);
+}
+[data-app-skin="greenhouse"] .terminal-card[data-border-skin="classic"] .terminal-card__header {
+ background: #16241c;
+ border-bottom: 1px solid rgba(110, 175, 135, 0.18);
+}
+[data-app-skin="greenhouse"] .terminal-card[data-border-skin="classic"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 2px #34d399, 0 8px 24px rgba(7, 12, 9, 0.52);
+}
+
+[data-app-skin="midnight"] .terminal-card[data-border-skin="classic"] {
+ border-color: rgba(105, 145, 220, 0.32);
+ box-shadow: 0 6px 22px rgba(4, 7, 12, 0.5);
+}
+[data-app-skin="midnight"] .terminal-card[data-border-skin="classic"] .terminal-card__header {
+ background: #121a2c;
+ border-bottom: 1px solid rgba(105, 145, 220, 0.2);
+}
+[data-app-skin="midnight"] .terminal-card[data-border-skin="classic"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 2px #38bdf8, 0 8px 26px rgba(4, 7, 12, 0.6);
+}
+
+/* The terminal viewport keeps its own renderer-controlled colors. */
+
+[data-app-skin]:not([data-app-skin="classic"]) .settings-panel__sidebar { background: var(--skin-bg-sidebar); }
+[data-app-skin]:not([data-app-skin="classic"]) .settings-tabs__button--active { background: var(--skin-bg-surface-elevated); }
+[data-app-skin]:not([data-app-skin="classic"]) .settings-panel__main { background: var(--skin-bg-surface); }
+[data-app-skin]:not([data-app-skin="classic"]) .canvas-command-palette,
+[data-app-skin]:not([data-app-skin="classic"]) .canvas-menu,
+[data-app-skin]:not([data-app-skin="classic"]) .terminal-link-dialog { border: 1px solid var(--skin-border-base); }
+[data-app-skin]:not([data-app-skin="classic"]) .canvas-command-palette__search input { background: transparent; border: 0; box-shadow: none; }
+
+/* ==========================================================================
+ 7. App Skin Switcher Component
+ Responsive grid and preview cards for theme settings
+ ========================================================================== */
+
+.app-skin-choices {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0.65rem;
+}
+
+.app-skin-choice {
+ min-width: 0;
+ padding: 0.65rem;
+ display: grid;
+ gap: 0.55rem;
+ border: 1px solid transparent;
+ border-radius: 7px;
+ color: var(--text-muted-on-dark, #8b949e);
+ background: var(--surface-soft, rgba(255, 255, 255, 0.05));
+ cursor: pointer;
+ text-align: left;
+ transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+
+.app-skin-choice:hover {
+ color: var(--text, #e6edf3);
+ background: color-mix(in srgb, var(--surface-soft, rgba(255, 255, 255, 0.05)) 78%, var(--secondary, #38bdf8));
+}
+
+.app-skin-choice:focus-visible {
+ outline: 2px solid var(--skin-border-focus, #38bdf8);
+ outline-offset: 2px;
+}
+
+.app-skin-choice[aria-pressed="true"] {
+ border-color: var(--primary, #38bdf8);
+ color: var(--text, #e6edf3);
+ box-shadow: inset 0 0 0 1px var(--primary, #38bdf8);
+}
+
+.app-skin-choice__label {
+ min-width: 0;
+ font-size: 0.8rem;
+ font-weight: 700;
+ line-height: 1.2;
+ overflow-wrap: anywhere;
+}
+
+.app-skin-choice__description {
+ font-size: 0.72rem;
+ line-height: 1.3;
+ color: var(--text-muted-on-dark, #8b949e);
+}
+
+/* Preview mini-representation */
+.app-skin-preview {
+ height: 4.8rem;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.14);
+ border-radius: 6px;
+ background: #121418;
+}
+
+.app-skin-preview__chrome {
+ height: 1.2rem;
+ padding: 0 0.4rem;
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ background: #1d212a;
+}
+
+.app-skin-preview__dot {
+ width: 0.3rem;
+ height: 0.3rem;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.app-skin-preview__body {
+ flex: 1;
+ display: flex;
+}
+
+.app-skin-preview__sidebar {
+ width: 25%;
+ border-right: 1px solid rgba(255, 255, 255, 0.08);
+ background: #161a22;
+}
+
+.app-skin-preview__content {
+ flex: 1;
+ padding: 0.4rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+}
+
+.app-skin-preview__line {
+ height: 0.24rem;
+ border-radius: 2px;
+ background: rgba(255, 255, 255, 0.22);
+ width: 70%;
+}
+
+.app-skin-preview__line--accent {
+ width: 40%;
+}
+
+/* Skin-specific preview swatches */
+.app-skin-preview[data-preview-skin="atelier"] {
+ background: #191816;
+ border-color: rgba(198, 180, 156, 0.28);
+}
+.app-skin-preview[data-preview-skin="classic"] .app-skin-preview__line--accent { background: #b8cf99; }
+.app-skin-preview[data-preview-skin="atelier"] .app-skin-preview__chrome {
+ background: #141312;
+}
+.app-skin-preview[data-preview-skin="atelier"] .app-skin-preview__sidebar {
+ background: #171614;
+}
+.app-skin-preview[data-preview-skin="atelier"] .app-skin-preview__line--accent {
+ background: #d97746;
+}
+
+.app-skin-preview[data-preview-skin="signal"] {
+ background: #0f1216;
+ border-color: rgba(100, 130, 165, 0.32);
+}
+.app-skin-preview[data-preview-skin="signal"] .app-skin-preview__chrome {
+ background: #0b0d10;
+}
+.app-skin-preview[data-preview-skin="signal"] .app-skin-preview__sidebar {
+ background: #0d1014;
+}
+.app-skin-preview[data-preview-skin="signal"] .app-skin-preview__line--accent {
+ background: #f59e0b;
+}
+
+.app-skin-preview[data-preview-skin="greenhouse"] {
+ background: #0e1511;
+ border-color: rgba(110, 175, 135, 0.3);
+}
+.app-skin-preview[data-preview-skin="greenhouse"] .app-skin-preview__chrome {
+ background: #090e0b;
+}
+.app-skin-preview[data-preview-skin="greenhouse"] .app-skin-preview__sidebar {
+ background: #0c130f;
+}
+.app-skin-preview[data-preview-skin="greenhouse"] .app-skin-preview__line--accent {
+ background: #34d399;
+}
+
+.app-skin-preview[data-preview-skin="midnight"] {
+ background: #090c13;
+ border-color: rgba(105, 145, 220, 0.32);
+}
+.app-skin-preview[data-preview-skin="midnight"] .app-skin-preview__chrome {
+ background: #05080d;
+}
+.app-skin-preview[data-preview-skin="midnight"] .app-skin-preview__sidebar {
+ background: #070a10;
+}
+.app-skin-preview[data-preview-skin="midnight"] .app-skin-preview__line--accent {
+ background: #38bdf8;
+}
+
+/* ==========================================================================
+ 8. Responsive and Accessibility Rules
+ Scales neatly across desktop, tablet, and compact mobile views
+ ========================================================================== */
+
+@media (max-width: 768px) {
+ .app-skin-choices {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 480px) {
+ .app-skin-choices {
+ grid-template-columns: 1fr;
+ }
+}
+
+
+/* ==========================================================================
+ 9. Workspace Theme Backgrounds (CanvasTTY Pixel Themes)
+ Fixed viewport background for built-in pixel themes.
+ ========================================================================== */
+
+.workspace[data-theme-background] {
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+
+.workspace[data-theme-background]::before {
+ display: none !important;
+}
+
+.workspace[data-theme-background="sakura"] {
+ background-image: url("../assets/theme-backgrounds/sakura.png");
+}
+
+.workspace[data-theme-background="matrix"] {
+ background-image: url("../assets/theme-backgrounds/matrix.png");
+}
+
+.workspace[data-theme-background="forest-cabin"] {
+ background-image: url("../assets/theme-backgrounds/forest-cabin.png");
+}
+
+.workspace[data-theme-background="gold-black"] {
+ background-image: url("../assets/theme-backgrounds/gold-black.png");
+}
+
+.workspace[data-theme-background="cat"] {
+ background-image: url("../assets/theme-backgrounds/cat.png");
+}
+.workspace[data-theme-background="gothic-eclipse"] {
+ background-image: url("../assets/theme-backgrounds/gothic-eclipse.png");
+}
diff --git a/src/renderer/src/styles/ornateTerminalSkins.css b/src/renderer/src/styles/ornateTerminalSkins.css
new file mode 100644
index 00000000..a486e229
--- /dev/null
+++ b/src/renderer/src/styles/ornateTerminalSkins.css
@@ -0,0 +1,286 @@
+/* Dimensional chrome stays at the edges; xterm owns the opaque interior. */
+.terminal-card[data-border-skin="cybercore"],
+.terminal-card[data-border-skin="titanium"],
+.terminal-card[data-border-skin="retro"] {
+ isolation: isolate;
+ border-radius: 8px;
+}
+
+.terminal-card[data-border-skin="cybercore"]::before,
+.terminal-card[data-border-skin="cybercore"]::after,
+.terminal-card[data-border-skin="titanium"]::before,
+.terminal-card[data-border-skin="titanium"]::after,
+.terminal-card[data-border-skin="retro"]::before,
+.terminal-card[data-border-skin="retro"]::after {
+ content: "";
+ position: absolute;
+ z-index: 5;
+ inset: 0;
+ pointer-events: none;
+}
+
+.terminal-card:is([data-border-skin="cybercore"], [data-border-skin="titanium"],
+ [data-border-skin="retro"]) .terminal-card__surface {
+ padding: 0 clamp(18px, 4.8%, 26px) clamp(20px, 5%, 28px);
+}
+/* Cybercore: split light rails, machined corners and a lit control deck. */
+.terminal-card[data-border-skin="cybercore"] {
+ border: 2px solid #29c7ed;
+ background: #111923;
+ box-shadow: inset 0 0 0 2px #07121c, 0 0 0 1px #075777,
+ 0 0 17px #12bce470, 0 16px 35px #02070db8;
+}
+.terminal-card[data-border-skin="cybercore"] .terminal-card__header {
+ color: #e9f9ff;
+ background: linear-gradient(180deg, #24516a 0, #162c40 8%, #0d1725 46%, #18364a 94%, #2ed0ef 100%);
+ box-shadow: inset 0 2px #8ef5ff8c, inset 0 -3px #07131e;
+}
+.terminal-card[data-border-skin="cybercore"] .terminal-card__actions button {
+ border: 1px solid #49cfea72;
+ background: linear-gradient(145deg, #1c4054, #0c1c2b);
+}
+.terminal-card[data-border-skin="cybercore"]::before {
+ border: 1px solid #8af5ffbd;
+ border-radius: 5px;
+ box-shadow: inset 0 0 0 3px #082436, inset 0 0 0 4px #1d83a078;
+}
+.terminal-card[data-border-skin="cybercore"]::after {
+ background:
+ linear-gradient(135deg, #8af5ff 0 34%, #0d5272 35% 47%, #8af5ff 48% 57%, transparent 58%) top left / clamp(16px, 5%, 22px) clamp(7px, 2.7%, 10px) no-repeat,
+ linear-gradient(225deg, #8af5ff 0 34%, #0d5272 35% 47%, #8af5ff 48% 57%, transparent 58%) top right / clamp(16px, 5%, 22px) clamp(7px, 2.7%, 10px) no-repeat,
+ linear-gradient(45deg, #8af5ff 0 34%, #0d5272 35% 47%, #8af5ff 48% 57%, transparent 58%) bottom left / clamp(14px, 5%, 22px) clamp(12px, 5%, 16px) no-repeat,
+ linear-gradient(315deg, #8af5ff 0 34%, #0d5272 35% 47%, #8af5ff 48% 57%, transparent 58%) bottom right / clamp(14px, 5%, 22px) clamp(12px, 5%, 16px) no-repeat,
+ repeating-linear-gradient(180deg, #8af5ff 0 3px, #0d5272 3px 6px, transparent 6px 10px) left 42% / 6px clamp(18px, 8%, 28px) no-repeat,
+ repeating-linear-gradient(180deg, #8af5ff 0 3px, #0d5272 3px 6px, transparent 6px 10px) right 42% / 6px clamp(18px, 8%, 28px) no-repeat,
+ repeating-linear-gradient(90deg, #45dfff 0 8px, #0d5272 8px 12px, transparent 12px 18px) bottom center / min(42%, 180px) 4px no-repeat,
+ linear-gradient(90deg, transparent, #53e8ff, transparent) top center / 55% 2px no-repeat;
+ opacity: .87;
+}
+.terminal-card[data-border-skin="cybercore"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), 0 0 22px #24d9ff9c, 0 16px 35px #02070db8;
+}
+
+/* Titanium: cold pressed steel with riveted corners and brushed rails. */
+.terminal-card[data-border-skin="titanium"] {
+ border: 4px solid #728ba9;
+ background: #202430;
+ box-shadow: inset 0 0 0 2px #182332, 0 0 0 1px #c2d3e3,
+ 0 8px 0 #131d2ab0, 0 20px 36px #01050ab8;
+}
+.terminal-card[data-border-skin="titanium"] .terminal-card__header {
+ color: #f4f8fb;
+ background: linear-gradient(180deg, #d1dfeb 0, #879bb2 4%, #526982 13%, #26364c 48%, #384f69 88%, #101a28 100%);
+ box-shadow: inset 0 2px #eff8ffd1, inset 0 -3px #101c2b;
+}
+.terminal-card[data-border-skin="titanium"] .terminal-card__actions button {
+ border: 1px solid #b5c9dc6b;
+ background: linear-gradient(155deg, #53677d, #1d2939 65%);
+}
+.terminal-card[data-border-skin="titanium"]::before {
+ border: 2px solid #a7bcd1;
+ border-radius: 4px;
+ box-shadow: inset 0 0 0 2px #233349, inset 0 0 0 4px #617b9880;
+}
+.terminal-card[data-border-skin="titanium"]::after {
+ background:
+ linear-gradient(180deg, #d9e5ee 0 2px, #52677e 2px 4px) top left / clamp(18px, 5%, 24px) 4px no-repeat,
+ linear-gradient(90deg, #d9e5ee 0 2px, #52677e 2px 4px) top left / 4px clamp(18px, 5%, 24px) no-repeat,
+ linear-gradient(180deg, #d9e5ee 0 2px, #52677e 2px 4px) top right / clamp(18px, 5%, 24px) 4px no-repeat,
+ linear-gradient(270deg, #d9e5ee 0 2px, #52677e 2px 4px) top right / 4px clamp(18px, 5%, 24px) no-repeat,
+ linear-gradient(0deg, #d9e5ee 0 2px, #52677e 2px 4px) bottom left / clamp(18px, 5%, 24px) 4px no-repeat,
+ linear-gradient(90deg, #d9e5ee 0 2px, #52677e 2px 4px) bottom left / 4px clamp(18px, 5%, 24px) no-repeat,
+ linear-gradient(0deg, #d9e5ee 0 2px, #52677e 2px 4px) bottom right / clamp(18px, 5%, 24px) 4px no-repeat,
+ linear-gradient(270deg, #d9e5ee 0 2px, #52677e 2px 4px) bottom right / 4px clamp(18px, 5%, 24px) no-repeat,
+ radial-gradient(circle at center, #18283a 0 2px, #d9e5ee 3px 4px, #52677e 5px, transparent 6px) top left / 12px 12px no-repeat,
+ radial-gradient(circle at center, #18283a 0 2px, #d9e5ee 3px 4px, #52677e 5px, transparent 6px) top right / 12px 12px no-repeat,
+ radial-gradient(circle at center, #18283a 0 2px, #d9e5ee 3px 4px, #52677e 5px, transparent 6px) bottom left / 16px 14px no-repeat,
+ radial-gradient(circle at center, #18283a 0 2px, #d9e5ee 3px 4px, #52677e 5px, transparent 6px) bottom right / 16px 14px no-repeat,
+ repeating-linear-gradient(90deg, #90a8bd 0 2px, #324760 2px 6px) bottom center / min(28%, 120px) 5px no-repeat,
+ linear-gradient(90deg, transparent, #e5f2ff91, transparent) top center / 68% 2px no-repeat;
+}
+.terminal-card[data-border-skin="titanium"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), 0 8px 0 #131d2ab0, 0 20px 36px #01050ab8;
+}
+
+/* Retro: ivory enamel housing, dark ink edges and square stamped corners. */
+.terminal-card[data-border-skin="retro"] {
+ border: 5px solid #dbc7a4;
+ border-radius: 3px;
+ background: #15191b;
+ box-shadow: inset 0 0 0 2px #3b352e, 0 0 0 1px #fff0d1,
+ 0 7px 0 #635542, 0 18px 30px #080706b8;
+}
+.terminal-card[data-border-skin="retro"] .terminal-card__header {
+ color: #25231f;
+ background: linear-gradient(180deg, #fff5de 0, #e9d9b9 12%, #c3ad88 88%, #8b785d 100%);
+ box-shadow: inset 0 2px #fffdf0, inset 0 -3px #7a6b57;
+}
+.terminal-card[data-border-skin="retro"] .terminal-card__actions button {
+ color: #25231f;
+ border: 1px solid #514537;
+ border-radius: 2px;
+ background: linear-gradient(#f3e5c7, #b7a17d);
+ box-shadow: 1px 2px #665641;
+}
+.terminal-card[data-border-skin="retro"]::before {
+ border: 2px solid #211f1b;
+ border-radius: 1px;
+ box-shadow: inset 0 0 0 2px #efdfbd;
+}
+.terminal-card[data-border-skin="retro"]::after {
+ background:
+ linear-gradient(180deg, #211f1b 0 3px, #efdfbd 3px 5px) top left / clamp(16px, 5%, 22px) 5px no-repeat,
+ linear-gradient(90deg, #211f1b 0 3px, #efdfbd 3px 5px) top left / 5px clamp(16px, 5%, 22px) no-repeat,
+ linear-gradient(180deg, #211f1b 0 3px, #efdfbd 3px 5px) top right / clamp(16px, 5%, 22px) 5px no-repeat,
+ linear-gradient(270deg, #211f1b 0 3px, #efdfbd 3px 5px) top right / 5px clamp(16px, 5%, 22px) no-repeat,
+ linear-gradient(0deg, #211f1b 0 3px, #efdfbd 3px 5px) bottom left / clamp(14px, 4%, 18px) 5px no-repeat,
+ linear-gradient(90deg, #211f1b 0 3px, #efdfbd 3px 5px) bottom left / 5px clamp(12px, 5%, 16px) no-repeat,
+ linear-gradient(0deg, #211f1b 0 3px, #efdfbd 3px 5px) bottom right / clamp(14px, 4%, 18px) 5px no-repeat,
+ linear-gradient(270deg, #211f1b 0 3px, #efdfbd 3px 5px) bottom right / 5px clamp(12px, 5%, 16px) no-repeat,
+ linear-gradient(135deg, #fff4d9 0 38%, #211f1b 39% 50%, #fff4d9 51% 62%, transparent 63%) top left / clamp(16px, 5%, 22px) clamp(7px, 2.7%, 10px) no-repeat,
+ linear-gradient(225deg, #fff4d9 0 38%, #211f1b 39% 50%, #fff4d9 51% 62%, transparent 63%) top right / clamp(16px, 5%, 22px) clamp(7px, 2.7%, 10px) no-repeat,
+ linear-gradient(45deg, #fff4d9 0 38%, #211f1b 39% 50%, #fff4d9 51% 62%, transparent 63%) bottom left / clamp(14px, 4%, 18px) clamp(12px, 5%, 16px) no-repeat,
+ linear-gradient(315deg, #fff4d9 0 38%, #211f1b 39% 50%, #fff4d9 51% 62%, transparent 63%) bottom right / clamp(14px, 4%, 18px) clamp(12px, 5%, 16px) no-repeat,
+ repeating-linear-gradient(90deg, #22201b 0 5px, #f2e0bb 5px 9px) bottom center / min(30%, 120px) 4px no-repeat;
+}
+.terminal-card[data-border-skin="retro"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), 0 7px 0 #635542, 0 18px 30px #080706b8;
+}
+
+/* Match the shared warning ring with higher skin-scoped specificity. */
+.terminal-card.terminal-card--attention:is([data-border-skin="cybercore"], [data-border-skin="titanium"],
+ [data-border-skin="retro"]):is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--warning, #d8a24a),
+ 0 0 0 6px color-mix(in srgb, var(--primary) 42%, transparent), var(--shadow-lg);
+}
+
+/* Slow rail sweeps live in a narrow header track, clear of controls and corner hardware. */
+.terminal-card:is([data-border-skin="cybercore"], [data-border-skin="titanium"],
+ [data-border-skin="retro"]) .terminal-card__header {
+ position: relative;
+}
+.terminal-card:is([data-border-skin="cybercore"], [data-border-skin="titanium"],
+ [data-border-skin="retro"]) .terminal-card__header::after {
+ content: "";
+ position: absolute;
+ z-index: 8;
+ top: 1px;
+ right: clamp(44px, 10%, 88px);
+ left: clamp(34px, 8%, 68px);
+ height: 2px;
+ background-size: 200% 100%;
+ background-position: 100% 0;
+ background-repeat: no-repeat;
+ pointer-events: none;
+ opacity: 0;
+}
+.terminal-card[data-border-skin="cybercore"] .terminal-card__header::after {
+ background-image: linear-gradient(90deg, transparent 0 38%, #38d7f2 41% 43%, transparent 43% 46%,
+ #d8fbff 47% 49%, transparent 49% 52%, #38d7f2 53% 56%, transparent 60% 100%);
+ animation: terminal-skin-rail-sweep 9s linear 0s infinite;
+}
+.terminal-card[data-border-skin="titanium"] .terminal-card__header::after {
+ background-image: linear-gradient(90deg, transparent 0 43%, #b9cbdc 47%, #f5fbff 50%,
+ #a9bfd2 53%, transparent 58% 100%);
+ animation: terminal-skin-rail-sweep 12s linear 1.8s infinite;
+}
+.terminal-card[data-border-skin="retro"] .terminal-card__header::after {
+ background-image: linear-gradient(90deg, transparent 0 42%, #bf8954 47%, #ffe5b0 50%,
+ #c88c56 53%, transparent 59% 100%);
+ animation: terminal-skin-rail-sweep 16s linear 2.7s infinite;
+}
+@keyframes terminal-skin-rail-sweep {
+ 0% { opacity: 0; background-position: 100% 0; }
+ 19% { opacity: .48; }
+ 50% { opacity: .68; background-position: 50% 0; }
+ 81% { opacity: .48; }
+ 100% { opacity: 0; background-position: 0 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+ .terminal-card:is([data-border-skin="cybercore"], [data-border-skin="titanium"],
+ [data-border-skin="retro"]) .terminal-card__header::after {
+ animation: none;
+ opacity: 0;
+ background-position: 100% 0;
+ }
+}
+
+.border-skin-preview[data-border-skin="cybercore"] {
+ position: relative;
+ border: 2px solid #29c7ed;
+ border-radius: 4px;
+ box-shadow: inset 0 0 0 2px #07121c, 0 0 8px #12bce45c;
+}
+.border-skin-preview[data-border-skin="cybercore"] .border-skin-preview__header {
+ background: linear-gradient(180deg, #24516a, #0d1725 55%, #18364a 92%, #2ed0ef);
+}
+.border-skin-preview[data-border-skin="titanium"] {
+ position: relative;
+ border: 3px solid #728ba9;
+ border-radius: 3px;
+ box-shadow: inset 0 0 0 2px #182332, 0 3px #131d2a;
+}
+.border-skin-preview[data-border-skin="titanium"] .border-skin-preview__header {
+ background: linear-gradient(180deg, #d1dfeb, #526982 18%, #26364c 55%, #384f69 88%, #101a28);
+}
+.border-skin-preview[data-border-skin="retro"] {
+ position: relative;
+ border: 3px solid #dbc7a4;
+ border-radius: 2px;
+ box-shadow: inset 0 0 0 1px #3b352e, 0 2px #635542;
+}
+.border-skin-preview[data-border-skin="retro"] .border-skin-preview__header {
+ background: linear-gradient(180deg, #fff5de, #e9d9b9 16%, #c3ad88 88%, #8b785d);
+}
+.border-skin-preview[data-border-skin="retro"] .border-skin-preview__header i { background: #3a342b; }
+
+.border-skin-preview:is([data-border-skin="cybercore"], [data-border-skin="titanium"],
+ [data-border-skin="retro"])::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+.border-skin-preview[data-border-skin="cybercore"]::after {
+ background:
+ linear-gradient(135deg, #a1f5ff 0 35%, #0c5270 36% 48%, #a1f5ff 49% 61%, transparent 62%) top left / min(16%, 13px) 5px no-repeat,
+ linear-gradient(225deg, #a1f5ff 0 35%, #0c5270 36% 48%, #a1f5ff 49% 61%, transparent 62%) top right / min(16%, 13px) 5px no-repeat,
+ linear-gradient(45deg, #a1f5ff 0 35%, #0c5270 36% 48%, #a1f5ff 49% 61%, transparent 62%) bottom left / min(14%, 11px) 7px no-repeat,
+ linear-gradient(315deg, #a1f5ff 0 35%, #0c5270 36% 48%, #a1f5ff 49% 61%, transparent 62%) bottom right / min(14%, 11px) 7px no-repeat,
+ repeating-linear-gradient(180deg, #a1f5ff 0 2px, #0c5270 2px 4px, transparent 4px 7px) left 42% / 3px 12px no-repeat,
+ repeating-linear-gradient(180deg, #a1f5ff 0 2px, #0c5270 2px 4px, transparent 4px 7px) right 42% / 3px 12px no-repeat,
+ repeating-linear-gradient(90deg, #5ce6ff 0 5px, #0c5270 5px 8px) bottom center / 40% 3px no-repeat,
+ linear-gradient(90deg, transparent, #a1f5ff, transparent) top center / 55% 1px no-repeat;
+}
+.border-skin-preview[data-border-skin="titanium"]::after {
+ background:
+ linear-gradient(180deg, #d9e5ee 0 1px, #52677e 1px 2px) top left / 12px 2px no-repeat,
+ linear-gradient(90deg, #d9e5ee 0 1px, #52677e 1px 2px) top left / 2px 12px no-repeat,
+ linear-gradient(180deg, #d9e5ee 0 1px, #52677e 1px 2px) top right / 12px 2px no-repeat,
+ linear-gradient(270deg, #d9e5ee 0 1px, #52677e 1px 2px) top right / 2px 12px no-repeat,
+ linear-gradient(0deg, #d9e5ee 0 1px, #52677e 1px 2px) bottom left / 12px 2px no-repeat,
+ linear-gradient(90deg, #d9e5ee 0 1px, #52677e 1px 2px) bottom left / 2px 12px no-repeat,
+ linear-gradient(0deg, #d9e5ee 0 1px, #52677e 1px 2px) bottom right / 12px 2px no-repeat,
+ linear-gradient(270deg, #d9e5ee 0 1px, #52677e 1px 2px) bottom right / 2px 12px no-repeat,
+ radial-gradient(circle, #172434 0 1px, #e9f5ff 2px 3px, transparent 4px) top left / 6px 6px no-repeat,
+ radial-gradient(circle, #172434 0 1px, #e9f5ff 2px 3px, transparent 4px) top right / 6px 6px no-repeat,
+ radial-gradient(circle, #172434 0 1px, #e9f5ff 2px 3px, transparent 4px) bottom left / 9px 9px no-repeat,
+ radial-gradient(circle, #172434 0 1px, #e9f5ff 2px 3px, transparent 4px) bottom right / 9px 9px no-repeat,
+ repeating-linear-gradient(90deg, #a8bed2 0 2px, #334861 2px 5px) bottom center / 32% 3px no-repeat;
+}
+.border-skin-preview[data-border-skin="retro"]::after {
+ background:
+ linear-gradient(180deg, #211f1b 0 2px, #efdfbd 2px 3px) top left / 12px 3px no-repeat,
+ linear-gradient(90deg, #211f1b 0 2px, #efdfbd 2px 3px) top left / 3px 12px no-repeat,
+ linear-gradient(180deg, #211f1b 0 2px, #efdfbd 2px 3px) top right / 12px 3px no-repeat,
+ linear-gradient(270deg, #211f1b 0 2px, #efdfbd 2px 3px) top right / 3px 12px no-repeat,
+ linear-gradient(0deg, #211f1b 0 2px, #efdfbd 2px 3px) bottom left / 10px 3px no-repeat,
+ linear-gradient(90deg, #211f1b 0 2px, #efdfbd 2px 3px) bottom left / 3px 9px no-repeat,
+ linear-gradient(0deg, #211f1b 0 2px, #efdfbd 2px 3px) bottom right / 10px 3px no-repeat,
+ linear-gradient(270deg, #211f1b 0 2px, #efdfbd 2px 3px) bottom right / 3px 9px no-repeat,
+ linear-gradient(135deg, #fff5db 0 38%, #211f1b 39% 50%, #fff5db 51% 62%, transparent 63%) top left / 12px 5px no-repeat,
+ linear-gradient(225deg, #fff5db 0 38%, #211f1b 39% 50%, #fff5db 51% 62%, transparent 63%) top right / 12px 5px no-repeat,
+ linear-gradient(45deg, #fff5db 0 38%, #211f1b 39% 50%, #fff5db 51% 62%, transparent 63%) bottom left / 10px 8px no-repeat,
+ linear-gradient(315deg, #fff5db 0 38%, #211f1b 39% 50%, #fff5db 51% 62%, transparent 63%) bottom right / 10px 8px no-repeat,
+ repeating-linear-gradient(90deg, #312a21 0 4px, #f6e5c2 4px 7px) bottom center / 30% 3px no-repeat;
+}
diff --git a/src/renderer/src/styles/pixelSkinPackCreator.css b/src/renderer/src/styles/pixelSkinPackCreator.css
new file mode 100644
index 00000000..6b4b6408
--- /dev/null
+++ b/src/renderer/src/styles/pixelSkinPackCreator.css
@@ -0,0 +1,162 @@
+.pixel-pack-create {
+ grid-column: 1 / -1;
+ min-height: 44px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ border: 1px dashed color-mix(in srgb, var(--primary) 65%, transparent);
+ border-radius: 6px;
+ color: var(--text);
+ background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
+ cursor: pointer;
+}
+.pixel-pack-create:hover,
+.pixel-pack-create:focus-visible { border-style: solid; background: var(--surface-soft); }
+
+.pixel-pack-dialog-backdrop {
+ position: fixed;
+ z-index: 6100;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ padding: 16px;
+ background: #080a0fc9;
+}
+.pixel-pack-dialog {
+ width: min(940px, 100%);
+ max-height: min(860px, calc(100vh - 32px));
+ display: grid;
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ overflow: hidden;
+ border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
+ border-radius: 8px;
+ color: var(--text);
+ background: var(--surface, #1c202a);
+ box-shadow: 0 28px 90px #000b;
+}
+.pixel-pack-dialog__header,
+.pixel-pack-dialog__footer {
+ min-height: 58px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ padding: 12px 18px;
+ background: var(--surface-soft);
+}
+.pixel-pack-dialog__header h2 { margin: 0; font-size: 17px; line-height: 1.25; }
+.pixel-pack-dialog__close {
+ width: 30px;
+ height: 30px;
+ display: grid;
+ place-items: center;
+ border-radius: 4px;
+ color: var(--text);
+ cursor: pointer;
+}
+.pixel-pack-dialog__close:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
+.pixel-pack-dialog__body { min-height: 0; overflow: auto; padding: 18px; }
+.pixel-pack-guide { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: center; margin-bottom: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 6px; background: var(--surface-soft); }
+.pixel-pack-guide h3 { margin: 0 0 8px; font-size: 14px; }
+.pixel-pack-guide ol { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.6; }
+.pixel-pack-guide li + li { margin-top: 5px; }
+.pixel-pack-guide figure { margin: 0; }
+.pixel-pack-guide img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; image-rendering: pixelated; background: #141419; border-radius: 4px; }
+.pixel-pack-guide figcaption { margin-top: 6px; font-size: 11px; line-height: 1.4; }
+.pixel-pack-help { margin: 0 0 12px; font-size: 12px; line-height: 1.5; }
+.pixel-pack-aperture > .pixel-pack-help { grid-column: 1 / -1; }
+.pixel-pack-dialog__topline { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
+.pixel-pack-dialog__agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: -5px 0 16px; }
+.pixel-pack-dialog__agent-actions button {
+ min-height: 32px;
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ padding: 4px 9px;
+ border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
+ border-radius: 4px;
+ color: var(--text);
+ cursor: pointer;
+}
+.pixel-pack-dialog__agent-actions button:hover,
+.pixel-pack-dialog__agent-actions button:focus-visible { border-color: var(--primary); background: var(--surface-soft); }
+.pixel-pack-dialog__topline label { min-width: 0; flex: 1; display: grid; gap: 6px; font-size: 12px; }
+.pixel-pack-dialog__topline input {
+ width: 100%;
+ height: 37px;
+ padding: 0 10px;
+ border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
+ border-radius: 4px;
+ color: var(--text);
+ background: var(--surface-soft);
+}
+.pixel-pack-dialog__bulk,
+.pixel-pack-dialog__footer button {
+ height: 37px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 0 13px;
+ border-radius: 4px;
+ color: var(--text);
+ background: color-mix(in srgb, var(--primary) 22%, var(--surface-soft));
+ cursor: pointer;
+ white-space: nowrap;
+}
+.pixel-pack-dialog__bulk:hover,
+.pixel-pack-dialog__footer button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 36%, var(--surface-soft)); }
+.pixel-pack-dialog__footer button:disabled { opacity: .48; cursor: not-allowed; }
+.pixel-pack-dialog__footer span { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
+.pixel-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.pixel-pack-zip-selected { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--primary); border-radius: 4px; overflow-wrap: anywhere; }
+.pixel-pack-zip-selected button { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--text); }
+.pixel-pack-slot {
+ position: relative;
+ min-width: 0;
+ aspect-ratio: 3 / 2;
+ display: grid;
+ place-items: center;
+ overflow: hidden;
+ border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
+ border-radius: 4px;
+ background: #0c0e13;
+ cursor: pointer;
+}
+.pixel-pack-slot:hover,
+.pixel-pack-slot:focus-within { border-color: var(--primary); }
+.pixel-pack-slot__label {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 5px 7px;
+ color: #fff;
+ background: #0a0b0dd9;
+ font: 11px/1.2 ui-monospace, Menlo, monospace;
+}
+.pixel-pack-slot__label small { display: block; margin-top: 4px; color: #b7c0ca; font-size: 10px; }
+.pixel-pack-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
+.pixel-pack-slot__empty { display: grid; justify-items: center; gap: 8px; padding: 48px 10px 10px; color: #b7c0ca; font-size: 11px; text-align: center; }
+.pixel-pack-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.pixel-pack-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 16px; }
+.pixel-pack-bottom--zip { grid-template-columns: 1fr; }
+.pixel-pack-slot--background { max-width: 300px; }
+.pixel-pack-aperture { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-content: center; }
+.pixel-pack-aperture__levels { grid-column: 1 / -1; display: flex; gap: 4px; }
+.pixel-pack-aperture__levels button { min-width: 0; flex: 1; padding: 6px; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 4px; color: var(--text); cursor: pointer; }
+.pixel-pack-aperture__levels button[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 20%, transparent); }
+.pixel-pack-aperture label { min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; align-items: center; gap: 7px; font-size: 11px; text-transform: capitalize; }
+.pixel-pack-aperture input { min-width: 0; accent-color: var(--primary); }
+.pixel-pack-aperture output { font-variant-numeric: tabular-nums; text-align: right; }
+@media (max-width: 650px) {
+ .pixel-pack-guide { grid-template-columns: 1fr; }
+ .pixel-pack-guide figure { max-width: 220px; }
+ .pixel-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .pixel-pack-bottom { grid-template-columns: 1fr; }
+ .pixel-pack-aperture { grid-template-columns: 1fr; }
+ .pixel-pack-dialog__topline { align-items: stretch; flex-direction: column; }
+ .pixel-pack-dialog__bulk { align-self: flex-start; }
+}
diff --git a/src/renderer/src/styles/pixelTerminalSkins.css b/src/renderer/src/styles/pixelTerminalSkins.css
new file mode 100644
index 00000000..20d07c1c
--- /dev/null
+++ b/src/renderer/src/styles/pixelTerminalSkins.css
@@ -0,0 +1,348 @@
+.terminal-card[data-border-skin="sakura"] {
+ --pixel-skin-accent: #e77ca7;
+ --pixel-skin-surface: #17161e;
+ border-color: #75445f;
+ box-shadow: 0 0 0 1px #2c2035, 0 13px 28px #08080cc4;
+}
+.terminal-card[data-border-skin="matrix"] {
+ --pixel-skin-accent: #36e886;
+ --pixel-skin-surface: #07120c;
+ border-color: #1e7548;
+ box-shadow: 0 0 0 1px #123522, 0 13px 28px #060a08cc;
+}
+.terminal-card[data-border-skin="forest-cabin"] {
+ --pixel-skin-accent: #efab68;
+ --pixel-skin-surface: #17120e;
+ border-color: #754c32;
+ box-shadow: 0 0 0 1px #35251d, 0 13px 28px #090706cc;
+}
+.terminal-card[data-border-skin="gold-black"] {
+ --pixel-skin-accent: #f2c04d;
+ --pixel-skin-surface: #14120c;
+ border-color: #80642b;
+ box-shadow: 0 0 0 1px #3c3018, 0 13px 28px #080806cc;
+}
+.terminal-card[data-border-skin="cat"] {
+ --pixel-skin-accent: #f5a742;
+ --pixel-skin-surface: #181412;
+ border-color: #8c5a2b;
+ box-shadow: 0 0 0 1px #3d2617, 0 13px 28px #0a0807cc;
+}
+.terminal-card[data-border-skin="gothic-eclipse"] {
+ --pixel-skin-accent: #db7955;
+ --pixel-skin-surface: #151014;
+ border-color: #68403d;
+ box-shadow: 0 0 0 1px #352325, 0 13px 28px #080607cc;
+}
+.terminal-card[data-border-skin^="pixel:"] {
+ --pixel-skin-accent: #aac8d4;
+ --pixel-skin-surface: #0a0a0d;
+ border-color: #566974;
+}
+
+.terminal-card[data-pixel-skin="true"] {
+ --card-header-height: 26px;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+ outline: none;
+}
+.terminal-card[data-border-skin="sakura"]::before {
+ content: "";
+ position: absolute;
+ z-index: 0;
+ inset: 6% 3% 3%;
+ background: #0a0a0d;
+ pointer-events: none;
+}
+.terminal-card[data-pixel-skin="true"]:is(:focus-visible, :focus-within, .terminal-card--selected) .terminal-skin-canvas {
+ filter: drop-shadow(0 0 3px var(--pixel-skin-accent));
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__header {
+ position: absolute;
+ z-index: 4;
+ top: var(--pixel-skin-top-inset);
+ left: var(--pixel-skin-left-inset);
+ right: var(--pixel-skin-right-inset);
+ height: var(--card-header-height);
+ padding: 0 5px;
+ background: rgba(6, 6, 9, .78);
+ border-bottom: 0;
+ font-size: 11px;
+ text-shadow: 0 1px 2px #000;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__identity {
+ flex: 1;
+ overflow: hidden;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__identity .provider-icon--small {
+ width: 20px;
+ height: 20px;
+ --provider-icon-art-size: 17px;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__actions--pixel {
+ position: absolute;
+ z-index: 5;
+ justify-content: center;
+ padding: 0 4px;
+ gap: 14px;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__actions button {
+ width: var(--pixel-control-size, 27px);
+ height: var(--pixel-control-size, 27px);
+ border-radius: 3px;
+ color: var(--pixel-skin-accent);
+ background: color-mix(in srgb, var(--pixel-skin-surface), white 8%);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__actions--pixel button {
+ font-size: var(--pixel-control-font-size);
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ color: var(--pixel-skin-accent);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__actions--pixel button:is(:hover, :focus-visible) {
+ outline: 0;
+ background: transparent;
+ filter: brightness(1.4) drop-shadow(0 0 3px var(--pixel-skin-accent));
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__surface {
+ position: absolute;
+ z-index: 2;
+ inset: calc(var(--pixel-skin-top-inset) + var(--card-header-height)) var(--pixel-skin-right-inset) var(--pixel-skin-bottom-inset) var(--pixel-skin-left-inset);
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ background: transparent;
+ overflow: hidden;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__surface .xterm-viewport {
+ background-color: transparent;
+ scrollbar-width: none;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__surface .xterm-viewport::-webkit-scrollbar {
+ display: none;
+}
+.terminal-card[data-pixel-skin="true"]:has(.terminal-skin-canvas[data-overlay="true"]) .terminal-card__surface {
+ background: #0a0a0d;
+ box-shadow: 0 0 28px 12px #0a0a0d;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__search {
+ top: calc(var(--pixel-skin-top-inset) + var(--card-header-height) + 6px);
+ right: calc(var(--pixel-skin-right-inset) + 8px);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__summary {
+ z-index: 4;
+ inset: var(--pixel-skin-top-inset) var(--pixel-skin-right-inset) var(--pixel-skin-bottom-inset) var(--pixel-skin-left-inset);
+ width: auto;
+ height: auto;
+ background: var(--pixel-skin-surface);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__summary:hover {
+ background: color-mix(in srgb, var(--pixel-skin-surface), white 8%);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-skin-canvas {
+ position: absolute;
+ z-index: 1;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ image-rendering: pixelated;
+ pointer-events: none;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-skin-canvas[data-overlay="true"] {
+ z-index: 3;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-skin-canvas--frame {
+ z-index: 3;
+}
+.terminal-card[data-pixel-skin="true"]:has(.terminal-skin-canvas--frame) .terminal-skin-canvas:not(.terminal-skin-canvas--frame) {
+ filter: none;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__skin-drag {
+ position: absolute;
+ z-index: 4;
+ cursor: move;
+ touch-action: none;
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__skin-drag--top {
+ inset: 0 0 auto;
+ height: var(--pixel-skin-top-inset);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__skin-drag--right {
+ inset: var(--pixel-skin-top-inset) 0 var(--pixel-skin-bottom-inset) auto;
+ width: var(--pixel-skin-right-inset);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__skin-drag--bottom {
+ inset: auto 0 0;
+ height: var(--pixel-skin-bottom-inset);
+}
+.terminal-card[data-pixel-skin="true"] .terminal-card__skin-drag--left {
+ inset: var(--pixel-skin-top-inset) auto var(--pixel-skin-bottom-inset) 0;
+ width: var(--pixel-skin-left-inset);
+}
+.terminal-card--summary[data-pixel-skin="true"] .terminal-card__header {
+ display: none;
+}
+.terminal-card[data-pixel-skin="true"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: none;
+}
+
+.border-skin-preview[data-border-skin="sakura"] {
+ border-color: #c16b98;
+ border-radius: 3px;
+ background: #17161e;
+}
+.border-skin-preview[data-border-skin="matrix"] { border-color: #36e886; background: #07120c; }
+.border-skin-preview[data-border-skin="forest-cabin"] { border-color: #efab68; background: #17120e; }
+.border-skin-preview[data-border-skin="gold-black"] { border-color: #f2c04d; background: #14120c; }
+.border-skin-preview[data-border-skin="cat"] { border-color: #f5a742; background: #181412; }
+.border-skin-preview[data-border-skin="gothic-eclipse"] { border-color: #bd6756; background: #151014; }
+
+/* Pixel border skin live interactive preview & stage */
+.border-skin-preview--pixel {
+ height: auto;
+ aspect-ratio: 3 / 2;
+}
+
+.border-skin-preview--pixel img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ display: block;
+ image-rendering: pixelated;
+}
+
+.pixel-skin-preview-tools {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: .75em;
+ margin-top: .45em;
+ padding: .85em;
+ border-radius: .85em;
+ background: color-mix(in srgb, var(--surface-soft) 85%, var(--surface));
+ border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.pixel-skin-preview-tools__groups {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: .6em;
+ width: 100%;
+ max-width: 520px;
+}
+
+.pixel-skin-preview-tools__heading { width: 100%; max-width: 520px; }
+.pixel-skin-preview-tools__heading strong { display: inline-block; padding: 4px 8px; border: 1px solid var(--primary); border-radius: 4px; font-size: 12px; }
+.pixel-skin-preview-tools__heading p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
+.canvas-background-preview img { width: 100%; height: 100%; object-fit: cover; }
+.pixel-pack-create[aria-pressed="true"] { border-style: solid; border-color: var(--primary); }
+
+.pixel-skin-preview-tools__group {
+ display: inline-flex;
+ padding: .2em;
+ border-radius: .6em;
+ background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
+ border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.pixel-skin-preview-tools__button {
+ min-height: 2.15em;
+ padding: .35em .75em;
+ border: 0;
+ border-radius: .48em;
+ outline: 0;
+ color: var(--text-muted-on-dark);
+ background: transparent;
+ cursor: pointer;
+ font-size: .8em;
+ font-weight: 700;
+ line-height: 1.2;
+ transition: background .15s ease, color .15s ease, box-shadow .15s ease;
+}
+
+.pixel-skin-preview-tools__button:hover {
+ color: var(--text);
+ background: var(--surface-soft);
+}
+
+.pixel-skin-preview-tools__button:focus-visible {
+ box-shadow: inset 0 0 0 2px var(--secondary);
+}
+
+.pixel-skin-preview-tools__button--active,
+.pixel-skin-preview-tools__button[aria-pressed="true"] {
+ color: var(--text-dark);
+ background: var(--primary);
+}
+
+.pixel-skin-preview-stage {
+ position: relative;
+ width: 100%;
+ max-width: 520px;
+ aspect-ratio: 3 / 2;
+ overflow: hidden;
+ border-radius: 7px;
+ background: var(--pixel-skin-surface, #141419);
+ border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
+ box-shadow: 0 4px 18px rgba(0, 0, 0, .32);
+}
+
+.pixel-skin-preview-stage .terminal-skin-canvas {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ image-rendering: pixelated;
+ pointer-events: none;
+ z-index: 1;
+}
+.pixel-skin-preview-stage .terminal-skin-canvas--frame {
+ z-index: 3;
+}
+
+.pixel-skin-preview-stage__screen {
+ position: absolute;
+ z-index: 2;
+ inset: 22% 16% 20% 16%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: .35em;
+ pointer-events: none;
+ font: 700 11.5px/1.4 var(--font-mono, ui-monospace, monospace);
+ color: var(--pixel-skin-accent, var(--text));
+ overflow: hidden;
+ user-select: none;
+}
+
+.pixel-skin-preview-stage__screen span:first-child {
+ display: inline-flex;
+ align-items: center;
+ gap: .3em;
+ opacity: .92;
+}
+
+.pixel-skin-preview-stage__screen i {
+ display: inline-block;
+ width: .55em;
+ height: 1.1em;
+ background: currentColor;
+ vertical-align: text-bottom;
+ animation: cursor-blink 1s steps(2, start) infinite;
+}
+
+.pixel-skin-preview-stage__activity {
+ font-size: 10px;
+ opacity: .8;
+ font-weight: 600;
+}
diff --git a/src/renderer/src/styles/terminalSkins.css b/src/renderer/src/styles/terminalSkins.css
new file mode 100644
index 00000000..e880760c
--- /dev/null
+++ b/src/renderer/src/styles/terminalSkins.css
@@ -0,0 +1,110 @@
+.terminal-card[data-border-skin="minimal"] {
+ border-color: rgba(213, 223, 230, .42);
+ border-radius: 6px;
+ box-shadow: 0 7px 24px rgba(0, 0, 0, .26);
+}
+.terminal-card[data-border-skin="minimal"] .terminal-card__header {
+ background: #292d33;
+}
+.terminal-card[data-border-skin="minimal"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), 0 7px 24px rgba(0, 0, 0, .26);
+}
+
+.terminal-card[data-border-skin="glass"] {
+ border-color: rgba(223, 245, 255, .6);
+ border-radius: 13px;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 36px rgba(0, 0, 0, .28);
+}
+.terminal-card[data-border-skin="glass"] .terminal-card__header {
+ background: linear-gradient(135deg, rgba(127, 180, 195, .37), rgba(75, 82, 106, .86) 55%, rgba(183, 127, 167, .32));
+}
+.terminal-card[data-border-skin="glass"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), 0 14px 36px rgba(0, 0, 0, .28);
+}
+
+.terminal-card[data-border-skin="cyber"] {
+ border: 2px solid #50d9de;
+ border-radius: 7px;
+ box-shadow: 0 0 0 1px rgba(12, 79, 86, .8), 0 0 18px rgba(62, 213, 220, .28), var(--shadow-lg);
+}
+.terminal-card[data-border-skin="cyber"] .terminal-card__header {
+ background: linear-gradient(90deg, #123c44, #202c3c 68%, #432b4b);
+}
+.terminal-card[data-border-skin="cyber"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), 0 0 20px rgba(62, 213, 220, .42), var(--shadow-lg);
+}
+
+.terminal-card[data-border-skin="nord"] {
+ border: 2px solid #8fa8b3;
+ border-radius: 9px;
+ box-shadow: 0 0 0 1px rgba(25, 45, 55, .8), var(--shadow-lg);
+}
+.terminal-card[data-border-skin="nord"] .terminal-card__header {
+ background: linear-gradient(#526e7a, #344b58);
+}
+.terminal-card[data-border-skin="nord"]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--primary), var(--shadow-lg);
+}
+
+.terminal-card[data-border-skin="gradient"] {
+ border: 2px solid transparent;
+ border-radius: 13px;
+ background: linear-gradient(var(--terminal-background, #202430), var(--terminal-background, #202430)) padding-box,
+ linear-gradient(125deg, #f0ab7c, #d28ac3 48%, #75c8d4) border-box;
+}
+.terminal-card[data-border-skin="gradient"] .terminal-card__header {
+ background: linear-gradient(110deg, #564152, #51445d 50%, #315b67);
+}
+
+.terminal-card--attention[data-border-skin]:is(:focus-within, .terminal-card--selected) {
+ box-shadow: 0 0 0 3px var(--warning, #d8a24a), 0 0 0 6px color-mix(in srgb, var(--primary) 42%, transparent), var(--shadow-lg);
+}
+
+.border-skin-choices {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: .65em;
+}
+.border-skin-choice {
+ min-width: 0;
+ padding: .65em;
+ display: grid;
+ gap: .55em;
+ border: 1px solid transparent;
+ border-radius: 7px;
+ color: var(--text-muted-on-dark);
+ background: var(--surface-soft);
+ cursor: pointer;
+ text-align: left;
+}
+.border-skin-choice:hover { color: var(--text); background: color-mix(in srgb, var(--surface-soft) 78%, var(--secondary)); }
+.border-skin-choice:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
+.border-skin-choice[aria-pressed="true"] { border-color: var(--primary); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); }
+.border-skin-choice__label { min-width: 0; font-size: .78em; font-weight: 700; line-height: 1.2; }
+.border-skin-preview {
+ height: 4.8em;
+ display: block;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, .14);
+ border-radius: 7px;
+ background: #202430;
+}
+.border-skin-preview__header { height: 1.35em; padding: .45em .5em; display: flex; align-items: center; gap: .25em; background: #353a48; }
+.border-skin-preview__header i { width: .34em; height: .34em; border-radius: 50%; background: rgba(255, 255, 255, .65); }
+.border-skin-preview__body { padding: .7em .6em; display: grid; gap: .42em; }
+.border-skin-preview__body i { width: 68%; height: .27em; border-radius: 2px; background: #9ec4b7; opacity: .75; }
+.border-skin-preview__body i:last-child { width: 43%; background: #aeb8c9; }
+.border-skin-preview[data-border-skin="minimal"] { border-color: rgba(213, 223, 230, .5); border-radius: 3px; }
+.border-skin-preview[data-border-skin="minimal"] .border-skin-preview__header { background: #292d33; }
+.border-skin-preview[data-border-skin="glass"] { border-color: rgba(223, 245, 255, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
+.border-skin-preview[data-border-skin="glass"] .border-skin-preview__header { background: linear-gradient(135deg, #6c94a0, #555d77 55%, #785c76); }
+.border-skin-preview[data-border-skin="cyber"] { border: 2px solid #50d9de; border-radius: 4px; box-shadow: 0 0 8px rgba(62, 213, 220, .35); }
+.border-skin-preview[data-border-skin="cyber"] .border-skin-preview__header { background: linear-gradient(90deg, #123c44, #202c3c 68%, #432b4b); }
+.border-skin-preview[data-border-skin="nord"] { border: 2px solid #8fa8b3; border-radius: 5px; }
+.border-skin-preview[data-border-skin="nord"] .border-skin-preview__header { background: linear-gradient(#526e7a, #344b58); }
+.border-skin-preview[data-border-skin="gradient"] { border: 2px solid transparent; background: linear-gradient(#202430, #202430) padding-box, linear-gradient(125deg, #f0ab7c, #d28ac3 48%, #75c8d4) border-box; }
+.border-skin-preview[data-border-skin="gradient"] .border-skin-preview__header { background: linear-gradient(110deg, #564152, #51445d 50%, #315b67); }
+
+@media (max-width: 480px) {
+ .border-skin-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
diff --git a/src/shared/contracts.ts b/src/shared/contracts.ts
index 0db5e43e..634e6995 100644
--- a/src/shared/contracts.ts
+++ b/src/shared/contracts.ts
@@ -27,6 +27,38 @@ export type HomeAccentPresetId = "classic" | "warm" | "cool" | "mono" | "custom"
export type SessionRowColorMode = "monochrome" | "status";
export type CanvasColorId = "sage" | "lilac" | "night" | "sand" | "mist" | "rose" | "slate";
export type CanvasPatternId = "dots" | "grid" | "waves" | "diagonal" | "rings" | "none";
+export type CustomTerminalBorderSkinId = `custom:${string}`;
+export type PixelTerminalBorderSkinId = `pixel:${string}`;
+export const BUNDLED_CANVAS_BACKGROUND_IDS = ["sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse"] as const;
+export type CanvasBackgroundId = "none" | typeof BUNDLED_CANVAS_BACKGROUND_IDS[number] | PixelTerminalBorderSkinId;
+export type PixelSkinPreferredDetail = "minimal" | "detailed";
+export type PixelSkinSlot = `${"minimal" | "detailed" | "master"}_${"idle" | "working" | "completed"}` | "background";
+export interface PixelSkinAperture { left: number; right: number; top: number; bottom: number }
+export type PixelSkinApertures = Record;
+export const DEFAULT_PIXEL_SKIN_APERTURES: PixelSkinApertures = {
+ minimal: { left: 10, right: 10, top: 16, bottom: 16 },
+ detailed: { left: 14, right: 14, top: 18, bottom: 19 },
+ master: { left: 15, right: 15, top: 21, bottom: 22 }
+};
+export interface PixelSkinPackSummary { id: PixelTerminalBorderSkinId; name: string; aperture: PixelSkinAperture; apertures: PixelSkinApertures }
+export interface PixelSkinPackInstallRequest { name: string; files: Record; aperture?: PixelSkinAperture; apertures?: PixelSkinApertures }
+export interface PixelSkinZipInstallRequest { name: string; archive: Uint8Array; apertures?: PixelSkinApertures }
+export type TerminalBorderSkinId = "classic" | "minimal" | "glass" | "cyber" | "nord" | "gradient" | "cybercore" | "titanium" | "retro" | "sakura" | "matrix" | "forest-cabin" | "gold-black" | "cat" | "gothic-eclipse" | CustomTerminalBorderSkinId | PixelTerminalBorderSkinId;
+/** v1 manifest uses an unprefixed plain slug; files live at the fixed skin.css path. */
+export interface TerminalBorderSkinManifest {
+ schemaVersion: 1;
+ id: string;
+ name: string;
+ kind: "terminal-border";
+}
+/** Metadata only; the CSS is returned by get(). */
+export type TerminalBorderSkinListItem =
+ | { id: CustomTerminalBorderSkinId; name: string; revision: string; status: "ready" }
+ | { id: CustomTerminalBorderSkinId; name?: string; revision?: string; status: "error"; error: string };
+export type TerminalBorderSkinReadResult =
+ | { id: CustomTerminalBorderSkinId; name: string; revision: string; status: "ready"; css: string }
+ | { id: CustomTerminalBorderSkinId; status: "error"; error: string };
+export type AppSkinId = "classic" | "atelier" | "signal" | "greenhouse" | "midnight";
export type LocaleId = "ru" | "en";
export type MediaFit = "cover" | "contain";
export type EdgePanSpeed = "slow" | "normal" | "fast";
@@ -195,7 +227,12 @@ export interface AppSettings {
baseProtectionEnabled: boolean;
uiScale: number;
canvasColor: CanvasColorId;
+ canvasBackground: CanvasBackgroundId;
pattern: CanvasPatternId;
+ terminalBorderSkin: TerminalBorderSkinId;
+ terminalSkinDetail: PixelSkinPreferredDetail;
+ terminalSkinAnimationEnabled: boolean;
+ appSkin: AppSkinId;
snapToGrid: boolean;
invertTerminalWheel: boolean;
invertCanvasWheel: boolean;
@@ -276,6 +313,8 @@ export interface SessionMetadata {
role: SessionRole;
parentSessionId?: string;
status: SessionStatus;
+ /** True only after an explicit provider turn-stop signal; cleared by the next working turn. */
+ turnCompleted?: boolean;
startedAt: number;
exitCode: number | null;
failureDetails: string | null;
@@ -1271,6 +1310,19 @@ export interface CanvasTTYApi {
settings: {
get(): Promise;
update(patch: Partial): Promise;
+ onChanged(listener: (settings: AppSettings) => void): () => void;
+ };
+ skins: {
+ list(): Promise;
+ get(id: CustomTerminalBorderSkinId): Promise;
+ onChanged(listener: () => void): () => void;
+ };
+ pixelSkins: {
+ list(): Promise;
+ install(request: PixelSkinPackInstallRequest): Promise;
+ installZip(request: PixelSkinZipInstallRequest): Promise;
+ readAsset(id: PixelTerminalBorderSkinId, slot: PixelSkinSlot): Promise;
+ onChanged(listener: () => void): () => void;
};
agents: {
availability(): Promise;
@@ -1426,6 +1478,15 @@ export const IPC = {
updaterInstall: "updater:install",
settingsGet: "settings:get",
settingsUpdate: "settings:update",
+ settingsChanged: "settings:changed",
+ terminalBorderSkinsList: "terminal-border-skins:list",
+ terminalBorderSkinsGet: "terminal-border-skins:get",
+ terminalBorderSkinsChanged: "terminal-border-skins:changed",
+ pixelSkinsList: "pixel-skins:list",
+ pixelSkinsInstall: "pixel-skins:install",
+ pixelSkinsInstallZip: "pixel-skins:install-zip",
+ pixelSkinsReadAsset: "pixel-skins:read-asset",
+ pixelSkinsChanged: "pixel-skins:changed",
dialogPickDirectory: "dialog:pick-directory",
dialogPickMedia: "dialog:pick-media",
mediaRead: "media:read",
diff --git a/tests/agent-browser-helper.test.mjs b/tests/agent-browser-helper.test.mjs
index 5b6ad50c..16d3c252 100644
--- a/tests/agent-browser-helper.test.mjs
+++ b/tests/agent-browser-helper.test.mjs
@@ -31,10 +31,24 @@ import {
BridgeClientError,
GatewayClient,
createMcpDispatcher,
+ errorResponse,
formatToolResult,
isLocalEndpoint,
readIdentity
} from "../src/agent-browser/mcp-helper.mjs";
+
+test("MCP initialization preserves gateway failure reasons without exposing unexpected errors", async () => {
+ const dispatch = createMcpDispatcher({
+ async connect() {
+ throw new BridgeClientError({ code: "AUTH_REPLAYED", message: "Agent browser capability was already used.", retryable: false });
+ }
+ });
+ const reply = await dispatch({ jsonrpc: "2.0", id: 1, method: "initialize" })
+ .catch((error) => errorResponse(1, error));
+ assert.equal(reply.error.code, -32603);
+ assert.match(reply.error.message, /AUTH_REPLAYED: Agent browser capability was already used/);
+ assert.equal(errorResponse(2, new Error("private details")).error.message, "Internal error");
+});
import {
AGENT_BROWSER_ENV,
AgentBrowserBridge
diff --git a/tests/agent-control.test.mjs b/tests/agent-control.test.mjs
index 2aee7ea4..d588605c 100644
--- a/tests/agent-control.test.mjs
+++ b/tests/agent-control.test.mjs
@@ -1,7 +1,7 @@
import assert from "node:assert/strict";
import { randomUUID } from "node:crypto";
import { spawn } from "node:child_process";
-import { mkdtemp, readFile, realpath, rm, stat, writeFile } from "node:fs/promises";
+import { chmod, mkdir, mkdtemp, readFile, realpath, rm, stat, writeFile } from "node:fs/promises";
import { EventEmitter } from "node:events";
import { createConnection } from "node:net";
import { tmpdir } from "node:os";
@@ -10,7 +10,9 @@ import { setTimeout as delay } from "node:timers/promises";
import test from "node:test";
import { controlRequest, parseArguments, runCli } from "../scripts/canvastty-control.mjs";
import xterm from "@xterm/headless";
-import { AgentControlGateway, codexComposerReady } from "../src/main/services/agent-control/AgentControlGateway.ts";
+import { AgentControlGateway, CONTROL_REFUSAL_MESSAGE, codexComposerReady } from "../src/main/services/agent-control/AgentControlGateway.ts";
+import { PixelSkinPackRegistry } from "../src/main/services/PixelSkinPackRegistry.ts";
+import { SettingsStore } from "../src/main/services/SettingsStore.ts";
import { TerminalManager, terminalEnvironment } from "../src/main/services/TerminalManager.ts";
import { TerminalSessionStore } from "../src/main/services/TerminalSessionStore.ts";
import { AgentControlService } from "../src/main/services/AgentControlService.ts";
@@ -49,7 +51,13 @@ async function fixture(t, gatewayOptions = {}) {
return pty;
});
let lifecycleEnabled = true;
- gateway = new AgentControlGateway({ userDataPath: root, terminals, lifecycleEnabled: () => lifecycleEnabled, ...gatewayOptions });
+ const pixelSkinPacks = new PixelSkinPackRegistry(root);
+ await pixelSkinPacks.initialize();
+ const settings = new SettingsStore(root, "en");
+ await settings.load();
+ let notifiedSettings = null;
+ gateway = new AgentControlGateway({ userDataPath: root, terminals, pixelSkinPacks, settings,
+ onSettingsChanged: (next) => { notifiedSettings = next; }, lifecycleEnabled: () => lifecycleEnabled, ...gatewayOptions });
const connectionPath = await gateway.start();
const clientPath = join(root, "client-a.json");
t.after(async () => { await gateway.close(); await terminals.shutdown(); });
@@ -69,10 +77,50 @@ async function fixture(t, gatewayOptions = {}) {
}
assert.fail("fixture composer not ready");
};
- return { root, gateway, terminals, calls, connectionPath, clientPath, request, create, signal, ready,
+ return { root, gateway, terminals, calls, connectionPath, clientPath, pixelSkinPacks, settings,
+ get notifiedSettings() { return notifiedSettings; }, request, create, signal, ready,
disableLifecycle() { lifecycleEnabled = false; } };
}
+test("agent skin API lists and activates persistent themes", localSocket, async (t) => {
+ const f = await fixture(t);
+ assert.ok((await f.request("skin-list")).builtIn.includes("matrix"));
+ assert.ok((await f.request("skin-list")).builtIn.includes("gothic-eclipse"));
+ assert.equal((await f.request("skin-select", { skinId: "gothic-eclipse" })).activeId, "gothic-eclipse");
+ const selected = await f.request("skin-select", { skinId: "matrix", detail: "minimal" });
+ assert.equal(selected.activeId, "matrix");
+ assert.equal(selected.detail, "minimal");
+ assert.equal(f.notifiedSettings.terminalBorderSkin, "matrix");
+ assert.equal((await f.request("skin-list")).activeId, "matrix");
+ assert.equal((await new SettingsStore(f.root, "en").load()).terminalBorderSkin, "matrix");
+ await assert.rejects(f.request("skin-select", { skinId: "pixel:missing" }), (error) => error.code === "INVALID_PARAMS");
+});
+
+test("agent ZIP import accepts per-level terminal openings from a JSON file", localSocket, async (t) => {
+ const f = await fixture(t);
+ const archivePath = join(f.root, "theme.zip");
+ const aperturesPath = join(f.root, "apertures.json");
+ const apertures = {
+ minimal: { left: 10, right: 10, top: 16, bottom: 16 },
+ detailed: { left: 14, right: 14, top: 18, bottom: 19 },
+ master: { left: 15, right: 15, top: 21, bottom: 22 }
+ };
+ await writeFile(archivePath, "test ZIP placeholder");
+ await writeFile(aperturesPath, JSON.stringify(apertures));
+ let received;
+ f.pixelSkinPacks.installZip = async (archive, name, openings) => {
+ received = { archive: archive.toString(), name, apertures: openings };
+ return { id: `pixel:${randomUUID()}`, name, aperture: apertures.detailed, apertures: openings };
+ };
+ const response = await runCli(["--connection", f.connectionPath, "--client-file", f.clientPath,
+ "skin-install", "--archive", archivePath, "--name", "Agent theme", "--apertures", aperturesPath,
+ "--activate", "--detail", "detailed"]);
+ assert.deepEqual(received, { archive: "test ZIP placeholder", name: "Agent theme", apertures });
+ assert.equal(response.result.pack.name, "Agent theme");
+ assert.equal(f.notifiedSettings.terminalBorderSkin, response.result.pack.id);
+ assert.equal(f.notifiedSettings.terminalSkinDetail, "detailed");
+});
+
test("CLI creates native YOLO with requested directory/title, including concurrent replay", localSocket, async (t) => {
const f = await fixture(t);
const args = ["--connection", f.connectionPath, "--client-file", f.clientPath, "--request-id", "same-create",
@@ -284,9 +332,63 @@ test("invalid socket credentials cannot launch a native session", localSocket, a
});
assert.equal(reply.ok, false);
assert.equal(reply.error.code, "INVALID_REQUEST");
+ assert.equal(reply.error.message, CONTROL_REFUSAL_MESSAGE);
assert.equal(f.calls.length, 0);
});
+/** Sends raw bytes to the control socket and collects everything until the gateway closes the connection. */
+function rawExchange(endpoint, bytes) {
+ return new Promise((resolveReply, reject) => {
+ const socket = createConnection(endpoint);
+ const chunks = [];
+ socket.on("error", reject);
+ socket.setTimeout(3000, () => { socket.destroy(); reject(new Error("the gateway did not close the refused connection")); });
+ socket.on("data", (chunk) => chunks.push(chunk));
+ socket.on("end", () => { socket.destroy(); resolveReply(Buffer.concat(chunks).toString("utf8")); });
+ socket.on("connect", () => socket.write(bytes));
+ });
+}
+
+test("unauthenticated, garbage and HTTP requests get the same guidance and a closed connection", localSocket, async (t) => {
+ const f = await fixture(t);
+ const descriptor = JSON.parse(await readFile(f.connectionPath, "utf8"));
+ const guessed = await rawExchange(descriptor.endpoint, JSON.stringify({ method: "list", params: {} }) + "\n");
+ const garbage = await rawExchange(descriptor.endpoint, "hello?\n");
+ for (const text of [guessed, garbage]) {
+ const reply = JSON.parse(text.trim());
+ assert.deepEqual(reply, { v: 1, ok: false, error: { code: "INVALID_REQUEST", message: CONTROL_REFUSAL_MESSAGE } });
+ }
+ const http = await rawExchange(descriptor.endpoint, "GET / HTTP/1.1\r\nHost: localhost\r\nUser-Agent: curl/8\r\nAccept: */*\r\n\r\n");
+ const [head, body] = http.split("\r\n\r\n");
+ assert.match(head, /^HTTP\/1\.1 403 Forbidden\r\n/u);
+ assert.match(head, /\r\nConnection: close/u);
+ assert.equal(Number(/Content-Length: (\d+)/u.exec(head)[1]), Buffer.byteLength(body));
+ assert.equal(body, `${CONTROL_REFUSAL_MESSAGE}\n`);
+ // The guidance names the way in and nothing about the protocol, the token or where anything lives.
+ assert.match(CONTROL_REFUSAL_MESSAGE, /Orchestrator role/u);
+ assert.match(CONTROL_REFUSAL_MESSAGE, /canvastty_agents tools/u);
+ assert.doesNotMatch(CONTROL_REFUSAL_MESSAGE, /token|instanceId|controller|\.sock|connection\.json|agent-control|ndjson|json/iu);
+ assert.equal(f.calls.length, 0);
+});
+
+test("the token file is private (0600) in a private folder (0700), even under a loose umask or a loose folder", localSocket, async (t) => {
+ const root = await realpath(await mkdtemp(join(tmpdir(), "canvastty-control-hygiene-")));
+ await mkdir(join(root, "agent-control"), { mode: 0o777 });
+ await chmod(join(root, "agent-control"), 0o777);
+ const previous = process.umask(0);
+ const terminals = { create() { throw new Error("unused"); }, listMetadata: () => [], readBuffer() { throw new Error("unused"); },
+ inputChecked: () => false, geometry: () => ({ cols: 80, rows: 24 }) };
+ const gateway = new AgentControlGateway({ userDataPath: root, terminals, lifecycleEnabled: () => false });
+ t.after(async () => { process.umask(previous); await gateway.close(); await rm(root, { recursive: true, force: true }); });
+ let connectionPath;
+ try { connectionPath = await gateway.start(); } finally { process.umask(previous); }
+ const descriptor = JSON.parse(await readFile(connectionPath, "utf8"));
+ assert.equal((await stat(join(root, "agent-control"))).mode & 0o777, 0o700);
+ assert.equal((await stat(descriptor.tokenFile)).mode & 0o777, 0o600);
+ assert.equal((await stat(connectionPath)).mode & 0o777, 0o600);
+ assert.equal((await stat(join(descriptor.endpoint, ".."))).mode & 0o777, 0o700);
+});
+
test("a control write waiting on terminal replay cannot reach a restarted session", localSocket, async (t) => {
const held = [];
const original = xterm.Terminal.prototype.write;
diff --git a/tests/base-protection-app-private.test.mjs b/tests/base-protection-app-private.test.mjs
new file mode 100644
index 00000000..e79b330d
--- /dev/null
+++ b/tests/base-protection-app-private.test.mjs
@@ -0,0 +1,143 @@
+/**
+ * Base protection of CanvasTTY's own private data: its control token and descriptor, the gateways' connection
+ * records and sockets, the secret stores and account homes. Everything lives in temporary folders: HOME and the
+ * userData folder are fakes, nothing real is read, and no socket is opened.
+ */
+import test from "node:test";
+import assert from "node:assert/strict";
+import { mkdirSync, mkdtempSync, realpathSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { analyzeAction } from "../src/main/services/safety/commandFacts.ts";
+import { canvasTtyPrivateData, checkBaseProtection, denyRule } from "../src/main/services/safety/baseProtection.ts";
+import { DecisionHooks } from "../src/main/services/DecisionHooks.ts";
+
+const base = realpathSync(mkdtempSync(join(tmpdir(), "canvastty-app-private-")));
+const home = join(base, "home");
+const project = join(base, "project");
+const userData = join(home, "Library", "Application Support", "canvastty");
+const control = join(userData, "agent-control");
+for (const dir of [project, join(project, "src"), join(project, "agent-control"), control, join(userData, "plugin-secrets"), join(userData, "account-homes", "acct-1", ".claude"), join(userData, "lifecycle", "runtime")]) {
+ mkdirSync(dir, { recursive: true });
+}
+writeFileSync(join(control, "token-0123abcd"), "fake-token\n", { mode: 0o600 });
+writeFileSync(join(control, "connection.json"), "{}\n", { mode: 0o600 });
+writeFileSync(join(userData, "settings.json"), "{}\n");
+writeFileSync(join(project, "agent-control", "token-1"), "fixture\n");
+process.on("exit", () => rmSync(base, { recursive: true, force: true }));
+
+const privateData = canvasTtyPrivateData(userData);
+const token = join(control, "token-0123abcd");
+const shell = (command) => ({ kind: "shell", command, commandCwd: null, paths: [] });
+const rule = (command, extra = {}) => denyRule(analyzeAction(shell(command), project, { home, privateData, ...extra }));
+const q = (path) => `'${path}'`;
+const sock = "$TMPDIR/ctty-control-Ab12Cd/c.sock";
+
+const DENY = [
+ // Reading the token and the descriptor, whatever the program.
+ `cat ${q(token)}`,
+ `cat "$HOME/Library/Application Support/canvastty/agent-control/token-0123abcd"`,
+ "cat ~/Library/Application\\ Support/canvastty/agent-control/token-*",
+ `head -c 64 ${q(join(control, "connection.json"))}`,
+ `grep -a . ${q(token)}`,
+ `cp ${q(token)} ./copy.txt`,
+ `base64 < ${q(token)}`,
+ `xxd ${q(join(userData, "provider-secrets.bin"))}`,
+ `strings ${q(join(userData, "provider-secrets.bin"))}`,
+ `sqlite3 ${q(join(userData, "account-homes", "acct-1", "state.db"))} .dump`,
+ `cat ${q(join(userData, "github-oauth.json"))}`,
+ `cat ${q(join(userData, "lifecycle", "runtime", "connection.json"))}`,
+ `ls ${q(control)}`,
+ `cd ${q(control)} && cat token-0123abcd`,
+ `cd ${q(userData)} && cat agent-control/token-0123abcd`,
+ `echo "$(cat ${q(token)})"`,
+ `bash -c "cat ${q(token)}"`,
+ `find ${q(userData)} -name 'token-*'`,
+ `grep -r token ${q(userData)}`,
+ `rg secret ${q(userData)}`,
+ `tar -czf out.tgz ${q(userData)}`,
+ `cat ${q(userData)}/*/token-*`,
+ "cat \"$CANVASTTY_CONTROL_CONNECTION\"",
+ "echo $CANVASTTY_RUNTIME_CAPABILITY",
+ // Interpreter one-liners and heredocs.
+ `python3 -c "print(open('${token}').read())"`,
+ "python3 -c \"import os;p=os.path.join(os.path.expanduser('~'),'Library','Application Support','canvastty','agent-control');print(os.listdir(p))\"",
+ "node -e \"console.log(require('fs').readFileSync(process.env.HOME + '/Library/Application Support/canvastty/plugin-secrets/x', 'utf8'))\"",
+ `python3 - <<'EOF'\nprint(open("${token}").read())\nEOF`,
+ // The control and runtime sockets.
+ `curl --unix-socket ${sock} http://localhost/`,
+ `curl -s --unix-socket=${sock} http://x/`,
+ `nc -U ${sock}`,
+ "echo '{\"v\":1}' | nc -U /tmp/ctty-orch-501-abcd1234/o.sock",
+ `socat - UNIX-CONNECT:${sock}`,
+ "ls $TMPDIR/ctty-control-*",
+ "cat $TMPDIR/ctty-*/c.sock",
+ "python3 -c \"import socket,os;s=socket.socket(socket.AF_UNIX);s.connect(os.environ['TMPDIR']+'/ctty-control-x/c.sock')\"",
+ `nc -U ${q(join(userData, "lifecycle", "runtime", "r-ab12.sock"))}`,
+ // A controlled-looking word that is not the CLI does not excuse the rest.
+ `cat ${q(token)} canvastty-control.mjs`
+];
+
+const ALLOW = [
+ "cat src/agent-control.ts",
+ "cat agent-control/token-1",
+ "grep -rn \"plugin-secrets\" src",
+ "git commit -m \"fix agent-control token file mode\"",
+ `cat ${q(join(userData, "settings.json"))}`,
+ `ls ${q(userData)}`,
+ "node \"$CANVASTTY_CONTROL_CLI\" list",
+ `node /Applications/CanvasTTY.app/Contents/Resources/agent-control/canvastty-control.mjs --connection ${q(join(control, "connection.json"))} list`,
+ "curl --unix-socket /var/run/docker.sock http://localhost/version",
+ "nc -U /tmp/other.sock",
+ "ls $TMPDIR",
+ "ls /tmp/ctty-notes",
+ "python3 -c \"print('canvastty')\"",
+ "cat ~/.config/other/token",
+ "node -e \"console.log(1)\"",
+ "curl https://example.com/agent-control/token-1",
+ "echo hi > out.txt"
+];
+
+test("CanvasTTY's own tokens, secret stores and sockets are refused for every reader and client", () => {
+ for (const command of DENY) assert.equal(rule(command), "app-private", command);
+});
+
+test("look-alikes in the project, the app's other files and other sockets stay allowed", () => {
+ for (const command of ALLOW) assert.equal(rule(command), null, command);
+});
+
+test("file tools that name private data are refused; the agent's own account home is its own", () => {
+ const check = (toolName, toolInput, extra = {}) => checkBaseProtection({ toolName, toolInput, root: project, home, privateData, ...extra });
+ assert.equal(check("Write", { file_path: join(control, "token-x"), content: "x" })?.rule, "app-private");
+ assert.equal(check("edit", { file_path: "~/Library/Application Support/canvastty/plugin-secrets/p.json" })?.rule, "app-private");
+ const accountHome = join(userData, "account-homes", "acct-1", ".claude");
+ assert.equal(check("Write", { file_path: join(accountHome, "plans", "p.md") }, { agentRoots: [accountHome] }), null);
+ assert.equal(check("Bash", { command: `cat ${q(join(accountHome, "projects", "p", "memory", "MEMORY.md"))}` }, { agentRoots: [accountHome] }), null);
+ assert.equal(check("Bash", { command: `cat ${q(token)}` }, { agentRoots: [accountHome] })?.rule, "app-private");
+});
+
+test("without the app's folder the socket folders are still known; the userData paths are not guessed", () => {
+ assert.equal(denyRule(analyzeAction(shell(`nc -U ${sock}`), project, { home })), "app-private");
+ assert.equal(denyRule(analyzeAction(shell(`cat ${q(token)}`), project, { home })), null);
+});
+
+test("the message tells the model calmly why and what to do instead, without paths or protocol details", () => {
+ const verdict = checkBaseProtection({ toolName: "Bash", toolInput: { command: `cat ${q(token)}` }, root: project, home, privateData });
+ assert.equal(verdict.rule, "app-private");
+ assert.match(verdict.message, /^CanvasTTY blocked this: it reads CanvasTTY's own access tokens/u);
+ assert.match(verdict.message, /Orchestrator role/u);
+ assert.match(verdict.message, /canvastty_agents tools \(spawn_agent, list_routes, wait_for_agent/u);
+ assert.doesNotMatch(verdict.message, /token-|\.sock|agent-control|Application Support|ctty-/u);
+});
+
+test("decision hooks pass the app's private data to base protection", async () => {
+ const hooks = new DecisionHooks({
+ baseProtection: () => true, services: () => [], call: async () => null, home, privateData,
+ session: () => ({ provider: "opencode", role: "agent", cwd: project, configDirs: [] })
+ });
+ const decision = await hooks.decide("s1", { toolName: "bash", toolInput: { command: `cat ${q(token)}` }, toolInputPreview: null, cwd: null, truncated: false }, new AbortController().signal);
+ assert.equal(decision.behavior, "deny");
+ assert.match(decision.message, /Orchestrator role/u);
+ const ordinary = await hooks.decide("s1", { toolName: "bash", toolInput: { command: "cat src/a.ts" }, toolInputPreview: null, cwd: null, truncated: false }, new AbortController().signal);
+ assert.equal(ordinary.behavior, "none");
+});
diff --git a/tests/pixel-pack-files.test.mjs b/tests/pixel-pack-files.test.mjs
new file mode 100644
index 00000000..e367658d
--- /dev/null
+++ b/tests/pixel-pack-files.test.mjs
@@ -0,0 +1,13 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { pixelPackSlotForFilename } from "../src/renderer/src/features/settings/pixelPackFiles.ts";
+
+test("bulk PNG import maps standard and legacy filenames to ten slots", () => {
+ assert.equal(pixelPackSlotForFilename("Sakura L1 Idle.PNG"), "minimal_idle");
+ assert.equal(pixelPackSlotForFilename("matrix_l2_working.png"), "detailed_working");
+ assert.equal(pixelPackSlotForFilename("forest_cabin_master_done.png"), "master_completed");
+ assert.equal(pixelPackSlotForFilename("cat-minimal-complete.png"), "minimal_completed");
+ assert.equal(pixelPackSlotForFilename("sakura_background.png"), "background");
+ assert.equal(pixelPackSlotForFilename("background.png"), "background");
+ assert.equal(pixelPackSlotForFilename("reference.png"), null);
+});
diff --git a/tests/pixel-skin-card-geometry.test.mjs b/tests/pixel-skin-card-geometry.test.mjs
new file mode 100644
index 00000000..948bf10d
--- /dev/null
+++ b/tests/pixel-skin-card-geometry.test.mjs
@@ -0,0 +1,20 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { expandedPixelSkinCardBounds, PIXEL_SKIN_CARD_SIZE } from "../src/renderer/src/features/skins/pixelSkinCardGeometry.ts";
+
+test("pixel frames normalize both smaller and larger cards to one 3:2 size", () => {
+ const cards = [
+ { id: "fixed", position: { x: 100, y: 100 }, size: { ...PIXEL_SKIN_CARD_SIZE } },
+ { id: "small", position: { x: 110, y: 110 }, size: { width: 700, height: 430 } },
+ { id: "large", position: { x: 150, y: 150 }, size: { width: 1440, height: 900 } }
+ ];
+ const changed = expandedPixelSkinCardBounds(cards);
+ assert.deepEqual(changed.map(({ id }) => id), ["small", "large"]);
+ assert.ok(changed.every(({ bounds }) => bounds.size.width === 1200 && bounds.size.height === 800));
+ assert.ok(changed[0].bounds.position.x >= 100 + 1200 + 40);
+ assert.ok(changed[1].bounds.position.x >= changed[0].bounds.position.x + 1200 + 40);
+ assert.deepEqual(expandedPixelSkinCardBounds([
+ cards[0],
+ ...changed.map(({ id, bounds }) => ({ id, ...bounds }))
+ ]), []);
+});
diff --git a/tests/pixel-skin-engine.test.mjs b/tests/pixel-skin-engine.test.mjs
new file mode 100644
index 00000000..448b74d8
--- /dev/null
+++ b/tests/pixel-skin-engine.test.mjs
@@ -0,0 +1,314 @@
+import assert from "node:assert/strict";
+import { readFile, readdir } from "node:fs/promises";
+import test from "node:test";
+import { layoutNineSliceFrame, layoutTiledFrame, pixelSkinArtworkBounds, pixelSkinControlLayout, pixelSkinSurfaceBounds, skinDetailLevel } from "../src/renderer/src/features/skins/SkinLayout.ts";
+import { createSakuraSkin } from "../src/renderer/src/features/skins/skinSchema.ts";
+import { SkinScheduler } from "../src/renderer/src/features/skins/SkinScheduler.ts";
+import {
+ pixelSkinAssetFilename,
+ pixelSkinStateForSession,
+ resolvePixelSkinAsset
+} from "../src/renderer/src/features/skins/skinCatalog.ts";
+import { needsGoldMinimalWorkingMarker, resolvePixelSkinViewAsset } from "../src/renderer/src/features/skins/skinViewAssets.ts";
+import { expandedPixelSkinCardBounds, PIXEL_SKIN_MIN_CARD_SIZE } from "../src/renderer/src/features/skins/pixelSkinCardGeometry.ts";
+
+const skin = createSakuraSkin("/sakura-frame.png");
+
+test("tiled frame repeats edges and crops final tile without stretching corners", () => {
+ const operations = layoutTiledFrame(skin.frame, 421, 277);
+ assert.equal(operations.length > 10, true);
+ const corners = operations.slice(-4);
+ assert.deepEqual(corners.map(({ destination }) => [destination.x, destination.y]), [
+ [0, 0], [353, 0], [0, 219], [353, 219]
+ ]);
+ assert.ok(corners.every(({ destination }) => destination.width === 68 && destination.height === 58));
+ const top = operations.filter(({ destination }) => destination.y === 12);
+ assert.equal(top.reduce((sum, { destination }) => sum + destination.width, 0), 421 - 2 * 68);
+ assert.ok(top.at(-1).destination.width < skin.frame.tileLength);
+ assert.ok(top.at(-1).source.width < skin.frame.edges[0].width);
+ assert.deepEqual(layoutTiledFrame(skin.frame, 0, 300), []);
+});
+
+test("detail selection follows the setting and only F4 temporarily selects master", () => {
+ for (const preferred of ["minimal", "detailed"]) {
+ assert.equal(skinDetailLevel(preferred, false), preferred);
+ assert.equal(skinDetailLevel(preferred, true), "master");
+ assert.equal(skinDetailLevel(preferred, false), preferred);
+ }
+ assert.equal(skinDetailLevel("minimal", true), "master");
+ assert.equal(skinDetailLevel("detailed", false), "detailed");
+});
+
+test("pixel controls fit the artwork plaques at every detail level", () => {
+ const plaques = {
+ sakura: { minimal: [72.5, 7.3, 16, 3.5], detailed: [70.5, 9.1, 16, 4.6], master: [69.4, 9.1, 17.9, 5.3] },
+ matrix: { minimal: [75, 7.9, 17, 4], detailed: [75, 7.9, 17, 4], master: [75.5, 6.1, 16.5, 4.6] },
+ "forest-cabin": { minimal: [77.4, 9.5, 16, 3.8], detailed: [76.5, 9.3, 15.5, 5.2], master: [76, 14.5, 16.5, 6.1] },
+ "gold-black": { minimal: [79, 10, 14, 3.4], detailed: [79, 9.9, 14.2, 3.8], master: [75, 9.2, 13, 3.8] },
+ cat: { minimal: [74, 10, 19, 3.9], detailed: [70, 9.3, 23.5, 4.7], master: [69.2, 9.4, 24.9, 5] },
+ "gothic-eclipse": { minimal: [77.8, 7.5, 14.5, 6], detailed: [77.8, 7.5, 14.5, 6], master: [77.8, 7.5, 14.5, 6] }
+ };
+ for (const [theme, levels] of Object.entries(plaques)) {
+ for (const [detail, [x, y, width, height]] of Object.entries(levels)) {
+ for (const [cardWidth, cardHeight] of [[800, 500], [320, 240]]) {
+ const controls = pixelSkinControlLayout(theme, detail, cardWidth, cardHeight);
+ const art = pixelSkinArtworkBounds(theme, detail);
+ assert.equal(controls.left, cardWidth * (x / 100 - art.x) / art.width);
+ assert.equal(controls.top, cardHeight * (y / 100 - art.y) / art.height);
+ assert.equal(controls.width, cardWidth * width / 100 / art.width);
+ assert.equal(controls.height, cardHeight * height / 100 / art.height);
+ assert.ok(controls.buttonSize > 0 && controls.buttonSize <= 22);
+ assert.ok(controls.buttonSize + 4 <= controls.height);
+ assert.ok(controls.buttonSize * 2 + 14 <= controls.width);
+ assert.ok(controls.fontSize * 1.23 <= controls.buttonSize);
+ }
+ }
+ }
+ const custom = pixelSkinControlLayout("pixel:custom", "minimal", 320, 240);
+ assert.ok(custom.buttonSize * 2 + 14 <= custom.width);
+ assert.deepEqual(pixelSkinArtworkBounds("pixel:custom", "master"), { x: 0, y: 0, width: 1, height: 1 });
+});
+
+test("nine-slice keeps corner proportions and fills each resized rail", () => {
+ const operations = layoutNineSliceFrame(1536, 1024, 600, 320, 220, 220);
+ assert.equal(operations.length, 8);
+ const [top, bottom, left, right, ...corners] = operations;
+ assert.deepEqual([top.destination.x, top.destination.y], [68.75, 0]);
+ assert.deepEqual([top.destination.width, top.destination.height], [462.5, 68.75]);
+ assert.deepEqual([bottom.destination.y, bottom.destination.height], [251.25, 68.75]);
+ assert.deepEqual([left.destination.x, left.destination.width], [0, 68.75]);
+ assert.deepEqual([right.destination.x, right.destination.width], [531.25, 68.75]);
+ assert.ok(corners.every(({ source, destination }) =>
+ Math.abs(source.width / source.height - destination.width / destination.height) < 0.0001));
+ assert.deepEqual(layoutNineSliceFrame(1536, 1024, 0, 320), []);
+});
+
+test("every built-in terminal opening remains inside its cropped artwork", () => {
+ for (const theme of ["sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse"]) {
+ for (const detail of ["minimal", "detailed", "master"]) {
+ const opening = pixelSkinSurfaceBounds(theme, detail, 1200, 800);
+ assert.ok(opening.left > 0 && opening.left < opening.right && opening.right < 1200, `${theme}/${detail} horizontal`);
+ assert.ok(opening.top > 0 && opening.top < opening.bottom && opening.bottom < 800, `${theme}/${detail} vertical`);
+ }
+ }
+ for (const detail of ["minimal", "detailed", "master"]) {
+ const opening = pixelSkinSurfaceBounds("cat", detail, 1200, 800);
+ assert.ok(opening.right - opening.left >= 900, `cat/${detail} fills the illustrated opening`);
+ }
+ for (const detail of ["minimal", "detailed"]) {
+ const opening = pixelSkinSurfaceBounds("sakura", detail, 1200, 800);
+ assert.ok(opening.bottom <= 730, `sakura/${detail} clears the bottom rail`);
+ }
+ for (const detail of ["minimal", "detailed", "master"]) {
+ const opening = pixelSkinSurfaceBounds("gothic-eclipse", detail, 1536, 1024);
+ assert.ok(opening.right - opening.left >= 1000, `gothic-eclipse/${detail} fills the illustrated opening`);
+ assert.ok(opening.bottom >= 900 && opening.bottom < 920, `gothic-eclipse/${detail} clears the bottom rail`);
+ }
+ assert.ok(pixelSkinSurfaceBounds("sakura", "detailed", 1200, 800).bottom <= 645,
+ "sakura/detailed terminal output clears the bottom blossoms");
+});
+
+test("master terminal openings keep output within the themed frame", async () => {
+ for (const [width, height] of [[600, 400], [900, 600]]) {
+ const sakura = pixelSkinSurfaceBounds("sakura", "master", width, height);
+ const matrix = pixelSkinSurfaceBounds("matrix", "master", width, height);
+ const forest = pixelSkinSurfaceBounds("forest-cabin", "master", width, height);
+ const gold = pixelSkinSurfaceBounds("gold-black", "master", width, height);
+ const cat = pixelSkinSurfaceBounds("cat", "master", width, height);
+ const gothic = pixelSkinSurfaceBounds("gothic-eclipse", "master", width, height);
+ for (const opening of [sakura, matrix, forest, gold, cat, gothic]) {
+ assert.ok(opening.left > 0 && opening.right < width);
+ assert.ok(opening.top > 0 && opening.bottom < height);
+ assert.ok(opening.right - opening.left >= width * 0.45);
+ assert.ok(opening.bottom - opening.top >= height * 0.4);
+ }
+ const forestArt = pixelSkinArtworkBounds("forest-cabin", "master");
+ const goldArt = pixelSkinArtworkBounds("gold-black", "master");
+ const forestCat = {
+ x: width * (200 / 1536 - forestArt.x) / forestArt.width,
+ y: height * (800 / 1024 - forestArt.y) / forestArt.height
+ };
+ const forestFireplaceX = width * (1350 / 1536 - forestArt.x) / forestArt.width;
+ const goldTopOrnamentY = height * (150 / 1024 - goldArt.y) / goldArt.height;
+
+ assert.ok(forestCat.x < forest.left && forestCat.y >= forest.bottom);
+ assert.ok(forestFireplaceX >= forest.right);
+ assert.ok(gold.top >= goldTopOrnamentY);
+ assert.ok(gold.right - gold.left >= width * 0.75 && gold.bottom - gold.top >= height * 0.6,
+ "gold-black/master should use the opening up to the dragon rail");
+ assert.ok(forest.right - forest.left >= width * 0.68 && forest.bottom - forest.top >= height * 0.4);
+ }
+
+ const css = await readFile(new URL("../src/renderer/src/styles/pixelTerminalSkins.css", import.meta.url), "utf8");
+ const card = await readFile(new URL("../src/renderer/src/features/terminal/TerminalCard.tsx", import.meta.url), "utf8");
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__surface\s*\{[^}]*z-index:\s*2;/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__surface \.xterm-viewport\s*\{[^}]*scrollbar-width:\s*none;/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\]\s*\{[^}]*background:\s*transparent;/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__header\s*\{[^}]*top:\s*var\(--pixel-skin-top-inset\);/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__surface\s*\{[^}]*inset:\s*calc\(var\(--pixel-skin-top-inset\) \+ var\(--card-header-height\)\)/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__search\s*\{[^}]*top:\s*calc\(var\(--pixel-skin-top-inset\) \+ var\(--card-header-height\) \+ 6px\);/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-skin-canvas\s*\{[^}]*z-index:\s*1;/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__header\s*\{[^}]*z-index:\s*4;/s);
+ assert.match(css, /--pixel-skin-top-inset/);
+ assert.match(css, /--pixel-skin-bottom-inset/);
+ assert.match(css, /\.terminal-card__skin-drag--top\s*\{[^}]*height:\s*var\(--pixel-skin-top-inset\);/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\]\s*\{[^}]*outline:\s*none;/s);
+ assert.match(css, /\.terminal-card\[data-pixel-skin="true"\] \.terminal-card__summary\s*\{[^}]*inset:\s*var\(--pixel-skin-top-inset\)/s);
+ assert.match(card, /skinDetailLevel\(skinDetail, forceMasterDetail \|\| session\.role === "orchestrator"\)/);
+ assert.match(card, /pixelSkinSurfaceBounds\(pixelSkinTheme, pixelDetail, size\.width, size\.height, 26,\s*pixelPack\?\.apertures\[pixelDetail\] \?\? pixelPack\?\.aperture\)/);
+ assert.doesNotMatch(card, /pixelDetailRef|skinDetailLevel\([^)]*zoom|pixelDetail === "overview"/);
+ assert.match(card, /const summaryMode = zoom < 0\.5;/);
+ assert.match(card, /\{RESIZE_DIRECTIONS\.map/);
+ assert.match(card, /detail=\{pixelDetail\}/);
+ assert.match(card, /terminal-card__skin-drag--\$\{edge\}/);
+ assert.match(card, /\{!pixelControls && terminalActions\}[\s\S]* {
+ const cards = [
+ { id: "left", position: { x: 100, y: 100 }, size: { width: 700, height: 430 } },
+ { id: "right", position: { x: 920, y: 100 }, size: { width: 700, height: 430 } }
+ ];
+ const expanded = expandedPixelSkinCardBounds(cards);
+ assert.deepEqual(expanded.map(({ id }) => id), ["left", "right"]);
+ assert.deepEqual(expanded[0].bounds.size, PIXEL_SKIN_MIN_CARD_SIZE);
+ assert.ok(expanded[1].bounds.position.x >= expanded[0].bounds.position.x + PIXEL_SKIN_MIN_CARD_SIZE.width + 40);
+ assert.deepEqual(expandedPixelSkinCardBounds(expanded.map(({ id, bounds }) => ({ id, ...bounds }))), []);
+ const catArt = pixelSkinArtworkBounds("cat", "master");
+ assert.equal(pixelSkinSurfaceBounds("cat", "master", 1200, 800).top,
+ 800 * (0.185 - catArt.y) / catArt.height);
+ assert.equal(pixelSkinSurfaceBounds("cat", "master", 1200, 800).left,
+ 1200 * (0.145 - catArt.x) / catArt.width);
+});
+
+test("asset lookup is exact by theme and status with only same-state LOD fallback", () => {
+ assert.equal(pixelSkinAssetFilename("sakura", "minimal", "working"), "sakura_l1_working.png");
+ assert.equal(pixelSkinAssetFilename("forest-cabin", "master", "idle"), "forest_cabin_master_idle.png");
+ const assets = {
+ "sakura_l2_working.png": "/assets/sakura-l2-work.png",
+ "sakura_l1_idle.png": "/assets/sakura-l1-idle.png",
+ "matrix_l1_completed.png": "/assets/matrix-completed-candidate.png"
+ };
+ assert.deepEqual(resolvePixelSkinAsset("sakura", "master", "working", assets), {
+ kind: "asset", filename: "sakura_l2_working.png", resolvedDetail: "detailed", url: "/assets/sakura-l2-work.png"
+ });
+ assert.deepEqual(resolvePixelSkinAsset("sakura", "minimal", "working", assets), {
+ kind: "missing", filename: "sakura_l1_working.png"
+ });
+ assert.deepEqual(resolvePixelSkinAsset("matrix", "minimal", "idle", assets), {
+ kind: "missing", filename: "matrix_l1_idle.png"
+ });
+});
+
+test("Gold minimal working reuses only its idle frame and adds a status marker", () => {
+ const assets = {
+ "gold_black_l1_idle.png": "/assets/gold-idle.png",
+ "gold_black_detailed_working.png": "/assets/gold-detailed-working.png",
+ "sakura_l1_idle.png": "/assets/sakura-idle.png"
+ };
+
+ assert.deepEqual(resolvePixelSkinAsset("gold-black", "minimal", "working", assets), {
+ kind: "missing", filename: "gold_black_l1_working.png"
+ });
+ assert.deepEqual(resolvePixelSkinViewAsset("gold-black", "minimal", "working", assets), {
+ kind: "asset", filename: "gold_black_l1_idle.png", resolvedDetail: "minimal", url: "/assets/gold-idle.png"
+ });
+ assert.deepEqual(resolvePixelSkinViewAsset("gold-black", "detailed", "working", assets), {
+ kind: "asset", filename: "gold_black_detailed_working.png", resolvedDetail: "detailed", url: "/assets/gold-detailed-working.png"
+ });
+ assert.deepEqual(resolvePixelSkinViewAsset("sakura", "minimal", "working", assets), {
+ kind: "missing", filename: "sakura_l1_working.png"
+ });
+ assert.equal(needsGoldMinimalWorkingMarker("gold-black", "minimal", "working", assets), true);
+ assert.equal(needsGoldMinimalWorkingMarker("gold-black", "minimal", "working", {}), false);
+ assert.equal(needsGoldMinimalWorkingMarker("gold-black", "minimal", "idle", assets), false);
+ assert.equal(needsGoldMinimalWorkingMarker("gold-black", "master", "working", assets), false);
+ assert.equal(needsGoldMinimalWorkingMarker("gold-black", "minimal", "working", {
+ "gold_black_l1_working.png": "/assets/gold-working.png",
+ "gold_black_l1_idle.png": "/assets/gold-idle.png"
+ }), false);
+});
+
+test("working art clears on idle, while explicit completion selects completed art", () => {
+ assert.equal(pixelSkinStateForSession("working"), "working");
+ for (const status of ["idle", "needs_approval", "unavailable"]) {
+ assert.equal(pixelSkinStateForSession(status), "idle");
+ }
+ assert.equal(pixelSkinStateForSession("done"), "completed");
+ assert.equal(pixelSkinStateForSession("failed"), "completed");
+ assert.equal(pixelSkinStateForSession("idle", true), "completed");
+ assert.equal(pixelSkinStateForSession("working", true), "working");
+});
+
+test("pilot runtime contains all three states for all bundled themes", async () => {
+ const directory = new URL("../src/renderer/src/features/skins/assets/pilots/", import.meta.url);
+ const files = new Set(await readdir(directory));
+ const themeLevels = {
+ sakura: ["l1", "l2", "master"],
+ matrix: ["l1", "l2", "master"],
+ forest_cabin: ["minimal", "detailed", "master"],
+ gold_black: ["l1", "detailed", "master"],
+ cat: ["minimal", "detailed", "master"],
+ gothic_eclipse: ["minimal", "detailed", "master"]
+ };
+ for (const [theme, levels] of Object.entries(themeLevels)) {
+ for (const level of levels) {
+ for (const state of ["idle", "working", "completed"]) {
+ if (theme === "gold_black" && level === "l1" && state === "working") continue;
+ assert.ok(files.has(`${theme}_${level}_${state}.png`), `${theme} ${level} ${state} asset`);
+ }
+ }
+ }
+});
+
+test("one scheduler keeps registrations and stops static work when hidden or disposed", () => {
+ const listeners = new Map();
+ const documentTarget = {
+ hidden: false,
+ addEventListener(name, callback) { listeners.set(name, callback); },
+ removeEventListener(name) { listeners.delete(name); }
+ };
+ const scheduler = new SkinScheduler(documentTarget);
+ let firstDraws = 0;
+ let secondDraws = 0;
+ const first = scheduler.register(() => { firstDraws += 1; });
+ const second = scheduler.register(() => { secondDraws += 1; });
+ first.update(true, 0);
+ second.update(true, 0);
+ assert.deepEqual([firstDraws, secondDraws, scheduler.size], [1, 1, 2]);
+ first.invalidate();
+ assert.deepEqual([firstDraws, secondDraws], [2, 1]);
+ second.update(false, 12);
+ second.invalidate();
+ assert.equal(secondDraws, 1);
+ documentTarget.hidden = true;
+ listeners.get("visibilitychange")();
+ first.invalidate();
+ assert.equal(firstDraws, 2);
+ documentTarget.hidden = false;
+ listeners.get("visibilitychange")();
+ assert.deepEqual([firstDraws, secondDraws], [3, 1]);
+ first.dispose();
+ second.dispose();
+ assert.equal(scheduler.size, 0);
+ scheduler.dispose();
+ assert.equal(listeners.size, 0);
+});
+
+test("Sakura atlas is a bounded raster asset", async () => {
+ const image = await readFile(new URL("../src/renderer/src/features/skins/assets/sakura-frame.png", import.meta.url));
+ assert.equal(image.subarray(0, 8).toString("hex"), "89504e470d0a1a0a");
+ assert.equal(image.readUInt32BE(16), 1536);
+ assert.equal(image.readUInt32BE(20), 1024);
+ assert.ok(image.byteLength < 2_000_000);
+});
diff --git a/tests/pixel-skin-pack-registry.test.mjs b/tests/pixel-skin-pack-registry.test.mjs
new file mode 100644
index 00000000..21b44f8b
--- /dev/null
+++ b/tests/pixel-skin-pack-registry.test.mjs
@@ -0,0 +1,164 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import {
+ isPixelSkinSlot,
+ isPixelTerminalBorderSkinId,
+ PIXEL_SKIN_SLOTS,
+ PixelSkinPackRegistry
+} from "../src/main/services/PixelSkinPackRegistry.ts";
+import { SettingsStore } from "../src/main/services/SettingsStore.ts";
+import { DEFAULT_PIXEL_SKIN_APERTURES } from "../src/shared/contracts.ts";
+
+const imagePath = new URL("../src/renderer/src/features/skins/assets/pilots/sakura_l1_idle.png", import.meta.url);
+
+function zipFixture(entries) {
+ const local = [];
+ const central = [];
+ let offset = 0;
+ for (const [path, data] of entries) {
+ const name = Buffer.from(path);
+ let crc = 0xffffffff;
+ for (const byte of data) {
+ crc ^= byte;
+ for (let bit = 0; bit < 8; bit++) crc = (crc >>> 1) ^ ((crc & 1) ? 0xedb88320 : 0);
+ }
+ crc = (crc ^ 0xffffffff) >>> 0;
+ const header = Buffer.alloc(30 + name.length);
+ header.writeUInt32LE(0x04034b50, 0);
+ header.writeUInt16LE(20, 4);
+ header.writeUInt32LE(crc, 14);
+ header.writeUInt32LE(data.length, 18);
+ header.writeUInt32LE(data.length, 22);
+ header.writeUInt16LE(name.length, 26);
+ name.copy(header, 30);
+ local.push(header, data);
+ const record = Buffer.alloc(46 + name.length);
+ record.writeUInt32LE(0x02014b50, 0);
+ record.writeUInt16LE(20, 4);
+ record.writeUInt16LE(20, 6);
+ record.writeUInt32LE(crc, 16);
+ record.writeUInt32LE(data.length, 20);
+ record.writeUInt32LE(data.length, 24);
+ record.writeUInt16LE(name.length, 28);
+ record.writeUInt32LE(offset, 42);
+ name.copy(record, 46);
+ central.push(record);
+ offset += header.length + data.length;
+ }
+ const directory = Buffer.concat(central);
+ const ending = Buffer.alloc(22);
+ ending.writeUInt32LE(0x06054b50, 0);
+ ending.writeUInt16LE(entries.length, 8);
+ ending.writeUInt16LE(entries.length, 10);
+ ending.writeUInt32LE(directory.length, 12);
+ ending.writeUInt32LE(offset, 16);
+ return Buffer.concat([...local, directory, ending]);
+}
+
+async function fixture(t) {
+ const root = await mkdtemp(join(tmpdir(), "canvastty-pixel-skins-"));
+ t.after(() => rm(root, { recursive: true, force: true }));
+ const registry = new PixelSkinPackRegistry(root);
+ await registry.initialize();
+ return { root, registry };
+}
+
+test("a ten-PNG pixel pack installs, persists and is readable by slot", async (t) => {
+ const { root, registry } = await fixture(t);
+ const png = await readFile(imagePath);
+ const files = Object.fromEntries(PIXEL_SKIN_SLOTS.map((slot) => [slot, png]));
+ let changes = 0;
+ registry.onChanged(() => { changes += 1; });
+ const installed = await registry.install({ name: "My Sakura", files });
+ assert.ok(isPixelTerminalBorderSkinId(installed.id));
+ assert.deepEqual(registry.list(), [installed]);
+ assert.deepEqual(await registry.readAsset(installed.id, "master_completed"), png);
+ assert.equal(changes, 1);
+
+ const reopened = new PixelSkinPackRegistry(root);
+ await reopened.initialize();
+ assert.deepEqual(reopened.list(), [installed]);
+ assert.deepEqual(await reopened.readAsset(installed.id, "background"), png);
+});
+
+test("each detail level keeps its own terminal opening and legacy packs still load", async (t) => {
+ const { root, registry } = await fixture(t);
+ const png = await readFile(imagePath);
+ const files = Object.fromEntries(PIXEL_SKIN_SLOTS.map((slot) => [slot, png]));
+ const apertures = {
+ minimal: { left: 5, right: 5, top: 10, bottom: 8 },
+ detailed: { left: 9, right: 9, top: 14, bottom: 12 },
+ master: { left: 18, right: 18, top: 22, bottom: 20 }
+ };
+ const installed = await registry.install({ name: "Three openings", files, apertures });
+ assert.deepEqual(installed.apertures, apertures);
+
+ const reopened = new PixelSkinPackRegistry(root);
+ await reopened.initialize();
+ assert.deepEqual(reopened.list()[0].apertures, apertures);
+
+ const manifestPath = join(root, "pixel-skins", installed.id.slice("pixel:".length), "manifest.json");
+ const manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+ delete manifest.apertures;
+ await writeFile(manifestPath, JSON.stringify(manifest));
+ const legacy = new PixelSkinPackRegistry(root);
+ await legacy.initialize();
+ assert.deepEqual(legacy.list()[0].apertures, {
+ minimal: installed.aperture,
+ detailed: installed.aperture,
+ master: installed.aperture
+ });
+});
+
+test("pack import rejects missing slots and corrupt PNG data before writing", async (t) => {
+ const { registry } = await fixture(t);
+ const png = await readFile(imagePath);
+ const files = Object.fromEntries(PIXEL_SKIN_SLOTS.map((slot) => [slot, png]));
+ delete files.master_completed;
+ await assert.rejects(registry.install({ name: "Incomplete", files }), /exactly nine/);
+ files.master_completed = new Uint8Array([1, 2, 3]);
+ await assert.rejects(registry.install({ name: "Corrupt", files }), /PNG/);
+ const damaged = Buffer.from(png);
+ damaged[damaged.length - 20] ^= 1;
+ files.master_completed = damaged;
+ await assert.rejects(registry.install({ name: "Checksum mismatch", files }), /checksum/);
+ assert.deepEqual(registry.list(), []);
+ assert.equal(isPixelSkinSlot("../../manifest.json"), false);
+ assert.equal(isPixelTerminalBorderSkinId("pixel:../../foo"), false);
+});
+
+test("one ZIP installs all ten named images and rejects missing or duplicate roles", async (t) => {
+ const { registry } = await fixture(t);
+ const png = await readFile(imagePath);
+ const entries = PIXEL_SKIN_SLOTS.map((slot) => [`My Theme/${slot}.png`, png]);
+ const installed = await registry.installZip(zipFixture(entries), "ZIP Sakura");
+ assert.equal(installed.name, "ZIP Sakura");
+ assert.deepEqual(installed.apertures, DEFAULT_PIXEL_SKIN_APERTURES);
+ assert.deepEqual(await registry.readAsset(installed.id, "master_completed"), png);
+ await assert.rejects(registry.installZip(zipFixture(entries.slice(0, -1)), "Missing"), /needs minimal/);
+ await assert.rejects(registry.installZip(zipFixture([...entries, entries[0]]), "Duplicate"), /duplicate/);
+ assert.equal(registry.list().length, 1);
+});
+
+test("the shipped Cat theme can be imported as a real ten-image pack", async (t) => {
+ const { root, registry } = await fixture(t);
+ const files = Object.fromEntries(await Promise.all(PIXEL_SKIN_SLOTS.map(async (slot) => {
+ const path = slot === "background"
+ ? new URL("../src/renderer/src/assets/theme-backgrounds/cat.png", import.meta.url)
+ : new URL(`../src/renderer/src/features/skins/assets/pilots/cat_${slot}.png`, import.meta.url);
+ return [slot, await readFile(path)];
+ })));
+ const pack = await registry.install({ name: "Cat", files });
+ assert.equal(registry.list()[0].id, pack.id);
+ assert.notDeepEqual(await registry.readAsset(pack.id, "master_idle"), await registry.readAsset(pack.id, "master_working"));
+ assert.notDeepEqual(await registry.readAsset(pack.id, "master_working"), await registry.readAsset(pack.id, "master_completed"));
+ assert.deepEqual(await registry.readAsset(pack.id, "background"), files.background);
+ const settings = new SettingsStore(root, "en");
+ await settings.update({ terminalBorderSkin: pack.id, terminalSkinDetail: "minimal" });
+ const restored = await new SettingsStore(root, "en").load();
+ assert.equal(restored.terminalBorderSkin, pack.id);
+ assert.equal(restored.terminalSkinDetail, "minimal");
+});
diff --git a/tests/pixel-theme-agent-prompt.test.mjs b/tests/pixel-theme-agent-prompt.test.mjs
new file mode 100644
index 00000000..1ee46642
--- /dev/null
+++ b/tests/pixel-theme-agent-prompt.test.mjs
@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { PIXEL_THEME_AGENT_GUIDE_URL, pixelThemeAgentPrompt } from "../src/renderer/src/features/settings/pixelThemeAgentPrompt.ts";
+
+test("agent brief starts from the repository and specifies the install artifact", async () => {
+ assert.equal(PIXEL_THEME_AGENT_GUIDE_URL, "https://github.com/teo-nex/CanvasTTY-design-for-agents/blob/main/AGENT_START.md");
+ const guide = await readFile(new URL("../docs/pixel-skin-agent-start.md", import.meta.url), "utf8");
+ assert.match(guide, /validate-pixel-skin-zip\.mjs/);
+ assert.match(guide, /exactly ten final PNG/);
+ for (const locale of ["ru", "en"]) {
+ const prompt = pixelThemeAgentPrompt(locale);
+ assert.match(prompt, /github\.com\/teo-nex\/CanvasTTY-design-for-agents/);
+ assert.match(prompt, /github\.com\/howdeploy\/CanvasTTY/);
+ assert.ok(prompt.includes(PIXEL_THEME_AGENT_GUIDE_URL));
+ for (const value of ["minimal", "detailed", "master", "idle", "working", "completed"]) {
+ assert.ok(prompt.includes(value));
+ }
+ assert.match(prompt, /background\.png/);
+ }
+});
+
+test("theme creation dialog exposes copy and GitHub guide actions", async () => {
+ const dialog = await readFile(new URL("../src/renderer/src/features/settings/PixelSkinPackCreator.tsx", import.meta.url), "utf8");
+ assert.match(dialog, /window\.canvasTTY\.clipboard\.writeText\(pixelThemeAgentPrompt\(locale\)\)/);
+ assert.match(dialog, /window\.canvasTTY\.external\.openUrl\(PIXEL_THEME_AGENT_GUIDE_URL\)/);
+});
diff --git a/tests/provider-secrets-service.test.mjs b/tests/provider-secrets-service.test.mjs
index aa4d36e7..c3194efb 100644
--- a/tests/provider-secrets-service.test.mjs
+++ b/tests/provider-secrets-service.test.mjs
@@ -81,9 +81,17 @@ test("unknown secret ids and invalid values are rejected", async (t) => {
});
test("storage fails closed when OS encryption is unavailable", async (t) => {
- const { service } = await fixture(t, { available: false });
+ const { root, service } = await fixture(t, { available: false });
+ assert.equal(Object.values(await service.status()).every((value) => value === false), true);
+ assert.equal(await service.get("OPENAI_API_KEY"), null);
await assert.rejects(() => service.set("OPENAI_API_KEY", "value"), /unavailable/u);
+ await assert.rejects(() => service.delete("OPENAI_API_KEY"), /unavailable/u);
+ await assert.rejects(() => readFile(join(root, "provider-secrets.bin")), /ENOENT/u);
+
+ const encrypted = new ProviderSecretsService(root, fakeEncryption());
+ await encrypted.set("OPENAI_API_KEY", "value");
await assert.rejects(() => service.status(), /unavailable/u);
+ await assert.rejects(() => service.get("OPENAI_API_KEY"), /unavailable/u);
});
test("corrupted encrypted payloads fail closed instead of leaking partial data", async (t) => {
diff --git a/tests/provider-secrets-settings.test.mjs b/tests/provider-secrets-settings.test.mjs
new file mode 100644
index 00000000..91f71b34
--- /dev/null
+++ b/tests/provider-secrets-settings.test.mjs
@@ -0,0 +1,122 @@
+import assert from "node:assert/strict";
+import { readFile, readdir } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+
+// The provider key fields in Settings, driven the way React drives them. React runs a functional state
+// updater later than the change handler whenever an earlier update of that component is still pending
+// (the second keystroke, or a paste over text already in the field). By then the synthetic event has
+// finished dispatching and `event.currentTarget` is null. An updater that reads the event then throws
+// during render, and React unmounts the whole application: the window turns black.
+//
+// This harness bundles the real component against a minimal React stand-in whose state updaters always
+// run after dispatch, which is the ordering that broke the MiniMax key field in the packaged app.
+const FAKE_REACT = `
+let state = [];
+let cursor = 0;
+const queue = [];
+export function useState(initial) {
+ const index = cursor++;
+ if (!(index in state)) state[index] = typeof initial === "function" ? initial() : initial;
+ return [state[index], (update) => { queue.push([index, update]); }];
+}
+export function useEffect() {}
+export function jsx(type, props) { return { type, props }; }
+export const jsxs = jsx;
+export const Fragment = "fragment";
+export function __render(component, props) { cursor = 0; return component(props); }
+export function __flush() {
+ for (const [index, update] of queue.splice(0)) state[index] = typeof update === "function" ? update(state[index]) : update;
+}
+export function __reset() { state = []; cursor = 0; queue.length = 0; }
+export default { useState, useEffect };
+`;
+
+const root = fileURLToPath(new URL("..", import.meta.url));
+const { outputFiles } = await build({
+ stdin: {
+ contents: 'export { ProviderSecretsSettings } from "./src/renderer/src/features/settings/ProviderSecretsSettings.tsx"; export { __render, __flush, __reset } from "react";',
+ resolveDir: root,
+ loader: "ts"
+ },
+ jsx: "automatic",
+ bundle: true,
+ platform: "node",
+ format: "esm",
+ write: false,
+ plugins: [{
+ name: "fake-react",
+ setup(builder) {
+ builder.onResolve({ filter: /^react(\/jsx-runtime)?$/ }, () => ({ path: "react", namespace: "fake-react" }));
+ builder.onLoad({ filter: /.*/, namespace: "fake-react" }, () => ({ contents: FAKE_REACT, loader: "js" }));
+ }
+ }]
+});
+const { ProviderSecretsSettings, __render, __flush, __reset } = await import(
+ `data:text/javascript;base64,${Buffer.from(outputFiles[0].contents).toString("base64")}`
+);
+
+function findAll(node, predicate, found = []) {
+ if (Array.isArray(node)) { for (const child of node) findAll(child, predicate, found); return found; }
+ if (!node || typeof node !== "object") return found;
+ if (predicate(node)) found.push(node);
+ findAll(node.props?.children, predicate, found);
+ return found;
+}
+const keyField = (tree) => findAll(tree, (node) => node.type === "input" && /MINIMAX_API_KEY/u.test(node.props["aria-label"] ?? ""))[0];
+
+/** One React change event: currentTarget is the field while the handler runs, null once dispatch ends. */
+function change(field, value) {
+ const element = { value };
+ const event = { currentTarget: element, target: element };
+ field.props.onChange(event);
+ event.currentTarget = null;
+}
+
+// MiniMax keys are `sk-cp-` / `sk-api-` + a long [A-Za-z0-9_-] body. These are FAKE keys of that shape.
+function fakeKey(length, prefix = "sk-cp-") {
+ const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-";
+ let seed = length;
+ let out = prefix;
+ while (out.length < length) { seed = (seed * 1103515245 + 12345) >>> 0; out += alphabet[(seed >>> 8) % alphabet.length]; }
+ return out;
+}
+
+test("pasting over a provider key draft keeps the settings rendered, for keys of any length", () => {
+ const keys = [
+ fakeKey(120), fakeKey(200, "sk-api-"), fakeKey(250), fakeKey(500), fakeKey(2_000), fakeKey(10_000),
+ `${fakeKey(180)}\n`, `${fakeKey(180)} `
+ ];
+ __reset();
+ const props = { locale: "en" };
+ let tree = __render(ProviderSecretsSettings, props);
+ const started = performance.now();
+ for (const key of keys) {
+ // A first character in the field, then the paste replacing it: two updates before one render.
+ change(keyField(tree), key.slice(0, 1));
+ change(keyField(tree), key);
+ assert.doesNotThrow(__flush, `a ${key.length}-character key must not break the render`);
+ tree = __render(ProviderSecretsSettings, props);
+ assert.equal(keyField(tree).props.value, key);
+ const saveButton = findAll(tree, (node) => node.type === "button" && node.props.children === "Save")
+ .find((button) => button.props.disabled === false);
+ assert.ok(saveButton, "a pasted key enables its Save button");
+ }
+ assert.ok(performance.now() - started < 1_000, "typing and rendering long keys stays fast");
+});
+
+test("renderer state updaters never read a React event after its dispatch", async () => {
+ // Static guard for the same bug class anywhere in the renderer, one line at a time:
+ // `setX((prev) => ... event.currentTarget ...)`. Read the value first, then hand it to the updater.
+ const directory = join(root, "src", "renderer", "src");
+ const files = (await readdir(directory, { recursive: true })).filter((file) => /\.tsx?$/u.test(file));
+ const offenders = [];
+ for (const file of files) {
+ const source = await readFile(join(directory, file), "utf8");
+ const pattern = /\bset[A-Z]\w*\(\s*\(?\s*(\w+)?\s*\)?\s*=>[^;\n]*?\b(event|e|ev)\.(currentTarget|target)\b/gu;
+ for (const match of source.matchAll(pattern)) offenders.push(`${file}: ${match[0].slice(0, 120)}`);
+ }
+ assert.deepEqual(offenders, []);
+});
diff --git a/tests/semantic-summary-layout.test.mjs b/tests/semantic-summary-layout.test.mjs
index 8f76d3a9..b73f3f4e 100644
--- a/tests/semantic-summary-layout.test.mjs
+++ b/tests/semantic-summary-layout.test.mjs
@@ -13,7 +13,7 @@ test("core semantic summaries reserve width before applying counter-scale", asyn
readFile(stylesPath, "utf8")
]);
- assert.match(terminalSource, /\(size\.width - 72\) \/ summaryScale/);
+ assert.match(terminalSource, /\(\(pixelSurfaceBounds \? pixelSurfaceBounds\.right - pixelSurfaceBounds\.left : size\.width\) - 72\) \/ summaryScale/);
assert.match(browserSource, /\(size\.width - 48\) \/ summaryScale/);
assert.match(styles, /\.terminal-card__summary-content\s*\{[^}]*width:\s*var\(--summary-content-width\)/);
assert.match(styles, /\.terminal-card__summary-content\s*\{[^}]*justify-content:\s*center/);
diff --git a/tests/settings-normalizer.test.mjs b/tests/settings-normalizer.test.mjs
index e6ec55d4..b92e6d80 100644
--- a/tests/settings-normalizer.test.mjs
+++ b/tests/settings-normalizer.test.mjs
@@ -33,7 +33,12 @@ const fallback = {
agentLifecycleHooksEnabled: true,
uiScale: 1,
canvasColor: "sage",
+ canvasBackground: "none",
pattern: "dots",
+ terminalBorderSkin: "classic",
+ terminalSkinDetail: "detailed",
+ terminalSkinAnimationEnabled: true,
+ appSkin: "classic",
snapToGrid: true,
invertTerminalWheel: true,
invertCanvasWheel: false,
@@ -130,6 +135,8 @@ test("older settings files without the new keys inherit defaults", () => {
assert.deepEqual(normalized.homeLauncherProviders, fallback.homeLauncherProviders);
assert.deepEqual(normalized.homeLimitProviders, fallback.homeLimitProviders);
assert.equal(normalized.canvasColor, fallback.canvasColor);
+ assert.equal(normalized.terminalBorderSkin, "classic");
+ assert.equal(normalized.appSkin, "classic");
assert.equal(normalized.edgePan, fallback.edgePan);
assert.equal(normalized.edgePanSpeed, fallback.edgePanSpeed);
assert.equal(normalized.zoomSensitivity, fallback.zoomSensitivity);
@@ -143,6 +150,84 @@ test("older settings files without the new keys inherit defaults", () => {
assert.equal(normalized.persistStickyNotes, true);
});
+test("terminal border skin accepts supported choices and rejects unknown values", () => {
+ for (const skin of ["classic", "minimal", "glass", "cyber", "nord", "gradient", "cybercore", "titanium", "retro", "sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse"]) {
+ assert.equal(normalizeSettings({ terminalBorderSkin: skin }, fallback).terminalBorderSkin, skin);
+ }
+ assert.equal(normalizeSettings({ terminalBorderSkin: "custom:aurora" }, fallback).terminalBorderSkin, "custom:aurora");
+ for (const skin of ["custom:", "custom:Bad", "custom:two words", "custom:../escape", "custom:a/b", `custom:${"a".repeat(49)}`]) {
+ assert.equal(normalizeSettings({ terminalBorderSkin: skin }, fallback).terminalBorderSkin, "classic");
+ }
+ assert.equal(normalizeSettings({ terminalBorderSkin: "unknown" }, fallback).terminalBorderSkin, "classic");
+ assert.equal(normalizeSettings({ terminalBorderSkin: "botanical" }, fallback).terminalBorderSkin, "classic");
+});
+
+test("terminal skin animation setting is boolean and persists independently of the selected skin", async () => {
+ assert.equal(normalizeSettings({ terminalSkinDetail: "minimal" }, fallback).terminalSkinDetail, "minimal");
+ assert.equal(normalizeSettings({ terminalSkinDetail: "master" }, fallback).terminalSkinDetail, "detailed");
+ assert.equal(normalizeSettings({ terminalSkinAnimationEnabled: false }, fallback).terminalSkinAnimationEnabled, false);
+ assert.equal(normalizeSettings({ terminalSkinAnimationEnabled: "false" }, fallback).terminalSkinAnimationEnabled, true);
+ const dir = await mkdtemp(join(tmpdir(), "canvastty-skin-motion-"));
+ try {
+ const store = new SettingsStore(dir, "en");
+ await store.update({ terminalBorderSkin: "sakura", terminalSkinDetail: "minimal", terminalSkinAnimationEnabled: false });
+ const restored = await new SettingsStore(dir, "en").load();
+ assert.equal(restored.terminalBorderSkin, "sakura");
+ assert.equal(restored.terminalSkinDetail, "minimal");
+ assert.equal(restored.terminalSkinAnimationEnabled, false);
+ } finally {
+ await rm(dir, { recursive: true, force: true });
+ }
+});
+
+test("canvas backgrounds migrate once and persist independently of terminal borders", async () => {
+ const pixel = "pixel:12345678-1234-1234-1234-123456789abc";
+ for (const skin of ["sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse", pixel]) {
+ assert.equal(normalizeSettings({ terminalBorderSkin: skin }, fallback).canvasBackground, skin);
+ assert.equal(normalizeSettings({ terminalBorderSkin: skin, canvasBackground: "none" }, fallback).canvasBackground, "none");
+ assert.equal(normalizeSettings({ terminalBorderSkin: "classic", canvasBackground: skin }, fallback).canvasBackground, skin);
+ }
+ for (const invalid of ["glass", "custom:aurora", "pixel:bad", "../background.png", null, 1]) {
+ assert.equal(normalizeSettings({ canvasBackground: invalid }, fallback).canvasBackground, "none");
+ }
+ const dir = await mkdtemp(join(tmpdir(), "canvastty-background-"));
+ try {
+ await writeFile(join(dir, "settings.json"), JSON.stringify({ terminalBorderSkin: "sakura" }));
+ const store = new SettingsStore(dir, "en");
+ assert.equal((await store.load()).canvasBackground, "sakura");
+ assert.equal(JSON.parse(await readFile(join(dir, "settings.json"), "utf8")).canvasBackground, "sakura");
+ await store.update({ terminalBorderSkin: "cat" });
+ assert.equal((await new SettingsStore(dir, "en").load()).canvasBackground, "sakura");
+ await store.update({ canvasBackground: pixel });
+ assert.equal((await new SettingsStore(dir, "en").load()).terminalBorderSkin, "cat");
+ await store.update({ canvasBackground: "none" });
+ const restored = await new SettingsStore(dir, "en").load();
+ assert.equal(restored.canvasBackground, "none");
+ assert.equal(restored.terminalBorderSkin, "cat");
+ } finally {
+ await rm(dir, { recursive: true, force: true });
+ }
+});
+
+test("application skin accepts supported choices and rejects unknown values", () => {
+ for (const skin of ["classic", "atelier", "signal", "greenhouse", "midnight"]) {
+ assert.equal(normalizeSettings({ appSkin: skin }, fallback).appSkin, skin);
+ }
+ assert.equal(normalizeSettings({ appSkin: "unknown" }, fallback).appSkin, "classic");
+});
+
+test("terminal border skin persists across settings reload", async () => {
+ const dir = await mkdtemp(join(tmpdir(), "canvastty-terminal-border-skin-"));
+ try {
+ const store = new SettingsStore(dir, "en");
+ await store.update({ terminalBorderSkin: "cyber" });
+ assert.equal(JSON.parse(await readFile(join(dir, "settings.json"), "utf8")).terminalBorderSkin, "cyber");
+ assert.equal((await new SettingsStore(dir, "en").load()).terminalBorderSkin, "cyber");
+ } finally {
+ await rm(dir, { recursive: true, force: true });
+ }
+});
+
test("preserves an explicit lifecycle hook revocation", () => {
const normalized = normalizeSettings({ agentLifecycleHooksEnabled: false }, fallback);
assert.equal(normalized.agentLifecycleHooksEnabled, false);
diff --git a/tests/settings-ui.test.mjs b/tests/settings-ui.test.mjs
index bea2e2d3..4beb57a5 100644
--- a/tests/settings-ui.test.mjs
+++ b/tests/settings-ui.test.mjs
@@ -13,6 +13,11 @@ const menuPrimitivesPath = new URL("../src/renderer/src/components/CanvasMenuPri
const minimapPath = new URL("../src/renderer/src/features/workspace/CanvasMinimap.tsx", import.meta.url);
const homeZonePath = new URL("../src/renderer/src/features/home/HomeZone.tsx", import.meta.url);
const appStylesPath = new URL("../src/renderer/src/styles/app.css", import.meta.url);
+const terminalSkinsPath = new URL("../src/renderer/src/styles/terminalSkins.css", import.meta.url);
+const ornateTerminalSkinsPath = new URL("../src/renderer/src/styles/ornateTerminalSkins.css", import.meta.url);
+const appSkinsPath = new URL("../src/renderer/src/styles/appSkins.css", import.meta.url);
+const terminalCardPath = new URL("../src/renderer/src/features/terminal/TerminalCard.tsx", import.meta.url);
+const pixelTerminalSkinsPath = new URL("../src/renderer/src/styles/pixelTerminalSkins.css", import.meta.url);
test("About is the final Settings tab and owns the expandable hook FAQ", async () => {
const [settings, about] = await Promise.all([
@@ -47,6 +52,84 @@ test("Settings uses the approved icon-sidebar modal instead of the legacy horizo
assert.doesNotMatch(styles, /\.settings-tabs \{[^}]*grid-template-columns: repeat\(6/);
});
+test("terminal border selection reaches cards with a preview for every choice", async () => {
+ const [settings, workspace, card, styles, ornateStyles] = await Promise.all([
+ readFile(settingsPanelPath, "utf8"),
+ readFile(workspacePath, "utf8"),
+ readFile(terminalCardPath, "utf8"),
+ readFile(terminalSkinsPath, "utf8"),
+ readFile(ornateTerminalSkinsPath, "utf8")
+ ]);
+ assert.match(settings, /onChange=\{\(terminalBorderSkin\) => void onChange\(\{ terminalBorderSkin \}\)\}/);
+ assert.match(workspace, /borderSkin=\{settings\.terminalBorderSkin\}/);
+ assert.match(card, /data-border-skin=\{borderSkin\}/);
+ for (const skin of ["classic", "minimal", "glass", "cyber", "nord", "gradient", "cybercore", "titanium", "retro", "sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse"]) {
+ assert.match(settings, new RegExp(`\\["${skin}", "borderSkin`));
+ }
+ for (const skin of ["minimal", "glass", "cyber", "nord", "gradient"]) {
+ assert.ok(styles.includes(`.terminal-card[data-border-skin="${skin}"]`));
+ assert.ok(styles.includes(`.border-skin-preview[data-border-skin="${skin}"]`));
+ }
+ for (const skin of ["cybercore", "titanium", "retro"]) {
+ assert.ok(ornateStyles.includes(`.terminal-card[data-border-skin="${skin}"]`));
+ assert.ok(ornateStyles.includes(`.border-skin-preview[data-border-skin="${skin}"]`));
+ }
+ assert.doesNotMatch(settings, /\["botanical", "borderSkinBotanical"\]/);
+ assert.doesNotMatch(ornateStyles, /data-border-skin="botanical"/);
+});
+
+test("pixel border skin preview is scoped, responsive, and bounds stage within modal", async () => {
+ const [settings, pixelStyles] = await Promise.all([
+ readFile(settingsPanelPath, "utf8"),
+ readFile(pixelTerminalSkinsPath, "utf8")
+ ]);
+
+ // Check SettingsPanel contains the expected structure
+ assert.match(settings, /className="pixel-skin-preview-tools"/);
+ assert.match(settings, /className="pixel-skin-preview-tools__groups"/);
+ assert.match(settings, /className="pixel-skin-preview-tools__group"/);
+ assert.match(settings, /className="pixel-skin-preview-stage"/);
+ assert.match(settings, /className="pixel-skin-preview-stage__screen"/);
+ assert.match(settings, /className="pixel-skin-preview-stage__activity"/);
+
+ // Tools container spans choices grid
+ assert.match(pixelStyles, /\.pixel-skin-preview-tools \{[^}]*grid-column: 1 \/ -1;/);
+
+ // Grouped controls wrap and button states
+ assert.match(pixelStyles, /\.pixel-skin-preview-tools__groups \{[^}]*display: flex;[^}]*flex-wrap: wrap;/);
+ assert.match(pixelStyles, /\.pixel-skin-preview-tools__button:focus-visible \{/);
+ assert.match(pixelStyles, /\.pixel-skin-preview-tools__button--active/);
+
+ // Bounded 3:2 stage
+ assert.match(pixelStyles, /\.pixel-skin-preview-stage \{[^}]*position: relative;[^}]*width: 100%;[^}]*max-width: 520px;[^}]*aspect-ratio: 3 \/ 2;[^}]*overflow: hidden;/);
+
+ // Absolute inset stage canvas & aperture screen
+ assert.match(pixelStyles, /\.pixel-skin-preview-stage \.terminal-skin-canvas \{[^}]*position: absolute;[^}]*inset: 0;/);
+ assert.match(pixelStyles, /\.pixel-skin-preview-stage__screen \{[^}]*position: absolute;[^}]*z-index: 2;/);
+
+ // Pixel thumbnail containment
+ assert.match(pixelStyles, /\.border-skin-preview--pixel img \{[^}]*object-fit: contain;/);
+ assert.match(settings, /slot = "detailed_idle"/);
+ assert.match(settings, /readAsset\(id, slot\)/);
+ assert.match(settings, /pixelSkinAssetFilename\(theme, "detailed", "idle"\)/);
+ assert.doesNotMatch(pixelStyles, /sakura-frame\.png/);
+});
+
+test("application skin selection reaches the app root with previews", async () => {
+ const [settings, app, styles] = await Promise.all([
+ readFile(settingsPanelPath, "utf8"),
+ readFile(new URL("../src/renderer/src/App.tsx", import.meta.url), "utf8"),
+ readFile(appSkinsPath, "utf8")
+ ]);
+ assert.match(settings, /onChange=\{\(appSkin\) => void onChange\(\{ appSkin \}\)\}/);
+ assert.match(app, /data-app-skin=\{settings\.appSkin\}/);
+ for (const skin of ["classic", "atelier", "signal", "greenhouse", "midnight"]) {
+ assert.match(settings, new RegExp(`\\["${skin}", "appSkin`));
+ assert.ok(styles.includes(`data-preview-skin="${skin}"`));
+ }
+});
+
+
test("Hooks stays concise while detailed safety copy is available in About", async () => {
const [hooks, styles] = await Promise.all([
readFile(agentHooksPath, "utf8"),
diff --git a/tests/startup-lifecycle.test.mjs b/tests/startup-lifecycle.test.mjs
index 89faf867..6772fa5c 100644
--- a/tests/startup-lifecycle.test.mjs
+++ b/tests/startup-lifecycle.test.mjs
@@ -36,11 +36,15 @@ test("closing during service startup stops renderer loading without a failure di
assert.equal(failures, 1, "a real error on a live window still reaches the failure page");
});
-test("services start while the startup page is still loading, and only a real page error fails startup", async () => {
+test("services start while the startup page loads, and the application surface waits until the page settled", async () => {
const source = await readFile(mainPath, "utf8");
const start = source.slice(source.indexOf("async function startApplication"), source.indexOf("function buildProviderCliRegistry"));
const events = [];
- let page;
+ const turn = () => new Promise((resolve) => setImmediate(resolve));
+ let settlePage;
+ // The startup page load as createWindow hands it over: it settles with the error to report, or null.
+ const pendingPage = () => new Promise((resolve) => { settlePage = resolve; });
+ let gone = false;
const context = {
startupRunning: false,
shutdownRunning: false,
@@ -48,22 +52,41 @@ test("services start while the startup page is still loading, and only a real pa
servicesReady: false,
mainWindow: null,
process: { env: {} },
- shellWindowGone: () => false,
- // The page load never settles here: startup must not wait for it.
- createWindow: () => { page = { failure: null, superseded: false }; events.push("window"); return { window: {}, startupPage: page }; },
- initializeServices: async () => { events.push(`services superseded=${page.superseded}`); },
+ shellWindowGone: () => gone,
+ createWindow: () => { events.push("window"); return { window: {}, startupPage: pendingPage() }; },
+ initializeServices: async () => { events.push("services"); },
initializeUpdater: () => events.push("updater"),
- loadApplication: async () => { events.push(`app superseded=${page.superseded}`); },
+ loadApplication: async () => { events.push("app"); },
showStartupFailure: async (_window, error) => { events.push(`failure ${error.message}`); }
};
const startApplication = runInNewContext(`${stripTypeScriptTypes(start)}; startApplication`, context);
- await startApplication();
- assert.deepEqual(events, ["window", "services superseded=false", "updater", "app superseded=true"]);
+ // Services do not wait for the page. The application surface does: a page replaced while it is still loading
+ // reports its ERR_ABORTED late, and Electron's loadFile promise takes that failure as its own.
+ let startup = startApplication();
+ await turn();
+ assert.deepEqual(events, ["window", "services"]);
+ events.push("page settled");
+ settlePage(null);
+ await startup;
+ assert.deepEqual(events, ["window", "services", "page settled", "updater", "app"]);
+
+ // A real page error on a live window fails startup.
events.length = 0;
- context.initializeServices = async () => { page.failure = new Error("startup page failed"); };
+ context.createWindow = () => { events.push("window"); return { window: {}, startupPage: Promise.resolve(new Error("startup page failed")) }; };
await startApplication();
- assert.deepEqual(events, ["window", "failure startup page failed"]);
+ assert.deepEqual(events, ["window", "services", "failure startup page failed"]);
+
+ // A close while the page is still loading ends startup quietly once the page settles.
+ events.length = 0;
+ context.createWindow = () => { events.push("window"); return { window: {}, startupPage: pendingPage() }; };
+ startup = startApplication();
+ await turn();
+ gone = true;
+ settlePage(null);
+ await startup;
+ assert.deepEqual(events, ["window", "services"]);
+ assert.equal(context.startupRunning, false);
});
test("dependencies only some paths need are not imported when the main process starts", async () => {
diff --git a/tests/stdio.test.mjs b/tests/stdio.test.mjs
new file mode 100644
index 00000000..4bafe4c3
--- /dev/null
+++ b/tests/stdio.test.mjs
@@ -0,0 +1,32 @@
+import assert from "node:assert/strict";
+import { spawn } from "node:child_process";
+import { once } from "node:events";
+import test from "node:test";
+import { handleStdioError } from "../src/main/stdio.ts";
+
+test("logging survives a launcher closing both pipes; other errors still surface", async () => {
+ const other = Object.assign(new Error("I/O failure"), { code: "EIO" });
+ assert.throws(() => handleStdioError(other), (error) => error === other);
+
+ const moduleUrl = new URL("../src/main/stdio.ts", import.meta.url).href;
+ const child = spawn(process.execPath, ["--input-type=module", "-e", `
+ import ${JSON.stringify(moduleUrl)};
+ import { Console } from 'node:console';
+ const logger = new Console({ stdout: process.stdout, stderr: process.stderr, ignoreErrors: false });
+ process.on('message', () => {
+ logger.log('stdout after launcher exit');
+ logger.error('stderr after launcher exit');
+ setImmediate(() => {
+ logger.error('subsequent IPC error');
+ process.disconnect();
+ });
+ });
+ process.send('ready');
+ `], { stdio: ["ignore", "pipe", "pipe", "ipc"] });
+ const exited = once(child, "exit");
+ await once(child, "message");
+ child.stdout.destroy();
+ child.stderr.destroy();
+ child.send("write");
+ assert.deepEqual(await exited, [0, null]);
+});
diff --git a/tests/terminal-border-skins-renderer.test.mjs b/tests/terminal-border-skins-renderer.test.mjs
new file mode 100644
index 00000000..a662c9ed
--- /dev/null
+++ b/tests/terminal-border-skins-renderer.test.mjs
@@ -0,0 +1,259 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import {
+ createTerminalBorderSkinPreviewStyleController,
+ createTerminalBorderSkinStyleController,
+ normalizeTerminalBorderSkinList,
+ scopeTerminalBorderSkinCss,
+ terminalBorderSkinFallback
+} from "../src/renderer/src/lib/skinStyles.ts";
+
+const settingsPanelPath = new URL("../src/renderer/src/features/settings/SettingsPanel.tsx", import.meta.url);
+const terminalCardPath = new URL("../src/renderer/src/features/terminal/TerminalCard.tsx", import.meta.url);
+
+function createFakeDocument() {
+ const styles = [];
+ class FakeStyle {
+ attributes = new Map();
+ isConnected = false;
+ textContent = "";
+
+ setAttribute(name, value) {
+ this.attributes.set(name, value);
+ }
+
+ replaceWith(next) {
+ const index = styles.indexOf(this);
+ if (index >= 0) styles[index] = next;
+ this.isConnected = false;
+ next.isConnected = true;
+ }
+
+ remove() {
+ const index = styles.indexOf(this);
+ if (index >= 0) styles.splice(index, 1);
+ this.isConnected = false;
+ }
+ }
+
+ const documentTarget = {
+ createElement: () => new FakeStyle(),
+ head: {
+ append(style) {
+ styles.push(style);
+ style.isConnected = true;
+ }
+ }
+ };
+ return { documentTarget, styles };
+}
+
+const readySkin = (css, revision = "r1") => ({
+ id: "custom:aurora",
+ name: "Aurora",
+ revision,
+ status: "ready",
+ css
+});
+
+test("custom skin settings expose ready and error states and select only ready skins", async () => {
+ const skins = normalizeTerminalBorderSkinList([
+ { id: "custom:aurora", name: "Aurora", revision: "r1", status: "ready" },
+ { id: "custom:broken", name: "Broken", status: "error", error: "Invalid manifest" },
+ { id: "custom:bad id", name: "Ignored", revision: "r1", status: "ready" },
+ { id: "custom:aurora", name: "Duplicate", revision: "r2", status: "ready" }
+ ]);
+ assert.deepEqual(skins.map(({ id, status }) => [id, status]), [
+ ["custom:aurora", "ready"],
+ ["custom:broken", "error"]
+ ]);
+
+ const settings = await readFile(settingsPanelPath, "utf8");
+ assert.match(settings, /window\.canvasTTY\.skins\.list\(\)/);
+ assert.match(settings, /window\.canvasTTY\.skins\.onChanged/);
+ assert.match(settings, /aria-pressed=\{value === skin\.id\}/);
+ assert.match(settings, /onClick=\{\(\) => skin\.status === "ready" && onChange\(skin\.id\)\}/);
+ assert.match(settings, /disabled=\{skin\.status === "error"\}/);
+ assert.match(settings, /createTerminalBorderSkinPreviewStyleController/);
+ assert.match(settings, /border-skin-preview--custom/);
+ assert.match(settings, /data-custom-border-skin=\{skinId\}/);
+ assert.match(settings, /CustomTerminalBorderSkinPreview skinId=\{selectedCustomSkinId\} selected/);
+ assert.match(settings, /customSkinsLoadState === "loading"/);
+ assert.match(settings, /customSkinsLoadState === "error"/);
+ assert.match(settings, /borderSkinUnavailable/);
+});
+
+test("custom css is card-scoped and malformed styles fail closed", () => {
+ const css = scopeTerminalBorderSkinCss(
+ ".terminal-card { border-color: teal; } .terminal-card .terminal-card__header, .terminal-card .output { color: white; }",
+ "custom:aurora"
+ );
+ assert.ok(css);
+ assert.match(css, /^\.terminal-card\[data-custom-border-skin="custom:aurora"\] \{/);
+ assert.match(css, /\.terminal-card\[data-custom-border-skin="custom:aurora"\] \.terminal-card__header/);
+ assert.match(css, /\.terminal-card\[data-custom-border-skin="custom:aurora"\] \.output/);
+ assert.equal(scopeTerminalBorderSkinCss("@import url(https://example.test/x.css);", "custom:aurora"), null);
+ assert.equal(scopeTerminalBorderSkinCss(".terminal-card { background: url(https://example.test/x.png); }", "custom:aurora"), null);
+ assert.equal(scopeTerminalBorderSkinCss(".outside { color: red; }", "custom:aurora"), null);
+ assert.equal(scopeTerminalBorderSkinCss(".terminal-card { color: red;", "custom:aurora"), null);
+ assert.equal(scopeTerminalBorderSkinCss(".terminal-card { color red; }", "custom:aurora"), null);
+ assert.equal(scopeTerminalBorderSkinCss(".terminal-card { color: red; }", 'custom:bad"id'), null);
+});
+
+test("custom preview css styles its frame, header, and controls only inside its preview scope", async () => {
+ const sourceCss = ".terminal-card { border: 3px solid teal; } .terminal-card .terminal-card__header { color: gold; } .terminal-card .terminal-card__actions button { border-color: orange; } .terminal-card .terminal-card__surface { border-top: 1px solid bronze; }";
+ const compiled = scopeTerminalBorderSkinCss(sourceCss, "custom:aurora", "preview");
+ assert.ok(compiled);
+ const previewScope = '.border-skin-preview--custom[data-custom-border-skin="custom:aurora"]';
+ assert.ok(compiled.startsWith(`${previewScope} { border: 3px solid teal; }`));
+ assert.match(compiled, /\.border-skin-preview--custom\[data-custom-border-skin="custom:aurora"\] \.border-skin-preview__header \{ color: gold; \}/);
+ assert.match(compiled, /\.border-skin-preview--custom\[data-custom-border-skin="custom:aurora"\] \.border-skin-preview__actions \.border-skin-preview__action \{ border-color: orange; \}/);
+ assert.match(compiled, /\.border-skin-preview--custom\[data-custom-border-skin="custom:aurora"\] \.border-skin-preview__surface \{ border-top: 1px solid bronze; \}/);
+ assert.doesNotMatch(compiled, /\.terminal-card(?:\[|\.|:|\s|>|\+|~)/u);
+ assert.ok(compiled.split("\n").every((rule) => rule.startsWith(previewScope)));
+
+ const { documentTarget, styles } = createFakeDocument();
+ const api = {
+ list: async () => [{ id: "custom:aurora", name: "Aurora", revision: "r1", status: "ready" }],
+ get: async () => readySkin(sourceCss),
+ onChanged: () => () => undefined
+ };
+ const controller = createTerminalBorderSkinPreviewStyleController(api, documentTarget);
+ controller.setActive(["custom:aurora"]);
+ await new Promise((resolve) => setImmediate(resolve));
+ assert.equal(styles.length, 1);
+ assert.equal(styles[0].attributes.get("data-terminal-border-skin-preview-style"), "custom:aurora");
+ assert.match(styles[0].textContent, /border-skin-preview--custom\[data-custom-border-skin/);
+ controller.dispose();
+ assert.equal(styles.length, 0);
+});
+
+test("the bundled custom skin compiles through the renderer scope", async () => {
+ const source = await readFile(new URL("../examples/terminal-skins/foundry-seven/skin.css", import.meta.url), "utf8");
+ const compiled = scopeTerminalBorderSkinCss(source, "custom:foundry-seven");
+ const previewCompiled = scopeTerminalBorderSkinCss(source, "custom:foundry-seven", "preview");
+ assert.ok(compiled);
+ assert.ok(previewCompiled);
+ assert.match(compiled, /^\.terminal-card\[data-custom-border-skin="custom:foundry-seven"\]/);
+ assert.equal((compiled.match(/\.terminal-card\[data-custom-border-skin=/g) ?? []).length, 7);
+ assert.match(previewCompiled, /^\.border-skin-preview--custom\[data-custom-border-skin="custom:foundry-seven"\]/);
+ assert.match(previewCompiled, /\.border-skin-preview__header/);
+ assert.match(previewCompiled, /\.border-skin-preview__actions \.border-skin-preview__action/);
+ assert.ok(previewCompiled.split("\n").filter((line) => line.includes("{")).every((rule) => rule.startsWith('.border-skin-preview--custom[data-custom-border-skin="custom:foundry-seven"]')));
+});
+
+test("reload atomically replaces good css, preserves it on errors, and cleans up", async () => {
+ const { documentTarget, styles } = createFakeDocument();
+ const responses = [
+ readySkin(".terminal-card { border-color: teal; }", "r1"),
+ { id: "custom:aurora", status: "error", error: "Unreadable skin" },
+ readySkin(".terminal-card { border-color: plum; }", "r2"),
+ { id: "custom:aurora", name: "Aurora", revision: "r3", status: "ready", css: ".terminal-card { color red; }" }
+ ];
+ let changed;
+ let unsubscribed = false;
+ const api = {
+ list: async () => [{ id: "custom:aurora", name: "Aurora", revision: "r1", status: "ready" }],
+ get: async () => responses.shift(),
+ onChanged(listener) {
+ changed = listener;
+ return () => { unsubscribed = true; };
+ }
+ };
+ const controller = createTerminalBorderSkinStyleController(api, documentTarget);
+ const flush = () => new Promise((resolve) => setImmediate(resolve));
+
+ controller.setActive("custom:aurora");
+ await flush();
+ assert.equal(styles.length, 1);
+ const lastGood = styles[0];
+ assert.match(lastGood.textContent, /border-color: teal/);
+
+ changed();
+ await flush();
+ assert.equal(styles[0], lastGood);
+ assert.match(styles[0].textContent, /border-color: teal/);
+
+ changed();
+ await flush();
+ assert.equal(styles.length, 1);
+ assert.notEqual(styles[0], lastGood);
+ assert.match(styles[0].textContent, /border-color: plum/);
+
+ changed();
+ await flush();
+ assert.match(styles[0].textContent, /border-color: plum/);
+
+ controller.dispose();
+ assert.equal(unsubscribed, true);
+ assert.equal(styles.length, 0);
+});
+
+test("removing an active skin clears its style while invalid edits retain last-good css", async () => {
+ const { documentTarget, styles } = createFakeDocument();
+ let list = [{ id: "custom:aurora", name: "Aurora", revision: "r1", status: "ready" }];
+ let getCalls = 0;
+ let changed;
+ const api = {
+ list: async () => list,
+ get: async () => {
+ getCalls += 1;
+ return readySkin(".terminal-card { border-color: teal; }");
+ },
+ onChanged(listener) {
+ changed = listener;
+ return () => undefined;
+ }
+ };
+ const controller = createTerminalBorderSkinStyleController(api, documentTarget);
+ const flush = () => new Promise((resolve) => setImmediate(resolve));
+
+ controller.setActive("custom:aurora");
+ await flush();
+ assert.equal(styles.length, 1);
+ assert.match(styles[0].textContent, /border-color: teal/);
+
+ // A present error entry means the directory exists but its latest edit failed.
+ // Backend get() continues returning the last-good CSS in this case.
+ list = [{
+ id: "custom:aurora",
+ name: "Aurora",
+ revision: "r1",
+ status: "error",
+ error: "Invalid CSS edit"
+ }];
+ changed();
+ await flush();
+ assert.equal(styles.length, 1);
+ assert.match(styles[0].textContent, /border-color: teal/);
+ assert.equal(getCalls, 2);
+
+ // A registry-level error makes absence ambiguous, so keep the last-good style.
+ list = [{ id: "custom:skin-registry", status: "error", error: "Registry unavailable" }];
+ changed();
+ await flush();
+ assert.equal(styles.length, 1);
+ assert.equal(getCalls, 2);
+
+ // The backend omits a removed directory from list(), which is positive removal evidence.
+ list = [];
+ changed();
+ await flush();
+ assert.equal(styles.length, 0);
+ assert.equal(getCalls, 2);
+ assert.equal(terminalBorderSkinFallback("custom:aurora"), "classic");
+
+ controller.dispose();
+});
+
+test("custom skins fall back to classic while built-in skin ids remain intact", async () => {
+ assert.equal(terminalBorderSkinFallback("custom:aurora"), "classic");
+ assert.equal(terminalBorderSkinFallback("cyber"), "cyber");
+ assert.equal(terminalBorderSkinFallback("classic"), "classic");
+
+ const card = await readFile(terminalCardPath, "utf8");
+ assert.match(card, /terminalBorderSkinFallback\(selectedBorderSkin\)/);
+ assert.match(card, /data-border-skin=\{borderSkin\}/);
+ assert.match(card, /data-custom-border-skin=\{customBorderSkin\}/);
+});
diff --git a/tests/terminal-border-skins.test.mjs b/tests/terminal-border-skins.test.mjs
new file mode 100644
index 00000000..5cc62f63
--- /dev/null
+++ b/tests/terminal-border-skins.test.mjs
@@ -0,0 +1,229 @@
+import assert from "node:assert/strict";
+import { mkdtemp, mkdir, readFile, rename, rm, symlink, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import test from "node:test";
+import { isCustomTerminalBorderSkinId, SkinRegistry } from "../src/main/services/SkinRegistry.ts";
+
+const validCss = '.terminal-card[data-border-skin="custom:aurora"] { border: 2px solid #8ac; box-shadow: 0 0 12px #7cf; }';
+
+async function makeFixture(t, prepare = async () => undefined, registryOptions = {}) {
+ const userData = await mkdtemp(join(tmpdir(), "canvastty-terminal-skins-"));
+ const skins = join(userData, "skins");
+ await mkdir(skins, { recursive: true });
+ await prepare(skins);
+ const registry = new SkinRegistry(userData, registryOptions);
+ await registry.initialize();
+ t.after(async () => {
+ registry.dispose();
+ await rm(userData, { recursive: true, force: true });
+ });
+ return { userData, skins, registry };
+}
+
+async function writeSkin(skinsRoot, slug, css = validCss, manifest = undefined) {
+ const directory = join(skinsRoot, slug);
+ await mkdir(directory, { recursive: true });
+ const value = manifest ?? { schemaVersion: 1, id: slug, name: "Aurora", kind: "terminal-border" };
+ await writeFile(join(directory, "manifest.json"), typeof value === "string" ? value : JSON.stringify(value));
+ await writeFile(join(directory, "skin.css"), css);
+ return directory;
+}
+
+function waitForChange(registry, timeoutMs = 4_000) {
+ return new Promise((resolve, reject) => {
+ const timeout = setTimeout(() => {
+ unsubscribe();
+ reject(new Error("Timed out waiting for skin registry reload."));
+ }, timeoutMs);
+ const unsubscribe = registry.onChanged(() => {
+ clearTimeout(timeout);
+ unsubscribe();
+ resolve();
+ });
+ });
+}
+
+function deferred() {
+ let resolve;
+ const promise = new Promise((done) => { resolve = done; });
+ return { promise, resolve };
+}
+
+function withTimeout(promise, timeoutMs = 2_000) {
+ let timeout;
+ return Promise.race([
+ promise,
+ new Promise((_, reject) => {
+ timeout = setTimeout(() => reject(new Error("Timed out waiting for watcher recovery.")), timeoutMs);
+ })
+ ]).finally(() => clearTimeout(timeout));
+}
+
+test("registry lists and returns a valid local skin without exposing CSS in metadata", async (t) => {
+ const { registry } = await makeFixture(t, (skins) => writeSkin(skins, "aurora"));
+ const listed = registry.list();
+ assert.equal(listed.length, 1);
+ assert.deepEqual(listed[0], {
+ id: "custom:aurora",
+ name: "Aurora",
+ revision: listed[0].revision,
+ status: "ready"
+ });
+ assert.match(listed[0].revision, /^[a-f0-9]{16}$/);
+ assert.deepEqual(registry.get("custom:aurora"), {
+ id: "custom:aurora",
+ name: "Aurora",
+ revision: listed[0].revision,
+ status: "ready",
+ css: validCss
+ });
+});
+
+test("registry accepts the bundled example skin stylesheet", async (t) => {
+ const css = await readFile(new URL("../examples/terminal-skins/foundry-seven/skin.css", import.meta.url), "utf8");
+ const { registry } = await makeFixture(t, (skins) => writeSkin(
+ skins,
+ "foundry-seven",
+ css,
+ { schemaVersion: 1, id: "foundry-seven", name: "Foundry Seven", kind: "terminal-border" }
+ ));
+ assert.equal(registry.list()[0].status, "ready");
+});
+
+test("registry refuses a symlinked skins root without reading its target", async (t) => {
+ const userData = await mkdtemp(join(tmpdir(), "canvastty-skin-root-link-"));
+ const externalRoot = join(userData, "external-skins");
+ await writeSkin(externalRoot, "aurora");
+ await symlink(externalRoot, join(userData, "skins"));
+ const registry = new SkinRegistry(userData);
+ await registry.initialize();
+ t.after(() => registry.dispose());
+
+ assert.deepEqual(registry.list(), [{
+ id: "custom:skin-registry",
+ status: "error",
+ error: "The terminal skin directory must be a real directory."
+ }]);
+ assert.equal(registry.get("custom:aurora").status, "error");
+});
+
+test("registry surfaces malformed, mismatched, oversized, and symlinked skin files", async (t) => {
+ const { registry } = await makeFixture(t, async (skins) => {
+ await writeSkin(skins, "bad-json", validCss, "{");
+ await writeSkin(skins, "large-manifest", validCss, " ".repeat(4 * 1024 + 1));
+ await writeSkin(skins, "wrong-id", validCss, { schemaVersion: 1, id: "../outside", name: "Wrong", kind: "terminal-border" });
+ await writeSkin(skins, "large-css", " ".repeat(64 * 1024 + 1));
+ const linked = await writeSkin(skins, "linked-css");
+ const externalCss = join(skins, "external.css");
+ await writeFile(externalCss, validCss);
+ await rm(join(linked, "skin.css"));
+ await symlink(externalCss, join(linked, "skin.css"));
+ const externalDirectory = join(skins, "..", "outside-directory");
+ await mkdir(externalDirectory);
+ await writeFile(join(externalDirectory, "manifest.json"), JSON.stringify({ schemaVersion: 1, id: "linked-folder", name: "Linked", kind: "terminal-border" }));
+ await writeFile(join(externalDirectory, "skin.css"), validCss);
+ await symlink(externalDirectory, join(skins, "linked-folder"));
+ });
+
+ const items = registry.list();
+ assert.equal(items.length, 6);
+ for (const slug of ["bad-json", "large-manifest", "wrong-id", "large-css", "linked-css", "linked-folder"]) {
+ const item = items.find((entry) => entry.id === `custom:${slug}`);
+ assert.equal(item?.status, "error", `expected ${slug} to be rejected`);
+ const result = registry.get(`custom:${slug}`);
+ assert.equal(result.status, "error");
+ assert.match(result.error, /./);
+ }
+ assert.throws(() => registry.get("custom:../outside"), /invalid/i);
+ assert.equal(isCustomTerminalBorderSkinId("custom:valid-skin"), true);
+ assert.equal(isCustomTerminalBorderSkinId("custom:../outside"), false);
+});
+
+test("registry rejects remote URLs, executable CSS, out-of-scope selectors, and unsafe properties", async (t) => {
+ const rejectedCss = [
+ '@import "https://example.invalid/skin.css"; .terminal-card { border: 1px solid red; }',
+ '.terminal-card { background: url(file:///etc/passwd); }',
+ '.terminal-card { background-image: url(https://example.invalid/a.png); }',
+ '.terminal-card { background: expression(alert(1)); }',
+ '.terminal-card { --paint: u\\72l(https://example.invalid/a); border: 1px solid red; }',
+ '.terminal-card { --markup: \\3c script>alert(1); }',
+ 'body { border: 1px solid red; }',
+ '.terminal-card + body { border: 1px solid red; }',
+ '.terminal-card || body { border: 1px solid red; }',
+ '.terminal-card { position: fixed; }',
+ '.terminal-card { behavior: url(#default#VML); }'
+ ];
+ const { registry } = await makeFixture(t, async (skins) => {
+ for (const [index, css] of rejectedCss.entries()) await writeSkin(skins, `unsafe-${index}`, css);
+ });
+
+ assert.equal(registry.list().length, rejectedCss.length);
+ assert.ok(registry.list().every((item) => item.status === "error"));
+});
+
+test("watcher reloads valid edits and preserves last-good CSS after an invalid edit", async (t) => {
+ let directory = "";
+ const { registry: watched } = await makeFixture(t, async (skins) => {
+ directory = await writeSkin(skins, "aurora");
+ });
+
+ const updatedCss = '.terminal-card[data-border-skin="custom:aurora"] { border: 3px solid #fa0; }';
+ let changed = waitForChange(watched);
+ await writeFile(join(directory, "skin.css"), updatedCss);
+ await changed;
+ assert.equal(watched.get("custom:aurora").css, updatedCss);
+
+ changed = waitForChange(watched);
+ await writeFile(join(directory, "skin.css"), 'body { background: url(https://example.invalid); }');
+ await changed;
+ assert.equal(watched.list()[0].status, "error");
+ assert.equal(watched.get("custom:aurora").css, updatedCss);
+});
+
+test("root watcher retries install failures, rescans after errors, and sees later folder changes", async (t) => {
+ const firstWatcherReady = deferred();
+ const recoveredWatcherReady = deferred();
+ const watchers = [];
+ let installAttempts = 0;
+ const rootWatcherFactory = (_path, onChange, onError) => {
+ installAttempts += 1;
+ if (installAttempts === 1) throw new Error("simulated root watcher install failure");
+ const watcher = {
+ closed: false,
+ close() { this.closed = true; },
+ onChange,
+ onError
+ };
+ watchers.push(watcher);
+ if (watchers.length === 1) firstWatcherReady.resolve(watcher);
+ if (watchers.length === 2) recoveredWatcherReady.resolve(watcher);
+ return watcher;
+ };
+ const { registry, skins, userData } = await makeFixture(t, undefined, {
+ rootWatcherFactory,
+ rootRetryBaseMs: 10,
+ rootRetryMaxMs: 20
+ });
+
+ const added = waitForChange(registry);
+ await writeSkin(skins, "added-while-unwatched");
+ const firstWatcher = await withTimeout(firstWatcherReady.promise);
+ await added;
+ assert.equal(registry.list().find((item) => item.id === "custom:added-while-unwatched")?.status, "ready");
+
+ const removed = waitForChange(registry);
+ firstWatcher.onError(new Error("simulated root watcher runtime failure"));
+ await rename(join(skins, "added-while-unwatched"), join(userData, "moved-skin-fixture"));
+ const recoveredWatcher = await withTimeout(recoveredWatcherReady.promise);
+ await removed;
+ assert.equal(firstWatcher.closed, true);
+ assert.equal(registry.list().some((item) => item.id === "custom:added-while-unwatched"), false);
+
+ const laterChange = waitForChange(registry);
+ await writeSkin(skins, "seen-after-recovery");
+ recoveredWatcher.onChange();
+ await laterChange;
+ assert.equal(registry.list().find((item) => item.id === "custom:seen-after-recovery")?.status, "ready");
+ assert.ok(installAttempts >= 3, "the watcher factory should be retried after both failures");
+});
diff --git a/tests/terminal-lifecycle.test.mjs b/tests/terminal-lifecycle.test.mjs
index 9cfa7706..75ea78aa 100644
--- a/tests/terminal-lifecycle.test.mjs
+++ b/tests/terminal-lifecycle.test.mjs
@@ -15,7 +15,8 @@ test("palette changes retheme the live xterm without recreating it", async () =>
const mountDependencies = effectDependenciesContaining(source, "new Terminal({");
assert.equal(mountDependencies, "session.id");
- assert.match(source, /terminal\.options\.theme = terminalTheme\(palette\)/);
+ assert.match(source, /terminal\.options\.theme = terminalTheme\(palette, pixelSkinTheme\)/);
+ assert.match(source, /\}, \[palette, pixelSkinTheme\]\);/);
});
test("terminal copy shortcuts write the xterm selection without reaching the PTY", async () => {
@@ -119,6 +120,19 @@ test("revoking lifecycle hooks makes live agent status unavailable until a resta
assert.match(source, /session\.lifecycle = this\.lifecycleHooksEnabled\s*\? createProviderLifecycleParser/);
});
+test("only explicit turn-stop hooks set completed art and a new turn clears it", async () => {
+ const [card, manager, main] = await Promise.all([
+ readFile(terminalCardPath, "utf8"),
+ readFile(terminalManagerPath, "utf8"),
+ readFile(new URL("../src/main/index.ts", import.meta.url), "utf8")
+ ]);
+ assert.match(main, /state: signal\.state,\s*event: signal\.event/);
+ assert.match(manager, /\["Stop", "StopFailure", "StopCancelled"\]\.includes\(signal\.event \?\? ""\)/);
+ assert.match(manager, /nextStatus === "working" \? false : completed \|\| Boolean\(session\.metadata\.turnCompleted\)/);
+ assert.match(card, /pixelSkinStateForSession\(session\.status, session\.turnCompleted\)/);
+ assert.match(card, /artState=\{pixelArtState\}/);
+});
+
test("terminal viewport keeps the palette background after row-sized fits", async () => {
const [source, styles] = await Promise.all([
readFile(terminalCardPath, "utf8"),
diff --git a/tests/terminal-manager-geometry.test.mjs b/tests/terminal-manager-geometry.test.mjs
index 782e7238..fdf24c5f 100644
--- a/tests/terminal-manager-geometry.test.mjs
+++ b/tests/terminal-manager-geometry.test.mjs
@@ -62,6 +62,36 @@ test("other providers retain immediate startup and subsequent PTY resize", () =>
manager.disposeAll();
});
+test("only explicit stop signals mark a provider turn complete", () => {
+ const manager = new TerminalManager(
+ () => undefined,
+ availableRegistry(),
+ undefined,
+ undefined,
+ true,
+ fakeSpawner([])
+ );
+ const session = manager.create({
+ provider: "codex",
+ cwd: process.cwd(),
+ profile: "normal",
+ position: { x: 0, y: 0 }
+ });
+ const signal = (state, event) => manager.applyProviderSignal(session.id, { kind: "lifecycle", state, event });
+
+ signal("working", "UserPromptSubmit");
+ signal("idle", "Notification");
+ assert.equal(manager.list()[0].turnCompleted, false);
+ signal("working", "UserPromptSubmit");
+ signal("idle", "Stop");
+ assert.equal(manager.list()[0].turnCompleted, true);
+ signal("idle", "Notification");
+ assert.equal(manager.list()[0].turnCompleted, true);
+ signal("working", "UserPromptSubmit");
+ assert.equal(manager.list()[0].turnCompleted, false);
+ manager.disposeAll();
+});
+
test("answer-capture grants are passed only to the explicitly granted session generation", () => {
const calls = [];
const grants = [];
diff --git a/tests/terminal-shortcuts.test.mjs b/tests/terminal-shortcuts.test.mjs
index baf5a818..9c7a27ea 100644
--- a/tests/terminal-shortcuts.test.mjs
+++ b/tests/terminal-shortcuts.test.mjs
@@ -6,7 +6,8 @@ import {
shouldPasteTerminalClipboard,
shouldRestartExitedTerminal,
shouldScrollTerminalPage,
- shouldSendTerminalLineBreak
+ shouldSendTerminalLineBreak,
+ shouldTogglePixelSkinMasterView
} from "../src/renderer/src/features/terminal/terminalShortcuts.ts";
const keydown = {
@@ -69,6 +70,28 @@ test("ctrl-d restarts only an exited terminal session", () => {
assert.equal(shouldRestartExitedTerminal({ ...restart, shiftKey: true }, true), false);
});
+test("plain F4 toggles master detail and modified or repeated F4 stays with the app", () => {
+ const f4 = { ...keydown, key: "F4", code: "F4" };
+
+ assert.equal(shouldTogglePixelSkinMasterView(f4, true, []), true);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, key: "Unidentified", code: "F4" }, true, []), true);
+ assert.equal(shouldTogglePixelSkinMasterView(f4, false, []), false);
+ assert.equal(shouldTogglePixelSkinMasterView(f4, true, ["F4"]), false);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, type: "keyup" }, true, []), false);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, repeat: true }, true, []), false);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, ctrlKey: true }, true, []), false);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, shiftKey: true }, true, []), false);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, metaKey: true }, true, []), false);
+ assert.equal(shouldTogglePixelSkinMasterView({ ...f4, altKey: true }, true, []), false);
+});
+
+test("configured Home or rename bindings take precedence over F4", () => {
+ const f4 = { ...keydown, key: "F4", code: "F4" };
+
+ assert.equal(shouldTogglePixelSkinMasterView(f4, true, ["F4"]), false);
+ assert.equal(shouldTogglePixelSkinMasterView(f4, true, ["F2", "F4"]), false);
+});
+
test("plain page-up and page-down page the scrollback viewport", () => {
assert.equal(shouldScrollTerminalPage({ ...keydown, key: "PageUp", code: "PageUp" }), -1);
assert.equal(shouldScrollTerminalPage({ ...keydown, key: "PageDown", code: "PageDown" }), 1);
diff --git a/tests/theme-backgrounds.test.mjs b/tests/theme-backgrounds.test.mjs
new file mode 100644
index 00000000..3ab5a318
--- /dev/null
+++ b/tests/theme-backgrounds.test.mjs
@@ -0,0 +1,93 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+import { BUNDLED_CANVAS_BACKGROUND_IDS } from "../src/shared/contracts.ts";
+
+const BUNDLED_THEMES = ["sakura", "matrix", "forest-cabin", "gold-black", "cat", "gothic-eclipse"];
+
+test("verify bundled theme background PNGs exist and have correct signature and dimensions", () => {
+ const backgroundsDir = path.resolve("src/renderer/src/assets/theme-backgrounds");
+
+ for (const theme of BUNDLED_THEMES) {
+ const filePath = path.join(backgroundsDir, `${theme}.png`);
+ assert.ok(fs.existsSync(filePath), `${theme}.png should exist in repo`);
+
+ const buf = fs.readFileSync(filePath);
+ assert.ok(buf.length > 24, `${theme}.png should have valid size`);
+
+ // Verify 8-byte PNG signature: 89 50 4E 47 0D 0A 1A 0A
+ const expectedSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+ for (let i = 0; i < expectedSignature.length; i++) {
+ assert.equal(buf[i], expectedSignature[i], `Byte ${i} of ${theme}.png should match PNG signature`);
+ }
+
+ // Verify IHDR chunk header (bytes 12-15: "IHDR")
+ assert.equal(buf.toString("ascii", 12, 16), "IHDR", `${theme}.png must contain IHDR chunk`);
+
+ // Verify dimensions 1536x1024 from IHDR chunk (width at offset 16, height at offset 20, 32-bit big-endian)
+ const width = buf.readUInt32BE(16);
+ const height = buf.readUInt32BE(20);
+ assert.equal(width, 1536, `${theme}.png width should be 1536 (got ${width})`);
+ assert.equal(height, 1024, `${theme}.png height should be 1024 (got ${height})`);
+ }
+});
+
+test("verify appSkins.css defines rules for all bundled themes", () => {
+ const cssPath = path.resolve("src/renderer/src/styles/appSkins.css");
+ const css = fs.readFileSync(cssPath, "utf8");
+
+ for (const theme of BUNDLED_THEMES) {
+ assert.match(
+ css,
+ new RegExp(`\\[data-theme-background="${theme}"\\]`),
+ `appSkins.css should have rule for [data-theme-background="${theme}"]`
+ );
+ assert.match(
+ css,
+ new RegExp(`url\\(["']?\\.\\./assets/theme-backgrounds/${theme}\\.png["']?\\)`),
+ `appSkins.css should reference ../assets/theme-backgrounds/${theme}.png`
+ );
+ }
+
+ // Check background attributes: cover, center, no-repeat, fixed viewport
+ assert.match(css, /\.workspace\[data-theme-background\]/);
+ assert.match(css, /background-size:\s*cover/);
+ assert.match(css, /background-position:\s*center/);
+ assert.match(css, /background-repeat:\s*no-repeat/);
+
+ // Pattern suppression
+ assert.match(css, /\.workspace\[data-theme-background\]::before\s*\{[^}]*display:\s*none\s*!important/);
+});
+
+test("verify WorkspaceCanvas.tsx source-level wiring and background theme scoping", () => {
+ const tsxPath = path.resolve("src/renderer/src/features/workspace/WorkspaceCanvas.tsx");
+ const tsx = fs.readFileSync(tsxPath, "utf8");
+
+ // Verify CANVAS_OVERLAY_PLACEMENTS is defined with CanvasOverlayPlacement type
+ assert.match(
+ tsx,
+ /const\s+CANVAS_OVERLAY_PLACEMENTS:\s*readonly\s+CanvasOverlayPlacement\[\]\s*=/,
+ "WorkspaceCanvas.tsx should declare CANVAS_OVERLAY_PLACEMENTS with CanvasOverlayPlacement[]"
+ );
+
+ // Check data-theme-background attribute is attached to workspace element
+ assert.match(
+ tsx,
+ /data-theme-background=\{themeBackground \?\? \(packBackground \? "custom" : undefined\)\}/,
+ "WorkspaceCanvas.tsx should attach bundled or imported theme background"
+ );
+
+ // Background rendering must use its own persisted selection.
+ assert.match(
+ tsx,
+ /BUNDLED_CANVAS_BACKGROUND_IDS[^\n]*\.includes\(settings\.canvasBackground\)/,
+ "WorkspaceCanvas.tsx should resolve bundled backgrounds from settings.canvasBackground"
+ );
+ assert.match(tsx, /isPixelSkinPackId\(settings\.canvasBackground\) \? settings\.canvasBackground : null/);
+ assert.deepEqual(
+ [...BUNDLED_CANVAS_BACKGROUND_IDS].sort(),
+ BUNDLED_THEMES.slice().sort(),
+ "BUNDLED_CANVAS_BACKGROUND_IDS must contain exactly the bundled themes"
+ );
+});
diff --git a/tests/uncaught-error-recovery.test.mjs b/tests/uncaught-error-recovery.test.mjs
new file mode 100644
index 00000000..950289ce
--- /dev/null
+++ b/tests/uncaught-error-recovery.test.mjs
@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+
+// An uncaught render error unmounts the React root but leaves the renderer process alive, so the main
+// process's render-process-gone reload never fires and the window stays black. The root recovers itself.
+const { outputFiles } = await build({
+ entryPoints: [fileURLToPath(new URL("../src/renderer/src/lib/uncaughtErrorRecovery.ts", import.meta.url))],
+ bundle: true,
+ platform: "node",
+ format: "esm",
+ write: false
+});
+const {
+ recoverFromUncaughtError,
+ UNCAUGHT_ERROR_RELOAD_COOLDOWN_MS
+} = await import(`data:text/javascript;base64,${Buffer.from(outputFiles[0].contents).toString("base64")}`);
+
+function host({ now, last = null, remembers = true }) {
+ const calls = [];
+ return {
+ calls,
+ now: () => now,
+ readLastReloadAt: () => last,
+ writeLastReloadAt: (at) => { calls.push(`write ${at}`); return remembers; },
+ reload: () => calls.push("reload"),
+ showRecoveryPage: () => calls.push("page")
+ };
+}
+
+test("the first uncaught render error reloads the application surface", () => {
+ const h = host({ now: 1_000_000 });
+ assert.equal(recoverFromUncaughtError(h), "reload");
+ assert.deepEqual(h.calls, ["write 1000000", "reload"]);
+});
+
+test("a second uncaught render error inside the cooldown shows the recovery page instead of looping", () => {
+ const h = host({ now: 1_000_000, last: 1_000_000 - UNCAUGHT_ERROR_RELOAD_COOLDOWN_MS + 1 });
+ assert.equal(recoverFromUncaughtError(h), "recovery-page");
+ assert.deepEqual(h.calls, ["page"]);
+});
+
+test("an error after the cooldown reloads again", () => {
+ const h = host({ now: 1_000_000, last: 1_000_000 - UNCAUGHT_ERROR_RELOAD_COOLDOWN_MS });
+ assert.equal(recoverFromUncaughtError(h), "reload");
+});
+
+test("a reload time in the future (clock change) does not block the reload", () => {
+ const h = host({ now: 1_000_000, last: 2_000_000 });
+ assert.equal(recoverFromUncaughtError(h), "reload");
+});
+
+test("without storage for the reload time the recovery page is shown, never an unbounded reload loop", () => {
+ const h = host({ now: 1_000_000, remembers: false });
+ assert.equal(recoverFromUncaughtError(h), "recovery-page");
+ assert.deepEqual(h.calls, ["write 1000000", "page"]);
+});
+
+test("the React root routes uncaught render errors to the recovery", async () => {
+ const source = await readFile(new URL("../src/renderer/src/main.tsx", import.meta.url), "utf8");
+ assert.match(source, /createRoot\(container, \{\s*[^}]*onUncaughtError: \(error, errorInfo\) => handleUncaughtRenderError\(container, error/su);
+});
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 481c1805..bae37b7c 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -10,7 +10,7 @@
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"noEmit": true,
- "types": ["node"]
+ "types": ["node", "electron-vite/node"]
},
"include": [
"electron.vite.config.ts",