Add Swagger and GraphQL UI links for developers

[myieye]

Adds links to the Swagger and GraphQL UI in the AppBar, visible only when developer mode is enabled. Fits standard icon-only button patterns by using the IconButton component.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

AppBar gained developer action buttons (Sandbox, Swagger UI, GraphQL UI); Layout removed a now-duplicated sandbox button. ESLint output config files and package/workspace entries for eslint-output were added; CI lint step adjusted to use aggregated eslint-output behavior.

Changes

Cohort / File(s)	Summary
App bar UI changes frontend/src/lib/layout/AppBar.svelte, frontend/src/lib/layout/Layout.svelte	Added DevContent block in AppBar.svelte with three anchor-wrapped Icon buttons (Sandbox, Swagger UI, GraphQL UI) placed before user/login UI; removed corresponding sandbox DevContent button from Layout.svelte.
ESLint output configs frontend/eslintoutput.config.js, frontend/viewer/eslintoutput.config.js	New modules exporting default ESLint-output configurations targeting . and specifying stylish console and JSON (eslint_report.json) file formats.
Frontend package & workspace updates frontend/package.json, frontend/viewer/package.json, frontend/pnpm-workspace.yaml	lint:report scripts updated to run eslint-output; eslint-output added to devDependencies/dependencies and pnpm workspace catalog; minor reordering of an existing dependency in frontend/package.json.
CI workflow change .github/workflows/develop-ui.yaml	lint:report invocation in the check-and-lint job now runs with --aggregate-output flag.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ESLint viewer in CI #1772 — Changes viewer lint reporting and related lint-report script behavior.
• Update NPM dependencies for Svelte, eslint, and eslint plugins #1842 — Adjusts frontend linting/tooling and pnpm workspace entries related to adding eslint-output.

Suggested reviewers

• hahn-kev
• rmunn

Poem

🐰
I hopped into the AppBar bright,
Placed sandbox, Swagger, GraphQL in sight,
Linting whispers, reports take flight,
CI nods with aggregated light,
A small rabbit cheers the devs tonight!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding Swagger and GraphQL UI links for developers in the AppBar, which aligns with the actual code changes in AppBar.svelte and supporting configuration files.
Description check	✅ Passed	The description is directly related to the changeset, explaining that links to Swagger and GraphQL UI are added to the AppBar for developers. However, it does not mention the additional supporting changes like eslint-output configuration and workflow updates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

UI unit Tests

 1 files  ±  0   3 suites   - 44   0s ⏱️ -19s
10 tests  - 113  10 ✅  - 113  0 💤 ±0  0 ❌ ±0 
10 runs   - 174  10 ✅  - 174  0 💤 ±0  0 ❌ ±0 

Results for commit 2554956. ± Comparison against base commit 77d4c51.

This pull request removes 123 and adds 10 tests. Note that renamed tests count towards both.

src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > accepts parent values when not dirty
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > does NOT guard against stomping deep changes, because StompGuard can't detect them
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > ignores parent values when dirty
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > initializes with the parent value
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > keeps subscribers up to date when it becomes dirty
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > pushs changes to parent
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > reverts new parent values when ignored
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > starts accepting parent changes again after a flush
src/lib/components/ui/format/format-duration.test.ts ‑ formatDuration > formats durations
src/lib/components/ui/format/format-duration.test.ts ‑ formatDuration > formats durations with smallest unit
…

src/index.test.ts ‑ password hashing > can hash a pw using sha1
src/lib/i18n/i18n.test.ts ‑ buildRegionalLocaleRegex > should find all regional locales for available locales
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return en by default
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return en if no user locale is provided and acceptLanguageHeader does not have any supported locales
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return regional locale from acceptLanguageHeader if it has a higher quality rating than the regionless locale
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return supported locale from acceptLanguageHeader with highest quality rating if no user locale is provided
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return user locale if acceptLanguageHeader does not provide a regional/more specific locale
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return user locale if acceptLanguageHeader does not provide a regional/more specific locale with a higher quality rating
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return user locale if acceptLanguageHeader is not provided
src/lib/user.test.ts ‑ jwtToUser > should convert a jwt token to a LexAuthUser

♻️ This comment has been updated with latest results.

[github-actions]

C# Unit Tests

146 tests  ±0   146 ✅ ±0   19s ⏱️ -1s
 22 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 2554956. ± Comparison against base commit 77d4c51.

♻️ This comment has been updated with latest results.

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@frontend/src/lib/layout/AppBar.svelte`:
- Around line 52-59: The onclick handlers currently call
window.open('/api/swagger', '_blank') and window.open('/api/graphql/ui',
'_blank') which can leak window.opener; update both window.open calls (the
onclick attributes on the IconButton elements) to pass the noopener,noreferrer
feature string (e.g., window.open(url, '_blank', 'noopener,noreferrer')) so new
tabs are opened with noopener and noreferrer protection.
- Around line 47-60: The two icon-only IconButton instances (the ones with
icon="i-mdi-api" and icon="i-mdi-graphql") are missing accessible names; add an
explicit aria-label prop to each (for example aria-label="Open Swagger" and
aria-label="Open GraphQL") so screen readers get a proper name instead of
relying on title; this leverages the IconButton prop forwarding (...rest) so no
component changes are required.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a93900b and 8818481.

📒 Files selected for processing (1)

• frontend/src/lib/layout/AppBar.svelte

🧰 Additional context used

📓 Path-based instructions (2)

frontend/**/*.svelte

📄 CodeRabbit inference engine (frontend/AGENTS.md)

frontend/**/*.svelte: Use DaisyUI classes for consistent styling in Svelte components
Import icons from $lib/icons/ for icon components

Files:

• frontend/src/lib/layout/AppBar.svelte

frontend/**/*.{ts,tsx,svelte}

📄 CodeRabbit inference engine (AGENTS.md)

Use pnpm dev for starting the frontend development server in SvelteKit

Files:

• frontend/src/lib/layout/AppBar.svelte

🧠 Learnings (2)

📚 Learning: 2025-12-05T10:28:57.551Z

Learnt from: CR
Repo: sillsdev/languageforge-lexbox PR: 0
File: frontend/viewer/AGENTS.md:0-0
Timestamp: 2025-12-05T10:28:57.551Z
Learning: Applies to frontend/viewer/**/*.svelte : Use ShadCN-Svelte (Tailwind-based) for UI components

Applied to files:

• frontend/src/lib/layout/AppBar.svelte

📚 Learning: 2025-12-05T10:28:45.596Z

Learnt from: CR
Repo: sillsdev/languageforge-lexbox PR: 0
File: frontend/AGENTS.md:0-0
Timestamp: 2025-12-05T10:28:45.596Z
Learning: Applies to frontend/**/*.svelte : Import icons from `$lib/icons/` for icon components

Applied to files:

• frontend/src/lib/layout/AppBar.svelte

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Build UI / publish-ui
• GitHub Check: Build API / publish-api
• GitHub Check: check-and-lint

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Awaiting the start of a new Argos build…

[myieye]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

✅ Actions performed

Full review triggered.

[imnasnainaec]

@myieye Those look like a handy couple new dev buttons. Worth adding them to https://github.com/sillsdev/languageforge-lexbox/blob/develop/frontend/viewer/src/home/HomeView.svelte#L157-L159 too?