Skip to content

Hop Agents roster peek to full agent page #399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheGreatAxios merged 1 commit into from
Aug 24, 2026
Merged

Hop Agents roster peek to full agent page #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions apps/web/src/pages/agents-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ import {
useListSelection,
} from "@corbits/react-ui";
import type { BadgeTone, SelectionCheckboxState } from "@corbits/react-ui";
import { Archive, Plus, Robot } from "@corbits/icons";
import { Archive, ArrowSquareOut, Plus, Robot } from "@corbits/icons";
import { detailPath } from "@corbits/command-palette";
import { useEffect, useMemo, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";

Expand Down Expand Up @@ -340,6 +341,17 @@ function AgentDetailPanel({
</dd>
</div>
</dl>
<Button asChild variant="outline" size="sm" className="w-full">
<Link
to={detailPath(AGENTS_PATH_PREFIX, {
slug: definition.name,
id: definition.id,
})}
>
<ArrowSquareOut aria-hidden="true" />
Open
</Link>
</Button>
</aside>
);
}
Expand All @@ -348,7 +360,8 @@ function AgentDetailPanel({
* The roster stage: a flat table of every definition this bench owns —
* name, status, model, and how often it has run in the last week — rows,
* never cards, per the owner's "rows over grids" rule for this slice.
* Selecting a row opens its detail alongside the table; "New agent" opens
* Selecting a row opens its detail alongside the table; the panel's Open
* control hops to `/agents/<slug>` for the full page. "New agent" opens
* `CreateAgentPanel`. Rows are also bulk-selectable (checkbox + shift/cmd
* range select, `useListSelection`) with a floating `BulkActionBar` for
* Archive — the only bulk action with a real backend primitive
Expand Down
23 changes: 23 additions & 0 deletions apps/web/test/agents-page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,29 @@ describe("AgentsPage", () => {
expect(markup).toContain(">Support<");
});

// CL-6875: the roster's quick-peek panel must hop to the agent's own page
// at `/agents/<slug>` — panels preview enough to decide whether to open
// the full page (DESIGN.md), never substitute for one.
test("selected definition's panel offers a hop to /agents/<slug>", () => {
const markup = renderToStaticMarkup(
<AgentsPage
tenantId="tnt_1"
definitions={[triage]}
workbenches={new Map()}
instances={[]}
now={NOW}
selectedId="wfd_1"
onSelect={noop}
createOpen={false}
onCreateOpenChange={noop}
onCreated={noop}
onArchiveSelected={noop}
/>,
);
expect(markup).toContain('href="/agents/triage-bot"');
expect(markup).toContain("Open");
});

test("offers New agent as the top-bar create action, per the top-nav page-action contract", () => {
const markup = renderToStaticMarkup(
<AgentsPage
Expand Down
Loading