@ltm-blueverse/alpha-semantic-hub 0.7.0 → 0.7.2

package/explorer/src/workspaces/GraphWorkspace/GraphInspectorPanel.tsx

@@ -61,10 +61,10 @@ function sourceAttribution(properties: Record<string, unknown>) {
 /* ─── Path Distance Intelligence Panel ──────────────────────────── */
 
 const BAND_COLORS: Record<string, string> = {
-  direct: "#3fb950",
-  near: "#ff8fa0",
-  "mid-range": "#e3b341",
-  distant: "#ff7b72",
+  direct: "#22863a",
+  near: "#d9455e",
+  "mid-range": "#9a6700",
+  distant: "#ec2315",
 };
 
 function PathDistanceIntelPanel({ result }: { result: PathResponse }) {
@@ -105,7 +105,7 @@ function PathDistanceIntelPanel({ result }: { result: PathResponse }) {
             <div
               style={{
                 ...metricValueStyle,
-                color: result.confidence_decay > 0.6 ? "#3fb950" : result.confidence_decay > 0.3 ? "#e3b341" : "#ff7b72",
+                color: result.confidence_decay > 0.6 ? "#22863a" : result.confidence_decay > 0.3 ? "#9a6700" : "#ec2315",
               }}
             >
               {(result.confidence_decay * 100).toFixed(1)}%
@@ -116,7 +116,7 @@ function PathDistanceIntelPanel({ result }: { result: PathResponse }) {
                   ...metricBarFillStyle,
                   width: `${result.confidence_decay * 100}%`,
                   background:
-                    result.confidence_decay > 0.6 ? "#3fb950" : result.confidence_decay > 0.3 ? "#e3b341" : "#ff7b72",
+                    result.confidence_decay > 0.6 ? "#22863a" : result.confidence_decay > 0.3 ? "#9a6700" : "#ec2315",
                 }}
               />
             </div>
@@ -125,11 +125,11 @@ function PathDistanceIntelPanel({ result }: { result: PathResponse }) {
         {result.semantic_similarity != null && (
           <div style={metricCardStyle}>
             <div style={metricLabelStyle}>Semantic Sim.</div>
-            <div style={{ ...metricValueStyle, color: "#ff8fa0" }}>
+            <div style={{ ...metricValueStyle, color: "#d9455e" }}>
               {(result.semantic_similarity * 100).toFixed(1)}%
             </div>
             <div style={metricBarTrackStyle}>
-              <div style={{ ...metricBarFillStyle, width: `${result.semantic_similarity * 100}%`, background: "#ff8fa0" }} />
+              <div style={{ ...metricBarFillStyle, width: `${result.semantic_similarity * 100}%`, background: "#d9455e" }} />
             </div>
           </div>
         )}
@@ -147,7 +147,7 @@ function PathDistanceIntelPanel({ result }: { result: PathResponse }) {
             <div
               style={{
                 ...metricValueStyle,
-                color: "#e3b341",
+                color: "#9a6700",
                 fontSize: 11,
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -281,7 +281,7 @@ function PathFlowViz({
       {/* Weight badge */}
       <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 8 }}>
         <span style={{ color: "#9c7a82", fontSize: 11 }}>Total weight:</span>
-        <span style={{ color: "#ff8fa0", fontSize: 12, fontWeight: 700 }}>{totalWeight.toFixed(3)}</span>
+        <span style={{ color: "#d9455e", fontSize: 12, fontWeight: 700 }}>{totalWeight.toFixed(3)}</span>
         <span style={{ color: "#9c7a82", fontSize: 11 }}>·</span>
         <span style={{ color: "#9c7a82", fontSize: 11 }}>{path.length} hops</span>
       </div>
@@ -593,7 +593,7 @@ const inputStyle: CSSProperties = {
   borderRadius: 12,
   padding: "11px 13px",
   fontSize: 13,
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.035)",
+  boxShadow: "inset 0 1px 0 rgba(28, 20, 24,0.035)",
 };
 
 const groupedSelectionNoticeStyle: CSSProperties = {
@@ -616,7 +616,7 @@ const actionButtonStyle: CSSProperties = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 24px rgba(0,0,0,0.18)",
+  boxShadow: "inset 0 1px 0 rgba(28, 20, 24,0.07), 0 10px 24px rgba(0,0,0,0.18)",
 };
 
 const secondaryActionButtonStyle: CSSProperties = {
@@ -630,7 +630,7 @@ const secondaryActionButtonStyle: CSSProperties = {
 const predictionCardStyle: CSSProperties = {
   textAlign: "left",
   padding: "10px 12px",
-  background: "rgba(255, 255, 255, 0.035)",
+  background: "rgba(28, 20, 24, 0.035)",
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
   borderRadius: 10,
   cursor: "pointer",
@@ -638,7 +638,7 @@ const predictionCardStyle: CSSProperties = {
 };
 
 const propertyCardStyle: CSSProperties = {
-  background: "rgba(255, 255, 255, 0.028)",
+  background: "rgba(28, 20, 24, 0.028)",
   padding: "10px 12px",
   borderRadius: 10,
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
@@ -651,7 +651,7 @@ const emptyTextStyle: CSSProperties = {
 };
 
 const subtleChipStyle: CSSProperties = {
-  background: "rgba(255, 255, 255, 0.04)",
+  background: "rgba(28, 20, 24, 0.04)",
   color: GRAPH_THEME.ui.text.body,
   padding: "4px 8px",
   borderRadius: 999,
@@ -736,7 +736,7 @@ const metricCardStyle: CSSProperties = {
   background: "rgba(0,0,0,0.18)",
   borderRadius: 8,
   padding: "8px 10px",
-  border: "1px solid rgba(255,255,255,0.05)",
+  border: "1px solid rgba(28, 20, 24,0.05)",
   display: "flex",
   flexDirection: "column",
   gap: 3,
@@ -753,13 +753,13 @@ const metricLabelStyle: CSSProperties = {
 const metricValueStyle: CSSProperties = {
   fontSize: 14,
   fontWeight: 700,
-  color: "#ffeaed",
+  color: "#2d1619",
 };
 
 const metricBarTrackStyle: CSSProperties = {
   height: 3,
   borderRadius: 999,
-  background: "rgba(255,255,255,0.07)",
+  background: "rgba(28, 20, 24,0.07)",
   overflow: "hidden",
   marginTop: 4,
 };

package/explorer/src/workspaces/GraphWorkspace/GraphLoadingOverlay.tsx

@@ -29,8 +29,8 @@ const LOADING_OVERLAY_CSS = `
     background:
       radial-gradient(circle at top right, rgba(242, 182, 109, 0.12), transparent 28%),
       radial-gradient(circle at top left, rgba(255, 107, 129, 0.14), transparent 30%),
-      linear-gradient(145deg, rgba(11, 5, 8, 0.94), rgba(12, 25, 43, 0.82));
-    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.05);
+      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82));
+    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(28, 20, 24,0.05);
     backdrop-filter: blur(18px) saturate(1.08);
     -webkit-backdrop-filter: blur(18px) saturate(1.08);
   }
@@ -39,8 +39,8 @@ const LOADING_OVERLAY_CSS = `
     background:
       radial-gradient(circle at top right, rgba(242, 182, 109, 0.08), transparent 26%),
       radial-gradient(circle at top left, rgba(255, 107, 129, 0.12), transparent 28%),
-      linear-gradient(145deg, rgba(11, 5, 8, 0.84), rgba(11, 24, 40, 0.72));
-    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255,255,255,0.04);
+      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.72));
+    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(28, 20, 24,0.04);
   }
   .graph-stage-loader-beacon {
     position: relative;
@@ -73,7 +73,7 @@ const LOADING_OVERLAY_CSS = `
     text-transform: uppercase;
     border: 1px solid rgba(255, 107, 129, 0.08);
     color: rgba(143, 168, 198, 0.72);
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(28, 20, 24, 0.02);
   }
   .graph-stage-loader-step[data-state="done"] {
     color: rgba(214, 232, 250, 0.92);
@@ -81,10 +81,10 @@ const LOADING_OVERLAY_CSS = `
     background: rgba(89, 155, 220, 0.14);
   }
   .graph-stage-loader-step[data-state="active"] {
-    color: #eff7ff;
+    color: #16222d;
     border-color: rgba(242, 182, 109, 0.24);
     background: linear-gradient(135deg, rgba(49, 108, 172, 0.28), rgba(242, 182, 109, 0.16));
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    box-shadow: inset 0 1px 0 rgba(28, 20, 24, 0.06);
   }
   .graph-stage-loader-bar {
     position: relative;
@@ -93,7 +93,7 @@ const LOADING_OVERLAY_CSS = `
     overflow: hidden;
     border-radius: 999px;
     border: 1px solid rgba(255, 107, 129, 0.1);
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(28, 20, 24, 0.05);
   }
   .graph-stage-loader-bar-fill {
     display: block;
@@ -127,7 +127,7 @@ const LOADING_OVERLAY_CSS = `
     border-color: rgba(255, 123, 114, 0.32);
     background:
       radial-gradient(circle at top left, rgba(255, 123, 114, 0.12), transparent 32%),
-      linear-gradient(145deg, rgba(11, 5, 8, 0.96), rgba(24, 14, 18, 0.86));
+      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
   }
   .graph-stage-loader-error-mark {
     width: 38px;
@@ -136,7 +136,7 @@ const LOADING_OVERLAY_CSS = `
     border-radius: 12px;
     display: grid;
     place-items: center;
-    color: #ff9e97;
+    color: #46211e;
     background: rgba(255, 123, 114, 0.12);
     border: 1px solid rgba(255, 123, 114, 0.28);
   }
@@ -145,7 +145,7 @@ const LOADING_OVERLAY_CSS = `
     border-radius: 10px;
     background: rgba(0, 0, 0, 0.32);
     border: 1px solid rgba(255, 123, 114, 0.18);
-    color: #ffb4ae;
+    color: #562925;
     font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
     font-size: 12px;
     line-height: 1.55;
@@ -162,7 +162,7 @@ const LOADING_OVERLAY_CSS = `
     cursor: pointer;
     border: 1px solid rgba(255, 107, 129, 0.4);
     background: linear-gradient(135deg, rgba(255, 45, 75, 0.28), rgba(56, 210, 160, 0.16));
-    color: #ffeef1;
+    color: #2d161a;
     transition: 160ms ease;
   }
   .graph-stage-loader-retry:hover {
@@ -171,7 +171,7 @@ const LOADING_OVERLAY_CSS = `
     transform: translateY(-1px);
   }
   .graph-stage-loader-retry:focus-visible {
-    outline: 2px solid #ff6b81;
+    outline: 2px solid #d41736;
     outline-offset: 2px;
   }
 `;
@@ -213,8 +213,8 @@ const loadingMetricStyle = {
   padding: "7px 10px",
   borderRadius: 999,
   border: "1px solid rgba(255, 107, 129, 0.12)",
-  background: "rgba(255, 255, 255, 0.03)",
-  color: "#b8cade",
+  background: "rgba(28, 20, 24, 0.03)",
+  color: "#25313f",
   fontSize: 11,
   fontWeight: 600,
 } satisfies CSSProperties;
@@ -288,7 +288,7 @@ export function GraphLoadingOverlay({
       <div
         className="graph-stage-loader"
         data-exiting={exiting}
-        style={{ background: "linear-gradient(180deg, rgba(1,4,9,0.22), rgba(1,4,9,0.5))" }}
+        style={{ background: "linear-gradient(180deg, rgba(255, 255, 255,0.22), rgba(255, 255, 255,0.5))" }}
       >
         <style>{LOADING_OVERLAY_CSS}</style>
         <div className="graph-stage-loader-card" data-error="true" role="alert">
@@ -297,10 +297,10 @@ export function GraphLoadingOverlay({
               <AlertTriangle size={18} strokeWidth={2.2} />
             </div>
             <div style={{ minWidth: 0 }}>
-              <div style={{ color: "#ffffff", fontSize: 20, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>
+              <div style={{ color: "#16181d", fontSize: 20, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>
                 Could not load the graph
               </div>
-              <div style={{ color: "#c99aa3", fontSize: 13, lineHeight: 1.5 }}>
+              <div style={{ color: "#aa485b", fontSize: 13, lineHeight: 1.5 }}>
                 The Explorer API did not return graph data. Check that the backend is running and reachable, then try again.
               </div>
             </div>
@@ -324,8 +324,8 @@ export function GraphLoadingOverlay({
   const activeProgress = progress ?? displayProgress;
   const isLiveStage = activeProgress.phase === "stabilizing_layout" || activeProgress.showGraphBehind || showGraphBehind;
   const overlayBackground = isLiveStage
-    ? "linear-gradient(180deg, rgba(1,4,9,0.04), rgba(1,4,9,0.18))"
-    : "linear-gradient(180deg, rgba(1,4,9,0.22), rgba(1,4,9,0.5))";
+    ? "linear-gradient(180deg, rgba(255, 255, 255,0.04), rgba(255, 255, 255,0.18))"
+    : "linear-gradient(180deg, rgba(255, 255, 255,0.22), rgba(255, 255, 255,0.5))";
   const determinateRatio = activeProgress.progressKind === "determinate" && activeProgress.total
     ? Math.max(0.05, Math.min(activeProgress.loaded ?? 0, activeProgress.total) / Math.max(activeProgress.total, 1))
     : null;
@@ -342,16 +342,16 @@ export function GraphLoadingOverlay({
       <div className="graph-stage-loader-card" data-live={isLiveStage}>
         <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 14, marginBottom: 14 }}>
           <div style={{ minWidth: 0 }}>
-            <div style={{ color: "#ffffff", fontSize: 20, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>
+            <div style={{ color: "#16181d", fontSize: 20, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>
               {activeProgress.title}
             </div>
-            <div style={{ color: "#c99aa3", fontSize: 13, lineHeight: 1.5 }}>
+            <div style={{ color: "#aa485b", fontSize: 13, lineHeight: 1.5 }}>
               {activeProgress.message}
             </div>
           </div>
           <div style={{ display: "inline-flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
             <div className="graph-stage-loader-beacon" aria-hidden="true" />
-            <div style={{ color: "#d7e9fb", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase" }}>
+            <div style={{ color: "#16222e", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase" }}>
               Stage {activeProgress.stageIndex ?? 1}/{activeProgress.stageCount ?? GRAPH_LOAD_STAGE_SEQUENCE.length}
             </div>
           </div>
@@ -370,7 +370,7 @@ export function GraphLoadingOverlay({
         </div>
 
         <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", marginBottom: 8 }}>
-          <div style={{ color: "#dce9f6", fontSize: 12, fontWeight: 600 }}>
+          <div style={{ color: "#17222d", fontSize: 12, fontWeight: 600 }}>
             {activeProgress.progressKind === "determinate" && activeProgress.total
               ? `${(activeProgress.loaded ?? 0).toLocaleString()} / ${activeProgress.total.toLocaleString()} in current stage`
               : "Working through this stage"}
@@ -398,7 +398,7 @@ export function GraphLoadingOverlay({
             {activeProgress.edgesTotal ? ` / ${activeProgress.edgesTotal.toLocaleString()}` : ""} relationships
           </span>
           {layoutSource ? (
-            <span style={{ ...loadingMetricStyle, color: "#a9ddff", borderColor: withAlpha(GRAPH_THEME.palette.accent.hovered, 0.22) }}>
+            <span style={{ ...loadingMetricStyle, color: "#234053", borderColor: withAlpha(GRAPH_THEME.palette.accent.hovered, 0.22) }}>
               {layoutSource}
               {layoutState ? ` · ${layoutState}` : ""}
             </span>

package/explorer/src/workspaces/GraphWorkspace/GraphWorkspace.tsx

@@ -522,7 +522,7 @@ const HUD_CSS = `
   .node-panel-collapse {
     border: 1px solid ${GRAPH_THEME.ui.surface.panelBorder};
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.026);
+    background: rgba(28, 20, 24, 0.026);
     overflow: hidden;
   }
   .node-panel-collapse + .node-panel-collapse {
@@ -610,7 +610,7 @@ const HUD_CSS = `
     height: 10px;
     border-radius: 999px;
     overflow: hidden;
-    background: rgba(255, 255, 255, 0.052);
+    background: rgba(28, 20, 24, 0.052);
     border: 1px solid ${GRAPH_THEME.ui.surface.panelBorder};
   }
   .graph-loading-bar > span {
@@ -736,10 +736,10 @@ const HUD_CSS = `
     border-radius: 16px;
     border: 1px solid ${GRAPH_THEME.ui.control.inputBorder};
     background:
-      linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
+      linear-gradient(135deg, rgba(28, 20, 24,0.06), rgba(28, 20, 24,0.018)),
       ${GRAPH_THEME.ui.control.inputBg};
     color: ${GRAPH_THEME.ui.text.muted};
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 14px 30px rgba(0,0,0,0.16);
+    box-shadow: inset 0 1px 0 rgba(28, 20, 24,0.045), 0 14px 30px rgba(0,0,0,0.16);
   }
   .explore-search-suggestions {
     position: absolute;
@@ -755,7 +755,7 @@ const HUD_CSS = `
     border-radius: 14px;
     border: 1px solid ${GRAPH_THEME.ui.control.inputBorder};
     background: ${GRAPH_THEME.ui.surface.cardStrong};
-    box-shadow: 0 18px 40px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
+    box-shadow: 0 18px 40px rgba(0,0,0,0.32), inset 0 1px 0 rgba(28, 20, 24,0.04);
   }
   .explore-search-suggestions li {
     display: flex;
@@ -787,7 +787,7 @@ const HUD_CSS = `
   }
   .explore-search-command:focus-within {
     border-color: ${GRAPH_THEME.ui.control.activeBorder};
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px ${GRAPH_THEME.ui.control.focusRing}, 0 16px 32px rgba(0,0,0,0.18);
+    box-shadow: inset 0 1px 0 rgba(28, 20, 24,0.06), 0 0 0 1px ${GRAPH_THEME.ui.control.focusRing}, 0 16px 32px rgba(0,0,0,0.18);
   }
   .explore-search-command input {
     width: 100%;
@@ -811,7 +811,7 @@ const HUD_CSS = `
     font-size: 12px;
     font-weight: 800;
     cursor: pointer;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
+    box-shadow: inset 0 1px 0 rgba(28, 20, 24,0.08);
   }
   .explore-search-command button:disabled {
     cursor: not-allowed;
@@ -824,8 +824,8 @@ const HUD_CSS = `
     padding: 4px;
     border-radius: 16px;
     border: 1px solid ${GRAPH_THEME.ui.control.defaultBorder};
-    background: rgba(255, 255, 255, 0.026);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
+    background: rgba(28, 20, 24, 0.026);
+    box-shadow: inset 0 1px 0 rgba(28, 20, 24,0.035);
   }
   .explore-mode-segment {
     min-width: 0;
@@ -846,8 +846,8 @@ const HUD_CSS = `
     min-height: 43px;
     padding: 4px;
     border-radius: 16px;
-    border: 1px solid rgba(211, 205, 190, 0.075);
-    background: rgba(255, 255, 255, 0.022);
+    border: 1px solid rgba(70, 60, 48, 0.075);
+    background: rgba(28, 20, 24, 0.022);
   }
   .explore-tool-cluster-label {
     padding: 0 4px 0 7px;
@@ -880,12 +880,12 @@ const HUD_CSS = `
     line-height: 1;
     cursor: pointer;
     white-space: nowrap;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
+    box-shadow: inset 0 1px 0 rgba(28, 20, 24,0.035);
     transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
   }
   .explore-tool-button:hover:not(:disabled) {
     background: ${GRAPH_THEME.ui.control.hoverBg};
-    border-color: rgba(211, 205, 190, 0.18);
+    border-color: rgba(70, 60, 48, 0.18);
     transform: translateY(-1px);
   }
   .explore-tool-button:disabled {
@@ -898,7 +898,7 @@ const HUD_CSS = `
     color: ${GRAPH_THEME.ui.control.activeText};
     background: ${GRAPH_THEME.ui.control.activeBg};
     border-color: ${GRAPH_THEME.ui.control.activeBorder};
-    box-shadow: 0 0 0 1px ${GRAPH_THEME.ui.control.focusRing}, inset 0 1px 0 rgba(255,255,255,0.06);
+    box-shadow: 0 0 0 1px ${GRAPH_THEME.ui.control.focusRing}, inset 0 1px 0 rgba(28, 20, 24,0.06);
   }
   .explore-tool-button-primary {
     color: ${GRAPH_THEME.ui.control.primaryText};
@@ -951,7 +951,7 @@ const HUD_CSS = `
     height: 10px;
     flex-shrink: 0;
     border-radius: 50%;
-    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
+    box-shadow: inset 0 0 0 1px rgba(28, 20, 24,0.16);
   }
   .explore-search-results {
     display: flex;
@@ -3152,17 +3152,17 @@ export function GraphWorkspace({ externalFocusNodeId, externalFocusToken, onDirt
 
               {egoModeEnabled && (
                 <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12, color: "#a0b4cc" }}>
-                  <span style={{ fontWeight: 600, color: "#ff8fa0" }}>Ego depth:</span>
+                  <span style={{ fontWeight: 600, color: "#d9455e" }}>Ego depth:</span>
                   <input
                     type="range"
                     min={1}
                     max={8}
                     value={egoMaxHops}
                     onChange={(e) => setEgoMaxHops(Number(e.target.value))}
-                    style={{ width: 90, accentColor: "#ff8fa0" }}
+                    style={{ width: 90, accentColor: "#d9455e" }}
                     title={`Ego depth: ${egoMaxHops} hops`}
                   />
-                  <span style={{ fontFamily: "monospace", color: "#e6f2ff" }}>{egoMaxHops} hop{egoMaxHops !== 1 ? "s" : ""}</span>
+                  <span style={{ fontFamily: "monospace", color: "#16212e" }}>{egoMaxHops} hop{egoMaxHops !== 1 ? "s" : ""}</span>
                 </div>
               )}
 
@@ -3206,7 +3206,7 @@ export function GraphWorkspace({ externalFocusNodeId, externalFocusToken, onDirt
                 </div>
               ) : null}
 
-              {searchError ? <div style={{ color: "#ff7b72", fontSize: 12 }}>{searchError}</div> : null}
+              {searchError ? <div style={{ color: "#ec2315", fontSize: 12 }}>{searchError}</div> : null}
 
               {searchResults.length ? (
                 <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
@@ -3229,7 +3229,7 @@ export function GraphWorkspace({ externalFocusNodeId, externalFocusToken, onDirt
                       <button key={result.node.id} style={predictionCardStyle} onClick={() => focusNode(result.node.id)}>
                         <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                           <div style={{ minWidth: 0 }}>
-                            <div style={{ color: "#fff", fontWeight: 600 }}>{result.node.content || result.node.id}</div>
+                            <div style={{ color: "#16181d", fontWeight: 600 }}>{result.node.content || result.node.id}</div>
                             <div style={{ color: "#b08b93", fontSize: 12 }}>{result.node.type}</div>
                           </div>
                           <div style={{ color: "#ff2d4b", fontSize: 12, whiteSpace: "nowrap" }}>
@@ -3249,7 +3249,7 @@ export function GraphWorkspace({ externalFocusNodeId, externalFocusToken, onDirt
                       <div style={{ color: "rgba(255, 107, 129, 0.76)", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                         Relationship
                       </div>
-                      <div style={{ color: "#f4f8ff", fontSize: 15, fontWeight: 700, marginTop: 6 }}>
+                      <div style={{ color: "#161e2d", fontSize: 15, fontWeight: 700, marginTop: 6 }}>
                         {selectedEdgeState.edgeType}
                       </div>
                     </div>
@@ -3299,7 +3299,7 @@ export function GraphWorkspace({ externalFocusNodeId, externalFocusToken, onDirt
                           <div style={{ color: "rgba(255, 107, 129, 0.68)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                             {key}
                           </div>
-                          <div style={{ color: "#dce7f4", fontSize: 12, marginTop: 4, wordBreak: "break-word" }}>
+                          <div style={{ color: "#18212c", fontSize: 12, marginTop: 4, wordBreak: "break-word" }}>
                             {typeof value === "object" ? JSON.stringify(value) : String(value)}
                           </div>
                         </div>
@@ -3432,7 +3432,7 @@ const actionButtonStyle: React.CSSProperties = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 24px rgba(0,0,0,0.18)",
+  boxShadow: "inset 0 1px 0 rgba(28, 20, 24,0.07), 0 10px 24px rgba(0,0,0,0.18)",
 };
 
 const secondaryActionButtonStyle: React.CSSProperties = {
@@ -3446,7 +3446,7 @@ const secondaryActionButtonStyle: React.CSSProperties = {
 const predictionCardStyle: React.CSSProperties = {
   textAlign: "left",
   padding: 12,
-  background: "rgba(255, 255, 255, 0.035)",
+  background: "rgba(28, 20, 24, 0.035)",
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
   borderRadius: 10,
   cursor: "pointer",
@@ -3460,7 +3460,7 @@ const selectedEdgeCardStyle: React.CSSProperties = {
   background: "linear-gradient(135deg, rgba(98, 226, 205, 0.1), rgba(233, 196, 122, 0.045))",
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
   borderRadius: 14,
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+  boxShadow: "inset 0 1px 0 rgba(28, 20, 24,0.03)",
 };
 
 const selectedEdgeNodeChipStyle: React.CSSProperties = {
@@ -3479,7 +3479,7 @@ const distanceStatusStripStyle: React.CSSProperties = {
   background: "linear-gradient(135deg, rgba(98, 226, 205, 0.09), rgba(227, 179, 65, 0.045))",
   borderRadius: 16,
   padding: "9px 12px",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.045)",
+  boxShadow: "inset 0 1px 0 rgba(28, 20, 24,0.045)",
 };
 
 const distanceStatusTitleStyle: React.CSSProperties = {
@@ -3541,14 +3541,14 @@ const selectedEdgePropertyGridStyle: React.CSSProperties = {
 const selectedEdgePropertyCardStyle: React.CSSProperties = {
   borderRadius: 10,
   padding: 10,
-  background: "rgba(255, 255, 255, 0.03)",
+  background: "rgba(28, 20, 24, 0.03)",
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
 };
 
 const pluginDockContentStyle: React.CSSProperties = {
   borderRadius: 16,
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
-  background: "rgba(255, 255, 255, 0.02)",
+  background: "rgba(28, 20, 24, 0.02)",
   padding: 14,
 };
 

package/explorer/src/workspaces/GraphWorkspace/MarkdownContentViewer.tsx

@@ -287,8 +287,8 @@ export function MarkdownContentViewer({
             <button type="button" onClick={() => void handleCopy()} style={copyBtnStyle} title="Copy raw content">
               {copied ? (
                 <>
-                  <Check size={12} color="#3fb950" style={{ marginRight: 4 }} aria-hidden="true" />
-                  <span style={{ color: "#3fb950", fontSize: 11 }}>Copied</span>
+                  <Check size={12} color="#22863a" style={{ marginRight: 4 }} aria-hidden="true" />
+                  <span style={{ color: "#22863a", fontSize: 11 }}>Copied</span>
                 </>
               ) : (
                 <>
@@ -460,7 +460,7 @@ const MARKDOWN_COMPONENTS: Components = {
       <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>{children}</table>
     </div>
   ),
-  thead: ({ children }) => <thead style={{ background: "rgba(255, 255, 255, 0.04)" }}>{children}</thead>,
+  thead: ({ children }) => <thead style={{ background: "rgba(28, 20, 24, 0.04)" }}>{children}</thead>,
   tbody: ({ children }) => <tbody>{children}</tbody>,
   tr: ({ children }) => <tr style={{ borderBottom: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}` }}>{children}</tr>,
   th: ({ children }) => <th style={{ padding: "6px 8px", textAlign: "left", fontWeight: 700, color: GRAPH_THEME.ui.text.strong, borderRight: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}` }}>{children}</th>,
@@ -483,7 +483,7 @@ const MARKDOWN_COMPONENTS: Components = {
 const viewerContainerStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
-  background: "rgba(255, 255, 255, 0.025)",
+  background: "rgba(28, 20, 24, 0.025)",
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
   borderRadius: 12,
   overflow: "hidden",
@@ -526,7 +526,7 @@ const copyBtnStyle: CSSProperties = {
   padding: "3px 8px",
   borderRadius: 6,
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
-  background: "rgba(255, 255, 255, 0.04)",
+  background: "rgba(28, 20, 24, 0.04)",
   color: GRAPH_THEME.ui.text.subtle,
   fontSize: 11,
   cursor: "pointer",
@@ -546,7 +546,7 @@ const errorStyle: CSSProperties = {
   justifyContent: "space-between",
   gap: 8,
   padding: "8px 12px",
-  color: "#ffb4ad",
+  color: "#552925",
   background: "rgba(248, 81, 73, 0.1)",
   borderBottom: "1px solid rgba(248, 81, 73, 0.25)",
   fontSize: 12,
@@ -556,7 +556,7 @@ const errorStyle: CSSProperties = {
 const errorActionStyle: CSSProperties = {
   ...copyBtnStyle,
   flexShrink: 0,
-  color: "#ffb4ad",
+  color: "#552925",
   border: "1px solid rgba(248, 81, 73, 0.32)",
 };
 
@@ -594,7 +594,7 @@ const sourcePreStyle: CSSProperties = {
   padding: 10,
   borderRadius: 8,
   background: "rgba(0, 0, 0, 0.3)",
-  border: "1px solid rgba(255, 255, 255, 0.05)",
+  border: "1px solid rgba(28, 20, 24, 0.05)",
   overflowX: "auto",
 };
 
@@ -660,7 +660,7 @@ const blockquoteStyle: CSSProperties = {
 };
 
 const linkStyle: CSSProperties = {
-  color: "#ff8fa0",
+  color: "#d9455e",
   textDecoration: "underline",
   textUnderlineOffset: "3px",
   wordBreak: "break-all",
@@ -670,7 +670,7 @@ const imageBadgeStyle: CSSProperties = {
   display: "inline-flex",
   alignItems: "center",
   padding: "3px 7px",
-  background: "rgba(255, 255, 255, 0.04)",
+  background: "rgba(28, 20, 24, 0.04)",
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
   borderRadius: 6,
   color: GRAPH_THEME.ui.text.muted,
@@ -683,9 +683,9 @@ const inlineCodeStyle: CSSProperties = {
   fontSize: 12,
   padding: "2px 5px",
   borderRadius: 4,
-  background: "rgba(255, 255, 255, 0.07)",
-  color: "#ffeaed",
-  border: "1px solid rgba(255, 255, 255, 0.08)",
+  background: "rgba(28, 20, 24, 0.07)",
+  color: "#2d1619",
+  border: "1px solid rgba(28, 20, 24, 0.08)",
 };
 
 const preBlockStyle: CSSProperties = {
@@ -693,7 +693,7 @@ const preBlockStyle: CSSProperties = {
   padding: 10,
   borderRadius: 8,
   background: "rgba(0, 0, 0, 0.35)",
-  border: "1px solid rgba(255, 255, 255, 0.08)",
+  border: "1px solid rgba(28, 20, 24, 0.08)",
   overflowX: "auto",
 };
 
@@ -701,5 +701,5 @@ const blockCodeStyle: CSSProperties = {
   fontFamily: "'JetBrains Mono', monospace",
   fontSize: 12,
   lineHeight: 1.5,
-  color: "#ffeaed",
+  color: "#2d1619",
 };

package/explorer/src/workspaces/GraphWorkspace/graphAnalytics.ts

@@ -64,7 +64,7 @@ function getNodeLabel(graphRef: GraphRef, nodeId: string): string {
 
 function getNodeColor(graphRef: GraphRef, nodeId: string): string {
   const attrs = graphRef.getNodeAttributes(nodeId) as NodeAttributes;
-  return String(attrs.baseColor || attrs.color || "#63E6FF");
+  return String(attrs.baseColor || attrs.color || "#0e8fb5");
 }
 
 function getNodeSemanticGroup(graphRef: GraphRef, nodeId: string): string {