agello 0.3.0 → 0.4.1

package/web/index.html

@@ -12,5 +12,17 @@
 </head>
 <body>
   <agent-bridge screen></agent-bridge>
+  <script>
+    // Keep the pane picked in the drawer across reloads (?server=http://127.0.0.1:<port>).
+    const bridge = document.querySelector("agent-bridge");
+    const saved = new URLSearchParams(location.search).get("server");
+    if (saved && /^http:\/\/127\.0\.0\.1:\d+$/.test(saved)) bridge.setAttribute("server", saved);
+    bridge.addEventListener("agent-pane", (e) => {
+      const url = new URL(location.href);
+      if (e.detail.server === location.origin) url.searchParams.delete("server");
+      else url.searchParams.set("server", e.detail.server);
+      history.replaceState(null, "", url);
+    });
+  </script>
 </body>
 </html>

package/web/terminal.js

@@ -0,0 +1,121 @@
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+
+export function mountTerminal(host, status, server) {
+  const term = new Terminal({ fontSize: 14, fontFamily: 'Menlo, Consolas, monospace',
+    cursorBlink: true, scrollback: 0, disableStdin: true,
+    theme: { background: '#101114', foreground: '#e4e4e7' } });
+  const fit = new FitAddon();
+  term.loadAddon(fit);
+  term.open(host);
+  fit.fit();
+  const ws = new WebSocket(`${server.replace(/^http/, "ws")}/terminal`);
+  let active = true, ready = false, failed = false, queued = 0;
+  let resizeTimer;
+  const send = (msg) => {
+    if (active && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
+  };
+  const dimensions = () => ({ cols: Math.max(2, Math.min(500, term.cols)), rows: Math.max(2, Math.min(300, term.rows)) });
+  status.textContent = "터미널 연결 중…";
+  ws.onopen = () => send({ type: "terminal.start", ...dimensions() });
+  ws.onmessage = (event) => {
+    if (!active) return;
+    try {
+      const frame = JSON.parse(event.data);
+      if (frame.type === "terminal.error") {
+        failed = true;
+        status.textContent = frame.message;
+      } else if (frame.type === "terminal.frame") {
+        const data = Uint8Array.from(atob(frame.bytes), (c) => c.charCodeAt(0));
+        queued += data.length;
+        if (queued > 4 * 1024 * 1024) {
+          failed = true;
+          status.textContent = "화면 처리가 지연되었습니다. 다시 연결해 주세요.";
+          ws.close();
+          return;
+        }
+        if (term.cols !== frame.width || term.rows !== frame.height) term.resize(frame.width, frame.height);
+        term.write(data, () => { queued -= data.length; });
+        if (!ready) {
+          ready = true;
+          term.options.disableStdin = false;
+          status.textContent = "터미널 연결됨 · 키보드 입력 가능";
+          term.focus();
+        }
+      }
+    } catch {
+      failed = true;
+      status.textContent = "터미널 화면을 읽을 수 없습니다. 다시 연결해 주세요.";
+      ws.close();
+    }
+  };
+  ws.onclose = () => {
+    if (!active) return;
+    ready = false;
+    term.options.disableStdin = true;
+    if (!failed) status.textContent = "연결이 종료되었습니다. 다시 연결해 주세요.";
+  };
+  ws.onerror = () => { failed = true; status.textContent = "터미널 서버에 연결할 수 없습니다."; };
+  term.onData((text) => { if (ready) send({ type: "terminal.input", text }); });
+  // Herdr renders viewport frames; scroll the source viewport rather than an
+  // xterm scrollback buffer. Herdr routes wheel events to alternate-screen apps.
+  const wheel = (event) => {
+    if (!ready || !event.deltaY || event.ctrlKey) return;
+    event.preventDefault();
+    event.stopPropagation();
+    send({ type: "terminal.scroll", direction: event.deltaY < 0 ? "up" : "down",
+      lines: Math.min(100, Math.max(1, Math.ceil(Math.abs(event.deltaY) / 40))) });
+  };
+  host.addEventListener("wheel", wheel, { passive: false, capture: true });
+  // xterm pastes text only. For images (a Finder file copy or a screenshot),
+  // upload the file the browser received and paste its path, as a local
+  // terminal does for a dropped file: Claude Code attaches image paths.
+  // (Sending Ctrl+V instead would make Claude Code read the system clipboard,
+  // which for a Finder copy holds the file icon, not the image.)
+  const paste = async (event) => {
+    const data = event.clipboardData;
+    if (!ready || !data) return;
+    const files = [...data.items].filter((i) => i.kind === "file" && i.type.startsWith("image/")).map((i) => i.getAsFile());
+    if (!files.length) return;
+    event.preventDefault();
+    event.stopPropagation();
+    status.textContent = "이미지 올리는 중…";
+    try {
+      const images = await Promise.all(files.slice(0, 5).map((f) => new Promise((resolve, reject) => {
+        const r = new FileReader();
+        r.onload = () => resolve({ type: f.type, data: String(r.result).split(",")[1] });
+        r.onerror = reject;
+        r.readAsDataURL(f);
+      })));
+      const res = await fetch(`${server}/upload`, {
+        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ images }),
+      });
+      const d = await res.json();
+      if (!d.ok) throw new Error(d.error);
+      send({ type: "terminal.input", text: `\x1b[200~${d.paths.join(" ")}\x1b[201~` });
+      status.textContent = "터미널 연결됨 · 키보드 입력 가능";
+    } catch {
+      status.textContent = "이미지를 올리지 못했습니다. (PNG·JPEG·GIF·WebP, 10MB 이하)";
+    }
+  };
+  host.addEventListener("paste", paste, true);
+  const observer = new ResizeObserver(() => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      if (!active || !host.clientWidth || !host.clientHeight) return;
+      fit.fit();
+      if (ready) send({ type: "terminal.resize", ...dimensions() });
+    }, 100);
+  });
+  observer.observe(host);
+  return () => {
+    active = false;
+    clearTimeout(resizeTimer);
+    observer.disconnect();
+    host.removeEventListener("wheel", wheel, true);
+    host.removeEventListener("paste", paste, true);
+    ws.close();
+    term.dispose();
+    host.replaceChildren();
+  };
+}

package/src/player.ts

@@ -1,234 +0,0 @@
-// Presentation script player.
-//
-// A script is a list of steps. Each step has an optional `go` (how to bring the
-// screen to that step: "#3" sets location.hash, anything else is evaluated as
-// JS in the page; written by the agent, agello knows nothing about the deck)
-// and lines (`say`), each shown as one bubble.
-//
-// The player owns order and timing: entering a step runs its `go`, then every
-// line is sent and held for its reading time (see PACE). pause() stops at once and keeps
-// the position, resume() re-runs the current step's `go` (the agent may have
-// moved the screen meanwhile) and continues from the next unshown line.
-// goto() moves the position and shows that step without playing.
-//
-// Positions are "step.line", 1-based, in everything that leaves this module.
-
-import type { Rect } from "./screencast.ts";
-
-export type Step = { go?: string; say: string[]; hold?: number };
-export type Script = { rect?: Rect; steps: Step[] };
-export type PlayerInfo = {
-  state: "empty" | "ready" | "playing" | "paused" | "done";
-  next?: string; // next line to show ("3.2")
-  last?: string; // last line shown
-  steps: number;
-};
-
-// Pacing: the audience looks at a new screen first, then reads and thinks.
-//   go -> 1s -> line (shown >= 10s) -> fades out -> 0.3s -> next line
-//                                     last line -> fades out -> 0.7s -> next step's go
-const MIN_HOLD = 10;
-const MAX_HOLD = 20;
-export const PACE = { afterGo: 1000, fade: 500, betweenLines: 300, afterStep: 700 };
-
-// How long one line stays on screen (s): at least 10s, longer text a bit more
-// (about 8 chars/s past the first ~50 chars), at most 20s. `hold` can only
-// lengthen it.
-export function lineHold(text: string, hold?: number): number {
-  const auto = Math.min(MAX_HOLD, Math.max(MIN_HOLD, 4 + [...text].length / 8));
-  return hold != null && Number.isFinite(hold) && hold > 0 ? Math.max(MIN_HOLD, hold) : auto;
-}
-
-export function parseRectString(v: unknown): Rect | undefined {
-  if (v && typeof v === "object") {
-    const r = v as any;
-    return { x: r.x, y: r.y, w: r.w, h: r.h };
-  }
-  if (typeof v !== "string") return undefined;
-  const n = v.split(/[\s,]+/).filter(Boolean).map(Number);
-  return n.length === 4 ? { x: n[0], y: n[1], w: n[2], h: n[3] } : undefined;
-}
-
-// Validate a script from JSON. Returns the script or an error message.
-export function parseScript(raw: any): Script | string {
-  if (!raw || typeof raw !== "object") return "script must be an object";
-  if (!Array.isArray(raw.steps) || !raw.steps.length) return "steps must be a non-empty array";
-  const steps: Step[] = [];
-  for (const [i, s] of raw.steps.entries()) {
-    const at = `steps[${i}]`;
-    if (!s || typeof s !== "object") return `${at} must be an object`;
-    if (s.go != null && typeof s.go !== "string") return `${at}.go must be a string`;
-    const say = s.say == null ? [] : Array.isArray(s.say) ? s.say : [s.say];
-    if (!say.every((l: unknown) => typeof l === "string" && l.trim())) return `${at}.say must be non-empty strings`;
-    if (s.hold != null && !(Number.isFinite(s.hold) && s.hold > 0)) return `${at}.hold must be a positive number`;
-    steps.push({ go: s.go || undefined, say: say.map((l: string) => l.trim()), hold: s.hold });
-  }
-  const rect = raw.rect == null ? undefined : parseRectString(raw.rect);
-  if (raw.rect != null && !rect) return "rect must be \"x,y,w,h\" or {x,y,w,h}";
-  return { rect, steps };
-}
-
-// "3" or "3.2" (1-based) -> 0-based position
-export function parsePos(v: string): { step: number; line: number } | null {
-  const m = String(v).trim().match(/^(\d+)(?:\.(\d+))?$/);
-  if (!m) return null;
-  const step = Number(m[1]) - 1;
-  const line = m[2] ? Number(m[2]) - 1 : 0;
-  return step >= 0 && line >= 0 ? { step, line } : null;
-}
-
-export function createPlayer(deps: {
-  go: (expr: string) => Promise<void>;
-  say: (text: string, at: string, hold: number) => void;
-  done: () => void;
-  changed: () => void;
-}) {
-  let script: Script | null = null;
-  let state: PlayerInfo["state"] = "empty";
-  let cur = { step: 0, line: 0 }; // next line to show
-  let last: { step: number; line: number } | null = null;
-  let entered = false; // `go` of cur.step already run in this play run
-  let run = 0; // bumps on every pause/goto/load, stale timers check it
-  let timer: Timer | null = null;
-
-  const fmt = (p: { step: number; line: number }) => `${p.step + 1}.${p.line + 1}`;
-  const set = (s: PlayerInfo["state"]) => {
-    state = s;
-    deps.changed();
-  };
-  const cancel = () => {
-    run++;
-    if (timer) clearTimeout(timer);
-    timer = null;
-  };
-  const wait = (ms: number, id: number, fn: () => void) => {
-    timer = setTimeout(() => id === run && fn(), ms);
-  };
-
-  function info(): PlayerInfo {
-    const steps = script?.steps.length ?? 0;
-    // next line as it will be played (a finished step points at the next step)
-    let p = cur;
-    while (script && p.step < steps && p.line >= Math.max(1, script.steps[p.step].say.length))
-      p = { step: p.step + 1, line: 0 };
-    return {
-      state,
-      steps,
-      next: script && p.step < steps ? fmt(p) : undefined,
-      last: last ? fmt(last) : undefined,
-    };
-  }
-
-  // Skip past finished steps (cur.line beyond the step's lines).
-  function normalize() {
-    if (!script) return;
-    while (cur.step < script.steps.length && cur.line >= Math.max(1, script.steps[cur.step].say.length)) {
-      cur = { step: cur.step + 1, line: 0 };
-      entered = false;
-    }
-  }
-
-  async function tick(id: number) {
-    if (id !== run || state !== "playing" || !script) return;
-    normalize();
-    if (cur.step >= script.steps.length) {
-      set("done");
-      deps.done();
-      return;
-    }
-    const step = script.steps[cur.step];
-    if (!entered) {
-      entered = true;
-      if (step.go) {
-        await deps.go(step.go);
-        if (id !== run) return;
-        wait(PACE.afterGo, id, () => tick(id));
-        return;
-      }
-    }
-    if (!step.say.length) {
-      // silent step: just show the screen for `hold` seconds
-      cur = { step: cur.step, line: 1 };
-      deps.changed();
-      wait(lineHold("", step.hold) * 1000 + PACE.afterStep, id, () => tick(id));
-      return;
-    }
-    const text = step.say[cur.line];
-    const hold = lineHold(text, step.hold);
-    const lastLine = cur.line === step.say.length - 1;
-    last = { ...cur };
-    deps.say(text, fmt(cur), hold);
-    cur = { step: cur.step, line: cur.line + 1 };
-    deps.changed();
-    const gap = lastLine ? PACE.afterStep : PACE.betweenLines;
-    wait(hold * 1000 + PACE.fade + gap, id, () => tick(id));
-  }
-
-  return {
-    info,
-    script: () => script,
-
-    // Replace the script, keeping the position (clamped) and the state.
-    load(next: Script) {
-      const playing = state === "playing";
-      cancel();
-      script = next;
-      if (cur.step > next.steps.length) cur = { step: next.steps.length, line: 0 };
-      normalize();
-      if (state === "empty") state = "ready";
-      if (state === "done" && cur.step < next.steps.length) state = "paused";
-      if (playing) {
-        entered = true; // screen is already on this step
-        tick(run);
-      }
-      deps.changed();
-    },
-
-    resume(): string | null {
-      if (!script) return "no_script";
-      if (state === "playing") return null;
-      if (state === "done") return "done";
-      cancel();
-      entered = false; // bring the screen back to the current step first
-      set("playing");
-      tick(run);
-      return null;
-    },
-
-    pause() {
-      if (state !== "playing") return;
-      cancel();
-      set("paused");
-    },
-
-    // Move to a step (and line) and show its screen. Does not play; if it was
-    // playing, it keeps playing from there.
-    async goto(pos: { step: number; line: number }): Promise<string | null> {
-      if (!script) return "no_script";
-      const step = script.steps[pos.step];
-      if (!step) return "no_such_step";
-      if (pos.line > 0 && pos.line >= step.say.length) return "no_such_line";
-      const playing = state === "playing";
-      cancel();
-      cur = { ...pos };
-      entered = false;
-      if (playing) {
-        tick(run);
-        return null;
-      }
-      if (state !== "ready") state = "paused";
-      if (step.go) await deps.go(step.go);
-      entered = true;
-      deps.changed();
-      return null;
-    },
-
-    // Presentation ended: stop where it is.
-    stop() {
-      if (state === "playing") {
-        cancel();
-        set("paused");
-      }
-    },
-  };
-}