@jlongo78/agent-spaces 0.9.6 → 0.9.8

package/.next/standalone/src/components/wizard/project-wizard.tsx

@@ -1,153 +1,153 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { X } from 'lucide-react';
-import { WizardChat } from './wizard-chat';
-import { WizardPlanSummary } from './wizard-plan-summary';
-import { WizardReview } from './wizard-review';
-import { api } from '@/lib/api';
-
-export interface ProjectPlan {
-  workspace: {
-    name: string;
-    description: string;
-    color: string;
-  };
-  panes: Array<{
-    title: string;
-    agentType: 'claude' | 'codex' | 'gemini' | 'aider' | 'forge' | 'shell' | 'custom';
-    cwd: string;
-    initialPrompt?: string;
-    customCommand?: string;
-    customModelId?: string;
-    description: string;
-  }>;
-  summary: string;
-}
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-export function ProjectWizard({
-  isOpen,
-  onClose,
-  onLaunch,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  onLaunch: (workspaceId: number) => void;
-}) {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [plan, setPlan] = useState<ProjectPlan | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [phase, setPhase] = useState<'chat' | 'review'>('chat');
-  const [error, setError] = useState<string | null>(null);
-
-  const sendMessage = useCallback(async (text: string) => {
-    const userMsg: Message = { role: 'user', content: text };
-    const updated = [...messages, userMsg];
-    setMessages(updated);
-    setLoading(true);
-    setError(null);
-
-    try {
-      const res = await fetch(api('/api/wizard/chat'), {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ messages: updated, currentPlan: plan }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error);
-
-      setMessages([...updated, { role: 'assistant', content: data.reply }]);
-      if (data.plan) setPlan(data.plan);
-    } catch (e: any) {
-      setError(e.message);
-    }
-    setLoading(false);
-  }, [messages, plan]);
-
-  const handleLaunch = useCallback(async () => {
-    if (!plan) return;
-    try {
-      // Create workspace
-      const wsRes = await fetch(api('/api/workspaces'), {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: plan.workspace.name,
-          description: plan.workspace.description,
-          color: plan.workspace.color,
-        }),
-      });
-      const ws = await wsRes.json();
-      const wsId = ws.id;
-
-      // Create panes
-      for (const pane of plan.panes) {
-        await fetch(api('/api/panes'), {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            title: pane.title,
-            agentType: pane.agentType,
-            cwd: pane.cwd,
-            customCommand: pane.customCommand,
-            workspaceId: wsId,
-            customModelId: pane.customModelId,
-          }),
-        });
-      }
-
-      onLaunch(wsId);
-      onClose();
-    } catch (e: any) {
-      setError(e.message);
-    }
-  }, [plan, onLaunch, onClose]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 bg-zinc-950/95 flex flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-800 flex-shrink-0">
-        <h2 className="text-sm font-semibold text-zinc-100">Plan a Project</h2>
-        <button onClick={onClose} className="text-zinc-500 hover:text-white">
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-
-      {error && (
-        <div className="px-6 py-2 bg-red-500/10 border-b border-red-500/20 text-xs text-red-400">
-          {error}
-        </div>
-      )}
-
-      {/* Content */}
-      <div className="flex-1 flex overflow-hidden min-h-0">
-        {phase === 'chat' ? (
-          <>
-            <div className="flex-1 flex flex-col border-r border-zinc-800 min-w-0">
-              <WizardChat messages={messages} onSend={sendMessage} loading={loading} />
-            </div>
-            <div className="w-[380px] flex-shrink-0 overflow-y-auto">
-              <WizardPlanSummary plan={plan} onReview={() => setPhase('review')} />
-            </div>
-          </>
-        ) : (
-          <div className="flex-1 overflow-y-auto">
-            <WizardReview
-              plan={plan!}
-              onUpdate={setPlan}
-              onBack={() => setPhase('chat')}
-              onLaunch={handleLaunch}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { WizardChat } from './wizard-chat';
+import { WizardPlanSummary } from './wizard-plan-summary';
+import { WizardReview } from './wizard-review';
+import { api } from '@/lib/api';
+
+export interface ProjectPlan {
+  workspace: {
+    name: string;
+    description: string;
+    color: string;
+  };
+  panes: Array<{
+    title: string;
+    agentType: 'claude' | 'codex' | 'gemini' | 'aider' | 'forge' | 'shell' | 'custom';
+    cwd: string;
+    initialPrompt?: string;
+    customCommand?: string;
+    customModelId?: string;
+    description: string;
+  }>;
+  summary: string;
+}
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export function ProjectWizard({
+  isOpen,
+  onClose,
+  onLaunch,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onLaunch: (workspaceId: number) => void;
+}) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [plan, setPlan] = useState<ProjectPlan | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [phase, setPhase] = useState<'chat' | 'review'>('chat');
+  const [error, setError] = useState<string | null>(null);
+
+  const sendMessage = useCallback(async (text: string) => {
+    const userMsg: Message = { role: 'user', content: text };
+    const updated = [...messages, userMsg];
+    setMessages(updated);
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(api('/api/wizard/chat'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: updated, currentPlan: plan }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      setMessages([...updated, { role: 'assistant', content: data.reply }]);
+      if (data.plan) setPlan(data.plan);
+    } catch (e: any) {
+      setError(e.message);
+    }
+    setLoading(false);
+  }, [messages, plan]);
+
+  const handleLaunch = useCallback(async () => {
+    if (!plan) return;
+    try {
+      // Create workspace
+      const wsRes = await fetch(api('/api/workspaces'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: plan.workspace.name,
+          description: plan.workspace.description,
+          color: plan.workspace.color,
+        }),
+      });
+      const ws = await wsRes.json();
+      const wsId = ws.id;
+
+      // Create panes
+      for (const pane of plan.panes) {
+        await fetch(api('/api/panes'), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            title: pane.title,
+            agentType: pane.agentType,
+            cwd: pane.cwd,
+            customCommand: pane.customCommand,
+            workspaceId: wsId,
+            customModelId: pane.customModelId,
+          }),
+        });
+      }
+
+      onLaunch(wsId);
+      onClose();
+    } catch (e: any) {
+      setError(e.message);
+    }
+  }, [plan, onLaunch, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-zinc-950/95 flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-800 flex-shrink-0">
+        <h2 className="text-sm font-semibold text-zinc-100">Plan a Project</h2>
+        <button onClick={onClose} className="text-zinc-500 hover:text-white">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {error && (
+        <div className="px-6 py-2 bg-red-500/10 border-b border-red-500/20 text-xs text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="flex-1 flex overflow-hidden min-h-0">
+        {phase === 'chat' ? (
+          <>
+            <div className="flex-1 flex flex-col border-r border-zinc-800 min-w-0">
+              <WizardChat messages={messages} onSend={sendMessage} loading={loading} />
+            </div>
+            <div className="w-[380px] flex-shrink-0 overflow-y-auto">
+              <WizardPlanSummary plan={plan} onReview={() => setPhase('review')} />
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 overflow-y-auto">
+            <WizardReview
+              plan={plan!}
+              onUpdate={setPlan}
+              onBack={() => setPhase('chat')}
+              onLaunch={handleLaunch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/components/wizard/wizard-chat.tsx

@@ -1,99 +1,99 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { Send } from 'lucide-react';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-export function WizardChat({
-  messages,
-  onSend,
-  loading,
-}: {
-  messages: Message[];
-  onSend: (text: string) => void;
-  loading: boolean;
-}) {
-  const [input, setInput] = useState('');
-  const listRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (listRef.current) {
-      listRef.current.scrollTop = listRef.current.scrollHeight;
-    }
-  }, [messages, loading]);
-
-  const handleSend = () => {
-    const text = input.trim();
-    if (!text || loading) return;
-    setInput('');
-    onSend(text);
-  };
-
-  return (
-    <>
-      {/* Messages */}
-      <div ref={listRef} className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
-        {messages.length === 0 && !loading && (
-          <div className="text-center py-12">
-            <p className="text-zinc-400 text-sm mb-1">Describe the project you want to build.</p>
-            <p className="text-zinc-600 text-xs">I'll help you plan the workspace, agents, and initial tasks.</p>
-          </div>
-        )}
-
-        {messages.map((msg, i) => (
-          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-            <div className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
-              msg.role === 'user'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-zinc-800 text-zinc-200'
-            }`}>
-              <p className="whitespace-pre-wrap">{msg.content}</p>
-            </div>
-          </div>
-        ))}
-
-        {loading && (
-          <div className="flex justify-start">
-            <div className="bg-zinc-800 rounded-lg px-4 py-3">
-              <div className="flex gap-1">
-                <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Input */}
-      <div className="px-6 py-3 border-t border-zinc-800 flex-shrink-0">
-        <div className="flex gap-2">
-          <textarea
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                handleSend();
-              }
-            }}
-            placeholder="Describe your project..."
-            rows={2}
-            className="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 resize-none"
-          />
-          <button
-            onClick={handleSend}
-            disabled={!input.trim() || loading}
-            className="px-4 bg-indigo-600 hover:bg-indigo-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white rounded-lg flex items-center gap-1.5 text-sm self-end"
-          >
-            <Send className="w-3.5 h-3.5" />
-          </button>
-        </div>
-      </div>
-    </>
-  );
-}
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Send } from 'lucide-react';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export function WizardChat({
+  messages,
+  onSend,
+  loading,
+}: {
+  messages: Message[];
+  onSend: (text: string) => void;
+  loading: boolean;
+}) {
+  const [input, setInput] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages, loading]);
+
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text || loading) return;
+    setInput('');
+    onSend(text);
+  };
+
+  return (
+    <>
+      {/* Messages */}
+      <div ref={listRef} className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+        {messages.length === 0 && !loading && (
+          <div className="text-center py-12">
+            <p className="text-zinc-400 text-sm mb-1">Describe the project you want to build.</p>
+            <p className="text-zinc-600 text-xs">I'll help you plan the workspace, agents, and initial tasks.</p>
+          </div>
+        )}
+
+        {messages.map((msg, i) => (
+          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
+              msg.role === 'user'
+                ? 'bg-indigo-600 text-white'
+                : 'bg-zinc-800 text-zinc-200'
+            }`}>
+              <p className="whitespace-pre-wrap">{msg.content}</p>
+            </div>
+          </div>
+        ))}
+
+        {loading && (
+          <div className="flex justify-start">
+            <div className="bg-zinc-800 rounded-lg px-4 py-3">
+              <div className="flex gap-1">
+                <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      <div className="px-6 py-3 border-t border-zinc-800 flex-shrink-0">
+        <div className="flex gap-2">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+            placeholder="Describe your project..."
+            rows={2}
+            className="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 resize-none"
+          />
+          <button
+            onClick={handleSend}
+            disabled={!input.trim() || loading}
+            className="px-4 bg-indigo-600 hover:bg-indigo-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white rounded-lg flex items-center gap-1.5 text-sm self-end"
+          >
+            <Send className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}