@geenius/ai-workflow 0.1.0

package/packages/solidjs/src/primitives/createWorkflowRun.ts

@@ -0,0 +1,32 @@
+// @geenius-ai-workflow/solidjs — src/primitives/createWorkflowRun.ts
+import { createSignal } from 'solid-js'
+import type { WorkflowRun, StepResult, RunStatus } from '@geenius-ai-workflow/shared'
+
+export function createWorkflowRun() {
+  const [run, setRun] = createSignal<WorkflowRun | null>(null)
+  const [status, setStatus] = createSignal<RunStatus>('pending')
+  const [currentStepIndex, setCurrentStepIndex] = createSignal(0)
+  const [completedSteps, setCompletedSteps] = createSignal<StepResult[]>([])
+  const [progress, setProgress] = createSignal(0)
+  const [error, setError] = createSignal<string | null>(null)
+
+  const trackRun = (wfRun: WorkflowRun) => {
+    setRun(wfRun); setStatus(wfRun.status); setCurrentStepIndex(wfRun.currentStepIndex)
+    setCompletedSteps(wfRun.stepResults); setError(wfRun.error ?? null)
+    const done = wfRun.stepResults.filter(s => s.status === 'completed' || s.status === 'skipped').length
+    setProgress(wfRun.stepResults.length > 0 ? Math.round((done / wfRun.stepResults.length) * 100) : 0)
+  }
+
+  const updateStep = (result: StepResult) => {
+    setCompletedSteps(prev => {
+      const idx = prev.findIndex(s => s.stepId === result.stepId)
+      if (idx >= 0) { const u = [...prev]; u[idx] = result; return u }
+      return [...prev, result]
+    })
+    setCurrentStepIndex(prev => prev + 1)
+  }
+
+  const reset = () => { setRun(null); setStatus('pending'); setCurrentStepIndex(0); setCompletedSteps([]); setProgress(0); setError(null) }
+
+  return { run, status, currentStepIndex, completedSteps, progress, error, trackRun, updateStep, reset, isRunning: () => status() === 'running', isComplete: () => status() === 'completed', isFailed: () => status() === 'failed' }
+}

package/packages/solidjs/src/primitives/createWorkflowStep.ts

@@ -0,0 +1,23 @@
+// @geenius-ai-workflow/solidjs — src/primitives/createWorkflowStep.ts
+import { createSignal, createMemo } from 'solid-js'
+import type { WorkflowStepDef, StepResult, StepStatus, StepConfig } from '@geenius-ai-workflow/shared'
+
+const STEP_ICONS: Record<string, string> = { 'llm-call': '🤖', transform: '⚙️', condition: '🔀', 'human-approval': '👤', webhook: '🌐', delay: '⏱️', parallel: '⚡', loop: '🔄', 'sub-workflow': '📋', custom: '🔧' }
+
+export function createWorkflowStep(stepDef: WorkflowStepDef) {
+  const [status, setStatus] = createSignal<StepStatus>('pending')
+  const [output, setOutput] = createSignal<unknown>(null)
+  const [error, setError] = createSignal<string | null>(null)
+  const [durationMs, setDurationMs] = createSignal(0)
+
+  const icon = createMemo(() => STEP_ICONS[stepDef.type] ?? '📦')
+  const statusColor = createMemo(() => {
+    const m: Record<StepStatus, string> = { pending: 'gray', running: 'blue', completed: 'green', failed: 'red', skipped: 'orange', 'waiting-approval': 'purple' }
+    return m[status()]
+  })
+
+  const updateFromResult = (result: StepResult) => { setStatus(result.status); setOutput(result.output ?? null); setError(result.error ?? null); setDurationMs(result.durationMs) }
+  const reset = () => { setStatus('pending'); setOutput(null); setError(null); setDurationMs(0) }
+
+  return { stepDef, status, output, error, durationMs, icon, statusColor, updateFromResult, reset, isComplete: () => status() === 'completed', isRunning: () => status() === 'running', isFailed: () => status() === 'failed', isWaiting: () => status() === 'waiting-approval', config: stepDef.config as StepConfig }
+}

package/packages/solidjs/src/primitives/createWorkflowTemplates.ts

@@ -0,0 +1,28 @@
+// @geenius-ai-workflow/solidjs — src/primitives/createWorkflowTemplates.ts
+import { createSignal, createMemo } from 'solid-js'
+import type { WorkflowDefinition } from '@geenius-ai-workflow/shared'
+import { WORKFLOW_TEMPLATES, getTemplate, getTemplatesByCategory } from '@geenius-ai-workflow/shared'
+import type { WorkflowTemplate } from '@geenius-ai-workflow/shared'
+
+export function createWorkflowTemplates(userId: string) {
+  const [selectedTemplateId, setSelectedTemplateId] = createSignal<string | null>(null)
+  const [filterCategory, setFilterCategory] = createSignal<WorkflowTemplate['category'] | 'all'>('all')
+  const [searchQuery, setSearchQuery] = createSignal('')
+
+  const filteredTemplates = createMemo(() => {
+    let templates = filterCategory() === 'all' ? WORKFLOW_TEMPLATES : getTemplatesByCategory(filterCategory() as WorkflowTemplate['category'])
+    const q = searchQuery().toLowerCase()
+    if (q) templates = templates.filter(t => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || t.tags.some(tag => tag.includes(q)))
+    return templates
+  })
+
+  const selectedTemplate = createMemo(() => { const id = selectedTemplateId(); return id ? getTemplate(id) ?? null : null })
+
+  const createFromTemplate = (templateId: string): WorkflowDefinition | null => {
+    const tpl = getTemplate(templateId); return tpl ? tpl.create(userId) : null
+  }
+
+  const categories = createMemo(() => [...new Set(WORKFLOW_TEMPLATES.map(t => t.category))])
+
+  return { templates: filteredTemplates, allTemplates: WORKFLOW_TEMPLATES, selectedTemplate, selectedTemplateId, categories, filterCategory, searchQuery, setSelectedTemplateId, setFilterCategory, setSearchQuery, createFromTemplate }
+}

package/packages/solidjs/src/primitives/index.ts

@@ -0,0 +1,8 @@
+// @geenius-ai-workflow/solidjs — src/primitives/index.ts
+export { createWorkflow } from './createWorkflow'
+export { createWorkflowBuilder } from './createWorkflowBuilder'
+export { createWorkflowRun } from './createWorkflowRun'
+export { createWorkflowStep } from './createWorkflowStep'
+export { createApprovalGate } from './createApprovalGate'
+export type { ApprovalRequest } from './createApprovalGate'
+export { createWorkflowTemplates } from './createWorkflowTemplates'

package/packages/solidjs/tsconfig.json

@@ -0,0 +1 @@
+{"compilerOptions":{"target":"ES2022","module":"ESNext","moduleResolution":"bundler","jsx":"preserve","jsxImportSource":"solid-js","declaration":true,"declarationMap":true,"sourceMap":true,"outDir":"./dist","rootDir":"./src","strict":true,"esModuleInterop":true,"skipLibCheck":true,"forceConsistentCasingInFileNames":true,"resolveJsonModule":true,"isolatedModules":true},"include":["src"],"exclude":["node_modules","dist"]}

package/packages/solidjs/tsup.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsup'
+export default defineConfig({
+    entry: { index: 'src/index.ts' },
+    format: ['esm'], dts: true, clean: true, sourcemap: true,
+    external: ['solid-js', '@geenius-ai-workflow/shared'],
+    esbuildOptions(options) { options.jsx = 'preserve' },
+})

package/packages/solidjs-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-ai-workflow/solidjs-css\n\n> Geenius AI Workflow — SolidJS primitives (vanilla CSS variant)\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-ai-workflow/solidjs-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-ai-workflow/solidjs-css';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/solidjs-css/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@geenius-ai-workflow/solidjs-css",
+  "version": "0.1.0",
+  "description": "Geenius AI Workflow — SolidJS primitives (vanilla CSS variant)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.6.0"
+  },
+  "dependencies": {
+    "@geenius-ai-workflow/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.5",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/solidjs-css/src/components/ApprovalModal.tsx

@@ -0,0 +1,6 @@
+// @geenius-ai-workflow/solidjs-css — components/ApprovalModal.tsx
+import { Show, For } from 'solid-js'
+import type { ApprovalRequest } from '../primitives'
+export function ApprovalModal(props: { request: ApprovalRequest | null; onApprove: (id: string) => void; onReject: (id: string) => void }) {
+  return (<Show when={props.request}>{(req) => (<div role="dialog" aria-modal="true"><div class="ai-workflow__approval-overlay" /><div class="ai-workflow__approval-dialog"><div class="ai-workflow__approval-header"><span class="ai-workflow__approval-icon">👤</span><h3 class="ai-workflow__approval-title">Approval Required</h3></div><div><p class="ai-workflow__approval-message">{req().message}</p><Show when={req().approvers && req().approvers!.length > 0}><div><For each={req().approvers!}>{(a) => <span class="ai-workflow__approval-approver-badge">{a}</span>}</For></div></Show></div><div class="ai-workflow__approval-actions"><button class="ai-workflow__approval-reject" onClick={() => props.onReject(req().id)}>✕ Reject</button><button class="ai-workflow__approval-approve" onClick={() => props.onApprove(req().id)}>✓ Approve</button></div></div></div>)}</Show>)
+}

package/packages/solidjs-css/src/components/StepConfigPanel.tsx

@@ -0,0 +1,7 @@
+// @geenius-ai-workflow/solidjs-css — components/StepConfigPanel.tsx
+import { createSignal } from 'solid-js'
+import type { WorkflowStepDef } from '@geenius-ai-workflow/shared'
+export function StepConfigPanel(props: { step: WorkflowStepDef; onUpdate: (id: string, u: Partial<WorkflowStepDef>) => void; onDelete: (id: string) => void; onClose: () => void }) {
+  const [name, setName] = createSignal(props.step.name)
+  return (<div class="ai-workflow__config-panel" role="complementary"><div class="ai-workflow__config-header"><h3 class="ai-workflow__config-title">Configure Step</h3><button class="ai-workflow__config-close" onClick={props.onClose}>✕</button></div><div class="ai-workflow__config-body"><label class="ai-workflow__config-label">Step Name<input class="ai-workflow__config-input" value={name()} onInput={(e) => setName(e.currentTarget.value)} onBlur={() => { if (name().trim() && name() !== props.step.name) props.onUpdate(props.step.id, { name: name().trim() }) }} /></label><div class="ai-workflow__config-field"><span class="ai-workflow__config-field-label">Type</span><span class="ai-workflow__config-field-value">{props.step.type}</span></div><pre class="ai-workflow__config-json-view">{JSON.stringify(props.step.config, null, 2)}</pre></div><div><button class="ai-workflow__config-delete" onClick={() => { props.onDelete(props.step.id); props.onClose() }}>🗑 Delete</button></div></div>)
+}

package/packages/solidjs-css/src/components/StepConnector.tsx

@@ -0,0 +1,6 @@
+// @geenius-ai-workflow/solidjs-css — components/StepConnector.tsx
+const W = 200, H = 80
+export function StepConnector(props: { from: { x: number; y: number }; to: { x: number; y: number }; label?: string; isActive?: boolean }) {
+  const x1 = () => props.from.x + W, y1 = () => props.from.y + H / 2, x2 = () => props.to.x, y2 = () => props.to.y + H / 2, mx = () => (x1() + x2()) / 2
+  return (<g class="ai-workflow__connector"><path d={`M ${x1()} ${y1()} C ${mx()} ${y1()}, ${mx()} ${y2()}, ${x2()} ${y2()}`} fill="none" stroke={props.isActive ? 'oklch(0.7 0.2 145)' : 'oklch(0.5 0.02 260)'} stroke-width={props.isActive ? 3 : 2} />{props.label && <text x={mx()} y={(y1() + y2()) / 2 - 8} text-anchor="middle" fill="oklch(0.7 0.02 260)" font-size="12">{props.label}</text>}</g>)
+}

package/packages/solidjs-css/src/components/StepNode.tsx

@@ -0,0 +1,7 @@
+// @geenius-ai-workflow/solidjs-css — components/StepNode.tsx
+import type { WorkflowStepDef, StepType } from '@geenius-ai-workflow/shared'
+const ICONS: Record<StepType, string> = { 'llm-call': '🤖', transform: '⚙️', condition: '🔀', 'human-approval': '👤', webhook: '🌐', delay: '⏱️', parallel: '⚡', loop: '🔄', 'sub-workflow': '📋', custom: '🔧' }
+export function StepNode(props: { step: WorkflowStepDef; isSelected?: boolean; status?: string; onClick?: () => void }) {
+  const cls = () => ['ai-workflow__step-node', props.isSelected && 'ai-workflow__step-node--selected', props.status && `ai-workflow__step-node--${props.status}`].filter(Boolean).join(' ')
+  return (<div class={cls()} role="button" tabIndex={0} onClick={props.onClick} style={props.step.position ? { position: 'absolute', left: `${props.step.position.x}px`, top: `${props.step.position.y}px` } : undefined}><div class="ai-workflow__step-header"><span class="ai-workflow__step-icon">{ICONS[props.step.type]}</span><span class="ai-workflow__step-name">{props.step.name}</span></div><div class="ai-workflow__step-type-badge">{props.step.type}</div></div>)
+}

package/packages/solidjs-css/src/components/StepPalette.tsx

@@ -0,0 +1,7 @@
+// @geenius-ai-workflow/solidjs-css — components/StepPalette.tsx
+import { For } from 'solid-js'
+import type { StepType } from '@geenius-ai-workflow/shared'
+const ITEMS: Array<{ type: StepType; label: string; icon: string; desc: string }> = [{ type: 'llm-call', label: 'LLM Call', icon: '🤖', desc: 'Call an AI model' },{ type: 'transform', label: 'Transform', icon: '⚙️', desc: 'Transform data' },{ type: 'condition', label: 'Condition', icon: '🔀', desc: 'If/else branching' },{ type: 'human-approval', label: 'Approval', icon: '👤', desc: 'Human approval gate' },{ type: 'webhook', label: 'Webhook', icon: '🌐', desc: 'HTTP request' },{ type: 'delay', label: 'Delay', icon: '⏱️', desc: 'Wait' },{ type: 'parallel', label: 'Parallel', icon: '⚡', desc: 'Run in parallel' },{ type: 'loop', label: 'Loop', icon: '🔄', desc: 'Iterate' },{ type: 'sub-workflow', label: 'Sub-workflow', icon: '📋', desc: 'Run another workflow' },{ type: 'custom', label: 'Custom', icon: '🔧', desc: 'Custom handler' }]
+export function StepPalette(props: { onAddStep: (t: StepType) => void }) {
+  return (<div class="ai-workflow__step-palette" role="list"><h3 class="ai-workflow__palette-title">Steps</h3><For each={ITEMS}>{(item) => <button class="ai-workflow__palette-item" onClick={() => props.onAddStep(item.type)}><span class="ai-workflow__palette-icon">{item.icon}</span><div class="ai-workflow__palette-info"><span class="ai-workflow__palette-label">{item.label}</span><span class="ai-workflow__palette-desc">{item.desc}</span></div></button>}</For></div>)
+}

package/packages/solidjs-css/src/components/WorkflowCanvas.tsx

@@ -0,0 +1,7 @@
+// @geenius-ai-workflow/solidjs-css — components/WorkflowCanvas.tsx
+import { For, Show } from 'solid-js'
+import type { WorkflowDefinition } from '@geenius-ai-workflow/shared'
+import { StepNode } from './StepNode'; import { StepConnector } from './StepConnector'
+export function WorkflowCanvas(props: { definition: WorkflowDefinition; selectedStepId: string | null; onSelectStep: (id: string | null) => void }) {
+  return (<div class="ai-workflow__canvas" role="application"><svg style={{ position: 'absolute', inset: '0', 'pointer-events': 'none' }}><For each={props.definition.connections}>{(conn) => { const f = () => props.definition.steps.find(s => s.id === conn.fromStepId); const t = () => props.definition.steps.find(s => s.id === conn.toStepId); return <Show when={f()?.position && t()?.position}><StepConnector from={f()!.position!} to={t()!.position!} label={conn.label} /></Show> }}</For></svg><div><For each={props.definition.steps}>{(step) => <StepNode step={step} isSelected={props.selectedStepId === step.id} onClick={() => props.onSelectStep(step.id === props.selectedStepId ? null : step.id)} />}</For></div><Show when={props.definition.steps.length === 0}><div class="ai-workflow__canvas-empty"><p>No steps yet</p></div></Show></div>)
+}

package/packages/solidjs-css/src/components/WorkflowRunPanel.tsx

@@ -0,0 +1,8 @@
+// @geenius-ai-workflow/solidjs-css — components/WorkflowRunPanel.tsx
+import { Show, For } from 'solid-js'
+import type { WorkflowRun } from '@geenius-ai-workflow/shared'
+import { formatCost } from '@geenius-ai-workflow/shared'
+const SI: Record<string, string> = { pending: '⏳', running: '🔄', completed: '✅', failed: '❌', skipped: '⏭️', 'waiting-approval': '👤' }
+export function WorkflowRunPanel(props: { run: WorkflowRun | null; isRunning: boolean; onCancel?: () => void }) {
+  return (<div class="ai-workflow__run-panel"><Show when={!props.run}><div class="ai-workflow__run-empty"><p>No active run.</p></div></Show><Show when={props.run}>{(r) => { const done = () => r().stepResults.filter(s => s.status === 'completed').length; const total = () => r().stepResults.length; const pct = () => total() > 0 ? Math.round((done() / total()) * 100) : 0; const cost = () => r().stepResults.reduce((s, x) => s + (x.costUsd ?? 0), 0); return (<><div class="ai-workflow__run-header"><h3 class="ai-workflow__run-title">{SI[r().status]} Run {r().status}</h3><Show when={props.isRunning && props.onCancel}><button class="ai-workflow__run-cancel" onClick={props.onCancel}>⏹ Cancel</button></Show></div><div class="ai-workflow__run-progress"><div class="ai-workflow__run-progress-bar"><div class="ai-workflow__run-progress-fill" style={{ width: `${pct()}%` }} /></div><span class="ai-workflow__run-progress-text">{done()}/{total()} ({pct()}%)</span></div><Show when={cost() > 0}><span class="ai-workflow__run-stat">💰 {formatCost(cost())}</span></Show><Show when={r().error}><div class="ai-workflow__run-error">{r().error}</div></Show><ul class="ai-workflow__run-steps"><For each={r().stepResults}>{(sr) => <li class="ai-workflow__run-step-item" data-status={sr.status}><span>{SI[sr.status]}</span><span>{sr.stepName}</span><span>{sr.durationMs}ms</span></li>}</For></ul></>)}}</Show></div>)
+}

package/packages/solidjs-css/src/components/WorkflowToolbar.tsx

@@ -0,0 +1,5 @@
+// @geenius-ai-workflow/solidjs-css — components/WorkflowToolbar.tsx
+import { Show } from 'solid-js'
+export function WorkflowToolbar(props: { workflowName: string; isDirty: boolean; isRunning: boolean; canUndo: boolean; canRedo: boolean; onSave: () => void; onRun: () => void; onCancel?: () => void; onUndo: () => void; onRedo: () => void }) {
+  return (<div class="ai-workflow__toolbar" role="toolbar"><div class="ai-workflow__toolbar-left"><h2 class="ai-workflow__toolbar-title">{props.workflowName}</h2><Show when={props.isDirty}><span class="ai-workflow__toolbar-dirty">●</span></Show></div><div class="ai-workflow__toolbar-center"><button class="ai-workflow__toolbar-btn" onClick={props.onUndo} disabled={!props.canUndo}>↶</button><button class="ai-workflow__toolbar-btn" onClick={props.onRedo} disabled={!props.canRedo}>↷</button></div><div class="ai-workflow__toolbar-right"><button class="ai-workflow__toolbar-btn-secondary" onClick={props.onSave} disabled={!props.isDirty}>💾 Save</button><Show when={props.isRunning} fallback={<button class="ai-workflow__toolbar-btn-primary" onClick={props.onRun}>▶ Run</button>}><button class="ai-workflow__toolbar-btn-danger" onClick={props.onCancel}>⏹ Stop</button></Show></div></div>)
+}

package/packages/solidjs-css/src/components/index.ts

@@ -0,0 +1,9 @@
+// @geenius-ai-workflow/solidjs-css — components/index.ts
+export { WorkflowCanvas } from './WorkflowCanvas'
+export { StepNode } from './StepNode'
+export { StepConnector } from './StepConnector'
+export { StepConfigPanel } from './StepConfigPanel'
+export { WorkflowRunPanel } from './WorkflowRunPanel'
+export { ApprovalModal } from './ApprovalModal'
+export { WorkflowToolbar } from './WorkflowToolbar'
+export { StepPalette } from './StepPalette'

package/packages/solidjs-css/src/index.ts

@@ -0,0 +1,7 @@
+// @geenius-ai-workflow/solidjs-css — src/index.ts
+import './styles.css'
+export type { WorkflowDefinition, WorkflowStepDef, WorkflowRun, StepResult } from '@geenius-ai-workflow/shared'
+export { WorkflowEngine, WORKFLOW_TEMPLATES } from '@geenius-ai-workflow/shared'
+export * from './primitives'
+export * from './components'
+export * from './pages'

package/packages/solidjs-css/src/pages/WorkflowBuilderPage.tsx

@@ -0,0 +1,2 @@
+// @geenius-ai-workflow/solidjs-css — pages/WorkflowBuilderPage.tsx
+export { WorkflowBuilderPage } from '@geenius-ai-workflow/solidjs'

package/packages/solidjs-css/src/pages/WorkflowRunsPage.tsx

@@ -0,0 +1,7 @@
+// @geenius-ai-workflow/solidjs-css — pages/WorkflowRunsPage.tsx
+import { For, Show } from 'solid-js'
+import type { WorkflowRun } from '@geenius-ai-workflow/shared'
+const SI: Record<string, string> = { pending: '⏳', running: '🔄', completed: '✅', failed: '❌', cancelled: '⛔', paused: '⏸️' }
+export function WorkflowRunsPage(props: { runs: WorkflowRun[]; onSelectRun?: (id: string) => void }) {
+  return (<div><div class="ai-workflow__runs-header"><h1 class="ai-workflow__runs-title">Workflow Runs</h1><span class="ai-workflow__runs-count">{props.runs.length} runs</span></div><Show when={props.runs.length > 0} fallback={<div class="ai-workflow__runs-empty"><p>No runs yet.</p></div>}><div role="list"><For each={props.runs}>{(run) => <div class="ai-workflow__run-card" role="listitem" onClick={() => props.onSelectRun?.(run.id)}><div class="ai-workflow__run-card-header"><span class="ai-workflow__run-card-status">{SI[run.status]} {run.status}</span><span class="ai-workflow__run-card-id">{run.id.slice(0, 8)}…</span></div><div class="ai-workflow__run-card-meta"><span>{run.stepResults.filter(s => s.status === 'completed').length}/{run.stepResults.length} steps</span></div><Show when={run.error}><p class="ai-workflow__run-card-error">{run.error}</p></Show></div>}</For></div></Show></div>)
+}

package/packages/solidjs-css/src/pages/index.ts

@@ -0,0 +1,3 @@
+// @geenius-ai-workflow/solidjs-css — pages/index.ts
+export { WorkflowBuilderPage } from './WorkflowBuilderPage'
+export { WorkflowRunsPage } from './WorkflowRunsPage'

package/packages/solidjs-css/src/primitives/createWorkflow.ts

@@ -0,0 +1,28 @@
+// @geenius-ai-workflow/solidjs — src/primitives/createWorkflow.ts
+import { createSignal } from 'solid-js'
+import type { WorkflowDefinition, WorkflowRun, StepResult } from '@geenius-ai-workflow/shared'
+import { WorkflowEngine } from '@geenius-ai-workflow/shared'
+import type { WorkflowEngineOptions } from '@geenius-ai-workflow/shared'
+
+export interface CreateWorkflowOptions extends WorkflowEngineOptions { }
+
+export function createWorkflow(options: CreateWorkflowOptions) {
+    const [run, setRun] = createSignal<WorkflowRun | null>(null)
+    const [isRunning, setIsRunning] = createSignal(false)
+    const [error, setError] = createSignal<Error | null>(null)
+    const [stepResults, setStepResults] = createSignal<StepResult[]>([])
+
+    const engine = new WorkflowEngine({
+        ...options,
+        onStepComplete: (result) => { setStepResults(prev => [...prev, result]); options.onStepComplete?.(result) },
+    })
+
+    const execute = async (definition: WorkflowDefinition, input?: Record<string, unknown>) => {
+        setIsRunning(true); setError(null); setStepResults([])
+        try { const res = await engine.execute(definition, input); setRun(res); return res }
+        catch (err) { const e = err instanceof Error ? err : new Error(String(err)); setError(e); throw e }
+        finally { setIsRunning(false) }
+    }
+
+    return { execute, cancel: () => engine.cancel(), run, isRunning, error, stepResults, reset: () => { setRun(null); setError(null); setStepResults([]) } }
+}

package/packages/solidjs-css/src/primitives/createWorkflowBuilder.ts

@@ -0,0 +1,56 @@
+// @geenius-ai-workflow/solidjs — src/primitives/createWorkflowBuilder.ts
+import { createSignal } from 'solid-js'
+import type { WorkflowDefinition, WorkflowStepDef, StepConnection, WorkflowBuilderState } from '@geenius-ai-workflow/shared'
+
+const emptyDef = (): WorkflowDefinition => ({
+    id: crypto.randomUUID?.() ?? String(Date.now()), name: 'New Workflow', version: 1, status: 'draft',
+    steps: [], connections: [], createdBy: '', createdAt: Date.now(), updatedAt: Date.now(),
+})
+
+export function createWorkflowBuilder(initial?: Partial<WorkflowDefinition>) {
+    const [state, setState] = createSignal<WorkflowBuilderState>({
+        definition: { ...emptyDef(), ...initial }, selectedStepId: null, isDirty: false, undoStack: [], redoStack: [],
+    })
+
+    const pushUndo = () => setState(prev => ({ ...prev, undoStack: [...prev.undoStack.slice(-20), prev.definition], redoStack: [] }))
+
+    const addStep = (step: WorkflowStepDef) => {
+        pushUndo(); setState(prev => ({ ...prev, isDirty: true, definition: { ...prev.definition, steps: [...prev.definition.steps, step], updatedAt: Date.now() } }))
+    }
+
+    const removeStep = (stepId: string) => {
+        pushUndo(); setState(prev => ({
+            ...prev, isDirty: true,
+            definition: { ...prev.definition, steps: prev.definition.steps.filter(s => s.id !== stepId), connections: prev.definition.connections.filter(c => c.fromStepId !== stepId && c.toStepId !== stepId), updatedAt: Date.now() },
+            selectedStepId: prev.selectedStepId === stepId ? null : prev.selectedStepId,
+        }))
+    }
+
+    const updateStep = (stepId: string, updates: Partial<WorkflowStepDef>) => {
+        pushUndo(); setState(prev => ({ ...prev, isDirty: true, definition: { ...prev.definition, steps: prev.definition.steps.map(s => s.id === stepId ? { ...s, ...updates } : s), updatedAt: Date.now() } }))
+    }
+
+    const addConnection = (conn: StepConnection) => {
+        pushUndo(); setState(prev => ({ ...prev, isDirty: true, definition: { ...prev.definition, connections: [...prev.definition.connections, conn], updatedAt: Date.now() } }))
+    }
+
+    const removeConnection = (fromStepId: string, toStepId: string) => {
+        pushUndo(); setState(prev => ({ ...prev, isDirty: true, definition: { ...prev.definition, connections: prev.definition.connections.filter(c => !(c.fromStepId === fromStepId && c.toStepId === toStepId)), updatedAt: Date.now() } }))
+    }
+
+    const selectStep = (stepId: string | null) => setState(prev => ({ ...prev, selectedStepId: stepId }))
+
+    const undo = () => setState(prev => {
+        if (prev.undoStack.length === 0) return prev
+        return { ...prev, definition: prev.undoStack[prev.undoStack.length - 1], undoStack: prev.undoStack.slice(0, -1), redoStack: [prev.definition, ...prev.redoStack] }
+    })
+
+    const redo = () => setState(prev => {
+        if (prev.redoStack.length === 0) return prev
+        return { ...prev, definition: prev.redoStack[0], undoStack: [...prev.undoStack, prev.definition], redoStack: prev.redoStack.slice(1) }
+    })
+
+    const setDefinition = (def: WorkflowDefinition) => setState({ definition: def, selectedStepId: null, isDirty: false, undoStack: [], redoStack: [] })
+
+    return { state, addStep, removeStep, updateStep, addConnection, removeConnection, selectStep, undo, redo, setDefinition }
+}

package/packages/solidjs-css/src/primitives/index.ts

@@ -0,0 +1 @@
+export * from '@geenius-ai-workflow/solidjs';