@swarmclawai/swarmclaw 1.9.34 → 1.9.37

package/src/app/globals.css

@@ -144,6 +144,164 @@
   --command-header: rgba(0,0,0,0.3);
 }
 
+.light {
+  --background: color-mix(in srgb, var(--neutral-tint) 10%, #fff);
+  --foreground: #1f2937;
+  --card: color-mix(in srgb, var(--neutral-tint) 8%, #fff);
+  --card-foreground: #1f2937;
+  --popover: color-mix(in srgb, var(--neutral-tint) 8%, #fff);
+  --popover-foreground: #1f2937;
+  --primary: #4f46e5;
+  --primary-foreground: #ffffff;
+  --secondary: color-mix(in srgb, var(--neutral-tint) 12%, #fff);
+  --secondary-foreground: #253047;
+  --muted: color-mix(in srgb, var(--neutral-tint) 10%, #fff);
+  --muted-foreground: #5f6b85;
+  --accent: #4f46e5;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --border: rgba(31,41,55,0.12);
+  --input: rgba(31,41,55,0.10);
+  --ring: rgba(79,70,229,0.38);
+  --sidebar: color-mix(in srgb, var(--neutral-tint) 9%, #fff);
+  --sidebar-foreground: #1f2937;
+  --sidebar-primary: #4f46e5;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(79,70,229,0.09);
+  --sidebar-accent-foreground: #253047;
+  --sidebar-border: rgba(31,41,55,0.11);
+  --sidebar-ring: rgba(79,70,229,0.35);
+
+  --color-bg: color-mix(in srgb, var(--neutral-tint) 10%, #fff);
+  --color-raised: color-mix(in srgb, var(--neutral-tint) 8%, #fff);
+  --color-surface: color-mix(in srgb, var(--neutral-tint) 14%, #fff);
+  --color-surface-2: color-mix(in srgb, var(--neutral-tint) 20%, #fff);
+  --color-surface-3: color-mix(in srgb, var(--neutral-tint) 24%, #fff);
+  --color-border-hi: rgba(31,41,55,0.12);
+  --color-border-focus: rgba(79,70,229,0.45);
+  --color-text: #1f2937;
+  --color-text-2: #4b5568;
+  --color-text-3: #6b7280;
+  --color-accent-soft: rgba(79,70,229,0.09);
+  --color-accent-glow: rgba(79,70,229,0.16);
+  --color-accent-bright: #4f46e5;
+  --color-user-text: #fff;
+  --color-success: #059669;
+  --color-success-soft: rgba(5,150,105,0.10);
+  --color-danger: #dc2626;
+  --color-danger-soft: rgba(220,38,38,0.10);
+  --color-shereen: #db2777;
+  --color-user-bubble: #4f46e5;
+  --color-user-bubble-2: #6366f1;
+  --color-ai-bubble: #f4f6fb;
+  --color-glass: rgba(255,255,255,0.82);
+  --color-glass-border: rgba(31,41,55,0.10);
+
+  --status-idle-bg: rgba(31,41,55,0.05);
+  --status-idle-border: rgba(31,41,55,0.10);
+  --status-idle-fg: #5f6b85;
+  --status-running-bg: rgba(5,150,105,0.10);
+  --status-running-border: rgba(5,150,105,0.18);
+  --status-running-fg: #047857;
+  --status-error-bg: rgba(220,38,38,0.10);
+  --status-error-border: rgba(220,38,38,0.18);
+  --status-error-fg: #dc2626;
+  --status-connecting-bg: rgba(217,119,6,0.10);
+  --status-connecting-border: rgba(217,119,6,0.18);
+  --status-connecting-fg: #b45309;
+  --status-connected-bg: rgba(2,132,199,0.10);
+  --status-connected-border: rgba(2,132,199,0.18);
+  --status-connected-fg: #0369a1;
+  --status-approval-bg: rgba(234,88,12,0.10);
+  --status-approval-border: rgba(234,88,12,0.18);
+  --status-approval-fg: #c2410c;
+
+  --command-bg: #ffffff;
+  --command-border: rgba(31,41,55,0.12);
+  --command-header: rgba(31,41,55,0.04);
+}
+
+.light .bg-white\/\[0\.01\] { background-color: rgba(31,41,55,0.01) !important; }
+.light .bg-white\/\[0\.02\] { background-color: rgba(31,41,55,0.025) !important; }
+.light .bg-white\/\[0\.025\] { background-color: rgba(31,41,55,0.03) !important; }
+.light .bg-white\/\[0\.03\] { background-color: rgba(31,41,55,0.035) !important; }
+.light .bg-white\/\[0\.035\] { background-color: rgba(31,41,55,0.04) !important; }
+.light .bg-white\/\[0\.04\] { background-color: rgba(31,41,55,0.045) !important; }
+.light .bg-white\/\[0\.05\] { background-color: rgba(31,41,55,0.055) !important; }
+.light .bg-white\/\[0\.06\] { background-color: rgba(31,41,55,0.065) !important; }
+.light .bg-white\/\[0\.07\] { background-color: rgba(31,41,55,0.075) !important; }
+.light .bg-white\/\[0\.08\] { background-color: rgba(31,41,55,0.085) !important; }
+.light .bg-white\/\[0\.10\],
+.light .bg-white\/\[0\.1\] { background-color: rgba(31,41,55,0.10) !important; }
+.light .bg-white\/\[0\.12\] { background-color: rgba(31,41,55,0.12) !important; }
+.light .bg-white\/\[0\.15\] { background-color: rgba(31,41,55,0.15) !important; }
+.light .bg-white\/\[0\.16\] { background-color: rgba(31,41,55,0.16) !important; }
+.light .bg-white\/\[0\.18\] { background-color: rgba(31,41,55,0.18) !important; }
+.light .bg-white\/\[0\.2\],
+.light .bg-white\/\[0\.20\] { background-color: rgba(31,41,55,0.20) !important; }
+.light .bg-white\/\[0\.22\] { background-color: rgba(31,41,55,0.22) !important; }
+.light .bg-white\/\[0\.45\] { background-color: rgba(31,41,55,0.45) !important; }
+
+.light .border-white\/\[0\.03\] { border-color: rgba(31,41,55,0.07) !important; }
+.light .border-white\/\[0\.04\] { border-color: rgba(31,41,55,0.08) !important; }
+.light .border-white\/\[0\.05\] { border-color: rgba(31,41,55,0.09) !important; }
+.light .border-white\/\[0\.06\] { border-color: rgba(31,41,55,0.10) !important; }
+.light .border-white\/\[0\.07\] { border-color: rgba(31,41,55,0.11) !important; }
+.light .border-white\/\[0\.08\] { border-color: rgba(31,41,55,0.12) !important; }
+.light .border-white\/\[0\.10\],
+.light .border-white\/\[0\.1\] { border-color: rgba(31,41,55,0.14) !important; }
+.light .border-white\/\[0\.12\] { border-color: rgba(31,41,55,0.16) !important; }
+.light .border-white\/\[0\.14\] { border-color: rgba(31,41,55,0.18) !important; }
+.light .border-white\/\[0\.15\] { border-color: rgba(31,41,55,0.19) !important; }
+.light .border-white\/\[0\.16\] { border-color: rgba(31,41,55,0.20) !important; }
+.light .border-white\/\[0\.2\],
+.light .border-white\/\[0\.20\] { border-color: rgba(31,41,55,0.24) !important; }
+.light .border-white\/\[0\.25\] { border-color: rgba(31,41,55,0.28) !important; }
+.light .border-white\/\[0\.4\],
+.light .border-white\/\[0\.40\] { border-color: rgba(31,41,55,0.42) !important; }
+.light .divide-white\/\[0\.04\] > :not(:last-child) { border-color: rgba(31,41,55,0.08) !important; }
+.light .divide-white\/\[0\.05\] > :not(:last-child) { border-color: rgba(31,41,55,0.09) !important; }
+.light .ring-white\/\[0\.08\] { --tw-ring-color: rgba(31,41,55,0.14) !important; }
+
+html.light,
+html.light body {
+  color-scheme: light;
+}
+
+html.light body {
+  background: color-mix(in srgb, var(--neutral-tint) 8%, #fff);
+  color: #1f2937;
+}
+
+html.light .bg-bg { background-color: color-mix(in srgb, var(--neutral-tint) 8%, #fff) !important; }
+html.light .bg-raised { background-color: color-mix(in srgb, var(--neutral-tint) 10%, #fff) !important; }
+html.light .bg-surface { background-color: color-mix(in srgb, var(--neutral-tint) 14%, #fff) !important; }
+html.light .bg-surface-2 { background-color: color-mix(in srgb, var(--neutral-tint) 18%, #fff) !important; }
+html.light .bg-glass { background-color: rgba(255,255,255,0.88) !important; }
+html.light .text-text { color: #1f2937 !important; }
+html.light .text-text-2 { color: #4b5568 !important; }
+html.light .text-text-3 { color: #6b7280 !important; }
+html.light .text-text-3\/40 { color: rgba(107,114,128,0.40) !important; }
+html.light .text-text-3\/45 { color: rgba(107,114,128,0.45) !important; }
+html.light .text-text-3\/50 { color: rgba(107,114,128,0.50) !important; }
+html.light .text-text-3\/60 { color: rgba(107,114,128,0.60) !important; }
+html.light .text-text-3\/70 { color: rgba(107,114,128,0.70) !important; }
+html.light .text-text-3\/75 { color: rgba(107,114,128,0.75) !important; }
+html.light .text-accent-bright { color: #4f46e5 !important; }
+html.light .bg-accent-soft { background-color: rgba(79,70,229,0.09) !important; }
+html.light .placeholder\:text-text-3\/40::placeholder { color: rgba(107,114,128,0.40) !important; }
+
+html.light .bg-\[\#0a0a14\],
+html.light .bg-\[\#0c0c13\],
+html.light .bg-\[\#12121e\],
+html.light .bg-\[\#13131e\],
+html.light .bg-\[\#16162a\],
+html.light .bg-\[\#171a2b\],
+html.light .bg-\[\#1a1a2e\],
+html.light .bg-\[\#1e1e38\] {
+  background-color: color-mix(in srgb, var(--neutral-tint) 14%, #fff) !important;
+}
+
 @layer base {
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 }

package/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { TooltipProvider } from "@/components/ui/tooltip"
 import { Toaster } from "@/components/ui/sonner"
 import { DashboardShell } from "@/components/layout/dashboard-shell"
 import { AppQueryProvider } from "@/components/providers/app-query-provider"
+import { ThemeProvider } from "@/components/providers/theme-provider"
 import "./globals.css"
 
 export const metadata: Metadata = {
@@ -27,16 +28,18 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
       <body className="antialiased" cz-shortcut-listen="true">
-        <AppQueryProvider>
-          <TooltipProvider>
-            <DashboardShell>
-              {children}
-            </DashboardShell>
-            <Toaster />
-          </TooltipProvider>
-        </AppQueryProvider>
+        <ThemeProvider>
+          <AppQueryProvider>
+            <TooltipProvider>
+              <DashboardShell>
+                {children}
+              </DashboardShell>
+              <Toaster />
+            </TooltipProvider>
+          </AppQueryProvider>
+        </ThemeProvider>
       </body>
     </html>
   )

package/src/app/protocols/builder/[templateId]/page.tsx

@@ -43,7 +43,7 @@ export default function ProtocolBuilderPage() {
 
   if (isLoading) {
     return (
-      <div className="flex h-screen items-center justify-center">
+      <div className="flex h-full min-h-0 min-w-0 flex-1 items-center justify-center">
         <div className="text-sm text-muted-foreground">Loading builder...</div>
       </div>
     )
@@ -52,7 +52,7 @@ export default function ProtocolBuilderPage() {
   const template = templates?.find((t) => t.id === templateId)
   if (!template) {
     return (
-      <div className="flex h-screen flex-col items-center justify-center gap-3">
+      <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col items-center justify-center gap-3">
         <div className="text-sm text-muted-foreground">Template not found</div>
         <button
           onClick={() => router.push('/protocols')}
@@ -65,9 +65,9 @@ export default function ProtocolBuilderPage() {
   }
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between border-b px-4 py-2">
+      <div className="flex shrink-0 items-center justify-between border-b px-4 py-2">
         <div className="flex items-center gap-3">
           <button
             onClick={() => router.push('/protocols')}
@@ -85,7 +85,7 @@ export default function ProtocolBuilderPage() {
       </div>
 
       {/* Canvas */}
-      <div className="flex-1 p-3">
+      <div className="min-h-0 flex-1 p-3">
         <ProtocolBuilderCanvas />
       </div>
     </div>

package/src/cli/binary.test.js

@@ -199,10 +199,13 @@ test('binary -v alias output matches package version', () => {
   assert.equal(result.stdout.trim(), `${PACKAGE_JSON.name} ${PACKAGE_JSON.version}`)
 })
 
-test('package ships dagre type declarations required by installed builds', () => {
+test('package ships type declarations required by installed builds', () => {
   assert.equal(PACKAGE_JSON.dependencies.dagre, '^0.8.5')
   assert.equal(PACKAGE_JSON.dependencies['@types/dagre'], '^0.7.54')
   assert.equal(PACKAGE_JSON.devDependencies?.['@types/dagre'], undefined)
+  assert.equal(PACKAGE_JSON.dependencies['mime-types'], '^3.0.2')
+  assert.equal(PACKAGE_JSON.dependencies['@types/mime-types'], '^2.1.4')
+  assert.equal(PACKAGE_JSON.devDependencies?.['@types/mime-types'], undefined)
 })
 
 test('legacy TS launcher falls back to tsx import when strip-types is unavailable', () => {

package/src/components/layout/dashboard-shell.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
+import { useTheme } from 'next-themes'
 import { initAudioContext } from '@/lib/tts'
 import { clearStoredAccessKey } from '@/lib/app/api-client'
 import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/app/safe-storage'
@@ -14,6 +15,7 @@ import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/app/api-client'
 import { pathToView, useNavigate } from '@/lib/app/navigation'
 import { shouldAutoOpenPanelSidebar } from '@/lib/app/view-constants'
+import { normalizeThemeMode } from '@/lib/theme-mode'
 
 import { FullScreenLoader } from '@/components/ui/full-screen-loader'
 import { SidebarRail } from '@/components/layout/sidebar-rail'
@@ -32,6 +34,7 @@ export function DashboardShell({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   const pathname = usePathname()
   const navigateTo = useNavigate()
+  const { setTheme } = useTheme()
 
   const {
     hydrated,
@@ -152,6 +155,12 @@ export function DashboardShell({ children }: { children: React.ReactNode }) {
     }
   }, [appSettings.themeHue])
 
+  // Theme mode
+  useEffect(() => {
+    if (!appSettings.themeMode) return
+    setTheme(normalizeThemeMode(appSettings.themeMode))
+  }, [appSettings.themeMode, setTheme])
+
   // View validity check
   const isViewEnabled = useCallback((view: AppView) => {
     if (view === 'webhooks') return extensions['http']?.enabled !== false

package/src/components/protocols/builder/protocol-builder-canvas.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, type DragEvent } from 'react'
+import { useCallback, useEffect, useMemo, useRef, type DragEvent } from 'react'
 import {
   ReactFlow,
   Background,
@@ -12,16 +12,19 @@ import {
   type NodeChange,
   type EdgeChange,
   type Node,
+  type Edge,
+  type ReactFlowInstance,
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { useProtocolBuilderStore, type BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
+import { useProtocolBuilderStore, type BuilderEdgeData, type BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
 import { getNodeTypeForKind } from '@/features/protocols/builder/utils/template-to-nodes'
+import { isBuilderTemplateReadOnly } from '@/features/protocols/builder/utils/builder-template-access'
 import { PhaseNode, BranchNode, LoopNode, ParallelNode, JoinNode, ForEachNode, SubflowNode, SwarmNode, CompleteNode } from './node-types'
 import { DefaultEdge, BranchEdge, LoopEdge } from './edge-types'
 import { NodePalette } from './node-palette'
 import { NodeInspector } from './node-inspector'
 import { ValidationPanel } from './validation-panel'
-import type { ProtocolStepKind } from '@/types'
+import type { ProtocolStepKind, ProtocolTemplate } from '@/types'
 
 const nodeTypes = {
   phase: PhaseNode,
@@ -41,6 +44,54 @@ const edgeTypes = {
   loop: LoopEdge,
 }
 
+function BuiltInTemplatePanel({
+  template,
+  onSelectStep,
+}: {
+  template: ProtocolTemplate | null
+  onSelectStep: (stepId: string) => void
+}) {
+  const steps = template?.steps && template.steps.length > 0
+    ? template.steps
+    : template?.defaultPhases ?? []
+
+  return (
+    <div className="flex w-52 shrink-0 flex-col overflow-y-auto rounded-lg border bg-card p-3 shadow-sm">
+      <div className="mb-3">
+        <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+          Built-in template
+        </div>
+        <div className="mt-1 text-sm font-semibold text-foreground">{template?.name || 'Template'}</div>
+        {template?.description && (
+          <div className="mt-1 text-xs leading-relaxed text-muted-foreground">
+            {template.description}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-1">
+        {steps.map((step, index) => (
+          <button
+            key={step.id}
+            type="button"
+            onClick={() => onSelectStep(step.id)}
+            className="w-full rounded-md border bg-background px-3 py-2 text-left"
+            title={step.kind.replace(/_/g, ' ')}
+          >
+            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              Step {index + 1}
+            </div>
+            <div className="mt-1 text-sm font-medium text-foreground">{step.label}</div>
+            <div className="mt-1 text-xs capitalize text-muted-foreground">
+              {step.kind.replace(/_/g, ' ')}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 export function ProtocolBuilderCanvas() {
   const nodes = useProtocolBuilderStore((s) => s.nodes)
   const edges = useProtocolBuilderStore((s) => s.edges)
@@ -54,23 +105,44 @@ export function ProtocolBuilderCanvas() {
   const isDirty = useProtocolBuilderStore((s) => s.isDirty)
   const undo = useProtocolBuilderStore((s) => s.undo)
   const redo = useProtocolBuilderStore((s) => s.redo)
+  const currentTemplate = useProtocolBuilderStore((s) => s.currentTemplate)
+  const flowRef = useRef<ReactFlowInstance<Node<BuilderNodeData>, Edge<BuilderEdgeData>> | null>(null)
+
+  const readOnly = isBuilderTemplateReadOnly(currentTemplate)
+
+  useEffect(() => {
+    if (nodes.length === 0) return
+    const frame = window.requestAnimationFrame(() => {
+      void flowRef.current?.fitView({ padding: 0.24, duration: 160 })
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [nodes.length, edges.length])
 
   const onNodesChange = useCallback(
     (changes: NodeChange<Node<BuilderNodeData>>[]) => {
-      setNodes(applyNodeChanges(changes, nodes))
+      const allowedChanges = readOnly
+        ? changes.filter((change) => change.type === 'select')
+        : changes
+      if (allowedChanges.length === 0) return
+      setNodes(applyNodeChanges(allowedChanges, nodes), { markDirty: !readOnly })
     },
-    [nodes, setNodes],
+    [nodes, readOnly, setNodes],
   )
 
   const onEdgesChange = useCallback(
     (changes: EdgeChange[]) => {
-      setEdges(applyEdgeChanges(changes, edges) as typeof edges)
+      const allowedChanges = readOnly
+        ? changes.filter((change) => change.type === 'select')
+        : changes
+      if (allowedChanges.length === 0) return
+      setEdges(applyEdgeChanges(allowedChanges, edges) as typeof edges, { markDirty: !readOnly })
     },
-    [edges, setEdges],
+    [edges, readOnly, setEdges],
   )
 
   const onConnect = useCallback(
     (connection: Connection) => {
+      if (readOnly) return
       pushUndo()
       addEdge({
         id: `${connection.source}--${connection.target}--${Date.now()}`,
@@ -82,7 +154,7 @@ export function ProtocolBuilderCanvas() {
         data: { edgeType: 'default' },
       })
     },
-    [addEdge, pushUndo],
+    [addEdge, pushUndo, readOnly],
   )
 
   const onNodeClick = useCallback(
@@ -112,6 +184,7 @@ export function ProtocolBuilderCanvas() {
   const onDrop = useCallback(
     (e: DragEvent) => {
       e.preventDefault()
+      if (readOnly) return
       const kind = e.dataTransfer.getData('application/x-protocol-node-kind') as ProtocolStepKind
       const label = e.dataTransfer.getData('application/x-protocol-node-label')
       if (!kind) return
@@ -127,32 +200,43 @@ export function ProtocolBuilderCanvas() {
       }
       addNode(newNode)
     },
-    [addNode, pushUndo],
+    [addNode, pushUndo, readOnly],
   )
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      if (readOnly) return
       if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
         e.preventDefault()
         if (e.shiftKey) redo()
         else undo()
       }
     },
-    [undo, redo],
+    [readOnly, undo, redo],
   )
 
   const memoizedNodeTypes = useMemo(() => nodeTypes, [])
   const memoizedEdgeTypes = useMemo(() => edgeTypes, [])
 
   return (
-    <div className="flex h-full w-full gap-3" onKeyDown={onKeyDown} tabIndex={0}>
-      <NodePalette />
-      <div className="relative flex-1 overflow-hidden rounded-lg border">
+    <div className="flex h-full min-h-0 w-full min-w-0 gap-3" onKeyDown={onKeyDown} tabIndex={0}>
+      {readOnly ? <BuiltInTemplatePanel template={currentTemplate} onSelectStep={selectNode} /> : <NodePalette />}
+      <div className="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-lg border">
         {isDirty && (
           <div className="absolute left-1/2 top-2 z-10 -translate-x-1/2 rounded bg-amber-500/10 px-2 py-1 text-xs text-amber-500">
             Unsaved changes
           </div>
         )}
+        {nodes.length === 0 && (
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center p-6">
+            <div className="pointer-events-auto max-w-md rounded-lg border bg-card/95 p-4 text-center shadow-sm">
+              <div className="text-sm font-semibold text-foreground">No visual steps</div>
+              <div className="mt-1 text-sm text-muted-foreground">
+                This template does not expose a protocol graph yet.
+              </div>
+            </div>
+          </div>
+        )}
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -166,8 +250,15 @@ export function ProtocolBuilderCanvas() {
           onPaneClick={onPaneClick}
           onDragOver={onDragOver}
           onDrop={onDrop}
+          onInit={(instance) => {
+            flowRef.current = instance
+          }}
           fitView
-          deleteKeyCode="Delete"
+          fitViewOptions={{ padding: 0.24 }}
+          nodesDraggable={!readOnly}
+          nodesConnectable={!readOnly}
+          edgesReconnectable={!readOnly}
+          deleteKeyCode={readOnly ? null : 'Delete'}
           defaultEdgeOptions={{ type: 'default', data: { edgeType: 'default' } }}
         >
           <Background />
@@ -175,7 +266,7 @@ export function ProtocolBuilderCanvas() {
           <MiniMap />
         </ReactFlow>
       </div>
-      <div className="flex w-72 flex-col gap-3">
+      <div className="flex w-72 shrink-0 flex-col gap-3">
         <NodeInspector />
         <ValidationPanel />
       </div>

package/src/components/providers/theme-provider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { ThemeProvider as NextThemeProvider } from 'next-themes'
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemeProvider>
+  )
+}

package/src/features/protocols/builder/hooks/use-template-sync.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'
 import { useProtocolBuilderStore } from '../protocol-builder-store'
 import { useUpsertProtocolTemplateMutation, type ProtocolTemplatePayload } from '@/features/protocols/queries'
 import { nodesToTemplate } from '../utils/nodes-to-template'
+import { isBuilderTemplateReadOnly } from '../utils/builder-template-access'
 
 export function useTemplateSync(autoSaveDelayMs = 2000) {
   const nodes = useProtocolBuilderStore((s) => s.nodes)
@@ -15,6 +16,10 @@ export function useTemplateSync(autoSaveDelayMs = 2000) {
 
   useEffect(() => {
     if (!isDirty || !currentTemplate || validationErrors.length > 0) return
+    if (isBuilderTemplateReadOnly(currentTemplate)) {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      return
+    }
 
     if (debounceRef.current) clearTimeout(debounceRef.current)
 

package/src/features/protocols/builder/protocol-builder-store.ts

@@ -67,8 +67,8 @@ export interface ProtocolBuilderState {
   redoStack: UndoSnapshot[]
   activeRunId: string | null
 
-  setNodes: (nodes: BuilderNode[]) => void
-  setEdges: (edges: BuilderEdge[]) => void
+  setNodes: (nodes: BuilderNode[], options?: { markDirty?: boolean }) => void
+  setEdges: (edges: BuilderEdge[], options?: { markDirty?: boolean }) => void
   selectNode: (nodeId: string | null) => void
   selectEdge: (edgeId: string | null) => void
   updateNodeData: (nodeId: string, data: Partial<BuilderNodeData>) => void
@@ -110,8 +110,8 @@ export const useProtocolBuilderStore = create<ProtocolBuilderState>()(
     (set, get) => ({
       ...initialState,
 
-      setNodes: (nodes) => set({ nodes, isDirty: true }),
-      setEdges: (edges) => set({ edges, isDirty: true }),
+      setNodes: (nodes, options) => set({ nodes, isDirty: options?.markDirty ?? true }),
+      setEdges: (edges, options) => set({ edges, isDirty: options?.markDirty ?? true }),
 
       selectNode: (nodeId) =>
         set({ selectedNodeId: nodeId, selectedEdgeId: null }),

package/src/features/protocols/builder/utils/builder-template-access.test.ts

@@ -0,0 +1,30 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import type { ProtocolTemplate } from '@/types'
+import { isBuilderTemplateReadOnly } from './builder-template-access'
+
+function makeTemplate(overrides: Partial<ProtocolTemplate> = {}): ProtocolTemplate {
+  return {
+    id: 'template-1',
+    name: 'Template One',
+    description: 'A template',
+    builtIn: false,
+    defaultPhases: [],
+    ...overrides,
+  }
+}
+
+describe('isBuilderTemplateReadOnly', () => {
+  it('marks built-in templates as read-only', () => {
+    assert.equal(isBuilderTemplateReadOnly(makeTemplate({ builtIn: true })), true)
+  })
+
+  it('keeps custom templates editable', () => {
+    assert.equal(isBuilderTemplateReadOnly(makeTemplate({ builtIn: false })), false)
+  })
+
+  it('treats an unloaded template as non-editable only after one is present', () => {
+    assert.equal(isBuilderTemplateReadOnly(null), false)
+    assert.equal(isBuilderTemplateReadOnly(undefined), false)
+  })
+})

package/src/features/protocols/builder/utils/builder-template-access.ts

@@ -0,0 +1,5 @@
+import type { ProtocolTemplate } from '@/types'
+
+export function isBuilderTemplateReadOnly(template: ProtocolTemplate | null | undefined): boolean {
+  return Boolean(template?.builtIn)
+}