feat(portal): Copy as CLI affordance (Portal → CLI parity)

apps/portal/src/components/CliCommand.stories.tsx

@@ -0,0 +1,144 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, screen, userEvent, waitFor } from "storybook/test";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CliCommand } from "./CliCommand";
+import {
+  buildRunGet,
+  buildRunList,
+  buildRunSubmit,
+  buildRunBulk,
+} from "@/lib/cli/buildCommand";
+
+const meta = {
+  component: CliCommand,
+  tags: ["ai-generated", "needs-work"],
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+} satisfies Meta<typeof CliCommand>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Simple single-command modal (e.g. a run detail page). */
+export const RunGet: Story = {
+  args: { command: buildRunGet("req_12345") },
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole("button", { name: /show cli equivalent/i });
+    await expect(trigger).toBeInTheDocument();
+    await userEvent.click(trigger);
+    await expect(screen.getByRole("button", { name: "Copy install command" })).toBeInTheDocument();
+    await expect(screen.getByRole("button", { name: "Copy environment variables" })).toBeInTheDocument();
+    await expect(screen.getByRole("button", { name: "Copy cli command" })).toBeInTheDocument();
+  },
+};
+
+/** List command reflecting the active filters and sort. */
+export const RunListFiltered: Story = {
+  args: {
+    command: buildRunList({
+      workers: ["coder-vscode-web"],
+      statuses: ["done"],
+      outcomes: ["failed"],
+      turns: "5",
+      turnsOp: "gte",
+      sortBy: "duration",
+      sortDir: "desc",
+    }),
+  },
+};
+
+/** Labeled trigger used in the Submit Run footer, with a parity note. */
+export const SubmitLabeled: Story = {
+  args: {
+    label: "CLI",
+    title: "Submit from the CLI",
+    command: buildRunSubmit({
+      task: "Create a Snake game using React",
+      criteria: ["has-tests"],
+      worker: "coder-acp-claude-code",
+      model: "claude-sonnet-4.5",
+      occurrences: 5,
+      priority: 3,
+    }),
+  },
+};
+
+/** Base profile + variations: the variations go through a JSON file. */
+export const SubmitProfileVariations: Story = {
+  args: {
+    label: "CLI",
+    title: "Submit from the CLI",
+    command: buildRunSubmit({
+      task: "Create a Snake game using React",
+      criteria: ["has-tests"],
+      baseProfileId: "prof_base@2",
+      profileVariations: ["prof_fast", "prof_thorough@4"],
+      occurrences: 3,
+    }),
+  },
+};
+
+/** Multiline instructions and parity notes must stay reachable in short viewports. */
+export const SubmitLongContent: Story = {
+  args: {
+    label: "CLI",
+    title: "Submit from the CLI",
+    command: buildRunSubmit({
+      task: "Create a Snake game using React",
+      criteria: ["has-tests", "keyboard-controls"],
+      worker: "coder-acp-copilot",
+      model: "gpt-5",
+      reasoningEffort: "high",
+      maxIterations: 20,
+      occurrences: 3,
+      skills: ["typescript", "accessibility"],
+      agentsMd: [
+        "# Project instructions",
+        ...Array.from({ length: 30 }, (_, i) => `- Requirement ${i + 1}: Keep keyboard controls accessible and tested.`),
+      ].join("\n"),
+      priority: 3,
+    }),
+  },
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: /show cli equivalent/i }));
+
+    const dialog = screen.getByRole("dialog");
+    const close = screen.getByRole("button", { name: "Close" });
+    const docs = screen.getByRole("link", { name: "Read the CLI documentation" });
+    const expectInViewport = (element: HTMLElement) => {
+      const bounds = element.getBoundingClientRect();
+      expect(bounds.top).toBeGreaterThanOrEqual(0);
+      expect(bounds.bottom).toBeLessThanOrEqual(window.innerHeight);
+    };
+
+    await waitFor(() => {
+      expectInViewport(dialog);
+      expectInViewport(close);
+    });
+    await expect(screen.getByText(/Requirement 30:/)).toBeInTheDocument();
+    await expect(screen.getByText(/Priority \(3\)/)).toBeInTheDocument();
+
+    docs.focus();
+    await waitFor(() => {
+      expectInViewport(docs);
+      expectInViewport(close);
+      expectInViewport(screen.getByRole("heading", { name: "Submit from the CLI" }));
+    });
+  },
+};
+
+/** Bulk delete over a multi-id selection (loop form). */
+export const BulkLoop: Story = {
+  args: {
+    title: "Bulk action from the CLI",
+    command: buildRunBulk("delete", ["req_a", "req_b", "req_c"]),
+  },
+};

apps/portal/src/components/CliCommand.test.tsx

@@ -0,0 +1,95 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// @vitest-environment happy-dom
+import { composeStories } from "@storybook/react-vite";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ProjectProvider } from "@/contexts/ProjectContext";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { PROJECT_STORAGE_KEY } from "@/lib/project-scope";
+import { CLI_INSTALL_COMMAND, buildEnvCommand, buildRunSubmit } from "@/lib/cli/buildCommand";
+import { CliCommand } from "./CliCommand";
+import * as stories from "./CliCommand.stories";
+
+const command = buildRunSubmit({ task: "t", worker: "coder-acp-copilot", priority: 2 });
+
+async function openModal(withProvider: boolean) {
+  const ui = (
+    <TooltipProvider>
+      <CliCommand command={command} />
+    </TooltipProvider>
+  );
+  render(withProvider ? <ProjectProvider>{ui}</ProjectProvider> : ui);
+  await userEvent.click(screen.getByRole("button", { name: /show cli equivalent/i }));
+  return screen.getByRole("dialog").textContent ?? "";
+}
+
+describe("CliCommand", () => {
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it.each(Object.entries(composeStories(stories)))("renders the %s story with its providers", async (_name, Story) => {
+    render(<Story />);
+    await userEvent.click(screen.getByRole("button", { name: /show cli equivalent/i }));
+
+    expect(screen.getByRole("dialog")).not.toBeNull();
+  });
+
+  it("shows the public installer, project env and generated command with notes", async () => {
+    localStorage.setItem(PROJECT_STORAGE_KEY, "proj_42");
+    const text = await openModal(true);
+
+    expect(text).toContain(CLI_INSTALL_COMMAND);
+    expect(text).toContain("export SCOPE_PROJECT=proj_42");
+    expect(text).toContain("scope run submit");
+    expect(text).toContain("Priority (2)");
+    expect(text).not.toMatch(/SCOPE_TOKEN=/);
+  });
+
+  it("omits SCOPE_PROJECT outside a ProjectProvider", async () => {
+    const text = await openModal(false);
+
+    expect(text).toContain("export SCOPE_API_URL=");
+    expect(text).not.toContain("SCOPE_PROJECT");
+  });
+
+  it.each([
+    { name: "Copy install command", value: CLI_INSTALL_COMMAND },
+    { name: "Copy environment variables", value: buildEnvCommand(window.location.origin) },
+    { name: "Copy cli command", value: command.command },
+  ])("copies the correct block through the distinct '$name' button", async ({ name, value }) => {
+    const user = userEvent.setup();
+    const writeText = vi.spyOn(navigator.clipboard, "writeText");
+    await openModal(false);
+
+    const button = screen.getByRole("button", { name });
+    await user.click(button);
+
+    expect(writeText).toHaveBeenCalledOnce();
+    expect(writeText).toHaveBeenCalledWith(value);
+    expect(screen.getByRole("button", { name })).toBe(button);
+  });
+
+  it("preserves multiline submit content and notes while copying the exact command", async () => {
+    const user = userEvent.setup();
+    const writeText = vi.spyOn(navigator.clipboard, "writeText");
+    const { SubmitLongContent } = composeStories(stories);
+    const longCommand = stories.SubmitLongContent.args.command;
+    render(<SubmitLongContent />);
+    await user.click(screen.getByRole("button", { name: /show cli equivalent/i }));
+
+    expect(screen.getByText(/Requirement 30:/).textContent).toBe(longCommand.display);
+    expect(screen.getByText(longCommand.notes[0])).not.toBeNull();
+    expect(screen.getByRole("link", { name: "Read the CLI documentation" })).not.toBeNull();
+    await user.click(screen.getByRole("button", { name: "Copy cli command" }));
+
+    expect(writeText).toHaveBeenCalledOnce();
+    expect(writeText).toHaveBeenCalledWith(longCommand.command);
+  });
+});