feat: implement Phase 8 - Process Stdin

Features added:
- Created stdin API route for sending input to process stdin
- Added useSendProcessStdin React Query hook
- Created StdinInput modal component with:
  - Multi-line textarea for input
  - Ctrl+Enter keyboard shortcut
  - Optional newline append
  - Character count display
  - Info banner explaining stdin functionality
- Added stdin button to ProcessCard (Terminal icon)
- Button only enabled when process is running (state === 20)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/api/supervisor/processes/[name]/stdin/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+interface RouteParams {
+  params: Promise<{ name: string }>;
+}
+
+// POST - Send input to process stdin
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { name } = await params;
+    const body = await request.json();
+    const { chars } = body;
+
+    if (chars === undefined || chars === null) {
+      return NextResponse.json(
+        { error: 'Input characters are required' },
+        { status: 400 }
+      );
+    }
+
+    const client = createSupervisorClient();
+    const result = await client.sendProcessStdin(name, chars);
+
+    return NextResponse.json({
+      success: result,
+      message: `Input sent to ${name}`,
+    });
+  } catch (error: any) {
+    console.error('Supervisor send stdin error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to send input to process' },
+      { status: 500 }
+    );
+  }
+}

components/process/ProcessCard.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import { useState } from 'react';
-import { Play, Square, RotateCw, Activity, Zap } from 'lucide-react';
+import { Play, Square, RotateCw, Activity, Zap, Terminal } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ProcessInfo, ProcessStateCode, getProcessStateClass, formatUptime, canStartProcess, canStopProcess } from '@/lib/supervisor/types';
 import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
 import { SignalSender } from './SignalSender';
+import { StdinInput } from './StdinInput';
 import { cn } from '@/lib/utils/cn';
 
 interface ProcessCardProps {
@@ -18,6 +19,7 @@ interface ProcessCardProps {
 
 export function ProcessCard({ process, isSelected = false, onSelectionChange }: ProcessCardProps) {
   const [showSignalModal, setShowSignalModal] = useState(false);
+  const [showStdinModal, setShowStdinModal] = useState(false);
   const startMutation = useStartProcess();
   const stopMutation = useStopProcess();
   const restartMutation = useRestartProcess();
@@ -143,6 +145,15 @@ export function ProcessCard({ process, isSelected = false, onSelectionChange }:
           >
             <Zap className="h-4 w-4" />
           </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setShowStdinModal(true)}
+            disabled={process.state !== 20}
+            title="Send Stdin"
+          >
+            <Terminal className="h-4 w-4" />
+          </Button>
         </div>
 
         {/* Description */}
@@ -157,6 +168,11 @@ export function ProcessCard({ process, isSelected = false, onSelectionChange }:
       {showSignalModal && (
         <SignalSender processName={fullName} onClose={() => setShowSignalModal(false)} />
       )}
+
+      {/* Stdin Modal */}
+      {showStdinModal && (
+        <StdinInput processName={fullName} onClose={() => setShowStdinModal(false)} />
+      )}
     </Card>
   );
 }

components/process/StdinInput.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import { useSendProcessStdin } from '@/lib/hooks/useSupervisor';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { X, Terminal, Info } from 'lucide-react';
+
+interface StdinInputProps {
+  processName: string;
+  onClose: () => void;
+}
+
+export function StdinInput({ processName, onClose }: StdinInputProps) {
+  const [input, setInput] = useState('');
+  const [appendNewline, setAppendNewline] = useState(true);
+
+  const stdinMutation = useSendProcessStdin();
+
+  const handleSend = () => {
+    if (!input) return;
+
+    const chars = appendNewline ? input + '\n' : input;
+
+    stdinMutation.mutate(
+      { name: processName, chars },
+      {
+        onSuccess: () => {
+          setInput('');
+          onClose();
+        },
+      }
+    );
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Allow Ctrl+Enter to send
+    if (e.ctrlKey && e.key === 'Enter') {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <Card className="w-full max-w-2xl shadow-2xl">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <Terminal className="h-5 w-5" />
+                Send Input to Process
+              </CardTitle>
+              <CardDescription className="mt-1">
+                Send text to stdin of <span className="font-mono text-foreground">{processName}</span>
+              </CardDescription>
+            </div>
+            <Button variant="ghost" size="icon" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          {/* Info Banner */}
+          <div className="flex gap-3 p-3 rounded-md bg-accent/10 border border-accent/20">
+            <Info className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
+            <div className="text-sm text-muted-foreground">
+              <p>
+                This sends input directly to the process's standard input stream.
+                The process must be configured to read from stdin.
+              </p>
+            </div>
+          </div>
+
+          {/* Textarea */}
+          <div>
+            <label className="text-sm font-medium mb-2 block">Input Text</label>
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Type your input here... (Ctrl+Enter to send)"
+              rows={8}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none"
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Press Ctrl+Enter to send, or use the button below
+            </p>
+          </div>
+
+          {/* Options */}
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="appendNewline"
+              checked={appendNewline}
+              onChange={(e) => setAppendNewline(e.target.checked)}
+              className="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
+            />
+            <label htmlFor="appendNewline" className="text-sm cursor-pointer">
+              Append newline character (\\n) at the end
+            </label>
+          </div>
+
+          {/* Character Count */}
+          {input && (
+            <p className="text-xs text-muted-foreground">
+              {input.length} character{input.length !== 1 ? 's' : ''}
+              {appendNewline && ' + newline'}
+            </p>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-2 justify-end pt-2">
+            <Button variant="outline" onClick={onClose} disabled={stdinMutation.isPending}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSend}
+              disabled={!input || stdinMutation.isPending}
+              className="gap-2"
+            >
+              <Terminal className="h-4 w-4" />
+              {stdinMutation.isPending ? 'Sending...' : 'Send Input'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

lib/hooks/useSupervisor.ts

@@ -645,3 +645,30 @@ export function useSignalAllProcesses() {
     },
   });
 }
+
+// Process Stdin
+
+async function sendProcessStdin(name: string, chars: string): Promise<{ success: boolean; message: string }> {
+  const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/stdin`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ chars }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to send input');
+  }
+  return response.json();
+}
+
+export function useSendProcessStdin() {
+  return useMutation({
+    mutationFn: ({ name, chars }: { name: string; chars: string }) => sendProcessStdin(name, chars),
+    onSuccess: (data) => {
+      toast.success(data.message);
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to send input: ${error.message}`);
+    },
+  });
+}