yadflow 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,9 +1,14 @@
-# [2.11.0](https://github.com/abdelrahmannasr/yadflow/compare/v2.10.0...v2.11.0) (2026-06-15)
+# [2.12.0](https://github.com/abdelrahmannasr/yadflow/compare/v2.11.1...v2.12.0) (2026-06-16)
+
+
+### Bug Fixes
+
+* **checks:** harden spec-link + gitlab gate templates ([#69](https://github.com/abdelrahmannasr/yadflow/issues/69)) ([42f3949](https://github.com/abdelrahmannasr/yadflow/commit/42f3949841095624db03cb17f85db3138be8b93b))
 
 
 ### Features
 
-* add yad-sync-repos — switch every connected repo to its default branch + ff pull ([#67](https://github.com/abdelrahmannasr/yadflow/issues/67)) ([0abdcdf](https://github.com/abdelrahmannasr/yadflow/commit/0abdcdf80c8a0a6bfd8c94129fde90f1d35ec365)), closes [#30](https://github.com/abdelrahmannasr/yadflow/issues/30)
+* **docs:** pipeline-shaped overview canvas + collapsible panels + content refresh ([#70](https://github.com/abdelrahmannasr/yadflow/issues/70)) ([da47b80](https://github.com/abdelrahmannasr/yadflow/commit/da47b8050ccd7aa1919bf4b364298a90cdd56012))
 
 # [2.2.0](https://github.com/abdelrahmannasr/yadflow/compare/v2.1.0...v2.2.0) (2026-06-14)
 

package/cli/doctor.mjs

@@ -8,7 +8,7 @@ import { c, log, ok, info, warn, fail, hand, run, has, exists, readJSON, readJSO
 import { VERSION, PROJECT_FILES, DESIGN_TOOLS, TESTING_TOOLS, LEARNING_TOOLS } from './manifest.mjs';
 import { loadLedger, epicRoot } from './epic-state.mjs';
 import { gitHead } from './setup.mjs';
-import { cliFor, validateLogin } from './platform.mjs';
+import { cliFor, validateLogin, hostFromGitUrl } from './platform.mjs';
 
 const MIN_NODE = 18;
 
@@ -68,8 +68,13 @@ export function projectChecks(checks, root) {
       // platform CLI + auth (best-effort; auth probing is the user's own session)
       const cli = cliFor(hub.platform);
       if (cli) {
+        // Scope the auth probe to the hub's own host (derived from git_url). `${cli} auth status`
+        // without --hostname exits non-zero when ANY configured instance fails, so an unrelated
+        // stale login (e.g. a dead gitlab.com token) would falsely flag a working self-hosted hub.
+        const host = hostFromGitUrl(hub.git_url);
+        const authArgs = host ? ['auth', 'status', '--hostname', host] : ['auth', 'status'];
         if (!has(cli)) check(checks, 'platform-cli', 'project', 'warn', `${cli} not found on PATH [YAD-ENV-002]`, `install ${cli} — the gate degrades to file-only without it`);
-        else if (!run(cli, ['auth', 'status']).ok) check(checks, 'platform-cli', 'project', 'warn', `${cli} present but not authenticated [YAD-ENV-002]`, `run \`${cli} auth login\``);
+        else if (!run(cli, authArgs).ok) check(checks, 'platform-cli', 'project', 'warn', `${cli} present but not authenticated${host ? ` for ${host}` : ''} [YAD-ENV-002]`, `run \`${cli} auth login${host ? ` --hostname ${host}` : ''}\``);
         else {
           check(checks, 'platform-cli', 'project', 'ok', `${cli} present and authenticated`);
           // Re-validate each roster login against the hub (warn-only). Skips when a login is already

package/cli/platform.mjs

@@ -17,6 +17,23 @@ export function cliFor(platform) {
   return null;
 }
 
+// Bare host from a git remote URL, for hostname-scoped CLI auth checks. Handles both the
+// `https://[user@]host[:port]/...` and the scp-like `git@host:group/repo.git` forms. Returns
+// null when nothing parses (caller falls back to an unscoped check).
+export function hostFromGitUrl(url = '') {
+  if (typeof url !== 'string' || !url.trim()) return null;
+  const u = url.trim();
+  // scp-like syntax: [user@]host:path — only when there's no scheme and the colon precedes a path.
+  const scp = u.match(/^(?:[^@/]+@)?([^/:]+):(?!\/)/);
+  if (scp && !/^[a-z][a-z0-9+.-]*:\/\//i.test(u)) return scp[1].toLowerCase() || null;
+  try {
+    // URL needs a scheme to parse a host; ssh:// and https:// both work here.
+    return new URL(u).hostname.toLowerCase() || null;
+  } catch {
+    return null;
+  }
+}
+
 // Is the platform CLI present? (auth is the user's own; we don't probe it here.)
 export function platformReady(platform) {
   const cli = cliFor(platform);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yadflow",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "Yadflow — the gated, team, multi-repo SDLC: author → review → build with a PR-driven review gate and a zero-dependency `yad` CLI (setup, gate, commit, open-pr, ship, repo). A BMAD module + 30 yad-* skills.",
   "type": "module",
   "author": "AbdelRahman Nasr",

package/skills/yad-checks/references/check-gates.md

@@ -18,10 +18,17 @@ repo uses. Each reads conventions established by earlier steps — it invents no
 
 ## 1. spec-link (`templates/checks/spec-link.sh`)
 
-- Collects the `Task:` trailers across `<base>..HEAD`.
-- **FAIL** if there is no `Task:` trailer (the change does not link a story/spec).
-- For each `Task: <story>-<task>`, strips the `-T<NN>` suffix to get `<story>` and requires
-  `specs/<story>/link.md` to exist. **FAIL** if missing.
+- Checks every non-merge commit in `<base>..HEAD` **per commit** (not aggregated across the range),
+  so the report names each offending commit and one bad commit never masks the rest.
+- Maintenance commits are **exempt**: a Conventional-Commits subject of type `ci`, `chore`, `build`,
+  or `test` (optional `(scope)` / breaking `!`) **PASSes** without a link — CI wiring, dependency
+  bumps, and test-infra changes legitimately link no story.
+- For every other commit, requires a `Task: <story>-<task>` trailer. **FAIL** if absent.
+- The trailer must be a well-formed `<story>-T<NN>` id. **FAIL** on a malformed trailer (e.g.
+  `EP-demo-S01` with no `-T<NN>`) rather than letting it slip through the suffix-strip.
+- Strips the `-T<NN>` suffix from the task to get `<story>` and requires `specs/<story>/link.md` to
+  exist. **FAIL** if missing.
+- An empty range (no non-merge commits) **PASSes**.
 - Portable across bash 3.2 (macOS) and 4+ (no `mapfile`).
 - **Fails closed** when `<base>` can't be resolved (so a shallow clone / wrong base never PASSes blind).
 

package/skills/yad-checks/templates/checks/spec-link.sh

@@ -1,8 +1,10 @@
 #!/usr/bin/env bash
 # spec-link gate (Phase 3 build plan §C).
-# The change must link a real story/spec: every commit range under review must carry a
+# Every NON-MAINTENANCE commit must link a real story/spec: it must carry a
 # `Task: <story>-<task>` trailer whose <story> resolves to a specs/<story>/link.md.
-# Fail if the link is missing — no unlinked code reaches merge.
+# Maintenance commits (ci/chore/build/test) are EXEMPT — CI wiring, dependency bumps,
+# and test-infra changes legitimately link no story. Checked per commit (not aggregated
+# across the range), so the report names every offending commit.
 set -euo pipefail
 
 BASE="${1:-${SDLC_BASE:-origin/main}}"
@@ -14,25 +16,48 @@ if ! git rev-parse --verify --quiet "${BASE}^{commit}" >/dev/null; then
 fi
 RANGE="${BASE}..HEAD"
 
-# Portable across bash 3.2 (macOS) and 4+ — no mapfile.
-tasks="$(git log "$RANGE" --format='%(trailers:key=Task,valueonly)' | sed '/^$/d' | sort -u)"
+# Conventional-Commits types exempt from the spec-link requirement (optional (scope) and breaking !).
+EXEMPT='ci|chore|build|test'
 
-if [ -z "$tasks" ]; then
-  echo "FAIL [spec-link]: no 'Task: <story>-<task>' trailer in ${RANGE} — change does not link a story/spec."
-  exit 1
+# Portable across bash 3.2 (macOS) and 4+ — no mapfile; feed the loop via heredoc (not a pipe) so
+# the failure count survives the loop body.
+commits="$(git rev-list --no-merges "$RANGE")"
+if [ -z "$commits" ]; then
+  echo "PASS [spec-link]: no non-merge commits in ${RANGE}"
+  exit 0
 fi
 
 rc=0
-while IFS= read -r t; do
-  [ -z "$t" ] && continue
-  story="$(printf '%s' "$t" | sed -E 's/-T[0-9]+$//')"
+while IFS= read -r sha; do
+  [ -z "$sha" ] && continue
+  short="$(git log -1 --format=%h "$sha")"
+  subject="$(git log -1 --format=%s "$sha")"
+  if printf '%s' "$subject" | grep -qE "^(${EXEMPT})(\([a-z0-9._-]+\))?!?: "; then
+    echo "PASS [spec-link]: ${short} '${subject}' — maintenance commit (exempt)"
+    continue
+  fi
+  task="$(git log -1 --format='%(trailers:key=Task,valueonly)' "$sha" | sed '/^$/d' | head -1)"
+  if [ -z "$task" ]; then
+    echo "FAIL [spec-link]: ${short} '${subject}' has no 'Task:' trailer"
+    rc=1
+    continue
+  fi
+  # The trailer must be a real <story>-T<NN> id. Without this guard a malformed trailer
+  # (e.g. 'EP-demo-S01' with no -T<NN>) would survive the suffix-strip unchanged and PASS
+  # whenever specs/<that>/link.md happens to exist.
+  if ! printf '%s' "$task" | grep -qE '.+-T[0-9]+$'; then
+    echo "FAIL [spec-link]: ${short} '${subject}' has a malformed Task trailer '${task}' (expected <story>-T<NN>)."
+    rc=1
+    continue
+  fi
+  story="$(printf '%s' "$task" | sed -E 's/-T[0-9]+$//')"
   if [ -f "specs/${story}/link.md" ]; then
-    echo "PASS [spec-link]: ${t} -> specs/${story}/link.md"
+    echo "PASS [spec-link]: ${short} ${task} -> specs/${story}/link.md"
   else
-    echo "FAIL [spec-link]: ${t} references specs/${story}/ but link.md is missing."
+    echo "FAIL [spec-link]: ${short} ${task} references specs/${story}/ but link.md is missing."
     rc=1
   fi
 done <<EOF
-$tasks
+$commits
 EOF
 exit "$rc"

package/skills/yad-checks/templates/gitlab/yad-checks.gitlab-ci.yml

@@ -9,7 +9,14 @@
 # pipeline's default stage regardless of any `stages:` order the foreign root defines — a foreign
 # `stages:` list can neither break them nor reorder them. Job names are yad-prefixed to avoid
 # colliding with the host project's own job names.
-default:
+#
+# `image:`/`tags:` live on the .sdlc_mr_only anchor below — NOT a top-level `default:`. An included
+# top-level `default:` merges into the HOST root pipeline; if the host already sets a top-level
+# `image:`, GitLab rejects the whole config ("image is defined in top-level and 'default:' entry").
+# Putting them on the anchor scopes them to the gate jobs (which all `extends: .sdlc_mr_only`) and
+# never touches the host root.
+
+.sdlc_mr_only:
   image: node:20
   # Runner selection. These jobs need a docker/dind executor; on instances whose runners are all
   # tag-locked (run_untagged: false) an untagged image job never starts. Set the YAD_RUNNER_TAGS
@@ -19,8 +26,6 @@ default:
   # instead strand it `pending` — if so, set the variable to a real tag. Single value only:
   # `tags: [$VAR]` is one tag equal to the whole variable, not a comma-split.
   tags: [$YAD_RUNNER_TAGS]
-
-.sdlc_mr_only:
   rules:
     - if: $CI_PIPELINE_SOURCE == "merge_request_event"
 
@@ -45,6 +50,7 @@ yad-build-test-lint:
   variables:
     YAD_TEST_MAX_WORKERS: "2" # cap jest/vitest test workers in CI; ignored by other runners
   script:
+    - npm ci
     - bash checks/build-test-lint.sh
 
 # Pattern gates: commit subject + MR title + MR body all follow the convention (profile: code).

package/skills/yad-docs/templates/app/src/App.tsx

@@ -14,34 +14,69 @@ import { RoleSelectPage } from './pages/RoleSelectPage';
 import { StakeholderDocPage } from './pages/StakeholderDocPage';
 import { usePlayback } from './hooks/usePlayback';
 import { useFlowStore } from './store/useFlowStore';
+import { Icon } from './components/shared/Icon';
+
+const railStyle = {
+  borderColor: 'var(--color-border-default)',
+  background: 'var(--color-bg-primary)',
+};
 
 function Dashboard() {
   usePlayback();
   const isLogsPanelOpen = useFlowStore((s) => s.isLogsPanelOpen);
+  const isLeftPanelOpen = useFlowStore((s) => s.isLeftPanelOpen);
+  const isRightPanelOpen = useFlowStore((s) => s.isRightPanelOpen);
+  const toggleLeftPanel = useFlowStore((s) => s.toggleLeftPanel);
+  const toggleRightPanel = useFlowStore((s) => s.toggleRightPanel);
 
   return (
     <div className="flex flex-1 overflow-hidden">
-      {/* Left Sidebar */}
-      <aside
-        className="w-80 flex-none flex flex-col border-r z-10"
-        style={{
-          borderColor: 'var(--color-border-default)',
-          background: 'var(--color-bg-primary)',
-        }}
-      >
-        {/* Path Selection */}
-        <div className="p-4 border-b overflow-y-auto" style={{ borderColor: 'var(--color-border-default)' }}>
-          <PathSelector />
-        </div>
+      {/* Left Sidebar (collapsible — collapse to widen the canvas) */}
+      {isLeftPanelOpen ? (
+        <aside
+          className="w-80 flex-none flex flex-col border-r z-10"
+          style={railStyle}
+        >
+          {/* Collapse header */}
+          <div className="flex items-center justify-between px-4 pt-3 pb-1">
+            <span className="text-[10px] font-bold uppercase tracking-wider" style={{ color: 'var(--color-text-muted)' }}>
+              Navigator
+            </span>
+            <button
+              onClick={toggleLeftPanel}
+              title="Collapse panel"
+              aria-label="Collapse navigator panel"
+              className="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-white/5 hover:text-white"
+            >
+              <Icon name="left_panel_close" size={18} />
+            </button>
+          </div>
 
-        {/* Step Timeline */}
-        <div className="flex-1 overflow-y-auto p-4">
-          <StepList />
-        </div>
+          {/* Path Selection */}
+          <div className="p-4 border-b overflow-y-auto" style={{ borderColor: 'var(--color-border-default)' }}>
+            <PathSelector />
+          </div>
 
-        {/* Footer */}
-        <SidebarFooter />
-      </aside>
+          {/* Step Timeline */}
+          <div className="flex-1 overflow-y-auto p-4">
+            <StepList />
+          </div>
+
+          {/* Footer */}
+          <SidebarFooter />
+        </aside>
+      ) : (
+        <div className="w-10 flex-none flex flex-col items-center border-r z-10 pt-3" style={railStyle}>
+          <button
+            onClick={toggleLeftPanel}
+            title="Expand navigator"
+            aria-label="Expand navigator panel"
+            className="flex h-8 w-8 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-white/5 hover:text-white"
+          >
+            <Icon name="left_panel_open" size={18} />
+          </button>
+        </div>
+      )}
 
       {/* Main Canvas Area */}
       <main className="flex-1 flex flex-col overflow-hidden relative flow-grid"
@@ -65,8 +100,21 @@ function Dashboard() {
         <PlaybackBar />
       </main>
 
-      {/* Right Detail Panel */}
-      <RightPanel />
+      {/* Right Detail Panel (collapsible — collapse to widen the canvas) */}
+      {isRightPanelOpen ? (
+        <RightPanel />
+      ) : (
+        <div className="w-10 flex-none flex flex-col items-center border-l z-10 pt-3" style={railStyle}>
+          <button
+            onClick={toggleRightPanel}
+            title="Expand details"
+            aria-label="Expand step-details panel"
+            className="flex h-8 w-8 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-white/5 hover:text-white"
+          >
+            <Icon name="right_panel_open" size={18} />
+          </button>
+        </div>
+      )}
     </div>
   );
 }

package/skills/yad-docs/templates/app/src/components/Canvas/FlowCanvas.tsx

@@ -75,6 +75,26 @@ export const FlowCanvas: React.FC = () => {
 
   const messages = currentStep?.messages || [];
 
+  // Optional loop-back arc, swept below the canvas to read as "the pipeline repeats".
+  // Rendered only when both endpoint nodes exist (e.g. the SDLC-overview's
+  // trust-log → product-hub cycle); a no-op for diagrams without them.
+  const loopBack = useMemo(() => {
+    if (dims.width === 0) return null;
+    const a = COMPONENTS.find((c) => c.id === 'trust-log');
+    const b = COMPONENTS.find((c) => c.id === 'product-hub');
+    if (!a || !b) return null;
+    const x1 = (a.position.x / 100) * dims.width;
+    const y1 = (a.position.y / 100) * dims.height;
+    const x2 = (b.position.x / 100) * dims.width;
+    const y2 = (b.position.y / 100) * dims.height;
+    const yb = dims.height * 0.985;
+    return {
+      d: `M ${x1} ${y1} C ${x1} ${yb}, ${x2} ${yb}, ${x2} ${y2}`,
+      labelX: (x1 + x2) / 2,
+      labelY: dims.height * 0.92,
+    };
+  }, [dims]);
+
   return (
     <div ref={containerRef} className="relative h-full w-full overflow-hidden">
       {/* Canvas Header Overlay */}
@@ -159,6 +179,33 @@ export const FlowCanvas: React.FC = () => {
                 containerHeight={dims.height}
               />
             ))}
+
+            {/* Loop-back: the pipeline repeats per epic */}
+            {loopBack && (
+              <g>
+                <path
+                  d={loopBack.d}
+                  fill="none"
+                  stroke="#ff6490"
+                  strokeWidth={1.5}
+                  strokeDasharray="6 5"
+                  opacity={0.55}
+                  markerEnd="url(#arrowhead)"
+                />
+                <text
+                  x={loopBack.labelX}
+                  y={loopBack.labelY}
+                  textAnchor="middle"
+                  fontSize={12}
+                  fontWeight={700}
+                  letterSpacing={0.6}
+                  fill="#ff8db0"
+                  opacity={0.85}
+                >
+                  ↺ pipeline repeats per epic
+                </text>
+              </g>
+            )}
           </svg>
         )}
 

package/skills/yad-docs/templates/app/src/components/DetailPanel/RightPanel.tsx

@@ -12,6 +12,7 @@ export function RightPanel() {
   const getCurrentStep = useFlowStore((s) => s.getCurrentStep);
   const activeStepIndex = useFlowStore((s) => s.activeStepIndex);
   const selectedPath = useFlowStore((s) => s.selectedPath);
+  const toggleRightPanel = useFlowStore((s) => s.toggleRightPanel);
   const navigate = useNavigate();
   const step = getCurrentStep();
 
@@ -29,7 +30,14 @@ export function RightPanel() {
         <h3 className="text-slate-100 text-sm font-bold font-display uppercase tracking-wider">
           Step Details
         </h3>
-        <Icon name="close" size={20} className="text-slate-500 cursor-pointer hover:text-white" />
+        <button
+          onClick={toggleRightPanel}
+          title="Collapse panel"
+          aria-label="Collapse step-details panel"
+          className="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-white/5 hover:text-white"
+        >
+          <Icon name="right_panel_close" size={18} />
+        </button>
       </div>
 
       {!step ? (

package/skills/yad-docs/templates/app/src/components/Sidebar/StepList.tsx

@@ -43,15 +43,6 @@ export const StepList = () => {
     }
   };
 
-  // Reset expanded state when active step changes externally (playback)
-  const prevActiveRef = { current: activeStepIndex };
-  if (prevActiveRef.current !== activeStepIndex) {
-    prevActiveRef.current = activeStepIndex;
-    if (expandedIndex !== null && expandedIndex !== activeStepIndex) {
-      // Auto-expand the new active step during playback
-    }
-  }
-
   return (
     <div className="flex flex-col gap-2">
       <div className="flex items-center justify-between mb-2">

package/skills/yad-docs/templates/app/src/components/shared/CommandPalette.tsx

@@ -28,13 +28,16 @@ export function CommandPalette() {
     return () => window.removeEventListener('keydown', handler);
   }, [isOpen, toggle]);
 
-  // Reset on open
-  useEffect(() => {
+  // Reset on open — adjust state during render (not inside an effect) so it does
+  // not trigger an extra cascading render (react-hooks/set-state-in-effect).
+  const [wasOpen, setWasOpen] = useState(isOpen);
+  if (isOpen !== wasOpen) {
+    setWasOpen(isOpen);
     if (isOpen) {
       setQuery('');
       setSelectedIndex(0);
     }
-  }, [isOpen]);
+  }
 
   const results = useMemo(() => {
     if (!query.trim()) {

package/skills/yad-docs/templates/app/src/hooks/useAnimationQueue.ts

@@ -9,13 +9,22 @@ export function useAnimationQueue() {
   const [animKey, setAnimKey] = useState(0);
   const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
 
-  // When step changes, reset and schedule completion events
+  // Reset the pulse state the instant the step (or speed) changes — done during
+  // render via the "adjust state on change" pattern rather than inside the effect,
+  // so it does not trigger an extra cascading render (react-hooks/set-state-in-effect).
+  const stepKey = `${activeStepIndex}-${speed}`;
+  const [resetKey, setResetKey] = useState(stepKey);
+  if (stepKey !== resetKey) {
+    setResetKey(stepKey);
+    setCompletedTargets(new Set());
+    setAnimKey((k) => k + 1);
+  }
+
+  // When step changes, schedule the target-pulse completion events.
   useEffect(() => {
     // Clear previous timers
     timersRef.current.forEach(clearTimeout);
     timersRef.current = [];
-    setCompletedTargets(new Set());
-    setAnimKey((k) => k + 1);
 
     // Get messages from the current step
     const step = useFlowStore.getState().getCurrentStep();

package/skills/yad-docs/templates/app/src/hooks/usePlayback.ts

@@ -30,7 +30,7 @@ export function usePlayback() {
     return () => {
       if (elapsedRef.current) clearInterval(elapsedRef.current);
     };
-  }, [playbackState]);
+  }, [playbackState, tickElapsed, resetElapsed]);
 
   // Generate logs on step change
   useEffect(() => {
@@ -56,7 +56,7 @@ export function usePlayback() {
         });
       }, msg.delay / speed);
     }
-  }, [activeStepIndex, speed]);
+  }, [activeStepIndex, speed, addLog, getCurrentSteps]);
 
   useEffect(() => {
     if (playbackState !== "playing") {
@@ -96,5 +96,5 @@ export function usePlayback() {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
-  }, [playbackState, activeStepIndex, speed, animatingMessages]);
+  }, [playbackState, activeStepIndex, speed, animatingMessages, getCurrentSteps, nextStep, setAnimatingMessages]);
 }

package/skills/yad-docs/templates/app/src/store/useFlowStore.ts

@@ -26,6 +26,8 @@ interface FlowStore {
   isReferencePanelOpen: boolean;
   isCommandPaletteOpen: boolean;
   isLogsPanelOpen: boolean;
+  isLeftPanelOpen: boolean;
+  isRightPanelOpen: boolean;
 
   // Logs
   logs: LogEntry[];
@@ -57,6 +59,8 @@ interface FlowStore {
   toggleReferencePanel: () => void;
   toggleCommandPalette: () => void;
   toggleLogsPanel: () => void;
+  toggleLeftPanel: () => void;
+  toggleRightPanel: () => void;
 
   // Logs
   addLog: (entry: Omit<LogEntry, 'id' | 'timestamp'>) => void;
@@ -90,6 +94,8 @@ export const useFlowStore = create<FlowStore>((set, get) => ({
   isReferencePanelOpen: false,
   isCommandPaletteOpen: false,
   isLogsPanelOpen: false,
+  isLeftPanelOpen: true,
+  isRightPanelOpen: true,
   logs: [],
   elapsedTime: 0,
 
@@ -157,6 +163,8 @@ export const useFlowStore = create<FlowStore>((set, get) => ({
   toggleReferencePanel: () => set((s) => ({ isReferencePanelOpen: !s.isReferencePanelOpen })),
   toggleCommandPalette: () => set((s) => ({ isCommandPaletteOpen: !s.isCommandPaletteOpen })),
   toggleLogsPanel: () => set((s) => ({ isLogsPanelOpen: !s.isLogsPanelOpen })),
+  toggleLeftPanel: () => set((s) => ({ isLeftPanelOpen: !s.isLeftPanelOpen })),
+  toggleRightPanel: () => set((s) => ({ isRightPanelOpen: !s.isRightPanelOpen })),
 
   // Logs
   addLog: (entry) => {