specrails 0.2.0

package/templates/web-manager/client/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "specrails-web-client",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.3.0"
+  }
+}

package/templates/web-manager/client/src/App.tsx

@@ -0,0 +1,83 @@
+import { usePipeline } from './hooks/usePipeline'
+import { PipelineSidebar } from './components/PipelineSidebar'
+import { AgentActivity } from './components/AgentActivity'
+import { CommandInput } from './components/CommandInput'
+
+const GRID_STYLE: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateAreas: '"header header" "sidebar activity"',
+  gridTemplateColumns: '240px 1fr',
+  gridTemplateRows: '48px 1fr',
+  height: '100vh',
+  backgroundColor: '#0f172a',
+  color: '#e2e8f0',
+  fontFamily: 'system-ui, sans-serif',
+  margin: 0,
+  overflow: 'hidden',
+}
+
+export default function App() {
+  const { phases, projectName, logLines, connectionStatus } = usePipeline()
+
+  return (
+    <>
+      <style>{`
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        body { background: #0f172a; }
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #0f172a; }
+        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
+      `}</style>
+      <div style={GRID_STYLE}>
+        {/* Header */}
+        <header
+          style={{
+            gridArea: 'header',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 16px',
+            borderBottom: '1px solid #1e293b',
+            fontSize: 14,
+            fontWeight: 600,
+          }}
+        >
+          <span>specrails manager</span>
+          <span style={{ color: '#64748b', fontSize: 12 }}>{projectName}</span>
+        </header>
+
+        {/* Left sidebar */}
+        <aside
+          style={{
+            gridArea: 'sidebar',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            borderRight: '1px solid #1e293b',
+            overflow: 'hidden',
+          }}
+        >
+          <PipelineSidebar phases={phases} />
+          <CommandInput />
+        </aside>
+
+        {/* Main activity panel */}
+        <main style={{ gridArea: 'activity', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+          {connectionStatus === 'disconnected' && (
+            <div
+              style={{
+                background: '#7f1d1d',
+                color: '#fca5a5',
+                padding: '8px 16px',
+                fontSize: 13,
+              }}
+            >
+              Disconnected from server. Check that the web manager is running.
+            </div>
+          )}
+          <AgentActivity logLines={logLines} />
+        </main>
+      </div>
+    </>
+  )
+}

package/templates/web-manager/client/src/components/AgentActivity.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'react'
+import { LogStream } from './LogStream'
+import { SearchBox } from './SearchBox'
+import type { LogLine } from '../hooks/usePipeline'
+
+interface AgentActivityProps {
+  logLines: LogLine[]
+}
+
+export function AgentActivity({ logLines }: AgentActivityProps) {
+  const [filterText, setFilterText] = useState('')
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      <SearchBox value={filterText} onChange={setFilterText} />
+      <LogStream lines={logLines} filterText={filterText} />
+    </div>
+  )
+}

package/templates/web-manager/client/src/components/CommandInput.tsx

@@ -0,0 +1,81 @@
+import { useState, KeyboardEvent } from 'react'
+
+export function CommandInput() {
+  const [command, setCommand] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  async function handleRun() {
+    if (!command.trim() || isLoading) return
+    setIsLoading(true)
+    setErrorMessage(null)
+
+    try {
+      const res = await fetch('/api/spawn', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ command }),
+      })
+
+      if (res.ok) {
+        setCommand('')
+      } else {
+        const body = await res.json().catch(() => ({}))
+        const msg = (body as { error?: string }).error ?? (res.status === 409 ? 'A process is already running' : 'Failed to start process')
+        setErrorMessage(msg)
+      }
+    } catch {
+      setErrorMessage('Failed to connect to server')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') handleRun()
+  }
+
+  return (
+    <div style={{ padding: '12px', borderTop: '1px solid #1e293b' }}>
+      <div style={{ fontSize: 11, fontWeight: 600, color: '#64748b', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        Actions
+      </div>
+      <div style={{ display: 'flex', gap: 6 }}>
+        <input
+          type="text"
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter command (e.g., /implement #42)"
+          style={{
+            flex: 1,
+            background: '#1e293b',
+            border: '1px solid #334155',
+            borderRadius: 4,
+            color: '#e2e8f0',
+            padding: '6px 8px',
+            fontSize: 13,
+          }}
+        />
+        <button
+          onClick={handleRun}
+          disabled={!command.trim() || isLoading}
+          style={{
+            background: isLoading || !command.trim() ? '#334155' : '#3b82f6',
+            color: '#e2e8f0',
+            border: 'none',
+            borderRadius: 4,
+            padding: '6px 14px',
+            fontSize: 13,
+            cursor: isLoading || !command.trim() ? 'not-allowed' : 'pointer',
+          }}
+        >
+          {isLoading ? 'Running...' : 'Run'}
+        </button>
+      </div>
+      {errorMessage && (
+        <div style={{ color: '#ef4444', fontSize: 12, marginTop: 6 }}>{errorMessage}</div>
+      )}
+    </div>
+  )
+}

package/templates/web-manager/client/src/components/LogStream.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react'
+import type { LogLine } from '../hooks/usePipeline'
+
+interface LogStreamProps {
+  lines: LogLine[]
+  filterText: string
+}
+
+export function LogStream({ lines, filterText }: LogStreamProps) {
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const userScrolledRef = useRef(false)
+
+  const filtered = filterText
+    ? lines.filter((l) => l.line.toLowerCase().includes(filterText.toLowerCase()))
+    : lines
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || userScrolledRef.current) return
+    container.scrollTop = container.scrollHeight
+  }, [filtered.length])
+
+  function handleScroll() {
+    const el = containerRef.current
+    if (!el) return
+    const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 20
+    userScrolledRef.current = !atBottom
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={handleScroll}
+      style={{
+        flex: 1,
+        overflowY: 'auto',
+        fontFamily: 'monospace',
+        fontSize: 12,
+        padding: '8px',
+        backgroundColor: '#0f172a',
+      }}
+    >
+      {filtered.map((line, i) => (
+        <div key={`${line.processId}-${i}`} style={{ lineHeight: '1.5', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+          <span style={{ color: '#475569', marginRight: 8 }}>
+            {line.timestamp.slice(11, 19)}
+          </span>
+          <span style={{ color: line.source === 'stderr' ? '#fb923c' : '#e2e8f0' }}>
+            {line.line}
+          </span>
+        </div>
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  )
+}

package/templates/web-manager/client/src/components/PipelineSidebar.tsx

@@ -0,0 +1,65 @@
+import type { PhaseMap } from '../hooks/usePipeline'
+
+type PhaseName = 'architect' | 'developer' | 'reviewer' | 'ship'
+type PhaseState = 'idle' | 'running' | 'done' | 'error'
+
+const PHASES: { name: PhaseName; label: string }[] = [
+  { name: 'architect', label: 'Architect' },
+  { name: 'developer', label: 'Developer' },
+  { name: 'reviewer', label: 'Reviewer' },
+  { name: 'ship', label: 'Ship' },
+]
+
+const STATE_COLORS: Record<PhaseState, string> = {
+  idle: '#6b7280',
+  running: '#eab308',
+  done: '#22c55e',
+  error: '#ef4444',
+}
+
+interface PipelineSidebarProps {
+  phases: PhaseMap
+}
+
+export function PipelineSidebar({ phases }: PipelineSidebarProps) {
+  return (
+    <div style={{ padding: '16px 12px' }}>
+      <div style={{ fontSize: 11, fontWeight: 600, color: '#64748b', marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        Pipeline
+      </div>
+      {PHASES.map((phase, idx) => {
+        const state = phases[phase.name]
+        const color = STATE_COLORS[state]
+        const isRunning = state === 'running'
+        return (
+          <div key={phase.name}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
+              <span
+                style={{
+                  width: 10,
+                  height: 10,
+                  borderRadius: '50%',
+                  backgroundColor: color,
+                  flexShrink: 0,
+                  animation: isRunning ? 'pulse 1.5s ease-in-out infinite' : 'none',
+                }}
+              />
+              <span style={{ fontSize: 13, color: state === 'idle' ? '#64748b' : '#e2e8f0' }}>
+                {phase.label}
+              </span>
+            </div>
+            {idx < PHASES.length - 1 && (
+              <div style={{ color: '#334155', fontSize: 12, paddingLeft: 3, lineHeight: 1 }}>↓</div>
+            )}
+          </div>
+        )
+      })}
+      <style>{`
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.4; }
+        }
+      `}</style>
+    </div>
+  )
+}

package/templates/web-manager/client/src/components/SearchBox.tsx

@@ -0,0 +1,34 @@
+interface SearchBoxProps {
+  value: string
+  onChange: (value: string) => void
+}
+
+export function SearchBox({ value, onChange }: SearchBoxProps) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', padding: '8px', borderBottom: '1px solid #1e293b' }}>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Search logs..."
+        style={{
+          flex: 1,
+          background: '#1e293b',
+          border: '1px solid #334155',
+          borderRadius: 4,
+          color: '#e2e8f0',
+          padding: '4px 8px',
+          fontSize: 13,
+        }}
+      />
+      {value && (
+        <button
+          onClick={() => onChange('')}
+          style={{ marginLeft: 6, background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer', fontSize: 16 }}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  )
+}

package/templates/web-manager/client/src/hooks/usePipeline.ts

@@ -0,0 +1,62 @@
+import { useState, useCallback } from 'react'
+import { useWebSocket } from './useWebSocket'
+
+type PhaseName = 'architect' | 'developer' | 'reviewer' | 'ship'
+type PhaseState = 'idle' | 'running' | 'done' | 'error'
+
+export interface PhaseMap {
+  architect: PhaseState
+  developer: PhaseState
+  reviewer: PhaseState
+  ship: PhaseState
+}
+
+export interface LogLine {
+  source: 'stdout' | 'stderr'
+  line: string
+  timestamp: string
+  processId: string
+}
+
+const INITIAL_PHASES: PhaseMap = {
+  architect: 'idle',
+  developer: 'idle',
+  reviewer: 'idle',
+  ship: 'idle',
+}
+
+export function usePipeline() {
+  const [phases, setPhases] = useState<PhaseMap>(INITIAL_PHASES)
+  const [projectName, setProjectName] = useState('')
+  const [logLines, setLogLines] = useState<LogLine[]>([])
+
+  const handleMessage = useCallback((data: unknown) => {
+    const msg = data as { type: string } & Record<string, unknown>
+
+    if (msg.type === 'init') {
+      setProjectName((msg.projectName as string) ?? '')
+      setPhases((msg.phases as PhaseMap) ?? INITIAL_PHASES)
+      const buf = (msg.logBuffer as LogLine[]) ?? []
+      setLogLines(buf)
+    } else if (msg.type === 'phase') {
+      setPhases((prev) => ({
+        ...prev,
+        [msg.phase as PhaseName]: msg.state as PhaseState,
+      }))
+    } else if (msg.type === 'log') {
+      setLogLines((prev) => [
+        ...prev,
+        {
+          source: msg.source as 'stdout' | 'stderr',
+          line: msg.line as string,
+          timestamp: msg.timestamp as string,
+          processId: msg.processId as string,
+        },
+      ])
+    }
+  }, [])
+
+  const { connectionStatus } = useWebSocket('ws://localhost:4200', handleMessage)
+
+  return { phases, projectName, logLines, connectionStatus }
+}

package/templates/web-manager/client/src/hooks/useWebSocket.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected'
+
+const BACKOFF_DELAYS = [1000, 2000, 4000, 8000, 16000]
+
+export function useWebSocket(
+  url: string,
+  onMessage: (data: unknown) => void
+): { connectionStatus: ConnectionStatus } {
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('connecting')
+  const wsRef = useRef<WebSocket | null>(null)
+  const retryCountRef = useRef(0)
+  const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const onMessageRef = useRef(onMessage)
+  onMessageRef.current = onMessage
+
+  const connect = useCallback(() => {
+    const ws = new WebSocket(url)
+    wsRef.current = ws
+    setConnectionStatus('connecting')
+
+    ws.onopen = () => {
+      retryCountRef.current = 0
+      setConnectionStatus('connected')
+    }
+
+    ws.onmessage = (event) => {
+      try {
+        const parsed = JSON.parse(event.data as string)
+        onMessageRef.current(parsed)
+      } catch {
+        // ignore malformed messages
+      }
+    }
+
+    ws.onclose = () => {
+      wsRef.current = null
+      const attempt = retryCountRef.current
+      if (attempt >= BACKOFF_DELAYS.length) {
+        setConnectionStatus('disconnected')
+        return
+      }
+      const delay = BACKOFF_DELAYS[attempt]
+      retryCountRef.current += 1
+      retryTimeoutRef.current = setTimeout(connect, delay)
+    }
+  }, [url])
+
+  useEffect(() => {
+    connect()
+    return () => {
+      if (retryTimeoutRef.current) clearTimeout(retryTimeoutRef.current)
+      wsRef.current?.close()
+    }
+  }, [connect])
+
+  return { connectionStatus }
+}

package/templates/web-manager/client/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/templates/web-manager/client/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/web-manager/client/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/web-manager/client/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 4201,
+    proxy: {
+      '/api': 'http://localhost:4200',
+      '/hooks': 'http://localhost:4200',
+    },
+  },
+})