diff --git a/frontend/apps/inspector/src/index.css b/frontend/apps/inspector/src/index.css
index 52aa134b3d..fec19d7d56 100644
--- a/frontend/apps/inspector/src/index.css
+++ b/frontend/apps/inspector/src/index.css
@@ -1,4 +1,4 @@
-@import "../../../packages/components/public/theme.css";
+@import "../../../src/index.css";
 
 @tailwind base;
 @tailwind components;
@@ -42,37 +42,3 @@
 	}
 }
 
-:root {
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-color-text: theme("colors.white");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-constant: theme("colors.violet.300");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-string: theme("colors.violet.300");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-comment: theme("colors.zinc.500");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-keyword: theme("colors.sky.300");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-parameter: theme("colors.pink.300");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-function: theme("colors.violet.300");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-string-expression: theme("colors.violet.300");
-	/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
-	--shiki-token-punctuation: theme("colors.zinc.200");
-
-	--spacing: 0.25rem;
-
-	::-webkit-scrollbar {
-		@apply w-2.5 h-2.5;
-	}
-
-	::-webkit-scrollbar-track {
-		@apply bg-transparent;
-	}
-
-	::-webkit-scrollbar-thumb {
-		@apply rounded-full bg-border border-[1px] border-transparent border-solid bg-clip-padding;
-	}
-}
diff --git a/frontend/src/components/actors/actors-actor-details.tsx b/frontend/src/components/actors/actors-actor-details.tsx
index 0373767d6c..58e0b0ba44 100644
--- a/frontend/src/components/actors/actors-actor-details.tsx
+++ b/frontend/src/components/actors/actors-actor-details.tsx
@@ -1,4 +1,5 @@
 import { faQuestionSquare, Icon } from "@rivet-gg/icons";
+import { useQuery } from "@tanstack/react-query";
 import { memo, type ReactNode, Suspense } from "react";
 import {
 	cn,
@@ -9,11 +10,12 @@ import {
 	TabsTrigger,
 } from "@/components";
 import { ActorConfigTab } from "./actor-config-tab";
-import { ActorDatabaseTab } from "./actor-db-tab";
-import { ActorQueueTab } from "./actor-queue-tab";
 import { ActorConnectionsTab } from "./actor-connections-tab";
+import { ActorDatabaseTab } from "./actor-db-tab";
 import { ActorDetailsSettingsProvider } from "./actor-details-settings";
+import { useActorInspector } from "./actor-inspector-context";
 import { ActorLogsTab } from "./actor-logs-tab";
+import { ActorQueueTab } from "./actor-queue-tab";
 import { ActorStateTab } from "./actor-state-tab";
 import { QueriedActorStatus } from "./actor-status";
 import { ActorStopButton } from "./actor-stop-button";
@@ -85,6 +87,276 @@ export const ActorsActorEmptyDetails = () => {
 	);
 };
 
+const TAB_PRIORITY = [
+	"workflow",
+	"database",
+	"state",
+	"queue",
+	"connections",
+	"metadata",
+] as const;
+
+type TabId = (typeof TAB_PRIORITY)[number];
+
+function useActorTabVisibility(actorId: ActorId) {
+	const inspector = useActorInspector();
+
+	const { data: stateData } = useQuery(
+		inspector.actorStateQueryOptions(actorId),
+	);
+	const { data: isDatabaseEnabled } = useQuery(
+		inspector.actorDatabaseEnabledQueryOptions(actorId),
+	);
+	const { data: isWorkflowEnabled } = useQuery(
+		inspector.actorIsWorkflowEnabledQueryOptions(actorId),
+	);
+
+	const isStateEnabled = stateData?.isEnabled ?? false;
+	const isQueueEnabled = inspector.features.queue.supported;
+
+	const hiddenTabs = new Set<TabId>();
+	if (!isWorkflowEnabled) hiddenTabs.add("workflow");
+	if (!isDatabaseEnabled) hiddenTabs.add("database");
+	if (!isStateEnabled) hiddenTabs.add("state");
+	if (!isQueueEnabled) hiddenTabs.add("queue");
+
+	const firstAvailableTab =
+		TAB_PRIORITY.find((tab) => !hiddenTabs.has(tab)) ?? "connections";
+
+	return { hiddenTabs, firstAvailableTab };
+}
+
+function ActorTabTriggers({
+	actorId,
+	tab,
+	onTabChange,
+	className,
+	children,
+}: {
+	actorId: ActorId;
+	tab?: string;
+	onTabChange?: (tab: string) => void;
+	className?: string;
+	children?: ReactNode;
+}) {
+	const { hiddenTabs, firstAvailableTab } = useActorTabVisibility(actorId);
+	const guardContent = useInspectorGuard();
+
+	const normalizedTab = tab === "events" ? "traces" : tab;
+	const isTabHidden = normalizedTab && hiddenTabs.has(normalizedTab as TabId);
+	const value =
+		!normalizedTab || isTabHidden ? firstAvailableTab : normalizedTab;
+
+	return (
+		<ActorTabsShell
+			actorId={actorId}
+			value={value}
+			onValueChange={onTabChange}
+			className={className}
+			guardContent={guardContent}
+			hiddenTabs={hiddenTabs}
+		>
+			{children}
+		</ActorTabsShell>
+	);
+}
+
+function ActorTabsShell({
+	actorId,
+	value,
+	onValueChange,
+	className,
+	guardContent,
+	hiddenTabs,
+	children,
+}: {
+	actorId: ActorId;
+	value: string;
+	onValueChange?: (tab: string) => void;
+	className?: string;
+	guardContent: ReactNode;
+	hiddenTabs: Set<TabId>;
+	children?: ReactNode;
+}) {
+	return (
+		<Tabs
+			value={value}
+			onValueChange={onValueChange}
+			defaultValue={value}
+			className={cn(className, "flex-1 min-h-0 min-w-0 flex flex-col ")}
+		>
+			<div className="flex justify-between items-center border-b h-[45px]">
+				<div className="flex flex-1 items-center h-full w-full ">
+					<TabsList className="overflow-auto border-none h-full items-end">
+						{!hiddenTabs.has("workflow") && (
+							<TabsTrigger
+								value="workflow"
+								className="text-xs px-3 py-1 pb-2"
+							>
+								Workflow
+							</TabsTrigger>
+						)}
+						{!hiddenTabs.has("database") && (
+							<TabsTrigger
+								value="database"
+								className="text-xs px-3 py-1 pb-2"
+							>
+								Database
+							</TabsTrigger>
+						)}
+						{!hiddenTabs.has("state") && (
+							<TabsTrigger
+								value="state"
+								className="text-xs px-3 py-1 pb-2"
+							>
+								State
+							</TabsTrigger>
+						)}
+						{!hiddenTabs.has("queue") && (
+							<TabsTrigger
+								value="queue"
+								className="text-xs px-3 py-1 pb-2"
+							>
+								Queue
+							</TabsTrigger>
+						)}
+						<TabsTrigger
+							value="connections"
+							className="text-xs px-3 py-1 pb-2"
+						>
+							Connections
+						</TabsTrigger>
+						<TabsTrigger
+							value="metadata"
+							className="text-xs px-3 py-1 pb-2"
+						>
+							Metadata
+						</TabsTrigger>
+					</TabsList>
+					<Flex
+						gap="2"
+						justify="between"
+						items="center"
+						className="h-[36px] pb-3 pt-2 pr-4"
+					>
+						<QueriedActorStatus
+							className="text-sm h-auto"
+							actorId={actorId}
+						/>
+						<ActorStopButton actorId={actorId} />
+					</Flex>
+				</div>
+			</div>
+			<TabsContent value="logs" className="min-h-0 flex-1 mt-0 h-full">
+				<Suspense fallback={<ActorLogsTab.Skeleton />}>
+					{guardContent || <ActorLogsTab actorId={actorId} />}
+				</Suspense>
+			</TabsContent>
+			<TabsContent
+				value="metadata"
+				className="min-h-0 flex-1 mt-0 h-full"
+			>
+				<ActorConfigTab actorId={actorId} />
+			</TabsContent>
+			<TabsContent value="connections" className="min-h-0 flex-1 mt-0">
+				{guardContent || <ActorConnectionsTab actorId={actorId} />}
+			</TabsContent>
+			<TabsContent value="queue" className="min-h-0 flex-1 mt-0">
+				{guardContent || <ActorQueueTab actorId={actorId} />}
+			</TabsContent>
+			<TabsContent
+				value="workflow"
+				className="min-h-0 flex-1 mt-0 h-full"
+			>
+				{guardContent || <ActorWorkflowTab actorId={actorId} />}
+			</TabsContent>
+			<TabsContent
+				value="database"
+				className="min-h-0 min-w-0 flex-1 mt-0 h-full"
+			>
+				{guardContent || <ActorDatabaseTab actorId={actorId} />}
+			</TabsContent>
+			<TabsContent value="state" className="min-h-0 flex-1 mt-0 relative">
+				{guardContent || <ActorStateTab actorId={actorId} />}
+			</TabsContent>
+			{children}
+		</Tabs>
+	);
+}
+
+function ActorTabsNotRunning({
+	actorId,
+	tab,
+	onTabChange,
+	className,
+	children,
+}: {
+	actorId: ActorId;
+	tab?: string;
+	onTabChange?: (tab: string) => void;
+	className?: string;
+	children?: ReactNode;
+}) {
+	const guardContent = useInspectorGuard();
+	const normalizedTab = tab === "events" ? "traces" : tab;
+	const value = normalizedTab || "connections";
+
+	return (
+		<ActorTabsShell
+			actorId={actorId}
+			value={value}
+			onValueChange={onTabChange}
+			className={className}
+			guardContent={guardContent}
+			hiddenTabs={new Set()}
+		>
+			{children}
+		</ActorTabsShell>
+	);
+}
+
+function ActorTabsWithId({
+	actorId,
+	tab,
+	onTabChange,
+	className,
+	children,
+}: {
+	actorId: ActorId;
+	tab?: string;
+	onTabChange?: (tab: string) => void;
+	className?: string;
+	children?: ReactNode;
+}) {
+	const guardContent = useInspectorGuard();
+
+	// Inspector context is only available when the actor is running (guardContent is null).
+	// We must not call useActorInspector hooks when the inspector is unavailable.
+	if (guardContent) {
+		return (
+			<ActorTabsNotRunning
+				actorId={actorId}
+				tab={tab}
+				onTabChange={onTabChange}
+				className={className}
+			>
+				{children}
+			</ActorTabsNotRunning>
+		);
+	}
+
+	return (
+		<ActorTabTriggers
+			actorId={actorId}
+			tab={tab}
+			onTabChange={onTabChange}
+			className={className}
+		>
+			{children}
+		</ActorTabTriggers>
+	);
+}
+
 export function ActorTabs({
 	tab,
 	onTabChange,
@@ -100,16 +372,22 @@ export function ActorTabs({
 	className?: string;
 	children?: ReactNode;
 }) {
-	const normalizedTab = tab === "events" ? "traces" : tab;
-	const value = disabled ? undefined : normalizedTab || "state";
-
-	const guardContent = useInspectorGuard();
+	if (actorId) {
+		return (
+			<ActorTabsWithId
+				actorId={actorId}
+				tab={tab}
+				onTabChange={onTabChange}
+				className={className}
+			>
+				{children}
+			</ActorTabsWithId>
+		);
+	}
 
 	return (
 		<Tabs
-			value={value}
-			onValueChange={onTabChange}
-			defaultValue={value}
+			value={undefined}
 			className={cn(className, "flex-1 min-h-0 min-w-0 flex flex-col ")}
 		>
 			<div className="flex justify-between items-center border-b h-[45px]">
@@ -117,40 +395,38 @@ export function ActorTabs({
 					<TabsList className="overflow-auto border-none h-full items-end">
 						<TabsTrigger
 							disabled={disabled}
-							value="state"
+							value="workflow"
 							className="text-xs px-3 py-1 pb-2"
 						>
-							State
+							Workflow
 						</TabsTrigger>
-
 						<TabsTrigger
 							disabled={disabled}
-							value="connections"
+							value="database"
 							className="text-xs px-3 py-1 pb-2"
 						>
-							Connections
+							Database
 						</TabsTrigger>
-
 						<TabsTrigger
 							disabled={disabled}
-							value="queue"
+							value="state"
 							className="text-xs px-3 py-1 pb-2"
 						>
-							Queue
+							State
 						</TabsTrigger>
 						<TabsTrigger
 							disabled={disabled}
-							value="workflow"
+							value="queue"
 							className="text-xs px-3 py-1 pb-2"
 						>
-							Workflow
+							Queue
 						</TabsTrigger>
 						<TabsTrigger
 							disabled={disabled}
-							value="database"
+							value="connections"
 							className="text-xs px-3 py-1 pb-2"
 						>
-							Database
+							Connections
 						</TabsTrigger>
 						<TabsTrigger
 							disabled={disabled}
@@ -160,69 +436,8 @@ export function ActorTabs({
 							Metadata
 						</TabsTrigger>
 					</TabsList>
-					{actorId ? (
-						<Flex
-							gap="2"
-							justify="between"
-							items="center"
-							className="h-[36px] pb-3 pt-2 pr-4"
-						>
-							<QueriedActorStatus
-								className="text-sm h-auto"
-								actorId={actorId}
-							/>
-							<ActorStopButton actorId={actorId} />
-						</Flex>
-					) : null}
 				</div>
 			</div>
-			{actorId ? (
-				<>
-					<TabsContent
-						value="logs"
-						className="min-h-0 flex-1 mt-0 h-full"
-					>
-						<Suspense fallback={<ActorLogsTab.Skeleton />}>
-							{guardContent || <ActorLogsTab actorId={actorId} />}
-						</Suspense>
-					</TabsContent>
-					<TabsContent
-						value="metadata"
-						className="min-h-0 flex-1 mt-0 h-full"
-					>
-						<ActorConfigTab actorId={actorId} />
-					</TabsContent>
-					<TabsContent
-						value="connections"
-						className="min-h-0 flex-1 mt-0"
-					>
-						{guardContent || (
-							<ActorConnectionsTab actorId={actorId} />
-						)}
-					</TabsContent>
-					<TabsContent value="queue" className="min-h-0 flex-1 mt-0">
-						{guardContent || <ActorQueueTab actorId={actorId} />}
-					</TabsContent>
-					<TabsContent
-						value="workflow"
-						className="min-h-0 flex-1 mt-0 h-full"
-					>
-						{guardContent || <ActorWorkflowTab actorId={actorId} />}
-					</TabsContent>
-					<TabsContent
-						value="database"
-						className="min-h-0 min-w-0 flex-1 mt-0 h-full"
-					>
-						{guardContent || <ActorDatabaseTab actorId={actorId} />}
-					</TabsContent>
-					<TabsContent
-						value="state"
-						className="min-h-0 flex-1 mt-0 relative"
-					>
-						{guardContent || <ActorStateTab actorId={actorId} />}
-					</TabsContent>
-				</>
-			) : null}
 			{children}
 		</Tabs>
 	);
diff --git a/frontend/src/components/actors/workflow/workflow-visualizer.tsx b/frontend/src/components/actors/workflow/workflow-visualizer.tsx
index 0511df9825..34f118d0a0 100644
--- a/frontend/src/components/actors/workflow/workflow-visualizer.tsx
+++ b/frontend/src/components/actors/workflow/workflow-visualizer.tsx
@@ -1,29 +1,29 @@
 "use client";
 
-import { useMemo, useState, useCallback } from "react";
 import {
 	Background,
 	BackgroundVariant,
 	Controls,
 	MiniMap,
-	ReactFlow,
-	ReactFlowProvider,
 	type Node,
 	type NodeMouseHandler,
+	ReactFlow,
+	ReactFlowProvider,
 } from "@xyflow/react";
+import { useCallback, useMemo, useState } from "react";
 import "@xyflow/react/dist/style.css";
 import { faXmark, Icon } from "@rivet-gg/icons";
 import { cn, DiscreteCopyButton } from "@/components";
 import { ActorObjectInspector } from "../console/actor-inspector";
+import { workflowHistoryToXYFlow } from "./workflow-to-xyflow";
+import type { WorkflowHistory } from "./workflow-types";
 import {
+	formatDuration,
 	TYPE_COLORS,
 	TypeIcon,
-	formatDuration,
-	workflowNodeTypes,
 	type WorkflowNodeData,
+	workflowNodeTypes,
 } from "./xyflow-nodes";
-import { workflowHistoryToXYFlow } from "./workflow-to-xyflow";
-import type { WorkflowHistory } from "./workflow-types";
 
 type MetaExtendedEntryType =
 	| "step"
@@ -79,7 +79,6 @@ export function WorkflowVisualizer({
 						nodeTypes={workflowNodeTypes}
 						fitView
 						panOnScroll
-						selectionOnDrag
 						panOnDrag={[1, 2]}
 						edgesFocusable={false}
 						onNodeClick={onNodeClick}
@@ -118,7 +117,9 @@ export function WorkflowVisualizer({
 								}}
 							>
 								<TypeIcon
-									type={selectedNode.entryType as MetaExtendedEntryType}
+									type={
+										selectedNode.entryType as MetaExtendedEntryType
+									}
 									size={18}
 								/>
 							</div>
@@ -181,7 +182,9 @@ export function WorkflowVisualizer({
 								Key
 							</div>
 							<DiscreteCopyButton
-								value={selectedNode.nodeKey ?? selectedNode.label}
+								value={
+									selectedNode.nodeKey ?? selectedNode.label
+								}
 								size="sm"
 								className="w-full text-sm text-left justify-between -mx-2"
 							>
diff --git a/frontend/src/components/theme.css b/frontend/src/components/theme.css
index f1b729a53e..133c1b49a9 100644
--- a/frontend/src/components/theme.css
+++ b/frontend/src/components/theme.css
@@ -68,4 +68,44 @@
 
 .shiki .highlighted {
 	@apply bg-secondary/50;
-}
\ No newline at end of file
+}
+
+/* Dark theme overrides for xyflow Controls. */
+.react-flow__controls {
+	background: hsl(var(--card));
+	border: 1px solid hsl(var(--border));
+	border-radius: 6px;
+	box-shadow: none;
+}
+
+.react-flow__controls-button {
+	background: transparent;
+	border-bottom: 1px solid hsl(var(--border));
+	fill: hsl(var(--foreground));
+}
+
+.react-flow__controls-button:hover {
+	background: hsl(var(--accent));
+}
+
+.react-flow__controls-button:last-child {
+	border-bottom: none;
+}
+
+/* Dark theme overrides for xyflow MiniMap. */
+.react-flow__minimap {
+	background: hsl(var(--card)) !important;
+	border: 1px solid hsl(var(--border));
+	border-radius: 6px;
+}
+
+/* Remove Ladle story container padding and make it fill the full viewport. */
+.ladle-main {
+	padding: 0 !important;
+	height: 100vh;
+}
+
+/* Dark theme for xyflow edges. */
+.react-flow__edge-path {
+	stroke: hsl(var(--muted-foreground));
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4385dbf813..00dabe8032 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import "@/components/theme.css";
+@import "../packages/components/public/theme.css";
 
 @tailwind base;
 @tailwind components;