feat(ui): add light theme toggle

src/lib/ui/components/DashboardFrame.tsx

@@ -1,4 +1,5 @@
 import { useId } from "react";
+import type { ReactNode } from "react";
 import type { UiDashboardPreview } from "../types";
 import { ModuleCard } from "./ModuleCard";
 import { ServicePanel } from "./ServicePanel";
@@ -6,21 +7,31 @@ import { StatusStrip } from "./StatusStrip";
 import { TelemetryGrid } from "./TelemetryGrid";
 
 export interface DashboardFrameProps {
+  actions?: ReactNode;
   dashboard: UiDashboardPreview;
   titleId?: string;
 }
 
-export function DashboardFrame({ dashboard, titleId }: DashboardFrameProps) {
+export function DashboardFrame({
+  actions,
+  dashboard,
+  titleId,
+}: DashboardFrameProps) {
   const generatedTitleId = useId();
   const resolvedTitleId = titleId || `${generatedTitleId}-title`;
 
   return (
     <main className="dashboard-frame" aria-labelledby={resolvedTitleId}>
       <header className="dashboard-frame__header">
-        <div>
-          {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}
-          <h1 id={resolvedTitleId}>{dashboard.title}</h1>
-          {dashboard.subtitle ? <span>{dashboard.subtitle}</span> : null}
+        <div className="dashboard-frame__title">
+          <div className="dashboard-frame__title-copy">
+            {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}
+            <h1 id={resolvedTitleId}>{dashboard.title}</h1>
+            {dashboard.subtitle ? <span>{dashboard.subtitle}</span> : null}
+          </div>
+          {actions ? (
+            <div className="dashboard-frame__actions">{actions}</div>
+          ) : null}
         </div>
         {dashboard.modules.length ? (
           <div className="dashboard-frame__modules">