┌═══════════════════════════════════════════════════════════════════════════════┐
│ │
│ SMART TAB REUSE & CLEANUP │
│ │
│ THE CENTER: "VariableMD extends the Brick from Terminal to Documents" │
│ │
└═══════════════════════════════════════════════════════════════════════════════┘
The Problem: Tab Explosion
┌──────────────────────────────────────────────────────────────────────────────┐
│ WITHOUT SMART REUSE │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Opening files one by one... │
│ │
│ ┌──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┐ │
│ │a.md │b.md │c.json│d.ts │e.md │f.json│g.ts │h.md │ │
│ └──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘ │
│ │
│ Result: 8 tabs for 8 files │
│ Problem: Cognitive overload, hard to manage │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Solution: Extension-Based Grouping
┌──────────────────────────────────────────────────────────────────────────────┐
│ SMART TAB REUSE │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Same files, but grouped by type: │
│ │
│ ┌──────┬──────┬──────┐ │
│ │ .md │ .json│ .ts │ │
│ └──────┴──────┴──────┘ │
│ │ │ │ │
│ v v v │
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ a.md │ │c.json │ │ d.ts │ │
│ │ b.md │ │f.json │ │ g.ts │ │
│ │ e.md │ └───────┘ └───────┘ │
│ │ h.md │ │
│ └───────┘ │
│ │
│ Result: 3 tabs for 8 files │
│ Benefit: Clean workspace, same file type = same tab │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Extension = Renderer = CodexMono Application: Files with the same extension use the same renderer. This makes tab reuse semantically correct, not just efficient.
How Smart Reuse Decides
┌──────────────────────────────────────────────────────────────────────────────┐
│ DECISION FLOW │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Open File Request │
│ │ │
│ v │
│ ┌──────────────────┐ │
│ │ Same file open? │ │
│ └──────────────────┘ │
│ │ │ │
│ YES NO │
│ │ │ │
│ v v │
│ ACTIVATE ┌──────────────────┐ │
│ EXISTING │ Same extension │ │
│ TAB │ tab exists? │ │
│ └──────────────────┘ │
│ │ │ │
│ YES NO │
│ │ │ │
│ v v │
│ REUSE CREATE │
│ TAB NEW TAB │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Smart Reuse in Action
Scenario A: Same Extension
┌──────────────────────────────────────────────────────────────────────────────┐
│ SAME EXTENSION REUSE │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: [README.md] [config.json] │
│ ^ │
│ │ │
│ (active) │
│ │
│ User opens: INSTALL.md │
│ │
│ Decision: │
│ - New file extension: .md │
│ - Active tab extension: .md │
│ - SAME! │
│ │
│ Result: [INSTALL.md] [config.json] │
│ ^ │
│ │ │
│ (reused tab) │
│ │
│ THE BRICK GUARANTEE: │
│ Same .md extension = Same renderer = Same CodexMono │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Scenario B: Different Extension, Tab Exists
┌──────────────────────────────────────────────────────────────────────────────┐
│ FIND MATCHING TAB │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: [README.md] [config.json] [index.ts] │
│ ^ │
│ │ │
│ (active) │
│ │
│ User opens: INSTALL.md │
│ │
│ Decision: │
│ - New file extension: .md │
│ - Active tab extension: .json │
│ - Different! Search for .md tab... │
│ - Found: README.md tab │
│ │
│ Result: [INSTALL.md] [config.json] [index.ts] │
│ ^ │
│ │ │
│ (reused + activated) │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Scenario C: No Matching Tab
┌──────────────────────────────────────────────────────────────────────────────┐
│ CREATE NEW TAB │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: [README.md] [config.json] │
│ ^ │
│ │ │
│ (active) │
│ │
│ User opens: index.ts │
│ │
│ Decision: │
│ - New file extension: .ts │
│ - Search for .ts tab... Not found │
│ - Create new tab │
│ │
│ Result: [README.md] [config.json] [index.ts] │
│ ^ │
│ │ │
│ (new tab) │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Extension Grouping: Files are grouped by extension because the extension determines the renderer. This aligns with how developers mentally categorize files.
Tab History: Browser-Like Navigation
┌──────────────────────────────────────────────────────────────────────────────┐
│ TAB HISTORY │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Each tab remembers its history: │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Tab: .md files │ │
│ │ │ │
│ │ History: A.md -> B.md -> C.md │ │
│ │ ^ │ │
│ │ │ │ │
│ │ (current) │ │
│ │ │ │
│ │ [<] Back [>] Forward │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Navigate back to B.md, then open D.md: │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Tab: .md files │ │
│ │ │ │
│ │ Before: A.md -> [B.md] -> C.md │ │
│ │ ^ │ │
│ │ │ │
│ │ After: A.md -> B.md -> [D.md] │ │
│ │ ^ │ │
│ │ │ │
│ │ (C.md replaced - new branch created) │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Git-style branching: Forward history discarded on new path │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Git-Style Branching: Navigate back, open new file, forward history is discarded. This prevents confusing non-linear navigation.
Editor Protection
┌──────────────────────────────────────────────────────────────────────────────┐
│ EDITOR MODE PRESERVATION │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ You're editing a file: │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Tab: notes.md (EDITOR MODE) │ │
│ │ │ │
│ │ Unsaved work here... │ │
│ │ _ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ User opens: README.md │
│ │
│ Decision: │
│ - Active tab is in EDITOR mode │
│ - ALWAYS create new tab (protect unsaved work) │
│ │
│ Result: │
│ ┌───────────────────┐ ┌───────────────────┐ │
│ │ notes.md (EDITOR) │ │ README.md (VIEW) │ │
│ │ Unsaved work safe │ │ New tab │ │
│ └───────────────────┘ └───────────────────┘ │
│ │
│ Your unsaved work is protected │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Editor Mode Preservation: If you’re editing a file, opening a new file always creates a new tab. This prevents accidental data loss.
Closing Tabs: Graceful Cleanup
┌──────────────────────────────────────────────────────────────────────────────┐
│ TAB CLOSE BEHAVIOR │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Close active tab (others remain): │
│ │
│ Before: [README.md] [config.json*] [index.ts] │
│ ^ │
│ (closing) │
│ │
│ After: [README.md] [index.ts*] │
│ ^ │
│ (auto-activated) │
│ │
│ ─────────────────────────────────────────────────────────────── │
│ │
│ Close last tab: │
│ │
│ Before: [README.md*] │
│ ^ │
│ (only tab) │
│ │
│ After: [V] button disabled │
│ Panel hidden │
│ Clean slate │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Graceful Degradation: When the last tab closes, the system returns to initial state. Panel hides, V button disables, ready for next session.
Decision Matrix
┌──────────────────────────────────────────────────────────────────────────────┐
│ SMART REUSE DECISION MATRIX │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┬─────────────┬───────────────────────────┐ │
│ │ Condition │ Match │ Action │ │
│ ├─────────────┼─────────────┼───────────────────────────┤ │
│ │ Same file │ - │ Activate existing tab │ │
│ ├─────────────┼─────────────┼───────────────────────────┤ │
│ │ Editor mode │ - │ Create new tab (protect) │ │
│ ├─────────────┼─────────────┼───────────────────────────┤ │
│ │ Same ext │ Active tab │ Reuse active tab │ │
│ ├─────────────┼─────────────┼───────────────────────────┤ │
│ │ Same ext │ Other tab │ Reuse and activate │ │
│ ├─────────────┼─────────────┼───────────────────────────┤ │
│ │ No match │ - │ Create new tab │ │
│ └─────────────┴─────────────┴───────────────────────────┘ │
│ │
│ Priority: Exact path > Same extension > New tab │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Browser vs VariableMD
┌──────────────────────────────────────────────────────────────────────────────┐
│ COMPARISON │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ BROWSER: │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ - Every URL = new tab │ │
│ │ - No automatic reuse │ │
│ │ - User manages proliferation │ │
│ │ - Tabs can number in hundreds │ │
│ └───────────────────────────────────────────────────────────────────┘ │
│ │
│ VARIABLEMD: │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ - Same file = existing tab │ │
│ │ - Same extension = may reuse │ │
│ │ - Automatic tab management │ │
│ │ - Max 10 tabs (200 files via history) │ │
│ └───────────────────────────────────────────────────────────────────┘ │
│ │
│ WHY THE DIFFERENCE: │
│ - Browsers: General-purpose (many unrelated sites) │
│ - VariableMD: Document-focused (related files in project) │
│ - Similar files viewed in sequence = perfect for reuse │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Brick Guarantee
┌──────────────────────────────────────────────────────────────────────────────┐
│ THE BRICK GUARANTEE │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ Extension │
│ │ │
│ v │
│ Renderer │
│ │ │
│ v │
│ CodexMono │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ THE BRICK │ │
│ │ │ │
│ │ Consistent │ │
│ │ rendering for │ │
│ │ same file types │ │
│ └───────────────────┘ │
│ │
│ Whether tab is reused or new: │
│ CodexMono renders content IDENTICALLY │
│ │
│ Smart reuse is not optimization - it's semantic correctness │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Brick Guarantee: Whether a tab is reused or newly created, CodexMono (600-unit monospace font) ensures identical rendering. Extension-based grouping preserves this consistency.
Key Insights
┌──────────────────────────────────────────────────────────────────────────────┐
│ SUMMARY │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. EXTENSION-BASED GROUPING │
│ Same extension = Same renderer = Same Brick │
│ Tab reuse is semantically correct │
│ │
│ 2. TAB LIMIT + HISTORY │
│ 10 tabs x 20 history = 200 files accessible │
│ Prevents explosion without losing access │
│ │
│ 3. EDITOR PROTECTION │
│ Editor mode always creates new tab │
│ Unsaved work never lost │
│ │
│ 4. GRACEFUL CLEANUP │
│ Close last tab = return to initial state │
│ No orphaned UI elements │
│ │
│ 5. THE BRICK GUARANTEE │
│ Reused or new, CodexMono renders identically │
│ Visual consistency maintained │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Related Concepts
- CodexMono: The fundamental monospace font that enables consistent rendering
- Monokinetics: Unified Human + AI visual experience
- The Brick: CodexMono as the fundamental rendering unit
- SMPC/OFAC: Simplicity principles guiding the design