feat: add clipboard keybinds to detail screens (#231)

## Summary
- Add `y` keybind to copy resource name on all detail screens (in
addition to existing `c` for Copy ID)
- Add `h` keybind to copy endpoint URL on MCP config detail screen
(shown in footer alongside Copy ID/Name)
- Enhanced clipboard feedback: shows "ID copied!", "Name copied!",
"Endpoint copied!" instead of generic message
- New `extraKeybinds`/`extraNavTips` props on `ResourceDetailPage` for
resource-specific shortcuts
- Covers all 14 detail screens via centralized change in
`ResourceDetailPage`
- TUI equivalent of clipboard buttons added in runloop-fe PR #1825

**Stacked on #230**

## Test plan
- [ ] TUI: Any detail screen → press `y` → verify "Name copied!"
feedback and correct clipboard content
- [ ] TUI: Any detail screen → press `c` → verify "ID copied!" feedback
(updated from generic "Copied to clipboard!")
- [ ] TUI: MCP config detail → press `h` → verify "Endpoint copied!"
feedback and endpoint URL in clipboard
- [ ] TUI: MCP config detail → verify `h` shortcut shown in footer
navigation tips
- [ ] TUI: Devbox detail → verify `n` still triggers "Create Snapshot"
(no conflict)
- [ ] TUI: Agent detail → verify `n` still triggers "Create Devbox with
Agent" (no conflict)
- [ ] Type check: `npx tsc --noEmit` passes cleanly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: jason-rl

src/commands/agent/list.tsx

@@ -31,6 +31,8 @@ import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
 import { useListSearch } from "../../hooks/useListSearch.js";
 import { useNavigation } from "../../store/navigationStore.js";
+import { openInBrowser } from "../../utils/browser.js";
+import { getAgentUrl } from "../../utils/url.js";
 
 interface ListOptions {
   full?: boolean;
@@ -532,6 +534,8 @@ export const ListAgentsUI = ({
       setSelectedOperation(0);
     } else if (input === "c" && activeTab === "private") {
       navigate("agent-create");
+    } else if (input === "o" && selectedAgentItem) {
+      openInBrowser(getAgentUrl(selectedAgentItem.id));
     } else if (input === "/") {
       search.enterSearchMode();
     } else if (key.escape) {
@@ -771,6 +775,7 @@ export const ListAgentsUI = ({
           { key: "Tab", label: "Switch tab" },
           { key: "Enter", label: "Details" },
           { key: "a", label: "Actions" },
+          { key: "o", label: "Browser" },
           { key: "c", label: "Create", condition: activeTab === "private" },
           { key: "/", label: "Search" },
           { key: "Esc", label: "Back" },

src/commands/axon/list.tsx

@@ -22,6 +22,8 @@ import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
 import { useListSearch } from "../../hooks/useListSearch.js";
 import { useNavigation } from "../../store/navigationStore.js";
+import { openInBrowser } from "../../utils/browser.js";
+import { getAxonUrl } from "../../utils/url.js";
 
 // ─── CLI ─────────────────────────────────────────────────────────────────────
 
@@ -284,6 +286,8 @@ export const ListAxonsUI = ({
     } else if (input === "a" && selectedAxonItem) {
       setShowPopup(true);
       setSelectedOperation(0);
+    } else if (input === "o" && selectedAxonItem) {
+      openInBrowser(getAxonUrl(selectedAxonItem.id));
     } else if (input === "/") {
       search.enterSearchMode();
     } else if (key.escape) {
@@ -430,6 +434,7 @@ export const ListAxonsUI = ({
           },
           { key: "Enter", label: "Details" },
           { key: "a", label: "Actions" },
+          { key: "o", label: "Browser" },
           { key: "/", label: "Search" },
           { key: "Esc", label: "Back" },
         ]}

src/components/ResourceDetailPage.tsx

@@ -152,6 +152,8 @@ export function ResourceDetailPage<T>({
   onBack,
   buildDetailLines,
   additionalContent,
+  extraKeybinds,
+  extraNavTips,
 }: ResourceDetailPageProps<T>) {
   const isMounted = React.useRef(true);
   const { navigate } = useNavigation();
@@ -167,9 +169,9 @@ export function ResourceDetailPage<T>({
   const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
 
   // Copy to clipboard with status feedback
-  const handleCopy = React.useCallback(async (text: string) => {
+  const handleCopy = React.useCallback(async (text: string, label?: string) => {
     const status = await copyToClipboard(text);
-    setCopyStatus(status);
+    setCopyStatus(label ? `${label} copied!` : status);
     setTimeout(() => setCopyStatus(null), 2000);
   }, []);
 
@@ -393,7 +395,8 @@ export function ResourceDetailPage<T>({
         bindings: {
           q: onBack,
           escape: onBack,
-          c: () => handleCopy(getId(resource)),
+          c: () => handleCopy(getId(resource), "ID"),
+          y: () => handleCopy(getDisplayName(resource), "Name"),
           ...(buildDetailLines
             ? {
                 i: () => {
@@ -411,6 +414,7 @@ export function ResourceDetailPage<T>({
           },
           enter: handleEnter,
           ...(getUrl ? { o: handleOpenInBrowser } : {}),
+          ...(extraKeybinds ? extraKeybinds({ copy: handleCopy }) : {}),
         },
         onUnmatched: (input) => {
           // Operation shortcuts work from anywhere (all ops, including those in "View rest")
@@ -452,6 +456,8 @@ export function ResourceDetailPage<T>({
       operationsStartIndex,
       onOperation,
       getId,
+      getDisplayName,
+      extraKeybinds,
     ],
   );
 
@@ -808,6 +814,8 @@ export function ResourceDetailPage<T>({
                 : "Execute",
           },
           { key: "c", label: "Copy ID" },
+          { key: "y", label: "Copy Name" },
+          ...(extraNavTips || []),
           { key: "i", label: "Full Details", condition: !!buildDetailLines },
           { key: "o", label: "Browser", condition: !!getUrl },
           { key: "q/Ctrl+C", label: "Back/Quit" },

src/components/resourceDetailTypes.ts

@@ -3,6 +3,7 @@
  */
 import React from "react";
 import type { ScreenName, RouteParams } from "../store/navigationStore.js";
+import type { NavigationTip } from "./NavigationTips.js";
 
 // ---------------------------------------------------------------------------
 // Detail field types
@@ -119,4 +120,10 @@ export interface ResourceDetailPageProps<T> {
   buildDetailLines?: (resource: T) => React.ReactElement[];
   /** Optional: Additional content to render after details section */
   additionalContent?: React.ReactNode;
+  /** Optional: Extra keybinds added to the main view. Receives a copy helper for clipboard feedback. */
+  extraKeybinds?: (helpers: {
+    copy: (text: string, label?: string) => void;
+  }) => Record<string, () => void>;
+  /** Optional: Extra navigation tips shown in the footer alongside the standard ones */
+  extraNavTips?: NavigationTip[];
 }

src/screens/AgentDetailScreen.tsx

@@ -22,6 +22,7 @@ import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Breadcrumb } from "../components/Breadcrumb.js";
 import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
 import { colors } from "../utils/theme.js";
+import { getAgentUrl } from "../utils/url.js";
 
 interface AgentDetailScreenProps {
   agentId?: string;
@@ -332,6 +333,7 @@ export function AgentDetailScreen({ agentId }: AgentDetailScreenProps) {
       resourceType="Agents"
       getDisplayName={(a) => a.name}
       getId={(a) => a.id}
+      getUrl={(a) => getAgentUrl(a.id)}
       getStatus={() => (agent.is_public ? "public" : "private")}
       detailSections={detailSections}
       operations={operations}

src/screens/AxonDetailScreen.tsx

@@ -16,6 +16,7 @@ import { SpinnerComponent } from "../components/Spinner.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Breadcrumb } from "../components/Breadcrumb.js";
 import { colors } from "../utils/theme.js";
+import { getAxonUrl } from "../utils/url.js";
 
 interface AxonDetailScreenProps {
   axonId?: string;
@@ -143,6 +144,7 @@ export function AxonDetailScreen({ axonId }: AxonDetailScreenProps) {
       resourceType="Axons"
       getDisplayName={(a) => a.name ?? a.id}
       getId={(a) => a.id}
+      getUrl={(a) => getAxonUrl(a.id)}
       getStatus={() => "active"}
       detailSections={detailSections}
       operations={[]}

src/screens/BenchmarkDetailScreen.tsx

@@ -18,6 +18,7 @@ import { SpinnerComponent } from "../components/Spinner.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Breadcrumb } from "../components/Breadcrumb.js";
 import { colors } from "../utils/theme.js";
+import { getBenchmarkUrl } from "../utils/url.js";
 
 interface BenchmarkDetailScreenProps {
   benchmarkId?: string;
@@ -275,6 +276,7 @@ export function BenchmarkDetailScreen({
       resourceType="Benchmark Definitions"
       getDisplayName={(b) => b.name || b.id}
       getId={(b) => b.id}
+      getUrl={(b) => getBenchmarkUrl(b.id, !!b.is_public)}
       getStatus={(b) => (b as any).status}
       detailSections={detailSections}
       operations={operations}

src/screens/BenchmarkListScreen.tsx

@@ -29,6 +29,8 @@ import {
   listPublicBenchmarks,
 } from "../services/benchmarkService.js";
 import type { Benchmark } from "../store/benchmarkStore.js";
+import { openInBrowser } from "../utils/browser.js";
+import { getBenchmarkUrl } from "../utils/url.js";
 
 export function BenchmarkListScreen() {
   const { exit: inkExit } = useApp();
@@ -281,6 +283,8 @@ export function BenchmarkListScreen() {
     } else if (input === "a" && selectedBenchmark) {
       setShowPopup(true);
       setSelectedOperation(0);
+    } else if (input === "o" && selectedBenchmark) {
+      openInBrowser(getBenchmarkUrl(selectedBenchmark.id, showPublic));
     } else if (input === "s" && selectedBenchmark) {
       // Quick shortcut to create a job
       navigate("benchmark-job-create", {
@@ -463,6 +467,7 @@ export function BenchmarkListScreen() {
           { key: "Enter", label: "Details" },
           { key: "s", label: "Create Job" },
           { key: "a", label: "Actions" },
+          { key: "o", label: "Browser" },
           { key: "Tab", label: "Switch tab" },
           { key: "/", label: "Search" },
           { key: "Esc", label: "Back" },

src/screens/BenchmarkRunDetailScreen.tsx

@@ -32,6 +32,7 @@ import {
   createComponentColumn,
 } from "../components/Table.js";
 import { colors } from "../utils/theme.js";
+import { getBenchmarkRunUrl } from "../utils/url.js";
 
 interface BenchmarkRunDetailScreenProps {
   benchmarkRunId?: string;
@@ -621,6 +622,7 @@ export function BenchmarkRunDetailScreen({
       resourceType="Benchmark Runs"
       getDisplayName={(r) => r.name || r.id}
       getId={(r) => r.id}
+      getUrl={(r) => getBenchmarkRunUrl(r.id, r.benchmark_id)}
       getStatus={(r) => r.state}
       detailSections={detailSections}
       operations={operations}

src/screens/BenchmarkRunListScreen.tsx

@@ -26,6 +26,8 @@ import { useCursorPagination } from "../hooks/useCursorPagination.js";
 import { useListSearch } from "../hooks/useListSearch.js";
 import { listBenchmarkRuns } from "../services/benchmarkService.js";
 import type { BenchmarkRun } from "../store/benchmarkStore.js";
+import { openInBrowser } from "../utils/browser.js";
+import { getBenchmarkRunUrl } from "../utils/url.js";
 
 export function BenchmarkRunListScreen() {
   const { exit: inkExit } = useApp();
@@ -272,6 +274,10 @@ export function BenchmarkRunListScreen() {
     } else if (input === "a" && selectedRun) {
       setShowPopup(true);
       setSelectedOperation(0);
+    } else if (input === "o" && selectedRun) {
+      openInBrowser(
+        getBenchmarkRunUrl(selectedRun.id, selectedRun.benchmark_id),
+      );
     } else if (input === "j") {
       // Quick shortcut to create a new job
       navigate("benchmark-job-create");
@@ -433,6 +439,7 @@ export function BenchmarkRunListScreen() {
           { key: "Enter", label: "Details" },
           { key: "j", label: "New Job" },
           { key: "a", label: "Actions" },
+          { key: "o", label: "Browser" },
           { key: "/", label: "Search" },
           { key: "Esc", label: "Back" },
         ]}