chore: publish from main

.github/plugin/marketplace.json

@@ -13,7 +13,7 @@
       "name": "accessibility-kanban",
       "source": "extensions/accessibility-kanban",
       "description": "Kanban board to manage accessibility issues, allow you to plan, track, and complete remediation work.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "acreadiness-cockpit",
@@ -85,13 +85,13 @@
       "name": "apng-studio",
       "source": "extensions/apng-studio",
       "description": "Interactive GitHub Copilot app canvas extension for building Animated PNG (APNG) files from frames. Draw or upload frames, tune per-frame timing and compositing, preview live, send the result to your phone by QR, and export an animated .png.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "arcade-canvas",
       "source": "extensions/arcade-canvas",
       "description": "Play five retro Phaser mini-games in a Copilot canvas while agents work.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "arch",
@@ -158,7 +158,7 @@
       "name": "backlog-swipe-triage",
       "source": "extensions/backlog-swipe-triage",
       "description": "Quickly swipe through backlog issues to triage decisions like assign, needs-info, defer, close, or ignore.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "cast-imaging",
@@ -195,7 +195,7 @@
       "name": "chromium-control-canvas",
       "source": "extensions/chromium-control-canvas",
       "description": "Opens a real Chromium window you can navigate and interact with from a Copilot canvas control panel and agent actions.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "clojure-interactive-programming",
@@ -239,13 +239,13 @@
       "name": "color-orb",
       "source": "extensions/color-orb",
       "description": "A visual orb that users can ask the agent to recolor while showing a live activity log in the canvas.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "connector-namespaces",
       "source": "extensions/connector-namespaces",
       "description": "Browse, connect, and open MCP connectors from an Azure Connector Namespace.",
-      "version": "1.1.1"
+      "version": "1.1.2"
     },
     {
       "name": "context-engineering",
@@ -373,7 +373,7 @@
       "name": "diagram-viewer",
       "source": "extensions/diagram-viewer",
       "description": "Render diagrams, click nodes to drill down, and view agent-generated explanations directly in the canvas.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "dotnet",
@@ -520,7 +520,7 @@
       "name": "feedback-themes",
       "source": "extensions/feedback-themes",
       "description": "Explore grouped customer feedback signals by impact and drill into a theme to guide product next steps.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "figma",
@@ -593,7 +593,7 @@
       "name": "gesture-review",
       "source": "extensions/gesture-review",
       "description": "Review pull requests with a live camera feed and approve or reject using thumbs-up/thumbs-down gestures.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "gh-skills-builder",
@@ -701,7 +701,7 @@
       "name": "java-modernization-studio",
       "source": "extensions/java-modernization-studio",
       "description": "Drive the GitHub Copilot App Modernization for Java workflow from an interactive canvas: environment readiness, repo assessment, prioritized plan and progress, validation gates, and one-click predefined-task runs grounded in the repo's real artifacts.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "kotlin-mcp-development",
@@ -980,13 +980,13 @@
       "name": "release-notes-showcase",
       "source": "extensions/release-notes-showcase",
       "description": "Compose and refine launch-ready release notes with contributor callouts and export-friendly output.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "repo-actions-hub",
       "source": "extensions/repo-actions-hub",
       "description": "Browse repository GitHub Actions workflows, inspect recent runs, and trigger manual workflow_dispatch runs from a Copilot canvas.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "roundup",
@@ -1028,7 +1028,7 @@
       "name": "site-studio",
       "source": "extensions/site-studio",
       "description": "Plan, draft, and track a personal website section by section — a shared canvas where you and your agent author content, watch progress, and review every change.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "skill-image-gen",
@@ -1118,13 +1118,13 @@
       "name": "tiny-tool-town-submitter",
       "source": "extensions/tiny-tool-town-submitter",
       "description": "Inspect a repository, improve Tiny Tool Town readiness, submit its listing issue, and launch remediation work.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "token-pacman",
       "source": "extensions/token-pacman",
       "description": "Visualizes live session AI-credit usage as a Pac-Man board with pellets, ghosts, fruit milestones, and game-over limits.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "typescript-mcp-development",
@@ -1335,7 +1335,7 @@
       "name": "where-was-i",
       "source": "extensions/where-was-i",
       "description": "Reconstruct your dev context (branch, commits, uncommitted work, PR clues) and trigger a resume prompt to continue quickly.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     },
     {
       "name": "winappcli",
@@ -1399,7 +1399,7 @@
       "name": "work-hub",
       "source": "extensions/work-hub",
       "description": "Generic cross-repo command center canvas for GitHub Copilot with onboarding, focus planning, repo health, work signals, and session cleanup.",
-      "version": "1.0.1"
+      "version": "1.0.2"
     }
   ]
 }

eng/clean-materialized-plugins.mjs

@@ -28,6 +28,41 @@ const MATERIALIZED_SPECS = {
   },
 };
 
+function copyDirRecursive(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDirRecursive(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function moveEntry(srcPath, destPath) {
+  fs.mkdirSync(path.dirname(destPath), { recursive: true });
+  try {
+    fs.renameSync(srcPath, destPath);
+    return;
+  } catch (error) {
+    if (!["EXDEV", "EEXIST", "ENOTEMPTY", "EPERM"].includes(error?.code)) {
+      throw error;
+    }
+  }
+
+  const stats = fs.statSync(srcPath);
+  if (stats.isDirectory()) {
+    copyDirRecursive(srcPath, destPath);
+    fs.rmSync(srcPath, { recursive: true, force: true });
+    return;
+  }
+
+  fs.copyFileSync(srcPath, destPath);
+  fs.rmSync(srcPath, { force: true });
+}
+
 export function restoreManifestFromMaterializedFiles(pluginPath) {
   const pluginJsonPath = path.join(pluginPath, ".github/plugin", "plugin.json");
   if (!fs.existsSync(pluginJsonPath)) {
@@ -90,15 +125,22 @@ function cleanPlugin(pluginPath) {
   return { removed, manifestUpdated };
 }
 
-function cleanMaterializedExtensionPlugin(extensionPath) {
+export function cleanMaterializedExtensionPlugin(extensionPath) {
   const pluginJsonPath = path.join(extensionPath, ".github", "plugin", "plugin.json");
   let manifestUpdated = false;
   if (fs.existsSync(pluginJsonPath)) {
     const plugin = JSON.parse(fs.readFileSync(pluginJsonPath, "utf8"));
+    const extensionBundlePrefix = `extensions/${path.basename(extensionPath)}/`;
     if (plugin.extensions === "extensions") {
       plugin.extensions = ".";
-      fs.writeFileSync(pluginJsonPath, JSON.stringify(plugin, null, 2) + "\n", "utf8");
       manifestUpdated = true;
+    }
+    if (typeof plugin.logo === "string" && plugin.logo.startsWith(extensionBundlePrefix)) {
+      plugin.logo = plugin.logo.slice(extensionBundlePrefix.length);
+      manifestUpdated = true;
+    }
+    if (manifestUpdated) {
+      fs.writeFileSync(pluginJsonPath, JSON.stringify(plugin, null, 2) + "\n", "utf8");
       console.log(`  Updated ${path.basename(extensionPath)}/.github/plugin/plugin.json`);
     }
   }
@@ -108,12 +150,43 @@ function cleanMaterializedExtensionPlugin(extensionPath) {
     return { removed: 0, manifestUpdated };
   }
 
+  const bundleRoot = path.join(target, path.basename(extensionPath));
   const count = countFiles(target);
+  if (fs.existsSync(bundleRoot) && fs.statSync(bundleRoot).isDirectory()) {
+    for (const entry of fs.readdirSync(bundleRoot, { withFileTypes: true })) {
+      moveEntry(path.join(bundleRoot, entry.name), path.join(extensionPath, entry.name));
+    }
+    console.log(`  Restored ${path.basename(extensionPath)}/ from materialized extensions bundle`);
+  }
+
   fs.rmSync(target, { recursive: true, force: true });
   console.log(`  Removed ${path.basename(extensionPath)}/extensions/ (${count} files)`);
   return { removed: count, manifestUpdated };
 }
 
+function isExtensionPluginDirectory(extensionPath) {
+  if (fs.existsSync(path.join(extensionPath, "extension.mjs"))) {
+    return true;
+  }
+
+  const bundleEntry = path.join(extensionPath, "extensions", path.basename(extensionPath), "extension.mjs");
+  if (fs.existsSync(bundleEntry)) {
+    return true;
+  }
+
+  const pluginJsonPath = path.join(extensionPath, ".github", "plugin", "plugin.json");
+  if (!fs.existsSync(pluginJsonPath)) {
+    return false;
+  }
+
+  try {
+    const plugin = JSON.parse(fs.readFileSync(pluginJsonPath, "utf8"));
+    return plugin.extensions === "extensions";
+  } catch {
+    return false;
+  }
+}
+
 function countFiles(dir) {
   let count = 0;
   for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
@@ -204,7 +277,7 @@ function main() {
 
     for (const dirName of extensionDirs) {
       const extensionPath = path.join(EXTENSIONS_DIR, dirName);
-      if (!fs.existsSync(path.join(extensionPath, "extension.mjs"))) {
+      if (!isExtensionPluginDirectory(extensionPath)) {
         continue;
       }
       const { removed, manifestUpdated } = cleanMaterializedExtensionPlugin(extensionPath);

eng/generate-marketplace.mjs

@@ -62,6 +62,16 @@ function collectLocalPluginsFromRoot(rootDir, sourcePrefix, includeEntry = () =>
   return plugins;
 }
 
+function hasExtensionEntryPoint(extensionDir, extensionName) {
+  const candidateEntryPoints = [
+    path.join(extensionDir, "extension.mjs"),
+    path.join(extensionDir, "extensions", "extension.mjs"),
+    path.join(extensionDir, "extensions", extensionName, "extension.mjs"),
+  ];
+
+  return candidateEntryPoints.some((entryPointPath) => fs.existsSync(entryPointPath));
+}
+
 /**
  * Generate marketplace.json from plugin directories
  */
@@ -78,7 +88,7 @@ function generateMarketplace() {
     ...collectLocalPluginsFromRoot(
       EXTENSIONS_DIR,
       "extensions",
-      (entryName) => fs.existsSync(path.join(EXTENSIONS_DIR, entryName, "extension.mjs"))
+      (entryName) => hasExtensionEntryPoint(path.join(EXTENSIONS_DIR, entryName), entryName)
     )
   ];
 

eng/generate-website-data.mjs

@@ -35,6 +35,16 @@ const WEBSITE_SOURCE_DATA_DIR = path.join(WEBSITE_DIR, "data");
 const EXTERNAL_CANVAS_KEYWORD = "canvas";
 const EXTERNAL_CANVAS_PREVIEW_PATH = "assets/preview.png";
 
+function hasExtensionEntryPoint(extensionDir, extensionName) {
+  const candidateEntryPoints = [
+    path.join(extensionDir, "extension.mjs"),
+    path.join(extensionDir, "extensions", "extension.mjs"),
+    path.join(extensionDir, "extensions", extensionName, "extension.mjs"),
+  ];
+
+  return candidateEntryPoints.some((entryPointPath) => fs.existsSync(entryPointPath));
+}
+
 /**
  * Ensure the output directory exists
  */
@@ -544,7 +554,7 @@ function generatePluginsData(gitDates, resourceIndex = {}) {
     const extensionDirs = fs.readdirSync(EXTENSIONS_DIR, { withFileTypes: true })
       .filter((entry) => {
         if (!entry.isDirectory()) return false;
-        return fs.existsSync(path.join(EXTENSIONS_DIR, entry.name, "extension.mjs"));
+        return hasExtensionEntryPoint(path.join(EXTENSIONS_DIR, entry.name), entry.name);
       })
       .map((entry) => entry.name)
       .sort((a, b) => a.localeCompare(b));
@@ -1235,12 +1245,7 @@ function generateCanvasManifest(gitDates, commitSha) {
     .readdirSync(EXTENSIONS_DIR, { withFileTypes: true })
     .filter((entry) => {
       if (!entry.isDirectory()) return false;
-      const extensionEntryPoint = path.join(
+      return hasExtensionEntryPoint(path.join(EXTENSIONS_DIR, entry.name), entry.name);
-        EXTENSIONS_DIR,
-        entry.name,
-        "extension.mjs"
-      );
-      return fs.existsSync(extensionEntryPoint);
     })
     .sort((a, b) => a.name.localeCompare(b.name));
 

eng/materialize-plugins.mjs

@@ -24,15 +24,34 @@ function copyDirRecursive(src, dest) {
   }
 }
 
-function copyEntryRecursive(srcPath, destPath) {
+function moveEntry(srcPath, destPath) {
+  fs.mkdirSync(path.dirname(destPath), { recursive: true });
+  try {
+    fs.renameSync(srcPath, destPath);
+    return;
+  } catch (error) {
+    if (error?.code !== "EXDEV") {
+      throw error;
+    }
+  }
+
   const stats = fs.statSync(srcPath);
   if (stats.isDirectory()) {
     copyDirRecursive(srcPath, destPath);
+    fs.rmSync(srcPath, { recursive: true, force: true });
     return;
   }
 
-  fs.mkdirSync(path.dirname(destPath), { recursive: true });
   fs.copyFileSync(srcPath, destPath);
+  fs.rmSync(srcPath, { force: true });
+}
+
+function isRelativeAssetPath(assetPath) {
+  return typeof assetPath === "string" &&
+    assetPath.length > 0 &&
+    !/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(assetPath) &&
+    !assetPath.startsWith("data:") &&
+    !path.isAbsolute(assetPath);
 }
 
 /**
@@ -61,7 +80,7 @@ function resolveSource(relPath) {
 export function materializeExtensionPlugin(extensionPath) {
   const pluginJsonPath = path.join(extensionPath, ".github", "plugin", "plugin.json");
   if (!fs.existsSync(pluginJsonPath)) {
-    return { copiedEntries: 0, manifestUpdated: false, skipped: true };
+    return { movedEntries: 0, manifestUpdated: false, skipped: true };
   }
 
   let metadata;
@@ -72,20 +91,31 @@ export function materializeExtensionPlugin(extensionPath) {
   }
 
   const extensionContainerPath = path.join(extensionPath, "extensions");
+  const extensionBundlePath = path.join(extensionContainerPath, path.basename(extensionPath));
   fs.rmSync(extensionContainerPath, { recursive: true, force: true });
-  fs.mkdirSync(extensionContainerPath, { recursive: true });
+  fs.mkdirSync(extensionBundlePath, { recursive: true });
 
-  let copiedEntries = 0;
+  let movedEntries = 0;
   for (const entry of fs.readdirSync(extensionPath, { withFileTypes: true })) {
     if (entry.name === ".github" || entry.name === "extensions") {
       continue;
     }
 
-    copyEntryRecursive(
+    moveEntry(
       path.join(extensionPath, entry.name),
-      path.join(extensionContainerPath, entry.name)
+      path.join(extensionBundlePath, entry.name)
     );
-    copiedEntries++;
+    movedEntries++;
+  }
+
+  if (isRelativeAssetPath(metadata.logo)) {
+    const normalizedLogoPath = metadata.logo.replace(/\\/g, "/").replace(/^\.\//, "");
+    const bundledLogoPath = path.join(extensionBundlePath, normalizedLogoPath);
+    if (fs.existsSync(bundledLogoPath)) {
+      const rootLogoPath = path.join(extensionPath, normalizedLogoPath);
+      fs.mkdirSync(path.dirname(rootLogoPath), { recursive: true });
+      fs.copyFileSync(bundledLogoPath, rootLogoPath);
+    }
   }
 
   let manifestUpdated = false;
@@ -97,7 +127,7 @@ export function materializeExtensionPlugin(extensionPath) {
     fs.writeFileSync(pluginJsonPath, JSON.stringify(metadata, null, 2) + "\n", "utf8");
   }
 
-  return { copiedEntries, manifestUpdated, skipped: false };
+  return { movedEntries, manifestUpdated, skipped: false };
 }
 
 function materializePlugins() {
@@ -261,8 +291,8 @@ function materializePlugins() {
         }
 
         totalExtensionPlugins++;
-        totalExtensionPluginEntries += result.copiedEntries;
+        totalExtensionPluginEntries += result.movedEntries;
-        console.log(`✓ ${dirName}: materialized extension bundle into ./extensions (${result.copiedEntries} entries)`);
+        console.log(`✓ ${dirName}: materialized extension bundle into ./extensions (${result.movedEntries} entries)`);
       } catch (err) {
         console.error(`Error: Failed to materialize extension plugin ${dirName}: ${err.message}`);
         errors++;

eng/materialize-plugins.test.mjs

@@ -4,6 +4,7 @@ import os from "os";
 import path from "path";
 import { after, test } from "node:test";
 import { materializeExtensionPlugin } from "./materialize-plugins.mjs";
+import { cleanMaterializedExtensionPlugin } from "./clean-materialized-plugins.mjs";
 
 const tempDirs = [];
 
@@ -13,7 +14,7 @@ after(() => {
   }
 });
 
-test("materializeExtensionPlugin writes extension bundles to ./extensions and rewrites manifest", () => {
+test("materializeExtensionPlugin writes extension bundles to ./extensions and preserves root logo assets", () => {
   const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "materialize-extension-plugin-"));
   tempDirs.push(tempDir);
 
@@ -32,17 +33,57 @@ test("materializeExtensionPlugin writes extension bundles to ./extensions and re
   fs.writeFileSync(path.join(pluginDir, "assets", "preview.png"), "fake-image-bytes");
 
   const result = materializeExtensionPlugin(pluginDir);
+  const bundleRoot = path.join(pluginDir, "extensions", "extension-plugin");
 
   assert.equal(result.skipped, false);
   assert.equal(result.manifestUpdated, true);
-  assert.equal(result.copiedEntries, 3);
+  assert.equal(result.movedEntries, 3);
-  assert.equal(fs.existsSync(path.join(pluginDir, "extensions", "extension.mjs")), true);
+  assert.equal(fs.existsSync(path.join(bundleRoot, "extension.mjs")), true);
-  assert.equal(fs.existsSync(path.join(pluginDir, "extensions", "assets", "preview.png")), true);
+  assert.equal(fs.existsSync(path.join(bundleRoot, "assets", "preview.png")), true);
-  assert.equal(fs.existsSync(path.join(pluginDir, "extensions", "README.md")), true);
+  assert.equal(fs.existsSync(path.join(bundleRoot, "README.md")), true);
   assert.equal(fs.existsSync(path.join(pluginDir, "extensions", ".github")), false);
+  assert.equal(fs.existsSync(path.join(pluginDir, "extension.mjs")), false);
+  assert.equal(fs.existsSync(path.join(pluginDir, "README.md")), false);
+  assert.equal(fs.existsSync(path.join(pluginDir, "assets", "preview.png")), true);
 
   const pluginManifest = JSON.parse(
     fs.readFileSync(path.join(pluginDir, ".github", "plugin", "plugin.json"), "utf8")
   );
   assert.equal(pluginManifest.extensions, "extensions");
+  assert.equal(pluginManifest.logo, "assets/preview.png");
+});
+
+test("cleanMaterializedExtensionPlugin restores moved extension files to root", () => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "clean-materialized-extension-plugin-"));
+  tempDirs.push(tempDir);
+
+  const pluginDir = path.join(tempDir, "extension-plugin");
+  fs.mkdirSync(path.join(pluginDir, ".github", "plugin"), { recursive: true });
+  fs.mkdirSync(path.join(pluginDir, "assets"), { recursive: true });
+  fs.writeFileSync(path.join(pluginDir, ".github", "plugin", "plugin.json"), JSON.stringify({
+    name: "test-extension-plugin",
+    description: "test plugin",
+    version: "1.0.0",
+    logo: "assets/preview.png",
+    extensions: ".",
+  }, null, 2));
+  fs.writeFileSync(path.join(pluginDir, "extension.mjs"), "export default {};\n");
+  fs.writeFileSync(path.join(pluginDir, "README.md"), "# test\n");
+  fs.writeFileSync(path.join(pluginDir, "assets", "preview.png"), "fake-image-bytes");
+
+  materializeExtensionPlugin(pluginDir);
+  const result = cleanMaterializedExtensionPlugin(pluginDir);
+
+  assert.equal(result.removed, 3);
+  assert.equal(result.manifestUpdated, true);
+  assert.equal(fs.existsSync(path.join(pluginDir, "extension.mjs")), true);
+  assert.equal(fs.existsSync(path.join(pluginDir, "README.md")), true);
+  assert.equal(fs.existsSync(path.join(pluginDir, "assets", "preview.png")), true);
+  assert.equal(fs.existsSync(path.join(pluginDir, "extensions")), false);
+
+  const pluginManifest = JSON.parse(
+    fs.readFileSync(path.join(pluginDir, ".github", "plugin", "plugin.json"), "utf8")
+  );
+  assert.equal(pluginManifest.extensions, ".");
+  assert.equal(pluginManifest.logo, "assets/preview.png");
 });

extensions/accessibility-kanban/.github/plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "accessibility-kanban",
   "description": "Kanban board to manage accessibility issues, allow you to plan, track, and complete remediation work.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": {
     "name": "Aaron Powell",
     "url": "https://github.com/aaronpowell"

extensions/accessibility-kanban/extensions/extension.mjs

@@ -1,728 +0,0 @@
-import { CanvasError, createCanvas, joinSession } from "@github/copilot-sdk/extension";
-import http from "node:http";
-import fs from "node:fs";
-import os from "node:os";
-import path from "node:path";
-import { spawnSync } from "node:child_process";
-import { fileURLToPath } from "node:url";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const EXTENSION_NAME = "accessibility-kanban";
-const STATE_FILE_PREFIX = "repository-issues-kanban-state";
-const COLUMNS = ["backlog", "plan", "ready", "implement", "done"];
-const VALID_COLUMNS = new Set(COLUMNS);
-const REFRESH_ISSUES_ERROR = "Unable to refresh issues right now. Please try again.";
-
-let repoInfoCache = null;
-let githubTokenCache;
-let workspaceCwd = null;
-
-// The canvas request context reports the active session's *working directory*
-// (i.e. the repo checkout). Note this is different from `session.workspacePath`,
-// which points at the session-state folder (~/.copilot/session-state/<id>) and is
-// NOT a git repo — using it for git resolution is what caused the board to fail
-// with "Unable to detect the current repository from this workspace."
-function setWorkspaceCwd(dir) {
-  if (typeof dir !== "string" || !dir.trim() || dir === workspaceCwd) return;
-  workspaceCwd = dir;
-  repoInfoCache = null;
-  githubTokenCache = undefined;
-}
-
-function captureCwd(ctx) {
-  setWorkspaceCwd(ctx?.session?.workingDirectory);
-}
-
-function getWorkspaceCwd() {
-  return workspaceCwd || process.cwd();
-}
-
-// ─── Repo resolution ───
-
-function runCommand(command, args, cwd = process.cwd()) {
-  try {
-    const result = spawnSync(command, args, { cwd, encoding: "utf8" });
-    if (result.status === 0 && !result.error) {
-      return (result.stdout || "").trim();
-    }
-  } catch {
-    // Ignore and fall through to empty string.
-  }
-  return "";
-}
-
-function normalizeRepo(repo) {
-  if (typeof repo !== "string") return null;
-  const cleaned = repo
-    .trim()
-    .replace(/^https?:\/\/github\.com\//i, "")
-    .replace(/\.git$/i, "");
-  if (!/^[^/\s]+\/[^/\s]+$/.test(cleaned)) return null;
-  return cleaned;
-}
-
-function parseRepoFromRemoteUrl(remoteUrl) {
-  if (!remoteUrl) return null;
-  const cleaned = remoteUrl.trim().replace(/\.git$/i, "");
-
-  const sshMatch = cleaned.match(/^[^@]+@[^:]+:([^/]+\/[^/]+)$/);
-  if (sshMatch) return sshMatch[1];
-
-  const httpMatch = cleaned.match(/^https?:\/\/[^/]+\/([^/]+\/[^/]+)$/i);
-  if (httpMatch) return httpMatch[1];
-
-  const fallbackMatch = cleaned.match(/[:/]([^/:]+\/[^/:]+)$/);
-  return fallbackMatch ? fallbackMatch[1] : null;
-}
-
-function candidateCwds(preferredCwd) {
-  const candidates = [
-    preferredCwd,
-    workspaceCwd,
-    process.cwd(),
-    __dirname,
-    path.dirname(__dirname),
-    path.dirname(path.dirname(__dirname)),
-    path.dirname(path.dirname(path.dirname(__dirname))),
-  ].filter(Boolean);
-  return [...new Set(candidates)];
-}
-
-function resolveRepoFromGit(cwd) {
-  const gitRoot = runCommand("git", ["rev-parse", "--show-toplevel"], cwd);
-  if (!gitRoot) return null;
-
-  const fromGh = normalizeRepo(runCommand("gh", ["repo", "view", "--json", "nameWithOwner", "-q", ".nameWithOwner"], gitRoot));
-  if (fromGh) return fromGh;
-
-  const remoteUrl = runCommand("git", ["remote", "get-url", "origin"], gitRoot) || runCommand("git", ["config", "--get", "remote.origin.url"], gitRoot);
-  return normalizeRepo(parseRepoFromRemoteUrl(remoteUrl));
-}
-
-function resolveCurrentRepoInfo(cwd = getWorkspaceCwd()) {
-  const fromEnv = normalizeRepo(process.env.GITHUB_REPOSITORY || "");
-  if (fromEnv) return { repo: fromEnv, error: null };
-
-  for (const candidate of candidateCwds(cwd)) {
-    const repo = resolveRepoFromGit(candidate);
-    if (repo) return { repo, error: null };
-  }
-
-  return {
-    repo: "unknown/unknown",
-    error: "Unable to detect the current repository from this workspace.",
-  };
-}
-
-function getRepoInfo() {
-  const cwd = getWorkspaceCwd();
-  if (!repoInfoCache || repoInfoCache.cwd !== cwd) {
-    const resolved = resolveCurrentRepoInfo(cwd);
-    repoInfoCache = { ...resolved, cwd };
-  }
-  return repoInfoCache;
-}
-
-// ─── State persistence ───
-
-function copilotHome() {
-  return process.env.COPILOT_HOME || path.join(os.homedir(), ".copilot");
-}
-
-function stateFileName(repo) {
-  const key = String(repo || "unknown-unknown")
-    .toLowerCase()
-    .replace(/[^\w.-]+/g, "-");
-  return `${STATE_FILE_PREFIX}-${key}.json`;
-}
-
-function getStatePath(repo) {
-  return path.join(copilotHome(), "extensions", EXTENSION_NAME, "artifacts", stateFileName(repo));
-}
-
-function ensureStateDirectory(repo) {
-  fs.mkdirSync(path.dirname(getStatePath(repo)), { recursive: true });
-}
-
-function defaultState(repoInfo = getRepoInfo()) {
-  return {
-    repo: repoInfo.repo,
-    error: repoInfo.error,
-    updatedAt: new Date().toISOString(),
-    generation: Date.now(),
-    columns: COLUMNS,
-    availableLabels: [],
-    selectedLabels: [],
-    issues: [],
-  };
-}
-
-function normalizeLabelList(labels) {
-  const unique = new Set();
-  for (const label of Array.isArray(labels) ? labels : []) {
-    if (typeof label === "string" && label.trim()) unique.add(label.trim());
-  }
-  return [...unique];
-}
-
-function computeAvailableLabels(issues) {
-  const labels = new Set();
-  for (const issue of Array.isArray(issues) ? issues : []) {
-    for (const label of normalizeLabelList(issue.labels)) labels.add(label);
-  }
-  return [...labels].sort((a, b) => a.localeCompare(b));
-}
-
-function normalizeIssue(issue, repo, idx) {
-  if (!issue || !Number.isInteger(issue.number) || !issue.title) return null;
-  return {
-    number: issue.number,
-    title: issue.title,
-    url: issue.url || `https://github.com/${repo}/issues/${issue.number}`,
-    labels: normalizeLabelList(issue.labels),
-    column: VALID_COLUMNS.has(issue.column) ? issue.column : "backlog",
-    priority: issue.priority || "medium",
-    order: Number.isInteger(issue.order) ? issue.order : idx,
-    agentStatus: typeof issue.agentStatus === "string" ? issue.agentStatus : "",
-    agentActive: Boolean(issue.agentActive),
-    logs: Array.isArray(issue.logs) ? issue.logs : [],
-  };
-}
-
-function normalizeState(rawState, repoInfo = getRepoInfo()) {
-  const repo = repoInfo.repo;
-  const issues = Array.isArray(rawState?.issues)
-    ? rawState.issues.map((issue, idx) => normalizeIssue(issue, repo, idx)).filter(Boolean)
-    : [];
-  const availableLabels = computeAvailableLabels(issues);
-
-  return {
-    repo,
-    error: repoInfo.error || (rawState?.error === REFRESH_ISSUES_ERROR ? REFRESH_ISSUES_ERROR : null),
-    updatedAt: rawState?.updatedAt || new Date().toISOString(),
-    generation: rawState?.generation || Date.now(),
-    columns: Array.isArray(rawState?.columns) && rawState.columns.length ? rawState.columns : COLUMNS,
-    availableLabels,
-    selectedLabels: normalizeLabelList(rawState?.selectedLabels).filter((label) => availableLabels.includes(label)),
-    issues,
-  };
-}
-
-function loadState(repo) {
-  try {
-    return JSON.parse(fs.readFileSync(getStatePath(repo), "utf8"));
-  } catch {
-    return null;
-  }
-}
-
-function saveState(state) {
-  ensureStateDirectory(state.repo);
-  fs.writeFileSync(
-    getStatePath(state.repo),
-    JSON.stringify({ ...state, updatedAt: new Date().toISOString() }, null, 2),
-  );
-}
-
-function currentState() {
-  const repoInfo = getRepoInfo();
-  const loaded = loadState(repoInfo.repo);
-  const normalized = normalizeState(loaded || defaultState(repoInfo), repoInfo);
-  if (!loaded) saveState(normalized);
-  return normalized;
-}
-
-// ─── Issue operations ───
-
-function moveIssue(issueNumber, column) {
-  if (!VALID_COLUMNS.has(column)) {
-    throw new CanvasError("invalid_column", `Column must be one of: ${COLUMNS.join(", ")}`);
-  }
-  const state = currentState();
-  const issue = state.issues.find((i) => i.number === issueNumber);
-  if (!issue) {
-    throw new CanvasError("not_found", `Issue #${issueNumber} not found on the board`);
-  }
-
-  const prevColumn = issue.column;
-  issue.column = column;
-  issue.order = state.issues.filter((i) => i.column === column).length;
-
-  if (column === "done" || column === "backlog") {
-    issue.agentActive = false;
-    issue.agentStatus = column === "done" ? "Complete" : "";
-  }
-
-  saveState(state);
-  broadcast("state", state);
-  return { issue, prevColumn };
-}
-
-function updateIssueStatus(issueNumber, status, logEntry) {
-  const state = currentState();
-  const issue = state.issues.find((i) => i.number === issueNumber);
-  if (!issue) {
-    throw new CanvasError("not_found", `Issue #${issueNumber} not found on the board`);
-  }
-
-  if (issue.column === "backlog") return issue;
-
-  if (status !== undefined) issue.agentStatus = status;
-  if (logEntry) {
-    if (!issue.logs) issue.logs = [];
-    issue.logs.push({ timestamp: new Date().toISOString(), message: logEntry });
-  }
-  issue.agentActive = true;
-  saveState(state);
-  broadcast("state", state);
-  return issue;
-}
-
-function clearAgentStatus(issueNumber) {
-  const state = currentState();
-  const issue = state.issues.find((i) => i.number === issueNumber);
-  if (!issue) return;
-  issue.agentActive = false;
-  saveState(state);
-  broadcast("state", state);
-}
-
-function replaceIssues(issues) {
-  const existing = currentState();
-  const existingByNumber = new Map(existing.issues.map((i) => [i.number, i]));
-
-  const nextIssues = (Array.isArray(issues) ? issues : [])
-    .filter((i) => i && Number.isInteger(i.number) && i.title)
-    .map((issue, idx) => {
-      const prev = existingByNumber.get(issue.number);
-      const labels = Array.isArray(issue.labels)
-        ? issue.labels.map((l) => (typeof l === "string" ? l : l?.name)).filter(Boolean)
-        : [];
-      return {
-        number: issue.number,
-        title: issue.title,
-        url: issue.url || `https://github.com/${existing.repo}/issues/${issue.number}`,
-        labels: normalizeLabelList(labels),
-        column: VALID_COLUMNS.has(issue.column) ? issue.column : prev?.column || "backlog",
-        priority: issue.priority || prev?.priority || "medium",
-        order: Number.isInteger(issue.order) ? issue.order : prev?.order ?? idx,
-        agentStatus: prev?.agentStatus || "",
-        agentActive: Boolean(prev?.agentActive),
-        logs: Array.isArray(prev?.logs) ? prev.logs : [],
-      };
-    });
-
-  const availableLabels = computeAvailableLabels(nextIssues);
-  const next = {
-    ...existing,
-    issues: nextIssues,
-    availableLabels,
-    selectedLabels: normalizeLabelList(existing.selectedLabels).filter((label) => availableLabels.includes(label)),
-    error: getRepoInfo().error,
-  };
-  saveState(next);
-  broadcast("state", next);
-  return next;
-}
-
-function setSelectedLabels(labels) {
-  const state = currentState();
-  state.selectedLabels = normalizeLabelList(labels).filter((label) => state.availableLabels.includes(label));
-  saveState(state);
-  broadcast("state", state);
-  return state;
-}
-
-function resetBoard() {
-  const state = currentState();
-  const reset = {
-    ...state,
-    selectedLabels: [],
-    issues: state.issues.map((issue, idx) => ({
-      ...issue,
-      column: "backlog",
-      order: idx,
-      agentStatus: "",
-      agentActive: false,
-      logs: [],
-    })),
-  };
-  saveState(reset);
-  broadcast("state", reset);
-  return reset;
-}
-
-// ─── GitHub issue sync ───
-
-function resolveGitHubToken(cwd = getWorkspaceCwd()) {
-  if (githubTokenCache !== undefined) return githubTokenCache;
-  githubTokenCache = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || runCommand("gh", ["auth", "token"], cwd) || "";
-  return githubTokenCache;
-}
-
-function mapGitHubIssue(issue) {
-  return {
-    number: issue.number,
-    title: issue.title,
-    url: issue.html_url,
-    labels: (issue.labels || []).map((label) => (typeof label === "string" ? label : label.name)).filter(Boolean),
-  };
-}
-
-async function fetchOpenIssues(repo) {
-  if (!repo || repo === "unknown/unknown") {
-    throw new CanvasError("repo_unavailable", "Current repository could not be detected.");
-  }
-
-  const [owner, repoName] = repo.split("/");
-  const token = resolveGitHubToken();
-  const headers = {
-    Accept: "application/vnd.github+json",
-    "User-Agent": "repository-issues-kanban",
-  };
-  if (token) headers.Authorization = `token ${token}`;
-
-  const allIssues = [];
-  let page = 1;
-  while (page <= 10) {
-    const params = new URLSearchParams({
-      state: "open",
-      per_page: "100",
-      page: String(page),
-    });
-
-    const response = await fetch(`https://api.github.com/repos/${owner}/${repoName}/issues?${params}`, { headers });
-    if (!response.ok) {
-      const body = await response.text();
-      throw new CanvasError("github_api_error", `GitHub API request failed (${response.status}): ${body.slice(0, 200)}`);
-    }
-
-    const pageItems = await response.json();
-    const mapped = pageItems
-      .filter((item) => !item.pull_request)
-      .map(mapGitHubIssue);
-    allIssues.push(...mapped);
-
-    if (pageItems.length < 100) break;
-    page += 1;
-  }
-
-  return allIssues;
-}
-
-function mergeFetchedIssues(existingState, fetchedIssues) {
-  const existingByNumber = new Map(existingState.issues.map((issue) => [issue.number, issue]));
-
-  const mergedIssues = fetchedIssues.map((issue, idx) => {
-    const prev = existingByNumber.get(issue.number);
-    return {
-      number: issue.number,
-      title: issue.title,
-      url: issue.url || `https://github.com/${existingState.repo}/issues/${issue.number}`,
-      labels: normalizeLabelList(issue.labels),
-      column: VALID_COLUMNS.has(prev?.column) ? prev.column : "backlog",
-      priority: prev?.priority || "medium",
-      order: Number.isInteger(prev?.order) ? prev.order : idx,
-      agentStatus: prev?.agentStatus || "",
-      agentActive: Boolean(prev?.agentActive),
-      logs: Array.isArray(prev?.logs) ? prev.logs : [],
-    };
-  });
-
-  const availableLabels = computeAvailableLabels(mergedIssues);
-  return {
-    ...existingState,
-    issues: mergedIssues,
-    availableLabels,
-    selectedLabels: normalizeLabelList(existingState.selectedLabels).filter((label) => availableLabels.includes(label)),
-    error: getRepoInfo().error,
-  };
-}
-
-async function refreshIssuesSafe() {
-  const state = currentState();
-  if (state.repo === "unknown/unknown") {
-    saveState(state);
-    broadcast("state", state);
-    return state;
-  }
-
-  try {
-    const fetchedIssues = await fetchOpenIssues(state.repo);
-    const merged = mergeFetchedIssues(state, fetchedIssues);
-    saveState(merged);
-    broadcast("state", merged);
-    return merged;
-  } catch (error) {
-    console.error("[accessibility-kanban] Failed to refresh issues", error);
-    const failed = {
-      ...state,
-      error: REFRESH_ISSUES_ERROR,
-    };
-    saveState(failed);
-    broadcast("state", failed);
-    return failed;
-  }
-}
-
-// ─── SSE ───
-
-const sseClients = new Set();
-
-function broadcast(event, data) {
-  const msg = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
-  for (const res of sseClients) res.write(msg);
-}
-
-// ─── HTTP helpers ───
-
-function readJson(req) {
-  return new Promise((resolve, reject) => {
-    let body = "";
-    req.on("data", (c) => (body += c));
-    req.on("end", () => resolve(body ? JSON.parse(body) : {}));
-    req.on("error", reject);
-  });
-}
-
-function json(res, code, data) {
-  res.writeHead(code, { "Content-Type": "application/json" });
-  res.end(JSON.stringify(data));
-}
-
-// ─── HTTP server ───
-
-const server = http.createServer(async (req, res) => {
-  const url = new URL(req.url, `http://${req.headers.host}`);
-
-  if (url.pathname === "/events") {
-    res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive" });
-    sseClients.add(res);
-    req.on("close", () => sseClients.delete(res));
-    res.write(`event: state\ndata: ${JSON.stringify(currentState())}\n\n`);
-    return;
-  }
-
-  if (req.method === "GET" && url.pathname === "/api/state") {
-    json(res, 200, await refreshIssuesSafe());
-    return;
-  }
-
-  if (req.method === "POST" && url.pathname === "/api/move") {
-    const input = await readJson(req);
-    const { issue, prevColumn } = moveIssue(input.issue_number, input.column);
-
-    if (input.column === "plan" && prevColumn !== "plan") {
-      const repo = currentState().repo;
-      session.send({
-        prompt: `The Repository Issues Kanban just moved issue #${issue.number} ("${issue.title}") in ${repo} into the Plan column. Start planning the implementation for this issue in a background agent. Read the GitHub issue details, analyze the repository, and produce a concrete implementation plan. Use the kanban_update_status tool to post progress and then move the issue to "ready" with kanban_move_issue when planning is complete.`,
-      });
-    }
-
-    json(res, 200, { issue, state: currentState() });
-    return;
-  }
-
-  if (req.method === "POST" && url.pathname === "/api/update-status") {
-    const input = await readJson(req);
-    const issue = updateIssueStatus(input.issue_number, input.status, input.log);
-    if (input.done) clearAgentStatus(input.issue_number);
-    json(res, 200, { issue, state: currentState() });
-    return;
-  }
-
-  if (req.method === "POST" && url.pathname === "/api/filters") {
-    const input = await readJson(req);
-    const state = setSelectedLabels(input.labels);
-    json(res, 200, state);
-    return;
-  }
-
-  if (req.method === "GET" && url.pathname.startsWith("/api/logs/")) {
-    const num = parseInt(url.pathname.split("/").pop(), 10);
-    const state = currentState();
-    const issue = state.issues.find((i) => i.number === num);
-    if (!issue) {
-      json(res, 404, { error: "not found" });
-      return;
-    }
-    json(res, 200, { issue_number: num, title: issue.title, logs: issue.logs || [] });
-    return;
-  }
-
-  if (req.method === "POST" && url.pathname === "/api/reset") {
-    resetBoard();
-    json(res, 200, await refreshIssuesSafe());
-    return;
-  }
-
-  if (url.pathname === "/") {
-    res.writeHead(200, { "Content-Type": "text/html" });
-    res.end(fs.readFileSync(path.join(__dirname, "public", "index.html"), "utf8"));
-    return;
-  }
-
-  res.writeHead(404);
-  res.end("Not found");
-});
-
-await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
-function getPort() {
-  return server.address().port;
-}
-
-// ─── Canvas declaration ───
-
-const canvas = createCanvas({
-  id: "accessibility-kanban",
-  displayName: "Repository Issues Kanban",
-  description: "Kanban board for triaging open issues from the current repository into backlog, plan, ready, implement, and done lanes.",
-  actions: [
-    {
-      name: "get_state",
-      description: "Get the current board state including open repository issues and selected label filters.",
-      inputSchema: { type: "object", properties: {}, additionalProperties: false },
-      async handler(ctx) {
-        captureCwd(ctx);
-        return refreshIssuesSafe();
-      },
-    },
-    {
-      name: "move_issue",
-      description: "Move an issue to a different column on the kanban board.",
-      inputSchema: {
-        type: "object",
-        properties: {
-          issue_number: { type: "number", description: "GitHub issue number" },
-          column: { type: "string", enum: COLUMNS, description: "Target column" },
-        },
-        required: ["issue_number", "column"],
-        additionalProperties: false,
-      },
-      handler(ctx) {
-        captureCwd(ctx);
-        const { issue } = moveIssue(ctx.input.issue_number, ctx.input.column);
-        return { issue, state: currentState() };
-      },
-    },
-    {
-      name: "refresh_issues",
-      description: "Replace the board with issue data supplied by the agent.",
-      inputSchema: {
-        type: "object",
-        properties: {
-          issues: {
-            type: "array",
-            items: {
-              type: "object",
-              properties: {
-                number: { type: "number" },
-                title: { type: "string" },
-                url: { type: "string" },
-                labels: {
-                  type: "array",
-                  items: {
-                    oneOf: [
-                      { type: "string" },
-                      { type: "object", properties: { name: { type: "string" } }, required: ["name"] },
-                    ],
-                  },
-                },
-                column: { type: "string", enum: COLUMNS },
-                priority: { type: "string" },
-                order: { type: "number" },
-              },
-              required: ["number", "title"],
-              additionalProperties: true,
-            },
-          },
-        },
-        required: ["issues"],
-        additionalProperties: false,
-      },
-      handler(ctx) {
-        captureCwd(ctx);
-        return replaceIssues(ctx.input.issues);
-      },
-    },
-    {
-      name: "set_filters",
-      description: "Set selected label filters (OR semantics).",
-      inputSchema: {
-        type: "object",
-        properties: {
-          labels: { type: "array", items: { type: "string" } },
-        },
-        required: ["labels"],
-        additionalProperties: false,
-      },
-      handler(ctx) {
-        captureCwd(ctx);
-        return setSelectedLabels(ctx.input.labels);
-      },
-    },
-    {
-      name: "reset_state",
-      description: "Reset all cards to backlog and clear label filters, then refresh from live repo issues.",
-      inputSchema: { type: "object", properties: {}, additionalProperties: false },
-      async handler(ctx) {
-        captureCwd(ctx);
-        resetBoard();
-        return refreshIssuesSafe();
-      },
-    },
-  ],
-  async open(ctx) {
-    captureCwd(ctx);
-    const state = await refreshIssuesSafe();
-    broadcast("state", state);
-    return {
-      url: `http://127.0.0.1:${getPort()}`,
-      title: "Repository Issues Kanban",
-      status: `${state.issues.length} open issues in ${state.repo}`,
-    };
-  },
-});
-
-// ─── Join session (tools + canvas) ───
-
-const session = await joinSession({
-  canvases: [canvas],
-  tools: [
-    {
-      name: "kanban_move_issue",
-      description: "Move an issue on the repository issues kanban board to a new column (backlog, plan, ready, implement, done).",
-      parameters: {
-        type: "object",
-        properties: {
-          issue_number: { type: "number", description: "GitHub issue number" },
-          column: { type: "string", enum: COLUMNS, description: "Target column to move the issue to" },
-        },
-        required: ["issue_number", "column"],
-      },
-      handler: async (args) => {
-        const { issue } = moveIssue(args.issue_number, args.column);
-        return JSON.stringify({ moved: true, issue, state: currentState() });
-      },
-    },
-    {
-      name: "kanban_update_status",
-      description: "Update the agent status line and log on a kanban card while planning or implementing an issue.",
-      parameters: {
-        type: "object",
-        properties: {
-          issue_number: { type: "number", description: "GitHub issue number" },
-          status: { type: "string", description: "Short status text shown on the card." },
-          log: { type: "string", description: "Detailed log entry appended to the issue's agent log." },
-          done: { type: "boolean", description: "Set true to stop the active glow." },
-        },
-        required: ["issue_number", "status"],
-      },
-      handler: async (args) => {
-        const issue = updateIssueStatus(args.issue_number, args.status, args.log);
-        if (args.done) clearAgentStatus(args.issue_number);
-        return JSON.stringify({ updated: true, issue });
-      },
-    },
-  ],
-});

extensions/accessibility-kanban/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "accessibility-kanban",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "extension.mjs",
-  "dependencies": {
-    "@github/copilot-sdk": "latest"
-  },
-  "description": "Users drag accessibility issues across kanban lanes to plan, track, and complete remediation work.",
-  "keywords": [
-    "accessibility",
-    "kanban-board",
-    "issue-triage",
-    "planning-workflow",
-    "status-tracking",
-    "github-issues"
-  ]
-}

extensions/accessibility-kanban/public/index.html

@@ -1,754 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Repository Issues Kanban</title>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
-<style>
-:root {
-  --bg: #ffffff;
-  --outer: #f1f5f9;
-  --text: #111827;
-  --muted: #6b7280;
-  --meta: #94a3b8;
-  --border: #e5e7eb;
-  --coral: #ff7f50;
-  --azure: #0ea5e9;
-  --sage: #84cc16;
-  --violet: #a78bfa;
-  --radius: 6px;
-  --font: 'DM Sans', sans-serif;
-  --mono: 'IBM Plex Mono', monospace;
-}
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-body {
-  font-family: var(--font);
-  background: var(--outer);
-  color: var(--text);
-  height: 100vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-}
-
-.board-wrap {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg);
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-
-header {
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-header .breadcrumb {
-  font-size: 10px;
-  color: var(--meta);
-  font-weight: 400;
-}
-
-header .breadcrumb .sep {
-  margin: 0 5px;
-  color: var(--border);
-}
-
-header .breadcrumb .current {
-  color: var(--text);
-  font-weight: 600;
-  font-size: 13px;
-}
-
-header .spacer { flex: 1; }
-
-header .reset-btn {
-  font-family: var(--mono);
-  font-size: 9px;
-  color: var(--meta);
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 3px 8px;
-  cursor: pointer;
-  transition: all 0.15s;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-header .reset-btn:hover {
-  border-color: var(--coral);
-  color: var(--coral);
-}
-
-header .label-filter-container {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 50%;
-  overflow-x: auto;
-  padding: 2px 0;
-}
-
-.label-chip {
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 3px 8px;
-  font-size: 9px;
-  font-family: var(--mono);
-  color: var(--meta);
-  background: transparent;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.label-chip:hover {
-  border-color: var(--azure);
-  color: var(--azure);
-}
-
-.label-chip.selected {
-  border-color: var(--azure);
-  color: var(--azure);
-  background: rgba(14, 165, 233, 0.08);
-}
-
-.label-filter-empty {
-  font-family: var(--mono);
-  font-size: 9px;
-  color: var(--meta);
-}
-
-.error-banner {
-  margin: 8px 12px 0;
-  border: 1px solid rgba(255, 127, 80, 0.3);
-  background: rgba(255, 127, 80, 0.08);
-  color: #9a3412;
-  border-radius: 6px;
-  padding: 6px 8px;
-  font-size: 10px;
-  line-height: 1.4;
-}
-
-.board {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 0;
-  overflow: hidden;
-}
-
-.column {
-  background: var(--bg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-right: 1px solid var(--border);
-  border-top: 2px solid var(--border);
-}
-
-.column:last-child { border-right: none; }
-
-.col-backlog { border-top-color: var(--meta); }
-.col-plan { border-top-color: var(--azure); }
-.col-ready { border-top-color: var(--sage); }
-.col-implement { border-top-color: var(--coral); }
-.col-done { border-top-color: var(--violet); }
-
-.column-header {
-  padding: 10px 12px 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.column-header h2 {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--muted);
-}
-
-.column-header .count {
-  font-family: var(--mono);
-  font-size: 9px;
-  color: var(--meta);
-  margin-left: auto;
-}
-
-.card-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 6px 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 8px 10px;
-  cursor: grab;
-  transition: border-color 0.12s ease;
-  position: relative;
-}
-
-.card:hover {
-  border-color: var(--meta);
-}
-
-.card.dragging {
-  opacity: 0.35;
-}
-
-.card .issue-title {
-  font-size: 11px;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--text);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.card .issue-title .num {
-  font-family: var(--mono);
-  font-size: 10px;
-  color: var(--meta);
-  margin-right: 4px;
-}
-
-/* Agent status line */
-.card .agent-status {
-  font-family: var(--mono);
-  font-size: 9px;
-  color: var(--azure);
-  margin-top: 5px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.card .agent-status .pulse {
-  width: 4px; height: 4px;
-  border-radius: 50%;
-  background: var(--azure);
-  animation: pulse-dot 1.5s ease-in-out infinite;
-}
-
-/* Glowing border for active agent work */
-.card.agent-active {
-  border-color: rgba(14, 165, 233, 0.4);
-  box-shadow:
-    0 0 0 1px rgba(14, 165, 233, 0.15),
-    0 0 12px rgba(14, 165, 233, 0.1);
-  animation: glow-pulse 2.5s ease-in-out infinite;
-}
-
-@keyframes glow-pulse {
-  0%, 100% {
-    box-shadow:
-      0 0 0 1px rgba(14, 165, 233, 0.15),
-      0 0 12px rgba(14, 165, 233, 0.1);
-  }
-  50% {
-    box-shadow:
-      0 0 0 1px rgba(14, 165, 233, 0.3),
-      0 0 18px rgba(14, 165, 233, 0.15);
-  }
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* Log button */
-.card .log-btn {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 16px; height: 16px;
-  border-radius: 3px;
-  border: none;
-  background: transparent;
-  color: var(--meta);
-  font-size: 10px;
-  cursor: pointer;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.12s;
-}
-
-.card .log-btn:hover {
-  background: rgba(14,165,233,0.08);
-  color: var(--azure);
-}
-
-.card.agent-active .log-btn { display: flex; }
-.card.has-logs:hover .log-btn { display: flex; }
-
-/* Drop target highlight */
-.column.drop-target {
-  background: rgba(14,165,233,0.02);
-}
-
-/* Ghost (drag preview) */
-.ghost {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-  opacity: 0.85;
-  transform: rotate(1.5deg) scale(1.01);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
-}
-
-/* Log Modal */
-.modal-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.3);
-  z-index: 10000;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(2px);
-}
-
-.modal-overlay.open { display: flex; }
-
-.modal {
-  background: var(--bg);
-  border-radius: 10px;
-  width: 90%;
-  max-width: 480px;
-  max-height: 65vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-  border: 1px solid var(--border);
-}
-
-.modal-header {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.modal-header h3 {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.modal-header button {
-  border: none;
-  background: none;
-  font-size: 14px;
-  cursor: pointer;
-  color: var(--muted);
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.modal-header button:hover { background: var(--border); }
-
-.modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px;
-}
-
-.log-entry {
-  display: flex;
-  gap: 10px;
-  padding: 5px 0;
-  border-bottom: 1px solid rgba(0,0,0,0.03);
-}
-
-.log-entry:last-child { border-bottom: none; }
-
-.log-entry .ts {
-  font-family: var(--mono);
-  font-size: 9px;
-  color: var(--meta);
-  white-space: nowrap;
-  padding-top: 2px;
-  min-width: 48px;
-}
-
-.log-entry .msg {
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--text);
-}
-
-.empty-log {
-  font-size: 11px;
-  color: var(--meta);
-  text-align: center;
-  padding: 20px;
-}
-</style>
-</head>
-<body>
-<div class="board-wrap">
-<header>
-  <div class="breadcrumb">
-    <span id="repo-name">Current Repository</span><span class="sep">/</span><span class="current">Issues Kanban</span>
-  </div>
-  <span class="spacer"></span>
-  <div class="label-filter-container" id="label-filters"></div>
-  <button class="reset-btn" id="clear-filters-btn">Clear Labels</button>
-  <button class="reset-btn" id="reset-btn">Reset</button>
-</header>
-<div class="error-banner" id="error-banner" hidden></div>
-<div class="board" id="board"></div>
-</div>
-
-<!-- Log Modal -->
-<div class="modal-overlay" id="modal-overlay">
-  <div class="modal">
-    <div class="modal-header">
-      <h3 id="modal-title">Agent Log</h3>
-      <button id="modal-close">&times;</button>
-    </div>
-    <div class="modal-body" id="modal-body"></div>
-  </div>
-</div>
-
-<script>
-const COLUMNS = ["backlog", "plan", "ready", "implement", "done"];
-const COL_LABELS = { backlog: "Backlog", plan: "Plan", ready: "Ready", implement: "Implement", done: "Done" };
-
-let state = { repo: "", issues: [], availableLabels: [], selectedLabels: [], error: null };
-let dragState = null;
-
-// ─── Rendering ───
-
-function issueMatchesFilter(issue) {
-  if (!state.selectedLabels || state.selectedLabels.length === 0) return true;
-  const labels = Array.isArray(issue.labels) ? issue.labels : [];
-  return labels.some((label) => state.selectedLabels.includes(label));
-}
-
-function updateHeader() {
-  const repoEl = document.getElementById("repo-name");
-  repoEl.textContent = state.repo || "Current Repository";
-}
-
-function updateErrorBanner() {
-  const banner = document.getElementById("error-banner");
-  const message = state.error;
-  if (message) {
-    banner.hidden = false;
-    banner.textContent = message;
-    return;
-  }
-  banner.hidden = true;
-  banner.textContent = "";
-}
-
-function renderLabelFilters() {
-  const host = document.getElementById("label-filters");
-  host.innerHTML = "";
-
-  const labels = Array.isArray(state.availableLabels) ? state.availableLabels : [];
-  if (labels.length === 0) {
-    host.innerHTML = '<span class="label-filter-empty">No labels</span>';
-    return;
-  }
-
-  labels.forEach((label) => {
-    const chip = document.createElement("button");
-    chip.type = "button";
-    chip.className = "label-chip";
-    chip.textContent = label;
-    if (state.selectedLabels.includes(label)) chip.classList.add("selected");
-    chip.addEventListener("click", () => toggleLabel(label));
-    host.appendChild(chip);
-  });
-}
-
-function render() {
-  updateHeader();
-  updateErrorBanner();
-  renderLabelFilters();
-
-  const board = document.getElementById("board");
-  board.innerHTML = "";
-
-  COLUMNS.forEach((col) => {
-    const issues = state.issues
-      .filter((i) => i.column === col)
-      .filter(issueMatchesFilter)
-      .sort((a, b) => (a.order || 0) - (b.order || 0));
-
-    const colEl = document.createElement("div");
-    colEl.className = `column col-${col}`;
-    colEl.dataset.column = col;
-
-    colEl.innerHTML = `
-      <div class="column-header">
-        <h2>${COL_LABELS[col]}</h2>
-        <span class="count">${issues.length}</span>
-      </div>
-      <div class="card-list" data-column="${col}"></div>
-    `;
-
-    const list = colEl.querySelector(".card-list");
-    issues.forEach((issue) => {
-      const card = document.createElement("div");
-      const hasLogs = issue.logs && issue.logs.length > 0;
-      let cls = "card";
-      if (issue.agentActive) cls += " agent-active";
-      if (hasLogs) cls += " has-logs";
-      card.className = cls;
-      card.dataset.issueNumber = issue.number;
-
-      let statusHtml = "";
-      if (issue.agentStatus) {
-        statusHtml = `<div class="agent-status">${issue.agentActive ? '<span class="pulse"></span>' : ''}${escHtml(issue.agentStatus)}</div>`;
-      }
-
-      card.innerHTML = `
-        <button class="log-btn" title="View agent log">&#x25A3;</button>
-        <div class="issue-title"><span class="num">#${issue.number}</span>${escHtml(issue.title)}</div>
-        ${statusHtml}
-      `;
-
-      // Log button click
-      const logBtn = card.querySelector(".log-btn");
-      if (logBtn) {
-        logBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          openLogModal(issue);
-        });
-      }
-
-      // Pointer drag
-      card.addEventListener("pointerdown", (e) => startDrag(e, card, issue));
-      list.appendChild(card);
-    });
-
-    board.appendChild(colEl);
-  });
-}
-
-function escHtml(s) {
-  return String(s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-// ─── Log Modal ───
-
-function openLogModal(issue) {
-  const overlay = document.getElementById("modal-overlay");
-  const title = document.getElementById("modal-title");
-  const body = document.getElementById("modal-body");
-
-  title.textContent = `#${issue.number} — Agent Log`;
-
-  if (!issue.logs || issue.logs.length === 0) {
-    body.innerHTML = '<div class="empty-log">No agent activity logged yet.</div>';
-  } else {
-    body.innerHTML = issue.logs.map((l) => `
-      <div class="log-entry">
-        <span class="ts">${formatTime(l.timestamp)}</span>
-        <span class="msg">${escHtml(l.message)}</span>
-      </div>
-    `).join("");
-    body.scrollTop = body.scrollHeight;
-  }
-
-  overlay.classList.add("open");
-}
-
-function formatTime(ts) {
-  try {
-    const d = new Date(ts);
-    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  } catch { return ""; }
-}
-
-document.getElementById("modal-close").addEventListener("click", () => {
-  document.getElementById("modal-overlay").classList.remove("open");
-});
-
-document.getElementById("modal-overlay").addEventListener("click", (e) => {
-  if (e.target === e.currentTarget) {
-    e.currentTarget.classList.remove("open");
-  }
-});
-
-// ─── Pointer Drag & Drop ───
-
-function startDrag(e, cardEl, issue) {
-  if (e.button !== 0) return;
-  e.preventDefault();
-  cardEl.setPointerCapture(e.pointerId);
-
-  const rect = cardEl.getBoundingClientRect();
-  const ghost = cardEl.cloneNode(true);
-  ghost.className = "card ghost";
-  ghost.style.width = rect.width + "px";
-  ghost.style.left = rect.left + "px";
-  ghost.style.top = rect.top + "px";
-  document.body.appendChild(ghost);
-  cardEl.classList.add("dragging");
-
-  dragState = {
-    issue,
-    ghost,
-    cardEl,
-    offsetX: e.clientX - rect.left,
-    offsetY: e.clientY - rect.top,
-    pointerId: e.pointerId,
-  };
-
-  cardEl.addEventListener("pointermove", onDragMove);
-  cardEl.addEventListener("pointerup", onDragEnd);
-}
-
-function onDragMove(e) {
-  if (!dragState) return;
-  dragState.ghost.style.left = (e.clientX - dragState.offsetX) + "px";
-  dragState.ghost.style.top = (e.clientY - dragState.offsetY) + "px";
-
-  // Highlight drop target
-  document.querySelectorAll(".column").forEach((col) => {
-    const r = col.getBoundingClientRect();
-    if (e.clientX >= r.left && e.clientX <= r.right) {
-      col.classList.add("drop-target");
-    } else {
-      col.classList.remove("drop-target");
-    }
-  });
-}
-
-function onDragEnd(e) {
-  if (!dragState) return;
-  const { issue, ghost, cardEl } = dragState;
-
-  cardEl.classList.remove("dragging");
-  cardEl.releasePointerCapture(dragState.pointerId);
-  cardEl.removeEventListener("pointermove", onDragMove);
-  cardEl.removeEventListener("pointerup", onDragEnd);
-  ghost.remove();
-
-  document.querySelectorAll(".column.drop-target").forEach((col) => {
-    col.classList.remove("drop-target");
-  });
-
-  // Find target column
-  const targetCol = document.elementFromPoint(e.clientX, e.clientY)?.closest(".column");
-  if (targetCol && targetCol.dataset.column !== issue.column) {
-    moveIssue(issue.number, targetCol.dataset.column);
-  }
-
-  dragState = null;
-}
-
-// ─── API ───
-
-async function moveIssue(issueNumber, column) {
-  try {
-    const resp = await fetch("/api/move", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ issue_number: issueNumber, column }),
-    });
-    const data = await resp.json();
-    state = data.state;
-    render();
-  } catch (err) {
-    console.error("Move failed:", err);
-  }
-}
-
-async function setSelectedLabels(labels) {
-  try {
-    const resp = await fetch("/api/filters", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ labels }),
-    });
-    state = await resp.json();
-    render();
-  } catch (err) {
-    console.error("Updating filters failed:", err);
-  }
-}
-
-function toggleLabel(label) {
-  const selected = new Set(state.selectedLabels || []);
-  if (selected.has(label)) selected.delete(label);
-  else selected.add(label);
-  setSelectedLabels([...selected]);
-}
-
-// ─── SSE ───
-
-function connectSSE() {
-  const es = new EventSource("/events");
-  es.addEventListener("state", (e) => {
-    try {
-      state = JSON.parse(e.data);
-      render();
-    } catch {}
-  });
-  es.addEventListener("connected", () => {});
-  es.onerror = () => {
-    es.close();
-    setTimeout(connectSSE, 2000);
-  };
-}
-
-// ─── Init ───
-
-async function init() {
-  try {
-    const resp = await fetch("/api/state");
-    state = await resp.json();
-  } catch {}
-  render();
-  connectSSE();
-
-  document.getElementById("reset-btn").addEventListener("click", async () => {
-    if (!confirm("Reset all issues to backlog?")) return;
-    try {
-      const resp = await fetch("/api/reset", { method: "POST" });
-      state = await resp.json();
-      render();
-    } catch (err) {
-      console.error("Reset failed:", err);
-    }
-  });
-
-  document.getElementById("clear-filters-btn").addEventListener("click", () => {
-    setSelectedLabels([]);
-  });
-}
-
-init();
-</script>
-</body>
-</html>

extensions/apng-studio/.github/plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "apng-studio",
   "description": "Interactive GitHub Copilot app canvas extension for building Animated PNG (APNG) files from frames. Draw or upload frames, tune per-frame timing and compositing, preview live, send the result to your phone by QR, and export an animated .png.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": {
     "name": "Andrea Griffiths",
     "url": "https://github.com/AndreaGriffiths11"

extensions/apng-studio/extensions/.gitignore

@@ -1,11 +0,0 @@
-# Runtime user data — per-project frames and exports the extension writes
-# under its own directory at runtime. This is local state, not source.
-artifacts/
-
-# Exported animations
-*.apng
-
-# Node / editor / OS cruft
-node_modules/
-.DS_Store
-*.log

extensions/apng-studio/extensions/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 octobooth-1
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

extensions/apng-studio/extensions/README.md

@@ -1,97 +0,0 @@
-# APNG Studio
-
-An interactive [GitHub Copilot app](https://github.com/features/ai/github-app) **canvas extension** for building [Animated PNG (APNG)](https://wiki.mozilla.org/APNG_Specification) files from frames — draw or upload frames, tune the full practical APNG spec surface, preview live, and export an animated `.png`.
-
-The canvas renders in a side panel; the agent can also drive it through callable actions.
-
-<p align="center">
-  <img src="assets/demo.png" alt="An animated walkthrough of the APNG Studio canvas building an animation from frames" width="640" />
-</p>
-<p align="center"><em>APNG Studio in action — an animated PNG built with the canvas itself.</em></p>
-
-## Background
-
-APNG Studio started as a hallway conversation. During a demo shift at the WeAreDevelopers Congress I got talking with [Jeff](https://github.com/GekkeBoyJeff) about APNG (animated PNG) versus GIF: APNG keeps real alpha and full color where GIF can't. We wanted an easy way to actually build one, so we made this small canvas wrapper for creating APNGs.
-
-## Features
-
-- **Frames** — upload images or draw them on a built‑in canvas (pen/eraser, fill, onion‑skin, "start from last frame"). Reorder, duplicate, and delete frames.
-- **Per‑frame timing** — set the delay as an exact `numerator / denominator` fraction with a live `= N ms · N fps` readout.
-- **Per‑frame compositing** — `dispose_op` (None / Background / Previous) and `blend_op` (Source / Over) dropdowns, straight from the APNG spec.
-- **Apply to all** — set every frame's delay (ms), snap to an exact frame rate (fps), or apply dispose + blend in one click.
-- **Loop count** — `0` = infinite, or a fixed number of plays.
-- **Hidden first frame** — mark frame 1 as a static fallback: shown by non‑APNG viewers, excluded from the animation loop (encoded as a default image with no leading `fcTL`, `num_frames = N‑1`).
-- **Live preview** — a real animated PNG is assembled on every change and served from `/preview.png`; a **Reload** button re‑syncs state and rebuilds the preview.
-- **Send to phone** — a **Send to phone** button opens a QR code; scan it with your phone camera (same Wi‑Fi) to open the live animation in your phone's browser and save it. Served read‑only from a short‑lived, token‑gated LAN endpoint that shuts itself down after 10 minutes.
-- **Export** — writes a valid animated `.png` (APNG) to disk and returns its path. The `.png` extension keeps the file byte‑compatible with every PNG viewer: APNG‑aware ones (browsers, macOS Quick Look) animate it, others show the first frame as a static fallback.
-
-## Install
-
-### From GitHub Copilot (recommended)
-
-Ask Copilot to install the committed extension URL:
-
-```text
-Install this extension: https://github.com/github/awesome-copilot/tree/main/extensions/apng-studio
-```
-
-You can also copy the folder into one of these locations:
-
-- **User** — `~/.copilot/extensions/apng-studio/`, available in every project.
-- **Project** — `.github/extensions/apng-studio/` inside a repo, committed and shared with your team.
-
-Reload extensions in the app, then open the `apng-studio` canvas.
-
-### Manual
-
-Copy the source files into one of the extension directories above, keeping the layout:
-
-```
-apng-studio/
-├── extension.mjs      # entry point (required name)
-├── apng.mjs           # APNG codec + RGBA→PNG encoder
-├── qr.mjs             # dependency-free QR encoder (Send to phone)
-└── web/               # canvas iframe renderer
-    ├── index.html
-    ├── app.js
-    └── styles.css
-```
-
-Then reload extensions. The `@github/copilot-sdk` import is resolved by the host — **do not** add a `package.json` or `node_modules` for it.
-
-## Open the canvas
-
-Once installed, open the **APNG Studio** canvas from Copilot. Optional open input:
-
-| field       | type   | description                                    |
-| ----------- | ------ | ---------------------------------------------- |
-| `projectId` | string | Animation project id (defaults to `default`).  |
-| `name`      | string | Optional display name for the animation.       |
-
-Each project's frames persist on disk under `artifacts/<projectId>/`, so they survive reloads and are shared between every open panel and the agent actions. That folder is local user data and is **git‑ignored**.
-
-## Agent actions
-
-The extension exposes these callable actions on the `apng-studio` canvas:
-
-| action            | what it does                                                                                             |
-| ----------------- | ------------------------------------------------------------------------------------------------------- |
-| `get_state`       | Return project settings + per‑frame timing/compositing and total duration.                              |
-| `set_settings`    | Update `width`/`height` (only with 0 frames), `loops`, and `hiddenFirst`.                               |
-| `add_color_frame` | Append a solid‑color frame; accepts `delayNum`/`delayDen`/`disposeOp`/`blendOp`.                         |
-| `set_frame`       | Update one frame (`frameId`) or all (`all: true`): timing via `delayMs`/`fps`/`delayNum`+`delayDen`, plus `disposeOp`/`blendOp`. |
-| `clear_frames`    | Remove every frame.                                                                                      |
-| `export`          | Assemble and write the animated `.png` (APNG) to disk; returns the absolute path.                        |
-
-All actions accept an optional `projectId` to target a specific animation.
-
-## How it works
-
-- **`extension.mjs`** — one loopback HTTP server per open canvas instance serves the renderer, JSON state, per‑frame PNGs, the live `/preview.png`, and mutation endpoints. Server‑Sent Events (`/events`) push a `changed` signal so every open panel and the preview stay in sync. **Send to phone** spins up a separate, read‑only LAN server that serves only a landing page and the preview image, gated by a short‑lived random token and torn down on expiry.
-- **`apng.mjs`** — assembles the APNG chunk stream (`IHDR` / `acTL` / `fcTL` / `IDAT` / `fdAT` / `IEND`) with contiguous sequence numbers, plus a minimal RGBA→PNG encoder.
-- **`qr.mjs`** — a small, dependency‑free QR encoder (byte mode, error‑correction level M) used to render the **Send to phone** code. The QR is drawn into a PNG with the `apng.mjs` encoder.
-- **`web/`** — the iframe UI. It talks to its server over plain HTTP; there is no privileged host bridge.
-
-## License
-
-[MIT](./LICENSE)

extensions/apng-studio/extensions/apng.mjs

@@ -1,310 +0,0 @@
-// APNG codec helpers (Node-side).
-//
-// - assembleApng(): repackages a list of already-encoded PNG frames into a
-//   single Animated PNG, following https://wiki.mozilla.org/APNG_Specification.
-//   Because every frame is already a valid PNG sharing one IHDR, we only need
-//   to lift each frame's IDAT stream into the default image (frame 0) or into
-//   `fdAT` chunks (later frames), wrapped by `acTL`/`fcTL` control chunks with
-//   freshly computed CRC-32s. No re-compression required.
-// - encodeRgbaPng(): minimal RGBA8 PNG encoder used for agent-generated frames.
-
-import { deflateSync } from "node:zlib";
-
-const PNG_SIGNATURE = Uint8Array.from([137, 80, 78, 71, 13, 10, 26, 10]);
-
-const CRC_TABLE = (() => {
-    const table = new Uint32Array(256);
-    for (let n = 0; n < 256; n++) {
-        let c = n;
-        for (let k = 0; k < 8; k++) {
-            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
-        }
-        table[n] = c >>> 0;
-    }
-    return table;
-})();
-
-function crc32(bytes) {
-    let c = 0xffffffff;
-    for (let i = 0; i < bytes.length; i++) {
-        c = CRC_TABLE[(c ^ bytes[i]) & 0xff] ^ (c >>> 8);
-    }
-    return (c ^ 0xffffffff) >>> 0;
-}
-
-function concat(chunks) {
-    let total = 0;
-    for (const c of chunks) total += c.length;
-    const out = new Uint8Array(total);
-    let off = 0;
-    for (const c of chunks) {
-        out.set(c, off);
-        off += c.length;
-    }
-    return out;
-}
-
-function readU32(bytes, off) {
-    return (
-        ((bytes[off] << 24) |
-            (bytes[off + 1] << 16) |
-            (bytes[off + 2] << 8) |
-            bytes[off + 3]) >>>
-        0
-    );
-}
-
-// Build a PNG chunk: [length][type][data][crc], CRC over type+data.
-function chunk(type, data) {
-    const len = data.length;
-    const out = new Uint8Array(12 + len);
-    const view = new DataView(out.buffer);
-    view.setUint32(0, len);
-    out[4] = type.charCodeAt(0);
-    out[5] = type.charCodeAt(1);
-    out[6] = type.charCodeAt(2);
-    out[7] = type.charCodeAt(3);
-    out.set(data, 8);
-    view.setUint32(8 + len, crc32(out.subarray(4, 8 + len)));
-    return out;
-}
-
-// Parse the pieces of a PNG we care about: its IHDR data and the concatenated
-// IDAT stream. Ancillary/color chunks are intentionally dropped — every frame
-// shares a uniform RGBA8 IHDR so they are not needed.
-function parsePng(bytes) {
-    for (let i = 0; i < PNG_SIGNATURE.length; i++) {
-        if (bytes[i] !== PNG_SIGNATURE[i]) {
-            throw new Error("Not a PNG (bad signature)");
-        }
-    }
-    let off = 8;
-    let ihdrData = null;
-    let width = 0;
-    let height = 0;
-    const idatParts = [];
-    while (off + 8 <= bytes.length) {
-        const len = readU32(bytes, off);
-        const type = String.fromCharCode(
-            bytes[off + 4],
-            bytes[off + 5],
-            bytes[off + 6],
-            bytes[off + 7]
-        );
-        const dataStart = off + 8;
-        const data = bytes.subarray(dataStart, dataStart + len);
-        if (type === "IHDR") {
-            ihdrData = data.slice();
-            width = readU32(data, 0);
-            height = readU32(data, 4);
-        } else if (type === "IDAT") {
-            idatParts.push(data.slice());
-        } else if (type === "IEND") {
-            break;
-        }
-        off = dataStart + len + 4; // skip data + CRC
-    }
-    if (!ihdrData) throw new Error("PNG missing IHDR");
-    if (idatParts.length === 0) throw new Error("PNG missing IDAT");
-    return { ihdrData, width, height, idat: concat(idatParts) };
-}
-
-function acTLChunk(numFrames, numPlays) {
-    const data = new Uint8Array(8);
-    const view = new DataView(data.buffer);
-    view.setUint32(0, numFrames >>> 0);
-    view.setUint32(4, numPlays >>> 0);
-    return chunk("acTL", data);
-}
-
-// dispose_op: 0 = NONE (leave as-is), 1 = BACKGROUND (clear region to transparent
-//   black), 2 = PREVIOUS (revert region to what it was before this frame).
-// blend_op:   0 = SOURCE (overwrite region, alpha included), 1 = OVER (alpha-blend
-//   this frame over the current canvas contents).
-function fcTLChunk(sequence, width, height, params) {
-    const {
-        delayNum = 100,
-        delayDen = 1000,
-        disposeOp = 0,
-        blendOp = 0,
-        xOffset = 0,
-        yOffset = 0,
-    } = params || {};
-    const data = new Uint8Array(26);
-    const view = new DataView(data.buffer);
-    view.setUint32(0, sequence >>> 0); // sequence_number
-    view.setUint32(4, width >>> 0); // width
-    view.setUint32(8, height >>> 0); // height
-    view.setUint32(12, xOffset >>> 0); // x_offset
-    view.setUint32(16, yOffset >>> 0); // y_offset
-    view.setUint16(20, delayNum & 0xffff); // delay_num
-    view.setUint16(22, delayDen & 0xffff); // delay_den
-    data[24] = disposeOp & 0xff; // dispose_op
-    data[25] = blendOp & 0xff; // blend_op
-    return chunk("fcTL", data);
-}
-
-function fdATChunk(sequence, idat) {
-    const data = new Uint8Array(4 + idat.length);
-    new DataView(data.buffer).setUint32(0, sequence >>> 0);
-    data.set(idat, 4);
-    return chunk("fdAT", data);
-}
-
-const clampU16 = (n, dflt = 0) => {
-    const v = Math.round(Number(n));
-    return Number.isFinite(v) ? Math.max(0, Math.min(0xffff, v)) : dflt;
-};
-const clampDen = (n) => {
-    const v = Math.round(Number(n));
-    return Number.isFinite(v) && v >= 1 ? Math.min(0xffff, v) : 1000;
-};
-const clampOp = (n, hi) => {
-    const v = Math.round(Number(n));
-    return Number.isFinite(v) ? Math.max(0, Math.min(hi, v)) : 0;
-};
-
-// Normalize a caller-supplied frame descriptor into the exact fcTL fields.
-// Timing accepts either delayNum/delayDen (exact) or a delayMs shorthand
-// (treated as delayNum ms over a 1000 denominator).
-function frameParams(f) {
-    let delayNum;
-    let delayDen;
-    if (f.delayNum != null) {
-        delayNum = clampU16(f.delayNum, 100);
-        delayDen = clampDen(f.delayDen);
-    } else {
-        delayNum = clampU16(f.delayMs, 100);
-        delayDen = 1000;
-    }
-    return {
-        delayNum,
-        delayDen,
-        disposeOp: clampOp(f.disposeOp, 2),
-        blendOp: clampOp(f.blendOp, 1),
-    };
-}
-
-// The APNG spec forbids APNG_DISPOSE_OP_PREVIOUS on the first fcTL (decoders
-// must treat it as BACKGROUND). Normalize it for whichever frame is composited
-// first so our output is well-defined instead of relying on decoder leniency.
-function firstFrameParams(f) {
-    const p = frameParams(f);
-    if (p.disposeOp === 2) p.disposeOp = 1;
-    return p;
-}
-
-/**
- * Assemble an APNG from a list of PNG frames.
- *
- * @param {Array<{png: Uint8Array, delayMs?: number, delayNum?: number, delayDen?: number, disposeOp?: number, blendOp?: number}>} frames
- * @param {{loops?: number, hiddenFirst?: boolean}} [options]
- *   loops: 0 = infinite. hiddenFirst: when true (and >=2 frames) the first frame
- *   becomes the static default image shown by non-APNG viewers and is NOT part
- *   of the animation; frames 2..N make up the loop.
- * @returns {Uint8Array} APNG bytes.
- */
-export function assembleApng(frames, options = {}) {
-    if (!Array.isArray(frames) || frames.length === 0) {
-        throw new Error("assembleApng requires at least one frame");
-    }
-    const loops = Math.max(0, Math.round(Number(options.loops) || 0));
-    const hiddenFirst = !!options.hiddenFirst && frames.length >= 2;
-    const parsed = frames.map((f) => parsePng(f.png));
-
-    const width = parsed[0].width;
-    const height = parsed[0].height;
-    for (const p of parsed) {
-        if (p.width !== width || p.height !== height) {
-            throw new Error(
-                `All frames must share dimensions (${width}x${height}); found ${p.width}x${p.height}`
-            );
-        }
-    }
-
-    const parts = [PNG_SIGNATURE, chunk("IHDR", parsed[0].ihdrData)];
-    const numFrames = hiddenFirst ? parsed.length - 1 : parsed.length;
-    parts.push(acTLChunk(numFrames, loops));
-
-    let seq = 0;
-    if (hiddenFirst) {
-        // Default image = frame 0, with no fcTL, so it is not animated.
-        parts.push(chunk("IDAT", parsed[0].idat));
-        for (let i = 1; i < parsed.length; i++) {
-            const params = i === 1 ? firstFrameParams(frames[i]) : frameParams(frames[i]);
-            parts.push(fcTLChunk(seq++, width, height, params));
-            parts.push(fdATChunk(seq++, parsed[i].idat));
-        }
-    } else {
-        // Frame 0 = default image AND first animation frame: fcTL then IDAT.
-        parts.push(fcTLChunk(seq++, width, height, firstFrameParams(frames[0])));
-        parts.push(chunk("IDAT", parsed[0].idat));
-        // Remaining frames: fcTL then fdAT (each carries a sequence number).
-        for (let i = 1; i < parsed.length; i++) {
-            parts.push(fcTLChunk(seq++, width, height, frameParams(frames[i])));
-            parts.push(fdATChunk(seq++, parsed[i].idat));
-        }
-    }
-
-    parts.push(chunk("IEND", new Uint8Array(0)));
-    return concat(parts);
-}
-
-/**
- * Encode an 8-bit RGBA pixel buffer into a (non-animated) PNG.
- *
- * @param {number} width
- * @param {number} height
- * @param {Uint8Array} rgba length must be width*height*4
- * @returns {Uint8Array} PNG bytes.
- */
-export function encodeRgbaPng(width, height, rgba) {
-    if (rgba.length !== width * height * 4) {
-        throw new Error("rgba length does not match width*height*4");
-    }
-    const ihdr = new Uint8Array(13);
-    const view = new DataView(ihdr.buffer);
-    view.setUint32(0, width >>> 0);
-    view.setUint32(4, height >>> 0);
-    ihdr[8] = 8; // bit depth
-    ihdr[9] = 6; // color type: RGBA
-    ihdr[10] = 0; // compression
-    ihdr[11] = 0; // filter method
-    ihdr[12] = 0; // interlace
-
-    // Filtered raw scanlines: one leading filter byte (0 = None) per row.
-    const stride = width * 4;
-    const raw = new Uint8Array((stride + 1) * height);
-    for (let y = 0; y < height; y++) {
-        const src = y * stride;
-        const dst = y * (stride + 1);
-        raw[dst] = 0;
-        raw.set(rgba.subarray(src, src + stride), dst + 1);
-    }
-    const compressed = deflateSync(raw, { level: 9 });
-
-    return concat([
-        PNG_SIGNATURE,
-        chunk("IHDR", ihdr),
-        chunk("IDAT", new Uint8Array(compressed.buffer, compressed.byteOffset, compressed.length)),
-        chunk("IEND", new Uint8Array(0)),
-    ]);
-}
-
-/**
- * Convenience: encode a solid-color frame as a PNG.
- * @param {number} width
- * @param {number} height
- * @param {{r:number,g:number,b:number,a:number}} color 0-255 components
- */
-export function solidColorPng(width, height, color) {
-    const rgba = new Uint8Array(width * height * 4);
-    const { r, g, b, a } = color;
-    for (let i = 0; i < rgba.length; i += 4) {
-        rgba[i] = r;
-        rgba[i + 1] = g;
-        rgba[i + 2] = b;
-        rgba[i + 3] = a;
-    }
-    return encodeRgbaPng(width, height, rgba);
-}

extensions/apng-studio/extensions/copilot-extension.json

@@ -1,4 +0,0 @@
-{
-    "name": "apng-studio",
-    "version": 1
-}

extensions/apng-studio/qr.mjs

@@ -1,438 +0,0 @@
-// Minimal, dependency-free QR Code encoder (byte mode, EC level M, versions
-// 1-10). Enough to encode a short LAN URL for the "Send to phone" feature.
-//
-// Returns a square matrix of 0/1 modules. Rendering to PNG is done by the
-// caller via the RGBA->PNG encoder in apng.mjs, so this file has no I/O.
-//
-// Reference: ISO/IEC 18004. Verified module-for-module against the python
-// `qrcode` reference encoder (see eng verification) for forced masks 0-7.
-
-// ---- Galois field GF(256), primitive polynomial 0x11d --------------------
-const EXP = new Uint8Array(512);
-const LOG = new Uint8Array(256);
-(() => {
-    let x = 1;
-    for (let i = 0; i < 255; i++) {
-        EXP[i] = x;
-        LOG[x] = i;
-        x <<= 1;
-        if (x & 0x100) x ^= 0x11d;
-    }
-    for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255];
-})();
-
-const gfMul = (a, b) => (a === 0 || b === 0 ? 0 : EXP[LOG[a] + LOG[b]]);
-
-// Reed-Solomon generator polynomial of the given degree.
-function rsGenerator(degree) {
-    let poly = [1];
-    for (let i = 0; i < degree; i++) {
-        const next = new Array(poly.length + 1).fill(0);
-        for (let j = 0; j < poly.length; j++) {
-            next[j] ^= gfMul(poly[j], EXP[i]);
-            next[j + 1] ^= poly[j];
-        }
-        poly = next;
-    }
-    return poly;
-}
-
-function rsEncode(data, ecLen) {
-    const gen = rsGenerator(ecLen); // constant-first; gen[ecLen] is the leading 1
-    const res = new Array(ecLen).fill(0);
-    for (const byte of data) {
-        const factor = byte ^ res[0];
-        res.shift();
-        res.push(0);
-        // Use the non-leading generator coefficients in descending-degree order.
-        for (let i = 0; i < ecLen; i++) res[i] ^= gfMul(gen[ecLen - 1 - i], factor);
-    }
-    return res;
-}
-
-// ---- Version tables (EC level M) ----------------------------------------
-// [ecPerBlock, [[blockCount, dataCodewordsPerBlock], ...]]
-const EC_BLOCKS_M = {
-    1: [10, [[1, 16]]],
-    2: [16, [[1, 28]]],
-    3: [26, [[1, 44]]],
-    4: [18, [[2, 32]]],
-    5: [24, [[2, 43]]],
-    6: [16, [[4, 27]]],
-    7: [18, [[4, 31]]],
-    8: [22, [[2, 38], [2, 39]]],
-    9: [22, [[3, 36], [2, 37]]],
-    10: [26, [[4, 43], [1, 44]]],
-};
-
-const ALIGN_POS = {
-    1: [], 2: [6, 18], 3: [6, 22], 4: [6, 26], 5: [6, 30],
-    6: [6, 34], 7: [6, 22, 38], 8: [6, 24, 42], 9: [6, 26, 46], 10: [6, 28, 50],
-};
-
-const totalDataCodewords = (v) =>
-    EC_BLOCKS_M[v][1].reduce((sum, [count, dc]) => sum + count * dc, 0);
-
-const charCountBits = (v) => (v <= 9 ? 8 : 16);
-
-function chooseVersion(dataLen) {
-    for (let v = 1; v <= 10; v++) {
-        const capacityBits = totalDataCodewords(v) * 8;
-        const needed = 4 + charCountBits(v) + dataLen * 8;
-        if (needed <= capacityBits) return v;
-    }
-    throw new Error("Data too long for QR versions 1-10 (byte mode, EC M)");
-}
-
-// ---- Bit buffer ----------------------------------------------------------
-class BitBuffer {
-    constructor() {
-        this.bits = [];
-    }
-    put(value, length) {
-        for (let i = length - 1; i >= 0; i--) this.bits.push((value >>> i) & 1);
-    }
-    get length() {
-        return this.bits.length;
-    }
-}
-
-function buildCodewords(bytes, version) {
-    const buf = new BitBuffer();
-    buf.put(0b0100, 4); // byte mode
-    buf.put(bytes.length, charCountBits(version));
-    for (const b of bytes) buf.put(b, 8);
-
-    const capacityBits = totalDataCodewords(version) * 8;
-    // Terminator (up to 4 zero bits).
-    const term = Math.min(4, capacityBits - buf.length);
-    buf.put(0, term);
-    // Pad to a byte boundary.
-    while (buf.length % 8 !== 0) buf.bits.push(0);
-    // Pad bytes.
-    const padBytes = [0xec, 0x11];
-    let pi = 0;
-    while (buf.length < capacityBits) {
-        buf.put(padBytes[pi++ % 2], 8);
-    }
-
-    // Pack bits into data codewords.
-    const data = [];
-    for (let i = 0; i < buf.length; i += 8) {
-        let byte = 0;
-        for (let j = 0; j < 8; j++) byte = (byte << 1) | buf.bits[i + j];
-        data.push(byte);
-    }
-
-    // Split into blocks, compute EC, then interleave.
-    const [ecPerBlock, groups] = EC_BLOCKS_M[version];
-    const dataBlocks = [];
-    const ecBlocks = [];
-    let offset = 0;
-    for (const [count, dcPerBlock] of groups) {
-        for (let b = 0; b < count; b++) {
-            const block = data.slice(offset, offset + dcPerBlock);
-            offset += dcPerBlock;
-            dataBlocks.push(block);
-            ecBlocks.push(rsEncode(block, ecPerBlock));
-        }
-    }
-
-    const result = [];
-    const maxData = Math.max(...dataBlocks.map((b) => b.length));
-    for (let i = 0; i < maxData; i++) {
-        for (const block of dataBlocks) if (i < block.length) result.push(block[i]);
-    }
-    for (let i = 0; i < ecPerBlock; i++) {
-        for (const block of ecBlocks) result.push(block[i]);
-    }
-    return result;
-}
-
-// ---- Matrix construction -------------------------------------------------
-function makeBaseMatrix(size) {
-    const m = Array.from({ length: size }, () => new Array(size).fill(null));
-    return m;
-}
-
-function placeFinder(m, r, c) {
-    for (let i = -1; i <= 7; i++) {
-        for (let j = -1; j <= 7; j++) {
-            const rr = r + i;
-            const cc = c + j;
-            if (rr < 0 || cc < 0 || rr >= m.length || cc >= m.length) continue;
-            const inRing =
-                i >= 0 && i <= 6 && j >= 0 && j <= 6 &&
-                (i === 0 || i === 6 || j === 0 || j === 6);
-            const inCore = i >= 2 && i <= 4 && j >= 2 && j <= 4;
-            m[rr][cc] = inRing || inCore ? 1 : 0;
-        }
-    }
-}
-
-function placeAlignment(m, version) {
-    const pos = ALIGN_POS[version];
-    for (const r of pos) {
-        for (const c of pos) {
-            // Skip the three finder corners.
-            if ((r === 6 && c === 6) || (r === 6 && c === m.length - 7) || (r === m.length - 7 && c === 6)) continue;
-            if (m[r][c] !== null) continue;
-            for (let i = -2; i <= 2; i++) {
-                for (let j = -2; j <= 2; j++) {
-                    const ring = Math.max(Math.abs(i), Math.abs(j));
-                    m[r + i][c + j] = ring === 1 ? 0 : 1;
-                }
-            }
-        }
-    }
-}
-
-function reserveFormat(m) {
-    const size = m.length;
-    // Marks format/version areas as reserved (use a sentinel we overwrite later).
-    // Handled implicitly: we set them during placement by skipping null-only.
-    return size;
-}
-
-const FORMAT_MASK = 0x5412;
-
-function bchFormat(data5) {
-    let d = data5 << 10;
-    const g = 0b10100110111;
-    for (let i = 4; i >= 0; i--) {
-        if ((d >> (i + 10)) & 1) d ^= g << i;
-    }
-    return ((data5 << 10) | d) ^ FORMAT_MASK;
-}
-
-function bchVersion(version) {
-    let d = version << 12;
-    const g = 0b1111100100101;
-    for (let i = 5; i >= 0; i--) {
-        if ((d >> (i + 12)) & 1) d ^= g << i;
-    }
-    return (version << 12) | d;
-}
-
-const MASKS = [
-    (r, c) => (r + c) % 2 === 0,
-    (r, c) => r % 2 === 0,
-    (r, c) => c % 3 === 0,
-    (r, c) => (r + c) % 3 === 0,
-    (r, c) => (Math.floor(r / 2) + Math.floor(c / 3)) % 2 === 0,
-    (r, c) => ((r * c) % 2) + ((r * c) % 3) === 0,
-    (r, c) => (((r * c) % 2) + ((r * c) % 3)) % 2 === 0,
-    (r, c) => (((r + c) % 2) + ((r * c) % 3)) % 2 === 0,
-];
-
-function isFunctionModule(reserved, r, c) {
-    return reserved[r][c];
-}
-
-function buildReserved(size, version) {
-    const reserved = Array.from({ length: size }, () => new Array(size).fill(false));
-    const mark = (r, c) => {
-        if (r >= 0 && c >= 0 && r < size && c < size) reserved[r][c] = true;
-    };
-    // Finders + separators.
-    for (const [br, bc] of [[0, 0], [0, size - 7], [size - 7, 0]]) {
-        for (let i = -1; i <= 7; i++) for (let j = -1; j <= 7; j++) mark(br + i, bc + j);
-    }
-    // Timing.
-    for (let i = 0; i < size; i++) {
-        mark(6, i);
-        mark(i, 6);
-    }
-    // Alignment.
-    const pos = ALIGN_POS[version];
-    for (const r of pos) for (const c of pos) {
-        if ((r === 6 && c === 6) || (r === 6 && c === size - 7) || (r === size - 7 && c === 6)) continue;
-        for (let i = -2; i <= 2; i++) for (let j = -2; j <= 2; j++) mark(r + i, c + j);
-    }
-    // Format info areas.
-    for (let i = 0; i < 9; i++) {
-        mark(8, i);
-        mark(i, 8);
-    }
-    for (let i = 0; i < 8; i++) {
-        mark(8, size - 1 - i);
-        mark(size - 1 - i, 8);
-    }
-    mark(size - 8, 8); // dark module
-    // Version info (v >= 7).
-    if (version >= 7) {
-        for (let i = 0; i < 6; i++) for (let j = 0; j < 3; j++) {
-            mark(i, size - 11 + j);
-            mark(size - 11 + j, i);
-        }
-    }
-    return reserved;
-}
-
-function placeTiming(m) {
-    const size = m.length;
-    for (let i = 0; i < size; i++) {
-        if (m[6][i] === null) m[6][i] = i % 2 === 0 ? 1 : 0;
-        if (m[i][6] === null) m[i][6] = i % 2 === 0 ? 1 : 0;
-    }
-}
-
-function placeData(m, reserved, codewords) {
-    const size = m.length;
-    const bits = [];
-    for (const cw of codewords) for (let i = 7; i >= 0; i--) bits.push((cw >> i) & 1);
-    let idx = 0;
-    let upward = true;
-    for (let col = size - 1; col > 0; col -= 2) {
-        if (col === 6) col--; // skip vertical timing column
-        for (let n = 0; n < size; n++) {
-            const row = upward ? size - 1 - n : n;
-            for (let k = 0; k < 2; k++) {
-                const c = col - k;
-                if (reserved[row][c]) continue;
-                m[row][c] = idx < bits.length ? bits[idx++] : 0;
-            }
-        }
-        upward = !upward;
-    }
-}
-
-function applyMask(m, reserved, maskFn) {
-    const out = m.map((row) => row.slice());
-    for (let r = 0; r < m.length; r++) {
-        for (let c = 0; c < m.length; c++) {
-            if (reserved[r][c]) continue;
-            if (maskFn(r, c)) out[r][c] ^= 1;
-        }
-    }
-    return out;
-}
-
-function placeFormatBits(m, maskIndex) {
-    const size = m.length;
-    // EC level M = 0b00. Format data = (ecBits << 3) | maskIndex.
-    const format = bchFormat((0b00 << 3) | maskIndex);
-    const bits = [];
-    for (let i = 14; i >= 0; i--) bits.push((format >> i) & 1);
-    // Around top-left finder.
-    const coords1 = [
-        [8, 0], [8, 1], [8, 2], [8, 3], [8, 4], [8, 5], [8, 7], [8, 8],
-        [7, 8], [5, 8], [4, 8], [3, 8], [2, 8], [1, 8], [0, 8],
-    ];
-    coords1.forEach(([r, c], i) => (m[r][c] = bits[i]));
-    // Split across top-right and bottom-left.
-    const coords2 = [
-        [size - 1, 8], [size - 2, 8], [size - 3, 8], [size - 4, 8],
-        [size - 5, 8], [size - 6, 8], [size - 7, 8],
-        [8, size - 8], [8, size - 7], [8, size - 6], [8, size - 5],
-        [8, size - 4], [8, size - 3], [8, size - 2], [8, size - 1],
-    ];
-    coords2.forEach(([r, c], i) => (m[r][c] = bits[i]));
-    m[size - 8][8] = 1; // dark module
-}
-
-function placeVersionBits(m, version) {
-    if (version < 7) return;
-    const size = m.length;
-    const v = bchVersion(version);
-    const bits = [];
-    for (let i = 0; i <= 17; i++) bits.push((v >> i) & 1); // least-significant bit first
-    let idx = 0;
-    for (let i = 0; i < 6; i++) {
-        for (let j = 0; j < 3; j++) {
-            const b = bits[idx++];
-            m[i][size - 11 + j] = b;
-            m[size - 11 + j][i] = b;
-        }
-    }
-}
-
-// Penalty scoring for mask selection (ISO 18004 rules 1-4).
-function penalty(m) {
-    const size = m.length;
-    let score = 0;
-    // Rule 1: runs of 5+ same-color in rows/cols.
-    for (let r = 0; r < size; r++) {
-        for (const line of [m[r], m.map((row) => row[r])]) {
-            let run = 1;
-            for (let c = 1; c < size; c++) {
-                if (line[c] === line[c - 1]) {
-                    run++;
-                    if (run === 5) score += 3;
-                    else if (run > 5) score += 1;
-                } else run = 1;
-            }
-        }
-    }
-    // Rule 2: 2x2 blocks.
-    for (let r = 0; r < size - 1; r++) {
-        for (let c = 0; c < size - 1; c++) {
-            const v = m[r][c];
-            if (v === m[r][c + 1] && v === m[r + 1][c] && v === m[r + 1][c + 1]) score += 3;
-        }
-    }
-    // Rule 3: finder-like patterns.
-    const pat1 = [1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0];
-    const pat2 = [0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1];
-    const matchAt = (line, i, pat) => pat.every((p, k) => line[i + k] === p);
-    for (let r = 0; r < size; r++) {
-        const rowLine = m[r];
-        const colLine = m.map((row) => row[r]);
-        for (let c = 0; c <= size - 11; c++) {
-            if (matchAt(rowLine, c, pat1) || matchAt(rowLine, c, pat2)) score += 40;
-            if (matchAt(colLine, c, pat1) || matchAt(colLine, c, pat2)) score += 40;
-        }
-    }
-    // Rule 4: dark/light balance.
-    let dark = 0;
-    for (let r = 0; r < size; r++) for (let c = 0; c < size; c++) dark += m[r][c];
-    const percent = (dark * 100) / (size * size);
-    const prev = Math.floor(percent / 5) * 5;
-    const next = prev + 5;
-    score += Math.min(Math.abs(prev - 50), Math.abs(next - 50)) / 5 * 10;
-    return score;
-}
-
-/**
- * Encode a string into a QR matrix (array of rows of 0/1).
- * @param {string} text
- * @param {{forceMask?: number}} [opts] forceMask selects a specific mask (for tests).
- * @returns {{matrix: number[][], version: number, size: number, mask: number}}
- */
-export function encodeQr(text, opts = {}) {
-    const bytes = Array.from(new TextEncoder().encode(text));
-    const version = chooseVersion(bytes.length);
-    const size = version * 4 + 17;
-    const codewords = buildCodewords(bytes, version);
-    const reserved = buildReserved(size, version);
-
-    const base = makeBaseMatrix(size);
-    placeFinder(base, 0, 0);
-    placeFinder(base, 0, size - 7);
-    placeFinder(base, size - 7, 0);
-    placeAlignment(base, version);
-    placeTiming(base);
-    placeVersionBits(base, version);
-    placeData(base, reserved, codewords);
-
-    let chosen = opts.forceMask;
-    let bestMatrix = null;
-    if (chosen == null) {
-        let bestScore = Infinity;
-        for (let mi = 0; mi < 8; mi++) {
-            const masked = applyMask(base, reserved, MASKS[mi]);
-            placeFormatBits(masked, mi);
-            const s = penalty(masked);
-            if (s < bestScore) {
-                bestScore = s;
-                chosen = mi;
-                bestMatrix = masked;
-            }
-        }
-    } else {
-        bestMatrix = applyMask(base, reserved, MASKS[chosen]);
-        placeFormatBits(bestMatrix, chosen);
-    }
-
-    return { matrix: bestMatrix, version, size, mask: chosen };
-}

extensions/apng-studio/web/app.js

@@ -1,669 +0,0 @@
-"use strict";
-
-// ---- tiny helpers -------------------------------------------------------
-const $ = (id) => document.getElementById(id);
-const nonce = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
-
-// The server mints a per-session access token and passes it in this iframe's
-// URL. Attach it to every data request so other local origins that guess the
-// port cannot read state or drive mutations.
-const ACCESS_KEY = new URLSearchParams(location.search).get("k") || "";
-function withKey(path) {
-    const u = new URL(path, location.origin);
-    if (ACCESS_KEY) u.searchParams.set("k", ACCESS_KEY);
-    return u.pathname + u.search;
-}
-
-async function api(path, body) {
-    const res = await fetch(withKey(path), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body || {}),
-    });
-    if (!res.ok) throw new Error((await res.text()) || res.statusText);
-    const text = await res.text();
-    return text ? JSON.parse(text) : {};
-}
-
-function toast(msg, ms = 2600) {
-    const t = $("toast");
-    t.textContent = msg;
-    t.hidden = false;
-    clearTimeout(toast._t);
-    toast._t = setTimeout(() => (t.hidden = true), ms);
-}
-
-// Surface any otherwise-unhandled async-handler failure to the user instead of
-// letting it become a silent unhandled rejection with no feedback.
-if (typeof window !== "undefined") {
-    window.addEventListener("unhandledrejection", (e) => {
-        toast("Error: " + (e.reason?.message || e.reason || "something went wrong"));
-    });
-}
-
-function clampSize(w, h, max = 2048) {
-    w = Math.max(1, Math.round(w));
-    h = Math.max(1, Math.round(h));
-    const longer = Math.max(w, h);
-    if (longer > max) {
-        const s = max / longer;
-        w = Math.max(1, Math.round(w * s));
-        h = Math.max(1, Math.round(h * s));
-    }
-    return { w, h };
-}
-
-// ---- state --------------------------------------------------------------
-let state = { name: "animation", width: 256, height: 256, loops: 0, hiddenFirst: false, frames: [] };
-let assetNonce = nonce();
-
-function defaultDelay() {
-    const v = parseInt($("in-delay-all").value, 10);
-    return Number.isFinite(v) && v >= 0 ? v : 120;
-}
-
-async function refreshState() {
-    const res = await fetch(withKey("/state"));
-    if (!res.ok) throw new Error((await res.text()) || res.statusText);
-    state = await res.json();
-    assetNonce = nonce();
-    render();
-}
-
-// ---- rendering ----------------------------------------------------------
-function render() {
-    renderPreview();
-    renderMeta();
-    renderSettings();
-    renderFrames();
-    syncDrawStage();
-}
-
-function renderPreview() {
-    const img = $("preview");
-    const empty = $("empty-preview");
-    const has = state.frames.length > 0;
-    empty.hidden = has;
-    if (has) {
-        img.src = withKey(`/preview.png?n=${assetNonce}`);
-        img.hidden = false;
-        img.classList.toggle("pixelated", Math.max(state.width, state.height) < 96);
-    } else {
-        img.hidden = true;
-    }
-}
-
-function renderMeta() {
-    const n = state.frames.length;
-    const hidden = state.hiddenFirst && n >= 2;
-    const animated = hidden ? state.frames.slice(1) : state.frames;
-    const totalMs = Math.round(
-        animated.reduce((a, f) => a + (f.delayNum || 0) / (f.delayDen || 1000), 0) * 1000
-    );
-    $("meta-frames").textContent = `${n} frame${n === 1 ? "" : "s"}${hidden ? " · 1 static" : ""}`;
-    $("meta-duration").textContent = `${(totalMs / 1000).toFixed(1)}s`;
-    $("meta-loops").textContent = state.loops === 0 ? "loops ∞" : `loops ${state.loops}`;
-    const busy = n === 0;
-    $("btn-export").disabled = busy;
-    $("btn-download").disabled = busy;
-    $("btn-restart").disabled = busy;
-    $("btn-share").disabled = busy;
-}
-
-function renderSettings() {
-    const n = state.frames.length;
-    const hasFrames = n > 0;
-    const w = $("in-width"),
-        h = $("in-height"),
-        l = $("in-loops");
-    if (document.activeElement !== w) w.value = state.width;
-    if (document.activeElement !== h) h.value = state.height;
-    if (document.activeElement !== l) l.value = state.loops;
-    w.disabled = hasFrames;
-    h.disabled = hasFrames;
-    $("dim-hint").style.display = hasFrames ? "block" : "none";
-
-    const hf = $("in-hidden-first");
-    hf.checked = !!state.hiddenFirst;
-    hf.disabled = n < 2;
-    $("hidden-first-label").classList.toggle("disabled", n < 2);
-    $("hidden-first-hint").hidden = !(state.hiddenFirst && n >= 2);
-
-    for (const id of ["btn-delay-all", "btn-fps", "btn-ops-all"]) $(id).disabled = !hasFrames;
-}
-
-function renderFrames() {
-    const strip = $("frame-strip");
-    const empty = $("empty-frames");
-    strip.innerHTML = "";
-    empty.hidden = state.frames.length > 0;
-    const hidden = state.hiddenFirst && state.frames.length >= 2;
-    state.frames.forEach((f, i) => {
-        const isStatic = hidden && i === 0;
-        const card = document.createElement("div");
-        card.className = "frame-card" + (isStatic ? " is-static" : "");
-
-        const thumbWrap = document.createElement("div");
-        thumbWrap.className = "checker frame-thumb-wrap";
-        const thumb = document.createElement("img");
-        thumb.className = "frame-thumb";
-        thumb.alt = `Frame ${i + 1}`;
-        thumb.src = withKey(`/frame?id=${encodeURIComponent(f.id)}&n=${assetNonce}`);
-        thumbWrap.appendChild(thumb);
-        if (isStatic) {
-            const badge = document.createElement("span");
-            badge.className = "static-badge";
-            badge.textContent = "STATIC";
-            thumbWrap.appendChild(badge);
-        }
-
-        const body = document.createElement("div");
-        body.className = "frame-body";
-
-        const idx = document.createElement("div");
-        idx.className = "frame-index";
-        idx.textContent = isStatic ? `#${i + 1} · fallback` : `#${i + 1}`;
-
-        // Inputs (declared first so the shared commit closure can read them).
-        const numIn = numberInput(f.delayNum, 0, 65535, "Delay numerator");
-        const denIn = numberInput(f.delayDen, 1, 65535, "Delay denominator");
-        const disposeSel = selectEl(
-            [[0, "None"], [1, "Background"], [2, "Previous"]],
-            f.disposeOp,
-            "Dispose op — what to do with the canvas after this frame"
-        );
-        const blendSel = selectEl(
-            [[0, "Source"], [1, "Over"]],
-            f.blendOp,
-            "Blend op — how this frame is drawn onto the canvas"
-        );
-        const msHint = document.createElement("span");
-        msHint.className = "ms-hint muted";
-
-        const updateHint = () => {
-            const num = parseInt(numIn.value, 10) || 0;
-            const den = parseInt(denIn.value, 10) || 1000;
-            const ms = Math.round((num / den) * 1000);
-            const fps = num > 0 ? den / num : 0;
-            const fpsTxt = fps ? ` · ${Number.isInteger(fps) ? fps : fps.toFixed(1)} fps` : "";
-            msHint.textContent = `= ${ms} ms${fpsTxt}`;
-        };
-        updateHint();
-        const commit = () =>
-            api("/frames/props", {
-                id: f.id,
-                delayNum: parseInt(numIn.value, 10) || 0,
-                delayDen: parseInt(denIn.value, 10) || 1000,
-                disposeOp: parseInt(disposeSel.value, 10) || 0,
-                blendOp: parseInt(blendSel.value, 10) || 0,
-            }).catch((e) => toast("Error: " + e.message));
-
-        numIn.addEventListener("input", updateHint);
-        denIn.addEventListener("input", updateHint);
-        numIn.addEventListener("change", commit);
-        denIn.addEventListener("change", commit);
-        disposeSel.addEventListener("change", commit);
-        blendSel.addEventListener("change", commit);
-
-        const delayRow = document.createElement("div");
-        delayRow.className = "frame-field";
-        delayRow.append(fieldLabel("delay"), numIn, slash(), denIn, msHint);
-
-        const opsRow = document.createElement("div");
-        opsRow.className = "frame-field";
-        opsRow.append(fieldLabel("dispose"), disposeSel);
-        const blendRow = document.createElement("div");
-        blendRow.className = "frame-field";
-        blendRow.append(fieldLabel("blend"), blendSel);
-
-        const actions = document.createElement("div");
-        actions.className = "frame-actions";
-        actions.append(
-            iconBtn("◀", "Move left", i === 0, () => api("/frames/move", { id: f.id, delta: -1 })),
-            iconBtn("▶", "Move right", i === state.frames.length - 1, () =>
-                api("/frames/move", { id: f.id, delta: 1 })
-            ),
-            iconBtn("⧉", "Duplicate", false, () => api("/frames/duplicate", { id: f.id })),
-            iconBtn("✕", "Delete", false, () => api("/frames/delete", { id: f.id }), true)
-        );
-
-        if (isStatic) {
-            [numIn, denIn, disposeSel, blendSel].forEach((el) => (el.disabled = true));
-            msHint.textContent = "not animated";
-        }
-
-        body.append(idx, delayRow, opsRow, blendRow, actions);
-        card.append(thumbWrap, body);
-        strip.appendChild(card);
-    });
-}
-
-function numberInput(value, min, max, title) {
-    const el = document.createElement("input");
-    el.type = "number";
-    el.className = "num-in";
-    el.min = String(min);
-    el.max = String(max);
-    el.step = "1";
-    el.value = value;
-    el.title = title;
-    return el;
-}
-
-function selectEl(options, value, title) {
-    const s = document.createElement("select");
-    s.className = "frame-select";
-    s.title = title;
-    for (const [val, text] of options) {
-        const o = document.createElement("option");
-        o.value = String(val);
-        o.textContent = text;
-        s.appendChild(o);
-    }
-    s.value = String(value);
-    return s;
-}
-
-function fieldLabel(text) {
-    const s = document.createElement("span");
-    s.className = "frame-label muted";
-    s.textContent = text;
-    return s;
-}
-
-function slash() {
-    const s = document.createElement("span");
-    s.className = "slash muted";
-    s.textContent = "/";
-    return s;
-}
-
-function iconBtn(label, title, disabled, onClick, danger) {
-    const b = document.createElement("button");
-    b.className = "icon-btn" + (danger ? " danger" : "");
-    b.textContent = label;
-    b.title = title;
-    b.setAttribute("aria-label", title);
-    b.disabled = !!disabled;
-    b.addEventListener("click", async () => {
-        try {
-            await onClick();
-        } catch (e) {
-            toast("Error: " + e.message);
-        }
-    });
-    return b;
-}
-
-// ---- settings handlers --------------------------------------------------
-async function commitLoops() {
-    await api("/settings", { loops: parseInt($("in-loops").value, 10) || 0 });
-}
-async function commitDim() {
-    if (state.frames.length > 0) return;
-    const w = parseInt($("in-width").value, 10);
-    const h = parseInt($("in-height").value, 10);
-    const { w: cw, h: ch } = clampSize(w || state.width, h || state.height);
-    await api("/settings", { width: cw, height: ch });
-}
-function debounce(fn, ms) {
-    let t = null;
-    return () => {
-        clearTimeout(t);
-        t = setTimeout(fn, ms);
-    };
-}
-// Commit on `input` (fires for stepper buttons and arrow keys in every engine,
-// including the host WebKit view where `change` is unreliable for steppers) as
-// well as `change` (final blur/Enter). The `input` path is debounced so holding
-// an arrow or typing a value doesn't spam the server.
-const commitDimSoon = debounce(commitDim, 300);
-const commitLoopsSoon = debounce(commitLoops, 300);
-for (const id of ["in-width", "in-height"]) {
-    $(id).addEventListener("input", commitDimSoon);
-    $(id).addEventListener("change", commitDim);
-}
-$("in-loops").addEventListener("input", commitLoopsSoon);
-$("in-loops").addEventListener("change", commitLoops);
-$("in-hidden-first").addEventListener("change", async (e) => {
-    await api("/settings", { hiddenFirst: e.target.checked });
-});
-$("btn-delay-all").addEventListener("click", async () => {
-    const ms = defaultDelay();
-    await api("/frames/props-all", { delayMs: ms });
-    toast(`All delays set to ${ms} ms`);
-});
-$("btn-fps").addEventListener("click", async () => {
-    const fps = Math.max(1, Math.min(120, parseInt($("in-fps").value, 10) || 12));
-    await api("/frames/props-all", { fps });
-    toast(`All frames set to ${fps} fps`);
-});
-$("btn-ops-all").addEventListener("click", async () => {
-    await api("/frames/props-all", {
-        disposeOp: parseInt($("in-dispose-all").value, 10) || 0,
-        blendOp: parseInt($("in-blend-all").value, 10) || 0,
-    });
-    toast("Applied dispose & blend to all frames");
-});
-$("btn-clear").addEventListener("click", async () => {
-    if (!state.frames.length) return;
-    if (!confirm("Remove all frames?")) return;
-    await api("/frames/clear", {});
-});
-
-// ---- export / download --------------------------------------------------
-$("btn-export").addEventListener("click", async () => {
-    try {
-        const r = await api("/export", {});
-        $("saved-path").hidden = false;
-        $("saved-path").textContent = "Saved: " + r.path;
-        toast("Exported " + r.name);
-    } catch (e) {
-        toast("Export failed: " + e.message);
-    }
-});
-$("btn-download").addEventListener("click", async () => {
-    const res = await fetch(withKey(`/preview.png?n=${nonce()}`));
-    const blob = await res.blob();
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = (state.name || "animation").replace(/[^\w.-]+/g, "_") + ".png";
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    setTimeout(() => URL.revokeObjectURL(a.href), 4000);
-});
-$("btn-restart").addEventListener("click", () => {
-    // Re-assigning an identical src is a no-op, so bump the nonce to force a
-    // fresh fetch and restart the animation from the first frame.
-    assetNonce = nonce();
-    renderPreview();
-});
-
-// ---- send to phone ------------------------------------------------------
-let shareCountdown = null;
-
-$("btn-share").addEventListener("click", async () => {
-    const btn = $("btn-share");
-    btn.disabled = true;
-    try {
-        const info = await api("/share/start", {});
-        openSharePanel(info);
-    } catch (e) {
-        toast("Couldn't start sharing: " + e.message);
-    } finally {
-        btn.disabled = state.frames.length === 0;
-    }
-});
-
-$("btn-share-stop").addEventListener("click", stopSharing);
-
-function openSharePanel(info) {
-    $("share-panel").hidden = false;
-    // Cache-bust the QR so a new token's code is fetched each time.
-    $("share-qr-img").src = withKey(`/share/qr.png?ts=${Date.now()}`);
-    const link = $("share-url");
-    link.href = info.url;
-    link.textContent = info.url.replace(/^https?:\/\//, "");
-    startShareCountdown(info.expiresAt);
-}
-
-function startShareCountdown(expiresAt) {
-    clearInterval(shareCountdown);
-    const tick = () => {
-        const ms = expiresAt - Date.now();
-        if (ms <= 0) {
-            clearInterval(shareCountdown);
-            $("share-panel").hidden = true;
-            toast("Phone link expired");
-            api("/share/stop", {}).catch(() => {});
-            return;
-        }
-        const m = Math.floor(ms / 60000);
-        const s = Math.floor((ms % 60000) / 1000);
-        $("share-expiry").textContent = `Expires in ${m}:${String(s).padStart(2, "0")}`;
-    };
-    tick();
-    shareCountdown = setInterval(tick, 1000);
-}
-
-async function stopSharing() {
-    clearInterval(shareCountdown);
-    $("share-panel").hidden = true;
-    try {
-        await api("/share/stop", {});
-    } catch (_) {
-        /* server may have already expired the share */
-    }
-}
-
-// ---- upload -------------------------------------------------------------
-$("btn-upload").addEventListener("click", () => $("file-input").click());
-$("file-input").addEventListener("change", async (e) => {
-    const files = [...e.target.files];
-    e.target.value = "";
-    if (files.length) await addFiles(files);
-});
-
-async function addFiles(files) {
-    try {
-        toast(`Adding ${files.length} image${files.length === 1 ? "" : "s"}…`);
-        if (state.frames.length === 0) {
-            const first = await createImageBitmap(files[0]);
-            const { w, h } = clampSize(first.width, first.height);
-            first.close?.();
-            await api("/settings", { width: w, height: h });
-            await refreshState();
-        }
-        for (const f of files) await addImageFile(f);
-        toast("Frames added");
-    } catch (e) {
-        toast("Upload error: " + e.message);
-    }
-}
-
-async function addImageFile(file) {
-    const bmp = await createImageBitmap(file);
-    const c = document.createElement("canvas");
-    c.width = state.width;
-    c.height = state.height;
-    try {
-        drawContain(c.getContext("2d"), bmp, state.width, state.height);
-    } finally {
-        // Release the decoded bitmap right after the synchronous draw so a large
-        // batch doesn't retain native image memory until GC.
-        bmp.close?.();
-    }
-    const blob = await new Promise((r) => c.toBlob(r, "image/png"));
-    await postFrame(blob, defaultDelay());
-}
-
-function drawContain(ctx, img, W, H) {
-    const s = Math.min(W / img.width, H / img.height);
-    const dw = img.width * s;
-    const dh = img.height * s;
-    ctx.clearRect(0, 0, W, H);
-    ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);
-}
-
-async function postFrame(blob, delayMs) {
-    const res = await fetch(withKey(`/frames?delayMs=${delayMs || 0}`), { method: "POST", body: blob });
-    if (!res.ok) throw new Error(await res.text());
-}
-
-// ---- drawing ------------------------------------------------------------
-const drawCanvas = $("draw-canvas");
-const dctx = drawCanvas.getContext("2d");
-let drawTool = "pen";
-let drawing = false;
-let lastPt = null;
-
-$("btn-toggle-draw").addEventListener("click", () => {
-    const panel = $("draw-panel");
-    panel.hidden = !panel.hidden;
-    if (!panel.hidden) initDrawCanvas();
-});
-$("btn-cancel-draw").addEventListener("click", () => ($("draw-panel").hidden = true));
-$("tool-pen").addEventListener("click", () => setTool("pen"));
-$("tool-eraser").addEventListener("click", () => setTool("eraser"));
-function setTool(t) {
-    drawTool = t;
-    $("tool-pen").classList.toggle("active", t === "pen");
-    $("tool-eraser").classList.toggle("active", t === "eraser");
-    $("tool-pen").setAttribute("aria-pressed", String(t === "pen"));
-    $("tool-eraser").setAttribute("aria-pressed", String(t === "eraser"));
-}
-$("btn-clear-draw").addEventListener("click", () => {
-    dctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
-});
-$("btn-fill").addEventListener("click", () => {
-    dctx.save();
-    dctx.globalCompositeOperation = "source-over";
-    dctx.fillStyle = $("draw-color").value;
-    dctx.fillRect(0, 0, drawCanvas.width, drawCanvas.height);
-    dctx.restore();
-});
-$("opt-onion").addEventListener("change", syncOnion);
-$("opt-from-last").addEventListener("change", initDrawCanvas);
-
-function syncDrawStage() {
-    // Size the drawing surface to the project dimensions and scale for display.
-    if (drawCanvas.width !== state.width || drawCanvas.height !== state.height) {
-        drawCanvas.width = state.width;
-        drawCanvas.height = state.height;
-    }
-    const longer = Math.max(state.width, state.height) || 1;
-    const scale = Math.min(360, Math.max(200, longer)) / longer;
-    const dispW = Math.max(1, Math.round(state.width * scale));
-    // Drive the display size from the width plus the intrinsic aspect ratio and
-    // let height follow, so a narrow side panel (CSS max-width) shrinks the
-    // surface proportionally instead of stretching a fixed height.
-    const ratio = `${state.width} / ${state.height}`;
-    drawCanvas.style.width = dispW + "px";
-    drawCanvas.style.height = "auto";
-    drawCanvas.style.aspectRatio = ratio;
-    drawCanvas.style.imageRendering = scale > 1.4 ? "pixelated" : "auto";
-    const onion = $("onion-img");
-    onion.style.width = dispW + "px";
-    onion.style.height = "auto";
-    onion.style.aspectRatio = ratio;
-    if (!$("draw-panel").hidden) syncOnion();
-}
-
-function lastFrame() {
-    return state.frames.length ? state.frames[state.frames.length - 1] : null;
-}
-
-function syncOnion() {
-    const onion = $("onion-img");
-    const lf = lastFrame();
-    if ($("opt-onion").checked && lf) {
-        onion.src = withKey(`/frame?id=${encodeURIComponent(lf.id)}&n=${assetNonce}`);
-        onion.hidden = false;
-    } else {
-        onion.hidden = true;
-    }
-}
-
-function initDrawCanvas() {
-    syncDrawStage();
-    dctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
-    const lf = lastFrame();
-    if ($("opt-from-last").checked && lf) {
-        const img = new Image();
-        img.onload = () => dctx.drawImage(img, 0, 0, drawCanvas.width, drawCanvas.height);
-        img.src = withKey(`/frame?id=${encodeURIComponent(lf.id)}&n=${assetNonce}`);
-    }
-    syncOnion();
-}
-
-function canvasPoint(e) {
-    const rect = drawCanvas.getBoundingClientRect();
-    return {
-        x: (e.clientX - rect.left) * (drawCanvas.width / rect.width),
-        y: (e.clientY - rect.top) * (drawCanvas.height / rect.height),
-    };
-}
-function strokeTo(pt) {
-    dctx.globalCompositeOperation = drawTool === "eraser" ? "destination-out" : "source-over";
-    dctx.strokeStyle = $("draw-color").value;
-    dctx.fillStyle = $("draw-color").value;
-    dctx.lineWidth = parseInt($("draw-size").value, 10) || 6;
-    dctx.lineCap = "round";
-    dctx.lineJoin = "round";
-    if (lastPt) {
-        dctx.beginPath();
-        dctx.moveTo(lastPt.x, lastPt.y);
-        dctx.lineTo(pt.x, pt.y);
-        dctx.stroke();
-    } else {
-        dctx.beginPath();
-        dctx.arc(pt.x, pt.y, dctx.lineWidth / 2, 0, Math.PI * 2);
-        dctx.fill();
-    }
-    lastPt = pt;
-}
-drawCanvas.addEventListener("pointerdown", (e) => {
-    drawing = true;
-    lastPt = null;
-    drawCanvas.setPointerCapture(e.pointerId);
-    strokeTo(canvasPoint(e));
-});
-drawCanvas.addEventListener("pointermove", (e) => {
-    if (drawing) strokeTo(canvasPoint(e));
-});
-function endStroke() {
-    drawing = false;
-    lastPt = null;
-}
-drawCanvas.addEventListener("pointerup", endStroke);
-drawCanvas.addEventListener("pointerleave", endStroke);
-drawCanvas.addEventListener("pointercancel", endStroke);
-
-$("btn-add-drawing").addEventListener("click", async () => {
-    const blob = await new Promise((r) => drawCanvas.toBlob(r, "image/png"));
-    await postFrame(blob, defaultDelay());
-    toast("Frame added");
-    if ($("opt-from-last").checked) {
-        // Pull the just-added frame into state before re-seeding the canvas, so
-        // "start from last frame" copies it instead of the previous frame (or a
-        // blank canvas on the first add), which the async SSE update may not
-        // have delivered yet.
-        await refreshState();
-        initDrawCanvas();
-    }
-});
-
-// ---- live updates -------------------------------------------------------
-let eventSource = null;
-function connectEvents() {
-    try {
-        if (eventSource) eventSource.close();
-        eventSource = new EventSource(withKey("/events"));
-        eventSource.onmessage = () => refreshState();
-    } catch (_) {
-        eventSource = null; /* SSE unavailable; manual reload still works */
-    }
-}
-
-$("btn-reload").addEventListener("click", async () => {
-    const btn = $("btn-reload");
-    const glyph = $("reload-glyph");
-    btn.disabled = true;
-    glyph.classList.add("spinning");
-    try {
-        // Recover a dropped live-update stream, then pull the latest state and
-        // rebuild the preview + thumbnails against a fresh cache-busting nonce.
-        if (!eventSource || eventSource.readyState === 2) connectEvents();
-        await refreshState();
-        toast("Reloaded");
-    } catch (e) {
-        toast("Reload failed: " + e.message);
-    } finally {
-        glyph.classList.remove("spinning");
-        btn.disabled = false;
-    }
-});
-
-connectEvents();
-refreshState();

extensions/apng-studio/web/index.html

@@ -1,189 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>APNG Studio</title>
-    <link rel="stylesheet" href="styles.css" />
-</head>
-<body>
-    <header class="app-header">
-        <div>
-            <h1>APNG Studio</h1>
-            <p class="muted" id="subtitle">Assemble an animated PNG from frames.</p>
-        </div>
-        <div class="header-actions">
-            <button class="btn btn-sm" id="btn-reload"
-                title="Reload — re-sync frames and rebuild the preview">
-                <span class="reload-glyph" id="reload-glyph">↻</span> Reload
-            </button>
-            <span class="badge" id="mime-badge">image/apng</span>
-        </div>
-    </header>
-
-    <!-- Preview -->
-    <section class="card">
-        <div class="preview-wrap checker">
-            <img id="preview" alt="APNG preview" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-            <div class="empty-preview" id="empty-preview">
-                <span>No frames yet</span>
-                <small class="muted">Upload images or draw a frame below.</small>
-            </div>
-        </div>
-        <div class="preview-meta">
-            <span id="meta-frames">0 frames</span>
-            <span class="dot">·</span>
-            <span id="meta-duration">0.0s</span>
-            <span class="dot">·</span>
-            <span id="meta-loops">loops ∞</span>
-        </div>
-        <div class="row gap">
-            <button class="btn btn-primary" id="btn-export">Export .png</button>
-            <button class="btn" id="btn-download">Download</button>
-            <button class="btn" id="btn-share">Send to phone</button>
-            <button class="btn btn-ghost" id="btn-restart" title="Restart animation">↺ Replay</button>
-        </div>
-        <p class="saved-path muted" id="saved-path" hidden></p>
-
-        <!-- Send to phone -->
-        <div class="share-panel" id="share-panel" hidden>
-            <div class="share-qr checker">
-                <img id="share-qr-img" alt="QR code — scan with your phone camera to open the animation" />
-            </div>
-            <div class="share-body">
-                <div class="share-title">Scan with your phone camera</div>
-                <p class="muted tiny">Your phone must be on the same Wi‑Fi as this computer.</p>
-                <a class="share-url" id="share-url" href="#" target="_blank" rel="noopener"></a>
-                <div class="share-foot">
-                    <span class="muted tiny" id="share-expiry"></span>
-                    <button class="btn btn-sm btn-ghost" id="btn-share-stop">Stop</button>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Settings -->
-    <section class="card">
-        <div class="section-title">Settings</div>
-        <div class="settings-grid">
-            <label class="field">
-                <span>Width</span>
-                <input type="number" id="in-width" min="1" max="2048" step="1" />
-            </label>
-            <label class="field">
-                <span>Height</span>
-                <input type="number" id="in-height" min="1" max="2048" step="1" />
-            </label>
-            <label class="field">
-                <span>Loops <small class="muted">(0 = ∞)</small></span>
-                <input type="number" id="in-loops" min="0" max="65535" step="1" />
-            </label>
-            <div class="field">
-                <span>First frame</span>
-                <label class="chk" id="hidden-first-label">
-                    <input type="checkbox" id="in-hidden-first" /> Static fallback
-                </label>
-            </div>
-        </div>
-        <p class="muted tiny" id="dim-hint">Canvas size can only change while there are no frames.</p>
-        <p class="muted tiny" id="hidden-first-hint" hidden>
-            Frame&nbsp;1 is shown by viewers without APNG support and is not part of the loop.
-        </p>
-
-        <div class="subsection">
-            <div class="subsection-title">Apply to all frames</div>
-            <div class="apply-rows">
-                <span class="inline">
-                    <label class="mini" for="in-delay-all">Delay</label>
-                    <input type="number" id="in-delay-all" min="0" max="65535" step="10" value="120" />
-                    <span class="mini">ms</span>
-                    <button class="btn btn-sm" id="btn-delay-all">Apply</button>
-                </span>
-                <span class="inline">
-                    <label class="mini" for="in-fps">Frame rate</label>
-                    <input type="number" id="in-fps" min="1" max="120" step="1" value="12" />
-                    <span class="mini">fps</span>
-                    <button class="btn btn-sm" id="btn-fps">Set</button>
-                </span>
-                <span class="inline">
-                    <label class="mini" for="in-dispose-all">Dispose</label>
-                    <select id="in-dispose-all">
-                        <option value="0">None</option>
-                        <option value="1">Background</option>
-                        <option value="2">Previous</option>
-                    </select>
-                    <label class="mini" for="in-blend-all">Blend</label>
-                    <select id="in-blend-all">
-                        <option value="0">Source</option>
-                        <option value="1">Over</option>
-                    </select>
-                    <button class="btn btn-sm" id="btn-ops-all">Apply</button>
-                </span>
-            </div>
-            <details class="help">
-                <summary>What do dispose &amp; blend do?</summary>
-                <ul>
-                    <li><b>Blend · Source</b> replaces the canvas region with this frame (alpha included). <b>Over</b> composites this frame on top of what's already there — use it with transparency to build an image up frame by frame.</li>
-                    <li><b>Dispose · None</b> keeps the frame on screen for the next one. <b>Background</b> clears it to transparent first. <b>Previous</b> restores whatever was there before this frame.</li>
-                </ul>
-            </details>
-        </div>
-    </section>
-
-    <!-- Frames -->
-    <section class="card">
-        <div class="section-title row between">
-            <span>Frames</span>
-            <button class="btn btn-sm btn-ghost danger" id="btn-clear">Clear all</button>
-        </div>
-        <div class="frame-strip" id="frame-strip"></div>
-        <div class="empty-frames muted" id="empty-frames">Frames you add appear here in order.</div>
-    </section>
-
-    <!-- Add frames -->
-    <section class="card">
-        <div class="section-title">Add frames</div>
-        <div class="row gap wrap">
-            <button class="btn" id="btn-upload">⬆ Upload images</button>
-            <button class="btn" id="btn-toggle-draw">✎ Draw a frame</button>
-            <input type="file" id="file-input" accept="image/*" multiple hidden />
-        </div>
-
-        <!-- Draw panel -->
-        <div class="draw-panel" id="draw-panel" hidden>
-            <div class="draw-tools">
-                <label class="tool">
-                    <span>Color</span>
-                    <input type="color" id="draw-color" value="#3b82f6" />
-                </label>
-                <label class="tool">
-                    <span>Size</span>
-                    <input type="range" id="draw-size" min="1" max="48" value="6" />
-                </label>
-                <div class="tool-group" role="group" aria-label="Tool">
-                    <button class="btn btn-sm tool-btn active" id="tool-pen" aria-pressed="true">Pen</button>
-                    <button class="btn btn-sm tool-btn" id="tool-eraser" aria-pressed="false">Eraser</button>
-                </div>
-                <button class="btn btn-sm" id="btn-fill">Fill</button>
-                <button class="btn btn-sm" id="btn-clear-draw">Clear</button>
-            </div>
-            <div class="draw-options">
-                <label class="chk"><input type="checkbox" id="opt-onion" /> Onion skin</label>
-                <label class="chk"><input type="checkbox" id="opt-from-last" /> Start from last frame</label>
-            </div>
-            <div class="canvas-stage checker" id="canvas-stage">
-                <img id="onion-img" class="onion" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" hidden />
-                <canvas id="draw-canvas"></canvas>
-            </div>
-            <div class="row gap">
-                <button class="btn btn-primary btn-sm" id="btn-add-drawing">Add frame</button>
-                <button class="btn btn-sm btn-ghost" id="btn-cancel-draw">Close</button>
-            </div>
-        </div>
-    </section>
-
-    <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
-
-    <script src="app.js"></script>
-</body>
-</html>

extensions/apng-studio/web/styles.css

@@ -1,620 +0,0 @@
-:root {
-    --radius: 10px;
-    --radius-sm: 7px;
-    --gap: 12px;
-    --card-bg: var(--background-color-default, #ffffff);
-    --muted: var(--text-color-muted, #59636e);
-    --border: var(--border-color-default, #d1d9e0);
-    --fg: var(--text-color-default, #1f2328);
-    --accent: var(--true-color-blue, #0969da);
-    --danger: var(--true-color-red, #cf222e);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-/* Ensure the `hidden` attribute always wins over element display rules. */
-[hidden] {
-    display: none !important;
-}
-
-body {
-    margin: 0;
-    padding: 14px 14px 40px;
-    background: var(--background-color-default, #ffffff);
-    color: var(--fg);
-    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
-    font-size: var(--text-body-medium, 14px);
-    line-height: var(--leading-body-medium, 20px);
-    -webkit-font-smoothing: antialiased;
-}
-
-h1 {
-    font-family: var(--font-sans-display, var(--font-sans, sans-serif));
-    font-size: var(--text-title-medium, 18px);
-    font-weight: var(--font-weight-semibold, 600);
-    line-height: 1.2;
-    margin: 0;
-}
-
-.app-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--gap);
-    margin-bottom: 14px;
-}
-
-.header-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-.reload-glyph {
-    display: inline-block;
-}
-.reload-glyph.spinning {
-    animation: apng-spin 0.6s linear infinite;
-}
-@keyframes apng-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.muted {
-    color: var(--muted);
-}
-.tiny {
-    font-size: var(--text-caption, 11px);
-}
-.muted.tiny {
-    margin: 8px 0 0;
-}
-
-.badge {
-    font-family: var(--font-mono, monospace);
-    font-size: var(--text-code-inline, 12px);
-    color: var(--muted);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    padding: 2px 9px;
-    white-space: nowrap;
-}
-
-#subtitle {
-    margin: 3px 0 0;
-    font-size: var(--text-body-small, 12px);
-}
-
-.card {
-    background: var(--card-bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 14px;
-    margin-bottom: 14px;
-}
-
-.section-title {
-    font-weight: var(--font-weight-semibold, 600);
-    margin-bottom: 12px;
-}
-
-.row {
-    display: flex;
-    align-items: center;
-}
-.row.gap {
-    gap: 8px;
-}
-.row.wrap {
-    flex-wrap: wrap;
-}
-.row.between,
-.between {
-    justify-content: space-between;
-}
-
-/* Buttons */
-.btn {
-    appearance: none;
-    border: 1px solid var(--border);
-    background: var(--background-color-default, #fff);
-    color: var(--fg);
-    border-radius: var(--radius-sm);
-    padding: 7px 12px;
-    font-size: var(--text-body-small, 13px);
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
-}
-.btn:hover {
-    background: var(--n-2-10, rgba(0, 0, 0, 0.04));
-}
-.btn:active {
-    transform: translateY(0.5px);
-}
-.btn:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-}
-.btn-sm {
-    padding: 4px 9px;
-    font-size: var(--text-caption, 12px);
-}
-.btn-primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--color-white, #fff);
-}
-.btn-primary:hover {
-    filter: brightness(1.06);
-    background: var(--accent);
-}
-.btn-ghost {
-    background: transparent;
-    border-color: transparent;
-}
-.btn-ghost:hover {
-    background: var(--n-2-10, rgba(0, 0, 0, 0.05));
-}
-.danger {
-    color: var(--danger);
-}
-
-/* Preview */
-.preview-wrap {
-    position: relative;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border);
-    min-height: 160px;
-    max-height: 320px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    padding: 10px;
-}
-#preview {
-    max-width: 100%;
-    max-height: 300px;
-    image-rendering: auto;
-    display: block;
-}
-#preview.pixelated {
-    image-rendering: pixelated;
-}
-.empty-preview {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-    background: var(--background-color-default, #fff);
-    text-align: center;
-}
-.preview-meta {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    justify-content: center;
-    color: var(--muted);
-    font-size: var(--text-body-small, 12px);
-    margin: 10px 0 12px;
-}
-.preview-meta .dot {
-    opacity: 0.5;
-}
-.saved-path {
-    margin: 10px 0 0;
-    font-family: var(--font-mono, monospace);
-    font-size: var(--text-caption, 11px);
-    word-break: break-all;
-}
-
-/* Checkerboard for transparency */
-.checker {
-    --checker-base: var(--background-color-default, #fff);
-    --checker-square: var(--border-color-default, #d9dbe0);
-    background-color: var(--checker-base);
-    background-image:
-        linear-gradient(45deg, var(--checker-square) 25%, transparent 25%),
-        linear-gradient(-45deg, var(--checker-square) 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, var(--checker-square) 75%),
-        linear-gradient(-45deg, transparent 75%, var(--checker-square) 75%);
-    background-size: 16px 16px;
-    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
-}
-
-/* Send to phone */
-.share-panel {
-    display: flex;
-    gap: var(--gap);
-    align-items: center;
-    margin-top: 12px;
-    padding: 12px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--card-bg);
-}
-.share-qr {
-    flex-shrink: 0;
-    padding: 8px;
-    border-radius: var(--radius-sm);
-    line-height: 0;
-}
-.share-qr img {
-    width: 132px;
-    height: 132px;
-    image-rendering: pixelated;
-    display: block;
-}
-.share-body {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-}
-.share-title {
-    font-weight: var(--font-weight-semibold, 600);
-}
-.share-url {
-    font-family: var(--font-mono, monospace);
-    font-size: var(--text-code-inline, 12px);
-    color: var(--accent);
-    word-break: break-all;
-    text-decoration: none;
-    margin-top: 2px;
-}
-.share-url:hover {
-    text-decoration: underline;
-}
-.share-foot {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-top: 6px;
-}
-
-/* Settings */
-.settings-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 10px;
-}
-.field {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    font-size: var(--text-body-small, 12px);
-    color: var(--muted);
-}
-.field .inline {
-    display: flex;
-    gap: 6px;
-}
-input[type="number"],
-input[type="text"] {
-    width: 100%;
-    padding: 6px 8px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    background: var(--background-color-default, #fff);
-    color: var(--fg);
-    font-size: var(--text-body-medium, 13px);
-    font-family: inherit;
-}
-input:focus-visible,
-.btn:focus-visible,
-select:focus-visible {
-    outline: 2px solid var(--color-focus-outline, var(--accent));
-    outline-offset: 1px;
-}
-
-/* hidden-first checkbox living inside the settings grid */
-.field .chk {
-    color: var(--fg);
-    font-size: var(--text-body-small, 12px);
-    padding: 4px 0;
-}
-.field .chk.disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-}
-
-/* Settings subsection: apply-to-all controls */
-.subsection {
-    margin-top: 14px;
-    padding-top: 12px;
-    border-top: 1px dashed var(--border);
-}
-.subsection-title {
-    font-size: var(--text-caption, 11px);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--muted);
-    font-weight: 600;
-    margin-bottom: 8px;
-}
-.apply-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-.apply-rows .inline {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-.apply-rows .inline input[type="number"] {
-    width: 68px;
-}
-.apply-rows select {
-    padding: 5px 7px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    background: var(--background-color-default, #fff);
-    color: var(--fg);
-    font-size: var(--text-body-small, 12px);
-    font-family: inherit;
-}
-.mini {
-    font-size: 11px;
-    color: var(--muted);
-}
-.help {
-    margin-top: 12px;
-    font-size: var(--text-body-small, 12px);
-}
-.help summary {
-    cursor: pointer;
-    color: var(--accent);
-    font-size: var(--text-caption, 11px);
-}
-.help ul {
-    margin: 8px 0 0;
-    padding-left: 18px;
-    color: var(--muted);
-}
-.help li {
-    margin-bottom: 5px;
-}
-.help b {
-    color: var(--fg);
-}
-
-/* Frame strip */
-.frame-strip {
-    display: flex;
-    gap: 10px;
-    overflow-x: auto;
-    padding-bottom: 6px;
-}
-.frame-card {
-    flex: 0 0 auto;
-    width: 168px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    background: var(--card-bg);
-}
-.frame-card.is-static {
-    border-color: var(--accent);
-    border-style: dashed;
-}
-.frame-thumb-wrap {
-    position: relative;
-    border-bottom: 1px solid var(--border);
-}
-.frame-thumb {
-    width: 100%;
-    height: 88px;
-    object-fit: contain;
-    display: block;
-}
-.static-badge {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    background: var(--accent);
-    color: var(--color-white, #fff);
-    font-size: 9px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    padding: 1px 5px;
-    border-radius: 4px;
-}
-.frame-body {
-    padding: 7px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.frame-index {
-    font-size: var(--text-caption, 11px);
-    color: var(--muted);
-    font-weight: 600;
-}
-.frame-field {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 4px;
-}
-.frame-label {
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    min-width: 46px;
-}
-.num-in {
-    width: 52px !important;
-    padding: 3px 4px !important;
-    font-size: var(--text-caption, 11px) !important;
-    text-align: center;
-}
-.slash {
-    font-size: 11px;
-}
-.ms-hint {
-    flex-basis: 100%;
-    font-size: 10px;
-}
-.frame-select {
-    flex: 1;
-    min-width: 0;
-    padding: 3px 4px;
-    border: 1px solid var(--border);
-    border-radius: 5px;
-    background: var(--background-color-default, #fff);
-    color: var(--fg);
-    font-size: var(--text-caption, 11px);
-    font-family: inherit;
-}
-.frame-actions {
-    display: flex;
-    gap: 3px;
-    margin-top: 1px;
-}
-.icon-btn {
-    flex: 1;
-    appearance: none;
-    border: 1px solid var(--border);
-    background: transparent;
-    color: var(--fg);
-    border-radius: 5px;
-    padding: 3px 0;
-    cursor: pointer;
-    font-size: 12px;
-    line-height: 1;
-}
-.icon-btn:hover {
-    background: var(--n-2-10, rgba(0, 0, 0, 0.05));
-}
-.icon-btn.danger:hover {
-    background: var(--true-color-red-muted, rgba(207, 34, 46, 0.1));
-}
-.icon-btn:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-}
-.empty-frames {
-    font-size: var(--text-body-small, 12px);
-    padding: 4px 0 0;
-}
-
-/* Draw panel */
-.draw-panel {
-    margin-top: 14px;
-    padding-top: 14px;
-    border-top: 1px dashed var(--border);
-}
-.draw-tools {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
-}
-.tool {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: var(--text-caption, 12px);
-    color: var(--muted);
-}
-.tool input[type="color"] {
-    width: 30px;
-    height: 26px;
-    padding: 0;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    background: none;
-    cursor: pointer;
-}
-.tool-group {
-    display: inline-flex;
-    gap: 0;
-}
-.tool-group .tool-btn {
-    border-radius: 0;
-    margin-left: -1px;
-}
-.tool-group .tool-btn:first-child {
-    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
-    margin-left: 0;
-}
-.tool-group .tool-btn:last-child {
-    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-}
-.tool-btn.active {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--color-white, #fff);
-}
-.draw-options {
-    display: flex;
-    gap: 16px;
-    margin-bottom: 10px;
-}
-.chk {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: var(--text-body-small, 12px);
-    cursor: pointer;
-}
-.canvas-stage {
-    position: relative;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-}
-.canvas-stage .onion,
-.canvas-stage canvas {
-    position: relative;
-    max-width: 100%;
-    display: block;
-    touch-action: none;
-}
-.canvas-stage .onion {
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    opacity: 0.28;
-    pointer-events: none;
-    object-fit: contain;
-}
-#draw-canvas {
-    cursor: crosshair;
-}
-
-/* Toast */
-.toast {
-    position: fixed;
-    left: 50%;
-    bottom: 18px;
-    transform: translateX(-50%);
-    background: var(--fg);
-    color: var(--background-color-default, #fff);
-    padding: 8px 14px;
-    border-radius: 999px;
-    font-size: var(--text-body-small, 12px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
-    z-index: 50;
-    max-width: 90%;
-    text-align: center;
-}
-.toast[hidden] {
-    display: none;
-}

extensions/arcade-canvas/.github/plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "arcade-canvas",
   "description": "Play five retro Phaser mini-games in a Copilot canvas while agents work.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": {
     "name": "Dan Wahlin",
     "url": "https://github.com/DanWahlin"

extensions/arcade-canvas/extensions/README.md

@@ -1,68 +0,0 @@
-# Agent Arcade Canvas
-
-A GitHub Copilot canvas that opens a retro arcade in the side panel. It serves the built Agent Arcade Phaser frontend and lets either the user or the agent switch between five mini-games.
-
-## Games
-
-- **Alien Onslaught** — Space Invaders-style arcade action with marching aliens, shields, and mystery ships.
-- **Cosmic Rocks** — Asteroids-style vector shooter with thrust physics and splitting asteroids.
-- **Galaxy Blaster** — Galaga-style space shooter with formation enemies, attack patterns, and dual-shot power-up.
-- **Ninja Runner** — Classic platformer with double jumps, power-ups, warp pipes, and enemies.
-- **Planet Guardian** — Defender-style side-scrolling shooter with humanoid rescues and six enemy types.
-
-## Files
-
-- `extension.mjs` — canvas declaration, loopback game server, static asset handling, and agent actions.
-- `game/` — compiled Phaser game frontend served inside the canvas.
-- `assets/` — game sprites, sounds, app icon, and `preview.png` for the extensions gallery.
-- `package.json` — declares the Copilot SDK dependency and ESM entry point.
-- `copilot-extension.json` — Copilot extension name/version metadata.
-- `canvas.json` — Awesome Copilot gallery metadata.
-
-## Prerequisites
-
-- **Node.js 20.19 or newer** because the Copilot SDK requires `node ^20.19.0 || >=22.12.0`.
-- The GitHub Copilot app canvas / UI-extensions experiment enabled.
-
-## Install
-
-Drop this folder at `~/.copilot/extensions/arcade-canvas/` for user scope, or in a repository at `.github/extensions/arcade-canvas/` for project scope. Then install dependencies from inside the copied folder:
-
-```sh
-# User scope
-cd ~/.copilot/extensions/arcade-canvas
-
-# Or project scope, from the repository root
-cd .github/extensions/arcade-canvas
-
-npm install
-```
-
-Reload extensions in the GitHub Copilot app, then open the `arcade-canvas` canvas. The canvas accepts an optional `defaultGame` input with one of these keys: `cosmic-rocks`, `alien-onslaught`, `galaxy-blaster`, `ninja-runner`, or `defender`.
-
-## Agent actions
-
-- `list_games` — list available mini-games and the currently selected game.
-- `select_game { gameKey }` — switch the open arcade canvas to a specific mini-game.
-- `restart_game` — reload the open arcade canvas to restart the current game.
-
-## Development
-
-In the Agent Arcade repository, rebuild the committed canvas bundle after frontend or asset changes:
-
-```sh
-npm run build:canvas
-```
-
-That command builds the frontend, copies `dist/game` into `game/`, copies `dist/assets` into `assets/`, writes `assets/preview.png` for the Awesome Copilot gallery, and bundles `assets/canvas-background.webp` for the canvas-only space backdrop.
-
-## Credits
-
-- Sprite assets: [Simple Platformer 16](https://juhosprite.itch.io/simple-platformer-16) by JuhoSprite.
-- Space shooter assets: [Space Shooter Redux](https://opengameart.org/content/space-shooter-redux) by Kenney.nl.
-- Galaga-style game mechanics: [WesleyEdwards/galaga](https://github.com/WesleyEdwards/galaga) by Wesley Edwards.
-- Asteroids-style game mechanics: [phaser3-typescript](https://github.com/digitsensitive/phaser3-typescript) by digitsensitive.
-- Defender-style game mechanics and sound effects: [OpenDefender](https://github.com/mkinney/Opendefender) by mkinney.
-- Retro game sound effects: ["Retro game sound effects"](https://opengameart.org/content/retro-game-sound-effects) by Vircon32 (Carra), published at OpenGameArt under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
-- Thanks to [John Papa](https://github.com/johnpapa) for his Alien Onslaught game PR.
-- Thanks to [Shayne Boyer](https://github.com/spboyer) for the initial PR to get Agent Arcade running in the GitHub App canvas.