@omercnet/paseo-context-mode 3.1.3 → 3.1.4-next.434.1

package/client/controls.tsx

@@ -0,0 +1,295 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import { Loading } from "@getpaseo/plugin/client/ui";
+import type { ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+
+/**
+ * `primary`: the one accent action on a surface. `secondary`: the default. `outline`: a quiet row
+ * action. `destructive`: only the confirm button inside a confirmation.
+ */
+export type ButtonVariant = "primary" | "secondary" | "outline" | "destructive";
+
+interface ActionButtonProps {
+  theme: PluginTheme;
+  label: string;
+  onPress(): void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  /** Set for disclosure buttons so assistive tech hears the expanded state. */
+  expanded?: boolean;
+}
+
+interface ButtonColors {
+  background: string;
+  border: string;
+  text: string;
+}
+
+function buttonColors(theme: PluginTheme, variant: ButtonVariant): ButtonColors {
+  const { colors } = theme;
+  const byVariant: Record<ButtonVariant, ButtonColors> = {
+    primary: { background: colors.accent, border: colors.accent, text: colors.accentForeground },
+    secondary: { background: colors.surface2, border: colors.surface2, text: colors.foreground },
+    outline: { background: "transparent", border: colors.border, text: colors.foreground },
+    destructive: {
+      background: colors.statusDanger,
+      border: colors.statusDanger,
+      text: colors.accentForeground,
+    },
+  };
+  return byVariant[variant];
+}
+
+export function ActionButton({
+  theme,
+  label,
+  onPress,
+  variant = "secondary",
+  disabled = false,
+  accessibilityLabel,
+  expanded,
+}: ActionButtonProps) {
+  const colors = buttonColors(theme, variant);
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, expanded }}
+      disabled={disabled}
+      onPress={onPress}
+      style={{
+        minHeight: 32,
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "flex-start",
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: 999,
+        backgroundColor: colors.background,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <Text style={{ color: colors.text, fontSize: 13, fontWeight: "500" }}>{label}</Text>
+    </Pressable>
+  );
+}
+
+export type StatusTone = "success" | "warning" | "danger" | "neutral";
+
+function toneColor(theme: PluginTheme, tone: StatusTone): string {
+  const byTone: Record<StatusTone, string> = {
+    success: theme.colors.statusSuccess,
+    warning: theme.colors.statusWarning,
+    danger: theme.colors.statusDanger,
+    neutral: theme.colors.foreground,
+  };
+  return byTone[tone];
+}
+
+interface StatusPillProps {
+  theme: PluginTheme;
+  label: string;
+  tone: StatusTone;
+}
+
+/** Status text in its status token on the neutral pill shell. */
+export function StatusPill({ theme, label, tone }: StatusPillProps) {
+  return (
+    <View
+      style={{
+        alignSelf: "flex-start",
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 999,
+        backgroundColor: theme.colors.surface2,
+      }}
+    >
+      <Text style={{ color: toneColor(theme, tone), fontSize: 12, fontWeight: "400" }}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+export interface ChoiceOption<Value extends string> {
+  value: Value;
+  label: string;
+}
+
+interface ChoicesProps<Value extends string> {
+  theme: PluginTheme;
+  options: readonly ChoiceOption<Value>[];
+  /** Null when nothing is selected yet. */
+  value: Value | null;
+  onChange(value: Value): void;
+  accessibilityLabel(option: ChoiceOption<Value>): string;
+  disabled?: boolean;
+  /** `tab` renders a tablist; otherwise a radio group. */
+  role?: "radio" | "tab";
+}
+
+/** Segmented choice: the selected segment is a surface fill with foreground text. */
+export function Choices<Value extends string>({
+  theme,
+  options,
+  value,
+  onChange,
+  accessibilityLabel,
+  disabled = false,
+  role = "radio",
+}: ChoicesProps<Value>) {
+  return (
+    <View
+      accessibilityRole={role === "tab" ? "tablist" : "radiogroup"}
+      style={{
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignSelf: role === "tab" ? "stretch" : "flex-start",
+        gap: 4,
+        padding: 4,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 12,
+        backgroundColor: theme.colors.surface1,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {options.map((option) => (
+        <ChoiceSegment
+          key={option.value}
+          accessibilityLabel={accessibilityLabel(option)}
+          disabled={disabled}
+          label={option.label}
+          onPress={() => onChange(option.value)}
+          role={role}
+          selected={value === option.value}
+          stretch={role === "tab"}
+          theme={theme}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface ChoiceSegmentProps {
+  theme: PluginTheme;
+  label: string;
+  accessibilityLabel: string;
+  selected: boolean;
+  disabled: boolean;
+  stretch: boolean;
+  role: "radio" | "tab";
+  onPress(): void;
+}
+
+function ChoiceSegment({
+  theme,
+  label,
+  accessibilityLabel,
+  selected,
+  disabled,
+  stretch,
+  role,
+  onPress,
+}: ChoiceSegmentProps) {
+  const state = role === "tab" ? { selected, disabled } : { checked: selected, disabled };
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={role}
+      accessibilityState={state}
+      disabled={disabled}
+      onPress={onPress}
+      style={{
+        flexGrow: stretch ? 1 : 0,
+        minHeight: 32,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: 12,
+        borderRadius: 8,
+        backgroundColor: selected ? theme.colors.surface2 : "transparent",
+      }}
+    >
+      <Text
+        style={{
+          color: selected ? theme.colors.foreground : theme.colors.foregroundMuted,
+          fontSize: 13,
+          fontWeight: "500",
+        }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+interface CardProps {
+  theme: PluginTheme;
+  children: ReactNode;
+}
+
+/** A bordered group of related content. */
+export function Card({ theme, children }: CardProps) {
+  return (
+    <View
+      style={{
+        width: "100%",
+        gap: 12,
+        padding: 16,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 12,
+        backgroundColor: theme.colors.surface1,
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+interface PendingProps {
+  theme: PluginTheme;
+  label: string;
+}
+
+/** Inline loading: the host spinner beside a short in-flight label. */
+export function Pending({ theme, label }: PendingProps) {
+  return (
+    <View
+      accessibilityLiveRegion="polite"
+      style={{ flexDirection: "row", alignItems: "center", gap: 8 }}
+    >
+      <View style={{ width: 16, height: 16 }}>
+        <Loading />
+      </View>
+      <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>{label}</Text>
+    </View>
+  );
+}
+
+export function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+interface ErrorTextProps {
+  theme: PluginTheme;
+  error: unknown;
+}
+
+/** One-sentence failure under the control it belongs to. Renders nothing without an error. */
+export function ErrorText({ theme, error }: ErrorTextProps) {
+  if (!error) return null;
+  return (
+    <Text
+      accessibilityRole="alert"
+      style={{ color: theme.colors.statusDanger, fontSize: 12, lineHeight: 16 }}
+    >
+      {errorMessage(error)}
+    </Text>
+  );
+}

package/client/diagnostics-section.tsx

@@ -0,0 +1,178 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import { useRpc } from "@getpaseo/plugin/client";
+import {
+  ScrollView,
+  SettingsAction,
+  SettingsCard,
+  SettingsSection,
+  SettingsSelect,
+} from "@getpaseo/plugin/client/ui";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import {
+  type DoctorReport,
+  type DoctorStatusRow,
+  getContextModeDoctorReport,
+} from "../shared/actions";
+import { CONTEXT_MODE_PROVIDERS, type ContextModeProvider } from "../shared/providers";
+import {
+  ActionButton,
+  Card,
+  type ChoiceOption,
+  errorMessage,
+  Pending,
+  StatusPill,
+  type StatusTone,
+} from "./controls";
+
+const PROVIDER_OPTIONS: readonly ChoiceOption<ContextModeProvider>[] = CONTEXT_MODE_PROVIDERS.map(
+  ({ provider, label }) => ({ value: provider, label }),
+);
+
+interface DoctorStatusPresentation {
+  label: string;
+  tone: StatusTone;
+}
+
+const DOCTOR_STATUS: Record<DoctorStatusRow["status"], DoctorStatusPresentation> = {
+  ok: { label: "OK", tone: "success" },
+  warning: { label: "Warning", tone: "warning" },
+  error: { label: "Error", tone: "danger" },
+};
+
+interface DiagnosticsSectionProps {
+  theme: PluginTheme;
+}
+
+export function DiagnosticsSection({ theme }: DiagnosticsSectionProps) {
+  const loadDoctor = useRpc(getContextModeDoctorReport);
+  const [provider, setProvider] = useState<ContextModeProvider>("claude");
+  const doctor = useMutation({
+    mutationFn: (target: ContextModeProvider) => loadDoctor({ provider: target }),
+  });
+
+  function changeProvider(next: ContextModeProvider) {
+    setProvider(next);
+    doctor.reset();
+  }
+
+  return (
+    <SettingsSection
+      title="Diagnostics"
+      info="Doctor runs against a Paseo-owned probe store, so your project data is untouched."
+    >
+      <View style={{ gap: 16 }}>
+        <SettingsCard>
+          <SettingsSelect
+            label="Provider"
+            value={provider}
+            options={PROVIDER_OPTIONS}
+            disabled={doctor.isPending}
+            onValueChange={changeProvider}
+          />
+          <SettingsAction
+            label="Doctor"
+            hint="Health checks for the Context Mode runtime"
+            actionLabel={doctor.isPending ? "Running..." : "Run doctor"}
+            disabled={doctor.isPending}
+            error={doctor.error ? errorMessage(doctor.error) : null}
+            onPress={() => doctor.mutate(provider)}
+          />
+        </SettingsCard>
+        {doctor.isPending ? <Pending theme={theme} label="Running diagnostics..." /> : null}
+        {doctor.data ? <DoctorResult report={doctor.data} theme={theme} /> : null}
+      </View>
+    </SettingsSection>
+  );
+}
+
+interface DoctorResultProps {
+  report: DoctorReport;
+  theme: PluginTheme;
+}
+
+function DoctorResult({ report, theme }: DoctorResultProps) {
+  const [showRaw, setShowRaw] = useState(false);
+  const hasRows = report.rows.length > 0;
+  const hasRawOutput = report.rawOutput.trim().length > 0;
+  const rawVisible = !hasRows || showRaw;
+  const mutedStyle = { color: theme.colors.foregroundMuted, fontSize: 12 };
+
+  return (
+    <Card theme={theme}>
+      <View accessibilityLiveRegion="polite" style={{ gap: 12 }}>
+        <Text style={mutedStyle}>Checked as {report.platform}</Text>
+        {report.rows.map((row) => (
+          <DoctorRow key={`${row.status}:${row.check}:${row.detail}`} row={row} theme={theme} />
+        ))}
+        {hasRows && hasRawOutput ? (
+          <ActionButton
+            theme={theme}
+            variant="outline"
+            expanded={showRaw}
+            label={showRaw ? "Hide raw diagnostics" : "Show raw diagnostics"}
+            onPress={() => setShowRaw((visible) => !visible)}
+          />
+        ) : null}
+        {rawVisible ? <RawOutput output={report.rawOutput} theme={theme} /> : null}
+      </View>
+    </Card>
+  );
+}
+
+interface DoctorRowProps {
+  row: DoctorStatusRow;
+  theme: PluginTheme;
+}
+
+function DoctorRow({ row, theme }: DoctorRowProps) {
+  const status = DOCTOR_STATUS[row.status];
+  const detailStyle = { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 16 };
+  return (
+    <View accessibilityLabel={`${row.check}: ${status.label}. ${row.detail}`} style={{ gap: 4 }}>
+      <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+        <Text style={{ flexShrink: 1, color: theme.colors.foreground }}>{row.check}</Text>
+        <StatusPill theme={theme} label={status.label} tone={status.tone} />
+      </View>
+      {row.detail ? (
+        <Text selectable style={detailStyle}>
+          {row.detail}
+        </Text>
+      ) : null}
+      {row.fix ? (
+        <Text selectable style={detailStyle}>
+          Fix: {row.fix}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+interface RawOutputProps {
+  output: string;
+  theme: PluginTheme;
+}
+
+function RawOutput({ output, theme }: RawOutputProps) {
+  return (
+    <View style={{ gap: 4 }}>
+      <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, fontWeight: "500" }}>
+        Raw diagnostic output
+      </Text>
+      <ScrollView nestedScrollEnabled style={{ maxHeight: 220 }}>
+        <Text
+          selectable
+          style={{
+            color: theme.colors.foreground,
+            fontFamily: "monospace",
+            fontSize: 12,
+            lineHeight: 16,
+          }}
+        >
+          {output || "No diagnostic text"}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}

package/client/{context-mode-footer.tsx → footer.tsx}

@@ -2,11 +2,20 @@ import { type PluginSidebarItemProps, useRpc, useSettings } from "@getpaseo/plug
 import { SidebarRow } from "@getpaseo/plugin/client/ui";
 import { useQuery } from "@tanstack/react-query";
 import { Text } from "react-native";
-import { contextModeSettings, getContextModeStatus } from "../shared";
+import { getContextModeStatus } from "../shared/contracts";
+import { contextModeSettings } from "../shared/settings";
 
 // The footer stays mounted all session; poll slowly because each status miss spawns the binary.
 const FOOTER_REFRESH_MS = 60_000;
 
+type FooterHealth = "failing" | "healthy" | "checking";
+
+const HEALTH_LABELS: Record<FooterHealth, string> = {
+  failing: "Failing",
+  healthy: "Healthy",
+  checking: "Checking",
+};
+
 export function ContextModeFooter({
   theme,
   host,
@@ -22,13 +31,17 @@ export function ContextModeFooter({
     staleTime: FOOTER_REFRESH_MS,
     enabled: settings.status === "ready",
   });
-  const failing =
-    settings.status === "error" ||
-    settings.status === "invalid" ||
-    Boolean(status.error) ||
-    (status.data && status.data.state !== "ready");
-  const healthy = settings.status === "ready" && !failing && status.data?.state === "ready";
-  const label = failing ? "Failing" : healthy ? "Healthy" : "Checking";
+  const settingsFailed = settings.status === "error" || settings.status === "invalid";
+  const statusFailed = Boolean(status.error) || status.data?.state === "unavailable";
+  const statusReady = settings.status === "ready" && status.data?.state === "ready";
+  let health: FooterHealth = "checking";
+  if (settingsFailed || statusFailed) health = "failing";
+  else if (statusReady) health = "healthy";
+  const healthColors: Record<FooterHealth, string> = {
+    failing: theme.colors.statusDanger,
+    healthy: theme.colors.statusSuccess,
+    checking: theme.colors.foregroundMuted,
+  };
   return (
     <SidebarRow
       icon="Gauge"
@@ -36,18 +49,7 @@ export function ContextModeFooter({
       active={currentScreen?.screenId === "context-mode"}
       onPress={() => openScreen({ screenId: "context-mode" })}
       trailing={
-        <Text
-          style={{
-            color: failing
-              ? theme.colors.statusDanger
-              : healthy
-                ? theme.colors.statusSuccess
-                : theme.colors.foregroundMuted,
-            fontSize: 12,
-          }}
-        >
-          {label}
-        </Text>
+        <Text style={{ color: healthColors[health], fontSize: 12 }}>{HEALTH_LABELS[health]}</Text>
       }
     />
   );