SyslogSolution/ra-h-os
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: migrate hardcoded hex values to CSS vars for light mode

Browse Source 
Replace dark hex values with CSS custom properties across all panel,
card, modal, and focus components so light mode renders correctly.
Backgrounds, borders, and text colors now respond to data-theme attribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
“BeeRad”
2026-03-17 20:15:24 +11:00
co-authored by Claude Sonnet 4.6
parent bf175ad125
commit ffefc7b332
19 changed files with 474 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/focus/FocusPanel.tsx
+129 -129
View File
@@ -1256,7 +1256,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
const renderConnectionsBody = () => {
if (!activeTab) {
return <div style={{ color: '#777', fontSize: '12px' }}>Open a node to manage connections.</div>;
return <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px' }}>Open a node to manage connections.</div>;
}
return (
@@ -1282,11 +1282,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
placeholder="Search for a node to connect..."
style={{
width: '100%',
background: '#111',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-surface)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '6px',
padding: '8px 12px',
color: '#e5e5e5',
color: 'var(--rah-text-base)',
fontSize: '12px',
fontFamily: 'inherit',
outline: 'none',
@@ -1300,8 +1300,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
left: 0,
right: 0,
marginTop: '4px',
background: '#141414',
border: '1px solid #262626',
background: 'var(--rah-bg-panel)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '8px',
maxHeight: '200px',
overflowY: 'auto',
@@ -1315,8 +1315,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
padding: '10px 14px',
cursor: 'pointer',
borderBottom: index < nodeSearchSuggestions.length - 1 ? '1px solid #1f1f1f' : 'none',
background: index === selectedSearchIndex ? '#1a1a1a' : 'transparent',
borderBottom: index < nodeSearchSuggestions.length - 1 ? '1px solid var(--rah-bg-active)' : 'none',
background: index === selectedSearchIndex ? 'var(--rah-bg-active)' : 'transparent',
transition: 'background 100ms ease',
display: 'flex',
alignItems: 'center',
@@ -1324,7 +1324,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
}}
onMouseEnter={(e) => {
if (index !== selectedSearchIndex) {
e.currentTarget.style.background = '#1a1a1a';
e.currentTarget.style.background = 'var(--rah-bg-active)';
}
}}
onMouseLeave={(e) => {
@@ -1339,7 +1339,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
justifyContent: 'center',
fontSize: '9px',
fontWeight: 600,
color: '#0a0a0a',
color: 'var(--rah-bg-base)',
background: '#22c55e',
padding: '3px 6px',
borderRadius: '6px',
@@ -1352,7 +1352,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
</span>
<span style={{
fontSize: '13px',
color: '#e5e5e5',
color: 'var(--rah-text-base)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -1361,7 +1361,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
{suggestion.title}
</span>
{index === selectedSearchIndex && (
<span style={{ color: '#525252', fontSize: '13px' }}>↵</span>
<span style={{ color: 'var(--rah-text-muted)', fontSize: '13px' }}>↵</span>
)}
</div>
))}
@@ -1373,11 +1373,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
{/* Connections List */}
<div style={{ flex: 1, overflowY: 'auto' }}>
{loadingEdges.has(activeTab) ? (
<div style={{ color: '#555', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>Loading connections…</div>
<div style={{ color: 'var(--rah-text-muted)', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>Loading connections…</div>
) : (() => {
const list = edgesData[activeTab] || [];
if (list.length === 0) {
return <div style={{ color: '#555', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>No connections yet.</div>;
return <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>No connections yet.</div>;
}
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -1386,7 +1386,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
key={connection.id}
style={{
padding: '6px 0',
borderBottom: '1px solid #141414',
borderBottom: '1px solid var(--rah-bg-panel)',
display: 'flex',
flexDirection: 'column',
gap: '2px',
@@ -1408,7 +1408,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
<span style={{
fontSize: '9px',
fontWeight: 700,
color: '#000',
color: 'var(--rah-bg-base)',
background: '#22c55e',
padding: '1px 5px',
borderRadius: '4px',
@@ -1424,7 +1424,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
onClick={() => onNodeClick?.(connection.connected_node.id)}
style={{
fontSize: '12px',
color: '#e5e5e5',
color: 'var(--rah-text-base)',
fontWeight: 500,
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -1434,7 +1434,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
cursor: 'pointer',
}}
onMouseEnter={(e) => { e.currentTarget.style.color = '#22c55e'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = '#e5e5e5'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rah-text-base)'; }}
>
{connection.connected_node.title}
</span>
@@ -1442,7 +1442,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
onClick={() => deleteEdge(connection.edge.id)}
disabled={deletingEdge === connection.edge.id}
style={{
color: '#444',
color: 'var(--rah-border-stronger)',
fontSize: '14px',
background: 'transparent',
border: 'none',
@@ -1452,7 +1452,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
lineHeight: 1,
}}
onMouseEnter={(e) => { if (deletingEdge !== connection.edge.id) e.currentTarget.style.color = '#dc2626'; }}
onMouseLeave={(e) => { if (deletingEdge !== connection.edge.id) e.currentTarget.style.color = '#444'; }}
onMouseLeave={(e) => { if (deletingEdge !== connection.edge.id) e.currentTarget.style.color = 'var(--rah-border-stronger)'; }}
>
{deletingEdge === connection.edge.id ? '...' : '×'}
</button>
@@ -1475,9 +1475,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
flex: 1,
fontSize: '11px',
color: '#ddd',
background: '#111',
border: '1px solid #2a2a2a',
color: 'var(--rah-text-base)',
background: 'var(--rah-bg-surface)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
padding: '3px 6px',
outline: 'none',
@@ -1508,7 +1508,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
onClick={cancelEditEdgeExplanation}
style={{
fontSize: '10px',
color: '#666',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
padding: '3px 4px',
@@ -1536,9 +1536,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
{typeof connection.edge.context?.type === 'string' && (
<span style={{
fontSize: '9px',
color: '#888',
background: '#1a1a1a',
border: '1px solid #222',
color: 'var(--rah-text-muted)',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-bg-active)',
padding: '1px 5px',
borderRadius: '999px',
flexShrink: 0,
@@ -1621,8 +1621,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
{!hideTabBar && (
<div style={{
display: 'flex',
borderBottom: '1px solid #1a1a1a',
background: '#0f0f0f',
borderBottom: '1px solid var(--rah-border)',
background: 'var(--rah-bg-surface)',
flexShrink: 0,
overflowX: 'auto',
overflowY: 'hidden'
@@ -1631,7 +1631,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
<div style={{
padding: '10px 16px',
fontSize: '12px',
color: '#666'
color: 'var(--rah-text-muted)'
}}>
No tabs open
</div>
@@ -1658,9 +1658,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
display: 'flex',
alignItems: 'center',
borderRight: '1px solid #1a1a1a',
background: isActive ? '#121212' : '#0f0f0f',
borderBottom: isActive ? '2px solid #666' : 'none',
borderRight: '1px solid var(--rah-border)',
background: isActive ? 'var(--rah-bg-subtle)' : 'var(--rah-bg-surface)',
borderBottom: isActive ? '2px solid var(--rah-text-muted)' : 'none',
paddingBottom: isActive ? '0' : '2px',
minWidth: '120px',
maxWidth: '200px',
@@ -1674,7 +1674,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '8px 12px',
fontSize: '12px',
fontFamily: 'inherit',
color: isActive ? '#fff' : '#999',
color: isActive ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
cursor: 'pointer',
@@ -1694,14 +1694,14 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
padding: '4px 8px',
fontSize: '14px',
color: '#666',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
cursor: 'pointer',
transition: 'color 0.2s'
}}
onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--rah-text-active)'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
>
×
</button>
@@ -1721,7 +1721,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
}}>
{!activeTab ? (
<div style={{
color: '#666',
color: 'var(--rah-text-muted)',
fontSize: '13px',
textAlign: 'center',
marginTop: '40px'
@@ -1730,13 +1730,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
</div>
) : loadingNodes.has(activeTab) ? (
<div style={{
color: '#666',
color: 'var(--rah-text-muted)',
fontSize: '13px'
}}>
Loading...
</div>
) : !currentNode ? (
<div style={{ color: '#666', fontSize: '13px' }}>Node not found.</div>
<div style={{ color: 'var(var(--rah-text-muted))', fontSize: '13px' }}>Node not found.</div>
) : nodesData[activeTab] ? (
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* URL Row - Above Title */}
@@ -1800,7 +1800,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
color: '#3b82f6',
fontSize: '11px',
background: 'transparent',
border: '1px solid #1a1a1a',
border: '1px solid var(--rah-border)',
borderRadius: '4px',
padding: '4px 6px',
fontFamily: 'inherit',
@@ -1847,7 +1847,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
<span
onClick={() => startEdit('link', '')}
style={{
color: '#555',
color: 'var(--rah-text-muted)',
fontSize: '11px',
cursor: 'pointer',
fontStyle: 'italic'
@@ -1879,7 +1879,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
display: 'inline-block',
background: '#22c55e',
color: '#0a0a0a',
color: 'var(--rah-bg-base)',
fontSize: '10px',
fontWeight: 600,
padding: '2px 6px',
@@ -1911,9 +1911,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
fontSize: '20px',
fontWeight: 'bold',
color: '#fff',
color: 'var(--rah-text-active)',
background: 'transparent',
border: '1px solid #1a1a1a',
border: '1px solid var(--rah-border)',
borderRadius: '0',
padding: '4px 8px',
fontFamily: 'inherit',
@@ -1937,7 +1937,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
fontSize: '20px',
fontWeight: 'bold',
color: '#fff',
color: 'var(--rah-text-active)',
fontFamily: 'inherit',
cursor: 'pointer',
padding: '4px 8px',
@@ -1958,7 +1958,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
})
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = '#1a1a1a';
e.currentTarget.style.borderColor = 'var(--rah-border)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = 'transparent';
@@ -1966,7 +1966,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
title={titleExpanded[activeTab] ? undefined : (nodesData[activeTab].title || 'Untitled')}
>
{nodesData[activeTab].title || 'Untitled'}
{savingField === 'title' && <span style={{ color: '#555', fontSize: '10px', marginLeft: '6px' }}>saving...</span>}
{savingField === 'title' && <span style={{ color: 'var(--rah-text-muted)', fontSize: '10px', marginLeft: '6px' }}>saving...</span>}
</h1>
)}
@@ -1980,10 +1980,10 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '4px 8px',
fontSize: '10px',
fontWeight: 500,
color: activeContentTab === 'edges' ? '#22c55e' : '#666',
color: activeContentTab === 'edges' ? '#22c55e' : 'var(--rah-text-muted)',
background: activeContentTab === 'edges' ? '#0f2417' : 'transparent',
border: '1px solid',
borderColor: activeContentTab === 'edges' ? '#22c55e' : '#262626',
borderColor: activeContentTab === 'edges' ? '#22c55e' : 'var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer',
transition: 'all 0.2s',
@@ -1997,8 +1997,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
}}
onMouseLeave={(e) => {
if (activeContentTab !== 'edges') {
e.currentTarget.style.color = '#666';
e.currentTarget.style.borderColor = '#262626';
e.currentTarget.style.color = 'var(--rah-text-muted)';
e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
}
}}
title="Connections"
@@ -2016,8 +2016,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
alignItems: 'center',
justifyContent: 'center',
padding: '0 6px',
background: activeContentTab === 'edges' ? 'rgba(34, 197, 94, 0.18)' : '#1a1a1a',
color: activeContentTab === 'edges' ? '#a7f3b8' : '#888',
background: activeContentTab === 'edges' ? 'rgba(34, 197, 94, 0.18)' : 'var(--rah-bg-active)',
color: activeContentTab === 'edges' ? '#a7f3b8' : 'var(--rah-text-muted)',
fontSize: '10px',
lineHeight: 1,
}}
@@ -2039,7 +2039,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '4px',
color: deletingNode === activeTab ? '#994444' : '#525252',
background: 'transparent',
border: '1px solid #262626',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: deletingNode === activeTab ? 'wait' : 'pointer',
transition: 'all 0.2s',
@@ -2055,7 +2055,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
onMouseLeave={(e) => {
if (deletingNode !== activeTab) {
e.currentTarget.style.color = '#525252';
e.currentTarget.style.borderColor = '#262626';
e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
e.currentTarget.style.background = 'transparent';
}
}}
@@ -2132,7 +2132,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
alignItems: 'center',
gap: '0',
marginBottom: '12px',
borderBottom: '1px solid #1a1a1a'
borderBottom: '1px solid var(--rah-border)'
}}>
<button
onClick={() => { setActiveContentTab('desc'); setNotesEditMode(false); setSourceEditMode(false); }}
@@ -2140,7 +2140,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '8px 16px',
fontSize: '11px',
fontWeight: activeContentTab === 'desc' ? 600 : 400,
color: activeContentTab === 'desc' ? '#e5e5e5' : '#666',
color: activeContentTab === 'desc' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
borderBottom: activeContentTab === 'desc' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2157,7 +2157,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '8px 16px',
fontSize: '11px',
fontWeight: activeContentTab === 'notes' ? 600 : 400,
color: activeContentTab === 'notes' ? '#e5e5e5' : '#666',
color: activeContentTab === 'notes' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
borderBottom: activeContentTab === 'notes' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2174,7 +2174,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '8px 16px',
fontSize: '11px',
fontWeight: activeContentTab === 'edges' ? 600 : 400,
color: activeContentTab === 'edges' ? '#e5e5e5' : '#666',
color: activeContentTab === 'edges' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
borderBottom: activeContentTab === 'edges' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2191,7 +2191,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '8px 16px',
fontSize: '11px',
fontWeight: activeContentTab === 'source' ? 600 : 400,
color: activeContentTab === 'source' ? '#e5e5e5' : '#666',
color: activeContentTab === 'source' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
borderBottom: activeContentTab === 'source' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2215,9 +2215,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '4px 8px',
fontSize: '10px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2234,9 +2234,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '4px 8px',
fontSize: '10px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2278,9 +2278,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '4px 8px',
fontSize: '10px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2365,11 +2365,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
}}
disabled={descSaving}
style={{
color: '#e5e5e5',
color: 'var(--rah-text-base)',
fontSize: '15px',
lineHeight: '1.7',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
padding: '12px',
fontFamily: 'inherit',
@@ -2388,7 +2388,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
bottom: '12px',
right: '12px',
fontSize: '10px',
color: descEditValue.length >= 260 ? '#f59e0b' : '#555'
color: descEditValue.length >= 260 ? '#f59e0b' : 'var(--rah-text-muted)'
}}>
{descEditValue.length}/280
</span>
@@ -2434,9 +2434,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '6px 12px',
fontSize: '11px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2470,7 +2470,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
) : nodesData[activeTab]?.description ? (
<div
style={{
color: '#e5e5e5',
color: 'var(--rah-text-base)',
fontSize: '15px',
lineHeight: '1.7',
padding: '4px',
@@ -2484,13 +2484,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
<div
onClick={startDescEdit}
style={{
color: '#555',
color: 'var(--rah-text-muted)',
fontSize: '12px',
fontStyle: 'italic',
cursor: 'pointer',
padding: '8px',
minHeight: '100px',
border: '1px dashed #1a1a1a',
border: '1px dashed var(--rah-border)',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
@@ -2499,8 +2499,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
flex: 1,
transition: 'border-color 0.15s'
}}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#2a2a2a'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#1a1a1a'; }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--rah-border-strong)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--rah-border)'; }}
>
Click to add a description...
</div>
@@ -2563,11 +2563,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
}}
disabled={notesSaving}
style={{
color: '#e5e5e5',
color: 'var(--rah-text-base)',
fontSize: '15px',
lineHeight: '1.7',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
padding: '12px',
fontFamily: 'inherit',
@@ -2586,8 +2586,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
position: 'absolute',
top: '50px',
left: '12px',
background: '#1a1a1a',
border: '1px solid #333',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '6px',
zIndex: 1000,
maxHeight: '200px',
@@ -2596,11 +2596,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
boxShadow: '0 4px 12px rgba(0,0,0,0.5)'
}}>
{mentionQuery.trim().length < 2 ? (
<div style={{ padding: '8px 12px', fontSize: '12px', color: '#666' }}>
<div style={{ padding: '8px 12px', fontSize: '12px', color: 'var(--rah-text-muted)' }}>
Type at least 2 characters to search...
</div>
) : mentionResults.length === 0 ? (
<div style={{ padding: '8px 12px', fontSize: '12px', color: '#666' }}>
<div style={{ padding: '8px 12px', fontSize: '12px', color: 'var(--rah-text-muted)' }}>
No nodes found
</div>
) : (
@@ -2615,10 +2615,10 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
padding: '8px 12px',
fontSize: '13px',
color: '#ddd',
color: 'var(--rah-text-base)',
cursor: 'pointer',
background: idx === mentionIndex ? '#252525' : 'transparent',
borderBottom: idx < mentionResults.length - 1 ? '1px solid #2a2a2a' : 'none'
background: idx === mentionIndex ? 'var(--rah-bg-hover)' : 'transparent',
borderBottom: idx < mentionResults.length - 1 ? '1px solid var(--rah-border-strong)' : 'none'
}}
>
<span style={{ color: '#22c55e', marginRight: '8px', fontWeight: 600 }}>{n.id}</span>
@@ -2672,9 +2672,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '6px 12px',
fontSize: '11px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2722,9 +2722,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
style={{
padding: '4px 10px',
fontSize: '11px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2753,7 +2753,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
) : nodesData[activeTab]?.notes ? (
<div
style={{
color: '#e5e5e5',
color: 'var(--rah-text-base)',
fontSize: '15px',
lineHeight: '1.7',
padding: '4px',
@@ -2770,13 +2770,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
<div
onClick={startNotesEdit}
style={{
color: '#555',
color: 'var(--rah-text-muted)',
fontSize: '12px',
fontStyle: 'italic',
cursor: 'pointer',
padding: '8px',
minHeight: '200px',
border: '1px dashed #1a1a1a',
border: '1px dashed var(--rah-border)',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
@@ -2786,12 +2786,12 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
transition: 'all 0.2s'
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = '#2a2a2a';
e.currentTarget.style.color = '#666';
e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
e.currentTarget.style.color = 'var(--rah-text-muted)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = '#1a1a1a';
e.currentTarget.style.color = '#555';
e.currentTarget.style.borderColor = 'var(--rah-border)';
e.currentTarget.style.color = 'var(--rah-text-muted)';
}}
>
Click to add notes...
@@ -2833,11 +2833,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
}}
disabled={sourceSaving}
style={{
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '12px',
lineHeight: '1.5',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
padding: '12px',
fontFamily: 'monospace',
@@ -2865,9 +2865,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '6px 12px',
fontSize: '11px',
color: '#888',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #2a2a2a',
border: '1px solid var(--rah-border-strong)',
borderRadius: '4px',
cursor: 'pointer'
}}
@@ -2910,9 +2910,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
{/* Raw / Reader toggle */}
<div style={{
display: 'flex',
background: '#111',
background: 'var(--rah-bg-surface)',
borderRadius: '4px',
border: '1px solid #222',
border: '1px solid var(--rah-bg-active)',
overflow: 'hidden',
}}>
<button
@@ -2921,8 +2921,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '4px 10px',
fontSize: '10px',
fontWeight: 500,
color: sourceReaderMode === 'raw' ? '#fff' : '#666',
background: sourceReaderMode === 'raw' ? '#2a2a2a' : 'transparent',
color: sourceReaderMode === 'raw' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: sourceReaderMode === 'raw' ? 'var(--rah-border-strong)' : 'transparent',
border: 'none',
cursor: 'pointer',
transition: 'all 0.15s ease',
@@ -2936,8 +2936,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
padding: '4px 10px',
fontSize: '10px',
fontWeight: 500,
color: sourceReaderMode === 'reader' ? '#fff' : '#666',
background: sourceReaderMode === 'reader' ? '#2a2a2a' : 'transparent',
color: sourceReaderMode === 'reader' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: sourceReaderMode === 'reader' ? 'var(--rah-border-strong)' : 'transparent',
border: 'none',
cursor: 'pointer',
transition: 'all 0.15s ease',
@@ -2956,19 +2956,19 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
gap: '4px',
padding: '4px 8px',
fontSize: '10px',
color: '#666',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: '1px solid #222',
border: '1px solid var(--rah-bg-active)',
borderRadius: '4px',
cursor: 'pointer',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = '#888';
e.currentTarget.style.borderColor = '#333';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
e.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '#666';
e.currentTarget.style.borderColor = '#222';
e.currentTarget.style.color = 'var(--rah-text-muted)';
e.currentTarget.style.borderColor = 'var(--rah-bg-active)';
}}
>
<Pencil size={10} />
@@ -2988,12 +2988,12 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
) : (
<div
style={{
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '12px',
lineHeight: '1.5',
padding: '12px',
background: '#0a0a0a',
border: '1px solid #1a1a1a',
background: 'var(--rah-bg-base)',
border: '1px solid var(--rah-border)',
borderRadius: '4px',
fontFamily: 'monospace',
whiteSpace: 'pre-wrap',
@@ -3007,12 +3007,12 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
<div
onClick={startSourceEdit}
style={{
color: '#555',
color: 'var(--rah-text-muted)',
fontSize: '12px',
fontStyle: 'italic',
cursor: 'pointer',
padding: '12px',
border: '1px dashed #1a1a1a',
border: '1px dashed var(--rah-border)',
borderRadius: '4px',
textAlign: 'center',
height: '100%',
@@ -3033,7 +3033,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
</div>
) : (
<div style={{
color: '#666',
color: 'var(--rah-text-muted)',
fontSize: '13px'
}}>
Node not found
@@ -3056,8 +3056,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
position: 'fixed',
top: contextMenu.y,
left: contextMenu.x,
background: '#1a1a1a',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '6px',
padding: '4px',
zIndex: 9999,
@@ -3081,18 +3081,18 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
background: 'transparent',
border: 'none',
borderRadius: '4px',
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '12px',
cursor: 'pointer',
textAlign: 'left',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#2a2a2a';
e.currentTarget.style.color = '#fff';
e.currentTarget.style.background = 'var(--rah-border-strong)';
e.currentTarget.style.color = 'var(--rah-text-active)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
e.currentTarget.style.color = '#ccc';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
}}
>
<span style={{ fontSize: '14px' }}>↗</span>
@@ -3113,18 +3113,18 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
background: 'transparent',
border: 'none',
borderRadius: '4px',
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '12px',
cursor: 'pointer',
textAlign: 'left',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#2a2a2a';
e.currentTarget.style.color = '#fff';
e.currentTarget.style.background = 'var(--rah-border-strong)';
e.currentTarget.style.color = 'var(--rah-text-active)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
e.currentTarget.style.color = '#ccc';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
}}
>
<span style={{ fontSize: '14px' }}>×</span>
src/components/focus/source/SourceReader.tsx
+5 -5
View File
@@ -100,7 +100,7 @@ export default function SourceReader({
flex: 1,
display: 'flex',
flexDirection: 'column',
background: '#0f0f0f',
background: 'var(--rah-bg-surface)',
borderRadius: '4px',
overflow: 'hidden',
}}>
@@ -111,11 +111,11 @@ export default function SourceReader({
alignItems: 'center',
justifyContent: 'space-between',
padding: '8px 16px',
borderBottom: '1px solid #1a1a1a',
borderBottom: '1px solid var(--rah-border)',
}}>
<span style={{
fontSize: '10px',
color: '#555',
color: 'var(--rah-text-muted)',
textTransform: 'uppercase',
letterSpacing: '0.05em',
}}>
@@ -125,12 +125,12 @@ export default function SourceReader({
onClick={() => setShowSearch(!showSearch)}
title="Search content (⌘F)"
style={{
background: showSearch ? '#262626' : 'transparent',
background: showSearch ? 'var(--rah-border-strong)' : 'transparent',
border: 'none',
borderRadius: '4px',
padding: '4px 8px',
cursor: 'pointer',
color: showSearch ? '#fafafa' : '#555',
color: showSearch ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
display: 'flex',
alignItems: 'center',
gap: '4px',
src/components/layout/SplitHandle.tsx
+2 -2
View File
@@ -99,7 +99,7 @@ export default function SplitHandle({
style={{
width: '12px',
cursor: 'col-resize',
background: isHovered ? '#1a1a1a' : 'transparent',
background: isHovered ? 'var(--rah-bg-active)' : 'transparent',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -126,7 +126,7 @@ export default function SplitHandle({
style={{
width: '8px',
cursor: 'col-resize',
background: isDragging ? '#22c55e' : (isHovered ? '#1a1a1a' : 'transparent'),
background: isDragging ? '#22c55e' : (isHovered ? 'var(--rah-bg-active)' : 'transparent'),
transition: isDragging ? 'none' : 'background 0.15s ease',
flexShrink: 0,
}}
src/components/layout/ThreePanelLayout.tsx
+4 -4
View File
@@ -1050,12 +1050,12 @@ export default function ThreePanelLayout() {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
color: '#666',
color: 'var(--rah-text-muted)',
gap: '12px',
}}
>
<div style={{ fontSize: '14px' }}>No panes open</div>
<div style={{ fontSize: '12px', color: '#555' }}>
<div style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>
Select a view from the toolbar to get started
</div>
</div>
@@ -1081,7 +1081,7 @@ export default function ThreePanelLayout() {
margin: '0 auto',
width: '100%',
} : {}),
background: '#111111',
background: 'var(--rah-bg-surface)',
borderRadius: '10px',
outline: dragOverSlot === 'A' ? '2px dashed #22c55e' : 'none',
outlineOffset: '-4px',
@@ -1114,7 +1114,7 @@ export default function ThreePanelLayout() {
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
background: '#111111',
background: 'var(--rah-bg-surface)',
borderRadius: '10px',
outline: dragOverSlot === 'B' ? '2px dashed #22c55e' : 'none',
outlineOffset: '-4px',
src/components/nodes/FolderViewOverlay.tsx
+51 -51
View File
@@ -581,7 +581,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
const renderDimensionGrid = () => {
if (dimensionsLoading) {
return (
<div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
Loading dimensions...
</div>
);
@@ -597,7 +597,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
if (sortedDimensions.length === 0) {
return (
<div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
No dimensions yet. Create one to get started.
</div>
);
@@ -693,7 +693,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
{dimension.description && (
<div style={{
fontSize: '11px',
color: '#555',
color: 'var(var(--rah-text-muted))',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -736,7 +736,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
color: '#666',
color: 'var(var(--rah-text-muted))',
transition: 'color 0.1s ease'
}}
onMouseEnter={(e) => { e.currentTarget.style.color = '#999'; }}
@@ -784,7 +784,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
alignItems: 'center',
justifyContent: 'center',
cursor: deletingDimension === dimension.dimension ? 'not-allowed' : 'pointer',
color: '#666',
color: 'var(var(--rah-text-muted))',
opacity: deletingDimension === dimension.dimension ? 0.3 : 1,
transition: 'color 0.1s ease'
}}
@@ -930,7 +930,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
onClose();
}}
style={{
background: '#0a0a0a',
background: 'var(var(--rah-bg-base))',
border: '1px solid #161616',
borderRadius: '12px',
padding: '14px',
@@ -1053,10 +1053,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
</div>
))}
{nodesLoading && (
<div style={{ padding: '20px', color: '#888' }}>Loading...</div>
<div style={{ padding: '20px', color: 'var(var(--rah-text-muted))' }}>Loading...</div>
)}
{!nodesLoading && nodes.length === 0 && (
<div style={{ gridColumn: '1 / -1', textAlign: 'center', color: '#888', paddingTop: '40px' }}>
<div style={{ gridColumn: '1 / -1', textAlign: 'center', color: 'var(var(--rah-text-muted))', paddingTop: '40px' }}>
No nodes in this dimension yet.
</div>
)}
@@ -1085,7 +1085,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
gap: '12px',
padding: '12px 16px',
marginBottom: '4px',
background: '#0a0a0a',
background: 'var(var(--rah-bg-base))',
border: '1px solid #161616',
borderRadius: '10px',
cursor: 'pointer',
@@ -1107,7 +1107,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#1a1a1a',
background: 'var(var(--rah-bg-active))',
borderRadius: '8px',
flexShrink: 0
}}>
@@ -1176,7 +1176,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
<span style={{
padding: '2px 6px',
fontSize: '10px',
color: '#666'
color: 'var(var(--rah-text-muted))'
}}>
+{node.dimensions.length - 3}
</span>
@@ -1206,10 +1206,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
</button>
))}
{nodesLoading && (
<div style={{ padding: '20px', color: '#888' }}>Loading...</div>
<div style={{ padding: '20px', color: 'var(var(--rah-text-muted))' }}>Loading...</div>
)}
{!nodesLoading && nodes.length === 0 && (
<div style={{ textAlign: 'center', color: '#888', paddingTop: '40px' }}>
<div style={{ textAlign: 'center', color: 'var(var(--rah-text-muted))', paddingTop: '40px' }}>
No nodes in this dimension yet.
</div>
)}
@@ -1224,8 +1224,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
alignItems: 'center',
gap: '8px',
padding: '8px 24px',
borderBottom: '1px solid #1a1a1a',
background: '#0a0a0a',
borderBottom: '1px solid var(--rah-border)',
background: 'var(var(--rah-bg-base))',
flexShrink: 0
}}>
<span style={{ fontSize: '11px', color: '#64748b', fontWeight: 500 }}>
@@ -1233,7 +1233,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
</span>
{kanbanColumns.length === 0 && (
<span style={{ fontSize: '11px', color: '#555', fontStyle: 'italic' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))', fontStyle: 'italic' }}>
Add dimensions to create columns
</span>
)}
@@ -1246,11 +1246,11 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
alignItems: 'center',
gap: '4px',
padding: '4px 8px',
background: '#1a1a1a',
background: 'var(var(--rah-bg-active))',
border: '1px solid #333',
borderRadius: '6px',
fontSize: '11px',
color: '#888',
color: 'var(var(--rah-text-muted))',
cursor: 'pointer'
}}
>
@@ -1266,7 +1266,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
marginTop: '4px',
width: '200px',
maxHeight: '300px',
background: '#1a1a1a',
background: 'var(var(--rah-bg-active))',
border: '1px solid #333',
borderRadius: '8px',
overflow: 'hidden',
@@ -1281,10 +1281,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
style={{
width: '100%',
padding: '8px 12px',
background: '#0a0a0a',
background: 'var(var(--rah-bg-base))',
border: 'none',
borderBottom: '1px solid #333',
color: '#fff',
color: 'var(var(--rah-text-active))',
fontSize: '12px',
outline: 'none'
}}
@@ -1295,7 +1295,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
<div style={{
padding: '12px',
fontSize: '12px',
color: '#666',
color: 'var(var(--rah-text-muted))',
textAlign: 'center'
}}>
No dimensions available
@@ -1310,7 +1310,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
padding: '8px 12px',
background: 'transparent',
border: 'none',
color: '#ccc',
color: 'var(var(--rah-text-secondary))',
fontSize: '12px',
textAlign: 'left',
cursor: 'pointer'
@@ -1357,7 +1357,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
display: 'flex',
flexDirection: 'column',
background: isDropTarget ? '#0f2417' : '#0a0a0a',
border: '1px solid #1a1a1a',
border: '1px solid var(--rah-border)',
borderRadius: '12px',
transition: 'all 0.2s'
}}
@@ -1371,7 +1371,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px',
borderBottom: '1px solid #1a1a1a'
borderBottom: '1px solid var(--rah-border)'
}}>
<div style={{
display: 'flex',
@@ -1389,8 +1389,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
</span>
<span style={{
fontSize: '11px',
color: '#666',
background: '#1a1a1a',
color: 'var(var(--rah-text-muted))',
background: 'var(var(--rah-bg-active))',
padding: '2px 6px',
borderRadius: '10px'
}}>
@@ -1404,7 +1404,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
border: 'none',
padding: '4px',
cursor: 'pointer',
color: '#666',
color: 'var(var(--rah-text-muted))',
display: 'flex',
alignItems: 'center'
}}
@@ -1433,7 +1433,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
padding: '10px',
marginBottom: '6px',
background: draggedNodeId === node.id ? '#1a1a1a' : '#111',
border: '1px solid #222',
border: '1px solid var(--rah-border-strong)',
borderRadius: '8px',
cursor: 'pointer',
opacity: draggedNodeId === node.id ? 0.5 : 1,
@@ -1478,10 +1478,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
key={dim}
style={{
padding: '2px 6px',
background: '#1a1a1a',
background: 'var(var(--rah-bg-active))',
borderRadius: '4px',
fontSize: '10px',
color: '#666'
color: 'var(var(--rah-text-muted))'
}}
>
{dim}
@@ -1514,7 +1514,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#666',
color: 'var(var(--rah-text-muted))',
fontSize: '13px'
}}>
Add dimension columns to organize your nodes
@@ -1548,8 +1548,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
style={{
padding: '10px 18px',
borderRadius: '999px',
border: '1px solid #1f1f1f',
background: '#111',
border: '1px solid var(--rah-bg-active)',
background: 'var(var(--rah-bg-surface))',
color: '#f1f5f9',
cursor: nodesLoading ? 'not-allowed' : 'pointer'
}}
@@ -1578,7 +1578,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
style={{
padding: '6px',
borderRadius: '6px',
border: '1px solid #1f1f1f',
border: '1px solid var(--rah-bg-active)',
background: 'transparent',
cursor: 'pointer',
color: '#cbd5f5'
@@ -1611,9 +1611,9 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
justifyContent: 'center',
width: '28px',
height: '28px',
color: '#555',
color: 'var(var(--rah-text-muted))',
background: 'transparent',
border: '1px solid #1f1f1f',
border: '1px solid var(--rah-bg-active)',
borderRadius: '6px',
cursor: 'pointer',
transition: 'all 0.15s'
@@ -1636,10 +1636,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
width: '28px',
height: '28px',
borderRadius: '6px',
border: '1px solid #1f1f1f',
border: '1px solid var(--rah-bg-active)',
background: 'transparent',
cursor: 'pointer',
color: '#555',
color: 'var(var(--rah-text-muted))',
transition: 'all 0.15s'
}}
onMouseEnter={(e) => { e.currentTarget.style.color = '#888'; e.currentTarget.style.background = '#1a1a1a'; }}
@@ -1668,7 +1668,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
}}
>
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
<div style={{ borderBottom: '1px solid #1a1a1a', padding: '12px 16px' }}>
<div style={{ borderBottom: '1px solid var(--rah-border)', padding: '12px 16px' }}>
{toolbar}
</div>
)}
@@ -1716,7 +1716,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
>
<div
style={{
background: '#0a0a0a',
background: 'var(var(--rah-bg-base))',
border: '1px solid #333',
borderRadius: '12px',
width: '480px',
@@ -1730,7 +1730,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
{/* Header */}
<div style={{
padding: '16px 20px',
borderBottom: '1px solid #1a1a1a',
borderBottom: '1px solid var(--rah-border)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
@@ -1755,7 +1755,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
<div style={{
fontSize: '15px',
fontWeight: 600,
color: '#e5e5e5'
color: 'var(var(--rah-text-base))'
}}>
Edit Dimension
</div>
@@ -1779,7 +1779,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
color: '#666'
color: 'var(var(--rah-text-muted))'
}}
>
<X size={16} />
@@ -1800,7 +1800,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
display: 'block',
fontSize: '12px',
fontWeight: 600,
color: '#888',
color: 'var(var(--rah-text-muted))',
marginBottom: '8px',
textTransform: 'uppercase',
letterSpacing: '0.05em'
@@ -1816,10 +1816,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
width: '100%',
minHeight: '80px',
padding: '12px',
background: '#111',
background: 'var(var(--rah-bg-surface))',
border: '1px solid #333',
borderRadius: '8px',
color: '#e5e5e5',
color: 'var(var(--rah-text-base))',
fontSize: '13px',
resize: 'vertical',
outline: 'none'
@@ -1834,7 +1834,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
<div style={{
marginTop: '4px',
fontSize: '11px',
color: '#555',
color: 'var(var(--rah-text-muted))',
textAlign: 'right'
}}>
{editModalDescription.length}/500
@@ -1847,7 +1847,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
display: 'block',
fontSize: '12px',
fontWeight: 600,
color: '#888',
color: 'var(var(--rah-text-muted))',
marginBottom: '8px',
textTransform: 'uppercase',
letterSpacing: '0.05em'
@@ -1864,7 +1864,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
{/* Footer */}
<div style={{
padding: '16px 20px',
borderTop: '1px solid #1a1a1a',
borderTop: '1px solid var(--rah-border)',
display: 'flex',
justifyContent: 'flex-end',
gap: '8px'
@@ -1876,7 +1876,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
background: 'transparent',
border: '1px solid #333',
borderRadius: '6px',
color: '#888',
color: 'var(var(--rah-text-muted))',
fontSize: '13px',
fontWeight: 500,
cursor: 'pointer'
src/components/nodes/SearchModal.tsx
+13 -13
View File
@@ -230,7 +230,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
.search-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
background: var(--rah-backdrop);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
@@ -250,8 +250,8 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
display: flex;
align-items: center;
gap: 16px;
background: #141414;
border: 1px solid #262626;
background: var(--rah-bg-panel);
border: 1px solid var(--rah-border-strong);
border-radius: 16px;
padding: 20px 24px;
box-shadow:
@@ -292,18 +292,18 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
align-items: center;
justify-content: center;
padding: 4px 8px;
background: #262626;
background: var(--rah-border-strong);
border-radius: 6px;
font-size: 11px;
font-family: inherit;
color: #737373;
border: 1px solid #333;
border: 1px solid var(--rah-border-stronger);
}
.search-results {
margin-top: 8px;
background: #141414;
border: 1px solid #262626;
background: var(--rah-bg-panel);
border: 1px solid var(--rah-border-strong);
border-radius: 16px;
overflow: hidden;
box-shadow:
@@ -320,7 +320,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
padding: 16px 20px;
background: transparent;
border: none;
border-bottom: 1px solid #1f1f1f;
border-bottom: 1px solid var(--rah-bg-active);
cursor: pointer;
transition: background 100ms ease;
text-align: left;
@@ -333,7 +333,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
.search-result-item:hover,
.search-result-item.selected {
background: #1a1a1a;
background: var(--rah-bg-active);
}
.result-id {
@@ -343,7 +343,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
font-size: 10px;
font-weight: 600;
font-family: 'SF Mono', 'Fira Code', monospace;
color: #0a0a0a;
color: var(--rah-bg-base);
background: #22c55e;
padding: 4px 8px;
border-radius: 6px;
@@ -359,7 +359,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
.result-title {
flex: 1;
color: #e5e5e5;
color: var(--rah-text-base);
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
@@ -374,8 +374,8 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
.search-empty {
margin-top: 8px;
padding: 32px 24px;
background: #141414;
border: 1px solid #262626;
background: var(--rah-bg-panel);
border: 1px solid var(--rah-border-strong);
border-radius: 16px;
color: #525252;
font-size: 14px;
src/components/panes/GuidesPane.tsx
+30 -30
View File
@@ -108,25 +108,25 @@ export default function GuidesPane({
style={{
background: 'none',
border: 'none',
color: '#888',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
padding: '4px',
borderRadius: '4px',
}}
onMouseEnter={e => { e.currentTarget.style.color = '#ccc'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#888'; }}
onMouseEnter={e => { e.currentTarget.style.color = 'var(--rah-text-secondary)'; }}
onMouseLeave={e => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
>
<ArrowLeft size={16} />
</button>
<span style={{ color: '#ccc', fontSize: '13px', fontWeight: 500, display: 'flex', alignItems: 'center', gap: '4px' }}>
<span style={{ color: 'var(--rah-text-secondary)', fontSize: '13px', fontWeight: 500, display: 'flex', alignItems: 'center', gap: '4px' }}>
{selectedGuide.immutable && <Lock size={12} style={{ color: '#22c55e' }} />}
{selectedGuide.name}
</span>
</div>
) : (
<span style={{ color: '#666', fontSize: '11px' }}>
<span style={{ color: 'var(--rah-text-muted)', fontSize: '11px' }}>
{userGuides.length} of 10 custom guides
</span>
)}
@@ -134,22 +134,22 @@ export default function GuidesPane({
<div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '12px' }}>
{loading ? (
<div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
<div style={{ color: 'var(--rah-text-muted)', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
Loading...
</div>
) : selectedGuide ? (
<div className="guide-content" style={{ color: '#ccc', fontSize: '13px', lineHeight: '1.6' }}>
<div className="guide-content" style={{ color: 'var(--rah-text-secondary)', fontSize: '13px', lineHeight: '1.6' }}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
h1: ({ children }) => (
<h1 style={{ fontSize: '18px', fontWeight: 600, color: '#eee', margin: '0 0 16px 0' }}>{children}</h1>
<h1 style={{ fontSize: '18px', fontWeight: 600, color: 'var(--rah-text-base)', margin: '0 0 16px 0' }}>{children}</h1>
),
h2: ({ children }) => (
<h2 style={{ fontSize: '15px', fontWeight: 600, color: '#ddd', margin: '20px 0 8px 0' }}>{children}</h2>
<h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--rah-text-base)', margin: '20px 0 8px 0' }}>{children}</h2>
),
h3: ({ children }) => (
<h3 style={{ fontSize: '14px', fontWeight: 600, color: '#ccc', margin: '16px 0 6px 0' }}>{children}</h3>
<h3 style={{ fontSize: '14px', fontWeight: 600, color: 'var(--rah-text-secondary)', margin: '16px 0 6px 0' }}>{children}</h3>
),
p: ({ children }) => (
<p style={{ margin: '0 0 12px 0' }}>{children}</p>
@@ -168,7 +168,7 @@ export default function GuidesPane({
if (isInline) {
return (
<code style={{
background: '#1a1a1a',
background: 'var(--rah-bg-active)',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '12px',
@@ -179,13 +179,13 @@ export default function GuidesPane({
return (
<code style={{
display: 'block',
background: '#0d0d0d',
background: 'var(--rah-bg-surface)',
padding: '12px',
borderRadius: '6px',
fontSize: '12px',
overflowX: 'auto',
margin: '0 0 12px 0',
color: '#aaa',
color: 'var(--rah-text-muted)',
whiteSpace: 'pre-wrap',
}} {...props}>{children}</code>
);
@@ -194,17 +194,17 @@ export default function GuidesPane({
<pre style={{ margin: '0 0 12px 0' }}>{children}</pre>
),
strong: ({ children }) => (
<strong style={{ color: '#eee', fontWeight: 600 }}>{children}</strong>
<strong style={{ color: 'var(--rah-text-base)', fontWeight: 600 }}>{children}</strong>
),
hr: () => (
<hr style={{ border: 'none', borderTop: '1px solid #2a2a2a', margin: '16px 0' }} />
<hr style={{ border: 'none', borderTop: '1px solid var(--rah-border-strong)', margin: '16px 0' }} />
),
blockquote: ({ children }) => (
<blockquote style={{
borderLeft: '3px solid #333',
borderLeft: '1px solid var(--rah-border-stronger)',
paddingLeft: '12px',
margin: '0 0 12px 0',
color: '#999',
color: 'var(--rah-text-muted)',
}}>{children}</blockquote>
),
}}
@@ -215,13 +215,13 @@ export default function GuidesPane({
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{guides.length === 0 ? (
<div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
<div style={{ color: 'var(--rah-text-muted)', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
No guides found
</div>
) : (
<>
{systemGuides.length > 0 && (
<div style={{ color: '#555', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '4px 0' }}>
<div style={{ color: 'var(--rah-text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '4px 0' }}>
System Guides
</div>
)}
@@ -235,7 +235,7 @@ export default function GuidesPane({
/>
))}
{userGuides.length > 0 && (
<div style={{ color: '#555', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '8px 0 4px 0' }}>
<div style={{ color: 'var(--rah-text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '8px 0 4px 0' }}>
Custom Guides
</div>
)}
@@ -276,30 +276,30 @@ function GuideCard({
alignItems: 'center',
gap: '8px',
padding: '12px',
background: '#161616',
border: '1px solid #222',
background: 'var(--rah-bg-elevated)',
border: '1px solid var(--rah-bg-active)',
borderRadius: '8px',
cursor: 'pointer',
textAlign: 'left',
transition: 'all 0.15s ease',
}}
onMouseEnter={e => {
e.currentTarget.style.background = '#1a1a1a';
e.currentTarget.style.borderColor = '#333';
e.currentTarget.style.background = 'var(--rah-bg-active)';
e.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
}}
onMouseLeave={e => {
e.currentTarget.style.background = '#161616';
e.currentTarget.style.borderColor = '#222';
e.currentTarget.style.background = 'var(--rah-bg-elevated)';
e.currentTarget.style.borderColor = 'var(--rah-bg-active)';
}}
>
{guide.immutable && (
<Lock size={12} style={{ color: '#22c55e', flexShrink: 0 }} />
)}
<div style={{ flex: 1, minWidth: 0 }}>
<span style={{ color: '#ddd', fontSize: '13px', fontWeight: 500 }}>
<span style={{ color: 'var(--rah-text-base)', fontSize: '13px', fontWeight: 500 }}>
{guide.name}
</span>
<span style={{ color: '#777', fontSize: '12px', lineHeight: '1.4', display: 'block', marginTop: '2px' }}>
<span style={{ color: 'var(--rah-text-muted)', fontSize: '12px', lineHeight: '1.4', display: 'block', marginTop: '2px' }}>
{guide.description}
</span>
</div>
@@ -310,7 +310,7 @@ function GuideCard({
style={{
background: 'none',
border: 'none',
color: '#555',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
padding: '4px',
borderRadius: '4px',
@@ -320,7 +320,7 @@ function GuideCard({
opacity: deleting === guide.name ? 0.3 : 1,
}}
onMouseEnter={e => { e.currentTarget.style.color = '#ef4444'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#555'; }}
onMouseLeave={e => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
>
<Trash2 size={14} />
</button>
src/components/panes/MapPane.tsx
+34 -34
View File
@@ -569,9 +569,9 @@ function MapPaneInner({
padding: '6px 10px',
background: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.12)' : 'transparent',
border: '1px solid',
borderColor: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.35)' : '#2a2a2a',
borderColor: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.35)' : 'var(--rah-border-strong)',
borderRadius: '6px',
color: viewMode === 'dimension' ? '#a7f3b8' : '#888',
color: viewMode === 'dimension' ? '#a7f3b8' : 'var(--rah-text-muted)',
fontSize: '12px',
cursor: 'pointer',
}}
@@ -584,9 +584,9 @@ function MapPaneInner({
padding: '6px 10px',
background: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.12)' : 'transparent',
border: '1px solid',
borderColor: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.35)' : '#2a2a2a',
borderColor: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.35)' : 'var(--rah-border-strong)',
borderRadius: '6px',
color: viewMode === 'hub' ? '#a7f3b8' : '#888',
color: viewMode === 'hub' ? '#a7f3b8' : 'var(--rah-text-muted)',
fontSize: '12px',
cursor: 'pointer',
}}
@@ -606,9 +606,9 @@ function MapPaneInner({
padding: '6px 10px',
background: selectedDimension ? 'rgba(34, 197, 94, 0.1)' : 'transparent',
border: '1px solid',
borderColor: selectedDimension ? 'rgba(34, 197, 94, 0.3)' : '#2a2a2a',
borderColor: selectedDimension ? 'rgba(34, 197, 94, 0.3)' : 'var(--rah-border-strong)',
borderRadius: '6px',
color: selectedDimension ? '#22c55e' : '#888',
color: selectedDimension ? '#22c55e' : 'var(--rah-text-muted)',
fontSize: '12px',
cursor: 'pointer',
transition: 'all 0.15s ease',
@@ -627,8 +627,8 @@ function MapPaneInner({
top: '100%',
left: 0,
marginTop: '4px',
background: '#1a1a1a',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '8px',
padding: '4px',
minWidth: '180px',
@@ -641,9 +641,9 @@ function MapPaneInner({
onClick={() => { setSelectedDimension(null); setDimensionDropdownOpen(false); }}
style={{
display: 'flex', alignItems: 'center', width: '100%', padding: '8px 12px',
background: !selectedDimension ? '#2a2a2a' : 'transparent',
background: !selectedDimension ? 'var(--rah-bg-active)' : 'transparent',
border: 'none', borderRadius: '4px',
color: !selectedDimension ? '#fff' : '#888',
color: !selectedDimension ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
fontSize: '12px', cursor: 'pointer', textAlign: 'left',
}}
>
@@ -657,21 +657,21 @@ function MapPaneInner({
onClick={() => { setSelectedDimension(dim.dimension); setDimensionDropdownOpen(false); }}
style={{
display: 'flex', alignItems: 'center', width: '100%', padding: '8px 12px',
background: selectedDimension === dim.dimension ? '#2a2a2a' : 'transparent',
background: selectedDimension === dim.dimension ? 'var(--rah-bg-active)' : 'transparent',
border: 'none', borderRadius: '4px',
color: selectedDimension === dim.dimension ? '#fff' : '#888',
color: selectedDimension === dim.dimension ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
fontSize: '12px', cursor: 'pointer', textAlign: 'left',
}}
onMouseEnter={e => {
if (selectedDimension !== dim.dimension) {
e.currentTarget.style.background = '#222';
e.currentTarget.style.color = '#ccc';
e.currentTarget.style.background = 'var(--rah-bg-active)';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
}
}}
onMouseLeave={e => {
if (selectedDimension !== dim.dimension) {
e.currentTarget.style.background = 'transparent';
e.currentTarget.style.color = '#888';
e.currentTarget.style.color = 'var(--rah-text-muted)';
}
}}
>
@@ -685,9 +685,9 @@ function MapPaneInner({
</PaneHeader>
{/* Map content */}
<div style={{ position: 'relative', flex: 1, background: '#080808' }}>
<div style={{ position: 'relative', flex: 1, background: 'var(--rah-bg-base)' }}>
{loading ? (
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666' }}>
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rah-text-muted)' }}>
Loading map...
</div>
) : error ? (
@@ -695,7 +695,7 @@ function MapPaneInner({
{error}
</div>
) : rfNodes.length === 0 ? (
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666' }}>
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rah-text-muted)' }}>
No nodes to display
</div>
) : (
@@ -717,9 +717,9 @@ function MapPaneInner({
proOptions={{ hideAttribution: true }}
colorMode="dark"
>
<Background color="#1a1a1a" gap={40} size={1} />
<Background color="var(--rah-border)" gap={40} size={1} />
<MiniMap
style={{ background: '#0a0a0a', border: '1px solid #1f1f1f', borderRadius: 6 }}
style={{ background: 'var(--rah-bg-base)', border: '1px solid var(--rah-bg-active)', borderRadius: 6 }}
maskColor="rgba(0, 0, 0, 0.7)"
nodeColor={(node) => {
const data = node.data as RahNodeData | undefined;
@@ -737,7 +737,7 @@ function MapPaneInner({
position: 'absolute',
transform: `translate(${label.x}px, ${label.y}px)`,
pointerEvents: 'none',
color: '#7a7a7a',
color: 'var(--rah-text-muted)',
fontSize: '11px',
letterSpacing: '0.05em',
textTransform: 'uppercase',
@@ -761,10 +761,10 @@ function MapPaneInner({
style={{
padding: '4px 8px',
fontSize: 10,
background: '#1a1a1a',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-strong)',
borderRadius: 4,
color: '#888',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
}}
title="Fit all nodes"
@@ -777,10 +777,10 @@ function MapPaneInner({
style={{
padding: '4px 8px',
fontSize: 10,
background: '#1a1a1a',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-strong)',
borderRadius: 4,
color: '#888',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
}}
title="Fit to hub nodes"
@@ -794,17 +794,17 @@ function MapPaneInner({
{selectedDbNode && (
<div style={infoPanel}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
<div style={{ fontWeight: 600, fontSize: 14, color: '#e5e7eb' }}>
<div style={{ fontWeight: 600, fontSize: 14, color: 'var(--rah-text-base)' }}>
{selectedDbNode.title || 'Untitled'}
</div>
<button
onClick={() => setSelectedNodeId(null)}
style={{ background: 'none', border: 'none', color: '#666', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}
style={{ background: 'none', border: 'none', color: 'var(--rah-text-muted)', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}
>
&times;
</button>
</div>
<div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
<div style={{ fontSize: 12, color: 'var(--rah-text-muted)', marginBottom: 8 }}>
{connectedNodeIds.size} connected nodes
</div>
<div style={{ fontSize: 11, color: '#22c55e', marginBottom: 8 }}>
@@ -817,8 +817,8 @@ function MapPaneInner({
key={dim}
style={{
padding: '2px 8px', borderRadius: 999, fontSize: 11,
background: lockedDimensionNames.has(dim) ? '#132018' : '#1a1a1a',
color: lockedDimensionNames.has(dim) ? '#86efac' : '#888',
background: lockedDimensionNames.has(dim) ? '#132018' : 'var(--rah-bg-active)',
color: lockedDimensionNames.has(dim) ? '#86efac' : 'var(--rah-text-muted)',
}}
>
{dim}
@@ -869,8 +869,8 @@ const infoPanel: CSSProperties = {
bottom: 16,
left: 16,
width: 260,
background: '#0a0a0a',
border: '1px solid #1f1f1f',
background: 'var(--rah-bg-base)',
border: '1px solid var(--rah-bg-active)',
borderRadius: 8,
padding: 14,
zIndex: 10,
src/components/panes/NodePane.tsx
+16 -16
View File
@@ -95,7 +95,7 @@ export default function NodePane({
<PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes}>
{/* Tabs rendered inline */}
{openTabs.length === 0 ? (
<span style={{ fontSize: '12px', color: '#666' }}>No tabs open</span>
<span style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>No tabs open</span>
) : (
openTabs.map((tabId) => {
const title = nodeTitles[tabId] || 'Loading...';
@@ -118,7 +118,7 @@ export default function NodePane({
alignItems: 'center',
gap: '4px',
padding: '4px 8px',
background: isActiveTab ? '#1f1f1f' : 'transparent',
background: isActiveTab ? 'var(--rah-bg-active)' : 'transparent',
borderRadius: '4px',
cursor: 'grab',
flexShrink: 0,
@@ -128,7 +128,7 @@ export default function NodePane({
onClick={() => onTabSelect(tabId)}
style={{
fontSize: '11px',
color: isActiveTab ? '#fff' : '#888',
color: isActiveTab ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
cursor: 'pointer',
@@ -145,15 +145,15 @@ export default function NodePane({
}}
style={{
fontSize: '12px',
color: '#666',
color: 'var(--rah-text-muted)',
background: 'transparent',
border: 'none',
cursor: 'pointer',
padding: '0 2px',
lineHeight: 1,
}}
onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--rah-text-active)'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
>
×
</button>
@@ -186,8 +186,8 @@ export default function NodePane({
position: 'fixed',
top: contextMenu.y,
left: contextMenu.x,
background: '#1a1a1a',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '6px',
padding: '4px',
zIndex: 9999,
@@ -211,18 +211,18 @@ export default function NodePane({
background: 'transparent',
border: 'none',
borderRadius: '4px',
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '12px',
cursor: 'pointer',
textAlign: 'left',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#2a2a2a';
e.currentTarget.style.color = '#fff';
e.currentTarget.style.background = 'var(--rah-bg-active)';
e.currentTarget.style.color = 'var(--rah-text-active)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
e.currentTarget.style.color = '#ccc';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
}}
>
<span style={{ fontSize: '14px' }}>↗</span>
@@ -243,18 +243,18 @@ export default function NodePane({
background: 'transparent',
border: 'none',
borderRadius: '4px',
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '12px',
cursor: 'pointer',
textAlign: 'left',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#2a2a2a';
e.currentTarget.style.color = '#fff';
e.currentTarget.style.background = 'var(--rah-bg-active)';
e.currentTarget.style.color = 'var(--rah-text-active)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
e.currentTarget.style.color = '#ccc';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
}}
>
<span style={{ fontSize: '14px' }}>×</span>
src/components/panes/PaneHeader.tsx
+7 -7
View File
@@ -91,7 +91,7 @@ export default function PaneHeader({
/>
) : null}
{!tabBar && !children && !toolbarHostRef ? (
<div style={{ color: '#666', fontSize: '12px' }} />
<div style={{ color: 'var(--rah-text-muted)', fontSize: '12px' }} />
) : null}
</div>
@@ -102,9 +102,9 @@ export default function PaneHeader({
width: '32px',
height: '32px',
borderRadius: '8px',
border: '1px solid #3a3a3a',
background: '#161616',
color: '#c2c2c2',
border: '1px solid var(--rah-border-stronger)',
background: 'var(--rah-bg-elevated)',
color: 'var(--rah-text-secondary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -119,9 +119,9 @@ export default function PaneHeader({
e.currentTarget.style.color = '#fca5a5';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#161616';
e.currentTarget.style.borderColor = '#3a3a3a';
e.currentTarget.style.color = '#c2c2c2';
e.currentTarget.style.background = 'var(--rah-bg-elevated)';
e.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
e.currentTarget.style.color = 'var(--rah-text-secondary)';
}}
>
<X size={15} strokeWidth={2.25} />
src/components/panes/map/EdgeExplanationModal.tsx
+12 -12
View File
@@ -94,7 +94,7 @@ export default function EdgeExplanationModal({
.edge-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
background: var(--rah-backdrop);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
@@ -110,8 +110,8 @@ export default function EdgeExplanationModal({
}
.edge-modal-card {
background: #141414;
border: 1px solid #262626;
background: var(--rah-bg-panel);
border: 1px solid var(--rah-border-strong);
border-radius: 16px;
padding: 24px;
box-shadow:
@@ -144,14 +144,14 @@ export default function EdgeExplanationModal({
}
.edge-modal-input-wrapper {
border: 1px solid #262626;
border: 1px solid var(--rah-border-strong);
border-radius: 12px;
background: #0a0a0a;
background: var(--rah-bg-base);
transition: border-color 0.15s ease;
}
.edge-modal-input-wrapper:focus-within {
border-color: #333;
border-color: var(--rah-border-stronger);
}
.edge-modal-textarea {
@@ -188,12 +188,12 @@ export default function EdgeExplanationModal({
align-items: center;
justify-content: center;
padding: 2px 6px;
background: #262626;
background: var(--rah-border-strong);
border-radius: 4px;
font-size: 10px;
font-family: inherit;
color: #737373;
border: 1px solid #333;
border: 1px solid var(--rah-border-stronger);
}
.edge-modal-actions {
@@ -213,17 +213,17 @@ export default function EdgeExplanationModal({
.edge-modal-btn--cancel {
background: transparent;
border: 1px solid #262626;
border: 1px solid var(--rah-border-strong);
color: #737373;
}
.edge-modal-btn--cancel:hover {
border-color: #333;
color: #a3a3a3;
border-color: var(--rah-border-stronger);
color: var(--rah-text-soft);
}
.edge-modal-btn--submit {
background: #262626;
background: var(--rah-border-strong);
border: 1px solid transparent;
color: #525252;
cursor: default;
src/components/panes/map/RahEdge.tsx
+3 -3
View File
@@ -56,12 +56,12 @@ function RahEdgeComponent({
>
<div
style={{
background: '#1a1a1a',
border: '1px solid #333',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: 4,
padding: '2px 8px',
fontSize: 10,
color: '#ccc',
color: 'var(--rah-text-secondary)',
textAlign: 'center',
whiteSpace: 'nowrap',
overflow: 'hidden',
src/components/settings/DatabaseViewer.tsx
+40 -40
View File
@@ -196,7 +196,7 @@ export default function DatabaseViewer() {
if (loading) {
return (
<div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
<div style={{ padding: '40px', textAlign: 'center', color: 'var(--rah-text-muted)' }}>
Loading database...
</div>
);
@@ -212,7 +212,7 @@ export default function DatabaseViewer() {
if (nodes.length === 0) {
return (
<div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
<div style={{ padding: '40px', textAlign: 'center', color: 'var(--rah-text-muted)' }}>
No nodes found
</div>
);
@@ -223,30 +223,30 @@ export default function DatabaseViewer() {
<div
style={{
padding: '16px 24px',
borderBottom: '1px solid #2a2a2a',
borderBottom: '1px solid var(--rah-border-strong)',
display: 'flex',
flexDirection: 'column',
gap: '12px',
}}
>
<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
<label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#888', gap: '4px' }}>
<label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: 'var(--rah-text-muted)', gap: '4px' }}>
Search
<input
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
placeholder="title or content"
style={{
background: '#0f0f0f',
border: '1px solid #2a2a2a',
color: '#ddd',
background: 'var(--rah-bg-surface)',
border: '1px solid var(--rah-border-strong)',
color: 'var(--rah-text-base)',
padding: '6px 10px',
borderRadius: '4px',
minWidth: '220px',
}}
/>
</label>
<label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#888', gap: '4px' }}>
<label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: 'var(--rah-text-muted)', gap: '4px' }}>
Dimension
<div style={{ display: 'flex', gap: '8px' }}>
<input
@@ -255,9 +255,9 @@ export default function DatabaseViewer() {
onKeyDown={handleDimensionKeyDown}
placeholder="e.g. research"
style={{
background: '#0f0f0f',
border: '1px solid #2a2a2a',
color: '#ddd',
background: 'var(var(--rah-bg-surface))',
border: '1px solid var(--rah-border-strong)',
color: 'var(var(--rah-text-base))',
padding: '6px 10px',
borderRadius: '4px',
minWidth: '180px',
@@ -279,15 +279,15 @@ export default function DatabaseViewer() {
</button>
</div>
</label>
<label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#888', gap: '4px' }}>
<label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: 'var(--rah-text-muted)', gap: '4px' }}>
Sort by
<select
value={sortBy}
onChange={handleSortChange}
style={{
background: '#0f0f0f',
border: '1px solid #2a2a2a',
color: '#ddd',
background: 'var(--rah-bg-surface)',
border: '1px solid var(--rah-border-strong)',
color: 'var(--rah-text-base)',
padding: '6px 10px',
borderRadius: '4px',
}}
@@ -337,7 +337,7 @@ export default function DatabaseViewer() {
)}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ fontSize: '12px', color: '#666' }}>{filterStatus}</div>
<div style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>{filterStatus}</div>
<div style={{ display: 'flex', gap: '8px' }}>
<button
onClick={handleApplyFilters}
@@ -357,10 +357,10 @@ export default function DatabaseViewer() {
onClick={handleClearFilters}
style={{
padding: '8px 16px',
background: '#1a1a1a',
border: '1px solid #333',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '4px',
color: '#ccc',
color: 'var(--rah-text-secondary)',
cursor: 'pointer',
fontSize: '12px',
}}
@@ -372,10 +372,10 @@ export default function DatabaseViewer() {
disabled={isFirstPage || filtersActive}
style={{
padding: '8px 12px',
background: isFirstPage || filtersActive ? '#1a1a1a' : '#2a2a2a',
border: '1px solid #333',
background: isFirstPage || filtersActive ? 'var(--rah-bg-active)' : 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '4px',
color: isFirstPage || filtersActive ? '#555' : '#ccc',
color: isFirstPage || filtersActive ? 'var(--rah-text-muted)' : 'var(--rah-text-secondary)',
cursor: isFirstPage || filtersActive ? 'not-allowed' : 'pointer',
fontSize: '12px',
}}
@@ -387,10 +387,10 @@ export default function DatabaseViewer() {
disabled={isLastPage || filtersActive}
style={{
padding: '8px 12px',
background: isLastPage || filtersActive ? '#1a1a1a' : '#2a2a2a',
border: '1px solid #333',
background: isLastPage || filtersActive ? 'var(--rah-bg-active)' : 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '4px',
color: isLastPage || filtersActive ? '#555' : '#ccc',
color: isLastPage || filtersActive ? 'var(--rah-text-muted)' : 'var(--rah-text-secondary)',
cursor: isLastPage || filtersActive ? 'not-allowed' : 'pointer',
fontSize: '12px',
}}
@@ -403,7 +403,7 @@ export default function DatabaseViewer() {
<div style={{ flex: 1, overflow: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead style={{ position: 'sticky', top: 0, background: '#1a1a1a', zIndex: 1 }}>
<thead style={{ position: 'sticky', top: 0, background: 'var(--rah-bg-active)', zIndex: 1 }}>
<tr>
{['Node', 'Categories', 'Edges', 'Highlights', 'Updated', 'Created'].map((column) => (
<th
@@ -412,11 +412,11 @@ export default function DatabaseViewer() {
padding: '12px 16px',
textAlign: 'left',
fontSize: '11px',
color: '#888',
color: 'var(--rah-text-muted)',
textTransform: 'uppercase',
letterSpacing: '0.5px',
fontWeight: 'normal',
borderBottom: '1px solid #2a2a2a',
borderBottom: '1px solid var(--rah-border-strong)',
}}
>
{column}
@@ -431,13 +431,13 @@ export default function DatabaseViewer() {
<tr
key={node.id}
style={{
background: index % 2 === 0 ? '#080808' : '#0d0d0d',
borderBottom: '1px solid #111',
background: index % 2 === 0 ? 'var(--rah-bg-base)' : 'var(--rah-bg-surface)',
borderBottom: '1px solid var(--rah-bg-surface)',
}}
>
<td style={{ padding: '12px 16px', verticalAlign: 'top', width: '28%' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<div style={{ fontWeight: 600, color: '#f5f5f5', display: 'flex', alignItems: 'center', gap: '8px' }}>
<div style={{ fontWeight: 600, color: 'var(--rah-text-base)', display: 'flex', alignItems: 'center', gap: '8px' }}>
{node.title || 'Untitled node'}
{node.link && (
<button
@@ -462,7 +462,7 @@ export default function DatabaseViewer() {
</button>
)}
</div>
<span style={{ fontSize: '11px', color: '#666', fontFamily: 'JetBrains Mono, monospace' }}>ID: {node.id}</span>
<span style={{ fontSize: '11px', color: 'var(--rah-text-muted)', fontFamily: 'JetBrains Mono, monospace' }}>ID: {node.id}</span>
</div>
</td>
<td style={{ padding: '12px 16px', verticalAlign: 'top', width: '24%' }}>
@@ -488,16 +488,16 @@ export default function DatabaseViewer() {
</span>
))
) : (
<span style={{ fontSize: '11px', color: '#555' }}>No categories</span>
<span style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>No categories</span>
)}
{node.dimensions && node.dimensions.length > 3 && (
<span style={{ fontSize: '11px', color: '#666' }}>+{node.dimensions.length - 3} more</span>
<span style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>+{node.dimensions.length - 3} more</span>
)}
</div>
</td>
<td style={{ padding: '12px 16px', verticalAlign: 'top', width: '10%' }}>
<div style={{ fontWeight: 600, color: '#e2e8f0' }}>{node.edge_count ?? 0}</div>
<div style={{ fontSize: '11px', color: '#666' }}>connections</div>
<div style={{ fontWeight: 600, color: 'var(--rah-text-base)' }}>{node.edge_count ?? 0}</div>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>connections</div>
</td>
<td style={{ padding: '12px 16px', verticalAlign: 'top', width: '14%' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
@@ -514,12 +514,12 @@ export default function DatabaseViewer() {
</div>
</td>
<td style={{ padding: '12px 16px', verticalAlign: 'top', width: '12%' }}>
<div style={{ fontSize: '12px', color: '#e2e8f0' }}>{formatTimestamp(node.updated_at)}</div>
<div style={{ fontSize: '11px', color: '#666' }}>{formatRelative(node.updated_at)}</div>
<div style={{ fontSize: '12px', color: 'var(--rah-text-base)' }}>{formatTimestamp(node.updated_at)}</div>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>{formatRelative(node.updated_at)}</div>
</td>
<td style={{ padding: '12px 16px', verticalAlign: 'top', width: '12%' }}>
<div style={{ fontSize: '12px', color: '#cbd5f5' }}>{formatTimestamp(node.created_at)}</div>
<div style={{ fontSize: '11px', color: '#666' }}>{formatRelative(node.created_at)}</div>
<div style={{ fontSize: '12px', color: 'var(--rah-text-base)' }}>{formatTimestamp(node.created_at)}</div>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>{formatRelative(node.created_at)}</div>
</td>
</tr>
);
src/components/settings/GuidesViewer.tsx
+22 -22
View File
@@ -110,7 +110,7 @@ export default function GuidesViewer() {
if (loading) {
return (
<div style={{ padding: '24px', color: '#666' }}>Loading skills...</div>
<div style={{ padding: '24px', color: 'var(--rah-text-muted)' }}>Loading skills...</div>
);
}
@@ -127,10 +127,10 @@ export default function GuidesViewer() {
style={{
flex: 1,
padding: '8px 12px',
background: '#1a1a1a',
border: '1px solid #333',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '6px',
color: '#fff',
color: 'var(--rah-text-active)',
fontSize: '14px',
}}
/>
@@ -157,9 +157,9 @@ export default function GuidesViewer() {
style={{
padding: '8px 16px',
background: 'transparent',
border: '1px solid #333',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '6px',
color: '#888',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
@@ -182,10 +182,10 @@ export default function GuidesViewer() {
placeholder="Brief description"
style={{
padding: '8px 12px',
background: '#1a1a1a',
border: '1px solid #333',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '6px',
color: '#fff',
color: 'var(--rah-text-active)',
fontSize: '13px',
marginBottom: '16px',
}}
@@ -198,10 +198,10 @@ export default function GuidesViewer() {
style={{
flex: 1,
padding: '12px',
background: '#1a1a1a',
border: '1px solid #333',
background: 'var(--rah-bg-active)',
border: '1px solid var(--rah-border-stronger)',
borderRadius: '6px',
color: '#ccc',
color: 'var(--rah-text-secondary)',
fontSize: '13px',
fontFamily: 'monospace',
resize: 'none',
@@ -209,7 +209,7 @@ export default function GuidesViewer() {
}}
/>
<p style={{ color: '#666', fontSize: '12px', marginTop: '12px' }}>
<p style={{ color: 'var(--rah-text-muted)', fontSize: '12px', marginTop: '12px' }}>
Skills are markdown files that agents can read for reusable procedural instructions.
</p>
</div>
@@ -219,7 +219,7 @@ export default function GuidesViewer() {
return (
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '24px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
<p style={{ color: '#888', fontSize: '13px', margin: 0 }}>
<p style={{ color: 'var(--rah-text-muted)', fontSize: '13px', margin: 0 }}>
Skills provide reusable context and procedural instructions for agents.
</p>
<button
@@ -244,10 +244,10 @@ export default function GuidesViewer() {
<div style={{ flex: 1, overflow: 'auto' }}>
{guides.length === 0 ? (
<div style={{ color: '#555', textAlign: 'center', paddingTop: '48px' }}>
<div style={{ color: 'var(--rah-text-muted)', textAlign: 'center', paddingTop: '48px' }}>
<FileText size={48} style={{ marginBottom: '12px', opacity: 0.5 }} />
<p style={{ fontSize: '14px' }}>No skills yet</p>
<p style={{ fontSize: '12px', color: '#444' }}>Create skills to guide how agents operate in your knowledge base</p>
<p style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>Create skills to guide how agents operate in your knowledge base</p>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
@@ -259,15 +259,15 @@ export default function GuidesViewer() {
alignItems: 'center',
gap: '12px',
padding: '12px 16px',
background: '#161616',
border: '1px solid #222',
background: 'var(--rah-bg-elevated)',
border: '1px solid var(--rah-bg-active)',
borderRadius: '8px',
}}
>
<FileText size={18} style={{ color: '#22c55e', flexShrink: 0 }} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ color: '#ddd', fontSize: '14px', fontWeight: 500 }}>{guide.name}</div>
<div style={{ color: '#666', fontSize: '12px', marginTop: '2px' }}>{guide.description}</div>
<div style={{ color: 'var(--rah-text-base)', fontSize: '14px', fontWeight: 500 }}>{guide.name}</div>
<div style={{ color: 'var(--rah-text-muted)', fontSize: '12px', marginTop: '2px' }}>{guide.description}</div>
</div>
<button
onClick={() => handleEdit(guide.name)}
@@ -275,7 +275,7 @@ export default function GuidesViewer() {
padding: '6px',
background: 'transparent',
border: 'none',
color: '#666',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
borderRadius: '4px',
}}
@@ -289,7 +289,7 @@ export default function GuidesViewer() {
padding: '6px',
background: 'transparent',
border: 'none',
color: '#666',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
borderRadius: '4px',
}}
src/components/settings/LogsRow.tsx
+18 -18
View File
@@ -96,15 +96,15 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
<tr
onClick={() => setExpanded(!expanded)}
style={{
background: isEven ? '#0f0f0f' : '#141414',
background: isEven ? 'var(--rah-bg-surface)' : 'var(--rah-bg-panel)',
cursor: 'pointer',
borderBottom: '1px solid #2a2a2a'
borderBottom: '1px solid var(--rah-border-strong)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#1a1a1a';
e.currentTarget.style.background = 'var(--rah-bg-active)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = isEven ? '#0f0f0f' : '#141414';
e.currentTarget.style.background = isEven ? 'var(--rah-bg-surface)' : 'var(--rah-bg-panel)';
}}
>
<td style={{ padding: '12px 16px', fontSize: '12px', fontFamily: 'JetBrains Mono, monospace', width: '60px' }}>
@@ -122,7 +122,7 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
<td style={{ padding: '12px 16px', fontSize: '12px', fontFamily: 'JetBrains Mono, monospace' }}>
<div>{log.summary || '-'}</div>
{metrics && (
<div style={{ marginTop: '6px', fontSize: '10px', color: '#888', display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
<div style={{ marginTop: '6px', fontSize: '10px', color: 'var(--rah-text-muted)', display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
{metrics.trace_id && (
<span title={`Trace: ${metrics.trace_id}`}>
🔗 {metrics.trace_id.substring(0, 8)}
@@ -171,11 +171,11 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
</td>
</tr>
{expanded && (
<tr style={{ background: '#0a0a0a', borderTop: '1px solid #333', borderBottom: '1px solid #333' }}>
<tr style={{ background: 'var(--rah-bg-base)', borderTop: '1px solid var(--rah-border-stronger)', borderBottom: '1px solid var(--rah-border-stronger)' }}>
<td colSpan={6} style={{ padding: '16px 24px' }}>
{metrics?.system_message && (
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
System Message
</div>
<pre
@@ -187,10 +187,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
wordBreak: 'break-word',
margin: 0,
color: '#60a5fa',
background: '#0f0f0f',
background: 'var(--rah-bg-surface)',
padding: '12px',
borderRadius: '4px',
border: '1px solid #1f1f1f',
border: '1px solid var(--rah-bg-active)',
maxHeight: '300px',
overflow: 'auto'
}}
@@ -207,10 +207,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
(metrics?.stream_setup_ms ?? 0) > 0 ||
(metrics?.tool_loop_ms ?? 0) > 0) && (
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
Latency Breakdown
</div>
<div style={{ fontSize: '11px', color: '#ccc', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-secondary)', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
{(metricsSafe.prompt_build_ms ?? 0) > 0 && <span>prompt {metricsSafe.prompt_build_ms}ms</span>}
{(metricsSafe.tools_build_ms ?? 0) > 0 && <span>tools {metricsSafe.tools_build_ms}ms</span>}
{(metricsSafe.model_resolve_ms ?? 0) > 0 && <span>model {metricsSafe.model_resolve_ms}ms</span>}
@@ -224,10 +224,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
)}
{Array.isArray(metrics?.tool_timings) && metrics.tool_timings.length > 0 && (
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
Tool Timings
</div>
<div style={{ fontSize: '11px', color: '#ccc', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-secondary)', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
{metrics.tool_timings.map((tool: any, index: number) => (
<span key={`${tool.toolName || 'tool'}-${index}`}>
{tool.toolName || 'tool'} {tool.durationMs ?? 0}ms
@@ -238,15 +238,15 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
)}
{Array.isArray(metrics?.tools_used) && metrics.tools_used.length > 0 && (
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
Tools Used
</div>
<div style={{ fontSize: '11px', color: '#ccc' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-secondary)' }}>
{metrics.tools_used.join(', ')}
</div>
</div>
)}
<div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
Snapshot JSON
</div>
<pre
@@ -263,10 +263,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
</div>
{log.enriched_summary && (
<div>
<div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
<div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
Enriched Summary
</div>
<div style={{ fontSize: '12px', color: '#ccc', lineHeight: '1.6' }}>
<div style={{ fontSize: '12px', color: 'var(--rah-text-secondary)', lineHeight: '1.6' }}>
{log.enriched_summary}
</div>
</div>
src/components/settings/LogsViewer.tsx
+2 -2
View File
@@ -90,7 +90,7 @@ export default function LogsViewer() {
if (loading) {
return (
<div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
<div style={{ padding: '40px', textAlign: 'center', color: 'var(var(--rah-text-muted))' }}>
Loading logs...
</div>
);
@@ -106,7 +106,7 @@ export default function LogsViewer() {
if (logs.length === 0) {
return (
<div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
<div style={{ padding: '40px', textAlign: 'center', color: 'var(var(--rah-text-muted))' }}>
No logs found
</div>
);
src/components/settings/SettingsModal.tsx
+21 -21
View File
@@ -68,8 +68,8 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
width: '80vw',
height: '85vh',
background: '#0f0f0f',
border: '1px solid #2a2a2a',
background: 'var(--rah-bg-surface)',
border: '1px solid var(--rah-border-strong)',
borderRadius: '8px',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.6)',
display: 'flex',
@@ -81,8 +81,8 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
<div
style={{
width: '20%',
background: '#0a0a0a',
borderRight: '1px solid #2a2a2a',
background: 'var(--rah-bg-base)',
borderRight: '1px solid var(--rah-border-strong)',
display: 'flex',
flexDirection: 'column',
padding: '24px 0'
@@ -94,7 +94,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
marginBottom: '24px',
fontSize: '18px',
fontWeight: '600',
color: '#fff'
color: 'var(--rah-text-active)'
}}
>
Settings
@@ -105,8 +105,8 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'logs' ? '#fff' : '#888',
background: activeTab === 'logs' ? '#1a3a2a' : 'transparent',
color: activeTab === 'logs' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'logs' ? '#1a3a2a' : 'transparent', // semantic active state kept
borderLeft: activeTab === 'logs' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
transition: 'all 0.2s'
@@ -119,7 +119,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'tools' ? '#fff' : '#888',
color: activeTab === 'tools' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'tools' ? '#1a3a2a' : 'transparent',
borderLeft: activeTab === 'tools' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
@@ -133,7 +133,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'guides' ? '#fff' : '#888',
color: activeTab === 'guides' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'guides' ? '#1a3a2a' : 'transparent',
borderLeft: activeTab === 'guides' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
@@ -147,7 +147,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'apikeys' ? '#fff' : '#888',
color: activeTab === 'apikeys' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'apikeys' ? '#1a3a2a' : 'transparent',
borderLeft: activeTab === 'apikeys' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
@@ -161,7 +161,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'database' ? '#fff' : '#888',
color: activeTab === 'database' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'database' ? '#1a3a2a' : 'transparent',
borderLeft: activeTab === 'database' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
@@ -175,7 +175,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'context' ? '#fff' : '#888',
color: activeTab === 'context' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'context' ? '#1a3a2a' : 'transparent',
borderLeft: activeTab === 'context' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
@@ -189,7 +189,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: activeTab === 'agents' ? '#fff' : '#888',
color: activeTab === 'agents' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
background: activeTab === 'agents' ? '#1a3a2a' : 'transparent',
borderLeft: activeTab === 'agents' ? '3px solid #22c55e' : '3px solid transparent',
cursor: 'pointer',
@@ -202,7 +202,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: '#888',
color: 'var(--rah-text-muted)',
opacity: 0.4,
cursor: 'not-allowed'
}}
@@ -213,7 +213,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
padding: '12px 24px',
fontSize: '14px',
color: '#888',
color: 'var(--rah-text-muted)',
opacity: 0.4,
cursor: 'not-allowed'
}}
@@ -226,7 +226,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
marginTop: 'auto',
padding: '24px',
borderTop: '1px solid #1f2937',
borderTop: '1px solid var(--rah-border)',
display: 'flex',
flexDirection: 'column',
gap: '12px'
@@ -268,7 +268,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
<div
style={{
padding: '16px 24px',
borderBottom: '1px solid #2a2a2a',
borderBottom: '1px solid var(--rah-border-strong)',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
@@ -279,7 +279,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
margin: 0,
fontSize: '16px',
fontWeight: '600',
color: '#fff'
color: 'var(--rah-text-active)'
}}
>
{activeTab === 'logs' && 'System Logs'}
@@ -295,7 +295,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
style={{
background: 'transparent',
border: 'none',
color: '#888',
color: 'var(--rah-text-muted)',
cursor: 'pointer',
fontSize: '24px',
lineHeight: 1,
@@ -303,10 +303,10 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
transition: 'color 0.2s'
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = '#fff';
e.currentTarget.style.color = 'var(--rah-text-active)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '#888';
e.currentTarget.style.color = 'var(--rah-text-muted)';
}}
title="Close (ESC)"
>
src/components/views/DatabaseTableView.tsx
+34 -34
View File
@@ -175,13 +175,13 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
<div style={{
display: 'flex',
alignItems: 'center',
background: '#0d0d0d',
border: '1px solid #222',
background: 'var(var(--rah-bg-surface))',
border: '1px solid var(--rah-border-strong)',
borderRadius: '6px',
padding: '0 8px',
gap: '6px',
}}>
<Search size={12} style={{ color: '#555', flexShrink: 0 }} />
<Search size={12} style={{ color: 'var(var(--rah-text-muted))', flexShrink: 0 }} />
<input
type="text"
value={searchQuery}
@@ -190,7 +190,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
background: 'transparent',
border: 'none',
color: '#f0f0f0',
color: 'var(var(--rah-text-active))',
fontSize: '12px',
padding: '5px 0',
outline: 'none',
@@ -201,7 +201,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
<button
type="button"
onClick={() => { setSearchQuery(''); setActiveSearch(''); }}
style={{ background: 'transparent', border: 'none', color: '#555', cursor: 'pointer', padding: 0, display: 'flex' }}
style={{ background: 'transparent', border: 'none', color: 'var(var(--rah-text-muted))', cursor: 'pointer', padding: 0, display: 'flex' }}
>
<X size={11} />
</button>
@@ -236,8 +236,8 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
display: 'flex', alignItems: 'center', gap: '4px',
padding: '4px 7px', background: 'transparent',
border: '1px solid #222', borderRadius: '5px',
color: '#888', fontSize: '11px', cursor: 'pointer',
border: '1px solid var(--rah-border-strong)', borderRadius: '5px',
color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
@@ -249,7 +249,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{showFilterPicker && (
<div style={{
position: 'absolute', top: '100%', left: 0, marginTop: '4px',
background: '#141414', border: '1px solid #222', borderRadius: '10px',
background: 'var(var(--rah-bg-panel))', border: '1px solid var(--rah-border-strong)', borderRadius: '10px',
padding: '6px', minWidth: '220px', maxHeight: '320px', overflowY: 'auto',
zIndex: 1000, boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
}}>
@@ -260,13 +260,13 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
placeholder="Search dimensions..."
autoFocus
style={{
width: '100%', padding: '7px 10px', background: '#0d0d0d',
width: '100%', padding: '7px 10px', background: 'var(var(--rah-bg-surface))',
border: '1px solid transparent', borderRadius: '6px',
color: '#f0f0f0', fontSize: '12px', marginBottom: '4px', outline: 'none',
color: 'var(var(--rah-text-active))', fontSize: '12px', marginBottom: '4px', outline: 'none',
}}
/>
{filterPickerDimensions.length === 0 ? (
<div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
<div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
No matching dimensions
</div>
) : (
@@ -283,14 +283,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
width: '100%', padding: '7px 10px', background: 'transparent',
border: 'none', borderRadius: '5px', color: '#ccc',
border: 'none', borderRadius: '5px', color: 'var(var(--rah-text-secondary))',
fontSize: '12px', cursor: 'pointer', textAlign: 'left',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
>
<span>{d.dimension}</span>
<span style={{ color: '#555', fontSize: '10px', background: '#1a1a1a', padding: '1px 6px', borderRadius: '10px' }}>
<span style={{ color: 'var(var(--rah-text-muted))', fontSize: '10px', background: 'var(var(--rah-bg-active))', padding: '1px 6px', borderRadius: '10px' }}>
{d.count}
</span>
</button>
@@ -303,7 +303,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{selectedFilters.length > 0 && (
<button
onClick={() => setSelectedFilters([])}
style={{ padding: '4px 6px', background: 'transparent', border: 'none', color: '#666', fontSize: '11px', cursor: 'pointer' }}
style={{ padding: '4px 6px', background: 'transparent', border: 'none', color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer' }}
onMouseEnter={(e) => { e.currentTarget.style.color = '#ef4444'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
>
@@ -319,8 +319,8 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
display: 'flex', alignItems: 'center', gap: '4px',
padding: '4px 7px', background: 'transparent',
border: '1px solid #222', borderRadius: '5px',
color: '#888', fontSize: '11px', cursor: 'pointer', whiteSpace: 'nowrap',
border: '1px solid var(--rah-border-strong)', borderRadius: '5px',
color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer', whiteSpace: 'nowrap',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
@@ -333,7 +333,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{showSortDropdown && (
<div style={{
position: 'absolute', top: '100%', right: 0, marginTop: '4px',
background: '#141414', border: '1px solid #222', borderRadius: '10px',
background: 'var(var(--rah-bg-panel))', border: '1px solid var(--rah-border-strong)', borderRadius: '10px',
padding: '4px', minWidth: '160px', zIndex: 1000,
boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
}}>
@@ -363,14 +363,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Pagination */}
<div style={{
display: 'flex', alignItems: 'center', gap: '6px',
fontSize: '11px', color: '#666', whiteSpace: 'nowrap',
fontSize: '11px', color: 'var(var(--rah-text-muted))', whiteSpace: 'nowrap',
}}>
<span>{total > 0 ? `${startItem}-${endItem} of ${total}` : '0 nodes'}</span>
<button
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page <= 1}
style={{
background: 'transparent', border: '1px solid #222', borderRadius: '4px',
background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: '4px',
color: page <= 1 ? '#333' : '#888', cursor: page <= 1 ? 'default' : 'pointer',
padding: '2px 4px', display: 'flex',
}}
@@ -381,7 +381,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
disabled={page >= totalPages}
style={{
background: 'transparent', border: '1px solid #222', borderRadius: '4px',
background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: '4px',
color: page >= totalPages ? '#333' : '#888',
cursor: page >= totalPages ? 'default' : 'pointer',
padding: '2px 4px', display: 'flex',
@@ -398,7 +398,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
<div style={{
padding: '8px 12px',
borderBottom: '1px solid #1a1a1a',
borderBottom: '1px solid var(--rah-border)',
display: 'flex',
alignItems: 'center',
gap: '8px',
@@ -410,9 +410,9 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Table */}
<div style={{ flex: 1, overflow: 'auto' }}>
{loading ? (
<div style={{ padding: '40px', color: '#666', textAlign: 'center', fontSize: '13px' }}>Loading...</div>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center', fontSize: '13px' }}>Loading...</div>
) : nodes.length === 0 ? (
<div style={{ padding: '40px', color: '#666', textAlign: 'center', fontSize: '13px' }}>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center', fontSize: '13px' }}>
{activeSearch || selectedFilters.length > 0 ? 'No nodes match your filters.' : 'No nodes yet.'}
</div>
) : (
@@ -468,7 +468,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
<td style={tdStyle({ textAlign: 'right' })}>
<span style={{
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
fontSize: '11px', color: '#555',
fontSize: '11px', color: 'var(var(--rah-text-muted))',
}}>
{node.id}
</span>
@@ -477,7 +477,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Description */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '11px', color: '#888' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{node.description || '\u2014'}
</span>
</div>
@@ -486,7 +486,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Notes */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '11px', color: '#888' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{node.notes ? node.notes.slice(0, 120) : '\u2014'}
</span>
</div>
@@ -524,7 +524,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
</span>
))}
{node.dimensions.length > 3 && (
<span style={{ fontSize: '9px', color: '#555' }}>
<span style={{ fontSize: '9px', color: 'var(var(--rah-text-muted))' }}>
+{node.dimensions.length - 3}
</span>
)}
@@ -551,14 +551,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Updated */}
<td style={tdStyle()}>
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{formatRelativeTime(node.updated_at)}
</span>
</td>
{/* Created */}
<td style={tdStyle()}>
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{formatRelativeTime(node.created_at)}
</span>
</td>
@@ -566,7 +566,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Metadata */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '10px', color: '#555', fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' }}>
<span style={{ fontSize: '10px', color: 'var(var(--rah-text-muted))', fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' }}>
{metaStr || '\u2014'}
</span>
</div>
@@ -575,7 +575,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Chunk */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '10px', color: '#555' }}>
<span style={{ fontSize: '10px', color: 'var(var(--rah-text-muted))' }}>
{node.chunk ? node.chunk.slice(0, 100) : '\u2014'}
</span>
</div>
@@ -593,7 +593,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Embedding Updated */}
<td style={tdStyle()}>
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{node.embedding_updated_at ? formatRelativeTime(node.embedding_updated_at) : '\u2014'}
</span>
</td>
@@ -612,11 +612,11 @@ function thStyle(extra: React.CSSProperties = {}): React.CSSProperties {
return {
position: 'sticky' as const,
top: 0,
background: '#0a0a0a',
background: 'var(var(--rah-bg-base))',
padding: '8px 12px',
fontSize: '10px',
fontWeight: 500,
color: '#555',
color: 'var(var(--rah-text-muted))',
textAlign: 'left',
letterSpacing: '0.05em',
whiteSpace: 'nowrap',
src/components/views/ViewsOverlay.tsx
+31 -31
View File
@@ -44,7 +44,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
<div style={{
padding: '10px 12px',
background: 'transparent',
borderBottom: '1px solid #141414',
borderBottom: '1px solid var(--rah-bg-panel)',
borderLeft: `3px solid ${isError ? '#ef4444' : '#22c55e'}`,
opacity: 0.8,
}}>
@@ -53,7 +53,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
width: '32px',
height: '32px',
borderRadius: '8px',
background: '#141414',
background: 'var(var(--rah-bg-panel))',
border: `1px solid ${isError ? 'rgba(239,68,68,0.3)' : '#1f1f1f'}`,
display: 'flex',
alignItems: 'center',
@@ -81,7 +81,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
</div>
<div style={{
fontSize: '11px',
color: '#555',
color: 'var(var(--rah-text-muted))',
marginTop: '2px',
whiteSpace: 'nowrap',
overflow: 'hidden',
@@ -97,7 +97,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
padding: '4px',
background: 'transparent',
border: 'none',
color: '#555',
color: 'var(var(--rah-text-muted))',
cursor: 'pointer',
borderRadius: '4px',
display: 'flex',
@@ -421,7 +421,7 @@ export default function ViewsOverlay({
background: 'transparent',
cursor: 'pointer',
transition: 'all 0.15s ease',
borderBottom: '1px solid #141414',
borderBottom: '1px solid var(--rah-bg-panel)',
borderLeft: '3px solid transparent',
opacity: isDragSource ? 0.4 : 1,
borderTop: isDropTarget ? '2px solid #22c55e' : '2px solid transparent',
@@ -476,8 +476,8 @@ export default function ViewsOverlay({
width: '32px',
height: '32px',
borderRadius: '8px',
background: '#141414',
border: '1px solid #1f1f1f',
background: 'var(var(--rah-bg-panel))',
border: '1px solid var(--rah-bg-active)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -495,7 +495,7 @@ export default function ViewsOverlay({
<span style={{
fontSize: '13px',
fontWeight: 500,
color: '#f0f0f0',
color: 'var(var(--rah-text-active))',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -507,7 +507,7 @@ export default function ViewsOverlay({
{node.edge_count != null && node.edge_count > 0 && (
<span style={{
fontSize: '10px',
color: '#555',
color: 'var(var(--rah-text-muted))',
display: 'flex',
alignItems: 'center',
gap: '2px',
@@ -520,7 +520,7 @@ export default function ViewsOverlay({
<span style={{
fontSize: '10px',
color: '#444',
background: '#141414',
background: 'var(var(--rah-bg-panel))',
padding: '2px 6px',
borderRadius: '4px',
fontFamily: 'monospace',
@@ -532,7 +532,7 @@ export default function ViewsOverlay({
{descPreview && (
<div style={{
fontSize: '11px',
color: '#666',
color: 'var(var(--rah-text-muted))',
lineHeight: '1.4',
marginBottom: '4px',
overflow: 'hidden',
@@ -564,7 +564,7 @@ export default function ViewsOverlay({
</span>
))}
{node.dimensions.length > 3 && (
<span style={{ fontSize: '9px', color: '#555' }}>
<span style={{ fontSize: '9px', color: 'var(var(--rah-text-muted))' }}>
+{node.dimensions.length - 3}
</span>
)}
@@ -622,7 +622,7 @@ export default function ViewsOverlay({
))}
{externalDimensionFilter && (
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
Sidebar filter
</span>
)}
@@ -641,7 +641,7 @@ export default function ViewsOverlay({
gap: '4px',
padding: '4px 8px',
background: 'transparent',
border: '1px solid #222',
border: '1px solid var(--rah-border-strong)',
borderRadius: '5px',
color: externalDimensionFilter ? '#4b4b4b' : '#888',
fontSize: '11px',
@@ -670,8 +670,8 @@ export default function ViewsOverlay({
top: '100%',
left: 0,
marginTop: '4px',
background: '#141414',
border: '1px solid #222',
background: 'var(var(--rah-bg-panel))',
border: '1px solid var(--rah-border-strong)',
borderRadius: '10px',
padding: '6px',
minWidth: '220px',
@@ -689,10 +689,10 @@ export default function ViewsOverlay({
style={{
width: '100%',
padding: '7px 10px',
background: '#0d0d0d',
background: 'var(var(--rah-bg-surface))',
border: '1px solid transparent',
borderRadius: '6px',
color: '#f0f0f0',
color: 'var(var(--rah-text-active))',
fontSize: '12px',
marginBottom: '4px',
outline: 'none',
@@ -701,11 +701,11 @@ export default function ViewsOverlay({
onBlur={(e) => { e.currentTarget.style.borderColor = 'transparent'; }}
/>
{dimensionsLoading ? (
<div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
<div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
Loading dimensions...
</div>
) : filterPickerDimensions.length === 0 ? (
<div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
<div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
{filterSearchQuery ? 'No matching dimensions' : 'No dimensions available'}
</div>
) : (
@@ -722,7 +722,7 @@ export default function ViewsOverlay({
background: 'transparent',
border: 'none',
borderRadius: '5px',
color: '#ccc',
color: 'var(var(--rah-text-secondary))',
fontSize: '12px',
cursor: 'pointer',
textAlign: 'left'
@@ -732,9 +732,9 @@ export default function ViewsOverlay({
>
<span>{d.dimension}</span>
<span style={{
color: '#555',
color: 'var(var(--rah-text-muted))',
fontSize: '10px',
background: '#1a1a1a',
background: 'var(var(--rah-bg-active))',
padding: '1px 6px',
borderRadius: '10px',
}}>
@@ -754,7 +754,7 @@ export default function ViewsOverlay({
padding: '4px 8px',
background: 'transparent',
border: 'none',
color: '#666',
color: 'var(var(--rah-text-muted))',
fontSize: '11px',
cursor: 'pointer'
}}
@@ -776,9 +776,9 @@ export default function ViewsOverlay({
gap: '4px',
padding: '5px 8px',
background: 'transparent',
border: '1px solid #222',
border: '1px solid var(--rah-border-strong)',
borderRadius: '5px',
color: '#888',
color: 'var(var(--rah-text-muted))',
fontSize: '11px',
cursor: 'pointer',
transition: 'all 0.15s ease',
@@ -804,8 +804,8 @@ export default function ViewsOverlay({
top: '100%',
right: 0,
marginTop: '4px',
background: '#141414',
border: '1px solid #222',
background: 'var(var(--rah-bg-panel))',
border: '1px solid var(--rah-border-strong)',
borderRadius: '10px',
padding: '4px',
minWidth: '140px',
@@ -856,7 +856,7 @@ export default function ViewsOverlay({
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
<div style={{
padding: '10px 16px',
borderBottom: '1px solid #1a1a1a',
borderBottom: '1px solid var(--rah-border)',
display: 'flex',
alignItems: 'center',
gap: '10px',
@@ -868,11 +868,11 @@ export default function ViewsOverlay({
{/* Content area — list view */}
{filteredNodesLoading ? (
<div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
Loading...
</div>
) : filteredNodes.length === 0 ? (
<div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
{selectedFilters.length > 0 ? 'No nodes match the selected filters.' : 'No nodes yet. Add some content to get started.'}
</div>
) : (