@omercnet/paseo-gas-city 1.1.0 → 1.2.0-next.226.1

package/README.md

@@ -49,7 +49,7 @@ Gas City settings are host-scoped and shared by every Paseo client connected to
 - **Workspace mappings** override automatic longest-ancestor rig matching when a workspace is
   ambiguous or lives outside its rig path.
 
-Gas City requires Paseo `^0.9.0 || ^0.10.0`, whose server settings handle lets every daemon-side operation
+Gas City requires Paseo `^0.9.0 || ^0.10.0 || ^0.11.0`, whose server settings handle lets every daemon-side operation
 use the persisted configuration.
 
 Settings are a safety and routing configuration, not a credential vault. Put authentication and
@@ -68,7 +68,7 @@ host. Enabling a remote endpoint sends requests to that host from the Paseo daem
 
 ## Requirements and limitations
 
-- Paseo `^0.9.0 || ^0.10.0` with plugins enabled.
+- Paseo `^0.9.0 || ^0.10.0 || ^0.11.0` with plugins enabled.
 - A reachable Gas City v1.4.1 supervisor exposing its HTTP API.
 - HTTP or HTTPS endpoints only. Credentials, query strings, and fragments are rejected.
 - Automatic workspace mapping requires the workspace path to be inside exactly one discovered rig;
@@ -83,7 +83,7 @@ host. Enabling a remote endpoint sends requests to that host from the Paseo daem
 
 ## Install
 
-With Paseo `^0.9.0 || ^0.10.0`, install the npm package:
+With Paseo `^0.9.0 || ^0.10.0 || ^0.11.0`, install the npm package:
 
 ```bash
 paseo plugin install npm:@omercnet/paseo-gas-city

package/client/city-screen.tsx

@@ -0,0 +1,75 @@
+import { type PluginScreenProps, useSettings } from "@getpaseo/plugin/client";
+import { gasCitySettings } from "../shared";
+import { CityOperations } from "./city-operations";
+import { SurfaceState } from "./gas-city-surface";
+import { useDiscovery } from "./sidebar-item";
+import { parseCityParam } from "./view-model";
+
+export function CityScreen(props: PluginScreenProps) {
+  const settings = useSettings(gasCitySettings);
+  const discovery = useDiscovery(props.host.id);
+  const city = parseCityParam(props.params);
+  if (!city) {
+    return (
+      <SurfaceState
+        {...props}
+        title="No city selected"
+        body="Open a city from the Gas City sidebar menu."
+      />
+    );
+  }
+  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()}
+      />
+    );
+  }
+  const { health, data } = discovery;
+  if (health.tone === "unavailable" || health.tone === "unconfigured") {
+    return (
+      <SurfaceState
+        {...props}
+        title={
+          health.tone === "unconfigured" ? "Gas City is not configured" : "Gas City is unavailable"
+        }
+        body={health.summary}
+        onRetry={discovery.refetch}
+      />
+    );
+  }
+  if (data?.state === "available" && !data.cities.some((item) => item.name === city)) {
+    return (
+      <SurfaceState
+        {...props}
+        title="City not found"
+        body={`The supervisor does not report a city named ${city}.`}
+        onRetry={discovery.refetch}
+      />
+    );
+  }
+  return (
+    <CityOperations
+      key={`${settings.revision}:${city}`}
+      theme={props.theme}
+      layout={props.layout}
+      host={props.host}
+      cityName={city}
+      rigName={null}
+      settings={settings.values}
+    />
+  );
+}

package/client/contribute.tsx

@@ -1,8 +1,36 @@
 import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { CityScreen } from "./city-screen";
 import { queueSlingIntent } from "./dispatch-intent";
 import { FactoryPanel } from "./factory-panel";
 import { GasCitySurface } from "./gas-city-surface";
 import { GasCitySettingsScreen } from "./settings-screen";
+import { GasCitySidebarItem } from "./sidebar-item";
+import { CITY_SCREEN_ID, cityScreenTitle, supportsScreens } from "./view-model";
+
+// Paseo 0.11+ registers screens and a sidebar row; 0.9/0.10 keep the static surface.
+// The main screen keeps the old sidebar item id so saved links keep working.
+function addNavigation(client: PluginClientContext) {
+  if (supportsScreens(client)) {
+    return [
+      client.addScreen({ id: "gas-city", title: "Gas City", Component: GasCitySurface }),
+      client.addScreen({ id: CITY_SCREEN_ID, title: cityScreenTitle, Component: CityScreen }),
+      client.addSidebarHeaderItem({
+        id: "gas-city",
+        title: "Gas City",
+        Component: GasCitySidebarItem,
+      }),
+    ];
+  }
+  return [
+    client.addSurface("gas-city", GasCitySurface),
+    client.addSidebarItem({
+      id: "gas-city",
+      title: "Gas City",
+      icon: "Factory",
+      surface: "gas-city",
+    }),
+  ];
+}
 
 export function registerGasCityClient(client: PluginClientContext) {
   const cleanups = [
@@ -12,13 +40,7 @@ export function registerGasCityClient(client: PluginClientContext) {
       icon: "Settings",
       Component: GasCitySettingsScreen,
     }),
-    client.addSurface("gas-city", GasCitySurface),
-    client.addSidebarItem({
-      id: "gas-city",
-      title: "Gas City",
-      icon: "Factory",
-      surface: "gas-city",
-    }),
+    ...addNavigation(client),
     client.addWorkspacePanel({
       id: "gas-city-factory",
       title: "Factory",
@@ -33,8 +55,9 @@ export function registerGasCityClient(client: PluginClientContext) {
       icon: "Factory",
       keywords: ["gas city", "supervisor", "sessions", "convoys", "operator"],
       context: "global",
-      onSelect({ openSurface }) {
-        openSurface("gas-city");
+      onSelect({ openSurface, openScreen }) {
+        if (typeof openScreen === "function") openScreen({ screenId: "gas-city" });
+        else openSurface("gas-city");
       },
     }),
     client.addCommandCenterItem({

package/client/gas-city-surface.tsx

@@ -208,7 +208,7 @@ function ReadyGasCitySurface({
   );
 }
 
-function SurfaceState({
+export function SurfaceState({
   theme,
   title,
   body,

package/client/sidebar-item.tsx

@@ -0,0 +1,159 @@
+import {
+  type PluginPopoverProps,
+  type PluginSidebarItemProps,
+  useRpc,
+  useSettings,
+} from "@getpaseo/plugin/client";
+import { SidebarRow } from "@getpaseo/plugin/client/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { discoverSupervisor, gasCitySettings } from "../shared";
+import {
+  CITY_SCREEN_ID,
+  cityScreenParams,
+  type SupervisorTone,
+  supervisorHealth,
+} from "./view-model";
+
+type Theme = PluginSidebarItemProps["theme"];
+
+function toneColor(theme: Theme, tone: SupervisorTone): string {
+  switch (tone) {
+    case "healthy":
+      return theme.colors.statusSuccess;
+    case "warning":
+      return theme.colors.statusWarning;
+    case "unavailable":
+      return theme.colors.statusDanger;
+    default:
+      return theme.colors.foregroundMuted;
+  }
+}
+
+export function useDiscovery(hostId: string) {
+  const settings = useSettings(gasCitySettings);
+  const loadDiscovery = useRpc(discoverSupervisor);
+  const ready = settings.status === "ready";
+  const query = useQuery({
+    // Same key as the main screen so both share one poll.
+    queryKey: ["gas-city", hostId, ready ? settings.values.endpointUrl : null, "discovery"],
+    queryFn: () => loadDiscovery({}),
+    enabled: ready,
+    refetchInterval: ready ? settings.values.refreshIntervalMs : false,
+  });
+  // Invalid or unreadable settings must not fall back to any cached discovery.
+  const data = ready ? query.data : undefined;
+  const health = supervisorHealth({
+    data,
+    error: settings.status === "error" ? new Error(settings.error) : ready ? query.error : null,
+    pending: settings.status === "loading" || (ready && query.isPending),
+  });
+  return { data, health, refetch: () => void query.refetch() };
+}
+
+export function GasCitySidebarItem({
+  theme,
+  host,
+  currentScreen,
+  openScreen,
+  openPopover,
+}: PluginSidebarItemProps) {
+  const { health } = useDiscovery(host.id);
+  const color = toneColor(theme, health.tone);
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const active =
+    currentScreen?.screenId === "gas-city" || currentScreen?.screenId === CITY_SCREEN_ID;
+  return (
+    <SidebarRow
+      icon="Factory"
+      active={active}
+      onPress={() => openScreen({ screenId: "gas-city" })}
+      trailing={
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Gas City ${health.tone}: ${health.summary} Show cities`}
+          onPress={() => openPopover(CitiesPopover)}
+          style={styles.trailing}
+        >
+          <View style={[styles.dot, { backgroundColor: color }]} />
+          <Text style={[styles.badge, { color }]}>{health.badge}</Text>
+        </Pressable>
+      }
+    />
+  );
+}
+
+function CitiesPopover({ theme, host, layout, close, openScreen }: PluginPopoverProps) {
+  const { data, health } = useDiscovery(host.id);
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const color = toneColor(theme, health.tone);
+  const cities = data?.cities ?? [];
+  return (
+    <View style={[styles.popover, layout.compact && styles.popoverCompact]}>
+      <View style={styles.popoverHeader}>
+        <View style={[styles.dot, { backgroundColor: color }]} />
+        <Text accessibilityRole="header" style={styles.popoverTitle}>
+          Gas City
+        </Text>
+      </View>
+      <Text style={[styles.summary, health.tone !== "healthy" && { color }]}>{health.summary}</Text>
+      {cities.map((city) => (
+        <Pressable
+          key={`${city.path}:${city.name}`}
+          accessibilityRole="button"
+          accessibilityLabel={`Open ${city.name}, ${city.running ? "running" : (city.status ?? "stopped")}`}
+          onPress={() => {
+            close();
+            openScreen({ screenId: CITY_SCREEN_ID, params: cityScreenParams(city.name) });
+          }}
+          style={({ pressed }) => [styles.cityRow, pressed && styles.pressed]}
+        >
+          <View
+            style={[
+              styles.dot,
+              {
+                backgroundColor: city.running
+                  ? theme.colors.statusSuccess
+                  : theme.colors.statusWarning,
+              },
+            ]}
+          />
+          <Text style={styles.cityName} numberOfLines={1}>
+            {city.name}
+          </Text>
+          <Text style={styles.cityStatus} numberOfLines={1}>
+            {city.error ?? city.status ?? (city.running ? "running" : "stopped")}
+          </Text>
+        </Pressable>
+      ))}
+      {data?.state === "available" && cities.length === 0 ? (
+        <Text style={styles.summary}>No cities reported.</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    trailing: { flexDirection: "row", alignItems: "center", gap: 5, paddingHorizontal: 6 },
+    dot: { width: 7, height: 7, borderRadius: 4 },
+    badge: { fontSize: 11, fontWeight: "700" },
+    popover: { minWidth: 260, gap: 6, padding: 12 },
+    popoverCompact: { padding: 16, paddingBottom: 24 },
+    popoverHeader: { flexDirection: "row", alignItems: "center", gap: 7 },
+    popoverTitle: { color: theme.colors.foreground, fontSize: 14, fontWeight: "800" },
+    summary: { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 17 },
+    cityRow: {
+      minHeight: 36,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingHorizontal: 8,
+      borderRadius: 6,
+    },
+    cityName: { color: theme.colors.foreground, fontSize: 13, fontWeight: "600" },
+    cityStatus: { flex: 1, color: theme.colors.foregroundMuted, fontSize: 11, textAlign: "right" },
+    pressed: { opacity: 0.72 },
+  });
+}

package/client/view-model.ts

@@ -4,6 +4,7 @@ import type {
   GasCityEvent,
   GasCitySession,
   GasCityWorkItem,
+  SupervisorDiscovery,
 } from "../shared";
 
 export type DashboardRow =
@@ -316,3 +317,86 @@ export function convoyProgress(convoy: GasCityConvoy): string {
   if (convoy.closedWork === null || convoy.totalWork === null) return "Progress unavailable";
   return `${convoy.closedWork} of ${convoy.totalWork} work items closed`;
 }
+
+export const CITY_SCREEN_ID = "city";
+
+export function cityScreenParams(city: string): Record<string, string> {
+  return { city };
+}
+
+export function parseCityParam(params: Record<string, string>): string | null {
+  const city = params.city?.trim();
+  return city ? city : null;
+}
+
+export function cityScreenTitle(params: Record<string, string>): string {
+  const city = parseCityParam(params);
+  return city ? `${city} · Gas City` : "Gas City";
+}
+
+export interface ScreenApi {
+  addScreen?: unknown;
+  addSidebarHeaderItem?: unknown;
+}
+
+/** True on Paseo 0.11+, where screens and sidebar header items exist. */
+export function supportsScreens(client: ScreenApi): boolean {
+  return (
+    typeof client.addScreen === "function" && typeof client.addSidebarHeaderItem === "function"
+  );
+}
+
+export type SupervisorTone = "loading" | "healthy" | "warning" | "unavailable" | "unconfigured";
+
+export interface SupervisorHealth {
+  tone: SupervisorTone;
+  /** Short text for the sidebar trailing slot. */
+  badge: string;
+  /** One-line explanation for the popover and accessibility labels. */
+  summary: string;
+}
+
+/** Health is "healthy" only when the supervisor answered with a usable summary and no diagnostics. */
+export function supervisorHealth(input: {
+  data: SupervisorDiscovery | undefined;
+  error: unknown;
+  pending: boolean;
+}): SupervisorHealth {
+  const { data, error, pending } = input;
+  // A failed refresh outranks cached data: never show "healthy" from a stale success.
+  if (error || !data) {
+    if (error) {
+      return {
+        tone: "unavailable",
+        badge: "error",
+        summary: error instanceof Error ? error.message : "Could not reach Gas City.",
+      };
+    }
+    return pending
+      ? { tone: "loading", badge: "...", summary: "Contacting the configured supervisor." }
+      : { tone: "unavailable", badge: "error", summary: "No supervisor data." };
+  }
+  const detail = data.diagnostics.map((item) => item.message).join(" ");
+  if (data.state === "not-configured") {
+    return {
+      tone: "unconfigured",
+      badge: "setup",
+      summary: detail || "Gas City is not configured.",
+    };
+  }
+  if (data.state !== "available" || !data.supervisor) {
+    return {
+      tone: "unavailable",
+      badge: "offline",
+      summary: detail || `Supervisor state: ${data.state}.`,
+    };
+  }
+  const { runningCityCount, cityCount } = data.supervisor;
+  return {
+    tone: data.diagnostics.length > 0 ? "warning" : "healthy",
+    badge: `${runningCityCount}/${cityCount}`,
+    summary:
+      detail ||
+      `${runningCityCount} of ${cityCount} ${cityCount === 1 ? "city" : "cities"} running.`,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omercnet/paseo-gas-city",
-  "version": "1.1.0",
+  "version": "1.2.0-next.226.1",
   "type": "module",
   "description": "A Paseo control plane for observing and operating Gas City supervisors.",
   "license": "MIT",
@@ -52,15 +52,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.10",
-    "@getpaseo/cli": "0.10.1",
-    "@getpaseo/client": "0.10.1",
-    "@getpaseo/plugin": "0.10.1",
-    "@getpaseo/protocol": "0.10.1",
+    "@getpaseo/cli": "0.11.0-beta.5",
+    "@getpaseo/client": "0.11.0-beta.5",
+    "@getpaseo/plugin": "0.11.0-beta.5",
+    "@getpaseo/protocol": "0.11.0-beta.5",
     "@tanstack/react-query": "^5.102.3",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.18",
     "@vitest/coverage-v8": "^5.0.0",
-    "fflate": "^0.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "typescript": "^7.0.2",

package/paseo-plugin.json

@@ -1,5 +1,5 @@
 {
   "id": "gas-city",
   "description": "A Paseo control plane for observing and operating Gas City supervisors.",
-  "requirements": { "paseo": "^0.9.0 || ^0.10.0" }
+  "requirements": { "paseo": "^0.9.0 || ^0.10.0 || ^0.11.0" }
 }