@toolr/ui-design 0.1.0

package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx

@@ -0,0 +1,210 @@
+/**
+ * FileTypeTabbedPromptEditor — Flat sidebar wrapper for TabbedPromptEditor
+ *
+ * Part of: Sections > Prompt Editor
+ *
+ * Adds a resizable left sidebar listing file types. Selecting a file type
+ * swaps the prompts displayed in the embedded TabbedPromptEditor.
+ *
+ * Used for: Verifier Prompts where each file type has its own prompt set.
+ *
+ * Layout: [resizable sidebar | TabbedPromptEditor]
+ *
+ * Usage:
+ *   <FileTypeTabbedPromptEditor
+ *     prompts={{ skills: { claude: '...', gemini: '...' } }}
+ *     onPromptChange={(fileType, tool, value) => save(fileType, tool, value)}
+ *     fileTypes={[{ id: 'skills', name: 'Skills', icon: <Zap /> }]}
+ *     tools={[{ id: 'claude', name: 'Claude Code' }]}
+ *   />
+ */
+
+import { useState, useRef, useCallback } from 'react'
+import { FileCode, GripVertical, Crosshair } from 'lucide-react'
+import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
+import type { ToolTab, PromptPlaceholder, FileTypeOption } from './types.ts'
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MIN_SIDEBAR_WIDTH = 160
+const MAX_SIDEBAR_WIDTH = 320
+const DEFAULT_SIDEBAR_WIDTH = 200
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface FileTypeTabbedPromptEditorProps {
+  /** Nested prompts: fileType -> tool -> prompt */
+  prompts: Record<string, Record<string, string>>
+  /** Called when a prompt changes */
+  onPromptChange: (fileType: string, tool: string, value: string) => void
+  /** Available file types for the sidebar */
+  fileTypes: FileTypeOption[]
+  /** Tool tabs to display */
+  tools: ToolTab[]
+  /** Default prompts for reset: fileType -> tool -> prompt */
+  defaultPrompts?: Record<string, Record<string, string>>
+  /** Variables per file type */
+  variables?: Record<string, PromptPlaceholder[]>
+  /** Called when reset is triggered */
+  onReset?: (fileType: string, tool: string) => void
+  /** Called when save is triggered */
+  onSave?: (fileType: string, tool: string, content: string) => void
+  /** Custom label for sidebar header (default: "Target") */
+  selectorLabel?: string
+  /** Custom sublabel for sidebar header (default: "Select target file type") */
+  selectorSublabel?: string
+  /** When true, validates "## Verification Checklist" section */
+  validateChecklist?: boolean
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function FileTypeTabbedPromptEditor({
+  prompts,
+  onPromptChange,
+  fileTypes,
+  tools,
+  defaultPrompts,
+  variables,
+  onReset,
+  onSave,
+  selectorLabel = 'Target',
+  selectorSublabel = 'Select target file type',
+  validateChecklist = false,
+  className = '',
+}: FileTypeTabbedPromptEditorProps) {
+  const [selectedFileType, setSelectedFileType] = useState(fileTypes[0]?.id ?? '')
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
+  const isDraggingRef = useRef(false)
+
+  // Derive prompts for current file type
+  const currentPrompts = prompts[selectedFileType] ?? Object.fromEntries(tools.map((t) => [t.id, '']))
+  const currentDefaultPrompts = defaultPrompts?.[selectedFileType]
+  const currentVariables = variables?.[selectedFileType]
+
+  // Forward prompt change with file type context
+  const handlePromptChange = useCallback(
+    (tool: string, value: string) => {
+      onPromptChange(selectedFileType, tool, value)
+    },
+    [selectedFileType, onPromptChange],
+  )
+
+  const handleReset = onReset
+    ? (tool: string) => onReset(selectedFileType, tool)
+    : undefined
+
+  const handleSave = onSave
+    ? (tool: string, content: string) => onSave(selectedFileType, tool, content)
+    : undefined
+
+  // Sidebar resize via pointer events
+  const handleSidebarPointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    isDraggingRef.current = true
+    const target = e.currentTarget as HTMLElement
+    target.setPointerCapture(e.pointerId)
+
+    const startX = e.clientX
+    const startWidth = sidebarWidth
+
+    const handlePointerMove = (moveEvent: PointerEvent) => {
+      if (!isDraggingRef.current) return
+      const deltaX = moveEvent.clientX - startX
+      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
+      setSidebarWidth(newWidth)
+    }
+
+    const handlePointerUp = () => {
+      isDraggingRef.current = false
+      target.removeEventListener('pointermove', handlePointerMove)
+      target.removeEventListener('pointerup', handlePointerUp)
+    }
+
+    target.addEventListener('pointermove', handlePointerMove)
+    target.addEventListener('pointerup', handlePointerUp)
+  }, [sidebarWidth])
+
+  return (
+    <div className={`flex w-full max-w-full bg-[#181825] border border-[#313244] rounded-lg overflow-hidden ${className}`}>
+      {/* Left Sidebar — File Type Selector */}
+      <div
+        className="relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col"
+        style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+      >
+        {/* Header */}
+        <div className="h-[52px] px-3 flex items-center border-b border-[#313244] shrink-0">
+          <div className="flex items-center gap-2">
+            <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
+            <div className="min-w-0">
+              <div className="text-xs font-medium text-neutral-400">{selectorLabel}</div>
+              <div className="text-xs text-neutral-600">{selectorSublabel}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* File Type List */}
+        <div className="flex-1 overflow-y-auto">
+          {fileTypes.map((ft) => {
+            const isSelected = ft.id === selectedFileType
+            return (
+              <button
+                key={ft.id}
+                onClick={() => setSelectedFileType(ft.id)}
+                className={`w-full min-h-[44px] py-2 flex items-center gap-2.5 px-3 text-left transition-colors ${
+                  isSelected
+                    ? 'bg-[#313244]/50 border-l-2 border-[#89b4fa]'
+                    : 'hover:bg-[#1e1e2e] border-l-2 border-transparent'
+                }`}
+              >
+                <div className={`flex-shrink-0 ${isSelected ? 'text-[#89b4fa]' : 'text-[#6c7086]'}`}>
+                  {ft.icon ?? <FileCode className="w-4 h-4" />}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className={`text-sm font-medium truncate ${isSelected ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'}`}>
+                    {ft.name}
+                  </div>
+                  {ft.description && (
+                    <div className="text-xs text-[#6c7086] mt-0.5 leading-relaxed">
+                      {ft.description}
+                    </div>
+                  )}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Resize handle on right edge */}
+        <div
+          onPointerDown={handleSidebarPointerDown}
+          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-[#89b4fa]/30 transition-colors z-10 flex items-center justify-center group"
+        >
+          <GripVertical className="w-3 h-3 text-[#45475a] group-hover:text-[#6c7086] opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
+      </div>
+
+      {/* Main Content — TabbedPromptEditor */}
+      <div className="flex-1 min-w-0 w-0 overflow-hidden border-l border-[#313244]">
+        <TabbedPromptEditor
+          prompts={currentPrompts}
+          onPromptChange={handlePromptChange}
+          tools={tools}
+          defaultPrompts={currentDefaultPrompts}
+          variables={currentVariables}
+          onReset={handleReset}
+          onSave={handleSave}
+          validateChecklist={validateChecklist}
+        />
+      </div>
+    </div>
+  )
+}

package/components/sections/prompt-editor/index.ts

@@ -0,0 +1,121 @@
+/**
+ * Prompt Editor — Section barrel export
+ *
+ * Part of: Sections > Prompt Editor
+ *
+ * This section provides a 3-tier prompt editing system with Monaco editor,
+ * AI tool tabs, template variable support, and resizable sidebars.
+ *
+ * ╔═══════════════════════════════════════════════════════════════════════╗
+ * ║  ARCHITECTURE OVERVIEW                                               ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  The system has three tiers, each adding a sidebar layer:             ║
+ * ║                                                                       ║
+ * ║  1. TabbedPromptEditor (core)                                         ║
+ * ║     [tool tabs | Monaco editor | variables sidebar]                   ║
+ * ║     Base editor with AI tool tabs and template variable support.      ║
+ * ║                                                                       ║
+ * ║  2. FileTypeTabbedPromptEditor                                        ║
+ * ║     [file type sidebar | TabbedPromptEditor]                          ║
+ * ║     Adds a flat sidebar of file types. Each file type gets its own    ║
+ * ║     set of per-tool prompts.                                          ║
+ * ║                                                                       ║
+ * ║  3. SimulatorPromptEditor                                             ║
+ * ║     [scenario/step tree sidebar | TabbedPromptEditor]                 ║
+ * ║     Adds a hierarchical sidebar with expandable scenarios and child   ║
+ * ║     steps. Each scenario+step gets its own per-tool prompts.          ║
+ * ║                                                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║  QUICK START                                                          ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  1. Standalone TabbedPromptEditor:                                    ║
+ * ║                                                                       ║
+ * ║     import { TabbedPromptEditor } from '@toolr/ui-design'             ║
+ * ║                                                                       ║
+ * ║     <TabbedPromptEditor                                               ║
+ * ║       prompts={{ claude: '...', gemini: '...' }}                      ║
+ * ║       onPromptChange={(tool, value) => save(tool, value)}             ║
+ * ║       tools={[                                                        ║
+ * ║         { id: 'claude', name: 'Claude Code' },                        ║
+ * ║         { id: 'gemini', name: 'Gemini CLI' },                         ║
+ * ║       ]}                                                              ║
+ * ║       variables={[{ name: 'FILE_PATH', description: 'Path' }]}       ║
+ * ║       standalone                                                      ║
+ * ║     />                                                                ║
+ * ║                                                                       ║
+ * ║  2. FileTypeTabbedPromptEditor (for verifier prompts):                ║
+ * ║                                                                       ║
+ * ║     import { FileTypeTabbedPromptEditor } from '@toolr/ui-design'     ║
+ * ║                                                                       ║
+ * ║     <FileTypeTabbedPromptEditor                                       ║
+ * ║       prompts={{ skills: { claude: '...' }, commands: { claude: '.' }}}║
+ * ║       onPromptChange={(fileType, tool, value) => ...}                 ║
+ * ║       fileTypes={[                                                    ║
+ * ║         { id: 'skills', name: 'Skills' },                             ║
+ * ║         { id: 'commands', name: 'Commands' },                         ║
+ * ║       ]}                                                              ║
+ * ║       tools={[{ id: 'claude', name: 'Claude' }]}                     ║
+ * ║     />                                                                ║
+ * ║                                                                       ║
+ * ║  3. SimulatorPromptEditor (for simulator prompts):                    ║
+ * ║                                                                       ║
+ * ║     import { SimulatorPromptEditor } from '@toolr/ui-design'          ║
+ * ║                                                                       ║
+ * ║     <SimulatorPromptEditor                                            ║
+ * ║       prompts={{ clean: { main: { claude: '...' } } }}               ║
+ * ║       onPromptChange={(scenario, step, tool, value) => ...}          ║
+ * ║       scenarios={[{                                                   ║
+ * ║         id: 'clean', name: 'Clean Build',                             ║
+ * ║         steps: [{ id: 'main', name: 'Main Step' }],                   ║
+ * ║       }]}                                                             ║
+ * ║       tools={[{ id: 'claude', name: 'Claude' }]}                     ║
+ * ║     />                                                                ║
+ * ║                                                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║  IN CONFIGR                                                           ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  - Verifier Prompts use FileTypeTabbedPromptEditor                    ║
+ * ║    (file types = skills, commands, project-memory, etc.)              ║
+ * ║  - Simulator Prompts use SimulatorPromptEditor                        ║
+ * ║    (scenarios = clean, migrate, etc. with steps per scenario)         ║
+ * ║  - Both variants embed TabbedPromptEditor for the actual editing      ║
+ * ║                                                                       ║
+ * ╚═══════════════════════════════════════════════════════════════════════╝
+ */
+
+// Types
+export type {
+  AiToolKey,
+  ToolTab,
+  PromptPlaceholder,
+  PromptSnapshot,
+  PromptEditorApi,
+  FileTypeOption,
+  ScenarioOption,
+} from './types.ts'
+
+// Hook
+export {
+  usePromptEditor,
+  type UsePromptEditorOptions,
+  type UsePromptEditorReturn,
+} from './use-prompt-editor.ts'
+
+// Components
+export {
+  TabbedPromptEditor,
+  type TabbedPromptEditorProps,
+} from './tabbed-prompt-editor.tsx'
+
+export {
+  FileTypeTabbedPromptEditor,
+  type FileTypeTabbedPromptEditorProps,
+} from './file-type-tabbed-prompt-editor.tsx'
+
+export {
+  SimulatorPromptEditor,
+  type SimulatorPromptEditorProps,
+} from './simulator-prompt-editor.tsx'

package/components/sections/prompt-editor/simulator-prompt-editor.tsx

@@ -0,0 +1,276 @@
+/**
+ * SimulatorPromptEditor — Hierarchical tree sidebar wrapper for TabbedPromptEditor
+ *
+ * Part of: Sections > Prompt Editor
+ *
+ * Adds a resizable left sidebar with expandable scenarios and child steps.
+ * Selecting a step swaps the prompts displayed in the embedded TabbedPromptEditor.
+ *
+ * Used for: Simulator Prompts where each scenario/step combination has its own prompt set.
+ *
+ * Layout: [resizable tree sidebar | TabbedPromptEditor]
+ *
+ * Usage:
+ *   <SimulatorPromptEditor
+ *     prompts={{ clean: { main: { claude: '...' } } }}
+ *     onPromptChange={(scenario, step, tool, value) => save(scenario, step, tool, value)}
+ *     scenarios={[{ id: 'clean', name: 'Clean Build', steps: [{ id: 'main', name: 'Main Step' }] }]}
+ *     tools={[{ id: 'claude', name: 'Claude Code' }]}
+ *   />
+ */
+
+import { useState, useRef, useCallback, useMemo } from 'react'
+import { ChevronDown, ChevronRight, GripVertical, Crosshair } from 'lucide-react'
+import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
+import type { ToolTab, PromptPlaceholder, ScenarioOption } from './types.ts'
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MIN_SIDEBAR_WIDTH = 180
+const MAX_SIDEBAR_WIDTH = 360
+const DEFAULT_SIDEBAR_WIDTH = 220
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface SimulatorPromptEditorProps {
+  /** Nested prompts: scenario -> step -> tool -> prompt */
+  prompts: Record<string, Record<string, Record<string, string>>>
+  /** Called when a prompt changes */
+  onPromptChange: (scenario: string, step: string, tool: string, value: string) => void
+  /** Available scenarios with their steps */
+  scenarios: ScenarioOption[]
+  /** Tool tabs to display */
+  tools: ToolTab[]
+  /** Default prompts for reset: scenario -> step -> tool -> prompt */
+  defaultPrompts?: Record<string, Record<string, Record<string, string>>>
+  /** Variables per scenario/step (key format: "scenario:step") */
+  variables?: Record<string, PromptPlaceholder[]>
+  /** Called when reset is triggered */
+  onReset?: (scenario: string, step: string, tool: string) => void
+  /** Called when save is triggered */
+  onSave?: (scenario: string, step: string, tool: string, content: string) => void
+  /** When true, validates "## Verification Checklist" section */
+  validateChecklist?: boolean
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function SimulatorPromptEditor({
+  prompts,
+  onPromptChange,
+  scenarios,
+  tools,
+  defaultPrompts,
+  variables,
+  onReset,
+  onSave,
+  validateChecklist = false,
+  className = '',
+}: SimulatorPromptEditorProps) {
+  const defaultScenarioId = scenarios[0]?.id ?? ''
+  const defaultStepId = scenarios[0]?.steps[0]?.id ?? ''
+
+  const [selectedScenario, setSelectedScenario] = useState(defaultScenarioId)
+  const [selectedStep, setSelectedStep] = useState(defaultStepId)
+  const [expandedScenarios, setExpandedScenarios] = useState<Set<string>>(
+    new Set([defaultScenarioId]),
+  )
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
+  const isDraggingRef = useRef(false)
+
+  // Ensure selected scenario is always expanded
+  const effectiveExpanded = useMemo(() => {
+    if (selectedScenario && !expandedScenarios.has(selectedScenario)) {
+      return new Set([...expandedScenarios, selectedScenario])
+    }
+    return expandedScenarios
+  }, [expandedScenarios, selectedScenario])
+
+  // Derive prompts for current selection
+  const currentPrompts = prompts[selectedScenario]?.[selectedStep]
+    ?? Object.fromEntries(tools.map((t) => [t.id, '']))
+  const currentDefaultPrompts = defaultPrompts?.[selectedScenario]?.[selectedStep]
+  const variableKey = `${selectedScenario}:${selectedStep}`
+  const currentVariables = variables?.[variableKey]
+
+  // Forward prompt change with scenario/step context
+  const handlePromptChange = useCallback(
+    (tool: string, value: string) => {
+      onPromptChange(selectedScenario, selectedStep, tool, value)
+    },
+    [selectedScenario, selectedStep, onPromptChange],
+  )
+
+  const handleReset = onReset
+    ? (tool: string) => onReset(selectedScenario, selectedStep, tool)
+    : undefined
+
+  const handleSave = onSave
+    ? (tool: string, content: string) => onSave(selectedScenario, selectedStep, tool, content)
+    : undefined
+
+  // Toggle scenario expansion
+  const toggleScenario = (scenarioId: string) => {
+    setExpandedScenarios((prev: Set<string>) => {
+      const next = new Set(prev)
+      if (next.has(scenarioId)) {
+        next.delete(scenarioId)
+      } else {
+        next.add(scenarioId)
+      }
+      return next
+    })
+  }
+
+  // Select a step (also expands parent scenario)
+  const selectStep = (scenarioId: string, stepId: string) => {
+    setSelectedScenario(scenarioId)
+    setSelectedStep(stepId)
+    if (!effectiveExpanded.has(scenarioId)) {
+      setExpandedScenarios((prev: Set<string>) => new Set([...prev, scenarioId]))
+    }
+  }
+
+  // Sidebar resize via pointer events
+  const handleSidebarPointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    isDraggingRef.current = true
+    const target = e.currentTarget as HTMLElement
+    target.setPointerCapture(e.pointerId)
+
+    const startX = e.clientX
+    const startWidth = sidebarWidth
+
+    const handlePointerMove = (moveEvent: PointerEvent) => {
+      if (!isDraggingRef.current) return
+      const deltaX = moveEvent.clientX - startX
+      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
+      setSidebarWidth(newWidth)
+    }
+
+    const handlePointerUp = () => {
+      isDraggingRef.current = false
+      target.removeEventListener('pointermove', handlePointerMove)
+      target.removeEventListener('pointerup', handlePointerUp)
+    }
+
+    target.addEventListener('pointermove', handlePointerMove)
+    target.addEventListener('pointerup', handlePointerUp)
+  }, [sidebarWidth])
+
+  return (
+    <div className={`flex w-full max-w-full bg-[#181825] border border-[#313244] rounded-lg overflow-hidden ${className}`}>
+      {/* Left Sidebar — Tree Selector */}
+      <div
+        className="relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col"
+        style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+      >
+        {/* Header */}
+        <div className="h-[52px] px-3 flex items-center border-b border-[#313244] shrink-0">
+          <div className="flex items-center gap-2">
+            <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
+            <div className="min-w-0">
+              <div className="text-xs font-medium text-neutral-400">Scenario</div>
+              <div className="text-xs text-neutral-600">Select scenario and step</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Tree View */}
+        <div className="flex-1 overflow-y-auto">
+          {scenarios.map((scenario) => {
+            const isExpanded = effectiveExpanded.has(scenario.id)
+            const isScenarioActive = selectedScenario === scenario.id
+
+            return (
+              <div key={scenario.id}>
+                {/* Scenario Header */}
+                <button
+                  onClick={() => toggleScenario(scenario.id)}
+                  className={`w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-[#1e1e2e] ${
+                    isScenarioActive ? 'bg-[#1e1e2e]/50' : ''
+                  }`}
+                >
+                  <div className="flex-shrink-0 mt-0.5 text-[#6c7086]">
+                    {isExpanded ? (
+                      <ChevronDown className="w-4 h-4" />
+                    ) : (
+                      <ChevronRight className="w-4 h-4" />
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className={`text-sm font-medium ${isScenarioActive ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'}`}>
+                      {scenario.name}
+                    </div>
+                    {scenario.description && (
+                      <div className="text-xs text-[#6c7086] mt-0.5 leading-relaxed">
+                        {scenario.description}
+                      </div>
+                    )}
+                  </div>
+                </button>
+
+                {/* Steps (children) */}
+                {isExpanded && (
+                  <div className="pb-1">
+                    {scenario.steps.map((step) => {
+                      const isStepSelected = selectedScenario === scenario.id && selectedStep === step.id
+                      return (
+                        <button
+                          key={step.id}
+                          onClick={() => selectStep(scenario.id, step.id)}
+                          className={`w-full h-[32px] flex items-center gap-2 pl-9 pr-3 text-left transition-colors ${
+                            isStepSelected
+                              ? 'bg-[#313244]/50 border-l-2 border-[#89b4fa]'
+                              : 'hover:bg-[#1e1e2e] border-l-2 border-transparent'
+                          }`}
+                        >
+                          <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+                            isStepSelected ? 'bg-[#89b4fa]' : 'bg-[#45475a]'
+                          }`} />
+                          <span className={`text-xs ${isStepSelected ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'}`}>
+                            {step.name}
+                          </span>
+                        </button>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Resize handle on right edge */}
+        <div
+          onPointerDown={handleSidebarPointerDown}
+          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-[#89b4fa]/30 transition-colors z-10 flex items-center justify-center group"
+        >
+          <GripVertical className="w-3 h-3 text-[#45475a] group-hover:text-[#6c7086] opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
+      </div>
+
+      {/* Main Content — TabbedPromptEditor */}
+      <div className="flex-1 min-w-0 w-0 overflow-hidden border-l border-[#313244]">
+        <TabbedPromptEditor
+          prompts={currentPrompts}
+          onPromptChange={handlePromptChange}
+          tools={tools}
+          defaultPrompts={currentDefaultPrompts}
+          variables={currentVariables}
+          onReset={handleReset}
+          onSave={handleSave}
+          validateChecklist={validateChecklist}
+        />
+      </div>
+    </div>
+  )
+}