// enhance.jsx — v2 additions for the git-worktree cheatsheet.
//
// Adds three composable concepts on top of the existing lane content:
// 1. Situation picker (+ )
// 2. Live variable substitution (+ useTemplate hook)
// 3. Error/symptom search
//
// Nothing here mutates data.jsx or parts.jsx. The bridge to app.jsx is:
// - the wraps the whole app; useTemplate(raw) returns the
// interpolated string for any code snippet.
// - tiles dispatch a CustomEvent("cheat:goto", { laneId, modeId? }); the new
// app.jsx listens and scrolls + switches the lane's mode.
// - indexes window.CHEAT.LANES[*]…errorTable on mount.
const { useState: uS, useEffect: uE, useMemo: uM, useRef: uR, useContext: uC, createContext } = React;
// =============================================================================
// Variable store
// =============================================================================
const VARS_DEFAULTS = {
branch: "feat/swipe-export",
name: "swipe-export",
base: "dev",
claudeBranch: "claude/gallant-wozniak-340807",
};
// derived: = .claude/worktrees/; = same for the
// claude branch (computed from the trailing segment of ).
const deriveVars = (v) => {
const claudeLeaf = (v.claudeBranch || "").split("/").filter(Boolean).pop() || "claude-branch";
return {
...v,
path: `.claude/worktrees/${v.name || ""}`,
claudePath: `.claude/worktrees/${claudeLeaf}`,
};
};
const VarsContext = createContext({ vars: deriveVars(VARS_DEFAULTS), setVars: () => {} });
function VarsProvider({ children }) {
const [vars, setRaw] = uS(() => {
try {
const stored = JSON.parse(localStorage.getItem("cheat-vars") || "{}");
return { ...VARS_DEFAULTS, ...stored };
} catch { return { ...VARS_DEFAULTS }; }
});
const setVars = (patch) => setRaw((v) => {
const next = { ...v, ...patch };
try { localStorage.setItem("cheat-vars", JSON.stringify(next)); } catch {}
return next;
});
const resolved = uM(() => deriveVars(vars), [vars]);
return setVars(VARS_DEFAULTS) }}>{children};
}
// Token regex matches the placeholders already used throughout data.jsx:
// , , , , , . Unknown tokens
// pass through unchanged so existing snippets don't break.
const TOKEN_RE = /<(branch|name|path|base|claudeBranch|claude-branch|claudePath|claude-path)>/g;
function interpolate(raw, vars) {
if (!raw) return raw;
return raw.replace(TOKEN_RE, (m, key) => {
const k = (key === "claude-branch") ? "claudeBranch"
: (key === "claude-path") ? "claudePath"
: key;
const v = vars[k];
return v && String(v).trim() ? v : m; // keep the if blank
});
}
function useTemplate(raw) {
const { vars } = uC(VarsContext);
return uM(() => interpolate(raw, vars), [raw, vars]);
}
// =============================================================================
// VarsBuilder — sticky toolbar
// =============================================================================
function VarsBuilder() {
const { vars, setVars, reset } = uC(VarsContext);
const [open, setOpen] = uS(true);
const fields = [
{ k: "branch", label: "your branch", ph: "feat/…" },
{ k: "name", label: "worktree name", ph: "swipe-export" },
{ k: "base", label: "base branch", ph: "dev" },
{ k: "claudeBranch", label: "claude branch", ph: "claude/…" },
];
return (
{open && fields.map(f => (
))}
{open && (
)}
);
}
// =============================================================================
// TwoEntryPoints — the most important axis: who started the work?
// =============================================================================
function TwoEntryPoints({ goto }) {
return (
The axis that matters most
Who started the work? — first command depends on the answer.