@omercnet/paseo-omp 0.2.1-next.72.1

package/client/hub-popover.tsx

@@ -0,0 +1,132 @@
+import { type PluginButtonContentProps, useAgent, useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { type HubProcess, listHubProcesses, tailHubLog } from "../shared/hub";
+import { type HubProcessTone, hubProcessTone } from "./hub-status";
+
+const PROCESS_POLL_MS = 3_000;
+const LOG_POLL_MS = 2_000;
+
+function age(timestamp: number | null): string {
+  if (timestamp === null) return "";
+  const seconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1_000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  return `${Math.floor(hours / 24)}d`;
+}
+
+function command(process: HubProcess): string {
+  return [process.application, ...process.args].join(" ");
+}
+
+function toneColor(
+  tone: HubProcessTone,
+  colors: PluginButtonContentProps["theme"]["colors"],
+): string {
+  if (tone === "danger") return colors.statusDanger;
+  if (tone === "warning") return colors.statusWarning;
+  if (tone === "success") return colors.statusSuccess;
+  return colors.foregroundMuted;
+}
+
+export function HubPopover(props: PluginButtonContentProps) {
+  const { theme, layout } = props;
+  const agentId = props.context === "agent" ? props.agentId : "";
+  const cwd = useAgent(agentId, (agent) => agent.cwd) ?? "";
+  const loadProcesses = useRpc(listHubProcesses);
+  const loadLog = useRpc(tailHubLog);
+  const [selectedName, setSelectedName] = useState<string | null>(null);
+  const processes = useQuery({
+    queryKey: ["paseo-omp", "processes", cwd],
+    queryFn: () => loadProcesses({ cwd }),
+    enabled: cwd.length > 0,
+    refetchInterval: PROCESS_POLL_MS,
+  });
+  const log = useQuery({
+    queryKey: ["paseo-omp", "log", cwd, selectedName],
+    queryFn: () => loadLog({ cwd, name: selectedName ?? "" }),
+    enabled: cwd.length > 0 && selectedName !== null,
+    refetchInterval: LOG_POLL_MS,
+  });
+  const styles = useMemo(
+    () => ({
+      root: { gap: layout.compact ? 8 : 10 },
+      muted: { color: theme.colors.foregroundMuted, fontSize: 13 },
+      error: { color: theme.colors.statusDanger, fontSize: 13 },
+      card: {
+        gap: 4,
+        padding: layout.compact ? 10 : 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.surface1,
+      },
+      row: { flexDirection: "row" as const, justifyContent: "space-between" as const, gap: 12 },
+      name: { color: theme.colors.foreground, fontSize: 14, fontWeight: "600" as const, flex: 1 },
+      command: { color: theme.colors.foregroundMuted, fontSize: 12 },
+      log: {
+        color: theme.colors.foreground,
+        fontFamily: "monospace",
+        fontSize: 11,
+        padding: 10,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface2,
+      },
+    }),
+    [layout.compact, theme],
+  );
+
+  if (processes.isLoading) return <Text style={styles.muted}>Loading hub processes…</Text>;
+  if (processes.error) return <Text style={styles.error}>Could not read omp hub state.</Text>;
+  const items = processes.data?.processes ?? [];
+  if (items.length === 0) return <Text style={styles.muted}>No hub-supervised processes.</Text>;
+
+  return (
+    <View style={styles.root}>
+      {items.map((process) => {
+        const tone = hubProcessTone(process);
+        const selected = selectedName === process.name;
+        const timestamp = process.exitedAt ?? process.startedAt ?? process.createdAt;
+        return (
+          <Pressable
+            key={process.name}
+            accessibilityRole="button"
+            accessibilityLabel={`${selected ? "Hide" : "Show"} logs for ${process.name}`}
+            onPress={() => setSelectedName(selected ? null : process.name)}
+            style={styles.card}
+          >
+            <View style={styles.row}>
+              <Text numberOfLines={1} style={styles.name}>
+                {process.name}
+              </Text>
+              <Text style={{ color: toneColor(tone, theme.colors), fontSize: 12 }}>
+                {process.state}
+                {process.exitCode !== null ? ` · ${process.exitCode}` : ""}
+                {timestamp !== null ? ` · ${age(timestamp)}` : ""}
+              </Text>
+            </View>
+            <Text numberOfLines={2} style={styles.command}>
+              {command(process)}
+            </Text>
+            {selected ? (
+              log.isLoading ? (
+                <Text style={styles.muted}>Loading logs…</Text>
+              ) : log.error ? (
+                <Text style={styles.error}>Could not read this process log.</Text>
+              ) : (
+                <Text selectable style={styles.log}>
+                  {log.data?.truncated ? "… showing the latest 64 KiB\n" : ""}
+                  {log.data?.content || "No output."}
+                </Text>
+              )
+            ) : null}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/client/hub-status.ts

@@ -0,0 +1,29 @@
+import type { HubProcess } from "../shared/hub";
+
+export type HubProcessTone = "success" | "warning" | "danger" | "muted";
+
+const FAILED_STATES: Record<string, true> = { crashed: true, error: true, failed: true };
+const ACTIVE_STATES: Record<string, true> = { ready: true, running: true };
+const TERMINAL_STATES: Record<string, true> = { exited: true, stopped: true };
+
+export function hubProcessTone(process: HubProcess): HubProcessTone {
+  const state = process.state.toLowerCase();
+  if (FAILED_STATES[state] || (process.exitCode !== null && process.exitCode !== 0)) {
+    return "danger";
+  }
+  if (ACTIVE_STATES[state]) return "success";
+  if (TERMINAL_STATES[state]) return "muted";
+  return "warning";
+}
+
+export function summarizeHubProcesses(processes: readonly HubProcess[]): {
+  visible: boolean;
+  label: string;
+} {
+  if (processes.length === 0) return { visible: false, label: "Hub" };
+  const hasFailure = processes.some((process) => hubProcessTone(process) === "danger");
+  return {
+    visible: true,
+    label: `Hub · ${processes.length}${hasFailure ? " !" : ""}`,
+  };
+}

package/client/mcp-authorization.tsx

@@ -0,0 +1,168 @@
+import { type PluginTimelineItemProps, useRpc } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useMemo, useState } from "react";
+import { Linking, Pressable, Text, View } from "react-native";
+import {
+  type OmpMcpAuthorizationTimeline,
+  openOmpMcpAuthorizationInPaseoBrowser,
+} from "../shared/mcp";
+
+function browserAuthorizationError(error: unknown): string {
+  const detail = error instanceof Error ? error.message : String(error);
+  if (/No Paseo desktop browser host/iu.test(detail)) {
+    return "No Paseo desktop browser host is connected. Open the authorization on this device.";
+  }
+  if (/browser tools are disabled/iu.test(detail)) {
+    return "Paseo browser tools are disabled. Open the authorization on this device.";
+  }
+  if (/browser tools are unavailable/iu.test(detail)) {
+    return "Paseo tools are not available in this OMP session. Open the authorization on this device.";
+  }
+  if (/session is no longer available|session is closed/iu.test(detail)) {
+    return "The OMP authorization session ended. Start authorization again or open the URL on this device.";
+  }
+  return "Could not open a Paseo Browser tab. Open the authorization on this device.";
+}
+
+export function OmpMcpAuthorizationCard({
+  item,
+  theme,
+  layout,
+}: PluginTimelineItemProps<OmpMcpAuthorizationTimeline>) {
+  const openInPaseoBrowser = useRpc(openOmpMcpAuthorizationInPaseoBrowser);
+  const [opening, setOpening] = useState<"paseo" | "device" | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const styles = useMemo(
+    () => ({
+      card: {
+        gap: layout.compact ? 10 : 12,
+        padding: layout.compact ? 12 : 14,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 10,
+        backgroundColor: theme.colors.surface1,
+      },
+      header: { flexDirection: "row" as const, alignItems: "center" as const, gap: 8 },
+      title: { color: theme.colors.foreground, fontSize: 14, fontWeight: "700" as const },
+      text: { color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 18 },
+      url: { color: theme.colors.accent, fontSize: 12, lineHeight: 17 },
+      buttonRow: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 8 },
+      button: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        alignSelf: "flex-start" as const,
+        gap: 7,
+        paddingHorizontal: 12,
+        paddingVertical: 9,
+        borderRadius: 8,
+        backgroundColor: theme.colors.accent,
+      },
+      buttonSecondary: {
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.surface2,
+      },
+      buttonPressed: { opacity: 0.78 },
+      buttonDisabled: { opacity: 0.55 },
+      buttonText: {
+        color: theme.colors.accentForeground,
+        fontSize: 13,
+        fontWeight: "600" as const,
+      },
+      buttonTextSecondary: { color: theme.colors.foreground },
+      success: { color: theme.colors.statusSuccess, fontSize: 12 },
+      error: { color: theme.colors.statusDanger, fontSize: 12 },
+    }),
+    [layout.compact, theme],
+  );
+
+  async function openPaseoBrowser(): Promise<void> {
+    setOpening("paseo");
+    setError(null);
+    setMessage(null);
+    try {
+      const authorizationToken = item.data.browserAuthorizationToken;
+      if (!authorizationToken) throw new Error("Browser authorization is unavailable");
+      await openInPaseoBrowser({ authorizationToken });
+      setMessage("Opened in a Paseo Browser tab for this workspace.");
+    } catch (cause) {
+      setError(browserAuthorizationError(cause));
+    } finally {
+      setOpening(null);
+    }
+  }
+
+  async function openOnDevice(): Promise<void> {
+    setOpening("device");
+    setError(null);
+    setMessage(null);
+    try {
+      await Linking.openURL(item.data.url);
+    } catch {
+      setError("Could not open the authorization URL. Copy the URL below into a browser.");
+    } finally {
+      setOpening(null);
+    }
+  }
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <Icon name="KeyRound" size={16} color={theme.colors.accent} />
+        <Text style={styles.title}>OMP MCP authorization</Text>
+      </View>
+      {item.data.instructions ? <Text style={styles.text}>{item.data.instructions}</Text> : null}
+      <View style={styles.buttonRow}>
+        {item.data.browserAuthorizationToken ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Open MCP authorization in Paseo Browser"
+            disabled={opening !== null}
+            onPress={() => void openPaseoBrowser()}
+            style={({ pressed }) => [
+              styles.button,
+              pressed ? styles.buttonPressed : null,
+              opening !== null ? styles.buttonDisabled : null,
+            ]}
+          >
+            <Icon name="PanelsTopLeft" size={15} color={theme.colors.accentForeground} />
+            <Text style={styles.buttonText}>
+              {opening === "paseo" ? "Opening…" : "Open in Paseo Browser"}
+            </Text>
+          </Pressable>
+        ) : null}
+        <Pressable
+          accessibilityRole="link"
+          accessibilityLabel="Open MCP authorization on this device"
+          disabled={opening !== null}
+          onPress={() => void openOnDevice()}
+          style={({ pressed }) => [
+            styles.button,
+            styles.buttonSecondary,
+            pressed ? styles.buttonPressed : null,
+            opening !== null ? styles.buttonDisabled : null,
+          ]}
+        >
+          <Icon name="ExternalLink" size={15} color={theme.colors.foreground} />
+          <Text style={[styles.buttonText, styles.buttonTextSecondary]}>
+            {opening === "device" ? "Opening…" : "Open on this device"}
+          </Text>
+        </Pressable>
+      </View>
+      <Text selectable style={styles.url}>
+        {item.data.url}
+      </Text>
+      {item.data.loopbackCallback ? (
+        <Text style={styles.text}>
+          Paseo Browser keeps authorization in this workspace when a desktop browser host is
+          connected. For a localhost callback, that browser host must run on the daemon machine.
+          Otherwise, copy the final URL or authorization code and paste it into the OMP prompt in
+          this chat.
+        </Text>
+      ) : null}
+      {message ? <Text style={styles.success}>{message}</Text> : null}
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+    </View>
+  );
+}

package/client/mcp-popover.tsx

@@ -0,0 +1,155 @@
+import { type PluginButtonContentProps, useAgent, usePaseo } from "@getpaseo/plugin/client";
+import { TextInput } from "@getpaseo/plugin/client/react-native";
+import { useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { buildOmpMcpServerCommand, type OmpMcpServerAction } from "../shared/mcp";
+
+import { isOmpPluginProvider } from "./omp-store-state";
+
+const GENERAL_ACTIONS = [
+  { label: "List servers", command: "/mcp list" },
+  { label: "Add server", command: "/mcp add" },
+  { label: "Reload", command: "/mcp reload" },
+  { label: "Resources", command: "/mcp resources" },
+  { label: "Prompts", command: "/mcp prompts" },
+  { label: "Notifications", command: "/mcp notifications" },
+] as const;
+
+const SERVER_ACTIONS: ReadonlyArray<{ label: string; action: OmpMcpServerAction }> = [
+  { label: "Test", action: "test" },
+  { label: "Authorize", action: "reauth" },
+  { label: "Enable", action: "enable" },
+  { label: "Disable", action: "disable" },
+];
+
+export function McpPopover(props: PluginButtonContentProps) {
+  const { theme, layout, close } = props;
+  const agentId = props.context === "agent" ? props.agentId : "";
+  const agent = useAgent(agentId, ({ provider, status }) => ({ provider, status }));
+  const paseo = usePaseo();
+  const [serverName, setServerName] = useState("");
+  const [pendingCommand, setPendingCommand] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const styles = useMemo(
+    () => ({
+      root: { gap: layout.compact ? 10 : 12, width: layout.compact ? undefined : 340 },
+      title: { color: theme.colors.foreground, fontSize: 14, fontWeight: "700" as const },
+      muted: { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 17 },
+      error: { color: theme.colors.statusDanger, fontSize: 12 },
+      actions: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 7 },
+      action: {
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface1,
+      },
+      actionPressed: { opacity: 0.72 },
+      actionDisabled: { opacity: 0.45 },
+      actionText: { color: theme.colors.foreground, fontSize: 12, fontWeight: "600" as const },
+      input: {
+        color: theme.colors.foreground,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface0,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        fontSize: 13,
+      },
+    }),
+    [layout.compact, theme],
+  );
+
+  const targetCommands = SERVER_ACTIONS.map(({ label, action }) => ({
+    label,
+    command: buildOmpMcpServerCommand(action, serverName),
+  }));
+  const unavailable = !isOmpPluginProvider(agent?.provider);
+
+  async function send(command: string): Promise<void> {
+    setPendingCommand(command);
+    setError(null);
+    try {
+      await paseo.agents.ref(agentId).send(command);
+      close();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not send the OMP MCP command.");
+    } finally {
+      setPendingCommand(null);
+    }
+  }
+
+  if (unavailable)
+    return <Text style={styles.muted}>MCP controls require an OMP Plugin agent.</Text>;
+
+  return (
+    <View style={styles.root}>
+      <Text style={styles.title}>OMP MCP</Text>
+      <Text style={styles.muted}>
+        Commands run in this OMP session. Results, setup questions, and authorization stay in the
+        chat timeline so they remain usable from remote and mobile clients.
+      </Text>
+      <View style={styles.actions}>
+        {GENERAL_ACTIONS.map((action) => (
+          <Pressable
+            key={action.command}
+            accessibilityRole="button"
+            accessibilityLabel={action.label}
+            disabled={pendingCommand !== null}
+            onPress={() => void send(action.command)}
+            style={({ pressed }) => [
+              styles.action,
+              pressed ? styles.actionPressed : null,
+              pendingCommand !== null ? styles.actionDisabled : null,
+            ]}
+          >
+            <Text style={styles.actionText}>
+              {pendingCommand === action.command ? "Sending…" : action.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      <TextInput
+        accessibilityLabel="OMP MCP server name"
+        autoCapitalize="none"
+        autoCorrect={false}
+        onChangeText={setServerName}
+        placeholder="Server name"
+        placeholderTextColor={theme.colors.foregroundMuted}
+        style={styles.input}
+        value={serverName}
+      />
+      <View style={styles.actions}>
+        {targetCommands.map((action) => (
+          <Pressable
+            key={action.label}
+            accessibilityRole="button"
+            accessibilityLabel={`${action.label} MCP server`}
+            disabled={!action.command || pendingCommand !== null}
+            onPress={() => action.command && void send(action.command)}
+            style={({ pressed }) => [
+              styles.action,
+              pressed ? styles.actionPressed : null,
+              !action.command || pendingCommand !== null ? styles.actionDisabled : null,
+            ]}
+          >
+            <Text style={styles.actionText}>
+              {pendingCommand === action.command ? "Sending…" : action.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      {agent?.status === "running" ? (
+        <Text style={styles.muted}>The command may wait until the active turn finishes.</Text>
+      ) : null}
+      {serverName.trim() && targetCommands.every((action) => !action.command) ? (
+        <Text style={styles.error}>
+          Server names may contain letters, numbers, dash, underscore, dot, and colon.
+        </Text>
+      ) : null}
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+    </View>
+  );
+}

package/client/memory-panel.tsx

@@ -0,0 +1,76 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { useRpc, useWorkspace } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { listOmpMemory } from "../shared/memory";
+import type { OmpStore } from "../shared/omp-store";
+import { OmpStorePicker } from "./omp-store-picker";
+import { ompStoreKey } from "./omp-store-state";
+
+const MEMORY_POLL_MS = 15_000;
+
+export function OmpMemoryPanel({ theme, layout, workspaceId }: PluginWorkspacePanelProps) {
+  const directory = useWorkspace(workspaceId, (workspace) => workspace.directory) ?? "";
+  const [store, setStore] = useState<OmpStore>();
+  const loadMemory = useRpc(listOmpMemory);
+  const memory = useQuery({
+    queryKey: ["paseo-omp", "memory", ompStoreKey(store), directory],
+    queryFn: () => loadMemory({ cwd: directory, store }),
+    enabled: directory.length > 0,
+    refetchInterval: MEMORY_POLL_MS,
+  });
+  const styles = useMemo(
+    () => ({
+      root: {
+        flex: 1,
+        gap: layout.compact ? 10 : 14,
+        padding: layout.compact ? 16 : 24,
+        backgroundColor: theme.colors.surface0,
+      },
+      title: {
+        color: theme.colors.foreground,
+        fontSize: layout.compact ? 20 : 24,
+        fontWeight: "700" as const,
+      },
+      subtitle: { color: theme.colors.foregroundMuted, fontSize: 13 },
+      card: {
+        gap: 6,
+        padding: layout.compact ? 10 : 12,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 10,
+        backgroundColor: theme.colors.surface1,
+      },
+      fact: { color: theme.colors.foreground, fontSize: 14 },
+      detail: { color: theme.colors.foregroundMuted, fontSize: 12 },
+      error: { color: theme.colors.statusDanger, fontSize: 13 },
+    }),
+    [layout.compact, theme],
+  );
+
+  return (
+    <ScrollView contentContainerStyle={styles.root}>
+      <View style={{ gap: 4 }}>
+        <Text style={styles.title}>OMP Memory</Text>
+        <Text style={styles.subtitle}>
+          {memory.data?.bank ? `Bank: ${memory.data.bank}` : "Retained workspace facts"}
+        </Text>
+      </View>
+      <OmpStorePicker theme={theme} store={store} onChange={setStore} />
+      {memory.isLoading ? <Text style={styles.subtitle}>Loading retained facts…</Text> : null}
+      {memory.error ? <Text style={styles.error}>Could not read workspace memory.</Text> : null}
+      {!memory.isLoading && !memory.error && (memory.data?.facts.length ?? 0) === 0 ? (
+        <Text style={styles.subtitle}>No retained facts for this workspace.</Text>
+      ) : null}
+      {memory.data?.facts.map((fact) => (
+        <View key={fact.id} style={styles.card}>
+          <Text style={styles.fact}>{`${fact.subject} ${fact.predicate} ${fact.object}`}</Text>
+          <Text style={styles.detail}>
+            {`${Math.round(fact.confidence * 100)}% confidence${fact.timestamp ? ` · ${fact.timestamp}` : ""}`}
+          </Text>
+        </View>
+      ))}
+    </ScrollView>
+  );
+}

package/client/memory-popover.tsx

@@ -0,0 +1,74 @@
+import { type PluginButtonContentProps, useAgent, useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { listOmpMemory } from "../shared/memory";
+import { storeForProvider, storeLabel } from "../shared/omp-store";
+import { ompStoreKey } from "./omp-store-state";
+
+const MEMORY_POLL_MS = 15_000;
+const PREVIEW_LIMIT = 20;
+
+export function MemoryPopover(props: PluginButtonContentProps) {
+  const { theme, layout } = props;
+  const agentId = props.context === "agent" ? props.agentId : "";
+  const agent = useAgent(agentId, ({ cwd, provider }) => ({ cwd, provider }));
+  const cwd = agent?.cwd ?? "";
+  const store = storeForProvider(agent?.provider);
+  const loadMemory = useRpc(listOmpMemory);
+  const memory = useQuery({
+    queryKey: ["paseo-omp", "memory", ompStoreKey(store), cwd],
+    queryFn: () => loadMemory({ cwd, store }),
+    enabled: cwd.length > 0,
+    refetchInterval: MEMORY_POLL_MS,
+  });
+  const styles = useMemo(
+    () => ({
+      root: { gap: layout.compact ? 8 : 10, minWidth: layout.compact ? undefined : 260 },
+      muted: { color: theme.colors.foregroundMuted, fontSize: 12 },
+      error: { color: theme.colors.statusDanger, fontSize: 13 },
+      header: { flexDirection: "row" as const, justifyContent: "space-between" as const, gap: 12 },
+      title: { color: theme.colors.foreground, fontSize: 14, fontWeight: "700" as const },
+      card: {
+        gap: 4,
+        padding: layout.compact ? 9 : 10,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 9,
+        backgroundColor: theme.colors.surface1,
+      },
+      fact: { color: theme.colors.foreground, fontSize: 13 },
+      detail: { color: theme.colors.foregroundMuted, fontSize: 11 },
+    }),
+    [layout.compact, theme],
+  );
+
+  if (memory.isLoading) return <Text style={styles.muted}>Loading retained facts…</Text>;
+  if (memory.error) return <Text style={styles.error}>Could not read workspace memory.</Text>;
+
+  const facts = memory.data?.facts ?? [];
+  if (facts.length === 0) {
+    return <Text style={styles.muted}>No retained facts for this workspace.</Text>;
+  }
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.header}>
+        <Text style={styles.title}>OMP Memory · {storeLabel(store)}</Text>
+        <Text style={styles.muted}>{facts.length} facts</Text>
+      </View>
+      <Text style={styles.muted}>{memory.data?.bank ?? "Workspace memory"}</Text>
+      {facts.slice(0, PREVIEW_LIMIT).map((fact) => (
+        <View key={fact.id} style={styles.card}>
+          <Text style={styles.fact}>{`${fact.subject} ${fact.predicate} ${fact.object}`}</Text>
+          <Text style={styles.detail}>
+            {`${Math.round(fact.confidence * 100)}% confidence${fact.timestamp ? ` · ${fact.timestamp}` : ""}`}
+          </Text>
+        </View>
+      ))}
+      {facts.length > PREVIEW_LIMIT ? (
+        <Text style={styles.muted}>{`Showing ${PREVIEW_LIMIT} of ${facts.length}`}</Text>
+      ) : null}
+    </View>
+  );
+}