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/Card.tsx

@@ -3,6 +3,7 @@ import type { ReactNode, ReactElement } from "react";
 export interface CardProps {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
   id?: string;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
@@ -11,21 +12,25 @@ export interface CardProps {
 export interface CardHeaderProps {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export interface CardContentProps {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export interface CardFooterProps {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export function Card({
   children,
   className = "",
+  style,
   id,
   onMouseEnter,
   onMouseLeave,
@@ -35,24 +40,52 @@ export function Card({
       id={id}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className={`bg-white rounded-lg shadow-md border border-gray-200 ${className}`}
+      className={className}
+      style={{
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)",
+        padding: "16px",
+        ...style,
+      }}
     >
       {children}
     </div>
   );
 }
 
-export function CardHeader({ children, className = "" }: CardHeaderProps): ReactElement {
-  return <div className={`px-6 py-4 border-b border-gray-200 ${className}`}>{children}</div>;
-}
-
-export function CardContent({ children, className = "" }: CardContentProps): ReactElement {
-  return <div className={`px-6 py-4 ${className}`}>{children}</div>;
-}
-
-export function CardFooter({ children, className = "" }: CardFooterProps): ReactElement {
+export function CardHeader({ children, className = "", style }: CardHeaderProps): ReactElement {
   return (
-    <div className={`px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg ${className}`}>
+    <div
+      className={`px-6 py-4 ${className}`}
+      style={{
+        borderBottom: "1px solid var(--border)",
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardContent({ children, className = "", style }: CardContentProps): ReactElement {
+  return (
+    <div className={`px-6 py-4 ${className}`} style={style}>
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({ children, className = "", style }: CardFooterProps): ReactElement {
+  return (
+    <div
+      className={`px-6 py-4 rounded-b-lg ${className}`}
+      style={{
+        borderTop: "1px solid var(--border)",
+        background: "var(--bg-mid)",
+        ...style,
+      }}
+    >
       {children}
     </div>
   );