@zhongqian97-code/ecode 0.5.27 → 0.5.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -5779,14 +5779,13 @@ function generateAdminHtml(version2) {
5779
5779
  function highlightCode(code) {
5780
5780
  let s = escHtml(code);
5781
5781
  // keywords
5782
- s = s.replace(/\b(function|const|let|var|return|if|else|for|while|class|import|export|from|async|await|new|this|typeof|instanceof|null|undefined|true|false)\b/g, '<span class="kw">$1</span>');
5782
+ s = s.replace(/\\b(function|const|let|var|return|if|else|for|while|class|import|export|from|async|await|new|this|typeof|instanceof|null|undefined|true|false)\\b/g, '<span class="kw">$1</span>');
5783
5783
  // strings (single, double \u2014 after HTML escaping, quotes appear as &#39; or &quot;)
5784
5784
  s = s.replace(/(&#39;[^&#]*&#39;|&quot;[^&]*&quot;)/g, '<span class="str">$1</span>');
5785
5785
  // comments
5786
- s = s.replace(/(//[^
5787
- ]*)/g, '<span class="cmt">$1</span>');
5786
+ s = s.replace(/(\\/\\/[^\\n]*)/g, '<span class="cmt">$1</span>');
5788
5787
  // numbers
5789
- s = s.replace(/\b(d+.?d*)\b/g, '<span class="num">$1</span>');
5788
+ s = s.replace(/\\b(\\d+\\.?\\d*)\\b/g, '<span class="num">$1</span>');
5790
5789
  return s;
5791
5790
  }
5792
5791
 
@@ -5982,7 +5981,7 @@ function generateAdminHtml(version2) {
5982
5981
  function handleWsEvent(msg) {
5983
5982
  const type = msg.type || msg.event;
5984
5983
  if (type === 'message.delta') {
5985
- const token = msg.delta || msg.content || '';
5984
+ const token = msg.text || '';
5986
5985
  if (!state.streamingMsgEl) {
5987
5986
  state.streamingMsgEl = appendMessage('assistant', escHtml(token), { streaming: true });
5988
5987
  } else {
@@ -5995,13 +5994,13 @@ function generateAdminHtml(version2) {
5995
5994
  finalizeStreamingMsg();
5996
5995
  setStatus('idle');
5997
5996
  } else if (type === 'tool.started') {
5998
- const name = msg.tool || msg.name || 'tool';
5997
+ const name = msg.toolName || 'tool';
5999
5998
  const msgsEl = document.getElementById('messages');
6000
5999
  const placeholder = msgsEl.querySelector('.empty-chat');
6001
6000
  if (placeholder) placeholder.remove();
6002
6001
  const boxEl = document.createElement('div');
6003
6002
  boxEl.className = 'tool-box';
6004
- boxEl.setAttribute('data-tool-id', msg.id || name);
6003
+ boxEl.setAttribute('data-tool-id', msg.callId || name);
6005
6004
  boxEl.innerHTML =
6006
6005
  '<div class="tool-box-header">\u250C\u2500 ' + escHtml(name) + ' \u2500</div>' +
6007
6006
  '<div class="tool-box-body">\u2026</div>';
@@ -6009,13 +6008,13 @@ function generateAdminHtml(version2) {
6009
6008
  msgsEl.scrollTop = msgsEl.scrollHeight;
6010
6009
  setStatus('tool_calling');
6011
6010
  } else if (type === 'tool.completed') {
6012
- const toolId = msg.id || msg.tool || msg.name || '';
6011
+ const toolId = msg.callId || '';
6013
6012
  const boxEl = document.querySelector('[data-tool-id="' + toolId + '"]');
6014
6013
  if (boxEl) {
6015
6014
  const body = boxEl.querySelector('.tool-box-body');
6016
- body.textContent = msg.output || msg.result || '(\uC644\uB8CC)';
6015
+ body.textContent = msg.output || '';
6017
6016
  boxEl.querySelector('.tool-box-header').textContent =
6018
- '\u2514\u2500 ' + (msg.tool || msg.name || toolId) + ' \u2500';
6017
+ '\u2514\u2500 ' + (msg.toolName || toolId) + ' \u2500';
6019
6018
  }
6020
6019
  setStatus('idle');
6021
6020
  } else if (type === 'approval.requested') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhongqian97-code/ecode",
3
- "version": "0.5.27",
3
+ "version": "0.5.29",
4
4
  "description": "A minimal Claude Code clone with REPL interface and bash tool calling",
5
5
  "type": "module",
6
6
  "author": "zhongqian97-code",
@@ -52,6 +52,7 @@
52
52
  "react": "^19.2.5"
53
53
  },
54
54
  "devDependencies": {
55
+ "@playwright/test": "^1.60.0",
55
56
  "@types/node": "^25.6.2",
56
57
  "tsup": "^8.0.0",
57
58
  "tsx": "^4.0.0",
@@ -0,0 +1,95 @@
1
+ ---
2
+ name: git-guardrails-claude-code
3
+ description: Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.
4
+ ---
5
+
6
+ # Setup Git Guardrails
7
+
8
+ Sets up a PreToolUse hook that intercepts and blocks dangerous git commands before Claude executes them.
9
+
10
+ ## What Gets Blocked
11
+
12
+ - `git push` (all variants including `--force`)
13
+ - `git reset --hard`
14
+ - `git clean -f` / `git clean -fd`
15
+ - `git branch -D`
16
+ - `git checkout .` / `git restore .`
17
+
18
+ When blocked, Claude sees a message telling it that it does not have authority to access these commands.
19
+
20
+ ## Steps
21
+
22
+ ### 1. Ask scope
23
+
24
+ Ask the user: install for **this project only** (`.claude/settings.json`) or **all projects** (`~/.claude/settings.json`)?
25
+
26
+ ### 2. Copy the hook script
27
+
28
+ The bundled script is at: [scripts/block-dangerous-git.sh](scripts/block-dangerous-git.sh)
29
+
30
+ Copy it to the target location based on scope:
31
+
32
+ - **Project**: `.claude/hooks/block-dangerous-git.sh`
33
+ - **Global**: `~/.claude/hooks/block-dangerous-git.sh`
34
+
35
+ Make it executable with `chmod +x`.
36
+
37
+ ### 3. Add hook to settings
38
+
39
+ Add to the appropriate settings file:
40
+
41
+ **Project** (`.claude/settings.json`):
42
+
43
+ ```json
44
+ {
45
+ "hooks": {
46
+ "PreToolUse": [
47
+ {
48
+ "matcher": "Bash",
49
+ "hooks": [
50
+ {
51
+ "type": "command",
52
+ "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/block-dangerous-git.sh"
53
+ }
54
+ ]
55
+ }
56
+ ]
57
+ }
58
+ }
59
+ ```
60
+
61
+ **Global** (`~/.claude/settings.json`):
62
+
63
+ ```json
64
+ {
65
+ "hooks": {
66
+ "PreToolUse": [
67
+ {
68
+ "matcher": "Bash",
69
+ "hooks": [
70
+ {
71
+ "type": "command",
72
+ "command": "~/.claude/hooks/block-dangerous-git.sh"
73
+ }
74
+ ]
75
+ }
76
+ ]
77
+ }
78
+ }
79
+ ```
80
+
81
+ If the settings file already exists, merge the hook into existing `hooks.PreToolUse` array — don't overwrite other settings.
82
+
83
+ ### 4. Ask about customization
84
+
85
+ Ask if user wants to add or remove any patterns from the blocked list. Edit the copied script accordingly.
86
+
87
+ ### 5. Verify
88
+
89
+ Run a quick test:
90
+
91
+ ```bash
92
+ echo '{"tool_input":{"command":"git push origin main"}}' | <path-to-script>
93
+ ```
94
+
95
+ Should exit with code 2 and print a BLOCKED message to stderr.
@@ -0,0 +1,13 @@
1
+ ---
2
+ name: handoff
3
+ description: Compact the current conversation into a handoff document for another agent to pick up.
4
+ argument-hint: "What will the next session be used for?"
5
+ ---
6
+
7
+ Write a handoff document summarising the current conversation so a fresh agent can continue the work. Save it to a path produced by `mktemp -t handoff-XXXXXX.md` (read the file before you write to it).
8
+
9
+ Suggest the skills to be used, if any, by the next session.
10
+
11
+ Do not duplicate content already captured in other artifacts (PRDs, plans, ADRs, issues, commits, diffs). Reference them by path or URL instead.
12
+
13
+ If the user passed arguments, treat them as a description of what the next session will focus on and tailor the doc accordingly.
@@ -0,0 +1,118 @@
1
+ ---
2
+ name: migrate-to-shoehorn
3
+ description: Migrate test files from `as` type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace `as` in tests, or needs partial test data.
4
+ ---
5
+
6
+ # Migrate to Shoehorn
7
+
8
+ ## Why shoehorn?
9
+
10
+ `shoehorn` lets you pass partial data in tests while keeping TypeScript happy. It replaces `as` assertions with type-safe alternatives.
11
+
12
+ **Test code only.** Never use shoehorn in production code.
13
+
14
+ Problems with `as` in tests:
15
+
16
+ - Trained not to use it
17
+ - Must manually specify target type
18
+ - Double-as (`as unknown as Type`) for intentionally wrong data
19
+
20
+ ## Install
21
+
22
+ ```bash
23
+ npm i @total-typescript/shoehorn
24
+ ```
25
+
26
+ ## Migration patterns
27
+
28
+ ### Large objects with few needed properties
29
+
30
+ Before:
31
+
32
+ ```ts
33
+ type Request = {
34
+ body: { id: string };
35
+ headers: Record<string, string>;
36
+ cookies: Record<string, string>;
37
+ // ...20 more properties
38
+ };
39
+
40
+ it("gets user by id", () => {
41
+ // Only care about body.id but must fake entire Request
42
+ getUser({
43
+ body: { id: "123" },
44
+ headers: {},
45
+ cookies: {},
46
+ // ...fake all 20 properties
47
+ });
48
+ });
49
+ ```
50
+
51
+ After:
52
+
53
+ ```ts
54
+ import { fromPartial } from "@total-typescript/shoehorn";
55
+
56
+ it("gets user by id", () => {
57
+ getUser(
58
+ fromPartial({
59
+ body: { id: "123" },
60
+ }),
61
+ );
62
+ });
63
+ ```
64
+
65
+ ### `as Type` → `fromPartial()`
66
+
67
+ Before:
68
+
69
+ ```ts
70
+ getUser({ body: { id: "123" } } as Request);
71
+ ```
72
+
73
+ After:
74
+
75
+ ```ts
76
+ import { fromPartial } from "@total-typescript/shoehorn";
77
+
78
+ getUser(fromPartial({ body: { id: "123" } }));
79
+ ```
80
+
81
+ ### `as unknown as Type` → `fromAny()`
82
+
83
+ Before:
84
+
85
+ ```ts
86
+ getUser({ body: { id: 123 } } as unknown as Request); // wrong type on purpose
87
+ ```
88
+
89
+ After:
90
+
91
+ ```ts
92
+ import { fromAny } from "@total-typescript/shoehorn";
93
+
94
+ getUser(fromAny({ body: { id: 123 } }));
95
+ ```
96
+
97
+ ## When to use each
98
+
99
+ | Function | Use case |
100
+ | --------------- | -------------------------------------------------- |
101
+ | `fromPartial()` | Pass partial data that still type-checks |
102
+ | `fromAny()` | Pass intentionally wrong data (keeps autocomplete) |
103
+ | `fromExact()` | Force full object (swap with fromPartial later) |
104
+
105
+ ## Workflow
106
+
107
+ 1. **Gather requirements** - ask user:
108
+ - What test files have `as` assertions causing problems?
109
+ - Are they dealing with large objects where only some properties matter?
110
+ - Do they need to pass intentionally wrong data for error testing?
111
+
112
+ 2. **Install and migrate**:
113
+ - [ ] Install: `npm i @total-typescript/shoehorn`
114
+ - [ ] Find test files with `as` assertions: `grep -r " as [A-Z]" --include="*.test.ts" --include="*.spec.ts"`
115
+ - [ ] Replace `as Type` with `fromPartial()`
116
+ - [ ] Replace `as unknown as Type` with `fromAny()`
117
+ - [ ] Add imports from `@total-typescript/shoehorn`
118
+ - [ ] Run type check to verify
@@ -0,0 +1,79 @@
1
+ # Logic Prototype
2
+
3
+ A tiny interactive terminal app that lets the user drive a state model by hand. Use this when the question is about **business logic, state transitions, or data shape** — the kind of thing that looks reasonable on paper but only feels wrong once you push it through real cases.
4
+
5
+ ## When this is the right shape
6
+
7
+ - "I'm not sure if this state machine handles the edge case where X then Y."
8
+ - "Does this data model actually let me represent the case where..."
9
+ - "I want to feel out what the API should look like before writing it."
10
+ - Anything where the user wants to **press buttons and watch state change**.
11
+
12
+ If the question is "what should this look like" — wrong branch. Use [UI.md](UI.md).
13
+
14
+ ## Process
15
+
16
+ ### 1. State the question
17
+
18
+ Before writing code, write down what state model and what question you're prototyping. One paragraph, in the prototype's README or a comment at the top of the file. A logic prototype that answers the wrong question is pure waste — make the question explicit so it can be checked later, whether the user is watching now or returning to it AFK.
19
+
20
+ ### 2. Pick the language
21
+
22
+ Use whatever the host project uses. If the project has no obvious runtime (e.g. a docs repo), ask.
23
+
24
+ Match the project's existing conventions for tooling — don't add a new package manager or runtime just for the prototype.
25
+
26
+ ### 3. Isolate the logic in a portable module
27
+
28
+ Put the actual logic — the bit that's answering the question — behind a small, pure interface that could be lifted out and dropped into the real codebase later. The TUI around it is throwaway; the logic module shouldn't be.
29
+
30
+ The right shape depends on the question:
31
+
32
+ - **A pure reducer** — `(state, action) => state`. Good when actions are discrete events and state is a single value.
33
+ - **A state machine** — explicit states and transitions. Good when "which actions are even legal right now" is part of the question.
34
+ - **A small set of pure functions** over a plain data type. Good when there's no implicit current state — just transformations.
35
+ - **A class or module with a clear method surface** when the logic genuinely owns ongoing internal state.
36
+
37
+ Pick whichever shape best fits the question being asked, *not* whichever is easiest to wire to a TUI. Keep it pure: no I/O, no terminal code, no `console.log` for control flow. The TUI imports it and calls into it; nothing flows the other direction.
38
+
39
+ This is what makes the prototype useful past its own lifetime. When the question's been answered, the validated reducer / machine / function set can be lifted into the real module — the TUI shell gets deleted.
40
+
41
+ ### 4. Build the smallest TUI that exposes the state
42
+
43
+ Build it as a **lightweight TUI** — on every tick, clear the screen (`console.clear()` / `print("\033[2J\033[H")` / equivalent) and re-render the whole frame. The user should always see one stable view, not an ever-growing scrollback.
44
+
45
+ Each frame has two parts, in this order:
46
+
47
+ 1. **Current state**, pretty-printed and diff-friendly (one field per line, or formatted JSON). Use **bold** for field names or section headers and **dim** for less important context (timestamps, IDs, derived values). Native ANSI escape codes are fine — `\x1b[1m` bold, `\x1b[2m` dim, `\x1b[0m` reset. No need to pull in a styling library unless one is already in the project.
48
+ 2. **Keyboard shortcuts**, listed at the bottom: `[a] add user [d] delete user [t] tick clock [q] quit`. Bold the key, dim the description, or vice-versa — whatever reads cleanly.
49
+
50
+ Behaviour:
51
+
52
+ 1. **Initialise state** — a single in-memory object/struct. Render the first frame on start.
53
+ 2. **Read one keystroke (or one line)** at a time, dispatch to a handler that mutates state.
54
+ 3. **Re-render** the full frame after every action — don't append, replace.
55
+ 4. **Loop until quit.**
56
+
57
+ The whole frame should fit on one screen.
58
+
59
+ ### 5. Make it runnable in one command
60
+
61
+ Add a script to the project's existing task runner (`package.json` scripts, `Makefile`, `justfile`, `pyproject.toml`). The user should run `pnpm run <prototype-name>` or equivalent — never need to remember a path.
62
+
63
+ If the host project has no task runner, just put the command at the top of the prototype's README.
64
+
65
+ ### 6. Hand it over
66
+
67
+ Give the user the run command. They'll drive it themselves; the interesting moments are when they say "wait, that shouldn't be possible" or "huh, I assumed X would be different" — those are the bugs in the _idea_, which is the whole point. If they want new actions added, add them. Prototypes evolve.
68
+
69
+ ### 7. Capture the answer
70
+
71
+ When the prototype has done its job, the answer to the question is the only thing worth keeping. If the user is around, ask what it taught them. If not, leave a `NOTES.md` next to the prototype so the answer can be filled in (or filled in by you, if you've watched the session) before the prototype gets deleted.
72
+
73
+ ## Anti-patterns
74
+
75
+ - **Don't add tests.** A prototype that needs tests is no longer a prototype.
76
+ - **Don't wire it to the real database.** Use an in-memory store unless the question is specifically about persistence.
77
+ - **Don't generalise.** No "what if we wanted to support X later." The prototype answers one question.
78
+ - **Don't blur the logic and the TUI together.** If the reducer / state machine references `console.log`, prompts, or terminal escape codes, it's no longer portable. Keep the TUI as a thin shell over a pure module.
79
+ - **Don't ship the TUI shell into production.** The shell is optimised for being driven by hand from a terminal. The logic module behind it is the bit worth keeping.
@@ -0,0 +1,30 @@
1
+ ---
2
+ name: prototype
3
+ description: Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".
4
+ ---
5
+
6
+ # Prototype
7
+
8
+ A prototype is **throwaway code that answers a question**. The question decides the shape.
9
+
10
+ ## Pick a branch
11
+
12
+ Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around:
13
+
14
+ - **"Does this logic / state model feel right?"** → [LOGIC.md](LOGIC.md). Build a tiny interactive terminal app that pushes the state machine through cases that are hard to reason about on paper.
15
+ - **"What should this look like?"** → [UI.md](UI.md). Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.
16
+
17
+ The two branches produce very different artifacts — getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.
18
+
19
+ ## Rules that apply to both
20
+
21
+ 1. **Throwaway from day one, and clearly marked as such.** Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious — but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
22
+ 2. **One command to run.** Whatever the project's existing task runner supports — `pnpm <name>`, `python <path>`, `bun <path>`, etc. The user must be able to start it without thinking.
23
+ 3. **No persistence by default.** State lives in memory. Persistence is the thing the prototype is _checking_, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE — wipe me" name.
24
+ 4. **Skip the polish.** No tests, no error handling beyond what makes the prototype _runnable_, no abstractions. The point is to learn something fast and then delete it.
25
+ 5. **Surface the state.** After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
26
+ 6. **Delete or absorb when done.** When the prototype has answered its question, either delete it or fold the validated decision into the real code — don't leave it rotting in the repo.
27
+
28
+ ## When done
29
+
30
+ The _answer_ is the only thing worth keeping from a prototype. Capture it somewhere durable (commit message, ADR, issue, or a `NOTES.md` next to the prototype) along with the question it was answering. If the user is around, that capture is a quick conversation; if not, leave the placeholder so they (or you, on the next pass) can fill in the verdict before deleting the prototype.
@@ -0,0 +1,112 @@
1
+ # UI Prototype
2
+
3
+ Generate **several radically different UI variations** on a single route, switchable from a floating bottom bar. The user flips between variants in the browser, picks one (or steals bits from each), then throws the rest away.
4
+
5
+ If the question is about logic/state rather than what something looks like — wrong branch. Use [LOGIC.md](LOGIC.md).
6
+
7
+ ## When this is the right shape
8
+
9
+ - "What should this page look like?"
10
+ - "I want to see a few options for this dashboard before committing."
11
+ - "Try a different layout for the settings screen."
12
+ - Any time the user would otherwise spend a day picking between three vague mockups in their head.
13
+
14
+ ## Two sub-shapes — strongly prefer sub-shape A
15
+
16
+ A UI prototype is much easier to judge when it's **butting up against the rest of the app** — real header, real sidebar, real data, real density. A throwaway route on its own is a vacuum: every variant looks fine in isolation. Default to sub-shape A whenever there's a plausible existing page to host the variants. Only reach for sub-shape B if the prototype genuinely has no nearby home.
17
+
18
+ ### Sub-shape A — adjustment to an existing page (preferred)
19
+
20
+ The route already exists. Variants are rendered **on the same route**, gated by a `?variant=` URL search param. The existing data fetching, params, and auth all stay — only the rendering swaps. This is the default; pick it unless there's a specific reason not to.
21
+
22
+ If the prototype is for something that doesn't yet have a page but *would naturally live inside one* (a new section of the dashboard, a new card on the settings screen, a new step in an existing flow) — that's still sub-shape A. Mount the variants inside the host page.
23
+
24
+ ### Sub-shape B — a new page (last resort)
25
+
26
+ Only use this when the thing being prototyped genuinely has no existing page to live inside — e.g. an entirely new top-level surface, or a flow that can't be embedded anywhere sensible.
27
+
28
+ Create a **throwaway route** following whatever routing convention the project already uses — don't invent a new top-level structure. Name it so it's obviously a prototype (e.g. include the word `prototype` in the path or filename). Same `?variant=` pattern.
29
+
30
+ Before committing to sub-shape B, sanity-check: is there really no existing page this could be embedded in? An empty route hides design problems that a populated one would expose.
31
+
32
+ In both sub-shapes the floating bottom bar is identical.
33
+
34
+ ## Process
35
+
36
+ ### 1. State the question and pick N
37
+
38
+ Default to **3 variants**. More than 5 stops being radically different and starts being noise — cap there.
39
+
40
+ Write down the plan in one line, in the prototype's location or a top-of-file comment:
41
+
42
+ > "Three variants of the settings page, switchable via `?variant=`, on the existing `/settings` route."
43
+
44
+ This works whether the user is here to push back or not.
45
+
46
+ ### 2. Generate radically different variants
47
+
48
+ Draft each variant. Hold each one to:
49
+
50
+ - The page's purpose and the data it has access to.
51
+ - The project's component library / styling system (TailwindCSS, shadcn, MUI, plain CSS, whatever).
52
+ - A clear exported component name, e.g. `VariantA`, `VariantB`, `VariantC`.
53
+
54
+ Variants must be **structurally different** — different layout, different information hierarchy, different primary affordance, not just different colours. Three slightly-tweaked card grids isn't a UI prototype, it's wallpaper. If two drafts come out too similar, redo one with explicit "do not use a card grid" guidance.
55
+
56
+ ### 3. Wire them together
57
+
58
+ Create a single switcher component on the route:
59
+
60
+ ```tsx
61
+ // pseudo-code — adapt to the project's framework
62
+ const variant = searchParams.get('variant') ?? 'A';
63
+ return (
64
+ <>
65
+ {variant === 'A' && <VariantA {...data} />}
66
+ {variant === 'B' && <VariantB {...data} />}
67
+ {variant === 'C' && <VariantC {...data} />}
68
+ <PrototypeSwitcher variants={['A','B','C']} current={variant} />
69
+ </>
70
+ );
71
+ ```
72
+
73
+ For sub-shape A (existing page): keep all the existing data fetching above the switcher; only the rendered subtree changes per variant.
74
+
75
+ For sub-shape B (new page): the throwaway route under `/prototype/<name>` mounts the same switcher.
76
+
77
+ ### 4. Build the floating switcher
78
+
79
+ A small fixed-position bar at the bottom-centre of the screen with three pieces:
80
+
81
+ - **Left arrow** — cycles to the previous variant (wraps around).
82
+ - **Variant label** — shows the current variant key and, if the variant exports a name, that name too. e.g. `B — Sidebar layout`.
83
+ - **Right arrow** — cycles forward (wraps around).
84
+
85
+ Behaviour:
86
+
87
+ - Clicking an arrow updates the URL search param (use the framework's router — `router.replace` on Next, `navigate` on React Router, etc) so the variant is shareable and reload-stable.
88
+ - Keyboard: `←` and `→` arrow keys also cycle. Don't intercept arrow keys when an `<input>`, `<textarea>`, or `[contenteditable]` is focused.
89
+ - Visually distinct from the page (e.g. high-contrast pill, subtle shadow) so it's obviously not part of the design being evaluated.
90
+ - Hidden in production builds — gate on `process.env.NODE_ENV !== 'production'` or an equivalent check, so a stray prototype merge can't ship the bar to users.
91
+
92
+ Put the switcher in a single shared component so both sub-shapes can reuse it. Locate it wherever shared UI lives in the project.
93
+
94
+ ### 5. Hand it over
95
+
96
+ Surface the URL (and the `?variant=` keys). The user will flip through whenever they get to it. The interesting feedback is usually **"I want the header from B with the sidebar from C"** — that's the actual design they want.
97
+
98
+ ### 6. Capture the answer and clean up
99
+
100
+ Once a variant has won, write down which one and why (commit message, ADR, issue, or a `NOTES.md` next to the prototype if running AFK and the user hasn't responded yet). Then:
101
+
102
+ - **Sub-shape A** — delete the losing variants and the switcher; fold the winner into the existing page.
103
+ - **Sub-shape B** — promote the winning variant to a real route, delete the throwaway route and the switcher.
104
+
105
+ Don't leave variant components or the switcher lying around. They rot fast and confuse the next reader.
106
+
107
+ ## Anti-patterns
108
+
109
+ - **Variants that differ only in colour or copy.** That's a tweak, not a prototype. Real variants disagree about structure.
110
+ - **Sharing too much code between variants.** A shared `<Header>` is fine; a shared `<Layout>` defeats the point. Each variant should be free to throw out the layout.
111
+ - **Wiring variants to real mutations.** Read-only prototypes are fine. If a variant needs to mutate, point it at a stub — the question is "what should this look like", not "does the backend work".
112
+ - **Promoting the prototype directly to production.** The variant code was written under prototype constraints (no tests, minimal error handling). Rewrite it properly when you fold it in.
@@ -0,0 +1,106 @@
1
+ ---
2
+ name: scaffold-exercises
3
+ description: Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
4
+ ---
5
+
6
+ # Scaffold Exercises
7
+
8
+ Create exercise directory structures that pass `pnpm ai-hero-cli internal lint`, then commit with `git commit`.
9
+
10
+ ## Directory naming
11
+
12
+ - **Sections**: `XX-section-name/` inside `exercises/` (e.g., `01-retrieval-skill-building`)
13
+ - **Exercises**: `XX.YY-exercise-name/` inside a section (e.g., `01.03-retrieval-with-bm25`)
14
+ - Section number = `XX`, exercise number = `XX.YY`
15
+ - Names are dash-case (lowercase, hyphens)
16
+
17
+ ## Exercise variants
18
+
19
+ Each exercise needs at least one of these subfolders:
20
+
21
+ - `problem/` - student workspace with TODOs
22
+ - `solution/` - reference implementation
23
+ - `explainer/` - conceptual material, no TODOs
24
+
25
+ When stubbing, default to `explainer/` unless the plan specifies otherwise.
26
+
27
+ ## Required files
28
+
29
+ Each subfolder (`problem/`, `solution/`, `explainer/`) needs a `readme.md` that:
30
+
31
+ - Is **not empty** (must have real content, even a single title line works)
32
+ - Has no broken links
33
+
34
+ When stubbing, create a minimal readme with a title and a description:
35
+
36
+ ```md
37
+ # Exercise Title
38
+
39
+ Description here
40
+ ```
41
+
42
+ If the subfolder has code, it also needs a `main.ts` (>1 line). But for stubs, a readme-only exercise is fine.
43
+
44
+ ## Workflow
45
+
46
+ 1. **Parse the plan** - extract section names, exercise names, and variant types
47
+ 2. **Create directories** - `mkdir -p` for each path
48
+ 3. **Create stub readmes** - one `readme.md` per variant folder with a title
49
+ 4. **Run lint** - `pnpm ai-hero-cli internal lint` to validate
50
+ 5. **Fix any errors** - iterate until lint passes
51
+
52
+ ## Lint rules summary
53
+
54
+ The linter (`pnpm ai-hero-cli internal lint`) checks:
55
+
56
+ - Each exercise has subfolders (`problem/`, `solution/`, `explainer/`)
57
+ - At least one of `problem/`, `explainer/`, or `explainer.1/` exists
58
+ - `readme.md` exists and is non-empty in the primary subfolder
59
+ - No `.gitkeep` files
60
+ - No `speaker-notes.md` files
61
+ - No broken links in readmes
62
+ - No `pnpm run exercise` commands in readmes
63
+ - `main.ts` required per subfolder unless it's readme-only
64
+
65
+ ## Moving/renaming exercises
66
+
67
+ When renumbering or moving exercises:
68
+
69
+ 1. Use `git mv` (not `mv`) to rename directories - preserves git history
70
+ 2. Update the numeric prefix to maintain order
71
+ 3. Re-run lint after moves
72
+
73
+ Example:
74
+
75
+ ```bash
76
+ git mv exercises/01-retrieval/01.03-embeddings exercises/01-retrieval/01.04-embeddings
77
+ ```
78
+
79
+ ## Example: stubbing from a plan
80
+
81
+ Given a plan like:
82
+
83
+ ```
84
+ Section 05: Memory Skill Building
85
+ - 05.01 Introduction to Memory
86
+ - 05.02 Short-term Memory (explainer + problem + solution)
87
+ - 05.03 Long-term Memory
88
+ ```
89
+
90
+ Create:
91
+
92
+ ```bash
93
+ mkdir -p exercises/05-memory-skill-building/05.01-introduction-to-memory/explainer
94
+ mkdir -p exercises/05-memory-skill-building/05.02-short-term-memory/{explainer,problem,solution}
95
+ mkdir -p exercises/05-memory-skill-building/05.03-long-term-memory/explainer
96
+ ```
97
+
98
+ Then create readme stubs:
99
+
100
+ ```
101
+ exercises/05-memory-skill-building/05.01-introduction-to-memory/explainer/readme.md -> "# Introduction to Memory"
102
+ exercises/05-memory-skill-building/05.02-short-term-memory/explainer/readme.md -> "# Short-term Memory"
103
+ exercises/05-memory-skill-building/05.02-short-term-memory/problem/readme.md -> "# Short-term Memory"
104
+ exercises/05-memory-skill-building/05.02-short-term-memory/solution/readme.md -> "# Short-term Memory"
105
+ exercises/05-memory-skill-building/05.03-long-term-memory/explainer/readme.md -> "# Long-term Memory"
106
+ ```
@@ -0,0 +1,91 @@
1
+ ---
2
+ name: setup-pre-commit
3
+ description: Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
4
+ ---
5
+
6
+ # Setup Pre-Commit Hooks
7
+
8
+ ## What This Sets Up
9
+
10
+ - **Husky** pre-commit hook
11
+ - **lint-staged** running Prettier on all staged files
12
+ - **Prettier** config (if missing)
13
+ - **typecheck** and **test** scripts in the pre-commit hook
14
+
15
+ ## Steps
16
+
17
+ ### 1. Detect package manager
18
+
19
+ Check for `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn), `bun.lockb` (bun). Use whichever is present. Default to npm if unclear.
20
+
21
+ ### 2. Install dependencies
22
+
23
+ Install as devDependencies:
24
+
25
+ ```
26
+ husky lint-staged prettier
27
+ ```
28
+
29
+ ### 3. Initialize Husky
30
+
31
+ ```bash
32
+ npx husky init
33
+ ```
34
+
35
+ This creates `.husky/` dir and adds `prepare: "husky"` to package.json.
36
+
37
+ ### 4. Create `.husky/pre-commit`
38
+
39
+ Write this file (no shebang needed for Husky v9+):
40
+
41
+ ```
42
+ npx lint-staged
43
+ npm run typecheck
44
+ npm run test
45
+ ```
46
+
47
+ **Adapt**: Replace `npm` with detected package manager. If repo has no `typecheck` or `test` script in package.json, omit those lines and tell the user.
48
+
49
+ ### 5. Create `.lintstagedrc`
50
+
51
+ ```json
52
+ {
53
+ "*": "prettier --ignore-unknown --write"
54
+ }
55
+ ```
56
+
57
+ ### 6. Create `.prettierrc` (if missing)
58
+
59
+ Only create if no Prettier config exists. Use these defaults:
60
+
61
+ ```json
62
+ {
63
+ "useTabs": false,
64
+ "tabWidth": 2,
65
+ "printWidth": 80,
66
+ "singleQuote": false,
67
+ "trailingComma": "es5",
68
+ "semi": true,
69
+ "arrowParens": "always"
70
+ }
71
+ ```
72
+
73
+ ### 7. Verify
74
+
75
+ - [ ] `.husky/pre-commit` exists and is executable
76
+ - [ ] `.lintstagedrc` exists
77
+ - [ ] `prepare` script in package.json is `"husky"`
78
+ - [ ] `prettier` config exists
79
+ - [ ] Run `npx lint-staged` to verify it works
80
+
81
+ ### 8. Commit
82
+
83
+ Stage all changed/created files and commit with message: `Add pre-commit hooks (husky + lint-staged + prettier)`
84
+
85
+ This will run through the new pre-commit hooks — a good smoke test that everything works.
86
+
87
+ ## Notes
88
+
89
+ - Husky v9+ doesn't need shebangs in hook files
90
+ - `prettier --ignore-unknown` skips files Prettier can't parse (images, etc.)
91
+ - The pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests