@omercnet/paseo-omp 0.2.1-next.72.1

package/client/omp-store-picker.tsx

@@ -0,0 +1,89 @@
+import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { Pressable, Text, View } from "react-native";
+import { listOmpStores, type OmpStore, storeLabel } from "../shared/omp-store";
+import { ompStoreKey } from "./omp-store-state";
+
+export function OmpStorePicker({
+  theme,
+  store,
+  onChange,
+  disabled = false,
+}: {
+  theme: PluginSurfaceProps["theme"];
+  store?: OmpStore;
+  onChange(store: OmpStore | undefined): void;
+  disabled?: boolean;
+}) {
+  const loadStores = useRpc(listOmpStores);
+  const stores = useQuery({
+    queryKey: ["paseo-omp", "stores"],
+    queryFn: () => loadStores({}),
+    staleTime: 30_000,
+  });
+  const profiles = [
+    ...new Set([...(stores.data?.profiles ?? []), ...(store?.profile ? [store.profile] : [])]),
+  ];
+  const choices: Array<OmpStore | undefined> = [
+    undefined,
+    ...profiles.map((profile) => ({ profile })),
+  ];
+  if (store?.agentDir) choices.push(store);
+  return (
+    <View style={{ gap: 8 }}>
+      <Text style={{ color: theme.colors.foreground, fontWeight: "600" }}>OMP store</Text>
+      <View
+        accessibilityRole="radiogroup"
+        style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}
+      >
+        {choices.map((choice) => {
+          const selected = ompStoreKey(choice) === ompStoreKey(store);
+          return (
+            <Pressable
+              key={ompStoreKey(choice)}
+              accessibilityRole="radio"
+              accessibilityLabel={storeLabel(choice)}
+              accessibilityState={{ checked: selected, disabled }}
+              aria-checked={selected}
+              aria-disabled={disabled}
+              disabled={disabled}
+              onPress={() => onChange(choice)}
+              style={{
+                borderWidth: 1,
+                borderRadius: 8,
+                paddingHorizontal: 10,
+                paddingVertical: 8,
+                borderColor: selected ? theme.colors.accent : theme.colors.border,
+                backgroundColor: theme.colors.surface1,
+                opacity: disabled ? 0.5 : 1,
+              }}
+            >
+              <Text
+                style={{ color: theme.colors.foreground, fontWeight: selected ? "600" : "400" }}
+              >
+                {selected ? "✓ " : ""}
+                {storeLabel(choice)}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+      {stores.isLoading ? (
+        <Text style={{ color: theme.colors.foregroundMuted }}>Loading profiles…</Text>
+      ) : null}
+      {stores.error ? (
+        <Text style={{ color: theme.colors.statusDanger }}>
+          Could not list OMP profiles.{" "}
+          <Text
+            onPress={() => {
+              void stores.refetch();
+            }}
+            accessibilityRole="button"
+          >
+            Retry
+          </Text>
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/client/omp-store-state.ts

@@ -0,0 +1,45 @@
+import { type OmpStore, storeForProvider } from "../shared/omp-store";
+import type { OmpQuota } from "../shared/quota";
+
+export function ompStoreKey(store?: OmpStore): string {
+  return store?.profile
+    ? `profile:${store.profile}`
+    : store?.agentDir
+      ? `directory:${store.agentDir}`
+      : "default";
+}
+
+export function isOmpPluginProvider(provider?: string): boolean {
+  return provider === "omp-plugin" || storeForProvider(provider) !== undefined;
+}
+
+export function isOmpProvider(provider?: string): boolean {
+  return provider === "omp" || isOmpPluginProvider(provider);
+}
+
+/** Each store owns its own result and in-flight read. Failed reads never become empty success. */
+export function createStoreQuotaLoader(
+  load: (input: { store?: OmpStore }) => Promise<{ quotas: OmpQuota[] }>,
+  maxAgeMs: number,
+  now = Date.now,
+) {
+  const cache = new Map<string, { value: { quotas: OmpQuota[] }; at: number }>();
+  const pending = new Map<string, Promise<{ quotas: OmpQuota[] }>>();
+  return (store?: OmpStore): Promise<{ quotas: OmpQuota[] }> => {
+    const key = ompStoreKey(store);
+    const cached = cache.get(key);
+    if (cached && now() - cached.at < maxAgeMs) return Promise.resolve(cached.value);
+    const current = pending.get(key);
+    if (current) return current;
+    const request = load({ store })
+      .then((value) => {
+        cache.set(key, { value, at: now() });
+        return value;
+      })
+      .finally(() => {
+        pending.delete(key);
+      });
+    pending.set(key, request);
+    return request;
+  };
+}

package/client/provider-diagnostics-state.ts

@@ -0,0 +1,262 @@
+import type { PaseoApi, PaseoProviderSnapshotResult } from "@getpaseo/client";
+import type {
+  OmpLspDiagnostics,
+  OmpMcpDiagnostics,
+  OmpProcessDiagnostics,
+  OmpProviderHealth,
+  OmpVersion,
+  OmpVersionStatus,
+  PathState,
+} from "../shared/provider-diagnostics";
+
+import { isOmpProvider } from "./omp-store-state";
+
+export type ProviderHealthTone = "ok" | "warning" | "danger" | "muted";
+export const OMP_PROVIDER_IDS = ["omp", "omp-plugin"] as const;
+
+export function isUnsupportedHostError(error: unknown): boolean {
+  if (typeof error !== "object" || error === null) return false;
+  const candidate = error as { code?: unknown; name?: unknown };
+  return (
+    candidate.name === "PaseoUpdateHostError" ||
+    candidate.code === "UPDATE_HOST_REQUIRED" ||
+    candidate.code === "UNSUPPORTED_FEATURE"
+  );
+}
+
+type ProviderActions = Pick<PaseoApi["providers"], "refresh" | "snapshot" | "waitForReady">;
+
+/** Initial and post-refresh discovery waits for a settled snapshot; only known old-host errors
+ * fall back to the immediate snapshot API. */
+export async function loadReadyProviderSnapshot(
+  providers: ProviderActions,
+): Promise<PaseoProviderSnapshotResult> {
+  try {
+    return await providers.waitForReady({ timeoutMs: 60_000 });
+  } catch (error) {
+    if (!isUnsupportedHostError(error)) throw error;
+    return providers.snapshot({});
+  }
+}
+
+export interface RefreshDiagnosticsOptions {
+  providers: ProviderActions;
+  providerIds?: readonly string[];
+  loadForcedHealth(): Promise<OmpProviderHealth>;
+  cacheHealth(health: OmpProviderHealth): void;
+  cacheProviders(snapshot: PaseoProviderSnapshotResult): void;
+}
+
+/** Provider refresh and forced health run independently. Each successful result reaches its
+ * cache even when another branch fails; the boolean reports any non-suppressed partial failure. */
+export async function refreshProviderDiagnostics(
+  options: RefreshDiagnosticsOptions,
+): Promise<{ failed: boolean }> {
+  const [providerRefresh, forcedHealth] = await Promise.allSettled([
+    options.providers.refresh({
+      providers: [
+        ...new Set([...OMP_PROVIDER_IDS, ...(options.providerIds ?? []).filter(isOmpProvider)]),
+      ],
+    }),
+    options.loadForcedHealth(),
+  ]);
+  if (forcedHealth.status === "fulfilled") options.cacheHealth(forcedHealth.value);
+
+  const providerSnapshot = await Promise.allSettled([loadReadyProviderSnapshot(options.providers)]);
+  if (providerSnapshot[0].status === "fulfilled") {
+    options.cacheProviders(providerSnapshot[0].value);
+  }
+  const providerRefreshFailed =
+    providerRefresh.status === "rejected" && !isUnsupportedHostError(providerRefresh.reason);
+  return {
+    failed:
+      providerRefreshFailed ||
+      forcedHealth.status === "rejected" ||
+      providerSnapshot[0].status === "rejected",
+  };
+}
+
+const VERSION_STATUS_LABELS: Record<OmpVersionStatus, string> = {
+  ok: "Installed",
+  "not-found": "Not installed",
+  unrunnable: "Found but could not run",
+  timeout: "Version check timed out",
+  "probe-failed": "Version check failed",
+  malformed: "Unrecognized version output",
+};
+
+const VERSION_STATUS_TONES: Record<OmpVersionStatus, ProviderHealthTone> = {
+  ok: "ok",
+  "not-found": "danger",
+  unrunnable: "danger",
+  timeout: "warning",
+  "probe-failed": "warning",
+  malformed: "warning",
+};
+
+export function formatOmpVersion(version: OmpVersion): string {
+  const core = `${version.major}.${version.minor}.${version.patch}`;
+  return version.prerelease ? `${core}-${version.prerelease}` : core;
+}
+
+export interface BinaryHealthSummary {
+  label: string;
+  tone: ProviderHealthTone;
+}
+
+/** Combines version status and the parsed version into one display-ready label and tone. */
+export function summarizeBinaryHealth(binary: OmpProviderHealth["binary"]): BinaryHealthSummary {
+  const label =
+    binary.versionStatus === "ok" && binary.version
+      ? `${VERSION_STATUS_LABELS.ok} (${formatOmpVersion(binary.version)})`
+      : VERSION_STATUS_LABELS[binary.versionStatus];
+  return { label, tone: VERSION_STATUS_TONES[binary.versionStatus] };
+}
+
+/** Distinguishes "not supported" from "we could not tell" so the UI never overclaims. */
+export function summarizeRpcUiSupport(rpcUi: OmpProviderHealth["rpcUi"]): string {
+  if (!rpcUi.checked) return "Unknown (omp binary unavailable)";
+  if (rpcUi.supported === null) return "Unknown (probe failed, empty, or truncated)";
+  return rpcUi.supported ? "Supported" : "Not advertised by this build";
+}
+
+export function rpcUiTone(rpcUi: OmpProviderHealth["rpcUi"]): ProviderHealthTone {
+  if (!rpcUi.checked || rpcUi.supported === null) return "muted";
+  return rpcUi.supported ? "ok" : "muted";
+}
+
+export function summarizeLspSupport(lsp: OmpLspDiagnostics): string {
+  if (lsp.status === "supported") return "Supported";
+  if (lsp.status === "not-advertised") return "Not advertised by this build";
+  return "Unknown (probe failed, empty, or truncated)";
+}
+
+export function lspTone(lsp: OmpLspDiagnostics): ProviderHealthTone {
+  return lsp.status === "supported" ? "ok" : "muted";
+}
+
+export function summarizeMcpDiagnostics(mcp: OmpMcpDiagnostics): string {
+  if (mcp.status === "configured") return `${mcp.serverCount ?? 0} configured`;
+  const label =
+    mcp.status === "unavailable"
+      ? "Unavailable"
+      : mcp.status === "unreadable"
+        ? "Unreadable"
+        : mcp.status === "wrong-type"
+          ? "Wrong type"
+          : "Invalid";
+  return `${label} (${mcp.reason ?? "no detail"})`;
+}
+
+export function mcpTone(mcp: OmpMcpDiagnostics): ProviderHealthTone {
+  if (mcp.status === "configured") return "ok";
+  if (mcp.status === "unavailable") return "muted";
+  return "warning";
+}
+
+export function summarizeProcessDiagnostics(diagnostics: OmpProcessDiagnostics): string {
+  if (diagnostics.status === "unavailable") return "No hub run directory found";
+  if (diagnostics.status === "unknown") return "Unknown (could not read the hub run directory)";
+  const count = diagnostics.trackedCount ?? 0;
+  const statesKnown =
+    diagnostics.activeCount != null &&
+    diagnostics.historicalCount != null &&
+    diagnostics.unknownCount != null;
+  const detail = statesKnown
+    ? `${diagnostics.activeCount} active-state, ${diagnostics.historicalCount} historical, ${diagnostics.unknownCount} unknown`
+    : "states not reported";
+  return `${count} metadata records (${detail}${diagnostics.status === "partial" ? "; partial access" : ""}); live processes not verified`;
+}
+
+export function processTone(diagnostics: OmpProcessDiagnostics): ProviderHealthTone {
+  if (diagnostics.status === "unknown") return "warning";
+  if (diagnostics.status === "partial") return "warning";
+  if (diagnostics.status === "unavailable") return "muted";
+  return "muted";
+}
+
+const PATH_STATE_LABELS: Record<PathState, string> = {
+  available: "Found",
+  missing: "Missing",
+  unreadable: "Unreadable",
+  invalid: "Invalid",
+  "wrong-type": "Wrong type on disk",
+};
+
+const PATH_STATE_TONES: Record<PathState, ProviderHealthTone> = {
+  available: "ok",
+  missing: "danger",
+  unreadable: "warning",
+  invalid: "warning",
+  "wrong-type": "warning",
+};
+
+export interface PathStateSummary {
+  label: string;
+  tone: ProviderHealthTone;
+}
+
+/** Never collapses unreadable/invalid/wrong-type into missing; each state gets its own label. */
+export function summarizePathState(state: PathState): PathStateSummary {
+  return { label: PATH_STATE_LABELS[state], tone: PATH_STATE_TONES[state] };
+}
+
+/**
+ * A null memory backend is ambiguous on its own: the config could be genuinely unset, or simply
+ * unavailable/invalid/wrong-type. Only a truly "available" config licenses "Not configured";
+ * every other state reports its own unavailability instead of guessing.
+ */
+export function summarizeMemoryBackend(health: OmpProviderHealth): string {
+  if (health.roots.configState !== "available") {
+    return `Unknown (config ${PATH_STATE_LABELS[health.roots.configState].toLowerCase()})`;
+  }
+  return health.memoryBackend ?? "Not configured";
+}
+
+export interface KnownOmpProviderSummary {
+  id: string;
+  label: string;
+  status: string;
+  enabled: boolean;
+}
+
+export interface ProviderStatusSummary {
+  label: string;
+  tone: ProviderHealthTone;
+}
+
+export function summarizeProviderStatus(
+  provider: Pick<KnownOmpProviderSummary, "enabled" | "status">,
+): ProviderStatusSummary {
+  if (!provider.enabled) return { label: "Disabled", tone: "muted" };
+  switch (provider.status) {
+    case "ready":
+      return { label: "Ready", tone: "ok" };
+    case "loading":
+      return { label: "Loading", tone: "warning" };
+    case "error":
+      return { label: "Error", tone: "danger" };
+    case "unavailable":
+      return { label: "Unavailable", tone: "danger" };
+    default:
+      return { label: "Unknown", tone: "muted" };
+  }
+}
+
+/** Narrows a full provider snapshot to the native and plugin OMP identities. */
+export function selectKnownOmpProviders(
+  entries: readonly PaseoProviderSnapshotResult["entries"][number][],
+): KnownOmpProviderSummary[] {
+  return entries.flatMap((entry) =>
+    isOmpProvider(entry.provider)
+      ? [
+          {
+            id: entry.provider,
+            label: entry.label ?? entry.provider,
+            status: entry.status,
+            enabled: entry.enabled ?? true,
+          },
+        ]
+      : [],
+  );
+}

package/client/provider-icon.tsx

@@ -0,0 +1,27 @@
+import type { PluginButtonIconProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { ComponentType } from "react";
+import { View } from "react-native";
+import { type QuotaSeverity, quotaProviderIconName } from "./quota-state";
+
+export function quotaProviderIcon(
+  provider: string | null,
+  severity: QuotaSeverity,
+): ComponentType<PluginButtonIconProps> {
+  function ProviderIcon({ size, color, theme }: PluginButtonIconProps) {
+    const severityColor =
+      severity === "danger"
+        ? theme.colors.statusDanger
+        : severity === "warning"
+          ? theme.colors.statusWarning
+          : severity === "ok"
+            ? theme.colors.statusSuccess
+            : color;
+    return (
+      <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+        <Icon name={quotaProviderIconName(provider)} size={size} color={severityColor} />
+      </View>
+    );
+  }
+  return ProviderIcon;
+}

package/client/provider-image.tsx

@@ -0,0 +1,66 @@
+import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import { useMemo, useState } from "react";
+import { Image, Text, View } from "react-native";
+import { type OmpImageTimelineData, visibleOmpImageText } from "../shared/provider-image";
+
+export function OmpImageTimeline({ item, theme }: PluginTimelineItemProps<OmpImageTimelineData>) {
+  const styles = useMemo(
+    () => ({
+      root: { gap: 8 },
+      label: { color: theme.colors.foregroundMuted, fontSize: 12, fontWeight: "600" as const },
+      text: { color: theme.colors.foreground, fontSize: 13 },
+      image: {
+        width: "100%" as const,
+        minHeight: 220,
+        aspectRatio: 16 / 9,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface1,
+      },
+      imageFallback: {
+        alignItems: "center" as const,
+        justifyContent: "center" as const,
+        padding: 16,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+      },
+      imageFallbackText: {
+        color: theme.colors.foregroundMuted,
+        fontSize: 12,
+        textAlign: "center" as const,
+      },
+    }),
+    [theme],
+  );
+  const [failedImageIds, setFailedImageIds] = useState<ReadonlySet<string>>(() => new Set());
+  const visibleText = useMemo(() => visibleOmpImageText(item.data.text), [item.data.text]);
+  return (
+    <View style={styles.root}>
+      <Text style={styles.label}>{item.data.label}</Text>
+      {visibleText ? <Text style={styles.text}>{visibleText}</Text> : null}
+      {item.data.images.map((image, index) =>
+        failedImageIds.has(image.id) ? (
+          <View key={image.id} style={[styles.image, styles.imageFallback]}>
+            <Text style={styles.imageFallbackText}>
+              {image.mimeType.replace("image/", "").toUpperCase()} image could not be rendered on
+              this Paseo client.
+            </Text>
+          </View>
+        ) : (
+          <Image
+            key={image.id}
+            source={{ uri: `data:${image.mimeType};base64,${image.data}` }}
+            resizeMode="contain"
+            accessibilityLabel={`${item.data.label} image ${index + 1}`}
+            onError={() =>
+              setFailedImageIds((current) => {
+                if (current.has(image.id)) return current;
+                return new Set([...current, image.id]);
+              })
+            }
+            style={styles.image}
+          />
+        ),
+      )}
+    </View>
+  );
+}

package/client/quota-popover.tsx

@@ -0,0 +1,155 @@
+import { type PluginButtonContentProps, useAgent, useRpc } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { storeForProvider, storeLabel } from "../shared/omp-store";
+import { listOmpQuotas } from "../shared/quota";
+import { ompStoreKey } from "./omp-store-state";
+import {
+  type QuotaProviderGroup,
+  quotaProviderFromSession,
+  quotaProviderGroups,
+  quotaProviderIconName,
+  quotaProviderLabel,
+  quotaResetLabel,
+  quotaSeverityFromFraction,
+} from "./quota-state";
+
+const QUOTA_POLL_MS = 30_000;
+
+export function QuotaPopover(props: PluginButtonContentProps) {
+  const { theme, layout } = props;
+  const agentId = props.context === "agent" ? props.agentId : "";
+  const session = useAgent(agentId, (agent) => ({ model: agent.model, provider: agent.provider }));
+  const currentProvider = quotaProviderFromSession(session?.provider ?? "", session?.model ?? null);
+  const store = storeForProvider(session?.provider);
+  const loadQuotas = useRpc(listOmpQuotas);
+  const quotas = useQuery({
+    queryKey: ["paseo-omp", "quotas", ompStoreKey(store)],
+    queryFn: () => loadQuotas({ store }),
+    enabled: session !== undefined && session !== null,
+    refetchInterval: QUOTA_POLL_MS,
+  });
+
+  function severityColor(severity: ReturnType<typeof quotaSeverityFromFraction>): string {
+    if (severity === "danger") return theme.colors.statusDanger;
+    if (severity === "warning") return theme.colors.statusWarning;
+    if (severity === "ok") return theme.colors.statusSuccess;
+    return theme.colors.foregroundMuted;
+  }
+
+  const styles = useMemo(
+    () => ({
+      root: { gap: layout.compact ? 8 : 10, minWidth: layout.compact ? undefined : 260 },
+      muted: { color: theme.colors.foregroundMuted, fontSize: 13 },
+      error: { color: theme.colors.statusDanger, fontSize: 13 },
+      group: (current: boolean) => ({
+        gap: 6,
+        padding: layout.compact ? 10 : 12,
+        borderRadius: 10,
+        borderWidth: current ? 2 : 1,
+        borderColor: current ? theme.colors.accent : theme.colors.border,
+        backgroundColor: theme.colors.surface1,
+      }),
+      groupHeader: { flexDirection: "row" as const, alignItems: "center" as const, gap: 6 },
+      groupLabel: {
+        color: theme.colors.foreground,
+        fontSize: 14,
+        fontWeight: "700" as const,
+        flex: 1,
+      },
+      badge: {
+        color: theme.colors.accentForeground,
+        backgroundColor: theme.colors.accent,
+        fontSize: 10,
+        fontWeight: "700" as const,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 999,
+        overflow: "hidden" as const,
+      },
+      row: { gap: 3 },
+      rowHeader: {
+        flexDirection: "row" as const,
+        justifyContent: "space-between" as const,
+        gap: 8,
+      },
+      rowLabel: { color: theme.colors.foreground, fontSize: 12, flex: 1 },
+      rowValue: { fontSize: 12, fontWeight: "600" as const },
+      track: {
+        height: 5,
+        borderRadius: 3,
+        backgroundColor: theme.colors.surface2,
+        overflow: "hidden" as const,
+      },
+      detail: { color: theme.colors.foregroundMuted, fontSize: 11 },
+    }),
+    [layout.compact, theme],
+  );
+
+  if (!session || quotas.isLoading) return <Text style={styles.muted}>Loading omp quotas…</Text>;
+  if (quotas.error) return <Text style={styles.error}>Could not read omp quota state.</Text>;
+
+  const groups = quotaProviderGroups(quotas.data?.quotas ?? [], currentProvider);
+  const hasCurrent = groups.some((group) => group.provider === currentProvider);
+
+  if (groups.length === 0) {
+    return <Text style={styles.muted}>No provider quota data available.</Text>;
+  }
+
+  return (
+    <View style={styles.root}>
+      <Text style={styles.muted}>{storeLabel(store)}</Text>
+      {currentProvider && !hasCurrent ? (
+        <Text style={styles.muted}>
+          {`No recorded quota yet for ${quotaProviderLabel(currentProvider)} (this session's provider).`}
+        </Text>
+      ) : null}
+      {groups.map((group: QuotaProviderGroup) => {
+        const current = group.provider === currentProvider;
+        return (
+          <View key={group.provider} style={styles.group(current)}>
+            <View style={styles.groupHeader}>
+              <Icon
+                name={quotaProviderIconName(group.provider)}
+                size={16}
+                color={severityColor(group.severity)}
+              />
+              <Text style={styles.groupLabel}>{quotaProviderLabel(group.provider)}</Text>
+              {current ? <Text style={styles.badge}>CURRENT</Text> : null}
+            </View>
+            {group.quotas.map((quota) => {
+              const severity = quotaSeverityFromFraction(quota.usedFraction);
+              const color = severityColor(severity);
+              const pct =
+                quota.usedFraction === null
+                  ? 0
+                  : Math.min(100, Math.round(quota.usedFraction * 100));
+              return (
+                <View key={`${quota.label}:${quota.windowLabel}`} style={styles.row}>
+                  <View style={styles.rowHeader}>
+                    <Text numberOfLines={1} style={styles.rowLabel}>
+                      {quota.label}
+                    </Text>
+                    <Text style={[styles.rowValue, { color }]}>
+                      {quota.usedFraction === null ? "Unknown" : `${pct}%`}
+                    </Text>
+                  </View>
+                  <View style={styles.track}>
+                    <View style={{ height: "100%", width: `${pct}%`, backgroundColor: color }} />
+                  </View>
+                  <Text style={styles.detail}>
+                    {[quota.windowLabel, quotaResetLabel(quota.resetsAt)]
+                      .filter(Boolean)
+                      .join(" · ")}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+        );
+      })}
+    </View>
+  );
+}