@mesantosrai/pipeline-canvas 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# @novoprotein/pipeline-canvas
+# @mesantosrai/pipeline-canvas
 
 A React component library for building visual pipeline/workflow canvases using React Flow.
 
@@ -60,8 +60,8 @@ npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react
 The library works completely standalone without any dependencies:
 
 ```tsx
-import { PipelineCanvas, PipelineCanvasProvider } from '@novoprotein/pipeline-canvas';
-import '@novoprotein/pipeline-canvas/style.css';
+import { PipelineCanvas, PipelineCanvasProvider } from '@mesantosrai/pipeline-canvas';
+import '@mesantosrai/pipeline-canvas/style.css';
 
 function App() {
   return (
@@ -90,8 +90,8 @@ import {
   PipelineCanvasProvider,
   type ApiClient,
   type AuthState 
-} from '@novoprotein/pipeline-canvas';
-import '@novoprotein/pipeline-canvas/style.css';
+} from '@mesantosrai/pipeline-canvas';
+import '@mesantosrai/pipeline-canvas/style.css';
 
 function App() {
   // Your API client (compatible with axios, fetch, or custom)
@@ -151,7 +151,7 @@ If you're using axios:
 
 ```tsx
 import axios from 'axios';
-import { PipelineCanvasProvider, type ApiClient } from '@novoprotein/pipeline-canvas';
+import { PipelineCanvasProvider, type ApiClient } from '@mesantosrai/pipeline-canvas';
 
 const apiClient: ApiClient = {
   get: (url: string, config?) => axios.get(url, config),
@@ -194,7 +194,7 @@ You can provide only the dependencies you need:
 ### Using the Store
 
 ```tsx
-import { usePipelineStore } from '@novoprotein/pipeline-canvas';
+import { usePipelineStore } from '@mesantosrai/pipeline-canvas';
 
 function MyComponent() {
   const { nodes, edges, addNode } = usePipelineStore();
@@ -215,7 +215,7 @@ function MyComponent() {
 You can also access dependencies directly from context:
 
 ```tsx
-import { usePipelineContext } from '@novoprotein/pipeline-canvas';
+import { usePipelineContext } from '@mesantosrai/pipeline-canvas';
 
 function MyComponent() {
   const { apiClient, authState, sessionId, getAuthHeaders } = usePipelineContext();
@@ -256,7 +256,7 @@ When dependencies are not provided:
 
 ```tsx
 import { useAuthStore } from './stores/authStore';
-import { PipelineCanvasProvider } from '@novoprotein/pipeline-canvas';
+import { PipelineCanvasProvider } from '@mesantosrai/pipeline-canvas';
 
 function App() {
   const user = useAuthStore(state => state.user);
@@ -281,7 +281,7 @@ function App() {
 ```tsx
 import { useContext } from 'react';
 import { AuthContext } from './AuthContext';
-import { PipelineCanvasProvider } from '@novoprotein/pipeline-canvas';
+import { PipelineCanvasProvider } from '@mesantosrai/pipeline-canvas';
 
 function App() {
   const { user, token } = useContext(AuthContext);
@@ -305,7 +305,7 @@ The library supports structured logging and error tracking through dependency in
 By default, the library uses a console logger that only logs in development mode:
 
 ```tsx
-import { PipelineCanvasProvider } from '@novoprotein/pipeline-canvas';
+import { PipelineCanvasProvider } from '@mesantosrai/pipeline-canvas';
 
 // No logger needed - uses default console logger (development only)
 <PipelineCanvasProvider>
@@ -321,7 +321,7 @@ Provide your own logger for structured logging:
 import { 
   PipelineCanvasProvider,
   type Logger 
-} from '@novoprotein/pipeline-canvas';
+} from '@mesantosrai/pipeline-canvas';
 
 const myLogger: Logger = {
   debug: (message, data) => {
@@ -356,7 +356,7 @@ import * as Sentry from '@sentry/react';
 import { 
   PipelineCanvasProvider,
   type ErrorReporter 
-} from '@novoprotein/pipeline-canvas';
+} from '@mesantosrai/pipeline-canvas';
 
 const errorReporter: ErrorReporter = {
   captureException: (error, context) => {
@@ -396,7 +396,7 @@ const errorReporter: ErrorReporter = {
 
 ```tsx
 import LogRocket from 'logrocket';
-import { PipelineCanvasProvider, type ErrorReporter } from '@novoprotein/pipeline-canvas';
+import { PipelineCanvasProvider, type ErrorReporter } from '@mesantosrai/pipeline-canvas';
 
 const errorReporter: ErrorReporter = {
   captureException: (error, context) => {
@@ -427,7 +427,7 @@ const errorReporter: ErrorReporter = {
 You can access the logger from context:
 
 ```tsx
-import { usePipelineContext } from '@novoprotein/pipeline-canvas';
+import { usePipelineContext } from '@mesantosrai/pipeline-canvas';
 
 function MyComponent() {
   const { logger } = usePipelineContext();
@@ -456,34 +456,152 @@ The library logs:
 - **No external calls**: Default logger only uses console (no network requests)
 - **Context-aware**: All logs include relevant context (pipeline ID, node ID, etc.)
 
-### Styling
+### Theming
 
-The library uses Tailwind CSS classes and shadcn/ui CSS variables. Make sure Tailwind is configured in your project:
+The library uses a **scoped theming system** with CSS variables prefixed with `--pc-` to avoid conflicts with your parent application's theme. This allows you to integrate the pipeline canvas into any app regardless of its existing styling.
+
+#### Basic Setup
+
+1. **Import the CSS file** in your main entry:
+
+```tsx
+// main.tsx or App.tsx
+import '@mesantosrai/pipeline-canvas/style.css';
+```
+
+2. **Configure Tailwind** to include the library's classes:
 
 ```js
 // tailwind.config.js
 module.exports = {
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@novoprotein/pipeline-canvas/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@mesantosrai/pipeline-canvas/**/*.{js,jsx,ts,tsx}',
   ],
   theme: {
-    extend: {
-      // shadcn/ui theme variables are included in the library's style.css
-    },
+    extend: {},
   },
-  // ... rest of config
 };
 ```
 
-Also import the CSS file in your main entry:
+#### Using the Theme Wrapper
+
+The `PipelineThemeWrapper` component provides theme isolation and supports light/dark modes:
 
 ```tsx
-// main.tsx or App.tsx
-import '@novoprotein/pipeline-canvas/style.css';
+import { 
+  PipelineCanvas, 
+  PipelineThemeWrapper,
+  PipelineCanvasProvider 
+} from '@mesantosrai/pipeline-canvas';
+
+// Option 1: Follow system preference (default)
+<PipelineThemeWrapper>
+  <PipelineCanvasProvider {...deps}>
+    <PipelineCanvas />
+  </PipelineCanvasProvider>
+</PipelineThemeWrapper>
+
+// Option 2: Force a specific theme
+<PipelineThemeWrapper theme="dark">
+  <PipelineCanvasProvider {...deps}>
+    <PipelineCanvas />
+  </PipelineCanvasProvider>
+</PipelineThemeWrapper>
+
+// Option 3: Sync with your app's theme state
+const [appTheme, setAppTheme] = useState<'light' | 'dark'>('dark');
+
+<PipelineThemeWrapper externalTheme={appTheme}>
+  <PipelineCanvasProvider {...deps}>
+    <PipelineCanvas />
+  </PipelineCanvasProvider>
+</PipelineThemeWrapper>
+```
+
+#### Theme Toggle Button
+
+Include a theme toggle button using the `PipelineThemeToggle` component:
+
+```tsx
+import { PipelineThemeToggle, PipelineThemeWrapper } from '@mesantosrai/pipeline-canvas';
+
+<PipelineThemeWrapper>
+  <div className="flex justify-end p-2">
+    <PipelineThemeToggle />
+  </div>
+  <PipelineCanvasProvider {...deps}>
+    <PipelineCanvas />
+  </PipelineCanvasProvider>
+</PipelineThemeWrapper>
+```
+
+#### Using the Theme Hook
+
+Access the current theme programmatically:
+
+```tsx
+import { usePipelineTheme, useIsDarkTheme } from '@mesantosrai/pipeline-canvas';
+
+function MyComponent() {
+  const { theme, resolvedTheme, setTheme, toggleTheme } = usePipelineTheme();
+  const isDark = useIsDarkTheme();
+
+  return (
+    <div>
+      <p>Current theme: {resolvedTheme}</p>
+      <button onClick={toggleTheme}>Toggle Theme</button>
+    </div>
+  );
+}
 ```
 
-The library includes shadcn/ui CSS variables for theming. The components support both light and dark themes via CSS variables.
+#### Customizing Theme Colors
+
+Override the CSS variables in your own stylesheet to customize colors:
+
+```css
+/* Your app's CSS file */
+.pipeline-canvas-root {
+  /* Light theme overrides */
+  --pc-primary: 210 100% 50%;
+  --pc-canvas-bg: 0 0% 98%;
+}
+
+.pipeline-canvas-root[data-theme="dark"] {
+  /* Dark theme overrides */
+  --pc-primary: 210 100% 60%;
+  --pc-canvas-bg: 220 20% 10%;
+}
+```
+
+#### Available CSS Variables
+
+| Variable | Description |
+|----------|-------------|
+| `--pc-background` | Main background color |
+| `--pc-foreground` | Main text color |
+| `--pc-card` | Card/panel background |
+| `--pc-primary` | Primary accent color |
+| `--pc-secondary` | Secondary color |
+| `--pc-muted` | Muted/disabled color |
+| `--pc-border` | Border color |
+| `--pc-canvas-bg` | Canvas background |
+| `--pc-toolbar-bg` | Toolbar background |
+| `--pc-sidebar-bg` | Sidebar background |
+| `--pc-panel-bg` | Panel background |
+| `--pc-text-primary` | Primary text |
+| `--pc-text-secondary` | Secondary text |
+| `--pc-text-muted` | Muted text |
+
+#### Theme Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Theme preference |
+| `externalTheme` | `'light' \| 'dark'` | - | External theme override from parent app |
+| `onThemeChange` | `(theme: 'light' \| 'dark') => void` | - | Callback when theme changes |
+| `className` | `string` | - | Additional CSS classes |
 
 ## Development
 
@@ -518,7 +636,12 @@ pipeline-canvas/
 │   ├── PipelineExecution.tsx
 │   ├── PipelineManager.tsx
 │   ├── CustomHandle.tsx
-│   └── ExecutionLogsPanel.tsx
+│   ├── ExecutionLogsPanel.tsx
+│   ├── PipelineThemeWrapper.tsx  # Theme isolation wrapper
+│   └── index.ts
+├── context/             # React contexts
+│   ├── PipelineContext.tsx
+│   └── ThemeContext.tsx          # Theme state management
 ├── nodes/               # Node type configurations (JSON)
 │   ├── input_node/
 │   ├── rfdiffusion_node/
@@ -533,7 +656,7 @@ pipeline-canvas/
 │   └── nodeLoader.ts
 ├── dist/                # Build output (generated)
 ├── index.ts             # Main export file
-├── style.css            # CSS styles
+├── style.css            # CSS styles (scoped --pc- variables)
 ├── package.json
 ├── tsconfig.json
 └── vite.config.ts

package/dist/components/ExecutionLogsPanel.mjs

@@ -1,10 +1,10 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { usePipelineStore as w } from "../store/pipelineStore.mjs";
-import { Loader2 as x, CheckCircle2 as f, FileInput as p, ChevronRight as L, Clock as I, ExternalLink as S, ChevronDown as g, XCircle as j, Atom as C, Dna as $, Sparkles as _ } from "lucide-react";
-const N = (t) => {
+import { Loader2 as x, CheckCircle2 as f, FileInput as g, ChevronRight as L, Clock as I, ExternalLink as S, ChevronDown as p, XCircle as j, Atom as C, Dna as $, Sparkles as _ } from "lucide-react";
+const v = (t) => {
   switch (t) {
     case "input_node":
-      return /* @__PURE__ */ e(p, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(g, { className: "w-4 h-4" });
     case "rfdiffusion_node":
       return /* @__PURE__ */ e(_, { className: "w-4 h-4" });
     case "proteinmpnn_node":
@@ -14,7 +14,7 @@ const N = (t) => {
     default:
       return /* @__PURE__ */ e("div", { className: "w-4 h-4 rounded bg-gray-600" });
   }
-}, b = (t) => {
+}, N = (t) => {
   switch (t) {
     case "input_node":
       return "text-blue-400";
@@ -27,29 +27,29 @@ const N = (t) => {
     default:
       return "text-gray-400";
   }
-}, i = (t) => {
+}, c = (t) => {
   if (t < 1e3) return `${t}ms`;
   if (t < 6e4) return `${(t / 1e3).toFixed(1)}s`;
-  const s = Math.floor(t / 6e4), n = Math.floor(t % 6e4 / 1e3);
-  return `${s}m ${n}s`;
-}, y = (t) => new Date(t).toLocaleTimeString("en-US", {
+  const r = Math.floor(t / 6e4), l = Math.floor(t % 6e4 / 1e3);
+  return `${r}m ${l}s`;
+}, b = (t) => new Date(t).toLocaleTimeString("en-US", {
   hour: "2-digit",
   minute: "2-digit",
   second: "2-digit",
   hour12: !1
-}), T = ({ log: t, isSelected: s, onSelect: n }) => /* @__PURE__ */ a(
+}), T = ({ log: t, isSelected: r, onSelect: l }) => /* @__PURE__ */ s(
   "div",
   {
-    onClick: n,
+    onClick: l,
     className: `
         group flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-all animate-slide-in
-        ${s ? "bg-blue-500/10 border-l-2 border-blue-400" : "hover:bg-gray-700/30 border-l-2 border-transparent"}
+        ${r ? "bg-blue-500/10 border-l-2 border-blue-400" : "hover:bg-gray-700/30 border-l-2 border-transparent"}
       `,
     children: [
       (() => {
         switch (t.status) {
           case "running":
-            return /* @__PURE__ */ a("div", { className: "relative", children: [
+            return /* @__PURE__ */ s("div", { className: "relative", children: [
               /* @__PURE__ */ e("div", { className: "w-5 h-5 rounded-full bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ e(x, { className: "w-3 h-3 animate-spin text-blue-400" }) }),
               /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-blue-500/30 animate-ping" })
             ] });
@@ -63,122 +63,122 @@ const N = (t) => {
             return /* @__PURE__ */ e("div", { className: "w-5 h-5 rounded-full bg-gray-600/20 flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-gray-500" }) });
         }
       })(),
-      /* @__PURE__ */ e("div", { className: `${b(t.nodeType)}`, children: N(t.nodeType) }),
-      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e("span", { className: `text-sm font-medium truncate ${s ? "text-gray-100" : "text-gray-300"}`, children: t.nodeLabel }) }) }),
-      t.duration !== void 0 && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 font-mono", children: i(t.duration) }),
-      /* @__PURE__ */ e(L, { className: `w-4 h-4 text-gray-500 transition-transform ${s ? "rotate-90" : ""}` })
+      /* @__PURE__ */ e("div", { className: `${N(t.nodeType)}`, children: v(t.nodeType) }),
+      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e("span", { className: `text-sm font-medium truncate ${r ? "text-gray-100" : "text-gray-300"}`, children: t.nodeLabel }) }) }),
+      t.duration !== void 0 && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 font-mono", children: c(t.duration) }),
+      /* @__PURE__ */ e(L, { className: `w-4 h-4 text-gray-500 transition-transform ${r ? "rotate-90" : ""}` })
     ]
   }
-), k = ({ log: t }) => /* @__PURE__ */ a("div", { className: "border-l border-gray-700/50 bg-[#1a1a2e] flex flex-col h-full", children: [
-  /* @__PURE__ */ a("div", { className: "px-4 py-3 border-b border-gray-700/50 bg-[#1e1e32]", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ e("div", { className: b(t.nodeType), children: N(t.nodeType) }),
-      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-gray-200", children: t.nodeLabel })
+), k = ({ log: t }) => /* @__PURE__ */ s("div", { className: "border-l border-gray-200 pc-bg-canvas flex flex-col h-full", children: [
+  /* @__PURE__ */ s("div", { className: "px-4 py-3 border-b border-gray-200 pc-bg-panel", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("div", { className: N(t.nodeType), children: v(t.nodeType) }),
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-[hsl(var(--pc-text-primary))]", children: t.nodeLabel })
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-4 mt-2 text-xs text-gray-500", children: [
-      t.duration !== void 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-4 mt-2 text-xs text-[hsl(var(--pc-text-muted))]", children: [
+      t.duration !== void 0 && /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ e(I, { className: "w-3 h-3" }),
-        /* @__PURE__ */ e("span", { children: i(t.duration) })
+        /* @__PURE__ */ e("span", { children: c(t.duration) })
       ] }),
-      t.startedAt && /* @__PURE__ */ a("span", { children: [
+      t.startedAt && /* @__PURE__ */ s("span", { children: [
         "Started at ",
-        y(t.startedAt)
+        b(t.startedAt)
       ] })
     ] }),
-    (t.status === "success" || t.status === "completed") && /* @__PURE__ */ a("button", { className: "mt-2 flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300 transition-colors", children: [
+    (t.status === "success" || t.status === "completed") && /* @__PURE__ */ s("button", { className: "mt-2 flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300 transition-colors", children: [
       /* @__PURE__ */ e(S, { className: "w-3 h-3" }),
       "View sub-execution"
     ] })
   ] }),
-  /* @__PURE__ */ a("div", { className: "px-4 py-3 border-b border-gray-700/50", children: [
-    /* @__PURE__ */ a("button", { className: "flex items-center gap-2 w-full", children: [
-      /* @__PURE__ */ e(g, { className: "w-4 h-4 text-gray-500" }),
-      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-300", children: "Input" })
+  /* @__PURE__ */ s("div", { className: "px-4 py-3 border-b border-gray-200", children: [
+    /* @__PURE__ */ s("button", { className: "flex items-center gap-2 w-full", children: [
+      /* @__PURE__ */ e(p, { className: "w-4 h-4 text-[hsl(var(--pc-text-muted))]" }),
+      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[hsl(var(--pc-text-secondary))]", children: "Input" })
     ] }),
-    /* @__PURE__ */ e("div", { className: "mt-3 bg-gray-900/50 rounded-lg p-3 text-xs font-mono text-gray-400 overflow-x-auto border border-gray-700/30", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap", children: JSON.stringify(t.input || { query: { message: "..." } }, null, 2) }) })
+    /* @__PURE__ */ e("div", { className: "mt-3 bg-[hsl(var(--pc-muted)/0.3)] rounded-lg p-3 text-xs font-mono text-[hsl(var(--pc-text-secondary))] overflow-x-auto border border-gray-200", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap", children: JSON.stringify(t.input || { query: { message: "..." } }, null, 2) }) })
   ] }),
-  /* @__PURE__ */ a("div", { className: "px-4 py-3 flex-1 overflow-y-auto", children: [
-    /* @__PURE__ */ a("button", { className: "flex items-center gap-2 w-full", children: [
-      /* @__PURE__ */ e(g, { className: "w-4 h-4 text-gray-500" }),
-      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-300", children: "Output" })
+  /* @__PURE__ */ s("div", { className: "px-4 py-3 flex-1 overflow-y-auto", children: [
+    /* @__PURE__ */ s("button", { className: "flex items-center gap-2 w-full", children: [
+      /* @__PURE__ */ e(p, { className: "w-4 h-4 text-[hsl(var(--pc-text-muted))]" }),
+      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[hsl(var(--pc-text-secondary))]", children: "Output" })
     ] }),
-    /* @__PURE__ */ e("div", { className: "mt-3 bg-gray-900/50 rounded-lg p-3 text-xs font-mono text-gray-400 overflow-x-auto border border-gray-700/30", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap", children: t.error ? /* @__PURE__ */ e("span", { className: "text-red-400", children: JSON.stringify({ error: t.error }, null, 2) }) : JSON.stringify(t.output || { message: "..." }, null, 2) }) })
+    /* @__PURE__ */ e("div", { className: "mt-3 bg-[hsl(var(--pc-muted)/0.3)] rounded-lg p-3 text-xs font-mono text-[hsl(var(--pc-text-secondary))] overflow-x-auto border border-gray-200", children: /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap", children: t.error ? /* @__PURE__ */ e("span", { className: "text-red-400", children: JSON.stringify({ error: t.error }, null, 2) }) : JSON.stringify(t.output || { message: "..." }, null, 2) }) })
   ] })
 ] }), J = () => {
   const {
     currentPipeline: t,
-    currentExecution: s,
-    selectedLogNodeId: n,
-    setSelectedLogNodeId: c,
+    currentExecution: r,
+    selectedLogNodeId: l,
+    setSelectedLogNodeId: i,
     isExecuting: d
-  } = w(), o = (s == null ? void 0 : s.logs) || [], l = o.length > 0 ? o : (t == null ? void 0 : t.nodes.map((r) => ({
-    nodeId: r.id,
-    nodeLabel: r.label,
-    nodeType: r.type,
-    status: r.status
-  }))) || [], m = l.find((r) => r.nodeId === n), u = l.filter((r) => r.status === "success" || r.status === "completed").length, h = l.reduce((r, v) => r + (v.duration || 0), 0);
-  return /* @__PURE__ */ a("div", { className: "h-full flex flex-col bg-[#1e1e32]", children: [
-    /* @__PURE__ */ a("div", { className: "px-4 py-3 border-b border-gray-700/50 bg-gradient-to-r from-[#1a1a2e] to-[#1e1e32]", children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-gray-200", children: d ? "Running..." : s ? "Execution Complete" : "Logs from Pipeline" }),
-          h > 0 && /* @__PURE__ */ a("span", { className: "ml-2 text-xs text-gray-500", children: [
+  } = w(), o = (r == null ? void 0 : r.logs) || [], n = o.length > 0 ? o : (t == null ? void 0 : t.nodes.map((a) => ({
+    nodeId: a.id,
+    nodeLabel: a.label,
+    nodeType: a.type,
+    status: a.status
+  }))) || [], m = n.find((a) => a.nodeId === l), u = n.filter((a) => a.status === "success" || a.status === "completed").length, h = n.reduce((a, y) => a + (y.duration || 0), 0);
+  return /* @__PURE__ */ s("div", { className: "h-full flex flex-col pc-bg-panel", children: [
+    /* @__PURE__ */ s("div", { className: "px-4 py-3 border-b border-gray-200 bg-gradient-to-r from-[hsl(var(--pc-canvas-bg))] to-[hsl(var(--pc-panel-bg))]", children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[hsl(var(--pc-text-primary))]", children: d ? "Running..." : r ? "Execution Complete" : "Logs from Pipeline" }),
+          h > 0 && /* @__PURE__ */ s("span", { className: "ml-2 text-xs text-[hsl(var(--pc-text-muted))]", children: [
             "| ",
-            i(h)
+            c(h)
           ] }),
-          (s == null ? void 0 : s.startedAt) && /* @__PURE__ */ a("span", { className: "ml-2 text-xs text-gray-500", children: [
+          (r == null ? void 0 : r.startedAt) && /* @__PURE__ */ s("span", { className: "ml-2 text-xs text-[hsl(var(--pc-text-muted))]", children: [
             "| Started at ",
-            y(s.startedAt)
+            b(r.startedAt)
           ] })
         ] }),
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ a("span", { className: "text-xs text-gray-500", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ s("span", { className: "text-xs text-[hsl(var(--pc-text-muted))]", children: [
             u,
             " / ",
-            l.length,
+            n.length,
             " nodes"
           ] }),
-          d && /* @__PURE__ */ a("span", { className: "relative flex h-2 w-2", children: [
+          d && /* @__PURE__ */ s("span", { className: "relative flex h-2 w-2", children: [
             /* @__PURE__ */ e("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
             /* @__PURE__ */ e("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
           ] })
         ] })
       ] }),
-      l.length > 0 && /* @__PURE__ */ e("div", { className: "mt-3 w-full bg-gray-700/50 rounded-full h-1.5 overflow-hidden", children: /* @__PURE__ */ e(
+      n.length > 0 && /* @__PURE__ */ e("div", { className: "mt-3 w-full bg-[hsl(var(--pc-muted)/0.5)] rounded-full h-1.5 overflow-hidden", children: /* @__PURE__ */ e(
         "div",
         {
           className: `h-1.5 rounded-full transition-all duration-500 ${d ? "bg-blue-500 animate-shimmer" : "bg-green-500"}`,
-          style: { width: `${u / l.length * 100}%` }
+          style: { width: `${u / n.length * 100}%` }
         }
       ) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex-1 flex min-h-0", children: [
-      /* @__PURE__ */ a("div", { className: "w-64 border-r border-gray-700/50 flex flex-col bg-[#1a1a2e]/50", children: [
-        /* @__PURE__ */ e("div", { className: "px-3 py-2.5 bg-gray-800/30 border-b border-gray-700/50", children: /* @__PURE__ */ a("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: [
+    /* @__PURE__ */ s("div", { className: "flex-1 flex min-h-0", children: [
+      /* @__PURE__ */ s("div", { className: "w-64 border-r border-gray-200 flex flex-col bg-[hsl(var(--pc-canvas-bg)/0.5)]", children: [
+        /* @__PURE__ */ e("div", { className: "px-3 py-2.5 bg-[hsl(var(--pc-muted)/0.3)] border-b border-gray-200", children: /* @__PURE__ */ s("span", { className: "text-xs font-medium text-[hsl(var(--pc-text-muted))] uppercase tracking-wider", children: [
           "Latest Logs from ",
           (t == null ? void 0 : t.name) || "Pipeline"
         ] }) }),
-        /* @__PURE__ */ a("div", { className: "flex-1 overflow-y-auto", children: [
-          /* @__PURE__ */ a("div", { className: "px-3 py-2.5 flex items-center gap-2 bg-gray-800/20 border-b border-gray-700/30", children: [
+        /* @__PURE__ */ s("div", { className: "flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ s("div", { className: "px-3 py-2.5 flex items-center gap-2 bg-[hsl(var(--pc-muted)/0.2)] border-b border-gray-200", children: [
             /* @__PURE__ */ e("div", { className: "w-5 h-5 rounded bg-green-500/20 flex items-center justify-center", children: d ? /* @__PURE__ */ e(x, { className: "w-3 h-3 animate-spin text-green-400" }) : /* @__PURE__ */ e(f, { className: "w-3 h-3 text-green-400" }) }),
-            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-300", children: (t == null ? void 0 : t.name) || "Pipeline" })
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[hsl(var(--pc-text-secondary))]", children: (t == null ? void 0 : t.name) || "Pipeline" })
           ] }),
-          /* @__PURE__ */ e("div", { className: "pl-2", children: l.map((r) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "pl-2", children: n.map((a) => /* @__PURE__ */ e(
             T,
             {
-              log: r,
-              isSelected: n === r.nodeId,
-              onSelect: () => c(
-                n === r.nodeId ? null : r.nodeId
+              log: a,
+              isSelected: l === a.nodeId,
+              onSelect: () => i(
+                l === a.nodeId ? null : a.nodeId
               )
             },
-            r.nodeId
+            a.nodeId
           )) })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: m ? /* @__PURE__ */ e(k, { log: m }) : /* @__PURE__ */ e("div", { className: "h-full flex items-center justify-center bg-[#1a1a2e]", children: /* @__PURE__ */ a("div", { className: "text-center", children: [
-        /* @__PURE__ */ e("div", { className: "w-12 h-12 rounded-full bg-gray-800/50 flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ e(p, { className: "w-5 h-5 text-gray-600" }) }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: "Select a node to view execution details" })
+      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: m ? /* @__PURE__ */ e(k, { log: m }) : /* @__PURE__ */ e("div", { className: "h-full flex items-center justify-center pc-bg-canvas", children: /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e("div", { className: "w-12 h-12 rounded-full bg-[hsl(var(--pc-muted)/0.5)] flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-[hsl(var(--pc-text-muted))]" }) }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-[hsl(var(--pc-text-muted))]", children: "Select a node to view execution details" })
       ] }) }) })
     ] })
   ] });