@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/frontend/src/components/CommitMessageModal.tsx

@@ -0,0 +1,82 @@
+/**
+ * Commit Message Modal — prompts user to enter a commit message before switching branches
+ * when there are uncommitted changes.
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+interface CommitMessageModalProps {
+  isOpen: boolean;
+  targetBranch: string;
+  onConfirm: (message: string) => void;
+  onCancel: () => void;
+}
+
+export const CommitMessageModal = ({ isOpen, targetBranch, onConfirm, onCancel }: CommitMessageModalProps) => {
+  const [message, setMessage] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setMessage('');
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [isOpen]);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = message.trim();
+    if (!trimmed) return;
+    onConfirm(trimmed);
+  }, [message, onConfirm]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]" onClick={onCancel}>
+      <div className="bg-surface border border-edge rounded-xl p-6 w-[440px] max-w-[90vw] shadow-[0_8px_32px_rgba(0,0,0,0.3)]" onClick={e => e.stopPropagation()}>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="m-0 text-lg text-content">Uncommitted Changes</h2>
+          <button className="bg-none border-none text-[22px] text-content-secondary cursor-pointer px-1 leading-none hover:text-content" onClick={onCancel} type="button">&times;</button>
+        </div>
+
+        <p className="text-[13px] text-content-secondary mb-3">
+          You have uncommitted changes. Enter a commit message to save them before switching to <span className="font-mono text-accent">{targetBranch}</span>.
+        </p>
+
+        <form onSubmit={handleSubmit} noValidate>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="commit-message">
+              Commit message
+            </label>
+            <input
+              ref={inputRef}
+              id="commit-message"
+              className="w-full h-9 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted"
+              value={message}
+              onChange={e => setMessage(e.target.value)}
+              placeholder="Save work before switching branch..."
+            />
+          </div>
+
+          <div className="flex gap-2 mt-4">
+            <button
+              className="flex-1 h-9 bg-transparent border border-edge rounded text-content-secondary font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-surface-raised"
+              type="button"
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+            <button
+              className="flex-1 h-9 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white disabled:opacity-40 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-accent"
+              type="submit"
+              disabled={!message.trim()}
+            >
+              Commit & Switch
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/DiagramOverlay.tsx

@@ -0,0 +1,160 @@
+/**
+ * DiagramOverlay — fullscreen overlay for viewing a mermaid SVG diagram.
+ *
+ * Supports zoom (scroll wheel / pinch) and pan (click-drag).
+ * Closed via the X button or pressing Escape.
+ */
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { X, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
+import { clampZoom } from '../lib/mermaid_helpers';
+
+const ZOOM_STEP = 0.15;
+
+interface DiagramOverlayProps {
+  svgHtml: string;
+  onClose: () => void;
+}
+
+export const DiagramOverlay = ({ svgHtml, onClose }: DiagramOverlayProps) => {
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const panStart = useRef({ x: 0, y: 0 });
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Escape key handler
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  // Prevent body scroll while overlay is open
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+    setZoom((z) => clampZoom(z, delta));
+  }, []);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (e.button !== 0) return;
+      setDragging(true);
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      panStart.current = { ...pan };
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    },
+    [pan],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!dragging) return;
+      const dx = e.clientX - dragStart.current.x;
+      const dy = e.clientY - dragStart.current.y;
+      setPan({ x: panStart.current.x + dx, y: panStart.current.y + dy });
+    },
+    [dragging],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setDragging(false);
+  }, []);
+
+  const resetView = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  const zoomIn = useCallback(() => {
+    setZoom((z) => clampZoom(z, ZOOM_STEP));
+  }, []);
+
+  const zoomOut = useCallback(() => {
+    setZoom((z) => clampZoom(z, -ZOOM_STEP));
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-[1000] flex flex-col bg-black/80 backdrop-blur-sm">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-4 py-2 bg-surface/90 border-b border-edge">
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={zoomOut}
+            className="p-1.5 rounded hover:bg-surface-raised text-content-secondary hover:text-content cursor-pointer"
+            aria-label="Zoom out"
+          >
+            <ZoomOut size={16} />
+          </button>
+          <span className="text-xs text-content-secondary font-mono min-w-[3.5rem] text-center">
+            {Math.round(zoom * 100)}%
+          </span>
+          <button
+            type="button"
+            onClick={zoomIn}
+            className="p-1.5 rounded hover:bg-surface-raised text-content-secondary hover:text-content cursor-pointer"
+            aria-label="Zoom in"
+          >
+            <ZoomIn size={16} />
+          </button>
+          <button
+            type="button"
+            onClick={resetView}
+            className="p-1.5 rounded hover:bg-surface-raised text-content-secondary hover:text-content cursor-pointer"
+            aria-label="Reset view"
+          >
+            <RotateCcw size={16} />
+          </button>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="p-1.5 rounded hover:bg-surface-raised text-content-secondary hover:text-content cursor-pointer"
+          aria-label="Close overlay"
+        >
+          <X size={18} />
+        </button>
+      </div>
+
+      {/* Diagram viewport */}
+      <div
+        ref={contentRef}
+        className="flex-1 overflow-hidden select-none"
+        style={{ cursor: dragging ? 'grabbing' : 'grab' }}
+        onWheel={handleWheel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+      >
+        <div
+          className="w-full h-full flex items-center justify-center"
+          style={{
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            transformOrigin: 'center center',
+          }}
+        >
+          <div
+            className="[&_svg]:max-w-none [&_svg]:h-auto"
+            dangerouslySetInnerHTML={{ __html: svgHtml }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/EditorTabBar.tsx

@@ -31,19 +31,19 @@ export const EditorTabBar = ({ tabs, activeTabPath, dirtyPaths, onSelectTab, onC
   if (tabs.length === 0) return null;
 
   return (
-    <div className="editor-tab-bar">
+    <div className="flex items-stretch h-[34px] bg-surface-alt border-b border-edge overflow-x-auto overflow-y-hidden shrink-0 [&::-webkit-scrollbar]:h-0">
       {tabs.map((tab) => (
         <button
           key={tab.path}
-          className={`editor-tab ${tab.path === activeTabPath ? 'editor-tab--active' : ''}`}
+          className={`flex items-center gap-1.5 px-3 border-none border-r border-edge bg-transparent text-content-muted font-mono text-xs cursor-pointer whitespace-nowrap shrink-0 hover:text-content hover:bg-tab-hover ${tab.path === activeTabPath ? 'text-content bg-tab-active border-b-2 border-b-accent' : ''}`}
           onClick={() => onSelectTab(tab.path)}
           onMouseDown={(e) => handleMiddleClick(e, tab.path)}
           title={tab.path}
         >
-          {dirtyPaths.has(tab.path) && <span className="editor-tab__dirty">●</span>}
-          <span className="editor-tab__name">{tab.name}</span>
+          {dirtyPaths.has(tab.path) && <span className="text-accent-secondary text-[10px]">&bull;</span>}
+          <span className="max-w-[150px] overflow-hidden text-ellipsis">{tab.name}</span>
           <span
-            className="editor-tab__close"
+            className="inline-flex items-center justify-center w-4 h-4 rounded-sm opacity-50 cursor-pointer hover:opacity-100 hover:bg-white/10"
             onClick={(e) => handleCloseClick(e, tab.path)}
             role="button"
             tabIndex={-1}

package/templates/assistkick-product-system/packages/frontend/src/components/FileTree.tsx

@@ -102,7 +102,7 @@ const FileTreeNode = ({
   return (
     <>
       <button
-        className={`file-tree-node ${isSelected ? 'file-tree-node--selected' : ''}`}
+        className={`flex items-center gap-1 w-full h-[26px] border-none bg-transparent text-content-secondary font-mono text-xs cursor-pointer text-left whitespace-nowrap overflow-hidden text-ellipsis hover:bg-tab-hover hover:text-content ${isSelected ? 'bg-tab-active text-content' : ''}`}
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
         onClick={handleClick}
         onContextMenu={handleContextMenu}
@@ -110,21 +110,21 @@ const FileTreeNode = ({
       >
         {entry.type === 'directory' ? (
           <>
-            <span className="file-tree-node__chevron">
+            <span className="inline-flex items-center justify-center w-3.5 shrink-0">
               {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
             </span>
             {expanded
-              ? <FolderOpen size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
-              : <Folder size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+              ? <FolderOpen size={ICON_SIZE} className="shrink-0 text-accent" />
+              : <Folder size={ICON_SIZE} className="shrink-0 text-accent" />
             }
           </>
         ) : (
           <>
-            <span className="file-tree-node__chevron file-tree-node__chevron--hidden" />
-            <File size={ICON_SIZE} className="file-tree-node__icon" />
+            <span className="inline-flex items-center justify-center w-3.5 shrink-0 invisible" />
+            <File size={ICON_SIZE} className="shrink-0 text-content-muted" />
           </>
         )}
-        <span className="file-tree-node__name">{entry.name}</span>
+        <span className="overflow-hidden text-ellipsis">{entry.name}</span>
       </button>
       {entry.type === 'directory' && expanded && (
         <>
@@ -233,7 +233,7 @@ export const FileTree = ({ tree, callbacks, selectedPath, expandedPaths, onToggl
 
   const handleRootContextMenu = useCallback((e: React.MouseEvent) => {
     // Only trigger if clicking on the empty area (not on a tree node)
-    if ((e.target as HTMLElement).closest('.file-tree-node')) return;
+    if ((e.target as HTMLElement).closest('button')) return;
 
     e.preventDefault();
     setContextMenu({
@@ -272,7 +272,7 @@ export const FileTree = ({ tree, callbacks, selectedPath, expandedPaths, onToggl
   const showRootCreateInput = inlineInput?.mode === 'create' && inlineInput.parentPath === '';
 
   return (
-    <div className="file-tree" ref={treeRef} onContextMenu={handleRootContextMenu}>
+    <div className="flex flex-col py-1 select-none min-h-full" ref={treeRef} onContextMenu={handleRootContextMenu}>
       {showRootCreateInput && (
         <FileTreeInlineInput
           depth={0}
@@ -310,4 +310,3 @@ export const FileTree = ({ tree, callbacks, selectedPath, expandedPaths, onToggl
     </div>
   );
 };
-

package/templates/assistkick-product-system/packages/frontend/src/components/FileTreeInlineInput.tsx

@@ -51,17 +51,17 @@ export const FileTreeInlineInput = ({ depth, initialValue, type, onSubmit, onCan
 
   return (
     <div
-      className="file-tree-inline-input"
+      className="flex items-center gap-1 h-[26px]"
       style={{ paddingLeft: `${depth * 16 + 8}px` }}
     >
-      <span className="file-tree-node__chevron file-tree-node__chevron--hidden" />
+      <span className="inline-flex items-center justify-center w-3.5 shrink-0 invisible" />
       {type === 'directory'
-        ? <Folder size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
-        : <File size={ICON_SIZE} className="file-tree-node__icon" />
+        ? <Folder size={ICON_SIZE} className="shrink-0 text-accent" />
+        : <File size={ICON_SIZE} className="shrink-0 text-content-muted" />
       }
       <input
         ref={inputRef}
-        className="file-tree-inline-input__field"
+        className="flex-1 min-w-0 h-5 px-1 border border-accent rounded-sm bg-surface text-content font-mono text-xs outline-none"
         value={value}
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={handleKeyDown}

package/templates/assistkick-product-system/packages/frontend/src/components/FilesView.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import Editor, { type OnMount } from '@monaco-editor/react';
 import { FileTree } from './FileTree';
 import { EditorTabBar } from './EditorTabBar';
+import { UnifiedGitWidget } from './UnifiedGitWidget';
+import { CommitMessageModal } from './CommitMessageModal';
 import { useTheme } from '../hooks/useTheme';
 import { useAutoSave } from '../hooks/useAutoSave';
 import { apiClient } from '../api/client';
@@ -17,19 +19,9 @@ interface FilesViewProps {
   projectId: string | null;
 }
 
-const collectExpandedPaths = (tree: TreeEntry[], depth: number): Set<string> => {
-  const paths = new Set<string>();
-  for (const entry of tree) {
-    if (entry.type === 'directory' && depth === 0) {
-      paths.add(entry.path);
-    }
-    if (entry.children) {
-      for (const p of collectExpandedPaths(entry.children, depth + 1)) {
-        paths.add(p);
-      }
-    }
-  }
-  return paths;
+/** All directories start collapsed — returns an empty set. */
+const collectExpandedPaths = (_tree: TreeEntry[], _depth: number): Set<string> => {
+  return new Set<string>();
 };
 
 export const FilesView = ({ projectId }: FilesViewProps) => {
@@ -45,6 +37,8 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
   const [treeError, setTreeError] = useState<string | null>(null);
   const [treeWidth, setTreeWidth] = useState(DEFAULT_TREE_WIDTH);
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
+  const [commitModalOpen, setCommitModalOpen] = useState(false);
+  const [pendingBranch, setPendingBranch] = useState<string | null>(null);
   const resizingRef = useRef(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const initialExpandDone = useRef(false);
@@ -79,6 +73,60 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
     loadTree();
   }, [loadTree]);
 
+  // After a branch switch, reload the tree and reconcile open tabs
+  const handleBranchSwitch = useCallback(async () => {
+    if (!projectId) return;
+    initialExpandDone.current = false;
+    await loadTree();
+
+    // Reload open tabs — close those whose files no longer exist on the new branch
+    const newFileContents: Record<string, string> = {};
+    const survivingTabs: EditorTab[] = [];
+
+    for (const tab of tabs) {
+      try {
+        const data = await apiClient.fetchFileContent(projectId, tab.path);
+        if (data.binary) {
+          newFileContents[tab.path] = `[Binary file — ${data.size} bytes]`;
+        } else {
+          newFileContents[tab.path] = data.content;
+        }
+        survivingTabs.push(tab);
+      } catch {
+        // File doesn't exist on new branch — drop this tab
+      }
+    }
+
+    setTabs(survivingTabs);
+    setFileContents(newFileContents);
+
+    if (activeTabPath && !survivingTabs.find(t => t.path === activeTabPath)) {
+      setActiveTabPath(survivingTabs.length > 0 ? survivingTabs[0].path : null);
+    }
+  }, [projectId, loadTree, tabs, activeTabPath]);
+
+  const handleDirtyCheckout = useCallback((branch: string) => {
+    setPendingBranch(branch);
+    setCommitModalOpen(true);
+  }, []);
+
+  const handleCommitAndSwitch = useCallback(async (message: string) => {
+    if (!projectId || !pendingBranch) return;
+    setCommitModalOpen(false);
+    try {
+      await apiClient.checkoutBranch(projectId, pendingBranch, message);
+      setPendingBranch(null);
+      handleBranchSwitch();
+    } catch (err: any) {
+      console.error('Failed to commit and switch:', err);
+    }
+  }, [projectId, pendingBranch, handleBranchSwitch]);
+
+  const handleCommitModalCancel = useCallback(() => {
+    setCommitModalOpen(false);
+    setPendingBranch(null);
+  }, []);
+
   const handleToggleExpand = useCallback((path: string) => {
     setExpandedPaths((prev) => {
       const next = new Set(prev);
@@ -316,7 +364,7 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
   // No project selected
   if (!projectId) {
     return (
-      <div className="files-view__empty">
+      <div className="flex items-center justify-center h-full w-full">
         <p className="text-content-muted">Select a project to browse files</p>
       </div>
     );
@@ -325,7 +373,7 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
   // Workspace error (no git repo connected)
   if (treeError) {
     return (
-      <div className="files-view__empty">
+      <div className="flex items-center justify-center h-full w-full">
         <p className="text-content-muted">{treeError}</p>
       </div>
     );
@@ -335,13 +383,29 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
   const activeContent = activeTabPath ? (fileContents[activeTabPath] ?? '') : '';
 
   return (
-    <div className="files-view" ref={containerRef}>
+    <div className="flex w-full h-full overflow-hidden" ref={containerRef}>
+      {/* Commit message modal for dirty branch switching */}
+      <CommitMessageModal
+        isOpen={commitModalOpen}
+        targetBranch={pendingBranch || ''}
+        onConfirm={handleCommitAndSwitch}
+        onCancel={handleCommitModalCancel}
+      />
+
       {/* File tree sidebar */}
-      <div className="files-view__tree" style={{ width: `${treeWidth}px`, minWidth: `${treeWidth}px` }}>
-        <div className="files-view__tree-header">
+      <div
+        className="flex flex-col h-full overflow-hidden border-r border-edge bg-surface-alt shrink-0"
+        style={{ width: `${treeWidth}px`, minWidth: `${treeWidth}px` }}
+      >
+        <UnifiedGitWidget
+          projectId={projectId}
+          onBranchSwitch={handleBranchSwitch}
+          onDirtyCheckout={handleDirtyCheckout}
+        />
+        <div className="px-3 pt-2 pb-1 select-none">
           <span className="text-[11px] uppercase tracking-wider font-medium text-content-muted">Explorer</span>
         </div>
-        <div className="files-view__tree-content">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden">
           {tree.length === 0 ? (
             <p className="text-content-muted text-xs p-3">No files found</p>
           ) : (
@@ -357,10 +421,13 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
       </div>
 
       {/* Resize handle */}
-      <div className="files-view__resize-handle" onMouseDown={handleResizeStart} />
+      <div
+        className="w-1 shrink-0 cursor-col-resize transition-colors hover:bg-accent active:bg-accent"
+        onMouseDown={handleResizeStart}
+      />
 
       {/* Editor area */}
-      <div className="files-view__editor">
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <EditorTabBar
           tabs={tabs}
           activeTabPath={activeTabPath}
@@ -369,32 +436,36 @@ export const FilesView = ({ projectId }: FilesViewProps) => {
           onCloseTab={handleCloseTab}
         />
         {activeTab ? (
-          <div className="files-view__editor-container">
+          <div className="flex-1 relative overflow-hidden">
             {loading && (
-              <div className="files-view__loading">
+              <div className="absolute inset-0 flex items-center justify-center bg-surface opacity-70 z-5">
                 <span className="text-content-muted text-sm">Loading...</span>
               </div>
             )}
-            <Editor
-              language={activeTab.language}
-              value={activeContent}
-              theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-              path={activeTab.path}
-              onChange={handleEditorChange}
-              onMount={handleEditorMount}
-              options={{
-                minimap: { enabled: true },
-                fontSize: 13,
-                lineNumbers: 'on',
-                scrollBeyondLastLine: false,
-                automaticLayout: true,
-                tabSize: 2,
-                wordWrap: 'off',
-              }}
-            />
+            <div className="absolute inset-0">
+              <Editor
+                width="100%"
+                height="100%"
+                language={activeTab.language}
+                value={activeContent}
+                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                path={activeTab.path}
+                onChange={handleEditorChange}
+                onMount={handleEditorMount}
+                options={{
+                  minimap: { enabled: true },
+                  fontSize: 13,
+                  lineNumbers: 'on',
+                  scrollBeyondLastLine: false,
+                  automaticLayout: true,
+                  tabSize: 2,
+                  wordWrap: 'off',
+                }}
+              />
+            </div>
           </div>
         ) : (
-          <div className="files-view__empty-editor">
+          <div className="flex-1 flex items-center justify-center w-full">
             <p className="text-content-muted text-sm">Open a file from the explorer to start editing</p>
           </div>
         )}

package/templates/assistkick-product-system/packages/frontend/src/components/GraphLegend.tsx

@@ -72,9 +72,9 @@ export function GraphLegend({ visible, onTypeToggle, onSearchChange }: GraphLege
         <div className="mt-2 first:mt-0">
           <div className="text-[10px] text-content-muted uppercase tracking-wider mb-1">Node Size</div>
           <div className="flex items-center gap-1.5">
-            <span className="w-2 h-2 rounded-full" style={{ background: 'var(--text-muted)' }} />
+            <span className="w-2 h-2 rounded-full bg-content-muted" />
             <span className="text-[10px] text-content-muted">{'\u2192'}</span>
-            <span className="w-[18px] h-[18px] rounded-full" style={{ background: 'var(--text-muted)' }} />
+            <span className="w-[18px] h-[18px] rounded-full bg-content-muted" />
             <span className="text-[11px] text-content-secondary whitespace-nowrap">more connections = larger</span>
           </div>
         </div>