🤖 feat: show active mode instructions in Instructions pane#3391
🤖 feat: show active mode instructions in Instructions pane#3391ammar-agent wants to merge 3 commits into
Conversation
Add a ModeInstructionsPanel above the existing Chat Instructions / AGENTS.md sections that renders the currently-selected agent's system prompt body. The panel styles itself with the agent's uiColor (background tint, left accent bar, icon swatch, mode-name color), so the Instructions tab visibly tracks the mode you're in. Also extracts the shared agent -> lucide icon map out of AgentModePicker into src/browser/utils/agentIcons.ts so both surfaces stay in sync.
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8e656ce206
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Address Codex P2: when the user switches modes the previous fetch can still be in flight, and we were rendering the old body under the new mode's color/name until the new response arrived. Treat any pkg whose id no longer matches the current agentId as 'not loaded yet' so the body section falls back to the loading state instead of showing the wrong prompt.
|
@codex review Addressed in bb196b6: track the agent id of the loaded |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bb196b61a6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Address Codex P2: when workspaceId changes but the mode id stays the same (e.g. exec in workspace A vs B with different exec.md), the previous pkg.id === agentId guard kept rendering the old workspace's prompt until the new request returned. Track the (agentId, workspaceId) pair the cached pkg belongs to so either dimension can invalidate it.
|
@codex review Addressed in 0191593: cache the |
|
Codex Review: Didn't find any major issues. What shall we delve into next? ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
1 participant
Summary
The Instructions pane now leads with the active mode's system prompt, rendered with the same
uiColorthat drives the mode picker pill and the chat-input focus ring. Switching modes (e.g. plan ↔ exec) re-fetches the agent body and visibly retints the panel — so the Instructions tab now tracks the mode you're in.Background
The Instructions tab already exposes the AGENTS.md files and Chat Instructions that get injected into the system prompt, but the mode prompt itself — usually the largest part of the system message — was invisible. Users couldn't easily inspect what "Plan" vs "Exec" actually tells the model, and the tab gave no visual signal that the active mode matters.
This PR fills that gap by rendering the resolved agent body inside the same tab, styled with the mode's own color so the affordance is unmistakable.
Implementation
ModeInstructionsPanel(src/browser/components/InstructionsTab/ModeInstructionsPanel.tsx)useAgent()and fetches the agent package viaapi.agents.get, keyed on the agent id so switching modes triggers a fresh fetch and a smooth color transition.uiColor(already inheritance-resolved on the backend) drives a 3px left accent bar, a subtle background tint, the icon swatch, the mode-name heading color, and the collapsed-preview pill. All tints usecolor-mix(in srgb, <color> N%, transparent)so they degrade gracefully across themes.MarkdownRenderer(same security-hardened pipeline as chat), capped atmax-h-[40vh]with its own scrollbar so a multi-KB prompt never pushes the rest of the panel off-screen.Shared icon helper (
src/browser/utils/agentIcons.ts)AgentModePickerso the picker pill and the new panel always show the same glyph for a given agent (Route for plan, SquareCode for exec, Bot fallback).Tab wiring —
ModeInstructionsPanelsits aboveChatInstructionsPanel, which sits above the AGENTS.md file list. Reading the tab top-to-bottom now mirrors the order of contributions to the system prompt.Storybook + mock plumbing — Extended
createMockORPCClientwith anagentBodiesoption soagents.getcan return real markdown in stories. Added two Chromatic-snapshotted stories (ExecMode,PlanMode) covering the two built-in mode colors so visual regressions are caught.Validation
make static-check(typecheck + lint + fmt-check + docs link check) ✅tests/ui/storybook/budget.test.ts) updated implicitly — verified the two new snapshots fit under the cap (305 → would have blown the 303 cap, then trimmed by marking the non-color-relevant variantsdisableSnapshot: true).bun x storybook build✅ — confirms the new story file is wired end-to-end.AgentModePicker.test.tsx(5/5),agents.test.ts(4/4).Risks
Low. The new panel is additive (sits above existing sections), reads from an IPC method that's already used by Settings → Tasks, and falls back gracefully when the agent has an empty body. The shared
getAgentIconextraction is a pure refactor with the same lookup as before; the picker's behavior is unchanged.The only behavioral nuance worth flagging:
agents.getreturns the raw body of the agent's.mdfile, not the inheritance-resolved prompt that's actually injected into the system message. For built-inplan/execthey're identical; for custom agents withprompt.append: true, the user sees only the additions on top of the base. Surfacing the fully-resolved prompt would require a new IPC and is out of scope.Generated with
mux• Model:anthropic:claude-opus-4-7• Thinking:xhigh• Cost:$10.76