@xpufx/paseo-top 0.4.4 → 0.4.7

package/client/pill.tsx

@@ -7,46 +7,52 @@ import {
   useRpc,
   type PluginClientContext,
 } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
 import {
   registerComposerPill,
   registerSidebarSurface,
-  type ComposerPillRegistrar,
+  triggerHaptic,
   type SidebarSurfaceRegistrar,
   type PillLiveContext,
   type RegisterComposerPillOptions,
-  ModalBody,
-  Card,
-  CardHeader,
-  Button,
-  Row,
-  KeyValue,
-  KeyValueGroup,
-  ProgressBar,
-  MetricGauge,
-  Tabs,
-  Toggle,
-  Badge,
-  Icon,
-  AboutSection,
-  CustomPillModalContent,
+  type RenderModalProps,
+} from "./vendor/paseo-plugin-helper/lifecycle/index";
+import {
+  getClientHost,
   useRpcQuery,
   usePluginSettings,
-  usePluginTheme,
-  getStatusColor,
-  triggerHaptic,
+  type ComposerPillRegistrar,
   type HostPillProps,
-  type RenderModalProps,
-  type KeyValueProps,
-  type CardHeaderProps,
-  type BadgeProps,
-} from "./vendor/paseo-plugin-helper/index";
+} from "./vendor/paseo-plugin-helper/core/index";
+import {
+  HostAboutSection,
+  HostBadge,
+  HostButton,
+  HostCard,
+  HostCardHeader,
+  HostCopyButton,
+  HostKeyValue,
+  HostLayoutProvider,
+  HostMetricGauge,
+  HostModalSection,
+  HostProgressBar,
+  HostRow,
+  HostStack,
+  HostTabs,
+  HostThemeProvider,
+  HostToggle,
+  getStatusColor,
+  useHostLayout,
+  useHostTheme,
+} from "./host-ui";
 import {
   formatBytes,
   formatUptime,
   resolveMetricStatus,
   type MetricThresholds,
+  type ThemeColors,
 } from "../shared/vendor/paseo-plugin-helper/index";
-import { PermissionAuditView } from "permission-audit/client";
+import { PermissionAuditView } from "./vendor/permission-audit";
 import {
   getSystemResourcesRpc,
   topSettingsContract,
@@ -54,14 +60,18 @@ import {
   listCustomPillsRpc,
   runCustomPillModalCommandRpc,
   isPillEnabled,
-  isProviderDependent,
+  isTimelineEnabled,
   legacyFlagView,
   isMcpSurfaceEnabled,
   customPillEffectiveEnabled,
   METRIC_DEFINITIONS,
   DEFAULT_METRIC_SURFACES,
-  checkboxesFromTarget,
   targetFromCheckboxes,
+  CPU_THRESHOLDS,
+  MEM_THRESHOLDS,
+  MODAL_TABS,
+  aboutExtraItems,
+  hasAnyLegacyPillFlagEnabled,
   type SystemResources,
   type TopSettings,
   type CustomPillStateOutput,
@@ -72,7 +82,7 @@ import { PLUGIN_VERSION } from "../shared/version";
 import { TopDashboardSurface } from "./surface";
 import { addSettingsListener, removeSettingsListener, notifySettingsChanged } from "./settings-events";
 import { useTopResourceQuery, useCustomPillsQuery } from "./resources-query";
-import { ChoiceChips } from "./settings-ui";
+import { ChoiceChips, MultiChoiceChips } from "./settings-ui";
 import {
   buildAllLabel,
   describeSegment,
@@ -90,6 +100,11 @@ import {
 
 const EMPTY_PARAMS = {};
 
+const TIMELINE_CADENCE_OPTIONS = Array.from({ length: 11 }, (_, n) => ({
+  id: n,
+  label: n === 0 ? "Never" : n === 1 ? "Every turn" : `${n}`,
+}));
+
 function formatWorktreeLocation(dir: string | null | undefined): string {
   if (!dir) return "";
   // Check for Paseo-managed worktree: ~/.paseo/worktrees/<hash>/<slug>
@@ -133,25 +148,9 @@ function formatIdleDuration(isoString: string | null | undefined): string {
   return `${days}d ${hours % 24}h`;
 }
 
-const CPU_THRESHOLDS: MetricThresholds = { warning: 60, danger: 85 };
-const MEM_THRESHOLDS: MetricThresholds = { warning: 70, danger: 85 };
-
-const TABS = [
-  { id: "system", label: "System", shortLabel: "System", icon: "Activity" },
-  { id: "context", label: "Workspace", shortLabel: "Workspace", icon: "GitBranch" },
-  { id: "permissions", label: "Permissions", shortLabel: "Permissions", icon: "ShieldCheck" },
-  { id: "settings", label: "Settings", shortLabel: "Settings", icon: "Sliders" },
-  { id: "about", label: "About", shortLabel: "About", icon: "Info" },
-];
-
-const TIMELINE_CADENCE_OPTIONS = Array.from({ length: 11 }, (_, n) => ({
-  id: n,
-  label: n === 0 ? "Never" : n === 1 ? "Every turn" : `${n}`,
-}));
-
 function getMetricColors(
   data: SystemResources | undefined,
-  colors: ReturnType<typeof usePluginTheme>["colors"],
+  colors: ThemeColors,
 ) {
   if (
     !data ||
@@ -189,6 +188,7 @@ export function getItemTab(item: PillItemType): "system" | "context" {
     case "tokens":
     case "tools":
     case "turns":
+    case "velocity":
       return "system";
     case "branch":
     case "worktree":
@@ -203,28 +203,15 @@ export function getItemTab(item: PillItemType): "system" | "context" {
 
 const currentCycleTabByAgent = new Map<string, ModalTab>();
 
-// The 0.8 host popover is a narrow column, so every helper text component in
-// the modal path renders through these compact wrappers (2-3pt under helper
-// defaults). Call-site props still win via spread order.
-function CompactKeyValue(props: KeyValueProps) {
-  return (
-    <KeyValue
-      labelStyle={styles.compactKvLabel}
-      valueStyle={styles.compactKvValue}
-      {...props}
-    />
-  );
-}
-
-function CompactCardHeader(props: CardHeaderProps) {
-  return (
-    <CardHeader titleStyle={styles.compactCardTitle} {...props} />
-  );
-}
-
-function CompactBadge(props: BadgeProps) {
-  return <Badge textStyle={styles.compactBadgeText} {...props} />;
-}
+// The 0.8 host popover is a narrow column, so modal-path text renders a few
+// points under the ui/ adapter defaults. These spread props apply that
+// compact rhythm at each call site.
+const compactKvProps = {
+  labelStyle: { fontSize: 9 },
+  valueStyle: { fontSize: 10 },
+} as const;
+const compactCardTitleProp = { titleStyle: { fontSize: 11 } } as const;
+const compactBadgeProp = { textStyle: { fontSize: 9 } } as const;
 
 interface LiveSnapshot extends SegmentSnapshot {
   workspaceDirectory?: string | null;
@@ -352,7 +339,16 @@ async function customPillSnapshot(): Promise<CustomPillStateOutput[]> {
  * per-metric pills, custom metric pills) so the presentation model cannot
  * diverge: all are centered surfaces with a pinned popover width. Call sites
  * only describe what is pill-specific.
+ *
+ * `onError` is wired here once for every variant: the helper reports
+ * registration and resolveLabel failures through `options.onError` in addition
+ * to its own console warning, so without this default a failing pill RPC left
+ * the pill missing with no trace outside the helper log. The toast is
+ * throttled per pill+agent so a persistently failing RPC cannot spam the host.
  */
+const PILL_ERROR_TOAST_THROTTLE_MS = 60_000;
+const lastPillErrorToastAt = new Map<string, number>();
+
 function registerTopPill(
   client: ComposerPillRegistrar | PluginClientContext,
   options: Omit<RegisterComposerPillOptions<ModalTab>, "presentation" | "popoverWidth"> & {
@@ -362,8 +358,29 @@ function registerTopPill(
 ) {
   return registerComposerPill<ModalTab>(client as ComposerPillRegistrar, {
     popoverWidth: 360,
+    // The host `<Modal.Content scrollable>` is the one scroll owner (#219,
+    // #975, #1054); the plugin body renders fluid content with no nested
+    // scroller so the host owns the mobile gesture.
+    hostScroll: true,
     ...options,
     presentation: options.presentation ?? "centered",
+    onError:
+      options.onError ??
+      (({ agentId, workspaceId, error }) => {
+        console.error(
+          `[top] pill "${options.id}" failed (agent ${agentId}, workspace ${workspaceId}): ${error.message}`,
+        );
+        const key = `${options.id}:${agentId}`;
+        const now = Date.now();
+        if (now - (lastPillErrorToastAt.get(key) ?? 0) >= PILL_ERROR_TOAST_THROTTLE_MS) {
+          lastPillErrorToastAt.set(key, now);
+          try {
+            getClientHost().useToast().error?.(`top pill failed: ${error.message}`);
+          } catch {
+            // No host toast wired; the console error above is the trace.
+          }
+        }
+      }),
   });
 }
 
@@ -390,7 +407,7 @@ function PillItemContent({
   worktreeLocationText,
   isOpen,
 }: PillItemContentProps) {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   const { cpuColor, memColor } = getMetricColors(data, colors);
   const descriptor = describeSegment(item, { data, agent, agentId, worktreeLocationText });
   const toneColor = (tone: SegmentTone): string => {
@@ -415,7 +432,7 @@ function PillItemContent({
   };
 
   return (
-    <Row gap={4} align="center" style={styles.pillContainer}>
+    <HostRow gap={4} align="center" style={styles.pillContainer}>
       {descriptor.iconTone !== "none" ? (
         <Icon name={descriptor.icon} size={12} color={toneColor(descriptor.iconTone)} />
       ) : null}
@@ -444,7 +461,7 @@ function PillItemContent({
           </Text>
         ) : null}
       </Text>
-    </Row>
+    </HostRow>
   );
 }
 
@@ -452,19 +469,19 @@ export { notifySettingsChanged } from "./settings-events";
 type SettingsListener = import("./settings-events").SettingsListener;
 
 function PillOffline() {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   return (
-    <Row gap={4} align="center" style={styles.pillContainer}>
+    <HostRow gap={4} align="center" style={styles.pillContainer}>
       <Icon name="Ghost" size={13} color={colors.statusDanger} />
       <Text numberOfLines={1} style={[styles.pillText, { color: colors.foregroundMuted }]}>
         Offline
       </Text>
-    </Row>
+    </HostRow>
   );
 }
 
 function PillLoading() {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   return (
     <Text numberOfLines={1} style={[styles.pillText, { color: colors.foregroundMuted }]}>
       top...
@@ -473,19 +490,19 @@ function PillLoading() {
 }
 
 function PillEmpty() {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   return (
-    <Row gap={4} align="center" style={styles.pillContainer}>
+    <HostRow gap={4} align="center" style={styles.pillContainer}>
       <Icon name="Activity" size={12} color={colors.accent} />
       <Text numberOfLines={1} style={[styles.pillText, { color: colors.foregroundMuted }]}>
         top
       </Text>
-    </Row>
+    </HostRow>
   );
 }
 
 function McpLoadingPill() {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   return (
     <Text numberOfLines={1} style={[styles.pillText, { color: colors.foregroundMuted }]}>
       MCP…
@@ -543,9 +560,9 @@ function AllInOnePill({
   worktreeLocationText,
   isOpen,
 }: AllInOnePillProps) {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   return (
-    <Row gap={6} align="center" style={styles.allInOneContainer}>
+    <HostRow gap={6} align="center" style={styles.allInOneContainer}>
       {items.map((item, idx) => (
         <React.Fragment key={item}>
           {idx > 0 && (
@@ -561,7 +578,7 @@ function AllInOnePill({
           />
         </React.Fragment>
       ))}
-    </Row>
+    </HostRow>
   );
 }
 
@@ -584,7 +601,18 @@ export interface SingleItemPillViewProps extends PillBodyProps {
   defaultTab?: ModalTab;
 }
 
-export function SingleItemPillView({
+export function SingleItemPillView(props: SingleItemPillViewProps) {
+  // Legacy pill body view (see PillBodyProps): kept for the #507 render
+  // regression tests. The host theme prop flows through HostThemeProvider so
+  // the ui/ adapters inside resolve real host colors.
+  return (
+    <HostThemeProvider theme={props.theme}>
+      <SingleItemPillViewBody {...props} />
+    </HostThemeProvider>
+  );
+}
+
+function SingleItemPillViewBody({
   item,
   workspaceId,
   agentId,
@@ -664,7 +692,18 @@ export function SingleItemPillView({
   );
 }
 
-function PillView({ isOpen, open, workspaceId, agentId }: PillBodyProps) {
+function PillView(props: PillBodyProps) {
+  // Legacy pill body view (see PillBodyProps): kept for the #507 render
+  // regression tests. The host theme prop flows through HostThemeProvider so
+  // the ui/ adapters inside resolve real host colors.
+  return (
+    <HostThemeProvider theme={props.theme}>
+      <PillViewBody {...props} />
+    </HostThemeProvider>
+  );
+}
+
+function PillViewBody({ isOpen, open, workspaceId, agentId }: PillBodyProps) {
   // No background settings poll here: the hook re-verifies on mount and
   // window focus, and mutations invalidate the shared settings cache.
   // Polling from every mounted pill/modal/surface multiplied daemon reads
@@ -686,18 +725,7 @@ function PillView({ isOpen, open, workspaceId, agentId }: PillBodyProps) {
     lastUsage: a?.lastUsage,
   }));
 
-  const hasAnyEnabled =
-    flags.showCpuRam ||
-    flags.showBranch ||
-    flags.showWorktree ||
-    flags.showAgentTitle ||
-    flags.showAgent ||
-    flags.showAgentProvider ||
-    flags.showAgentActivity ||
-    flags.showAgentId ||
-    flags.showLoad ||
-    flags.showUptime ||
-    (flags.showMcp);
+  const hasAnyEnabled = hasAnyLegacyPillFlagEnabled(flags) || flags.showMcp;
 
   // If no items are selected, fallback to CPU & RAM without mutating saved settings
   const effectiveShowCpuRam = flags.showCpuRam || !hasAnyEnabled;
@@ -784,6 +812,9 @@ function PillView({ isOpen, open, workspaceId, agentId }: PillBodyProps) {
   if (settings.metricSurfaces && isPillEnabled(settings.metricSurfaces.turns)) {
     items.push("turns");
   }
+  if (settings.metricSurfaces && isPillEnabled(settings.metricSurfaces.velocity)) {
+    items.push("velocity");
+  }
 
   // Legacy render fallback only. On the supported 0.8 host the pill is
   // host-rendered from `resolveLabel`, which advances the cycle on the shared
@@ -839,12 +870,11 @@ interface ResourceModalProps extends RenderModalProps<ModalTab> {
   initialTab?: ModalTab;
 }
 
-function MetricSurfaceMatrix({
+function MetricPillSelector({
   settings,
   updateSettings,
   notifySettingsChanged,
   mcpInstalled,
-  mcpRunning,
   customPills,
   customOverrides,
   onCustomToggle,
@@ -853,141 +883,119 @@ function MetricSurfaceMatrix({
   updateSettings: (updates: Partial<TopSettings>) => void;
   notifySettingsChanged: (s: TopSettings) => void;
   mcpInstalled: boolean;
-  mcpRunning?: boolean | null;
   customPills: Array<{ id: string; title: string; sourceFile?: string; enabled: boolean }>;
   customOverrides: Record<string, boolean> | undefined;
   onCustomToggle: (id: string, val: boolean) => void;
 }) {
-  const { colors, isCompact } = usePluginTheme();
+  const { colors } = useHostTheme();
   const surfaces = settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES;
-  const provisioned = new Set(settings.provisionedMetrics ?? []);
-  const matrixRowMinHeight = isCompact ? 44 : 32;
-  const setTarget = (id: MetricId, target: SurfaceTarget) => {
-    const next = { ...surfaces, [id]: target };
-    const s = { ...settings, metricSurfaces: next };
+  const masterOn = settings.showCustomPills ?? true;
+
+  const builtInOptions = METRIC_DEFINITIONS.map((def) => ({
+    id: def.id,
+    label: def.title,
+    icon: def.icon,
+    disabled: def.id === "mcp" && !mcpInstalled,
+  }));
+
+  const selectedBuiltIns = METRIC_DEFINITIONS
+    .filter((def) => isPillEnabled(surfaces[def.id]))
+    .map((def) => def.id);
+
+  const toggleMetric = (metricId: MetricId) => {
+    triggerHaptic("light");
+    const currentPill = isPillEnabled(surfaces[metricId]);
+    const currentTimeline = isTimelineEnabled(surfaces[metricId]);
+    const next = {
+      ...surfaces,
+      [metricId]: targetFromCheckboxes(!currentPill, currentTimeline),
+    };
+    const nextSettings = { ...settings, metricSurfaces: next };
+    updateSettings({ metricSurfaces: next });
+    notifySettingsChanged(nextSettings);
+  };
+
+  const selectAll = () => {
+    triggerHaptic("medium");
+    const next = { ...surfaces };
+    for (const def of METRIC_DEFINITIONS) {
+      if (def.id === "mcp" && !mcpInstalled) continue;
+      const currentTimeline = isTimelineEnabled(surfaces[def.id]);
+      next[def.id] = targetFromCheckboxes(true, currentTimeline);
+    }
+    const nextSettings = { ...settings, metricSurfaces: next };
+    updateSettings({ metricSurfaces: next });
+    notifySettingsChanged(nextSettings);
+  };
+
+  const clearAll = () => {
+    triggerHaptic("medium");
+    const next = { ...surfaces };
+    for (const def of METRIC_DEFINITIONS) {
+      const currentTimeline = isTimelineEnabled(surfaces[def.id]);
+      next[def.id] = targetFromCheckboxes(false, currentTimeline);
+    }
+    const nextSettings = { ...settings, metricSurfaces: next };
     updateSettings({ metricSurfaces: next });
-    notifySettingsChanged(s);
+    notifySettingsChanged(nextSettings);
   };
+
   return (
-    <View style={[styles.metricMatrix, isCompact && styles.metricMatrixCompact]}>
-      <View style={[styles.metricMatrixHeader, isCompact && styles.metricMatrixHeaderCompact]}>
-        <Text style={[styles.metricMatrixHeaderText, { color: colors.foregroundMuted }]}>
-          Metric
-        </Text>
-        <View style={[styles.metricMatrixTargetHeader, isCompact && styles.metricMatrixTargetHeaderCompact]}>
-          <Text style={[styles.metricMatrixHeaderText, { color: colors.foregroundMuted }]}>
-            Pill
-          </Text>
-          <Text style={[styles.metricMatrixHeaderText, { color: colors.foregroundMuted }]}>
-            Timeline
+    <HostStack gap={10}>
+      <MultiChoiceChips
+        options={builtInOptions}
+        selected={selectedBuiltIns}
+        onToggle={toggleMetric}
+        onSelectAll={selectAll}
+        onClearAll={clearAll}
+      />
+      {customPills.length > 0 && (
+        <HostStack gap={6}>
+          <Text style={{ fontSize: 10, fontWeight: "600", color: colors.foregroundMuted }}>
+            Custom Metric Pills
           </Text>
-        </View>
-      </View>
-      {METRIC_DEFINITIONS.map((def, index) => {
-        const boxes = checkboxesFromTarget(surfaces[def.id]);
-        const unprovisioned =
-          isProviderDependent(def.id) && !provisioned.has(def.id);
-        const timelineDisabled = !!def.pillOnly;
-        const disabled = def.id === "mcp" && !mcpInstalled;
-        const note =
-          def.pillOnly
-            ? "live only"
-            : def.id === "mcp" && !mcpInstalled
-              ? "mcp-tools not installed"
-              : def.id === "mcp" && mcpRunning === false
-                ? "mcp-tools disabled"
-                : unprovisioned
-                  ? "waiting for provider"
-                  : null;
-        const setBox = (which: "pill" | "timeline", val: boolean) => {
-          const nextBoxes = { ...boxes, [which]: val };
-          if (def.pillOnly) nextBoxes.timeline = false;
-          setTarget(
-            def.id,
-            targetFromCheckboxes(nextBoxes.pill, nextBoxes.timeline),
-          );
-        };
-        return (
-          <View
-            key={def.id}
-            style={[
-              styles.metricMatrixRow,
-              isCompact && styles.metricMatrixRowCompact,
-              { minHeight: matrixRowMinHeight },
-              index < METRIC_DEFINITIONS.length - 1
-                ? {
-                    borderBottomWidth: 1,
-                    borderBottomColor: colors.border,
-                  }
-                : undefined,
-            ]}
-          >
-            <View style={styles.metricMatrixLabel}>
-              <Text style={[styles.metricMatrixTitle, { color: colors.foreground }]}>
-                {def.title}
-              </Text>
-              {note ? (
-                <Text style={[styles.metricMatrixNote, { color: colors.foregroundMuted }]}>
-                  {note}
-                </Text>
-              ) : null}
-            </View>
-            <View style={[styles.metricMatrixTargets, isCompact && styles.metricMatrixTargetsCompact]}>
-              <Toggle
-                value={boxes.pill}
-                disabled={disabled}
-                onValueChange={(val) => setBox("pill", val)}
-                style={styles.matrixToggle}
-              />
-              <Toggle
-                value={boxes.timeline && !def.pillOnly}
-                disabled={disabled || timelineDisabled}
-                onValueChange={(val) => setBox("timeline", val)}
-                style={styles.matrixToggle}
-              />
-            </View>
-          </View>
-        );
-      })}
-      {customPills.map((pill) => {
-        const masterOn = settings.showCustomPills ?? true;
-        const enabled = customPillEffectiveEnabled(masterOn, customOverrides, pill);
-        return (
-          <View
-            key={`custom-${pill.id}`}
-            style={styles.metricMatrixRow}
-          >
-            <View style={styles.metricMatrixLabel}>
-              <Text style={[styles.metricMatrixTitle, { color: colors.foreground }]}>
-                {pill.title}
-              </Text>
-              <Text style={[styles.metricMatrixNote, { color: colors.foregroundMuted }]}>
-                custom pill
-              </Text>
-            </View>
-            <View style={[styles.metricMatrixTargets, isCompact && styles.metricMatrixTargetsCompact]}>
-              <Toggle
-                value={enabled}
-                disabled={!masterOn}
-                onValueChange={(val) => onCustomToggle(pill.id, val)}
-                style={styles.matrixToggle}
-              />
-              <Toggle
-                value={false}
-                disabled={true}
-                onValueChange={() => {}}
-                style={styles.matrixToggle}
-              />
-            </View>
-          </View>
-        );
-      })}
-    </View>
+          <MultiChoiceChips
+            options={customPills.map((pill) => ({
+              id: pill.id,
+              label: pill.title,
+              icon: "Sliders",
+              disabled: !masterOn,
+            }))}
+            selected={customPills
+              .filter((pill) => customPillEffectiveEnabled(masterOn, customOverrides, pill))
+              .map((pill) => pill.id)}
+            onToggle={(pillId) => {
+              triggerHaptic("light");
+              const pill = customPills.find((p) => p.id === pillId);
+              if (!pill) return;
+              const current = customPillEffectiveEnabled(masterOn, customOverrides, pill);
+              onCustomToggle(pillId, !current);
+            }}
+          />
+        </HostStack>
+      )}
+    </HostStack>
   );
 }
 
-function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: ResourceModalProps) {
-  const { colors, padding } = usePluginTheme();
+function ResourceModal(props: ResourceModalProps) {
+  return (
+    <HostThemeProvider theme={props.theme}>
+      <HostLayoutProvider layout={props.layout}>
+        <ResourceModalBody {...props} />
+      </HostLayoutProvider>
+    </HostThemeProvider>
+  );
+}
+
+function ResourceModalBody({ workspaceId, agentId, initialTab, payload, theme, layout }: ResourceModalProps) {
+  const { colors } = useHostTheme();
+  const { compact } = useHostLayout();
+  // Host-density padding rhythm (the helper's "comfortable" scale): the host
+  // owns density now, so the modal keeps the same numeric values locally.
+  const padding = compact
+    ? { horizontal: 12, vertical: 10, gap: 8 }
+    : { horizontal: 16, vertical: 14, gap: 12 };
   // Settings re-verify on mount/focus via hook defaults; the settings tab
   // refetches explicitly below. No background poll: the modal only lives
   // while open. Custom-pill definitions are a separate data source and keep
@@ -1063,18 +1071,7 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
     });
   }, [agentId, data, agent, workspace?.directory]);
 
-  const hasAnyPillEnabled =
-    flags.showCpuRam ||
-    flags.showBranch ||
-    flags.showWorktree ||
-    flags.showAgentTitle ||
-    flags.showAgent ||
-    flags.showAgentProvider ||
-    flags.showAgentActivity ||
-    flags.showAgentId ||
-    flags.showLoad ||
-    flags.showUptime ||
-    isMcpEnabled;
+  const hasAnyPillEnabled = hasAnyLegacyPillFlagEnabled(flags) || isMcpEnabled;
 
   const handleRefresh = () => {
     triggerHaptic("light");
@@ -1088,8 +1085,8 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
   };
 
   const navbar = (
-    <Tabs
-      tabs={TABS}
+    <HostTabs
+      tabs={[...MODAL_TABS]}
       activeTab={activeTab}
       onTabChange={handleTabChange}
     />
@@ -1099,235 +1096,251 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
     paddingHorizontal: padding.horizontal,
     paddingTop: padding.vertical,
     paddingBottom: Math.round(padding.gap / 2),
-  };
+    position: "sticky" as const,
+    top: 0,
+    zIndex: 10,
+  } as any;
 
   if (isError && !data) {
     return (
-      <ModalBody
-        style={{ backgroundColor: colors.surface0 }}
-        headerMode="pinned"
-        scrollMode="always"
-        refreshing={isRefetching}
-        onRefresh={handleRefresh}
-        header={navbar}
-        headerStyle={navbarStyle}
-        contentContainerStyle={[{ paddingTop: Math.round(padding.gap / 2) }]}
-      >
-        <Card variant="elevated">
-          <View style={styles.errorBox}>
-            <Icon name="Ghost" size={24} color={colors.statusDanger} />
-            <Text style={[styles.errorText, { color: colors.statusDanger }]}>
-              {error instanceof Error ? error.message : "Failed to load metrics"}
-            </Text>
+      <HostModalSection>
+        <View style={styles.modalColumn}>
+          <View style={navbarStyle}>{navbar}</View>
+          <View style={styles.modalContent}>
+            <HostCard variant="elevated">
+              <View style={styles.errorBox}>
+                <Icon name="Ghost" size={24} color={colors.statusDanger} />
+                <Text style={[styles.errorText, { color: colors.statusDanger }]}>
+                  {error instanceof Error ? error.message : "Failed to load metrics"}
+                </Text>
+              </View>
+            </HostCard>
           </View>
-        </Card>
-      </ModalBody>
+        </View>
+      </HostModalSection>
     );
   }
 
   const { cpuColor, memColor } = getMetricColors(data, colors);
 
   return (
-    <ModalBody
-      style={{ backgroundColor: colors.surface0 }}
-      headerMode="pinned"
-      scrollMode="always"
-      refreshing={isLoading || isRefetching}
-      onRefresh={handleRefresh}
-      header={navbar}
-      headerStyle={navbarStyle}
-      contentContainerStyle={[
-        { paddingTop: Math.round(padding.gap / 2) },
-      ]}
-    >
-      {activeTab === "system" && (
-      <>
-        {/* Dual Metric Gauges Hero */}
-        <Card variant="elevated">
-          <View style={styles.gaugeContainer}>
-            <MetricGauge
-              value={data?.cpuUsagePercent ?? 0}
-              thresholds={CPU_THRESHOLDS}
-              label="CPU Load"
-              size={72}
-            />
-            <MetricGauge
-              value={data?.memoryUsedPercent ?? 0}
-              thresholds={MEM_THRESHOLDS}
-              label="RAM Used"
-              size={72}
-            />
-          </View>
-        </Card>
-
-        {/* Host Meta Card */}
-        <Card variant="elevated">
-          <KeyValueGroup columns={1}>
-            <CompactKeyValue label="Host" value={data?.hostname ?? "Unknown"} copyable />
-            <CompactKeyValue
-              label="Uptime"
-              value={data?.uptimeSeconds ? formatUptime(data?.uptimeSeconds) : "--"}
-            />
-          </KeyValueGroup>
-          <CompactKeyValue
-            label="Processor"
-            value={data?.cpuModel ?? "--"}
-            subValue={data?.cpuCores ? `(${data?.cpuCores} cores)` : undefined}
-          />
-        </Card>
-
-        {/* CPU Utilization Card */}
-        <Card variant="elevated">
-          <CompactCardHeader
-            title="CPU Details"
-            value={
-              <Text style={[styles.metricHighlight, { color: cpuColor }]}>
-                {data?.cpuUsagePercent ?? 0}%
-              </Text>
-            }
-          />
-
-          <ProgressBar
-            value={data?.cpuUsagePercent ?? 0}
-            thresholds={CPU_THRESHOLDS}
-            height={8}
-          />
+    <HostModalSection>
+      <View style={styles.modalColumn}>
+        <View style={navbarStyle}>{navbar}</View>
+        <View style={styles.modalContent}>
+          {activeTab === "system" && (
+            <>
+              {/* Dual Metric Gauges Hero */}
+              <HostCard variant="elevated">
+                <HostRow justify="between" align="center" style={styles.gaugeContainer}>
+                  <HostMetricGauge
+                    value={data?.cpuUsagePercent ?? 0}
+                    thresholds={CPU_THRESHOLDS}
+                    label="CPU Load"
+                    size={72}
+                  />
+                  <HostMetricGauge
+                    value={data?.memoryUsedPercent ?? 0}
+                    thresholds={MEM_THRESHOLDS}
+                    label="RAM Used"
+                    size={72}
+                  />
+                </HostRow>
+              </HostCard>
+
+              {/* Host Meta Card */}
+              <HostCard variant="elevated">
+                <HostStack gap={12}>
+                  <HostKeyValue
+                    label="Host"
+                    value={data?.hostname ?? "Unknown"}
+                    copyable
+                    {...compactKvProps}
+                  />
+                  <HostKeyValue
+                    label="Uptime"
+                    value={data?.uptimeSeconds ? formatUptime(data?.uptimeSeconds) : "--"}
+                    {...compactKvProps}
+                  />
+                </HostStack>
+                <HostKeyValue
+                  label="Processor"
+                  value={data?.cpuModel ?? "--"}
+                  subValue={data?.cpuCores ? `(${data?.cpuCores} cores)` : undefined}
+                  {...compactKvProps}
+                />
+              </HostCard>
+
+              {/* CPU Utilization Card */}
+              <HostCard variant="elevated">
+                <HostCardHeader
+                  title="CPU Details"
+                  {...compactCardTitleProp}
+                  value={
+                    <Text style={[styles.metricHighlight, { color: cpuColor }]}>
+                      {data?.cpuUsagePercent ?? 0}%
+                    </Text>
+                  }
+                />
 
-          <CompactKeyValue
-            label="Load Average (1m, 5m, 15m)"
-            value={data?.loadAvg ? data?.loadAvg.map((n) => n.toFixed(2)).join("  ") : "--  --  --"}
-            mono
-          />
-        </Card>
+                <HostProgressBar
+                  value={data?.cpuUsagePercent ?? 0}
+                  thresholds={CPU_THRESHOLDS}
+                  height={8}
+                />
 
-        {/* Memory Card */}
-        <Card variant="elevated">
-          <CompactCardHeader
-            title="Memory Details"
-            value={
-              <Text style={[styles.metricHighlight, { color: memColor }]}>
-                {data?.memoryUsedPercent ?? 0}%
-              </Text>
-            }
-          />
+                <HostKeyValue
+                  label="Load Average (1m, 5m, 15m)"
+                  value={data?.loadAvg ? data?.loadAvg.map((n) => n.toFixed(2)).join("  ") : "--  --  --"}
+                  mono
+                  {...compactKvProps}
+                />
+              </HostCard>
+
+              {/* Memory Card */}
+              <HostCard variant="elevated">
+                <HostCardHeader
+                  title="Memory Details"
+                  {...compactCardTitleProp}
+                  value={
+                    <Text style={[styles.metricHighlight, { color: memColor }]}>
+                      {data?.memoryUsedPercent ?? 0}%
+                    </Text>
+                  }
+                />
 
-          <ProgressBar
-            value={data?.memoryUsedPercent ?? 0}
-            thresholds={MEM_THRESHOLDS}
-            height={8}
-          />
+                <HostProgressBar
+                  value={data?.memoryUsedPercent ?? 0}
+                  thresholds={MEM_THRESHOLDS}
+                  height={8}
+                />
 
-          <CompactKeyValue
-            label="Used / Total"
-            value={`${formatBytes(data?.memoryUsedBytes ?? 0)} / ${formatBytes(data?.memoryTotalBytes ?? 0)}`}
-          />
-        </Card>
-
-        {/* MCP Servers Card */}
-        {Boolean(data?.mcpInstalled) && (
-          <Card variant="elevated">
-            <CompactCardHeader
-              title="MCP Servers"
-              subtitle="Source: paseo-mcp-tools"
-              icon="Server"
-              value={
-                data?.mcp ? (
-                  <CompactBadge
-                    label={data?.mcp.isStale ? "Stale Snapshot" : "Live"}
-                    variant={data?.mcp.isStale ? "warning" : "success"}
-                    dot
+                <HostKeyValue
+                  label="Used / Total"
+                  value={`${formatBytes(data?.memoryUsedBytes ?? 0)} / ${formatBytes(data?.memoryTotalBytes ?? 0)}`}
+                  {...compactKvProps}
+                />
+              </HostCard>
+
+              {/* MCP Servers Card */}
+              {Boolean(data?.mcpInstalled) && (
+                <HostCard variant="elevated">
+                  <HostCardHeader
+                    title="MCP Servers"
+                    subtitle="Source: paseo-mcp-tools"
+                    icon="Server"
+                    {...compactCardTitleProp}
+                    value={
+                      data?.mcp ? (
+                        <HostBadge
+                          label={data?.mcp.isStale ? "Stale Snapshot" : "Live"}
+                          variant={data?.mcp.isStale ? "warning" : "success"}
+                          dot
+                          {...compactBadgeProp}
+                        />
+                      ) : (
+                        <HostBadge
+                          label="No Data"
+                          variant="neutral"
+                          {...compactBadgeProp}
+                        />
+                      )
+                    }
                   />
-                ) : (
-                  <CompactBadge label="No Data" variant="neutral" />
-                )
-              }
-            />
 
-            {data?.mcp ? (
-              <>
-                <KeyValueGroup columns={1}>
-                  <CompactKeyValue
-                    label="Health"
-                    value={`${data?.mcp.healthy} healthy / ${data?.mcp.total} total`}
-                  />
-                  <CompactKeyValue
-                    label="Snapshot Updated"
-                    value={formatTimeAgo(data?.mcp.updatedAt)}
-                  />
-                  <CompactKeyValue
-                    label="Data Provider"
-                    value="paseo-mcp-tools"
-                  />
-                </KeyValueGroup>
-
-                {data?.mcp.servers && data?.mcp.servers.length > 0 ? (
-                  <View style={styles.mcpList}>
-                    {data?.mcp.servers.map((srv) => {
-                      const badgeVariant: "success" | "warning" | "danger" | "neutral" =
-                        srv.status === "healthy"
-                          ? "success"
-                          : srv.status === "degraded"
-                            ? "warning"
-                            : srv.status === "down"
-                              ? "danger"
-                              : "neutral";
-                      return (
-                        <View key={srv.name} style={styles.mcpRow}>
-                          <View style={styles.mcpInfo}>
-                            <Text
-                              numberOfLines={1}
-                              style={[styles.mcpName, { color: colors.foreground }]}
-                            >
-                              {srv.name}
-                            </Text>
-                            <Text style={[styles.mcpLatency, { color: colors.foregroundMuted }]}>
-                              {srv.latencyMs >= 0 ? `${srv.latencyMs}ms` : "timeout"}
-                            </Text>
-                          </View>
-                          <CompactBadge label={srv.status} variant={badgeVariant} />
+                  {data?.mcp ? (
+                    <>
+                      <HostStack gap={12}>
+                        <HostKeyValue
+                          label="Health"
+                          value={`${data?.mcp.healthy} healthy / ${data?.mcp.total} total`}
+                          {...compactKvProps}
+                        />
+                        <HostKeyValue
+                          label="Snapshot Updated"
+                          value={formatTimeAgo(data?.mcp.updatedAt)}
+                          {...compactKvProps}
+                        />
+                        <HostKeyValue
+                          label="Data Provider"
+                          value="paseo-mcp-tools"
+                          {...compactKvProps}
+                        />
+                      </HostStack>
+
+                      {data?.mcp.servers && data?.mcp.servers.length > 0 ? (
+                        <View style={styles.mcpList}>
+                          {data?.mcp.servers.map((srv) => {
+                            const badgeVariant: "success" | "warning" | "danger" | "neutral" =
+                              srv.status === "healthy"
+                                ? "success"
+                                : srv.status === "degraded"
+                                  ? "warning"
+                                  : srv.status === "down"
+                                    ? "danger"
+                                    : "neutral";
+                            return (
+                              <HostRow
+                                key={srv.name}
+                                justify="between"
+                                align="center"
+                                style={styles.mcpRow}
+                              >
+                                <HostRow gap={8} align="center" style={styles.mcpInfo}>
+                                  <Text
+                                    numberOfLines={1}
+                                    style={[styles.mcpName, { color: colors.foreground }]}
+                                  >
+                                    {srv.name}
+                                  </Text>
+                                  <Text style={[styles.mcpLatency, { color: colors.foregroundMuted }]}>
+                                    {srv.latencyMs >= 0 ? `${srv.latencyMs}ms` : "timeout"}
+                                  </Text>
+                                </HostRow>
+                                <HostBadge {...compactBadgeProp} label={srv.status} variant={badgeVariant} />
+                              </HostRow>
+                            );
+                          })}
                         </View>
-                      );
-                    })}
-                  </View>
-                ) : (
-                  <Text style={[styles.mcpEmpty, { color: colors.foregroundMuted }]}>
-                    No MCP servers configured
-                  </Text>
-                )}
-              </>
-            ) : (
-              <Text style={[styles.mcpEmpty, { color: colors.foregroundMuted }]}>
-                Waiting for status snapshot from paseo-mcp-tools...
-              </Text>
-            )}
-          </Card>
-        )}
+                      ) : (
+                        <Text style={[styles.mcpEmpty, { color: colors.foregroundMuted }]}>
+                          No MCP servers configured
+                        </Text>
+                      )}
+                    </>
+                  ) : (
+                    <Text style={[styles.mcpEmpty, { color: colors.foregroundMuted }]}>
+                      Waiting for status snapshot from paseo-mcp-tools...
+                    </Text>
+                  )}
+                </HostCard>
+              )}
 
         {/* Custom Metric Pills Card */}
         {Boolean(data?.customPills && data?.customPills.length > 0) && (
-          <Card variant="elevated">
-            <CompactCardHeader
+          <HostCard variant="elevated">
+            <HostCardHeader {...compactCardTitleProp}
               title="Custom Metric Pills"
               subtitle="Discovered from ~/.paseo/top/pills"
               icon="Sliders"
               value={
-                <CompactBadge
+                <HostBadge {...compactBadgeProp}
                   label={`${data?.customPills?.length ?? 0} active`}
                   variant="accent"
                 />
               }
             />
-            <KeyValueGroup columns={1}>
+            <HostStack gap={12}>
               {(data?.customPills ?? []).map((cp) => (
-                <CompactKeyValue
+                <HostKeyValue {...compactKvProps}
                   key={cp.id}
                   label={cp.title}
                   value={cp.displayValue}
                   subValue={cp.status !== "neutral" ? `(${cp.status})` : undefined}
                 />
               ))}
-            </KeyValueGroup>
-          </Card>
+            </HostStack>
+          </HostCard>
         )}
       </>
     )}
@@ -1335,48 +1348,48 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
     {activeTab === "context" && (
       <>
         {/* Workspace Information */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Workspace & Git"
             icon="GitBranch"
             value={
               workspace?.status ? (
-                <CompactBadge label={workspace.status} variant="info" />
+                <HostBadge {...compactBadgeProp} label={workspace.status} variant="info" />
               ) : undefined
             }
           />
-          <KeyValueGroup columns={1}>
-            <CompactKeyValue label="Git Branch" value={data?.branch || "Unknown"} />
-            <CompactKeyValue label="Kind" value={workspace?.kind || "Unknown"} />
-          </KeyValueGroup>
+          <HostStack gap={12}>
+            <HostKeyValue {...compactKvProps} label="Git Branch" value={data?.branch || "Unknown"} />
+            <HostKeyValue {...compactKvProps} label="Kind" value={workspace?.kind || "Unknown"} />
+          </HostStack>
           {workspace?.directory ? (
-            <CompactKeyValue label="Worktree Location" value={workspace.directory} copyable mono />
+            <HostKeyValue {...compactKvProps} label="Worktree Location" value={workspace.directory} copyable mono />
           ) : null}
           {workspace?.name ? (
-            <CompactKeyValue label="Workspace Name" value={workspace.name} />
+            <HostKeyValue {...compactKvProps} label="Workspace Name" value={workspace.name} />
           ) : null}
           {workspace?.title && workspace.title !== workspace.name ? (
-            <CompactKeyValue label="Workspace Title" value={workspace.title} />
+            <HostKeyValue {...compactKvProps} label="Workspace Title" value={workspace.title} />
           ) : null}
           {workspace?.projectDisplayName ? (
-            <CompactKeyValue label="Project" value={workspace.projectDisplayName} />
+            <HostKeyValue {...compactKvProps} label="Project" value={workspace.projectDisplayName} />
           ) : null}
           {workspace?.diffStat ? (
-            <CompactKeyValue
+            <HostKeyValue {...compactKvProps}
               label="Git Changes"
               value={`+${workspace.diffStat.additions}  -${workspace.diffStat.deletions}`}
             />
           ) : null}
-        </Card>
+        </HostCard>
 
         {/* Agent Information */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title={agent?.title ? `Agent: ${agent.title}` : "Agent Session"}
             icon="Bot"
             value={
               agent?.status ? (
-                <CompactBadge
+                <HostBadge {...compactBadgeProp}
                   label={agent.status}
                   variant={agent.status === "running" ? "success" : "info"}
                 />
@@ -1384,17 +1397,17 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
             }
           />
           {agent?.title ? (
-            <CompactKeyValue label="Agent Tab" value={agent.title} />
+            <HostKeyValue {...compactKvProps} label="Agent Tab" value={agent.title} />
           ) : null}
           {agentId ? (
-            <CompactKeyValue label="Agent ID" value={agentId} copyable mono />
+            <HostKeyValue {...compactKvProps} label="Agent ID" value={agentId} copyable mono />
           ) : null}
-          <KeyValueGroup columns={1}>
-            <CompactKeyValue label="Model" value={agent?.model || "Standard"} />
-            <CompactKeyValue label="Provider" value={agent?.provider || "Default"} />
-          </KeyValueGroup>
-          <KeyValueGroup columns={1}>
-            <CompactKeyValue
+          <HostStack gap={12}>
+            <HostKeyValue {...compactKvProps} label="Model" value={agent?.model || "Standard"} />
+            <HostKeyValue {...compactKvProps} label="Provider" value={agent?.provider || "Default"} />
+          </HostStack>
+          <HostStack gap={12}>
+            <HostKeyValue {...compactKvProps}
               label="Last Worked"
               value={
                 agent?.status === "running"
@@ -1402,7 +1415,7 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
                   : formatTimeAgo(agent?.lastActivityAt)
               }
             />
-            <CompactKeyValue
+            <HostKeyValue {...compactKvProps}
               label="Inactivity"
               value={
                 agent?.status === "running"
@@ -1410,25 +1423,25 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
                   : formatIdleDuration(agent?.lastActivityAt)
               }
             />
-          </KeyValueGroup>
+          </HostStack>
           {agent?.cwd ? (
-            <CompactKeyValue label="Working Directory" value={agent.cwd} copyable mono />
+            <HostKeyValue {...compactKvProps} label="Working Directory" value={agent.cwd} copyable mono />
           ) : null}
-        </Card>
+        </HostCard>
 
         {/* Token Usage & Context Window */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Tokens & Context Window"
             icon="Coins"
             value={
               contextPercent != null ? (
-                <CompactBadge
+                <HostBadge {...compactBadgeProp}
                   label={`${contextPercent}% ctx`}
                   variant={contextPercent >= 85 ? "danger" : contextPercent >= 70 ? "warning" : "success"}
                 />
               ) : tokenMetrics?.totalTokens != null ? (
-                <CompactBadge
+                <HostBadge {...compactBadgeProp}
                   label={`${formatCompactTokens(tokenMetrics.totalTokens)} tok`}
                   variant="neutral"
                 />
@@ -1438,67 +1451,67 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
 
           {tokenMetrics?.contextMaxTokens != null && tokenMetrics.contextMaxTokens > 0 ? (
             <View style={styles.contextUsageBlock}>
-              <View style={styles.contextUsageRow}>
+              <HostRow justify="between" align="center" style={styles.contextUsageRow}>
                 <Text style={[styles.compactKvLabel, { color: colors.foregroundMuted }]}>Context Utilization</Text>
                 <Text style={[styles.compactKvValue, { color: colors.foreground, fontWeight: "600" }]}>
                   {formatCompactTokens(tokenMetrics.contextUsedTokens ?? 0)} / {formatCompactTokens(tokenMetrics.contextMaxTokens)} ({contextPercent}%)
                 </Text>
-              </View>
-              <ProgressBar
+              </HostRow>
+              <HostProgressBar
                 value={contextPercent ?? 0}
                 thresholds={{ warning: 70, danger: 85 }}
                 height={8}
               />
             </View>
           ) : tokenMetrics?.contextUsedTokens != null ? (
-            <CompactKeyValue
+            <HostKeyValue {...compactKvProps}
               label="Context Used"
-              value={`${tokenMetrics.contextUsedTokens.toLocaleString()} (${formatCompactTokens(tokenMetrics.contextUsedTokens)})`}
+              value={`${tokenMetrics.contextUsedTokens.toLocaleString('en-US')} (${formatCompactTokens(tokenMetrics.contextUsedTokens)})`}
             />
           ) : null}
 
-          <KeyValueGroup columns={1}>
-            <CompactKeyValue
+          <HostStack gap={12}>
+            <HostKeyValue {...compactKvProps}
               label="Input Tokens"
-              value={tokenMetrics?.inputTokens != null ? tokenMetrics.inputTokens.toLocaleString() : "--"}
+              value={tokenMetrics?.inputTokens != null ? tokenMetrics.inputTokens.toLocaleString('en-US') : "--"}
               subValue={tokenMetrics?.inputTokens != null ? formatCompactTokens(tokenMetrics.inputTokens) : undefined}
             />
-            <CompactKeyValue
+            <HostKeyValue {...compactKvProps}
               label="Output Tokens"
-              value={tokenMetrics?.outputTokens != null ? tokenMetrics.outputTokens.toLocaleString() : "--"}
+              value={tokenMetrics?.outputTokens != null ? tokenMetrics.outputTokens.toLocaleString('en-US') : "--"}
               subValue={tokenMetrics?.outputTokens != null ? formatCompactTokens(tokenMetrics.outputTokens) : undefined}
             />
             {tokenMetrics?.cachedTokens != null && (
-              <CompactKeyValue
+              <HostKeyValue {...compactKvProps}
                 label="Cached Tokens"
-                value={tokenMetrics.cachedTokens.toLocaleString()}
+                value={tokenMetrics.cachedTokens.toLocaleString('en-US')}
                 subValue={formatCompactTokens(tokenMetrics.cachedTokens)}
               />
             )}
             {tokenMetrics?.costUsd != null && (
-              <CompactKeyValue
+              <HostKeyValue {...compactKvProps}
                 label="Session / Turn Cost"
                 value={`$${tokenMetrics.costUsd < 0.01 ? tokenMetrics.costUsd.toFixed(4) : tokenMetrics.costUsd.toFixed(2)}`}
               />
             )}
-          </KeyValueGroup>
+          </HostStack>
           {!tokenMetrics && (
             <Text style={[styles.mcpEmpty, { color: colors.foregroundMuted, marginTop: 4 }]}>
               No token usage recorded for this agent session yet
             </Text>
           )}
-        </Card>
+        </HostCard>
       </>
     )}
 
     {activeTab === "settings" && (
       <>
         {/* Pill Display Mode */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Pill Display Mode"
             icon="LayoutGrid"
-            subtitle="How active items appear in the composer trackbar"
+            subtitle="How active items appear in the composer"
           />
           <ChoiceChips
             options={[
@@ -1515,7 +1528,7 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
             }}
           />
           <View style={styles.settingsSpacer}>
-            <Toggle
+            <HostToggle
               label="Show Composer Pill"
               description="Hide the composer pill entirely; the dashboard stays available from the sidebar"
               style={styles.toggleFullWidth}
@@ -1527,13 +1540,18 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
               }}
             />
           </View>
-        </Card>
+        </HostCard>
 
         {/* Active Pill Items Selectors */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Active Pill Items"
             icon="Sliders"
+            value={
+              <Text style={[styles.accentValueText, { color: colors.accent }]}>
+                {`${METRIC_DEFINITIONS.filter((d) => isPillEnabled((settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES)[d.id])).length} active`}
+              </Text>
+            }
             subtitle={
               !hasAnyPillEnabled
                 ? "None selected -- automatically showing CPU & RAM"
@@ -1545,12 +1563,11 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
             }
           />
           <View style={styles.settingsToggles}>
-            <MetricSurfaceMatrix
+            <MetricPillSelector
               settings={settings}
               updateSettings={updateSettings}
               notifySettingsChanged={notifySettingsChanged}
               mcpInstalled={Boolean(data?.mcpInstalled)}
-              mcpRunning={data?.mcpRunning ?? null}
               customPills={(customPillList?.pills ?? []).map((pill) => ({
                 id: pill.id,
                 title: pill.title,
@@ -1566,17 +1583,17 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
               }}
             />
           </View>
-        </Card>
+        </HostCard>
 
         {/* Custom Metric Pills */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Custom Metric Pills"
             icon="Sliders"
             subtitle="Standalone pills discovered from ~/.paseo/top/pills"
           />
           <View style={styles.settingsToggles}>
-            <Toggle
+            <HostToggle
               label="Show Custom Metric Pills"
               description="Display pills defined in ~/.paseo/top/pills as standalone composer pills"
               style={styles.toggleFullWidth}
@@ -1590,12 +1607,12 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
             />
 
           </View>
-        </Card>
+        </HostCard>
 
         {/* Rotation Speed Setting (Cycle mode only) */}
         {(settings.pillMode ?? "cycle") === "cycle" && (
-          <Card variant="elevated">
-            <CompactCardHeader
+          <HostCard variant="elevated">
+            <HostCardHeader {...compactCardTitleProp}
               title="Rotation Speed"
               icon="Clock"
               value={
@@ -1612,12 +1629,12 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
                 updateSettings({ intervalSeconds });
               }}
             />
-          </Card>
+          </HostCard>
         )}
 
         {/* Timeline Cadence Setting */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Timeline Cadence"
             icon="Clock"
             value={
@@ -1643,30 +1660,92 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
           <Text style={[styles.modeDesc, styles.modeDescSpaced, { color: colors.foregroundMuted }]}>
             0 behaves as never; N above 1 stamps every Nth turn
           </Text>
-        </Card>
+        </HostCard>
+
+        {/* Timeline Card Metrics Setting */}
+        {(settings.timelineCadence ?? 1) > 0 && (
+          <HostCard variant="elevated">
+            <HostCardHeader {...compactCardTitleProp}
+              title="Timeline Card Metrics"
+              icon="GitCommitHorizontal"
+              value={
+                <Text style={[styles.accentValueText, { color: colors.accent }]}>
+                  {`${METRIC_DEFINITIONS.filter((d) => !d.pillOnly && isTimelineEnabled((settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES)[d.id])).length} active`}
+                </Text>
+              }
+              subtitle="Choose which metrics appear on turn summary cards"
+            />
+            <MultiChoiceChips
+              options={METRIC_DEFINITIONS.filter((d) => !d.pillOnly).map((def) => ({
+                id: def.id,
+                label: def.title,
+                icon: def.icon,
+                disabled: def.id === "mcp" && !data?.mcpInstalled,
+              }))}
+              selected={METRIC_DEFINITIONS.filter((d) => !d.pillOnly && isTimelineEnabled((settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES)[d.id])).map((d) => d.id)}
+              onToggle={(metricId) => {
+                triggerHaptic("light");
+                const surfaces = settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES;
+                const currentPill = isPillEnabled(surfaces[metricId]);
+                const currentTimeline = isTimelineEnabled(surfaces[metricId]);
+                const next = {
+                  ...surfaces,
+                  [metricId]: targetFromCheckboxes(currentPill, !currentTimeline),
+                };
+                updateSettings({ metricSurfaces: next });
+                notifySettingsChanged({ ...settings, metricSurfaces: next });
+              }}
+              onSelectAll={() => {
+                triggerHaptic("medium");
+                const surfaces = settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES;
+                const next = { ...surfaces };
+                for (const def of METRIC_DEFINITIONS) {
+                  if (def.pillOnly) continue;
+                  if (def.id === "mcp" && !data?.mcpInstalled) continue;
+                  const currentPill = isPillEnabled(surfaces[def.id]);
+                  next[def.id] = targetFromCheckboxes(currentPill, true);
+                }
+                updateSettings({ metricSurfaces: next });
+                notifySettingsChanged({ ...settings, metricSurfaces: next });
+              }}
+              onClearAll={() => {
+                triggerHaptic("medium");
+                const surfaces = settings.metricSurfaces ?? DEFAULT_METRIC_SURFACES;
+                const next = { ...surfaces };
+                for (const def of METRIC_DEFINITIONS) {
+                  if (def.pillOnly) continue;
+                  const currentPill = isPillEnabled(surfaces[def.id]);
+                  next[def.id] = targetFromCheckboxes(currentPill, false);
+                }
+                updateSettings({ metricSurfaces: next });
+                notifySettingsChanged({ ...settings, metricSurfaces: next });
+              }}
+            />
+          </HostCard>
+        )}
 
         {/* Default Modal Tab Setting */}
-        <Card variant="elevated">
-          <CompactCardHeader
+        <HostCard variant="elevated">
+          <HostCardHeader {...compactCardTitleProp}
             title="Default Modal Tab"
             icon="Sliders"
             value={
               <Text style={[styles.accentValueText, { color: colors.accent }]}>
-                {TABS.find((t) => t.id === settings.defaultTab)?.label || "System"}
+                {MODAL_TABS.find((t) => t.id === settings.defaultTab)?.label || "System"}
               </Text>
             }
           />
           <ChoiceChips
-            options={TABS.map((tab) => ({ id: tab.id as ModalTab, label: tab.label }))}
+            options={MODAL_TABS.map((tab) => ({ id: tab.id as ModalTab, label: tab.label }))}
             value={settings.defaultTab ?? "system"}
             onChange={(defaultTab) => {
               triggerHaptic("light");
               updateSettings({ defaultTab });
             }}
           />
-        </Card>
+        </HostCard>
 
-        <Button
+        <HostButton
           label="Reset to Defaults"
           variant="secondary"
           size="sm"
@@ -1681,40 +1760,19 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
     )}
 
     {activeTab === "permissions" && (
-      <PermissionAuditView variant="compact" />
+      <PermissionAuditView variant="compact" theme={theme} layout={layout} />
     )}
 
     {activeTab === "about" && (
-      <AboutSection
+      <HostAboutSection
         name="paseo-top"
-        description="Live host system and workspace monitor for Paseo composer trackbar."
+        description="Live host and session monitor across composer pills, timeline turns, and an interactive dashboard."
         version={data?.version ?? PLUGIN_VERSION}
         author="xpufx"
         repository="https://github.com/xpufx/paseo-top"
         issues="https://github.com/xpufx/paseo-top/issues"
         license="MIT"
-        density="tiny"
-        extraItems={[
-          {
-            label: "Host Platform",
-            value: data?.platform ? `${data?.platform} (${data?.arch ?? "unknown"})` : "Linux",
-            copyable: true,
-          },
-          { label: "Host Name", value: data?.hostname ?? "localhost", copyable: true },
-          { label: "CPU Model", value: data?.cpuModel ?? "unknown", copyable: true },
-          {
-            label: "CPU Cores",
-            value: `${data?.cpuCores ?? 0} cores`,
-          },
-          {
-            label: "Total Memory",
-            value: data?.memoryTotalBytes ? formatBytes(data?.memoryTotalBytes) : "unknown",
-          },
-          {
-            label: "Host Uptime",
-            value: data?.uptimeSeconds ? formatUptime(data?.uptimeSeconds) : "unknown",
-          },
-        ]}
+        extraItems={aboutExtraItems(data)}
       />
     )}
 
@@ -1726,7 +1784,9 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
         </Text>
       </View>
     )}
-  </ModalBody>
+        </View>
+      </View>
+    </HostModalSection>
   );
 }
 
@@ -1735,8 +1795,69 @@ interface LiveCustomPillModalProps {
   initial: CustomPillStateOutput;
 }
 
+/**
+ * Drilldown modal body for a custom metric pill, built from `ui/` primitives
+ * (the deprecated `client/` `CustomPillModalContent` was dropped in the #847
+ * migration). The host owns the modal frame; this fills it fluidly.
+ */
+function CustomPillModalContent({
+  state,
+  onRefresh,
+  isRefreshing = false,
+}: {
+  state: CustomPillStateOutput;
+  onRefresh?: () => Promise<void> | void;
+  isRefreshing?: boolean;
+}) {
+  const { colors } = useHostTheme();
+  const displayText =
+    state.modalOutput || state.rawValue || (state.error ? `Error: ${state.error}` : "No output");
+
+  return (
+    <View style={styles.customPillModal}>
+      <HostCard>
+        <HostCardHeader
+          title={state.modalTitle ?? state.title}
+          subtitle={state.modalDescription}
+          icon={state.icon}
+          badge={<HostBadge label={state.displayValue} variant={state.status} />}
+          action={
+            onRefresh ? (
+              <HostButton
+                variant="secondary"
+                size="sm"
+                icon="RefreshCw"
+                loading={isRefreshing}
+                label="Refresh"
+                onPress={() => onRefresh()}
+              />
+            ) : undefined
+          }
+        />
+        <View style={styles.codeBlock}>
+          <Text
+            selectable
+            numberOfLines={8}
+            style={[styles.codeText, { color: colors.foreground }]}
+          >
+            {displayText}
+          </Text>
+          <HostCopyButton
+            text={displayText}
+            accessibilityLabel="Copy pill output"
+            toastMessage="pill output"
+          />
+        </View>
+        <Text style={[styles.timestampText, { color: colors.foregroundMuted }]}>
+          Last updated: {new Date(state.lastUpdated).toLocaleTimeString()}
+        </Text>
+      </HostCard>
+    </View>
+  );
+}
+
 function LiveCustomPillModal({ pillId, initial }: LiveCustomPillModalProps) {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   const [refreshing, setRefreshing] = useState(false);
   const [outputOverride, setOutputOverride] = useState<string | undefined>(undefined);
   const { data, refetch } = useCustomPillsQuery();
@@ -1871,17 +1992,7 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
         activePills.delete("paseo-top");
       }
 
-      const hasAny =
-        flags.showCpuRam ||
-        flags.showBranch ||
-        flags.showWorktree ||
-        flags.showAgentTitle ||
-        flags.showAgent ||
-        flags.showAgentProvider ||
-        flags.showAgentActivity ||
-        flags.showAgentId ||
-        flags.showLoad ||
-        flags.showUptime;
+      const hasAny = hasAnyLegacyPillFlagEnabled(flags);
 
       const effectiveCpu = flags.showCpuRam || !hasAny;
 
@@ -2044,6 +2155,16 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
           defaultTab: "system",
         });
       }
+      if (settings.metricSurfaces && isPillEnabled(settings.metricSurfaces.velocity)) {
+        desiredPills.push({
+          id: "paseo-top-velocity",
+          item: "velocity",
+          icon: "Zap",
+          title: "Generation Velocity",
+          modalTitle: "Host System Resources",
+          defaultTab: "system",
+        });
+      }
 
       const desiredIds = new Set(desiredPills.map((p) => p.id));
 
@@ -2158,8 +2279,12 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
               );
             },
             refreshIntervalMs: 5000,
-            renderModal: () => (
-              <LiveCustomPillModal pillId={pill.id} initial={pill} />
+            renderModal: (props) => (
+              <HostThemeProvider theme={props.theme}>
+                <HostLayoutProvider layout={props.layout}>
+                  <LiveCustomPillModal pillId={pill.id} initial={pill} />
+                </HostLayoutProvider>
+              </HostThemeProvider>
             ),
           });
           activeCustomPills.set(pill.id, cleanup);
@@ -2213,8 +2338,6 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
 // primitive covers.
 const styles = {
   modalRoot: {
-    flex: 1,
-    minHeight: 0,
     width: "100%",
   },
   pillContainer: {
@@ -2313,80 +2436,6 @@ const styles = {
   accentValueText: {
     fontWeight: "600",
   },
-  metricMatrix: {
-    gap: 0,
-    width: "100%",
-  },
-  metricMatrixCompact: {
-    minWidth: 0,
-  },
-  metricMatrixHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingLeft: 4,
-    paddingRight: 4,
-    paddingBottom: 2,
-  },
-  metricMatrixHeaderCompact: {
-    paddingLeft: 2,
-    paddingRight: 2,
-  },
-  metricMatrixHeaderText: {
-    fontSize: 9,
-    fontWeight: "700",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-  },
-  metricMatrixTargetHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 28,
-    paddingRight: 10,
-  },
-  metricMatrixTargetHeaderCompact: {
-    gap: 16,
-    paddingRight: 8,
-  },
-  metricMatrixRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingLeft: 4,
-    paddingRight: 4,
-  },
-  metricMatrixRowCompact: {
-    paddingLeft: 2,
-    paddingRight: 2,
-  },
-  metricMatrixLabel: {
-    flex: 1,
-    minWidth: 0,
-    paddingVertical: 2,
-  },
-  metricMatrixTitle: {
-    fontSize: 11,
-    fontWeight: "600",
-  },
-  metricMatrixNote: {
-    fontSize: 9,
-    lineHeight: 12,
-    marginTop: 1,
-  },
-  metricMatrixTargets: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 16,
-    paddingLeft: 8,
-  },
-  metricMatrixTargetsCompact: {
-    gap: 8,
-    paddingLeft: 4,
-  },
-  matrixToggle: {
-    width: 38,
-    minHeight: 44,
-  },
   allInOneContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -2439,4 +2488,31 @@ const styles = {
     fontStyle: "italic",
     paddingVertical: 4,
   },
+  modalColumn: {
+    width: "100%",
+  },
+  modalContent: {
+    width: "100%",
+    paddingTop: 6,
+  },
+  customPillModal: {
+    width: "100%",
+    padding: 12,
+  },
+  codeBlock: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    marginTop: 8,
+  },
+  codeText: {
+    flex: 1,
+    minWidth: 0,
+    fontSize: 11,
+    fontFamily: "monospace",
+  },
+  timestampText: {
+    fontSize: 11,
+    marginTop: 8,
+  },
 } as const;