paseo-terminal-integration 0.2.0 → 0.3.0

package/client/terminal-panel.tsx

@@ -1,273 +0,0 @@
-import { usePaseo, type PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon, ScrollView, TextInput, useToast } from "@getpaseo/plugin/client/react-native";
-import { useQuery } from "@tanstack/react-query";
-import { useMemo, useRef, useState } from "react";
-import {
-  Platform,
-  Pressable,
-  Text,
-  View,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  type ScrollView as NativeScrollView,
-} from "react-native";
-import { TERMINAL_NAME } from "../shared/contracts";
-import { trimBlankEdges, withoutRunMarkers } from "../shared/text";
-import { XtermView } from "./xterm-view";
-
-type Theme = PluginWorkspacePanelProps["theme"];
-type Styles = ReturnType<typeof createStyles>;
-// Derived from the SDK so the bundler's import checks never walk @getpaseo/client typings.
-type PaseoTerminal = Awaited<
-  ReturnType<ReturnType<typeof usePaseo>["terminals"]["list"]>
->["entries"][number];
-
-const SCREEN_LINES = 400;
-const SCREEN_POLL_MS = 600;
-const LOOKUP_POLL_MS = 3_000;
-const PIN_SLACK = 24;
-const MONOSPACE = Platform.select({
-  ios: "Menlo",
-  android: "monospace",
-  default: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-});
-
-const KEYS = [
-  { label: "Enter", data: "\r" },
-  { label: "Ctrl-C", data: "\x03" },
-  { label: "Ctrl-D", data: "\x04" },
-  { label: "Tab", data: "\t" },
-] as const;
-
-/** The "Agent commands" terminal: live xterm.js on web, a plain-text mirror elsewhere. */
-export function TerminalPanel({ theme, layout, workspaceId }: PluginWorkspacePanelProps) {
-  const paseo = usePaseo();
-  const styles = useMemo(() => createStyles(theme, layout.compact), [theme, layout.compact]);
-  const [liveError, setLiveError] = useState<{ terminalId: string; reason: string } | null>(null);
-
-  const lookup = useQuery({
-    queryKey: ["agent-terminal", workspaceId],
-    queryFn: async () => {
-      const { entries } = await paseo.terminals.list({ workspaceId });
-      return entries.find((entry) => entry.name === TERMINAL_NAME) ?? null;
-    },
-    refetchInterval: LOOKUP_POLL_MS,
-  });
-  const terminal = lookup.data ?? null;
-
-  if (!terminal) {
-    const message = lookup.isLoading
-      ? "Looking for the terminal…"
-      : `No "${TERMINAL_NAME}" terminal yet. It opens with the first run.`;
-    return (
-      <View style={styles.screen}>
-        <Text style={styles.muted}>{message}</Text>
-      </View>
-    );
-  }
-
-  const fallback = liveError?.terminalId === terminal.id ? liveError.reason : null;
-  if (Platform.OS === "web" && !fallback) {
-    return (
-      <XtermView
-        key={terminal.id}
-        terminalId={terminal.id}
-        theme={theme}
-        onUnavailable={(reason) => setLiveError({ terminalId: terminal.id, reason })}
-      />
-    );
-  }
-  return (
-    <TextMirror
-      terminal={terminal}
-      theme={theme}
-      styles={styles}
-      note={fallback ? `Live terminal unavailable: ${fallback}` : null}
-    />
-  );
-}
-
-/** A plain-text copy of the terminal with a line of input, for platforms without a DOM. */
-function TextMirror({
-  terminal,
-  theme,
-  styles,
-  note,
-}: {
-  terminal: PaseoTerminal;
-  theme: Theme;
-  styles: Styles;
-  note: string | null;
-}) {
-  const paseo = usePaseo();
-  const toast = useToast();
-  const [draft, setDraft] = useState("");
-  const [hidden, setHidden] = useState(false);
-  const scroller = useRef<NativeScrollView>(null);
-  const pinned = useRef(true);
-
-  const screen = useQuery({
-    queryKey: ["agent-terminal-screen", terminal.id],
-    queryFn: async () => {
-      const { lines } = await paseo.terminals
-        .ref(terminal)
-        .capture({ start: -SCREEN_LINES, stripAnsi: true });
-      return trimBlankEdges(withoutRunMarkers(lines)).join("\n");
-    },
-    refetchInterval: SCREEN_POLL_MS,
-  });
-
-  function write(data: string) {
-    try {
-      paseo.terminals.ref(terminal).write(data);
-      pinned.current = true;
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : String(error));
-    }
-  }
-
-  function submit() {
-    write(`${draft}\r`);
-    setDraft("");
-  }
-
-  function trackScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
-    pinned.current = contentOffset.y + layoutMeasurement.height >= contentSize.height - PIN_SLACK;
-  }
-
-  return (
-    <View style={styles.screen}>
-      {note ? <Text style={styles.muted}>{note}</Text> : null}
-      <ScrollView
-        ref={scroller}
-        style={styles.output}
-        contentContainerStyle={styles.outputContent}
-        onScroll={trackScroll}
-        scrollEventThrottle={100}
-        onContentSizeChange={() => {
-          if (pinned.current) scroller.current?.scrollToEnd({ animated: false });
-        }}
-      >
-        <Text style={styles.text} selectable>
-          {screen.data ?? ""}
-        </Text>
-      </ScrollView>
-
-      <View style={styles.inputRow}>
-        <TextInput
-          style={styles.input}
-          value={draft}
-          onChangeText={setDraft}
-          onSubmitEditing={submit}
-          submitBehavior="submit"
-          secureTextEntry={hidden}
-          autoCapitalize="none"
-          autoCorrect={false}
-          spellCheck={false}
-          placeholder="Input for the terminal; Enter sends it"
-          placeholderTextColor={theme.colors.foregroundMuted}
-          accessibilityLabel="Terminal input"
-        />
-        <KeyButton
-          styles={styles}
-          theme={theme}
-          icon="SendHorizontal"
-          label="Send"
-          onPress={submit}
-        />
-      </View>
-      <View style={styles.keys}>
-        {KEYS.map((key) => (
-          <KeyButton
-            key={key.label}
-            styles={styles}
-            theme={theme}
-            label={key.label}
-              onPress={() => write(key.data)}
-          />
-        ))}
-        <KeyButton
-          styles={styles}
-          theme={theme}
-          icon={hidden ? "EyeOff" : "Eye"}
-          label={hidden ? "Input hidden" : "Hide input"}
-          onPress={() => setHidden((value) => !value)}
-        />
-      </View>
-    </View>
-  );
-}
-
-function KeyButton({
-  styles,
-  theme,
-  icon,
-  label,
-  disabled = false,
-  onPress,
-}: {
-  styles: Styles;
-  theme: Theme;
-  icon?: string;
-  label: string;
-  disabled?: boolean;
-  onPress(): void;
-}) {
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      accessibilityState={{ disabled }}
-      disabled={disabled}
-      onPress={onPress}
-      style={({ pressed }) => [styles.key, { opacity: disabled ? 0.5 : pressed ? 0.75 : 1 }]}
-    >
-      {icon ? <Icon name={icon} size={14} color={theme.colors.foreground} /> : null}
-      <Text style={styles.keyText}>{label}</Text>
-    </Pressable>
-  );
-}
-
-function createStyles(theme: Theme, compact: boolean) {
-  const gap = compact ? 6 : 8;
-  return {
-    screen: { flex: 1, gap, padding: gap, backgroundColor: theme.colors.surface0 },
-    output: {
-      flex: 1,
-      borderRadius: 6,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      backgroundColor: theme.colors.surface1,
-    },
-    outputContent: { padding: compact ? 8 : 10 },
-    text: { color: theme.colors.foreground, fontFamily: MONOSPACE, fontSize: 12, lineHeight: 17 },
-    muted: { color: theme.colors.foregroundMuted },
-    inputRow: { flexDirection: "row" as const, gap, alignItems: "center" as const },
-    input: {
-      flex: 1,
-      color: theme.colors.foreground,
-      fontFamily: MONOSPACE,
-      fontSize: 13,
-      paddingHorizontal: 10,
-      paddingVertical: compact ? 8 : 6,
-      borderRadius: 6,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      backgroundColor: theme.colors.surface1,
-    },
-    keys: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap },
-    key: {
-      flexDirection: "row" as const,
-      alignItems: "center" as const,
-      gap: 6,
-      paddingHorizontal: 10,
-      paddingVertical: compact ? 7 : 5,
-      borderRadius: 6,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      backgroundColor: theme.colors.surface2,
-    },
-    keyText: { color: theme.colors.foreground, fontSize: 13 },
-  };
-}

package/client/xterm-modules.d.ts

@@ -1,13 +0,0 @@
-// Plugin client bundles build for a neutral platform, which ignores package "main" fields,
-// so xterm is imported by file path. These map the paths back to the published typings.
-declare module "@xterm/xterm/lib/xterm.mjs" {
-  export * from "@xterm/xterm";
-}
-
-declare module "@xterm/addon-fit/lib/addon-fit.mjs" {
-  export * from "@xterm/addon-fit";
-}
-
-declare module "@xterm/addon-web-links/lib/addon-web-links.mjs" {
-  export * from "@xterm/addon-web-links";
-}

package/client/xterm-view.tsx

@@ -1,222 +0,0 @@
-import { usePaseo, useRpc, type PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import type { ITheme, Terminal } from "@xterm/xterm";
-import { useEffect, useRef, useState } from "react";
-import { Linking, Text, View } from "react-native";
-import {
-  closeTerminalView,
-  openTerminalView,
-  readTerminalView,
-  resizeTerminalView,
-} from "../shared/contracts";
-
-type Theme = PluginWorkspacePanelProps["theme"];
-
-// Same defaults as the app's terminal tabs.
-const FONT_FAMILY = [
-  "JetBrains Mono",
-  "JetBrainsMono Nerd Font",
-  "JetBrainsMono NF",
-  "MesloLGM Nerd Font",
-  "MesloLGM NF",
-  "Hack Nerd Font",
-  "FiraCode Nerd Font",
-  "Symbols Nerd Font",
-  "SF Mono",
-  "Menlo",
-  "Monaco",
-  "Consolas",
-  "'Liberation Mono'",
-  "monospace",
-].join(", ");
-const FONT_SIZE = 13;
-const SCROLLBACK_LINES = 5_000;
-const RETRY_MS = 1_000;
-const FIT_DEBOUNCE_MS = 100;
-
-function errorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}
-
-function translucent(color: string, alpha: number): string | undefined {
-  const hex = /^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(color);
-  if (!hex) return undefined;
-  const [red, green, blue] = hex.slice(1).map((part) => parseInt(part, 16));
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-}
-
-function terminalTheme(theme: Theme): ITheme {
-  return {
-    background: theme.colors.surface0,
-    foreground: theme.colors.foreground,
-    cursor: theme.colors.foreground,
-    cursorAccent: theme.colors.surface0,
-    selectionBackground: translucent(theme.colors.accent, 0.35),
-  };
-}
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-function openWebLink(uri: string) {
-  if (/^https?:\/\//i.test(uri)) void Linking.openURL(uri).catch(() => {});
-}
-
-/**
- * A live xterm.js view of a daemon terminal: the same stream and renderer as a terminal
- * tab. Web only; `onUnavailable` reports why the live stream could not start.
- */
-export function XtermView({
-  terminalId,
-  theme,
-  onUnavailable,
-}: {
-  terminalId: string;
-  theme: Theme;
-  onUnavailable(reason: string): void;
-}) {
-  const host = useRef<View>(null);
-  const terminal = useRef<Terminal | null>(null);
-  const [status, setStatus] = useState<string | null>("Connecting…");
-
-  const paseo = usePaseo();
-  const open = useRpc(openTerminalView);
-  const read = useRpc(readTerminalView);
-  const resize = useRpc(resizeTerminalView);
-  const close = useRpc(closeTerminalView);
-  const latest = useRef({ paseo, open, read, resize, close, theme, onUnavailable });
-  latest.current = { paseo, open, read, resize, close, theme, onUnavailable };
-
-  useEffect(() => {
-    // react-native-web refs are the underlying DOM elements.
-    const element = host.current as unknown as HTMLElement | null;
-    if (!element) return;
-    let disposed = false;
-    let viewId: string | null = null;
-    let observer: ResizeObserver | null = null;
-    let fitTimer: ReturnType<typeof setTimeout> | undefined;
-
-    async function stream(term: Terminal) {
-      let connected = false;
-      while (!disposed) {
-        try {
-          const opened = await latest.current.open({ terminalId, rows: term.rows, cols: term.cols });
-          if (disposed) {
-            void latest.current.close(opened).catch(() => {});
-            return;
-          }
-          viewId = opened.viewId;
-          connected = true;
-          setStatus(null);
-          let cursor = 0;
-          for (;;) {
-            const chunk = await latest.current.read({ viewId, cursor });
-            if (disposed) return;
-            if (chunk.data) term.write(chunk.data);
-            cursor = chunk.cursor;
-            if (chunk.closed) break;
-          }
-        } catch (error) {
-          if (disposed) return;
-          if (!connected) {
-            latest.current.onUnavailable(errorMessage(error));
-            return;
-          }
-          setStatus("Reconnecting…");
-        }
-        viewId = null;
-        await sleep(RETRY_MS);
-      }
-    }
-
-    void (async () => {
-      const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
-        import("@xterm/xterm/lib/xterm.mjs"),
-        import("@xterm/addon-fit/lib/addon-fit.mjs"),
-        import("@xterm/addon-web-links/lib/addon-web-links.mjs"),
-      ]);
-      if (disposed) return;
-      const term = new Terminal({
-        allowProposedApi: true,
-        cursorBlink: true,
-        cursorStyle: "bar",
-        fontFamily: FONT_FAMILY,
-        fontSize: FONT_SIZE,
-        lineHeight: 1,
-        // OSC 8 hyperlinks; plain URLs in the output go through WebLinksAddon.
-        linkHandler: { activate: (_event, text) => openWebLink(text) },
-        macOptionIsMeta: true,
-        scrollback: SCROLLBACK_LINES,
-        theme: terminalTheme(latest.current.theme),
-      });
-      terminal.current = term;
-      const fit = new FitAddon();
-      term.loadAddon(fit);
-      term.loadAddon(new WebLinksAddon((_event, uri) => openWebLink(uri)));
-      term.open(element);
-      fit.fit();
-
-      term.onData((data) => latest.current.paseo.terminals.ref(terminalId).write(data));
-      term.onResize(({ rows, cols }) => {
-        if (viewId) void latest.current.resize({ viewId, rows, cols }).catch(() => {});
-      });
-      // Copy and paste use Ctrl-Shift like Linux terminals. Ctrl-C also copies while text is
-      // selected, as in VS Code, so copying a URL cannot interrupt the prompt that printed it.
-      term.attachCustomKeyEventHandler((event) => {
-        if (event.type !== "keydown" || !event.ctrlKey || event.altKey || event.metaKey) return true;
-        const key = event.key.toLowerCase();
-        if (key === "c" && (event.shiftKey || term.hasSelection())) {
-          if (term.hasSelection()) {
-            void navigator.clipboard?.writeText(term.getSelection());
-            if (!event.shiftKey) term.clearSelection();
-          }
-          return false;
-        }
-        // Returning false leaves the browser's paste to xterm's textarea.
-        return !(key === "v" && event.shiftKey);
-      });
-
-      observer = new ResizeObserver(() => {
-        clearTimeout(fitTimer);
-        fitTimer = setTimeout(() => {
-          if (!disposed && element.clientWidth > 0 && element.clientHeight > 0) fit.fit();
-        }, FIT_DEBOUNCE_MS);
-      });
-      observer.observe(element);
-
-      await stream(term);
-    })().catch((error: unknown) => {
-      if (!disposed) latest.current.onUnavailable(errorMessage(error));
-    });
-
-    return () => {
-      disposed = true;
-      observer?.disconnect();
-      clearTimeout(fitTimer);
-      if (viewId) void latest.current.close({ viewId }).catch(() => {});
-      terminal.current?.dispose();
-      terminal.current = null;
-    };
-  }, [terminalId]);
-
-  useEffect(() => {
-    if (terminal.current) terminal.current.options.theme = terminalTheme(theme);
-  }, [theme]);
-
-  return (
-    <View style={{ flex: 1, padding: 6, backgroundColor: theme.colors.surface0 }}>
-      <View ref={host} style={{ flex: 1, overflow: "hidden" }} />
-      {status ? (
-        <Text
-          style={{
-            position: "absolute",
-            top: 8,
-            right: 12,
-            color: theme.colors.foregroundMuted,
-            fontSize: 12,
-          }}
-        >
-          {status}
-        </Text>
-      ) : null}
-    </View>
-  );
-}