Merge branch 'feat/web-ui-complete' into beta

Author: cw

web-ui/src/components/ChatPanel.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  danger?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmDialog({
+  open, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel',
+  danger = false, onConfirm, onCancel,
+}: ConfirmDialogProps) {
+  const confirmRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (open) confirmRef.current?.focus();
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return (
+    <div className="cd-overlay" onClick={onCancel}>
+      <div className="cd-dialog" onClick={e => e.stopPropagation()}>
+        {title && <h3 className="cd-title">{title}</h3>}
+        <p className="cd-message">{message}</p>
+        <div className="cd-actions">
+          <button className="cd-btn cd-cancel" onClick={onCancel}>{cancelLabel}</button>
+          <button
+            ref={confirmRef}
+            className={`cd-btn cd-confirm${danger ? ' danger' : ''}`}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web-ui/src/components/ConfirmDialog.tsx

@@ -1,4 +1,5 @@
 import { NavLink, Outlet } from 'react-router-dom';
+import ToastContainer from './Toast';
 import '../styles/theme.css';
 
 const navItems = [
@@ -51,6 +52,7 @@ export default function Layout() {
       <div className="page-content">
         <Outlet />
       </div>
+      <ToastContainer />
     </div>
   );
 }

web-ui/src/components/Layout.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback } from 'react';
+
+type ToastType = 'success' | 'error' | 'info';
+
+interface ToastMessage {
+  id: number;
+  text: string;
+  type: ToastType;
+}
+
+let _addToast: ((text: string, type?: ToastType) => void) | null = null;
+
+/** Call from anywhere to show a toast notification. */
+export function showToast(text: string, type: ToastType = 'info') {
+  _addToast?.(text, type);
+}
+
+let _nextId = 1;
+
+export default function ToastContainer() {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const addToast = useCallback((text: string, type: ToastType = 'info') => {
+    const id = _nextId++;
+    setToasts(prev => [...prev, { id, text, type }]);
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3000);
+  }, []);
+
+  useEffect(() => { _addToast = addToast; return () => { _addToast = null; }; }, [addToast]);
+
+  if (toasts.length === 0) return null;
+
+  const icons: Record<ToastType, string> = { success: 'check_circle', error: 'error', info: 'info' };
+
+  return (
+    <div className="toast-container">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast-item toast-${t.type}`}>
+          <span className="material-icons toast-icon">{icons[t.type]}</span>
+          <span className="toast-text">{t.text}</span>
+          <button className="toast-close" onClick={() => setToasts(prev => prev.filter(x => x.id !== t.id))}>
+            <span className="material-icons">close</span>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

web-ui/src/components/ModelSelector.tsx

@@ -700,7 +700,9 @@ function ScenePipelineEditorInner({ episodeId, settings, onPipelineReady }: Scen
             {/* Empty state */}
             {nodes.length === 0 && (
               <div className="canvas-empty">
-                Drag nodes from the catalog to start building your pipeline
+                <span className="material-icons" style={{ fontSize: 48, opacity: 0.3, marginBottom: 12 }}>account_tree</span>
+                <div style={{ fontSize: '1.1rem', marginBottom: 6 }}>No nodes yet</div>
+                <div style={{ fontSize: '0.85rem', opacity: 0.5 }}>Drag nodes from the catalog on the left to build your pipeline</div>
               </div>
             )}
 

web-ui/src/components/QuickActions.tsx

@@ -995,6 +995,7 @@ input:checked + .toggle-slider::before {
   position: absolute;
   inset: 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);