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
- Phase 1: Database foundation
- Phase 2: Backend commands
- Phase 3: Frontend components
- Phase 4: AI integration
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ THE CENTER ║
║ ║
║ "Building an environment where Human <> AI feedback ║
║ loop can operate" ║
║ ║
║ Work-Wiki Extension visualization makes the invisible ║
║ visible, transforming collaboration into insight ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
Architecture Overview
Return to Architecture for schema design and system integration