The Core Purpose
Work-Wiki’s core is not “measuring what AI did” but “building an environment where Human ◈ AI feedback loop can operate.”The Three Elements in Technical Terms
┌─────────────────────────────────────────────────────────────────────────────────┐
│ THE THREE ELEMENTS: TECHNICAL MAPPING │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ELEMENT 1: TRANSPARENCY │
│ │
│ Philosophy: AI work is visible to human │
│ │
│ Implementation: │
│ ├── work_wiki_record_with_ai_context() │
│ │ Records every save with AI session attribution │
│ ├── file_diffs.ai_session_id, file_diffs.agent_name │
│ │ Stores AI identity in database │
│ └── committed_hash tracking │
│ Links saves to commits │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ ELEMENT 2: VISUALIZATION │
│ │
│ Philosophy: Presented in a form human can understand │
│ │
│ Implementation: │
│ ├── GitBlameViewer │
│ │ Line-level AI indicators with 4-tier colors │
│ ├── GitDiffViewer │
│ │ Hunk-level AI badges via hunkMeta │
│ ├── GitBranchDiagramViewer │
│ │ Micro-save badges + Draft nodes (half-moon) │
│ └── 4-Tier Color System │
│ Consistent visual language across components │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ ELEMENT 3: FEEDBACK │
│ │
│ Philosophy: Human can efficiently respond/correct/direct AI │
│ │
│ Implementation: │
│ ├── Draft Node Click Handler │
│ │ Opens detailed popup for uncommitted work review │
│ ├── Commit Selection in GitBranchDiagramViewer │
│ │ Click commit to see AI contribution details │
│ ├── Agent Tooltips │
│ │ Show which AI agents contributed │
│ └── Two-Phase Rendering │
│ Non-blocking UI enables responsive interaction │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Complete Data Flow
┌─────────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE WORK-WIKI DATA FLOW │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ STAGE 1: CAPTURE (Transparency) │
│ │
│ AI Agent writes code → File Save │
│ │ │
│ ▼ │
│ work_wiki_record_with_ai_context(file_path, session_id, agent_name) │
│ ├── Calculate diff │
│ ├── Dedup check │
│ └── INSERT into file_diffs (committed_hash=NULL) │
│ │ │
│ ▼ │
│ file_diffs table (DRAFT STATE) │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ STAGE 2: COMMIT LINKING │
│ │
│ Git Commit Detected │
│ │ │
│ ▼ │
│ work_wiki_link_to_commit(repo_path, commit_hash, parent_hash) │
│ ├── Find uncommitted diffs │
│ ├── UPDATE committed_hash = new_commit_hash │
│ └── INSERT into commit_work_mapping │
│ │ │
│ ▼ │
│ Saves now linked to commit │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ STAGE 3: RETRIEVAL (Visualization Prep) │
│ │
│ User Opens Git View │
│ │ │
│ ┌──────────────────────┼──────────────────────┐ │
│ ▼ ▼ ▼ │
│ work_wiki_ work_wiki_ work_wiki_ │
│ get_ai_ get_commit_ draft_branch_ │
│ attribution() work_counts() preview() │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ AiAttribution CommitWorkCounts DraftBranchPreview │
│ Frontend receives structured data │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ STAGE 4: VISUALIZATION │
│ │
│ Frontend Components Apply 4-Tier Color System │
│ │
│ GitBlameViewer: ◉ abc1234 Claude 2h ago export function... │
│ GitDiffViewer: @@ -1,5 +1,8 @@ [AI: 67%] │
│ GitBranchDiagram: o abc1234 [15] ◐ DRAFT [AI] 8 [H] 4 │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ STAGE 5: FEEDBACK │
│ │
│ Human Interaction Points: │
│ 1. Click Draft Node → See uncommitted files, AI vs human breakdown │
│ 2. Hover AI Indicator → "AI: 67% (Claude, Gemini)" │
│ 3. Click Commit Node → View micro-saves that contributed │
│ 4. Human makes decision → Review/Adjust prompts/Modify code │
│ │
│ THE LOOP CLOSES: │
│ Human Response → New Prompt → AI Work → Transparency → Human sees → Response │
│ ▲ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
The Two-Phase Rendering Pattern
Critical for the feedback loop because it ensures immediate response:┌─────────────────────────────────────────────────────────────────────────────────┐
│ TWO-PHASE RENDERING: UX TIMELINE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ t=0ms User clicks "Blame" view │
│ │ │
│ ▼ │
│ t=0-50ms loadData() calls invoke('git_blame', ...) │
│ │ │
│ ▼ │
│ t=50ms Phase 1: Core blame data arrives │
│ ├── this.data = result │
│ └── this.render() <-- User sees blame immediately! │
│ │ │
│ ▼ │
│ t=50ms fetchWorkWikiAttributions() called (async, .then()) │
│ ├── invoke('work_wiki_get_ai_attributions_batch', ...) │
│ └── Does NOT block UI │
│ │ │
│ ▼ │
│ t=50-150ms User can already: │
│ ├── Scroll through blame │
│ ├── Read line content │
│ └── See author names and times │
│ │ │
│ ▼ │
│ t=150ms Phase 2: AI attribution data arrives │
│ ├── Cache populated (Map.set()) │
│ └── this.render() <-- AI indicators now visible! │
│ │ │
│ ▼ │
│ t=150ms+ User sees complete view: │
│ ├── Core blame data │
│ ├── AI percentage indicators (circle) │
│ ├── 4-tier colors (green/yellow/accent/purple) │
│ └── Agent tooltips on hover │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ Key Insight: │
│ │
│ Without two-phase: User waits 150ms+ seeing nothing │
│ With two-phase: User sees data at 50ms, enhanced at 150ms │
│ │
│ The 100ms difference is felt as "instant" vs "noticeable delay" │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
The 4-Tier Color System
The 4-tier color system is not just aesthetic - it’s a visual language for the feedback loop:┌─────────────────────────────────────────────────────────────────────────────────┐
│ 4-TIER COLOR SYSTEM: VISUAL LANGUAGE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ TIER 1: GREEN (0-25% AI) - "Human Work" │
│ Visual: Green │
│ Signal: "This is mostly human-written" │
│ Action: Normal review process │
│ Feedback Loop Implication: Human is primary author. AI assistance minimal. │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ TIER 2: YELLOW (26-50% AI) - "Collaborative" │
│ Visual: Yellow/Orange │
│ Signal: "Human and AI contributed roughly equally" │
│ Action: Review AI-contributed sections │
│ Feedback Loop Implication: True collaboration. Human ◈ AI working together. │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ TIER 3: ACCENT (51-75% AI) - "AI-Assisted" │
│ Visual: Accent Purple │
│ Signal: "AI did most of the work, human refined" │
│ Action: Careful review of AI output │
│ Feedback Loop Implication: Human is directing, AI is executing. Good prompts? │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ TIER 4: PURPLE (76-100% AI) - "AI-Generated" │
│ Visual: Purple │
│ Signal: "This is almost entirely AI-generated" │
│ Action: Thorough review required │
│ Feedback Loop Implication: AI is primary author. Is human oversight enough? │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ The colors are NOT judgments. They are information. │
│ │
│ Green is not "good" and purple is not "bad". │
│ They inform the human where to focus attention. │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Draft Node: Visualizing the Future
The Draft Node represents work that exists but isn’t yet committed:┌─────────────────────────────────────────────────────────────────────────────────┐
│ DRAFT NODE: VISUALIZING THE FUTURE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Git's View: │
│ │
│ commit C -------- commit D -------- ??? │
│ (30 min ago) (HEAD) (unknown future) │
│ │
│ Git cannot see what's happening NOW. │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ Work-Wiki's View: │
│ │
│ commit D (HEAD) │
│ : │
│ : (dashed - not yet committed) │
│ : │
│ ◐ DRAFT │
│ ├── 3 files changed │
│ ├── +145 -23 lines │
│ ├── [AI] 8 saves │
│ └── [H] 4 saves │
│ │
│ Work-Wiki reveals the "future" - work that will become the next commit. │
│ │
│ ───────────────────────────────────────────────────────────────────────── │
│ │
│ Half-Moon Icon Meaning: │
│ Full circle = Complete (committed) │
│ Half circle = In progress (uncommitted) │
│ Empty circle = Planned (future, not implemented) │
│ │
│ The half-moon visually communicates: │
│ - Work is partially complete │
│ - Something is being "filled in" │
│ - A transition state between empty and full │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Multi-Agent Tracking
In a real development workflow, multiple AI agents may contribute:┌─────────────────────────────────────────────────────────────────────────────────┐
│ MULTI-AGENT BREAKDOWN │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Query Result: │
│ │
│ ┌────────────┬───────────┬───────────┐ │
│ │ agent_name │ additions │ deletions │ │
│ ├────────────┼───────────┼───────────┤ │
│ │ Claude │ 120 │ 15 │ │
│ │ Copilot │ 25 │ 5 │ │
│ │ Gemini │ 0 │ 3 │ │
│ └────────────┴───────────┴───────────┘ │
│ │
│ Frontend Display: │
│ │
│ Tooltip: "AI: 67% (Claude 50%, Copilot 15%, Gemini 2%)" │
│ │
│ This enables the human to understand: │
│ - Which AI contributed most │
│ - Whether multiple agents worked together │
│ - Quality characteristics of each agent's work │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
The Complete Loop
┌─────────────────────────────────────────────────────────────────────────────────┐
│ THE COMPLETE LOOP │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ "Work-Wiki provides AI work transparency" │
│ │ │
│ ▼ │
│ work_wiki_record_with_ai_context() │
│ file_diffs.ai_session_id, file_diffs.agent_name │
│ │ │
│ ▼ │
│ "Human can see, understand, and respond" │
│ │ │
│ ▼ │
│ GitBlameViewer, GitDiffViewer, GitBranchDiagramViewer │
│ 4-Tier Color System, Micro-Save Badges, Draft Nodes │
│ │ │
│ ▼ │
│ "Feedback loop becomes possible" │
│ │ │
│ ▼ │
│ Click handlers, Tooltips, Details popups │
│ Human reviews, adjusts prompts, modifies code │
│ │ │
│ ▼ │
│ "Human ◈ AI operates as ONE motion" │
│ │ │
│ ▼ │
│ New prompt → AI work → Transparency → Human sees → Response │
│ ▲ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ "Monokinetics is achieved" │
│ The loop continues. Human and AI move as one. │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
THE CENTER
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE CENTER IN IMPLEMENTATION ║
║ ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ WHAT: Human ◈ AI feedback loop environment ║
║ → work_wiki_* commands + Viewer components ║
║ ║
║ HOW: Transparency → Visualization → Feedback → LOOP ║
║ → Record → 4-tier colors → Click handlers → Prompt ║
║ ║
║ WHY: For Monokinetics to be possible ║
║ → The loop enables Human ◈ AI unity ║
║ ║
║ NOT: Measuring percentages, solving authorship problems ║
║ → Percentages are byproducts, not the goal ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
How Each Decision Serves the Loop
- Two-phase rendering: Non-blocking UI enables responsive feedback
- Map-based caching: O(1) lookups for instant data access
- 4-tier colors: Consistent visual language for quick understanding
- hunkMeta coordinates: Precise attribution for informed review
- Draft nodes: Visibility into uncommitted work before permanent
- Multi-agent tracking: Complete transparency about AI contributions
- Native tooltips: Zero-friction information access