feat(desktop): Tauri desktop UI/UX foundation + audit catalog (D0)

[qnbs]

User description

Context

Phase D0 of the Tauri desktop UI/UX remediation. The app was tuned as a PWA; the desktop (WebView2/WebKit/WebKitGTK) presentation has deficits. This PR lands the scoping foundation so every later desktop fix is additive and PWA-safe, plus the grounded audit catalog. No visual change.

What changed

• services/tauriRuntime.ts — getDesktopOs() (UA-based: windows/macos/linux) + applyDesktopRuntimeFlags() which tags document.body with is-desktop + data-os. Idempotent; no-op on the web.
• App.tsx — calls applyDesktopRuntimeFlags() once on mount (alongside the theme/appearance body-class effects).
• index.css — scaffolds the .is-desktop CSS layer (empty placeholder) so desktop overrides are scoped under body.is-desktop (+ data-os for per-engine quirks) and the PWA stays untouched.
• docs/DESKTOP-UI-AUDIT.md — code-derived finding catalog (C-1…C-10: content max-width, Help measure, fluid-type ceiling, touch-target chunkiness, glass perf, native menu, per-OS quirks, HiDPI…) + the screenshot-matrix template for the human visual pass that grounds D1–D4.

Why no visual change

body.is-desktop is only added inside the Tauri WebView (__TAURI__ present), and the .is-desktop CSS layer is an empty placeholder. The web build is byte-equivalent.

Verification

• pnpm run typecheck ✓
• pnpm run lint (--error-on-warnings) ✓
• pnpm exec vitest run tests/unit/tauriRuntime.test.ts ✓ — 11 tests (new getDesktopOs + applyDesktopRuntimeFlags coverage)
• Visual pass (screenshot matrix across Win/mac/Linux × widths × themes × DPI) is the human step seeded in docs/DESKTOP-UI-AUDIT.md.

CodeAnt review deferred — processed later in the combined loop per docs/CODEANT-LOOP-RUNBOOK.md.

🤖 Generated with Claude Code

---

CodeAnt-AI Description

Set up desktop-scoped styling and fix desktop runtime detection

What Changed

• Desktop app screens now get a dedicated styling scope, so later desktop-only changes can be applied without affecting the web/PWA version.
• The app now marks Tauri desktop sessions with OS-specific desktop context on launch, enabling per-OS desktop behavior.
• Added a desktop UI/UX audit tracker with the main layout, readability, and desktop-specific issues to verify in follow-up phases.
• Fixed desktop runtime detection so unknown or empty browser data no longer gets treated as Linux, and Tauri sessions are recognized in more desktop setups.

Impact

✅ Desktop-only changes stay out of the web app
✅ Fewer wrong per-OS desktop tweaks
✅ Clearer path for desktop UI fixes

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
worldscript-studio	Error		Jun 20, 2026 11:10am

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR makes the root app tag the document body with desktop-specific flags in Tauri so future desktop-only CSS can be scoped without affecting the PWA.

sequenceDiagram
    participant User
    participant DesktopApp
    participant TauriRuntime
    participant DOM
    participant CSSLayer

    User->>DesktopApp: Launch Tauri desktop app
    DesktopApp->>DesktopApp: Mount App component
    DesktopApp->>TauriRuntime: applyDesktopRuntimeFlags()
    TauriRuntime->>TauriRuntime: Detect Tauri runtime and desktop OS from user agent
    TauriRuntime->>DOM: Add is-desktop class and data-os to body
    DOM->>CSSLayer: Enable desktop scoped styles under body.is-desktop

Loading

---

Generated by CodeAnt AI

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds a Tauri-only startup flow where the app detects the desktop OS from the user agent and tags the document body with desktop-specific flags for future scoped styling, while remaining a no-op in the web/PWA build.

sequenceDiagram
    participant App
    participant DesktopRuntime
    participant DOM

    App->>DesktopRuntime: applyDesktopRuntimeFlags on mount
    DesktopRuntime->>DesktopRuntime: Check if Tauri runtime
    alt Running in Tauri
        DesktopRuntime->>DesktopRuntime: getDesktopOs from user agent
        DesktopRuntime->>DOM: Add is-desktop class to body
        alt OS detected
            DesktopRuntime->>DOM: Set body data-os attribute
        else Unknown OS
            DesktopRuntime->>DOM: Leave data-os unset
        end
    else Running on web
        DesktopRuntime->>DOM: No changes to body
    end

Loading

---

Generated by CodeAnt AI

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds a desktop-only runtime hook so that when running under Tauri, the app tags the document body with a desktop flag and OS hint, enabling future desktop-scoped CSS without affecting the PWA.

sequenceDiagram
    participant User
    participant DesktopApp
    participant App
    participant Runtime
    participant DOM

    User->>DesktopApp: Launch desktop application
    DesktopApp->>App: Mount React root component
    App->>Runtime: applyDesktopRuntimeFlags()
    Runtime->>Runtime: Detect Tauri runtime and desktop OS

    alt Running under Tauri
        Runtime->>DOM: Add is-desktop class and os data attribute to body
    else Running in browser or unknown
        Runtime-->>App: No desktop flags applied
    end

Loading

---

Generated by CodeAnt AI

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Suggestion: The new import targets a symbol that is not exported by services/tauriRuntime.ts in this codebase, which breaks the module contract and will fail at build/runtime import resolution. Either add and export applyDesktopRuntimeFlags from tauriRuntime.ts in this batch, or remove this import/call until that export exists. [import error]

Severity Level: Critical 🚨

- ❌ pnpm run typecheck fails on missing export symbol.
- ❌ pnpm run build fails, preventing application bundles.
- ⚠️ Desktop runtime flags feature unusable until export added.

Steps of Reproduction ✅

1. Open `/workspace/WorldScript-Studio/App.tsx` and note that at line 73 it imports `{
applyDesktopRuntimeFlags }` from `'./services/tauriRuntime'` (seen in the file header
section around lines 60–75).

2. Open `/workspace/WorldScript-Studio/services/tauriRuntime.ts` and observe that it only
exports `isTauriRuntime` (lines 3–12), `getTauriAppVersion` (lines 14–21), and
`openTauriDataDirectory` (lines 24–37), with no `applyDesktopRuntimeFlags` export defined
anywhere in the file.

3. Run `pnpm run typecheck` as defined in `package.json` scripts (lines 21–55), which
invokes `tsgo` to type-check the entire TypeScript project including `App.tsx`.

4. During typechecking, the compiler resolves `./services/tauriRuntime` for the named
import at `App.tsx:73`, fails to find an exported member `applyDesktopRuntimeFlags` in
`services/tauriRuntime.ts`, and emits an error like "Module './services/tauriRuntime' has
no exported member 'applyDesktopRuntimeFlags'", causing the command to exit with a
non-zero status and blocking builds/CI.

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** App.tsx
**Line:** 73:73
**Comment:**
	*Import Error: The new import targets a symbol that is not exported by `services/tauriRuntime.ts` in this codebase, which breaks the module contract and will fail at build/runtime import resolution. Either add and export `applyDesktopRuntimeFlags` from `tauriRuntime.ts` in this batch, or remove this import/call until that export exists.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎