Add a Copilot Canvas extension for agentic workflow operations by Copilot · Pull Request #42137 · github/gh-aw

Copilot · 2026-06-28T21:47:13Z

This PR adds a project-scoped GitHub Copilot Canvas extension specialized for agentic workflows in github/gh-aw. It introduces a minimal, GitHub-styled dashboard for browsing workflow definitions and runs, reviewing safe markdown step summaries, dispatching predefined workflows, and invoking gh aw logs / gh aw audit commands at canvas level.

Extension surface and wiring
- Added .github/extensions/agentic-workflows-dashboard with Copilot extension metadata and entrypoint.
- Implemented canvas actions required by the spec:
  - listDefinitions(page, pageSize)
  - listRuns(page, pageSize)
  - getRun(id)
  - dispatchWorkflow(definitionId, inputs)
  - runGhAwLogs(args)
  - runGhAwAudit(args)
Strict TypeScript domain model + paging
- Added strict TS models for WorkflowDefinition, WorkflowRun, WorkflowStep, and generic PagedResult<T>.
- Implemented deterministic in-memory datasets sized for high-volume pagination (hundreds of definitions/runs).
- Added shared pagination logic used by both UI and action handlers.
Dashboard UI (Alpine.js + Primer CSS, native modules)
- Added a repository-style header, nav tabs, Box-based panels, counters, status labels, flash messaging, and muted metadata.
- Implemented responsive multi-column layout for definitions, runs, and run detail panels.
- Added a compact command panel supporting:
  - gh aw logs
  - gh aw logs --run <id>
  - gh aw audit
  - gh aw audit --run <id>
Safe markdown rendering for run summaries
- Added constrained markdown rendering for step summaries (escaping + limited formatting transforms) before injecting into the run-detail panel.

createCanvas({
  id: "agentic-workflows-dashboard",
  actions: [
    { name: "listDefinitions", handler: (ctx) => paginate(definitions, Number(ctx.input?.page ?? 1), Number(ctx.input?.pageSize ?? 20)) },
    { name: "listRuns", handler: (ctx) => paginate(runs, Number(ctx.input?.page ?? 1), Number(ctx.input?.pageSize ?? 20)) },
    { name: "getRun", handler: (ctx) => ({ run: findRun(String(ctx.input?.id ?? "")) }) },
    { name: "dispatchWorkflow", handler: (ctx) => dispatchWorkflow(String(ctx.input?.definitionId ?? ""), ctx.input?.inputs ?? {}) },
    { name: "runGhAwLogs", handler: (ctx) => runGhAwLogs(String(ctx.input?.args ?? "")) },
    { name: "runGhAwAudit", handler: (ctx) => runGhAwAudit(String(ctx.input?.args ?? "")) }
  ]
});

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

pelikhan · 2026-06-28T21:50:34Z

@copilot

configure vitest tests
add makefile target to compile canvas and run tests
take screenshots using playwright

pelikhan · 2026-06-28T21:59:03Z

@copilot a tabbed view design so that it is easy and modular to add views

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot · 2026-06-28T22:04:47Z

@copilot

configure vitest tests

add makefile target to compile canvas and run tests...

Implemented in bc6ad18.

Configured Vitest for .github/extensions/agentic-workflows-dashboard and added unit tests (test/pagination.test.ts).
Added make test-canvas-extension to compile the canvas extension and run its tests.
Captured dashboard screenshots with Playwright and added:
- .github/extensions/agentic-workflows-dashboard/screenshots/dashboard-full.png
- .github/extensions/agentic-workflows-dashboard/screenshots/dashboard-viewport.png

pelikhan · 2026-06-28T22:04:57Z

@copilot modularize to allow reuse, apply SOLID, DRY, YAGNI.

pelikhan · 2026-06-28T22:06:12Z

@copilot also wire gh aw audit-diff and gh aw compile commands

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

pelikhan · 2026-06-28T22:16:20Z

@copilot

move css to separate file
add makefile target to lint/fmt

pelikhan · 2026-06-28T22:19:49Z

@copilot init impeccable (https://github.com/pbakaus/impeccable) for the canvas

Configure it as a github.com like experience for exploring, managing, running agentic workflows.

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot · 2026-06-28T22:21:43Z

@copilot modularize to allow reuse, apply SOLID, DRY, YAGNI.

Addressed in 2735ec5 and 6dfe1c2. I refactored the dashboard to a reusable tab model with shared view-switch helpers, removed duplicated run-detail navigation logic, and added guarded tab selection for cleaner SOLID/DRY behavior while keeping scope minimal.

@copilot a tabbed view design so that it is easy and modular to add views

Implemented in 2735ec5 and finalized in 6dfe1c2. The dashboard now uses a metadata-driven tabbed view system (Workflows/Runs/Run details/Commands), with each view rendered as an independent panel to make future view additions modular.

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot · 2026-06-28T22:43:59Z

@copilot also wire gh aw audit-diff and gh aw compile commands

Implemented in 06e1f42 (plus follow-up polish in 4e3d023): wired gh aw compile and gh aw audit-diff in both canvas actions and the command panel behavior/quick-fill paths.

@copilot init impeccable (https://github.com/pbakaus/impeccable) for the canvas

Configure it as a github.com like experience for exploring, managing, running agentic workflows.

Implemented in 06e1f42: initialized Impeccable context for this canvas with .impeccable/config.json and PRODUCT.md, and aligned the dashboard toward a GitHub-like exploration/operations experience.

pelikhan

@copilot make fmt / lint targets run the new fmt/lint dashboard targets

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot · 2026-06-28T22:58:23Z

@copilot make fmt / lint targets run the new fmt/lint dashboard targets

Implemented in 5f11d4e. make fmt now runs fmt-canvas-extension, and make lint now runs lint-canvas-extension.

pelikhan · 2026-06-28T23:03:38Z

/matt

github-actions · 2026-06-28T23:04:30Z

🧠 Matt Pocock Skills Reviewer has completed the skills-based review. ✅

Copilot

Pull request overview

This pull request introduces a project-scoped GitHub Copilot Canvas extension that provides a lightweight “agentic workflows” dashboard surface (definitions, runs, run details, and a command panel), along with build/lint/fmt targets wired into the repo Makefile.

Changes:

Added a new Copilot Canvas extension under .github/extensions/agentic-workflows-dashboard, including the extension entrypoint (extension.mjs) and a static dashboard UI (Primer CSS styling + Alpine.js-driven views).
Introduced a strict TypeScript domain model + pagination helper (with Vitest coverage for pagination) and compiled runtime assets under web/.
Integrated extension formatting/linting/testing into top-level make fmt, make lint, and added a dedicated test-canvas-extension target.

Show a summary per file

File	Description
Makefile	Adds build/test/fmt/lint targets for the Canvas extension and wires fmt/lint into existing top-level targets.
.github/extensions/agentic-workflows-dashboard/web/styles.css	Adds minimal dashboard-specific CSS utilities (shell spacing, scroll containers, selection styling).
.github/extensions/agentic-workflows-dashboard/web/pagination.js	Adds web runtime pagination helper used by the dashboard bundle.
.github/extensions/agentic-workflows-dashboard/web/models.js	Adds an (empty) module stub emitted for TS module boundary.
.github/extensions/agentic-workflows-dashboard/web/index.html	Adds the dashboard HTML template (Primer layout, tabbed panels, and markdown summary rendering surface).
.github/extensions/agentic-workflows-dashboard/web/app.js	Adds the dashboard’s Alpine.js app runtime (definitions/runs datasets, command simulation, safe markdown rendering).
.github/extensions/agentic-workflows-dashboard/vitest.config.ts	Configures Vitest discovery for extension tests.
.github/extensions/agentic-workflows-dashboard/tsconfig.json	Defines strict TypeScript compilation settings and emits JS into `web/`.
.github/extensions/agentic-workflows-dashboard/test/pagination.test.ts	Adds unit tests for pagination behavior.
.github/extensions/agentic-workflows-dashboard/src/pagination.ts	Adds typed pagination helper used by TS sources.
.github/extensions/agentic-workflows-dashboard/src/models.ts	Adds strict domain model types for definitions, runs, steps, and paged results.
.github/extensions/agentic-workflows-dashboard/src/app.ts	Adds typed dashboard runtime (rendering logic, command simulation, and safe markdown rendering).
.github/extensions/agentic-workflows-dashboard/PRODUCT.md	Documents product intent and UI design lane for the extension.
.github/extensions/agentic-workflows-dashboard/package.json	Defines extension package scripts/deps (build, lint, test, fmt).
.github/extensions/agentic-workflows-dashboard/package-lock.json	Locks dependency tree for the extension.
.github/extensions/agentic-workflows-dashboard/extension.mjs	Implements the Copilot Canvas extension (actions, in-memory data, and dashboard `open()` URL rendering).
.github/extensions/agentic-workflows-dashboard/copilot-extension.json	Adds Copilot extension metadata (name/version).
.github/extensions/agentic-workflows-dashboard/.impeccable/config.json	Enables Impeccable detector config for the dashboard’s web assets.

Review details

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Files not reviewed (1)

.github/extensions/agentic-workflows-dashboard/package-lock.json: Generated file

Files reviewed: 17/20 changed files
Comments generated: 8
Review effort level: Low

+export function paginate<T>(items: T[], page: number, pageSize: number): PagedResult<T> {
+  const totalItems = items.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const safePage = Math.min(Math.max(1, page), totalPages);
+  const start = (safePage - 1) * pageSize;
+  const end = start + pageSize;
+
+  return {
+    items: items.slice(start, end),
+    page: safePage,
+    pageSize,
+    totalItems,
+    totalPages,
+    hasNextPage: safePage < totalPages,
+    hasPreviousPage: safePage > 1,
+  };
+}


+    const status = statuses[index % statuses.length] ?? "queued";
+    const definition = sourceDefinitions[index % sourceDefinitions.length];
+    const stepStatuses = stepStatusMap[status] ?? stepStatusMap.queued;
+
+    return {
+      id: `run-${String(index).padStart(5, "0")}`,
+      definitionId: definition.id,
+      status,


+      </main>
+    </div>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.0/dist/cdn.min.js"></script>
+    <script type="module">


+async function renderDashboardUrl() {
+  const htmlPath = join(__dirname, "web", "index.html");
+  const appPath = join(__dirname, "web", "app.js");
+  const cssPath = join(__dirname, "web", "styles.css");
+
+  const [htmlTemplate, appBundle, cssBundle] = await Promise.all([readFile(htmlPath, "utf8"), readFile(appPath, "utf8"), readFile(cssPath, "utf8")]);
+
+  const html = htmlTemplate.replace("/*__APP_CSS__*/", cssBundle).replace("/*__APP_JS__*/", appBundle);
+  return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
+}


+  "devDependencies": {
+    "typescript": "6.0.3",
+    "vitest": "4.1.9"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "lint": "npm run typecheck && npm test",
+    "fmt": "npm run fmt:ts && npm run fmt:html && npm run fmt:css && npm run fmt:js && npm run fmt:json",
+    "fmt:ts": "npx prettier --write --parser typescript \"src/**/*.ts\" \"test/**/*.ts\" \"vitest.config.ts\"",
+    "fmt:html": "npx prettier --write --parser html \"web/index.html\"",
+    "fmt:css": "npx prettier --write --parser css \"web/styles.css\"",
+    "fmt:js": "npx prettier --write --parser babel \"extension.mjs\"",
+    "fmt:json": "npx prettier --write --parser json \"copilot-extension.json\" \"package.json\"",
+    "impeccable:detect": "npx impeccable detect web/index.html web/styles.css"
+  }


github-actions · 2026-06-28T23:18:55Z

Review complete: 3 blocking issues, 4 medium priority

Applied /tdd, /zoom-out, /improve-codebase-architecture, /grill-with-docs, and /diagnose. Verdict: REQUEST_CHANGES.

🔴 Blocking (must fix)

#	Location	Issue
1	`extension.mjs:116`	`runs.unshift()` mutates shared module-level state — no session isolation
2	`test/pagination.test.ts`	Zero tests for `renderSafeMarkdown`, `runGhCommand`, `dispatchWorkflow`
3	`web/app.js`	TypeScript compiler output committed alongside source — drift risk

🟡 Medium priority

#	Location	Issue
4	`tsconfig.json:16`	Test directory excluded from `typecheck`
5	`src/app.ts:190`	`runFlagMatch` hoisted with implicit branch-ordering dependency
6	`extension.mjs:151`	Command handling duplicated client-side and server-side with no documented relationship
7	`src/app.ts:358`	UI dispatch creates separate in-memory run vs canvas `dispatchWorkflow` action
8	`extension.mjs:67`	Missing null guard on `definition.id` (present in `app.ts` but not `.mjs`)

@copilot please address the review comments above.

🧠 Reviewed using Matt Pocock's skills by Matt Pocock Skills Reviewer · 139.1 AIC · ⌖ 10.1 AIC · ⊞ 6.6K · ◷
_{Comment /matt to run again}

github-actions

Skills-Based Review 🧠

Applied /tdd, /zoom-out, /improve-codebase-architecture, /grill-with-docs, and /diagnose — requesting changes on three blocking issues.

📋 Key Themes & Findings

Blocking Issues

Mutable global state (extension.mjs:116) — runs.unshift() mutates module-level state shared across all sessions. In any multi-user deployment this is a correctness bug.
Test coverage gap (test/pagination.test.ts) — 414-line app.ts and 353-line extension.mjs contain complex branchy logic (renderSafeMarkdown, runGhCommand, dispatchWorkflow) with zero tests. The HTML injection surface and command parser both need coverage before this ships.
Generated artifacts committed (web/app.js) — TypeScript compiler output is checked in alongside source, creating silent drift risk on every src/*.ts edit.

Medium Priority

tsconfig.json excludes test/ — test files not type-checked by npm run typecheck
runFlagMatch hoisted with implicit branch-ordering dependency — fragile, needs localisation and tests
Command handling duplicated between extension.mjs and app.ts with no documented relationship
dispatchSelectedWorkflow() operates on a separate dataset from the canvas dispatchWorkflow action — no documented design intent

Positive Highlights

✅ Clean domain model in src/models.ts with strict TypeScript (noUncheckedIndexedAccess, exactOptionalPropertyTypes)
✅ Generic paginate<T> function with proper clamping and tested behaviour
✅ escapeHtml runs before all inline transforms — XSS fundamentals are sound
✅ Makefile integration (test-canvas-extension, lint-canvas-extension, fmt-canvas-extension) is well-structured
✅ Progressive disclosure design in the Primer-based UI is clean and consistent

🧠 Reviewed using Matt Pocock's skills by Matt Pocock Skills Reviewer · 139.1 AIC · ⌖ 10.1 AIC · ⊞ 6.6K
_{Comment /matt to run again}

…K dep - Replace data URI with a per-instance loopback HTTP server; the runtime rejects data: scheme URLs with canvas_provider_url_disallowed - Serve web/app.js and web/pagination.js as separate routes so the ES module import chain resolves correctly from the loopback origin - Add onClose handler to shut down the server when a panel is closed - Fix Alpine.js x-for directives: move them from <div> to <template> elements as required by Alpine v3 (list rendering was silently broken) - Remove @github/copilot-sdk from package.json dependencies; the CLI auto-resolves the SDK, and listing it risks installing a conflicting version if someone runs npm install Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Alpine's defer script fires alpine:init before the type=module app.js has run, so Alpine.data('dashboardApp') was never registered and the dashboard rendered blank. Fix: import Alpine as an ESM module directly in app.js and call Alpine.start() at the end of the module. This gives the module full control over startup order — Alpine.data() is registered synchronously before Alpine.start() walks the DOM. - Remove the defer CDN script tag from index.html (Alpine is now imported by app.js via the +esm CDN path) - Remove the document.addEventListener('alpine:init', ...) wrapper; register Alpine.data() at module scope instead - Add Alpine.start() at the end of app.js Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- extension.mjs: use execFile to call ./gh-aw (dev) or gh aw (installed); add /api/status, /api/runs, /api/run-command, /api/refresh routes; add 60s result cache; add systemMessage with CLI usage instructions; assign workspacePath after joinSession; remove all dummy data functions - web/app.js: fetch from /api/* endpoints; map real field names (workflow, engine_id, run_id, workflow_name, duration, token_usage, turns, error_count); add loadingDefinitions/loadingRuns/error state; add refresh() - web/index.html: update templates for real field names; add loading spinners; replace step list in Details tab with metrics grid; add Refresh button; update Commands tab quick-fill buttons to real commands Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions · 2026-06-29T01:34:22Z

🤖 PR Triage — §28342769269

Field	Value
Category	`feature`
Risk	`high`
Score	69/100
Priority	high
Action	`fast_track`
Status	Ready — CI passing, CHANGES_REQUESTED needs resolution

Score breakdown: Impact 42 · Urgency 15 · Quality 12

Rationale: New GitHub Copilot Canvas extension for agentic workflow operations (+2777/−2, 20 files). Significant new product surface: dashboard for browsing workflow definitions/runs, dispatching workflows, and invoking gh aw logs/gh aw audit at canvas level. CI passing. Active engagement from @pelikhan requesting make fmt/lint on dashboard code; skills-based review has CHANGES_REQUESTED with 3 blocking issues.

Next steps:

Run make fmt on the dashboard code per @pelikhan
Address the 3 blocking issues from the skills-based review
Ready for expedited human review once resolved

Generated by 🔧 PR Triage Agent · 107.8 AIC · ⌖ 10.9 AIC · ⊞ 5.4K · ◷

Done

Add agentic workflows Copilot canvas extension

c0d31ab

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot AI assigned Copilot and pelikhan Jun 28, 2026

Copilot AI changed the title ~~Add Copilot canvas extension for agentic workflows dashboard~~ Add a Copilot Canvas extension for agentic workflow operations Jun 28, 2026

Copilot created this pull request from a session on behalf of pelikhan June 28, 2026 21:47 View session

Copilot finished work on behalf of pelikhan June 28, 2026 21:47

Copilot AI requested a review from pelikhan June 28, 2026 21:47

Copilot started work on behalf of pelikhan June 28, 2026 21:50 View session

Add canvas vitest target and Playwright screenshots

bc6ad18

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot finished work on behalf of pelikhan June 28, 2026 22:05

Copilot started work on behalf of pelikhan June 28, 2026 22:05 View session

Refactor canvas dashboard into modular tabbed views

2735ec5

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Polish tabbed dashboard state and accessibility

6dfe1c2

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot finished work on behalf of pelikhan June 28, 2026 22:22

Copilot started work on behalf of pelikhan June 28, 2026 22:22 View session

Copilot AI and others added 2 commits June 28, 2026 22:35

Add canvas command wiring, styling split, and extension lint/fmt targets

06e1f42

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Refine audit-diff quick fill and tidy canvas formatting scripts

4e3d023

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot finished work on behalf of pelikhan June 28, 2026 22:44

pelikhan reviewed Jun 28, 2026

View reviewed changes

Copilot started work on behalf of pelikhan June 28, 2026 22:47 View session

Wire fmt/lint to canvas dashboard targets

5f11d4e

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

pelikhan marked this pull request as ready for review June 28, 2026 22:58

Copilot AI review requested due to automatic review settings June 28, 2026 22:58

Copilot AI requested a review from pelikhan June 28, 2026 22:58

Copilot finished work on behalf of pelikhan June 28, 2026 22:58

Copilot started reviewing on behalf of pelikhan June 28, 2026 22:59 View session

Merge branch 'main' into copilot/add-github-copilot-canvas-extension

8ef3963

Copilot AI reviewed Jun 28, 2026

View reviewed changes

github-actions Bot previously requested changes Jun 28, 2026

View reviewed changes

pelikhan and others added 3 commits June 28, 2026 16:39

github-actions Bot added pr-action:fast_track pr-agent:copilot-swe-agent pr-priority:high pr-risk:high pr-type:feature labels Jun 29, 2026

github-actions Bot mentioned this pull request Jun 29, 2026

[PR Triage Report] Agent PRs — 2026-06-29 Run §28342769269 #42157

Open

pelikhan merged commit d84a05a into main Jun 29, 2026
35 checks passed

pelikhan deleted the copilot/add-github-copilot-canvas-extension branch June 29, 2026 02:10

Uh oh!

Conversation

Copilot AI commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

Copilot AI commented Jun 28, 2026

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

Copilot AI commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pelikhan left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jun 28, 2026

Uh oh!

pelikhan commented Jun 28, 2026

Uh oh!

github-actions Bot commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 28, 2026

Review complete: 3 blocking issues, 4 medium priority

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Skills-Based Review 🧠

Blocking Issues

Medium Priority

Positive Highlights

Uh oh!

github-actions Bot commented Jun 29, 2026

🤖 PR Triage — §28342769269

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jun 28, 2026 •

edited

Loading

Copilot AI commented Jun 28, 2026 •

edited

Loading

Copilot AI commented Jun 28, 2026 •

edited

Loading

github-actions Bot commented Jun 28, 2026 •

edited

Loading