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>

apps/web/src/components/terminal/TerminalPanel.tsx

@@ -0,0 +1,257 @@
+import type { ReactElement, CSSProperties } from "react";
+
+export interface TerminalLine {
+  type: "prompt" | "command" | "output" | "error" | "warning" | "success";
+  content: string;
+}
+
+export interface TerminalTab {
+  id: string;
+  label: string;
+}
+
+export interface TerminalPanelProps {
+  open: boolean;
+  onClose: () => void;
+  tabs?: TerminalTab[];
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  lines?: TerminalLine[];
+  className?: string;
+}
+
+const defaultTabs: TerminalTab[] = [
+  { id: "main", label: "main" },
+  { id: "build", label: "build" },
+  { id: "logs", label: "logs" },
+];
+
+const blinkKeyframes = `
+@keyframes ms-terminal-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+`;
+
+let blinkStyleInjected = false;
+
+function ensureBlinkStyle(): void {
+  if (blinkStyleInjected || typeof document === "undefined") return;
+  const styleEl = document.createElement("style");
+  styleEl.textContent = blinkKeyframes;
+  document.head.appendChild(styleEl);
+  blinkStyleInjected = true;
+}
+
+function getLineColor(type: TerminalLine["type"]): string {
+  switch (type) {
+    case "prompt":
+      return "var(--success)";
+    case "command":
+      return "var(--text-2)";
+    case "output":
+      return "var(--muted)";
+    case "error":
+      return "var(--danger)";
+    case "warning":
+      return "var(--warn)";
+    case "success":
+      return "var(--success)";
+    default:
+      return "var(--muted)";
+  }
+}
+
+export function TerminalPanel({
+  open,
+  onClose,
+  tabs,
+  activeTab,
+  onTabChange,
+  lines = [],
+  className = "",
+}: TerminalPanelProps): ReactElement {
+  ensureBlinkStyle();
+
+  const resolvedTabs = tabs ?? defaultTabs;
+  const resolvedActiveTab = activeTab ?? resolvedTabs[0]?.id ?? "";
+
+  const panelStyle: CSSProperties = {
+    background: "var(--bg-deep)",
+    borderTop: "1px solid var(--border)",
+    overflow: "hidden",
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    height: open ? 280 : 0,
+    transition: "height 0.3s ease",
+  };
+
+  const headerStyle: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "6px 16px",
+    borderBottom: "1px solid var(--border)",
+    flexShrink: 0,
+  };
+
+  const tabBarStyle: CSSProperties = {
+    display: "flex",
+    gap: 2,
+  };
+
+  const actionsStyle: CSSProperties = {
+    marginLeft: "auto",
+    display: "flex",
+    gap: 4,
+  };
+
+  const bodyStyle: CSSProperties = {
+    flex: 1,
+    overflowY: "auto",
+    padding: "10px 16px",
+    fontFamily: "var(--mono)",
+    fontSize: "0.78rem",
+    lineHeight: 1.6,
+  };
+
+  const cursorStyle: CSSProperties = {
+    display: "inline-block",
+    width: 7,
+    height: 14,
+    background: "var(--success)",
+    marginLeft: 2,
+    animation: "ms-terminal-blink 1s step-end infinite",
+    verticalAlign: "text-bottom",
+  };
+
+  return (
+    <div
+      className={className}
+      style={panelStyle}
+      role="region"
+      aria-label="Terminal panel"
+      aria-hidden={!open}
+    >
+      {/* Header */}
+      <div style={headerStyle}>
+        {/* Tab bar */}
+        <div style={tabBarStyle} role="tablist" aria-label="Terminal tabs">
+          {resolvedTabs.map((tab) => {
+            const isActive = tab.id === resolvedActiveTab;
+            const tabStyle: CSSProperties = {
+              padding: "3px 10px",
+              borderRadius: 4,
+              fontSize: "0.75rem",
+              fontFamily: "var(--mono)",
+              color: isActive ? "var(--success)" : "var(--muted)",
+              cursor: "pointer",
+              background: isActive ? "var(--surface)" : "transparent",
+              border: "none",
+              outline: "none",
+            };
+
+            return (
+              <button
+                key={tab.id}
+                role="tab"
+                aria-selected={isActive}
+                style={tabStyle}
+                onClick={(): void => {
+                  onTabChange?.(tab.id);
+                }}
+                onMouseEnter={(e): void => {
+                  if (!isActive) {
+                    (e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
+                    (e.currentTarget as HTMLButtonElement).style.color = "var(--text-2)";
+                  }
+                }}
+                onMouseLeave={(e): void => {
+                  if (!isActive) {
+                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                    (e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
+                  }
+                }}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Action buttons */}
+        <div style={actionsStyle}>
+          <button
+            aria-label="Close terminal"
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: 4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "var(--muted)",
+              cursor: "pointer",
+              background: "transparent",
+              border: "none",
+              outline: "none",
+              padding: 0,
+            }}
+            onClick={onClose}
+            onMouseEnter={(e): void => {
+              (e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
+              (e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
+            }}
+            onMouseLeave={(e): void => {
+              (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+              (e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
+            }}
+          >
+            {/* Close icon — simple X using SVG */}
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+              <path
+                d="M1 1L11 11M11 1L1 11"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={bodyStyle} role="log" aria-live="polite" aria-label="Terminal output">
+        {lines.map((line, index) => {
+          const isLast = index === lines.length - 1;
+          const lineStyle: CSSProperties = {
+            display: "flex",
+            gap: 8,
+          };
+          const contentStyle: CSSProperties = {
+            color: getLineColor(line.type),
+          };
+
+          return (
+            <div key={index} style={lineStyle}>
+              <span style={contentStyle}>
+                {line.content}
+                {isLast && <span aria-hidden="true" style={cursorStyle} />}
+              </span>
+            </div>
+          );
+        })}
+
+        {/* Show cursor even when no lines */}
+        {lines.length === 0 && (
+          <div style={{ display: "flex", gap: 8 }}>
+            <span style={{ color: "var(--success)" }}>
+              <span aria-hidden="true" style={cursorStyle} />
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/terminal/index.ts

@@ -0,0 +1,2 @@
+export type { TerminalLine, TerminalTab, TerminalPanelProps } from "./TerminalPanel";
+export { TerminalPanel } from "./TerminalPanel";