Keep Workspace Settings and Delete usable when a workspace's meta is missing (#834)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

.agents/plugins/marketplace.json

@@ -0,0 +1,20 @@
+{
+  "name": "yaak",
+  "interface": {
+    "displayName": "Yaak"
+  },
+  "plugins": [
+    {
+      "name": "yaak",
+      "source": {
+        "source": "local",
+        "path": "./crates-cli/yaak-cli"
+      },
+      "policy": {
+        "installation": "AVAILABLE",
+        "authentication": "ON_INSTALL"
+      },
+      "category": "Developer Tools"
+    }
+  ]
+}

.claude-context.md

@@ -1,23 +1,27 @@
 # Claude Context: Detaching Tauri from Yaak
 
 ## Goal
+
 Make Yaak runnable as a standalone CLI without Tauri as a dependency. The core Rust crates in `crates/` should be usable independently, while Tauri-specific code lives in `crates-tauri/`.
 
 ## Project Structure
+
 ```
 crates/           # Core crates - should NOT depend on Tauri
-crates-tauri/     # Tauri-specific crates (yaak-app, yaak-tauri-utils, etc.)
+crates-tauri/     # Tauri-specific crates (yaak-app-client, yaak-tauri-utils, etc.)
 crates-cli/       # CLI crate (yaak-cli)
 ```
 
 ## Completed Work
 
 ### 1. Folder Restructure
-- Moved Tauri-dependent app code to `crates-tauri/yaak-app/`
+
+- Moved Tauri-dependent app code to `crates-tauri/yaak-app-client/`
 - Created `crates-tauri/yaak-tauri-utils/` for shared Tauri utilities (window traits, api_client, error handling)
 - Created `crates-cli/yaak-cli/` for the standalone CLI
 
 ### 2. Decoupled Crates (no longer depend on Tauri)
+
 - **yaak-models**: Uses `init_standalone()` pattern for CLI database access
 - **yaak-http**: Removed Tauri plugin, HttpConnectionManager initialized in yaak-app setup
 - **yaak-common**: Only contains Tauri-free utilities (serde, platform)
@@ -25,6 +29,7 @@ crates-cli/       # CLI crate (yaak-cli)
 - **yaak-grpc**: Replaced AppHandle with GrpcConfig struct, uses tokio::process::Command instead of Tauri sidecar
 
 ### 3. CLI Implementation
+
 - Basic CLI at `crates-cli/yaak-cli/src/main.rs`
 - Commands: workspaces, requests, send (by ID), get (ad-hoc URL), create
 - Uses same database as Tauri app via `yaak_models::init_standalone()`
@@ -32,31 +37,36 @@ crates-cli/       # CLI crate (yaak-cli)
 ## Remaining Work
 
 ### Crates Still Depending on Tauri (in `crates/`)
+
 1. **yaak-git** (3 files) - Moderate complexity
 2. **yaak-plugins** (13 files) - **Hardest** - deeply integrated with Tauri for plugin-to-window communication
 3. **yaak-sync** (4 files) - Moderate complexity
 4. **yaak-ws** (5 files) - Moderate complexity
 
 ### Pattern for Decoupling
+
 1. Remove Tauri plugin `init()` function from the crate
 2. Move commands to `yaak-app/src/commands.rs` or keep inline in `lib.rs`
 3. Move extension traits (e.g., `SomethingManagerExt`) to yaak-app or yaak-tauri-utils
 4. Initialize managers in yaak-app's `.setup()` block
 5. Remove `tauri` from Cargo.toml dependencies
-6. Update `crates-tauri/yaak-app/capabilities/default.json` to remove the plugin permission
+6. Update `crates-tauri/yaak-app-client/capabilities/default.json` to remove the plugin permission
 7. Replace `tauri::async_runtime::block_on` with `tokio::runtime::Handle::current().block_on()`
 
 ## Key Files
-- `crates-tauri/yaak-app/src/lib.rs` - Main Tauri app, setup block initializes managers
-- `crates-tauri/yaak-app/src/commands.rs` - Migrated Tauri commands
-- `crates-tauri/yaak-app/src/models_ext.rs` - Database plugin and extension traits
+
+- `crates-tauri/yaak-app-client/src/lib.rs` - Main Tauri app, setup block initializes managers
+- `crates-tauri/yaak-app-client/src/commands.rs` - Migrated Tauri commands
+- `crates-tauri/yaak-app-client/src/models_ext.rs` - Database plugin and extension traits
 - `crates-tauri/yaak-tauri-utils/src/window.rs` - WorkspaceWindowTrait for window state
 - `crates/yaak-models/src/lib.rs` - Contains `init_standalone()` for CLI usage
 
 ## Git Branch
+
 Working on `detach-tauri` branch.
 
 ## Recent Commits
+
 ```
 c40cff40 Remove Tauri dependencies from yaak-crypto and yaak-grpc
 df495f1d Move Tauri utilities from yaak-common to yaak-tauri-utils
@@ -67,6 +77,7 @@ e718a5f1 Refactor models_ext to use init_standalone from yaak-models
 ```
 
 ## Testing
+
 - Run `cargo check -p <crate>` to verify a crate builds without Tauri
-- Run `npm run app-dev` to test the Tauri app still works
+- Run `npm run client:dev` to test the Tauri app still works
 - Run `cargo run -p yaak-cli -- --help` to test the CLI

.claude-plugin/marketplace.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/claude-code-marketplace.json",
+  "name": "yaak",
+  "description": "Plugins for Yaak, the desktop API client",
+  "owner": {
+    "name": "Yaak",
+    "url": "https://yaak.app"
+  },
+  "plugins": [
+    {
+      "name": "yaak",
+      "source": "./crates-cli/yaak-cli",
+      "description": "Build, save, and send API requests with the yaak CLI, with its MCP server for agents",
+      "category": "development",
+      "tags": ["api", "http", "rest", "graphql", "grpc", "openapi", "api-client"]
+    }
+  ]
+}

.claude/commands/release/check-out-pr.md

@@ -1,62 +0,0 @@
----
-description: Review a PR in a new worktree
-allowed-tools: Bash(git worktree:*), Bash(gh pr:*), Bash(git branch:*)
----
-
-Check out a GitHub pull request for review.
-
-## Usage
-
-```
-/check-out-pr <PR_NUMBER>
-```
-
-## What to do
-
-1. If no PR number is provided, list all open pull requests and ask the user to select one
-2. Get PR information using `gh pr view <PR_NUMBER> --json number,headRefName`
-3. **Ask the user** whether they want to:
-   - **A) Check out in current directory** — simple `gh pr checkout <PR_NUMBER>`
-   - **B) Create a new worktree** — isolated copy at `../yaak-worktrees/pr-<PR_NUMBER>`
-4. Follow the appropriate path below
-
-## Option A: Check out in current directory
-
-1. Run `gh pr checkout <PR_NUMBER>`
-2. Inform the user which branch they're now on
-
-## Option B: Create a new worktree
-
-1. Create a new worktree at `../yaak-worktrees/pr-<PR_NUMBER>` using `git worktree add` with a timeout of at least 300000ms (5 minutes) since the post-checkout hook runs a bootstrap script
-2. Checkout the PR branch in the new worktree using `gh pr checkout <PR_NUMBER>`
-3. The post-checkout hook will automatically:
-   - Create `.env.local` with unique ports
-   - Copy editor config folders
-   - Run `npm install && npm run bootstrap`
-4. Inform the user:
-   - Where the worktree was created
-   - What ports were assigned
-   - How to access it (cd command)
-   - How to run the dev server
-   - How to remove the worktree when done
-
-### Example worktree output
-
-```
-Created worktree for PR #123 at ../yaak-worktrees/pr-123
-Branch: feature-auth
-Ports: Vite (1421), MCP (64344)
-
-To start working:
-  cd ../yaak-worktrees/pr-123
-  npm run app-dev
-
-To remove when done:
-  git worktree remove ../yaak-worktrees/pr-123
-```
-
-## Error Handling
-
-- If the PR doesn't exist, show a helpful error
-- If the worktree already exists, inform the user and ask if they want to remove and recreate it
-- If `gh` CLI is not available, inform the user to install it

.claude/commands/release/generate-release-notes.md

@@ -1,49 +0,0 @@
----
-description: Generate formatted release notes for Yaak releases
-allowed-tools: Bash(git tag:*)
----
-
-Generate formatted release notes for Yaak releases by analyzing git history and pull request descriptions.
-
-## What to do
-
-1. Identifies the version tag and previous version
-2. Retrieves all commits between versions 
-   - If the version is a beta version, it retrieves commits between the beta version and previous beta version
-   - If the version is a stable version, it retrieves commits between the stable version and the previous stable version
-3. Fetches PR descriptions for linked issues to find:
-   - Feedback URLs (feedback.yaak.app)
-   - Additional context and descriptions
-   - Installation links for plugins
-4. Formats the release notes using the standard Yaak format:
-   - Changelog badge at the top
-   - Bulleted list of changes with PR links
-   - Feedback links where available
-   - Full changelog comparison link at the bottom
-
-## Output Format
-
-The skill generates markdown-formatted release notes following this structure:
-
-```markdown
-[![Changelog](https://img.shields.io/badge/Changelog-VERSION-blue)](https://yaak.app/changelog/VERSION)
-
-- Feature/fix description in by @username [#123](https://github.com/mountain-loop/yaak/pull/123)
-- [Linked feedback item](https://feedback.yaak.app/p/item) by @username in [#456](https://github.com/mountain-loop/yaak/pull/456)
-- A simple item that doesn't have a feedback or PR link
-
-**Full Changelog**: https://github.com/mountain-loop/yaak/compare/vPREV...vCURRENT
-```
-
-**IMPORTANT**: Always add a blank lines around the markdown code fence and output the markdown code block last
-**IMPORTANT**: PRs by `@gschier` should not mention the @username
-
-## After Generating Release Notes
-
-After outputting the release notes, ask the user if they would like to create a draft GitHub release with these notes. If they confirm, create the release using:
-
-```bash
-gh release create <tag> --draft --prerelease --title "Release <version>" --notes '<release notes>'
-```
-
-**IMPORTANT**: The release title format is "Release XXXX" where XXXX is the version WITHOUT the `v` prefix. For example, tag `v2026.2.1-beta.1` gets title "Release 2026.2.1-beta.1".

.claude/skills/worktree.md

@@ -1,35 +0,0 @@
-# Worktree Management Skill
-
-## Creating Worktrees
-
-When creating git worktrees for this project, ALWAYS use the path format:
-```
-../yaak-worktrees/<NAME>
-```
-
-For example:
-- `git worktree add ../yaak-worktrees/feature-auth`
-- `git worktree add ../yaak-worktrees/bugfix-login`
-- `git worktree add ../yaak-worktrees/refactor-api`
-
-## What Happens Automatically
-
-The post-checkout hook will automatically:
-1. Create `.env.local` with unique ports (YAAK_DEV_PORT and YAAK_PLUGIN_MCP_SERVER_PORT)
-2. Copy gitignored editor config folders (.zed, .idea, etc.)
-3. Run `npm install && npm run bootstrap`
-
-## Deleting Worktrees
-
-```bash
-git worktree remove ../yaak-worktrees/<NAME>
-```
-
-## Port Assignments
-
-- Main worktree: 1420 (Vite), 64343 (MCP)
-- First worktree: 1421, 64344
-- Second worktree: 1422, 64345
-- etc.
-
-Each worktree can run `npm run app-dev` simultaneously without conflicts.

.codex/skills/release-check-out-pr/SKILL.md

@@ -1,46 +0,0 @@
----
-name: release-check-out-pr
-description: Check out a GitHub pull request for review in this repo, either in the current directory or in a new isolated worktree at ../yaak-worktrees/pr-<PR_NUMBER>. Use when asked to run or replace the old Claude check-out-pr command.
----
-
-# Check Out PR
-
-Check out a PR by number and let the user choose between current-directory checkout and isolated worktree checkout.
-
-## Workflow
-
-1. Confirm `gh` CLI is available.
-2. If no PR number is provided, list open PRs (`gh pr list`) and ask the user to choose one.
-3. Read PR metadata:
-   - `gh pr view <PR_NUMBER> --json number,headRefName`
-4. Ask the user to choose:
-   - Option A: check out in the current directory
-   - Option B: create a new worktree at `../yaak-worktrees/pr-<PR_NUMBER>`
-
-## Option A: Current Directory
-
-1. Run:
-   - `gh pr checkout <PR_NUMBER>`
-2. Report the checked-out branch.
-
-## Option B: New Worktree
-
-1. Use path:
-   - `../yaak-worktrees/pr-<PR_NUMBER>`
-2. Create the worktree with a timeout of at least 5 minutes because checkout hooks run bootstrap.
-3. In the new worktree, run:
-   - `gh pr checkout <PR_NUMBER>`
-4. Report:
-   - Worktree path
-   - Assigned ports from `.env.local` if present
-   - How to start work:
-     - `cd ../yaak-worktrees/pr-<PR_NUMBER>`
-     - `npm run app-dev`
-   - How to remove when done:
-     - `git worktree remove ../yaak-worktrees/pr-<PR_NUMBER>`
-
-## Error Handling
-
-- If PR does not exist, show a clear error.
-- If worktree already exists, ask whether to reuse it or remove/recreate it.
-- If `gh` is missing, instruct the user to install/authenticate it.

.codex/skills/release-generate-release-notes/SKILL.md

@@ -19,10 +19,12 @@ Generate formatted markdown release notes for a Yaak tag.
    - `gh pr view <PR_NUMBER> --json number,title,body,author,url`
 5. Extract useful details:
    - Feedback URLs (`feedback.yaak.app`)
+   - Contributor GitHub handles from `author.login`
    - Plugin install links or other notable context
 6. Format notes using Yaak style:
    - Changelog badge at top
    - Bulleted items with PR links where available
+   - Contributor handles for external PRs
    - Feedback links where available
    - Full changelog compare link at bottom
 
@@ -31,7 +33,9 @@ Generate formatted markdown release notes for a Yaak tag.
 - Wrap final notes in a markdown code fence.
 - Keep a blank line before and after the code fence.
 - Output the markdown code block last.
+- Append contributor attribution to PR-backed bullets for non-`@gschier` authors, using `by [@handle](https://github.com/handle)`.
 - Do not append `by @gschier` for PRs authored by `@gschier`.
+- These are app release notes. Exclude CLI-only changes (commits prefixed with `cli:` or only touching `crates-cli/`) since the CLI has its own release process.
 
 ## Release Creation Prompt
 

.codex/skills/worktree-management/SKILL.md

@@ -1,37 +0,0 @@
----
-name: worktree-management
-description: Manage Yaak git worktrees using the standard ../yaak-worktrees/<NAME> layout, including creation, removal, and expected automatic setup behavior and port assignments.
----
-
-# Worktree Management
-
-Use the Yaak-standard worktree path layout and lifecycle commands.
-
-## Path Convention
-
-Always create worktrees under:
-
-`../yaak-worktrees/<NAME>`
-
-Examples:
-- `git worktree add ../yaak-worktrees/feature-auth`
-- `git worktree add ../yaak-worktrees/bugfix-login`
-- `git worktree add ../yaak-worktrees/refactor-api`
-
-## Automatic Setup After Checkout
-
-Project git hooks automatically:
-1. Create `.env.local` with unique `YAAK_DEV_PORT` and `YAAK_PLUGIN_MCP_SERVER_PORT`
-2. Copy gitignored editor config folders
-3. Run `npm install && npm run bootstrap`
-
-## Remove Worktree
-
-`git worktree remove ../yaak-worktrees/<NAME>`
-
-## Port Pattern
-
-- Main worktree: Vite `1420`, MCP `64343`
-- First extra worktree: `1421`, `64344`
-- Second extra worktree: `1422`, `64345`
-- Continue incrementally for additional worktrees

.codex/skills/yaak-changelog/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: yaak-changelog
+description: Create or edit Yaak changelogs. Beta and draft prerelease changelogs live only in the GitHub release body; stable release changelogs live in `src/content/changelog/YYYYMMDD_VERSION/`. Use when Codex needs to update a beta GitHub release body, generate a stable website changelog from beta releases, update `_release.yaml` or `_intro.md`, expand major entries into markdown files, or preserve Yaak's changelog writing style.
+---
+
+# Yaak Changelog
+
+Use this skill to create Yaak changelogs in the correct place:
+
+- Beta or draft prerelease changelogs live only on the GitHub release.
+- Stable release changelogs live in website files under `src/content/changelog/YYYYMMDD_VERSION/`.
+
+## Workflow
+
+1. Identify the target release.
+- If the target tag contains `-beta` or the GitHub release is a draft prerelease, update the GitHub release body only. Do not create or edit `src/content/changelog/` files for beta releases.
+- For a new stable changelog, gather all beta release notes for that version since the previous stable release, then create or edit website changelog files.
+- Prefer `gh api` or GitHub release pages. If network access is restricted, request permission before querying GitHub.
+- Extract PR numbers and `yaak.app/feedback` URLs while fetching. If most bullets do not include PR references, fetch again with a more specific prompt.
+- Fetch PR authors when generating or revising release notes. Include contributor attribution for non-`@gschier` PR authors.
+
+2. Parse release bullets.
+- Treat each release-note bullet as one changelog entry.
+- Skip dependency-only, generated, build-only, test-only, CI-only, and internal maintenance bullets unless they have a clear user-facing impact that can be described in user terms.
+- For stable website changelogs, skip bullets prefixed with `[beta-only]`.
+- Preserve the entry wording closely. Remove wrapping quotes from titles.
+- Map categories to `feature`, `fix`, `improvement`, or `breaking`.
+- Convert `#NNN` into `https://github.com/mountain-loop/yaak/pull/NNN`.
+
+3. For beta or draft prerelease changelogs, update the GitHub release.
+- Keep the changelog in the GitHub release body. Do not create a website changelog directory.
+- Do not add a changelog badge or link to `yaak.app/changelog/VERSION` for beta releases.
+- Prefer concise bullets with PR links and feedback links when available.
+- When a bullet has a feedback URL, wrap the changelog item text itself in the feedback link, then put the PR link after it. Example: `- [Fixed request history timestamps](https://yaak.app/feedback/posts/request-history-time-stamp) in [#492](https://github.com/mountain-loop/yaak/pull/492)`.
+- Append `by [@handle](https://github.com/handle)` to PR-backed bullets authored by external contributors. Do not append `by @gschier` for `@gschier` PRs.
+- Include a `**Full Changelog**` comparison link using the previous beta tag when it exists, or the previous stable tag for `beta.1`.
+- Use `gh release edit TAG --repo mountain-loop/yaak --notes-file ...` or the GitHub release API to update the draft/prerelease body.
+- Stop after verifying the GitHub release body. The website checks below do not apply.
+
+4. For stable website changelogs, create or edit the release directory.
+- Path format: `src/content/changelog/YYYYMMDD_VERSION/`.
+- For a new release, use today's date for `YYYYMMDD`.
+- For an existing release, keep the original directory date.
+- Do not create changelog directories for beta releases.
+
+5. Write `_release.yaml`.
+- Include `draft`, optional `title`, `summary`, `image`, `youtube`, and `entries`.
+- Keep minor items as quick entries without `content`.
+- Use `content` only when an entry needs its own markdown section.
+
+```yaml
+title: "What's New in 2026.1.0"
+summary: "Brief overview of the most important additions and fixes"
+draft: true
+entries:
+  - title: "Request debugging"
+    category: feature
+    pr: "https://github.com/mountain-loop/yaak/pull/123"
+    feedback: "https://feedback.yaak.app/p/request-debugging"
+    content: "request-debugging.md"
+  - title: "Fix broken cookie clearing"
+    category: fix
+    pr: "https://github.com/mountain-loop/yaak/pull/124"
+```
+
+6. Expand major entries.
+- Expand 3 to 6 major items when enough context exists.
+- Create slugified markdown files and reference them with `content`.
+- Read the related PR before writing expanded content.
+- Add emoji prefixes only for expanded entry titles if it helps distinguish major sections.
+
+7. Handle images.
+- Reuse screenshots from PRs when they exist.
+- Convert GitHub private attachment URLs to `https://github.com/user-attachments/assets/UUID` before upload.
+- Upload with `go run cmd/yaakadmin/main.go upload "URL"` when the environment permits it.
+- If no real image is available, use a placeholder with real alt text and a caption.
+
+8. Write `_intro.md`.
+- Add a short overview paragraph at the top of the release.
+- Focus on the major themes across the release instead of repeating every bullet.
+
+9. Follow Yaak writing style.
+- Be direct and factual. Avoid hype.
+- State what changed and how to use it.
+- Keep paragraphs short.
+- Use backticks for code symbols, settings, and literal values.
+- Use bold sparingly for the most important phrase in a section.
+
+## File Rules
+
+- Beta releases must not create or edit files in `src/content/changelog/`.
+- Main files are `_release.yaml` and optional `_intro.md`.
+- Expanded entry files are regular markdown files such as `request-debugging.md`.
+- `entries[].content` must match an existing markdown filename in the same directory.
+- Images for changelog pages live under `static/changelog/VERSION/` when committed to the repo.
+
+## Checks
+
+- For beta releases, verify `gh release view TAG --repo mountain-loop/yaak --json body,tagName,isDraft,isPrerelease` and ensure no website changelog files were created.
+- For beta releases, verify feedback-backed bullets use the feedback URL as the link target for the whole item text, not as a separate trailing `Feedback:` link.
+- For stable releases, ensure each user-facing source bullet becomes exactly one changelog entry unless it is `[beta-only]` or dependency-only/internal maintenance.
+- Ensure most entries include `pr` when the source release notes provide one.
+- For stable releases, ensure every referenced `content` file exists.
+- If the user wants stable website verification, run the site and inspect `/changelog/VERSION` and `/rss.xml`.

.codex/skills/yaak-changelog/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Yaak Changelog"
+  short_description: "Generate Yaak changelog releases"
+  default_prompt: "Use $yaak-changelog to create or update a Yaak changelog release from GitHub release notes."
+
+policy:
+  allow_implicit_invocation: true

.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+**/node_modules
+dist
+**/dist
+target
+**/target
+.claude
+vendored
+**/vendored
+*.log
+.git

.gitattributes

@@ -1,7 +1,8 @@
-crates-tauri/yaak-app/vendored/**/* linguist-generated=true
-crates-tauri/yaak-app/gen/schemas/**/* linguist-generated=true
+crates-tauri/yaak-app-client/vendored/**/* linguist-generated=true
+crates-tauri/yaak-app-client/gen/schemas/**/* linguist-generated=true
 **/bindings/* linguist-generated=true
 crates/yaak-templates/pkg/* linguist-generated=true
 
 # Ensure consistent line endings for test files that check exact content
 crates/yaak-http/tests/test.txt text eol=lf
+crates-proxy/yaak-proxy-lib/tests/fixtures/export.har text eol=lf

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/dependabot.yml

@@ -0,0 +1,55 @@
+version: 2
+
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    ignore:
+      # Build tooling majors are opted into, not queued. These never reach a
+      # user, so the cost of being a release behind is low and the cost of a
+      # surprise is a broken build. Note this also suppresses security PRs for
+      # these, so Dependabot alerts are the backstop.
+      - dependency-name: typescript
+        update-types: ["version-update:semver-major"]
+      - dependency-name: vitest
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "@types/*"
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "vite-plugin-*"
+        update-types: ["version-update:semver-major"]
+      # 0.8 dropped stateExtensions and updateSchema from the package root and
+      # exposes no subpath to reach them, which GrpcEditor needs. Unpin once
+      # that editor moves to the jsonSchema helper.
+      - dependency-name: codemirror-json-schema
+    groups:
+      npm-production:
+        dependency-type: production
+        update-types:
+          - minor
+          - patch
+      npm-development:
+        dependency-type: development
+        update-types:
+          - minor
+          - patch
+
+  - package-ecosystem: cargo
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    ignore:
+      # Held at 11.10.0 to pin what rolldown_resolver ("^11") resolves to; it
+      # does not build against 11.11. See crates-cli/yaak-cli/Cargo.toml.
+      - dependency-name: oxc_resolver
+    groups:
+      cargo:
+        patterns:
+          - "*"
+        update-types:
+          - minor
+          - patch

.github/pull_request_template.md

@@ -4,13 +4,17 @@
 
 ## Submission
 
-- [ ] This PR is a bug fix or small-scope improvement.
-- [ ] If this PR is not a bug fix or small-scope improvement, I linked an approved feedback item below.
+<!-- Check every box below except at most one of the first two (bug fixes only need the first). The last two must be checked even when they do not apply — checking confirms you considered them. -->
+
+- [ ] This PR is a bug fix.
+- [ ] If this PR is not a bug fix, I linked the feedback item where @gschier explicitly gave me permission to work on it.
 - [ ] I have read and followed [`CONTRIBUTING.md`](CONTRIBUTING.md).
 - [ ] I tested this change locally.
-- [ ] I added or updated tests when reasonable.
+- [ ] I added or updated tests, or tests are not reasonable for this change.
+- [ ] I added screenshots or recordings, or this change does not affect the UI.
+
+Explicit permission feedback item (required if not a bug fix):
 
-Approved feedback item (required if not a bug fix or small-scope improvement):
 <!-- https://yaak.app/feedback/... -->
 
 ## Related

.github/scripts/check-contribution-policy.js

@@ -0,0 +1,881 @@
+const fs = require("node:fs");
+
+const COMMENT_MARKER = "<!-- yaak-contribution-policy -->";
+
+const MAINTAINER_LOGINS = new Set(["gschier"]);
+const MAINTAINER_ASSOCIATIONS = new Set(["OWNER", "MEMBER", "COLLABORATOR"]);
+const MAINTAINER_PERMISSIONS = new Set(["admin", "maintain", "write"]);
+const REVIEWER_LOGIN = "gschier";
+
+const LARGE_DIFF_CHANGED_FILES = 20;
+const LARGE_DIFF_CHANGED_LINES = 800;
+const SUMMARY_TITLE_MAX_LENGTH = 80;
+const MIN_AUTOMATIC_PR_NUMBER = 494;
+
+const LABELS = {
+  inScope: {
+    name: "contribution: in scope",
+    color: "0E8A16",
+    description: "Community PR appears to be in scope for maintainer review.",
+  },
+  outOfScope: {
+    name: "contribution: out of scope",
+    color: "B60205",
+    description: "Community PR does not match Yaak's contribution policy.",
+  },
+  explicitPermission: {
+    name: "contribution: explicit permission",
+    color: "5319E7",
+    description:
+      "Community PR links feedback where @gschier explicitly allowed the work.",
+  },
+  missingTemplate: {
+    name: "contribution: missing template",
+    color: "D93F0B",
+    description:
+      "Community PR is missing enough of the pull request template to review.",
+  },
+  policyUnmet: {
+    name: "contribution: policy unmet",
+    color: "B60205",
+    description:
+      "Community PR does not currently satisfy the contribution policy.",
+  },
+  needsScopeReview: {
+    name: "contribution: needs scope review",
+    color: "FBCA04",
+    description:
+      "Community PR may be broader than Yaak's bug-fix contribution policy.",
+  },
+};
+
+const MANAGED_LABEL_NAMES = [
+  ...new Set(Object.values(LABELS).map((label) => label.name)),
+];
+
+// Each checkbox lists its current label first, followed by legacy labels still
+// accepted from PRs opened against older versions of the template.
+const CHECKBOXES = {
+  bugFix: ["This PR is a bug fix."],
+  explicitPermission: [
+    "If this PR is not a bug fix, I linked the feedback item where @gschier explicitly gave me permission to work on it.",
+  ],
+  readContributing: [
+    "I have read and followed [`CONTRIBUTING.md`](CONTRIBUTING.md).",
+  ],
+  testedLocally: ["I tested this change locally."],
+  testsUpdated: [
+    "I added or updated tests, or tests are not reasonable for this change.",
+    "I added or updated tests when reasonable.",
+  ],
+  screenshotsAdded: [
+    "I added screenshots or recordings, or this change does not affect the UI.",
+    "I added screenshots or recordings for UI changes when reasonable.",
+  ],
+};
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function normalizeBody(body) {
+  return (body || "").replace(/\r\n/g, "\n");
+}
+
+function stripComments(value) {
+  return value.replace(/<!--[\s\S]*?-->/g, "").trim();
+}
+
+function getSection(body, heading) {
+  const pattern = new RegExp(`^##\\s+${escapeRegExp(heading)}\\s*$`, "gim");
+  const match = pattern.exec(body);
+
+  if (match == null) {
+    return null;
+  }
+
+  const rest = body.slice(match.index + match[0].length);
+  const nextHeadingIndex = rest.search(/^##\s+/m);
+  return nextHeadingIndex === -1 ? rest : rest.slice(0, nextHeadingIndex);
+}
+
+function hasMeaningfulText(value) {
+  return stripComments(value || "").length > 0;
+}
+
+function normalizeCheckboxLabel(label) {
+  return label
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/`/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function checkboxState(body, labels) {
+  const expectedLabels = new Set(labels.map(normalizeCheckboxLabel));
+
+  for (const line of body.split("\n")) {
+    const match = line.match(/^\s*[-*]\s*\[([ xX])\]\s*(.*?)\s*$/i);
+
+    if (match == null) {
+      continue;
+    }
+
+    if (expectedLabels.has(normalizeCheckboxLabel(match[2]))) {
+      return match[1].toLowerCase() === "x";
+    }
+  }
+
+  return null;
+}
+
+function findFeedbackUrl(body) {
+  return (
+    body.match(
+      /https?:\/\/(?:www\.)?(?:yaak\.app\/feedback|feedback\.yaak\.app)\/[^\s)>\]]+/i,
+    )?.[0] ?? null
+  );
+}
+
+function getLabelNames(pr) {
+  return new Set((pr.labels || []).map((label) => label.name));
+}
+
+function analyzePullRequest(pr) {
+  const body = normalizeBody(pr.body);
+  const labelNames = getLabelNames(pr);
+  const states = Object.fromEntries(
+    Object.entries(CHECKBOXES).map(([key, label]) => [
+      key,
+      checkboxState(body, label),
+    ]),
+  );
+  const sectionCount = ["Summary", "Submission", "Related"].filter(
+    (heading) => getSection(body, heading) != null,
+  ).length;
+  const checkboxCount = Object.values(states).filter(
+    (state) => state != null,
+  ).length;
+  const templateUsed = sectionCount >= 2 && checkboxCount >= 3;
+  const blockers = [];
+  const totalChangedLines =
+    Number(pr.additions || 0) + Number(pr.deletions || 0);
+  const changedFiles = Number(pr.changed_files || 0);
+  const largeDiff =
+    changedFiles > LARGE_DIFF_CHANGED_FILES ||
+    totalChangedLines > LARGE_DIFF_CHANGED_LINES;
+
+  if (labelNames.has(LABELS.outOfScope.name)) {
+    return {
+      blockers: [
+        {
+          label: LABELS.outOfScope.name,
+          message: "Marked out of scope by maintainer label.",
+        },
+      ],
+      changedFiles,
+      desiredLabels: [LABELS.outOfScope.name],
+      largeDiff,
+      status: "out_of_scope",
+      templateUsed,
+      totalChangedLines,
+    };
+  }
+
+  if (labelNames.has(LABELS.inScope.name)) {
+    return {
+      blockers: [],
+      changedFiles,
+      desiredLabels: [LABELS.inScope.name],
+      largeDiff,
+      status: "in_scope",
+      templateUsed,
+      totalChangedLines,
+    };
+  }
+
+  if (labelNames.has(LABELS.explicitPermission.name)) {
+    return {
+      blockers: [],
+      changedFiles,
+      desiredLabels: [LABELS.explicitPermission.name],
+      largeDiff,
+      status: "in_scope",
+      templateUsed,
+      totalChangedLines,
+    };
+  }
+
+  if (!templateUsed) {
+    blockers.push({
+      label: LABELS.missingTemplate.name,
+      message:
+        "Update the PR description with the repository pull request template.",
+    });
+  } else {
+    const summary = getSection(body, "Summary");
+    const hasSummary = hasMeaningfulText(summary);
+    const feedbackUrl = findFeedbackUrl(body);
+    const bugFix = states.bugFix === true;
+    const explicitPermission = states.explicitPermission === true;
+
+    if (!hasSummary) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message:
+          "Add a short summary describing the bug fix or permitted change.",
+      });
+    }
+
+    if (bugFix && explicitPermission) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message:
+          "Choose either the bug-fix checkbox or the explicit-permission checkbox, not both.",
+      });
+    } else if (!bugFix && !explicitPermission) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message:
+          "Check whether this is a bug fix, or confirm that explicit permission from @gschier is linked.",
+      });
+    } else if (explicitPermission && feedbackUrl == null) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message:
+          "Link the feedback item where @gschier explicitly gave you permission to work on this.",
+      });
+    }
+
+    if (states.readContributing !== true) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message: "Confirm that `CONTRIBUTING.md` was read and followed.",
+      });
+    }
+
+    if (states.testedLocally !== true) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message: "Confirm that the change was tested locally.",
+      });
+    }
+
+    if (states.testsUpdated !== true) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message:
+          "Confirm that tests were added or updated, or that tests are not reasonable for this change. Check the box either way.",
+      });
+    }
+
+    if (states.screenshotsAdded !== true) {
+      blockers.push({
+        label: LABELS.policyUnmet.name,
+        message:
+          "Confirm that screenshots or recordings were added, or that this change does not affect the UI. Check the box either way.",
+      });
+    }
+  }
+
+  const desiredLabels = new Set();
+
+  if (blockers.length === 0) {
+    desiredLabels.add(
+      largeDiff
+        ? LABELS.needsScopeReview.name
+        : states.explicitPermission
+          ? LABELS.explicitPermission.name
+          : LABELS.inScope.name,
+    );
+  } else if (
+    blockers.some((blocker) => blocker.label === LABELS.missingTemplate.name)
+  ) {
+    desiredLabels.add(LABELS.missingTemplate.name);
+  } else {
+    desiredLabels.add(LABELS.policyUnmet.name);
+  }
+
+  return {
+    blockers,
+    changedFiles,
+    desiredLabels: [...desiredLabels],
+    largeDiff,
+    status: blockers.length === 0 ? "in_scope" : "blocked",
+    templateUsed,
+    totalChangedLines,
+  };
+}
+
+function buildBlockingComment(analysis) {
+  const lines = [
+    COMMENT_MARKER,
+    "Thanks for the PR. Yaak currently accepts community PRs for bug fixes, plus larger changes that link a feedback item where @gschier explicitly gave permission to work on it.",
+    "",
+    "This PR cannot be accepted yet because the following contribution policy requirements were unmet:",
+    "",
+    ...analysis.blockers.map((blocker) => `- ${blocker.message}`),
+  ];
+
+  if (!analysis.templateUsed) {
+    lines.push(
+      "",
+      "You can copy this template into the PR description and keep any existing context that is still useful.",
+      "",
+      "<details>",
+      "<summary>PR description template</summary>",
+      "",
+      "```md",
+      getPullRequestTemplate(),
+      "```",
+      "",
+      "</details>",
+    );
+  }
+
+  if (analysis.largeDiff) {
+    lines.push(
+      "",
+      `This PR also changes ${analysis.changedFiles} files and ${analysis.totalChangedLines} lines, so it has been labeled as needing scope review. That label is advisory, but maintainers may ask for the scope to be reduced.`,
+    );
+  }
+
+  return lines.join("\n");
+}
+
+function getPullRequestTemplate() {
+  return fs.readFileSync(".github/pull_request_template.md", "utf8").trim();
+}
+
+function buildInScopeComment() {
+  return [
+    COMMENT_MARKER,
+    "Thanks for the PR. This appears to match Yaak's contribution policy and is awaiting review by @gschier.",
+    "",
+    "This only means the PR is in scope for review. It does not mean the change has been reviewed or accepted for merge.",
+  ].join("\n");
+}
+
+function buildOutOfScopeComment() {
+  return [
+    COMMENT_MARKER,
+    "Thanks for the PR. This does not appear to match Yaak's current contribution policy.",
+    "",
+    "Yaak currently accepts community PRs for bug fixes, or changes tied to a feedback item where @gschier explicitly gave permission to work on it.",
+    "",
+    "If this PR is tied to a feedback item where @gschier explicitly gave permission, please link it in the PR description.",
+  ].join("\n");
+}
+
+function buildPolicyComment(analysis) {
+  if (analysis.status === "out_of_scope") {
+    return buildOutOfScopeComment();
+  }
+
+  if (analysis.blockers.length > 0) {
+    return buildBlockingComment(analysis);
+  }
+
+  return buildInScopeComment();
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function truncateTitle(title) {
+  if (title.length <= SUMMARY_TITLE_MAX_LENGTH) {
+    return title;
+  }
+
+  return `${title.slice(0, SUMMARY_TITLE_MAX_LENGTH - 3).trimEnd()}...`;
+}
+
+function escapeTableText(value) {
+  return escapeHtml(value).replace(/\n/g, "<br>");
+}
+
+function summarizeResult({ pr, analysis, skipped, skipReason }) {
+  const comment =
+    analysis == null
+      ? "None"
+      : buildPolicyComment(analysis).replace(COMMENT_MARKER, "").trim();
+  const summary = {
+    blocked: analysis?.blockers.length > 0,
+    comment,
+    details: "None",
+    labels:
+      analysis?.desiredLabels.length > 0
+        ? analysis.desiredLabels.join(", ")
+        : "None",
+    number: pr.number,
+    prLink: `<a href="${escapeHtml(pr.html_url)}">#${pr.number}</a>`,
+    status: "In scope",
+    title: escapeHtml(truncateTitle(pr.title)),
+  };
+
+  if (skipped) {
+    return {
+      ...summary,
+      blocked: false,
+      comment: "None",
+      details: escapeHtml(skipReason),
+      labels: "None",
+      status: "Skipped",
+    };
+  }
+
+  if (summary.blocked) {
+    return {
+      ...summary,
+      comment: escapeTableText(summary.comment),
+      details: escapeHtml(
+        analysis.blockers.map((blocker) => blocker.message).join("; "),
+      ),
+      labels: escapeHtml(summary.labels),
+      status: analysis.status === "out_of_scope" ? "Out of scope" : "Blocked",
+    };
+  }
+
+  return {
+    ...summary,
+    comment: escapeTableText(summary.comment),
+    labels: escapeHtml(summary.labels),
+  };
+}
+
+async function isOfficialMaintainer({ github, owner, repo, pr }) {
+  if (MAINTAINER_LOGINS.has(pr.user.login)) {
+    return true;
+  }
+
+  if (MAINTAINER_ASSOCIATIONS.has(pr.author_association)) {
+    return true;
+  }
+
+  try {
+    const response = await github.rest.repos.getCollaboratorPermissionLevel({
+      owner,
+      repo,
+      username: pr.user.login,
+    });
+
+    return MAINTAINER_PERMISSIONS.has(response.data.permission);
+  } catch (error) {
+    if (error.status === 404) {
+      return false;
+    }
+
+    throw error;
+  }
+}
+
+async function ensureManagedLabels({ github, owner, repo }) {
+  for (const label of Object.values(LABELS)) {
+    try {
+      await github.rest.issues.getLabel({
+        owner,
+        repo,
+        name: label.name,
+      });
+    } catch (error) {
+      if (error.status !== 404) {
+        throw error;
+      }
+
+      await github.rest.issues.createLabel({
+        owner,
+        repo,
+        name: label.name,
+        color: label.color,
+        description: label.description,
+      });
+    }
+  }
+}
+
+async function syncLabels({ github, owner, repo, issueNumber, desiredLabels }) {
+  const desired = new Set(desiredLabels);
+
+  await ensureManagedLabels({ github, owner, repo });
+
+  for (const labelName of MANAGED_LABEL_NAMES) {
+    if (desired.has(labelName)) {
+      continue;
+    }
+
+    try {
+      await github.rest.issues.removeLabel({
+        owner,
+        repo,
+        issue_number: issueNumber,
+        name: labelName,
+      });
+    } catch (error) {
+      if (error.status !== 404) {
+        throw error;
+      }
+    }
+  }
+
+  if (desired.size > 0) {
+    await github.rest.issues.addLabels({
+      owner,
+      repo,
+      issue_number: issueNumber,
+      labels: [...desired],
+    });
+  }
+}
+
+async function findPolicyComment({ github, owner, repo, issueNumber }) {
+  const comments = await github.paginate(github.rest.issues.listComments, {
+    owner,
+    repo,
+    issue_number: issueNumber,
+    per_page: 100,
+  });
+
+  return comments.find(
+    (comment) =>
+      comment.user.type === "Bot" && comment.body?.includes(COMMENT_MARKER),
+  );
+}
+
+async function upsertPolicyComment({ github, owner, repo, issueNumber, body }) {
+  const existingComment = await findPolicyComment({
+    github,
+    owner,
+    repo,
+    issueNumber,
+  });
+
+  if (existingComment == null) {
+    await github.rest.issues.createComment({
+      owner,
+      repo,
+      issue_number: issueNumber,
+      body,
+    });
+    return;
+  }
+
+  await github.rest.issues.updateComment({
+    owner,
+    repo,
+    comment_id: existingComment.id,
+    body,
+  });
+}
+
+async function deletePolicyComment({ github, owner, repo, issueNumber }) {
+  const existingComment = await findPolicyComment({
+    github,
+    owner,
+    repo,
+    issueNumber,
+  });
+
+  if (existingComment == null) {
+    return;
+  }
+
+  await github.rest.issues.deleteComment({
+    owner,
+    repo,
+    comment_id: existingComment.id,
+  });
+}
+
+async function requestMaintainerReview({ github, owner, repo, pr }) {
+  if (pr.user.login === REVIEWER_LOGIN) {
+    return;
+  }
+
+  try {
+    await github.rest.pulls.requestReviewers({
+      owner,
+      repo,
+      pull_number: pr.number,
+      reviewers: [REVIEWER_LOGIN],
+    });
+  } catch (error) {
+    if (error.status === 422) {
+      return;
+    }
+
+    throw error;
+  }
+}
+
+async function checkPullRequest({
+  github,
+  core,
+  owner,
+  repo,
+  pullNumber,
+  dryRun,
+  minimumAutomaticPullNumber,
+}) {
+  const response = await github.rest.pulls.get({
+    owner,
+    repo,
+    pull_number: pullNumber,
+  });
+  const pr = response.data;
+  const issueNumber = pr.number;
+
+  if (pr.user.type === "Bot") {
+    core.notice(
+      `Skipping contribution policy for bot PR #${pr.number} from @${pr.user.login}.`,
+    );
+    return {
+      blocked: false,
+      number: pr.number,
+      summary: summarizeResult({
+        pr,
+        skipped: true,
+        skipReason: `bot @${pr.user.login}`,
+      }),
+      skipped: true,
+    };
+  }
+
+  if (
+    minimumAutomaticPullNumber != null &&
+    pr.number < minimumAutomaticPullNumber
+  ) {
+    core.notice(
+      `Skipping contribution policy for PR #${pr.number} because automatic checks start at PR #${minimumAutomaticPullNumber}.`,
+    );
+    return {
+      blocked: false,
+      number: pr.number,
+      summary: summarizeResult({
+        pr,
+        skipped: true,
+        skipReason: `before automatic rollout PR #${minimumAutomaticPullNumber}`,
+      }),
+      skipped: true,
+    };
+  }
+
+  if (pr.draft) {
+    core.notice(`Skipping contribution policy for draft PR #${pr.number}.`);
+    return {
+      blocked: false,
+      number: pr.number,
+      summary: summarizeResult({
+        pr,
+        skipped: true,
+        skipReason: "draft",
+      }),
+      skipped: true,
+    };
+  }
+
+  if (await isOfficialMaintainer({ github, owner, repo, pr })) {
+    core.notice(
+      `Skipping contribution policy for maintainer PR #${pr.number} from @${pr.user.login}.`,
+    );
+    if (!dryRun) {
+      await syncLabels({ github, owner, repo, issueNumber, desiredLabels: [] });
+      await deletePolicyComment({ github, owner, repo, issueNumber });
+    }
+    return {
+      blocked: false,
+      number: pr.number,
+      summary: summarizeResult({
+        pr,
+        skipped: true,
+        skipReason: `maintainer @${pr.user.login}`,
+      }),
+      skipped: true,
+    };
+  }
+
+  const analysis = analyzePullRequest(pr);
+
+  if (dryRun) {
+    const summary = summarizeResult({ pr, analysis });
+    core.notice(
+      `[dry-run] PR #${summary.number}: ${summary.status}; labels: ${summary.labels}; details: ${summary.details}`,
+    );
+    return {
+      blocked: analysis.blockers.length > 0,
+      number: pr.number,
+      summary,
+      skipped: false,
+    };
+  }
+
+  await syncLabels({
+    github,
+    owner,
+    repo,
+    issueNumber,
+    desiredLabels: analysis.desiredLabels,
+  });
+
+  if (analysis.blockers.length > 0) {
+    await upsertPolicyComment({
+      github,
+      owner,
+      repo,
+      issueNumber,
+      body: buildPolicyComment(analysis),
+    });
+    return {
+      blocked: true,
+      number: pr.number,
+      summary: summarizeResult({ pr, analysis }),
+      skipped: false,
+    };
+  }
+
+  await upsertPolicyComment({
+    github,
+    owner,
+    repo,
+    issueNumber,
+    body: buildPolicyComment(analysis),
+  });
+  await requestMaintainerReview({ github, owner, repo, pr });
+  core.notice(`Contribution policy check passed for PR #${pr.number}.`);
+  return {
+    blocked: false,
+    number: pr.number,
+    summary: summarizeResult({ pr, analysis }),
+    skipped: false,
+  };
+}
+
+async function listOpenPullRequests({ github, owner, repo }) {
+  return github.paginate(github.rest.pulls.list, {
+    owner,
+    repo,
+    state: "open",
+    per_page: 100,
+  });
+}
+
+function getManualPullRequestNumbers({ context, core }) {
+  const value = String(context.payload.inputs?.pr || "all").trim();
+
+  if (value.toLowerCase() === "all") {
+    return null;
+  }
+
+  const pullNumber = Number(value);
+
+  if (!Number.isInteger(pullNumber) || pullNumber <= 0) {
+    core.setFailed('The "pr" input must be "all" or a positive PR number.');
+    return [];
+  }
+
+  return [pullNumber];
+}
+
+async function run({ github, context, core }) {
+  const { owner, repo } = context.repo;
+  const payloadPr = context.payload.pull_request;
+  const dryRunInput = context.payload.inputs?.dry_run;
+  const dryRun =
+    context.eventName === "workflow_dispatch" &&
+    dryRunInput !== false &&
+    dryRunInput !== "false";
+  const minimumAutomaticPullNumber =
+    payloadPr == null ? null : MIN_AUTOMATIC_PR_NUMBER;
+  let pullNumbers;
+
+  if (payloadPr != null) {
+    pullNumbers = [payloadPr.number];
+  } else {
+    pullNumbers = getManualPullRequestNumbers({ context, core });
+  }
+
+  if (pullNumbers?.length === 0) {
+    return;
+  }
+
+  const pullRequests =
+    pullNumbers == null
+      ? await listOpenPullRequests({ github, owner, repo })
+      : pullNumbers.map((number) => ({ number }));
+  const results = [];
+
+  if (dryRun) {
+    core.notice(
+      `Running contribution policy in dry-run mode for ${
+        pullNumbers == null
+          ? "all open PRs"
+          : pullNumbers.map((number) => `#${number}`).join(", ")
+      }.`,
+    );
+  }
+
+  for (const pr of pullRequests) {
+    results.push(
+      await checkPullRequest({
+        github,
+        core,
+        owner,
+        repo,
+        pullNumber: pr.number,
+        dryRun,
+        minimumAutomaticPullNumber,
+      }),
+    );
+  }
+
+  await core.summary
+    .addHeading(`Contribution Policy ${dryRun ? "Dry Run" : "Results"}`)
+    .addTable([
+      [
+        { data: "PR", header: true },
+        { data: "Title", header: true },
+        { data: "Status", header: true },
+        { data: "Labels", header: true },
+        { data: "Details", header: true },
+        { data: "Comment", header: true },
+      ],
+      ...results.map((result) => [
+        result.summary.prLink,
+        result.summary.title,
+        result.summary.status,
+        result.summary.labels,
+        result.summary.details,
+        result.summary.comment,
+      ]),
+    ])
+    .write();
+
+  const blockedPullRequests = results.filter((result) => result.blocked);
+
+  if (blockedPullRequests.length > 0) {
+    if (dryRun) {
+      core.warning(
+        `Dry run found contribution policy failures for PR(s): ${blockedPullRequests
+          .map((result) => `#${result.number}`)
+          .join(", ")}`,
+      );
+      return;
+    }
+
+    core.setFailed(
+      `Contribution policy failed for PR(s): ${blockedPullRequests
+        .map((result) => `#${result.number}`)
+        .join(", ")}`,
+    );
+  }
+}
+
+module.exports = {
+  analyzePullRequest,
+  run,
+};

.github/scripts/preserve-release-artifacts.mjs

@@ -0,0 +1,79 @@
+// Retain only distributable bundle files, never the target tree or signing material.
+import { createHash } from "node:crypto";
+import {
+  copyFileSync,
+  createReadStream,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  writeFileSync,
+} from "node:fs";
+import { join, relative } from "node:path";
+
+const env = process.env;
+const bundle = join("target", env.RELEASE_TARGET || "", "release", "bundle");
+const destination = join(env.RUNNER_TEMP, "yaak-release-artifacts");
+const extensions =
+  /\.(dmg|deb|rpm|AppImage|exe|msi|app\.tar\.gz|AppImage\.tar\.gz|nsis\.zip|msi\.zip)(\.sig)?$/;
+const files = [];
+
+function snapshot(directory) {
+  if (!existsSync(directory)) return;
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const source = join(directory, entry.name);
+    // Only descend through the bundler's immediate output folders. This excludes
+    // .app trees and the extracted CEF deb contents (which contain executables).
+    if (entry.isDirectory() && directory === bundle) {
+      snapshot(source);
+    } else if (
+      entry.isFile() &&
+      (extensions.test(entry.name) || /^yaak-cef_.*_linux_.*\.tar\.gz$/.test(entry.name))
+    ) {
+      // Match tauri-action's default macOS updater asset naming exactly.
+      const arch = env.RELEASE_ARCH === "arm64" ? "aarch64" : "x64";
+      const assetName = entry.name.replace(/\.app\.tar\.gz(\.sig)?$/, `_${arch}.app.tar.gz$1`);
+      mkdirSync(destination, { recursive: true });
+      const retained = join(destination, assetName);
+      // The second snapshot must not overwrite the original user installer/signature.
+      if (!existsSync(retained)) copyFileSync(source, retained);
+      files.push({ source: relative(".", source), assetName });
+    }
+  }
+}
+
+snapshot(bundle);
+if (existsSync(destination)) {
+  const assets = readdirSync(destination)
+    .filter((name) => name !== "provenance.json")
+    .sort();
+  const checksums = [];
+  for (const assetName of assets) {
+    const hash = createHash("sha256");
+    for await (const chunk of createReadStream(join(destination, assetName))) hash.update(chunk);
+    checksums.push({ assetName, sha256: hash.digest("hex") });
+  }
+  writeFileSync(
+    join(destination, "provenance.json"),
+    JSON.stringify(
+      {
+        repository: env.GITHUB_REPOSITORY,
+        tag: env.GITHUB_REF_NAME,
+        sha: env.GITHUB_SHA,
+        runId: env.GITHUB_RUN_ID,
+        runAttempt: env.GITHUB_RUN_ATTEMPT,
+        workflowRef: env.GITHUB_WORKFLOW_REF,
+        workflowSha: env.GITHUB_WORKFLOW_SHA,
+        tauriAction: "tauri-apps/tauri-action@v0",
+        platform: env.RELEASE_PLATFORM,
+        runtime: env.RELEASE_RUNTIME,
+        arch: env.RELEASE_ARCH,
+        target: env.RELEASE_TARGET,
+        args: env.RELEASE_ARGS,
+        assets: checksums,
+      },
+      null,
+      2,
+    ) + "\n",
+  );
+}
+console.log(`Found ${files.length} distributable bundle files in ${bundle}`);

.github/workflows/ci.yml

@@ -14,17 +14,50 @@ jobs:
     runs-on: macos-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: voidzero-dev/setup-vp@v1
+        with:
+          node-version: "24"
+          cache: true
       - uses: dtolnay/rust-toolchain@stable
       - uses: Swatinem/rust-cache@v2
         with:
           shared-key: ci
           cache-on-failure: true
 
-      - run: npm ci
+      - run: vp install
       - run: npm run bootstrap
       - run: npm run lint
       - name: Run JS Tests
-        run: npm test
+        run: vp test
       - name: Run Rust Tests
-        run: cargo test --all
+        run: cargo test --all --features yaak-app-client/wry
+      - name: OpenAPI import round-trip
+        run: |
+          cargo build -p yaak-cli
+          node plugins/importer-openapi/tests/roundtrip.mjs
+
+  test-windows:
+    name: Rust Tests (Windows)
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: voidzero-dev/setup-vp@v1
+        with:
+          node-version: "24"
+          cache: true
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: Swatinem/rust-cache@v2
+        with:
+          shared-key: ci
+          cache-on-failure: true
+      - name: Install Protoc for plugin-runtime
+        uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: vp install
+      - run: npm run bootstrap
+        env:
+          YAAK_TARGET_ARCH: x64
+      - name: Run Rust Tests
+        run: cargo test --all --exclude yaak-cli --features yaak-app-client/wry

.github/workflows/claude.yml

@@ -1,50 +0,0 @@
-name: Claude Code
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_review_comment:
-    types: [created]
-  issues:
-    types: [opened, assigned]
-  pull_request_review:
-    types: [submitted]
-
-jobs:
-  claude:
-    if: |
-      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: read
-      issues: read
-      id-token: write
-      actions: read # Required for Claude to read CI results on PRs
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: Run Claude Code
-        id: claude
-        uses: anthropics/claude-code-action@v1
-        with:
-          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
-
-          # This is an optional setting that allows Claude to read CI results on PRs
-          additional_permissions: |
-            actions: read
-
-          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
-          # prompt: 'Update the pull request description to include a summary of changes.'
-
-          # Optional: Add claude_args to customize behavior and configuration
-          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
-          # or https://code.claude.com/docs/en/cli-reference for available options
-          # claude_args: '--allowed-tools Bash(gh pr:*)'
-

.github/workflows/contribution-policy.yml

@@ -0,0 +1,48 @@
+name: Contribution Policy
+
+on:
+  workflow_dispatch:
+    inputs:
+      pr:
+        description: PR number or all
+        required: true
+        default: all
+        type: string
+      dry_run:
+        description: Dry run
+        required: true
+        default: true
+        type: boolean
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - reopened
+      - synchronize
+      - ready_for_review
+      - labeled
+      - unlabeled
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  check:
+    if: github.repository == 'mountain-loop/yaak'
+    name: Check contribution policy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout policy script
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          fetch-depth: 1
+
+      - name: Check contribution policy
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { run } = require("./.github/scripts/check-contribution-policy.js");
+            await run({ github, context, core });

.github/workflows/flathub.yml

@@ -1,17 +1,21 @@
 name: Update Flathub
+
 on:
-  release:
-    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Release tag to publish to Flathub
+        required: true
+        type: string
 
 permissions:
   contents: read
 
 jobs:
   update-flathub:
+    if: github.repository == 'mountain-loop/yaak'
     name: Update Flathub manifest
     runs-on: ubuntu-latest
-    # Only run for stable releases (skip betas/pre-releases)
-    if: ${{ !github.event.release.prerelease }}
     steps:
       - name: Checkout app repo
         uses: actions/checkout@v4
@@ -31,7 +35,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
+          node-version: "24"
 
       - name: Install source generators
         run: |
@@ -39,7 +43,7 @@ jobs:
           git clone --depth 1 https://github.com/flatpak/flatpak-builder-tools flatpak/flatpak-builder-tools
 
       - name: Run update-manifest.sh
-        run: bash flatpak/update-manifest.sh "${{ github.event.release.tag_name }}" flathub-repo
+        run: bash flatpak/update-manifest.sh "${{ inputs.tag }}" flathub-repo
 
       - name: Commit and push to Flathub
         working-directory: flathub-repo
@@ -48,5 +52,5 @@ jobs:
           git config user.email "github-actions[bot]@users.noreply.github.com"
           git add -A
           git diff --cached --quiet && echo "No changes to commit" && exit 0
-          git commit -m "Update to ${{ github.event.release.tag_name }}"
+          git commit -m "Update to ${{ inputs.tag }}"
           git push

.github/workflows/release-api-npm.yml

@@ -0,0 +1,60 @@
+name: Release API to NPM
+
+on:
+  push:
+    tags: [yaak-api-*]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: API version to publish (for example 0.9.0 or v0.9.0)
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  publish-npm:
+    if: github.repository == 'mountain-loop/yaak'
+    name: Publish @yaakapp/api
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Set @yaakapp/api version
+        shell: bash
+        env:
+          WORKFLOW_VERSION: ${{ inputs.version }}
+        run: |
+          set -euo pipefail
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            VERSION="$WORKFLOW_VERSION"
+          else
+            VERSION="${GITHUB_REF_NAME#yaak-api-}"
+          fi
+          VERSION="${VERSION#v}"
+          echo "Preparing @yaakapp/api version: $VERSION"
+          cd packages/plugin-runtime-types
+          npm version "$VERSION" --no-git-tag-version --allow-same-version
+
+      - name: Build @yaakapp/api
+        working-directory: packages/plugin-runtime-types
+        run: npm run build
+
+      - name: Publish @yaakapp/api
+        working-directory: packages/plugin-runtime-types
+        run: npm publish --provenance --access public

.github/workflows/release-app.yml

@@ -0,0 +1,292 @@
+name: Release App Artifacts
+on:
+  push:
+    tags: [v*]
+
+jobs:
+  build-artifacts:
+    if: github.repository == 'mountain-loop/yaak'
+    permissions:
+      contents: write
+
+    name: Build
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: "macos-latest" # for Arm-based Macs (M1 and above).
+            args: '--target aarch64-apple-darwin --config ./tauri.release.conf.json --config ''{"build":{"features":["updater","license","wry"]}}'''
+            yaak_arch: "arm64"
+            os: "macos"
+            runtime: "wry"
+            targets: "aarch64-apple-darwin"
+          - platform: "macos-latest" # for Intel-based Macs.
+            args: '--target x86_64-apple-darwin --config ./tauri.release.conf.json --config ''{"build":{"features":["updater","license","wry"]}}'''
+            yaak_arch: "x64"
+            os: "macos"
+            runtime: "wry"
+            targets: "x86_64-apple-darwin"
+          - platform: "ubuntu-22.04"
+            args: '--config ./tauri.release.conf.json --config ''{"build":{"features":["updater","license","wry"]}}'''
+            yaak_arch: "x64"
+            os: "ubuntu"
+            runtime: "wry"
+            targets: ""
+          - platform: "ubuntu-22.04-arm"
+            args: '--config ./tauri.release.conf.json --config ''{"build":{"features":["updater","license","wry"]}}'''
+            yaak_arch: "arm64"
+            os: "ubuntu"
+            runtime: "wry"
+            targets: ""
+          - platform: "ubuntu-22.04"
+            args: >-
+              --bundles deb
+              --config ./tauri.release.conf.json
+              --config '{"productName":"yaak-cef","mainBinaryName":"yaak-cef","identifier":"app.yaak.desktop.cef","build":{"features":["license","cef"]},"bundle":{"createUpdaterArtifacts":false}}'
+            yaak_arch: "x64"
+            os: "ubuntu"
+            runtime: "cef"
+            targets: ""
+          - platform: "ubuntu-22.04-arm"
+            args: >-
+              --bundles deb
+              --config ./tauri.release.conf.json
+              --config '{"productName":"yaak-cef","mainBinaryName":"yaak-cef","identifier":"app.yaak.desktop.cef","build":{"features":["license","cef"]},"bundle":{"createUpdaterArtifacts":false}}'
+            yaak_arch: "arm64"
+            os: "ubuntu"
+            runtime: "cef"
+            targets: ""
+          - platform: "windows-latest"
+            args: '--config ./tauri.release.conf.json --config ''{"build":{"features":["updater","license","wry"]}}'''
+            yaak_arch: "x64"
+            os: "windows"
+            runtime: "wry"
+            targets: ""
+          # Windows ARM64
+          - platform: "windows-latest"
+            args: '--target aarch64-pc-windows-msvc --config ./tauri.release.conf.json --config ''{"build":{"features":["updater","license","wry"]}}'''
+            yaak_arch: "arm64"
+            os: "windows"
+            runtime: "wry"
+            targets: "aarch64-pc-windows-msvc"
+    runs-on: ${{ matrix.platform }}
+    timeout-minutes: 360
+    steps:
+      - name: Checkout yaakapp/app
+        uses: actions/checkout@v4
+
+      - name: Setup Vite+
+        uses: voidzero-dev/setup-vp@v1
+        with:
+          node-version: "24"
+          cache: true
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.targets }}
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          shared-key: ci
+          cache-on-failure: true
+
+      - name: Cache CEF (Linux only)
+        if: matrix.os == 'ubuntu' && matrix.runtime == 'cef'
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/tauri-cef
+          key: cef-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('Cargo.lock') }}
+
+      - name: install dependencies (Linux only)
+        if: matrix.os == 'ubuntu'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y cmake ninja-build libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libnss3 patchelf xdg-utils
+          # crates/yaak-wasm compiles SQLite to wasm via sqlite-wasm-rs, whose C shim
+          # uses C23 [[noreturn]] and expects a freestanding wasm32 target. Ubuntu
+          # 22.04 ships only clang <=15: 14 rejects the attribute, and 15 falls
+          # through to host glibc headers ("bits/libc-header-start.h" not found).
+          # clang-18 handles it (it is what ubuntu-24.04 uses). Install it from
+          # apt.llvm.org since 22.04's repos stop at 15. Only the wasm build uses
+          # this compiler, so the shipped binary keeps 22.04's glibc floor.
+          wget -qO /tmp/llvm.sh https://apt.llvm.org/llvm.sh
+          chmod +x /tmp/llvm.sh
+          sudo /tmp/llvm.sh 18
+          echo "CC_wasm32_unknown_unknown=/usr/bin/clang-18" >> "$GITHUB_ENV"
+          echo "AR_wasm32_unknown_unknown=/usr/bin/llvm-ar-18" >> "$GITHUB_ENV"
+
+      - name: Install Protoc for plugin-runtime
+        uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install trusted-signing-cli (Windows only)
+        if: matrix.os == 'windows'
+        shell: pwsh
+        run: |
+          $ErrorActionPreference = 'Stop'
+          $dir = "$env:USERPROFILE\trusted-signing"
+          New-Item -ItemType Directory -Force -Path $dir | Out-Null
+          $url = "https://github.com/Levminer/trusted-signing-cli/releases/download/0.8.0/trusted-signing-cli.exe"
+          $exe = Join-Path $dir "trusted-signing-cli.exe"
+          Invoke-WebRequest -Uri $url -OutFile $exe
+          echo $dir >> $env:GITHUB_PATH
+          & $exe --version
+
+      - run: vp install
+      - run: npm run bootstrap
+        env:
+          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
+      - run: npm run lint
+      - name: Run JS Tests
+        run: vp test
+      - name: Run Rust Tests
+        run: cargo test --all --exclude yaak-cli --features yaak-app-client/wry
+
+      - name: Set version
+        run: npm run replace-version
+        env:
+          YAAK_VERSION: ${{ github.ref_name }}
+
+      - name: Sign vendored binaries (macOS only)
+        if: matrix.os == 'macos'
+        env:
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
+        run: |
+          # Create keychain
+          KEYCHAIN_PATH=$RUNNER_TEMP/app-signing.keychain-db
+          security create-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
+          security set-keychain-settings -lut 21600 $KEYCHAIN_PATH
+          security unlock-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
+
+          # Import certificate
+          echo "$APPLE_CERTIFICATE" | base64 --decode > certificate.p12
+          security import certificate.p12 -P "$APPLE_CERTIFICATE_PASSWORD" -A -t cert -f pkcs12 -k $KEYCHAIN_PATH
+          security list-keychain -d user -s $KEYCHAIN_PATH
+
+          # Sign vendored binaries with hardened runtime and their specific entitlements
+          codesign --force --options runtime --entitlements crates-tauri/yaak-app-client/macos/entitlements.yaakprotoc.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app-client/vendored/protoc/yaakprotoc || true
+          codesign --force --options runtime --entitlements crates-tauri/yaak-app-client/macos/entitlements.yaaknode.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app-client/vendored/node/yaaknode || true
+
+      - name: Build and upload Tauri bundles
+        uses: tauri-apps/tauri-action@v0
+        env:
+          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
+
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+          # Apple signing stuff
+          APPLE_CERTIFICATE: ${{ matrix.os == 'macos' && secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ matrix.os == 'macos' && secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_ID: ${{ matrix.os == 'macos' && secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ matrix.os == 'macos' && secrets.APPLE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ matrix.os == 'macos' && secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_TEAM_ID: ${{ matrix.os == 'macos' && secrets.APPLE_TEAM_ID }}
+
+          # Windows signing stuff
+          AZURE_CLIENT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_ID }}
+          AZURE_CLIENT_SECRET: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_SECRET }}
+          AZURE_TENANT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_TENANT_ID }}
+        with:
+          # Also retries builds; upload retries alone cannot clean up starter assets.
+          retryAttempts: 3
+          tauriScript: "node ../../node_modules/@tauri-apps/cli/tauri.js"
+          tagName: "v__VERSION__"
+          releaseName: "Release __VERSION__"
+          releaseBody: "<!-- generated-by-yaak-releases -->"
+          releaseDraft: true
+          prerelease: true
+          projectPath: ./crates-tauri/yaak-app-client
+          args: "${{ matrix.args }}"
+
+      # Snapshot before the per-machine build overwrites the regular NSIS bundle/signature.
+      - name: Snapshot Tauri bundles
+        if: ${{ !cancelled() }}
+        run: node .github/scripts/preserve-release-artifacts.mjs
+        env:
+          RELEASE_TARGET: ${{ matrix.targets }}
+          RELEASE_PLATFORM: ${{ matrix.platform }}
+          RELEASE_RUNTIME: ${{ matrix.runtime }}
+          RELEASE_ARCH: ${{ matrix.yaak_arch }}
+          RELEASE_ARGS: ${{ matrix.args }}
+
+      - name: Build and upload CEF tarball from deb (Linux only)
+        if: matrix.os == 'ubuntu' && matrix.runtime == 'cef'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -euo pipefail
+          deb=$(find target/release/bundle/deb -maxdepth 1 -type f -name '*.deb' | head -n 1)
+          version="${GITHUB_REF_NAME#v}"
+          extract_dir="target/release/bundle/deb/yaak-cef-linux-${{ matrix.yaak_arch }}"
+          tarball="target/release/bundle/deb/yaak-cef_${version}_linux_${{ matrix.yaak_arch }}.tar.gz"
+          rm -rf "$extract_dir"
+          mkdir -p "$extract_dir"
+          dpkg-deb -x "$deb" "$extract_dir"
+          tar -C "$extract_dir" -czf "$tarball" .
+          for attempt in 1 2 3 4; do
+            if gh release upload "$GITHUB_REF_NAME" "$tarball" --clobber; then
+              break
+            fi
+            if [ "$attempt" -eq 4 ]; then exit 1; fi
+            sleep 10
+          done
+
+      # Build a per-machine NSIS installer for enterprise deployment (PDQ, SCCM, Intune)
+      - name: Build and upload machine-wide installer (Windows only)
+        if: matrix.os == 'windows'
+        shell: pwsh
+        env:
+          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
+          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+        run: |
+          Get-ChildItem -Recurse -Path target -File -Filter "*.exe.sig" | Remove-Item -Force
+          Push-Location crates-tauri/yaak-app-client
+          npx tauri bundle ${{ matrix.args }} --bundles nsis --config '{"bundle":{"createUpdaterArtifacts":true,"windows":{"nsis":{"installMode":"perMachine"}}}}'
+          if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
+          Pop-Location
+          $setup = Get-ChildItem -Recurse -Path target -Filter "*setup*.exe" | Select-Object -First 1
+          $setupSig = "$($setup.FullName).sig"
+          $dest = $setup.FullName -replace '-setup\.exe$', '-setup-machine.exe'
+          $destSig = "$dest.sig"
+          Copy-Item $setup.FullName $dest
+          Copy-Item $setupSig $destSig
+          foreach ($asset in @($dest, $destSig)) {
+            for ($attempt = 1; $attempt -le 4; $attempt++) {
+              gh release upload "$env:GITHUB_REF_NAME" "$asset" --clobber
+              if ($LASTEXITCODE -eq 0) { break }
+              if ($attempt -eq 4) { exit $LASTEXITCODE }
+              Start-Sleep -Seconds 10
+            }
+          }
+
+      - name: Snapshot additional release bundles
+        if: ${{ !cancelled() }}
+        run: node .github/scripts/preserve-release-artifacts.mjs
+        env:
+          RELEASE_TARGET: ${{ matrix.targets }}
+          RELEASE_PLATFORM: ${{ matrix.platform }}
+          RELEASE_RUNTIME: ${{ matrix.runtime }}
+          RELEASE_ARCH: ${{ matrix.yaak_arch }}
+          RELEASE_ARGS: ${{ matrix.args }}
+
+      - name: Retain release bundles for recovery
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: release-${{ github.ref_name }}-${{ matrix.platform }}-${{ matrix.runtime }}-${{ matrix.yaak_arch }}-${{ github.run_id }}-attempt-${{ github.run_attempt }}
+          path: ${{ runner.temp }}/yaak-release-artifacts/
+          retention-days: 7
+          if-no-files-found: warn

.github/workflows/release-cli-npm.yml

@@ -0,0 +1,219 @@
+name: Release CLI to NPM
+
+on:
+  push:
+    tags: [v*]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: CLI version to publish (for example 0.4.0 or v0.4.0)
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  prepare-vendored-assets:
+    if: github.repository == 'mountain-loop/yaak'
+    name: Prepare vendored plugin assets
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build plugin assets
+        env:
+          SKIP_WASM_BUILD: "1"
+        run: |
+          npm run build
+          npm run vendor:vendor-plugins
+
+      - name: Upload vendored assets
+        uses: actions/upload-artifact@v4
+        with:
+          name: vendored-assets
+          path: |
+            crates-tauri/yaak-app-client/vendored/plugin-runtime/index.cjs
+            crates-tauri/yaak-app-client/vendored/plugins
+          if-no-files-found: error
+
+  build-binaries:
+    name: Build ${{ matrix.pkg }}
+    needs: prepare-vendored-assets
+    runs-on: ${{ matrix.runner }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - pkg: cli-darwin-arm64
+            runner: macos-latest
+            target: aarch64-apple-darwin
+            binary: yaak
+          - pkg: cli-darwin-x64
+            runner: macos-latest
+            target: x86_64-apple-darwin
+            binary: yaak
+          - pkg: cli-linux-arm64
+            runner: ubuntu-22.04-arm
+            target: aarch64-unknown-linux-gnu
+            binary: yaak
+          - pkg: cli-linux-x64
+            runner: ubuntu-22.04
+            target: x86_64-unknown-linux-gnu
+            binary: yaak
+          - pkg: cli-win32-arm64
+            runner: windows-latest
+            target: aarch64-pc-windows-msvc
+            binary: yaak.exe
+          - pkg: cli-win32-x64
+            runner: windows-latest
+            target: x86_64-pc-windows-msvc
+            binary: yaak.exe
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.target }}
+
+      - name: Restore Rust cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          shared-key: release-cli-npm
+          cache-on-failure: true
+
+      - name: Install Linux build dependencies
+        if: startsWith(matrix.runner, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libdbus-1-dev
+
+      - name: Download vendored assets
+        uses: actions/download-artifact@v4
+        with:
+          name: vendored-assets
+          path: crates-tauri/yaak-app-client/vendored
+
+      - name: Set CLI build version
+        shell: bash
+        env:
+          WORKFLOW_VERSION: ${{ inputs.version }}
+        run: |
+          set -euo pipefail
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            VERSION="$WORKFLOW_VERSION"
+          else
+            VERSION="${GITHUB_REF_NAME}"
+          fi
+          VERSION="${VERSION#v}"
+          echo "Building yaak version: $VERSION"
+          echo "YAAK_CLI_VERSION=$VERSION" >> "$GITHUB_ENV"
+
+      - name: Build yaak
+        run: cargo build --locked --release -p yaak-cli --bin yaak --target ${{ matrix.target }}
+
+      - name: Stage binary artifact
+        shell: bash
+        run: |
+          set -euo pipefail
+          mkdir -p "npm/dist/${{ matrix.pkg }}"
+          cp "target/${{ matrix.target }}/release/${{ matrix.binary }}" "npm/dist/${{ matrix.pkg }}/${{ matrix.binary }}"
+
+      - name: Upload binary artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.pkg }}
+          path: npm/dist/${{ matrix.pkg }}/${{ matrix.binary }}
+          if-no-files-found: error
+
+  publish-npm:
+    name: Publish @yaakapp/cli packages
+    needs: build-binaries
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          registry-url: https://registry.npmjs.org
+
+      - name: Download binary artifacts
+        uses: actions/download-artifact@v4
+        with:
+          pattern: cli-*
+          path: npm/dist
+          merge-multiple: false
+
+      - name: Prepare npm packages
+        shell: bash
+        env:
+          WORKFLOW_VERSION: ${{ inputs.version }}
+        run: |
+          set -euo pipefail
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            VERSION="$WORKFLOW_VERSION"
+          else
+            VERSION="${GITHUB_REF_NAME}"
+          fi
+          VERSION="${VERSION#v}"
+          if [[ "$VERSION" == *-* ]]; then
+            PRERELEASE="${VERSION#*-}"
+            NPM_TAG="${PRERELEASE%%.*}"
+          else
+            NPM_TAG="latest"
+          fi
+          echo "Preparing CLI npm packages for version: $VERSION"
+          echo "Publishing with npm dist-tag: $NPM_TAG"
+          echo "NPM_TAG=$NPM_TAG" >> "$GITHUB_ENV"
+          YAAK_CLI_VERSION="$VERSION" node npm/prepare-publish.js
+
+      - name: Publish @yaakapp/cli-darwin-arm64
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli-darwin-arm64
+
+      - name: Publish @yaakapp/cli-darwin-x64
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli-darwin-x64
+
+      - name: Publish @yaakapp/cli-linux-arm64
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli-linux-arm64
+
+      - name: Publish @yaakapp/cli-linux-x64
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli-linux-x64
+
+      - name: Publish @yaakapp/cli-win32-arm64
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli-win32-arm64
+
+      - name: Publish @yaakapp/cli-win32-x64
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli-win32-x64
+
+      - name: Publish @yaakapp/cli
+        run: npm publish --provenance --access public --tag "$NPM_TAG"
+        working-directory: npm/cli

.github/workflows/release-web-image.yml

@@ -0,0 +1,123 @@
+name: Release web image
+
+# Builds ghcr.io/mountain-loop/yaak-web: the browser client and the server that serves it.
+# One image per architecture on its own native runner (emulating a Rust release build is hours),
+# joined into one multi-arch tag at the end.
+
+on:
+  push:
+    tags: [v*]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version to publish, without the v (e.g. 2026.2.0). Empty publishes main and sha tags only.
+        required: false
+        type: string
+
+permissions:
+  contents: read
+  packages: write
+
+env:
+  IMAGE: ghcr.io/mountain-loop/yaak-web
+
+jobs:
+  build:
+    if: github.repository == 'mountain-loop/yaak'
+    name: Build ${{ matrix.platform }}
+    runs-on: ${{ matrix.runner }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-22.04
+            arch: amd64
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+            arch: arm64
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: Dockerfile.web
+          platforms: ${{ matrix.platform }}
+          outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
+
+      - name: Export digest
+        run: |
+          mkdir -p "${{ runner.temp }}/digests"
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digest-${{ matrix.arch }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  publish:
+    name: Publish manifest
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digest-*
+          merge-multiple: true
+
+      - name: Set up Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # `latest` follows a release tag, and a manual run that names a version — the way to
+      # publish before the first release. A prerelease (v2026.2.1-beta.1) never takes it.
+      - name: Tags
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE }}
+          flavor: latest=false
+          tags: |
+            type=semver,pattern={{version}}
+            type=raw,value=${{ inputs.version }},enable=${{ inputs.version != '' }}
+            type=raw,value=latest,enable=${{ inputs.version != '' || (github.event_name == 'push' && !contains(github.ref_name, '-')) }}
+            type=ref,event=branch
+            type=sha,format=short
+
+      - name: Create and push the manifest
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create \
+            $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect
+        run: docker buildx imagetools inspect ${{ env.IMAGE }}:${{ steps.meta.outputs.version }}

.github/workflows/release.yml

@@ -1,179 +0,0 @@
-name: Generate Artifacts
-on:
-  push:
-    tags: [v*]
-
-jobs:
-  build-artifacts:
-    permissions:
-      contents: write
-
-    name: Build
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: "macos-latest" # for Arm-based Macs (M1 and above).
-            args: "--target aarch64-apple-darwin"
-            yaak_arch: "arm64"
-            os: "macos"
-            targets: "aarch64-apple-darwin"
-          - platform: "macos-latest" # for Intel-based Macs.
-            args: "--target x86_64-apple-darwin"
-            yaak_arch: "x64"
-            os: "macos"
-            targets: "x86_64-apple-darwin"
-          - platform: "ubuntu-22.04"
-            args: ""
-            yaak_arch: "x64"
-            os: "ubuntu"
-            targets: ""
-          - platform: "ubuntu-22.04-arm"
-            args: ""
-            yaak_arch: "arm64"
-            os: "ubuntu"
-            targets: ""
-          - platform: "windows-latest"
-            args: ""
-            yaak_arch: "x64"
-            os: "windows"
-            targets: ""
-          # Windows ARM64
-          - platform: "windows-latest"
-            args: "--target aarch64-pc-windows-msvc"
-            yaak_arch: "arm64"
-            os: "windows"
-            targets: "aarch64-pc-windows-msvc"
-    runs-on: ${{ matrix.platform }}
-    timeout-minutes: 40
-    steps:
-      - name: Checkout yaakapp/app
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-
-      - name: install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.targets }}
-
-      - uses: Swatinem/rust-cache@v2
-        with:
-          shared-key: ci
-          cache-on-failure: true
-
-      - name: install dependencies (Linux only)
-        if: matrix.os == 'ubuntu'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf xdg-utils
-
-      - name: Install Protoc for plugin-runtime
-        uses: arduino/setup-protoc@v3
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Install trusted-signing-cli (Windows only)
-        if: matrix.os == 'windows'
-        shell: pwsh
-        run: |
-          $ErrorActionPreference = 'Stop'
-          $dir = "$env:USERPROFILE\trusted-signing"
-          New-Item -ItemType Directory -Force -Path $dir | Out-Null
-          $url = "https://github.com/Levminer/trusted-signing-cli/releases/download/0.8.0/trusted-signing-cli.exe"
-          $exe = Join-Path $dir "trusted-signing-cli.exe"
-          Invoke-WebRequest -Uri $url -OutFile $exe
-          echo $dir >> $env:GITHUB_PATH
-          & $exe --version
-
-      - run: npm ci
-      - run: npm run bootstrap
-        env:
-          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
-      - run: npm run lint
-      - name: Run JS Tests
-        run: npm test
-      - name: Run Rust Tests
-        run: cargo test --all
-
-      - name: Set version
-        run: npm run replace-version
-        env:
-          YAAK_VERSION: ${{ github.ref_name }}
-
-      - name: Sign vendored binaries (macOS only)
-        if: matrix.os == 'macos'
-        env:
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
-        run: |
-          # Create keychain
-          KEYCHAIN_PATH=$RUNNER_TEMP/app-signing.keychain-db
-          security create-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
-          security set-keychain-settings -lut 21600 $KEYCHAIN_PATH
-          security unlock-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
-
-          # Import certificate
-          echo "$APPLE_CERTIFICATE" | base64 --decode > certificate.p12
-          security import certificate.p12 -P "$APPLE_CERTIFICATE_PASSWORD" -A -t cert -f pkcs12 -k $KEYCHAIN_PATH
-          security list-keychain -d user -s $KEYCHAIN_PATH
-
-          # Sign vendored binaries with hardened runtime and their specific entitlements
-          codesign --force --options runtime --entitlements crates-tauri/yaak-app/macos/entitlements.yaakprotoc.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app/vendored/protoc/yaakprotoc || true
-          codesign --force --options runtime --entitlements crates-tauri/yaak-app/macos/entitlements.yaaknode.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app/vendored/node/yaaknode || true
-
-      - uses: tauri-apps/tauri-action@v0
-        env:
-          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
-
-          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-          # Apple signing stuff
-          APPLE_CERTIFICATE: ${{ matrix.os == 'macos' && secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ matrix.os == 'macos' && secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_ID: ${{ matrix.os == 'macos' && secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ matrix.os == 'macos' && secrets.APPLE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ matrix.os == 'macos' && secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_TEAM_ID: ${{ matrix.os == 'macos' && secrets.APPLE_TEAM_ID }}
-
-          # Windows signing stuff
-          AZURE_CLIENT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_ID }}
-          AZURE_CLIENT_SECRET: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_SECRET }}
-          AZURE_TENANT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_TENANT_ID }}
-        with:
-          tagName: "v__VERSION__"
-          releaseName: "Release __VERSION__"
-          releaseBody: "[Changelog __VERSION__](https://yaak.app/blog/__VERSION__)"
-          releaseDraft: true
-          prerelease: true
-          args: "${{ matrix.args }} --config ./crates-tauri/yaak-app/tauri.release.conf.json"
-
-      # Build a per-machine NSIS installer for enterprise deployment (PDQ, SCCM, Intune)
-      - name: Build and upload machine-wide installer (Windows only)
-        if: matrix.os == 'windows'
-        shell: pwsh
-        env:
-          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
-          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
-          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-        run: |
-          Get-ChildItem -Recurse -Path target -File -Filter "*.exe.sig" | Remove-Item -Force
-          npx tauri bundle ${{ matrix.args }} --bundles nsis --config ./crates-tauri/yaak-app/tauri.release.conf.json --config '{"bundle":{"createUpdaterArtifacts":true,"windows":{"nsis":{"installMode":"perMachine"}}}}'
-          $setup = Get-ChildItem -Recurse -Path target -Filter "*setup*.exe" | Select-Object -First 1
-          $setupSig = "$($setup.FullName).sig"
-          $dest = $setup.FullName -replace '-setup\.exe$', '-setup-machine.exe'
-          $destSig = "$dest.sig"
-          Copy-Item $setup.FullName $dest
-          Copy-Item $setupSig $destSig
-          gh release upload "${{ github.ref_name }}" "$dest" --clobber
-          gh release upload "${{ github.ref_name }}" "$destSig" --clobber

.github/workflows/sponsors.yml

@@ -7,6 +7,7 @@ permissions:
   contents: write
 jobs:
   deploy:
+    if: github.repository == 'mountain-loop/yaak'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
@@ -16,23 +17,23 @@ jobs:
         uses: JamesIves/github-sponsors-readme-action@v1
         with:
           token: ${{ secrets.SPONSORS_PAT }}
-          file: 'README.md'
+          file: "README.md"
           maximum: 1999
           template: '<a href="https://github.com/{{{ login }}}"><img src="{{{ avatarUrl }}}" width="50px" alt="User avatar: {{{ login }}}" /></a>&nbsp;&nbsp;'
           active-only: false
           include-private: true
-          marker: 'sponsors-base'
+          marker: "sponsors-base"
 
       - name: Generate Sponsors
         uses: JamesIves/github-sponsors-readme-action@v1
         with:
           token: ${{ secrets.SPONSORS_PAT }}
-          file: 'README.md'
+          file: "README.md"
           minimum: 2000
           template: '<a href="https://github.com/{{{ login }}}"><img src="{{{ avatarUrl }}}" width="80px" alt="User avatar: {{{ login }}}" /></a>&nbsp;&nbsp;'
           active-only: false
           include-private: true
-          marker: 'sponsors-premium'
+          marker: "sponsors-premium"
 
       # ⚠️ Note: You can use any deployment step here to automatically push the README
       # changes back to your branch.
@@ -41,4 +42,4 @@ jobs:
         with:
           branch: main
           force: false
-          folder: '.'
+          folder: "."

.gitignore

@@ -39,7 +39,8 @@ codebook.toml
 target
 
 # Per-worktree Tauri config (generated by post-checkout hook)
-crates-tauri/yaak-app/tauri.worktree.conf.json
+crates-tauri/yaak-app-client/tauri.worktree.conf.json
+crates-tauri/yaak-app-proxy/tauri.worktree.conf.json
 
 # Tauri auto-generated permission files
 **/permissions/autogenerated
@@ -54,3 +55,10 @@ flatpak/node-sources.json
 
 # Local Codex desktop env state
 .codex/environments/environment.toml
+
+# Claude Code local settings
+.claude/settings.local.json
+.claude/worktrees/
+
+# Headless screenshots taken while working
+.shots/

.node-version

@@ -0,0 +1 @@
+24.14.0

.npmrc

@@ -0,0 +1,2 @@
+# vite-plugin-wasm has not yet declared Vite 8 in its peerDependencies
+legacy-peer-deps=true

.nvmrc

@@ -1 +0,0 @@
-20

.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "ignorePatterns": [
+    "**/bindings/**",
+    "crates/yaak-templates/pkg/**",
+    "apps/yaak-client/routeTree.gen.ts",
+    "plugins/importer-bruno/tests/fixtures/upstream/**"
+  ]
+}

.vite-hooks/pre-commit

@@ -0,0 +1,2 @@
+vp lint
+vp staged

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["biomejs.biome", "rust-lang.rust-analyzer", "bradlc.vscode-tailwindcss"]
+  "recommendations": [
+    "rust-lang.rust-analyzer",
+    "bradlc.vscode-tailwindcss",
+    "VoidZero.vite-plus-extension-pack"
+  ]
 }

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
-  "editor.defaultFormatter": "biomejs.biome",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
-  "biome.enabled": true,
-  "biome.lint.format.enable": true
+  "editor.formatOnSaveMode": "file",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  }
 }

AGENTS.md

@@ -0,0 +1,2 @@
+- Tag safety: app AND CLI releases both ship from `v*` tags (the CLI is version-locked to the app and publishes to npm on every app tag); `@yaakapp/api` uses `yaak-api-*` tags. Always confirm which is requested before retagging.
+- Do not commit, push, or tag without explicit approval

CONTRIBUTING.md

@@ -3,13 +3,12 @@
 Yaak accepts community pull requests for:
 
 - Bug fixes
-- Small-scope improvements directly tied to existing behavior
 
 Pull requests that introduce broad new features, major redesigns, or large refactors are out of scope unless explicitly approved first.
 
 ## Approval for Non-Bugfix Changes
 
-If your PR is not a bug fix or small-scope improvement, include a link to the approved [feedback item](https://yaak.app/feedback) where contribution approval was explicitly stated.
+If your PR is not a bug fix, include a link to the [feedback item](https://yaak.app/feedback) where @gschier explicitly gave you permission to work on it.
 
 ## Development Setup
 

Cargo.toml

@@ -1,30 +1,50 @@
 [workspace]
 resolver = "2"
 members = [
-    "crates/yaak",
-    # Shared crates (no Tauri dependency)
-    "crates/yaak-core",
-    "crates/yaak-common",
-    "crates/yaak-crypto",
-    "crates/yaak-git",
-    "crates/yaak-grpc",
-    "crates/yaak-http",
-    "crates/yaak-models",
-    "crates/yaak-plugins",
-    "crates/yaak-sse",
-    "crates/yaak-sync",
-    "crates/yaak-templates",
-    "crates/yaak-tls",
-    "crates/yaak-ws",
-    "crates/yaak-api",
-    # CLI crates
-    "crates-cli/yaak-cli",
-    # Tauri-specific crates
-    "crates-tauri/yaak-app",
-    "crates-tauri/yaak-fonts",
-    "crates-tauri/yaak-license",
-    "crates-tauri/yaak-mac-window",
-    "crates-tauri/yaak-tauri-utils",
+  "crates/yaak",
+  "crates/yaak-commands",
+  # Common/foundation crates
+  "crates/common/yaak-database",
+  "crates/common/yaak-rpc",
+  "crates/common/yaak-rpc-schema",
+  # Shared crates (no Tauri dependency)
+  "crates/yaak-core",
+  "crates/yaak-common",
+  "crates/yaak-crypto",
+  "crates/yaak-filter",
+  "crates/yaak-git",
+  "crates/yaak-grpc",
+  "crates/yaak-http",
+  "crates/yaak-lifecycle",
+  "crates/yaak-mcp",
+  "crates/yaak-models",
+  "crates/yaak-plugins",
+  "crates/yaak-query",
+  "crates/yaak-sse",
+  "crates/yaak-sync",
+  "crates/yaak-templates",
+  "crates/yaak-tls",
+  "crates/yaak-ws",
+  "crates/yaak-wasm",
+  "crates/yaak-api",
+  "crates/yaak-proxy",
+  # Proxy-specific crates
+  "crates-proxy/yaak-proxy-lib",
+  # Server crates (the browser tier's hosted send executor)
+  "crates-server/yaak-web",
+  "crates-server/yaak-playground",
+  # CLI crates
+  "crates-cli/yaak-cli",
+  # Tauri-specific crates
+  "crates-tauri/yaak-app-client",
+  "crates-tauri/yaak-app-proxy",
+  "crates-tauri/yaak-fonts",
+  "crates-tauri/yaak-license",
+  "crates-tauri/yaak-mac-window",
+  "crates-tauri/yaak-proxy-helper",
+  "crates-tauri/yaak-system-appearance",
+  "crates-tauri/yaak-tauri-utils",
+  "crates-tauri/yaak-window",
 ]
 
 [workspace.dependencies]
@@ -32,43 +52,75 @@ chrono = "0.4.42"
 hex = "0.4.3"
 keyring = "3.6.3"
 log = "0.4.29"
-reqwest = "0.12.20"
+reqwest = { version = "0.13.5", default-features = false, features = [
+  # reqwest 0.13 switched `default-tls` from native-tls to rustls; keep the
+  # rest of the old default set and stay on native-tls.
+  "charset",
+  "http2",
+  "system-proxy",
+  "native-tls",
+] }
 rustls = { version = "0.23.34", default-features = false }
-rustls-platform-verifier = "0.6.2"
+rustls-platform-verifier = "0.7.1"
 schemars = { version = "0.8.22", features = ["chrono"] }
 serde = "1.0.228"
 serde_json = "1.0.145"
 sha2 = "0.10.9"
-tauri = "2.9.5"
-tauri-plugin = "2.5.2"
-tauri-plugin-dialog = "2.4.2"
-tauri-plugin-shell = "2.3.3"
+tauri = { version = "2.11.1", default-features = false, features = [
+  "common-controls-v6",
+  "compression",
+  "dynamic-acl",
+] }
+tauri-plugin = "2.6.1"
+tauri-plugin-dialog = { version = "2.7.1", default-features = false }
+tauri-plugin-shell = "2.3.5"
 thiserror = "2.0.17"
 tokio = "1.48.0"
 ts-rs = "11.1.0"
 
+# Internal crates - common/foundation
+yaak-database = { path = "crates/common/yaak-database" }
+yaak-rpc = { path = "crates/common/yaak-rpc" }
+yaak-rpc-schema = { path = "crates/common/yaak-rpc-schema" }
+
 # Internal crates - shared
 yaak-core = { path = "crates/yaak-core" }
 yaak = { path = "crates/yaak" }
+yaak-commands = { path = "crates/yaak-commands" }
 yaak-common = { path = "crates/yaak-common" }
 yaak-crypto = { path = "crates/yaak-crypto" }
+yaak-filter = { path = "crates/yaak-filter" }
 yaak-git = { path = "crates/yaak-git" }
 yaak-grpc = { path = "crates/yaak-grpc" }
 yaak-http = { path = "crates/yaak-http" }
+yaak-lifecycle = { path = "crates/yaak-lifecycle" }
+yaak-mcp = { path = "crates/yaak-mcp" }
 yaak-models = { path = "crates/yaak-models" }
 yaak-plugins = { path = "crates/yaak-plugins" }
+yaak-query = { path = "crates/yaak-query" }
 yaak-sse = { path = "crates/yaak-sse" }
 yaak-sync = { path = "crates/yaak-sync" }
 yaak-templates = { path = "crates/yaak-templates" }
 yaak-tls = { path = "crates/yaak-tls" }
 yaak-ws = { path = "crates/yaak-ws" }
 yaak-api = { path = "crates/yaak-api" }
+yaak-proxy = { path = "crates/yaak-proxy" }
+
+# Internal crates - proxy
+yaak-proxy-lib = { path = "crates-proxy/yaak-proxy-lib" }
 
 # Internal crates - Tauri-specific
 yaak-fonts = { path = "crates-tauri/yaak-fonts" }
 yaak-license = { path = "crates-tauri/yaak-license" }
 yaak-mac-window = { path = "crates-tauri/yaak-mac-window" }
+yaak-proxy-helper = { path = "crates-tauri/yaak-proxy-helper" }
+yaak-system-appearance = { path = "crates-tauri/yaak-system-appearance" }
 yaak-tauri-utils = { path = "crates-tauri/yaak-tauri-utils" }
+yaak-window = { path = "crates-tauri/yaak-window" }
 
 [profile.release]
 strip = false
+
+[patch.crates-io]
+tauri = { git = "https://github.com/tauri-apps/tauri", rev = "d9bc695c18d9a25baec21d8a5f36d72e3a14ee53" }
+tauri-build = { git = "https://github.com/tauri-apps/tauri", rev = "d9bc695c18d9a25baec21d8a5f36d72e3a14ee53" }

DEVELOPMENT.md

@@ -1,24 +1,26 @@
 # Developer Setup
 
-Yaak is a combined Node.js and Rust monorepo. It is a [Tauri](https://tauri.app) project, so 
+Yaak is a combined Node.js and Rust monorepo. It is a [Tauri](https://tauri.app) project, so
 uses Rust and HTML/CSS/JS for the main application but there is also a plugin system powered
 by a Node.js sidecar that communicates to the app over gRPC.
 
-Because of the moving parts, there are a few setup steps required before development can 
+Because of the moving parts, there are a few setup steps required before development can
 begin.
 
 ## Prerequisites
 
 Make sure you have the following tools installed:
 
-- [Node.js](https://nodejs.org/en/download/package-manager)
+- [Node.js](https://nodejs.org/en/download/package-manager) (v24+)
 - [Rust](https://www.rust-lang.org/tools/install)
+- [Vite+](https://vite.dev/guide/vite-plus) (`vp` CLI)
 
 Check the installations with the following commands:
 
 ```shell
 node -v
 npm -v
+vp --version
 rustc --version
 ```
 
@@ -42,15 +44,34 @@ After bootstrapping, start the app in development mode:
 npm start
 ```
 
+## Run the App in a Browser
+
+The client can also run as a plain web page, with no Tauri and no local process
+behind it. Set `YAAK_TARGET=web` and start the frontend on its own:
+
+```shell
+YAAK_TARGET=web npm run dev --workspace @yaakapp/yaak-client
+```
+
+That flag picks the browser host in `packages/platform/src/web/`, which answers
+commands from an IndexedDB database the page owns instead of from the Rust
+engine. Data persists across reloads and is shared between tabs on the same
+origin. Sending HTTP is not available yet — the Send button reports that and
+everything else about the request is still saved. `packages/platform/src/web/README.md`
+lists which commands the browser host implements and which it declines.
+
+Desktop builds are unaffected: without the flag the platform package installs
+the Tauri host exactly as before.
+
 ## SQLite Migrations
 
 New migrations can be created from the `src-tauri/` directory:
-   
+
 ```shell
 npm run migration
 ```
 
-Rerun the app to apply the migrations. 
+Rerun the app to apply the migrations.
 
 _Note: For safety, development builds use a separate database location from production builds._
 
@@ -61,9 +82,9 @@ _Note: For safety, development builds use a separate database location from prod
 lezer-generator components/core/Editor/<LANG>/<LANG>.grammar > components/core/Editor/<LANG>/<LANG>.ts
 ```
 
-## Linting & Formatting
+## Linting and Formatting
 
-This repo uses Biome for linting and formatting (replacing ESLint + Prettier).
+This repo uses [Vite+](https://vite.dev/guide/vite-plus) for linting (oxlint) and formatting (oxfmt).
 
 - Lint the entire repo:
 
@@ -71,12 +92,6 @@ This repo uses Biome for linting and formatting (replacing ESLint + Prettier).
 npm run lint
 ```
 
-- Auto-fix lint issues where possible:
-
-```sh
-npm run lint:fix
-```
-
 - Format code:
 
 ```sh
@@ -84,5 +99,7 @@ npm run format
 ```
 
 Notes:
-- Many workspace packages also expose the same scripts (`lint`, `lint:fix`, and `format`).
-- TypeScript type-checking still runs separately via `tsc --noEmit` in relevant packages.
+
+- A pre-commit hook runs `vp lint` automatically on commit.
+- Some workspace packages also run `tsc --noEmit` for type-checking.
+- VS Code users should install the recommended extensions for format-on-save support.

Dockerfile.playground

@@ -0,0 +1,15 @@
+# syntax=docker/dockerfile:1
+# The playground API behind yaak.run. See crates-server/yaak-playground/README.md.
+
+FROM rust:1-bookworm AS build
+WORKDIR /app
+COPY . .
+RUN cargo build --release -p yaak-playground
+
+FROM debian:bookworm-slim
+COPY --from=build /app/target/release/yaak-playground /usr/local/bin/yaak-playground
+ENV HOST=0.0.0.0
+ENV PORT=8080
+EXPOSE 8080
+USER nobody
+CMD ["yaak-playground"]

Dockerfile.web

@@ -0,0 +1,49 @@
+# syntax=docker/dockerfile:1
+# Yaak in a browser, whole: the web client and the server that executes its sends, in one
+# image serving both from one origin.
+#
+#   docker run -p 8080:8080 ghcr.io/mountain-loop/yaak-web
+#
+# See crates-server/yaak-web/README.md for the knobs.
+
+FROM node:22-slim AS web
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git python3 make g++ ca-certificates && rm -rf /var/lib/apt/lists/*
+COPY . .
+# `npm ci` runs a prepare hook (`vp config`) that shells out to git, and there is no .git in
+# the build context — it is ignored, and in a worktree it is a pointer file anyway.
+RUN git init -q && git add -A \
+    && git -c user.email=build@yaak.app -c user.name=build commit -qm build
+# Empty means the tab posts sends to its own origin, which is what this image serves. Set it
+# only to build a bundle for a deployment whose server lives somewhere else.
+ARG VITE_YAAK_WEB_URL=""
+ENV VITE_YAAK_WEB_URL=$VITE_YAAK_WEB_URL
+ENV YAAK_TARGET=web
+# crates/yaak-wasm's wasm package is committed; rebuilding it needs a clang with a WebAssembly
+# backend, which this image has no reason to carry.
+ENV SKIP_WASM_BUILD=1
+RUN npm ci
+RUN node_modules/.bin/vp -C apps/yaak-client build
+
+FROM rust:1-bookworm AS server
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    pkg-config libssl-dev protobuf-compiler && rm -rf /var/lib/apt/lists/*
+COPY . .
+RUN cargo build --release -p yaak-web
+
+FROM debian:bookworm-slim
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates libssl3 && rm -rf /var/lib/apt/lists/*
+COPY --from=server /app/target/release/yaak-web /usr/local/bin/yaak-web
+COPY --from=web /app/dist/apps/yaak-client /srv
+# 0.0.0.0 so the port is reachable from outside the container. PORT is the variable a
+# platform-as-a-service assigns, so a deploy that sets it needs nothing else changed.
+ENV HOST=0.0.0.0
+ENV PORT=8080
+EXPOSE 8080
+USER nobody
+# Overriding the command (dropping --serve) leaves the stateless send executor:
+#   docker run ghcr.io/mountain-loop/yaak-web yaak-web
+CMD ["yaak-web", "--serve", "/srv"]

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/JamesIves/github-sponsors-readme-action">
-    <img width="200px" src="https://github.com/mountain-loop/yaak/raw/main/crates-tauri/yaak-app/icons/icon.png">
+    <img width="200px" src="https://github.com/mountain-loop/yaak/raw/main/crates-tauri/yaak-app-client/icons/icon.png">
   </a>
 </p>
 
@@ -16,23 +16,23 @@
 </p>
 <br>
 
-
-
 <p align="center">
-  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
+  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/rauchg"><img src="https:&#x2F;&#x2F;github.com&#x2F;rauchg.png" width="80px" alt="User avatar: rauchg" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
 </p>
 <p align="center">
-  <!-- sponsors-base --><a href="https://github.com/seanwash"><img src="https:&#x2F;&#x2F;github.com&#x2F;seanwash.png" width="50px" alt="User avatar: seanwash" /></a>&nbsp;&nbsp;<a href="https://github.com/jerath"><img src="https:&#x2F;&#x2F;github.com&#x2F;jerath.png" width="50px" alt="User avatar: jerath" /></a>&nbsp;&nbsp;<a href="https://github.com/itsa-sh"><img src="https:&#x2F;&#x2F;github.com&#x2F;itsa-sh.png" width="50px" alt="User avatar: itsa-sh" /></a>&nbsp;&nbsp;<a href="https://github.com/dmmulroy"><img src="https:&#x2F;&#x2F;github.com&#x2F;dmmulroy.png" width="50px" alt="User avatar: dmmulroy" /></a>&nbsp;&nbsp;<a href="https://github.com/timcole"><img src="https:&#x2F;&#x2F;github.com&#x2F;timcole.png" width="50px" alt="User avatar: timcole" /></a>&nbsp;&nbsp;<a href="https://github.com/VLZH"><img src="https:&#x2F;&#x2F;github.com&#x2F;VLZH.png" width="50px" alt="User avatar: VLZH" /></a>&nbsp;&nbsp;<a href="https://github.com/terasaka2k"><img src="https:&#x2F;&#x2F;github.com&#x2F;terasaka2k.png" width="50px" alt="User avatar: terasaka2k" /></a>&nbsp;&nbsp;<a href="https://github.com/andriyor"><img src="https:&#x2F;&#x2F;github.com&#x2F;andriyor.png" width="50px" alt="User avatar: andriyor" /></a>&nbsp;&nbsp;<a href="https://github.com/majudhu"><img src="https:&#x2F;&#x2F;github.com&#x2F;majudhu.png" width="50px" alt="User avatar: majudhu" /></a>&nbsp;&nbsp;<a href="https://github.com/axelrindle"><img src="https:&#x2F;&#x2F;github.com&#x2F;axelrindle.png" width="50px" alt="User avatar: axelrindle" /></a>&nbsp;&nbsp;<a href="https://github.com/jirizverina"><img src="https:&#x2F;&#x2F;github.com&#x2F;jirizverina.png" width="50px" alt="User avatar: jirizverina" /></a>&nbsp;&nbsp;<a href="https://github.com/chip-well"><img src="https:&#x2F;&#x2F;github.com&#x2F;chip-well.png" width="50px" alt="User avatar: chip-well" /></a>&nbsp;&nbsp;<a href="https://github.com/GRAYAH"><img src="https:&#x2F;&#x2F;github.com&#x2F;GRAYAH.png" width="50px" alt="User avatar: GRAYAH" /></a>&nbsp;&nbsp;<a href="https://github.com/flashblaze"><img src="https:&#x2F;&#x2F;github.com&#x2F;flashblaze.png" width="50px" alt="User avatar: flashblaze" /></a>&nbsp;&nbsp;<!-- sponsors-base -->
+  <!-- sponsors-base --><a href="https://github.com/seanwash"><img src="https:&#x2F;&#x2F;github.com&#x2F;seanwash.png" width="50px" alt="User avatar: seanwash" /></a>&nbsp;&nbsp;<a href="https://github.com/jerath"><img src="https:&#x2F;&#x2F;github.com&#x2F;jerath.png" width="50px" alt="User avatar: jerath" /></a>&nbsp;&nbsp;<a href="https://github.com/itsa-sh"><img src="https:&#x2F;&#x2F;github.com&#x2F;itsa-sh.png" width="50px" alt="User avatar: itsa-sh" /></a>&nbsp;&nbsp;<a href="https://github.com/dmmulroy"><img src="https:&#x2F;&#x2F;github.com&#x2F;dmmulroy.png" width="50px" alt="User avatar: dmmulroy" /></a>&nbsp;&nbsp;<a href="https://github.com/timcole"><img src="https:&#x2F;&#x2F;github.com&#x2F;timcole.png" width="50px" alt="User avatar: timcole" /></a>&nbsp;&nbsp;<a href="https://github.com/VLZH"><img src="https:&#x2F;&#x2F;github.com&#x2F;VLZH.png" width="50px" alt="User avatar: VLZH" /></a>&nbsp;&nbsp;<a href="https://github.com/terasaka2k"><img src="https:&#x2F;&#x2F;github.com&#x2F;terasaka2k.png" width="50px" alt="User avatar: terasaka2k" /></a>&nbsp;&nbsp;<a href="https://github.com/andriyor"><img src="https:&#x2F;&#x2F;github.com&#x2F;andriyor.png" width="50px" alt="User avatar: andriyor" /></a>&nbsp;&nbsp;<a href="https://github.com/majudhu"><img src="https:&#x2F;&#x2F;github.com&#x2F;majudhu.png" width="50px" alt="User avatar: majudhu" /></a>&nbsp;&nbsp;<a href="https://github.com/axelrindle"><img src="https:&#x2F;&#x2F;github.com&#x2F;axelrindle.png" width="50px" alt="User avatar: axelrindle" /></a>&nbsp;&nbsp;<a href="https://github.com/jirizverina"><img src="https:&#x2F;&#x2F;github.com&#x2F;jirizverina.png" width="50px" alt="User avatar: jirizverina" /></a>&nbsp;&nbsp;<a href="https://github.com/chip-well"><img src="https:&#x2F;&#x2F;github.com&#x2F;chip-well.png" width="50px" alt="User avatar: chip-well" /></a>&nbsp;&nbsp;<a href="https://github.com/GRAYAH"><img src="https:&#x2F;&#x2F;github.com&#x2F;GRAYAH.png" width="50px" alt="User avatar: GRAYAH" /></a>&nbsp;&nbsp;<a href="https://github.com/flashblaze"><img src="https:&#x2F;&#x2F;github.com&#x2F;flashblaze.png" width="50px" alt="User avatar: flashblaze" /></a>&nbsp;&nbsp;<a href="https://github.com/Frostist"><img src="https:&#x2F;&#x2F;github.com&#x2F;Frostist.png" width="50px" alt="User avatar: Frostist" /></a>&nbsp;&nbsp;<a href="https://github.com/PurplProto"><img src="https:&#x2F;&#x2F;github.com&#x2F;PurplProto.png" width="50px" alt="User avatar: PurplProto" /></a>&nbsp;&nbsp;<!-- sponsors-base -->
 </p>
 
 ![Yaak API Client](https://yaak.app/static/screenshot.png)
 
+## Install
+
+Download Yaak for macOS, Windows, or Linux from [yaak.app/download](https://yaak.app/download). Package managers and other install methods are in the [installation docs](https://yaak.app/docs/getting-started/installation).
 
 ## Features
 
-Yaak is an offline-first API client designed to stay out of your way while giving you everything you need when you need it. 
-Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight, and private. No telemetry, no VC funding, and no cloud lock-in.  
-
+Yaak is an offline-first API client designed to stay out of your way while giving you everything you need when you need it.
+Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight, and private. No telemetry, no VC funding, and no cloud lock-in.
 
 ### 🌐 Work with any API
 
@@ -41,26 +41,28 @@ Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight
 - Filter and inspect responses with JSONPath or XPath.
 
 ### 🔐 Stay secure
+
 - Use OAuth 2.0, JWT, Basic Auth, or custom plugins for authentication.
-- Secure sensitive values with encrypted secrets. 
+- Secure sensitive values with encrypted secrets.
 - Store secrets in your OS keychain.
 
 ### ☁️ Organize & collaborate
+
 - Group requests into workspaces and nested folders.
 - Use environment variables to switch between dev, staging, and prod.
 - Mirror workspaces to your filesystem for versioning in Git or syncing with Dropbox.
 
 ### 🧩 Extend & customize
+
 - Insert dynamic values like UUIDs or timestamps with template tags.
 - Pick from built-in themes or build your own.
 - Create plugins to extend authentication, template tags, or the UI.
 
-
 ## Contribution Policy
 
 > [!IMPORTANT]
-> Community PRs are currently limited to bug fixes and small-scope improvements.
-> If your PR is out of scope, link an approved feedback item from [yaak.app/feedback](https://yaak.app/feedback).
+> Community PRs are currently limited to bug fixes.
+> If your PR is not a bug fix, link the [feedback item](https://yaak.app/feedback) where @gschier explicitly gave you permission to work on it.
 > See [`CONTRIBUTING.md`](CONTRIBUTING.md) for policy details and [`DEVELOPMENT.md`](DEVELOPMENT.md) for local setup.
 
 ## Useful Resources
@@ -70,3 +72,9 @@ Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight
 - [Yaak vs Postman](https://yaak.app/alternatives/postman)
 - [Yaak vs Bruno](https://yaak.app/alternatives/bruno)
 - [Yaak vs Insomnia](https://yaak.app/alternatives/insomnia)
+
+## License
+
+The source is [MIT licensed](LICENSE) and can be built and run for free, for both personal and commercial use.
+
+The prebuilt binaries follow Yaak's [pricing terms](https://yaak.app/pricing): free for personal use, license required for commercial use.

apps/yaak-client/commands/commands.test.tsx

@@ -0,0 +1,148 @@
+import type { FunctionComponent, ReactElement } from "react";
+import { beforeEach, expect, test, vi } from "vite-plus/test";
+import type { SyncOp } from "@yaakapp-internal/sync/bindings/gen_sync";
+import type { DialogInstance } from "../components/Dialogs";
+import { syncWorkspace } from "./commands";
+
+const mocks = vi.hoisted(() => ({
+  calculateSync: vi.fn(),
+  applySync: vi.fn(),
+  showDialog: vi.fn<(dialog: DialogInstance) => void>(),
+  hideDialog: vi.fn(),
+  showToast: vi.fn(),
+}));
+
+vi.mock("@yaakapp-internal/sync", () => mocks);
+vi.mock("@yaakapp-internal/models", () => ({
+  createWorkspaceModel: vi.fn(),
+  modelTypeLabel: () => "Request",
+}));
+vi.mock("@yaakapp-internal/ui", () => ({
+  Banner: "div",
+  InlineCode: "code",
+  Table: "table",
+  TableBody: "tbody",
+  TableCell: "td",
+  TableHead: "thead",
+  TableHeaderCell: "th",
+  TableRow: "tr",
+  TruncatedWideTableCell: "td",
+}));
+vi.mock("../components/core/Button", () => ({ Button: "button" }));
+vi.mock("../hooks/useActiveWorkspace", () => ({ activeWorkspaceIdAtom: null }));
+vi.mock("../lib/dialog", () => mocks);
+vi.mock("../lib/jotai", () => ({ jotaiStore: { get: vi.fn() } }));
+vi.mock("../lib/prompt", () => ({ showPrompt: vi.fn() }));
+vi.mock("../lib/resolvedModelName", () => ({ resolvedModelNameWithFolders: () => "Request" }));
+vi.mock("../lib/toast", () => mocks);
+
+const staleToast = expect.objectContaining({
+  message: "Files changed while syncing. Review the changes again.",
+});
+
+const params = { workspaceId: "wk_test", syncDir: "/sync" };
+const deletion = {
+  type: "dbDelete",
+  model: { id: "rq_test", model: "http_request" },
+  state: {},
+} as Extract<SyncOp, { type: "dbDelete" }>;
+const update = {
+  type: "dbUpdate",
+  model: { id: "rq_test", model: "http_request" },
+  fs: { model: { id: "rq_test", model: "http_request", name: "Updated" } },
+  state: {},
+} as Extract<SyncOp, { type: "dbUpdate" }>;
+
+async function submit(dialog: DialogInstance) {
+  const render = dialog.render as FunctionComponent<{ hide: () => void }>;
+  const form = render({ hide: () => mocks.hideDialog(dialog.id) }) as ReactElement<{
+    onSubmit: (event: { preventDefault: () => void }) => Promise<void>;
+  }>;
+  await form.props.onSubmit({ preventDefault: vi.fn() });
+}
+
+function latestDialog() {
+  const dialog = mocks.showDialog.mock.calls.at(-1)?.[0];
+  if (dialog == null) throw new Error("Expected a sync dialog");
+  return dialog;
+}
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  mocks.applySync.mockResolvedValue(true);
+});
+
+test("closes an obsolete dialog when the restored file leaves no changes", async () => {
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([]);
+  await syncWorkspace.mutateAsync(params);
+  mocks.applySync.mockResolvedValueOnce(false);
+
+  await submit(latestDialog());
+
+  expect(mocks.applySync).toHaveBeenCalledTimes(1);
+  expect(mocks.applySync).toHaveBeenCalledWith(params.workspaceId, params.syncDir, [deletion]);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+  expect(mocks.showDialog).toHaveBeenCalledTimes(1);
+});
+
+test("requires another confirmation for a changed plan", async () => {
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([update]);
+  await syncWorkspace.mutateAsync(params);
+  const original = latestDialog();
+  mocks.applySync.mockResolvedValueOnce(false);
+
+  await submit(original);
+
+  expect(mocks.applySync).toHaveBeenCalledTimes(1);
+  expect(mocks.showDialog).toHaveBeenCalledTimes(2);
+  expect(mocks.showToast).toHaveBeenCalledWith(staleToast);
+  expect(mocks.hideDialog).not.toHaveBeenCalled();
+  await submit(latestDialog());
+  expect(mocks.applySync).toHaveBeenLastCalledWith(params.workspaceId, params.syncDir, [update]);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+});
+
+test("applies an unchanged reviewed plan and closes the dialog", async () => {
+  mocks.calculateSync.mockResolvedValue([update]);
+  await syncWorkspace.mutateAsync(params);
+  await submit(latestDialog());
+
+  expect(mocks.calculateSync).toHaveBeenCalledTimes(1);
+  expect(mocks.applySync).toHaveBeenCalledTimes(1);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+});
+
+test("forced sync retries the current plan without requesting another confirmation", async () => {
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([update]);
+  mocks.applySync.mockResolvedValueOnce(false);
+
+  await syncWorkspace.mutateAsync({ ...params, force: true });
+
+  expect(mocks.applySync).toHaveBeenCalledTimes(2);
+  expect(mocks.applySync).toHaveBeenLastCalledWith(params.workspaceId, params.syncDir, [update]);
+  expect(mocks.showDialog).not.toHaveBeenCalled();
+});
+
+test("outbound-only changes clear the old dialog and sync automatically", async () => {
+  const outbound = { type: "fsUpdate", model: update.model, state: {} } as SyncOp;
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([outbound]);
+  await syncWorkspace.mutateAsync(params);
+  await syncWorkspace.mutateAsync(params);
+
+  expect(mocks.applySync).toHaveBeenCalledWith(params.workspaceId, params.syncDir, [outbound]);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+  expect(mocks.showDialog).toHaveBeenCalledTimes(1);
+});
+
+test("stops retrying a plan that keeps going stale", async () => {
+  mocks.calculateSync.mockResolvedValue([update]);
+  mocks.applySync.mockResolvedValue(false);
+
+  await syncWorkspace.mutateAsync({ ...params, force: true });
+
+  expect(mocks.calculateSync).toHaveBeenCalledTimes(3);
+  expect(mocks.applySync).toHaveBeenCalledTimes(3);
+  expect(mocks.showToast).toHaveBeenCalledTimes(1);
+  expect(mocks.showToast).toHaveBeenCalledWith(staleToast);
+  expect(mocks.showDialog).not.toHaveBeenCalled();
+});

apps/yaak-client/commands/commands.tsx

@@ -1,9 +1,9 @@
-import { createWorkspaceModel, type Folder, modelTypeLabel } from '@yaakapp-internal/models';
-import { applySync, calculateSync } from '@yaakapp-internal/sync';
-import { Banner } from '../components/core/Banner';
-import { Button } from '../components/core/Button';
-import { InlineCode } from '../components/core/InlineCode';
+import { createWorkspaceModel, type Folder, modelTypeLabel } from "@yaakapp-internal/models";
+import { applySync, calculateSync } from "@yaakapp-internal/sync";
+import { Button } from "../components/core/Button";
 import {
+  Banner,
+  InlineCode,
   Table,
   TableBody,
   TableCell,
@@ -11,21 +11,22 @@ import {
   TableHeaderCell,
   TableRow,
   TruncatedWideTableCell,
-} from '../components/core/Table';
-import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
-import { createFastMutation } from '../hooks/useFastMutation';
-import { showDialog } from '../lib/dialog';
-import { jotaiStore } from '../lib/jotai';
-import { pluralizeCount } from '../lib/pluralize';
-import { showPrompt } from '../lib/prompt';
-import { resolvedModelNameWithFolders } from '../lib/resolvedModelName';
+} from "@yaakapp-internal/ui";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { hideDialog, showDialog } from "../lib/dialog";
+import { jotaiStore } from "../lib/jotai";
+import { showPrompt } from "../lib/prompt";
+import { resolvedModelNameWithFolders } from "../lib/resolvedModelName";
+import { showToast } from "../lib/toast";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 export const createFolder = createFastMutation<
   string | null,
   void,
-  Partial<Pick<Folder, 'name' | 'sortPriority' | 'folderId'>>
+  Partial<Pick<Folder, "name" | "sortPriority" | "folderId">>
 >({
-  mutationKey: ['create_folder'],
+  mutationKey: ["create_folder"],
   mutationFn: async (patch) => {
     const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
     if (workspaceId == null) {
@@ -34,12 +35,12 @@ export const createFolder = createFastMutation<
 
     if (!patch.name) {
       const name = await showPrompt({
-        id: 'new-folder',
-        label: 'Name',
-        defaultValue: 'Folder',
-        title: 'New Folder',
-        confirmText: 'Create',
-        placeholder: 'Name',
+        id: "new-folder",
+        label: "Name",
+        defaultValue: "Folder",
+        title: "New Folder",
+        confirmText: "Create",
+        placeholder: "Name",
       });
       if (name == null) return null;
 
@@ -47,54 +48,76 @@ export const createFolder = createFastMutation<
     }
 
     patch.sortPriority = patch.sortPriority || -Date.now();
-    const id = await createWorkspaceModel({ model: 'folder', workspaceId, ...patch });
+    const id = await createWorkspaceModel({ model: "folder", workspaceId, ...patch });
     return id;
   },
 });
 
+// Files can keep changing under a plan, so stop recalculating after a few stale applies.
+const MAX_SYNC_ATTEMPTS = 3;
+
+function showStaleSyncToast() {
+  showToast({
+    id: "sync-stale",
+    color: "warning",
+    message: "Files changed while syncing. Review the changes again.",
+  });
+}
+
 export const syncWorkspace = createFastMutation<
   void,
   void,
-  { workspaceId: string; syncDir: string; force?: boolean }
+  { workspaceId: string; syncDir: string; force?: boolean; attempt?: number }
 >({
   mutationKey: [],
-  mutationFn: async ({ workspaceId, syncDir, force }) => {
+  mutationFn: async ({ workspaceId, syncDir, force, attempt = 1 }) => {
     const ops = (await calculateSync(workspaceId, syncDir)) ?? [];
     if (ops.length === 0) {
-      console.log('Nothing to sync', workspaceId, syncDir);
+      console.log("Nothing to sync", workspaceId, syncDir);
+      hideDialog("commit-sync");
       return;
     }
-    console.log('Syncing workspace', workspaceId, syncDir, ops);
+    console.log("Syncing workspace", workspaceId, syncDir, ops);
 
-    const dbOps = ops.filter((o) => o.type.startsWith('db'));
+    const dbOps = ops.filter((o) => o.type.startsWith("db"));
 
-    if (dbOps.length === 0) {
-      await applySync(workspaceId, syncDir, ops);
+    const apply = async () => {
+      if (await applySync(workspaceId, syncDir, ops)) {
+        hideDialog("commit-sync");
+      } else if (attempt < MAX_SYNC_ATTEMPTS) {
+        await syncWorkspace.mutateAsync({ workspaceId, syncDir, force, attempt: attempt + 1 });
+      } else {
+        hideDialog("commit-sync");
+        showStaleSyncToast();
+      }
+    };
+
+    if (dbOps.length === 0 || force) {
+      hideDialog("commit-sync");
+      await apply();
       return;
     }
 
     const isDeletingWorkspace = ops.some(
-      (o) => o.type === 'dbDelete' && o.model.model === 'workspace',
+      (o) => o.type === "dbDelete" && o.model.model === "workspace",
     );
 
-    console.log('Directory changes detected', { dbOps, ops });
+    console.log("Directory changes detected", { dbOps, ops });
 
-    if (force) {
-      await applySync(workspaceId, syncDir, ops);
-      return;
+    if (attempt > 1) {
+      showStaleSyncToast();
     }
 
     showDialog({
-      id: 'commit-sync',
-      title: 'Changes Detected',
-      size: 'md',
+      id: "commit-sync",
+      title: "Changes Detected",
+      size: "md",
       render: ({ hide }) => (
         <form
           className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3"
           onSubmit={async (e) => {
             e.preventDefault();
-            await applySync(workspaceId, syncDir, ops);
-            hide();
+            await apply();
           }}
         >
           {isDeletingWorkspace ? (
@@ -105,8 +128,8 @@ export const syncWorkspace = createFastMutation<
             <span />
           )}
           <p>
-            {pluralizeCount('file', dbOps.length)} in the directory{' '}
-            {dbOps.length === 1 ? 'has' : 'have'} changed. Do you want to update your workspace?
+            {pluralizeCount("file", dbOps.length)} in the directory{" "}
+            {dbOps.length === 1 ? "has" : "have"} changed. Do you want to update your workspace?
           </p>
           <Table scrollable className="my-4">
             <TableHead>
@@ -123,27 +146,27 @@ export const syncWorkspace = createFastMutation<
                 let color: string;
                 let model: string;
 
-                if (op.type === 'dbCreate') {
-                  label = 'create';
+                if (op.type === "dbCreate") {
+                  label = "create";
                   name = resolvedModelNameWithFolders(op.fs.model);
-                  color = 'text-success';
+                  color = "text-success";
                   model = modelTypeLabel(op.fs.model);
-                } else if (op.type === 'dbUpdate') {
-                  label = 'update';
+                } else if (op.type === "dbUpdate") {
+                  label = "update";
                   name = resolvedModelNameWithFolders(op.fs.model);
-                  color = 'text-info';
+                  color = "text-info";
                   model = modelTypeLabel(op.fs.model);
-                } else if (op.type === 'dbDelete') {
-                  label = 'delete';
+                } else if (op.type === "dbDelete") {
+                  label = "delete";
                   name = resolvedModelNameWithFolders(op.model);
-                  color = 'text-danger';
+                  color = "text-danger";
                   model = modelTypeLabel(op.model);
                 } else {
                   return null;
                 }
 
                 return (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: none
+                  // oxlint-disable-next-line react/no-array-index-key
                   <TableRow key={i}>
                     <TableCell className="text-text-subtle">{model}</TableCell>
                     <TruncatedWideTableCell>{name}</TruncatedWideTableCell>

apps/yaak-client/commands/createEnvironment.tsx

@@ -0,0 +1,63 @@
+import type { Environment } from "@yaakapp-internal/models";
+import { CreateEnvironmentDialog } from "../components/CreateEnvironmentDialog";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { showDialog } from "../lib/dialog";
+import { jotaiStore } from "../lib/jotai";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+
+/**
+ * Prompt for and create a sub-environment of the given base environment, resolving with the new
+ * environment's ID (or null if the dialog was dismissed). This does not change the workspace's
+ * active environment.
+ */
+export const createSubEnvironment = createFastMutation<string | null, unknown, Environment | null>({
+  mutationKey: ["create_environment"],
+  mutationFn: async (baseEnvironment) => {
+    if (baseEnvironment == null) {
+      throw new Error("No base environment passed");
+    }
+
+    const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+    if (workspaceId == null) {
+      throw new Error("Cannot create environment when no active workspace");
+    }
+
+    return new Promise<string | null>((resolve) => {
+      showDialog({
+        id: "new-environment",
+        title: "New Environment",
+        description: "Create multiple environments with different sets of variables",
+        size: "sm",
+        onClose: () => resolve(null),
+        render: ({ hide }) => (
+          <CreateEnvironmentDialog
+            workspaceId={workspaceId}
+            hide={hide}
+            onCreate={(id: string) => {
+              resolve(id);
+            }}
+          />
+        ),
+      });
+    });
+  },
+});
+
+/** Same as {@link createSubEnvironment}, but also makes the new environment the active one. */
+export const createSubEnvironmentAndActivate = createFastMutation<
+  string | null,
+  unknown,
+  Environment | null
+>({
+  mutationKey: ["create_environment_and_activate"],
+  mutationFn: (baseEnvironment) => createSubEnvironment.mutateAsync(baseEnvironment),
+  disableToastError: true, // Already shown by createSubEnvironment
+  onSuccess: async (environmentId) => {
+    if (environmentId == null) {
+      return; // Was not created
+    }
+
+    setWorkspaceSearchParams({ environment_id: environmentId });
+  },
+});

apps/yaak-client/commands/deleteWebsocketConnections.ts

@@ -1,8 +1,8 @@
-import type { WebsocketRequest } from '@yaakapp-internal/models';
-import { deleteWebsocketConnections as cmdDeleteWebsocketConnections } from '@yaakapp-internal/ws';
-import { createFastMutation } from '../hooks/useFastMutation';
+import type { WebsocketRequest } from "@yaakapp-internal/models";
+import { deleteWebsocketConnections as cmdDeleteWebsocketConnections } from "@yaakapp-internal/ws";
+import { createFastMutation } from "../hooks/useFastMutation";
 
 export const deleteWebsocketConnections = createFastMutation({
-  mutationKey: ['delete_websocket_connections'],
+  mutationKey: ["delete_websocket_connections"],
   mutationFn: async (request: WebsocketRequest) => cmdDeleteWebsocketConnections(request.id),
 });

apps/yaak-client/commands/importCurl.ts

@@ -0,0 +1,52 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { patchModelById } from "@yaakapp-internal/models";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
+import { createRequestAndNavigate } from "../lib/createRequestAndNavigate";
+import { jotaiStore } from "../lib/jotai";
+import { rpc } from "../lib/rpc";
+import { showToast } from "../lib/toast";
+
+export function looksLikeCurl(text: string) {
+  return text.trim().startsWith("curl ");
+}
+
+export const importCurl = createFastMutation<
+  void,
+  string,
+  { overwriteRequestId?: string; command: string }
+>({
+  mutationKey: ["import_curl"],
+  mutationFn: async ({ overwriteRequestId, command }) => {
+    const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+    const importedRequest: HttpRequest = await rpc("cmd_curl_to_request", {
+      command,
+      workspaceId,
+    });
+
+    let verb: string;
+    if (overwriteRequestId == null) {
+      verb = "Created";
+      await createRequestAndNavigate(importedRequest);
+    } else {
+      verb = "Updated";
+      await patchModelById(importedRequest.model, overwriteRequestId, (r: HttpRequest) => ({
+        ...importedRequest,
+        id: r.id,
+        createdAt: r.createdAt,
+        workspaceId: r.workspaceId,
+        folderId: r.folderId,
+        name: r.name,
+        sortPriority: r.sortPriority,
+      }));
+
+      setTimeout(() => wasUpdatedExternally(overwriteRequestId), 100);
+    }
+
+    showToast({
+      color: "success",
+      message: `${verb} request from Curl`,
+    });
+  },
+});

apps/yaak-client/commands/moveToWorkspace.tsx

@@ -1,28 +1,26 @@
-import type { GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
+import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
 
-import { MoveToWorkspaceDialog } from '../components/MoveToWorkspaceDialog';
-import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
-import { createFastMutation } from '../hooks/useFastMutation';
-import { pluralizeCount } from '../lib/pluralize';
-import { showDialog } from '../lib/dialog';
-import { jotaiStore } from '../lib/jotai';
+import { MoveToWorkspaceDialog } from "../components/MoveToWorkspaceDialog";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { showDialog } from "../lib/dialog";
+import { jotaiStore } from "../lib/jotai";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 export const moveToWorkspace = createFastMutation({
-  mutationKey: ['move_workspace'],
+  mutationKey: ["move_workspace"],
   mutationFn: async (requests: (HttpRequest | GrpcRequest | WebsocketRequest)[]) => {
     const activeWorkspaceId = jotaiStore.get(activeWorkspaceIdAtom);
     if (activeWorkspaceId == null) return;
     if (requests.length === 0) return;
 
     const title =
-      requests.length === 1
-        ? 'Move Request'
-        : `Move ${pluralizeCount('Request', requests.length)}`;
+      requests.length === 1 ? "Move Request" : `Move ${pluralizeCount("Request", requests.length)}`;
 
     showDialog({
-      id: 'change-workspace',
+      id: "change-workspace",
       title,
-      size: 'sm',
+      size: "sm",
       render: ({ hide }) => (
         <MoveToWorkspaceDialog
           onDone={hide}

apps/yaak-client/commands/openFolderSettings.tsx

@@ -0,0 +1,17 @@
+import { getModel } from "@yaakapp-internal/models";
+import type { FolderSettingsTab } from "../components/FolderSettingsDialog";
+import { FolderSettingsDialog } from "../components/FolderSettingsDialog";
+import { showDialog } from "../lib/dialog";
+
+export function openFolderSettings(folderId: string, tab?: FolderSettingsTab) {
+  const folder = getModel("folder", folderId);
+  if (folder == null) return;
+  showDialog({
+    id: "folder-settings",
+    title: null,
+    size: "lg",
+    className: "h-200",
+    noPadding: true,
+    render: () => <FolderSettingsDialog folderId={folderId} tab={tab} />,
+  });
+}

apps/yaak-client/commands/openSettings.tsx

@@ -0,0 +1,48 @@
+import { platform } from "@yaakapp-internal/platform";
+import type { SettingsTab, SettingsTabWithSubtab } from "../components/Settings/Settings";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { showDialog } from "../lib/dialog";
+import { jotaiStore } from "../lib/jotai";
+import { router } from "../lib/router";
+import { rpc } from "../lib/rpc";
+
+export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab | null>({
+  mutationKey: ["open_settings"],
+  mutationFn: async (tab) => {
+    const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+    if (workspaceId == null) return;
+
+    // Settings is its own window where the host has windows to give. Where it
+    // doesn't — a browser tab — it's a dialog like any other, so opening it
+    // doesn't take you away from the request you were working on.
+    if (!platform.capabilities.multiWindow) {
+      // Imported here so Settings stays out of the startup bundle, the way the
+      // route that renders it on desktop already keeps it
+      const { default: Settings } = await import("../components/Settings/Settings");
+      showDialog({
+        id: "settings",
+        size: "md",
+        className: "h-[calc(100vh-5rem)] max-h-150! overflow-hidden",
+        noPadding: true,
+        noScroll: true,
+        // Keyed so opening a specific tab while the dialog is already up moves to it
+        render: ({ hide }) => <Settings key={tab ?? "general"} tab={tab} hide={hide} />,
+      });
+      return;
+    }
+
+    const location = router.buildLocation({
+      to: "/workspaces/$workspaceId/settings",
+      params: { workspaceId },
+      search: { tab: (tab ?? undefined) as SettingsTab | undefined },
+    });
+
+    await rpc("cmd_new_child_window", {
+      url: location.href,
+      label: "settings",
+      title: "Yaak Settings",
+      innerSize: [750, 600],
+    });
+  },
+});

apps/yaak-client/commands/openWorkspaceFromSyncDir.tsx

@@ -0,0 +1,27 @@
+import { applySync, calculateSyncFsOnly } from "@yaakapp-internal/sync";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { showSimpleAlert } from "../lib/alert";
+import { router } from "../lib/router";
+
+export const openWorkspaceFromSyncDir = createFastMutation<void, void, string>({
+  mutationKey: [],
+  mutationFn: async (dir) => {
+    const ops = await calculateSyncFsOnly(dir);
+
+    const workspace = ops
+      .map((o) => (o.type === "dbCreate" && o.fs.model.type === "workspace" ? o.fs.model : null))
+      .filter((m) => m)[0];
+
+    if (workspace == null) {
+      showSimpleAlert("Failed to Open", "No workspace found in directory");
+      return;
+    }
+
+    await applySync(workspace.id, dir, ops, { fsOnly: true });
+
+    await router.navigate({
+      to: "/workspaces/$workspaceId",
+      params: { workspaceId: workspace.id },
+    });
+  },
+});

apps/yaak-client/commands/openWorkspaceSettings.tsx

@@ -0,0 +1,10 @@
+import type { WorkspaceSettingsTab } from "../components/WorkspaceSettingsDialog";
+import { WorkspaceSettingsDialog } from "../components/WorkspaceSettingsDialog";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { jotaiStore } from "../lib/jotai";
+
+export function openWorkspaceSettings(tab?: WorkspaceSettingsTab) {
+  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+  if (workspaceId == null) return;
+  WorkspaceSettingsDialog.show(workspaceId, tab);
+}

apps/yaak-client/commands/switchWorkspace.tsx

@@ -0,0 +1,46 @@
+import { platform } from "@yaakapp-internal/platform";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { getRecentCookieJars } from "../hooks/useRecentCookieJars";
+import { getRecentEnvironments } from "../hooks/useRecentEnvironments";
+import { getRecentRequests } from "../hooks/useRecentRequests";
+import { router } from "../lib/router";
+import { rpc } from "../lib/rpc";
+
+export const switchWorkspace = createFastMutation<
+  void,
+  unknown,
+  {
+    workspaceId: string;
+    inNewWindow: boolean;
+  }
+>({
+  mutationKey: ["open_workspace"],
+  mutationFn: async ({ workspaceId, inNewWindow }) => {
+    const environmentId = (await getRecentEnvironments(workspaceId))[0] ?? undefined;
+    const requestId = (await getRecentRequests(workspaceId))[0] ?? undefined;
+    const cookieJarId = (await getRecentCookieJars(workspaceId))[0] ?? undefined;
+    const search = {
+      environment_id: environmentId,
+      cookie_jar_id: cookieJarId,
+      request_id: requestId,
+    };
+
+    // A host without windows opens the workspace here instead. Refusing would
+    // strand the user on the workspace they were trying to leave.
+    if (inNewWindow && platform.capabilities.multiWindow) {
+      const location = router.buildLocation({
+        to: "/workspaces/$workspaceId",
+        params: { workspaceId },
+        search,
+      });
+      await rpc<void>("cmd_new_main_window", { url: location.href });
+      return;
+    }
+
+    await router.navigate({
+      to: "/workspaces/$workspaceId",
+      params: { workspaceId },
+      search,
+    });
+  },
+});

apps/yaak-client/components/BinaryFileEditor.tsx

@@ -1,17 +1,15 @@
-import type { HttpRequest } from '@yaakapp-internal/models';
-import mime from 'mime';
-import { useKeyValue } from '../hooks/useKeyValue';
-import { Banner } from './core/Banner';
-import { Button } from './core/Button';
-import { InlineCode } from './core/InlineCode';
-import { HStack, VStack } from './core/Stacks';
-import { SelectFile } from './SelectFile';
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { Banner, HStack, InlineCode, VStack } from "@yaakapp-internal/ui";
+import mime from "mime";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { Button } from "./core/Button";
+import { SelectFile } from "./SelectFile";
 
 type Props = {
   requestId: string;
   contentType: string | null;
-  body: HttpRequest['body'];
-  onChange: (body: HttpRequest['body']) => void;
+  body: HttpRequest["body"];
+  onChange: (body: HttpRequest["body"]) => void;
   onChangeContentType: (contentType: string | null) => void;
 };
 
@@ -23,8 +21,8 @@ export function BinaryFileEditor({
   requestId,
 }: Props) {
   const ignoreContentType = useKeyValue<boolean>({
-    namespace: 'global',
-    key: ['ignore_content_type', requestId],
+    namespace: "global",
+    key: ["ignore_content_type", requestId],
     fallback: false,
   });
 
@@ -33,14 +31,14 @@ export function BinaryFileEditor({
     onChange({ filePath: filePath ?? undefined });
   };
 
-  const filePath = typeof body.filePath === 'string' ? body.filePath : null;
-  const mimeType = mime.getType(filePath ?? '') ?? 'application/octet-stream';
+  const filePath = typeof body.filePath === "string" ? body.filePath : null;
+  const mimeType = mime.getType(filePath ?? "") ?? "application/octet-stream";
 
   return (
     <VStack space={2}>
       <SelectFile onChange={handleChange} filePath={filePath} />
       {filePath != null && mimeType !== contentType && !ignoreContentType.value && (
-        <Banner className="mt-3 !py-5">
+        <Banner className="mt-3 py-5!">
           <div className="mb-4 text-center">
             <div>Set Content-Type header</div>
             <InlineCode>{mimeType}</InlineCode> for current request?

apps/yaak-client/components/CargoFeature.tsx

@@ -1,12 +1,12 @@
-import type { ReactNode } from 'react';
-import { appInfo } from '../lib/appInfo';
+import type { ReactNode } from "react";
+import { appInfo } from "../lib/appInfo";
 
 interface Props {
   children: ReactNode;
-  feature: 'updater' | 'license';
+  feature: "updater" | "license";
 }
 
-const featureMap: Record<Props['feature'], boolean> = {
+const featureMap: Record<Props["feature"], boolean> = {
   updater: appInfo.featureUpdater,
   license: appInfo.featureLicense,
 };

apps/yaak-client/components/ClientEditorHost.tsx

@@ -0,0 +1,99 @@
+import { platform } from "@yaakapp-internal/platform";
+import {
+  Banner,
+  type EditorHost,
+  EditorHostProvider,
+  EmptyStateText,
+  type HostBodyViewerArgs,
+  type HttpBodyLoader,
+  LoadingIcon,
+  type StoredValue,
+  type StoredValueNamespace,
+} from "@yaakapp-internal/ui";
+import { lazy, type ReactNode, Suspense } from "react";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { copyToClipboard } from "../lib/copy";
+import { showDialog } from "../lib/dialog";
+import { showPrompt } from "../lib/prompt";
+import { useDetailsBannerStoredValue } from "./core/DetailsBanner";
+import { Editor } from "./core/Editor/LazyEditor";
+import { Input } from "./core/Input";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { MultipartViewer } from "./responseViewers/MultipartViewer";
+import { TextViewer } from "./responseViewers/TextViewer";
+import { SelectFile } from "./SelectFile";
+
+const PdfViewer = lazy(() =>
+  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
+);
+
+function useClientStoredValue<T extends StoredValue>(
+  key: string | string[] | null,
+  fallback: T,
+  namespace: StoredValueNamespace = "global",
+) {
+  // A null key is never written by the shared components, so any stable key will do
+  const { value, set } = useKeyValue<T>({ namespace, key: key ?? ["tabs", "default"], fallback });
+  return [value ?? fallback, set] as const;
+}
+
+function renderBodyViewer({ source, mimeType, body, complete }: HostBodyViewerArgs) {
+  if (!mimeType?.match(/pdf/i)) return null;
+  return source === "response" ? (
+    <PdfResponseBody body={body} complete={complete} />
+  ) : (
+    <PdfRequestBody body={body} />
+  );
+}
+
+/** Waits for the whole response, then loads the PDF from its file */
+function PdfResponseBody({ body, complete }: { body: HttpBodyLoader; complete: boolean }) {
+  const bodyUrl = body.useUrl(complete);
+
+  if (!complete || bodyUrl.isLoading) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+  if (bodyUrl.error) {
+    return <Banner color="danger">{String(bodyUrl.error)}</Banner>;
+  }
+  if (bodyUrl.data == null) {
+    return <div>Empty response body</div>;
+  }
+  return <PdfViewer bodyUrl={bodyUrl.data} />;
+}
+
+function PdfRequestBody({ body }: { body: HttpBodyLoader }) {
+  const bytes = body.useBytes();
+  if (bytes.data == null) return null;
+  return (
+    <Suspense fallback={<LoadingIcon />}>
+      <PdfViewer data={bytes.data} />
+    </Suspense>
+  );
+}
+
+const clientEditorHost: EditorHost = {
+  Editor,
+  Input,
+  SelectFile,
+  showDialog,
+  showPrompt,
+  basename: (path) => platform.files.basename(path),
+  useStoredValue: useClientStoredValue,
+  useDetailsBannerStoredValue,
+  ErrorBoundary,
+  TextViewer,
+  MultipartViewer,
+  renderBodyViewer,
+  openUrl: (url) => platform.openUrl(url),
+  copy: (text) => copyToClipboard(text, { disableToast: true }),
+};
+
+/** Gives the shared editing components the client's templated editor, dialogs and storage */
+export function ClientEditorHost({ children }: { children: ReactNode }) {
+  return <EditorHostProvider value={clientEditorHost}>{children}</EditorHostProvider>;
+}

apps/yaak-client/components/CloneGitRepositoryDialog.tsx

@@ -1,16 +1,16 @@
-import { open } from '@tauri-apps/plugin-dialog';
-import { gitClone } from '@yaakapp-internal/git';
-import { useState } from 'react';
-import { openWorkspaceFromSyncDir } from '../commands/openWorkspaceFromSyncDir';
-import { appInfo } from '../lib/appInfo';
-import { showErrorToast } from '../lib/toast';
-import { Banner } from './core/Banner';
-import { Button } from './core/Button';
-import { Checkbox } from './core/Checkbox';
-import { IconButton } from './core/IconButton';
-import { PlainInput } from './core/PlainInput';
-import { VStack } from './core/Stacks';
-import { promptCredentials } from './git/credentials';
+import { gitClone } from "@yaakapp-internal/git";
+import { Banner, VStack } from "@yaakapp-internal/ui";
+import { useId, useState } from "react";
+import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
+import { appInfo } from "../lib/appInfo";
+import { CommercialUseBanner } from "./CommercialUseBanner";
+import { showErrorToast } from "../lib/toast";
+import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
+import { promptCredentials } from "./git/credentials";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   hide: () => void;
@@ -18,17 +18,18 @@ interface Props {
 
 // Detect path separator from an existing path (defaults to /)
 function getPathSeparator(path: string): string {
-  return path.includes('\\') ? '\\' : '/';
+  return path.includes("\\") ? "\\" : "/";
 }
 
 export function CloneGitRepositoryDialog({ hide }: Props) {
-  const [url, setUrl] = useState<string>('');
+  const [url, setUrl] = useState<string>("");
   const [baseDirectory, setBaseDirectory] = useState<string>(appInfo.defaultProjectDir);
   const [directoryOverride, setDirectoryOverride] = useState<string | null>(null);
   const [hasSubdirectory, setHasSubdirectory] = useState(false);
-  const [subdirectory, setSubdirectory] = useState<string>('');
+  const [subdirectory, setSubdirectory] = useState<string>("");
   const [isCloning, setIsCloning] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const formId = useId();
 
   const repoName = extractRepoName(url);
   const sep = getPathSeparator(baseDirectory);
@@ -38,8 +39,8 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
     hasSubdirectory && subdirectory ? `${directory}${sep}${subdirectory}` : directory;
 
   const handleSelectDirectory = async () => {
-    const dir = await open({
-      title: 'Select Directory',
+    const dir = await platform.dialog.open({
+      title: "Select Directory",
       directory: true,
       multiple: false,
     });
@@ -59,9 +60,9 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
     try {
       const result = await gitClone(url, directory, promptCredentials);
 
-      if (result.type === 'needs_credentials') {
+      if (result.type === "needs_credentials") {
         setError(
-          result.error ?? 'Authentication failed. Please check your credentials and try again.',
+          result.error ?? "Authentication failed. Please check your credentials and try again.",
         );
         return;
       }
@@ -73,8 +74,8 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
     } catch (err) {
       setError(String(err));
       showErrorToast({
-        id: 'git-clone-error',
-        title: 'Clone Failed',
+        id: "git-clone-error",
+        title: "Clone Failed",
         message: String(err),
       });
     } finally {
@@ -83,13 +84,15 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
   };
 
   return (
-    <VStack as="form" space={3} alignItems="start" className="pb-3" onSubmit={handleClone}>
+    <VStack as="form" id={formId} space={3} alignItems="start" onSubmit={handleClone}>
       {error && (
         <Banner color="danger" className="w-full">
           {error}
         </Banner>
       )}
 
+      <CommercialUseBanner source="git-clone" title="Using Git for work?" />
+
       <PlainInput
         required
         label="Repository URL"
@@ -106,7 +109,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
         rightSlot={
           <IconButton
             size="xs"
-            className="mr-0.5 !h-auto my-0.5"
+            className="mr-0.5 h-auto! my-0.5"
             icon="folder"
             title="Browse"
             onClick={handleSelectDirectory}
@@ -130,15 +133,17 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
         />
       )}
 
-      <Button
-        type="submit"
-        color="primary"
-        className="w-full mt-3"
-        disabled={!url || !directory || isCloning}
-        isLoading={isCloning}
-      >
-        {isCloning ? 'Cloning...' : 'Clone Repository'}
-      </Button>
+      <DialogFooter
+        actions={[
+          {
+            label: isCloning ? "Cloning..." : "Clone Repository",
+            color: "primary",
+            form: formId,
+            disabled: !url || !directory || isCloning,
+            isLoading: isCloning,
+          },
+        ]}
+      />
     </VStack>
   );
 }
@@ -157,5 +162,5 @@ function extractRepoName(url: string): string {
   if (sshMatch?.[1]) {
     return sshMatch[1];
   }
-  return '';
+  return "";
 }

apps/yaak-client/components/ColorIndicator.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import type { CSSProperties } from 'react';
+import classNames from "classnames";
+import type { CSSProperties } from "react";
 
 interface Props {
   color: string | null;
@@ -11,7 +11,7 @@ export function ColorIndicator({ color, onClick, className }: Props) {
   const style: CSSProperties = { backgroundColor: color ?? undefined };
   const finalClassName = classNames(
     className,
-    'inline-block w-[0.75em] h-[0.75em] rounded-full mr-1.5 border border-transparent flex-shrink-0',
+    "inline-block w-[0.75em] h-[0.75em] rounded-full mr-1.5 border border-transparent shrink-0",
   );
 
   if (onClick) {
@@ -20,7 +20,7 @@ export function ColorIndicator({ color, onClick, className }: Props) {
         type="button"
         onClick={onClick}
         style={style}
-        className={classNames(finalClassName, 'hover:border-text')}
+        className={classNames(finalClassName, "hover:border-text")}
       />
     );
   }

apps/yaak-client/components/CommandPaletteDialog.tsx

@@ -1,7 +1,8 @@
-import { workspacesAtom } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { fuzzyFilter } from 'fuzzbunny';
-import { useAtomValue } from 'jotai';
+import { workspacesAtom } from "@yaakapp-internal/models";
+import { Heading, Icon, useDebouncedState } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { fuzzyFilter } from "fuzzbunny";
+import { useAtomValue } from "jotai";
 import {
   Fragment,
   type KeyboardEvent,
@@ -10,46 +11,45 @@ import {
   useMemo,
   useRef,
   useState,
-} from 'react';
-import { createFolder } from '../commands/commands';
-import { createSubEnvironmentAndActivate } from '../commands/createEnvironment';
-import { openSettings } from '../commands/openSettings';
-import { switchWorkspace } from '../commands/switchWorkspace';
-import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
-import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
-import { useActiveRequest } from '../hooks/useActiveRequest';
-import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
-import { useAllRequests } from '../hooks/useAllRequests';
-import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
-import { useDebouncedState } from '../hooks/useDebouncedState';
-import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
-import { useGrpcRequestActions } from '../hooks/useGrpcRequestActions';
-import type { HotkeyAction } from '../hooks/useHotKey';
-import { useHttpRequestActions } from '../hooks/useHttpRequestActions';
-import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
-import { useRecentRequests } from '../hooks/useRecentRequests';
-import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
-import { useScrollIntoView } from '../hooks/useScrollIntoView';
-import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
-import { useSidebarHidden } from '../hooks/useSidebarHidden';
-import { createRequestAndNavigate } from '../lib/createRequestAndNavigate';
-import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm';
-import { showDialog } from '../lib/dialog';
-import { editEnvironment } from '../lib/editEnvironment';
-import { renameModelWithPrompt } from '../lib/renameModelWithPrompt';
+} from "react";
+import { createFolder } from "../commands/commands";
+import { createSubEnvironmentAndActivate } from "../commands/createEnvironment";
+import { openSettings } from "../commands/openSettings";
+import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
+import { switchWorkspace } from "../commands/switchWorkspace";
+import { useActiveCookieJar } from "../hooks/useActiveCookieJar";
+import { useActiveEnvironment } from "../hooks/useActiveEnvironment";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { useAllRequests } from "../hooks/useAllRequests";
+import { useCreateWorkspace } from "../hooks/useCreateWorkspace";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { useGrpcRequestActions } from "../hooks/useGrpcRequestActions";
+import type { HotkeyAction } from "../hooks/useHotKey";
+import { useHttpRequestActions } from "../hooks/useHttpRequestActions";
+import { useRecentEnvironments } from "../hooks/useRecentEnvironments";
+import { useRecentRequests } from "../hooks/useRecentRequests";
+import { useRecentWorkspaces } from "../hooks/useRecentWorkspaces";
+import { useScrollIntoView } from "../hooks/useScrollIntoView";
+import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
+import { useSidebarHidden } from "../hooks/useSidebarHidden";
+import { appInfo } from "../lib/appInfo";
+import { copyToClipboard } from "../lib/copy";
+import { createRequestAndNavigate } from "../lib/createRequestAndNavigate";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { editEnvironment } from "../lib/editEnvironment";
+import { renameModelWithPrompt } from "../lib/renameModelWithPrompt";
 import {
   resolvedModelNameWithFolders,
   resolvedModelNameWithFoldersArray,
-} from '../lib/resolvedModelName';
-import { router } from '../lib/router';
-import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
-import { CookieDialog } from './CookieDialog';
-import { Button } from './core/Button';
-import { Heading } from './core/Heading';
-import { Hotkey } from './core/Hotkey';
-import { HttpMethodTag } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
-import { PlainInput } from './core/PlainInput';
+} from "../lib/resolvedModelName";
+import { router } from "../lib/router";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+import { CookieDialog } from "./CookieDialog";
+import { Button } from "./core/Button";
+import { Hotkey } from "./core/Hotkey";
+import { HttpMethodTag } from "./core/HttpMethodTag";
+import { PlainInput } from "./core/PlainInput";
 
 interface CommandPaletteGroup {
   key: string;
@@ -66,7 +66,7 @@ type CommandPaletteItem = {
 const MAX_PER_GROUP = 8;
 
 export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
-  const [command, setCommand] = useDebouncedState<string>('', 150);
+  const [command, setCommand] = useDebouncedState<string>("", 150);
   const [selectedItemKey, setSelectedItemKey] = useState<string | null>(null);
   const activeEnvironment = useActiveEnvironment();
   const httpRequestActions = useHttpRequestActions();
@@ -94,74 +94,84 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
 
     const commands: CommandPaletteItem[] = [
       {
-        key: 'settings.open',
-        label: 'Open Settings',
-        action: 'settings.show',
+        key: "settings.open",
+        label: "Open Settings",
+        action: "settings.show",
         onSelect: () => openSettings.mutate(null),
       },
       {
-        key: 'app.create',
-        label: 'Create Workspace',
+        key: "workspace_settings.open",
+        label: "Open Workspace Settings",
+        action: "workspace_settings.show",
+        onSelect: () => openWorkspaceSettings(),
+      },
+      {
+        key: "app.create",
+        label: "Create Workspace",
         onSelect: createWorkspace,
       },
       {
-        key: 'model.create',
-        label: 'Create HTTP Request',
-        onSelect: () => createRequestAndNavigate({ model: 'http_request', workspaceId }),
+        key: "model.create",
+        label: "Create HTTP Request",
+        onSelect: () => createRequestAndNavigate({ model: "http_request", workspaceId }),
       },
       {
-        key: 'grpc_request.create',
-        label: 'Create GRPC Request',
-        onSelect: () => createRequestAndNavigate({ model: 'grpc_request', workspaceId }),
+        key: "grpc_request.create",
+        label: "Create GRPC Request",
+        onSelect: () => createRequestAndNavigate({ model: "grpc_request", workspaceId }),
       },
       {
-        key: 'websocket_request.create',
-        label: 'Create Websocket Request',
-        onSelect: () => createRequestAndNavigate({ model: 'websocket_request', workspaceId }),
+        key: "websocket_request.create",
+        label: "Create Websocket Request",
+        onSelect: () => createRequestAndNavigate({ model: "websocket_request", workspaceId }),
       },
       {
-        key: 'folder.create',
-        label: 'Create Folder',
+        key: "folder.create",
+        label: "Create Folder",
         onSelect: () => createFolder.mutate({}),
       },
       {
-        key: 'cookies.show',
-        label: 'Show Cookies',
+        key: "cookies.show",
+        label: "Show Cookies",
+        action: "cookies_editor.show",
         onSelect: async () => {
-          showDialog({
-            id: 'cookies',
-            title: 'Manage Cookies',
-            size: 'full',
-            render: () => <CookieDialog cookieJarId={activeCookieJar?.id ?? null} />,
-          });
+          CookieDialog.show(activeCookieJar?.id ?? null);
         },
       },
       {
-        key: 'environment.edit',
-        label: 'Edit Environment',
-        action: 'environment_editor.toggle',
+        key: "environment.edit",
+        label: "Edit Environment",
+        action: "environment_editor.toggle",
         onSelect: () => editEnvironment(activeEnvironment),
       },
       {
-        key: 'environment.create',
-        label: 'Create Environment',
+        key: "environment.create",
+        label: "Create Environment",
         onSelect: () => createSubEnvironmentAndActivate.mutate(baseEnvironment),
       },
       {
-        key: 'sidebar.toggle',
-        label: 'Toggle Sidebar',
-        action: 'sidebar.focus',
+        key: "sidebar.toggle",
+        label: "Toggle Sidebar",
+        action: "sidebar.focus",
         onSelect: () => setSidebarHidden((h) => !h),
       },
     ];
 
-    if (activeRequest?.model === 'http_request') {
+    if (activeRequest?.model === "http_request") {
       commands.push({
-        key: 'request.send',
-        action: 'request.send',
-        label: 'Send Request',
+        key: "request.send",
+        action: "request.send",
+        label: "Send Request",
         onSelect: () => sendRequest(activeRequest.id),
       });
+      if (appInfo.cliVersion != null) {
+        commands.push({
+          key: "request.copy_cli_send",
+          searchText: `copy cli send yaak request send ${activeRequest.id}`,
+          label: "Copy CLI Send Command",
+          onSelect: () => copyToClipboard(`yaak request send ${activeRequest.id}`),
+        });
+      }
       httpRequestActions.forEach((a, i) => {
         commands.push({
           key: `http_request_action.${i}`,
@@ -171,7 +181,7 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
       });
     }
 
-    if (activeRequest?.model === 'grpc_request') {
+    if (activeRequest?.model === "grpc_request") {
       grpcRequestActions.forEach((a, i) => {
         commands.push({
           key: `grpc_request_action.${i}`,
@@ -183,21 +193,21 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
 
     if (activeRequest != null) {
       commands.push({
-        key: 'http_request.rename',
-        label: 'Rename Request',
+        key: "http_request.rename",
+        label: "Rename Request",
         onSelect: () => renameModelWithPrompt(activeRequest),
       });
 
       commands.push({
-        key: 'sidebar.selected.delete',
-        label: 'Delete Request',
+        key: "sidebar.selected.delete",
+        label: "Delete Request",
         onSelect: () => deleteModelWithConfirm(activeRequest),
       });
     }
 
     return commands.sort((a, b) =>
-      ('searchText' in a ? a.searchText : a.label).localeCompare(
-        'searchText' in b ? b.searchText : b.label,
+      ("searchText" in a ? a.searchText : a.label).localeCompare(
+        "searchText" in b ? b.searchText : b.label,
       ),
     );
   }, [
@@ -274,14 +284,14 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
 
   const groups = useMemo<CommandPaletteGroup[]>(() => {
     const actionsGroup: CommandPaletteGroup = {
-      key: 'actions',
-      label: 'Actions',
+      key: "actions",
+      label: "Actions",
       items: workspaceCommands,
     };
 
     const requestGroup: CommandPaletteGroup = {
-      key: 'requests',
-      label: 'Switch Request',
+      key: "requests",
+      label: "Switch Request",
       items: [],
     };
 
@@ -295,14 +305,14 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
             {resolvedModelNameWithFoldersArray(r).map((name, i, all) => (
               <Fragment key={name}>
                 {i !== 0 && <Icon icon="chevron_right" className="opacity-80" />}
-                <div className={classNames(i < all.length - 1 && 'truncate')}>{name}</div>
+                <div className={classNames(i < all.length - 1 && "truncate")}>{name}</div>
               </Fragment>
             ))}
           </div>
         ),
         onSelect: async () => {
           await router.navigate({
-            to: '/workspaces/$workspaceId',
+            to: "/workspaces/$workspaceId",
             params: { workspaceId: r.workspaceId },
             search: (prev) => ({ ...prev, request_id: r.id }),
           });
@@ -311,8 +321,8 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
     }
 
     const environmentGroup: CommandPaletteGroup = {
-      key: 'environments',
-      label: 'Switch Environment',
+      key: "environments",
+      label: "Switch Environment",
       items: [],
     };
 
@@ -328,8 +338,8 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
     }
 
     const workspaceGroup: CommandPaletteGroup = {
-      key: 'workspaces',
-      label: 'Switch Workspace',
+      key: "workspaces",
+      label: "Switch Workspace",
       items: [],
     };
 
@@ -357,10 +367,10 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
       ? fuzzyFilter(
           allItems.map((i) => ({
             ...i,
-            filterBy: 'searchText' in i ? i.searchText : i.label,
+            filterBy: "searchText" in i ? i.searchText : i.label,
           })),
           command,
-          { fields: ['filterBy'] },
+          { fields: ["filterBy"] },
         )
           .sort((a, b) => b.score - a.score)
           .map((v) => v.item)
@@ -398,13 +408,13 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
       const index = filteredAllItems.findIndex((v) => v.key === selectedItem?.key);
-      if (e.key === 'ArrowDown' || (e.ctrlKey && e.key === 'n')) {
+      if (e.key === "ArrowDown" || (e.ctrlKey && e.key === "n")) {
         const next = filteredAllItems[index + 1] ?? filteredAllItems[0];
         setSelectedItemKey(next?.key ?? null);
-      } else if (e.key === 'ArrowUp' || (e.ctrlKey && e.key === 'k')) {
+      } else if (e.key === "ArrowUp" || (e.ctrlKey && e.key === "k")) {
         const prev = filteredAllItems[index - 1] ?? filteredAllItems[filteredAllItems.length - 1];
         setSelectedItemKey(prev?.key ?? null);
-      } else if (e.key === 'Enter') {
+      } else if (e.key === "Enter") {
         const selected = filteredAllItems[index];
         setSelectedItemKey(selected?.key ?? null);
         if (selected) {
@@ -429,7 +439,7 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
           name="command"
           label="Command"
           placeholder="Search or type a command"
-          className="font-sans !text-base"
+          className="font-sans text-base!"
           defaultValue={command}
           onChange={handleSetCommand}
           onKeyDownCapture={handleKeyDown}
@@ -438,7 +448,7 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
       <div className="h-full px-1.5 overflow-y-auto pt-2 pb-1">
         {filteredGroups.map((g) => (
           <div key={g.key} className="mb-1.5 w-full">
-            <Heading level={2} className="!text-xs uppercase px-1.5 h-sm flex items-center">
+            <Heading level={2} className="text-xs! uppercase px-1.5 h-sm flex items-center">
               {g.label}
             </Heading>
             {g.items.map((v) => (
@@ -481,10 +491,10 @@ function CommandPaletteItem({
       color="custom"
       justify="start"
       className={classNames(
-        'w-full h-sm flex items-center rounded px-1.5',
-        'hover:text-text',
-        active && 'bg-surface-highlight',
-        !active && 'text-text-subtle',
+        "w-full h-sm flex items-center rounded-sm px-1.5",
+        "hover:text-text",
+        active && "bg-surface-highlight",
+        !active && "text-text-subtle",
       )}
     >
       <span className="truncate">{children}</span>

apps/yaak-client/components/CommercialUseBanner.tsx

@@ -0,0 +1,129 @@
+import { checkLicense } from "@yaakapp-internal/license";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { appInfo } from "../lib/appInfo";
+import { pricingUrl } from "../lib/pricingUrl";
+import { DismissibleBanner } from "./core/DismissibleBanner";
+import { platform } from "@yaakapp-internal/platform";
+
+const COMMERCIAL_USE_SNOOZE_MS = 7 * 24 * 60 * 60 * 1000;
+const COMMERCIAL_USE_BANNER_MESSAGE =
+  "Personal use of Yaak is free. If you’re using Yaak at work, please purchase a license.";
+
+export function CommercialUseBanner({
+  source,
+  title,
+}: {
+  source: string;
+  title: string;
+}) {
+  const [visible, setVisible] = useState(false);
+  const snoozeStartedRef = useRef(false);
+  const {
+    isLoading: isSnoozeLoading,
+    set: setSnoozedAt,
+    value: snoozedAt,
+  } = useKeyValue<string | null>({
+    namespace: "global",
+    key: "commercial-use-banner-snoozed-at",
+    fallback: null,
+  });
+
+  useEffect(() => {
+    let canceled = false;
+
+    shouldShowCommercialUsePrompt()
+      .then((shouldShow) => {
+        if (!canceled) setVisible(shouldShow);
+      })
+      .catch(console.error);
+
+    return () => {
+      canceled = true;
+    };
+  }, [source]);
+
+  const snoozed = isSnoozed(snoozedAt, COMMERCIAL_USE_SNOOZE_MS);
+  const handleShow = useCallback(() => {
+    if (snoozeStartedRef.current || snoozed) {
+      return;
+    }
+
+    snoozeStartedRef.current = true;
+    setSnoozedAt(JSON.stringify({ source, at: new Date().toISOString() })).catch(console.error);
+  }, [setSnoozedAt, snoozed, source]);
+
+  if (!visible || isSnoozeLoading || (snoozed && !snoozeStartedRef.current)) {
+    return null;
+  }
+
+  return (
+    <div className="w-full">
+      <DismissibleBanner
+        id={`commercial-use:${source}`}
+        color="info"
+        className="w-full"
+        onDismiss={() =>
+          setSnoozedAt(JSON.stringify({ source, at: new Date().toISOString() }))
+        }
+        onShow={handleShow}
+        actions={[
+          {
+            label: "Purchase License",
+            color: "info",
+            variant: "solid",
+            onClick: () => {
+              openCommercialUsePricing(source).catch(console.error);
+            },
+          },
+        ]}
+      >
+        <div className="text-sm">
+          <p className="font-semibold text-text">{title}</p>
+          <p className="mt-0.5 text-text-subtle">{COMMERCIAL_USE_BANNER_MESSAGE}</p>
+        </div>
+      </DismissibleBanner>
+    </div>
+  );
+}
+
+async function shouldShowCommercialUsePrompt(): Promise<boolean> {
+  // Open-source builds omit the Rust license plugin, so never show commercial-use prompts there.
+  if (appInfo.featureLicense !== true) {
+    return false;
+  }
+
+  try {
+    const license = await checkLicense();
+    return license.status === "personal_use";
+  } catch (err) {
+    console.log("Failed to check license before commercial-use prompt", err);
+    return false;
+  }
+}
+
+async function openCommercialUsePricing(source: string): Promise<void> {
+  await platform.openUrl(pricingUrl(`app.commercial-use.${source}`)).catch(console.error);
+}
+
+function isSnoozed(value: string | null, ms: number): boolean {
+  if (value == null) return false;
+
+  try {
+    const snooze = JSON.parse(value) as { at?: unknown };
+    const at = typeof snooze.at === "string" ? snooze.at : null;
+    return isWithinMs(at, ms);
+  } catch {
+    // Older builds stored only the timestamp, so keep respecting that as a global snooze.
+    return isWithinMs(value, ms);
+  }
+}
+
+function isWithinMs(date: string | null, ms: number): boolean {
+  if (date == null) return false;
+
+  const time = new Date(date).getTime();
+  if (Number.isNaN(time)) return false;
+
+  return Date.now() - time < ms;
+}

apps/yaak-client/components/ConfirmLargeRequestBody.tsx

@@ -1,14 +1,11 @@
-import type { HttpRequest } from '@yaakapp-internal/models';
-import { patchModel } from '@yaakapp-internal/models';
-import type { ReactNode } from 'react';
-import { useToggle } from '../hooks/useToggle';
-import { showConfirm } from '../lib/confirm';
-import { Banner } from './core/Banner';
-import { Button } from './core/Button';
-import { InlineCode } from './core/InlineCode';
-import { Link } from './core/Link';
-import { SizeTag } from './core/SizeTag';
-import { HStack } from './core/Stacks';
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { useToggle } from "../hooks/useToggle";
+import { showConfirm } from "../lib/confirm";
+import { Button } from "./core/Button";
+import { Link } from "./core/Link";
 
 interface Props {
   children: ReactNode;
@@ -31,17 +28,17 @@ export function ConfirmLargeRequestBody({ children, request }: Props) {
     return (
       <Banner color="primary" className="flex flex-col gap-3">
         <p>
-          Rendering content over{' '}
+          Rendering content over{" "}
           <InlineCode>
             <SizeTag contentLength={tooLargeBytes} />
-          </InlineCode>{' '}
+          </InlineCode>{" "}
           may impact performance.
         </p>
         <p>
-          See{' '}
+          See{" "}
           <Link href="https://feedback.yaak.app/en/help/articles/1198684-working-with-large-values">
             Working With Large Values
-          </Link>{' '}
+          </Link>{" "}
           for tips.
         </p>
         <HStack wrap space={2}>
@@ -55,13 +52,13 @@ export function ConfirmLargeRequestBody({ children, request }: Props) {
             onClick={async () => {
               const confirm = await showConfirm({
                 id: `delete-body-${request.id}`,
-                confirmText: 'Delete Body',
-                title: 'Delete Body Text',
-                description: 'Are you sure you want to delete the request body text?',
-                color: 'danger',
+                confirmText: "Delete Body",
+                title: "Delete Body Text",
+                description: "Are you sure you want to delete the request body text?",
+                color: "danger",
               });
               if (confirm) {
-                await patchModel(request, { body: { ...request.body, text: '' } });
+                await patchModel(request, { body: { ...request.body, text: "" } });
               }
             }}
           >

apps/yaak-client/components/ContextMenus.tsx

@@ -0,0 +1,26 @@
+import { useAtomValue } from "jotai";
+import { contextMenusAtom, hideContextMenu } from "../lib/contextMenu";
+import { ContextMenu } from "./core/Dropdown";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+/** Renders menus opened by {@link showContextMenu}, the way {@link Dialogs} renders dialogs. */
+export function ContextMenus() {
+  const menus = useAtomValue(contextMenusAtom);
+  return (
+    <>
+      {menus.map(({ id, items, triggerPosition, triggerRect, triggerEl }) => (
+        <ErrorBoundary key={id} name={`ContextMenu ${id}`}>
+          <ContextMenu
+            items={items}
+            triggerPosition={triggerPosition}
+            triggerRect={triggerRect}
+            // The trigger isn't a React component here, so it arrives as an element and gets
+            // wrapped to look like the ref the menu expects
+            triggerRef={{ current: triggerEl ?? null }}
+            onClose={() => hideContextMenu(id)}
+          />
+        </ErrorBoundary>
+      ))}
+    </>
+  );
+}

apps/yaak-client/components/CookieDialog.tsx

@@ -0,0 +1,732 @@
+import type { Cookie } from "@yaakapp-internal/models";
+import { cookieJarsAtom, patchModel } from "@yaakapp-internal/models";
+import { formatDate } from "date-fns/format";
+import { useAtomValue } from "jotai";
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type FormEvent,
+  type ReactNode,
+  type RefObject,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { showDialog } from "../lib/dialog";
+import { jotaiStore } from "../lib/jotai";
+import { cookieDomain } from "../lib/model_util";
+import {
+  Icon,
+  SplitLayout,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+  KeyValueRows,
+} from "@yaakapp-internal/ui";
+import { IconButton } from "./core/IconButton";
+import { Checkbox } from "./core/Checkbox";
+import classNames from "classnames";
+import { EventDetailHeader } from "./core/EventViewer";
+import { KeyValueRow } from "./core/KeyValueRow";
+import { EmptyStateText } from "./EmptyStateText";
+import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
+import { showAlert } from "../lib/alert";
+
+interface Props {
+  cookieJarId: string | null;
+}
+
+export const CookieDialog = ({ cookieJarId }: Props) => {
+  const cookieJars = useAtomValue(cookieJarsAtom);
+  const cookieJar = cookieJars?.find((c) => c.id === cookieJarId);
+  const [filter, setFilter] = useState("");
+  const [filterUpdateKey, setFilterUpdateKey] = useState(0);
+  const [selectedCookieKey, setSelectedCookieKey] = useState<string | null>(null);
+  const [editingCookieKey, setEditingCookieKey] = useState<string | null>(null);
+  const [draftCookie, setDraftCookie] = useState<Cookie | null>(null);
+  const [draftExpiresInput, setDraftExpiresInput] = useState("");
+  const editorFormRef = useRef<HTMLFormElement>(null);
+  const filteredCookies = useMemo(() => {
+    return cookieJar?.cookies.filter((cookie) => cookieMatchesFilter(cookie, filter)) ?? [];
+  }, [cookieJar?.cookies, filter]);
+  const selectedCookie = useMemo(
+    () =>
+      selectedCookieKey == null
+        ? null
+        : (filteredCookies.find((cookie) => cookieKey(cookie) === selectedCookieKey) ?? null),
+    [filteredCookies, selectedCookieKey],
+  );
+  const detailCookie = draftCookie ?? selectedCookie;
+  const isCreatingCookie = editingCookieKey === NEW_COOKIE_KEY;
+  const isEditingCookie = draftCookie != null;
+
+  const handleAddCookie = () => {
+    setSelectedCookieKey(null);
+    setEditingCookieKey(NEW_COOKIE_KEY);
+    setDraftCookie(newCookieDraft());
+    setDraftExpiresInput("");
+  };
+
+  const handleEditCookie = () => {
+    if (selectedCookie == null) {
+      return;
+    }
+
+    setEditingCookieKey(cookieKey(selectedCookie));
+    setDraftCookie(selectedCookie);
+    setDraftExpiresInput(cookieExpiresInputValue(selectedCookie));
+  };
+
+  const handleCancelEdit = () => {
+    if (isCreatingCookie) {
+      setSelectedCookieKey(null);
+    }
+    setEditingCookieKey(null);
+    setDraftCookie(null);
+    setDraftExpiresInput("");
+  };
+
+  const handleCloseDetails = () => {
+    if (isEditingCookie) {
+      handleCancelEdit();
+      return;
+    }
+
+    setSelectedCookieKey(null);
+  };
+
+  const handleSaveCookie = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (cookieJar == null || draftCookie == null) {
+      return;
+    }
+
+    let nextCookie = normalizeCookie(draftCookie);
+    if (nextCookie.expires !== "SessionEnd") {
+      const expires = cookieExpiresFromInput(draftExpiresInput);
+      if (expires == null) {
+        showAlert({
+          id: "invalid-cookie-expires",
+          title: "Invalid Cookie",
+          body: "Cookie expiration must be a valid date.",
+        });
+        return;
+      }
+
+      nextCookie = { ...nextCookie, expires };
+    }
+
+    const nextCookieKey = cookieKey(nextCookie);
+    const nextCookies = cookieJar.cookies.filter((cookie) => {
+      const key = cookieKey(cookie);
+      if (editingCookieKey != null && key === editingCookieKey) {
+        return false;
+      }
+      return key !== nextCookieKey;
+    });
+
+    void patchModel(cookieJar, { cookies: [...nextCookies, nextCookie] });
+    setSelectedCookieKey(nextCookieKey);
+    setEditingCookieKey(null);
+    setDraftCookie(null);
+    setDraftExpiresInput("");
+  };
+
+  if (cookieJar == null) {
+    return <div>No cookie jar selected</div>;
+  }
+
+  return (
+    <div className="pb-2 grid grid-rows-[auto_minmax(0,1fr)] space-y-2">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
+        <PlainInput
+          name="cookie-filter"
+          label="Filter cookies"
+          hideLabel
+          placeholder="Filter cookies"
+          defaultValue={filter}
+          forceUpdateKey={filterUpdateKey}
+          onChange={setFilter}
+          rightSlot={
+            filter.length > 0 && (
+              <IconButton
+                className="bg-transparent! h-auto! min-h-full opacity-50 hover:opacity-100 -mr-1"
+                icon="x"
+                title="Clear filter"
+                onClick={() => {
+                  setFilter("");
+                  setFilterUpdateKey((key) => key + 1);
+                }}
+              />
+            )
+          }
+        />
+        <IconButton icon="plus" size="sm" title="Add cookie" onClick={handleAddCookie} />
+      </div>
+      {cookieJar.cookies.length === 0 && detailCookie == null ? (
+        <EmptyStateText>
+          Cookies will appear when a response includes a Set-Cookie header.
+        </EmptyStateText>
+      ) : filteredCookies.length === 0 && detailCookie == null ? (
+        <EmptyStateText>No cookies match the current filter.</EmptyStateText>
+      ) : (
+        <SplitLayout
+          layout="vertical"
+          storageKey="cookie-dialog-details"
+          defaultRatio={0.5}
+          className="-mx-2"
+          minHeightPx={10}
+          firstSlot={({ style }) =>
+            filteredCookies.length === 0 ? (
+              <div style={style}>
+                <EmptyStateText>No cookies match the current filter.</EmptyStateText>
+              </div>
+            ) : (
+              <Table scrollable style={style} className="pr-0.5">
+                <TableHead>
+                  <TableRow>
+                    <TableHeaderCell>Name</TableHeaderCell>
+                    <TableHeaderCell>Value</TableHeaderCell>
+                    <TableHeaderCell>Domain</TableHeaderCell>
+                    <TableHeaderCell>Path</TableHeaderCell>
+                    <TableHeaderCell>Expires</TableHeaderCell>
+                    <TableHeaderCell>Size</TableHeaderCell>
+                    <TableHeaderCell>HTTP Only</TableHeaderCell>
+                    <TableHeaderCell>Secure</TableHeaderCell>
+                    <TableHeaderCell>Same Site</TableHeaderCell>
+                    <TableHeaderCell>
+                      <IconButton
+                        icon="list_x"
+                        size="sm"
+                        className="text-text-subtle"
+                        title="Clear all cookies"
+                        onClick={() => {
+                          setSelectedCookieKey(null);
+                          setEditingCookieKey(null);
+                          setDraftCookie(null);
+                          setDraftExpiresInput("");
+                          void patchModel(cookieJar, { cookies: [] });
+                        }}
+                      />
+                    </TableHeaderCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody className="[&_td]:select-auto [&_td]:cursor-auto">
+                  {filteredCookies.map((c: Cookie) => {
+                    const key = cookieKey(c);
+                    const isSelected = key === selectedCookieKey;
+
+                    return (
+                      <TableRow
+                        key={key}
+                        className={classNames(
+                          "group/tr cursor-default",
+                          isSelected && "[&_td]:bg-surface-highlight",
+                          !isSelected && "hover:[&_td]:bg-surface-hover",
+                        )}
+                        onClick={() => {
+                          setSelectedCookieKey(key);
+                          setEditingCookieKey(null);
+                          setDraftCookie(null);
+                          setDraftExpiresInput("");
+                        }}
+                      >
+                        <TableCell className={classNames("pl-2", isSelected && "rounded-l")}>
+                          {c.name}
+                        </TableCell>
+                        <TruncatedWideTableCell className="min-w-40">
+                          {c.value}
+                        </TruncatedWideTableCell>
+                        <TableCell>{cookieDomain(c)}</TableCell>
+                        <TableCell>{c.path}</TableCell>
+                        <TableCell>{cookieExpires(c)}</TableCell>
+                        <TableCell>{cookieSize(c)}</TableCell>
+                        <TableCell>
+                          <Icon
+                            icon={c.httpOnly ? "check" : "x"}
+                            className={classNames(!c.httpOnly && "opacity-10")}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Icon
+                            icon={c.secure ? "check" : "x"}
+                            className={classNames(!c.secure && "opacity-10")}
+                          />
+                        </TableCell>
+                        <TableCell>{c.sameSite}</TableCell>
+                        <TableCell className="rounded-r pr-2">
+                          <IconButton
+                            icon="trash"
+                            size="xs"
+                            iconSize="sm"
+                            title="Delete"
+                            className="text-text-subtlest ml-auto group-hover/tr:text-text transition-colors"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              if (isSelected) {
+                                setSelectedCookieKey(null);
+                              }
+                              if (editingCookieKey === key) {
+                                setEditingCookieKey(null);
+                                setDraftCookie(null);
+                                setDraftExpiresInput("");
+                              }
+                              void patchModel(cookieJar, {
+                                cookies: cookieJar.cookies.filter(
+                                  (c2: Cookie) => cookieKey(c2) !== key,
+                                ),
+                              });
+                            }}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )
+          }
+          secondSlot={
+            detailCookie == null
+              ? null
+              : ({ style }) => (
+                  <CookieDetailsPane
+                    formRef={editorFormRef}
+                    isEditing={isEditingCookie}
+                    onSubmit={handleSaveCookie}
+                    style={style}
+                  >
+                    <EventDetailHeader
+                      title={isCreatingCookie ? "New Cookie" : detailCookie.name || "Cookie"}
+                      copyText={isEditingCookie ? undefined : detailCookie.value}
+                      actions={
+                        isEditingCookie
+                          ? [
+                              {
+                                key: "save",
+                                label: isCreatingCookie ? "Create" : "Save",
+                                onClick: () => editorFormRef.current?.requestSubmit(),
+                              },
+                              {
+                                key: "cancel",
+                                label: "Cancel",
+                                onClick: handleCancelEdit,
+                              },
+                            ]
+                          : [
+                              {
+                                key: "edit",
+                                label: "Edit",
+                                onClick: handleEditCookie,
+                              },
+                            ]
+                      }
+                      onClose={handleCloseDetails}
+                    />
+                    {isEditingCookie ? (
+                      <CookieEditor
+                        cookie={detailCookie}
+                        expiresInputValue={draftExpiresInput}
+                        onChange={setDraftCookie}
+                        onExpiresInputChange={setDraftExpiresInput}
+                      />
+                    ) : (
+                      <CookieDetails cookie={detailCookie} />
+                    )}
+                  </CookieDetailsPane>
+                )
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+function CookieDetailsPane({
+  children,
+  formRef,
+  isEditing,
+  onSubmit,
+  style,
+}: {
+  children: ReactNode;
+  formRef: RefObject<HTMLFormElement | null>;
+  isEditing: boolean;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  style: CSSProperties;
+}) {
+  const className = "grid grid-rows-[auto_minmax(0,1fr)] bg-surface border-t border-border pt-2";
+
+  if (isEditing) {
+    return (
+      <form ref={formRef} style={style} className={className} onSubmit={onSubmit}>
+        {children}
+      </form>
+    );
+  }
+
+  return (
+    <div style={style} className={className}>
+      {children}
+    </div>
+  );
+}
+
+CookieDialog.show = (cookieJarId: string | null) => {
+  const cookieJar = jotaiStore.get(cookieJarsAtom)?.find((jar) => jar.id === cookieJarId);
+  if (cookieJar == null) {
+    showAlert({
+      id: "invalid-jar",
+      body: `Failed to find cookie jar for ID: ${cookieJarId}`,
+      title: "Invalid Cookie Jar",
+    });
+    return;
+  }
+
+  showDialog({
+    id: "cookies",
+    title: `${cookieJar.name} Cookies`,
+    size: "full",
+    render: () => <CookieDialog cookieJarId={cookieJarId} />,
+  });
+};
+
+function CookieDetails({ cookie }: { cookie: Cookie }) {
+  return (
+    <div className="overflow-y-auto">
+      <KeyValueRows selectable>
+        <CookieKeyValueRow label="Name">{cookie.name}</CookieKeyValueRow>
+        <CookieKeyValueRow label="Value" enableCopy copyText={cookie.value}>
+          <pre className="whitespace-pre-wrap break-all">{cookie.value}</pre>
+        </CookieKeyValueRow>
+        <CookieKeyValueRow label="Domain">{cookieDomain(cookie)}</CookieKeyValueRow>
+        <CookieKeyValueRow label="Path">{cookie.path}</CookieKeyValueRow>
+        <CookieKeyValueRow label="Expires">{cookieExpires(cookie)}</CookieKeyValueRow>
+        <CookieKeyValueRow label="Size">{cookieSize(cookie)}</CookieKeyValueRow>
+        <CookieKeyValueRow label="HTTP Only">{cookie.httpOnly ? "Yes" : "No"}</CookieKeyValueRow>
+        <CookieKeyValueRow label="Secure">{cookie.secure ? "Yes" : "No"}</CookieKeyValueRow>
+        {cookie.sameSite && (
+          <CookieKeyValueRow label="Same Site">{cookie.sameSite}</CookieKeyValueRow>
+        )}
+      </KeyValueRows>
+    </div>
+  );
+}
+
+function CookieEditor({
+  cookie,
+  expiresInputValue,
+  onChange,
+  onExpiresInputChange,
+}: {
+  cookie: Cookie;
+  expiresInputValue: string;
+  onChange: (cookie: Cookie) => void;
+  onExpiresInputChange: (value: string) => void;
+}) {
+  const sessionCookie = cookie.expires === "SessionEnd";
+
+  return (
+    <div className="overflow-y-auto">
+      <KeyValueRows>
+        <CookieKeyValueRow align="middle" label="Name">
+          <CookieTextInput
+            required
+            autoFocus
+            pattern={NON_EMPTY_INPUT_PATTERN}
+            value={cookie.name}
+            onChange={(name) => onChange({ ...cookie, name })}
+          />
+        </CookieKeyValueRow>
+        <CookieKeyValueRow label="Value">
+          <CookieTextarea
+            value={cookie.value}
+            onChange={(value) => onChange({ ...cookie, value })}
+          />
+        </CookieKeyValueRow>
+        <CookieKeyValueRow align="middle" label="Domain">
+          <CookieTextInput
+            required
+            pattern={NON_EMPTY_INPUT_PATTERN}
+            value={cookieDomainInputValue(cookie)}
+            placeholder="example.com"
+            onChange={(domain) => onChange(cookieWithDomain(cookie, domain))}
+          />
+        </CookieKeyValueRow>
+        <CookieKeyValueRow align="middle" label="Path">
+          <CookieTextInput
+            value={cookie.path}
+            placeholder="/"
+            onChange={(path) => onChange({ ...cookie, path })}
+          />
+        </CookieKeyValueRow>
+        <CookieKeyValueRow label="Expires">
+          <div className="grid gap-1">
+            <Checkbox
+              checked={sessionCookie}
+              title="Session cookie"
+              onChange={(checked) => {
+                if (checked) {
+                  onChange({ ...cookie, expires: "SessionEnd" });
+                  return;
+                }
+
+                const expiresInput =
+                  cookieExpiresFromInput(expiresInputValue) == null
+                    ? defaultCookieExpiresInputValue()
+                    : expiresInputValue;
+
+                onExpiresInputChange(expiresInput);
+                onChange({
+                  ...cookie,
+                  expires: cookieExpiresFromInput(expiresInput)!,
+                });
+              }}
+            />
+            <CookieTextInput
+              value={sessionCookie ? "" : expiresInputValue}
+              disabled={sessionCookie}
+              onChange={(value) => {
+                onExpiresInputChange(value);
+
+                const expires = cookieExpiresFromInput(value);
+                if (expires != null) {
+                  onChange({ ...cookie, expires });
+                }
+              }}
+            />
+          </div>
+        </CookieKeyValueRow>
+        <CookieKeyValueRow label="Size">{cookieSize(cookie)}</CookieKeyValueRow>
+        <CookieKeyValueRow align="middle" label="HTTP Only">
+          <Checkbox
+            hideLabel
+            title="HTTP Only"
+            checked={cookie.httpOnly}
+            onChange={(httpOnly) => onChange({ ...cookie, httpOnly })}
+          />
+        </CookieKeyValueRow>
+        <CookieKeyValueRow align="middle" label="Secure">
+          <Checkbox
+            hideLabel
+            title="Secure"
+            checked={cookie.secure}
+            onChange={(secure) => onChange({ ...cookie, secure })}
+          />
+        </CookieKeyValueRow>
+        <CookieKeyValueRow align="middle" label="Same Site">
+          <Select
+            hideLabel
+            name="cookie-same-site"
+            label="Same Site"
+            value={cookie.sameSite ?? ""}
+            size="xs"
+            className="w-full"
+            options={[
+              { label: "n/a", value: "" },
+              { label: "Lax", value: "Lax" },
+              { label: "Strict", value: "Strict" },
+              { label: "None", value: "None" },
+            ]}
+            onChange={(sameSite) =>
+              onChange({
+                ...cookie,
+                sameSite: sameSite === "" ? null : (sameSite as Cookie["sameSite"]),
+              })
+            }
+          />
+        </CookieKeyValueRow>
+      </KeyValueRows>
+    </div>
+  );
+}
+
+function CookieKeyValueRow({ labelClassName, ...props }: ComponentProps<typeof KeyValueRow>) {
+  return <KeyValueRow labelClassName={classNames("w-28", labelClassName)} {...props} />;
+}
+
+function CookieTextInput({
+  autoFocus,
+  disabled,
+  onChange,
+  pattern,
+  placeholder,
+  required,
+  value,
+}: {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  pattern?: string;
+  placeholder?: string;
+  required?: boolean;
+  value: string;
+}) {
+  return (
+    <input
+      autoFocus={autoFocus}
+      autoCapitalize="off"
+      autoCorrect="off"
+      className={cookieInputClassName}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+      pattern={pattern}
+      placeholder={placeholder}
+      required={required}
+      type="text"
+      value={value}
+    />
+  );
+}
+
+function CookieTextarea({ onChange, value }: { onChange: (value: string) => void; value: string }) {
+  return (
+    <textarea
+      autoCapitalize="off"
+      autoCorrect="off"
+      className={classNames(cookieInputClassName, "min-h-20 resize-y")}
+      onChange={(event) => onChange(event.target.value)}
+      value={value}
+    />
+  );
+}
+
+const NEW_COOKIE_KEY = "__new-cookie__";
+const NON_EMPTY_INPUT_PATTERN = ".*\\S.*";
+const cookieInputClassName = classNames(
+  "x-theme-input w-full min-w-0 min-h-sm rounded-md bg-transparent",
+  "border border-border-subtle outline-hidden",
+  "px-2 text-xs font-mono cursor-text placeholder:text-placeholder",
+  "focus:border-border-focus invalid:border-danger",
+  "disabled:opacity-disabled disabled:border-dotted",
+);
+
+function cookieSize(cookie: Cookie) {
+  const encoder = new TextEncoder();
+  return encoder.encode(cookie.name).length + encoder.encode(cookie.value).length;
+}
+
+function newCookieDraft(): Cookie {
+  return {
+    name: "",
+    value: "",
+    domain: "NotPresent",
+    expires: "SessionEnd",
+    path: "/",
+    secure: false,
+    httpOnly: false,
+    sameSite: null,
+  };
+}
+
+function normalizeCookie(cookie: Cookie): Cookie {
+  return {
+    ...cookie,
+    domain: normalizeCookieDomain(cookie.domain),
+    name: cookie.name.trim(),
+    path: cookie.path.trim() || "/",
+  };
+}
+
+function normalizeCookieDomain(domain: Cookie["domain"]): Cookie["domain"] {
+  if (domain === "NotPresent" || domain === "Empty") {
+    return domain;
+  }
+
+  if ("Suffix" in domain) {
+    return { Suffix: domain.Suffix.trim() };
+  }
+
+  return { HostOnly: domain.HostOnly.trim() };
+}
+
+function cookieDomainInputValue(cookie: Cookie) {
+  const domain = cookieDomain(cookie);
+  return domain === "n/a" ? "" : domain;
+}
+
+function cookieWithDomain(cookie: Cookie, domain: string): Cookie {
+  const trimmedDomain = domain.trim();
+  if (trimmedDomain.length === 0) {
+    return { ...cookie, domain: "NotPresent" };
+  }
+
+  if (cookie.domain !== "NotPresent" && cookie.domain !== "Empty" && "Suffix" in cookie.domain) {
+    return { ...cookie, domain: { Suffix: trimmedDomain } };
+  }
+
+  return { ...cookie, domain: { HostOnly: trimmedDomain } };
+}
+
+function cookieExpires(cookie: Cookie) {
+  if (cookie.expires === "SessionEnd") {
+    return "Session";
+  }
+
+  const expiresSeconds = Number(cookie.expires.AtUtc);
+  if (!Number.isFinite(expiresSeconds)) {
+    return cookie.expires.AtUtc;
+  }
+
+  const date = new Date(expiresSeconds * 1000);
+  return formatDate(date, "MMM d, yyyy, h:mm:ss a");
+}
+
+function cookieExpiresInputValue(cookie: Cookie) {
+  if (cookie.expires === "SessionEnd") {
+    return "";
+  }
+
+  const expiresSeconds = Number(cookie.expires.AtUtc);
+  if (!Number.isFinite(expiresSeconds)) {
+    return "";
+  }
+
+  return new Date(expiresSeconds * 1000).toISOString();
+}
+
+function defaultCookieExpiresInputValue() {
+  return new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
+}
+
+function cookieExpiresFromInput(value: string): Cookie["expires"] | null {
+  const time = new Date(value).getTime();
+  if (!Number.isFinite(time)) {
+    return null;
+  }
+
+  return { AtUtc: `${Math.floor(time / 1000)}` };
+}
+
+function cookieMatchesFilter(cookie: Cookie, filter: string) {
+  const query = filter.trim().toLowerCase();
+  if (query.length === 0) {
+    return true;
+  }
+
+  return [cookie.name, cookie.value, cookieDomain(cookie)].some((value) =>
+    value.toLowerCase().includes(query),
+  );
+}
+
+function cookieKey(cookie: Cookie) {
+  return [cookie.name, cookieDomainKey(cookie.domain), cookie.path].join("|");
+}
+
+function cookieDomainKey(domain: Cookie["domain"]) {
+  if (typeof domain !== "string" && "HostOnly" in domain) {
+    return `HostOnly:${domain.HostOnly}`;
+  }
+
+  if (typeof domain !== "string" && "Suffix" in domain) {
+    return `Suffix:${domain.Suffix}`;
+  }
+
+  return domain;
+}

apps/yaak-client/components/CookieDropdown.tsx

@@ -1,17 +1,15 @@
-import { cookieJarsAtom, patchModel } from '@yaakapp-internal/models';
-import { useAtomValue } from 'jotai';
-import { memo, useMemo } from 'react';
-import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
-import { useCreateCookieJar } from '../hooks/useCreateCookieJar';
-import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm';
-import { showDialog } from '../lib/dialog';
-import { showPrompt } from '../lib/prompt';
-import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
-import { CookieDialog } from './CookieDialog';
-import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
-import { InlineCode } from './core/InlineCode';
+import { cookieJarsAtom, patchModel } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { memo, useMemo } from "react";
+import { useActiveCookieJar } from "../hooks/useActiveCookieJar";
+import { useCreateCookieJar } from "../hooks/useCreateCookieJar";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { showPrompt } from "../lib/prompt";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+import { CookieDialog } from "./CookieDialog";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { Icon, InlineCode } from "@yaakapp-internal/ui";
+import { IconButton } from "./core/IconButton";
 
 export const CookieDropdown = memo(function CookieDropdown() {
   const activeCookieJar = useActiveCookieJar();
@@ -23,44 +21,39 @@ export const CookieDropdown = memo(function CookieDropdown() {
       ...(cookieJars ?? []).map((j) => ({
         key: j.id,
         label: j.name,
-        leftSlot: <Icon icon={j.id === activeCookieJar?.id ? 'check' : 'empty'} />,
+        leftSlot: <Icon icon={j.id === activeCookieJar?.id ? "check" : "empty"} />,
         onSelect: () => {
           setWorkspaceSearchParams({ cookie_jar_id: j.id });
         },
       })),
       ...(((cookieJars ?? []).length > 0 && activeCookieJar != null
         ? [
-            { type: 'separator', label: activeCookieJar.name },
+            { type: "separator", label: activeCookieJar.name },
             {
-              key: 'manage',
-              label: 'Manage Cookies',
+              key: "manage",
+              label: "Manage Cookies",
               leftSlot: <Icon icon="cookie" />,
               onSelect: () => {
                 if (activeCookieJar == null) return;
-                showDialog({
-                  id: 'cookies',
-                  title: 'Manage Cookies',
-                  size: 'full',
-                  render: () => <CookieDialog cookieJarId={activeCookieJar.id} />,
-                });
+                CookieDialog.show(activeCookieJar.id);
               },
             },
             {
-              key: 'rename',
-              label: 'Rename',
+              key: "rename",
+              label: "Rename",
               leftSlot: <Icon icon="pencil" />,
               onSelect: async () => {
                 const name = await showPrompt({
-                  id: 'rename-cookie-jar',
-                  title: 'Rename Cookie Jar',
+                  id: "rename-cookie-jar",
+                  title: "Rename Cookie Jar",
                   description: (
                     <>
                       Enter a new name for <InlineCode>{activeCookieJar?.name}</InlineCode>
                     </>
                   ),
-                  label: 'Name',
-                  confirmText: 'Save',
-                  placeholder: 'New name',
+                  label: "Name",
+                  confirmText: "Save",
+                  placeholder: "New name",
                   defaultValue: activeCookieJar?.name,
                 });
                 if (name == null) return;
@@ -70,9 +63,9 @@ export const CookieDropdown = memo(function CookieDropdown() {
             ...(((cookieJars ?? []).length > 1 // Never delete the last one
               ? [
                   {
-                    label: 'Delete',
+                    label: "Delete",
                     leftSlot: <Icon icon="trash" />,
-                    color: 'danger',
+                    color: "danger",
                     onSelect: async () => {
                       await deleteModelWithConfirm(activeCookieJar);
                     },
@@ -81,10 +74,10 @@ export const CookieDropdown = memo(function CookieDropdown() {
               : []) as DropdownItem[]),
           ]
         : []) as DropdownItem[]),
-      { type: 'separator' },
+      { type: "separator" },
       {
-        key: 'create-cookie-jar',
-        label: 'New Cookie Jar',
+        key: "create-cookie-jar",
+        label: "New Cookie Jar",
         leftSlot: <Icon icon="plus" />,
         onSelect: () => createCookieJar.mutate(),
       },

apps/yaak-client/components/CopyButton.tsx

@@ -0,0 +1,33 @@
+import { useTimedBoolean } from "@yaakapp-internal/ui";
+import { copyToClipboard } from "../lib/copy";
+import { showToast } from "../lib/toast";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+
+interface Props extends Omit<ButtonProps, "onClick"> {
+  text: string | (() => Promise<string | null>);
+}
+
+export function CopyButton({ text, ...props }: Props) {
+  const [copied, setCopied] = useTimedBoolean();
+  return (
+    <Button
+      {...props}
+      onClick={async () => {
+        const content = typeof text === "function" ? await text() : text;
+        if (content == null) {
+          showToast({
+            id: "failed-to-copy",
+            color: "danger",
+            message: "Failed to copy",
+          });
+        } else {
+          copyToClipboard(content, { disableToast: true });
+          setCopied();
+        }
+      }}
+    >
+      {copied ? "Copied" : "Copy"}
+    </Button>
+  );
+}

apps/yaak-client/components/CopyIconButton.tsx

@@ -0,0 +1,22 @@
+import {
+  CopyIconButton as BaseCopyIconButton,
+  type CopyIconButtonProps,
+} from "@yaakapp-internal/ui";
+import { copyToClipboard } from "../lib/copy";
+import { showToast } from "../lib/toast";
+
+export function CopyIconButton(props: Omit<CopyIconButtonProps, "copy" | "onCopyFailed">) {
+  return <BaseCopyIconButton {...props} copy={copy} onCopyFailed={showCopyFailed} />;
+}
+
+function copy(text: string) {
+  copyToClipboard(text, { disableToast: true });
+}
+
+function showCopyFailed() {
+  showToast({
+    id: "failed-to-copy",
+    color: "danger",
+    message: "Failed to copy",
+  });
+}

apps/yaak-client/components/CreateDropdown.tsx

@@ -1,8 +1,8 @@
-import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
-import type { DropdownProps } from './core/Dropdown';
-import { Dropdown } from './core/Dropdown';
+import { useCreateDropdownItems } from "../hooks/useCreateDropdownItems";
+import type { DropdownProps } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
 
-interface Props extends Omit<DropdownProps, 'items'> {
+interface Props extends Omit<DropdownProps, "items"> {
   hideFolder?: boolean;
 }
 
@@ -10,7 +10,7 @@ export function CreateDropdown({ hideFolder, children, ...props }: Props) {
   const getItems = useCreateDropdownItems({
     hideFolder,
     hideIcons: true,
-    folderId: 'active-folder',
+    folderId: "active-folder",
   });
 
   return (

apps/yaak-client/components/CreateEnvironmentDialog.tsx

@@ -1,12 +1,12 @@
-import { createWorkspaceModel } from '@yaakapp-internal/models';
-import { useState } from 'react';
-import { useToggle } from '../hooks/useToggle';
-import { ColorIndicator } from './ColorIndicator';
-import { Button } from './core/Button';
-import { Checkbox } from './core/Checkbox';
-import { ColorPickerWithThemeColors } from './core/ColorPicker';
-import { Label } from './core/Label';
-import { PlainInput } from './core/PlainInput';
+import { createWorkspaceModel } from "@yaakapp-internal/models";
+import { useId, useState } from "react";
+import { useToggle } from "../hooks/useToggle";
+import { ColorIndicator } from "./ColorIndicator";
+import { Checkbox } from "./core/Checkbox";
+import { ColorPickerWithThemeColors } from "./core/ColorPicker";
+import { DialogFooter } from "./core/Dialog";
+import { PlainInput } from "./core/PlainInput";
+import { Label } from "@yaakapp-internal/ui";
 
 interface Props {
   onCreate: (id: string) => void;
@@ -15,22 +15,24 @@ interface Props {
 }
 
 export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props) {
-  const [name, setName] = useState<string>('');
+  const [name, setName] = useState<string>("");
   const [color, setColor] = useState<string | null>(null);
   const [sharable, toggleSharable] = useToggle(false);
+  const formId = useId();
   return (
     <form
-      className="pb-3 flex flex-col gap-3"
+      id={formId}
+      className="flex flex-col gap-3"
       onSubmit={async (e) => {
         e.preventDefault();
         const id = await createWorkspaceModel({
-          model: 'environment',
+          model: "environment",
           name,
           color,
           variables: [],
           public: sharable,
           workspaceId,
-          parentModel: 'environment',
+          parentModel: "environment",
         });
         hide();
         onCreate(id);
@@ -59,10 +61,17 @@ export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props)
         </Label>
         <ColorPickerWithThemeColors onChange={setColor} color={color} />
       </div>
-      <Button type="submit" color="secondary" className="mt-3">
-        {color != null && <ColorIndicator color={color} />}
-        Create Environment
-      </Button>
+      <DialogFooter
+        inline
+        actions={[
+          {
+            label: "Create Environment",
+            color: "secondary",
+            form: formId,
+            leftSlot: color != null ? <ColorIndicator color={color} /> : undefined,
+          },
+        ]}
+      />
     </form>
   );
 }

apps/yaak-client/components/CreateWorkspaceDialog.tsx

@@ -1,45 +1,45 @@
-import { gitMutations } from '@yaakapp-internal/git';
-import type { WorkspaceMeta } from '@yaakapp-internal/models';
-import { createGlobalModel, updateModel } from '@yaakapp-internal/models';
-import { useState } from 'react';
-import { router } from '../lib/router';
-import { setupOrConfigureEncryption } from '../lib/setupOrConfigureEncryption';
-import { invokeCmd } from '../lib/tauri';
-import { showErrorToast } from '../lib/toast';
-import { Button } from './core/Button';
-import { Checkbox } from './core/Checkbox';
-import { Label } from './core/Label';
-import { PlainInput } from './core/PlainInput';
-import { VStack } from './core/Stacks';
-import { EncryptionHelp } from './EncryptionHelp';
-import { gitCallbacks } from './git/callbacks';
-import { SyncToFilesystemSetting } from './SyncToFilesystemSetting';
+import { gitMutations } from "@yaakapp-internal/git";
+import type { WorkspaceMeta } from "@yaakapp-internal/models";
+import { createGlobalModel, updateModel } from "@yaakapp-internal/models";
+import { VStack, Label } from "@yaakapp-internal/ui";
+import { useId, useState } from "react";
+import { router } from "../lib/router";
+import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
+import { rpc } from "../lib/rpc";
+import { showErrorToast } from "../lib/toast";
+import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
+import { PlainInput } from "./core/PlainInput";
+import { EncryptionHelp } from "./EncryptionHelp";
+import { gitCallbacks } from "./git/callbacks";
+import { SyncToFilesystemSetting } from "./SyncToFilesystemSetting";
 
 interface Props {
   hide: () => void;
 }
 
 export function CreateWorkspaceDialog({ hide }: Props) {
-  const [name, setName] = useState<string>('');
+  const [name, setName] = useState<string>("");
   const [syncConfig, setSyncConfig] = useState<{
     filePath: string | null;
     initGit?: boolean;
   }>({ filePath: null, initGit: false });
   const [setupEncryption, setSetupEncryption] = useState<boolean>(false);
+  const formId = useId();
   return (
     <VStack
       as="form"
+      id={formId}
       space={3}
       alignItems="start"
-      className="pb-3"
       onSubmit={async (e) => {
         e.preventDefault();
-        const workspaceId = await createGlobalModel({ model: 'workspace', name });
+        const workspaceId = await createGlobalModel({ model: "workspace", name });
         if (workspaceId == null) return;
 
         // Do getWorkspaceMeta instead of naively creating one because it might have
         // been created already when the store refreshes the workspace meta after
-        const workspaceMeta = await invokeCmd<WorkspaceMeta>('cmd_get_workspace_meta', {
+        const workspaceMeta = await rpc<WorkspaceMeta>("cmd_get_workspace_meta", {
           workspaceId,
         });
         await updateModel({
@@ -52,8 +52,8 @@ export function CreateWorkspaceDialog({ hide }: Props) {
             .init.mutateAsync()
             .catch((err) => {
               showErrorToast({
-                id: 'git-init-error',
-                title: 'Error initializing Git',
+                id: "git-init-error",
+                title: "Error initializing Git",
                 message: String(err),
               });
             });
@@ -61,7 +61,7 @@ export function CreateWorkspaceDialog({ hide }: Props) {
 
         // Navigate to workspace
         await router.navigate({
-          to: '/workspaces/$workspaceId',
+          to: "/workspaces/$workspaceId",
           params: { workspaceId },
         });
 
@@ -89,9 +89,7 @@ export function CreateWorkspaceDialog({ hide }: Props) {
           title="Enable Encryption"
         />
       </div>
-      <Button type="submit" color="primary" className="w-full mt-3">
-        Create Workspace
-      </Button>
+      <DialogFooter actions={[{ label: "Create Workspace", color: "primary", form: formId }]} />
     </VStack>
   );
 }

apps/yaak-client/components/Dialogs.tsx

@@ -1,14 +1,14 @@
-import { useAtomValue } from 'jotai';
-import type { ComponentType } from 'react';
-import { useCallback } from 'react';
-import { dialogsAtom, hideDialog } from '../lib/dialog';
-import { Dialog, type DialogProps } from './core/Dialog';
-import { ErrorBoundary } from './ErrorBoundary';
+import { useAtomValue } from "jotai";
+import type { ComponentType } from "react";
+import { useCallback } from "react";
+import { dialogsAtom, hideDialog } from "../lib/dialog";
+import { Dialog, type DialogProps } from "./core/Dialog";
+import { ErrorBoundary } from "./ErrorBoundary";
 
 export type DialogInstance = {
   id: string;
   render: ComponentType<{ hide: () => void }>;
-} & Omit<DialogProps, 'open' | 'children'>;
+} & Omit<DialogProps, "open" | "children">;
 
 export function Dialogs() {
   const dialogs = useAtomValue(dialogsAtom);

apps/yaak-client/components/DnsOverridesEditor.tsx

@@ -1,12 +1,21 @@
-import type { DnsOverride, Workspace } from '@yaakapp-internal/models';
-import { patchModel } from '@yaakapp-internal/models';
-import { useCallback, useId, useMemo } from 'react';
-import { Button } from './core/Button';
-import { Checkbox } from './core/Checkbox';
-import { IconButton } from './core/IconButton';
-import { PlainInput } from './core/PlainInput';
-import { HStack, VStack } from './core/Stacks';
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './core/Table';
+import type { DnsOverride, Workspace } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { fireAndForget } from "../lib/fireAndForget";
+import {
+  HStack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  VStack,
+} from "@yaakapp-internal/ui";
+import { useCallback, useId, useMemo } from "react";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
 
 interface Props {
   workspace: Workspace;
@@ -29,15 +38,15 @@ export function DnsOverridesEditor({ workspace }: Props) {
 
   const handleChange = useCallback(
     (overrides: DnsOverride[]) => {
-      patchModel(workspace, { settingDnsOverrides: overrides });
+      fireAndForget(patchModel(workspace, { settingDnsOverrides: overrides }));
     },
     [workspace],
   );
 
   const handleAdd = useCallback(() => {
     const newOverride: DnsOverride = {
-      hostname: '',
-      ipv4: [''],
+      hostname: "",
+      ipv4: [""],
       ipv6: [],
       enabled: true,
     };
@@ -65,9 +74,9 @@ export function DnsOverridesEditor({ workspace }: Props) {
   return (
     <VStack space={3} className="pb-3">
       <div className="text-text-subtle text-sm">
-        Override DNS resolution for specific hostnames. This works like{' '}
-        <code className="text-text-subtlest bg-surface-highlight px-1 rounded">/etc/hosts</code>{' '}
-        but only for requests made from this workspace.
+        Override DNS resolution for specific hostnames. This works like{" "}
+        <code className="text-text-subtlest bg-surface-highlight px-1 rounded-sm">/etc/hosts</code> but
+        only for requests made from this workspace.
       </div>
 
       {overridesWithIds.length > 0 && (
@@ -110,15 +119,15 @@ interface DnsOverrideRowProps {
 }
 
 function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
-  const ipv4Value = override.ipv4.join(', ');
-  const ipv6Value = override.ipv6.join(', ');
+  const ipv4Value = override.ipv4.join(", ");
+  const ipv6Value = override.ipv6.join(", ");
 
   return (
     <TableRow>
       <TableCell>
         <Checkbox
           hideLabel
-          title={override.enabled ? 'Disable override' : 'Enable override'}
+          title={override.enabled ? "Disable override" : "Enable override"}
           checked={override.enabled ?? true}
           onChange={(enabled) => onUpdate({ enabled })}
         />
@@ -143,7 +152,7 @@ function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
           onChange={(value) =>
             onUpdate({
               ipv4: value
-                .split(',')
+                .split(",")
                 .map((s) => s.trim())
                 .filter(Boolean),
             })
@@ -160,7 +169,7 @@ function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
           onChange={(value) =>
             onUpdate({
               ipv6: value
-                .split(',')
+                .split(",")
                 .map((s) => s.trim())
                 .filter(Boolean),
             })

apps/yaak-client/components/DropMarker.tsx

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import type { CSSProperties } from "react";
+import { memo } from "react";
+
+interface Props {
+  className?: string;
+  style?: CSSProperties;
+  orientation?: "horizontal" | "vertical";
+}
+
+export const DropMarker = memo(
+  function DropMarker({ className, style, orientation = "horizontal" }: Props) {
+    return (
+      <div
+        style={style}
+        className={classNames(
+          className,
+          "absolute pointer-events-none z-50",
+          orientation === "horizontal" && "w-full",
+          orientation === "vertical" && "w-0 top-0 bottom-0",
+        )}
+      >
+        <div
+          className={classNames(
+            "absolute bg-primary rounded-full",
+            orientation === "horizontal" && "left-2 right-2 bottom-[-0.1rem] h-[0.2rem]",
+            orientation === "vertical" && "left-[-0.1rem] top-0 bottom-0 w-[0.2rem]",
+          )}
+        />
+      </div>
+    );
+  },
+  () => true,
+);

apps/yaak-client/components/DynamicForm.tsx

@@ -1,5 +1,5 @@
-import type { Folder, HttpRequest } from '@yaakapp-internal/models';
-import { foldersAtom, httpRequestsAtom } from '@yaakapp-internal/models';
+import type { Folder, HttpRequest } from "@yaakapp-internal/models";
+import { foldersAtom, httpRequestsAtom } from "@yaakapp-internal/models";
 import type {
   FormInput,
   FormInputCheckbox,
@@ -10,33 +10,31 @@ import type {
   FormInputSelect,
   FormInputText,
   JsonPrimitive,
-} from '@yaakapp-internal/plugins';
-import classNames from 'classnames';
-import { useAtomValue } from 'jotai';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useRandomKey } from '../hooks/useRandomKey';
-import { capitalize } from '../lib/capitalize';
-import { showDialog } from '../lib/dialog';
-import { resolvedModelName } from '../lib/resolvedModelName';
-import { Banner } from './core/Banner';
-import { Checkbox } from './core/Checkbox';
-import { DetailsBanner } from './core/DetailsBanner';
-import { Editor } from './core/Editor/LazyEditor';
-import { IconButton } from './core/IconButton';
-import type { InputProps } from './core/Input';
-import { Input } from './core/Input';
-import { Label } from './core/Label';
-import type { Pair } from './core/PairEditor';
-import { PairEditor } from './core/PairEditor';
-import { PlainInput } from './core/PlainInput';
-import { Select } from './core/Select';
-import { VStack } from './core/Stacks';
-import { Markdown } from './Markdown';
-import { SelectFile } from './SelectFile';
+} from "@yaakapp-internal/plugins";
+import { Banner, VStack, Label } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo } from "react";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { useRandomKey } from "../hooks/useRandomKey";
+import { capitalize } from "../lib/capitalize";
+import { showDialog } from "../lib/dialog";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { Checkbox } from "./core/Checkbox";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { Editor } from "./core/Editor/LazyEditor";
+import { IconButton } from "./core/IconButton";
+import type { InputProps } from "./core/Input";
+import { Input } from "./core/Input";
+import type { Pair } from "./core/PairEditor";
+import { PairEditor } from "./core/PairEditor";
+import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
+import { Markdown } from "./Markdown";
+import { SelectFile } from "./SelectFile";
 
-export const DYNAMIC_FORM_NULL_ARG = '__NULL__';
-const INPUT_SIZE = 'sm';
+export const DYNAMIC_FORM_NULL_ARG = "__NULL__";
+const INPUT_SIZE = "sm";
 
 interface Props<T> {
   inputs: FormInput[] | undefined | null;
@@ -75,7 +73,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
       autocompleteFunctions={autocompleteFunctions}
       autocompleteVariables={autocompleteVariables}
       data={data}
-      className={classNames(className, 'pb-4')} // Pad the bottom to look nice
+      className={classNames(className, "pb-4")} // Pad the bottom to look nice
     />
   );
 }
@@ -89,8 +87,8 @@ function FormInputsStack<T extends Record<string, JsonPrimitive>>({
       space={3}
       className={classNames(
         className,
-        'h-full overflow-auto',
-        'pr-1', // A bit of space between inputs and scrollbar
+        "h-full overflow-auto",
+        "pr-1", // A bit of space between inputs and scrollbar
       )}
     >
       <FormInputs {...props} />
@@ -100,7 +98,7 @@ function FormInputsStack<T extends Record<string, JsonPrimitive>>({
 
 type FormInputsProps<T> = Pick<
   Props<T>,
-  'inputs' | 'autocompleteFunctions' | 'autocompleteVariables' | 'stateKey' | 'data'
+  "inputs" | "autocompleteFunctions" | "autocompleteVariables" | "stateKey" | "data"
 > & {
   setDataAttr: (name: string, value: JsonPrimitive) => void;
   disabled?: boolean;
@@ -118,16 +116,16 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
   return (
     <>
       {inputs?.map((input, i) => {
-        if ('hidden' in input && input.hidden) {
+        if ("hidden" in input && input.hidden) {
           return null;
         }
 
-        if ('disabled' in input && disabled != null) {
+        if ("disabled" in input && disabled != null) {
           input.disabled = disabled;
         }
 
         switch (input.type) {
-          case 'select':
+          case "select":
             return (
               <SelectArg
                 key={i + stateKey}
@@ -140,7 +138,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 }
               />
             );
-          case 'text':
+          case "text":
             return (
               <TextArg
                 key={i + stateKey}
@@ -150,11 +148,11 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 autocompleteVariables={autocompleteVariables || false}
                 onChange={(v) => setDataAttr(input.name, v)}
                 value={
-                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? '')
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "")
                 }
               />
             );
-          case 'editor':
+          case "editor":
             return (
               <EditorArg
                 key={i + stateKey}
@@ -164,11 +162,11 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 autocompleteVariables={autocompleteVariables || false}
                 onChange={(v) => setDataAttr(input.name, v)}
                 value={
-                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? '')
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "")
                 }
               />
             );
-          case 'checkbox':
+          case "checkbox":
             return (
               <CheckboxArg
                 key={i + stateKey}
@@ -177,7 +175,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 value={data[input.name] != null ? data[input.name] === true : false}
               />
             );
-          case 'http_request':
+          case "http_request":
             return (
               <HttpRequestArg
                 key={i + stateKey}
@@ -186,7 +184,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 value={data[input.name] != null ? String(data[input.name]) : DYNAMIC_FORM_NULL_ARG}
               />
             );
-          case 'file':
+          case "file":
             return (
               <FileArg
                 key={i + stateKey}
@@ -197,7 +195,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 }
               />
             );
-          case 'accordion':
+          case "accordion":
             if (!hasVisibleInputs(input.inputs)) {
               return null;
             }
@@ -205,7 +203,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               <div key={i + stateKey}>
                 <DetailsBanner
                   summary={input.label}
-                  className={classNames('!mb-auto', disabled && 'opacity-disabled')}
+                  className={classNames("mb-auto!", disabled && "opacity-disabled")}
                 >
                   <div className="mt-3">
                     <FormInputsStack
@@ -221,7 +219,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 </DetailsBanner>
               </div>
             );
-          case 'h_stack':
+          case "h_stack":
             if (!hasVisibleInputs(input.inputs)) {
               return null;
             }
@@ -238,7 +236,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 />
               </div>
             );
-          case 'banner':
+          case "banner":
             if (!hasVisibleInputs(input.inputs)) {
               return null;
             }
@@ -246,7 +244,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               <Banner
                 key={i + stateKey}
                 color={input.color}
-                className={classNames(disabled && 'opacity-disabled')}
+                className={classNames(disabled && "opacity-disabled")}
               >
                 <FormInputsStack
                   data={data}
@@ -259,9 +257,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 />
               </Banner>
             );
-          case 'markdown':
+          case "markdown":
             return <Markdown key={i + stateKey}>{input.content}</Markdown>;
-          case 'key_value':
+          case "key_value":
             return (
               <KeyValueArg
                 key={i + stateKey}
@@ -269,7 +267,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 stateKey={stateKey}
                 onChange={(v) => setDataAttr(input.name, v)}
                 value={
-                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? '[]')
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "[]")
                 }
               />
             );
@@ -301,12 +299,12 @@ function TextArg({
     onChange,
     name: arg.name,
     multiLine: arg.multiLine,
-    className: arg.multiLine ? 'min-h-[4rem]' : undefined,
+    className: arg.multiLine ? "min-h-16" : undefined,
     defaultValue: value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value,
     required: !arg.optional,
     disabled: arg.disabled,
     help: arg.description,
-    type: arg.password ? 'password' : 'text',
+    type: arg.password ? "password" : "text",
     label: arg.label ?? arg.name,
     size: INPUT_SIZE,
     hideLabel: arg.hideLabel ?? arg.label == null,
@@ -358,9 +356,9 @@ function EditorArg({
       </Label>
       <div
         className={classNames(
-          'border border-border rounded-md overflow-hidden px-2 py-1',
-          'focus-within:border-border-focus',
-          !arg.rows && 'max-h-[10rem]', // So it doesn't take up too much space
+          "border border-border rounded-md overflow-hidden px-2 py-1",
+          "focus-within:border-border-focus",
+          !arg.rows && "max-h-40", // So it doesn't take up too much space
         )}
         style={arg.rows ? { height: `${arg.rows * 1.4 + 0.75}rem` } : undefined}
       >
@@ -373,7 +371,7 @@ function EditorArg({
           onChange={onChange}
           hideGutter
           heightMode="auto"
-          className="min-h-[3rem]"
+          className="min-h-12"
           defaultValue={value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value}
           placeholder={arg.placeholder ?? undefined}
           autocompleteFunctions={autocompleteFunctions}
@@ -390,10 +388,10 @@ function EditorArg({
                 title="Pop out to large editor"
                 onClick={() => {
                   showDialog({
-                    id: 'id',
-                    size: 'full',
-                    title: arg.readOnly ? 'View Value' : 'Edit Value',
-                    className: '!max-w-[50rem] !max-h-[60rem]',
+                    id: "id",
+                    size: "full",
+                    title: arg.readOnly ? "View Value" : "Edit Value",
+                    className: "max-w-200! max-h-240!",
                     description: arg.label && (
                       <Label
                         htmlFor={id}
@@ -496,7 +494,7 @@ function HttpRequestArg({
 }) {
   const folders = useAtomValue(foldersAtom);
   const httpRequests = useAtomValue(httpRequestsAtom);
-  const activeHttpRequest = useActiveRequest('http_request');
+  const activeHttpRequest = useActiveRequest("http_request");
 
   useEffect(() => {
     if (value === DYNAMIC_FORM_NULL_ARG && activeHttpRequest) {
@@ -512,16 +510,14 @@ function HttpRequestArg({
       help={arg.description}
       value={value}
       disabled={arg.disabled}
-      options={[
-        ...httpRequests.map((r) => {
-          return {
-            label:
-              buildRequestBreadcrumbs(r, folders).join(' / ') +
-              (r.id === activeHttpRequest?.id ? ' (current)' : ''),
-            value: r.id,
-          };
-        }),
-      ]}
+      options={httpRequests.map((r) => {
+        return {
+          label:
+            buildRequestBreadcrumbs(r, folders).join(" / ") +
+            (r.id === activeHttpRequest?.id ? " (current)" : ""),
+          value: r.id,
+        };
+      })}
     />
   );
 }
@@ -541,7 +537,7 @@ function buildRequestBreadcrumbs(request: HttpRequest, folders: Folder[]): strin
   };
   next();
 
-  return ancestors.map((a) => (a.model === 'folder' ? a.name : resolvedModelName(a)));
+  return ancestors.map((a) => (a.model === "folder" ? a.name : resolvedModelName(a)));
 }
 
 function CheckboxArg({
@@ -618,7 +614,7 @@ function hasVisibleInputs(inputs: FormInput[] | undefined): boolean {
   if (!inputs) return false;
 
   for (const input of inputs) {
-    if ('inputs' in input && !hasVisibleInputs(input.inputs)) {
+    if ("inputs" in input && !hasVisibleInputs(input.inputs)) {
       // Has children, but none are visible
       return false;
     }

apps/yaak-client/components/EmptyStateText.tsx

@@ -0,0 +1 @@
+export { EmptyStateText } from "@yaakapp-internal/ui";

apps/yaak-client/components/EncryptionHelp.tsx

@@ -1,4 +1,4 @@
-import { VStack } from './core/Stacks';
+import { VStack } from "@yaakapp-internal/ui";
 
 export function EncryptionHelp() {
   return (

apps/yaak-client/components/EnvironmentActionsDropdown.tsx

@@ -1,19 +1,19 @@
-import classNames from 'classnames';
-import { memo, useMemo } from 'react';
-import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
-import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
-import { editEnvironment } from '../lib/editEnvironment';
-import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
-import type { ButtonProps } from './core/Button';
-import { Button } from './core/Button';
-import type { DropdownItem } from './core/Dropdown';
-import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
-import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
+import classNames from "classnames";
+import { memo, useMemo } from "react";
+import { useActiveEnvironment } from "../hooks/useActiveEnvironment";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { editEnvironment } from "../lib/editEnvironment";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+import type { DropdownItem } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
 
 type Props = {
   className?: string;
-} & Pick<ButtonProps, 'forDropdown' | 'leftSlot'>;
+} & Pick<ButtonProps, "forDropdown" | "leftSlot">;
 
 export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdown({
   className,
@@ -41,11 +41,11 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         [activeEnvironment?.id],
       ),
       ...((subEnvironments.length > 0
-        ? [{ type: 'separator', label: 'Environments' }]
+        ? [{ type: "separator", label: "Environments" }]
         : []) as DropdownItem[]),
       {
-        label: 'Manage Environments',
-        hotKeyAction: 'environment_editor.toggle',
+        label: "Manage Environments",
+        hotKeyAction: "environment_editor.toggle",
         leftSlot: <Icon icon="box" />,
         onSelect: () => editEnvironment(activeEnvironment),
       },
@@ -62,16 +62,23 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         size="sm"
         className={classNames(
           className,
-          'text !px-2 truncate',
-          !activeEnvironment && !hasBaseVars && 'text-text-subtlest italic',
+          "text px-2! truncate",
+          !activeEnvironment && !hasBaseVars && "text-text-subtlest italic",
         )}
         // If no environments, the button simply opens the dialog.
         // NOTE: We don't create a new button because we want to reuse the hotkey from the menu items
-        onClick={subEnvironments.length === 0 ? () => editEnvironment(null) : undefined}
+        onClick={
+          subEnvironments.length === 0
+            ? (event) => {
+                event.preventDefault();
+                editEnvironment(null);
+              }
+            : undefined
+        }
         {...buttonProps}
       >
         <EnvironmentColorIndicator environment={activeEnvironment ?? null} />
-        {activeEnvironment?.name ?? (hasBaseVars ? 'Environment' : 'No Environment')}
+        {activeEnvironment?.name ?? (hasBaseVars ? "Environment" : "No Environment")}
       </Button>
     </Dropdown>
   );

apps/yaak-client/components/EnvironmentColorIndicator.tsx

@@ -1,6 +1,6 @@
-import type { Environment } from '@yaakapp-internal/models';
-import { showColorPicker } from '../lib/showColorPicker';
-import { ColorIndicator } from './ColorIndicator';
+import type { Environment } from "@yaakapp-internal/models";
+import { showColorPicker } from "../lib/showColorPicker";
+import { ColorIndicator } from "./ColorIndicator";
 
 export function EnvironmentColorIndicator({
   environment,

apps/yaak-client/components/EnvironmentColorPicker.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
-import { ColorIndicator } from './ColorIndicator';
-import { Banner } from './core/Banner';
-import { Button } from './core/Button';
-import { ColorPickerWithThemeColors } from './core/ColorPicker';
+import { useState } from "react";
+import { ColorIndicator } from "./ColorIndicator";
+import { Banner } from "@yaakapp-internal/ui";
+import { Button } from "./core/Button";
+import { ColorPickerWithThemeColors } from "./core/ColorPicker";
 
 export function EnvironmentColorPicker({
   color: defaultColor,

apps/yaak-client/components/EnvironmentEditDialog.tsx

@@ -0,0 +1,495 @@
+import type { Environment, Workspace } from "@yaakapp-internal/models";
+import { duplicateModel, patchModel } from "@yaakapp-internal/models";
+import type { TreeHandle, TreeNode, TreeProps } from "@yaakapp-internal/ui";
+import { Banner, Icon, InlineCode, SplitLayout, Tree, IconTooltip } from "@yaakapp-internal/ui";
+import { atom, useAtomValue } from "jotai";
+import { atomFamily } from "jotai-family";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createSubEnvironment } from "../commands/createEnvironment";
+import { activeWorkspaceAtom, activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import {
+  environmentsBreakdownAtom,
+  useEnvironmentsBreakdown,
+} from "../hooks/useEnvironmentsBreakdown";
+import { useHotKey } from "../hooks/useHotKey";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { fireAndForget } from "../lib/fireAndForget";
+import { jotaiStore } from "../lib/jotai";
+import { isBaseEnvironment, isSubEnvironment } from "../lib/model_util";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { showColorPicker } from "../lib/showColorPicker";
+import type { ContextMenuProps, DropdownItem } from "./core/Dropdown";
+import { ContextMenu } from "./core/Dropdown";
+import { IconButton } from "./core/IconButton";
+import type { PairEditorHandle } from "./core/PairEditor";
+import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
+import { EnvironmentEditor } from "./EnvironmentEditor";
+import { EnvironmentSharableTooltip } from "./EnvironmentSharableTooltip";
+
+const collapsedFamily = atomFamily((treeId: string) => {
+  const key = ["env_collapsed", treeId ?? "n/a"];
+  return atomWithKVStorage<Record<string, boolean>>(key, {});
+});
+
+interface Props {
+  initialEnvironmentId: string | null;
+  setRef?: (ref: PairEditorHandle | null) => void;
+}
+
+type TreeModel = Environment | Workspace;
+
+/** Lets tree row slots create a sub-environment and select it in the editor. */
+const CreateSubEnvironmentContext = createContext<() => Promise<void>>(async () => {});
+
+export function EnvironmentEditDialog({ initialEnvironmentId, setRef }: Props) {
+  const { allEnvironments, baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string | null>(
+    initialEnvironmentId ?? null,
+  );
+
+  const selectedEnvironment =
+    selectedEnvironmentId != null
+      ? allEnvironments.find((e) => e.id === selectedEnvironmentId)
+      : baseEnvironment;
+
+  return (
+    <SplitLayout
+      storageKey="env_editor"
+      defaultRatio={0.75}
+      layout="horizontal"
+      className="gap-0"
+      resizeHandleClassName="-translate-x-px"
+      firstSlot={() => (
+        <EnvironmentEditDialogSidebar
+          selectedEnvironmentId={selectedEnvironment?.id ?? null}
+          setSelectedEnvironmentId={setSelectedEnvironmentId}
+        />
+      )}
+      secondSlot={() => (
+        <div className="grid grid-rows-[auto_minmax(0,1fr)]">
+          {baseEnvironments.length > 1 ? (
+            <div className="p-3">
+              <Banner color="notice">
+                There are multiple base environments for this workspace. Please delete the
+                environments you no longer need.
+              </Banner>
+            </div>
+          ) : (
+            <span />
+          )}
+          {selectedEnvironment == null ? (
+            <div className="p-3 mt-10">
+              <Banner color="danger">
+                Failed to find selected environment <InlineCode>{selectedEnvironmentId}</InlineCode>
+              </Banner>
+            </div>
+          ) : (
+            <EnvironmentEditor
+              key={selectedEnvironment.id}
+              setRef={setRef}
+              className="pl-4 pt-3"
+              environment={selectedEnvironment}
+            />
+          )}
+        </div>
+      )}
+    />
+  );
+}
+
+const sharableTooltip = (
+  <IconTooltip
+    tabIndex={-1}
+    icon="eye"
+    iconSize="sm"
+    content="This environment will be included in Directory Sync and data exports"
+  />
+);
+
+function EnvironmentEditDialogSidebar({
+  selectedEnvironmentId,
+  setSelectedEnvironmentId,
+}: {
+  selectedEnvironmentId: string | null;
+  setSelectedEnvironmentId: (id: string | null) => void;
+}) {
+  const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom) ?? "";
+  const treeId = `environment.${activeWorkspaceId}.sidebar`;
+  const treeRef = useRef<TreeHandle>(null);
+  const { allEnvironments, baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
+  useLayoutEffect(() => {
+    if (selectedEnvironmentId == null) return;
+    treeRef.current?.selectItem(selectedEnvironmentId);
+    treeRef.current?.focus();
+  }, []);
+
+  // A just-created environment to select once it reaches the model store. Selecting it before
+  // then would show a "failed to find" error in the editor, and the tree would drop the
+  // selection of an item it doesn't have yet.
+  const [pendingSelectionId, setPendingSelectionId] = useState<string | null>(null);
+  const tree = useAtomValue(treeAtom);
+  useEffect(() => {
+    if (pendingSelectionId == null) return;
+    if (!allEnvironments.some((e) => e.id === pendingSelectionId)) return;
+
+    setPendingSelectionId(null);
+    setSelectedEnvironmentId(pendingSelectionId);
+
+    // The tree leaves out sub-environments while there are multiple base environments
+    const node = tree == null ? null : findTreeNode(tree, pendingSelectionId);
+    if (node == null) return;
+    if (node.parent != null) {
+      // Expand the parent so the new item is visible to be selected
+      const parentId = node.parent.item.id;
+      jotaiStore.set(collapsedFamily(treeId), (prev) => ({ ...prev, [parentId]: false }));
+    }
+    // Wait a frame so the tree's own pending selection fixups, which may have been scheduled
+    // before the new item arrived, don't reset this selection
+    requestAnimationFrame(() => treeRef.current?.selectItem(pendingSelectionId));
+  }, [allEnvironments, pendingSelectionId, setSelectedEnvironmentId, tree, treeId]);
+
+  const handleDeleteEnvironment = useCallback(
+    async (environment: Environment) => {
+      await deleteModelWithConfirm(environment);
+      if (selectedEnvironmentId === environment.id) {
+        setSelectedEnvironmentId(baseEnvironment?.id ?? null);
+      }
+    },
+    [baseEnvironment?.id, selectedEnvironmentId, setSelectedEnvironmentId],
+  );
+
+  const handleCreateSubEnvironment = useCallback(async () => {
+    const { baseEnvironment } = jotaiStore.get(environmentsBreakdownAtom);
+    if (baseEnvironment == null) return;
+    const id = await createSubEnvironment.mutateAsync(baseEnvironment);
+    // Show the new environment in the editor without changing the workspace's active environment
+    if (id != null) setPendingSelectionId(id);
+  }, []);
+
+  const treeHasFocus = useCallback(() => treeRef.current?.hasFocus() ?? false, []);
+
+  const getSelectedTreeModels = useCallback(
+    () => treeRef.current?.getSelectedItems() as TreeModel[] | undefined,
+    [],
+  );
+
+  const handleRenameSelected = useCallback(() => {
+    const items = getSelectedTreeModels();
+    if (items?.length === 1 && items[0] != null) {
+      treeRef.current?.renameItem(items[0].id);
+    }
+  }, [getSelectedTreeModels]);
+
+  const handleDeleteSelected = useCallback(
+    (items: TreeModel[]) => deleteModelWithConfirm(items),
+    [],
+  );
+
+  const handleDuplicateSelected = useCallback(
+    async (items: TreeModel[]) => {
+      if (items.length === 1 && items[0]) {
+        const newId = await duplicateModel(items[0]);
+        setSelectedEnvironmentId(newId);
+      } else {
+        await Promise.all(items.map(duplicateModel));
+      }
+    },
+    [setSelectedEnvironmentId],
+  );
+
+  useHotKey("sidebar.selected.rename", handleRenameSelected, {
+    enable: treeHasFocus,
+    allowDefault: true,
+    priority: 100,
+  });
+  useHotKey(
+    "sidebar.selected.delete",
+    useCallback(() => {
+      const items = getSelectedTreeModels();
+      if (items) {
+        fireAndForget(handleDeleteSelected(items));
+      }
+    }, [getSelectedTreeModels, handleDeleteSelected]),
+    { enable: treeHasFocus, priority: 100 },
+  );
+  useHotKey(
+    "sidebar.selected.duplicate",
+    useCallback(async () => {
+      const items = getSelectedTreeModels();
+      if (items) await handleDuplicateSelected(items);
+    }, [getSelectedTreeModels, handleDuplicateSelected]),
+    { enable: treeHasFocus, priority: 100 },
+  );
+
+  const getContextMenu = useCallback(
+    (items: TreeModel[]): ContextMenuProps["items"] => {
+      const environment = items[0];
+      const addEnvironmentItem: DropdownItem = {
+        label: "Create Sub Environment",
+        leftSlot: <Icon icon="plus" />,
+        onSelect: handleCreateSubEnvironment,
+      };
+      // Sub-environments aren't shown while there are multiple base environments, same as the
+      // plus button on the base environment row
+      const canCreateSubEnvironment = baseEnvironments.length <= 1;
+
+      if (environment == null || environment.model !== "environment") {
+        return canCreateSubEnvironment ? [addEnvironmentItem] : [];
+      }
+
+      const singleEnvironment = items.length === 1;
+      const canDeleteEnvironment =
+        isSubEnvironment(environment) ||
+        (isBaseEnvironment(environment) && baseEnvironments.length > 1);
+
+      const menuItems: DropdownItem[] = [
+        {
+          label: "Rename",
+          leftSlot: <Icon icon="pencil" />,
+          hidden: isBaseEnvironment(environment) || !singleEnvironment,
+          hotKeyAction: "sidebar.selected.rename",
+          hotKeyLabelOnly: true,
+          onSelect: () => {
+            // Not sure why this is needed, but without it the
+            // edit input blurs immediately after opening.
+            requestAnimationFrame(() => handleRenameSelected());
+          },
+        },
+        {
+          label: "Duplicate",
+          leftSlot: <Icon icon="copy" />,
+          hidden: isBaseEnvironment(environment),
+          hotKeyAction: "sidebar.selected.duplicate",
+          hotKeyLabelOnly: true,
+          onSelect: () => handleDuplicateSelected(items),
+        },
+        {
+          label: environment.color ? "Change Color" : "Assign Color",
+          leftSlot: <Icon icon="palette" />,
+          hidden: isBaseEnvironment(environment) || !singleEnvironment,
+          onSelect: async () => showColorPicker(environment),
+        },
+        {
+          label: `Make ${environment.public ? "Private" : "Sharable"}`,
+          leftSlot: <Icon icon={environment.public ? "eye_closed" : "eye"} />,
+          rightSlot: <EnvironmentSharableTooltip />,
+          hidden: items.length > 1,
+          onSelect: async () => {
+            await patchModel(environment, { public: !environment.public });
+          },
+        },
+        {
+          color: "danger",
+          label: "Delete",
+          hotKeyAction: "sidebar.selected.delete",
+          hotKeyLabelOnly: true,
+          hidden: !canDeleteEnvironment,
+          leftSlot: <Icon icon="trash" />,
+          onSelect: () => handleDeleteEnvironment(environment),
+        },
+      ];
+
+      // Add sub environment to base environment
+      if (isBaseEnvironment(environment) && singleEnvironment && canCreateSubEnvironment) {
+        menuItems.push({ type: "separator" });
+        menuItems.push(addEnvironmentItem);
+      }
+
+      return menuItems;
+    },
+    [
+      baseEnvironments.length,
+      handleCreateSubEnvironment,
+      handleDeleteEnvironment,
+      handleDuplicateSelected,
+      handleRenameSelected,
+    ],
+  );
+
+  const handleDragEnd = useCallback(async function handleDragEnd({
+    items,
+    children,
+    insertAt,
+  }: {
+    items: TreeModel[];
+    children: TreeModel[];
+    insertAt: number;
+  }) {
+    const prev = children[insertAt - 1] as Exclude<TreeModel, Workspace>;
+    const next = children[insertAt] as Exclude<TreeModel, Workspace>;
+
+    const beforePriority = prev?.sortPriority ?? 0;
+    const afterPriority = next?.sortPriority ?? 0;
+    const shouldUpdateAll = afterPriority - beforePriority < 1;
+
+    try {
+      if (shouldUpdateAll) {
+        // Add items to children at insertAt
+        children.splice(insertAt, 0, ...items);
+        await Promise.all(children.map((m, i) => patchModel(m, { sortPriority: i * 1000 })));
+      } else {
+        const range = afterPriority - beforePriority;
+        const increment = range / (items.length + 2);
+        await Promise.all(
+          items.map((m, i) => {
+            const sortPriority = beforePriority + (i + 1) * increment;
+            // Spread item sortPriority out over before/after range
+            return patchModel(m, { sortPriority });
+          }),
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  const handleActivate = useCallback(
+    (item: TreeModel) => {
+      setSelectedEnvironmentId(item.id);
+    },
+    [setSelectedEnvironmentId],
+  );
+
+  const renderContextMenuFn = useCallback<NonNullable<TreeProps<TreeModel>["renderContextMenu"]>>(
+    ({ items, position, onClose }) =>
+      // Right-clicking empty space has nothing to offer while there are multiple base environments
+      items.length === 0 ? null : (
+        <ContextMenu items={items as DropdownItem[]} triggerPosition={position} onClose={onClose} />
+      ),
+    [],
+  );
+
+  return (
+    <aside className="x-theme-sidebar h-full w-full min-w-0 grid overflow-y-auto border-r border-border-subtle ">
+      {tree != null && (
+        <CreateSubEnvironmentContext.Provider value={handleCreateSubEnvironment}>
+          <div className="pt-2">
+            <Tree
+              ref={treeRef}
+              treeId={treeId}
+              collapsedAtom={collapsedFamily(treeId)}
+              className="px-2 pb-10"
+              root={tree}
+              getContextMenu={getContextMenu}
+              renderContextMenu={renderContextMenuFn}
+              onDragEnd={handleDragEnd}
+              getItemKey={(i) => `${i.id}::${i.name}`}
+              ItemLeftSlotInner={ItemLeftSlotInner}
+              ItemRightSlot={ItemRightSlot}
+              ItemInner={ItemInner}
+              onActivate={handleActivate}
+              getEditOptions={getEditOptions}
+            />
+          </div>
+        </CreateSubEnvironmentContext.Provider>
+      )}
+    </aside>
+  );
+}
+
+const treeAtom = atom<TreeNode<TreeModel> | null>((get) => {
+  const activeWorkspace = get(activeWorkspaceAtom);
+  const { baseEnvironment, baseEnvironments, subEnvironments } = get(environmentsBreakdownAtom);
+  if (activeWorkspace == null || baseEnvironment == null) return null;
+
+  const root: TreeNode<TreeModel> = {
+    item: activeWorkspace,
+    parent: null,
+    children: [],
+    depth: 0,
+  };
+
+  for (const item of baseEnvironments) {
+    root.children?.push({
+      item,
+      parent: root,
+      depth: 0,
+      draggable: false,
+    });
+  }
+
+  const parent = root.children?.[0];
+  if (baseEnvironments.length <= 1 && parent != null) {
+    parent.children = subEnvironments.map((item) => ({
+      item,
+      parent,
+      depth: 1,
+      localDrag: true,
+    }));
+  }
+
+  return root;
+});
+
+function findTreeNode(node: TreeNode<TreeModel>, id: string): TreeNode<TreeModel> | null {
+  if (node.item.id === id) return node;
+  for (const child of node.children ?? []) {
+    const found = findTreeNode(child, id);
+    if (found != null) return found;
+  }
+  return null;
+}
+
+function ItemLeftSlotInner({ item }: { item: TreeModel }) {
+  const { baseEnvironments } = useEnvironmentsBreakdown();
+  return baseEnvironments.length > 1 ? (
+    <Icon icon="alert_triangle" color="notice" />
+  ) : (
+    item.model === "environment" && item.color && <EnvironmentColorIndicator environment={item} />
+  );
+}
+
+function ItemRightSlot({ item }: { item: TreeModel }) {
+  const { baseEnvironments } = useEnvironmentsBreakdown();
+  const handleCreateSubEnvironment = useContext(CreateSubEnvironmentContext);
+  return (
+    <>
+      {item.model === "environment" && baseEnvironments.length <= 1 && isBaseEnvironment(item) && (
+        <IconButton
+          size="sm"
+          color="custom"
+          iconSize="sm"
+          icon="plus_circle"
+          className="opacity-50 hover:opacity-100"
+          title="Add Sub-Environment"
+          onClick={handleCreateSubEnvironment}
+        />
+      )}
+    </>
+  );
+}
+
+function ItemInner({ item }: { item: TreeModel }) {
+  return (
+    <div className="grid grid-cols-[auto_minmax(0,1fr)] w-full items-center">
+      {item.model === "environment" && item.public ? (
+        <div className="mr-2 flex items-center">{sharableTooltip}</div>
+      ) : (
+        <span aria-hidden />
+      )}
+      <div className="truncate min-w-0 text-left">{resolvedModelName(item)}</div>
+    </div>
+  );
+}
+
+function getEditOptions(item: TreeModel) {
+  const options: ReturnType<NonNullable<TreeProps<TreeModel>["getEditOptions"]>> = {
+    defaultValue: item.name,
+    placeholder: "Name",
+    async onChange(item, name) {
+      await patchModel(item, { name });
+    },
+  };
+  return options;
+}

apps/yaak-client/components/EnvironmentEditor.tsx

@@ -1,27 +1,27 @@
-import type { Environment } from '@yaakapp-internal/models';
-import { patchModel } from '@yaakapp-internal/models';
-import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
-import classNames from 'classnames';
-import { useCallback, useMemo } from 'react';
-import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
-import { useIsEncryptionEnabled } from '../hooks/useIsEncryptionEnabled';
-import { useKeyValue } from '../hooks/useKeyValue';
-import { useRandomKey } from '../hooks/useRandomKey';
-import { analyzeTemplate, convertTemplateToSecure } from '../lib/encryption';
-import { isBaseEnvironment } from '../lib/model_util';
+import type { Environment } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import { Heading } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useCallback, useMemo } from "react";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { useIsEncryptionEnabled } from "../hooks/useIsEncryptionEnabled";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { useRandomKey } from "../hooks/useRandomKey";
+import { analyzeTemplate, convertTemplateToSecure } from "../lib/encryption";
+import { isBaseEnvironment } from "../lib/model_util";
 import {
   setupOrConfigureEncryption,
   withEncryptionEnabled,
-} from '../lib/setupOrConfigureEncryption';
-import { DismissibleBanner } from './core/DismissibleBanner';
-import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
-import { Heading } from './core/Heading';
-import type { PairEditorHandle, PairWithId } from './core/PairEditor';
-import { ensurePairId } from './core/PairEditor.util';
-import { PairOrBulkEditor } from './core/PairOrBulkEditor';
-import { PillButton } from './core/PillButton';
-import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
-import { EnvironmentSharableTooltip } from './EnvironmentSharableTooltip';
+} from "../lib/setupOrConfigureEncryption";
+import { DismissibleBanner } from "./core/DismissibleBanner";
+import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import type { PairEditorHandle, PairWithId } from "./core/PairEditor";
+import { ensurePairId } from "./core/PairEditor.util";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+import { PillButton } from "./core/PillButton";
+import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
+import { EnvironmentSharableTooltip } from "./EnvironmentSharableTooltip";
 
 interface Props {
   environment: Environment;
@@ -34,8 +34,8 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
   const workspaceId = environment.workspaceId;
   const isEncryptionEnabled = useIsEncryptionEnabled();
   const valueVisibility = useKeyValue<boolean>({
-    namespace: 'global',
-    key: ['environmentValueVisibility', workspaceId],
+    namespace: "global",
+    key: ["environmentValueVisibility", workspaceId],
     fallback: false,
   });
   const { allEnvironments } = useEnvironmentsBreakdown();
@@ -64,8 +64,8 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
       }
       options.push({
         label: name,
-        type: 'constant',
-        detail: containingEnvs.map((e) => e.name).join(', '),
+        type: "constant",
+        detail: containingEnvs.map((e) => e.name).join(", "),
       });
     }
     return { options };
@@ -73,14 +73,14 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
 
   const validateName = useCallback((name: string) => {
     // Empty just means the variable doesn't have a name yet and is unusable
-    if (name === '') return true;
+    if (name === "") return true;
     return name.match(/^[a-z_][a-z0-9_.-]*$/i) != null;
   }, []);
 
-  const valueType = !isEncryptionEnabled && valueVisibility.value ? 'text' : 'password';
+  const valueType = !isEncryptionEnabled && valueVisibility.value ? "text" : "password";
   const allVariableAreEncrypted = useMemo(
     () =>
-      environment.variables.every((v) => v.value === '' || analyzeTemplate(v.value) !== 'insecure'),
+      environment.variables.every((v) => v.value === "" || analyzeTemplate(v.value) !== "insecure"),
     [environment.variables],
   );
 
@@ -88,7 +88,7 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
     withEncryptionEnabled(async () => {
       const encryptedVariables: PairWithId[] = [];
       for (const variable of environment.variables) {
-        const value = variable.value ? await convertTemplateToSecure(variable.value) : '';
+        const value = variable.value ? await convertTemplateToSecure(variable.value) : "";
         encryptedVariables.push(ensurePairId({ ...variable, value }));
       }
       await handleChange(encryptedVariables);
@@ -100,7 +100,7 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
     <div
       className={classNames(
         className,
-        'h-full grid grid-rows-[auto_minmax(0,1fr)] gap-2 pr-3 pb-3',
+        "h-full grid grid-rows-[auto_minmax(0,1fr)] gap-2 pr-3 pb-3",
       )}
     >
       <div className="flex flex-col gap-4">
@@ -123,7 +123,7 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
             )
           ) : (
             <PillButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
-              {valueVisibility.value ? 'Hide Values' : 'Show Values'}
+              {valueVisibility.value ? "Hide Values" : "Show Values"}
             </PillButton>
           )}
           <PillButton
@@ -133,7 +133,7 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
               await patchModel(environment, { public: !environment.public });
             }}
           >
-            {environment.public ? 'Sharable' : 'Private'}
+            {environment.public ? "Sharable" : "Private"}
           </PillButton>
         </Heading>
         {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) && (
@@ -143,9 +143,9 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
             className="mr-3"
             actions={[
               {
-                label: 'Encrypt Variables',
+                label: "Encrypt Variables",
                 onClick: () => encryptEnvironment(environment),
-                color: 'success',
+                color: "success",
               },
             ]}
           >

apps/yaak-client/components/EnvironmentSharableTooltip.tsx

@@ -1,4 +1,4 @@
-import { IconTooltip } from './core/IconTooltip';
+import { IconTooltip } from "@yaakapp-internal/ui";
 
 export function EnvironmentSharableTooltip() {
   return (

apps/yaak-client/components/ErrorBoundary.tsx

@@ -0,0 +1,25 @@
+import { ErrorBoundary as BaseErrorBoundary } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { showDialog } from "../lib/dialog";
+import RouteError from "./RouteError";
+
+export function ErrorBoundary({ name, children }: { name: string; children: ReactNode }) {
+  return (
+    <BaseErrorBoundary name={name} onShowError={showErrorDialog}>
+      {children}
+    </BaseErrorBoundary>
+  );
+}
+
+export function showErrorDialog(error: unknown) {
+  showDialog({ id: "error-boundary", render: () => <RouteError error={error} /> });
+}
+
+export function ErrorBoundaryTestThrow() {
+  useEffect(() => {
+    throw new Error("test error");
+  });
+
+  return <div>Hello</div>;
+}

apps/yaak-client/components/ExportDataDialog.tsx

@@ -1,17 +1,18 @@
-import { save } from '@tauri-apps/plugin-dialog';
-import type { Workspace } from '@yaakapp-internal/models';
-import { workspacesAtom } from '@yaakapp-internal/models';
-import { useAtomValue } from 'jotai';
-import { useCallback, useMemo, useState } from 'react';
-import slugify from 'slugify';
-import { activeWorkspaceAtom } from '../hooks/useActiveWorkspace';
-import { pluralizeCount } from '../lib/pluralize';
-import { invokeCmd } from '../lib/tauri';
-import { Button } from './core/Button';
-import { Checkbox } from './core/Checkbox';
-import { DetailsBanner } from './core/DetailsBanner';
-import { Link } from './core/Link';
-import { HStack, VStack } from './core/Stacks';
+import type { Workspace } from "@yaakapp-internal/models";
+import { workspacesAtom } from "@yaakapp-internal/models";
+import { VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useCallback, useMemo, useState } from "react";
+import slugify from "slugify";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { rpc } from "../lib/rpc";
+import { CommercialUseBanner } from "./CommercialUseBanner";
+import { Checkbox } from "./core/Checkbox";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { DialogFooter } from "./core/Dialog";
+import { Link } from "./core/Link";
+import { platform } from "@yaakapp-internal/platform";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   onHide: () => void;
@@ -55,7 +56,7 @@ function ExportDataDialogContent({
 
   const handleToggleAll = () => {
     setSelectedWorkspaces(
-      // biome-ignore lint/performance/noAccumulatingSpread: none
+      // oxlint-disable-next-line no-accumulating-spread
       allSelected ? {} : workspaces.reduce((acc, w) => ({ ...acc, [w.id]: true }), {}),
     );
   };
@@ -63,36 +64,39 @@ function ExportDataDialogContent({
   const handleExport = useCallback(async () => {
     const ids = Object.keys(selectedWorkspaces).filter((k) => selectedWorkspaces[k]);
     const workspace = ids.length === 1 ? workspaces.find((w) => w.id === ids[0]) : undefined;
-    const slug = workspace ? slugify(workspace.name, { lower: true }) : 'workspaces';
-    const exportPath = await save({
-      title: 'Export Data',
-      defaultPath: `yaak.${slug}.json`,
-    });
-    if (exportPath == null) {
-      return;
-    }
-
-    await invokeCmd('cmd_export_data', {
+    const slug = workspace ? slugify(workspace.name, { lower: true }) : "workspaces";
+    const document = await rpc<string>("cmd_export_data", {
       workspaceIds: ids,
-      exportPath,
       includePrivateEnvironments: includePrivateEnvironments,
     });
+
+    const savedTo = await platform.files.save(
+      `yaak.${slug}.json`,
+      new TextEncoder().encode(document),
+      [{ name: "JSON", extensions: ["json"] }],
+    );
+    if (savedTo == null) {
+      return; // Cancelled
+    }
+
     onHide();
-    onSuccess(exportPath);
+    onSuccess(savedTo);
   }, [includePrivateEnvironments, onHide, onSuccess, selectedWorkspaces, workspaces]);
 
   const allSelected = workspaces.every((w) => selectedWorkspaces[w.id]);
   const numSelected = Object.values(selectedWorkspaces).filter(Boolean).length;
   const noneSelected = numSelected === 0;
   return (
-    <div className="w-full grid grid-rows-[minmax(0,1fr)_auto]">
-      <VStack space={3} className="overflow-auto px-5 pb-6">
+    <>
+      <VStack space={3} className="pb-4">
+        <CommercialUseBanner source="data-export" title="Exporting work data?" />
+
         <table className="w-full mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
           <thead>
             <tr>
               <th className="w-6 min-w-0 py-2 text-left pl-1">
                 <Checkbox
-                  checked={!allSelected && !noneSelected ? 'indeterminate' : allSelected}
+                  checked={!allSelected && !noneSelected ? "indeterminate" : allSelected}
                   hideLabel
                   title="All workspaces"
                   onChange={handleToggleAll}
@@ -122,7 +126,7 @@ function ExportDataDialogContent({
                     setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))
                   }
                 >
-                  {w.name} {w.id === activeWorkspace.id ? '(current workspace)' : ''}
+                  {w.name} {w.id === activeWorkspace.id ? "(current workspace)" : ""}
                 </td>
               </tr>
             ))}
@@ -137,29 +141,22 @@ function ExportDataDialogContent({
           />
         </DetailsBanner>
       </VStack>
-      <footer className="px-5 grid grid-cols-[1fr_auto] items-center bg-surface-highlight py-2 border-t border-border-subtle">
-        <div>
-          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtle">
+      <DialogFooter
+        leftSlot={
+          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtlest">
             Create Run Button
           </Link>
-        </div>
-        <HStack space={2} justifyContent="end">
-          <Button size="sm" className="focus" variant="border" onClick={onHide}>
-            Cancel
-          </Button>
-          <Button
-            size="sm"
-            type="submit"
-            className="focus"
-            color="primary"
-            disabled={noneSelected}
-            onClick={() => handleExport()}
-          >
-            Export{' '}
-            {pluralizeCount('Workspace', numSelected, { omitSingle: true, noneWord: 'Nothing' })}
-          </Button>
-        </HStack>
-      </footer>
-    </div>
+        }
+        actions={[
+          { label: "Cancel", onClick: onHide },
+          {
+            label: `Export ${pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}`,
+            color: "primary",
+            disabled: noneSelected,
+            onClick: () => handleExport(),
+          },
+        ]}
+      />
+    </>
   );
 }

apps/yaak-client/components/FeedbackToast.tsx

@@ -0,0 +1,76 @@
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import { useRef, useState } from "react";
+import type { FeedbackFeature } from "../lib/featureFeedbackConstants";
+import { FEEDBACK_FEATURES } from "../lib/featureFeedbackConstants";
+import { rpc } from "../lib/rpc";
+import { hideToastById, showToast } from "../lib/toast";
+import { Button } from "./core/Button";
+import { Input } from "./core/Input";
+
+interface Props {
+  feature: FeedbackFeature;
+  onDone: () => void;
+}
+
+export function FeedbackToast({ feature, onDone }: Props) {
+  const [text, setText] = useState<string>("");
+  const [sent, setSent] = useState(false);
+  const sentRef = useRef(false);
+
+  const handleDismiss = () => {
+    onDone();
+    hideToastById(`feature-feedback-${feature}`);
+  };
+
+  const handleSend = () => {
+    const trimmedText = text.trim();
+    if (sentRef.current || trimmedText.length === 0) return;
+
+    sentRef.current = true;
+    setSent(true);
+    onDone();
+
+    // Fire-and-forget; failures are intentionally ignored
+    rpc("cmd_send_feedback", { feature, text: trimmedText }).catch(() => {});
+    showToast({
+      id: `feature-feedback-${feature}`,
+      timeout: 3000,
+      color: "success",
+      message: "Thanks for the feedback!",
+    });
+  };
+
+  return (
+    <VStack space={2}>
+      <p className="text-sm font-semibold">{FEEDBACK_FEATURES[feature]}</p>
+      <div className="h-20">
+        <Input
+          size="xs"
+          // The editor forces its mono font on the scroller, so the override
+          // has to target it directly
+          className="[&_.cm-scroller]:font-sans! [&_.cm-scroller]:text-sm!"
+          label="Feedback"
+          hideLabel
+          stateKey={null}
+          multiLine
+          fullHeight
+          placeholder="Your thoughts..."
+          onChange={setText}
+        />
+      </div>
+      <HStack space={1.5} justifyContent="end">
+        <Button size="xs" color="secondary" variant="border" onClick={handleDismiss}>
+          Dismiss
+        </Button>
+        <Button
+          size="xs"
+          color="primary"
+          disabled={sent || text.trim().length === 0}
+          onClick={handleSend}
+        >
+          Send
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

apps/yaak-client/components/FolderLayout.tsx

@@ -1,27 +1,29 @@
-import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
-import { foldersAtom } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { useAtomValue } from 'jotai';
-import type { CSSProperties, ReactNode } from 'react';
-import { useCallback, useMemo } from 'react';
-import { allRequestsAtom } from '../hooks/useAllRequests';
-import { useFolderActions } from '../hooks/useFolderActions';
-import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
-import { sendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
-import { showDialog } from '../lib/dialog';
-import { resolvedModelName } from '../lib/resolvedModelName';
-import { router } from '../lib/router';
-import { Button } from './core/Button';
-import { Heading } from './core/Heading';
-import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
-import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
-import { LoadingIcon } from './core/LoadingIcon';
-import { Separator } from './core/Separator';
-import { SizeTag } from './core/SizeTag';
-import { HStack } from './core/Stacks';
-import { HttpResponsePane } from './HttpResponsePane';
+import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { foldersAtom } from "@yaakapp-internal/models";
+import {
+  Heading,
+  HStack,
+  Icon,
+  LoadingIcon,
+  HttpResponseDurationTag,
+  HttpStatusTag,
+  SizeTag,
+} from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties, ReactNode } from "react";
+import { useCallback, useMemo } from "react";
+import { allRequestsAtom } from "../hooks/useAllRequests";
+import { useFolderActions } from "../hooks/useFolderActions";
+import { useLatestHttpResponse } from "../hooks/useLatestHttpResponse";
+import { sendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
+import { showDialog } from "../lib/dialog";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { router } from "../lib/router";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { Separator } from "./core/Separator";
+import { HttpResponsePane } from "./HttpResponsePane";
 
 interface Props {
   folder: Folder;
@@ -33,7 +35,7 @@ export function FolderLayout({ folder, style }: Props) {
   const requests = useAtomValue(allRequestsAtom);
   const folderActions = useFolderActions();
   const sendAllAction = useMemo(
-    () => folderActions.find((a) => a.label === 'Send All'),
+    () => folderActions.find((a) => a.label === "Send All"),
     [folderActions],
   );
 
@@ -45,7 +47,7 @@ export function FolderLayout({ folder, style }: Props) {
   }, [folder.id, folders, requests]);
 
   const handleSendAll = useCallback(() => {
-    sendAllAction?.call(folder);
+    void sendAllAction?.call(folder);
   }, [sendAllAction, folder]);
 
   return (
@@ -78,13 +80,13 @@ export function FolderLayout({ folder, style }: Props) {
 
 function ChildCard({ child }: { child: Folder | HttpRequest | GrpcRequest | WebsocketRequest }) {
   let card: ReactNode;
-  if (child.model === 'folder') {
+  if (child.model === "folder") {
     card = <FolderCard folder={child} />;
-  } else if (child.model === 'http_request') {
+  } else if (child.model === "http_request") {
     card = <HttpRequestCard request={child} />;
-  } else if (child.model === 'grpc_request') {
+  } else if (child.model === "grpc_request") {
     card = <RequestCard request={child} />;
-  } else if (child.model === 'websocket_request') {
+  } else if (child.model === "websocket_request") {
     card = <RequestCard request={child} />;
   } else {
     card = <div>Unknown model</div>;
@@ -92,7 +94,7 @@ function ChildCard({ child }: { child: Folder | HttpRequest | GrpcRequest | Webs
 
   const navigate = useCallback(async () => {
     await router.navigate({
-      to: '/workspaces/$workspaceId',
+      to: "/workspaces/$workspaceId",
       params: { workspaceId: child.workspaceId },
       search: (prev) => ({ ...prev, request_id: child.id }),
     });
@@ -101,12 +103,12 @@ function ChildCard({ child }: { child: Folder | HttpRequest | GrpcRequest | Webs
   return (
     <div
       className={classNames(
-        'rounded-lg bg-surface-highlight p-3 pt-1 border border-border',
-        'flex flex-col gap-3',
+        "rounded-lg bg-surface-highlight p-3 pt-1 border border-border",
+        "flex flex-col gap-3",
       )}
     >
       <HStack space={2}>
-        {child.model === 'folder' && <Icon icon="folder" size="lg" />}
+        {child.model === "folder" && <Icon icon="folder" size="lg" />}
         <Heading className="truncate" level={2}>
           {resolvedModelName(child)}
         </Heading>
@@ -143,7 +145,7 @@ function FolderCard({ folder }: { folder: Folder }) {
         color="primary"
         onClick={async () => {
           await router.navigate({
-            to: '/workspaces/$workspaceId',
+            to: "/workspaces/$workspaceId",
             params: { workspaceId: folder.workspaceId },
             search: (prev) => {
               return { ...prev, request_id: null, folder_id: folder.id };
@@ -166,7 +168,7 @@ function HttpRequestCard({ request }: { request: HttpRequest }) {
 
   return (
     <div className="grid grid-rows-2 grid-cols-[minmax(0,1fr)] gap-2 overflow-hidden">
-      <code className="font-mono text-editor text-info border border-info rounded px-2.5 py-0.5 truncate w-full min-w-0">
+      <code className="font-mono text-editor text-info border border-info rounded-sm px-2.5 py-0.5 truncate w-full min-w-0">
         {request.method} {request.url}
       </code>
       {latestResponse ? (
@@ -177,10 +179,10 @@ function HttpRequestCard({ request }: { request: HttpRequest }) {
           onClick={(e) => {
             e.stopPropagation();
             showDialog({
-              id: 'response-preview',
-              title: 'Response Preview',
-              size: 'md',
-              className: 'h-full',
+              id: "response-preview",
+              title: "Response Preview",
+              size: "md",
+              className: "h-full",
               render: () => {
                 return <HttpResponsePane activeRequestId={request.id} />;
               },
@@ -191,12 +193,12 @@ function HttpRequestCard({ request }: { request: HttpRequest }) {
             space={2}
             alignItems="center"
             className={classNames(
-              'cursor-default select-none',
-              'whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm hide-scrollbars',
-              'font-mono text-editor border rounded px-1.5 py-0.5 truncate w-full',
+              "cursor-default select-none",
+              "whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm hide-scrollbars",
+              "font-mono text-editor border rounded-sm px-1.5 py-0.5 truncate w-full",
             )}
           >
-            {latestResponse.state !== 'closed' && <LoadingIcon size="sm" />}
+            {latestResponse.state !== "closed" && <LoadingIcon size="sm" />}
             <HttpStatusTag showReason response={latestResponse} />
             <span>&bull;</span>
             <HttpResponseDurationTag response={latestResponse} />

apps/yaak-client/components/FolderSettingsDialog.tsx

@@ -1,47 +1,43 @@
-import {
-  createWorkspaceModel,
-  foldersAtom,
-  patchModel,
-} from '@yaakapp-internal/models';
-import { useAtomValue } from 'jotai';
-import { Fragment, useMemo } from 'react';
-import { useAuthTab } from '../hooks/useAuthTab';
-import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
-import { useHeadersTab } from '../hooks/useHeadersTab';
-import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useModelAncestors } from '../hooks/useModelAncestors';
-import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm';
-import { hideDialog } from '../lib/dialog';
-import { CopyIconButton } from './CopyIconButton';
-import { Button } from './core/Button';
-import { CountBadge } from './core/CountBadge';
-import { Icon } from './core/Icon';
-import { InlineCode } from './core/InlineCode';
-import { Input } from './core/Input';
-import { Link } from './core/Link';
-import { HStack, VStack } from './core/Stacks';
-import type { TabItem } from './core/Tabs/Tabs';
-import { TabContent, Tabs } from './core/Tabs/Tabs';
-import { EmptyStateText } from './EmptyStateText';
-import { EnvironmentEditor } from './EnvironmentEditor';
-import { HeadersEditor } from './HeadersEditor';
-import { HttpAuthenticationEditor } from './HttpAuthenticationEditor';
-import { MarkdownEditor } from './MarkdownEditor';
+import { createWorkspaceModel, foldersAtom, patchModel } from "@yaakapp-internal/models";
+import { HStack, Icon, InlineCode, VStack, CountBadge } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { Fragment, useMemo } from "react";
+import { useAuthTab } from "../hooks/useAuthTab";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { useModelAncestors } from "../hooks/useModelAncestors";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { hideDialog } from "../lib/dialog";
+import { CopyIconButton } from "./CopyIconButton";
+import { Button } from "./core/Button";
+import { Input } from "./core/Input";
+import { Link } from "./core/Link";
+import type { TabItem } from "./core/Tabs/Tabs";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { EmptyStateText } from "./EmptyStateText";
+import { EnvironmentEditor } from "./EnvironmentEditor";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
 
 interface Props {
   folderId: string | null;
   tab?: FolderSettingsTab;
 }
 
-const TAB_AUTH = 'auth';
-const TAB_HEADERS = 'headers';
-const TAB_VARIABLES = 'variables';
-const TAB_GENERAL = 'general';
+const TAB_AUTH = "auth";
+const TAB_HEADERS = "headers";
+const TAB_SETTINGS = "settings";
+const TAB_VARIABLES = "variables";
+const TAB_GENERAL = "general";
 
 export type FolderSettingsTab =
   | typeof TAB_AUTH
   | typeof TAB_HEADERS
   | typeof TAB_GENERAL
+  | typeof TAB_SETTINGS
   | typeof TAB_VARIABLES;
 
 export function FolderSettingsDialog({ folderId, tab }: Props) {
@@ -54,9 +50,10 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
   const inheritedHeaders = useInheritedHeaders(folder);
   const environments = useEnvironmentsBreakdown();
   const folderEnvironment = environments.allEnvironments.find(
-    (e) => e.parentModel === 'folder' && e.parentId === folderId,
+    (e) => e.parentModel === "folder" && e.parentId === folderId,
   );
   const numVars = (folderEnvironment?.variables ?? []).filter((v) => v.name).length;
+  const numSettingsOverrides = folder == null ? 0 : countOverriddenSettings(folder);
 
   const tabs = useMemo<TabItem[]>(() => {
     if (folder == null) return [];
@@ -64,33 +61,34 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
     return [
       {
         value: TAB_GENERAL,
-        label: 'General',
+        label: "General",
+      },
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
       },
       ...headersTab,
       ...authTab,
       {
         value: TAB_VARIABLES,
-        label: 'Variables',
+        label: "Variables",
         rightSlot: numVars > 0 ? <CountBadge count={numVars} /> : null,
       },
     ];
-  }, [authTab, folder, headersTab, numVars]);
+  }, [authTab, folder, headersTab, numSettingsOverrides, numVars]);
 
   if (folder == null) return null;
 
   return (
     <div className="h-full flex flex-col">
       <div className="flex items-center gap-3 px-6 pr-10 mt-4 mb-2 min-w-0 text-xl">
-        <Icon icon="folder_cog" size="lg" color="secondary" className="flex-shrink-0" />
+        <Icon icon="folder_cog" size="lg" color="secondary" className="shrink-0" />
         <div className="flex items-center gap-1.5 font-semibold text-text min-w-0 overflow-hidden flex-1">
           {breadcrumbs.map((item, index) => (
             <Fragment key={item.id}>
               {index > 0 && (
-                <Icon
-                  icon="chevron_right"
-                  size="lg"
-                  className="opacity-50 flex-shrink-0"
-                />
+                <Icon icon="chevron_right" size="lg" className="opacity-50 shrink-0" />
               )}
               <span className="text-text-subtle truncate min-w-0" title={item.name}>
                 {item.name}
@@ -98,12 +96,9 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
             </Fragment>
           ))}
           {breadcrumbs.length > 0 && (
-            <Icon icon="chevron_right" size="lg" className="opacity-50 flex-shrink-0" />
+            <Icon icon="chevron_right" size="lg" className="opacity-50 shrink-0" />
           )}
-          <span
-            className="whitespace-nowrap"
-            title={folder.name}
-          >
+          <span className="whitespace-nowrap" title={folder.name}>
             {folder.name}
           </span>
         </div>
@@ -141,7 +136,7 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
                 onClick={async () => {
                   const didDelete = await deleteModelWithConfirm(folder);
                   if (didDelete) {
-                    hideDialog('folder-settings');
+                    hideDialog("folder-settings");
                   }
                 }}
                 color="danger"
@@ -153,7 +148,7 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
               <InlineCode className="flex gap-1 items-center text-primary pl-2.5">
                 {folder.id}
                 <CopyIconButton
-                  className="opacity-70 !text-primary"
+                  className="opacity-70 text-primary!"
                   size="2xs"
                   iconSize="sm"
                   title="Copy folder ID"
@@ -172,15 +167,18 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
             stateKey={`headers.${folder.id}`}
           />
         </TabContent>
+        <TabContent value={TAB_SETTINGS} className="overflow-y-auto h-full px-4">
+          <ModelSettingsEditor model={folder} />
+        </TabContent>
         <TabContent value={TAB_VARIABLES} className="overflow-y-auto h-full px-4">
           {folderEnvironment == null ? (
             <EmptyStateText>
               <VStack alignItems="center" space={1.5}>
                 <p>
-                  Override{' '}
+                  Override{" "}
                   <Link href="https://yaak.app/docs/using-yaak/environments-and-variables">
                     Variables
-                  </Link>{' '}
+                  </Link>{" "}
                   for requests within this folder.
                 </p>
                 <Button
@@ -189,10 +187,10 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
                   onClick={async () => {
                     await createWorkspaceModel({
                       workspaceId: folder.workspaceId,
-                      parentModel: 'folder',
+                      parentModel: "folder",
                       parentId: folder.id,
-                      model: 'environment',
-                      name: 'Folder Environment',
+                      model: "environment",
+                      name: "Folder Environment",
                     });
                   }}
                 >

apps/yaak-client/components/GlobalHooks.tsx

@@ -0,0 +1,56 @@
+import type { NavigateWorkspace } from "@yaakapp-internal/tauri-client";
+import { activeRequestAtom } from "../hooks/useActiveRequest";
+import { useSubscribeActiveWorkspaceId } from "../hooks/useActiveWorkspace";
+import { useActiveWorkspaceChangedToast } from "../hooks/useActiveWorkspaceChangedToast";
+import { useHotKey, useSubscribeHotKeys } from "../hooks/useHotKey";
+import { useSubscribeHttpAuthentication } from "../hooks/useHttpAuthentication";
+import { useSyncFontSizeSetting } from "../hooks/useSyncFontSizeSetting";
+import { useSyncWorkspaceChildModels } from "../hooks/useSyncWorkspaceChildModels";
+import { usePlatformEvent } from "../hooks/usePlatformEvent";
+import { useSyncZoomSetting } from "../hooks/useSyncZoomSetting";
+import { useSubscribeTemplateFunctions } from "../hooks/useTemplateFunctions";
+import { fireAndForget } from "../lib/fireAndForget";
+import { jotaiStore } from "../lib/jotai";
+import { renameModelWithPrompt } from "../lib/renameModelWithPrompt";
+import { router } from "../lib/router";
+
+export function GlobalHooks() {
+  useSyncZoomSetting();
+  useSyncFontSizeSetting();
+
+  useSubscribeActiveWorkspaceId();
+
+  useSyncWorkspaceChildModels();
+  useSubscribeTemplateFunctions();
+  useSubscribeHttpAuthentication();
+
+  // Other useful things
+  useActiveWorkspaceChangedToast();
+  useSubscribeHotKeys();
+
+  usePlatformEvent("show_home", () => {
+    fireAndForget(router.navigate({ to: "/", search: { home: true } }));
+  });
+
+  usePlatformEvent<NavigateWorkspace>("navigate_workspace", ({ workspaceId, environmentId }) => {
+    fireAndForget(
+      router.navigate({
+        to: "/workspaces/$workspaceId",
+        params: { workspaceId },
+        search: { environment_id: environmentId },
+      }),
+    );
+  });
+
+  useHotKey(
+    "request.rename",
+    async () => {
+      const model = jotaiStore.get(activeRequestAtom);
+      if (model == null) return;
+      await renameModelWithPrompt(model);
+    },
+    { allowDefault: true },
+  );
+
+  return null;
+}

apps/yaak-client/components/GrpcConnectionLayout.tsx

@@ -1,18 +1,18 @@
-import { patchModel } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { useAtomValue } from 'jotai';
-import type { CSSProperties } from 'react';
-import { useEffect, useMemo } from 'react';
-import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useGrpc } from '../hooks/useGrpc';
-import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
-import { activeGrpcConnectionAtom, useGrpcEvents } from '../hooks/usePinnedGrpcConnection';
-import { workspaceLayoutAtom } from '../lib/atoms';
-import { Banner } from './core/Banner';
-import { HotkeyList } from './core/HotkeyList';
-import { SplitLayout } from './core/SplitLayout';
-import { GrpcRequestPane } from './GrpcRequestPane';
-import { GrpcResponsePane } from './GrpcResponsePane';
+import { patchModel } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo } from "react";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { useGrpc } from "../hooks/useGrpc";
+import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
+import { activeGrpcConnectionAtom, useGrpcEvents } from "../hooks/usePinnedGrpcConnection";
+import { Banner, SplitLayout } from "@yaakapp-internal/ui";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { HotkeyList } from "./core/HotkeyList";
+import { GrpcRequestPane } from "./GrpcRequestPane";
+import { GrpcResponsePane } from "./GrpcResponsePane";
 
 interface Props {
   style: CSSProperties;
@@ -22,7 +22,9 @@ const emptyArray: string[] = [];
 
 export function GrpcConnectionLayout({ style }: Props) {
   const workspaceLayout = useAtomValue(workspaceLayoutAtom);
-  const activeRequest = useActiveRequest('grpc_request');
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const wsId = activeWorkspace?.id ?? "n/a";
+  const activeRequest = useActiveRequest("grpc_request");
   const activeConnection = useAtomValue(activeGrpcConnectionAtom);
   const grpcEvents = useGrpcEvents(activeConnection?.id ?? null);
   const protoFilesKv = useGrpcProtoFiles(activeRequest?.id ?? null);
@@ -59,18 +61,18 @@ export function GrpcConnectionLayout({ style }: Props) {
   }, [activeRequest, services]);
 
   const methodType:
-    | 'unary'
-    | 'server_streaming'
-    | 'client_streaming'
-    | 'streaming'
-    | 'no-schema'
-    | 'no-method' = useMemo(() => {
-    if (services == null) return 'no-schema';
-    if (activeMethod == null) return 'no-method';
-    if (activeMethod.clientStreaming && activeMethod.serverStreaming) return 'streaming';
-    if (activeMethod.clientStreaming) return 'client_streaming';
-    if (activeMethod.serverStreaming) return 'server_streaming';
-    return 'unary';
+    | "unary"
+    | "server_streaming"
+    | "client_streaming"
+    | "streaming"
+    | "no-schema"
+    | "no-method" = useMemo(() => {
+    if (services == null) return "no-schema";
+    if (activeMethod == null) return "no-method";
+    if (activeMethod.clientStreaming && activeMethod.serverStreaming) return "streaming";
+    if (activeMethod.clientStreaming) return "client_streaming";
+    if (activeMethod.serverStreaming) return "server_streaming";
+    return "unary";
   }, [activeMethod, services]);
 
   if (activeRequest == null) {
@@ -79,7 +81,7 @@ export function GrpcConnectionLayout({ style }: Props) {
 
   return (
     <SplitLayout
-      name="grpc_layout"
+      storageKey={`grpc_layout::${wsId}`}
       className="p-3 gap-1.5"
       style={style}
       layout={workspaceLayout}
@@ -104,10 +106,10 @@ export function GrpcConnectionLayout({ style }: Props) {
           <div
             style={style}
             className={classNames(
-              'x-theme-responsePane',
-              'max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1',
-              'bg-surface rounded-md border border-border-subtle',
-              'shadow relative',
+              "x-theme-responsePane",
+              "max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1",
+              "bg-surface rounded-md border border-border-subtle",
+              "shadow relative",
             )}
           >
             {grpc.go.error ? (
@@ -117,7 +119,7 @@ export function GrpcConnectionLayout({ style }: Props) {
             ) : grpcEvents.length >= 0 ? (
               <GrpcResponsePane activeRequest={activeRequest} methodType={methodType} />
             ) : (
-              <HotkeyList hotkeys={['request.send', 'sidebar.focus', 'url_bar.focus']} />
+              <HotkeyList hotkeys={["request.send", "sidebar.focus", "url_bar.focus"]} />
             )}
           </div>
         )

apps/yaak-client/components/GrpcEditor.tsx

@@ -0,0 +1,303 @@
+import { linter } from "@codemirror/lint";
+import type { EditorView } from "@codemirror/view";
+import { jsoncLanguage } from "@shopify/lang-jsonc";
+import { type GrpcRequest, patchModel } from "@yaakapp-internal/models";
+import { Banner, FormattedError, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import {
+  handleRefresh,
+  jsonCompletion,
+  jsonSchemaLinter,
+  stateExtensions,
+  updateSchema,
+} from "codemirror-json-schema";
+import type { JSONSchema7 } from "json-schema";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReflectResponseService } from "../hooks/useGrpc";
+import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
+import { showAlert } from "../lib/alert";
+import { showConfirm } from "../lib/confirm";
+import { showDialog } from "../lib/dialog";
+import type { JsonSchema } from "../lib/jsonSchemaExample";
+import { buildExampleFromSchema } from "../lib/jsonSchemaExample";
+import { queryClient } from "../lib/queryClient";
+import { Button } from "./core/Button";
+import { Dropdown } from "./core/Dropdown";
+import type { EditorProps } from "./core/Editor/Editor";
+import { Editor } from "./core/Editor/LazyEditor";
+import { GrpcProtoSelectionDialog } from "./GrpcProtoSelectionDialog";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
+
+type Props = Pick<EditorProps, "heightMode" | "onChange" | "className" | "forceUpdateKey"> & {
+  services: ReflectResponseService[] | null;
+  reflectionError?: string;
+  reflectionLoading?: boolean;
+  request: GrpcRequest;
+  protoFiles: string[];
+};
+
+type MethodSchema =
+  | { type: "none" }
+  | { type: "schema"; schema: JsonSchema }
+  | { type: "error"; id: string; title: string; body: ReactNode; log: unknown[] };
+
+export function GrpcEditor({
+  services,
+  reflectionError,
+  reflectionLoading,
+  request,
+  protoFiles,
+  ...extraEditorProps
+}: Props) {
+  const [editorView, setEditorView] = useState<EditorView | null>(null);
+  const handleInitEditorViewRef = useCallback((h: EditorView | null) => {
+    setEditorView(h);
+  }, []);
+
+  // Find the schema for the selected service and method
+  const methodSchema = useMemo<MethodSchema>(() => {
+    if (services === null || request.service === null || request.method === null) {
+      return { type: "none" };
+    }
+
+    const s = services.find((s) => s.name === request.service);
+    if (s == null) {
+      return {
+        type: "error",
+        id: "grpc-find-service-error",
+        title: "Couldn't Find Service",
+        body: (
+          <>
+            Failed to find service <InlineCode>{request.service}</InlineCode> in schema
+          </>
+        ),
+        log: ["Failed to find service", { service: request.service, services }],
+      };
+    }
+
+    const schema = s.methods.find((m) => m.name === request.method)?.schema;
+    if (schema == null) {
+      return {
+        type: "error",
+        id: "grpc-find-schema-error",
+        title: "Couldn't Find Method",
+        body: (
+          <>
+            Failed to find method <InlineCode>{request.method}</InlineCode> for{" "}
+            <InlineCode>{request.service}</InlineCode> in schema
+          </>
+        ),
+        log: ["Failed to find method", { method: request.method, methods: s.methods }],
+      };
+    }
+
+    try {
+      return { type: "schema", schema: JSON.parse(schema) as JsonSchema };
+    } catch (err) {
+      return {
+        type: "error",
+        id: "grpc-parse-schema-error",
+        title: "Failed to Parse Schema",
+        body: (
+          <VStack space={4}>
+            <p>
+              For service <InlineCode>{request.service}</InlineCode> and method{" "}
+              <InlineCode>{request.method}</InlineCode>
+            </p>
+            <FormattedError>{String(err)}</FormattedError>
+          </VStack>
+        ),
+        log: ["Failed to parse schema", err],
+      };
+    }
+  }, [services, request.method, request.service]);
+
+  useEffect(() => {
+    if (methodSchema.type !== "error") return;
+    console.log(...methodSchema.log);
+    showAlert({ id: methodSchema.id, title: methodSchema.title, body: methodSchema.body });
+  }, [methodSchema]);
+
+  // Update the editor whenever the schema changes
+  useEffect(() => {
+    if (editorView == null || methodSchema.type !== "schema") return;
+    updateSchema(editorView, methodSchema.schema as JSONSchema7);
+  }, [editorView, methodSchema]);
+
+  const extraExtensions = useMemo(
+    () => [
+      linter(jsonSchemaLinter(), {
+        delay: 200,
+        needsRefresh: handleRefresh,
+      }),
+      jsoncLanguage.data.of({
+        autocomplete: jsonCompletion(),
+      }),
+      stateExtensions({}),
+    ],
+    [],
+  );
+
+  const reflectionUnavailable = reflectionError?.match(/unimplemented/i);
+  reflectionError = reflectionUnavailable ? undefined : reflectionError;
+
+  const handleGenerateExample = useCallback(async () => {
+    if (methodSchema.type !== "schema") return;
+
+    if (request.message.trim() !== "") {
+      const confirmed = await showConfirm({
+        id: "grpc-generate-example",
+        title: "Generate Example",
+        description: "The current message will be replaced with an example.",
+        confirmText: "Generate",
+      });
+      if (!confirmed) return;
+    }
+
+    const message = JSON.stringify(buildExampleFromSchema(methodSchema.schema), null, 2);
+    await patchModel(request, { message });
+
+    // Force the editor to pick up the new message
+    wasUpdatedExternally(request.id);
+  }, [methodSchema, request]);
+
+  // The reflect query is keyed by request, url and proto files, so a prefix invalidate
+  // reaches it without threading a refetch down from the connection layout.
+  const handleReloadSchema = useCallback(
+    () => queryClient.invalidateQueries({ queryKey: ["grpc_reflect", request.id] }),
+    [request.id],
+  );
+
+  const handleShowReflectionError = useCallback(() => {
+    showDialog({
+      id: "grpc-reflection-error",
+      title: "Reflection Failed",
+      size: "sm",
+      render: ({ hide }) => (
+        <>
+          <FormattedError>{reflectionError ?? "unknown"}</FormattedError>
+          <div className="w-full my-4">
+            <Button
+              className="ml-auto"
+              color="primary"
+              size="sm"
+              onClick={async () => {
+                hide();
+                await handleReloadSchema();
+              }}
+            >
+              Retry
+            </Button>
+          </div>
+        </>
+      ),
+    });
+  }, [handleReloadSchema, reflectionError]);
+
+  const actions = useMemo(
+    () => [
+      // Matches the GraphQL editor: one always-visible control labelled by schema state,
+      // with everything schema-related behind it.
+      <div key="schema" className="opacity-100!">
+        <Dropdown
+          items={[
+            {
+              // Hidden for servers without reflection, which isn't an error
+              hidden: !reflectionError,
+              type: "content",
+              label: (
+                <Banner color="danger">
+                  <p className="mb-1">Reflection failed</p>
+                  <Button
+                    size="xs"
+                    color="danger"
+                    variant="border"
+                    onClick={handleShowReflectionError}
+                  >
+                    View Error
+                  </Button>
+                </Banner>
+              ),
+            },
+            {
+              label: "Generate Example Message",
+              leftSlot: <Icon icon="magic_wand" />,
+              disabled: methodSchema.type !== "schema",
+              onSelect: handleGenerateExample,
+            },
+            { type: "separator" },
+            {
+              label: "Reload Schema",
+              leftSlot: <Icon icon="refresh" spin={reflectionLoading} />,
+              keepOpenOnSelect: true,
+              onSelect: handleReloadSchema,
+            },
+            {
+              label: protoFiles.length > 0 ? "Select Proto Files\u2026" : "Configure Schema\u2026",
+              leftSlot: <Icon icon="settings" />,
+              onSelect: () => {
+                showDialog({
+                  title: "Configure Schema",
+                  size: "md",
+                  className: "h-[30rem]",
+                  id: "grpc-configure-schema",
+                  render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
+                });
+              },
+            },
+          ]}
+        >
+          <Button
+            size="sm"
+            variant="border"
+            title="Schema"
+            forDropdown
+            isLoading={reflectionLoading}
+            color={reflectionUnavailable ? "info" : reflectionError ? "danger" : "default"}
+          >
+            {reflectionLoading
+              ? "Inspecting Schema"
+              : reflectionUnavailable
+                ? "Select Proto Files"
+                : reflectionError
+                  ? "Server Error"
+                  : protoFiles.length > 0
+                    ? pluralizeCount("File", protoFiles.length)
+                    : services != null
+                      ? "Schema Detected"
+                      : "Select Schema"}
+          </Button>
+        </Dropdown>
+      </div>,
+    ],
+    [
+      handleGenerateExample,
+      handleReloadSchema,
+      handleShowReflectionError,
+      methodSchema.type,
+      protoFiles.length,
+      reflectionError,
+      reflectionLoading,
+      reflectionUnavailable,
+      services,
+    ],
+  );
+
+  return (
+    <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
+      <Editor
+        setRef={handleInitEditorViewRef}
+        language="json"
+        autocompleteFunctions
+        autocompleteVariables
+        defaultValue={request.message}
+        heightMode="auto"
+        placeholder="..."
+        extraExtensions={extraExtensions}
+        actions={actions}
+        stateKey={`grpc_message.${request.id}`}
+        {...extraEditorProps}
+      />
+    </div>
+  );
+}

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -0,0 +1,152 @@
+import type { GrpcRequest } from "@yaakapp-internal/models";
+import { Banner, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { useGrpc } from "../hooks/useGrpc";
+import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
+import { DialogFooter } from "./core/Dialog";
+import { PathList } from "./core/PathList";
+import { Link } from "./core/Link";
+import { platform } from "@yaakapp-internal/platform";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
+
+interface Props {
+  onDone: () => void;
+}
+
+export function GrpcProtoSelectionDialog(props: Props) {
+  const request = useActiveRequest();
+  if (request?.model !== "grpc_request") return null;
+
+  return <GrpcProtoSelectionDialogWithRequest request={request} {...props} />;
+}
+
+function GrpcProtoSelectionDialogWithRequest({
+  request,
+  onDone,
+}: Props & { request: GrpcRequest }) {
+  const protoFilesKv = useGrpcProtoFiles(request.id);
+  const protoFiles = protoFilesKv.value ?? [];
+  const grpc = useGrpc(request, null, protoFiles);
+  const services = grpc.reflect.data;
+  const serverReflection = protoFiles.length === 0 && services != null;
+  let reflectError = grpc.reflect.error ?? null;
+  const reflectionUnimplemented = String(reflectError).match(/unimplemented/i);
+
+  if (reflectionUnimplemented) {
+    reflectError = null;
+  }
+
+  if (request == null) {
+    return null;
+  }
+
+  return (
+    <>
+      <VStack space={5} className="pb-4">
+        {reflectError && (
+          <Banner color="warning">
+            <h1 className="font-bold">
+              Reflection failed on URL <InlineCode>{request.url || "n/a"}</InlineCode>
+            </h1>
+            <p>{reflectError.trim()}</p>
+          </Banner>
+        )}
+        {!serverReflection && services != null && services.length > 0 && (
+          <Banner className="flex flex-col gap-2">
+            <p>
+              Found services{" "}
+              {services?.slice(0, 5).map((s, i) => {
+                return (
+                  <span key={s.name + s.methods.map((m) => m.name).join(",")}>
+                    <InlineCode>{s.name}</InlineCode>
+                    {i === services.length - 1 ? "" : i === services.length - 2 ? " and " : ", "}
+                  </span>
+                );
+              })}
+              {services?.length > 5 && pluralizeCount("other", services?.length - 5)}
+            </p>
+          </Banner>
+        )}
+        {serverReflection && services != null && services.length > 0 && (
+          <Banner className="flex flex-col gap-2">
+            <p>
+              Server reflection found services
+              {services?.map((s, i) => {
+                return (
+                  <span key={s.name + s.methods.map((m) => m.name).join(",")}>
+                    <InlineCode>{s.name}</InlineCode>
+                    {i === services.length - 1 ? "" : i === services.length - 2 ? " and " : ", "}
+                  </span>
+                );
+              })}
+              . You can override this schema by manually selecting <InlineCode>*.proto</InlineCode>{" "}
+              files.
+            </p>
+          </Banner>
+        )}
+
+        <PathList
+          items={protoFiles.map((path) => ({
+            path,
+            icon: path.endsWith(".proto") ? "file_code" : "folder_code",
+          }))}
+          onRemove={async (path) => {
+            await protoFilesKv.set(protoFiles.filter((p) => p !== path));
+            await grpc.reflect.refetch();
+          }}
+          addLabel="Add proto files or an import folder"
+          addItems={[
+            {
+              label: "Proto files",
+              icon: "file_code",
+              onSelect: async () => {
+                const selected = await platform.dialog.open({
+                  title: "Select Proto Files",
+                  multiple: true,
+                  filters: [{ name: "Proto Files", extensions: ["proto"] }],
+                });
+                if (selected == null) return;
+                const newFiles = selected.filter((p) => !protoFiles.includes(p));
+                await protoFilesKv.set([...protoFiles, ...newFiles]);
+                await grpc.reflect.refetch();
+              },
+            },
+            {
+              label: "Import folder",
+              icon: "folder_code",
+              onSelect: async () => {
+                const selected = await platform.dialog.open({
+                  title: "Select Proto Directory",
+                  directory: true,
+                });
+                if (selected == null) return;
+                await protoFilesKv.set([...protoFiles.filter((f) => f !== selected), selected]);
+                await grpc.reflect.refetch();
+              },
+            },
+          ]}
+        />
+        {reflectionUnimplemented && protoFiles.length === 0 && (
+          <Banner>
+            <InlineCode>{request.url}</InlineCode> doesn&apos;t implement{" "}
+            <Link href="https://github.com/grpc/grpc/blob/9aa3c5835a4ed6afae9455b63ed45c761d695bca/doc/server-reflection.md">
+              Server Reflection
+            </Link>{" "}
+            . Please manually add the <InlineCode>.proto</InlineCode> file to get started.
+          </Banner>
+        )}
+      </VStack>
+      <DialogFooter
+        actions={[
+          {
+            label: "Refresh Schema",
+            isLoading: grpc.reflect.isFetching,
+            disabled: grpc.reflect.isFetching,
+            onClick: () => grpc.reflect.refetch(),
+          },
+          { label: "Done", color: "primary", onClick: onDone },
+        ]}
+      />
+    </>
+  );
+}

apps/yaak-client/components/GrpcRequestPane.tsx

@@ -1,28 +1,31 @@
-import { type GrpcRequest, type HttpRequestHeader, patchModel } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import type { CSSProperties } from 'react';
-import { useCallback, useMemo, useRef } from 'react';
-import { useAuthTab } from '../hooks/useAuthTab';
-import { useContainerSize } from '../hooks/useContainerQuery';
-import type { ReflectResponseService } from '../hooks/useGrpc';
-import { useHeadersTab } from '../hooks/useHeadersTab';
-import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { resolvedModelName } from '../lib/resolvedModelName';
-import { Button } from './core/Button';
-import { CountBadge } from './core/CountBadge';
-import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
-import { PlainInput } from './core/PlainInput';
-import { RadioDropdown } from './core/RadioDropdown';
-import { HStack, VStack } from './core/Stacks';
-import type { TabItem } from './core/Tabs/Tabs';
-import { TabContent, Tabs } from './core/Tabs/Tabs';
-import { GrpcEditor } from './GrpcEditor';
-import { HeadersEditor } from './HeadersEditor';
-import { HttpAuthenticationEditor } from './HttpAuthenticationEditor';
-import { MarkdownEditor } from './MarkdownEditor';
-import { UrlBar } from './UrlBar';
+import {
+  type GrpcRequest,
+  type HttpRequestHeader,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
+import { HStack, Icon, useContainerSize, VStack, CountBadge } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { CSSProperties } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { useAuthTab } from "../hooks/useAuthTab";
+import type { ReflectResponseService } from "../hooks/useGrpc";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
+import { RadioDropdown } from "./core/RadioDropdown";
+import type { TabItem } from "./core/Tabs/Tabs";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { GrpcEditor } from "./GrpcEditor";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { UrlBar } from "./UrlBar";
 
 interface Props {
   style?: CSSProperties;
@@ -32,12 +35,12 @@ interface Props {
   reflectionError?: string;
   reflectionLoading?: boolean;
   methodType:
-    | 'unary'
-    | 'client_streaming'
-    | 'server_streaming'
-    | 'streaming'
-    | 'no-schema'
-    | 'no-method';
+    | "unary"
+    | "client_streaming"
+    | "server_streaming"
+    | "streaming"
+    | "no-schema"
+    | "no-method";
   isStreaming: boolean;
   onCommit: () => void;
   onCancel: () => void;
@@ -46,10 +49,11 @@ interface Props {
   services: ReflectResponseService[] | null;
 }
 
-const TAB_MESSAGE = 'message';
-const TAB_METADATA = 'metadata';
-const TAB_AUTH = 'auth';
-const TAB_DESCRIPTION = 'description';
+const TAB_MESSAGE = "message";
+const TAB_METADATA = "metadata";
+const TAB_AUTH = "auth";
+const TAB_SETTINGS = "settings";
+const TAB_DESCRIPTION = "description";
 
 export function GrpcRequestPane({
   style,
@@ -66,19 +70,22 @@ export function GrpcRequestPane({
   onSend,
 }: Props) {
   const authTab = useAuthTab(TAB_AUTH, activeRequest);
-  const metadataTab = useHeadersTab(TAB_METADATA, activeRequest, 'Metadata');
+  const metadataTab = useHeadersTab(TAB_METADATA, activeRequest, "Metadata");
   const inheritedHeaders = useInheritedHeaders(activeRequest);
+  const numSettingsOverrides = countOverriddenSettings(activeRequest);
   const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
 
   const urlContainerEl = useRef<HTMLDivElement>(null);
   const { width: paneWidth } = useContainerSize(urlContainerEl);
 
   const handleChangeUrl = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
     [activeRequest],
   );
 
   const handleChangeMessage = useCallback(
+    // Not debounced: handleSend reads message from the store, so a pending
+    // debounced patch would send stale text
     (message: string) => patchModel(activeRequest, { message }),
     [activeRequest],
   );
@@ -87,18 +94,18 @@ export function GrpcRequestPane({
     const options =
       services?.flatMap((s) =>
         s.methods.map((m) => ({
-          label: `${s.name.split('.').pop() ?? s.name}/${m.name}`,
+          label: `${s.name.split(".").pop() ?? s.name}/${m.name}`,
           value: `${s.name}/${m.name}`,
         })),
       ) ?? [];
-    const value = `${activeRequest?.service ?? ''}/${activeRequest?.method ?? ''}`;
+    const value = `${activeRequest?.service ?? ""}/${activeRequest?.method ?? ""}`;
     return { value, options };
   }, [activeRequest?.method, activeRequest?.service, services]);
 
   const handleChangeService = useCallback(
     async (v: string) => {
-      const [serviceName, methodName] = v.split('/', 2);
-      if (serviceName == null || methodName == null) throw new Error('Should never happen');
+      const [serviceName, methodName] = v.split("/", 2);
+      if (serviceName == null || methodName == null) throw new Error("Should never happen");
       await patchModel(activeRequest, {
         service: serviceName,
         method: methodName,
@@ -112,9 +119,9 @@ export function GrpcRequestPane({
 
     if (activeRequest.service == null || activeRequest.method == null) {
       alert({
-        id: 'grpc-invalid-service-method',
-        title: 'Error',
-        body: 'Service or method not selected',
+        id: "grpc-invalid-service-method",
+        title: "Error",
+        body: "Service or method not selected",
       });
     }
     onGo();
@@ -125,27 +132,34 @@ export function GrpcRequestPane({
     onSend({ message: activeRequest.message });
   }, [activeRequest, onSend]);
 
+  const hasDescription = activeRequest.description.trim().length > 0;
+
   const tabs: TabItem[] = useMemo(
     () => [
-      { value: TAB_MESSAGE, label: 'Message' },
+      { value: TAB_MESSAGE, label: "Message" },
       ...metadataTab,
       ...authTab,
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
+      },
       {
         value: TAB_DESCRIPTION,
-        label: 'Info',
-        rightSlot: activeRequest.description && <CountBadge count={true} />,
+        label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
       },
     ],
-    [activeRequest.description, authTab, metadataTab],
+    [authTab, hasDescription, metadataTab, numSettingsOverrides],
   );
 
   const handleMetadataChange = useCallback(
-    (metadata: HttpRequestHeader[]) => patchModel(activeRequest, { metadata }),
+    (metadata: HttpRequestHeader[]) => patchModelDebounced(activeRequest, { metadata }),
     [activeRequest],
   );
 
   const handleDescriptionChange = useCallback(
-    (description: string) => patchModel(activeRequest, { description }),
+    (description: string) => patchModelDebounced(activeRequest, { description }),
     [activeRequest],
   );
 
@@ -154,14 +168,14 @@ export function GrpcRequestPane({
       <div
         ref={urlContainerEl}
         className={classNames(
-          'grid grid-cols-[minmax(0,1fr)_auto] gap-1.5',
-          paneWidth === 0 && 'opacity-0',
-          paneWidth > 0 && paneWidth < 400 && '!grid-cols-1',
+          "grid grid-cols-[minmax(0,1fr)_auto] gap-1.5",
+          paneWidth === 0 && "opacity-0",
+          paneWidth > 0 && paneWidth < 400 && "grid-cols-1!",
         )}
       >
         <UrlBar
           key={forceUpdateKey}
-          url={activeRequest.url ?? ''}
+          url={activeRequest.url ?? ""}
           submitIcon={null}
           forceUpdateKey={forceUpdateKey}
           placeholder="localhost:50051"
@@ -178,16 +192,9 @@ export function GrpcRequestPane({
             items={select.options.map((o) => ({
               label: o.label,
               value: o.value,
-              type: 'default',
+              type: "default",
               shortLabel: o.label,
             }))}
-            itemsAfter={[
-              {
-                label: 'Refresh',
-                type: 'default',
-                leftSlot: <Icon size="sm" icon="refresh" />,
-              },
-            ]}
           >
             <Button
               size="sm"
@@ -195,14 +202,14 @@ export function GrpcRequestPane({
               rightSlot={<Icon size="sm" icon="chevron_down" />}
               disabled={isStreaming || services == null}
               className={classNames(
-                'font-mono text-editor min-w-[5rem] !ring-0',
-                paneWidth < 400 && 'flex-1',
+                "font-mono text-editor min-w-20 ring-0!",
+                paneWidth < 400 && "flex-1",
               )}
             >
-              {select.options.find((o) => o.value === select.value)?.label ?? 'No Schema'}
+              {select.options.find((o) => o.value === select.value)?.label ?? "No Schema"}
             </Button>
           </RadioDropdown>
-          {methodType === 'client_streaming' || methodType === 'streaming' ? (
+          {methodType === "client_streaming" || methodType === "streaming" ? (
             <>
               {isStreaming && (
                 <>
@@ -225,26 +232,26 @@ export function GrpcRequestPane({
               <IconButton
                 size="sm"
                 variant="border"
-                title={isStreaming ? 'Connect' : 'Send'}
+                title={isStreaming ? "Connect" : "Send"}
                 hotkeyAction="request.send"
                 onClick={isStreaming ? handleSend : handleConnect}
-                icon={isStreaming ? 'send_horizontal' : 'arrow_up_down'}
+                icon={isStreaming ? "send_horizontal" : "arrow_up_down"}
               />
             </>
           ) : (
             <IconButton
               size="sm"
               variant="border"
-              title={methodType === 'unary' ? 'Send' : 'Connect'}
+              title={methodType === "unary" ? "Send" : "Connect"}
               hotkeyAction="request.send"
               onClick={isStreaming ? onCancel : handleConnect}
-              disabled={methodType === 'no-schema' || methodType === 'no-method'}
+              disabled={methodType === "no-schema" || methodType === "no-method"}
               icon={
                 isStreaming
-                  ? 'x'
-                  : methodType.includes('streaming')
-                    ? 'arrow_up_down'
-                    : 'send_horizontal'
+                  ? "x"
+                  : methodType.includes("streaming")
+                    ? "arrow_up_down"
+                    : "send_horizontal"
               }
             />
           )}
@@ -253,7 +260,7 @@ export function GrpcRequestPane({
       <Tabs
         label="Request"
         tabs={tabs}
-        tabListClassName="mt-1 !mb-1.5"
+        tabListClassName="mt-1 mb-1.5!"
         storageKey="grpc_request_tabs"
         activeTabKey={activeRequest.id}
       >
@@ -280,6 +287,9 @@ export function GrpcRequestPane({
             onChange={handleMetadataChange}
           />
         </TabContent>
+        <TabContent value={TAB_SETTINGS}>
+          <ModelSettingsEditor model={activeRequest} />
+        </TabContent>
         <TabContent value={TAB_DESCRIPTION}>
           <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
             <PlainInput
@@ -287,10 +297,10 @@ export function GrpcRequestPane({
               hideLabel
               forceUpdateKey={forceUpdateKey}
               defaultValue={activeRequest.name}
-              className="font-sans !text-xl !px-0"
+              className="font-sans text-xl! px-0!"
               containerClassName="border-0"
               placeholder={resolvedModelName(activeRequest)}
-              onChange={(name) => patchModel(activeRequest, { name })}
+              onChange={(name) => patchModelDebounced(activeRequest, { name })}
             />
             <MarkdownEditor
               name="request-description"

apps/yaak-client/components/GrpcResponsePane.tsx

@@ -1,38 +1,43 @@
-import type { GrpcEvent, GrpcRequest } from '@yaakapp-internal/models';
-import { useAtomValue, useSetAtom } from 'jotai';
-import type { CSSProperties } from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import type { GrpcEvent, GrpcRequest } from "@yaakapp-internal/models";
+import {
+  HStack,
+  Icon,
+  type IconProps,
+  LoadingIcon,
+  VStack,
+  useStateWithDeps,
+  KeyValueRows,
+} from "@yaakapp-internal/ui";
+import { useAtomValue, useSetAtom } from "jotai";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   activeGrpcConnectionAtom,
   activeGrpcConnections,
   pinnedGrpcConnectionIdAtom,
   useGrpcEvents,
-} from '../hooks/usePinnedGrpcConnection';
-import { useStateWithDeps } from '../hooks/useStateWithDeps';
-import { Button } from './core/Button';
-import { Editor } from './core/Editor/LazyEditor';
-import { EventDetailHeader, EventViewer } from './core/EventViewer';
-import { EventViewerRow } from './core/EventViewerRow';
-import { HotkeyList } from './core/HotkeyList';
-import { Icon, type IconProps } from './core/Icon';
-import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
-import { LoadingIcon } from './core/LoadingIcon';
-import { HStack, VStack } from './core/Stacks';
-import { EmptyStateText } from './EmptyStateText';
-import { ErrorBoundary } from './ErrorBoundary';
-import { RecentGrpcConnectionsDropdown } from './RecentGrpcConnectionsDropdown';
+} from "../hooks/usePinnedGrpcConnection";
+import { Button } from "./core/Button";
+import { Editor } from "./core/Editor/LazyEditor";
+import { EventDetailHeader, EventViewer } from "./core/EventViewer";
+import { EventViewerRow } from "./core/EventViewerRow";
+import { HotkeyList } from "./core/HotkeyList";
+import { KeyValueRow } from "./core/KeyValueRow";
+import { EmptyStateText } from "./EmptyStateText";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { RecentGrpcConnectionsDropdown } from "./RecentGrpcConnectionsDropdown";
 
 interface Props {
   style?: CSSProperties;
   className?: string;
   activeRequest: GrpcRequest;
   methodType:
-    | 'unary'
-    | 'client_streaming'
-    | 'server_streaming'
-    | 'streaming'
-    | 'no-schema'
-    | 'no-method';
+    | "unary"
+    | "client_streaming"
+    | "server_streaming"
+    | "streaming"
+    | "no-schema"
+    | "no-method";
 }
 
 export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
@@ -50,12 +55,12 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
   );
 
   // Set the active message to the first message received if unary
-  // biome-ignore lint/correctness/useExhaustiveDependencies: none
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
-    if (events.length === 0 || activeEvent != null || methodType !== 'unary') {
+    if (events.length === 0 || activeEvent != null || methodType !== "unary") {
       return;
     }
-    const firstServerMessageIndex = events.findIndex((m) => m.eventType === 'server_message');
+    const firstServerMessageIndex = events.findIndex((m) => m.eventType === "server_message");
     if (firstServerMessageIndex !== -1) {
       setActiveEventIndex(firstServerMessageIndex);
     }
@@ -63,7 +68,7 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
 
   if (activeConnection == null) {
     return (
-      <HotkeyList hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']} />
+      <HotkeyList hotkeys={["request.send", "model.create", "sidebar.focus", "url_bar.focus"]} />
     );
   }
 
@@ -71,7 +76,7 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
     <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle overflow-x-auto hide-scrollbars">
       <HStack space={2}>
         <span className="whitespace-nowrap">{events.length} Messages</span>
-        {activeConnection.state !== 'closed' && (
+        {activeConnection.state !== "closed" && (
           <LoadingIcon size="sm" className="text-text-subtlest" />
         )}
       </HStack>
@@ -93,7 +98,7 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
           getEventKey={(event) => event.id}
           error={activeConnection.error}
           header={header}
-          splitLayoutName="grpc_events"
+          splitLayoutStorageKey="grpc_events"
           defaultRatio={0.4}
           renderRow={({ event, isActive, onClick }) => (
             <GrpcEventRow event={event} isActive={isActive} onClick={onClick} />
@@ -157,8 +162,8 @@ function GrpcEventDetail({
   setShowingLarge: (v: boolean) => void;
   onClose: () => void;
 }) {
-  if (event.eventType === 'client_message' || event.eventType === 'server_message') {
-    const title = `Message ${event.eventType === 'client_message' ? 'Sent' : 'Received'}`;
+  if (event.eventType === "client_message" || event.eventType === "server_message") {
+    const title = `Message ${event.eventType === "client_message" ? "Sent" : "Received"}`;
 
     return (
       <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
@@ -192,7 +197,7 @@ function GrpcEventDetail({
         ) : (
           <Editor
             language="json"
-            defaultValue={event.content ?? ''}
+            defaultValue={event.content ?? ""}
             wrapLines={false}
             readOnly={true}
             stateKey={null}
@@ -214,7 +219,7 @@ function GrpcEventDetail({
       <div className="py-2 h-full">
         {Object.keys(event.metadata).length === 0 ? (
           <EmptyStateText>
-            No {event.eventType === 'connection_end' ? 'trailers' : 'metadata'}
+            No {event.eventType === "connection_end" ? "trailers" : "metadata"}
           </EmptyStateText>
         ) : (
           <KeyValueRows>
@@ -231,20 +236,20 @@ function GrpcEventDetail({
 }
 
 function getEventDisplay(
-  eventType: GrpcEvent['eventType'],
-  status: GrpcEvent['status'],
-): { icon: IconProps['icon']; color: IconProps['color']; title: string } {
-  if (eventType === 'server_message') {
-    return { icon: 'arrow_big_down_dash', color: 'info', title: 'Server message' };
+  eventType: GrpcEvent["eventType"],
+  status: GrpcEvent["status"],
+): { icon: IconProps["icon"]; color: IconProps["color"]; title: string } {
+  if (eventType === "server_message") {
+    return { icon: "arrow_big_down_dash", color: "info", title: "Server message" };
   }
-  if (eventType === 'client_message') {
-    return { icon: 'arrow_big_up_dash', color: 'primary', title: 'Client message' };
+  if (eventType === "client_message") {
+    return { icon: "arrow_big_up_dash", color: "primary", title: "Client message" };
   }
-  if (eventType === 'error' || (status != null && status > 0)) {
-    return { icon: 'alert_triangle', color: 'danger', title: 'Error' };
+  if (eventType === "error" || (status != null && status > 0)) {
+    return { icon: "alert_triangle", color: "danger", title: "Error" };
   }
-  if (eventType === 'connection_end') {
-    return { icon: 'check', color: 'success', title: 'Connection response' };
+  if (eventType === "connection_end") {
+    return { icon: "check", color: "success", title: "Connection response" };
   }
-  return { icon: 'info', color: undefined, title: 'Event' };
+  return { icon: "info", color: undefined, title: "Event" };
 }

apps/yaak-client/components/HeadersEditor.tsx

@@ -0,0 +1 @@
+export { HeadersEditor } from "@yaakapp-internal/ui";

apps/yaak-client/components/HttpAuthenticationEditor.tsx

@@ -4,25 +4,25 @@ import type {
   HttpRequest,
   WebsocketRequest,
   Workspace,
-} from '@yaakapp-internal/models';
-import { patchModel } from '@yaakapp-internal/models';
-import { useCallback } from 'react';
-import { openFolderSettings } from '../commands/openFolderSettings';
-import { openWorkspaceSettings } from '../commands/openWorkspaceSettings';
-import { useHttpAuthenticationConfig } from '../hooks/useHttpAuthenticationConfig';
-import { useInheritedAuthentication } from '../hooks/useInheritedAuthentication';
-import { useRenderTemplate } from '../hooks/useRenderTemplate';
-import { resolvedModelName } from '../lib/resolvedModelName';
-import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
-import { InlineCode } from './core/InlineCode';
-import { Input, type InputProps } from './core/Input';
-import { Link } from './core/Link';
-import { SegmentedControl } from './core/SegmentedControl';
-import { HStack } from './core/Stacks';
-import { DynamicForm } from './DynamicForm';
-import { EmptyStateText } from './EmptyStateText';
+} from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { HStack, Icon, InlineCode, SegmentedControl } from "@yaakapp-internal/ui";
+import { useCallback } from "react";
+import { openFolderSettings } from "../commands/openFolderSettings";
+import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
+import { useAuthDropdownOptions } from "../hooks/useAuthTab";
+import { useHttpAuthenticationConfig } from "../hooks/useHttpAuthenticationConfig";
+import { useInheritedAuthentication } from "../hooks/useInheritedAuthentication";
+import { useRenderTemplate } from "../hooks/useRenderTemplate";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { Button } from "./core/Button";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { IconButton } from "./core/IconButton";
+import { Input, type InputProps } from "./core/Input";
+import { Link } from "./core/Link";
+import { RadioDropdown } from "./core/RadioDropdown";
+import { DynamicForm } from "./DynamicForm";
+import { EmptyStateText } from "./EmptyStateText";
 
 interface Props {
   model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace;
@@ -37,11 +37,12 @@ export function HttpAuthenticationEditor({ model }: Props) {
   );
 
   const handleChange = useCallback(
-    async (authentication: Record<string, unknown>) => await patchModel(model, { authentication }),
+    async (authentication: Record<string, unknown>) =>
+      await patchModel(model, { authentication }),
     [model],
   );
 
-  if (model.authenticationType === 'none') {
+  if (model.authenticationType === "none") {
     return <EmptyStateText>No authentication</EmptyStateText>;
   }
 
@@ -49,44 +50,55 @@ export function HttpAuthenticationEditor({ model }: Props) {
     return (
       <EmptyStateText>
         <p>
-          Auth plugin not found for <InlineCode>{model.authenticationType}</InlineCode>
+          Auth plugin not found for{" "}
+          <InlineCode>{model.authenticationType}</InlineCode>
         </p>
       </EmptyStateText>
     );
   }
 
   if (inheritedAuth == null) {
-    if (model.model === 'workspace' || model.model === 'folder') {
+    if (model.model === "workspace" || model.model === "folder") {
       return (
-        <EmptyStateText className="flex-col gap-1">
-          <p>
-            Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
-          </p>
-          <Link href="https://yaak.app/docs/using-yaak/request-inheritance">Documentation</Link>
+        <EmptyStateText className="flex-col gap-3">
+          <div className="not-italic flex flex-col items-center gap-3 text-center">
+            <p className="max-w-md text-sm text-text-subtle">
+              Choose an auth method to apply it to all requests in{" "}
+              <strong className="font-semibold text-text-subtle">
+                {resolvedModelName(model)}
+              </strong>
+              .
+            </p>
+            <AuthenticationTypeDropdown model={model} />
+            <Link href="https://yaak.app/docs/using-yaak/request-inheritance">
+              Documentation
+            </Link>
+          </div>
         </EmptyStateText>
       );
     }
     return <EmptyStateText>No authentication</EmptyStateText>;
   }
 
-  if (inheritedAuth.authenticationType === 'none') {
+  if (inheritedAuth.authenticationType === "none") {
     return <EmptyStateText>No authentication</EmptyStateText>;
   }
 
   const wasAuthInherited = inheritedAuth?.id !== model.id;
   if (wasAuthInherited) {
     const name = resolvedModelName(inheritedAuth);
-    const cta = inheritedAuth.model === 'workspace' ? 'Workspace' : name;
+    const cta = inheritedAuth.model === "workspace" ? "Workspace" : name;
     return (
       <EmptyStateText>
         <p>
-          Inherited from{' '}
+          Inherited from{" "}
           <button
             type="submit"
             className="underline hover:text-text"
             onClick={() => {
-              if (inheritedAuth.model === 'folder') openFolderSettings(inheritedAuth.id, 'auth');
-              else openWorkspaceSettings('auth');
+              if (inheritedAuth.model === "folder")
+                openFolderSettings(inheritedAuth.id, "auth");
+              else openWorkspaceSettings("auth");
             }}
           >
             {cta}
@@ -105,25 +117,26 @@ export function HttpAuthenticationEditor({ model }: Props) {
             hideLabel
             name="enabled"
             value={
-              model.authentication.disabled === false || model.authentication.disabled == null
-                ? '__TRUE__'
+              model.authentication.disabled === false ||
+              model.authentication.disabled == null
+                ? "__TRUE__"
                 : model.authentication.disabled === true
-                  ? '__FALSE__'
-                  : '__DYNAMIC__'
+                  ? "__FALSE__"
+                  : "__DYNAMIC__"
             }
             options={[
-              { label: 'Enabled', value: '__TRUE__' },
-              { label: 'Disabled', value: '__FALSE__' },
-              { label: 'Enabled when...', value: '__DYNAMIC__' },
+              { label: "Enabled", value: "__TRUE__" },
+              { label: "Disabled", value: "__FALSE__" },
+              { label: "Enabled when...", value: "__DYNAMIC__" },
             ]}
             onChange={async (enabled) => {
               let disabled: boolean | string;
-              if (enabled === '__TRUE__') {
+              if (enabled === "__TRUE__") {
                 disabled = false;
-              } else if (enabled === '__FALSE__') {
+              } else if (enabled === "__FALSE__") {
                 disabled = true;
               } else {
-                disabled = '';
+                disabled = "";
               }
               await handleChange({ ...model.authentication, disabled });
             }}
@@ -142,18 +155,20 @@ export function HttpAuthenticationEditor({ model }: Props) {
                 title="Authentication Actions"
                 icon="settings"
                 size="xs"
-                className="!text-secondary"
+                className="text-secondary!"
               />
             </Dropdown>
           )}
         </HStack>
-        {typeof model.authentication.disabled === 'string' && (
+        {typeof model.authentication.disabled === "string" && (
           <div className="mt-3">
             <AuthenticationDisabledInput
               className="w-full"
               stateKey={`auth.${model.id}.dynamic`}
               value={model.authentication.disabled}
-              onChange={(v) => handleChange({ ...model.authentication, disabled: v })}
+              onChange={(v) =>
+                handleChange({ ...model.authentication, disabled: v })
+              }
             />
           </div>
         )}
@@ -171,6 +186,33 @@ export function HttpAuthenticationEditor({ model }: Props) {
   );
 }
 
+function AuthenticationTypeDropdown({ model }: Props) {
+  const options = useAuthDropdownOptions(model);
+
+  if (options == null) return null;
+
+  return (
+    <RadioDropdown
+      items={options.items}
+      itemsAfter={options.itemsAfter}
+      itemsBefore={options.itemsBefore}
+      value={options.value}
+      onChange={options.onChange}
+    >
+      <Button
+        color="secondary"
+        variant="border"
+        size="sm"
+        rightSlot={
+          <Icon icon="chevron_down" size="sm" className="text-text-subtle" />
+        }
+      >
+        Select Auth
+      </Button>
+    </RadioDropdown>
+  );
+}
+
 function AuthenticationDisabledInput({
   value,
   onChange,
@@ -178,14 +220,14 @@ function AuthenticationDisabledInput({
   className,
 }: {
   value: string;
-  onChange: InputProps['onChange'];
+  onChange: InputProps["onChange"];
   stateKey: string;
   className?: string;
 }) {
   const rendered = useRenderTemplate({
     template: value,
     enabled: true,
-    purpose: 'preview',
+    purpose: "preview",
     refreshKey: value,
   });
 
@@ -200,7 +242,11 @@ function AuthenticationDisabledInput({
       rightSlot={
         <div className="px-1 flex items-center">
           <div className="rounded-full bg-surface-highlight text-xs px-1.5 py-0.5 text-text-subtle whitespace-nowrap">
-            {rendered.isPending ? 'loading' : rendered.data ? 'enabled' : 'disabled'}
+            {rendered.isPending
+              ? "loading"
+              : rendered.data
+                ? "enabled"
+                : "disabled"}
           </div>
         </div>
       }

apps/yaak-client/components/HttpRequestLayout.tsx

@@ -1,15 +1,16 @@
-import type { HttpRequest } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { useAtomValue } from 'jotai';
-import type { CSSProperties } from 'react';
-import { useCurrentGraphQLSchema } from '../hooks/useIntrospectGraphQL';
-import { workspaceLayoutAtom } from '../lib/atoms';
-import type { SlotProps } from './core/SplitLayout';
-import { SplitLayout } from './core/SplitLayout';
-import { GraphQLDocsExplorer } from './graphql/GraphQLDocsExplorer';
-import { showGraphQLDocExplorerAtom } from './graphql/graphqlAtoms';
-import { HttpRequestPane } from './HttpRequestPane';
-import { HttpResponsePane } from './HttpResponsePane';
+import type { HttpRequest } from "@yaakapp-internal/models";
+import type { SlotProps } from "@yaakapp-internal/ui";
+import { SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { useCurrentGraphQLSchema } from "../hooks/useIntrospectGraphQL";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { GraphQLDocsExplorer } from "./graphql/GraphQLDocsExplorer";
+import { showGraphQLDocExplorerAtom } from "./graphql/graphqlAtoms";
+import { HttpRequestPane } from "./HttpRequestPane";
+import { HttpResponsePane } from "./HttpResponsePane";
 
 interface Props {
   activeRequest: HttpRequest;
@@ -20,10 +21,12 @@ export function HttpRequestLayout({ activeRequest, style }: Props) {
   const showGraphQLDocExplorer = useAtomValue(showGraphQLDocExplorerAtom);
   const graphQLSchema = useCurrentGraphQLSchema(activeRequest);
   const workspaceLayout = useAtomValue(workspaceLayoutAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const wsId = activeWorkspace?.id ?? "n/a";
 
-  const requestResponseSplit = ({ style }: Pick<SlotProps, 'style'>) => (
+  const requestResponseSplit = ({ style }: Pick<SlotProps, "style">) => (
     <SplitLayout
-      name="http_layout"
+      storageKey={`http_layout::${wsId}`}
       className="p-3 gap-1.5"
       style={style}
       layout={workspaceLayout}
@@ -31,7 +34,7 @@ export function HttpRequestLayout({ activeRequest, style }: Props) {
         <HttpRequestPane
           style={style}
           activeRequest={activeRequest}
-          fullHeight={orientation === 'horizontal'}
+          fullHeight={orientation === "horizontal"}
         />
       )}
       secondSlot={({ style }) => (
@@ -41,20 +44,20 @@ export function HttpRequestLayout({ activeRequest, style }: Props) {
   );
 
   if (
-    activeRequest.bodyType === 'graphql' &&
+    activeRequest.bodyType === "graphql" &&
     showGraphQLDocExplorer[activeRequest.id] !== undefined &&
     graphQLSchema != null
   ) {
     return (
       <SplitLayout
-        name="graphql_layout"
+        storageKey={`graphql_layout::${wsId}`}
         defaultRatio={1 / 3}
         firstSlot={requestResponseSplit}
         secondSlot={({ style, orientation }) => (
           <GraphQLDocsExplorer
             requestId={activeRequest.id}
             schema={graphQLSchema}
-            className={classNames(orientation === 'horizontal' && '!ml-0')}
+            className={classNames(orientation === "horizontal" && "ml-0!")}
             style={style}
           />
         )}

apps/yaak-client/components/HttpRequestPane.tsx

@@ -0,0 +1,466 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { getModel, patchModel, patchModelDebounced } from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import {
+  CountBadge,
+  type EditablePair,
+  type ExtraPaneTab,
+  HttpRequestPaneView,
+  InlineCode,
+  languageFromContentType,
+} from "@yaakapp-internal/ui";
+import { atom, useAtomValue } from "jotai";
+import type { CSSProperties, ReactNode } from "react";
+import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
+import { importCurl, looksLikeCurl } from "../commands/importCurl";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
+import { useAuthTab } from "../hooks/useAuthTab";
+import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
+import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
+import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
+import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
+import { fireAndForget } from "../lib/fireAndForget";
+import { httpRequestToView } from "../lib/httpViews";
+import {
+  BODY_TYPE_BINARY,
+  BODY_TYPE_FORM_MULTIPART,
+  BODY_TYPE_FORM_URLENCODED,
+  BODY_TYPE_GRAPHQL,
+  BODY_TYPE_JSON,
+  BODY_TYPE_NONE,
+  BODY_TYPE_OTHER,
+  BODY_TYPE_XML,
+  getContentTypeFromHeaders,
+} from "../lib/model_util";
+import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
+import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
+import { convertRequestBody } from "../lib/requestBodyConversion";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { showToast } from "../lib/toast";
+import { BinaryFileEditor } from "./BinaryFileEditor";
+import { ConfirmLargeRequestBody } from "./ConfirmLargeRequestBody";
+import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import { getUrlCompletionConfig } from "./core/Editor/url/completion";
+import { PlainInput } from "./core/PlainInput";
+import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
+import { setActiveTab } from "./core/Tabs/Tabs";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { RequestMethodDropdown } from "./RequestMethodDropdown";
+import { UrlParametersEditor } from "./UrlParameterEditor";
+import { generateId } from "@yaakapp-internal/lib/generateId";
+
+const GraphQLEditor = lazy(() =>
+  import("./graphql/GraphQLEditor").then((m) => ({ default: m.GraphQLEditor })),
+);
+
+interface Props {
+  style: CSSProperties;
+  fullHeight: boolean;
+  className?: string;
+  activeRequest: HttpRequest;
+}
+
+const TAB_BODY = "body";
+const TAB_PARAMS = "params";
+const TAB_HEADERS = "headers";
+const TAB_AUTH = "auth";
+const TAB_SETTINGS = "settings";
+const TAB_DESCRIPTION = "description";
+const TABS_STORAGE_KEY = "http_request_tabs";
+
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);
+
+export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
+  const activeRequestId = activeRequest.id;
+  const tabsRef = useRef<TabsRef>(null);
+  const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
+  const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
+  const [{ urlKey }, { forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
+  const contentType = getContentTypeFromHeaders(activeRequest.headers);
+  const authTab = useAuthTab(TAB_AUTH, activeRequest);
+  const headersTab = useHeadersTab(TAB_HEADERS, activeRequest);
+  const inheritedHeaders = useInheritedHeaders(activeRequest);
+  const numSettingsOverrides = countOverriddenSettings(activeRequest);
+
+  // Listen for event to focus the params tab (e.g., when clicking a :param in the URL)
+  useRequestEditorEvent(
+    "request_pane.focus_tab",
+    () => {
+      tabsRef.current?.setActiveTab(TAB_PARAMS);
+    },
+    [],
+  );
+
+  const handleContentTypeChange = useCallback(
+    async (contentType: string | null, patch: Partial<Omit<HttpRequest, "headers">> = {}) => {
+      if (activeRequest == null) {
+        console.error("Failed to get active request to update", activeRequest);
+        return;
+      }
+
+      const headers = activeRequest.headers.filter((h) => h.name.toLowerCase() !== "content-type");
+
+      if (contentType != null) {
+        headers.push({
+          name: "Content-Type",
+          value: contentType,
+          enabled: true,
+          id: generateId(),
+        });
+      }
+      await patchModel(activeRequest, { ...patch, headers });
+
+      // Force update header editor so any changed headers are reflected
+      setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
+    },
+    [activeRequest],
+  );
+
+  // Renaming a path placeholder has to rewrite the URL and rename the parameter together, or the
+  // value detaches from the placeholder.
+  // NOTE: Reads the request fresh rather than closing over `activeRequest`. The row that calls this
+  //  holds onto it until the URL's placeholders change, so a captured request would go stale and
+  //  patch its parameter list back over newer edits.
+  const handleRenamePathPlaceholder = useCallback(
+    (oldName: string, newName: string) => {
+      const request = getModel("http_request", activeRequestId);
+      if (request == null) return false;
+
+      const patch = renamePathPlaceholder(request, oldName, newName);
+      if (patch == null) return false; // Unusable name, so the editor reverts the field
+      void patchModel(request, patch);
+      return true;
+    },
+    [activeRequestId],
+  );
+
+  const { urlParameterPairs, urlParametersKey } = useMemo(
+    () =>
+      derivePathPlaceholderPairs(
+        activeRequest.url,
+        activeRequest.urlParameters,
+        handleRenamePathPlaceholder,
+      ),
+    [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
+  );
+
+  let numParams = 0;
+  if (
+    activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ||
+    activeRequest.bodyType === BODY_TYPE_FORM_MULTIPART
+  ) {
+    numParams = Array.isArray(activeRequest.body?.form)
+      ? activeRequest.body.form.filter((p) => p.name).length
+      : 0;
+  }
+
+  const hasDescription = activeRequest.description.trim().length > 0;
+
+  const bodyTab = useMemo<TabItem>(
+    () =>
+      ({
+        value: TAB_BODY,
+        rightSlot: numParams > 0 ? <CountBadge count={numParams} /> : null,
+        options: {
+          value: activeRequest.bodyType,
+          items: [
+            { type: "separator", label: "Form Data" },
+            { label: "Url Encoded", value: BODY_TYPE_FORM_URLENCODED },
+            { label: "Multi-Part", value: BODY_TYPE_FORM_MULTIPART },
+            { type: "separator", label: "Text Content" },
+            { label: "GraphQL", value: BODY_TYPE_GRAPHQL },
+            { label: "JSON", value: BODY_TYPE_JSON },
+            { label: "XML", value: BODY_TYPE_XML },
+            {
+              label: "Other",
+              value: BODY_TYPE_OTHER,
+              shortLabel: nameOfContentTypeOr(contentType, "Other"),
+            },
+            { type: "separator", label: "Other" },
+            { label: "Binary File", value: BODY_TYPE_BINARY },
+            { label: "No Body", shortLabel: "Body", value: BODY_TYPE_NONE },
+          ],
+          onChange: async (bodyType) => {
+            if (bodyType === activeRequest.bodyType) return;
+
+            const showMethodToast = (newMethod: string) => {
+              if (activeRequest.method.toLowerCase() === newMethod.toLowerCase()) return;
+              showToast({
+                id: "switched-method",
+                message: (
+                  <>
+                    Request method switched to <InlineCode>POST</InlineCode>
+                  </>
+                ),
+              });
+            };
+
+            const patch: Partial<HttpRequest> = {
+              bodyType,
+              body: convertRequestBody({
+                body: activeRequest.body,
+                fromBodyType: activeRequest.bodyType,
+                toBodyType: bodyType,
+              }),
+            };
+            let newContentType: string | null | undefined;
+            if (bodyType === BODY_TYPE_NONE) {
+              newContentType = null;
+            } else if (
+              bodyType === BODY_TYPE_FORM_URLENCODED ||
+              bodyType === BODY_TYPE_FORM_MULTIPART ||
+              bodyType === BODY_TYPE_JSON ||
+              bodyType === BODY_TYPE_OTHER ||
+              bodyType === BODY_TYPE_XML
+            ) {
+              const isDefaultishRequest =
+                activeRequest.bodyType === BODY_TYPE_NONE &&
+                activeRequest.method.toLowerCase() === "get";
+              const requiresPost = bodyType === BODY_TYPE_FORM_MULTIPART;
+              if (isDefaultishRequest || requiresPost) {
+                patch.method = "POST";
+                showMethodToast(patch.method);
+              }
+              newContentType = bodyType === BODY_TYPE_OTHER ? "text/plain" : bodyType;
+            } else if (bodyType === BODY_TYPE_GRAPHQL) {
+              patch.method = "POST";
+              newContentType = "application/json";
+              showMethodToast(patch.method);
+            }
+
+            if (newContentType !== undefined) {
+              await handleContentTypeChange(newContentType, patch);
+            } else {
+              await patchModel(activeRequest, patch);
+            }
+          },
+        },
+      }) satisfies TabItem,
+    [activeRequest, contentType, handleContentTypeChange, numParams],
+  );
+
+  const { mutate: sendRequest } = useSendAnyHttpRequest();
+  const { activeResponse } = usePinnedHttpResponse(activeRequestId);
+  const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
+  const updateKey = useRequestUpdateKey(activeRequestId);
+
+  const handleBodyChange = useCallback(
+    (body: HttpRequest["body"]) => patchModelDebounced(activeRequest, { body }),
+    [activeRequest],
+  );
+
+  const handleBodyTextChange = useCallback(
+    (text: string) => patchModelDebounced(activeRequest, { body: { ...activeRequest.body, text } }),
+    [activeRequest],
+  );
+
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);
+
+  const autocomplete: GenericCompletionConfig = useMemo(
+    () => getUrlCompletionConfig(autocompleteUrls),
+    [autocompleteUrls],
+  );
+
+  const handlePaste = useCallback(
+    async (e: ClipboardEvent, text: string) => {
+      if (looksLikeCurl(text)) {
+        importCurl.mutate({ overwriteRequestId: activeRequestId, command: text });
+      } else {
+        const patch = prepareImportQuerystring(text);
+        if (patch != null) {
+          e.preventDefault(); // Prevent input onChange
+
+          await patchModel(activeRequest, patch);
+          await setActiveTab({
+            storageKey: TABS_STORAGE_KEY,
+            activeTabKey: activeRequestId,
+            value: TAB_PARAMS,
+          });
+
+          // Wait for request to update, then refresh the UI
+          // TODO: Somehow make this deterministic
+          setTimeout(() => {
+            forceUrlRefresh();
+            forceParamsRefresh();
+          }, 100);
+        }
+      }
+    },
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
+  );
+  const handleSend = useCallback(
+    () => sendRequest(activeRequest.id ?? null),
+    [activeRequest.id, sendRequest],
+  );
+
+  const handleUrlChange = useCallback(
+    (url: string) => patchModelDebounced(activeRequest, { url }),
+    [activeRequest],
+  );
+
+  const handleJsonOrBodyTextChange = useCallback(
+    (text: string, bodyType: string | null) => {
+      // JSON writes at once, as its editor always has; other text debounces
+      if (bodyType === BODY_TYPE_JSON) {
+        return patchModel(activeRequest, { body: { ...activeRequest.body, text } });
+      }
+      return handleBodyTextChange(text);
+    },
+    [activeRequest, handleBodyTextChange],
+  );
+
+  const handleSendJsonCommentsChange = useCallback(
+    (sendJsonComments: boolean) => {
+      const newBody = { ...activeRequest.body };
+      if (sendJsonComments) {
+        newBody.sendJsonComments = true;
+      } else {
+        delete newBody.sendJsonComments;
+      }
+      fireAndForget(patchModel(activeRequest, { body: newBody }));
+    },
+    [activeRequest],
+  );
+
+  const requestView = useMemo(() => httpRequestToView(activeRequest), [activeRequest]);
+
+  const extraTabs = useMemo<ExtraPaneTab[]>(
+    () => [
+      {
+        tab: {
+          value: TAB_SETTINGS,
+          label: "Settings",
+          rightSlot: <CountBadge count={numSettingsOverrides} />,
+        },
+        content: <ModelSettingsEditor model={activeRequest} />,
+      },
+      {
+        tab: {
+          value: TAB_DESCRIPTION,
+          label: "Info",
+          rightSlot: hasDescription && <CountBadge count={true} />,
+        },
+        content: (
+          <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+            <PlainInput
+              label="Request Name"
+              hideLabel
+              forceUpdateKey={updateKey}
+              defaultValue={activeRequest.name}
+              className="font-sans text-xl! px-0!"
+              containerClassName="border-0"
+              placeholder={resolvedModelName(activeRequest)}
+              onChange={(name) => patchModel(activeRequest, { name })}
+            />
+            <MarkdownEditor
+              name="request-description"
+              placeholder="Request description"
+              defaultValue={activeRequest.description}
+              stateKey={`description.${activeRequest.id}`}
+              forceUpdateKey={updateKey}
+              onChange={(description) => patchModel(activeRequest, { description })}
+            />
+          </div>
+        ),
+      },
+    ],
+    [activeRequest, hasDescription, numSettingsOverrides, updateKey],
+  );
+
+  const renderBody = useCallback(
+    (sharedEditor: ReactNode) => (
+      <ConfirmLargeRequestBody request={activeRequest}>
+        {activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
+          <Suspense>
+            <GraphQLEditor
+              forceUpdateKey={forceUpdateKey}
+              baseRequest={activeRequest}
+              request={activeRequest}
+              onChange={handleBodyChange}
+            />
+          </Suspense>
+        ) : activeRequest.bodyType === BODY_TYPE_BINARY ? (
+          <BinaryFileEditor
+            requestId={activeRequest.id}
+            contentType={contentType}
+            body={activeRequest.body}
+            onChange={(body) => patchModelDebounced(activeRequest, { body })}
+            onChangeContentType={handleContentTypeChange}
+          />
+        ) : (
+          sharedEditor
+        )}
+      </ConfirmLargeRequestBody>
+    ),
+    [activeRequest, contentType, forceUpdateKey, handleBodyChange, handleContentTypeChange],
+  );
+
+  const renderUrlParameters = useCallback(
+    (pairs: EditablePair[]) => (
+      <UrlParametersEditor
+        stateKey={`params.${activeRequest.id}`}
+        forceUpdateKey={forceUpdateKey + urlParametersKey}
+        pairs={pairs}
+        onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
+      />
+    ),
+    [activeRequest, forceUpdateKey, urlParametersKey],
+  );
+
+  return (
+    <HttpRequestPaneView
+      editable
+      style={style}
+      className={className}
+      fullHeight={fullHeight}
+      request={requestView}
+      tabsRef={tabsRef}
+      tabsStorageKey={TABS_STORAGE_KEY}
+      forceUpdateKey={forceUpdateKey}
+      urlBarKey={forceUpdateKey + urlKey}
+      urlForceUpdateKey={updateKey}
+      urlAutocomplete={autocomplete}
+      onUrlChange={handleUrlChange}
+      onUrlPasteOverwrite={handlePaste}
+      onSend={handleSend}
+      onCancel={cancelResponse}
+      isSending={activeResponse != null && activeResponse.state !== "closed"}
+      sendHotkeyAction="request.send"
+      focusHotkeyAction="url_bar.focus"
+      methodSlot={<RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />}
+      bodyTab={bodyTab}
+      renderBody={renderBody}
+      onBodyChange={handleBodyChange}
+      onBodyTextChange={handleJsonOrBodyTextChange}
+      onSendJsonCommentsChange={handleSendJsonCommentsChange}
+      jsonNoticeStorageKey={activeRequest.workspaceId}
+      urlParameterPairs={urlParameterPairs}
+      renderUrlParameters={renderUrlParameters}
+      headersTabs={headersTab}
+      inheritedHeaders={inheritedHeaders}
+      headersForceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
+      onHeadersChange={(headers) => patchModelDebounced(activeRequest, { headers })}
+      authTabs={authTab}
+      authContent={<HttpAuthenticationEditor model={activeRequest} />}
+      extraTabs={extraTabs}
+    />
+  );
+}
+
+function nameOfContentTypeOr(contentType: string | null, fallback: string) {
+  const language = languageFromContentType(contentType);
+  if (language === "markdown") {
+    return "Markdown";
+  }
+  return fallback;
+}