@sleetdrop/dsh-plugin-topology 0.3.1 → 0.5.0

package/lib/index.d.ts

@@ -49,6 +49,6 @@ export declare class PluginTopologyService extends TypertRemoteService {
      * @param rankdir - Graphviz layout direction for `dot`/`svg`; ignored by `json`.
      * @returns the serialized document for the format.
      */
-    render(format: RenderFormat, rankdir: Rankdir): Promise<string>;
+    render(format: RenderFormat, rankdir: Rankdir, theme?: 'light' | 'dark'): Promise<string>;
 }
 export default PluginTopologyService;

package/lib/index.js

@@ -55,7 +55,7 @@ import { Context } from '@deepseek-ai/cordis';
 import { Graphviz } from '@hpcc-js/wasm-graphviz';
 import { Remote, TypertRemoteService } from '@deepseek-ai/dsh-typert-protocol';
 import { analyzeGraph } from "./metrics.js";
-import { composeGraphvizSvgs, isolatedNodes, renderCompleteDot, renderDot, renderIsolatedDot, renderJson } from "./render.js";
+import { composeGraphvizSvgs, DARK_PALETTE, isolatedNodes, LIGHT_PALETTE, renderCompleteDot, renderDot, renderIsolatedDot, renderJson } from "./render.js";
 export { analyzeGraph, collapse } from "./metrics.js";
 export { composeGraphvizSvgs, isolatedNodes, nodeLink, renderCompleteDot, renderDot, renderIsolatedDot, renderJson } from "./render.js";
 /** Map a Cordis fiber state number to its stable name. */
@@ -179,18 +179,19 @@ let PluginTopologyService = (() => {
          * @param rankdir - Graphviz layout direction for `dot`/`svg`; ignored by `json`.
          * @returns the serialized document for the format.
          */
-        async render(format, rankdir) {
+        async render(format, rankdir, theme) {
+            const palette = theme === 'dark' ? DARK_PALETTE : LIGHT_PALETTE;
             const analysis = this.analyze();
             if (format === 'json')
                 return renderJson(analysis);
             if (format === 'dot')
-                return renderCompleteDot(analysis, rankdir);
+                return renderCompleteDot(analysis, rankdir, palette);
             const graphviz = await (this.graphvizPromise ??= Graphviz.load());
-            const mainSvg = graphviz.dot(renderDot(analysis, rankdir), 'svg');
+            const mainSvg = graphviz.dot(renderDot(analysis, rankdir, palette), 'svg');
             if (isolatedNodes(analysis).length === 0)
                 return mainSvg;
-            const isolatedSvg = graphviz.dot(renderIsolatedDot(analysis, rankdir), 'svg');
-            return composeGraphvizSvgs(mainSvg, isolatedSvg, rankdir);
+            const isolatedSvg = graphviz.dot(renderIsolatedDot(analysis, rankdir, palette), 'svg');
+            return composeGraphvizSvgs(mainSvg, isolatedSvg, rankdir, palette.canvas);
         }
     };
 })();

package/lib/render.d.ts

@@ -10,6 +10,22 @@
  * @module @sleetdrop/dsh-plugin-topology/render
  */
 import type { GraphMetrics, PluginNode, PluginState, Rankdir, TopologyAnalysis } from './types.ts';
+/** Color palette for DOT rendering, keyed by theme. */
+export interface DotPalette {
+    /** Graph background; matches the app viewport so the inline SVG looks seamless. */
+    readonly canvas: string;
+    readonly nodeFill: string;
+    readonly nodeStroke: string;
+    readonly nodeFont: string;
+    readonly edgeStroke: string;
+    readonly edgeFont: string;
+    readonly errorStroke: string;
+    readonly errorFont: string;
+    readonly clusterFill: string;
+    readonly clusterStroke: string;
+}
+export declare const LIGHT_PALETTE: DotPalette;
+export declare const DARK_PALETTE: DotPalette;
 /** One plugin node with its metrics in the node-link document. */
 export interface NodeLinkNode {
     readonly id: string;
@@ -52,21 +68,22 @@ export declare function renderJson(analysis: TopologyAnalysis): string;
  * never stretch the layout. Plugins with an unresolved dependency get a red
  * stroke.
  */
-export declare function renderDot(analysis: TopologyAnalysis, rankdir: Rankdir): string;
+export declare function renderDot(analysis: TopologyAnalysis, rankdir: Rankdir, palette?: DotPalette): string;
 /** Plugins with no incident dependency edge (and not the synthetic root). */
 export declare function isolatedNodes(analysis: TopologyAnalysis): readonly PluginNode[];
 /** Serialize the isolated plugins as a standalone dashed-cluster DOT graph. */
-export declare function renderIsolatedDot(analysis: TopologyAnalysis, rankdir: Rankdir): string;
+export declare function renderIsolatedDot(analysis: TopologyAnalysis, rankdir: Rankdir, palette?: DotPalette): string;
 /**
  * The complete DOT source: every plugin instance (connected and isolated) with
  * all dependency edges, isolated ones listed in a dashed cluster. Aligned with
  * the JSON export; used for the downloadable DOT. The SVG split (main/isolated)
  * is an internal layout tradeoff and is not exposed here.
  */
-export declare function renderCompleteDot(analysis: TopologyAnalysis, rankdir: Rankdir): string;
+export declare function renderCompleteDot(analysis: TopologyAnalysis, rankdir: Rankdir, palette?: DotPalette): string;
 /**
  * Compose two Graphviz SVGs into one document. The isolated graph is placed to
  * the side (LR) or below (TB) of the main graph with a fixed gap, and centered
- * along the graph's perpendicular axis, so the exported SVG is one image.
+ * along the graph's perpendicular axis, so the exported SVG is one image. A
+ * canvas rect behind both keeps the gap opaque instead of showing through.
  */
-export declare function composeGraphvizSvgs(main: string, isolated: string, rankdir: Rankdir): string;
+export declare function composeGraphvizSvgs(main: string, isolated: string, rankdir: Rankdir, canvas?: string): string;

package/lib/render.js

@@ -9,6 +9,31 @@
  *
  * @module @sleetdrop/dsh-plugin-topology/render
  */
+export const LIGHT_PALETTE = {
+    canvas: '#ffffff',
+    nodeFill: '#ffffff',
+    nodeStroke: '#e2e8f0',
+    nodeFont: '#334155',
+    edgeStroke: '#e2e8f0',
+    edgeFont: '#94a3b8',
+    errorStroke: '#ec1313',
+    errorFont: '#ec1313',
+    clusterFill: '#f8fafc',
+    clusterStroke: '#94a3b8',
+};
+export const DARK_PALETTE = {
+    /** DeepSeek Harness dark `--dsw-alias-bg-layer-1`. */
+    canvas: '#232324',
+    nodeFill: '#2c2c2e',
+    nodeStroke: '#ffffff29',
+    nodeFont: '#e2e8f0',
+    edgeStroke: '#ffffff1f',
+    edgeFont: '#81858c',
+    errorStroke: '#f25a5a',
+    errorFont: '#f25a5a',
+    clusterFill: '#151517',
+    clusterStroke: '#81858c',
+};
 /** Merge the collapsed graph and its metrics into a node-link document. */
 export function nodeLink(analysis) {
     const nodes = analysis.collapsed.nodes.map((node) => {
@@ -57,7 +82,7 @@ function escapeDot(value) {
  * never stretch the layout. Plugins with an unresolved dependency get a red
  * stroke.
  */
-export function renderDot(analysis, rankdir) {
+export function renderDot(analysis, rankdir, palette = LIGHT_PALETTE) {
     const unresolvedIds = new Set(analysis.graph.unresolved.map(dep => dep.plugin));
     const nodes = analysis.collapsed.nodes;
     const ROOT_ID = 'p:0';
@@ -73,15 +98,16 @@ export function renderDot(analysis, rankdir) {
     const lines = [
         'digraph plugin_topology {',
         `  rankdir=${rankdir};`,
+        `  bgcolor="${palette.canvas}";`,
         '  nodesep=0.3;',
         '  ranksep=0.7;',
         '  splines=true;',
-        '  node [shape=oval, style="filled", fillcolor="#ffffff", color="#cbd5e1", fontcolor="#64748b", penwidth=0.8, fontname="Helvetica", fontsize=8, margin="0.16,0.11"];',
-        '  edge [color="#cbd5e1", penwidth=0.8, arrowsize=0.55, fontname="Helvetica", fontsize=7, fontcolor="#94a3b8"];',
+        `  node [shape=oval, style="filled", fillcolor="${palette.nodeFill}", color="${palette.nodeStroke}", fontcolor="${palette.nodeFont}", penwidth=0.8, fontname="Helvetica", fontsize=8, margin="0.16,0.11"];`,
+        `  edge [color="${palette.edgeStroke}", penwidth=0.8, arrowsize=0.55, fontname="Helvetica", fontsize=7, fontcolor="${palette.edgeFont}"];`,
     ];
     for (const node of merged.nodes) {
-        const stroke = node.unresolved ? ', color="#dc2626", fontcolor="#dc2626", penwidth=1.5' : '';
-        lines.push(`  "${node.id}" [label="${mergedLabel(node)}"${stroke}];`);
+        const stroke = node.unresolved ? `, color="${palette.errorStroke}", fontcolor="${palette.errorFont}", penwidth=1.5` : '';
+        lines.push(`  "${node.id}" [id="node-${node.id}", label="${mergedLabel(node)}"${stroke}];`);
     }
     const seen = new Set();
     for (const edge of analysis.collapsed.edges) {
@@ -143,22 +169,23 @@ export function isolatedNodes(analysis) {
     return analysis.collapsed.nodes.filter(node => node.id !== 'p:0' && !connected.has(node.id));
 }
 /** Serialize the isolated plugins as a standalone dashed-cluster DOT graph. */
-export function renderIsolatedDot(analysis, rankdir) {
+export function renderIsolatedDot(analysis, rankdir, palette = LIGHT_PALETTE) {
     const isolated = isolatedNodes(analysis);
     const merged = mergeByName(isolated, new Set());
     const lines = [
         'digraph plugin_topology_isolated {',
         `  rankdir=${rankdir};`,
+        `  bgcolor="${palette.canvas}";`,
         '  nodesep=0.18;',
         '  ranksep=0.4;',
-        '  node [shape=oval, style="filled", fillcolor="#ffffff", color="#cbd5e1", fontcolor="#64748b", penwidth=0.8, fontname="Helvetica", fontsize=8, margin="0.16,0.11"];',
+        `  node [shape=oval, style="filled", fillcolor="${palette.nodeFill}", color="${palette.nodeStroke}", fontcolor="${palette.nodeFont}", penwidth=0.8, fontname="Helvetica", fontsize=8, margin="0.16,0.11"];`,
         '  subgraph "cluster_isolated" {',
         '    label="isolated";',
-        '    style="rounded,dashed"; fillcolor="#f8fafc"; color="#94a3b8"; fontsize=9; fontcolor="#64748b";',
+        `    style="rounded,dashed"; fillcolor="${palette.clusterFill}"; color="${palette.clusterStroke}"; fontsize=9; fontcolor="${palette.nodeFont}";`,
         '    rank=same;',
     ];
     for (const node of merged.nodes) {
-        lines.push(`    "${node.id}" [label="${mergedLabel(node)}"];`);
+        lines.push(`    "${node.id}" [id="node-${node.id}", label="${mergedLabel(node)}"];`);
     }
     lines.push('  }');
     lines.push('}');
@@ -174,24 +201,25 @@ function instanceLabel(node) {
  * the JSON export; used for the downloadable DOT. The SVG split (main/isolated)
  * is an internal layout tradeoff and is not exposed here.
  */
-export function renderCompleteDot(analysis, rankdir) {
+export function renderCompleteDot(analysis, rankdir, palette = LIGHT_PALETTE) {
     const unresolvedIds = new Set(analysis.graph.unresolved.map(dep => dep.plugin));
     const isolated = isolatedNodes(analysis);
     const isolatedIds = new Set(isolated.map(node => node.id));
     const lines = [
         'digraph plugin_topology {',
         `  rankdir=${rankdir};`,
+        `  bgcolor="${palette.canvas}";`,
         '  nodesep=0.3;',
         '  ranksep=0.7;',
         '  splines=true;',
-        '  node [shape=oval, style="filled", fillcolor="#ffffff", color="#cbd5e1", fontcolor="#64748b", penwidth=0.8, fontname="Helvetica", fontsize=8, margin="0.16,0.11"];',
-        '  edge [color="#cbd5e1", penwidth=0.8, arrowsize=0.55, fontname="Helvetica", fontsize=7, fontcolor="#94a3b8"];',
+        `  node [shape=oval, style="filled", fillcolor="${palette.nodeFill}", color="${palette.nodeStroke}", fontcolor="${palette.nodeFont}", penwidth=0.8, fontname="Helvetica", fontsize=8, margin="0.16,0.11"];`,
+        `  edge [color="${palette.edgeStroke}", penwidth=0.8, arrowsize=0.55, fontname="Helvetica", fontsize=7, fontcolor="${palette.edgeFont}"];`,
     ];
     for (const node of analysis.collapsed.nodes) {
         if (isolatedIds.has(node.id))
             continue;
-        const stroke = unresolvedIds.has(node.id) ? ', color="#dc2626", fontcolor="#dc2626", penwidth=1.5' : '';
-        lines.push(`  "${node.id}" [label="${instanceLabel(node)}"${stroke}];`);
+        const stroke = unresolvedIds.has(node.id) ? `, color="${palette.errorStroke}", fontcolor="${palette.errorFont}", penwidth=1.5` : '';
+        lines.push(`  "${node.id}" [id="node-${node.id}", label="${instanceLabel(node)}"${stroke}];`);
     }
     for (const edge of analysis.collapsed.edges) {
         lines.push(`  "${edge.source}" -> "${edge.target}" [label="${escapeDot(edge.service)}"];`);
@@ -199,10 +227,10 @@ export function renderCompleteDot(analysis, rankdir) {
     if (isolated.length > 0) {
         lines.push('  subgraph "cluster_isolated" {');
         lines.push('    label="isolated";');
-        lines.push('    style="rounded,dashed"; fillcolor="#f8fafc"; color="#94a3b8"; fontsize=9; fontcolor="#64748b";');
+        lines.push(`    style="rounded,dashed"; fillcolor="${palette.clusterFill}"; color="${palette.clusterStroke}"; fontsize=9; fontcolor="${palette.nodeFont}";`);
         lines.push('    rank=same;');
         for (const node of isolated) {
-            lines.push(`    "${node.id}" [label="${instanceLabel(node)}"];`);
+            lines.push(`    "${node.id}" [id="node-${node.id}", label="${instanceLabel(node)}"];`);
         }
         lines.push('  }');
     }
@@ -226,9 +254,10 @@ function splitSvg(svg) {
 /**
  * Compose two Graphviz SVGs into one document. The isolated graph is placed to
  * the side (LR) or below (TB) of the main graph with a fixed gap, and centered
- * along the graph's perpendicular axis, so the exported SVG is one image.
+ * along the graph's perpendicular axis, so the exported SVG is one image. A
+ * canvas rect behind both keeps the gap opaque instead of showing through.
  */
-export function composeGraphvizSvgs(main, isolated, rankdir) {
+export function composeGraphvizSvgs(main, isolated, rankdir, canvas = '#ffffff') {
     const m = splitSvg(main);
     const iso = splitSvg(isolated);
     if (iso.width === 0 || iso.height === 0)
@@ -258,5 +287,5 @@ export function composeGraphvizSvgs(main, isolated, rankdir) {
         width = Math.max(m.width, ix + iso.width);
         height = m.height + gap + iso.height;
     }
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img"><g transform="translate(${mx},${my})">${m.inner}</g><g transform="translate(${ix},${iy})">${isoInner}</g></svg>`;
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img"><rect x="0" y="0" width="${width}" height="${height}" fill="${canvas}"/><g transform="translate(${mx},${my})">${m.inner}</g><g transform="translate(${ix},${iy})">${isoInner}</g></svg>`;
 }

package/lib/typert.d.ts

@@ -26,7 +26,7 @@ export declare const TYPERT: {
         result: {
             mode: string;
             typeSymbol: string;
-            schema: z.ZodObject<{
+            create: () => z.ZodObject<{
                 graph: z.ZodReadonly<z.ZodObject<{
                     kind: z.ZodReadonly<z.ZodLiteral<"bipartite">>;
                     generatedAt: z.ZodReadonly<z.ZodString>;
@@ -112,8 +112,9 @@ export declare const TYPERT: {
             codec: {
                 mode: string;
                 typeSymbol: string;
-                schema: z.ZodUnion<readonly [z.ZodLiteral<"json">, z.ZodLiteral<"dot">, z.ZodLiteral<"svg">]>;
+                create: () => z.ZodUnion<readonly [z.ZodLiteral<"json">, z.ZodLiteral<"dot">, z.ZodLiteral<"svg">]>;
             };
+            acceptsUndefined?: never;
         } | {
             name: string;
             wire: string;
@@ -121,13 +122,24 @@ export declare const TYPERT: {
             codec: {
                 mode: string;
                 typeSymbol: string;
-                schema: z.ZodUnion<readonly [z.ZodLiteral<"TB">, z.ZodLiteral<"LR">]>;
+                create: () => z.ZodUnion<readonly [z.ZodLiteral<"TB">, z.ZodLiteral<"LR">]>;
+            };
+            acceptsUndefined?: never;
+        } | {
+            name: string;
+            wire: string;
+            source: string;
+            acceptsUndefined: boolean;
+            codec: {
+                mode: string;
+                typeSymbol: string;
+                create: () => z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"light">, z.ZodLiteral<"dark">]>>;
             };
         })[];
         result: {
             mode: string;
             typeSymbol: string;
-            schema: z.ZodString;
+            create: () => z.ZodString;
         };
     })[];
     model: {

package/lib/typert.js

@@ -95,7 +95,7 @@ export const TYPERT = {
             result: {
                 mode: 'strict',
                 typeSymbol: '@sleetdrop/dsh-plugin-topology/types#TopologyAnalysis',
-                schema: topologyAnalysisSchema,
+                create: () => topologyAnalysisSchema,
             },
         },
         {
@@ -112,7 +112,7 @@ export const TYPERT = {
                     codec: {
                         mode: 'strict',
                         typeSymbol: '@sleetdrop/dsh-plugin-topology/types#RenderFormat',
-                        schema: z.union([z.literal('json'), z.literal('dot'), z.literal('svg')]),
+                        create: () => z.union([z.literal('json'), z.literal('dot'), z.literal('svg')]),
                     },
                 },
                 {
@@ -122,14 +122,25 @@ export const TYPERT = {
                     codec: {
                         mode: 'strict',
                         typeSymbol: '@sleetdrop/dsh-plugin-topology/types#Rankdir',
-                        schema: z.union([z.literal('TB'), z.literal('LR')]),
+                        create: () => z.union([z.literal('TB'), z.literal('LR')]),
+                    },
+                },
+                {
+                    name: 'theme',
+                    wire: 'theme',
+                    source: 'json',
+                    acceptsUndefined: true,
+                    codec: {
+                        mode: 'strict',
+                        typeSymbol: '@sleetdrop/dsh-plugin-topology/types#Theme',
+                        create: () => z.union([z.literal('light'), z.literal('dark')]).optional(),
                     },
                 },
             ],
             result: {
                 mode: 'strict',
                 typeSymbol: '@sleetdrop/dsh-plugin-topology#pluginTopology/render:result',
-                schema: z.string(),
+                create: () => z.string(),
             },
         },
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleetdrop/dsh-plugin-topology",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Plugin dependency graph inspector for DeepSeek Harness: a host service that snapshots the live Cordis plugin fiber tree, a graph.render tool for the model, and a browser panel that renders the plugin/service topology as a zoomable graph with metrics, legend, and unresolved-dependency table.",
   "license": "MIT",
   "repository": {
@@ -70,29 +70,29 @@
     }
   },
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-locale": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-store": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-connection": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-ui-sidebar": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-tools": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-typert-protocol": "^0.1.5-rc.3",
-    "@deepseek-ai/dsh-invariants": "^0.1.5-rc.3"
+    "@deepseek-ai/cordis": "^4.0.4",
+    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-connection": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-sidebar": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-tools": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-typert-protocol": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-invariants": "^0.2.0-rc.2"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "4.0.2",
-    "@deepseek-ai/dsh-api-remotes": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-locale": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-store": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-connection": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-ui-sidebar": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-tools": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-typert-protocol": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-invariants": "0.1.5-rc.3",
-    "@deepseek-ai/dsh-client-ui-slots": "0.1.5-rc.3",
+    "@deepseek-ai/cordis": "4.0.4",
+    "@deepseek-ai/dsh-api-remotes": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-connection": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-sidebar": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-tools": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-typert-protocol": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-invariants": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.2",
     "@types/node": "^24.0.0",
     "@types/react": "~18.3.1",
     "react": "^18.2.0",