Copy
+===============================================================================+
| |
| SMART TAB REUSE & CLEANUP |
| |
| THE CENTER: "VariableMD extends the Brick from Terminal to Documents" |
| |
+===============================================================================+
The Problem: Tab Explosion
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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