feat(code-tutor): wire canvas-kit deep links into code-review fixes (#19)

The vendored canvas-kit (2026-07-04.1) shipped deep-link builders that no
extension used. Code Tutor's "Request fix session" button only copied the
prompt to the clipboard and set a flag, leaving the user to ask Copilot
manually, even though a finding's fixPrompt is described as a ready-to-run
prompt for a new session.

Findings now render a real "Fix in a new session" deep-link anchor
(ghapp://session/new, mode=autopilot) when the board knows its GitHub
owner/repo, with a graceful fallback to the original copy-prompt button
when it does not.

- canvas.mjs: set_codebase gains an optional repo (owner/repo), validated
  with the kit's isRepoFullName and stored with the same lenient fallback
  as its sibling fields so a bogus value never yields a dead link.
- web/app.mjs: build the link with buildSessionDeepLink and thread repo
  through ReviewTab into FindingCard; anchor uses target=_blank.
- web/styles.css: one rule so the anchor reads as a button.
- extension.mjs: refresh stale kit-version comments.
- test/smoke.test.mjs: valid repo stored, invalid repo ignored.
- README.md: document the CTA and the optional repo.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: jongio

extensions/code-tutor/README.md

@@ -12,7 +12,7 @@ A GitHub Copilot App **canvas extension**: the agent and the user share the same
 - **Points at real code**: every topic and finding links to a file and line range. Click a reference to expand the actual source with language-aware syntax highlighting (read straight from disk under the codebase root).
 - **Mark your understanding** per topic: Understood, Not understood, Revisit, or New. A progress ring tracks how much you have understood.
 - **Ask and clarify**: ask questions per topic or globally; the agent answers in the panel.
-- **Code review**: flags good / ok / bad spots (perf, wrong data structures, suboptimal algorithms) with a one-click "Request fix session" the agent can pick up.
+- **Code review**: flags good / ok / bad spots (perf, wrong data structures, suboptimal algorithms). When the board knows its GitHub `owner/repo`, each issue gets a one-click **Fix in a new session** deep link (`ghapp://session/new`) that opens a dedicated Copilot session to run the fix; otherwise it copies a ready-to-run prompt for the agent to pick up.
 - **Freshness tracking**: fingerprints the code (git HEAD + newest file mtime) at analysis time, re-checks on a visibility-gated timer, and shows a "code changed, refresh" banner plus an always-available Refresh button. Code Tutor never re-analyzes on its own; analysis is the agent's job, so the Refresh button injects a re-analysis prompt into the current Copilot session.
 
 ## Layout
@@ -41,7 +41,9 @@ Copy this folder into `.github/extensions/code-tutor` (in-repo) or
 `$COPILOT_HOME/extensions/code-tutor` (personal), then run `extensions_reload` and
 open it with `open_canvas` (`canvasId: "code-tutor"`). Point it at a codebase by
 asking Copilot to analyze the repo; it calls `set_codebase` (with a `root` so
-code references resolve) and then authors the topics, references and findings.
+code references resolve, and optionally `repo` as `owner/repo` to enable the
+"Fix in a new session" deep links) and then authors the topics, references and
+findings.
 
 ## Keeping the kit current
 

extensions/code-tutor/canvas.mjs

@@ -18,6 +18,7 @@ import { homedir } from "node:os";
 import { resolve, isAbsolute, sep, join } from "node:path";
 import { userStore } from "./canvas-kit/storage.mjs";
 import { nid } from "./canvas-kit/format.mjs";
+import { isRepoFullName } from "./canvas-kit/deeplinks.mjs";
 import {
   conceptKeyFor,
   looksCodebaseSpecific,
@@ -413,6 +414,12 @@ export const canvasConfig = {
         properties: {
           label: { type: "string", description: "Display name, e.g. the repo or project name." },
           root: { type: "string", description: "Absolute or repo-relative root path that was analyzed." },
+          repo: {
+            type: "string",
+            description:
+              "GitHub \"owner/repo\" this codebase belongs to. When set, findings offer a one-click " +
+              "\"Fix in a new session\" deep link that opens a dedicated Copilot session to run the fix.",
+          },
           summary: { type: "string", description: "1-3 sentence overview of what the codebase does." },
           fileCount: { type: "number", description: "Approximate number of source files analyzed." },
           languages: {
@@ -425,9 +432,19 @@ export const canvasConfig = {
       },
       handler: async ({ state, set, input }) => {
         const root = trimmed(input.root) || state.codebase?.root || "";
+        // Only keep a repo that passes github-app's own owner/repo validation, so
+        // a bogus value never reaches buildSessionDeepLink (which would drop it and
+        // yield a null link). An omitted/invalid input preserves the prior repo.
+        const inputRepo = trimmed(input.repo);
+        const repo = isRepoFullName(inputRepo)
+          ? inputRepo
+          : isRepoFullName(state.codebase?.repo)
+            ? state.codebase.repo
+            : null;
         const codebase = {
           label: trimmed(input.label) || state.codebase?.label || "This codebase",
           root,
+          repo,
           summary: trimmed(input.summary) || state.codebase?.summary || "",
           fileCount: Number.isFinite(input.fileCount) ? Math.max(0, input.fileCount | 0) : state.codebase?.fileCount ?? null,
           languages: Array.isArray(input.languages)

extensions/code-tutor/extension.mjs

@@ -24,7 +24,7 @@ let runtime = null;
 const AI_TIMEOUT_MS = 90_000;
 const fastAI = createFastAI({ model: "gpt-5.4-mini", timeoutMs: AI_TIMEOUT_MS });
 
-// ---- host AI capability (canvas-kit 2026-06-27.1) --------------------------
+// ---- host AI capability (canvas-kit host model: ai + askAgent) -------------
 // Two ways to reach the model. Both are handed to the kit via runtime.setHost(...)
 // so SDK-free canvas.mjs handlers can call ctx.ai(...) / ctx.askAgent(...).
 //
@@ -279,7 +279,7 @@ session = await joinSession({ canvases: [canvas] });
 
 // Expose the host model to SDK-free canvas.mjs handlers as ctx.ai / ctx.askAgent.
 // The intercepts above use `host` directly; this makes the SAME capability
-// available to any plain handler too (canvas-kit 2026-06-27.1).
+// available to any plain handler too (via the kit's runtime.setHost host model).
 runtime.setHost(host);
 
 // Eagerly warm the dedicated fast-AI runtime so the learner's FIRST question or

extensions/code-tutor/test/smoke.test.mjs

@@ -126,6 +126,16 @@ try {
     assert.equal(s.codebase.fileCount, 12);
   });
 
+  await test("set_codebase stores a valid owner/repo and ignores an invalid one", async () => {
+    // A valid full name is recorded so findings can offer a session deep link.
+    await post(open.url, "set_codebase", { repo: "jongio/copilot-extensions" });
+    assert.equal((await getState(open.url)).codebase.repo, "jongio/copilot-extensions");
+    // A malformed repo must NOT overwrite the good one (lenient fallback), so a
+    // bad value never reaches buildSessionDeepLink and yields a dead link.
+    await post(open.url, "set_codebase", { repo: "not a repo/../x" });
+    assert.equal((await getState(open.url)).codebase.repo, "jongio/copilot-extensions");
+  });
+
   let topicId;
   await test("add_topic caches the generic eli5 level + auto-detects it", async () => {
     const { body } = await post(open.url, "add_topic", {

extensions/code-tutor/web/app.mjs

@@ -5,7 +5,7 @@
 // (active tab, filters, expanded panels, draft text, live slider position) lives
 // in useState; Preact's DOM diffing keeps a live push from clobbering it.
 
-import { html, mountCanvas, useState, useEffect, useRef, Icon, relativeTime, pollWhileVisible } from "/kit/client.mjs";
+import { html, mountCanvas, useState, useEffect, useRef, Icon, relativeTime, pollWhileVisible, buildSessionDeepLink } from "/kit/client.mjs";
 import { tokenize, toLines, languageFor } from "./highlight.mjs";
 
 const LEVELS = ["eli5", "curious", "engineer", "wizard"];
@@ -524,9 +524,16 @@ function TopicCard({ topic, level, questions, open, onToggle, invoke }) {
 }
 
 // ---- findings --------------------------------------------------------------
-function FindingCard({ f, topicTitle, invoke }) {
+function FindingCard({ f, topicTitle, invoke, repo }) {
   const [showPrompt, setShowPrompt] = useState(false);
   const m = QUALITY_META[f.quality] ?? QUALITY_META.ok;
+  // A validated ghapp:// deep link that opens a NEW, dedicated Copilot session to
+  // run this finding's ready-made fix prompt. Null unless the board knows its
+  // GitHub owner/repo (set via set_codebase) AND the finding carries a fixPrompt;
+  // buildSessionDeepLink returns null for anything it can't form into a safe link,
+  // so we fall back to copy-the-prompt below.
+  const fixLink =
+    repo && f.fixPrompt ? buildSessionDeepLink({ repo, prompt: f.fixPrompt, mode: "autopilot" }) : null;
   return html`
     <div class=${`cs-finding ${f.quality}`}>
       <div class="cs-finding-head">
@@ -550,12 +557,27 @@ function FindingCard({ f, topicTitle, invoke }) {
       <div class="cs-finding-actions">
         ${f.fixPrompt
           ? html`
-              <button class="ck-btn ck-btn-sm ck-btn-primary" onClick=${async () => {
-                copy(f.fixPrompt);
-                await invoke("set_fix_status", { id: f.id, status: "requested" });
-              }}>
-                <${Icon} name="wrench" size=${14} />Request fix session
-              </button>
+              ${fixLink
+                ? html`
+                    <a
+                      class="ck-btn ck-btn-sm ck-btn-primary"
+                      href=${fixLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      title="Open a new Copilot session that fixes this"
+                      onClick=${() => invoke("set_fix_status", { id: f.id, status: "requested" })}
+                    >
+                      <${Icon} name="wrench" size=${14} />Fix in a new session
+                    </a>
+                  `
+                : html`
+                    <button class="ck-btn ck-btn-sm ck-btn-primary" onClick=${async () => {
+                      copy(f.fixPrompt);
+                      await invoke("set_fix_status", { id: f.id, status: "requested" });
+                    }}>
+                      <${Icon} name="wrench" size=${14} />Request fix session
+                    </button>
+                  `}
               <button class="ck-btn ck-btn-sm" onClick=${() => setShowPrompt((v) => !v)}>
                 <${Icon} name=${showPrompt ? "chevron-down" : "chevron-right"} size=${14} />${showPrompt ? "Hide" : "Show"} prompt
               </button>
@@ -572,7 +594,9 @@ function FindingCard({ f, topicTitle, invoke }) {
         </button>
       </div>
       ${f.fixStatus === "requested"
-        ? html`<div class="ck-caption"><${Icon} name="info" size=${12} /> Prompt copied - ask Copilot to start a session, or it'll pick this up.</div>`
+        ? html`<div class="ck-caption"><${Icon} name="info" size=${12} /> ${fixLink
+            ? "Opening a fix session in a new Copilot window - confirm it there."
+            : "Prompt copied - ask Copilot to start a session, or it'll pick this up."}</div>`
         : null}
     </div>
   `;
@@ -680,6 +704,7 @@ function LearnTab({ state, level, openIds, toggle, invoke }) {
 
 function ReviewTab({ state, invoke }) {
   const findings = state.findings ?? [];
+  const repo = state.codebase?.repo || null;
   const byId = Object.fromEntries((state.topics ?? []).map((t) => [t.id, t.title]));
   if (!findings.length) {
     return html`
@@ -704,7 +729,7 @@ function ReviewTab({ state, invoke }) {
               <h3>${m.label}</h3>
               <span class="cs-count">${group.length}</span>
             </div>
-            <div class="cs-list">${group.map((f) => html`<${FindingCard} key=${f.id} f=${f} topicTitle=${byId[f.topicId]} invoke=${invoke} />`)}</div>
+            <div class="cs-list">${group.map((f) => html`<${FindingCard} key=${f.id} f=${f} topicTitle=${byId[f.topicId]} repo=${repo} invoke=${invoke} />`)}</div>
           </div>
         `;
       })}

extensions/code-tutor/web/styles.css

@@ -303,6 +303,9 @@ button.cs-chip:hover { border-color: var(--ck-accent); color: var(--ck-fg); }
 .cs-suggest strong { color: var(--ck-accent); }
 .cs-fixprompt { font-family: var(--ck-mono); font-size: var(--fs-code); white-space: pre-wrap; background: var(--ck-bg-inset); border: 1px solid var(--ck-border); border-radius: var(--r-sm); padding: 9px 11px; line-height: 1.5; }
 .cs-finding-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+/* "Fix in a new session" is a ghapp:// deep-link anchor styled as a kit button;
+   strip the default underline so it reads as a button, not a link. */
+.cs-finding-actions a.ck-btn { text-decoration: none; }
 
 /* ---- empty states -------------------------------------------------------- */
 .cs-empty { text-align: center; padding: 30px 16px; color: var(--ck-muted); }