@omercnet/paseo-gas-city 0.1.0

package/client/gas-city-surface.tsx

@@ -0,0 +1,343 @@
+import { type PluginSurfaceProps, useRpc, useSettings } from "@getpaseo/plugin/client";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  discoverSupervisor,
+  type GasCitySettings,
+  gasCitySettings,
+  toGasCityRpcSettings,
+} from "../shared";
+import { CityOperations } from "./city-operations";
+import { selectAvailableCity } from "./view-model";
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : "An unexpected error occurred.";
+}
+
+export function GasCitySurface(props: PluginSurfaceProps) {
+  const settings = useSettings(gasCitySettings);
+  if (settings.status === "loading") {
+    return (
+      <SurfaceState
+        {...props}
+        title="Loading Gas City"
+        body="Reading persisted connection settings."
+        loading
+      />
+    );
+  }
+  if (settings.status !== "ready") {
+    return (
+      <SurfaceState
+        {...props}
+        title="Gas City settings unavailable"
+        body={settings.error}
+        onRetry={() => void settings.reload()}
+      />
+    );
+  }
+  return <ReadyGasCitySurface key={settings.revision} {...props} settings={settings.values} />;
+}
+
+function ReadyGasCitySurface({
+  theme,
+  layout,
+  host,
+  navigation,
+  settings,
+}: PluginSurfaceProps & { settings: GasCitySettings }) {
+  const styles = useMemo(() => createStyles(theme, layout.compact), [layout.compact, theme]);
+  const rpcSettings = useMemo(() => toGasCityRpcSettings(settings), [settings]);
+  const loadDiscovery = useRpc(discoverSupervisor);
+  const discovery = useQuery({
+    queryKey: ["gas-city", host.id, settings.endpointUrl, "discovery"],
+    queryFn: () => loadDiscovery({ settings: rpcSettings }),
+    refetchInterval: settings.refreshIntervalMs,
+  });
+  const retryDiscovery = () => void discovery.refetch();
+  const [preferredCity, setPreferredCity] = useState<string | null>(null);
+
+  if (discovery.isPending && !discovery.data) {
+    return (
+      <SurfaceState
+        theme={theme}
+        layout={layout}
+        host={host}
+        navigation={navigation}
+        title="Finding Gas City"
+        body="Contacting the configured supervisor."
+        loading
+      />
+    );
+  }
+  if (discovery.error && !discovery.data) {
+    return (
+      <SurfaceState
+        theme={theme}
+        layout={layout}
+        host={host}
+        navigation={navigation}
+        title="Could not reach Gas City"
+        body={errorMessage(discovery.error)}
+        onRetry={retryDiscovery}
+      />
+    );
+  }
+  if (!discovery.data) {
+    return (
+      <SurfaceState
+        theme={theme}
+        layout={layout}
+        host={host}
+        navigation={navigation}
+        title="No supervisor data"
+        body="The supervisor returned no usable discovery response."
+        onRetry={retryDiscovery}
+      />
+    );
+  }
+
+  const data = discovery.data;
+  const selectedCity = selectAvailableCity(preferredCity, data.cities);
+  if (data.state !== "available" || !data.supervisor) {
+    const diagnostic = data.diagnostics.map((item) => item.message).join(" ");
+    return (
+      <SurfaceState
+        theme={theme}
+        layout={layout}
+        host={host}
+        navigation={navigation}
+        title={
+          data.state === "not-configured" ? "Gas City is not configured" : "Gas City is unavailable"
+        }
+        body={
+          diagnostic || `Supervisor state: ${data.state}. Check the endpoint in Gas City settings.`
+        }
+        onRetry={retryDiscovery}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.supervisorBar}>
+        <View style={styles.supervisorTitleBlock}>
+          <View style={styles.supervisorTitleRow}>
+            <View style={[styles.statusDot, { backgroundColor: theme.colors.statusSuccess }]} />
+            <Text accessibilityRole="header" style={styles.supervisorTitle}>
+              Supervisor
+            </Text>
+          </View>
+          <Text style={styles.supervisorMeta} numberOfLines={1}>
+            {data.supervisor.endpointUrl} · {data.supervisor.runningCityCount}/
+            {data.supervisor.cityCount} cities running
+          </Text>
+        </View>
+        <View style={styles.versionBadge}>
+          <Text style={styles.versionText}>{data.supervisor.version ?? "version unknown"}</Text>
+        </View>
+      </View>
+      {data.diagnostics.length > 0 ? (
+        <View accessibilityRole="alert" style={styles.discoveryDiagnostics}>
+          <Icon name="TriangleAlert" size={14} color={theme.colors.statusWarning} />
+          <Text style={styles.discoveryDiagnosticText} numberOfLines={2}>
+            {data.diagnostics.map((diagnostic) => diagnostic.message).join(" · ")}
+          </Text>
+        </View>
+      ) : null}
+      {data.cities.length > 0 ? (
+        <ScrollView
+          horizontal
+          style={styles.cityRailScroller}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.cityRail}
+        >
+          {data.cities.map((city) => {
+            const selected = selectedCity === city.name;
+            return (
+              <Pressable
+                key={`${city.path}:${city.name}`}
+                accessibilityRole="button"
+                accessibilityLabel={`Show ${city.name} city operations`}
+                accessibilityState={{ selected }}
+                onPress={() => setPreferredCity(city.name)}
+                style={({ pressed }) => [
+                  styles.cityChip,
+                  selected && styles.cityChipSelected,
+                  pressed && styles.pressed,
+                ]}
+              >
+                <View
+                  style={[
+                    styles.cityDot,
+                    {
+                      backgroundColor: city.running
+                        ? theme.colors.statusSuccess
+                        : theme.colors.statusWarning,
+                    },
+                  ]}
+                />
+                <Text style={[styles.cityChipText, selected && styles.cityChipTextSelected]}>
+                  {city.name}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      ) : null}
+      <View style={styles.body}>
+        {selectedCity ? (
+          <CityOperations
+            key={`${settings.endpointUrl}:${selectedCity}`}
+            theme={theme}
+            layout={layout}
+            host={host}
+            cityName={selectedCity}
+            rigName={null}
+            settings={settings}
+          />
+        ) : (
+          <SurfaceState
+            theme={theme}
+            layout={layout}
+            host={host}
+            navigation={navigation}
+            title="No cities discovered"
+            body="The supervisor is available but has not reported a city."
+            onRetry={retryDiscovery}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function SurfaceState({
+  theme,
+  title,
+  body,
+  loading,
+  onRetry,
+}: PluginSurfaceProps & { title: string; body: string; loading?: boolean; onRetry?: () => void }) {
+  const styles = useMemo(() => createStyles(theme, true), [theme]);
+  return (
+    <View style={styles.stateScreen}>
+      {loading ? (
+        <ActivityIndicator color={theme.colors.accent} />
+      ) : (
+        <Icon name="Factory" size={28} color={theme.colors.foregroundMuted} />
+      )}
+      <Text accessibilityRole="header" style={styles.stateTitle}>
+        {title}
+      </Text>
+      <Text style={styles.stateBody}>{body}</Text>
+      {onRetry ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Retry Gas City"
+          onPress={onRetry}
+          style={({ pressed }) => [styles.retryButton, pressed && styles.pressed]}
+        >
+          <Text style={styles.retryText}>Retry</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: PluginSurfaceProps["theme"], compact: boolean) {
+  return StyleSheet.create({
+    screen: { flex: 1, backgroundColor: theme.colors.surface0 },
+    supervisorBar: {
+      minHeight: 56,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 10,
+      paddingHorizontal: compact ? 12 : 18,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border,
+      backgroundColor: theme.colors.surface0,
+    },
+    supervisorTitleBlock: { flex: 1, minWidth: 0, gap: 3 },
+    supervisorTitleRow: { flexDirection: "row", alignItems: "center", gap: 7 },
+    statusDot: { width: 8, height: 8, borderRadius: 4 },
+    supervisorTitle: { color: theme.colors.foreground, fontSize: 13, fontWeight: "800" },
+    supervisorMeta: { color: theme.colors.foregroundMuted, fontSize: 10 },
+    versionBadge: {
+      paddingHorizontal: 8,
+      paddingVertical: 5,
+      borderRadius: 6,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.surface0,
+    },
+    versionText: { color: theme.colors.foregroundMuted, fontSize: 10, fontWeight: "600" },
+    discoveryDiagnostics: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 7,
+      paddingHorizontal: compact ? 12 : 18,
+      paddingVertical: 8,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border,
+    },
+    discoveryDiagnosticText: { flex: 1, color: theme.colors.statusWarning, fontSize: 10 },
+    cityRailScroller: { flexGrow: 0 },
+    cityRail: {
+      gap: 6,
+      paddingHorizontal: compact ? 12 : 18,
+      paddingVertical: 9,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border,
+    },
+    cityChip: {
+      minHeight: 32,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      paddingHorizontal: 9,
+      borderRadius: 6,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.surface0,
+    },
+    cityChipSelected: { borderColor: theme.colors.accent, backgroundColor: theme.colors.surface0 },
+    cityDot: { width: 6, height: 6, borderRadius: 3 },
+    cityChipText: { color: theme.colors.foregroundMuted, fontSize: 11, fontWeight: "600" },
+    cityChipTextSelected: { color: theme.colors.foreground },
+    body: { flex: 1 },
+    stateScreen: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 9,
+      padding: 24,
+      backgroundColor: theme.colors.surface0,
+    },
+    stateTitle: {
+      color: theme.colors.foreground,
+      fontSize: 17,
+      fontWeight: "800",
+      textAlign: "center",
+    },
+    stateBody: {
+      maxWidth: 480,
+      color: theme.colors.foregroundMuted,
+      fontSize: 12,
+      lineHeight: 18,
+      textAlign: "center",
+    },
+    retryButton: {
+      minHeight: 36,
+      justifyContent: "center",
+      paddingHorizontal: 13,
+      borderRadius: 7,
+      backgroundColor: theme.colors.accent,
+    },
+    retryText: { color: theme.colors.accentForeground, fontSize: 12, fontWeight: "700" },
+    pressed: { opacity: 0.72 },
+  });
+}

package/client/settings-screen.tsx

@@ -0,0 +1,286 @@
+import { type PluginSurfaceProps, type SettingsState, useSettings } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsInput,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { useCallback, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { endpointUrlSchema, type GasCitySettings, gasCitySettings } from "../shared";
+
+type ReadySettings = Extract<SettingsState<typeof gasCitySettings.schema>, { status: "ready" }>;
+
+const refreshOptions = [
+  { label: "2 seconds", value: "2000" },
+  { label: "5 seconds", value: "5000" },
+  { label: "10 seconds", value: "10000" },
+  { label: "30 seconds", value: "30000" },
+  { label: "60 seconds", value: "60000" },
+] as const;
+const eventLimitOptions = [25, 50, 100, 250, 500].map((value) => ({
+  label: `${value} events`,
+  value: String(value),
+}));
+
+function ReadySettingsScreen({
+  settings,
+  theme,
+}: {
+  settings: ReadySettings;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const [endpointUrl, setEndpointUrl] = useState(settings.values.endpointUrl);
+  const [workspaceId, setWorkspaceId] = useState("");
+  const [cityName, setCityName] = useState("");
+  const [rigName, setRigName] = useState("");
+  const [mappingError, setMappingError] = useState<string | null>(null);
+  const styles = useMemo(
+    () => ({
+      root: { gap: 16 },
+      danger: { color: theme.colors.statusDanger },
+      muted: { color: theme.colors.foregroundMuted },
+      value: { color: theme.colors.foreground },
+      warning: { color: theme.colors.statusWarning },
+    }),
+    [theme],
+  );
+  const save = useCallback(
+    (patch: Partial<GasCitySettings>) =>
+      settings.save({ ...settings.values, ...patch }, settings.revision),
+    [settings],
+  );
+  const normalizedEndpoint = endpointUrl.trim();
+  const endpointResult = endpointUrlSchema.safeParse(normalizedEndpoint);
+  const endpointError = endpointResult.success
+    ? null
+    : (endpointResult.error.issues[0]?.message ?? "Enter a valid Gas City endpoint.");
+
+  async function saveEndpoint() {
+    if (!endpointResult.success) return;
+    await save({ endpointUrl: endpointResult.data });
+  }
+
+  async function addMapping() {
+    const normalized = {
+      workspaceId: workspaceId.trim(),
+      cityName: cityName.trim(),
+      rigName: rigName.trim(),
+    };
+    if (!normalized.workspaceId || !normalized.cityName || !normalized.rigName) {
+      setMappingError("Workspace ID, city, and rig are required.");
+      return;
+    }
+    if (
+      settings.values.workspaceMappings.some(
+        (mapping) => mapping.workspaceId === normalized.workspaceId,
+      )
+    ) {
+      setMappingError(`A mapping already exists for ${normalized.workspaceId}.`);
+      return;
+    }
+    const saved = await save({
+      workspaceMappings: [...settings.values.workspaceMappings, normalized],
+    });
+    if (saved) {
+      setWorkspaceId("");
+      setCityName("");
+      setRigName("");
+      setMappingError(null);
+    }
+  }
+
+  return (
+    <View style={styles.root}>
+      <SettingsSection
+        title="Connection"
+        info="The endpoint is stored on the Paseo host and shared by connected clients."
+      >
+        <SettingsCard>
+          <SettingsInput
+            label="Supervisor endpoint"
+            hint="HTTP or HTTPS URL for the Gas City supervisor"
+            error={endpointUrl === settings.values.endpointUrl ? null : endpointError}
+            initialValue={endpointUrl}
+            onChangeText={setEndpointUrl}
+            placeholder="http://127.0.0.1:7375"
+            disabled={settings.saving}
+          />
+          <SettingsAction
+            label="Save endpoint"
+            actionLabel="Save"
+            disabled={
+              settings.saving ||
+              normalizedEndpoint === settings.values.endpointUrl ||
+              !endpointResult.success
+            }
+            onPress={() => void saveEndpoint()}
+          />
+          <SettingsSwitch
+            label="Allow remote endpoint"
+            hint="Permit connections beyond localhost. Enable only for a trusted network."
+            value={settings.values.allowRemoteEndpoint}
+            disabled={settings.saving}
+            onValueChange={(allowRemoteEndpoint) => void save({ allowRemoteEndpoint })}
+          />
+        </SettingsCard>
+      </SettingsSection>
+
+      <SettingsSection title="Operator controls">
+        <SettingsCard>
+          <SettingsSwitch
+            label="Enable mutations"
+            hint="Interactive safety interlock for confirmed actions; not an authorization boundary."
+            value={settings.values.mutationsEnabled}
+            disabled={settings.saving}
+            onValueChange={(mutationsEnabled) => void save({ mutationsEnabled })}
+          />
+          <SettingsSelect
+            label="Refresh interval"
+            value={String(settings.values.refreshIntervalMs)}
+            options={refreshOptions}
+            disabled={settings.saving}
+            onValueChange={(value) => void save({ refreshIntervalMs: Number(value) })}
+          />
+          <SettingsSelect
+            label="Recent event limit"
+            value={String(settings.values.eventLimit)}
+            options={eventLimitOptions}
+            disabled={settings.saving}
+            onValueChange={(value) => void save({ eventLimit: Number(value) })}
+          />
+        </SettingsCard>
+        {!settings.values.mutationsEnabled ? (
+          <Text style={styles.muted}>Observe-only mode is active.</Text>
+        ) : (
+          <Text accessibilityRole="alert" style={styles.warning}>
+            Mutations are enabled as an interactive safety interlock. Every operation still requires
+            confirmation.
+          </Text>
+        )}
+      </SettingsSection>
+
+      <SettingsSection
+        title="Workspace mappings"
+        info="Explicit mappings take precedence over longest-ancestor discovery."
+      >
+        <SettingsCard>
+          {settings.values.workspaceMappings.map((mapping) => (
+            <SettingsAction
+              key={mapping.workspaceId}
+              label={mapping.workspaceId}
+              hint={`${mapping.cityName} / ${mapping.rigName}`}
+              actionLabel="Remove"
+              disabled={settings.saving}
+              onPress={() =>
+                void save({
+                  workspaceMappings: settings.values.workspaceMappings.filter(
+                    (candidate) => candidate.workspaceId !== mapping.workspaceId,
+                  ),
+                })
+              }
+            />
+          ))}
+          {settings.values.workspaceMappings.length === 0 ? (
+            <SettingsRow label="No overrides" hint="Automatic longest-ancestor mapping is used." />
+          ) : null}
+          <SettingsInput
+            label="Workspace ID"
+            initialValue={workspaceId}
+            onChangeText={setWorkspaceId}
+            placeholder="workspace-id"
+            disabled={settings.saving}
+          />
+          <SettingsInput
+            label="City"
+            initialValue={cityName}
+            onChangeText={setCityName}
+            placeholder="city-name"
+            disabled={settings.saving}
+          />
+          <SettingsInput
+            label="Rig"
+            initialValue={rigName}
+            onChangeText={setRigName}
+            placeholder="rig-name"
+            disabled={settings.saving}
+          />
+          <SettingsAction
+            label="Add explicit mapping"
+            error={mappingError}
+            actionLabel="Add"
+            disabled={settings.saving}
+            onPress={() => void addMapping()}
+          />
+        </SettingsCard>
+      </SettingsSection>
+
+      <SettingsSection title="Persistence">
+        <SettingsCard>
+          <SettingsRow label="Status" hint="Saved on the Paseo host">
+            <Text style={styles.value}>{settings.saving ? "Saving…" : "Saved"}</Text>
+          </SettingsRow>
+          <SettingsAction
+            label="Restore safe defaults"
+            hint="Returns Gas City to localhost observe-only mode"
+            actionLabel="Reset"
+            disabled={settings.saving}
+            onPress={() => void settings.reset()}
+          />
+          {settings.saveError ? (
+            <SettingsAction
+              label="Reload persisted values"
+              error={settings.saveError}
+              actionLabel="Reload"
+              disabled={settings.saving}
+              onPress={settings.reload}
+            />
+          ) : null}
+        </SettingsCard>
+      </SettingsSection>
+    </View>
+  );
+}
+
+export function GasCitySettingsScreen({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(gasCitySettings);
+  const styles = useMemo(
+    () => ({
+      text: { color: theme.colors.foreground },
+      error: { color: theme.colors.statusDanger },
+    }),
+    [theme],
+  );
+
+  if (settings.status === "loading")
+    return <Text style={styles.text}>Loading Gas City settings…</Text>;
+  if (settings.status !== "ready") {
+    return (
+      <SettingsSection title="Gas City settings">
+        <Text accessibilityRole="alert" style={styles.error}>
+          {settings.error}
+        </Text>
+        <SettingsCard>
+          <SettingsAction
+            label="Read settings again"
+            actionLabel="Reload"
+            onPress={settings.reload}
+          />
+          {settings.status === "invalid" ? (
+            <SettingsAction
+              label="Replace invalid data with safe defaults"
+              actionLabel="Reset"
+              disabled={settings.saving}
+              onPress={() => void settings.reset()}
+            />
+          ) : null}
+        </SettingsCard>
+      </SettingsSection>
+    );
+  }
+
+  return <ReadySettingsScreen key={settings.revision} settings={settings} theme={theme} />;
+}