unify card/modal

dashboard/components/QuestionBlock.js

@@ -5,6 +5,8 @@ import { OptionButton } from './OptionButton.js';
 export function QuestionBlock({ questions, sessionId, status, onRespond }) {
   const [freeformText, setFreeformText] = useState('');
   const [focused, setFocused] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
   const meta = getStatusMeta(status);
 
   if (!questions || questions.length === 0) return null;
@@ -14,21 +16,45 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
   const remainingCount = questions.length - 1;
   const options = question.options || [];
 
-  const handleOptionClick = (optionLabel) => {
-    onRespond(sessionId, optionLabel, false, options.length);
+  const handleOptionClick = async (optionLabel) => {
+    if (sending) return;
+    setSending(true);
+    setError(null);
+    try {
+      await onRespond(sessionId, optionLabel, false, options.length);
+    } catch (err) {
+      setError('Failed to send response');
+      console.error('QuestionBlock option error:', err);
+    } finally {
+      setSending(false);
+    }
   };
 
-  const handleFreeformSubmit = (e) => {
+  const handleFreeformSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (freeformText.trim()) {
-      onRespond(sessionId, freeformText.trim(), true, options.length);
-      setFreeformText('');
+    if (freeformText.trim() && !sending) {
+      setSending(true);
+      setError(null);
+      try {
+        await onRespond(sessionId, freeformText.trim(), true, options.length);
+        setFreeformText('');
+      } catch (err) {
+        setError('Failed to send response');
+        console.error('QuestionBlock freeform error:', err);
+      } finally {
+        setSending(false);
+      }
     }
   };
 
   return html`
     <div class="space-y-3" 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>
+      `}
       <!-- Question Header Badge -->
       ${question.header && html`
         <span class="inline-flex rounded-full border px-2 py-1 font-mono text-micro uppercase tracking-[0.15em] ${meta.badge}">
@@ -75,13 +101,15 @@ export function QuestionBlock({ questions, 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 || !freeformText.trim()}
         >
-          Send
+          ${sending ? 'Sending...' : 'Send'}
         </button>
       </form>