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>
2026-02-22 21:12:13 +00:00
parent a5ed260fbd
commit 716f230f72
20 changed files with 1297 additions and 116 deletions
--- a/packages/ui/src/components/SectionHeader.tsx
+++ b/packages/ui/src/components/SectionHeader.tsx
@@ -0,0 +1,62 @@
+import type { ReactElement, ReactNode } from "react";
+
+export interface SectionHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function SectionHeader({
+  title,
+  subtitle,
+  actions,
+  className = "",
+}: SectionHeaderProps): ReactElement {
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        marginBottom: 16,
+      }}
+    >
+      <div>
+        <div
+          style={{
+            fontSize: "0.95rem",
+            fontWeight: 700,
+            color: "var(--text)",
+          }}
+        >
+          {title}
+        </div>
+        {subtitle !== undefined && (
+          <div
+            style={{
+              fontSize: "0.78rem",
+              color: "var(--muted)",
+              marginTop: 2,
+            }}
+          >
+            {subtitle}
+          </div>
+        )}
+      </div>
+      {actions !== undefined && (
+        <div
+          style={{
+            marginLeft: "auto",
+            display: "flex",
+            gap: 8,
+            alignItems: "center",
+          }}
+        >
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}