Skip to content

Workflow Panel with Tailwind Migration#3

Open
ParkerM2 wants to merge 31 commits intomasterfrom
feature/workflow-panel-tailwind
Open

Workflow Panel with Tailwind Migration#3
ParkerM2 wants to merge 31 commits intomasterfrom
feature/workflow-panel-tailwind

Conversation

@ParkerM2
Copy link
Owner

Summary

  • Full Tailwind/shadcn migration: Replaced 801-line BEM App.css with Tailwind CSS v4 + shadcn/ui component system. Created 14 reusable UI primitives (Button, Badge, Card, Dialog, Tabs, Timeline, etc.) with CVA variants and cn() utility. Converted all 11 existing components to Tailwind utilities.
  • Workflow Panel: New resizable side panel (Ctrl+Shift+W) showing a 6-step workflow timeline with live status tracking. Each step is clickable with detail view, editable markdown content that saves to disk, and auto-scaffolding for projects without workflow config.
  • Workflow IPC system: WorkflowScanner class in main process with 9 IPC channels for reading workflow definitions, step content, progress tracking, and project scaffolding. useWorkflow hook manages state with live file system watching.

Changes

Tailwind Migration (Waves 1-3)

  • Install Tailwind v4, @tailwindcss/vite, CVA, Radix UI, lucide-react
  • globals.css with oklch dark theme, @theme inline config
  • 14 shadcn/ui components in src/renderer/src/components/ui/
  • All 11 existing components converted from BEM to Tailwind
  • App.css deleted (801 lines removed)
  • xterm.js theme harmonized with shadcn palette

Workflow System (Waves 4-5)

  • WorkflowScanner + 9 IPC handlers in src/main/index.js
  • Preload bridge with 10 workflow API methods
  • useWorkflow hook with live progress watching
  • WorkflowPanel with timeline overview + step detail sub-view
  • WorkflowTimeline using Timeline component with status variants
  • WorkflowStepDetail with markdown rendering and edit/save
  • 6 real workflow step documentation files
  • Auto-scaffold for new projects

Test plan

  • npm run build passes
  • npm run dev starts without errors
  • App renders with dark theme (no unstyled flash)
  • Title bar, tabs, sidebar, terminal all display correctly
  • Ctrl+Shift+W toggles Workflow panel
  • Workflow panel shows 6 steps with timeline dots
  • Clicking a step opens detail view with markdown content
  • Edit + Save updates the step file on disk
  • File explorer, editor, settings all work as before
  • Split panes work alongside workflow panel

🤖 Generated with Claude Code

ParkerES and others added 30 commits February 21, 2026 23:37
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…+ shadcn dependencies and update build config
…tions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…umentation structure and update agent definitions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add 5 Radix UI wrapper components (dropdown-menu, dialog, tabs,
scroll-area, tooltip) with cn() utility, data-slot attributes,
compound exports, and animation classes. React 19 compatible (no
forwardRef).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Convert App.jsx, PaneContainer.jsx, TabBar.jsx, Sidebar.jsx to use
Tailwind utility classes and shadcn/ui Button component. Switch main.jsx
CSS import from App.css to globals.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Convert WelcomeScreen, FileExplorer, CommandList to use Tailwind
utility classes and shadcn/ui components (Card, Button, Input, ScrollArea).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Convert TerminalPane to use Tailwind utility classes and shadcn/ui
Button component. useTerminal.js unchanged (no CSS dependencies).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
TerminalPane: add Badge component showing 'Claude' (info variant) or
'Terminal' (secondary variant) based on pane config. Shortened ptyId
display to 8 chars for cleaner header.

useTerminal: update xterm THEME neutral tones (background, foreground,
cursor, selection, black/white/brightBlack/brightWhite) to align with
shadcn dark oklch neutral scale. ANSI colors kept vibrant.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Convert EditorPanel to use Tailwind utility classes with cn() for
conditional class merging. CodeMirror integration preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Convert InputArea, Settings, ErrorBoundary to use Tailwind utility
classes and shadcn/ui components (Button, Input).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
All components now use Tailwind utility classes via globals.css.
The BEM-based App.css is no longer imported or needed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add WorkflowScanner class to main process for reading workflow
definitions, step content, progress tracking, and project scaffolding.
Expose all workflow APIs through preload bridge with workflow: namespace.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Create useWorkflow hook for workflow IPC state management, WorkflowPanel
component for timeline overview and step detail views, integrate into
App.jsx pane system with toggle button and Ctrl+Shift+W shortcut.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…k and WorkflowPanel with App.jsx integration
WorkflowTimeline renders workflow steps using the Timeline component
with status-based variants. WorkflowStepDetail shows step content
with edit/save functionality and simple markdown rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants