> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Work-Wiki Extension Implementation > Visualization Components, Frontend Integration, and Implementation Plan ## Visualization Extensions Overview The Work-Wiki extension introduces four visualization features that layer on top of the existing Git commit graph, providing unprecedented visibility into the development process. ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ VISUALIZATION EXTENSIONS OVERVIEW │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ 4 CORE VISUALIZATION FEATURES │ │ │ │ 1. SUB-COMMIT GRANULARITY VIEW │ │ Expand commits to reveal micro-saves between them │ │ Shows: timestamp, file, additions, deletions, AI indicator │ │ Toggle: "Show sub-commit history" checkbox │ │ │ │ 2. AI ATTRIBUTION HEATMAP │ │ Color-code commits by AI contribution percentage │ │ Scale: Blue (0% AI) -> Purple (100% AI) │ │ Shows: Per-agent breakdown on hover │ │ │ │ 3. DRAFT BRANCH VISUALIZATION │ │ Show uncommitted Work-Wiki saves as "ghost branch" │ │ Style: Dashed lines, semi-transparent nodes │ │ Shows: File count, total additions/deletions │ │ │ │ 4. PARALLEL TIMELINE VIEW │ │ Side-by-side view of Git commits and Work-Wiki saves │ │ Connection lines show which saves belong to which commit │ │ Time-aligned for correlation analysis │ │ │ │ Key Design Principle: LAYERED OVERLAY │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Layer 4: Draft Branch Overlay (ghost nodes) │ │ ───────────────────────────────────────────────────────────────── │ │ Layer 3: AI Attribution Overlay (color coding) │ │ ───────────────────────────────────────────────────────────────── │ │ Layer 2: Sub-Commit Overlay (micro-saves) │ │ ───────────────────────────────────────────────────────────────── │ │ Layer 1: Existing Commit Graph (base visualization) │ │ │ │ Each layer is independently toggleable. Existing functionality │ │ is preserved. Extensions add without modifying core behavior. │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## Sub-Commit Granularity View The Sub-Commit Granularity View expands the space between Git commits to reveal the micro-history of Work-Wiki saves that occurred during that period. ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ SUB-COMMIT GRANULARITY CONCEPT │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ COLLAPSED STATE (Default): │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ *══════*══════*══════*══════*══════* │ │ │ │ │ │ │ │ │ │ c1 c2 c3 c4 c5 c6 │ │ │ │ │ ┌────┴────┐ │ │ │ 15 │ ◄── Badge showing save count │ │ │ saves │ Click to expand │ │ └─────────┘ │ │ │ │ EXPANDED STATE (After clicking badge): │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ *══════*══════*════════════════════════════*══════* │ │ │ │ │ │ │ │ │ c1 c2 c3 c4 c5 │ │ │ │ │ │ ├───o save 1 +10 lines │ │ │ │ │ auth.rs │ │ │ │ │ [AI] │ ◄── AI indicator │ │ │ │ │ │ │ ├───o save 2 -5 +8 lines │ │ │ │ │ user.rs │ │ │ │ │ │ │ │ ├───o save 3 +20 lines │ │ │ │ │ test.rs │ │ │ │ │ [AI] │ │ │ │ │ │ │ │ ├───o ... │ │ │ │ │ │ │ │ ├───o save 15 +3 lines │ │ │ │ │ │ │ └────────────────────────────┘ │ │ │ │ Visual Encoding: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ * = Git commit (solid, opaque) │ │ o = Work-Wiki save (hollow, lighter) │ │ [AI] = AI-assisted save indicator │ │ = = Git history line (solid) │ │ - = Sub-commit line (thinner) │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ### Data Flow ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ SUB-COMMIT DATA FLOW │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ User clicks badge -> Expand sub-commits │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Frontend Request: │ │ ────────────────────────────────────────────────────────────────── │ │ │ │ const saves = await invoke('work_wiki_get_pre_commit_changes', { │ │ commit_hash: selectedCommit.hash │ │ }) │ │ │ │ Backend Processing: │ │ ────────────────────────────────────────────────────────────────── │ │ │ │ SELECT id, ts, rel_path, additions, deletions, │ │ ai_session_id, agent_name │ │ FROM file_diffs fd │ │ JOIN commit_work_mapping cwm ON fd.id = cwm.diff_id │ │ WHERE cwm.commit_hash = ? │ │ ORDER BY ts ASC │ │ │ │ Response Format: │ │ ────────────────────────────────────────────────────────────────── │ │ │ │ [ │ │ { │ │ "id": 1, │ │ "ts": 1703680200, │ │ "rel_path": "src/auth.rs", │ │ "additions": 10, │ │ "deletions": 0, │ │ "ai_session_id": "abc-123-def", │ │ "agent_name": "Claude Code" │ │ }, │ │ ... │ │ ] │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## AI Attribution Heatmap The AI Attribution Heatmap provides visual feedback on the balance between human and AI contributions through color-coding. ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ AI ATTRIBUTION HEATMAP COLOR SCALE │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ Color Scale Definition: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ AI % Color Meaning │ │ ──────────────────────────────────────────────────────────────── │ │ 0% Blue Pure human │ │ 1-24% Light blue Human with AI assist │ │ 25-49% Purple-blue Human dominant │ │ 50-74% Blue-purple Collaboration │ │ 75-99% Light purple AI dominant │ │ 100% Purple Pure AI generation │ │ │ │ Calculation Function: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ function getHeatmapColor(aiPercentage: number): string { │ │ // Blend from human-color (blue) to ai-color (purple) │ │ const humanRgb = { r: 59, g: 130, b: 246 } │ │ const aiRgb = { r: 168, g: 85, b: 247 } │ │ │ │ const ratio = aiPercentage / 100 │ │ │ │ const r = Math.round(humanRgb.r + (aiRgb.r - humanRgb.r) * ratio) │ │ const g = Math.round(humanRgb.g + (aiRgb.g - humanRgb.g) * ratio) │ │ const b = Math.round(humanRgb.b + (aiRgb.b - humanRgb.b) * ratio) │ │ │ │ return `rgb(${r}, ${g}, ${b})` │ │ } │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ### Graph Overlay Visualization ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ AI ATTRIBUTION GRAPH OVERLAY │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ Overlay on Commit Graph: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Lane 0 Lane 1 │ │ │ │ │ │ *─────────────┤ c5 (merge) │ │ │ │ AI: 90% [AI] │ │ │ │ Claude: +200 -30 │ │ │ │ │ │ * │ c4 │ │ │ │ AI: 0% [Human] │ │ │ │ Human: +50 -10 │ │ │ │ │ │ │ * c3 │ │ │ │ AI: 100% [AI] │ │ │ │ Claude: +80 -5 │ │ │ │ │ │ *─────────────┤ c2 │ │ │ │ AI: 40% [AI][Human] │ │ │ │ Claude: +30 -2, Human: +40 -5 │ │ │ │ │ │ * c1 │ │ │ AI: 0% [Human] │ │ │ Human: +100 -0 │ │ │ │ Node Chip Design: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ * abc1234 - feat: add login │ │ │ │ │ │ │ │ ┌────────────────┐ ┌───────────────────┐ │ │ │ │ │ [AI] Claude 85%│ │ [Human] 15% │ │ │ │ │ │ +150 -20 │ │ +30 -5 │ │ │ │ │ └────────────────┘ └───────────────────┘ │ │ │ │ │ │ │ │ ##############... ◄── AI attribution bar │ │ │ │ │ │ │ └──────────────────────────────────────────────────────┘ │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ### Attribution Calculation ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ AI ATTRIBUTION CALCULATION ALGORITHM │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ Algorithm: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ 1. Retrieve all file_diffs linked to the commit │ │ WHERE committed_hash = ? │ │ │ │ 2. For each diff, check ai_session_id: │ │ - NULL -> Human contribution │ │ - NOT NULL -> AI contribution │ │ │ │ 3. Calculate weighted average by lines changed: │ │ │ │ total_lines = SUM(additions + deletions) for all diffs │ │ ai_lines = SUM(additions + deletions) WHERE ai_session_id IS NOT NULL │ │ ai_percentage = (ai_lines / total_lines) * 100 │ │ │ │ 4. Group by agent_name for per-agent breakdown: │ │ │ │ SELECT agent_name, SUM(additions), SUM(deletions) │ │ FROM file_diffs │ │ WHERE committed_hash = ? │ │ GROUP BY agent_name │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## Draft Branch Visualization The Draft Branch Visualization shows uncommitted Work-Wiki saves as a "ghost branch" extending from the current HEAD. ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ DRAFT BRANCH CONCEPT │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ What is a "Draft Branch"? │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ A "Draft Branch" is a visualization of: │ │ │ │ file_diffs WHERE committed_hash IS NULL │ │ │ │ = Work-Wiki saves that have NOT yet been included in a Git commit │ │ = "Work in progress" that exists in Work-Wiki but not in Git │ │ = A "ghost" of what will become the next commit │ │ │ │ Visual Representation: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Lane 0 Lane 1 Draft Lane │ │ │ │ : │ │ │ │ o (live editing) │ │ │ │ : +3 lines (unsaved) │ │ │ │ : │ │ │ │ ┌───o (5 min ago) │ │ │ │ : : +8 lines │ │ │ │ : : main.rs │ │ │ │ : : │ │ │ │ ┌───o───┘ (10 min ago) │ │ │ │ : +20 lines │ │ │ │ : lib.rs │ │ │ │ : │ │ *─────────────┼─────┘ c3 (HEAD) │ │ │ │ "last commit" │ │ │ │ │ │ * │ c2 │ │ │ │ │ │ *─────────────┤ c1 │ │ │ │ Style Differentiation: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Git Commits: *═════* (solid lines, opaque nodes) │ │ Draft Saves: o.....o (dashed lines, semi-transparent nodes) │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## Parallel Timeline View The Parallel Timeline View provides a side-by-side comparison of Git commits and Work-Wiki saves, time-aligned for correlation analysis. ``` ┌────────────────────────────────────────────────────────────────────────────────┐ │ PARALLEL TIMELINE CONCEPT │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Layout: │ │ ════════════════════════════════════════════════════════════════════════════ │ │ │ │ TIME AXIS (horizontal) │ │ ═════════════════════════════════════════════════════════════════ │ │ 09:00 10:00 11:00 12:00 13:00 14:00 15:00 │ │ │ │ │ │ │ │ │ │ │ │ │ GIT COMMITS LANE: │ │ ════*════════════*══════════════════════════════════*════════════ │ │ │ │ │ │ │ 09:15 10:45 13:30 │ │ "init" "feat: login" "fix: bug" │ │ │ │ WORK-WIKI SAVES LANE: │ │ ..oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.. │ │ │││ │││││││││││││││││││││ ││ ││││││││││││││││ │││││ │ │ 4 22 saves 2 14 saves 9 saves │ │ saves (feat: login) saves (fix: bug) (draft) │ │ │ │ AI ACTIVITY LANE: │ │ ═══════[AI][AI][AI][AI][AI]══════[Human]═══[AI][AI][AI][Human]═══ │ │ Claude session #1 Claude session #2 │ │ (10:00-11:30) (13:00-14:30) │ │ │ │ DENSITY HEATMAP: │ │ ┌────────────────────────────────────────────────────────────────┐ │ │ │....################....################.... │ │ │ │ Low│ High activity │Low│ High activity │Low │ │ │ └────────────────────────────────────────────────────────────────┘ │ │ │ │ Connection Lines: │ │ ════════════════════════════════════════════════════════════════════════════ │ │ │ │ GIT COMMITS WORK-WIKI SAVES │ │ ────────────────── ──────────────────────────────────────── │ │ │ │ 13:30 [*] fix: bug ─────┬──── 13:25 o src/api.rs (+5 -2) │ │ ├──── 13:20 o src/lib.rs (+10 -0) │ │ ├──── 13:15 o src/main.rs (+3 -1) │ │ └──── 13:10 o tests/api.rs (+20 -0) │ │ │ │ 10:45 [*] feat: login ──┬──── 10:42 o src/auth.rs (+50 -0) │ │ ├──── 10:38 o src/user.rs (+30 -5) │ │ ├──── ... │ │ └──── 10:00 o src/models.rs (+15 -0) │ │ │ │ 09:15 [*] init ─────────┬──── 09:10 o Cargo.toml (+20 -0) │ │ └──── 09:05 o src/main.rs (+5 -0) │ │ │ └────────────────────────────────────────────────────────────────────────────────┘ ``` ## Frontend Integration Architecture The Work-Wiki visualization features integrate with the existing Git commit graph viewer through a layered component architecture. ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ FRONTEND COMPONENT ARCHITECTURE │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ Existing Component: GitCommitGraphViewer │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Core functionality: │ │ - Render commit graph │ │ - Draw connections │ │ - Handle node interactions │ │ │ │ New Components to Add: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ WorkWikiViewOptions │ │ - showSubCommitHistory: boolean (Sub-commit overlay) │ │ - showAiHeatmap: boolean (AI attribution colors) │ │ - showDraftBranch: boolean (Draft branch node) │ │ - parallelTimelineMode: boolean (Dual timeline view) │ │ │ │ Default: all false except showDraftBranch = true │ │ │ │ SubCommitOverlay │ │ - Show Work-Wiki saves between commits │ │ - Expandable/collapsible view │ │ - Badge shows save count when collapsed │ │ │ │ AiHeatmapOverlay │ │ - Color commits by AI contribution percentage │ │ - Per-agent breakdown on hover │ │ - Attribution bar visualization │ │ │ │ DraftBranchNode │ │ - Show uncommitted changes as ghost branch │ │ - Semi-transparent, dashed border style │ │ - Extends from current HEAD │ │ │ │ ParallelTimelineView │ │ - Side-by-side Git commits and Work-Wiki saves │ │ - Time-aligned display │ │ - Connection lines between commits and saves │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## Implementation Roadmap ### Four-Phase Implementation Plan ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ IMPLEMENTATION ROADMAP: 4 PHASES │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ PHASE 1: SCHEMA MIGRATION │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Tasks: │ │ [ ] ALTER TABLE file_diffs ADD committed_hash │ │ [ ] ALTER TABLE file_diffs ADD parent_hash │ │ [ ] ALTER TABLE file_diffs ADD change_type │ │ [ ] ALTER TABLE file_diffs ADD ai_session_id │ │ [ ] ALTER TABLE file_diffs ADD agent_name │ │ [ ] CREATE TABLE ai_sessions │ │ [ ] CREATE TABLE commit_work_mapping │ │ [ ] CREATE indexes │ │ │ │ Backward Compatible: YES (nullable columns) │ │ Estimated Effort: 1 day │ │ │ │ PHASE 2: BACKEND EXTENSION │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ New Commands: │ │ [ ] work_wiki_record_with_ai_context │ │ [ ] work_wiki_link_to_commit │ │ [ ] work_wiki_get_pre_commit_changes │ │ [ ] work_wiki_get_ai_attribution │ │ [ ] work_wiki_draft_branch_preview │ │ │ │ Extended Commands: │ │ [ ] git_commit_graph_extended (with GraphOptions) │ │ │ │ Estimated Effort: 2-3 days │ │ │ │ PHASE 3: FRONTEND INTEGRATION │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ UI Components: │ │ [ ] SubCommitOverlay component │ │ [ ] AiHeatmapOverlay component │ │ [ ] DraftBranchNode component │ │ [ ] ParallelTimelineView component │ │ [ ] WorkWikiViewOptions toolbar │ │ │ │ CSS Additions: │ │ [ ] Sub-commit styles │ │ [ ] AI heatmap colors │ │ [ ] Draft branch styles │ │ [ ] Parallel timeline layout │ │ │ │ Estimated Effort: 3-4 days │ │ │ │ PHASE 4: AI INTEGRATION │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ AI Session Management: │ │ [ ] work_wiki_start_ai_session command │ │ [ ] work_wiki_end_ai_session command │ │ [ ] work_wiki_get_active_ai_session command │ │ [ ] work_wiki_end_session_by_terminal command │ │ [ ] Global session state management │ │ │ │ Terminal Integration: │ │ [ ] AI banner detection (regex patterns) │ │ [ ] Terminal close session cleanup │ │ [ ] Inactivity timeout handling │ │ │ │ NIIA Watcher Integration: │ │ [ ] Query active AI session before recording │ │ [ ] Pass ai_session_id to record function │ │ [ ] Git commit detection and linking │ │ │ │ Estimated Effort: 2-3 days │ │ │ │ TOTAL ESTIMATED EFFORT: 8-11 days │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ### Priority Matrix ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ IMPLEMENTATION PRIORITY MATRIX │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ P0: CRITICAL - Required for basic functionality │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ 1. Schema migration (Phase 1) │ │ - ALTER TABLE file_diffs ADD committed_hash │ │ - CREATE TABLE commit_work_mapping │ │ │ │ 2. work_wiki_link_to_commit command (Phase 2) │ │ - Core functionality for commit-save relationship │ │ │ │ 3. work_wiki_get_pre_commit_changes command (Phase 2) │ │ - Required for sub-commit visualization │ │ │ │ P1: HIGH - Enables key visualization features │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ 1. SubCommitOverlay component (Phase 3) │ │ - Expand/collapse micro-history in graph │ │ │ │ 2. work_wiki_draft_branch_preview command (Phase 2) │ │ - Get uncommitted changes for visualization │ │ │ │ 3. DraftBranchNode component (Phase 3) │ │ - Ghost node for uncommitted work │ │ │ │ P2: MEDIUM - AI attribution system │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ 1. AI session management (Phase 1, Phase 4) │ │ - CREATE TABLE ai_sessions │ │ - Session state machine │ │ │ │ 2. work_wiki_record_with_ai_context command (Phase 2) │ │ - Record saves with AI attribution │ │ │ │ 3. work_wiki_get_ai_attribution command (Phase 2) │ │ - Calculate AI vs Human percentages │ │ │ │ 4. AiHeatmapOverlay component (Phase 3) │ │ - Color scale visualization │ │ │ │ P3: LOW - Advanced visualization │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ 1. ParallelTimelineView component (Phase 3) │ │ - Dual timeline layout │ │ │ │ 2. Terminal output AI detection (Phase 4) │ │ - Regex pattern matching for AI banners │ │ │ │ 3. Real-time update animations │ │ - Live micro-save updates │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## Contribution to THE CENTER ### How Visualization Features Enable the Feedback Loop ``` ┌───────────────────────────────────────────────────────────────────────────────┐ │ CONTRIBUTION TO THE CENTER │ │ "Building an environment where Human <> AI feedback loop can operate" │ ├───────────────────────────────────────────────────────────────────────────────┤ │ │ │ 1. SUB-COMMIT VIEW -> Reveals Collaboration Rhythm │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Without Sub-Commit View: │ │ Commit: "feat: add user authentication" │ │ -> Appears as single atomic change │ │ -> No insight into HOW it was developed │ │ │ │ With Sub-Commit View: │ │ Commit: "feat: add user authentication" │ │ │ │ │ ├── 15:42 o auth.rs (+10 -2) [AI] Claude suggested auth flow │ │ ├── 15:38 o user.rs (+5 -0) [AI] Claude added user model │ │ ├── 15:35 o lib.rs (+3 -1) [Human] fixed import │ │ ├── 15:30 o test.rs (+50 -0) [AI] Claude generated tests │ │ └── 15:25 o main.rs (+2 -0) [Human] initial setup │ │ │ │ -> Exact collaboration pattern visible │ │ -> AI suggests, human reviews and refines │ │ -> Feedback loop is VISIBLE │ │ │ │ 2. AI HEATMAP -> Quantifies Collaboration Balance │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Without AI Heatmap: │ │ Commit history shows only author name │ │ -> Co-authored-by headers are optional and unreliable │ │ -> No way to analyze AI usage patterns across project │ │ │ │ With AI Heatmap: │ │ │ │ [*] commit 1 (AI: 65%) │ │ [*] commit 2 (AI: 0%, pure human) │ │ [*] commit 3 (AI: 100%, auto-generated) │ │ [*] commit 4 (AI: 30%) │ │ │ │ -> Instantly see collaboration balance │ │ -> Identify over-reliance on AI or underutilization │ │ -> Data-driven insights into team workflow │ │ │ │ 3. DRAFT BRANCH -> Shows Active Collaboration │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Without Draft Branch: │ │ Git shows only committed history │ │ -> Current work in progress is invisible │ │ -> No context about active AI session │ │ │ │ With Draft Branch: │ │ │ │ [o] DRAFT (5 files, +45 -12) │ │ : AI Session: Claude Code (active) │ │ : Last save: 2 minutes ago │ │ : │ │ [*] HEAD │ │ │ │ -> See work in progress in real-time │ │ -> Know when AI is actively helping │ │ -> Never lose track of uncommitted changes │ │ │ │ 4. PARALLEL TIMELINE -> Maps Collaboration Flow │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ Without Parallel Timeline: │ │ Git log shows linear sequence of commits │ │ -> No correlation between activity level and commits │ │ -> AI session boundaries invisible │ │ │ │ With Parallel Timeline: │ │ │ │ COMMITS SAVES AI SESSIONS │ │ ─────────────── ───────────────────── ───────────────── │ │ │ │ 13:30 [*] ooooooooo (burst) [AI] Claude #2 │ │ 15 saves (13:00-14:00) │ │ │ │ 10:45 [*] oooooooooooooo (burst) [AI] Claude #1 │ │ 22 saves (10:00-11:30) │ │ │ │ 09:15 [*] oo (setup) [Human] │ │ 4 saves │ │ │ │ -> AI bursts clearly correlated with productivity │ │ -> Human setup followed by AI implementation visible │ │ -> Complete workflow pattern revealed │ │ │ │ SUMMARY: │ │ ════════════════════════════════════════════════════════════════════════════│ │ │ │ These four visualization features transform the opaque Human <> AI │ │ collaboration into a TRANSPARENT, QUANTIFIABLE, and ANALYZABLE process. │ │ │ │ This is THE CENTER: an environment where the feedback loop is not just │ │ happening, but where it can be SEEN, MEASURED, and OPTIMIZED. │ │ │ └───────────────────────────────────────────────────────────────────────────────┘ ``` ## Key Takeaways **1. Layered Overlay Design** Each visualization feature is an independent overlay on the existing commit graph. This preserves existing functionality while enabling gradual feature adoption through toggle options. **2. Data-Driven Visualization** All visualizations are backed by concrete database queries: * Sub-commits: work\_wiki\_get\_pre\_commit\_changes * AI heatmap: work\_wiki\_get\_ai\_attribution * Draft branch: work\_wiki\_draft\_branch\_preview This ensures accurate, consistent, and performant rendering. **3. Incremental Implementation** The 4-phase roadmap allows for incremental development and testing: * Phase 1: Database foundation * Phase 2: Backend commands * Phase 3: Frontend components * Phase 4: AI integration Each phase delivers value independently while building toward the complete vision. **4. THE CENTER Alignment** Every visualization feature directly supports THE CENTER goal of making Human ◀▶ AI collaboration visible, traceable, and analyzable. This isn't just about tracking - it's about creating an environment where the feedback loop can be optimized. *** ``` ╔═══════════════════════════════════════════════════════════════╗ ║ ║ ║ THE CENTER ║ ║ ║ ║ "Building an environment where Human <> AI feedback ║ ║ loop can operate" ║ ║ ║ ║ Work-Wiki Extension visualization makes the invisible ║ ║ visible, transforming collaboration into insight ║ ║ ║ ╚═══════════════════════════════════════════════════════════════╝ ``` Return to Architecture for schema design and system integration