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