@agentforge-ai/cli 0.4.3 → 0.5.1

package/templates/default/dashboard/app/routes/chat.tsx

@@ -1,10 +1,12 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { DashboardLayout } from '../components/DashboardLayout';
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { Send, Plus, Bot, User, Shield, ShieldAlert, Lock, AlertTriangle, Paperclip, Mic, Settings2 } from 'lucide-react';
+import { useQuery, useMutation } from 'convex/react';
+import { api } from '@convex/_generated/api';
+import { Send, Plus, Bot, User, Shield, ShieldAlert, Lock, AlertTriangle, Paperclip, Mic, Settings2, X, MessageSquare } from 'lucide-react';
 
 // ============================================================
-// SECRET DETECTION ENGINE (client-side mirror of vault patterns)
+// SECRET DETECTION ENGINE
 // ============================================================
 const SECRET_PATTERNS = [
   { pattern: /sk-[a-zA-Z0-9]{20,}/g, category: "api_key", provider: "openai", name: "OpenAI API Key" },
@@ -13,23 +15,12 @@ const SECRET_PATTERNS = [
   { pattern: /AIza[a-zA-Z0-9_-]{35}/g, category: "api_key", provider: "google", name: "Google API Key" },
   { pattern: /xai-[a-zA-Z0-9]{20,}/g, category: "api_key", provider: "xai", name: "xAI API Key" },
   { pattern: /ghp_[a-zA-Z0-9]{36}/g, category: "token", provider: "github", name: "GitHub Token" },
-  { pattern: /gho_[a-zA-Z0-9]{36}/g, category: "token", provider: "github", name: "GitHub OAuth" },
-  { pattern: /glpat-[a-zA-Z0-9_-]{20,}/g, category: "token", provider: "gitlab", name: "GitLab Token" },
-  { pattern: /xoxb-[a-zA-Z0-9-]+/g, category: "token", provider: "slack", name: "Slack Bot Token" },
-  { pattern: /xoxp-[a-zA-Z0-9-]+/g, category: "token", provider: "slack", name: "Slack User Token" },
   { pattern: /AKIA[A-Z0-9]{16}/g, category: "credential", provider: "aws", name: "AWS Access Key" },
   { pattern: /sk_live_[a-zA-Z0-9]{24,}/g, category: "api_key", provider: "stripe", name: "Stripe Live Key" },
   { pattern: /sk_test_[a-zA-Z0-9]{24,}/g, category: "api_key", provider: "stripe", name: "Stripe Test Key" },
-  { pattern: /SG\.[a-zA-Z0-9_-]{22}\.[a-zA-Z0-9_-]{43}/g, category: "api_key", provider: "sendgrid", name: "SendGrid Key" },
-  { pattern: /eyJ[a-zA-Z0-9_-]{10,}\.[a-zA-Z0-9_-]{10,}\.[a-zA-Z0-9_-]{10,}/g, category: "token", provider: "jwt", name: "JWT Token" },
 ];
 
-interface DetectedSecret {
-  match: string;
-  category: string;
-  provider: string;
-  name: string;
-}
+interface DetectedSecret { match: string; category: string; provider: string; name: string; }
 
 function detectSecrets(text: string): DetectedSecret[] {
   const detected: DetectedSecret[] = [];
@@ -51,159 +42,87 @@ function maskSecret(value: string): string {
 function censorText(text: string, secrets: DetectedSecret[]): string {
   let censored = text;
   for (const secret of secrets) {
-    censored = censored.replace(secret.match, `[🔒 ${secret.name}: ${maskSecret(secret.match)}]`);
+    censored = censored.replace(secret.match, `[REDACTED: ${secret.name}]`);
   }
   return censored;
 }
 
-// ============================================================
-// Mock data (replace with Convex queries)
-// ============================================================
-const mockSessions = [
-  { id: 'ses_1', name: 'Main Session' },
-  { id: 'ses_2', name: 'Customer Support' },
-  { id: 'ses_3', name: 'Code Review' },
-];
-
-const mockAgents = [
-  { id: 'agent_1', name: 'GPT-4.1 Mini', provider: 'openai' },
-  { id: 'agent_2', name: 'Claude 3.5 Sonnet', provider: 'anthropic' },
-  { id: 'agent_3', name: 'Grok 2', provider: 'xai' },
-  { id: 'agent_4', name: 'Gemini Pro', provider: 'google' },
-];
-
-interface ChatMessage {
-  id: string;
-  text: string;
-  sender: 'user' | 'assistant' | 'system';
-  timestamp: string;
-  isRedacted?: boolean;
-  secretsCaptured?: Array<{ name: string; masked: string }>;
-}
-
-// ============================================================
-// Chat Page Component
-// ============================================================
 export const Route = createFileRoute('/chat')({ component: ChatPageComponent });
 
 function ChatPageComponent() {
-  const [sessions] = useState(mockSessions);
-  const [agents] = useState(mockAgents);
-  const [currentSessionId, setCurrentSessionId] = useState(mockSessions[0]?.id || null);
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const agents = useQuery(api.agents.list, {}) ?? [];
+  const threads = useQuery(api.threads.list, {}) ?? [];
+  const createThread = useMutation(api.threads.create);
+  const addMessage = useMutation(api.messages.add);
+  const storeSecret = useMutation(api.vault.store);
+
+  const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
+  const [currentAgentId, setCurrentAgentId] = useState<string | null>(null);
   const [input, setInput] = useState('');
   const [isTyping, setIsTyping] = useState(false);
-  const [currentAgentId, setCurrentAgentId] = useState(mockAgents[0]?.id || null);
   const [secretWarning, setSecretWarning] = useState<DetectedSecret[] | null>(null);
   const [pendingMessage, setPendingMessage] = useState<string | null>(null);
-  const [vaultNotification, setVaultNotification] = useState<string | null>(null);
-
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => { scrollToBottom(); }, [messages, isTyping]);
+  // Load messages for current thread
+  const messages = useQuery(api.messages.list, currentThreadId ? { threadId: currentThreadId as any } : "skip") ?? [];
 
+  // Auto-select first agent
   useEffect(() => {
-    if (currentSessionId) {
-      setMessages([]);
-      setIsTyping(true);
-      setTimeout(() => {
-        const agent = agents.find(a => a.id === currentAgentId);
-        setMessages([{
-          id: 'msg_welcome',
-          text: `Hello! I'm ${agent?.name || 'your agent'}. How can I help you today?`,
-          sender: 'assistant',
-          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-        }]);
-        setIsTyping(false);
-      }, 500);
+    if (agents.length > 0 && !currentAgentId) {
+      setCurrentAgentId(agents[0].id);
     }
-  }, [currentSessionId]);
+  }, [agents, currentAgentId]);
 
-  // Real-time secret detection as user types
-  const inputHasSecrets = input.length > 8 ? detectSecrets(input) : [];
+  // Auto-scroll
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
 
-  const handleSendMessage = useCallback((e: React.FormEvent) => {
-    e.preventDefault();
-    if (!input.trim() || !currentSessionId) return;
+  const inputHasSecrets = input ? detectSecrets(input) : [];
 
-    const detectedSecrets = detectSecrets(input);
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim()) return;
 
-    if (detectedSecrets.length > 0) {
-      // Show warning before sending
-      setSecretWarning(detectedSecrets);
+    const secrets = detectSecrets(input);
+    if (secrets.length > 0) {
+      setSecretWarning(secrets);
       setPendingMessage(input);
       return;
     }
 
-    // No secrets detected, send normally
-    sendMessageToChat(input);
-  }, [input, currentSessionId, currentAgentId]);
-
-  const sendMessageToChat = (text: string, secrets?: DetectedSecret[]) => {
-    let displayText = text;
-    let secretsCaptured: Array<{ name: string; masked: string }> = [];
-    let isRedacted = false;
-
-    if (secrets && secrets.length > 0) {
-      // Censor the message and auto-store secrets
-      displayText = censorText(text, secrets);
-      isRedacted = true;
-      secretsCaptured = secrets.map(s => ({ name: s.name, masked: maskSecret(s.match) }));
-
-      // In production: call vault.censorMessage mutation here
-      // const result = await censorMessage({ text, userId, autoStore: true });
+    await sendMessage(input);
+  };
 
-      // Show vault notification
-      setVaultNotification(
-        `${secrets.length} secret${secrets.length > 1 ? 's' : ''} detected and securely stored in the Vault.`
-      );
-      setTimeout(() => setVaultNotification(null), 5000);
+  const sendMessage = async (text: string) => {
+    let threadId = currentThreadId;
+    if (!threadId && currentAgentId) {
+      threadId = await createThread({ agentId: currentAgentId, name: `Chat ${new Date().toLocaleString()}` }) as any;
+      setCurrentThreadId(threadId);
     }
+    if (!threadId) return;
 
-    const userMessage: ChatMessage = {
-      id: `msg_${Date.now()}`,
-      text: displayText,
-      sender: 'user',
-      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      isRedacted,
-      secretsCaptured: secretsCaptured.length > 0 ? secretsCaptured : undefined,
-    };
-
-    setMessages(prev => [...prev, userMessage]);
+    await addMessage({ threadId: threadId as any, role: 'user', content: text });
     setInput('');
     setIsTyping(true);
 
-    // Simulate agent response
-    setTimeout(() => {
-      const agent = agents.find(a => a.id === currentAgentId);
-      let responseText: string;
-
-      if (isRedacted) {
-        responseText = `I noticed you shared ${secretsCaptured.length} secret${secretsCaptured.length > 1 ? 's' : ''}. They've been automatically encrypted and stored in your Secure Vault. The original values are never stored in chat history.\n\nHow else can I help you?`;
-      } else {
-        responseText = `I understand your request. Let me work on that for you.\n\n*This is a simulated response from ${agent?.name || 'the agent'}.*`;
-      }
-
-      const assistantResponse: ChatMessage = {
-        id: `msg_${Date.now() + 1}`,
-        text: responseText,
-        sender: 'assistant',
-        timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      };
-      setMessages(prev => [...prev, assistantResponse]);
+    // Simulate agent response (will be replaced by Mastra integration)
+    setTimeout(async () => {
+      await addMessage({ threadId: threadId as any, role: 'assistant', content: 'This response will be powered by your configured AI provider once Mastra integration is active. For now, messages are stored in Convex.' });
       setIsTyping(false);
     }, 1500);
   };
 
-  const handleConfirmSendWithSecrets = () => {
-    if (pendingMessage && secretWarning) {
-      sendMessageToChat(pendingMessage, secretWarning);
+  const handleConfirmSendWithSecrets = async () => {
+    if (!pendingMessage || !secretWarning) return;
+    // Store secrets in vault
+    for (const secret of secretWarning) {
+      await storeSecret({ name: secret.name, category: secret.category, provider: secret.provider, value: secret.match });
     }
+    const censored = censorText(pendingMessage, secretWarning);
+    await sendMessage(censored);
     setSecretWarning(null);
     setPendingMessage(null);
   };
@@ -211,216 +130,143 @@ function ChatPageComponent() {
   const handleCancelSendWithSecrets = () => {
     setSecretWarning(null);
     setPendingMessage(null);
-    inputRef.current?.focus();
   };
 
-  const handleNewSession = () => {
-    const newSessionId = `ses_${Date.now()}`;
-    setCurrentSessionId(newSessionId);
-    setMessages([]);
+  const handleNewChat = async () => {
+    setCurrentThreadId(null);
   };
 
-  const currentAgent = agents.find(a => a.id === currentAgentId);
-
   return (
     <DashboardLayout>
-      <div className="flex flex-col h-full bg-background">
-        {/* Header */}
-        <header className="flex items-center justify-between p-3 border-b border-border bg-card/50">
-          <div className="flex items-center gap-3">
-            <select
-              value={currentSessionId || ''}
-              onChange={(e) => setCurrentSessionId(e.target.value)}
-              className="bg-background border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-            >
-              {sessions.map((session) => (
-                <option key={session.id} value={session.id}>{session.name}</option>
-              ))}
-            </select>
-            <button onClick={handleNewSession} className="p-2 rounded-lg hover:bg-card border border-border" title="New Session">
-              <Plus className="w-4 h-4 text-muted-foreground" />
+      <div className="flex h-[calc(100vh-8rem)] bg-background rounded-lg border border-border overflow-hidden">
+        {/* Sidebar */}
+        <aside className="w-64 border-r border-border bg-card flex flex-col">
+          <div className="p-3 border-b border-border">
+            <button onClick={handleNewChat} className="w-full bg-primary text-primary-foreground px-3 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 flex items-center justify-center gap-2">
+              <Plus className="w-4 h-4" /> New Chat
             </button>
           </div>
-          <div className="flex items-center gap-3">
-            <div className="flex items-center gap-2 px-3 py-1.5 bg-background border border-border rounded-lg">
-              <div className={`w-2 h-2 rounded-full ${currentAgent?.provider === 'openai' ? 'bg-green-500' : currentAgent?.provider === 'anthropic' ? 'bg-orange-500' : currentAgent?.provider === 'xai' ? 'bg-purple-500' : 'bg-blue-500'}`} />
-              <select
-                value={currentAgentId || ''}
-                onChange={(e) => setCurrentAgentId(e.target.value)}
-                className="bg-transparent text-sm text-foreground focus:outline-none"
-              >
-                {agents.map((agent) => (
-                  <option key={agent.id} value={agent.id}>{agent.name}</option>
-                ))}
-              </select>
-            </div>
-            <button className="p-2 rounded-lg hover:bg-card border border-border" title="Chat Settings">
-              <Settings2 className="w-4 h-4 text-muted-foreground" />
-            </button>
+          <div className="p-3 border-b border-border">
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">Agent</label>
+            <select value={currentAgentId || ''} onChange={(e) => setCurrentAgentId(e.target.value)} className="w-full bg-background border border-border rounded-md px-2 py-1.5 text-sm">
+              {agents.length === 0 ? (
+                <option value="">No agents — create one first</option>
+              ) : (
+                agents.map((a: any) => <option key={a.id} value={a.id}>{a.name}</option>)
+              )}
+            </select>
           </div>
-        </header>
-
-        {/* Vault Notification Banner */}
-        {vaultNotification && (
-          <div className="mx-4 mt-3 flex items-center gap-2 px-4 py-2.5 bg-green-900/30 border border-green-700/50 rounded-lg text-green-400 text-sm animate-in fade-in slide-in-from-top-2">
-            <Shield className="w-4 h-4 flex-shrink-0" />
-            <span>{vaultNotification}</span>
-            <button onClick={() => setVaultNotification(null)} className="ml-auto text-green-400/60 hover:text-green-400">&times;</button>
+          <div className="flex-1 overflow-y-auto p-2 space-y-1">
+            {threads.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground text-xs">No conversations yet</div>
+            ) : (
+              threads.map((t: any) => (
+                <button key={t._id} onClick={() => setCurrentThreadId(t._id)} className={`w-full text-left px-3 py-2 rounded-lg text-sm truncate transition-colors ${currentThreadId === t._id ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted'}`}>
+                  <MessageSquare className="w-3.5 h-3.5 inline mr-2" />
+                  {t.name || `Thread ${t._id.slice(-6)}`}
+                </button>
+              ))
+            )}
           </div>
-        )}
-
-        {/* Messages Area */}
-        <main className="flex-1 overflow-y-auto p-4 md:p-6">
-          <div className="max-w-3xl mx-auto space-y-4">
-            {messages.map((msg) => (
-              <div key={msg.id} className={`flex items-end gap-2.5 ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
-                {msg.sender === 'assistant' && (
-                  <div className="w-8 h-8 rounded-full bg-card border border-border flex items-center justify-center flex-shrink-0">
-                    <Bot className="w-4 h-4 text-primary" />
-                  </div>
-                )}
-                <div className={`max-w-[75%] ${msg.sender === 'user' ? '' : ''}`}>
-                  <div className={`px-4 py-2.5 rounded-2xl ${
-                    msg.sender === 'user'
-                      ? 'bg-primary text-primary-foreground rounded-br-md'
-                      : msg.sender === 'system'
-                      ? 'bg-yellow-900/30 border border-yellow-700/50 text-yellow-200'
-                      : 'bg-card border border-border rounded-bl-md'
-                  }`}>
-                    {msg.isRedacted && (
-                      <div className="flex items-center gap-1.5 mb-1.5 text-xs opacity-75">
-                        <Lock className="w-3 h-3" />
-                        <span>Secrets redacted &amp; stored in Vault</span>
+        </aside>
+
+        {/* Main Chat Area */}
+        <div className="flex-1 flex flex-col">
+          <main className="flex-1 overflow-y-auto p-4">
+            {messages.length === 0 && !currentThreadId ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <Bot className="w-16 h-16 text-muted-foreground/30 mb-4" />
+                <h2 className="text-xl font-semibold mb-2">Start a conversation</h2>
+                <p className="text-muted-foreground max-w-md">Select an agent and type a message to begin. Your conversations are stored in Convex and synced in real-time.</p>
+              </div>
+            ) : (
+              <div className="max-w-3xl mx-auto space-y-4">
+                {messages.map((msg: any) => (
+                  <div key={msg._id} className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
+                    {msg.role !== 'user' && (
+                      <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                        <Bot className="w-4 h-4 text-primary" />
+                      </div>
+                    )}
+                    <div className={`max-w-[80%] px-4 py-3 rounded-2xl text-sm ${msg.role === 'user' ? 'bg-primary text-primary-foreground rounded-br-md' : 'bg-card border border-border rounded-bl-md'}`}>
+                      {msg.content}
+                    </div>
+                    {msg.role === 'user' && (
+                      <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                        <User className="w-4 h-4 text-muted-foreground" />
                       </div>
                     )}
-                    <p className="text-sm whitespace-pre-wrap">{msg.text}</p>
                   </div>
-                  {msg.secretsCaptured && msg.secretsCaptured.length > 0 && (
-                    <div className="mt-1.5 flex flex-wrap gap-1">
-                      {msg.secretsCaptured.map((s, i) => (
-                        <span key={i} className="inline-flex items-center gap-1 px-2 py-0.5 bg-green-900/30 border border-green-700/40 rounded-full text-xs text-green-400">
-                          <Lock className="w-2.5 h-2.5" />
-                          {s.name}: {s.masked}
-                        </span>
-                      ))}
+                ))}
+                {isTyping && (
+                  <div className="flex gap-3">
+                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center"><Bot className="w-4 h-4 text-primary" /></div>
+                    <div className="bg-card border border-border rounded-2xl rounded-bl-md px-4 py-3">
+                      <div className="flex space-x-1"><div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" /><div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:0.15s]" /><div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:0.3s]" /></div>
                     </div>
-                  )}
-                  <p className={`text-xs mt-1 px-1 ${msg.sender === 'user' ? 'text-right text-muted-foreground' : 'text-muted-foreground'}`}>
-                    {msg.timestamp}
-                  </p>
-                </div>
-                {msg.sender === 'user' && (
-                  <div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center flex-shrink-0">
-                    <User className="w-4 h-4 text-primary" />
                   </div>
                 )}
-              </div>
-            ))}
-
-            {isTyping && (
-              <div className="flex items-end gap-2.5 justify-start">
-                <div className="w-8 h-8 rounded-full bg-card border border-border flex items-center justify-center">
-                  <Bot className="w-4 h-4 text-primary" />
-                </div>
-                <div className="px-4 py-3 rounded-2xl rounded-bl-md bg-card border border-border">
-                  <div className="flex gap-1">
-                    <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                    <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                    <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-                  </div>
-                </div>
+                <div ref={messagesEndRef} />
               </div>
             )}
-            <div ref={messagesEndRef} />
-          </div>
-        </main>
-
-        {/* Secret Warning Modal */}
-        {secretWarning && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-            <div className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-md m-4 overflow-hidden">
-              <div className="p-4 bg-yellow-900/30 border-b border-yellow-700/50 flex items-center gap-3">
-                <ShieldAlert className="w-6 h-6 text-yellow-500" />
-                <div>
-                  <h3 className="font-semibold text-foreground">Secrets Detected</h3>
-                  <p className="text-sm text-muted-foreground">Your message contains sensitive information</p>
+          </main>
+
+          {/* Secret Warning Modal */}
+          {secretWarning && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+              <div className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-md m-4 overflow-hidden">
+                <div className="p-4 bg-yellow-900/30 border-b border-yellow-700/50 flex items-center gap-3">
+                  <ShieldAlert className="w-6 h-6 text-yellow-500" />
+                  <div>
+                    <h3 className="font-semibold text-foreground">Secrets Detected</h3>
+                    <p className="text-sm text-muted-foreground">Your message contains sensitive information</p>
+                  </div>
                 </div>
-              </div>
-              <div className="p-4 space-y-3">
-                <p className="text-sm text-muted-foreground">
-                  The following secrets were detected in your message. They will be <strong className="text-foreground">automatically encrypted</strong> and stored in the Secure Vault. The original values will <strong className="text-foreground">never appear in chat history</strong>.
-                </p>
-                <div className="space-y-2">
-                  {secretWarning.map((secret, i) => (
-                    <div key={i} className="flex items-center gap-2 px-3 py-2 bg-background rounded-lg border border-border">
-                      <Lock className="w-4 h-4 text-yellow-500 flex-shrink-0" />
-                      <div className="min-w-0">
-                        <p className="text-sm font-medium text-foreground">{secret.name}</p>
-                        <p className="text-xs text-muted-foreground font-mono truncate">{maskSecret(secret.match)}</p>
+                <div className="p-4 space-y-3">
+                  <p className="text-sm text-muted-foreground">
+                    The following secrets were detected. They will be <strong className="text-foreground">automatically encrypted</strong> and stored in the Secure Vault. The original values will <strong className="text-foreground">never appear in chat history</strong>.
+                  </p>
+                  <div className="space-y-2">
+                    {secretWarning.map((secret, i) => (
+                      <div key={i} className="flex items-center gap-2 px-3 py-2 bg-background rounded-lg border border-border">
+                        <Lock className="w-4 h-4 text-yellow-500 flex-shrink-0" />
+                        <div className="min-w-0">
+                          <p className="text-sm font-medium text-foreground">{secret.name}</p>
+                          <p className="text-xs text-muted-foreground font-mono truncate">{maskSecret(secret.match)}</p>
+                        </div>
+                        <span className="ml-auto text-xs px-2 py-0.5 bg-yellow-900/30 text-yellow-400 rounded-full">{secret.category}</span>
                       </div>
-                      <span className="ml-auto text-xs px-2 py-0.5 bg-yellow-900/30 text-yellow-400 rounded-full">{secret.category}</span>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
+                </div>
+                <div className="p-4 border-t border-border flex justify-end gap-2">
+                  <button onClick={handleCancelSendWithSecrets} className="px-4 py-2 text-sm rounded-lg bg-muted text-muted-foreground hover:bg-muted/80">Cancel</button>
+                  <button onClick={handleConfirmSendWithSecrets} className="px-4 py-2 text-sm rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2">
+                    <Shield className="w-4 h-4" /> Redact &amp; Send
+                  </button>
                 </div>
               </div>
-              <div className="p-4 border-t border-border flex justify-end gap-2">
-                <button
-                  onClick={handleCancelSendWithSecrets}
-                  className="px-4 py-2 text-sm rounded-lg bg-muted text-muted-foreground hover:bg-muted/80"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleConfirmSendWithSecrets}
-                  className="px-4 py-2 text-sm rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2"
-                >
-                  <Shield className="w-4 h-4" />
-                  Redact &amp; Send
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Input Area */}
-        <footer className="p-3 border-t border-border bg-card/50">
-          {/* Secret detection warning bar */}
-          {inputHasSecrets.length > 0 && (
-            <div className="mb-2 flex items-center gap-2 px-3 py-2 bg-yellow-900/20 border border-yellow-700/40 rounded-lg text-yellow-400 text-xs">
-              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0" />
-              <span>
-                <strong>{inputHasSecrets.length} secret{inputHasSecrets.length > 1 ? 's' : ''}</strong> detected ({inputHasSecrets.map(s => s.name).join(', ')}). Will be auto-redacted on send.
-              </span>
             </div>
           )}
-          <form onSubmit={handleSendMessage} className="max-w-3xl mx-auto flex items-center gap-2">
-            <button type="button" className="p-2.5 rounded-lg hover:bg-background border border-border" title="Attach file">
-              <Paperclip className="w-4 h-4 text-muted-foreground" />
-            </button>
-            <div className="flex-1 relative">
-              <input
-                ref={inputRef}
-                type="text"
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                placeholder="Type your message..."
-                className={`w-full bg-background border rounded-lg pl-4 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
-                  inputHasSecrets.length > 0 ? 'border-yellow-600/50' : 'border-border'
-                }`}
-              />
-            </div>
-            <button type="button" className="p-2.5 rounded-lg hover:bg-background border border-border" title="Voice input">
-              <Mic className="w-4 h-4 text-muted-foreground" />
-            </button>
-            <button
-              type="submit"
-              disabled={!input.trim()}
-              className="p-2.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <Send className="w-4 h-4" />
-            </button>
-          </form>
-        </footer>
+
+          {/* Input Area */}
+          <footer className="p-3 border-t border-border bg-card/50">
+            {inputHasSecrets.length > 0 && (
+              <div className="mb-2 flex items-center gap-2 px-3 py-2 bg-yellow-900/20 border border-yellow-700/40 rounded-lg text-yellow-400 text-xs">
+                <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0" />
+                <span><strong>{inputHasSecrets.length} secret{inputHasSecrets.length > 1 ? 's' : ''}</strong> detected. Will be auto-redacted on send.</span>
+              </div>
+            )}
+            <form onSubmit={handleSendMessage} className="max-w-3xl mx-auto flex items-center gap-2">
+              <div className="flex-1 relative">
+                <input ref={inputRef} type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder={agents.length === 0 ? "Create an agent first..." : "Type your message..."} disabled={agents.length === 0} className={`w-full bg-background border rounded-lg pl-4 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50 ${inputHasSecrets.length > 0 ? 'border-yellow-600/50' : 'border-border'}`} />
+              </div>
+              <button type="submit" disabled={!input.trim() || agents.length === 0} className="p-2.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed">
+                <Send className="w-4 h-4" />
+              </button>
+            </form>
+          </footer>
+        </div>
       </div>
     </DashboardLayout>
   );