feat: establish unified administration and model context baseline

frontend/src/shell/WorkAreaPanel.tsx

@@ -16,6 +16,7 @@ import { X } from "lucide-react";
 import { Button } from "../components/ui/button";
 
 import "./WorkAreaPanel.css";
+import { AdministrationHeader } from "./administration/AdministrationPage";
 
 function classes(base: string, className?: string) {
   return className ? `${base} ${className}` : base;
@@ -116,6 +117,7 @@ export function useModelessPanel(open: boolean, onClose: () => void, busy = fals
 
 export interface WorkAreaPanelProps {
   open: boolean;
+  mode?: "panel" | "page";
   ariaLabel?: string;
   eyebrow?: ReactNode;
   title: ReactNode;
@@ -140,6 +142,7 @@ export const WorkAreaPanel = forwardRef<HTMLElement, WorkAreaPanelProps>(
   function WorkAreaPanel(
     {
       open,
+      mode = "panel",
       ariaLabel,
       eyebrow,
       title,
@@ -160,7 +163,7 @@ export const WorkAreaPanel = forwardRef<HTMLElement, WorkAreaPanelProps>(
     const panelHost = useContext(WorkAreaPanelHostContext);
     const titleId = useId();
     const descriptionId = useId();
-    const panelRef = useModelessPanel(open, onClose, busy);
+    const panelRef = useModelessPanel(mode === "panel" && open, onClose, busy);
     const assignRef = (node: HTMLElement | null) => {
       panelRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
@@ -169,7 +172,31 @@ export const WorkAreaPanel = forwardRef<HTMLElement, WorkAreaPanelProps>(
 
     if (!open) return null;
 
-    const panel = (
+    const panel = mode === "page" ? (
+      <main
+        ref={assignRef}
+        className={classes("thot-work-area-page", className)}
+        data-work-area-page=""
+        aria-label={ariaLabel}
+        aria-busy={busy}
+      >
+        <AdministrationHeader title={title} description={description} />
+        <div
+          className={classes("thot-work-area-page__body", bodyClassName)}
+          data-work-area-panel-region="body"
+        >
+          {children}
+        </div>
+        {footer ? (
+          <footer
+            className={classes("thot-work-area-panel__footer", footerClassName)}
+            data-work-area-panel-region="footer"
+          >
+            {footer}
+          </footer>
+        ) : null}
+      </main>
+    ) : (
       <aside
         ref={assignRef}
         role="dialog"
@@ -234,6 +261,6 @@ export const WorkAreaPanel = forwardRef<HTMLElement, WorkAreaPanelProps>(
       </aside>
     );
 
-    return panelHost ? createPortal(panel, panelHost) : panel;
+    return mode === "panel" && panelHost ? createPortal(panel, panelHost) : panel;
   },
 );