Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2fe1dcd46f | |||
| 7fae2f48c0 |
@@ -1,12 +1,15 @@
|
|||||||
/**
|
/**
|
||||||
* @file One lane's card: progress bar, branch/CI/PR facts, the "needs you"
|
* @file One lane's card: branch/CI/PR facts, the "needs you"
|
||||||
* banner sourced from Claude Code's Notification hook, and (for managed
|
* banner sourced from Claude Code's Notification hook, and (for managed
|
||||||
* lanes only) a ⋯ menu holding the rare `reset worktree` action behind
|
* lanes only) a ⋯ menu holding the rare `reset worktree` action behind
|
||||||
* DestructiveLaneModal. A dead lane (its driving session went silent while
|
* DestructiveLaneModal. A dead lane (its driving session went silent while
|
||||||
* it should have been working) is called out loudly — that is the failure
|
* it should have been working) is called out loudly — that is the failure
|
||||||
* this view exists to catch. Stage, kind, and the "auto: <stage>" chip are
|
* this view exists to catch. Stage, kind, and the "auto: <stage>" chip are
|
||||||
* NOT repeated here — this card only ever renders inside the Workspace
|
* NOT repeated here — this card only ever renders inside the Workspace
|
||||||
* lane-detail section, whose header above it already shows them. The repo
|
* lane-detail section, whose header above it already shows them. Neither is
|
||||||
|
* progress: the pipeline map directly below this card draws the same number
|
||||||
|
* as named, coloured nodes, so a bar and a percent beside it were a worse
|
||||||
|
* second telling of it. The repo
|
||||||
* card also carries the lane's AI Router picker — the Add-lane modal is the
|
* card also carries the lane's AI Router picker — the Add-lane modal is the
|
||||||
* only other place one is chosen, and a lane outlives its creation. The repo
|
* only other place one is chosen, and a lane outlives its creation. The repo
|
||||||
* tooling dropdown (`LaneToolsMenu`, exported from this file) and the
|
* tooling dropdown (`LaneToolsMenu`, exported from this file) and the
|
||||||
@@ -427,23 +430,6 @@ export default function LaneCard({
|
|||||||
data-testid={`lane-card-${lane.id}`}
|
data-testid={`lane-card-${lane.id}`}
|
||||||
className="flex flex-col rounded-lg border border-border bg-surface-4 p-2.5 transition-colors hover:border-border-light"
|
className="flex flex-col rounded-lg border border-border bg-surface-4 p-2.5 transition-colors hover:border-border-light"
|
||||||
>
|
>
|
||||||
{/* Progress line: how far through the pipeline. The stage's own name
|
|
||||||
and how long it's been running are already in the Workspace
|
|
||||||
header above; not repeated here. Omitted at 0% — an empty bar
|
|
||||||
is not information, just a blank row above a dead/idle lane. */}
|
|
||||||
{lane.progress > 0 && (
|
|
||||||
<div className="mb-1.5 flex items-center gap-2 text-xs">
|
|
||||||
<div className="h-1 flex-1 overflow-hidden rounded-full bg-surface-2">
|
|
||||||
<div
|
|
||||||
data-testid="lane-progress-fill"
|
|
||||||
className="h-full rounded-full bg-blue-600 transition-[width]"
|
|
||||||
style={{ width: `${lane.progress}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="tabular-nums text-fg-secondary">{lane.progress}%</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(lane.ci_status || lane.tool === "codex") && (
|
{(lane.ci_status || lane.tool === "codex") && (
|
||||||
<div className="mb-2 flex flex-wrap items-center gap-1.5 text-[11px]">
|
<div className="mb-2 flex flex-wrap items-center gap-1.5 text-[11px]">
|
||||||
{lane.ci_status && (
|
{lane.ci_status && (
|
||||||
|
|||||||
@@ -155,14 +155,12 @@ describe("LaneCard rebuilt layout", () => {
|
|||||||
expect(screen.getByTestId("lane-card-7")).toBeInTheDocument();
|
expect(screen.getByTestId("lane-card-7")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows the progress percentage", () => {
|
// The pipeline map below this card draws the same progress as named nodes,
|
||||||
|
// so the card no longer repeats it as a bar and a percent.
|
||||||
|
it("leaves progress to the pipeline map rather than drawing its own bar", () => {
|
||||||
render(<LaneCard lane={full()} onAction={vi.fn()} />);
|
render(<LaneCard lane={full()} onAction={vi.fn()} />);
|
||||||
expect(screen.getByText("48%")).toBeInTheDocument();
|
expect(screen.queryByTestId("lane-progress-fill")).toBeNull();
|
||||||
});
|
expect(screen.queryByText("48%")).toBeNull();
|
||||||
|
|
||||||
it("gives the progress bar a width matching the lane's progress", () => {
|
|
||||||
render(<LaneCard lane={full()} onAction={vi.fn()} />);
|
|
||||||
expect(screen.getByTestId("lane-progress-fill").getAttribute("style")).toContain("48%");
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("surfaces a needs-you message", () => {
|
it("surfaces a needs-you message", () => {
|
||||||
|
|||||||
@@ -426,13 +426,17 @@ export function LaneConsolePane({
|
|||||||
</select>
|
</select>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<header className="flex items-start gap-3">
|
{/* Title, live badge and blurb on ONE line: the blurb is a standing
|
||||||
<div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0">
|
description of the panel, not a message, so it does not earn the
|
||||||
<Play className="w-4.5 h-4.5 text-accent" />
|
second row it used to wrap onto. It drops out entirely below `sm`,
|
||||||
|
where the width would wrap it again. */}
|
||||||
|
<header className="flex items-center gap-2.5">
|
||||||
|
<div className="w-7 h-7 rounded-lg bg-accent/15 flex items-center justify-center flex-shrink-0">
|
||||||
|
<Play className="w-3.5 h-3.5 text-accent" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex shrink-0 items-center gap-2">
|
||||||
<h1 className="text-lg font-semibold text-fg-primary">
|
<h1 className="text-base font-semibold text-fg-primary">
|
||||||
{t("title", { tool: toolLabel })}
|
{t("title", { tool: toolLabel })}
|
||||||
</h1>
|
</h1>
|
||||||
{wsConnected ? (
|
{wsConnected ? (
|
||||||
@@ -447,7 +451,9 @@ export function LaneConsolePane({
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-fg-muted max-w-3xl">{t("subtitle", { tool: toolLabel })}</p>
|
<p className="hidden min-w-0 truncate text-[11px] text-fg-muted sm:block">
|
||||||
|
{t("subtitle", { tool: toolLabel })}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<ActiveRunsSwitcher
|
<ActiveRunsSwitcher
|
||||||
activeRuns={activeRuns}
|
activeRuns={activeRuns}
|
||||||
|
|||||||
@@ -147,75 +147,13 @@ export function RunSetup(props: RunSetupProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-border bg-surface-1">
|
<div className="rounded-xl border border-border bg-surface-1">
|
||||||
{/* Fresh vs resume source picker */}
|
{/* Run settings and the fresh-vs-resume source picker share one row:
|
||||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border px-3 py-2 text-[11.5px]">
|
settings left, source right. They used to be two rows with a divider
|
||||||
<div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
|
between them, which spent a band of height on four labelled selects
|
||||||
<Seg
|
that are each one line tall. The resume picker below is the only part
|
||||||
active={!resumePicked}
|
that still gets a row of its own, and only while resume is chosen. */}
|
||||||
label={t("resume.freshOption")}
|
<div className="flex flex-wrap items-end gap-3 border-b border-border px-4 py-3">
|
||||||
title={t("resume.freshHint")}
|
<div className="grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
onClick={() => {
|
|
||||||
setResumePicked(false);
|
|
||||||
props.onResumeSessionChange(null);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Seg
|
|
||||||
active={resumePicked}
|
|
||||||
label={t("resume.resumeOption")}
|
|
||||||
title={t("resume.resumeHint")}
|
|
||||||
onClick={() => setResumePicked(true)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{resumePicked && (
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
{props.tool === "claude" ? (
|
|
||||||
<SessionPicker
|
|
||||||
selected={props.resumeSession}
|
|
||||||
onSelect={(s) => {
|
|
||||||
props.onResumeSessionChange(s);
|
|
||||||
// Pass the picked session explicitly: the parent's state
|
|
||||||
// update has not landed yet on this tick, so reading
|
|
||||||
// props.resumeSession here would resume nothing.
|
|
||||||
if (s && !props.busy) handleStart(props, s);
|
|
||||||
}}
|
|
||||||
// Fall back to the typed cwd when no lane is selected — otherwise
|
|
||||||
// an unfiltered picker lists every session from every repo.
|
|
||||||
cwd={props.laneCwd || props.cwd.trim() || undefined}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => props.onResumeLast()}
|
|
||||||
disabled={props.busy}
|
|
||||||
className="px-3 py-1.5 text-[11px] rounded-md bg-surface-2 border border-border hover:border-accent/50 text-fg-primary hover:text-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{t("resume.lastOption")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Prompt */}
|
|
||||||
<div className="px-4 py-3 border-b border-border">
|
|
||||||
<label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
|
|
||||||
{t("fields.prompt")}
|
|
||||||
</label>
|
|
||||||
<PromptEditor
|
|
||||||
value={props.prompt}
|
|
||||||
onChange={props.onPromptChange}
|
|
||||||
onSubmit={() => handleStart(props)}
|
|
||||||
placeholder={t("fields.promptPlaceholderTerminal")}
|
|
||||||
rows={5}
|
|
||||||
slashCommands={props.slashCommands ?? []}
|
|
||||||
fileCwd={props.resumeSession?.cwd || props.cwd}
|
|
||||||
/>
|
|
||||||
<div className="mt-1 text-[10px] text-fg-muted">
|
|
||||||
{t("hint.shortcut")} · / for slash commands · @ for file references
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Advanced fields */}
|
|
||||||
<div className="grid grid-cols-1 gap-3 px-4 py-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
||||||
<Field label={t("fields.cwd")}>
|
<Field label={t("fields.cwd")}>
|
||||||
{isResume && props.resumeSession ? (
|
{isResume && props.resumeSession ? (
|
||||||
<div className="bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] font-mono text-fg-secondary flex items-center gap-2">
|
<div className="bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] font-mono text-fg-secondary flex items-center gap-2">
|
||||||
@@ -285,6 +223,73 @@ export function RunSetup(props: RunSetupProps) {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center rounded-md border border-border bg-surface-2 p-0.5 text-[11.5px]">
|
||||||
|
<Seg
|
||||||
|
active={!resumePicked}
|
||||||
|
label={t("resume.freshOption")}
|
||||||
|
title={t("resume.freshHint")}
|
||||||
|
onClick={() => {
|
||||||
|
setResumePicked(false);
|
||||||
|
props.onResumeSessionChange(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Seg
|
||||||
|
active={resumePicked}
|
||||||
|
label={t("resume.resumeOption")}
|
||||||
|
title={t("resume.resumeHint")}
|
||||||
|
onClick={() => setResumePicked(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{resumePicked && (
|
||||||
|
<div className="border-b border-border px-4 py-2 text-[11.5px]">
|
||||||
|
<div className="min-w-0">
|
||||||
|
{props.tool === "claude" ? (
|
||||||
|
<SessionPicker
|
||||||
|
selected={props.resumeSession}
|
||||||
|
onSelect={(s) => {
|
||||||
|
props.onResumeSessionChange(s);
|
||||||
|
// Pass the picked session explicitly: the parent's state
|
||||||
|
// update has not landed yet on this tick, so reading
|
||||||
|
// props.resumeSession here would resume nothing.
|
||||||
|
if (s && !props.busy) handleStart(props, s);
|
||||||
|
}}
|
||||||
|
// Fall back to the typed cwd when no lane is selected — otherwise
|
||||||
|
// an unfiltered picker lists every session from every repo.
|
||||||
|
cwd={props.laneCwd || props.cwd.trim() || undefined}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => props.onResumeLast()}
|
||||||
|
disabled={props.busy}
|
||||||
|
className="px-3 py-1.5 text-[11px] rounded-md bg-surface-2 border border-border hover:border-accent/50 text-fg-primary hover:text-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{t("resume.lastOption")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Prompt */}
|
||||||
|
<div className="px-4 py-3 border-b border-border">
|
||||||
|
<label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
|
||||||
|
{t("fields.prompt")}
|
||||||
|
</label>
|
||||||
|
<PromptEditor
|
||||||
|
value={props.prompt}
|
||||||
|
onChange={props.onPromptChange}
|
||||||
|
onSubmit={() => handleStart(props)}
|
||||||
|
placeholder={t("fields.promptPlaceholderTerminal")}
|
||||||
|
rows={5}
|
||||||
|
slashCommands={props.slashCommands ?? []}
|
||||||
|
fileCwd={props.resumeSession?.cwd || props.cwd}
|
||||||
|
/>
|
||||||
|
<div className="mt-1 text-[10px] text-fg-muted">
|
||||||
|
{t("hint.shortcut")} · / for slash commands · @ for file references
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{props.tool === "codex" && props.sandbox === "danger-full-access" && (
|
{props.tool === "codex" && props.sandbox === "danger-full-access" && (
|
||||||
<div className="mx-4 mb-3 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-[11px] text-status-danger flex items-start gap-2">
|
<div className="mx-4 mb-3 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-[11px] text-status-danger flex items-start gap-2">
|
||||||
|
|||||||
@@ -153,7 +153,7 @@
|
|||||||
"permissionMode": "Mode",
|
"permissionMode": "Mode",
|
||||||
"session": "Session"
|
"session": "Session"
|
||||||
},
|
},
|
||||||
"subtitle": "Spin up a {{tool}} session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.",
|
"subtitle": "Streamed output, multi-turn, same hooks and analytics as your terminal.",
|
||||||
"title": "Run {{tool}}",
|
"title": "Run {{tool}}",
|
||||||
"tokens": {
|
"tokens": {
|
||||||
"cacheRead": "Cache hit",
|
"cacheRead": "Cache hit",
|
||||||
|
|||||||
@@ -152,7 +152,7 @@
|
|||||||
"permissionMode": "Mode",
|
"permissionMode": "Mode",
|
||||||
"session": "Session"
|
"session": "Session"
|
||||||
},
|
},
|
||||||
"subtitle": "Khởi chạy một phiên {{tool}} ngay trong dashboard. Stream output trực tiếp, hội thoại đa lượt, và chia sẻ cùng pipeline hooks/analytics với phiên ở terminal.",
|
"subtitle": "Stream trực tiếp, hội thoại đa lượt, cùng hooks và analytics như ở terminal.",
|
||||||
"title": "Chạy {{tool}}",
|
"title": "Chạy {{tool}}",
|
||||||
"tokens": {
|
"tokens": {
|
||||||
"cacheRead": "Cache hit",
|
"cacheRead": "Cache hit",
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
|
|
||||||
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Plus } from "lucide-react";
|
import { Plus, Square, Columns2, Grid2x2 } from "lucide-react";
|
||||||
import { api } from "../lib/api";
|
import { api } from "../lib/api";
|
||||||
import type { CwdSuggestion, RunListResponse } from "../lib/api";
|
import type { CwdSuggestion, RunListResponse } from "../lib/api";
|
||||||
import type {
|
import type {
|
||||||
@@ -72,6 +72,14 @@ import type { SplitViewState, SplitLayout } from "../lib/splitViewStorage";
|
|||||||
|
|
||||||
// ── Page ──────────────────────────────────────────────────────────────
|
// ── Page ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** One pane, two side by side, four in a grid — the conventional icons for
|
||||||
|
* each, so the toggle reads at a glance without spending three words on it. */
|
||||||
|
const LAYOUT_CHOICES = [
|
||||||
|
{ n: 1 as const, Icon: Square },
|
||||||
|
{ n: 2 as const, Icon: Columns2 },
|
||||||
|
{ n: 4 as const, Icon: Grid2x2 },
|
||||||
|
];
|
||||||
|
|
||||||
function SplitLayoutToggle({
|
function SplitLayoutToggle({
|
||||||
splitView,
|
splitView,
|
||||||
setLayout,
|
setLayout,
|
||||||
@@ -83,21 +91,29 @@ function SplitLayoutToggle({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
{([1, 2, 4] as const).map((n) => (
|
{LAYOUT_CHOICES.map(({ n, Icon }) => {
|
||||||
|
// The count still reaches assistive tech and the tooltip — only the
|
||||||
|
// rendered word is gone, and the icon says the same thing in the
|
||||||
|
// shape every other app uses for it.
|
||||||
|
const label = tLanes("splitView.paneCount", { count: n });
|
||||||
|
return (
|
||||||
<button
|
<button
|
||||||
key={n}
|
key={n}
|
||||||
type="button"
|
type="button"
|
||||||
aria-pressed={splitView.layout === n}
|
aria-pressed={splitView.layout === n}
|
||||||
|
aria-label={label}
|
||||||
|
title={label}
|
||||||
onClick={() => setLayout(n)}
|
onClick={() => setLayout(n)}
|
||||||
className={`rounded border px-2 py-1 text-xs ${
|
className={`rounded border p-1.5 ${
|
||||||
splitView.layout === n
|
splitView.layout === n
|
||||||
? "border-accent bg-accent/15 text-accent"
|
? "border-accent bg-accent/15 text-accent"
|
||||||
: "border-border text-fg-secondary hover:border-border-light"
|
: "border-border text-fg-secondary hover:border-border-light"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{tLanes("splitView.paneCount", { count: n })}
|
<Icon className="h-3.5 w-3.5" />
|
||||||
</button>
|
</button>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5182,25 +5182,97 @@ exports[`screen snapshots > Run 1`] = `
|
|||||||
class="flex items-center gap-1.5"
|
class="flex items-center gap-1.5"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-label="1 pane"
|
||||||
aria-pressed="true"
|
aria-pressed="true"
|
||||||
class="rounded border px-2 py-1 text-xs border-accent bg-accent/15 text-accent"
|
class="rounded border p-1.5 border-accent bg-accent/15 text-accent"
|
||||||
|
title="1 pane"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
1 pane
|
<svg
|
||||||
|
class="lucide lucide-square h-3.5 w-3.5"
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
height="18"
|
||||||
|
rx="2"
|
||||||
|
width="18"
|
||||||
|
x="3"
|
||||||
|
y="3"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
aria-label="2 pane"
|
||||||
aria-pressed="false"
|
aria-pressed="false"
|
||||||
class="rounded border px-2 py-1 text-xs border-border text-fg-secondary hover:border-border-light"
|
class="rounded border p-1.5 border-border text-fg-secondary hover:border-border-light"
|
||||||
|
title="2 pane"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
2 pane
|
<svg
|
||||||
|
class="lucide lucide-columns2 h-3.5 w-3.5"
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
height="18"
|
||||||
|
rx="2"
|
||||||
|
width="18"
|
||||||
|
x="3"
|
||||||
|
y="3"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 3v18"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
aria-label="4 pane"
|
||||||
aria-pressed="false"
|
aria-pressed="false"
|
||||||
class="rounded border px-2 py-1 text-xs border-border text-fg-secondary hover:border-border-light"
|
class="rounded border p-1.5 border-border text-fg-secondary hover:border-border-light"
|
||||||
|
title="4 pane"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
4 pane
|
<svg
|
||||||
|
class="lucide lucide-grid2x2 h-3.5 w-3.5"
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 3v18"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M3 12h18"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
height="18"
|
||||||
|
rx="2"
|
||||||
|
width="18"
|
||||||
|
x="3"
|
||||||
|
y="3"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@@ -5208,13 +5280,13 @@ exports[`screen snapshots > Run 1`] = `
|
|||||||
data-testid="console-body"
|
data-testid="console-body"
|
||||||
>
|
>
|
||||||
<header
|
<header
|
||||||
class="flex items-start gap-3"
|
class="flex items-center gap-2.5"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0"
|
class="w-7 h-7 rounded-lg bg-accent/15 flex items-center justify-center flex-shrink-0"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="lucide lucide-play w-4.5 h-4.5 text-accent"
|
class="lucide lucide-play w-3.5 h-3.5 text-accent"
|
||||||
fill="none"
|
fill="none"
|
||||||
height="24"
|
height="24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@@ -5231,13 +5303,13 @@ exports[`screen snapshots > Run 1`] = `
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="min-w-0 flex-1"
|
class="flex min-w-0 flex-1 items-center gap-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center gap-2"
|
class="flex shrink-0 items-center gap-2"
|
||||||
>
|
>
|
||||||
<h1
|
<h1
|
||||||
class="text-lg font-semibold text-fg-primary"
|
class="text-base font-semibold text-fg-primary"
|
||||||
>
|
>
|
||||||
Run Claude
|
Run Claude
|
||||||
</h1>
|
</h1>
|
||||||
@@ -5251,9 +5323,9 @@ exports[`screen snapshots > Run 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
class="text-xs text-fg-muted max-w-3xl"
|
class="hidden min-w-0 truncate text-[11px] text-fg-muted sm:block"
|
||||||
>
|
>
|
||||||
Spin up a Claude session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.
|
Streamed output, multi-turn, same hooks and analytics as your terminal.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@@ -5298,51 +5370,10 @@ exports[`screen snapshots > Run 1`] = `
|
|||||||
class="rounded-xl border border-border bg-surface-1"
|
class="rounded-xl border border-border bg-surface-1"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border px-3 py-2 text-[11.5px]"
|
class="flex flex-wrap items-end gap-3 border-b border-border px-4 py-3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center rounded-md border border-border bg-surface-2 p-0.5"
|
class="grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4"
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-pressed="true"
|
|
||||||
class="rounded px-2 py-0.5 font-medium transition-colors bg-accent/20 text-accent"
|
|
||||||
title="Start a fresh Claude Code session."
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
New session
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-pressed="false"
|
|
||||||
class="rounded px-2 py-0.5 font-medium transition-colors text-fg-secondary hover:text-fg-primary"
|
|
||||||
title="Pick a session from your history and continue the conversation. Cwd is locked to the original."
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Resume existing session
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="px-4 py-3 border-b border-border"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1.5"
|
|
||||||
>
|
|
||||||
Prompt
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
class="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
|
|
||||||
placeholder="Ask Claude anything…"
|
|
||||||
rows="5"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="mt-1 text-[10px] text-fg-muted"
|
|
||||||
>
|
|
||||||
Cmd+Enter / Ctrl+Enter to send
|
|
||||||
· / for slash commands · @ for file references
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="grid grid-cols-1 gap-3 px-4 py-3 sm:grid-cols-2 lg:grid-cols-4"
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<label
|
<label
|
||||||
@@ -5503,6 +5534,47 @@ exports[`screen snapshots > Run 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex shrink-0 items-center rounded-md border border-border bg-surface-2 p-0.5 text-[11.5px]"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-pressed="true"
|
||||||
|
class="rounded px-2 py-0.5 font-medium transition-colors bg-accent/20 text-accent"
|
||||||
|
title="Start a fresh Claude Code session."
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
New session
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-pressed="false"
|
||||||
|
class="rounded px-2 py-0.5 font-medium transition-colors text-fg-secondary hover:text-fg-primary"
|
||||||
|
title="Pick a session from your history and continue the conversation. Cwd is locked to the original."
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Resume existing session
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-3 border-b border-border"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1.5"
|
||||||
|
>
|
||||||
|
Prompt
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
class="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
|
||||||
|
placeholder="Ask Claude anything…"
|
||||||
|
rows="5"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="mt-1 text-[10px] text-fg-muted"
|
||||||
|
>
|
||||||
|
Cmd+Enter / Ctrl+Enter to send
|
||||||
|
· / for slash commands · @ for file references
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="border-t border-border px-4 py-3 flex items-center justify-between gap-3 flex-wrap"
|
class="border-t border-border px-4 py-3 flex items-center justify-between gap-3 flex-wrap"
|
||||||
>
|
>
|
||||||
@@ -9537,7 +9609,7 @@ exports[`screen snapshots > Settings 1`] = `
|
|||||||
<p
|
<p
|
||||||
class="text-[10px] text-status-warning/90 mt-1"
|
class="text-[10px] text-status-warning/90 mt-1"
|
||||||
>
|
>
|
||||||
UI build v1.6.5 (rebuild client to match)
|
UI build v1.6.6 (rebuild client to match)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
+3
-3
@@ -373,8 +373,8 @@ The dashboard web UI merges lanes and runs into a single **Workspace** page acce
|
|||||||
- **Header** — the page title and four counters (`lanes`, `running`, `needs you`, `dead`), plus Add lane. The `needs you` and `dead` counters appear only when they are non-zero, so a quiet header means nothing is waiting on a human.
|
- **Header** — the page title and four counters (`lanes`, `running`, `needs you`, `dead`), plus Add lane. The `needs you` and `dead` counters appear only when they are non-zero, so a quiet header means nothing is waiting on a human.
|
||||||
- **Detail panel** — the selected lane's declared stage, its inferred stage when detection leads, a full-width pipeline map, and a legend naming all five node states plus the dashed-amber inferred treatment.
|
- **Detail panel** — the selected lane's declared stage, its inferred stage when detection leads, a full-width pipeline map, and a legend naming all five node states plus the dashed-amber inferred treatment.
|
||||||
- **Terminal** — a real interactive terminal (xterm.js) displaying the tmux session's PTY output, with full support for interactive commands, editors, and pagers. A live run keeps its rendered history and scroll position when scrolling.
|
- **Terminal** — a real interactive terminal (xterm.js) displaying the tmux session's PTY output, with full support for interactive commands, editors, and pagers. A live run keeps its rendered history and scroll position when scrolling.
|
||||||
- **Split view** — a layout toggle (1 / 2 / 4 panes) renders that many independent terminal panes side by side (`grid-cols-2` for 2, a 2×2 grid for 4). Layout 1 is bound to the lane strip's selection, same as always; layouts 2 and 4 give each pane its own lane picker, independent of the strip. The chosen layout and each pane's lane persist to `localStorage` (`agenthub.workspace.splitView`) across reloads.
|
- **Split view** — a layout toggle (one pane / two side by side / a 2×2 grid, drawn as icons rather than the words, with the count kept as each button's `aria-label` and tooltip) renders that many independent terminal panes side by side (`grid-cols-2` for 2, a 2×2 grid for 4). Layout 1 is bound to the lane strip's selection, same as always; layouts 2 and 4 give each pane its own lane picker, independent of the strip. The chosen layout and each pane's lane persist to `localStorage` (`agenthub.workspace.splitView`) across reloads.
|
||||||
- **Lane grid** — one card per lane, 1 column, 2 at `md`, 3 at `xl`. Each card carries the lane id, liveness dot and status, title, declared stage with a progress bar and time-on-stage, the `auto:` chip when detection leads, the kind and CI tags, the working-copy facts from `GET /api/lanes/:id/git`, the needs-you banner, and the action row.
|
- **Lane grid** — one card per lane, 1 column, 2 at `md`, 3 at `xl`. Each card carries the lane id, liveness dot and status, title, declared stage and time-on-stage, the `auto:` chip when detection leads, the kind and CI tags, the working-copy facts from `GET /api/lanes/:id/git`, the needs-you banner, and the action row.
|
||||||
|
|
||||||
Run history is per lane, queryable via `GET /api/run/history?laneId=<n>`.
|
Run history is per lane, queryable via `GET /api/run/history?laneId=<n>`.
|
||||||
|
|
||||||
@@ -617,7 +617,7 @@ agenthub stage implement --evidence "Schema created, migrations run"
|
|||||||
This command:
|
This command:
|
||||||
- **Declares the stage** the work is now at
|
- **Declares the stage** the work is now at
|
||||||
- **Records evidence** (optional, but highly encouraged) — a short text description of what was completed
|
- **Records evidence** (optional, but highly encouraged) — a short text description of what was completed
|
||||||
- **Moves the progress bar** forward in the pipeline
|
- **Advances the pipeline map** to that node
|
||||||
- **Broadcasts to the UI** so connected dashboards see the update in real-time
|
- **Broadcasts to the UI** so connected dashboards see the update in real-time
|
||||||
|
|
||||||
### Full command signature
|
### Full command signature
|
||||||
|
|||||||
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
openapi: 3.0.3
|
openapi: 3.0.3
|
||||||
info:
|
info:
|
||||||
title: Agent Dashboard for Claude Code API
|
title: Agent Dashboard for Claude Code API
|
||||||
version: 1.6.5
|
version: 1.6.6
|
||||||
description: HTTP API for real-time Claude Code session monitoring, agent lifecycle tracking, analytics, pricing, hooks ingestion, and workflow intelligence.
|
description: HTTP API for real-time Claude Code session monitoring, agent lifecycle tracking, analytics, pricing, hooks ingestion, and workflow intelligence.
|
||||||
contact:
|
contact:
|
||||||
name: Nguyễn Ngọc Trí Vĩ
|
name: Nguyễn Ngọc Trí Vĩ
|
||||||
|
|||||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "agenthub",
|
"name": "agenthub",
|
||||||
"version": "1.6.5",
|
"version": "1.6.6",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "agenthub",
|
"name": "agenthub",
|
||||||
"version": "1.6.5",
|
"version": "1.6.6",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "agenthub",
|
"name": "agenthub",
|
||||||
"version": "1.6.5",
|
"version": "1.6.6",
|
||||||
"bin": {
|
"bin": {
|
||||||
"agenthub": "bin/agenthub.js"
|
"agenthub": "bin/agenthub.js"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user