@tangle-network/sandbox-ui 0.113.4 → 0.113.6

package/dist/{chunk-LDAKIKTV.js → chunk-DYXXYGS4.js}

@@ -1,7 +1,7 @@
 import {
   Button,
   Logo
-} from "./chunk-2XPJ2XF7.js";
+} from "./chunk-ANSC5AFC.js";
 import {
   moonshot_default
 } from "./chunk-RQZRXKMR.js";
@@ -227,7 +227,8 @@ function RailTooltip({ label, children, disabled, className }) {
 }
 
 // src/dashboard/app-sidebar.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { focusRing } from "@tangle-network/ui/utils";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function DefaultLink({
   href,
   to,
@@ -286,7 +287,7 @@ function RailThemeToggle({ className }) {
         "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
         MOTION_CONTROL,
         "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing,
         className
       ),
       children: isDark ? /* @__PURE__ */ jsx3(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(MoonIcon, { className: "h-4 w-4" })
@@ -320,7 +321,7 @@ function RailCollapseToggle({ collapsed, showLabel, onToggle, className }) {
         MOTION_CONTROL,
         showLabel ? "h-9 w-full justify-start gap-2.5 px-2.5" : "h-9 w-9 justify-center",
         "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing,
         className
       ),
       children: [
@@ -344,15 +345,22 @@ function PanelToggleButton({ collapsed, onToggle, className }) {
         "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
         MOTION_CONTROL,
         "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing,
         className
       ),
       children: /* @__PURE__ */ jsx3(PanelLeft, { className: "h-[18px] w-[18px] shrink-0" })
     }
   );
 }
+function isRenderable(node) {
+  return React3.Children.toArray(node).some(
+    (child) => React3.isValidElement(child) && child.type === React3.Fragment ? isRenderable(child.props.children) : true
+  );
+}
 function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsible = true, LinkComponent, className }) {
   const Link = LinkComponent ?? DefaultLink;
+  const hasBrand = isRenderable(brand);
+  const hasChildren = isRenderable(children);
   const brandNode = brandHref !== void 0 ? /* @__PURE__ */ jsx3(
     Link,
     {
@@ -371,21 +379,50 @@ function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsib
         collapsed ? "justify-center px-2" : "gap-2 px-3",
         className
       ),
-      children: collapsed ? collapsible ? /* @__PURE__ */ jsx3(RailTooltip, { label: "Expand sidebar", children: /* @__PURE__ */ jsxs2(
+      children: collapsed ? !hasBrand && hasChildren ? (
+        // No brand mark: `children` (SidebarLayout's `railHeaderContent`) is
+        // the only rail-top content the consumer gave us, so render it here
+        // too. Dropping it left an EMPTY header — the collapsed rail showed
+        // nothing at all where the product's mark belongs. With neither a
+        // brand nor children, the plain expand button below still owns the
+        // rail top so the rail stays expandable.
+        //
+        // Rendered outside the expand button on purpose: content that owns
+        // the rail top is routinely interactive itself (a mark that expands
+        // the rail on click), and a <button> inside a <button> is invalid
+        // HTML that React refuses to hydrate.
+        //
+        // The explicit "Expand sidebar" control stays in the tree for
+        // keyboard and assistive-tech users (the content may be a passive
+        // switcher, and the empty-rail click fallback is mouse-only). It sits
+        // over the content, invisible and non-interactive until it receives
+        // keyboard focus, so it costs no rail width.
+        /* @__PURE__ */ jsxs2("div", { className: "relative flex min-w-0 items-center justify-center", children: [
+          children,
+          collapsible && /* @__PURE__ */ jsx3(
+            PanelToggleButton,
+            {
+              collapsed,
+              onToggle,
+              className: "pointer-events-none absolute inset-0 m-auto bg-background opacity-0 focus-visible:pointer-events-auto focus-visible:opacity-100"
+            }
+          )
+        ] })
+      ) : collapsible ? /* @__PURE__ */ jsx3(RailTooltip, { label: "Expand sidebar", children: /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
           onClick: onToggle,
           "aria-label": "Expand sidebar",
           "aria-pressed": true,
-          className: cn("group/brand relative flex h-9 w-9 items-center justify-center rounded-md transition-colors hover:bg-[var(--accent-surface-soft)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", MOTION_CONTROL),
+          className: cn("group/brand relative flex h-9 w-9 items-center justify-center rounded-md transition-colors hover:bg-[var(--accent-surface-soft)]", focusRing, MOTION_CONTROL),
           children: [
             /* @__PURE__ */ jsx3("span", { className: cn("flex items-center justify-center transition-opacity group-hover/brand:opacity-0", MOTION_CONTROL), children: brand }),
             /* @__PURE__ */ jsx3("span", { className: cn("pointer-events-none absolute inset-0 flex items-center justify-center text-foreground opacity-0 transition-opacity group-hover/brand:opacity-100", MOTION_CONTROL), children: /* @__PURE__ */ jsx3(PanelLeft, { className: "h-[18px] w-[18px]" }) })
           ]
         }
-      ) }) : brandNode : /* @__PURE__ */ jsxs2(Fragment, { children: [
-        brand !== void 0 && brandNode,
+      ) }) : brandNode : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        hasBrand && brandNode,
         /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children }),
         collapsible && /* @__PURE__ */ jsx3(PanelToggleButton, { collapsed, onToggle })
       ] })
@@ -445,7 +482,7 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, s
     MOTION_CONTROL,
     showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
     // Quiet press feedback via color only — no scale on the full-width row.
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    focusRing,
     // The active item (route matches) and any explicit primary share one
     // emphasized look — a filled accent pill with an accent ring — so the
     // current destination clearly stands out from the default rows.
@@ -456,7 +493,7 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, s
     /* @__PURE__ */ jsx3(Icon2, { className: "h-[17px] w-[17px] shrink-0" }),
     badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx3("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1", children: badge > 99 ? "99+" : badge })
   ] });
-  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs2(Fragment2, { children: [
     iconWithBadge,
     showLabel && /* @__PURE__ */ jsx3("span", { className: "text-[13.5px] font-medium", children: label })
   ] });
@@ -512,7 +549,7 @@ function RailFlyout({
     "relative flex shrink-0 items-center rounded-md transition-colors",
     MOTION_CONTROL,
     showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    focusRing,
     active ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     className
   );
@@ -724,7 +761,7 @@ function RailExpandable({
     const triggerClasses = cn(
       "relative flex h-9 w-9 items-center justify-center rounded-md transition-colors",
       MOTION_CONTROL,
-      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      focusRing,
       isActive || open ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] font-medium ring-1 ring-inset ring-[var(--border-accent)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
     );
     const openFlyout = () => {
@@ -828,7 +865,7 @@ function RailExpandable({
               "aria-expanded": open,
               "aria-controls": discloseId,
               "aria-label": open ? `Collapse ${label}` : `Expand ${label}`,
-              className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              className: `relative flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${focusRing}`,
               children: [
                 /* @__PURE__ */ jsx3(
                   Icon2,
@@ -945,7 +982,7 @@ function AppearanceMenuSection({ appearance, divider = true }) {
   const resolved = appearance.value === "system" ? systemDark ? "dark" : "light" : appearance.value;
   const TriggerIcon = resolved === "dark" ? MoonIcon : SunIcon;
   const caption = appearance.value === "system" ? `System (${resolved === "dark" ? "Dark" : "Light"})` : APPEARANCE_META[appearance.value].label;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     divider && /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
     /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
       /* @__PURE__ */ jsxs2(DropdownMenuSubTrigger, { children: [
@@ -999,7 +1036,7 @@ function ProfileAvatar({
         className: cn(
           "flex items-center rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
           MOTION_CONTROL,
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          focusRing,
           showDetails ? "w-full gap-2.5 px-3 py-2 text-left" : "justify-center w-12 h-12",
           className
         ),
@@ -1019,10 +1056,10 @@ function ProfileAvatar({
           user?.avatarUrl && /* @__PURE__ */ jsx3(AvatarImage, { src: user.avatarUrl, alt: "" }),
           /* @__PURE__ */ jsx3(AvatarFallback, { className: "text-sm bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]", children: getInitials(user?.name, user?.email) })
         ] }),
-        /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
           /* @__PURE__ */ jsx3(Skeleton, { className: "h-4 w-24 mb-1" }),
           /* @__PURE__ */ jsx3(Skeleton, { className: "h-3 w-32" })
-        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
           /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold truncate", children: user?.name ?? user?.email ?? "Not logged in" }),
           user?.email && user?.name && /* @__PURE__ */ jsx3("p", { className: "text-xs text-muted-foreground truncate", children: user.email }),
           user?.tier && /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground capitalize", children: [
@@ -1041,7 +1078,7 @@ function ProfileAvatar({
         /* @__PURE__ */ jsx3(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
         "Settings"
       ] }) }),
-      onLogout && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      onLogout && /* @__PURE__ */ jsxs2(Fragment2, { children: [
         /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsxs2(DropdownMenuItem, { className: "text-[var(--surface-danger-text)]", onClick: onLogout, children: [
           /* @__PURE__ */ jsx3(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
@@ -1054,6 +1091,7 @@ function ProfileAvatar({
 
 // src/dashboard/credit-balance.tsx
 import * as React4 from "react";
+import { focusFieldWithin } from "@tangle-network/ui/utils";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CreditBalance({
   amount,
@@ -1063,6 +1101,7 @@ function CreditBalance({
   className
 }) {
   const [topUpValue, setTopUpValue] = React4.useState("50.00");
+  const topUpId = React4.useId();
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -1080,11 +1119,14 @@ function CreditBalance({
           /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description })
         ] }),
         onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 mt-5", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "bg-surface-container-low border border-[var(--md3-outline-variant)] p-1 rounded-lg flex items-center", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: topUpId, className: "block text-xs font-medium text-muted-foreground", children: "Top-up amount (USD)" }),
+          /* @__PURE__ */ jsxs3("div", { className: `bg-surface-container-low border p-1 rounded-lg flex items-center ${focusFieldWithin}`, children: [
             /* @__PURE__ */ jsx4(
               "input",
               {
+                id: topUpId,
                 type: "text",
+                inputMode: "decimal",
                 value: `$${topUpValue}`,
                 onChange: (e) => {
                   const raw = e.target.value.replace(/[^0-9.]/g, "");
@@ -1193,7 +1235,7 @@ function OutOfCreditsModal({
 
 // src/dashboard/cluster-status-bar.tsx
 import * as React5 from "react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ClusterStatusBar({ items, latency, className }) {
   if (!items?.length) return null;
   return /* @__PURE__ */ jsx6("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-max max-w-[90vw] animate-in slide-in-from-bottom flex justify-center", className), children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4 overflow-x-auto rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-5 py-2.5 shadow-sm", children: [
@@ -1207,7 +1249,7 @@ function ClusterStatusBar({ items, latency, className }) {
         ] })
       ] })
     ] }, i)),
-    latency && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    latency && /* @__PURE__ */ jsxs5(Fragment4, { children: [
       /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "h-5 w-px shrink-0 bg-border" }),
       /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
         /* @__PURE__ */ jsxs5("span", { className: "relative flex h-2.5 w-2.5 items-center justify-center", children: [
@@ -1357,7 +1399,8 @@ import {
   HardDrive,
   Box
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { focusRing as focusRing2 } from "@tangle-network/ui/utils";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function canAdminSandbox(sandbox) {
   if (!sandbox.team) return true;
   return sandbox.team.role === "owner" || sandbox.team.role === "admin";
@@ -1451,13 +1494,13 @@ function SandboxCard({
           "button",
           {
             type: "button",
-            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground outline-none",
+            className: `rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground ${focusRing2}`,
             "aria-label": "Sandbox options",
             children: /* @__PURE__ */ jsx10(MoreVertical, { className: "h-4 w-4" })
           }
         ) }),
         /* @__PURE__ */ jsxs9(DropdownMenuContent2, { align: "end", className: "min-w-[180px]", children: [
-          isRunning && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          isRunning && /* @__PURE__ */ jsxs9(Fragment5, { children: [
             onStop && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onStop(sandbox.id), children: [
               /* @__PURE__ */ jsx10(PowerOff, { className: "mr-2 h-4 w-4" }),
               " Stop Sandbox"
@@ -1476,7 +1519,7 @@ function SandboxCard({
               " Health Check"
             ] }),
             (onUsage || onHealth) && /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {}),
-            onFork && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            onFork && /* @__PURE__ */ jsxs9(Fragment5, { children: [
               /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onFork(sandbox.id), children: [
                 /* @__PURE__ */ jsx10(Copy, { className: "mr-2 h-4 w-4" }),
                 " Fork Sandbox"
@@ -1484,7 +1527,7 @@ function SandboxCard({
               /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {})
             ] })
           ] }),
-          isStopped && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          isStopped && /* @__PURE__ */ jsxs9(Fragment5, { children: [
             resumeHandler && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => resumeHandler(sandbox.id), children: [
               /* @__PURE__ */ jsx10(Power, { className: "mr-2 h-4 w-4" }),
               " ",
@@ -1647,7 +1690,8 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator3,
   DropdownMenuTrigger as DropdownMenuTrigger3
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { focusRing as focusRing3 } from "@tangle-network/ui/utils";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
   hibernating: { dot: "bg-muted-foreground", text: "text-muted-foreground", bar: "bg-muted-foreground" },
@@ -1803,7 +1847,7 @@ function SandboxTable({
                   /* @__PURE__ */ jsx11(MiniMeter, { label: "RAM", percent: 0 })
                 ] }) : null }),
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-1", children: [
-                  isActive && /* @__PURE__ */ jsxs10(Fragment6, { children: [
+                  isActive && /* @__PURE__ */ jsxs10(Fragment7, { children: [
                     /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onOpenIDE?.(sb.id);
@@ -1895,8 +1939,8 @@ function SandboxTable({
                         {
                           type: "button",
                           onClick: stopRowClick,
-                          className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 outline-none",
-                          "aria-label": "More actions",
+                          className: `p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing3}`,
+                          "aria-label": `More actions for ${sb.name}`,
                           title: "More actions",
                           children: /* @__PURE__ */ jsx11(MoreVertical2, { className: "h-4 w-4" })
                         }
@@ -1907,10 +1951,10 @@ function SandboxTable({
                       ] }, sectionIdx)) })
                     ] });
                   })(),
-                  onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
+                  onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": `Delete ${sb.name}`, onClick: (e) => {
                     stopRowClick(e);
                     onDelete(sb.id);
-                  }, className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx11(Trash22, { className: "h-4 w-4" }) })
+                  }, className: `p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90 ${focusRing3}`, title: "Delete", children: /* @__PURE__ */ jsx11(Trash22, { className: "h-4 w-4" }) })
                 ] }) })
               ]
             },
@@ -2040,6 +2084,7 @@ function PlanCards({ plans, className }) {
 // src/dashboard/backend-selector.tsx
 import { ChevronDown } from "lucide-react";
 import * as Select from "@radix-ui/react-select";
+import { focusRing as focusRing4 } from "@tangle-network/ui/utils";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function BackendSelector({
   backends,
@@ -2063,7 +2108,7 @@ function BackendSelector({
         "px-2.5 text-xs font-medium text-foreground shadow-sm",
         "transition-colors duration-[var(--transition-fast)]",
         "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing4,
         "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         triggerClassName
@@ -2084,7 +2129,7 @@ function BackendSelector({
         "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left",
         "transition-colors duration-[var(--transition-fast)]",
         "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing4,
         "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         triggerClassName
@@ -2338,7 +2383,7 @@ function useBrandThemeSync() {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function MenuIcon({ className }) {
   return /* @__PURE__ */ jsxs14("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
     /* @__PURE__ */ jsx17("title", { children: "Menu icon" }),
@@ -2425,7 +2470,7 @@ function DashboardLayoutInner({
   );
   const activePanel = panels.find((p) => p.mode === mode);
   const buildSidebarContent = React9.useCallback(
-    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs14(Fragment9, { children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { wide: showLabels, children: [
         /* @__PURE__ */ jsx17(
           RailHeader,
@@ -2706,7 +2751,7 @@ function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRa
 
 // src/dashboard/sidebar-layout.tsx
 import * as React10 from "react";
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var HIDE_BELOW_CLASS = {
   md: "max-md:hidden",
   lg: "max-lg:hidden"
@@ -2939,7 +2984,7 @@ function SidebarLayoutInner({
         breakpoint: hideBelow,
         onClose: closeMobileNav,
         header: railHeaderContent ?? logo,
-        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs15(Fragment10, { children: [
           railFooter,
           hasProfile && /* @__PURE__ */ jsx18(
             ProfileAvatar,
@@ -3096,7 +3141,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator4,
   DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -3130,7 +3175,7 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment11, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx19(DropdownMenuLabel2, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs16(
@@ -3155,7 +3200,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment11, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx19(DropdownMenuLabel2, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs16(
@@ -3192,7 +3237,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs16(Fragment11, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           onCreateClick && /* @__PURE__ */ jsxs16(
             DropdownMenuItem4,
@@ -3434,7 +3479,7 @@ import {
 } from "lucide-react";
 import { Button as Button3 } from "@tangle-network/ui/primitives";
 import { Badge as Badge2 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment12, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
     icon: Clock3,
@@ -3558,7 +3603,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs18(Fragment12, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs18(Fragment13, { children: [
                 /* @__PURE__ */ jsxs18(
                   Button3,
                   {
@@ -3872,16 +3917,38 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 // src/dashboard/ports-list.tsx
 import * as React13 from "react";
 import { Copy as Copy3, Check as Check5, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
+import { focusField, focusRing as focusRing5 } from "@tangle-network/ui/utils";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
   const [newPort, setNewPort] = React13.useState("");
   const [copiedPort, setCopiedPort] = React13.useState(null);
+  const [statusMessage, setStatusMessage] = React13.useState("");
   const copyTimerRef = React13.useRef(null);
+  const pendingRemovalRef = React13.useRef(null);
+  const removeButtonsRef = React13.useRef(/* @__PURE__ */ new Map());
+  const portInputRef = React13.useRef(null);
+  const portInputId = React13.useId();
+  const portErrorId = React13.useId();
+  const portNumber = Number(newPort);
+  const validPort = /^\d+$/.test(newPort) && portNumber >= 1 && portNumber <= 65535;
+  const duplicatePort = validPort && ports.some((port) => port.port === portNumber);
+  const portError = newPort === "" ? null : !validPort ? "Enter a whole port number from 1 to 65535." : duplicatePort ? `Port ${portNumber} is already exposed.` : null;
   React13.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     };
   }, []);
+  React13.useEffect(() => {
+    const pending = pendingRemovalRef.current;
+    if (!pending || ports.some((port) => port.port === pending.removed)) return;
+    setStatusMessage(`Port ${pending.removed} removed.`);
+    if (pending.restoreFocus) {
+      const nextButton = pending.next == null ? null : removeButtonsRef.current.get(pending.next);
+      const focusTarget = nextButton ?? removeButtonsRef.current.values().next().value ?? portInputRef.current;
+      focusTarget?.focus();
+    }
+    pendingRemovalRef.current = null;
+  }, [ports]);
   const handleCopy = async (url, port) => {
     try {
       await navigator.clipboard.writeText(url);
@@ -3893,86 +3960,114 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
     }
   };
   const handleExpose = () => {
-    const port = parseInt(newPort, 10);
-    if (port > 0 && port <= 65535) {
-      onExposePort(port);
+    if (validPort && !duplicatePort && !isExposing) {
+      onExposePort(portNumber);
       setNewPort("");
     }
   };
   return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-4", className), children: [
-    ports.length > 0 ? /* @__PURE__ */ jsx25("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs22("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx25("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs22("tr", { children: [
-        /* @__PURE__ */ jsx25("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Port" }),
-        /* @__PURE__ */ jsx25("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Public URL" }),
-        /* @__PURE__ */ jsx25("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
-        /* @__PURE__ */ jsx25("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground w-20" })
-      ] }) }),
-      /* @__PURE__ */ jsx25("tbody", { className: "divide-y divide-border", children: ports.map((p) => /* @__PURE__ */ jsxs22("tr", { children: [
-        /* @__PURE__ */ jsx25("td", { className: "px-4 py-3 font-mono text-xs text-foreground", children: p.port }),
-        /* @__PURE__ */ jsx25("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsx25("span", { role: "status", className: "sr-only", children: statusMessage }),
+    ports.length > 0 ? /* @__PURE__ */ jsxs22("div", { className: "overflow-hidden rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container text-sm", children: [
+      /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: "hidden border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2.5 text-xs font-medium text-muted-foreground sm:grid sm:grid-cols-[4rem_minmax(0,1fr)_5.5rem_3rem] sm:gap-x-2", children: [
+        /* @__PURE__ */ jsx25("span", { children: "Port" }),
+        /* @__PURE__ */ jsx25("span", { children: "Public URL" }),
+        /* @__PURE__ */ jsx25("span", { children: "Status" })
+      ] }),
+      /* @__PURE__ */ jsx25("ul", { className: "divide-y divide-border", children: ports.map((p, index) => /* @__PURE__ */ jsxs22("li", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 px-3 py-2 sm:grid-cols-[4rem_minmax(0,1fr)_5.5rem_3rem] sm:py-1", children: [
+        /* @__PURE__ */ jsxs22("span", { className: "col-start-1 row-start-1 font-mono text-xs text-foreground", children: [
+          /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Port " }),
+          p.port
+        ] }),
+        /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
+            "aria-label": copiedPort === p.port ? `Copied public URL for port ${p.port}` : `Copy public URL for port ${p.port}: ${p.url}`,
             onClick: () => handleCopy(p.url, p.port),
-            className: "flex items-center gap-2 font-mono text-xs text-primary hover:underline cursor-pointer group",
+            className: `col-span-2 row-start-3 flex min-h-10 min-w-0 items-center gap-2 rounded text-left font-mono text-xs text-[var(--accent-text)] hover:underline sm:col-span-1 sm:col-start-2 sm:row-start-1 ${focusRing5}`,
             children: [
-              /* @__PURE__ */ jsx25("span", { className: "truncate max-w-[300px]", children: p.url }),
-              copiedPort === p.port ? /* @__PURE__ */ jsx25(Check5, { className: "h-3 w-3 text-[var(--surface-success-text)] shrink-0" }) : /* @__PURE__ */ jsx25(Copy3, { className: "h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" })
+              /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", className: "min-w-0 flex-1 break-all sm:truncate", children: p.url }),
+              copiedPort === p.port ? /* @__PURE__ */ jsx25(Check5, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]", "aria-hidden": "true" }) : /* @__PURE__ */ jsx25(Copy3, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })
             ]
           }
-        ) }),
-        /* @__PURE__ */ jsx25("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx25("span", { className: cn(
-          "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+        ),
+        /* @__PURE__ */ jsxs22("span", { className: cn(
+          "col-start-1 row-start-2 inline-flex items-center justify-self-start rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider sm:col-start-3 sm:row-start-1",
           p.status === "active" ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"
-        ), children: p.status }) }),
-        /* @__PURE__ */ jsx25("td", { className: "px-4 py-3 text-right", children: onRemovePort && /* @__PURE__ */ jsx25(
+        ), children: [
+          /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Status: " }),
+          p.status
+        ] }),
+        onRemovePort && /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
-            onClick: () => onRemovePort(p.port),
-            className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
-            children: /* @__PURE__ */ jsx25(Trash23, { className: "h-3.5 w-3.5" })
+            "aria-label": `Remove port ${p.port}`,
+            ref: (button) => {
+              if (button) removeButtonsRef.current.set(p.port, button);
+              else removeButtonsRef.current.delete(p.port);
+            },
+            onClick: (event) => {
+              pendingRemovalRef.current = {
+                removed: p.port,
+                next: ports[index + 1]?.port ?? ports[index - 1]?.port ?? null,
+                restoreFocus: event.detail === 0
+              };
+              onRemovePort(p.port);
+            },
+            className: `col-start-2 row-start-1 inline-flex min-h-10 min-w-10 items-center justify-center rounded text-muted-foreground transition-colors hover:text-destructive sm:col-start-4 ${focusRing5}`,
+            children: /* @__PURE__ */ jsx25(Trash23, { className: "h-4 w-4", "aria-hidden": "true" })
           }
-        ) })
+        )
       ] }, p.port)) })
-    ] }) }) : /* @__PURE__ */ jsxs22("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
+    ] }) : /* @__PURE__ */ jsxs22("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx25(Globe, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
       /* @__PURE__ */ jsx25("p", { className: "text-sm text-muted-foreground", children: "No ports exposed yet" })
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx25(
-        "input",
-        {
-          type: "number",
-          min: 1,
-          max: 65535,
-          placeholder: "Port (e.g. 3000)",
-          value: newPort,
-          onChange: (e) => setNewPort(e.target.value),
-          onKeyDown: (e) => e.key === "Enter" && handleExpose(),
-          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring"
-        }
-      ),
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-end gap-3", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-[1_1_10rem]", children: [
+        /* @__PURE__ */ jsx25("label", { htmlFor: portInputId, className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Port number" }),
+        /* @__PURE__ */ jsx25(
+          "input",
+          {
+            ref: portInputRef,
+            id: portInputId,
+            type: "number",
+            min: 1,
+            max: 65535,
+            step: 1,
+            "aria-invalid": Boolean(portError),
+            "aria-describedby": portError ? portErrorId : void 0,
+            placeholder: "3000",
+            value: newPort,
+            onChange: (e) => setNewPort(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleExpose(),
+            className: `w-full min-w-0 rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField}`
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs22(
         "button",
         {
           type: "button",
           onClick: handleExpose,
-          disabled: !newPort || isExposing,
-          className: "inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-primary/55 disabled:text-primary-foreground/90 disabled:shadow-none",
+          disabled: !validPort || duplicatePort || isExposing,
+          className: `inline-flex shrink-0 items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)] disabled:cursor-not-allowed disabled:opacity-55 disabled:shadow-none ${focusRing5}`,
           children: [
             /* @__PURE__ */ jsx25(Plus4, { className: "h-4 w-4" }),
             "Expose"
           ]
         }
       )
-    ] })
+    ] }),
+    portError && /* @__PURE__ */ jsx25("p", { id: portErrorId, className: "text-xs text-[var(--surface-danger-text)]", children: portError })
   ] });
 }
 
 // src/dashboard/process-list.tsx
 import * as React14 from "react";
 import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal4 } from "lucide-react";
+import { focusField as focusField2, focusRing as focusRing6 } from "@tangle-network/ui/utils";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
   if (!startedAt) return "-";
@@ -3984,6 +4079,18 @@ function formatUptime(startedAt) {
 }
 function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
   const [newCommand, setNewCommand] = React14.useState("");
+  const [statusMessage, setStatusMessage] = React14.useState("");
+  const commandId = React14.useId();
+  const commandInputRef = React14.useRef(null);
+  const pendingKillRef = React14.useRef(null);
+  React14.useEffect(() => {
+    const pending = pendingKillRef.current;
+    if (!pending || processes.some((process) => process.pid === pending.pid && process.running)) return;
+    const stopped = processes.find((process) => process.pid === pending.pid);
+    setStatusMessage(stopped?.exitCode == null ? `Process ${pending.pid} stopped.` : `Process ${pending.pid} exited with code ${stopped.exitCode}.`);
+    if (pending.restoreFocus) commandInputRef.current?.focus();
+    pendingKillRef.current = null;
+  }, [processes]);
   const handleSpawn = () => {
     const cmd = newCommand.trim();
     if (cmd) {
@@ -3992,61 +4099,73 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
     }
   };
   return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsx26("span", { role: "status", className: "sr-only", children: statusMessage }),
     loading ? /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx26(Activity3, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2", "data-motion": "essential" }),
       /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "Loading processes..." })
-    ] }) : processes.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs23("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx26("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs23("tr", { children: [
-        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "PID" }),
-        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Command" }),
-        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
-        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Uptime" }),
-        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground w-20" })
-      ] }) }),
-      /* @__PURE__ */ jsx26("tbody", { className: "divide-y divide-border", children: processes.map((p) => /* @__PURE__ */ jsxs23("tr", { children: [
-        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 font-mono text-xs text-foreground", children: p.pid }),
-        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 font-mono text-xs text-foreground truncate max-w-[250px]", children: p.command }),
-        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx26("span", { className: cn(
-          "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-          p.running ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-surface-container-high text-muted-foreground"
-        ), children: p.running ? "running" : `exited (${p.exitCode ?? "?"})` }) }),
-        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 font-mono text-xs text-muted-foreground", children: formatUptime(p.startedAt) }),
-        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-right", children: p.running && /* @__PURE__ */ jsx26(
+    ] }) : processes.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsx26("ul", { "aria-label": "Processes", className: "divide-y divide-border", children: processes.map((p) => {
+      const age = formatUptime(p.startedAt);
+      return /* @__PURE__ */ jsxs23("li", { className: "flex min-w-0 items-start gap-3 px-3 py-3", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx26("code", { className: "block break-all font-mono text-xs leading-5 text-foreground", children: p.command }),
+          /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs23("span", { className: "font-mono tabular-nums", children: [
+              "PID ",
+              p.pid
+            ] }),
+            /* @__PURE__ */ jsx26("span", { className: cn(
+              "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+              p.running ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-surface-container-high text-muted-foreground"
+            ), children: p.running ? "running" : `exited (${p.exitCode ?? "?"})` }),
+            age !== "-" && /* @__PURE__ */ jsx26("span", { className: "font-mono tabular-nums", children: p.running ? `Uptime ${age}` : `Started ${age} ago` })
+          ] })
+        ] }),
+        p.running && /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
-            onClick: () => onKill(p.pid),
-            className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
-            title: "Kill process",
-            children: /* @__PURE__ */ jsx26(Skull, { className: "h-3.5 w-3.5" })
+            onClick: (event) => {
+              pendingKillRef.current = { pid: p.pid, restoreFocus: event.detail === 0 };
+              onKill(p.pid);
+            },
+            className: `flex size-10 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive ${focusRing6}`,
+            "aria-label": `Kill process ${p.pid}`,
+            title: `Kill process ${p.pid}`,
+            children: /* @__PURE__ */ jsx26(Skull, { "aria-hidden": "true", className: "h-4 w-4" })
           }
-        ) })
-      ] }, `${p.pid}-${p.startedAt ?? p.command}`)) })
-    ] }) }) : /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
+        )
+      ] }, `${p.pid}-${p.startedAt ?? p.command}`);
+    }) }) }) : /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx26(Terminal4, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
       /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "No processes running" })
     ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx26(
-        "input",
-        {
-          type: "text",
-          placeholder: "Command (e.g. node server.js)",
-          value: newCommand,
-          onChange: (e) => setNewCommand(e.target.value),
-          onKeyDown: (e) => e.key === "Enter" && handleSpawn(),
-          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        }
-      ),
+    /* @__PURE__ */ jsxs23("form", { onSubmit: (event) => {
+      event.preventDefault();
+      handleSpawn();
+    }, className: "flex min-w-0 flex-wrap items-end gap-2", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-[1_1_12rem]", children: [
+        /* @__PURE__ */ jsx26("label", { htmlFor: commandId, className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Command" }),
+        /* @__PURE__ */ jsx26(
+          "input",
+          {
+            ref: commandInputRef,
+            id: commandId,
+            type: "text",
+            placeholder: "node app.js",
+            value: newCommand,
+            onChange: (e) => setNewCommand(e.target.value),
+            className: `w-full min-w-0 rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField2}`
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs23(
         "button",
         {
-          type: "button",
-          onClick: handleSpawn,
+          type: "submit",
           disabled: !newCommand.trim(),
-          className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50",
+          className: `inline-flex h-10 shrink-0 items-center gap-2 rounded-lg border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-3 text-sm font-medium text-[var(--accent-text)] transition-colors hover:bg-[var(--btn-primary-bg)] hover:text-[var(--btn-primary-text)] disabled:opacity-50 ${focusRing6}`,
           children: [
-            /* @__PURE__ */ jsx26(Plus5, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx26(Plus5, { "aria-hidden": "true", className: "h-4 w-4" }),
             "Spawn"
           ]
         }
@@ -4058,6 +4177,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 // src/dashboard/network-config.tsx
 import * as React15 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
+import { focusField as focusField3, focusRing as focusRing7 } from "@tangle-network/ui/utils";
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
   const [newCidr, setNewCidr] = React15.useState("");
@@ -4127,8 +4247,9 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
           "button",
           {
             type: "button",
+            "aria-label": `Remove ${cidr} from allowlist`,
             onClick: () => handleRemoveCidr(cidr),
-            className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+            className: `p-2 text-muted-foreground hover:text-destructive transition-colors rounded ${focusRing7}`,
             children: /* @__PURE__ */ jsx27(Trash24, { className: "h-3 w-3" })
           }
         )
@@ -4138,11 +4259,12 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
           "input",
           {
             type: "text",
+            "aria-label": "CIDR to allow",
             placeholder: "CIDR (e.g. 10.0.0.0/8)",
             value: newCidr,
             onChange: (e) => setNewCidr(e.target.value),
             onKeyDown: (e) => e.key === "Enter" && handleAddCidr(),
-            className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `flex-1 rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField3}`
           }
         ),
         /* @__PURE__ */ jsxs24(
@@ -4166,7 +4288,8 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 // src/dashboard/backend-config.tsx
 import * as React16 from "react";
 import { Bot as Bot2, Plus as Plus7, Trash2 as Trash25, Server, Wrench } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { focusField as focusField4, focusRing as focusRing8 } from "@tangle-network/ui/utils";
+import { Fragment as Fragment14, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function BackendConfig({
   status,
   mcpServers,
@@ -4223,7 +4346,7 @@ function BackendConfig({
         ), children: status.running ? "Running" : "Stopped" }) }),
         /* @__PURE__ */ jsx28("dt", { className: "text-muted-foreground", children: "Model" }),
         /* @__PURE__ */ jsx28("dd", { className: "font-mono text-xs", children: status.model ?? "Default" }),
-        status.provider && /* @__PURE__ */ jsxs25(Fragment13, { children: [
+        status.provider && /* @__PURE__ */ jsxs25(Fragment14, { children: [
           /* @__PURE__ */ jsx28("dt", { className: "text-muted-foreground", children: "Provider" }),
           /* @__PURE__ */ jsx28("dd", { className: "font-mono text-xs", children: status.provider })
         ] })
@@ -4269,44 +4392,53 @@ function BackendConfig({
             "button",
             {
               type: "button",
+              "aria-label": `Remove ${s.name} MCP server`,
               onClick: () => onRemoveMcp(s.name),
-              className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+              className: `p-2 text-muted-foreground hover:text-destructive transition-colors rounded ${focusRing8}`,
               children: /* @__PURE__ */ jsx28(Trash25, { className: "h-3.5 w-3.5" })
             }
           )
         ] })
       ] }, s.name)) }) : /* @__PURE__ */ jsx28("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx28("p", { className: "text-xs text-muted-foreground", children: "No MCP servers configured" }) }),
       showAddMcp && /* @__PURE__ */ jsxs25("div", { className: "p-4 border-t border-[var(--md3-outline-variant)] bg-surface-container-high space-y-2", children: [
-        /* @__PURE__ */ jsx28(
-          "input",
-          {
-            type: "text",
-            placeholder: "Server name",
-            value: mcpName,
-            onChange: (e) => setMcpName(e.target.value),
-            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          }
-        ),
-        /* @__PURE__ */ jsx28(
-          "input",
-          {
-            type: "text",
-            placeholder: "Command (e.g. npx @server/mcp)",
-            value: mcpCommand,
-            onChange: (e) => setMcpCommand(e.target.value),
-            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          }
-        ),
-        /* @__PURE__ */ jsx28(
-          "input",
-          {
-            type: "text",
-            placeholder: "Arguments (space-separated, optional)",
-            value: mcpArgs,
-            onChange: (e) => setMcpArgs(e.target.value),
-            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          }
-        ),
+        /* @__PURE__ */ jsxs25("label", { className: "block space-y-1 text-xs font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx28("span", { children: "Server name" }),
+          /* @__PURE__ */ jsx28(
+            "input",
+            {
+              type: "text",
+              value: mcpName,
+              onChange: (e) => setMcpName(e.target.value),
+              className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground ${focusField4}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25("label", { className: "block space-y-1 text-xs font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx28("span", { children: "Command" }),
+          /* @__PURE__ */ jsx28(
+            "input",
+            {
+              type: "text",
+              placeholder: "npx @server/mcp",
+              value: mcpCommand,
+              onChange: (e) => setMcpCommand(e.target.value),
+              className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField4}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25("label", { className: "block space-y-1 text-xs font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx28("span", { children: "Arguments (optional)" }),
+          /* @__PURE__ */ jsx28(
+            "input",
+            {
+              type: "text",
+              placeholder: "Space-separated arguments",
+              value: mcpArgs,
+              onChange: (e) => setMcpArgs(e.target.value),
+              className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField4}`
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2 pt-1", children: [
           /* @__PURE__ */ jsx28(
             "button",
@@ -4336,6 +4468,7 @@ function BackendConfig({
 // src/dashboard/snapshot-list.tsx
 import * as React17 from "react";
 import { Camera, Clock as Clock5, HardDrive as HardDrive2, Plus as Plus8, RotateCcw } from "lucide-react";
+import { focusField as focusField5 } from "@tangle-network/ui/utils";
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (bytes == null || bytes < 0) return "-";
@@ -4385,7 +4518,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
           value: tags,
           onChange: (e) => setTags(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleCreate(),
-          className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField5}`
         }
       ),
       /* @__PURE__ */ jsxs26("div", { className: "flex justify-end gap-2", children: [
@@ -4469,7 +4602,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
 }
 
 // src/dashboard/promo-banner.tsx
-import { Fragment as Fragment14, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function PromoBanner({
   title,
   description,
@@ -4484,7 +4617,7 @@ function PromoBanner({
     "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
     disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
   );
-  const buttonContent = /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  const buttonContent = /* @__PURE__ */ jsxs27(Fragment15, { children: [
     buttonLabel,
     /* @__PURE__ */ jsxs27("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
       /* @__PURE__ */ jsx30("path", { d: "M5 12h14" }),