PRDCT-692: reshoot the Git Repository screenshot on Build locally

[Iamfle4ka]

Linear: PRDCT-692

Stacked on #1166 (the Create app screen), which sits on #1164 and #1159. Merge those first; GitHub then retargets this one. Merged in sequence with #1164, #1165, #1167, #1168, #1160, #1162 and #1161 on today's main, this commit applies cleanly.

Why

python-js-config.png, the image in build-locally's "Sync to your project", still showed the July app page. It had the old Overview layout, with a separate Authentication card and no App access card, and the "Kai Agent Beta" pill. Its repository was Keboola-managed (git.europe-west3.gcp.keboola.com/keboola/app-74016144.git), in a section about a repository you host. The Versions panel showed a user's name three times, and PRDCT-616 says names get blurred or cropped. #1166 listed the image under "Not in this PR".

What changed

• public/data-apps/python-js-config.png now shows only the Git Repository card of an app that runs from its own GitHub repository: Project URL, the Private switch, Branch and Reload branches. The crop leaves out the top bar and the right-hand panel, so no names show. It is 1406 × 592 px and 42 KB (the old one was 356 KB).
• The image moved from below the list to under step 3, the step whose result it shows. It's indented the way publish-and-share and lock-version indent theirs.
• Step 3 follows the clicks in order: Load branches, the Branch field, save. One sentence explains why the screenshot says Reload branches: the label changes once the branches have loaded.
• The alt text describes the card.
• The MDX comment under the steps records the app and the UI build the shot comes from, plus one VERIFY (see Evidence).

Evidence

The shot is from 6 October, project 264 on europe-west3, kbc-ui bundle.BeQYTX6g.js → app-DYO4ae3t.js. The app is docs-manual-app (App ID 74022487), the test app made for #1164: never deployed, connected to keboola/titanic-python-app on branch main. Headless Playwright took it with the saved session, in a 1100 px window at 2x, cropped to the card plus 16 px.

• The card loaded collapsed, showing "Git - keboola/titanic-python-app" and a PUBLIC badge. Expanding it was the only UI action, done with a click() from JavaScript, so the mouse never moved and no focus ring shows.
• In the expanded card's DOM, the button text is "Reload branches" (CSS uppercases it). Private is a switch with aria-checked="false", Project URL is https://github.com/keboola/titanic-python-app and Branch is main.
• The Branch combobox stayed closed, because it lists commit authors. Nothing was saved or deployed: the app's versions are still #1 to #3, and no Save button appeared.
• Load branches as the first label, and the change to Reload branches once branches load or a branch is saved, come from the 1 October UI code that PRDCT-692: describe today's Create app screen in Create an app manually #1166 read (GitSetting). Nobody has seen the Load branches state live. None of the 30 app configurations in project 264's production branch has a repository without a branch (kbagent config list, 6 October), and getting one there means creating or editing an app. The comment carries a VERIFY(Nikita) for both.

Checks

• npm run build is clean, 373 pages. node scripts/audit-phase2.mjs matches the base: 0 broken links, 0 missing images and the same 70 known items. check-cli-reference reports 0 findings.
• fact-checker on the first version: 0 critical and 0 major, 20 claims confirmed. Its two minors are fixed: step 3 put the label change after the save, though it happens when the branches load, and it wrote "branch" for the Branch field. It couldn't confirm Load branches as the first label from public sources, which is the VERIFY above. A delta pass on the final text found 0 critical and 0 major and confirmed 5 claims. It also asked for the VERIFY to cover the change on load and for the kbagent check to name the production branch; both are done.
• guide-tester (cold read plus the captured DOM, no browser): no blockers. Its major is fixed: the first wording of step 3 made Reload branches look like proof of the save. The minors that touch this change are applied: the image placement, the click order and the Branch label. A re-read of the final text found the major resolved and the placement fine. The alt text names no page, so it can't disagree with step 2. The other minors concern older text and are listed below.
• checker: PASS. The two minors that concern this description are fixed: the render widths below had been measured before the image moved into step 3, and the humanizer hadn't yet run on the text.
• The new image has a mean luma of 246. On the built page, inside step 3, it renders 698 px wide in a 1280 px window and 321 px wide on a 375 px phone, in light and dark.

Not in this PR

• PRDCT-684: document the keboola-config contract and Python/JS troubleshooting in Apps #1128 (PRDCT-684, the keboola-config contract) edits the same steps in build-locally.md, the file's name before the rename, and already conflicts with main (modify/delete). Whoever revives it should keep this image and alt text.
• From the guide-tester, about older text in the same section:
  • Step 2 says "the app's configuration page"; the UI's tab is Overview, and the card there loads collapsed.
  • Step 2 says "add your credentials" without naming the fields (Username and Access Token, or SSH Private Key).
  • The card's field is Project URL, the Create app form says Repository URL, and this page also uses "project" for the Keboola project.
  • The steps don't say where the Save button is. Finding out means editing an app, which this PR didn't do.
  • Step 4 stops at Deploy. It doesn't mention the wizard or say how to tell the app is up (Active, then Open).
  • Nothing before Deploy points back to the keboola-config/ folder, which troubleshooting names as the most common start failure.
• The test app docs-manual-app (App ID 74022487) stays until this PR and PRDCT-692: reshoot the Apps screenshots against today's UI #1164 merge.

🤖 Generated with Claude Code

[linear-code]

PRDCT-692

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
connection-docs	Ready	Preview	Oct 7, 2026 4:52pm UTC