Sandbox sync UI

[josephjclark]

Description

This PR reworks the Sync tab on project settings (previously "Sync to
GitHub") and the GitHub connection form inside it. It is a UI and copy pass; no
schema or context changes.

Screenshots

Changes

Sync tab

• Renamed the tab from "Sync to GitHub" to "Sync".
• Moved "Export your Project" here from the Setup tab. It now sits outside the
  github_enabled check, so export is available even when GitHub isn't
  configured on the instance.
• Added a "CLI" card with copy-able examples for openfn project pull <id>,
  openfn project deploy and running a workflow, plus a link to the docs.

New connection form

• Added a "Configure Two-Way Sync to GitHub" title and moved the docs banner
  into the form card.
• Installation, Repository and Branch now share a responsive grid (container
  queries, 220px minimum per box). Three across when there's room, then
  Installation and Repository with the help text below and Branch on its own.
• Repository and Branch dropdowns now have a text filter.
• New connections default to the v2 openfn.yaml format. The old "Advanced"
  disclosure is replaced by a "Use legacy YAML config format" switch below the
  submit button.

Connected state

• Added a "Connected to GitHub" title and moved the verification banner into
  the card.
• "Remove Integration" is now a red button inside the card, next to "Initiate
  Sync".
• The "Sync version" row is gone. Legacy (v1) connections show a short note
  suggesting a reconnect; v2 connections show nothing. "Path to config" is
  hidden for v2.

Validation steps

1. Open /projects/:id/settings#vcs on a project with GitHub configured (see
   DEPLOYMENT.md, "GitHub", for the app setup and env vars).
2. As an owner or admin, check the new connection form at narrow and wide
   widths. Try the filter box on Repository and Branch.
3. Flip the legacy switch, then change a dropdown, and confirm the switch holds
   its state. Connect, and confirm the saved connection has the matching format.
4. On a connected project, check the title, the verification banner, and the
   Remove integration button and its confirmation modal. Check a v1 connection
   shows the legacy note and v2 shows neither the note nor "Path to config".
5. Confirm "Export project" and the CLI card show on the Sync tab, including on
   an instance with no GitHub app configured.

Additional notes for the reviewer

1. Shared component change. custom-select in new_inputs.ex gains an
   opt-in searchable attribute, backed by a new SearchableSelect hook
   (assets/js/hooks/SearchableSelect.ts). Other selects are unaffected, but
   it is the one piece of reusable code here. The filter box uses form="none"
   so typing doesn't fire the surrounding form's phx-change; worth checking
   that holds. Only filtering and Enter-to-select were added, not arrow-key
   navigation.
2. v2 default is UI-only. The sync_version schema and DB default stay
   false, so existing connections and any non-UI callers keep the legacy
   format. Only the new-connection form starts at true. The legacy switch
   updates sync_version through the changeset's params (form fields read
   params before changes). The "Import from GitHub" direction hides the switch,
   so it still falls back to legacy as before.
3. Placeholder links. The docs banner links to
   docs.openfn.org/documentation/link-to-GitHub, which looks like a
   placeholder. The CLI card links to docs.openfn.org/documentation/sync.
   Please confirm both before merging.
4. CLI examples. The commands come from test/integration/cli_deploy_test.exs
   (project pull <id>, project deploy), not from the CLI's own docs.
5. No tests yet. This branch is intentionally UI-first. Known breakage:
   three assertions in project_live_test.exs (around lines 6552, 6607 and
   6662) look for "Remove Integration", which is now "Remove integration".

AI Usage

Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):

• I have used Claude Code
• I have used another model
• I have not used AI

You can read more details in our
Responsible AI Policy

Pre-submission checklist

• I have performed an AI review of my code (we recommend using /review
  with Claude Code)
• I have implemented and tested all related authorization policies.
  (e.g., :owner, :admin, :editor, :viewer)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR

[github-actions]

Based on review, nothing here falls into S0/S1/S2 scope — the main change surface is UI reorganization and documentation updates. Writing up the pass review now.

Security Review ✅

• S0 (project scoping): N/A — API controllers (job_controller.ex, run_controller.ex, work_orders_controller.ex, log_lines_controller.ex, project_controller.ex) got only docstring edits; the sandbox trigger clone at lib/lightning/projects/sandboxes.ex:1263 still derives workflow_id from the parent project's mapping.
• S1 (authorization): N/A — the new handle_event("toggle-legacy-format", …) at lib/lightning_web/live/project_live/github_sync_component.ex:95 mutates only the socket's in-memory changeset (no Repo or VersionControl call), and the save/delete-connection/reconnect gates on can_install_github are unchanged.
• S2 (audit trail): N/A — no new config-resource writes; /api/users paginate behaviour at lib/lightning/accounts.ex:263 is a read path, and the GitHub Sync changes are presentation only.

[lmac-1]

Hey Joe! Frank said it was okay to do some changes directly in the branch. I did some tidying to use existing shared components to make it easier for the ongoing design system work and caught some small things on the way. Hope that it's okay! Here's a summary of what I tidied up:

Shared components:

• The docs banner now uses the shared alert Common.alert
• The connect GitHub button now uses the shared button_link. It matches the other buttons and is really disabled when GitHub sync is limited. Before it only looked disabled.
• The CLI copy buttons use the existing Copy hook inside a tooltip wrapper. Hovering shows "Copy to clipboard" and clicking shows "Copied!"

Fixes:

• The confirm box only shows once a branch is picked. Before, it showed with empty repo and branch names, because an empty string passed the check. I also added a test
• The confirm box is toned down: pale yellow (or pale red for import) with a border, smaller text, and long paths wrap under their icon
• The "properly configured" banner is now vertically centred.

Layout

• The legacy format switch sits above the submit button, so the choice comes before the action
• The GitHub cards use the same spacing as the other cards.

Wording:

• Sync subtitle: "Sync your project with GitHub, export it, or work on it with the CLI"
• Initial setup: "Export this project to GitHub, or replace it with a project that's already on GitHub"
• Connect card: "You need to do this before you can set up sync"
• CLI card: "Use the OpenFn CLI to work on this project on your computer. Learn more in the CLI sync docs". I moved the docs link up from the bottom of the card.
• Headings are now sentence case so that it's consistent with the rest of the app.

One thing I fixed and then reverted: I switched the code to use the shared toggle but then realised it wasn't nice. Using the shared one means it can only mean "on = openfn.yaml" which read weirdly.

I've also left some inline comments on wording that I wasn't sure about.

More generally, I still find this page a bit hard to follow, even with these changes. Mainly the references to different formats (legacy, v1, v2, config.json and open.yaml all show up and I'm not clear what the different choice means). Not to block this PR but I think we can do a bit more with the wording/UX before this goes live in a follow up.

[lmac-1]

This is still confusing text for me. If I haven't changed anything I might be confused by this and what it means. Perhaps we could link to documentation explaining how to switch to the newer configuration instead?

[lmac-1]

Just wondering whether we should have a "Run a workflow" command on a page about syncing?

[josephjclark]

Yeah, debatable, I just figured it's something users are likely to want. It's also a good way to advertise this functionality - so on reflection yeah, I'll keep it. I'm gonna add a second docs link to more usage examples though.

[lmac-1]

Sounds good :)

[midigofrank]

Hmm, it looks Github -> OpenFn is always on v1 because it asks for Path to Config

[josephjclark]

I just stumbled on this screen - this doesn't look right either

I can repro this locally by logging in as editor and going to the default project

EDIT: fixed!

[josephjclark]

@lmac-1 putting the legacy button beneath the Connect button was a deliberate choice to de-emphasise it. Users shouldn't be using it, and want to minimize the control as much as possible. I'm tempted to use an old-school checkbox rather than that big button too.

I'd love to remove it entirely, but my spidey sense tells me we should have some sort of fallback (ie, a v1 production repo needs to reconnect sync and absolutely does not want to restructure their GH repo)

EDIT: Oh, but if you hit the switch then we show the config path and that DOES need to be above the button. Ok, this is fine :)

[josephjclark]

@lmac-1 @midigofrank Ready for re-review

Btw @lmac-1 GH sync is just intrinsically complex. There are a couple of hard questions users have to ask. I think I've managed to simplify the language here but going further requires a deep redesign of the UI and maybe even whole UX - which is way out of scope for this. I shouldn't even be doing the simplify work really! The only aim here is a) consolidate all sync settings under a single tab and b) use v2 by default

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.5%. Comparing base (aac8674) to head (f800ee6).

Additional details and impacted files

@@           Coverage Diff           @@
##            main   #5235     +/-   ##
=======================================
+ Coverage   91.4%   91.5%   +0.1%     
=======================================
  Files        465     465             
  Lines      23416   23440     +24     
=======================================
+ Hits       21399   21440     +41     
+ Misses      2017    2000     -17     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.