paseo-plugin-zcode-provider 0.0.0-stage → 0.2.0

package/client/diagnostics.tsx

@@ -0,0 +1,379 @@
+import { useCallback, useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+} from "@getpaseo/plugin/client/ui";
+import {
+  zcodeDiagnostics,
+  type DiagnosticsResult,
+} from "../shared/diagnostics";
+import { Value } from "./value";
+
+function Installation({ result, theme, compact }: SectionProps) {
+  return (
+    <SettingsSection title="ZCode installation">
+      <SettingsCard>
+        <SettingsRow
+          label="Install root"
+          hint={
+            result.source === "managed"
+              ? "Managed runtime installed from the Settings screen"
+              : "PASEO_ZCODE_RUNTIME"
+          }
+        >
+          <Value color={theme.colors.foreground} compact={compact}>
+            {result.installRoot}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Platform">
+          <Value color={theme.colors.foreground} compact={compact}>
+            {result.platform}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="ZCode Server version">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.appVersion ?? "Not reported"}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Agent version">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.cliVersion ?? "Not reported"}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Provider plugin version">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.providerVersion}
+          </Value>
+        </SettingsRow>
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function Compatibility({ result, theme, compact }: SectionProps) {
+  const supported = result.compatibility === "supported";
+  return (
+    <SettingsSection title="Compatibility">
+      <SettingsCard>
+        <SettingsRow label="Status">
+          <Value
+            color={
+              supported ? theme.colors.statusSuccess : theme.colors.statusDanger
+            }
+            compact={compact}
+          >
+            {supported ? "Supported" : "Unsupported"}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Reason">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.compatibilityReason}
+          </Value>
+        </SettingsRow>
+        <SettingsRow
+          label="Node.js"
+          hint={
+            result.source === "managed" ? "Managed Node.js" : "PASEO_ZCODE_NODE"
+          }
+        >
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {`${result.nodeExecutable} (${result.nodeVersion})`}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Server SHA-256">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.serverSha256}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Agent SHA-256">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.agentSha256}
+          </Value>
+        </SettingsRow>
+        <SettingsRow label="Install root permissions">
+          <Value color={theme.colors.foregroundMuted} compact={compact}>
+            {result.writableInstallRoot ? "Writable" : "Read-only"}
+          </Value>
+        </SettingsRow>
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function HostCheck({
+  result,
+  busy,
+  onRun,
+  theme,
+  compact,
+}: SectionProps & { busy: boolean; onRun(): void }) {
+  const smoke = result.smoke;
+  return (
+    <SettingsSection title="Host check">
+      <SettingsCard>
+        <SettingsRow
+          label="Result"
+          hint="Checks the configured Node.js and Server versions. No prompt is sent."
+        >
+          <Value
+            color={
+              smoke === undefined
+                ? theme.colors.foregroundMuted
+                : smoke.passed
+                  ? theme.colors.statusSuccess
+                  : theme.colors.statusDanger
+            }
+            compact={compact}
+          >
+            {smoke === undefined
+              ? "Not run"
+              : smoke.passed
+                ? "Passed"
+                : "Failed"}
+          </Value>
+        </SettingsRow>
+        {smoke === undefined ? null : (
+          <>
+            {smoke.error === undefined ? null : (
+              <SettingsRow label="Error">
+                <Value color={theme.colors.statusDanger} compact={compact}>
+                  {smoke.error}
+                </Value>
+              </SettingsRow>
+            )}
+          </>
+        )}
+      </SettingsCard>
+      <SettingsAction
+        label="stdio Server"
+        actionLabel={busy ? "Checking…" : "Run host check"}
+        disabled={busy}
+        onPress={onRun}
+      />
+    </SettingsSection>
+  );
+}
+
+function SessionStorage({ result, theme, compact }: SectionProps) {
+  return (
+    <SettingsSection title="Session storage">
+      <SettingsCard>
+        <SettingsRow
+          label="Resume mapping directory"
+          hint="Stores identifiers and workspace paths, not message contents."
+        >
+          <Value color={theme.colors.foreground} compact={compact}>
+            {result.sessionsDirectory}
+          </Value>
+        </SettingsRow>
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+interface SectionProps {
+  result: Extract<DiagnosticsResult, { status: "ready" }>;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+}
+
+function ReadyView({
+  result,
+  busy,
+  onCheck,
+  onSmoke,
+  theme,
+  compact,
+}: {
+  result: Extract<DiagnosticsResult, { status: "ready" }>;
+  busy: boolean;
+  onCheck(): void;
+  onSmoke(): void;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+}) {
+  return (
+    <View style={{ gap: compact ? 16 : 24 }}>
+      <Installation result={result} theme={theme} compact={compact} />
+      <Compatibility result={result} theme={theme} compact={compact} />
+      <HostCheck
+        result={result}
+        busy={busy}
+        onRun={onSmoke}
+        theme={theme}
+        compact={compact}
+      />
+      <SessionStorage result={result} theme={theme} compact={compact} />
+      <SettingsSection title="Detection">
+        <SettingsAction
+          label="Installed ZCode"
+          actionLabel={busy ? "Checking…" : "Check again"}
+          disabled={busy}
+          onPress={onCheck}
+        />
+      </SettingsSection>
+    </View>
+  );
+}
+
+function FailedView({
+  result,
+  busy,
+  onCheck,
+  theme,
+  compact,
+}: {
+  result: Extract<DiagnosticsResult, { status: "failed" }>;
+  busy: boolean;
+  onCheck(): void;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+}) {
+  return (
+    <View style={{ gap: compact ? 16 : 24 }}>
+      <SettingsSection title="ZCode diagnostics">
+        <SettingsCard>
+          <SettingsRow label="Result">
+            <Value color={theme.colors.statusDanger} compact={compact}>
+              Failed
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Error code">
+            <Value color={theme.colors.foreground} compact={compact}>
+              {result.code}
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Message">
+            <Value color={theme.colors.foregroundMuted} compact={compact}>
+              {result.message}
+            </Value>
+          </SettingsRow>
+          <SettingsRow
+            label="Diagnostic report"
+            hint="Safe to attach to a GitHub issue; credentials, prompts, and raw native errors are excluded."
+          >
+            <Value color={theme.colors.foregroundMuted} compact={compact}>
+              {result.diagnostic}
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Provider plugin version">
+            <Value color={theme.colors.foregroundMuted} compact={compact}>
+              {result.providerVersion}
+            </Value>
+          </SettingsRow>
+        </SettingsCard>
+        <SettingsAction
+          label="Installed ZCode"
+          actionLabel={busy ? "Checking…" : "Check again"}
+          disabled={busy}
+          onPress={onCheck}
+        />
+      </SettingsSection>
+    </View>
+  );
+}
+
+export function DiagnosticsScreen({ theme, layout }: PluginSurfaceProps) {
+  const run = useRpc(zcodeDiagnostics);
+  const [result, setResult] = useState<DiagnosticsResult | null>(null);
+  const [requestError, setRequestError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(true);
+
+  const check = useCallback(
+    async (smoke: boolean) => {
+      setBusy(true);
+      try {
+        setResult(await run({ smoke }));
+        setRequestError(null);
+      } catch (cause) {
+        setRequestError(
+          cause instanceof Error
+            ? cause.message
+            : "The diagnostics request failed.",
+        );
+      } finally {
+        setBusy(false);
+      }
+    },
+    [run],
+  );
+
+  useEffect(() => {
+    void check(false);
+  }, [check]);
+
+  if (result === null) {
+    return (
+      <SettingsSection title="ZCode diagnostics">
+        <SettingsCard>
+          <SettingsRow label="Status">
+            <Value
+              color={theme.colors.foregroundMuted}
+              compact={layout.compact}
+            >
+              {requestError ?? "Checking the ZCode installation…"}
+            </Value>
+          </SettingsRow>
+        </SettingsCard>
+        {requestError === null ? null : (
+          <SettingsAction
+            label="Diagnostics request"
+            actionLabel={busy ? "Checking…" : "Try again"}
+            disabled={busy}
+            onPress={() => void check(false)}
+          />
+        )}
+      </SettingsSection>
+    );
+  }
+
+  const props = {
+    busy,
+    onCheck: () => void check(false),
+    onSmoke: () => void check(true),
+    theme,
+    compact: layout.compact,
+  };
+  return result.status === "ready" ? (
+    <>
+      <ReadyView result={result} {...props} />
+      {requestError === null ? null : (
+        <RequestError
+          message={requestError}
+          theme={theme}
+          compact={layout.compact}
+        />
+      )}
+    </>
+  ) : (
+    <FailedView result={result} {...props} />
+  );
+}
+
+function RequestError({
+  message,
+  theme,
+  compact,
+}: {
+  message: string;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+}) {
+  return (
+    <SettingsSection title="Last request">
+      <Text
+        accessibilityRole="alert"
+        style={{
+          color: theme.colors.statusDanger,
+          fontSize: compact ? 13 : 14,
+        }}
+      >
+        {message}
+      </Text>
+    </SettingsSection>
+  );
+}

package/client/runtime.tsx

@@ -0,0 +1,296 @@
+import { useCallback, useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+} from "@getpaseo/plugin/client/ui";
+import {
+  zcodeRuntimeInstall,
+  zcodeRuntimeRemove,
+  zcodeRuntimeStatus,
+  type RuntimeSetupStatus,
+} from "../shared/runtime-setup";
+import { Value } from "./value";
+
+type Theme = PluginSurfaceProps["theme"];
+type Job = RuntimeSetupStatus["job"];
+
+const megabytes = (bytes: number) => `${(bytes / 1_000_000).toFixed(1)} MB`;
+
+function jobLabel(job: Job): string {
+  switch (job.state) {
+    case "idle":
+      return "Not started";
+    case "succeeded":
+      return "Completed";
+    case "failed":
+      return `Failed (${job.code})`;
+    case "running": {
+      const name = job.component === "node" ? "Node.js" : "ZCode runtime";
+      if (job.phase !== "download") return `${name}: ${job.phase}ing`;
+      const percent =
+        job.totalBytes > 0
+          ? Math.floor((job.receivedBytes / job.totalBytes) * 100)
+          : 0;
+      return `${name}: downloading ${percent}% of ${megabytes(job.totalBytes)}`;
+    }
+  }
+}
+
+function Components({
+  status,
+  theme,
+  compact,
+}: {
+  status: RuntimeSetupStatus;
+  theme: Theme;
+  compact: boolean;
+}) {
+  return (
+    <>
+      {status.components.map((component) => (
+        <SettingsSection
+          key={component.id}
+          title={`${component.name} ${component.version}`}
+        >
+          <SettingsCard>
+            <SettingsRow label="Status">
+              <Value
+                color={
+                  component.installed
+                    ? theme.colors.statusSuccess
+                    : theme.colors.foregroundMuted
+                }
+                compact={compact}
+              >
+                {component.installed ? "Installed" : "Not installed"}
+              </Value>
+            </SettingsRow>
+            <SettingsRow label="Source" hint={megabytes(component.sizeBytes)}>
+              <Value color={theme.colors.foregroundMuted} compact={compact}>
+                {component.url}
+              </Value>
+            </SettingsRow>
+            <SettingsRow label="SHA-256" hint="Checked before extraction">
+              <Value color={theme.colors.foregroundMuted} compact={compact}>
+                {component.sha256}
+              </Value>
+            </SettingsRow>
+            <SettingsRow label="License">
+              <Value color={theme.colors.foregroundMuted} compact={compact}>
+                {component.license}
+              </Value>
+            </SettingsRow>
+          </SettingsCard>
+        </SettingsSection>
+      ))}
+    </>
+  );
+}
+
+export function RuntimeTab({ theme, layout }: PluginSurfaceProps) {
+  const fetchStatus = useRpc(zcodeRuntimeStatus);
+  const install = useRpc(zcodeRuntimeInstall);
+  const remove = useRpc(zcodeRuntimeRemove);
+  const [status, setStatus] = useState<RuntimeSetupStatus | null>(null);
+  const [requestError, setRequestError] = useState<string | null>(null);
+  const [removeMessage, setRemoveMessage] = useState<string | null>(null);
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const [pending, setPending] = useState(false);
+  const compact = layout.compact;
+
+  const refresh = useCallback(async () => {
+    try {
+      setStatus(await fetchStatus({}));
+      setRequestError(null);
+    } catch (cause) {
+      setRequestError(
+        cause instanceof Error ? cause.message : "The setup request failed.",
+      );
+    }
+  }, [fetchStatus]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const running = status?.job.state === "running";
+  useEffect(() => {
+    if (!running) return;
+    const timer = setInterval(() => void refresh(), 1000);
+    return () => clearInterval(timer);
+  }, [running, refresh]);
+
+  const run = useCallback(
+    async (action: () => Promise<unknown>) => {
+      setPending(true);
+      try {
+        await action();
+      } catch (cause) {
+        setRequestError(
+          cause instanceof Error ? cause.message : "The setup request failed.",
+        );
+      } finally {
+        setPending(false);
+        await refresh();
+      }
+    },
+    [refresh],
+  );
+
+  if (status === null)
+    return (
+      <SettingsSection title="ZCode runtime setup">
+        <SettingsCard>
+          <SettingsRow label="Status">
+            <Value color={theme.colors.foregroundMuted} compact={compact}>
+              {requestError ?? "Checking the managed runtime…"}
+            </Value>
+          </SettingsRow>
+        </SettingsCard>
+      </SettingsSection>
+    );
+
+  const installed =
+    status.components.length > 0 &&
+    status.components.every((component) => component.installed);
+  const total = status.components
+    .filter((component) => !component.installed)
+    .reduce((sum, component) => sum + component.sizeBytes, 0);
+  const busy = pending || running;
+
+  return (
+    <View style={{ gap: compact ? 16 : 24 }}>
+      <SettingsSection title="ZCode runtime setup">
+        <SettingsCard>
+          <SettingsRow label="Downloads from">
+            <Value color={theme.colors.foreground} compact={compact}>
+              nodejs.org and this plugin's GitHub releases
+            </Value>
+          </SettingsRow>
+          <SettingsRow
+            label="ZCode build"
+            hint="ZCode does not publish its CLI; CI builds the unmodified source."
+          >
+            <Value color={theme.colors.foreground} compact={compact}>
+              Unofficial, not endorsed by ZCode or Z.ai
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Runs as">
+            <Value color={theme.colors.foreground} compact={compact}>
+              The daemon user, on the daemon machine
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Changes">
+            <Value color={theme.colors.foreground} compact={compact}>
+              Only the destination below; PATH is untouched
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Destination">
+            <Value color={theme.colors.foregroundMuted} compact={compact}>
+              {status.directory}
+            </Value>
+          </SettingsRow>
+          <SettingsRow label="Platform">
+            <Value
+              color={
+                status.supported
+                  ? theme.colors.foregroundMuted
+                  : theme.colors.statusDanger
+              }
+              compact={compact}
+            >
+              {status.supported
+                ? status.platform
+                : `${status.platform} is not supported. Set PASEO_ZCODE_RUNTIME and PASEO_ZCODE_NODE instead.`}
+            </Value>
+          </SettingsRow>
+          {status.override ? (
+            <SettingsRow
+              label="Environment override"
+              hint="Unset both variables and restart the daemon to use the managed runtime."
+            >
+              <Value color={theme.colors.statusWarning} compact={compact}>
+                PASEO_ZCODE_RUNTIME / PASEO_ZCODE_NODE are set, so sessions use
+                them instead of this runtime.
+              </Value>
+            </SettingsRow>
+          ) : null}
+          <SettingsRow
+            label="Progress"
+            error={status.job.state === "failed" ? status.job.message : null}
+          >
+            <Value
+              color={
+                status.job.state === "failed"
+                  ? theme.colors.statusDanger
+                  : theme.colors.foregroundMuted
+              }
+              compact={compact}
+            >
+              {jobLabel(status.job)}
+            </Value>
+          </SettingsRow>
+        </SettingsCard>
+        {status.supported ? (
+          <SettingsAction
+            label={installed ? "Runtime installed" : "Install runtime"}
+            hint={installed ? undefined : `Downloads ${megabytes(total)}`}
+            actionLabel={
+              running
+                ? "Installing…"
+                : installed
+                  ? "Installed"
+                  : "Download and install"
+            }
+            disabled={busy || installed}
+            onPress={() => void run(() => install({}))}
+          />
+        ) : null}
+      </SettingsSection>
+      <Components status={status} theme={theme} compact={compact} />
+      <SettingsSection title="Remove">
+        <SettingsAction
+          label="Managed runtime"
+          hint={
+            removeMessage ??
+            "Deletes the destination directory. Stop ZCode sessions first. ZCode settings, logins and conversations are kept."
+          }
+          actionLabel={confirmRemove ? "Confirm removal" : "Remove"}
+          disabled={busy}
+          onPress={() => {
+            if (!confirmRemove) {
+              setConfirmRemove(true);
+              return;
+            }
+            setConfirmRemove(false);
+            void run(async () => {
+              const result = await remove({});
+              setRemoveMessage(
+                result.status === "removed"
+                  ? "Removed."
+                  : `Removal failed: ${result.message}`,
+              );
+            });
+          }}
+        />
+      </SettingsSection>
+      {requestError === null ? null : (
+        <SettingsSection title="Last request">
+          <Text
+            accessibilityRole="alert"
+            style={{
+              color: theme.colors.statusDanger,
+              fontSize: compact ? 13 : 14,
+            }}
+          >
+            {requestError}
+          </Text>
+        </SettingsSection>
+      )}
+    </View>
+  );
+}