feat(ui,web): Phase 2 — Shared Components & Terminal Panel (#449) (#452)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

packages/ui/src/components/Modal.tsx

@@ -25,7 +25,8 @@ export function Modal({
   const dialogRef = useRef<HTMLDivElement>(null);
   const modalId = useRef(`modal-${Math.random().toString(36).substring(2, 11)}`);
 
-  const sizeStyles = {
+  type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+  const sizeStyles: Record<ModalSize, string> = {
     sm: "max-w-md",
     md: "max-w-lg",
     lg: "max-w-2xl",
@@ -65,7 +66,8 @@ export function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: "rgba(0,0,0,0.5)" }}
       onClick={handleOverlayClick}
       role="dialog"
       aria-modal="true"
@@ -75,18 +77,30 @@ export function Modal({
       <div
         ref={dialogRef}
         tabIndex={-1}
-        className={`bg-white rounded-lg shadow-xl w-full ${sizeStyles[size]} ${className}`}
+        className={`rounded-lg w-full ${sizeStyles[size]} ${className}`}
+        style={{
+          background: "var(--surface)",
+          border: "1px solid var(--border)",
+        }}
         role="document"
       >
         {title && (
-          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h2 id={`${modalId.current}-title`} className="text-lg font-semibold text-gray-900">
+          <div
+            className="px-6 py-4 flex items-center justify-between"
+            style={{ borderBottom: "1px solid var(--border)" }}
+          >
+            <h2
+              id={`${modalId.current}-title`}
+              className="text-lg font-semibold"
+              style={{ color: "var(--text)" }}
+            >
               {title}
             </h2>
             <button
               type="button"
               onClick={onClose}
-              className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100"
+              className="transition-colors p-1 rounded"
+              style={{ color: "var(--muted)" }}
               aria-label="Close modal"
             >
               <svg
@@ -108,7 +122,13 @@ export function Modal({
         )}
         <div className="px-6 py-4 max-h-[70vh] overflow-y-auto">{children}</div>
         {footer && (
-          <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg flex justify-end gap-2">
+          <div
+            className="px-6 py-4 rounded-b-lg flex justify-end gap-2"
+            style={{
+              borderTop: "1px solid var(--border)",
+              background: "var(--bg-mid)",
+            }}
+          >
             {footer}
           </div>
         )}