-
+
setNameDraft(event.target.value)}
@@ -53,8 +57,8 @@ export function SpacesPanel({
placeholder="Notes (optional)"
aria-label="Space notes"
/>
-
-
+
+
-
+
setQuery(event.target.value)}
placeholder="Search spaces"
aria-label="Filter spaces"
/>
-
+
+
{visibleSpaces.length === 0 ? (
No spaces yet. Save the current investigation.
) : (
visibleSpaces.map((space) => (
-
{space.owner}
-
+
-
+
))
)}
diff --git a/codestory-ui/src/graph/GraphViewport.tsx b/codestory-ui/src/graph/GraphViewport.tsx
index c756814..c93a42e 100644
--- a/codestory-ui/src/graph/GraphViewport.tsx
+++ b/codestory-ui/src/graph/GraphViewport.tsx
@@ -17,6 +17,7 @@ import {
import { MermaidDiagram } from "../components/MermaidDiagram";
import type { EdgeKind, GraphArtifactDto } from "../generated/api";
+import { GRAPH_THEME } from "../theme/tokens";
import { buildDagreLayout } from "./layout/dagreLayout";
import { canonicalSeedFromGraphResponse } from "./layout/backendCanonical";
import { buildLegendRows, toReactFlowElements, type SemanticEdgeData } from "./layout/routing";
@@ -148,34 +149,34 @@ function isSimpleTypePillLabel(label: string): boolean {
function minimapNodeColor(node: Node): string {
const data = node.data;
if (data?.groupMode === "file") {
- return "#c6dfb4";
+ return GRAPH_THEME.minimap.nodeGroupFile;
}
if (data?.groupMode === "namespace") {
- return "#efc7cb";
+ return GRAPH_THEME.minimap.nodeGroupNamespace;
}
if (data?.isVirtualBundle) {
- return "#d4a63a";
+ return GRAPH_THEME.minimap.nodeVirtualBundle;
}
if (data?.center) {
- return "#3d434b";
+ return GRAPH_THEME.minimap.nodeCenter;
}
if (data?.kind === "FILE") {
- return "#9fc88e";
+ return GRAPH_THEME.minimap.nodeFile;
}
if (data?.nodeStyle === "card") {
- return "#c5cad2";
+ return GRAPH_THEME.minimap.nodeDefault;
}
- return "#d8dce3";
+ return GRAPH_THEME.minimap.nodeDefault;
}
function minimapNodeStrokeColor(node: Node): string {
if (node.data?.groupMode === "file") {
- return "#96bb7e";
+ return GRAPH_THEME.minimap.strokeGroupFile;
}
if (node.data?.groupMode === "namespace") {
- return "#dfb3b8";
+ return GRAPH_THEME.minimap.strokeGroupNamespace;
}
- return node.data?.center ? "#1f252c" : "#8f98a3";
+ return GRAPH_THEME.minimap.strokeDefault;
}
export function languageForPath(path: string | null): string {
@@ -1590,8 +1591,8 @@ export function GraphViewport({
pannable
zoomable
position="bottom-left"
- bgColor="rgb(251 251 249 / 0.92)"
- maskColor="rgb(39 44 52 / 0.16)"
+ bgColor={GRAPH_THEME.minimap.background}
+ maskColor={GRAPH_THEME.minimap.mask}
nodeColor={minimapNodeColor}
nodeStrokeColor={minimapNodeStrokeColor}
nodeBorderRadius={2}
diff --git a/codestory-ui/src/graph/layout/routing.ts b/codestory-ui/src/graph/layout/routing.ts
index d798356..e3de884 100644
--- a/codestory-ui/src/graph/layout/routing.ts
+++ b/codestory-ui/src/graph/layout/routing.ts
@@ -1,6 +1,7 @@
import { MarkerType, Position, type Edge, type Node } from "@xyflow/react";
import type { EdgeKind, GraphResponse, LayoutDirection } from "../../generated/api";
+import { EDGE_KIND_COLORS } from "../../theme/tokens";
import { PARITY_CONSTANTS } from "./parityConstants";
import type {
FlowNodeData,
@@ -30,19 +31,19 @@ export type SemanticEdgeData = {
};
export const EDGE_STYLE: Record = {
- MEMBER: { stroke: "#adb1b8", width: 2.0 },
- TYPE_USAGE: { stroke: "#7d8a99", width: 2.4 },
- USAGE: { stroke: "#1f84d6", width: 2.8 },
- CALL: { stroke: "#dfa72e", width: 2.8 },
- INHERITANCE: { stroke: "#7f7f86", width: 2.4 },
- OVERRIDE: { stroke: "#ad86c8", width: 2.4 },
- TYPE_ARGUMENT: { stroke: "#d37b93", width: 2.4 },
- TEMPLATE_SPECIALIZATION: { stroke: "#bc8fa3", width: 2.4 },
- INCLUDE: { stroke: "#87a988", width: 2.4 },
- IMPORT: { stroke: "#87a988", width: 2.4 },
- MACRO_USAGE: { stroke: "#b88b66", width: 2.4 },
- ANNOTATION_USAGE: { stroke: "#8f96b2", width: 2.4 },
- UNKNOWN: { stroke: "#8b8f96", width: 2.4 },
+ MEMBER: { stroke: EDGE_KIND_COLORS.MEMBER, width: 2.0 },
+ TYPE_USAGE: { stroke: EDGE_KIND_COLORS.TYPE_USAGE, width: 2.4 },
+ USAGE: { stroke: EDGE_KIND_COLORS.USAGE, width: 2.8 },
+ CALL: { stroke: EDGE_KIND_COLORS.CALL, width: 2.8 },
+ INHERITANCE: { stroke: EDGE_KIND_COLORS.INHERITANCE, width: 2.4 },
+ OVERRIDE: { stroke: EDGE_KIND_COLORS.OVERRIDE, width: 2.4 },
+ TYPE_ARGUMENT: { stroke: EDGE_KIND_COLORS.TYPE_ARGUMENT, width: 2.4 },
+ TEMPLATE_SPECIALIZATION: { stroke: EDGE_KIND_COLORS.TEMPLATE_SPECIALIZATION, width: 2.4 },
+ INCLUDE: { stroke: EDGE_KIND_COLORS.INCLUDE, width: 2.4 },
+ IMPORT: { stroke: EDGE_KIND_COLORS.IMPORT, width: 2.4 },
+ MACRO_USAGE: { stroke: EDGE_KIND_COLORS.MACRO_USAGE, width: 2.4 },
+ ANNOTATION_USAGE: { stroke: EDGE_KIND_COLORS.ANNOTATION_USAGE, width: 2.4 },
+ UNKNOWN: { stroke: EDGE_KIND_COLORS.UNKNOWN, width: 2.4 },
};
const CLOSED_TRIANGLE_KINDS = new Set([
diff --git a/codestory-ui/src/graph/viewport/exportActions.ts b/codestory-ui/src/graph/viewport/exportActions.ts
index 5de9cd6..10d3d84 100644
--- a/codestory-ui/src/graph/viewport/exportActions.ts
+++ b/codestory-ui/src/graph/viewport/exportActions.ts
@@ -1,6 +1,8 @@
import { useCallback, type RefObject } from "react";
import { toBlob, toJpeg, toPng, toSvg } from "html-to-image";
+import { GRAPH_THEME } from "../../theme/tokens";
+
function graphExportBaseName(graphTitle: string): string {
const raw = graphTitle
.trim()
@@ -57,7 +59,7 @@ export function useGraphExportActions({
const baseName = graphExportBaseName(graphTitle);
const options = {
cacheBust: true,
- backgroundColor: "#f1f1ef",
+ backgroundColor: GRAPH_THEME.exportBackground,
pixelRatio: 2,
};
try {
@@ -102,7 +104,7 @@ export function useGraphExportActions({
try {
const blob = await toBlob(element, {
cacheBust: true,
- backgroundColor: "#f1f1ef",
+ backgroundColor: GRAPH_THEME.exportBackground,
pixelRatio: 2,
});
if (!blob) {
diff --git a/codestory-ui/src/layout/AppShell.tsx b/codestory-ui/src/layout/AppShell.tsx
index 8955d81..8c72a01 100644
--- a/codestory-ui/src/layout/AppShell.tsx
+++ b/codestory-ui/src/layout/AppShell.tsx
@@ -1,4 +1,7 @@
import type { ReactNode } from "react";
+import { BookMarked, Compass, Settings2 } from "lucide-react";
+
+import { Button, Panel } from "../ui/primitives";
export const APP_SHELL_SECTIONS = [
{
@@ -33,6 +36,11 @@ export function AppShell({
workspace,
sectionContent,
}: AppShellProps) {
+ const sectionIcons: Record = {
+ investigate: ,
+ library: ,
+ settings: ,
+ };
const customContent = sectionContent?.[activeSection] ?? null;
const activeLabel = APP_SHELL_SECTIONS.find((section) => section.id === activeSection)?.label;
return (
@@ -44,16 +52,18 @@ export function AppShell({
{APP_SHELL_SECTIONS.map((section) => {
const isActive = section.id === activeSection;
return (
-
+
);
})}
@@ -64,13 +74,13 @@ export function AppShell({
) : customContent ? (
customContent
) : (
-
+
{activeLabel}
This section is not available right now. Return to Investigate to continue.
-