@dsdenes/devboard 0.1.560 → 0.1.562

package/client/lib/components/IssuesAgentFocus.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { connection } from "../connection.svelte";
+  import { relativeTime } from "../discover-format";
+  import { issues } from "../issues.svelte";
+  import type { WorkspaceTab } from "../layout.svelte";
+  import { statusTone } from "../status-tone";
+  import Button from "./ui/button.svelte";
+  import IssuesAgentLog from "./IssuesAgentLog.svelte";
+  import IssuesQuestion from "./IssuesQuestion.svelte";
+
+  interface Props {
+    tab: WorkspaceTab;
+    close: () => void;
+    openRuns: () => void;
+  }
+
+  let { tab, close, openRuns }: Props = $props();
+
+  const runId = $derived(tab.resourceId);
+  const agent = $derived(issues.agentFor(runId));
+  const detail = $derived(issues.run?.runId === runId ? issues.run : null);
+  const lines = $derived(agent !== null ? issues.activityFor(runId) : (detail?.activityLines ?? []));
+  const status = $derived(agent !== null ? "running" : (detail?.status ?? "unknown"));
+  const unavailable = $derived(agent === null && detail === null && issues.runError !== null);
+  const startedAt = $derived(agent?.startedAt ?? detail?.startedAt ?? null);
+
+  let now = $state(Date.now());
+  const startedLabel = $derived(startedAt === null ? "" : relativeTime(startedAt, now));
+
+  onMount(() => {
+    const timer = setInterval(() => (now = Date.now()), 30_000);
+    return () => clearInterval(timer);
+  });
+
+  // A finished run's final status and activity come from run history. A reload
+  // restores this tab before the socket opens and before the replay names the
+  // live agents, so the request waits for both: a send rejected while closed,
+  // or one made before the replay, would strand or stale the run detail.
+  $effect(() => {
+    if (agent !== null || !connection.open || !issues.ready) return;
+    issues.loadRun(runId);
+  });
+</script>
+
+<section class="issues-agent-focus" data-testid="issues-agent-focus" data-run={runId}>
+  <header class="issues-overview__header">
+    <div>
+      <p class="muted">Issues · agent</p>
+      <h1 class="issues-overview__title">{tab.title}</h1>
+      <p class="issues-overview__repo mono">{issues.repoLabel}</p>
+    </div>
+    <span class="badge" data-tone={statusTone(status)} data-testid="issues-agent-focus-status">
+      {status}
+    </span>
+    <Button
+      variant="outline"
+      data-testid="issues-agent-focus-close"
+      data-command="tab.close"
+      onclick={close}
+    >
+      Close
+    </Button>
+  </header>
+
+  {#if unavailable}
+    <div class="panel" data-testid="issues-agent-focus-unavailable">
+      <div class="panel__body stack-sm">
+        <p class="muted">This run is no longer available in run history.</p>
+        <Button variant="outline" data-command="open.issues.runs" onclick={openRuns}>
+          Open Runs
+        </Button>
+      </div>
+    </div>
+  {:else if agent === null && detail === null}
+    <div class="panel">
+      <div class="panel__body">
+        <p class="muted">Loading the run from history…</p>
+      </div>
+    </div>
+  {:else}
+    <div class="panel issues-activity-panel">
+      <div class="panel__header">
+        <h2 class="panel__title">Output</h2>
+        <span class="issues-run-identity" data-testid="issues-agent-focus-run">
+          <span class="issues-run-identity__label">Run</span>
+          <code
+            class="code-chip issues-run-identity__id"
+            title={`Run identifier: ${runId}`}
+            data-testid="issues-agent-focus-run-id"
+          >
+            {runId}
+          </code>
+          {#if startedAt !== null}
+            <span
+              class="issues-run-identity__started"
+              title={`Started ${startedAt}`}
+              data-testid="issues-agent-focus-run-started"
+            >
+              Started {startedLabel}
+            </span>
+          {/if}
+        </span>
+      </div>
+      <div class="panel__body stack-sm">
+        <IssuesAgentLog lines={lines} testid="issues-agent-focus-activity" {runId} />
+        {#if agent?.question}
+          <IssuesQuestion
+            runId={runId}
+            question={agent.question}
+            testid="issues-agent-focus-question"
+          />
+        {/if}
+      </div>
+    </div>
+  {/if}
+</section>

package/client/lib/components/IssuesAgentLog.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface Props {
+    lines: string[];
+    testid: string;
+    runId?: string;
+  }
+
+  let { lines, testid, runId }: Props = $props();
+
+  let element = $state<HTMLPreElement | null>(null);
+  let follow = $state(true);
+
+  // Tracked so the log follows its newest line unless the operator scrolled up.
+  $effect(() => {
+    void lines.length;
+    void lines[lines.length - 1];
+    if (!follow || element === null) return;
+    element.scrollTop = element.scrollHeight;
+  });
+
+  $effect(() => {
+    const current = element;
+    if (current === null) return;
+    const observer = new ResizeObserver(() => {
+      if (!follow) return;
+      current.scrollTop = current.scrollHeight;
+    });
+    observer.observe(current);
+    return () => observer.disconnect();
+  });
+
+  function trackFollow(event: Event & { currentTarget: HTMLPreElement }): void {
+    const current = event.currentTarget;
+    follow = current.scrollHeight - current.scrollTop - current.clientHeight <= 8;
+  }
+
+  // A shell command row is the only structure an agent stream guarantees.
+  function lineKind(line: string): "blank" | "command" | "text" {
+    if (line.trim().length === 0) return "blank";
+    return /^\$\s/.test(line) ? "command" : "text";
+  }
+</script>
+
+<pre
+  class="issues-activity mono"
+  data-testid={testid}
+  data-run={runId}
+  bind:this={element}
+  onscroll={trackFollow}
+>{#if lines.length === 0}<span class="issues-activity__empty">No activity yet.</span>{:else}{#each lines as line, index}{@const kind = lineKind(line)}<span class="issues-activity__line" data-kind={kind}>{#if kind === "command"}<span class="issues-activity__prompt">$</span>{line.slice(1)}{:else}{line}{/if}</span>{index === lines.length - 1 ? "" : "\n"}{/each}{/if}</pre>

package/client/lib/components/IssuesQuestion.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { issues } from "../issues.svelte";
+  import type { RunQuestion } from "../types";
+  import Button from "./ui/button.svelte";
+  import Input from "./ui/input.svelte";
+
+  interface Props {
+    question: RunQuestion;
+    testid: string;
+    /** The agent run answering through the shared store; omitted by the draft surface. */
+    runId?: string;
+    /** Submits the answer; defaults to the agent-run store call for `runId`. */
+    onanswer?: (value: string) => void;
+    choiceTestid?: string;
+    inputTestid?: string;
+    submitTestid?: string;
+    command?: string;
+  }
+
+  let {
+    question,
+    testid,
+    runId,
+    onanswer,
+    choiceTestid = "issues-agent-choice",
+    inputTestid = "issues-agent-answer-input",
+    submitTestid = "issues-agent-answer-submit",
+    command = "issues.answer",
+  }: Props = $props();
+
+  let answer = $state("");
+
+  function submit(value: string): void {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) return;
+    if (onanswer !== undefined) onanswer(trimmed);
+    else if (runId !== undefined) issues.submitAgentAnswer(runId, question.id, trimmed);
+    answer = "";
+  }
+</script>
+
+<div class="issues-question" data-testid={testid} data-run={runId}>
+  <p>{question.message}</p>
+  {#if question.options.length > 0}
+    <div class="choice-list">
+      {#each question.options as option (option.label)}
+        <button
+          type="button"
+          class="choice"
+          data-testid={choiceTestid}
+          data-run={runId}
+          data-command={command}
+          onclick={() => submit(option.label)}
+        >
+          <span class="choice__label">
+            {option.label}
+            {#if option.recommended}
+              <span class="choice__recommended">Recommended</span>
+            {/if}
+          </span>
+          {#if option.description}
+            <span class="choice__description">{option.description}</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+  <form
+    class="issues-answer"
+    onsubmit={(event) => {
+      event.preventDefault();
+      submit(answer);
+    }}
+  >
+    <Input
+      type="text"
+      value={answer}
+      oninput={(event) => (answer = event.currentTarget.value)}
+      placeholder="Your answer"
+      aria-label="Your answer"
+      data-testid={inputTestid}
+      data-run={runId}
+    />
+    <Button
+      variant="default"
+      type="submit"
+      data-command={command}
+      data-testid={submitTestid}
+      data-run={runId}
+      disabled={answer.trim().length === 0}
+    >
+      Answer
+    </Button>
+  </form>
+</div>