From 0f9318cfb3b3fd48dc5f91e13a037df9d336c86b Mon Sep 17 00:00:00 2001 From: NagyVikt Date: Tue, 21 Apr 2026 02:45:19 +0200 Subject: [PATCH] Make the README source-control visual read like VS Code The previous asset communicated the right concept but looked more like a slide than a live editor. This refresh keeps the same README path while rebuilding the SVG as a VS Code-style window with a real title bar, activity bar, source-control sidebar, editor tab, and OpenSpec files shown beside implementation files. Constraint: Keep the existing README image path stable Rejected: Swap in another raw screenshot | loses the clean staged explanation of agent and OpenSpec files Confidence: high Scope-risk: narrow Reversibility: clean Directive: Keep future tweaks screenshot-like and avoid drifting back to presentation-style callout panels Tested: convert docs/images/workflow-source-control.svg /tmp/workflow-source-control-verify.png Tested: git diff --check Tested: npm test Not-tested: README rendering on GitHub after merge --- docs/images/workflow-source-control.svg | 326 ++++++++++++------ .../.openspec.yaml | 2 + .../notes.md | 5 + 3 files changed, 228 insertions(+), 105 deletions(-) create mode 100644 openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/.openspec.yaml create mode 100644 openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/notes.md diff --git a/docs/images/workflow-source-control.svg b/docs/images/workflow-source-control.svg index 7266f14a..dde7fed0 100644 --- a/docs/images/workflow-source-control.svg +++ b/docs/images/workflow-source-control.svg @@ -1,113 +1,229 @@ - + VS Code source control view with agent branches and OpenSpec files - A frontend-style source control layout showing two active agent branches. Each branch change list includes OpenSpec tasks.md and spec.md files along with implementation files. + A VS Code inspired source control window with two active agent branches, an editor tab, and OpenSpec task and spec files listed beside implementation files. - - - + + + - - - + + + + + + + + + + + + + + + + + + - - - VS CODE - LIVE - recodee — Source Control - - - - - - - - - SOURCE CONTROL - - - dev - base · clean - Baseline branch — no agent activity - - - agent_codex__dashboard-triage - - 5 - - ▾ Changes - TS - feature-flags.ts - M - - RS - reader.rs - U - - RS - mod.rs - M - - OS - openspec/changes/agent-codex-dashboard-triage/tasks.md - U - - OS - openspec/changes/agent-codex-dashboard-triage/specs/.../spec.md - U - - - agent_claude__loader-parallel - - 5 - - ▾ Changes - TSX - loading-overlay.tsx - U - - TSX - spinner.tsx - M - - TS - navigation-loader.ts - M - - OS - openspec/changes/agent-claude-loader-parallel/tasks.md - U - - OS - openspec/changes/agent-claude-loader-parallel/specs/.../spec.md - U - - - - TSX loading-overlay.tsx - - + const shouldRender = !navigationSettled && !suppressLoaderFlash - + return shouldRender ? <OverlaySpinner /> : null - + setTimeout(() => setSuppressLoaderFlash(true), 140) - - - Both agent branches now show OpenSpec artifacts inside Changes: - - openspec/changes/<agent-branch>/tasks.md - - openspec/changes/<agent-branch>/specs/<capability>/spec.md - - - Why this matters - The frontend tutorial now communicates that implementation files and OpenSpec - change artifacts are created together in each agent lane. - - Legend - U - Untracked/new in this branch - M - Modified file - OS - OpenSpec change artifact + + + + + + + + + File Edit Selection View Go Run Terminal Help + + + + agent worktrees + recodee - gitguardex - VS Code + + + + + + + + + + + + + + + + + + + + + + 2 + + + + + SOURCE CONTROL + ... + + + + dev + base branch - clean + Baseline branch. No agent activity. + + + + agent_codex__dashboard-triage + v Changes + + 5 + + + + + feature-flags.ts + M + + + + reader.rs + U + + + + mod.rs + M + + + + openspec/changes/.../tasks.md + U + + + + openspec/changes/.../spec.md + U + + + + + agent_claude__loader-parallel + v Changes + + 5 + + + + + loading-overlay.tsx + U + + + + spinner.tsx + M + + + + navigation-loader.ts + M + + + + openspec/changes/.../tasks.md + U + + + + openspec/changes/.../spec.md + U + + + + + + loading-overlay.tsx + TSX + + + + + + + + + 18 + 19 + 20 + 21 + 22 + 23 + 24 + 25 + + + + + + + + + + + const + shouldRender + = + !navigationSettled + && + !suppressLoaderFlash + + return + shouldRender + ? + <OverlaySpinner /> + : + null + + setTimeout + (() => + setSuppressLoaderFlash + ( + true + ), + 140 + ) + + // keep OpenSpec files visible beside implementation work + const + agentArtifacts + = + [ + 'tasks.md' + , + 'spec.md' + ] + + if + ( + agentArtifacts + . + length + ) + { + + sidebarHint + = + 'source control stays readable' + + + + gitguardex + agent/codex/improve-vscode-reference-image + Ln 19, Col 9 UTF-8 TypeScript React diff --git a/openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/.openspec.yaml b/openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/.openspec.yaml new file mode 100644 index 00000000..4b8c565f --- /dev/null +++ b/openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-04-21 diff --git a/openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/notes.md b/openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/notes.md new file mode 100644 index 00000000..8c086aeb --- /dev/null +++ b/openspec/changes/agent-codex-improve-vscode-reference-image-2026-04-21-02-39/notes.md @@ -0,0 +1,5 @@ +# T1 Notes + +- Refresh the README VS Code Source Control illustration so it looks closer to a real VS Code window instead of a presentation slide. +- Keep the OpenSpec signal inside the visual by showing `tasks.md` and `spec.md` next to implementation files in each agent branch. +- Preserve the existing README image path so the documentation embed does not need a follow-up rename.