Skip to content

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

Open
Cedric Vidal (cedricvidal) wants to merge 2 commits into
mainfrom
copy-as-cli
Open

Cedric Vidal (cedricvidal) wants to merge 2 commits into
mainfrom
copy-as-cli

Conversation

@cedricvidal

@cedricvidal Cedric Vidal (cedricvidal) commented Jul 29, 2026 •

Copy link
Copy Markdown
Contributor

Original author: Wassim Chegham (@manekinekko)

Copy as CLI — Portal → CLI parity

Originally extracted from the UX v2 PR (#945). #945 was closed without merging, so this PR is now rebased onto main and targets main directly.

What this adds

A terminal-glyph (>_) button across the Runs surfaces that opens a GitHub-style modal showing the exact scope command equivalent of the current Portal view — with step-by-step instructions (install the CLI, point it at the API and project, run the generated command), each with its own copy button, plus any parity caveats.

Highlights

  • CliCommand component (apps/portal/src/components/CliCommand.tsx) — Dialog-based modal mirroring GitHub's "Merging via command line" UX, with per-block copy buttons and a notes callout. Uses the public curl … microsoft/scope/main/install-cli.sh | bash installer, exports SCOPE_API_URL (current origin) and SCOPE_PROJECT (selected project), and reminds users about SCOPE_TOKEN without ever embedding credentials.
  • Pure command builders (apps/portal/src/lib/cli/buildCommand.ts) — translate Portal state into a command, emitting only flags the CLI on main supports:
    • run submit: -m, -c, -w (always — the CLI has no default worker), --model, --reasoning-effort, --max-iterations, --count, --mcp-servers, --skills, --extensions, --agent-version, --codebase, --resources + --resource-param, --agents-md, --gates, --profile, --profile-variations-file.
    • run list: every Runs filter (-w, --status, --outcome, --task, --profile, --criteria, --model, --os, --priority, --agent-version, --search, --created-after/--created-before, --submission-id, --turns, --max-iterations) + --sort-by/--sort-dir.
    • bulk: cancel -i <ids…>, download-batch -i <ids…>, for loop for delete/retry.
    • Anything the CLI can't express (submit priority; bulk pause/resume/priority/re-submit) is surfaced as a note rather than silently dropped.
  • Mount points: RunDetail header, RunPreviewPanel, RunsList header + bulk bar, SubmitRun footer.
  • Docs: "Copy as CLI" section in docs/architecture/cli-distribution.md.

Commits

  1. feat(portal): add "Copy as CLI" affordance — the original change, rebased onto main (import-only conflicts in the four pages resolved).
  2. fix(portal): align "Copy as CLI" with the current scope CLI — updates builders, modal, page wiring, tests and docs for the CLI as it exists on main.

Tests

  • Portal tsc clean; full portal Vitest suite passes (70 files / 497 tests).
  • buildCommand.test.ts covers builder output + parity notes; CliCommand.test.tsx covers the modal (installer, SCOPE_PROJECT, notes, no token).
  • Manually verified the generated run list, run submit (incl. gates/resources/AGENTS.md quoting), variation-mode and download-batch commands against the real CLI from main with a local echo API: the CLI accepted every flag and sent the same query/body the Portal sends.

Surfaces the exact `scope` command equivalent of the current Portal view
via a terminal-glyph button that opens a GitHub-style modal with
step-by-step instructions (install, point at API, run), each with its own
copy button plus parity caveats.

- Component: apps/portal/src/components/CliCommand.tsx (Dialog-based modal)
- Builders: apps/portal/src/lib/cli/buildCommand.ts (pure, flag-accurate;
  unsupported Portal state surfaced as notes, never dropped; secrets never
  embedded) + unit tests.
- Mount points: RunDetail header, RunPreviewPanel, RunsList header + bulk
  bar, SubmitRun footer.
- Docs: restores the "Copy as CLI" section in cli-distribution.md.

Extracted from the ux-v2 PR (#945) into this focused follow-up.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@manekinekko
Wassim Chegham (manekinekko) changed the base branch from ux-v2 to main October 1, 2026 15:17
@github-actions github-actions Bot added type: documentation Documentation additions, corrections, and improvements. language: javascript Work involving JavaScript code, tooling, or dependencies. area: portal Scope web portal, pages, and user-facing components. topic: testing Test coverage, test infrastructure, and validation quality. topic: ui Portal, visual presentation, layout, and interface components. labels Oct 1, 2026
Rebased onto main, where the CLI gained flags this affordance predated.

- run submit: always emit -w (the CLI no longer defaults a worker and
  errors without --worker/--profile); map occurrences to --count; add
  --codebase, --resources/--resource-param, --agents-md and inline
  --gates; emit --profile-variations-file with a note showing the file
  contents. Priority stays a Portal-only note.
- run list: map every Runs filter to its CLI flag (status, outcome,
  task, profile, criteria, model, os, priority, agent-version, search,
  created-after/before, multi-worker) plus --sort-by/--sort-dir, built
  from the same values the runs query sends.
- bulk: multi-id download uses `run download-batch`; notes list the
  other CLI bulk verbs and flag pause/resume/priority/re-submit as
  Portal-only.
- modal: public curl installer from microsoft/scope, export
  SCOPE_PROJECT for the selected project (submit/list require it),
  SCOPE_TOKEN hint without embedding credentials, public docs link.
- tests: builder coverage for the new flags + a CliCommand render test.
- docs: refresh the "Copy as CLI" section in cli-distribution.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Oct 1, 2026

Copy link
Copy Markdown

Test Results (Node.js 22)

test: Run #170

Tests 📝 Passed ✅ Failed ❌ Skipped ⏭️ Pending ⏳ Other ❓ Flaky 🍂 Duration ⏱️
3207 3207 0 0 0 0 0 1m23s

🎉 All tests passed!

Github Test Reporter

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

Grouping parity, Storybook provider setup, and modal accessibility issues remain unresolved.

Review effort: Balanced
Findings: 4 Medium severity

Open (4)
What changed in this PR

Adds Portal “Copy as CLI” dialogs that reproduce run views and actions as scope commands.

Changes:

  • Adds reusable CLI command builders and modal.
  • Integrates commands into run submission, listing, preview, detail, and bulk actions.
  • Adds documentation, tests, and Storybook coverage.
File Description
docs/​architecture/​cli-distribution.md Documents the affordance and parity behavior.
apps/​portal/​src/​pages/​SubmitRun.tsx Generates submission commands.
apps/​portal/​src/​pages/​RunsList.tsx Adds list and bulk commands.
apps/​portal/​src/​pages/​RunPreviewPanel.tsx Adds run-get command access.
apps/​portal/​src/​pages/​RunDetail.tsx Adds run-get command access.
apps/​portal/​src/​lib/​cli/​buildCommand.ts Implements command builders and shell quoting.
apps/​portal/​src/​lib/​cli/​buildCommand.test.ts Tests generated commands.
apps/​portal/​src/​contexts/​ProjectContext.tsx Exposes optional project selection.
apps/​portal/​src/​components/​CliCommand.tsx Implements the command modal.
apps/​portal/​src/​components/​CliCommand.test.tsx Tests modal content and project handling.
apps/​portal/​src/​components/​CliCommand.stories.tsx Adds component stories.

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines +6 to +17
import { CliCommand } from "./CliCommand";
import {
buildRunGet,
buildRunList,
buildRunSubmit,
buildRunBulk,
} from "@/lib/cli/buildCommand";

const meta = {
component: CliCommand,
tags: ["ai-generated", "needs-work"],
} satisfies Meta<typeof CliCommand>;
variant="outline"
size="icon"
className="shrink-0"
aria-label="Copy command"
</TooltipTrigger>
<TooltipContent>{tooltip}</TooltipContent>
</Tooltip>
<DialogContent className="max-w-2xl">
Comment on lines +627 to +631
buildRunList({
workers,
statuses,
outcomes,
models,
@manekinekko Wassim Chegham (manekinekko) added topic: ux Usability, interaction flows, and overall user experience. type: enhancement New functionality or improvements to existing behavior. labels Oct 1, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: portal Scope web portal, pages, and user-facing components. language: javascript Work involving JavaScript code, tooling, or dependencies. topic: testing Test coverage, test infrastructure, and validation quality. topic: ui Portal, visual presentation, layout, and interface components. topic: ux Usability, interaction flows, and overall user experience. type: documentation Documentation additions, corrections, and improvements. type: enhancement New functionality or improvements to existing behavior.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants