@dsdenes/devboard 0.1.560 → 0.1.563

package/client/lib/components/StatusBar.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import FolderGit2 from "lucide-svelte/icons/folder-git-2";
+  import RefreshCw from "lucide-svelte/icons/refresh-cw";
+  import { connection } from "../connection.svelte";
+  import { goal } from "../goal.svelte";
+  import { issues } from "../issues.svelte";
+  import { layout } from "../layout.svelte";
+  import { statusTone } from "../status-tone";
+  import IconButton from "./ui/icon-button.svelte";
+  import WatchdogIndicator from "./watchdog-indicator.svelte";
+
+  const connectionLabel = $derived(
+    connection.state === "open"
+      ? "Connected"
+      : connection.state === "connecting"
+        ? "Connecting"
+        : "Disconnected",
+  );
+
+  /**
+   * The status bar names the project, not its directory path: the sidebar owns
+   * the full path, and a home-relative path is unreadable at 11px in a 26px bar.
+   * The last segment is the worktree or repository name the operator recognizes;
+   * the whole path stays in the tooltip.
+   */
+  const projectName = $derived.by(() => {
+    const path = connection.projectPath.trim();
+    if (path.length === 0) return "No project";
+    const segments = path.split(/[\\/]+/).filter((segment) => segment.length > 0);
+    return segments[segments.length - 1] ?? path;
+  });
+
+  const issuesLabel = $derived.by(() => {
+    const pending = issues.pending;
+    if (issues.lifecycle === "running") return `issues working (${issues.agents.length})`;
+    if (issues.lifecycle === "pausing") return "issues pausing";
+    if (issues.lifecycle === "paused") return "issues paused";
+    if (issues.lifecycle === "failed") return "issues failed";
+    if (issues.enabled) return pending > 0 ? `issues idle (${pending})` : "issues idle";
+    return "issues stopped";
+  });
+
+  const issuesTitle = $derived.by(() => {
+    const repo = issues.repo ?? "this checkout";
+    const detail =
+      issues.lifecycle === "failed" && issues.snapshot?.lastError !== null
+        ? ` · ${issues.snapshot?.lastError}`
+        : issues.snapshot?.worker === null || issues.snapshot?.worker === undefined
+          ? ""
+          : ` · worker pid ${issues.snapshot.worker.pid}`;
+    return `Issues automation for ${repo} · ${issues.lifecycle} · ${issues.agents.length} running agent(s)${detail}`;
+  });
+
+  const versions = $derived(
+    `running ${connection.version?.running ?? "unknown"} · installed ${
+      connection.version?.installed ?? "unknown"
+    }`,
+  );
+</script>
+
+<footer class="status-bar" data-testid="status-bar">
+  <div class="status-group">
+    <span class="status-item" title={`WebSocket ${connection.state}`}>
+      <span class="status-dot" data-state={connection.state} aria-hidden="true"></span>
+      <span data-testid="status-connection">{connectionLabel}</span>
+    </span>
+    <span class="status-divider" aria-hidden="true"></span>
+    <span class="status-item status-project" title={connection.projectPath}>
+      <FolderGit2 size={12} aria-hidden="true" />
+      <span class="mono" data-testid="status-project">{projectName}</span>
+    </span>
+  </div>
+  <span class="status-bar__spacer" aria-hidden="true"></span>
+  <div class="status-group status-group--metrics">
+    <span class="status-item" title="Running and total agent lanes">
+      <span class="status-metric__label">lanes</span>
+      <span class="mono status-metric__value">{goal.runningLanes}/{goal.lanes.length}</span>
+    </span>
+    <button
+      type="button"
+      class="status-item status-item--button status-issues"
+      data-testid="issues-indicator"
+      data-command="view.mode.issues"
+      data-state={issues.lifecycle}
+      data-tone={statusTone(issues.lifecycle)}
+      title={issuesTitle}
+      aria-label={`${issuesLabel}. Open Issues mode.`}
+      onclick={() => layout.setMode("issues")}
+    >
+      <span class="status-issues__dot" aria-hidden="true"></span>
+      <span class="status-issues__label">{issuesLabel}</span>
+    </button>
+    <WatchdogIndicator />
+    <span class="status-item status-versions" title={versions}>
+      <span class="status-versions__entry">
+        <span class="status-metric__label">running</span>
+        <span class="mono">{connection.version?.running ?? "unknown"}</span>
+      </span>
+      <span class="status-versions__entry">
+        <span class="status-metric__label">installed</span>
+        <span class="mono">{connection.version?.installed ?? "unknown"}</span>
+      </span>
+    </span>
+    {#if connection.version?.stale === true}
+      <IconButton
+        label={`Restart devboard, running ${connection.version?.running ?? "unknown"}, installed ${
+          connection.version?.installed ?? "unknown"
+        }`}
+        command="app.reload"
+        data-testid="reload-devboard"
+        disabled={connection.restarting}
+        onclick={() => connection.requestRestart()}
+      >
+        <RefreshCw size={14} aria-hidden="true" />
+      </IconButton>
+    {/if}
+  </div>
+</footer>

package/client/lib/components/Terminal.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { Terminal } from "@xterm/xterm";
+  import { FitAddon } from "@xterm/addon-fit";
+  import "@xterm/xterm/css/xterm.css";
+  import { layout } from "../layout.svelte";
+
+  interface Props {
+    lines: string[];
+    "data-testid": string;
+    label: string;
+    class?: string;
+  }
+
+  let {
+    lines,
+    "data-testid": testid,
+    label,
+    class: className = "",
+  }: Props = $props();
+
+  let host: HTMLDivElement;
+  let term: Terminal | undefined;
+  let fit: FitAddon | undefined;
+  let rendered: string[] = [];
+  let stick = true;
+
+  const MONO_FONT =
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace';
+
+  function palette(): Record<string, string> {
+    const styles = getComputedStyle(document.documentElement);
+    const read = (name: string, fallback: string): string => {
+      const value = styles.getPropertyValue(name).trim();
+      return value.length > 0 ? value : fallback;
+    };
+    const light = document.documentElement.dataset.theme === "light";
+    return {
+      background: light ? "#ffffff" : "#0d1117",
+      foreground: light ? "#1f2328" : "#e6edf3",
+      cursor: light ? "#0969da" : "#58a6ff",
+      selectionBackground: light ? "#b6d7ff" : "#264f78",
+      black: light ? "#24292f" : "#484f58",
+      red: light ? "#cf222e" : "#ff7b72",
+      green: light ? "#116329" : "#3fb950",
+      yellow: light ? "#7d4e00" : "#d29922",
+      blue: light ? "#0550ae" : "#58a6ff",
+      magenta: light ? "#8250df" : "#bc8cff",
+      cyan: light ? "#1b7c83" : "#39c5cf",
+      white: light ? "#6e7781" : "#b1bac4",
+      brightBlack: light ? "#57606a" : "#6e7681",
+      brightRed: read("--error", light ? "#a40e26" : "#ff7b72"),
+      brightGreen: read("--success", light ? "#1a7f37" : "#3fb950"),
+      brightYellow: light ? "#9a6700" : "#e3b341",
+      brightBlue: read("--accent", light ? "#0969da" : "#58a6ff"),
+      brightMagenta: light ? "#6639ba" : "#d2a8ff",
+      brightCyan: light ? "#3192aa" : "#76e3ea",
+      brightWhite: light ? "#1f2328" : "#f0f6fc",
+    };
+  }
+
+  function write(line: string): void {
+    term?.write(`${line}\r\n`);
+  }
+
+  function render(next: string[]): void {
+    if (term === undefined) return;
+    const previous = rendered;
+    if (next.length === 0) {
+      if (previous.length > 0) term.clear();
+      rendered = [];
+      return;
+    }
+
+    let shared = 0;
+    while (shared < previous.length && shared < next.length && previous[shared] === next[shared]) {
+      shared += 1;
+    }
+
+    if (shared === previous.length && shared === next.length) return;
+
+    if (shared === next.length) {
+      term.reset();
+      next.forEach(write);
+    } else if (shared === previous.length) {
+      next.slice(shared).forEach(write);
+    } else if (shared === previous.length - 1) {
+      term.write("\x1b[1A\x1b[2K\r");
+      next.slice(shared).forEach(write);
+    } else {
+      term.reset();
+      next.forEach(write);
+    }
+
+    rendered = [...next];
+    if (stick) term.scrollToBottom();
+  }
+
+  onMount(() => {
+    term = new Terminal({
+      convertEol: true,
+      cursorBlink: false,
+      disableStdin: true,
+      fontSize: 12,
+      lineHeight: 1.25,
+      fontFamily: MONO_FONT,
+      scrollback: 5000,
+      screenReaderMode: true,
+      theme: palette(),
+    });
+    fit = new FitAddon();
+    term.loadAddon(fit);
+    term.open(host);
+    fit.fit();
+
+    term.onScroll(() => {
+      const buffer = term?.buffer.active;
+      if (buffer === undefined) return;
+      stick = buffer.viewportY >= buffer.baseY;
+    });
+
+    window.__devboardTerminals ??= new Map();
+    window.__devboardTerminals.set(testid, {
+      getBuffer: () => {
+        const active = term?.buffer.active;
+        if (active === undefined) return "";
+        const rows: string[] = [];
+        for (let index = 0; index < active.length; index += 1) {
+          rows.push(active.getLine(index)?.translateToString(true) ?? "");
+        }
+        return rows.join("\n").trimEnd();
+      },
+    });
+
+    const observer = new ResizeObserver(() => {
+      fit?.fit();
+    });
+    observer.observe(host);
+
+    const themeObserver = new MutationObserver(() => {
+      if (term !== undefined) term.options.theme = palette();
+    });
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    render(lines);
+
+    return () => {
+      observer.disconnect();
+      themeObserver.disconnect();
+      window.__devboardTerminals?.delete(testid);
+      term?.dispose();
+      term = undefined;
+    };
+  });
+
+  $effect(() => {
+    render(lines);
+  });
+
+  $effect(() => {
+    void layout.theme;
+    if (term !== undefined) term.options.theme = palette();
+  });
+</script>
+
+<div
+  class={`terminal-host ${className}`}
+  data-testid={testid}
+  data-terminal
+  role="log"
+  aria-label={label}
+  bind:this={host}
+></div>
+
+<style>
+  .terminal-host {
+    background: var(--terminal-background);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    height: 100%;
+    min-height: 120px;
+    overflow: hidden;
+    padding: 4px;
+    width: 100%;
+  }
+
+  .terminal-host :global(.xterm) {
+    height: 100%;
+  }
+</style>