paseo-terminal-integration 0.1.0 → 0.2.0

package/README.md

@@ -6,13 +6,25 @@ Two-way bridge between agent chats and Paseo terminals.
 (`bash`, `sh`, `shell`, `console`, `zsh`, `fish`, `python`, `js`/`node`) get a **Run in terminal**
 card under the reply:
 
-- **Run & send to agent** runs the block in the workspace terminal "Agent commands" and, when it
-  finishes, sends the command, exit code, and output to the agent as a new message. If the agent is
-  busy, delivery waits until its turn ends instead of interrupting it.
-- **Run only** runs it without sending; **Send output** sends it later.
+- **Run in side terminal** runs the block in the workspace terminal "Agent commands" and shows it in
+  the side panel; **Run silently** runs it without showing anything.
+- With **Send to agent** checked (the default), the command, exit code, and output go to the agent
+  as a new message when the block finishes. If the agent is busy, delivery waits until its turn
+  ends instead of interrupting it. Unchecked, **Send output** sends it later.
 - **Stop** sends Ctrl-C; **Send output so far** reports a still-running command.
 
-The terminal is a real PTY, so prompts (`sudo`, `y/n`) can be answered in the terminal tab. Runs in
+**Terminal panel.** The side panel (Explorer) shows "Agent commands" as a full terminal: the same
+xterm.js renderer and live stream as Paseo's terminal tabs, with colors, the cursor, full-screen
+programs, and keyboard input. Click it and type to answer `sudo` passwords, `y/n` questions, or
+npm's "Press ENTER" without leaving the chat. Ctrl-C copies while text is selected and otherwise
+goes to the shell; Ctrl-Shift-C and Ctrl-Shift-V always copy and paste. Web links open in the
+browser when clicked. The card's **Terminal** button opens the panel without running anything. On
+phones the panel is a plain-text copy with an input line and Enter, Ctrl-C, Ctrl-D, and Tab keys,
+in a tab that opens only when you ask. **Settings → Plugins → Terminal integration** switches the
+panel to a workspace tab and sets the checkbox's default.
+
+Paseo gives every workspace terminal its own tab, so "Agent commands" also appears in the tab bar
+(in the background). Closing that tab ends the terminal; the next run starts a new one. Runs in
 one workspace are queued so a command never types into another one's stdin. Each block runs as a
 script in the agent's working directory, so `cd` and `export` do not persist between runs.
 
@@ -27,10 +39,10 @@ Requires Paseo 0.10.1 or later and a macOS or Linux daemon host with `bash` (plu
 
 ```bash
 paseo plugin install npm:paseo-terminal-integration
-# or from GitHub
-paseo plugin install github:keefeere/paseo-terminal-integration
 ```
 
+Install from npm: GitHub installs skip npm dependencies, which the terminal panel needs.
+
 Plugins are trusted, unsandboxed code: this one types commands into terminals on the daemon host.
 Nothing runs until you press a button or submit `/run`.
 
@@ -41,12 +53,17 @@ Nothing runs until you press a button or submit `/run`.
 | `/run <command>`                                | Run a shell command and send its output to the agent        |
 | `/blocks`                                       | Add a run card for the latest reply (e.g. older chats)      |
 | ⌘K / Ctrl+K → "Terminal: add run buttons to …"  | Same as `/blocks`                                           |
+| ⌘K / Ctrl+K → "Terminal: show … in the side panel" | Open the terminal panel in the Explorer                  |
 
 ## Limitations
 
 - Output is read from the terminal screen, so very long lines arrive wrapped and only the last
   3,000 rows are visible. The agent receives at most 300 lines or 24,000 characters.
 - Run state lives in the plugin process; reloading the plugin forgets it (the cards stay).
+- The live panel opens its own connection to the daemon on the plugin host, using the address in
+  `$PASEO_HOME/paseo.pid` and the local credential, as the `paseo` CLI does. A daemon listening on
+  a Unix socket gets the plain-text panel instead.
+- Opening or resizing the panel resizes the PTY to fit it, as focusing a terminal tab does.
 - A command that has not started within 20 seconds fails, for example when something else is
   running in "Agent commands".
 

package/client/panel-opener.ts

@@ -0,0 +1,29 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { TERMINAL_PANEL_ID, type PanelLocation } from "../shared/settings";
+
+type OpenPanel = PluginClientContext["openPanel"];
+
+// Timeline renderers receive no navigation, so the entry hands its openPanel capability here.
+let openPanel: OpenPanel | null = null;
+
+export function setPanelOpener(next: OpenPanel | null): void {
+  openPanel = next;
+}
+
+/**
+ * Shows the terminal panel. Compact layouts have no Explorer, so they use a workspace tab and
+ * only when asked explicitly: an automatic tab switch would hide the chat on a phone.
+ */
+export function openTerminalPanel(
+  workspaceId: string,
+  where: PanelLocation,
+  { compact, explicit }: { compact: boolean; explicit: boolean },
+): void {
+  if (!openPanel || (compact && !explicit)) return;
+  const location = compact ? "workspace" : where;
+  try {
+    openPanel(TERMINAL_PANEL_ID, { workspaceId, location });
+  } catch {
+    if (location === "explorer") openPanel(TERMINAL_PANEL_ID, { workspaceId, location: "workspace" });
+  }
+}

package/client/run-card.tsx

@@ -1,4 +1,4 @@
-import { useRpc, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import { useAgent, useRpc, useSettings, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
 import { copyText, Icon, useToast } from "@getpaseo/plugin/client/react-native";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
@@ -13,6 +13,8 @@ import {
   type RunCardData,
   type RunSnapshot,
 } from "../shared/contracts";
+import { preferences } from "../shared/settings";
+import { openTerminalPanel } from "./panel-opener";
 
 type Theme = PluginTimelineItemProps["theme"];
 type Styles = ReturnType<typeof createStyles>;
@@ -42,6 +44,26 @@ export function RunCard({ item, agentId, theme, layout }: PluginTimelineItemProp
   const cancel = useRpc(cancelRun);
   const send = useRpc(sendRunOutput);
 
+  const workspaceId = useAgent(agentId, (agent) => agent.workspaceId);
+  const settings = useSettings(preferences);
+  const saved = settings.status === "ready" ? settings.values : null;
+  const panelLocation = saved?.panelLocation ?? "explorer";
+  const [sendChoice, setSendChoice] = useState<boolean | null>(null);
+  const sendToAgent = sendChoice ?? saved?.sendToAgent ?? true;
+  const runVisibleLabel =
+    layout.compact || panelLocation === "workspace" ? "Run in terminal tab" : "Run in side terminal";
+
+  function showTerminal() {
+    if (!workspaceId) return;
+    openTerminalPanel(workspaceId, panelLocation, { compact: layout.compact, explicit: true });
+  }
+  function runBlock(key: string, block: RunCardData["blocks"][number], visible: boolean) {
+    return act(key, async () => {
+      await start({ agentId, key, lang: block.lang, code: block.code, send: sendToAgent });
+      if (visible) showTerminal();
+    });
+  }
+
   const queryKey = useMemo(() => ["terminal-run-status", cardId], [cardId]);
   const status = useQuery({
     queryKey,
@@ -73,6 +95,23 @@ export function RunCard({ item, agentId, theme, layout }: PluginTimelineItemProp
         <Text style={styles.muted} numberOfLines={1}>
           · {TERMINAL_NAME}
         </Text>
+        <View style={styles.spacer} />
+        <Checkbox
+          styles={styles}
+          theme={theme}
+          label="Send to agent"
+          checked={sendToAgent}
+          onChange={setSendChoice}
+        />
+        {workspaceId ? (
+          <ActionButton
+            styles={styles}
+            theme={theme}
+            icon="PanelRight"
+            label="Terminal"
+            onPress={showTerminal}
+          />
+        ) : null}
       </View>
       {blocks.map((block, index) => {
         const key = keys[index];
@@ -115,23 +154,19 @@ export function RunCard({ item, agentId, theme, layout }: PluginTimelineItemProp
                   <ActionButton
                     styles={styles}
                     theme={theme}
-                    icon="Play"
-                    label={run ? "Run again & send" : "Run & send to agent"}
+                    icon="PanelRight"
+                    label={runVisibleLabel}
                     tone="primary"
                     disabled={busy || active}
-                    onPress={() =>
-                      act(key, () => start({ agentId, key, lang: block.lang, code: block.code, send: true }))
-                    }
+                    onPress={() => runBlock(key, block, true)}
                   />
                   <ActionButton
                     styles={styles}
                     theme={theme}
-                    icon="SquareTerminal"
-                    label="Run only"
+                    icon="Play"
+                    label="Run silently"
                     disabled={busy || active}
-                    onPress={() =>
-                      act(key, () => start({ agentId, key, lang: block.lang, code: block.code, send: false }))
-                    }
+                    onPress={() => runBlock(key, block, false)}
                   />
                   {run && !run.sent && !active ? (
                     <ActionButton
@@ -203,6 +238,37 @@ function RunStatus({ run, styles }: { run: RunSnapshot; styles: Styles }) {
   );
 }
 
+function Checkbox({
+  styles,
+  theme,
+  label,
+  checked,
+  onChange,
+}: {
+  styles: Styles;
+  theme: Theme;
+  label: string;
+  checked: boolean;
+  onChange(checked: boolean): void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityLabel={label}
+      accessibilityState={{ checked }}
+      onPress={() => onChange(!checked)}
+      style={({ pressed }) => [styles.checkbox, { opacity: pressed ? 0.75 : 1 }]}
+    >
+      <Icon
+        name={checked ? "SquareCheck" : "Square"}
+        size={16}
+        color={checked ? theme.colors.accent : theme.colors.foregroundMuted}
+      />
+      <Text style={[styles.buttonText, { color: theme.colors.foreground }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
 function ActionButton({
   styles,
   theme,
@@ -260,9 +326,22 @@ function createStyles(theme: Theme, compact: boolean) {
       padding: compact ? 10 : 12,
       backgroundColor: theme.colors.surface1,
     },
-    header: { flexDirection: "row" as const, alignItems: "center" as const, gap: 6 },
+    header: {
+      flexDirection: "row" as const,
+      flexWrap: "wrap" as const,
+      alignItems: "center" as const,
+      gap: 6,
+    },
+    checkbox: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      gap: 6,
+      paddingHorizontal: 4,
+      paddingVertical: compact ? 7 : 5,
+    },
     title: { color: theme.colors.foreground, fontWeight: "600" as const },
     muted: { color: theme.colors.foregroundMuted, flexShrink: 1 },
+    spacer: { flex: 1 },
     success: { color: theme.colors.statusSuccess },
     danger: { color: theme.colors.statusDanger },
     block: { gap: 8 },

package/client/settings-screen.tsx

@@ -0,0 +1,53 @@
+import { useSettings, type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import {
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { Text } from "react-native";
+import { preferences, type PanelLocation } from "../shared/settings";
+
+const panelLocationChoices: { label: string; value: PanelLocation }[] = [
+  { label: "Side panel (Explorer)", value: "explorer" },
+  { label: "Workspace tab", value: "workspace" },
+];
+
+export function SettingsScreen({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(preferences);
+
+  if (settings.status !== "ready") {
+    const message =
+      settings.status === "loading" ? "Loading…" : `Settings are unavailable: ${settings.error}`;
+    return <Text style={{ color: theme.colors.foregroundMuted }}>{message}</Text>;
+  }
+  const { values, revision } = settings;
+
+  return (
+    <SettingsSection title="Run cards">
+      <SettingsCard>
+        <SettingsSelect
+          label="Show the terminal in"
+          hint={`Used by "Run in side terminal", the Terminal button, and /run. Phones always use a tab and never switch to it automatically.`}
+          value={values.panelLocation}
+          options={panelLocationChoices}
+          disabled={settings.saving}
+          error={settings.saveError}
+          onValueChange={(panelLocation) => void settings.save({ ...values, panelLocation }, revision)}
+        />
+        <SettingsSwitch
+          label="Send output to the agent by default"
+          hint={`Initial state of the "Send to agent" checkbox on each run card.`}
+          value={values.sendToAgent}
+          disabled={settings.saving}
+          onValueChange={(sendToAgent) => void settings.save({ ...values, sendToAgent }, revision)}
+        />
+        <SettingsRow
+          label="What the panel shows"
+          hint={`The live "Agent commands" terminal with colors and keyboard input, for prompts such as sudo passwords, y/n questions, or 2FA codes. Ctrl-C copies while text is selected; Ctrl-Shift-C and Ctrl-Shift-V copy and paste. Phones show a plain-text copy with an input line.`}
+        />
+      </SettingsCard>
+    </SettingsSection>
+  );
+}

package/client/terminal-panel.tsx

@@ -0,0 +1,273 @@
+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

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,222 @@
+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>
+  );
+}

package/index.client.tsx

@@ -1,15 +1,22 @@
 import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { setPanelOpener } from "./client/panel-opener";
 import { RunCard } from "./client/run-card";
+import { SettingsScreen } from "./client/settings-screen";
+import { TerminalPanel } from "./client/terminal-panel";
 import {
   RUN_CARD_KIND,
   RUN_CARD_VERSION,
   runAdhoc,
   runCardSchema,
   scanBlocks,
+  TERMINAL_NAME,
   terminalOutputSource,
 } from "./shared/contracts";
+import { TERMINAL_PANEL_ID } from "./shared/settings";
 
 export default function contribute(client: PluginClientContext) {
+  setPanelOpener((id, options) => client.openPanel(id, options));
+
   client.addTimelineRenderer({
     kind: RUN_CARD_KIND,
     version: RUN_CARD_VERSION,
@@ -17,6 +24,22 @@ export default function contribute(client: PluginClientContext) {
     Component: RunCard,
   });
 
+  client.addWorkspacePanel({
+    id: TERMINAL_PANEL_ID,
+    title: TERMINAL_NAME,
+    icon: "SquareTerminal",
+    context: "workspace",
+    locations: ["explorer", "workspace"],
+    Component: TerminalPanel,
+  });
+
+  client.addSettingsScreen({
+    id: "preferences",
+    title: "Terminal integration",
+    icon: "SquareTerminal",
+    Component: SettingsScreen,
+  });
+
   client.addAttachmentSource(terminalOutputSource);
 
   client.addSlashCommand({
@@ -24,9 +47,14 @@ export default function contribute(client: PluginClientContext) {
     description: "Run a shell command in the workspace terminal and send its output to the agent",
     argumentHint: "<command>",
     context: "agent",
-    async onSubmit({ args, agent, rpc }) {
+    async onSubmit({ args, agent, rpc, openPanel }) {
       if (!args) throw new Error("Usage: /run <command>");
-      await rpc(runAdhoc, { agentId: agent.id, command: args });
+      const { panelLocation } = await rpc(runAdhoc, { agentId: agent.id, command: args });
+      try {
+        openPanel(TERMINAL_PANEL_ID, { location: panelLocation });
+      } catch {
+        // Compact layouts have no Explorer; the card's Terminal button still opens a tab.
+      }
     },
   });
 
@@ -52,5 +80,20 @@ export default function contribute(client: PluginClientContext) {
     onSelect: ({ agent, rpc }) => addRunButtons(agent.id, rpc),
   });
 
-  return () => {};
+  client.addCommandCenterItem({
+    id: "open-terminal-panel",
+    title: `Terminal: show "${TERMINAL_NAME}" in the side panel`,
+    icon: "PanelRight",
+    keywords: ["terminal", "explorer", "sidebar", "agent commands"],
+    context: "workspace",
+    onSelect({ openPanel }) {
+      try {
+        openPanel(TERMINAL_PANEL_ID, { location: "explorer" });
+      } catch {
+        openPanel(TERMINAL_PANEL_ID, { location: "workspace" });
+      }
+    },
+  });
+
+  return () => setPanelOpener(null);
 }

package/index.server.ts

@@ -2,8 +2,14 @@ import type { PluginServerContext } from "@getpaseo/plugin/server";
 import { searchTerminals } from "./server/attachments";
 import { appendCardForTurn, appendRunCard, scanLatestReply } from "./server/cards";
 import { cleanupScripts, TerminalRunner } from "./server/runner";
+import { TerminalStreams } from "./server/streams";
+import { preferences } from "./shared/settings";
 import {
   cancelRun,
+  closeTerminalView,
+  openTerminalView,
+  readTerminalView,
+  resizeTerminalView,
   runAdhoc,
   runKey,
   runStatus,
@@ -14,7 +20,9 @@ import {
 } from "./shared/contracts";
 
 export default function contribute(server: PluginServerContext) {
+  const settings = server.registerSettings(preferences);
   let runner: TerminalRunner | null = null;
+  const streams = new TerminalStreams();
   const runnerFor = (paseo: ConstructorParameters<typeof TerminalRunner>[0]) =>
     (runner ??= new TerminalRunner(paseo));
 
@@ -30,7 +38,8 @@ export default function contribute(server: PluginServerContext) {
     const cardId = await appendRunCard(paseo, agentId, [block]);
     if (!cardId) throw new Error("Command is too long");
     await runnerFor(paseo).start({ agentId, key: runKey(cardId, 0), ...block, send: true });
-    return { cardId };
+    const saved = await settings.read();
+    return { cardId, panelLocation: saved.status === "ready" ? saved.values.panelLocation : "explorer" };
   });
 
   server.handle(scanBlocks, async ({ agentId }, { paseo }) => ({
@@ -39,8 +48,14 @@ export default function contribute(server: PluginServerContext) {
 
   server.handle(searchTerminalOutput, searchTerminals);
 
+  server.handle(openTerminalView, (input) => streams.open(input));
+  server.handle(readTerminalView, (input) => streams.read(input));
+  server.handle(resizeTerminalView, (input) => streams.resize(input));
+  server.handle(closeTerminalView, (input) => streams.close(input));
+
   return async () => {
     runner?.stop();
+    await streams.stop();
     await cleanupScripts();
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo-terminal-integration",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "paseo-plugin.json",
     "index.client.tsx",
@@ -38,5 +38,11 @@
     "paseo-plugin",
     "terminal",
     "agents"
-  ]
+  ],
+  "dependencies": {
+    "@getpaseo/client": "0.10.1",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0"
+  }
 }

package/server/attachments.ts

@@ -2,7 +2,7 @@ import { pathToFileURL } from "node:url";
 import type { RpcInput, RpcOutput } from "@getpaseo/plugin";
 import type { PluginHandlerContext } from "@getpaseo/plugin/server";
 import type { searchTerminalOutput } from "../shared/contracts";
-import { fenced, trimBlankEdges, withoutRunMarkers } from "./text";
+import { fenced, trimBlankEdges, withoutRunMarkers } from "../shared/text";
 
 const DEFAULT_LINES = 200;
 const MAX_LINES = 2_000;

package/server/runner.ts

@@ -5,7 +5,7 @@ import path from "node:path";
 import type { PluginHandlerContext } from "@getpaseo/plugin/server";
 import { interpreterFor, type Interpreter } from "../shared/code-blocks";
 import { TERMINAL_NAME, type RunSnapshot } from "../shared/contracts";
-import { fenced, trimBlankEdges } from "./text";
+import { fenced, trimBlankEdges } from "../shared/text";
 
 type Paseo = PluginHandlerContext["paseo"];
 type TerminalHandle = ReturnType<Paseo["terminals"]["ref"]>;

package/server/streams.ts

@@ -0,0 +1,228 @@
+import { randomUUID } from "node:crypto";
+import { readFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import path from "node:path";
+import { DaemonClient, type TerminalStreamEvent } from "@getpaseo/client/internal/daemon-client";
+import { RUN_MARKER } from "../shared/text";
+
+// The plugin SDK exposes terminal capture without colors or cursor state, so live views use
+// their own daemon connection and the same terminal stream the app's terminal tabs render.
+
+const SCROLLBACK_LINES = 5_000;
+const READ_WAIT_MS = 15_000;
+const IDLE_VIEW_MS = 60_000;
+const SWEEP_MS = 30_000;
+const MAX_PENDING_CHARS = 4_000_000;
+const CONNECT_TIMEOUT_MS = 10_000;
+// Full reset, so a restore after a reconnect replaces the screen instead of appending to it.
+const RESET = "\x1bc";
+
+interface Size {
+  rows: number;
+  cols: number;
+}
+
+interface View {
+  id: string;
+  terminalId: string;
+  chunks: string[];
+  /** Cursor value at the start of chunks[0]. */
+  base: number;
+  /** Cursor value after the last chunk. */
+  end: number;
+  closed: string | null;
+  seenAt: number;
+  decoder: TextDecoder;
+  wake: (() => void) | null;
+  release(): void;
+}
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+async function daemonTarget(): Promise<{ url: string; token: string | undefined }> {
+  const home = process.env.PASEO_HOME?.trim() || path.join(homedir(), ".paseo");
+  let listen = "";
+  try {
+    const lock = JSON.parse(await readFile(path.join(home, "paseo.pid"), "utf8")) as { listen?: unknown };
+    if (typeof lock.listen === "string") listen = lock.listen.trim();
+  } catch {
+    throw new Error("The Paseo daemon lock file is missing");
+  }
+  if (/^\d+$/.test(listen)) listen = `127.0.0.1:${listen}`;
+  listen = listen.replace(/^(0\.0\.0\.0|\[::\]):/, "127.0.0.1:");
+  if (!/^(\[[\da-f:]+\]|[\w.-]+):\d+$/i.test(listen)) {
+    throw new Error(`Live terminals need a TCP daemon address; this daemon listens on ${listen || "an unknown address"}`);
+  }
+  const token = await readFile(path.join(home, "local-credential"), "utf8").then(
+    (text) => text.trim(),
+    () => "",
+  );
+  return { url: `ws://${listen}/ws`, token: /^[\w-]{43}$/.test(token) ? token : undefined };
+}
+
+export class TerminalStreams {
+  private client: Promise<DaemonClient> | null = null;
+  private readonly views = new Map<string, View>();
+  private readonly sweeper = setInterval(() => this.sweep(), SWEEP_MS);
+
+  async open({ terminalId, rows, cols }: Size & { terminalId: string }): Promise<{ viewId: string }> {
+    const client = await this.connect();
+    const view: View = {
+      id: randomUUID(),
+      terminalId,
+      chunks: [],
+      base: 0,
+      end: 0,
+      closed: null,
+      seenAt: Date.now(),
+      decoder: new TextDecoder(),
+      wake: null,
+      release: () => {},
+    };
+    this.views.set(view.id, view);
+
+    // Like a terminal tab, take over the PTY size before asking for the snapshot.
+    client.sendTerminalInput(terminalId, { type: "resize", rows, cols, intent: "claim" });
+    const subscription = client.observeTerminal(terminalId, (event) => this.receive(view, event), {
+      restore: { mode: "full-snapshot", scrollbackLines: SCROLLBACK_LINES, size: { rows, cols } },
+    });
+    view.release = () => void subscription.release().catch(() => {});
+    subscription.subscribe({
+      snapshot: () => {},
+      update: (message) => {
+        if (message.type === "terminal_stream_exit") {
+          this.finish(view, message.payload.error ?? "The terminal exited");
+        }
+      },
+      error: (error) => this.finish(view, errorMessage(error)),
+    });
+
+    try {
+      const ready = await subscription.ready;
+      if (ready.error) throw new Error(ready.error);
+    } catch (error) {
+      this.drop(view);
+      throw error;
+    }
+    return { viewId: view.id };
+  }
+
+  async read({ viewId, cursor }: { viewId: string; cursor: number }) {
+    const view = this.views.get(viewId);
+    if (!view) return { data: "", cursor, closed: "The terminal view expired" };
+    view.seenAt = Date.now();
+    while (view.chunks.length > 0 && view.base + view.chunks[0].length <= cursor) {
+      view.base += view.chunks.shift()!.length;
+    }
+    if (view.end <= cursor && !view.closed) await this.waitForOutput(view);
+    view.seenAt = Date.now();
+
+    const data = view.chunks.join("").slice(Math.max(0, cursor - view.base));
+    if (view.closed && !data) this.drop(view);
+    return { data, cursor: view.end, closed: data ? null : view.closed };
+  }
+
+  async resize({ viewId, rows, cols }: Size & { viewId: string }) {
+    const view = this.views.get(viewId);
+    if (view && !view.closed) {
+      const client = await this.connect();
+      client.sendTerminalInput(view.terminalId, { type: "resize", rows, cols, intent: "claim" });
+    }
+    return {};
+  }
+
+  close({ viewId }: { viewId: string }) {
+    const view = this.views.get(viewId);
+    if (view) this.drop(view);
+    return {};
+  }
+
+  async stop(): Promise<void> {
+    clearInterval(this.sweeper);
+    for (const view of [...this.views.values()]) this.drop(view);
+    const client = this.client;
+    this.client = null;
+    await client?.then((connected) => connected.close()).catch(() => {});
+  }
+
+  private connect(): Promise<DaemonClient> {
+    this.client ??= (async () => {
+      const { url, token } = await daemonTarget();
+      const client = new DaemonClient({
+        url,
+        clientId: `terminal-integration-${randomUUID()}`,
+        clientType: "cli",
+        ...(token ? { localCredential: () => token } : {}),
+        connectTimeoutMs: CONNECT_TIMEOUT_MS,
+        suppressSendErrors: true,
+        reconnect: { enabled: true },
+      });
+      try {
+        await client.connect();
+      } catch (error) {
+        await client.close().catch(() => {});
+        throw new Error(`Could not connect to the Paseo daemon at ${url}: ${errorMessage(error)}`);
+      }
+      return client;
+    })().catch((error: unknown) => {
+      this.client = null;
+      throw error;
+    });
+    return this.client;
+  }
+
+  private receive(view: View, event: TerminalStreamEvent) {
+    // Cell snapshots only arrive for visible-snapshot subscriptions.
+    if (event.type === "snapshot" || view.closed) return;
+    if (event.type === "restore") view.decoder = new TextDecoder();
+    // Snapshots drop the concealed attribute, so markers would show; blanking them keeps
+    // every line's cursor positions intact.
+    const text = view.decoder.decode(event.data, { stream: true }).replace(RUN_MARKER, "");
+    this.push(view, event.type === "restore" ? RESET + text : text);
+  }
+
+  private push(view: View, text: string) {
+    if (!text) return;
+    view.chunks.push(text);
+    view.end += text.length;
+    if (view.end - view.base > MAX_PENDING_CHARS) {
+      this.finish(view, "The terminal view fell behind");
+      return;
+    }
+    view.wake?.();
+  }
+
+  private waitForOutput(view: View): Promise<void> {
+    view.wake?.();
+    return new Promise((resolve) => {
+      const done = () => {
+        clearTimeout(timer);
+        if (view.wake === done) view.wake = null;
+        resolve();
+      };
+      const timer = setTimeout(done, READ_WAIT_MS);
+      view.wake = done;
+    });
+  }
+
+  private finish(view: View, reason: string) {
+    if (view.closed) return;
+    view.closed = reason;
+    view.release();
+    view.wake?.();
+  }
+
+  private drop(view: View) {
+    this.finish(view, "The terminal view closed");
+    this.views.delete(view.id);
+  }
+
+  private sweep() {
+    const cutoff = Date.now() - IDLE_VIEW_MS;
+    for (const view of [...this.views.values()]) {
+      if (!view.wake && view.seenAt < cutoff) this.drop(view);
+    }
+  }
+}

package/shared/contracts.ts

@@ -1,5 +1,6 @@
 import { defineAttachmentSource, defineRpc } from "@getpaseo/plugin";
 import { z } from "zod";
+import { panelLocations } from "./settings";
 
 export const TERMINAL_NAME = "Agent commands";
 
@@ -65,7 +66,34 @@ export const sendRunOutput = defineRpc({
 export const runAdhoc = defineRpc({
   name: "run.adhoc",
   input: z.object({ agentId: z.string(), command: z.string().min(1) }),
-  output: z.object({ cardId: z.string() }),
+  output: z.object({ cardId: z.string(), panelLocation: z.enum(panelLocations) }),
+});
+
+const terminalSize = { rows: z.number().int().min(2).max(500), cols: z.number().int().min(10).max(1000) };
+
+export const openTerminalView = defineRpc({
+  name: "view.open",
+  input: z.object({ terminalId: z.string(), ...terminalSize }),
+  output: z.object({ viewId: z.string() }),
+});
+
+/** Long-polls for terminal output after `cursor`, which acknowledges everything before it. */
+export const readTerminalView = defineRpc({
+  name: "view.read",
+  input: z.object({ viewId: z.string(), cursor: z.number().int().nonnegative() }),
+  output: z.object({ data: z.string(), cursor: z.number().int(), closed: z.string().nullable() }),
+});
+
+export const resizeTerminalView = defineRpc({
+  name: "view.resize",
+  input: z.object({ viewId: z.string(), ...terminalSize }),
+  output: z.object({}),
+});
+
+export const closeTerminalView = defineRpc({
+  name: "view.close",
+  input: z.object({ viewId: z.string() }),
+  output: z.object({}),
 });
 
 export const scanBlocks = defineRpc({

package/shared/settings.ts

@@ -0,0 +1,19 @@
+import { defineSettings } from "@getpaseo/plugin";
+import { z } from "zod";
+
+export const TERMINAL_PANEL_ID = "terminal";
+
+export const panelLocations = ["explorer", "workspace"] as const;
+export type PanelLocation = (typeof panelLocations)[number];
+
+export const preferences = defineSettings({
+  id: "preferences",
+  scope: "host",
+  version: 1,
+  schema: z.object({
+    /** Where "Run in side terminal", the Terminal button, and /run show the terminal panel. */
+    panelLocation: z.enum(panelLocations).default("explorer"),
+    /** Initial state of a run card's "Send to agent" checkbox. */
+    sendToAgent: z.boolean().default(true),
+  }),
+});

package/{server → shared}/text.ts

@@ -5,11 +5,14 @@ export function fenced(content: string, lang = ""): string {
   return `${fence}${lang}\n${content}\n${fence}`;
 }
 
-/** Removes the run markers the runner prints around command output. */
+/** Matches the run markers the runner prints, concealed, around command output. */
+export const RUN_MARKER = /__PTI_(?:BEGIN_[0-9a-f]+|END_[0-9a-f]+_\d+)__/g;
+
+/** Removes the run markers from captured lines. */
 export function withoutRunMarkers(lines: readonly string[]): string[] {
   return lines
     .filter((line) => !/^\s*__PTI_BEGIN_[0-9a-f]+__\s*$/.test(line))
-    .map((line) => line.replace(/__PTI_(?:BEGIN_[0-9a-f]+|END_[0-9a-f]+_\d+)__/g, ""));
+    .map((line) => line.replace(RUN_MARKER, ""));
 }
 
 export function trimBlankEdges(lines: readonly string[]): string[] {