docs(design-system): add canvas architecture + known issues from Core-FE

Added from Core-FE verified findings:
- Canvas stack: @xyflow/react v12, Next.js 14, Tailwind v4, Zustand
- Directory structure with verified file locations
- Known issues: secrets-store.ts getGrouped() performance bug
- Pre-commit hook verification needed
- Tech debt items: any types, selector memoization, use client enforcement

Updated canvas-audit-items.md with architecture section.

Co-Authored-By: Core-FE <core-fe@moleculesai.app>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs/design-system/canvas-audit-items.md

@@ -2,6 +2,54 @@
 
 > **Status:** VERIFIED — Cross-referenced against molecule-core/canvas/src/ (2026-05-09)
 > **Author:** Core-FE (draft), Core-UIUX (verification)
+> **Updated:** 2026-05-09 with architecture structure + known issues
+
+## Canvas Stack (Verified)
+
+| Technology | Version | Purpose |
+|-----------|--------|---------|
+| React Flow | `@xyflow/react` v12 | Node/edge rendering |
+| Framework | Next.js 14 App Router | Routing, SSR |
+| Styling | Tailwind v4 | CSS with custom properties |
+| State | Zustand | Client state management |
+
+## Directory Structure (Verified)
+
+```
+canvas/src/
+├── components/
+│   ├── Canvas.tsx           # Viewport management, ReactFlow wrapper
+│   ├── Toolbar.tsx          # Add node/edge controls
+│   ├── ContextMenu.tsx      # Right-click menu
+│   ├── SidePanel.tsx        # Properties panel
+│   ├── WorkspaceNode.tsx     # Node rendering
+│   ├── A2AEdge.tsx          # Edge rendering
+│   └── [tests]/             # Accessibility + component tests
+├── stores/
+│   └── secrets-store.ts     # ⚠️ getGrouped() performance issue
+├── hooks/
+│   ├── useSocketEvent.ts
+│   ├── useTemplateDeploy.tsx
+│   └── useWorkspaceName.ts
+└── lib/
+    ├── api.ts
+    ├── auth.ts
+    ├── canvas-actions.ts
+    ├── design-tokens.ts     # STATUS_CONFIG, TIER_CONFIG
+    ├── theme.ts
+    └── theme-provider.tsx   # ThemeProvider, useTheme()
+
+## Known Issues
+
+### 🔴 HIGH: secrets-store.ts Performance
+**File:** `canvas/src/stores/secrets-store.ts`
+**Issue:** `getGrouped()` selector creates new objects every call (Object.fromEntries + arrays). Not memoized.
+**Impact:** Causes unnecessary re-renders on frequent selector access.
+**Fix needed:** Memoize the selector or use a proper Zustand selector pattern.
+
+### 🟡 MEDIUM: Pre-commit Hook Verification
+**Issue:** Pre-commit hook checks 'use client' on hook-using components but unclear if it actually fails on violations.
+**Action:** Verify the hook is enforcing the rule correctly.
 
 ## Verified Findings
 

docs/design-system/canvas-design-system-v1.md

@@ -378,10 +378,47 @@ Canvas uses `@xyflow/react` (React Flow).
 
 ---
 
-## 8. Remaining Open Items
+## 8. Canvas Architecture (Verified)
 
-1. **Visual regression tests** — No screenshot/visual tests exist yet. KI-006 tracks this gap.
+**Stack:**
+- `@xyflow/react` v12 (React Flow) — node/edge rendering
+- Next.js 14 App Router
+- Tailwind v4 with CSS custom properties
+- Zustand for state management
+
+**Directory Structure:**
+```
+canvas/src/
+├── components/        # Canvas.tsx, Toolbar.tsx, ContextMenu.tsx, SidePanel.tsx, WorkspaceNode.tsx, A2AEdge.tsx
+├── stores/           # secrets-store.ts (only store)
+├── hooks/            # useSocketEvent.ts, useTemplateDeploy.tsx, useWorkspaceName.ts
+├── lib/              # api.ts, auth.ts, canvas-actions.ts, design-tokens.ts, theme.ts, theme-provider.tsx
+└── app/             # Next.js App Router
+```
+
+## 9. Known Issues (Technical Debt)
+
+### Performance Issues
+- **secrets-store.ts getGrouped() selector** — Creates new objects every call (Object.fromEntries + arrays) — not memoized. Causes performance issues with frequent re-renders. Needs selector optimization.
+
+### Code Quality
+- Check for `any` types in canvas/ directory
+- Verify pre-commit hook actually fails on 'use client' violations (unverified)
+- Verify all Zustand selectors avoid object creation (see getGrouped issue above)
+- Check 'use client' directive on hook-using components
+
+### Testing
+- Add axe-core integration for automated accessibility testing
+- Visual regression tests — no screenshot tests exist yet (KI-006)
+- Target >80% test coverage on changed files
+
+## 10. Remaining Open Items
+
+### Accessibility Gaps
+1. **Screen reader announcements** — Node/edge changes not announced. Need `aria-live="polite"` region.
 2. **Keyboard shortcut help dialog** — No dedicated dialog. Shortcuts exist in `useKeyboardShortcuts.ts` but no `aria-describedby` hints on buttons.
-3. **Screen reader announcements for canvas state changes** — Node/edge changes not announced. Consider `aria-live="polite"` region.
-4. **Edge anchor accessibility** — React Flow handles are purely visual. May need ARIA annotations for screen readers.
-5. **Drag-and-drop keyboard alternative** — Drag uses mouse primarily. No keyboard equivalent for node rearrangement.
+3. **Edge anchor accessibility** — React Flow handles purely visual. Need ARIA annotations for screen readers.
+4. **Drag-and-drop keyboard alternative** — Mouse only. Need keyboard equivalent for node rearrangement.
+
+### Performance
+5. **secrets-store.ts getGrouped()** — Not memoized, creates new objects every call.