Knowledge Tree

🪴 Raw Notes

5 min read

🛠️ General & System Issues

  • Serverless Run: The README states a server is required; index.html must work when opened directly.
  • Verbose Toasts: Remove/beautify the verbose “Successfully extended node” toast.
  • CSP & Map Block: Fix JS map files blocking (e.g., JSPdf map) due to CSP restricting connect-src to openrouter.ai and api.openai.com.
  • D3 NaN Errors: Fix console error: Error: <path> attribute d: Expected number, "MNaN,NaNCNaN,NaN,...".
  • Injection Failure: Fix [UAC-CONTENT][INJECTION_FAILED] background script injection queue errors.

🎛️ Keyboard Navigation & Shortcuts

  • Bypass Confirmations: Shift-clicking action buttons (e.g., delete) bypasses confirmation dialogs.
  • Arrow Keys: Navigate up/down/left/right relative to layout direction, independent of tree orientation.
  • Selection Logic: Post-creation, select closest child relative to parent:
    • Odd count: True middle child.
    • Even count: Left-of-center child.
  • Memory: Remember the last visited child node.
  • Shortcuts:
    • h: Toggle hide/unhide node (avoids conflict with browser Cmd+H).
    • Enter / Esc: Open / Close node detail panel or active canvas overlays.
    • Shift+Enter: Expand new branches.
    • r: Reload.
    • Backspace or Delete: Prompt to delete node.
    • Shift+Backspace or Shift+Delete: Force delete node immediately.
    • Shortcut for folding/unfolding branches.

🎨 UI/UX & Canvas Interaction

  • Dark Mode Card Titles: Ensure card titles in dark mode are styled black for legibility.
  • Tree Direction: Support left, right, top, and bottom tree layouts in settings.
  • Canvas Reveal: Clicking empty canvas closes detail panels/menus.
  • Input Bar: Seed input starts centered, then fades out and slides/dissolves into header icon, leaving DOM.
  • Settings Cog: Move dark mode and export buttons to the settings cog (bottom right).
  • Undo/Redo: History system with shortcuts (Cmd+Z, Cmd+Shift+Z), accessible from settings.
  • Touch & Mobile: Touch gestures (swipe close, pinch zoom), target sizes >=44x44px, and full-screen detail view for widths <=768px.
  • Visuals: Node connection animations, smooth zoom, custom connection line styles.

🪴 Node Behavior & Visuals

  • Icon Toggle: Support toggling node representation between standard emojis and Lucide React icons.
  • Regenerate Behavior: Regenerating a node retracts branches, regenerates target node only, then regrows branches to prior depth.
  • Folded Previews: Hovering folded nodes displays tiny clickable subnode dots (node-folded-preview-item). Slightly thicker circle border indicates nested subnodes.
  • Overlay ”+”: Overlay ”+” directly over the node emoji (spans whole emoji on hover, removes default styles).
  • Overlap Prevention: Spacing algorithm prevents overlaps. Hovering a node brings it to foreground.
  • AI Streaming: “Disney-like” animation on the last 1-2 words during text streaming.
  • Lineage Context: Nodes track lineage (breadcrumbs) to enforce unique emojis per lineage.
  • Image Styling: Prepend unique, appendable image style tag per tree for consistency.

📑 Node Detail Panel

  • Detailed Panel Hide Option: Implement a hide toggle option directly within the node detail panel.
  • Layout: Subtle gradient backgrounds, card-style elevated sections, and a tabbed interface.
  • Interaction: Edit pencil for AI text, click checklist to cross off, drag-and-drop reordering, collapsible sections, quick inline editing.
  • Features: Priority levels, tags/labels, auto-save, conflict resolution, version history, change tracking.
  • Charts: Connection visualization, tag clouds, and progress charts.

📤 Import, Export & Collaboration

  • Universal Format: Export format must support full tree re-import.
  • PNG Export: Hide overlays/buttons during capture, center title/emoji, and restore UI post-capture.
  • PDF Export: Recursive traversal, dynamic indentation, automatic page breaks, and dark mode adaptation.
  • Markdown Export: Full tree traversal (incl. collapsed nodes) with correct header hierarchies and checkboxes.
  • Mermaid Export: Full tree structure mapping.
  • Collaboration: Share individual nodes, templates, real-time multi-user editing, roles/permissions.

🧠 AI Intelligence

  • Search: Postpone search and filter functionality (consider as nice to have for later development logs).
  • Suggestions, auto-categorization, similarity scoring, topic relation mapping, similar node recommendations.
  • AI-powered summaries of long content, contextual help, smart task generation, priority detection, and dependencies.

🛠️ Technical, Quality & Architecture

  • State Persistence: Document state persistence implementation and optimal client-side caching strategies.
  • Performance: Virtual scrolling for lists, lazy-loaded content, node caching, and optimized animations.
  • Architecture: Modular plugin system, theme engine, custom renderers, API key encryption, and rate limiting.
  • Code Quality: Clean up dead settings code, standardize recursive traversal patterns, error boundary handling, and test suites.

🎨 CSS Snippets

/* Modern Panel Design */
.detail-panel {
  background: linear-gradient(to bottom right, #ffffff, #f8fafc);
  border-radius: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
/* Section Cards */
.detail-panel-section {
  background: white;
  border-radius: 16px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}
.detail-panel-section:hover { transform: translateY(-2px); }
 
/* Interactive Elements */
.action-button { position: relative; overflow: hidden; }
.action-button::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0); transition: transform 0.3s ease;
}
.action-button:hover::after { transform: translate(-50%, -50%) scale(2); }
 
/* Responsive Design */
@media (max-width: 768px) {
  .detail-panel { width: 100vw; height: 100vh; border-radius: 0; }
  .panel-actions {
    position: fixed; bottom: 0; left: 0; width: 100%; padding: var(--sp-4);
    background: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
}
/* Touch-friendly targets */
@media (pointer: coarse) {
  .action-button { min-height: 44px; min-width: 44px; }
  .checkbox-label { padding: var(--sp-3) 0; }
}
/* Smooth Animations */
.detail-panel { animation: slideIn 0.3s ease-out; }
.detail-panel-section { animation: fadeIn 0.3s ease-out; animation-fill-mode: both; }
.detail-panel-section:nth-child(1) { animation-delay: 0.1s; }
.detail-panel-section:nth-child(2) { animation-delay: 0.2s; }
.detail-panel-section:nth-child(3) { animation-delay: 0.3s; }
 
@keyframes slideIn {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Graph View

Backlinks