unify card/modal

dashboard/components/SimpleInput.js

@@ -4,19 +4,36 @@ import { getStatusMeta } from '../utils/status.js';
 export function SimpleInput({ sessionId, status, onRespond }) {
   const [text, setText] = useState('');
   const [focused, setFocused] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
   const meta = getStatusMeta(status);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (text.trim()) {
-      onRespond(sessionId, text.trim(), true, 0);
-      setText('');
+    if (text.trim() && !sending) {
+      setSending(true);
+      setError(null);
+      try {
+        await onRespond(sessionId, text.trim(), true, 0);
+        setText('');
+      } catch (err) {
+        setError('Failed to send message');
+        console.error('SimpleInput send error:', err);
+      } finally {
+        setSending(false);
+      }
     }
   };
 
   return html`
-    <form onSubmit=${handleSubmit} class="flex items-end gap-2.5" onClick=${(e) => e.stopPropagation()}>
+    <form onSubmit=${handleSubmit} class="flex flex-col gap-2" onClick=${(e) => e.stopPropagation()}>
+      ${error && html`
+        <div class="rounded-lg border border-attention/40 bg-attention/12 px-3 py-1.5 text-sm text-attention">
+          ${error}
+        </div>
+      `}
+      <div class="flex items-end gap-2.5">
       <textarea
         value=${text}
         onInput=${(e) => {
@@ -36,14 +53,17 @@ export function SimpleInput({ sessionId, status, onRespond }) {
         rows="1"
         class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg transition-colors duration-150 placeholder:text-dim focus:outline-none"
         style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
+        disabled=${sending}
       />
       <button
         type="submit"
-        class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110"
+        class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
         style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
+        disabled=${sending || !text.trim()}
       >
-        Send
+        ${sending ? 'Sending...' : 'Send'}
       </button>
+      </div>
     </form>
   `;
 }