Create Sidebar.tsx

Decouple Tree from client app's hotkey system by adding
getSelectedItems() to TreeHandle and having callers register
hotkeys externally. Extract shared action callbacks to eliminate
duplication between hotkey and context menu handlers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude-context.md

@@ -0,0 +1,72 @@
+# 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-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-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)
+- **yaak-crypto**: Removed Tauri plugin, EncryptionManager initialized in yaak-app setup, commands moved to yaak-app
+- **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()`
+
+## 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-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-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
+481e0273 Remove Tauri dependencies from yaak-http and yaak-common
+10568ac3 Add HTTP request sending to yaak-cli
+bcb7d600 Add yaak-cli stub with basic database access
+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 client:dev` to test the Tauri app still works
+- Run `cargo run -p yaak-cli -- --help` to test the CLI

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

@@ -0,0 +1,49 @@
+---
+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/rules.md

@@ -0,0 +1,27 @@
+# Project Rules
+
+## General Development
+
+- **NEVER** commit or push without explicit confirmation
+
+## Build and Lint
+
+- **ALWAYS** run `npm run lint` after modifying TypeScript or JavaScript files
+- Run `npm run bootstrap` after changing plugin runtime or MCP server code
+
+## Plugin System
+
+### Backend Constraints
+
+- Always use `UpdateSource::Plugin` when calling database methods from plugin events
+- Never send timestamps (`createdAt`, `updatedAt`) from TypeScript - Rust backend controls these
+- Backend uses `NaiveDateTime` (no timezone) so avoid sending ISO timestamp strings
+
+### MCP Server
+
+- MCP server has **no active window context** - cannot call `window.workspaceId()`
+- Get workspace ID from `workspaceCtx.yaak.workspace.list()` instead
+
+## Rust Type Generation
+
+- Run `cargo test --package yaak-plugins` (and for other crates) to regenerate TypeScript bindings after modifying Rust event types

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

@@ -0,0 +1,48 @@
+---
+name: release-generate-release-notes
+description: Generate Yaak release notes from git history and PR metadata, including feedback links and full changelog compare links. Use when asked to run or replace the old Claude generate-release-notes command.
+---
+
+# Generate Release Notes
+
+Generate formatted markdown release notes for a Yaak tag.
+
+## Workflow
+
+1. Determine target tag.
+2. Determine previous comparable tag:
+   - Beta tag: compare against previous beta (if the root version is the same) or stable tag.
+   - Stable tag: compare against previous stable tag.
+3. Collect commits in range:
+   - `git log --oneline <prev_tag>..<target_tag>`
+4. For linked PRs, fetch metadata:
+   - `gh pr view <PR_NUMBER> --json number,title,body,author,url`
+5. Extract useful details:
+   - Feedback URLs (`feedback.yaak.app`)
+   - Plugin install links or other notable context
+6. Format notes using Yaak style:
+   - Changelog badge at top
+   - Bulleted items with PR links where available
+   - Feedback links where available
+   - Full changelog compare link at bottom
+
+## Formatting Rules
+
+- Wrap final notes in a markdown code fence.
+- Keep a blank line before and after the code fence.
+- Output the markdown code block last.
+- Do not append `by @gschier` for PRs authored by `@gschier`.
+
+## Release Creation Prompt
+
+After producing notes, ask whether to create a draft GitHub release.
+
+If confirmed and release does not yet exist, run:
+
+`gh release create <tag> --draft --prerelease --title "Release <version_without_v>" --notes '<release notes>'`
+
+If a draft release for the tag already exists, update it instead:
+
+`gh release edit <tag> --title "Release <version_without_v>" --notes-file <path_to_notes>`
+
+Use title format `Release <version_without_v>`, e.g. `v2026.2.1-beta.1` -> `Release 2026.2.1-beta.1`.

.gitattributes

@@ -1,2 +1,7 @@
-src-tauri/vendored/**/* linguist-generated=true
-src-tauri/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

.github/pull_request_template.md

@@ -0,0 +1,18 @@
+## Summary
+
+<!-- Describe the bug and the fix in 1-3 sentences. -->
+
+## 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.
+- [ ] I have read and followed [`CONTRIBUTING.md`](CONTRIBUTING.md).
+- [ ] I tested this change locally.
+- [ ] I added or updated tests when reasonable.
+
+Approved feedback item (required if not a bug fix or small-scope improvement):
+<!-- https://yaak.app/feedback/... -->
+
+## Related
+
+<!-- Link related issues, discussions, or feedback items. -->

.github/workflows/ci.yml

@@ -18,14 +18,13 @@ jobs:
       - uses: dtolnay/rust-toolchain@stable
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: 'src-tauri'
           shared-key: ci
           cache-on-failure: true
 
       - run: npm ci
+      - run: npm run bootstrap
       - run: npm run lint
       - name: Run JS Tests
         run: npm test
       - name: Run Rust Tests
         run: cargo test --all
-        working-directory: src-tauri

.github/workflows/claude.yml

@@ -0,0 +1,50 @@
+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/flathub.yml

@@ -0,0 +1,52 @@
+name: Update Flathub
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+
+jobs:
+  update-flathub:
+    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
+
+      - name: Checkout Flathub repo
+        uses: actions/checkout@v4
+        with:
+          repository: flathub/app.yaak.Yaak
+          token: ${{ secrets.FLATHUB_TOKEN }}
+          path: flathub-repo
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Install source generators
+        run: |
+          pip install flatpak-node-generator tomlkit aiohttp
+          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
+
+      - name: Commit and push to Flathub
+        working-directory: flathub-repo
+        run: |
+          git config user.name "github-actions[bot]"
+          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 push

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

@@ -0,0 +1,59 @@
+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:
+    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,179 @@
+name: Release App 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-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
+
+      - 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-client/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-client/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/release-cli-npm.yml

@@ -0,0 +1,218 @@
+name: Release CLI to NPM
+
+on:
+  push:
+    tags: [yaak-cli-*]
+  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:
+    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#yaak-cli-}"
+          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#yaak-cli-}"
+          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.yml

@@ -1,131 +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:
-          workspaces: 'src-tauri'
-          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 lint
-      - name: Run JS Tests
-        run: npm test
-      - name: Run Rust Tests
-        run: cargo test --all
-        working-directory: src-tauri
-
-      - name: Set version
-        run: npm run replace-version
-        env:
-          YAAK_VERSION: ${{ github.ref_name }}
-
-      - 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 ./src-tauri/tauri.release.conf.json'

.gitignore

@@ -25,6 +25,7 @@ dist-ssr
 *.sln
 *.sw?
 .eslintcache
+out
 
 *.sqlite
 *.sqlite-*
@@ -33,3 +34,27 @@ dist-ssr
 
 .tmp
 tmp
+.zed
+codebook.toml
+target
+
+# Per-worktree Tauri config (generated by post-checkout hook)
+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
+**/permissions/schemas
+
+# Flatpak build artifacts
+flatpak-repo/
+.flatpak-builder/
+flatpak/flatpak-builder-tools/
+flatpak/cargo-sources.json
+flatpak/node-sources.json
+
+# Local Codex desktop env state
+.codex/environments/environment.toml
+
+# Claude Code local settings
+.claude/settings.local.json

.husky/post-checkout

@@ -0,0 +1 @@
+node scripts/git-hooks/post-checkout.mjs "$@"

AGENTS.md

@@ -0,0 +1,2 @@
+- Tag safety: app releases use `v*` tags and CLI releases use `yaak-cli-*` tags; always confirm which one is requested before retagging.
+- Do not commit, push, or tag without explicit approval

CONTRIBUTING.md

@@ -0,0 +1,16 @@
+# Contributing to Yaak
+
+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.
+
+## Development Setup
+
+For local setup and development workflows, see [`DEVELOPMENT.md`](DEVELOPMENT.md).

Cargo.toml

@@ -0,0 +1,91 @@
+[workspace]
+resolver = "2"
+members = [
+    "crates/yaak",
+    # Common/foundation crates
+    "crates/common/yaak-database",
+    "crates/common/yaak-rpc",
+    # 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",
+    "crates/yaak-proxy",
+    # Proxy-specific crates
+    "crates-proxy/yaak-proxy-lib",
+    # 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-tauri-utils",
+    "crates-tauri/yaak-window",
+]
+
+[workspace.dependencies]
+chrono = "0.4.42"
+hex = "0.4.3"
+keyring = "3.6.3"
+log = "0.4.29"
+reqwest = "0.12.20"
+rustls = { version = "0.23.34", default-features = false }
+rustls-platform-verifier = "0.6.2"
+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"
+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" }
+
+# Internal crates - shared
+yaak-core = { path = "crates/yaak-core" }
+yaak = { path = "crates/yaak" }
+yaak-common = { path = "crates/yaak-common" }
+yaak-crypto = { path = "crates/yaak-crypto" }
+yaak-git = { path = "crates/yaak-git" }
+yaak-grpc = { path = "crates/yaak-grpc" }
+yaak-http = { path = "crates/yaak-http" }
+yaak-models = { path = "crates/yaak-models" }
+yaak-plugins = { path = "crates/yaak-plugins" }
+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-tauri-utils = { path = "crates-tauri/yaak-tauri-utils" }
+yaak-window = { path = "crates-tauri/yaak-window" }
+
+[profile.release]
+strip = false

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/src-tauri/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>
 
@@ -19,10 +19,10 @@
 
 
 <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/"><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/"><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;<!-- 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;<!-- sponsors-base -->
 </p>
 
 ![Yaak API Client](https://yaak.app/static/screenshot.png)
@@ -58,13 +58,15 @@ Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight
 
 ## Contribution Policy
 
-Yaak is open source but only accepting contributions for bug fixes. To get started, 
-visit [`DEVELOPMENT.md`](DEVELOPMENT.md) for tips on setting up your environment.
+> [!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).
+> See [`CONTRIBUTING.md`](CONTRIBUTING.md) for policy details and [`DEVELOPMENT.md`](DEVELOPMENT.md) for local setup.
 
 ## Useful Resources
 
 - [Feedback and Bug Reports](https://feedback.yaak.app)
-- [Documentation](https://feedback.yaak.app/help)
+- [Documentation](https://yaak.app/docs)
 - [Yaak vs Postman](https://yaak.app/alternatives/postman)
 - [Yaak vs Bruno](https://yaak.app/alternatives/bruno)
 - [Yaak vs Insomnia](https://yaak.app/alternatives/insomnia)

apps/yaak-client/commands/moveToWorkspace.tsx

@@ -3,23 +3,30 @@ import type { GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-intern
 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';
 
 export const moveToWorkspace = createFastMutation({
   mutationKey: ['move_workspace'],
-  mutationFn: async (request: HttpRequest | GrpcRequest | WebsocketRequest) => {
+  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)}`;
 
     showDialog({
       id: 'change-workspace',
-      title: 'Move Workspace',
+      title,
       size: 'sm',
       render: ({ hide }) => (
         <MoveToWorkspaceDialog
           onDone={hide}
-          request={request}
+          requests={requests}
           activeWorkspaceId={activeWorkspaceId}
         />
       ),

apps/yaak-client/commands/openFolderSettings.tsx

@@ -1,21 +1,14 @@
 import { getModel } from '@yaakapp-internal/models';
-import { Icon } from '../components/core/Icon';
-import { HStack } from '../components/core/Stacks';
 import type { FolderSettingsTab } from '../components/FolderSettingsDialog';
 import { FolderSettingsDialog } from '../components/FolderSettingsDialog';
 import { showDialog } from '../lib/dialog';
-import { resolvedModelName } from '../lib/resolvedModelName';
 
 export function openFolderSettings(folderId: string, tab?: FolderSettingsTab) {
   const folder = getModel('folder', folderId);
+  if (folder == null) return;
   showDialog({
     id: 'folder-settings',
-    title: (
-      <HStack space={2} alignItems="center">
-        <Icon icon="folder_cog" size="xl" color="secondary" />
-        {resolvedModelName(folder)}
-      </HStack>
-    ),
+    title: null,
     size: 'lg',
     className: 'h-[50rem]',
     noPadding: true,

apps/yaak-client/commands/openSettings.tsx

@@ -5,7 +5,10 @@ import { jotaiStore } from '../lib/jotai';
 import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 
-export const openSettings = createFastMutation<void, string, SettingsTab | null>({
+// Allow tab with optional subtab (e.g., "plugins:installed")
+type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}` | null;
+
+export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab>({
   mutationKey: ['open_settings'],
   mutationFn: async (tab) => {
     const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
@@ -14,7 +17,7 @@ export const openSettings = createFastMutation<void, string, SettingsTab | null>
     const location = router.buildLocation({
       to: '/workspaces/$workspaceId/settings',
       params: { workspaceId },
-      search: { tab: tab ?? undefined },
+      search: { tab: (tab ?? undefined) as SettingsTab | undefined },
     });
 
     await invokeCmd('cmd_new_child_window', {

apps/yaak-client/components/CloneGitRepositoryDialog.tsx

@@ -0,0 +1,161 @@
+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';
+
+interface Props {
+  hide: () => void;
+}
+
+// Detect path separator from an existing path (defaults to /)
+function getPathSeparator(path: string): string {
+  return path.includes('\\') ? '\\' : '/';
+}
+
+export function CloneGitRepositoryDialog({ hide }: Props) {
+  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 [isCloning, setIsCloning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const repoName = extractRepoName(url);
+  const sep = getPathSeparator(baseDirectory);
+  const computedDirectory = repoName ? `${baseDirectory}${sep}${repoName}` : baseDirectory;
+  const directory = directoryOverride ?? computedDirectory;
+  const workspaceDirectory =
+    hasSubdirectory && subdirectory ? `${directory}${sep}${subdirectory}` : directory;
+
+  const handleSelectDirectory = async () => {
+    const dir = await open({
+      title: 'Select Directory',
+      directory: true,
+      multiple: false,
+    });
+    if (dir != null) {
+      setBaseDirectory(dir);
+      setDirectoryOverride(null);
+    }
+  };
+
+  const handleClone = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!url || !directory) return;
+
+    setIsCloning(true);
+    setError(null);
+
+    try {
+      const result = await gitClone(url, directory, promptCredentials);
+
+      if (result.type === 'needs_credentials') {
+        setError(
+          result.error ?? 'Authentication failed. Please check your credentials and try again.',
+        );
+        return;
+      }
+
+      // Open the workspace from the cloned directory (or subdirectory)
+      await openWorkspaceFromSyncDir.mutateAsync(workspaceDirectory);
+
+      hide();
+    } catch (err) {
+      setError(String(err));
+      showErrorToast({
+        id: 'git-clone-error',
+        title: 'Clone Failed',
+        message: String(err),
+      });
+    } finally {
+      setIsCloning(false);
+    }
+  };
+
+  return (
+    <VStack as="form" space={3} alignItems="start" className="pb-3" onSubmit={handleClone}>
+      {error && (
+        <Banner color="danger" className="w-full">
+          {error}
+        </Banner>
+      )}
+
+      <PlainInput
+        required
+        label="Repository URL"
+        placeholder="https://github.com/user/repo.git"
+        defaultValue={url}
+        onChange={setUrl}
+      />
+
+      <PlainInput
+        label="Directory"
+        placeholder={appInfo.defaultProjectDir}
+        defaultValue={directory}
+        onChange={setDirectoryOverride}
+        rightSlot={
+          <IconButton
+            size="xs"
+            className="mr-0.5 !h-auto my-0.5"
+            icon="folder"
+            title="Browse"
+            onClick={handleSelectDirectory}
+          />
+        }
+      />
+
+      <Checkbox
+        checked={hasSubdirectory}
+        onChange={setHasSubdirectory}
+        title="Workspace is in a subdirectory"
+        help="Enable if the Yaak workspace files are not at the root of the repository"
+      />
+
+      {hasSubdirectory && (
+        <PlainInput
+          label="Subdirectory"
+          placeholder="path/to/workspace"
+          defaultValue={subdirectory}
+          onChange={setSubdirectory}
+        />
+      )}
+
+      <Button
+        type="submit"
+        color="primary"
+        className="w-full mt-3"
+        disabled={!url || !directory || isCloning}
+        isLoading={isCloning}
+      >
+        {isCloning ? 'Cloning...' : 'Clone Repository'}
+      </Button>
+    </VStack>
+  );
+}
+
+function extractRepoName(url: string): string {
+  // Handle various Git URL formats:
+  // https://github.com/user/repo.git
+  // git@github.com:user/repo.git
+  // https://github.com/user/repo
+  const match = url.match(/\/([^/]+?)(\.git)?$/);
+  if (match?.[1]) {
+    return match[1];
+  }
+  // Fallback for SSH-style URLs
+  const sshMatch = url.match(/:([^/]+?)(\.git)?$/);
+  if (sshMatch?.[1]) {
+    return sshMatch[1];
+  }
+  return '';
+}

apps/yaak-client/components/CommandPaletteDialog.tsx

@@ -21,7 +21,7 @@ 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 { Icon, useDebouncedState } from '@yaakapp-internal/ui';
 import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useGrpcRequestActions } from '../hooks/useGrpcRequestActions';
 import type { HotkeyAction } from '../hooks/useHotKey';
@@ -32,6 +32,8 @@ 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 { showDialog } from '../lib/dialog';
@@ -46,9 +48,8 @@ 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 { Hotkey } from './core/Hotkey';
 import { HttpMethodTag } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
 import { PlainInput } from './core/PlainInput';
 
 interface CommandPaletteGroup {
@@ -139,7 +140,7 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
       {
         key: 'environment.edit',
         label: 'Edit Environment',
-        action: 'environmentEditor.toggle',
+        action: 'environment_editor.toggle',
         onSelect: () => editEnvironment(activeEnvironment),
       },
       {
@@ -162,6 +163,14 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
         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}`,
@@ -493,5 +502,5 @@ function CommandPaletteItem({
 }
 
 function CommandPaletteAction({ action }: { action: HotkeyAction }) {
-  return <HotKey className="ml-auto" action={action} />;
+  return <Hotkey className="ml-auto" action={action} />;
 }

apps/yaak-client/components/ConfirmLargeResponseRequest.tsx

@@ -0,0 +1,58 @@
+import type { HttpResponse } from '@yaakapp-internal/models';
+import { type ReactNode, useMemo } from 'react';
+import { getRequestBodyText as getHttpResponseRequestBodyText } from '../hooks/useHttpRequestBody';
+import { useToggle } from '../hooks/useToggle';
+import { isProbablyTextContentType } from '../lib/contentType';
+import { getContentTypeFromHeaders } from '../lib/model_util';
+import { CopyButton } from './CopyButton';
+import { Banner } from './core/Banner';
+import { Button } from './core/Button';
+import { InlineCode } from './core/InlineCode';
+import { SizeTag } from './core/SizeTag';
+import { HStack } from './core/Stacks';
+
+interface Props {
+  children: ReactNode;
+  response: HttpResponse;
+}
+
+const LARGE_BYTES = 2 * 1000 * 1000;
+
+export function ConfirmLargeResponseRequest({ children, response }: Props) {
+  const [showLargeResponse, toggleShowLargeResponse] = useToggle();
+  const isProbablyText = useMemo(() => {
+    const contentType = getContentTypeFromHeaders(response.headers);
+    return isProbablyTextContentType(contentType);
+  }, [response.headers]);
+
+  const contentLength = response.requestContentLength ?? 0;
+  const isLarge = contentLength > LARGE_BYTES;
+  if (!showLargeResponse && isLarge) {
+    return (
+      <Banner color="primary" className="flex flex-col gap-3">
+        <p>
+          Showing content over{' '}
+          <InlineCode>
+            <SizeTag contentLength={LARGE_BYTES} />
+          </InlineCode>{' '}
+          may impact performance
+        </p>
+        <HStack wrap space={2}>
+          <Button color="primary" size="xs" onClick={toggleShowLargeResponse}>
+            Reveal Request Body
+          </Button>
+          {isProbablyText && (
+            <CopyButton
+              color="secondary"
+              variant="border"
+              size="xs"
+              text={() => getHttpResponseRequestBodyText(response).then((d) => d?.bodyText ?? '')}
+            />
+          )}
+        </HStack>
+      </Banner>
+    );
+  }
+
+  return <>{children}</>;
+}

apps/yaak-client/components/CookieDialog.tsx

@@ -38,7 +38,7 @@ export const CookieDialog = ({ cookieJarId }: Props) => {
         </thead>
         <tbody className="divide-y divide-surface-highlight">
           {cookieJar?.cookies.map((c: Cookie) => (
-            <tr key={c.domain + c.raw_cookie + c.path + c.expires}>
+            <tr key={JSON.stringify(c)}>
               <td className="py-2 select-text cursor-text font-mono font-semibold max-w-0">
                 {cookieDomain(c)}
               </td>

apps/yaak-client/components/CookieDropdown.tsx

@@ -9,7 +9,7 @@ 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 { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 

apps/yaak-client/components/CreateWorkspaceDialog.tsx

@@ -51,7 +51,11 @@ export function CreateWorkspaceDialog({ hide }: Props) {
           gitMutations(syncConfig.filePath, gitCallbacks(syncConfig.filePath))
             .init.mutateAsync()
             .catch((err) => {
-              showErrorToast('git-init-error', String(err));
+              showErrorToast({
+                id: 'git-init-error',
+                title: 'Error initializing Git',
+                message: String(err),
+              });
             });
         }
 

apps/yaak-client/components/DnsOverridesEditor.tsx

@@ -0,0 +1,181 @@
+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';
+
+interface Props {
+  workspace: Workspace;
+}
+
+interface DnsOverrideWithId extends DnsOverride {
+  _id: string;
+}
+
+export function DnsOverridesEditor({ workspace }: Props) {
+  const reactId = useId();
+
+  // Ensure each override has an internal ID for React keys
+  const overridesWithIds = useMemo<DnsOverrideWithId[]>(() => {
+    return workspace.settingDnsOverrides.map((override, index) => ({
+      ...override,
+      _id: `${reactId}-${index}`,
+    }));
+  }, [workspace.settingDnsOverrides, reactId]);
+
+  const handleChange = useCallback(
+    (overrides: DnsOverride[]) => {
+      patchModel(workspace, { settingDnsOverrides: overrides });
+    },
+    [workspace],
+  );
+
+  const handleAdd = useCallback(() => {
+    const newOverride: DnsOverride = {
+      hostname: '',
+      ipv4: [''],
+      ipv6: [],
+      enabled: true,
+    };
+    handleChange([...workspace.settingDnsOverrides, newOverride]);
+  }, [workspace.settingDnsOverrides, handleChange]);
+
+  const handleUpdate = useCallback(
+    (index: number, update: Partial<DnsOverride>) => {
+      const updated = workspace.settingDnsOverrides.map((o, i) =>
+        i === index ? { ...o, ...update } : o,
+      );
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  const handleDelete = useCallback(
+    (index: number) => {
+      const updated = workspace.settingDnsOverrides.filter((_, i) => i !== index);
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  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.
+      </div>
+
+      {overridesWithIds.length > 0 && (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell className="w-8" />
+              <TableHeaderCell>Hostname</TableHeaderCell>
+              <TableHeaderCell>IPv4 Address</TableHeaderCell>
+              <TableHeaderCell>IPv6 Address</TableHeaderCell>
+              <TableHeaderCell className="w-10" />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {overridesWithIds.map((override, index) => (
+              <DnsOverrideRow
+                key={override._id}
+                override={override}
+                onUpdate={(update) => handleUpdate(index, update)}
+                onDelete={() => handleDelete(index)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <HStack>
+        <Button size="xs" color="secondary" variant="border" onClick={handleAdd}>
+          Add DNS Override
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
+
+interface DnsOverrideRowProps {
+  override: DnsOverride;
+  onUpdate: (update: Partial<DnsOverride>) => void;
+  onDelete: () => void;
+}
+
+function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
+  const ipv4Value = override.ipv4.join(', ');
+  const ipv6Value = override.ipv6.join(', ');
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Checkbox
+          hideLabel
+          title={override.enabled ? 'Disable override' : 'Enable override'}
+          checked={override.enabled ?? true}
+          onChange={(enabled) => onUpdate({ enabled })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="Hostname"
+          placeholder="api.example.com"
+          defaultValue={override.hostname}
+          onChange={(hostname) => onUpdate({ hostname })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv4 addresses"
+          placeholder="127.0.0.1"
+          defaultValue={ipv4Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv4: value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv6 addresses"
+          placeholder="::1"
+          defaultValue={ipv6Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv6: value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <IconButton
+          size="xs"
+          iconSize="sm"
+          icon="trash"
+          title="Delete override"
+          onClick={onDelete}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -6,13 +6,14 @@ import type {
   FormInputEditor,
   FormInputFile,
   FormInputHttpRequest,
+  FormInputKeyValue,
   FormInputSelect,
   FormInputText,
   JsonPrimitive,
 } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useRandomKey } from '../hooks/useRandomKey';
 import { capitalize } from '../lib/capitalize';
@@ -26,6 +27,8 @@ 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';
@@ -195,13 +198,16 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               />
             );
           case 'accordion':
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
             return (
               <div key={i + stateKey}>
                 <DetailsBanner
                   summary={input.label}
                   className={classNames('!mb-auto', disabled && 'opacity-disabled')}
                 >
-                  <div className="my-3">
+                  <div className="mt-3">
                     <FormInputsStack
                       data={data}
                       disabled={disabled}
@@ -216,6 +222,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               </div>
             );
           case 'h_stack':
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
             return (
               <div className="flex flex-wrap sm:flex-nowrap gap-3 items-end" key={i + stateKey}>
                 <FormInputs
@@ -230,6 +239,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
               </div>
             );
           case 'banner':
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
             return (
               <Banner
                 key={i + stateKey}
@@ -249,6 +261,18 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
             );
           case 'markdown':
             return <Markdown key={i + stateKey}>{input.content}</Markdown>;
+          case 'key_value':
+            return (
+              <KeyValueArg
+                key={i + stateKey}
+                arg={input}
+                stateKey={stateKey}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? '[]')
+                }
+              />
+            );
           default:
             // @ts-expect-error
             throw new Error(`Invalid input type: ${input.type}`);
@@ -293,7 +317,7 @@ function TextArg({
     autocompleteFunctions,
     autocompleteVariables,
   };
-  if (autocompleteVariables || autocompleteFunctions) {
+  if (autocompleteVariables || autocompleteFunctions || arg.completionOptions) {
     return <Input {...props} />;
   }
   return <PlainInput {...props} />;
@@ -336,8 +360,9 @@ function EditorArg({
         className={classNames(
           'border border-border rounded-md overflow-hidden px-2 py-1',
           'focus-within:border-border-focus',
-          'max-h-[10rem]', // So it doesn't take up too much space
+          !arg.rows && 'max-h-[10rem]', // So it doesn't take up too much space
         )}
+        style={arg.rows ? { height: `${arg.rows * 1.4 + 0.75}rem` } : undefined}
       >
         <Editor
           id={id}
@@ -539,3 +564,68 @@ function CheckboxArg({
     />
   );
 }
+
+function KeyValueArg({
+  arg,
+  onChange,
+  value,
+  stateKey,
+}: {
+  arg: FormInputKeyValue;
+  value: string;
+  onChange: (v: string) => void;
+  stateKey: string;
+}) {
+  const pairs: Pair[] = useMemo(() => {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }, [value]);
+
+  const handleChange = useCallback(
+    (newPairs: Pair[]) => {
+      onChange(JSON.stringify(newPairs));
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="w-full grid grid-cols-1 grid-rows-[auto_minmax(0,1fr)] overflow-hidden">
+      <Label
+        htmlFor={`input-${arg.name}`}
+        required={!arg.optional}
+        visuallyHidden={arg.hideLabel}
+        help={arg.description}
+      >
+        {arg.label ?? arg.name}
+      </Label>
+      <PairEditor
+        pairs={pairs}
+        onChange={handleChange}
+        stateKey={stateKey}
+        namePlaceholder="name"
+        valuePlaceholder="value"
+        noScroll
+      />
+    </div>
+  );
+}
+
+function hasVisibleInputs(inputs: FormInput[] | undefined): boolean {
+  if (!inputs) return false;
+
+  for (const input of inputs) {
+    if ('inputs' in input && !hasVisibleInputs(input.inputs)) {
+      // Has children, but none are visible
+      return false;
+    }
+    if (!input.hidden) {
+      return true;
+    }
+  }
+
+  return false;
+}

apps/yaak-client/components/EnvironmentActionsDropdown.tsx

@@ -8,7 +8,7 @@ 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 { Icon } from '@yaakapp-internal/ui';
 import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
 
 type Props = {
@@ -45,7 +45,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         : []) as DropdownItem[]),
       {
         label: 'Manage Environments',
-        hotKeyAction: 'environmentEditor.toggle',
+        hotKeyAction: 'environment_editor.toggle',
         leftSlot: <Icon icon="box" />,
         onSelect: () => editEnvironment(activeEnvironment),
       },

apps/yaak-client/components/EnvironmentEditDialog.tsx

@@ -1,13 +1,14 @@
 import type { Environment, Workspace } from '@yaakapp-internal/models';
 import { duplicateModel, patchModel } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { createSubEnvironmentAndActivate } from '../commands/createEnvironment';
 import { activeWorkspaceAtom, activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
 import {
   environmentsBreakdownAtom,
   useEnvironmentsBreakdown,
 } from '../hooks/useEnvironmentsBreakdown';
+import { useHotKey } from '../hooks/useHotKey';
 import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm';
 import { jotaiStore } from '../lib/jotai';
 import { isBaseEnvironment, isSubEnvironment } from '../lib/model_util';
@@ -15,19 +16,25 @@ import { resolvedModelName } from '../lib/resolvedModelName';
 import { showColorPicker } from '../lib/showColorPicker';
 import { Banner } from './core/Banner';
 import type { ContextMenuProps, DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { ContextMenu } from './core/Dropdown';
+import { Icon, Tree } from '@yaakapp-internal/ui';
+import type { TreeNode, TreeHandle, TreeProps } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { IconTooltip } from './core/IconTooltip';
 import { InlineCode } from './core/InlineCode';
 import type { PairEditorHandle } from './core/PairEditor';
 import { SplitLayout } from './core/SplitLayout';
-import type { TreeNode } from './core/tree/common';
-import type { TreeHandle, TreeProps } from './core/tree/Tree';
-import { Tree } from './core/tree/Tree';
+import { atomFamily } from 'jotai/utils';
+import { atomWithKVStorage } from '../lib/atoms/atomWithKVStorage';
 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;
@@ -129,44 +136,43 @@ function EnvironmentEditDialogSidebar({
     [baseEnvironment?.id, selectedEnvironmentId, setSelectedEnvironmentId],
   );
 
-  const actions = useMemo(() => {
-    const enable = () => treeRef.current?.hasFocus() ?? false;
+  const treeHasFocus = useCallback(() => treeRef.current?.hasFocus() ?? false, []);
 
-    const actions = {
-      'sidebar.selected.rename': {
-        enable,
-        allowDefault: true,
-        priority: 100,
-        cb: async (items: TreeModel[]) => {
-          const item = items[0];
-          if (items.length === 1 && item != null) {
-            treeRef.current?.renameItem(item.id);
-          }
-        },
-      },
-      'sidebar.selected.delete': {
-        priority: 100,
-        enable,
-        cb: (items: TreeModel[]) => deleteModelWithConfirm(items),
-      },
-      'sidebar.selected.duplicate': {
-        priority: 100,
-        enable,
-        cb: async (items: TreeModel[]) => {
-          if (items.length === 1 && items[0]) {
-            const item = items[0];
-            const newId = await duplicateModel(item);
-            setSelectedEnvironmentId(newId);
-          } else {
-            await Promise.all(items.map(duplicateModel));
-          }
-        },
-      },
-    } as const;
-    return actions;
+  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]);
 
-  const hotkeys = useMemo<TreeProps<TreeModel>['hotkeys']>(() => ({ actions }), [actions]);
+  useHotKey('sidebar.selected.rename', handleRenameSelected, { enable: treeHasFocus, allowDefault: true, priority: 100 });
+  useHotKey('sidebar.selected.delete', useCallback(() => {
+    const items = getSelectedTreeModels();
+    if (items) 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'] => {
@@ -184,6 +190,9 @@ function EnvironmentEditDialogSidebar({
       }
 
       const singleEnvironment = items.length === 1;
+      const canDeleteEnvironment =
+        isSubEnvironment(environment) ||
+        (isBaseEnvironment(environment) && baseEnvironments.length > 1);
 
       const menuItems: DropdownItem[] = [
         {
@@ -192,12 +201,10 @@ function EnvironmentEditDialogSidebar({
           hidden: isBaseEnvironment(environment) || !singleEnvironment,
           hotKeyAction: 'sidebar.selected.rename',
           hotKeyLabelOnly: true,
-          onSelect: async () => {
+          onSelect: () => {
             // Not sure why this is needed, but without it the
             // edit input blurs immediately after opening.
-            requestAnimationFrame(() => {
-              actions['sidebar.selected.rename'].cb(items);
-            });
+            requestAnimationFrame(() => handleRenameSelected());
           },
         },
         {
@@ -206,7 +213,7 @@ function EnvironmentEditDialogSidebar({
           hidden: isBaseEnvironment(environment),
           hotKeyAction: 'sidebar.selected.duplicate',
           hotKeyLabelOnly: true,
-          onSelect: () => actions['sidebar.selected.duplicate'].cb(items),
+          onSelect: () => handleDuplicateSelected(items),
         },
         {
           label: environment.color ? 'Change Color' : 'Assign Color',
@@ -228,9 +235,7 @@ function EnvironmentEditDialogSidebar({
           label: 'Delete',
           hotKeyAction: 'sidebar.selected.delete',
           hotKeyLabelOnly: true,
-          hidden:
-            (isBaseEnvironment(environment) && baseEnvironments.length <= 1) ||
-            !isSubEnvironment(environment),
+          hidden: !canDeleteEnvironment,
           leftSlot: <Icon icon="trash" />,
           onSelect: () => handleDeleteEnvironment(environment),
         },
@@ -244,7 +249,7 @@ function EnvironmentEditDialogSidebar({
 
       return menuItems;
     },
-    [actions, baseEnvironments.length, handleDeleteEnvironment],
+    [baseEnvironments.length, handleDeleteEnvironment, setSelectedEnvironmentId],
   );
 
   const handleDragEnd = useCallback(async function handleDragEnd({
@@ -291,6 +296,13 @@ function EnvironmentEditDialogSidebar({
     [setSelectedEnvironmentId],
   );
 
+  const renderContextMenuFn = useCallback<NonNullable<TreeProps<TreeModel>['renderContextMenu']>>(
+    ({ items, position, onClose }) => (
+      <ContextMenu items={items as DropdownItem[]} triggerPosition={position} onClose={onClose} />
+    ),
+    [],
+  );
+
   const tree = useAtomValue(treeAtom);
   return (
     <aside className="x-theme-sidebar h-full w-full min-w-0 grid overflow-y-auto border-r border-border-subtle ">
@@ -299,10 +311,11 @@ function EnvironmentEditDialogSidebar({
           <Tree
             ref={treeRef}
             treeId={treeId}
+            collapsedAtom={collapsedFamily(treeId)}
             className="px-2 pb-10"
-            hotkeys={hotkeys}
             root={tree}
             getContextMenu={getContextMenu}
+            renderContextMenu={renderContextMenuFn}
             onDragEnd={handleDragEnd}
             getItemKey={(i) => `${i.id}::${i.name}`}
             ItemLeftSlotInner={ItemLeftSlotInner}

apps/yaak-client/components/EnvironmentEditor.tsx

@@ -74,7 +74,7 @@ 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;
-    return name.match(/^[a-z_][a-z0-9_-]*$/i) != null;
+    return name.match(/^[a-z_][a-z0-9_.-]*$/i) != null;
   }, []);
 
   const valueType = !isEncryptionEnabled && valueVisibility.value ? 'text' : 'password';

apps/yaak-client/components/ExportDataDialog.tsx

@@ -128,7 +128,7 @@ function ExportDataDialogContent({
             ))}
           </tbody>
         </table>
-        <DetailsBanner color="secondary" open summary="Extra Settings">
+        <DetailsBanner color="secondary" defaultOpen summary="Extra Settings">
           <Checkbox
             checked={includePrivateEnvironments}
             onChange={setIncludePrivateEnvironments}

apps/yaak-client/components/FolderLayout.tsx

@@ -5,6 +5,7 @@ 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';
@@ -14,9 +15,8 @@ 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 { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 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';
@@ -30,6 +30,12 @@ interface Props {
 export function FolderLayout({ folder, style }: Props) {
   const folders = useAtomValue(foldersAtom);
   const requests = useAtomValue(allRequestsAtom);
+  const folderActions = useFolderActions();
+  const sendAllAction = useMemo(
+    () => folderActions.find((a) => a.label === 'Send All'),
+    [folderActions],
+  );
+
   const children = useMemo(() => {
     return [
       ...folders.filter((f) => f.folderId === folder.id),
@@ -37,6 +43,10 @@ export function FolderLayout({ folder, style }: Props) {
     ];
   }, [folder.id, folders, requests]);
 
+  const handleSendAll = useCallback(() => {
+    sendAllAction?.call(folder);
+  }, [sendAllAction, folder]);
+
   return (
     <div style={style} className="p-6 pt-4 overflow-y-auto @container">
       <HStack space={2} alignItems="center">
@@ -48,6 +58,8 @@ export function FolderLayout({ folder, style }: Props) {
             color="secondary"
             size="sm"
             variant="border"
+            onClick={handleSendAll}
+            disabled={sendAllAction == null}
           >
             Send All
           </Button>
@@ -188,7 +200,10 @@ function HttpRequestCard({ request }: { request: HttpRequest }) {
             <span>&bull;</span>
             <HttpResponseDurationTag response={latestResponse} />
             <span>&bull;</span>
-            <SizeTag contentLength={latestResponse.contentLength ?? 0} />
+            <SizeTag
+              contentLength={latestResponse.contentLength ?? 0}
+              contentLengthCompressed={latestResponse.contentLength}
+            />
           </HStack>
         </button>
       ) : (

apps/yaak-client/components/FolderSettingsDialog.tsx

@@ -0,0 +1,210 @@
+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 '@yaakapp-internal/ui';
+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';
+
+interface Props {
+  folderId: string | null;
+  tab?: FolderSettingsTab;
+}
+
+const TAB_AUTH = 'auth';
+const TAB_HEADERS = 'headers';
+const TAB_VARIABLES = 'variables';
+const TAB_GENERAL = 'general';
+
+export type FolderSettingsTab =
+  | typeof TAB_AUTH
+  | typeof TAB_HEADERS
+  | typeof TAB_GENERAL
+  | typeof TAB_VARIABLES;
+
+export function FolderSettingsDialog({ folderId, tab }: Props) {
+  const folders = useAtomValue(foldersAtom);
+  const folder = folders.find((f) => f.id === folderId) ?? null;
+  const ancestors = useModelAncestors(folder);
+  const breadcrumbs = useMemo(() => ancestors.toReversed(), [ancestors]);
+  const authTab = useAuthTab(TAB_AUTH, folder);
+  const headersTab = useHeadersTab(TAB_HEADERS, folder);
+  const inheritedHeaders = useInheritedHeaders(folder);
+  const environments = useEnvironmentsBreakdown();
+  const folderEnvironment = environments.allEnvironments.find(
+    (e) => e.parentModel === 'folder' && e.parentId === folderId,
+  );
+  const numVars = (folderEnvironment?.variables ?? []).filter((v) => v.name).length;
+
+  const tabs = useMemo<TabItem[]>(() => {
+    if (folder == null) return [];
+
+    return [
+      {
+        value: TAB_GENERAL,
+        label: 'General',
+      },
+      ...headersTab,
+      ...authTab,
+      {
+        value: TAB_VARIABLES,
+        label: 'Variables',
+        rightSlot: numVars > 0 ? <CountBadge count={numVars} /> : null,
+      },
+    ];
+  }, [authTab, folder, headersTab, 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" />
+        <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"
+                />
+              )}
+              <span className="text-text-subtle truncate min-w-0" title={item.name}>
+                {item.name}
+              </span>
+            </Fragment>
+          ))}
+          {breadcrumbs.length > 0 && (
+            <Icon icon="chevron_right" size="lg" className="opacity-50 flex-shrink-0" />
+          )}
+          <span
+            className="whitespace-nowrap"
+            title={folder.name}
+          >
+            {folder.name}
+          </span>
+        </div>
+      </div>
+
+      <Tabs
+        defaultValue={tab ?? TAB_GENERAL}
+        label="Folder Settings"
+        className="pt-2 pb-2 pl-3 pr-1 flex-1"
+        layout="horizontal"
+        addBorders
+        tabs={tabs}
+      >
+        <TabContent value={TAB_AUTH} className="overflow-y-auto h-full px-4">
+          <HttpAuthenticationEditor model={folder} />
+        </TabContent>
+        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-4">
+          <div className="grid grid-rows-[auto_minmax(0,1fr)_auto] gap-3 pb-3 h-full">
+            <Input
+              label="Folder Name"
+              defaultValue={folder.name}
+              onChange={(name) => patchModel(folder, { name })}
+              stateKey={`name.${folder.id}`}
+            />
+            <MarkdownEditor
+              name="folder-description"
+              placeholder="Folder description"
+              className="border border-border px-2"
+              defaultValue={folder.description}
+              stateKey={`description.${folder.id}`}
+              onChange={(description) => patchModel(folder, { description })}
+            />
+            <HStack alignItems="center" justifyContent="between" className="w-full">
+              <Button
+                onClick={async () => {
+                  const didDelete = await deleteModelWithConfirm(folder);
+                  if (didDelete) {
+                    hideDialog('folder-settings');
+                  }
+                }}
+                color="danger"
+                variant="border"
+                size="xs"
+              >
+                Delete Folder
+              </Button>
+              <InlineCode className="flex gap-1 items-center text-primary pl-2.5">
+                {folder.id}
+                <CopyIconButton
+                  className="opacity-70 !text-primary"
+                  size="2xs"
+                  iconSize="sm"
+                  title="Copy folder ID"
+                  text={folder.id}
+                />
+              </InlineCode>
+            </HStack>
+          </div>
+        </TabContent>
+        <TabContent value={TAB_HEADERS} className="overflow-y-auto h-full px-4">
+          <HeadersEditor
+            inheritedHeaders={inheritedHeaders}
+            forceUpdateKey={folder.id}
+            headers={folder.headers}
+            onChange={(headers) => patchModel(folder, { headers })}
+            stateKey={`headers.${folder.id}`}
+          />
+        </TabContent>
+        <TabContent value={TAB_VARIABLES} className="overflow-y-auto h-full px-4">
+          {folderEnvironment == null ? (
+            <EmptyStateText>
+              <VStack alignItems="center" space={1.5}>
+                <p>
+                  Override{' '}
+                  <Link href="https://yaak.app/docs/using-yaak/environments-and-variables">
+                    Variables
+                  </Link>{' '}
+                  for requests within this folder.
+                </p>
+                <Button
+                  variant="border"
+                  size="sm"
+                  onClick={async () => {
+                    await createWorkspaceModel({
+                      workspaceId: folder.workspaceId,
+                      parentModel: 'folder',
+                      parentId: folder.id,
+                      model: 'environment',
+                      name: 'Folder Environment',
+                    });
+                  }}
+                >
+                  Create Folder Environment
+                </Button>
+              </VStack>
+            </EmptyStateText>
+          ) : (
+            <EnvironmentEditor hideName environment={folderEnvironment} />
+          )}
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}

apps/yaak-client/components/GrpcConnectionLayout.tsx

@@ -9,7 +9,7 @@ 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 { HotkeyList } from './core/HotkeyList';
 import { SplitLayout } from './core/SplitLayout';
 import { GrpcRequestPane } from './GrpcRequestPane';
 import { GrpcResponsePane } from './GrpcResponsePane';
@@ -117,7 +117,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

@@ -10,7 +10,7 @@ import {
   stateExtensions,
   updateSchema,
 } from 'codemirror-json-schema';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { showAlert } from '../lib/alert';
 import { showDialog } from '../lib/dialog';
@@ -39,15 +39,15 @@ export function GrpcEditor({
   protoFiles,
   ...extraEditorProps
 }: Props) {
-  const editorViewRef = useRef<EditorView>(null);
+  const [editorView, setEditorView] = useState<EditorView | null>(null);
   const handleInitEditorViewRef = useCallback((h: EditorView | null) => {
-    editorViewRef.current = h;
+    setEditorView(h);
   }, []);
 
   // Find the schema for the selected service and method and update the editor
   useEffect(() => {
     if (
-      editorViewRef.current == null ||
+      editorView == null ||
       services === null ||
       request.service === null ||
       request.method === null
@@ -91,7 +91,7 @@ export function GrpcEditor({
     }
 
     try {
-      updateSchema(editorViewRef.current, JSON.parse(schema));
+      updateSchema(editorView, JSON.parse(schema));
     } catch (err) {
       showAlert({
         id: 'grpc-parse-schema-error',
@@ -107,7 +107,7 @@ export function GrpcEditor({
         ),
       });
     }
-  }, [services, request.method, request.service]);
+  }, [editorView, services, request.method, request.service]);
 
   const extraExtensions = useMemo(
     () => [
@@ -118,7 +118,7 @@ export function GrpcEditor({
       jsonLanguage.data.of({
         autocomplete: jsonCompletion(),
       }),
-      stateExtensions(/** Init with empty schema **/),
+      stateExtensions({}),
     ],
     [],
   );

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -6,7 +6,7 @@ import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
 import { pluralizeCount } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import { Link } from './core/Link';

apps/yaak-client/components/GrpcRequestPane.tsx

@@ -7,12 +7,11 @@ import { useContainerSize } from '../hooks/useContainerQuery';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useKeyValue } from '../hooks/useKeyValue';
 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 { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { PlainInput } from './core/PlainInput';
 import { RadioDropdown } from './core/RadioDropdown';
@@ -69,11 +68,6 @@ export function GrpcRequestPane({
   const authTab = useAuthTab(TAB_AUTH, activeRequest);
   const metadataTab = useHeadersTab(TAB_METADATA, activeRequest, 'Metadata');
   const inheritedHeaders = useInheritedHeaders(activeRequest);
-  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
-    namespace: 'no_sync',
-    key: 'grpcRequestActiveTabs',
-    fallback: {},
-  });
   const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
 
   const urlContainerEl = useRef<HTMLDivElement>(null);
@@ -145,14 +139,6 @@ export function GrpcRequestPane({
     [activeRequest.description, authTab, metadataTab],
   );
 
-  const activeTab = activeTabs?.[activeRequest.id];
-  const setActiveTab = useCallback(
-    async (tab: string) => {
-      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
-    },
-    [activeRequest.id, setActiveTabs],
-  );
-
   const handleMetadataChange = useCallback(
     (metadata: HttpRequestHeader[]) => patchModel(activeRequest, { metadata }),
     [activeRequest],
@@ -265,11 +251,11 @@ export function GrpcRequestPane({
         </HStack>
       </div>
       <Tabs
-        value={activeTab}
         label="Request"
-        onChangeValue={setActiveTab}
         tabs={tabs}
         tabListClassName="mt-1 !mb-1.5"
+        storageKey="grpc_request_tabs"
+        activeTabKey={activeRequest.id}
       >
         <TabContent value="message">
           <GrpcEditor

apps/yaak-client/components/GrpcResponsePane.tsx

@@ -0,0 +1,249 @@
+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 {
+  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, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
+import { HStack, VStack } from './core/Stacks';
+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';
+}
+
+export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
+  const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null);
+  const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
+  const [showingLarge, setShowingLarge] = useState<boolean>(false);
+  const connections = useAtomValue(activeGrpcConnections);
+  const activeConnection = useAtomValue(activeGrpcConnectionAtom);
+  const events = useGrpcEvents(activeConnection?.id ?? null);
+  const setPinnedGrpcConnectionId = useSetAtom(pinnedGrpcConnectionIdAtom);
+
+  const activeEvent = useMemo(
+    () => (activeEventIndex != null ? events[activeEventIndex] : null),
+    [activeEventIndex, events],
+  );
+
+  // Set the active message to the first message received if unary
+  // biome-ignore lint/correctness/useExhaustiveDependencies: none
+  useEffect(() => {
+    if (events.length === 0 || activeEvent != null || methodType !== 'unary') {
+      return;
+    }
+    const firstServerMessageIndex = events.findIndex((m) => m.eventType === 'server_message');
+    if (firstServerMessageIndex !== -1) {
+      setActiveEventIndex(firstServerMessageIndex);
+    }
+  }, [events.length]);
+
+  if (activeConnection == null) {
+    return (
+      <HotkeyList hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']} />
+    );
+  }
+
+  const header = (
+    <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' && (
+          <LoadingIcon size="sm" className="text-text-subtlest" />
+        )}
+      </HStack>
+      <div className="ml-auto">
+        <RecentGrpcConnectionsDropdown
+          connections={connections}
+          activeConnection={activeConnection}
+          onPinnedConnectionId={setPinnedGrpcConnectionId}
+        />
+      </div>
+    </HStack>
+  );
+
+  return (
+    <div style={style} className="h-full">
+      <ErrorBoundary name="GRPC Events">
+        <EventViewer
+          events={events}
+          getEventKey={(event) => event.id}
+          error={activeConnection.error}
+          header={header}
+          splitLayoutName="grpc_events"
+          defaultRatio={0.4}
+          renderRow={({ event, isActive, onClick }) => (
+            <GrpcEventRow event={event} isActive={isActive} onClick={onClick} />
+          )}
+          renderDetail={({ event, onClose }) => (
+            <GrpcEventDetail
+              event={event}
+              showLarge={showLarge}
+              showingLarge={showingLarge}
+              setShowLarge={setShowLarge}
+              setShowingLarge={setShowingLarge}
+              onClose={onClose}
+            />
+          )}
+        />
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+function GrpcEventRow({
+  event,
+  isActive,
+  onClick,
+}: {
+  event: GrpcEvent;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  const { eventType, status, content, error } = event;
+  const display = getEventDisplay(eventType, status);
+
+  return (
+    <EventViewerRow
+      isActive={isActive}
+      onClick={onClick}
+      icon={<Icon color={display.color} title={display.title} icon={display.icon} />}
+      content={
+        <span className="text-xs">
+          {content.slice(0, 1000)}
+          {error && <span className="text-warning"> ({error})</span>}
+        </span>
+      }
+      timestamp={event.createdAt}
+    />
+  );
+}
+
+function GrpcEventDetail({
+  event,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
+  onClose,
+}: {
+  event: GrpcEvent;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  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)]">
+        <EventDetailHeader
+          title={title}
+          timestamp={event.createdAt}
+          copyText={event.content}
+          onClose={onClose}
+        />
+        {!showLarge && event.content.length > 1000 * 1000 ? (
+          <VStack space={2} className="italic text-text-subtlest">
+            Message previews larger than 1MB are hidden
+            <div>
+              <Button
+                onClick={() => {
+                  setShowingLarge(true);
+                  setTimeout(() => {
+                    setShowLarge(true);
+                    setShowingLarge(false);
+                  }, 500);
+                }}
+                isLoading={showingLarge}
+                color="secondary"
+                variant="border"
+                size="xs"
+              >
+                Try Showing
+              </Button>
+            </div>
+          </VStack>
+        ) : (
+          <Editor
+            language="json"
+            defaultValue={event.content ?? ''}
+            wrapLines={false}
+            readOnly={true}
+            stateKey={null}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Error or connection_end - show metadata/trailers
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+      <EventDetailHeader title={event.content} timestamp={event.createdAt} onClose={onClose} />
+      {event.error && (
+        <div className="select-text cursor-text text-sm font-mono py-1 text-warning">
+          {event.error}
+        </div>
+      )}
+      <div className="py-2 h-full">
+        {Object.keys(event.metadata).length === 0 ? (
+          <EmptyStateText>
+            No {event.eventType === 'connection_end' ? 'trailers' : 'metadata'}
+          </EmptyStateText>
+        ) : (
+          <KeyValueRows>
+            {Object.entries(event.metadata).map(([key, value]) => (
+              <KeyValueRow key={key} label={key}>
+                {value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </div>
+    </div>
+  );
+}
+
+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' };
+  }
+  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 === 'connection_end') {
+    return { icon: 'check', color: 'success', title: 'Connection response' };
+  }
+  return { icon: 'info', color: undefined, title: 'Event' };
+}

apps/yaak-client/components/HeadersEditor.tsx

@@ -19,6 +19,7 @@ type Props = {
   forceUpdateKey: string;
   headers: HttpRequestHeader[];
   inheritedHeaders?: HttpRequestHeader[];
+  inheritedHeadersLabel?: string;
   stateKey: string;
   onChange: (headers: HttpRequestHeader[]) => void;
   label?: string;
@@ -28,20 +29,36 @@ export function HeadersEditor({
   stateKey,
   headers,
   inheritedHeaders,
+  inheritedHeadersLabel = 'Inherited',
   onChange,
   forceUpdateKey,
 }: Props) {
+  // Get header names defined at current level (case-insensitive)
+  const currentHeaderNames = new Set(
+    headers.filter((h) => h.name).map((h) => h.name.toLowerCase()),
+  );
+  // Filter inherited headers: must be enabled, have content, and not be overridden by current level
   const validInheritedHeaders =
-    inheritedHeaders?.filter((pair) => pair.enabled && (pair.name || pair.value)) ?? [];
+    inheritedHeaders?.filter(
+      (pair) =>
+        pair.enabled && (pair.name || pair.value) && !currentHeaderNames.has(pair.name.toLowerCase()),
+    ) ?? [];
+  const hasInheritedHeaders = validInheritedHeaders.length > 0;
   return (
-    <div className="@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
-      {validInheritedHeaders.length > 0 ? (
+    <div
+      className={
+        hasInheritedHeaders
+          ? '@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-1.5'
+          : '@container w-full h-full'
+      }
+    >
+      {hasInheritedHeaders && (
         <DetailsBanner
           color="secondary"
-          className="text-sm mb-1.5"
+          className="text-sm"
           summary={
             <HStack>
-              Inherited <CountBadge count={validInheritedHeaders.length} />
+              {inheritedHeadersLabel} <CountBadge count={validInheritedHeaders.length} />
             </HStack>
           }
         >
@@ -63,8 +80,6 @@ export function HeadersEditor({
             ))}
           </div>
         </DetailsBanner>
-      ) : (
-        <span />
       )}
       <PairOrBulkEditor
         forceUpdateKey={forceUpdateKey}

apps/yaak-client/components/HttpAuthenticationEditor.tsx

@@ -14,7 +14,7 @@ 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 { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import { Input, type InputProps } from './core/Input';
@@ -62,9 +62,7 @@ export function HttpAuthenticationEditor({ model }: Props) {
           <p>
             Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
           </p>
-          <Link href="https://feedback.yaak.app/help/articles/2112119-request-inheritance">
-            Documentation
-          </Link>
+          <Link href="https://yaak.app/docs/using-yaak/request-inheritance">Documentation</Link>
         </EmptyStateText>
       );
     }
@@ -140,7 +138,12 @@ export function HttpAuthenticationEditor({ model }: Props) {
                 }),
               )}
             >
-              <IconButton title="Authentication Actions" icon="settings" size="xs" />
+              <IconButton
+                title="Authentication Actions"
+                icon="settings"
+                size="xs"
+                className="!text-secondary"
+              />
             </Dropdown>
           )}
         </HStack>

apps/yaak-client/components/HttpRequestPane.tsx

@@ -4,7 +4,7 @@ import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { atom, useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
-import { lazy, Suspense, useCallback, useMemo, useState } from 'react';
+import { lazy, Suspense, useCallback, useMemo, useRef, useState } from 'react';
 import { activeRequestIdAtom } from '../hooks/useActiveRequestId';
 import { allRequestsAtom } from '../hooks/useAllRequests';
 import { useAuthTab } from '../hooks/useAuthTab';
@@ -12,7 +12,6 @@ import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useKeyValue } from '../hooks/useKeyValue';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
@@ -42,8 +41,8 @@ import { Editor } from './core/Editor/LazyEditor';
 import { InlineCode } from './core/InlineCode';
 import type { Pair } from './core/PairEditor';
 import { PlainInput } from './core/PlainInput';
-import type { TabItem } from './core/Tabs/Tabs';
-import { TabContent, Tabs } from './core/Tabs/Tabs';
+import type { TabItem, TabsRef } from './core/Tabs/Tabs';
+import { setActiveTab, TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
 import { FormMultipartEditor } from './FormMultipartEditor';
 import { FormUrlencodedEditor } from './FormUrlencodedEditor';
@@ -70,6 +69,7 @@ const TAB_PARAMS = 'params';
 const TAB_HEADERS = 'headers';
 const TAB_AUTH = 'auth';
 const TAB_DESCRIPTION = 'description';
+const TABS_STORAGE_KEY = 'http_request_tabs';
 
 const nonActiveRequestUrlsAtom = atom((get) => {
   const activeRequestId = get(activeRequestIdAtom);
@@ -83,19 +83,20 @@ const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
 
 export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
   const activeRequestId = activeRequest.id;
-  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
-    namespace: 'no_sync',
-    key: 'httpRequestActiveTabs',
-    fallback: {},
-  });
+  const tabsRef = useRef<TabsRef>(null);
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
   const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
-  const [{ urlKey }, { focusParamsTab, forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
+  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);
 
+  // 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) {
@@ -260,18 +261,6 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
     [activeRequest],
   );
 
-  const activeTab = activeTabs?.[activeRequestId];
-  const setActiveTab = useCallback(
-    async (tab: string) => {
-      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
-    },
-    [activeRequest.id, setActiveTabs],
-  );
-
-  useRequestEditorEvent('request_pane.focus_tab', async () => {
-    await setActiveTab(TAB_PARAMS);
-  });
-
   const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
 
   const autocomplete: GenericCompletionConfig = useMemo(
@@ -298,7 +287,11 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
           e.preventDefault(); // Prevent input onChange
 
           await patchModel(activeRequest, patch);
-          focusParamsTab();
+          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
@@ -309,14 +302,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
         }
       }
     },
-    [
-      activeRequest,
-      activeRequestId,
-      focusParamsTab,
-      forceParamsRefresh,
-      forceUrlRefresh,
-      importCurl,
-    ],
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh, importCurl],
   );
   const handleSend = useCallback(
     () => sendRequest(activeRequest.id ?? null),
@@ -354,11 +340,12 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
             isLoading={activeResponse != null && activeResponse.state !== 'closed'}
           />
           <Tabs
-            value={activeTab}
+            ref={tabsRef}
             label="Request"
-            onChangeValue={setActiveTab}
             tabs={tabs}
-            tabListClassName="mt-1 mb-1.5"
+            tabListClassName="mt-1 -mb-1.5"
+            storageKey={TABS_STORAGE_KEY}
+            activeTabKey={activeRequestId}
           >
             <TabContent value={TAB_AUTH}>
               <HttpAuthenticationEditor model={activeRequest} />

apps/yaak-client/components/HttpResponsePane.tsx

@@ -0,0 +1,429 @@
+import type { HttpResponse, HttpResponseEvent } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import type { ComponentType, CSSProperties } from 'react';
+import { lazy, Suspense, useMemo } from 'react';
+import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
+import { useHttpResponseEvents } from '../hooks/useHttpResponseEvents';
+import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
+import { useResponseBodyBytes, useResponseBodyText } from '../hooks/useResponseBodyText';
+import { useResponseViewMode } from '../hooks/useResponseViewMode';
+import { useTimelineViewMode } from '../hooks/useTimelineViewMode';
+import { getMimeTypeFromContentType } from '../lib/contentType';
+import { getContentTypeFromHeaders, getCookieCounts } from '../lib/model_util';
+import { ConfirmLargeResponse } from './ConfirmLargeResponse';
+import { ConfirmLargeResponseRequest } from './ConfirmLargeResponseRequest';
+import { Banner } from './core/Banner';
+import { Button } from './core/Button';
+import { CountBadge } from './core/CountBadge';
+import { HotkeyList } from './core/HotkeyList';
+import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
+import { HttpStatusTag } from './core/HttpStatusTag';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
+import { PillButton } from './core/PillButton';
+import { SizeTag } from './core/SizeTag';
+import { HStack, VStack } from './core/Stacks';
+import type { TabItem } from './core/Tabs/Tabs';
+import { TabContent, Tabs } from './core/Tabs/Tabs';
+import { Tooltip } from './core/Tooltip';
+import { EmptyStateText } from './EmptyStateText';
+import { ErrorBoundary } from './ErrorBoundary';
+import { HttpResponseTimeline } from './HttpResponseTimeline';
+import { RecentHttpResponsesDropdown } from './RecentHttpResponsesDropdown';
+import { RequestBodyViewer } from './RequestBodyViewer';
+import { ResponseCookies } from './ResponseCookies';
+import { ResponseHeaders } from './ResponseHeaders';
+import { AudioViewer } from './responseViewers/AudioViewer';
+import { CsvViewer } from './responseViewers/CsvViewer';
+import { EventStreamViewer } from './responseViewers/EventStreamViewer';
+import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer';
+import { ImageViewer } from './responseViewers/ImageViewer';
+import { MultipartViewer } from './responseViewers/MultipartViewer';
+import { SvgViewer } from './responseViewers/SvgViewer';
+import { VideoViewer } from './responseViewers/VideoViewer';
+
+const PdfViewer = lazy(() =>
+  import('./responseViewers/PdfViewer').then((m) => ({ default: m.PdfViewer })),
+);
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  activeRequestId: string;
+}
+
+const TAB_BODY = 'body';
+const TAB_REQUEST = 'request';
+const TAB_HEADERS = 'headers';
+const TAB_COOKIES = 'cookies';
+const TAB_TIMELINE = 'timeline';
+
+export type TimelineViewMode = 'timeline' | 'text';
+
+interface RedirectDropWarning {
+  droppedBodyCount: number;
+  droppedHeaders: string[];
+}
+
+export function HttpResponsePane({ style, className, activeRequestId }: Props) {
+  const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequestId);
+  const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
+  const [timelineViewMode, setTimelineViewMode] = useTimelineViewMode();
+  const contentType = getContentTypeFromHeaders(activeResponse?.headers ?? null);
+  const mimeType = contentType == null ? null : getMimeTypeFromContentType(contentType).essence;
+
+  const responseEvents = useHttpResponseEvents(activeResponse);
+  const redirectDropWarning = useMemo(
+    () => getRedirectDropWarning(responseEvents.data),
+    [responseEvents.data],
+  );
+  const shouldShowRedirectDropWarning =
+    activeResponse?.state === 'closed' && redirectDropWarning != null;
+
+  const cookieCounts = useMemo(() => getCookieCounts(responseEvents.data), [responseEvents.data]);
+
+  const tabs = useMemo<TabItem[]>(
+    () => [
+      {
+        value: TAB_BODY,
+        label: 'Response',
+        options: {
+          value: viewMode,
+          onChange: setViewMode,
+          items: [
+            { label: 'Response', value: 'pretty' },
+            ...(mimeType?.startsWith('image')
+              ? []
+              : [{ label: 'Response (Raw)', shortLabel: 'Raw', value: 'raw' }]),
+          ],
+        },
+      },
+      {
+        value: TAB_REQUEST,
+        label: 'Request',
+        rightSlot:
+          (activeResponse?.requestContentLength ?? 0) > 0 ? <CountBadge count={true} /> : null,
+      },
+      {
+        value: TAB_HEADERS,
+        label: 'Headers',
+        rightSlot: (
+          <CountBadge
+            count={activeResponse?.requestHeaders.length ?? 0}
+            count2={activeResponse?.headers.length ?? 0}
+            showZero
+          />
+        ),
+      },
+      {
+        value: TAB_COOKIES,
+        label: 'Cookies',
+        rightSlot:
+          cookieCounts.sent > 0 || cookieCounts.received > 0 ? (
+            <CountBadge count={cookieCounts.sent} count2={cookieCounts.received} showZero />
+          ) : null,
+      },
+      {
+        value: TAB_TIMELINE,
+        rightSlot: <CountBadge count={responseEvents.data?.length ?? 0} />,
+        options: {
+          value: timelineViewMode,
+          onChange: (v) => setTimelineViewMode((v as TimelineViewMode) ?? 'timeline'),
+          items: [
+            { label: 'Timeline', value: 'timeline' },
+            { label: 'Timeline (Text)', shortLabel: 'Timeline', value: 'text' },
+          ],
+        },
+      },
+    ],
+    [
+      activeResponse?.headers,
+      activeResponse?.requestContentLength,
+      activeResponse?.requestHeaders.length,
+      cookieCounts.sent,
+      cookieCounts.received,
+      mimeType,
+      responseEvents.data?.length,
+      setViewMode,
+      viewMode,
+      timelineViewMode,
+      setTimelineViewMode,
+    ],
+  );
+
+  const cancel = useCancelHttpResponse(activeResponse?.id ?? null);
+
+  return (
+    <div
+      style={style}
+      className={classNames(
+        className,
+        'x-theme-responsePane',
+        'max-h-full h-full',
+        'bg-surface rounded-md border border-border-subtle overflow-hidden',
+        'relative',
+      )}
+    >
+      {activeResponse == null ? (
+        <HotkeyList hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']} />
+      ) : (
+        <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1">
+          <HStack
+            className={classNames(
+              'text-text-subtle w-full flex-shrink-0',
+              // Remove a bit of space because the tabs have lots too
+              '-mb-1.5',
+            )}
+          >
+            {activeResponse && (
+              <div
+                className={classNames(
+                  'grid grid-cols-[auto_minmax(4rem,1fr)_auto]',
+                  'cursor-default select-none',
+                  'whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm hide-scrollbars',
+                )}
+              >
+                <HStack space={2} className="w-full flex-shrink-0">
+                  {activeResponse.state !== 'closed' && <LoadingIcon size="sm" />}
+                  <HttpStatusTag showReason response={activeResponse} />
+                  <span>&bull;</span>
+                  <HttpResponseDurationTag response={activeResponse} />
+                  <span>&bull;</span>
+                  <SizeTag
+                    contentLength={activeResponse.contentLength ?? 0}
+                    contentLengthCompressed={activeResponse.contentLengthCompressed}
+                  />
+                </HStack>
+                {shouldShowRedirectDropWarning ? (
+                  <Tooltip
+                    tabIndex={0}
+                    className="my-auto pl-3 flex-shrink-0 max-w-full justify-self-end overflow-hidden"
+                    content={
+                      <VStack alignItems="start" space={1} className="text-xs">
+                        <span className="font-medium text-warning">
+                          Redirect changed this request
+                        </span>
+                        {redirectDropWarning.droppedBodyCount > 0 && (
+                          <span>
+                            Body dropped on {redirectDropWarning.droppedBodyCount}{' '}
+                            {redirectDropWarning.droppedBodyCount === 1
+                              ? 'redirect hop'
+                              : 'redirect hops'}
+                          </span>
+                        )}
+                        {redirectDropWarning.droppedHeaders.length > 0 && (
+                          <span>
+                            Headers dropped:{' '}
+                            <span className="font-mono">
+                              {redirectDropWarning.droppedHeaders.join(', ')}
+                            </span>
+                          </span>
+                        )}
+                        <span className="text-text-subtle">See Timeline for details.</span>
+                      </VStack>
+                    }
+                  >
+                    <span className="inline-flex min-w-0">
+                      <PillButton
+                        color="warning"
+                        className="font-sans text-sm !flex-shrink max-w-full"
+                        innerClassName="flex items-center"
+                        leftSlot={<Icon icon="alert_triangle" size="xs" color="warning" />}
+                      >
+                        <span className="truncate">
+                          {getRedirectWarningLabel(redirectDropWarning)}
+                        </span>
+                      </PillButton>
+                    </span>
+                  </Tooltip>
+                ) : (
+                  <span />
+                )}
+                <div className="justify-self-end flex-shrink-0">
+                  <RecentHttpResponsesDropdown
+                    responses={responses}
+                    activeResponse={activeResponse}
+                    onPinnedResponseId={setPinnedResponseId}
+                  />
+                </div>
+              </div>
+            )}
+          </HStack>
+
+          <div className="overflow-hidden flex flex-col min-h-0">
+            {activeResponse?.error && (
+              <Banner color="danger" className="mx-3 mt-1 flex-shrink-0">
+                {activeResponse.error}
+              </Banner>
+            )}
+            {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
+            <Tabs
+              tabs={tabs}
+              label="Response"
+              className="ml-3 mr-3 mb-3 min-h-0 flex-1"
+              tabListClassName="mt-0.5 -mb-1.5"
+              storageKey="http_response_tabs"
+              activeTabKey={activeRequestId}
+            >
+              <TabContent value={TAB_BODY}>
+                <ErrorBoundary name="Http Response Viewer">
+                  <Suspense>
+                    <ConfirmLargeResponse response={activeResponse}>
+                      {activeResponse.state === 'initialized' ? (
+                        <EmptyStateText>
+                          <VStack space={3}>
+                            <HStack space={3}>
+                              <LoadingIcon className="text-text-subtlest" />
+                              Sending Request
+                            </HStack>
+                            <Button size="sm" variant="border" onClick={() => cancel.mutate()}>
+                              Cancel
+                            </Button>
+                          </VStack>
+                        </EmptyStateText>
+                      ) : activeResponse.state === 'closed' &&
+                        (activeResponse.contentLength ?? 0) === 0 ? (
+                        <EmptyStateText>Empty</EmptyStateText>
+                      ) : mimeType?.match(/^text\/event-stream/i) && viewMode === 'pretty' ? (
+                        <EventStreamViewer response={activeResponse} />
+                      ) : mimeType?.match(/^image\/svg/) ? (
+                        <HttpSvgViewer response={activeResponse} />
+                      ) : mimeType?.match(/^image/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={ImageViewer} />
+                      ) : mimeType?.match(/^audio/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={AudioViewer} />
+                      ) : mimeType?.match(/^video/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={VideoViewer} />
+                      ) : mimeType?.match(/^multipart/i) && viewMode === 'pretty' ? (
+                        <HttpMultipartViewer response={activeResponse} />
+                      ) : mimeType?.match(/pdf/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={PdfViewer} />
+                      ) : mimeType?.match(/csv|tab-separated/i) && viewMode === 'pretty' ? (
+                        <HttpCsvViewer className="pb-2" response={activeResponse} />
+                      ) : (
+                        <HTMLOrTextViewer
+                          textViewerClassName="-mr-2 bg-surface" // Pull to the right
+                          response={activeResponse}
+                          pretty={viewMode === 'pretty'}
+                        />
+                      )}
+                    </ConfirmLargeResponse>
+                  </Suspense>
+                </ErrorBoundary>
+              </TabContent>
+              <TabContent value={TAB_REQUEST}>
+                <ConfirmLargeResponseRequest response={activeResponse}>
+                  <RequestBodyViewer response={activeResponse} />
+                </ConfirmLargeResponseRequest>
+              </TabContent>
+              <TabContent value={TAB_HEADERS}>
+                <ResponseHeaders response={activeResponse} />
+              </TabContent>
+              <TabContent value={TAB_COOKIES}>
+                <ResponseCookies response={activeResponse} />
+              </TabContent>
+              <TabContent value={TAB_TIMELINE}>
+                <HttpResponseTimeline response={activeResponse} viewMode={timelineViewMode} />
+              </TabContent>
+            </Tabs>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getRedirectDropWarning(
+  events: HttpResponseEvent[] | undefined,
+): RedirectDropWarning | null {
+  if (events == null || events.length === 0) return null;
+
+  let droppedBodyCount = 0;
+  const droppedHeaders = new Set<string>();
+  for (const e of events) {
+    const event = e.event;
+    if (event.type !== 'redirect') {
+      continue;
+    }
+
+    if (event.dropped_body) {
+      droppedBodyCount += 1;
+    }
+    for (const headerName of event.dropped_headers ?? []) {
+      pushHeaderName(droppedHeaders, headerName);
+    }
+  }
+
+  if (droppedBodyCount === 0 && droppedHeaders.size === 0) {
+    return null;
+  }
+
+  return {
+    droppedBodyCount,
+    droppedHeaders: Array.from(droppedHeaders).sort(),
+  };
+}
+
+function pushHeaderName(headers: Set<string>, headerName: string): void {
+  const existing = Array.from(headers).find((h) => h.toLowerCase() === headerName.toLowerCase());
+  if (existing == null) {
+    headers.add(headerName);
+  }
+}
+
+function getRedirectWarningLabel(warning: RedirectDropWarning): string {
+  if (warning.droppedBodyCount > 0 && warning.droppedHeaders.length > 0) {
+    return 'Dropped body and headers';
+  }
+  if (warning.droppedBodyCount > 0) {
+    return 'Dropped body';
+  }
+  return 'Dropped headers';
+}
+
+function EnsureCompleteResponse({
+  response,
+  Component,
+}: {
+  response: HttpResponse;
+  Component: ComponentType<{ bodyPath: string }>;
+}) {
+  if (response.bodyPath === null) {
+    return <div>Empty response body</div>;
+  }
+
+  // Wait until the response has been fully-downloaded
+  if (response.state !== 'closed') {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+
+  return <Component bodyPath={response.bodyPath} />;
+}
+
+function HttpSvgViewer({ response }: { response: HttpResponse }) {
+  const body = useResponseBodyText({ response, filter: null });
+
+  if (!body.data) return null;
+
+  return <SvgViewer text={body.data} />;
+}
+
+function HttpCsvViewer({ response, className }: { response: HttpResponse; className?: string }) {
+  const body = useResponseBodyText({ response, filter: null });
+
+  return <CsvViewer text={body.data ?? null} className={className} />;
+}
+
+function HttpMultipartViewer({ response }: { response: HttpResponse }) {
+  const body = useResponseBodyBytes({ response });
+
+  if (body.data == null) return null;
+
+  const contentTypeHeader = getContentTypeFromHeaders(response.headers);
+  const boundary = contentTypeHeader?.split('boundary=')[1] ?? 'unknown';
+
+  return <MultipartViewer data={body.data} boundary={boundary} idPrefix={response.id} />;
+}

apps/yaak-client/components/HttpResponseTimeline.tsx

@@ -0,0 +1,418 @@
+import type {
+  HttpResponse,
+  HttpResponseEvent,
+  HttpResponseEventData,
+} from '@yaakapp-internal/models';
+import { type ReactNode, useMemo, useState } from 'react';
+import { useHttpResponseEvents } from '../hooks/useHttpResponseEvents';
+import { Editor } from './core/Editor/LazyEditor';
+import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
+import { EventViewerRow } from './core/EventViewerRow';
+import { HttpStatusTagRaw } from './core/HttpStatusTag';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
+import type { TimelineViewMode } from './HttpResponsePane';
+
+interface Props {
+  response: HttpResponse;
+  viewMode: TimelineViewMode;
+}
+
+export function HttpResponseTimeline({ response, viewMode }: Props) {
+  return <Inner key={response.id} response={response} viewMode={viewMode} />;
+}
+
+function Inner({ response, viewMode }: Props) {
+  const [showRaw, setShowRaw] = useState(false);
+  const { data: events, error, isLoading } = useHttpResponseEvents(response);
+
+  // Generate plain text representation of all events (with prefixes for timeline view)
+  const plainText = useMemo(() => {
+    if (!events || events.length === 0) return '';
+    return events.map((event) => formatEventText(event.event, true)).join('\n');
+  }, [events]);
+
+  // Plain text view - show all events as text in an editor
+  if (viewMode === 'text') {
+    if (isLoading) {
+      return <div className="p-4 text-text-subtlest">Loading events...</div>;
+    } else if (error) {
+      return <div className="p-4 text-danger">{String(error)}</div>;
+    } else if (!events || events.length === 0) {
+      return <div className="p-4 text-text-subtlest">No events recorded</div>;
+    } else {
+      return (
+        <Editor language="timeline" defaultValue={plainText} readOnly stateKey={null} hideGutter />
+      );
+    }
+  }
+
+  return (
+    <EventViewer
+      events={events ?? []}
+      getEventKey={(event) => event.id}
+      error={error ? String(error) : null}
+      isLoading={isLoading}
+      loadingMessage="Loading events..."
+      emptyMessage="No events recorded"
+      splitLayoutName="http_response_events"
+      defaultRatio={0.25}
+      renderRow={({ event, isActive, onClick }) => {
+        const display = getEventDisplay(event.event);
+        return (
+          <EventViewerRow
+            isActive={isActive}
+            onClick={onClick}
+            icon={<Icon color={display.color} icon={display.icon} size="sm" />}
+            content={display.summary}
+            timestamp={event.createdAt}
+          />
+        );
+      }}
+      renderDetail={({ event, onClose }) => (
+        <EventDetails event={event} showRaw={showRaw} setShowRaw={setShowRaw} onClose={onClose} />
+      )}
+    />
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function EventDetails({
+  event,
+  showRaw,
+  setShowRaw,
+  onClose,
+}: {
+  event: HttpResponseEvent;
+  showRaw: boolean;
+  setShowRaw: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  const { label } = getEventDisplay(event.event);
+  const e = event.event;
+
+  const actions: EventDetailAction[] = [
+    {
+      key: 'toggle-raw',
+      label: showRaw ? 'Formatted' : 'Text',
+      onClick: () => setShowRaw(!showRaw),
+    },
+  ];
+
+  // Determine the title based on event type
+  const title = (() => {
+    switch (e.type) {
+      case 'header_up':
+        return 'Header Sent';
+      case 'header_down':
+        return 'Header Received';
+      case 'send_url':
+        return 'Request';
+      case 'receive_url':
+        return 'Response';
+      case 'redirect':
+        return 'Redirect';
+      case 'setting':
+        return 'Apply Setting';
+      case 'chunk_sent':
+        return 'Data Sent';
+      case 'chunk_received':
+        return 'Data Received';
+      case 'dns_resolved':
+        return e.overridden ? 'DNS Override' : 'DNS Resolution';
+      default:
+        return label;
+    }
+  })();
+
+  // Render content based on view mode and event type
+  const renderContent = () => {
+    // Raw view - show plaintext representation (without prefix)
+    if (showRaw) {
+      const rawText = formatEventText(event.event, false);
+      return <Editor language="text" defaultValue={rawText} readOnly stateKey={null} hideGutter />;
+    }
+
+    // Headers - show name and value
+    if (e.type === 'header_up' || e.type === 'header_down') {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Header">{e.name}</KeyValueRow>
+          <KeyValueRow label="Value">{e.value}</KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Request URL - show all URL parts separately
+    if (e.type === 'send_url') {
+      const auth = e.username || e.password ? `${e.username}:${e.password}@` : '';
+      const isDefaultPort =
+        (e.scheme === 'http' && e.port === 80) || (e.scheme === 'https' && e.port === 443);
+      const portStr = isDefaultPort ? '' : `:${e.port}`;
+      const query = e.query ? `?${e.query}` : '';
+      const fragment = e.fragment ? `#${e.fragment}` : '';
+      const fullUrl = `${e.scheme}://${auth}${e.host}${portStr}${e.path}${query}${fragment}`;
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="URL">{fullUrl}</KeyValueRow>
+          <KeyValueRow label="Method">{e.method}</KeyValueRow>
+          <KeyValueRow label="Scheme">{e.scheme}</KeyValueRow>
+          {e.username ? <KeyValueRow label="Username">{e.username}</KeyValueRow> : null}
+          {e.password ? <KeyValueRow label="Password">{e.password}</KeyValueRow> : null}
+          <KeyValueRow label="Host">{e.host}</KeyValueRow>
+          {!isDefaultPort ? <KeyValueRow label="Port">{e.port}</KeyValueRow> : null}
+          <KeyValueRow label="Path">{e.path}</KeyValueRow>
+          {e.query ? <KeyValueRow label="Query">{e.query}</KeyValueRow> : null}
+          {e.fragment ? <KeyValueRow label="Fragment">{e.fragment}</KeyValueRow> : null}
+        </KeyValueRows>
+      );
+    }
+
+    // Response status - show version and status separately
+    if (e.type === 'receive_url') {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="HTTP Version">{e.version}</KeyValueRow>
+          <KeyValueRow label="Status">
+            <HttpStatusTagRaw status={e.status} />
+          </KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Redirect - show status, URL, and behavior
+    if (e.type === 'redirect') {
+      const droppedHeaders = e.dropped_headers ?? [];
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Status">
+            <HttpStatusTagRaw status={e.status} />
+          </KeyValueRow>
+          <KeyValueRow label="Location">{e.url}</KeyValueRow>
+          <KeyValueRow label="Behavior">
+            {e.behavior === 'drop_body' ? 'Drop body, change to GET' : 'Preserve method and body'}
+          </KeyValueRow>
+          <KeyValueRow label="Body Dropped">{e.dropped_body ? 'Yes' : 'No'}</KeyValueRow>
+          <KeyValueRow label="Headers Dropped">
+            {droppedHeaders.length > 0 ? droppedHeaders.join(', ') : '--'}
+          </KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Settings - show as key/value
+    if (e.type === 'setting') {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Setting">{e.name}</KeyValueRow>
+          <KeyValueRow label="Value">{e.value}</KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Chunks - show formatted bytes
+    if (e.type === 'chunk_sent' || e.type === 'chunk_received') {
+      return <div className="font-mono text-editor">{formatBytes(e.bytes)}</div>;
+    }
+
+    // DNS Resolution - show hostname, addresses, and timing
+    if (e.type === 'dns_resolved') {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Hostname">{e.hostname}</KeyValueRow>
+          <KeyValueRow label="Addresses">{e.addresses.join(', ')}</KeyValueRow>
+          <KeyValueRow label="Duration">
+            {e.overridden ? (
+              <span className="text-text-subtlest">--</span>
+            ) : (
+              `${String(e.duration)}ms`
+            )}
+          </KeyValueRow>
+          {e.overridden ? <KeyValueRow label="Source">Workspace Override</KeyValueRow> : null}
+        </KeyValueRows>
+      );
+    }
+
+    // Default - use summary
+    const { summary } = getEventDisplay(event.event);
+    return <div className="font-mono text-editor">{summary}</div>;
+  };
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <EventDetailHeader
+        title={title}
+        timestamp={event.createdAt}
+        actions={actions}
+        onClose={onClose}
+      />
+      {renderContent()}
+    </div>
+  );
+}
+
+type EventTextParts = { prefix: '>' | '<' | '*'; text: string };
+
+/** Get the prefix and text for an event */
+function getEventTextParts(event: HttpResponseEventData): EventTextParts {
+  switch (event.type) {
+    case 'send_url':
+      return {
+        prefix: '>',
+        text: `${event.method} ${event.path}${event.query ? `?${event.query}` : ''}${event.fragment ? `#${event.fragment}` : ''}`,
+      };
+    case 'receive_url':
+      return { prefix: '<', text: `${event.version} ${event.status}` };
+    case 'header_up':
+      return { prefix: '>', text: `${event.name}: ${event.value}` };
+    case 'header_down':
+      return { prefix: '<', text: `${event.name}: ${event.value}` };
+    case 'redirect': {
+      const behavior = event.behavior === 'drop_body' ? 'drop body' : 'preserve';
+      const droppedHeaders = event.dropped_headers ?? [];
+      const dropped = [
+        event.dropped_body ? 'body dropped' : null,
+        droppedHeaders.length > 0 ? `headers dropped: ${droppedHeaders.join(', ')}` : null,
+      ]
+        .filter(Boolean)
+        .join(', ');
+      return {
+        prefix: '*',
+        text: `Redirect ${event.status} -> ${event.url} (${behavior}${dropped ? `, ${dropped}` : ''})`,
+      };
+    }
+    case 'setting':
+      return { prefix: '*', text: `Setting ${event.name}=${event.value}` };
+    case 'info':
+      return { prefix: '*', text: event.message };
+    case 'chunk_sent':
+      return { prefix: '*', text: `[${formatBytes(event.bytes)} sent]` };
+    case 'chunk_received':
+      return { prefix: '*', text: `[${formatBytes(event.bytes)} received]` };
+    case 'dns_resolved':
+      if (event.overridden) {
+        return {
+          prefix: '*',
+          text: `DNS override ${event.hostname} -> ${event.addresses.join(', ')}`,
+        };
+      }
+      return {
+        prefix: '*',
+        text: `DNS resolved ${event.hostname} to ${event.addresses.join(', ')} (${event.duration}ms)`,
+      };
+    default:
+      return { prefix: '*', text: '[unknown event]' };
+  }
+}
+
+/** Format event as plaintext, optionally with curl-style prefix (> outgoing, < incoming, * info) */
+function formatEventText(event: HttpResponseEventData, includePrefix: boolean): string {
+  const { prefix, text } = getEventTextParts(event);
+  return includePrefix ? `${prefix} ${text}` : text;
+}
+
+type EventDisplay = {
+  icon: IconProps['icon'];
+  color: IconProps['color'];
+  label: string;
+  summary: ReactNode;
+};
+
+function getEventDisplay(event: HttpResponseEventData): EventDisplay {
+  switch (event.type) {
+    case 'setting':
+      return {
+        icon: 'settings',
+        color: 'secondary',
+        label: 'Setting',
+        summary: `${event.name} = ${event.value}`,
+      };
+    case 'info':
+      return {
+        icon: 'info',
+        color: 'secondary',
+        label: 'Info',
+        summary: event.message,
+      };
+    case 'redirect': {
+      const droppedHeaders = event.dropped_headers ?? [];
+      const dropped = [
+        event.dropped_body ? 'drop body' : null,
+        droppedHeaders.length > 0
+          ? `drop ${droppedHeaders.length} ${droppedHeaders.length === 1 ? 'header' : 'headers'}`
+          : null,
+      ]
+        .filter(Boolean)
+        .join(', ');
+      return {
+        icon: 'arrow_big_right_dash',
+        color: 'success',
+        label: 'Redirect',
+        summary: `Redirecting ${event.status} ${event.url}${dropped ? ` (${dropped})` : ''}`,
+      };
+    }
+    case 'send_url':
+      return {
+        icon: 'arrow_big_up_dash',
+        color: 'primary',
+        label: 'Request',
+        summary: `${event.method} ${event.path}${event.query ? `?${event.query}` : ''}${event.fragment ? `#${event.fragment}` : ''}`,
+      };
+    case 'receive_url':
+      return {
+        icon: 'arrow_big_down_dash',
+        color: 'info',
+        label: 'Response',
+        summary: `${event.version} ${event.status}`,
+      };
+    case 'header_up':
+      return {
+        icon: 'arrow_big_up_dash',
+        color: 'primary',
+        label: 'Header',
+        summary: `${event.name}: ${event.value}`,
+      };
+    case 'header_down':
+      return {
+        icon: 'arrow_big_down_dash',
+        color: 'info',
+        label: 'Header',
+        summary: `${event.name}: ${event.value}`,
+      };
+
+    case 'chunk_sent':
+      return {
+        icon: 'info',
+        color: 'secondary',
+        label: 'Chunk',
+        summary: `${formatBytes(event.bytes)} chunk sent`,
+      };
+    case 'chunk_received':
+      return {
+        icon: 'info',
+        color: 'secondary',
+        label: 'Chunk',
+        summary: `${formatBytes(event.bytes)} chunk received`,
+      };
+    case 'dns_resolved':
+      return {
+        icon: 'globe',
+        color: event.overridden ? 'success' : 'secondary',
+        label: event.overridden ? 'DNS Override' : 'DNS',
+        summary: event.overridden
+          ? `${event.hostname} → ${event.addresses.join(', ')} (overridden)`
+          : `${event.hostname} → ${event.addresses.join(', ')} (${event.duration}ms)`,
+      };
+    default:
+      return {
+        icon: 'info',
+        color: 'secondary',
+        label: 'Unknown',
+        summary: 'Unknown event',
+      };
+  }
+}

apps/yaak-client/components/ImportCurlButton.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useWindowFocus } from '../hooks/useWindowFocus';
 import { Button } from './core/Button';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 export function ImportCurlButton() {
   const focused = useWindowFocus();

apps/yaak-client/components/KeyboardShortcutsDialog.tsx

@@ -1,10 +1,10 @@
 import { hotkeyActions } from '../hooks/useHotKey';
-import { HotKeyList } from './core/HotKeyList';
+import { HotkeyList } from './core/HotkeyList';
 
 export function KeyboardShortcutsDialog() {
   return (
     <div className="grid h-full">
-      <HotKeyList hotkeys={hotkeyActions} className="pb-6" />
+      <HotkeyList hotkeys={hotkeyActions} className="pb-6" />
     </div>
   );
 }

apps/yaak-client/components/LicenseBadge.tsx

@@ -12,7 +12,7 @@ import { jotaiStore } from '../lib/jotai';
 import { CargoFeature } from './CargoFeature';
 import type { ButtonProps } from './core/Button';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { PillButton } from './core/PillButton';
 
 const dismissedAtom = atomWithKVStorage<string | null>('dismissed_license_expired', null);

apps/yaak-client/components/MoveToWorkspaceDialog.tsx

@@ -2,6 +2,7 @@ import type { GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-intern
 import { patchModel, workspacesAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import { useState } from 'react';
+import { pluralizeCount } from '../lib/pluralize';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { router } from '../lib/router';
 import { showToast } from '../lib/toast';
@@ -12,18 +13,21 @@ import { VStack } from './core/Stacks';
 
 interface Props {
   activeWorkspaceId: string;
-  request: HttpRequest | GrpcRequest | WebsocketRequest;
+  requests: (HttpRequest | GrpcRequest | WebsocketRequest)[];
   onDone: () => void;
 }
 
-export function MoveToWorkspaceDialog({ onDone, request, activeWorkspaceId }: Props) {
+export function MoveToWorkspaceDialog({ onDone, requests, activeWorkspaceId }: Props) {
   const workspaces = useAtomValue(workspacesAtom);
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string>(activeWorkspaceId);
 
+  const targetWorkspace = workspaces.find((w) => w.id === selectedWorkspaceId);
+  const isSameWorkspace = selectedWorkspaceId === activeWorkspaceId;
+
   return (
     <VStack space={4} className="mb-4">
       <Select
-        label="New Workspace"
+        label="Target Workspace"
         name="workspace"
         value={selectedWorkspaceId}
         onChange={setSelectedWorkspaceId}
@@ -34,27 +38,31 @@ export function MoveToWorkspaceDialog({ onDone, request, activeWorkspaceId }: Pr
       />
       <Button
         color="primary"
-        disabled={selectedWorkspaceId === activeWorkspaceId}
+        disabled={isSameWorkspace}
         onClick={async () => {
           const patch = {
             workspaceId: selectedWorkspaceId,
             folderId: null,
           };
 
-          await patchModel(request, patch);
+          await Promise.all(requests.map((r) => patchModel(r, patch)));
 
-          // Hide after a moment, to give time for request to disappear
+          // Hide after a moment, to give time for requests to disappear
           setTimeout(onDone, 100);
           showToast({
             id: 'workspace-moved',
-            message: (
-              <>
-                <InlineCode>{resolvedModelName(request)}</InlineCode> moved to{' '}
-                <InlineCode>
-                  {workspaces.find((w) => w.id === selectedWorkspaceId)?.name ?? 'unknown'}
-                </InlineCode>
-              </>
-            ),
+            message:
+              requests.length === 1 && requests[0] != null ? (
+                <>
+                  <InlineCode>{resolvedModelName(requests[0])}</InlineCode> moved to{' '}
+                  <InlineCode>{targetWorkspace?.name ?? 'unknown'}</InlineCode>
+                </>
+              ) : (
+                <>
+                  {pluralizeCount('request', requests.length)} moved to{' '}
+                  <InlineCode>{targetWorkspace?.name ?? 'unknown'}</InlineCode>
+                </>
+              ),
             action: ({ hide }) => (
               <Button
                 size="xs"
@@ -74,7 +82,7 @@ export function MoveToWorkspaceDialog({ onDone, request, activeWorkspaceId }: Pr
           });
         }}
       >
-        Move
+        {requests.length === 1 ? 'Move' : `Move ${pluralizeCount('Request', requests.length)}`}
       </Button>
     </VStack>
   );

apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import { pluralizeCount } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RecentHttpResponsesDropdown.tsx

@@ -6,7 +6,7 @@ import { useSaveResponse } from '../hooks/useSaveResponse';
 import { pluralize } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { deleteWebsocketConnections } from '../commands/deleteWebsocketConnections';
 import { pluralizeCount } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RequestBodyViewer.tsx

@@ -0,0 +1,102 @@
+import type { HttpResponse } from '@yaakapp-internal/models';
+import { lazy, Suspense } from 'react';
+import { useHttpRequestBody } from '../hooks/useHttpRequestBody';
+import { getMimeTypeFromContentType, languageFromContentType } from '../lib/contentType';
+import { LoadingIcon } from '@yaakapp-internal/ui';
+import { EmptyStateText } from './EmptyStateText';
+import { AudioViewer } from './responseViewers/AudioViewer';
+import { CsvViewer } from './responseViewers/CsvViewer';
+import { ImageViewer } from './responseViewers/ImageViewer';
+import { MultipartViewer } from './responseViewers/MultipartViewer';
+import { SvgViewer } from './responseViewers/SvgViewer';
+import { TextViewer } from './responseViewers/TextViewer';
+import { VideoViewer } from './responseViewers/VideoViewer';
+import { WebPageViewer } from './responseViewers/WebPageViewer';
+
+const PdfViewer = lazy(() =>
+  import('./responseViewers/PdfViewer').then((m) => ({ default: m.PdfViewer })),
+);
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function RequestBodyViewer({ response }: Props) {
+  return <RequestBodyViewerInner key={response.id} response={response} />;
+}
+
+function RequestBodyViewerInner({ response }: Props) {
+  const { data, isLoading, error } = useHttpRequestBody(response);
+
+  if (isLoading) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+
+  if (error) {
+    return <EmptyStateText>Error loading request body: {error.message}</EmptyStateText>;
+  }
+
+  if (data?.bodyText == null || data.bodyText.length === 0) {
+    return <EmptyStateText>No request body</EmptyStateText>;
+  }
+
+  const { bodyText, body } = data;
+
+  // Try to detect language from content-type header that was sent
+  const contentTypeHeader = response.requestHeaders.find(
+    (h) => h.name.toLowerCase() === 'content-type',
+  );
+  const contentType = contentTypeHeader?.value ?? null;
+  const mimeType = contentType ? getMimeTypeFromContentType(contentType).essence : null;
+  const language = languageFromContentType(contentType, bodyText);
+
+  // Route to appropriate viewer based on content type
+  if (mimeType?.match(/^multipart/i)) {
+    const boundary = contentType?.split('boundary=')[1] ?? 'unknown';
+    // Create a copy because parseMultipart may detach the buffer
+    const bodyCopy = new Uint8Array(body);
+    return (
+      <MultipartViewer data={bodyCopy} boundary={boundary} idPrefix={`request.${response.id}`} />
+    );
+  }
+
+  if (mimeType?.match(/^image\/svg/i)) {
+    return <SvgViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^image/i)) {
+    return <ImageViewer data={body.buffer} />;
+  }
+
+  if (mimeType?.match(/^audio/i)) {
+    return <AudioViewer data={body} />;
+  }
+
+  if (mimeType?.match(/^video/i)) {
+    return <VideoViewer data={body} />;
+  }
+
+  if (mimeType?.match(/csv|tab-separated/i)) {
+    return <CsvViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^text\/html/i)) {
+    return <WebPageViewer html={bodyText} />;
+  }
+
+  if (mimeType?.match(/pdf/i)) {
+    return (
+      <Suspense fallback={<LoadingIcon />}>
+        <PdfViewer data={body} />
+      </Suspense>
+    );
+  }
+
+  return (
+    <TextViewer text={bodyText} language={language} stateKey={`request.body.${response.id}`} />
+  );
+}

apps/yaak-client/components/RequestMethodDropdown.tsx

@@ -6,7 +6,7 @@ import { showPrompt } from '../lib/prompt';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { HttpMethodTag, HttpMethodTagRaw } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
 
@@ -71,7 +71,7 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
       onChange={handleChange}
     >
       <Button size="xs" className={classNames(className, 'text-text-subtle hover:text')}>
-        <HttpMethodTag request={request} />
+        <HttpMethodTag request={request} noAlias />
       </Button>
     </RadioDropdown>
   );

apps/yaak-client/components/ResponseCookies.tsx

@@ -0,0 +1,225 @@
+import type { HttpResponse } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import type { JSX } from 'react/jsx-runtime';
+import { useHttpResponseEvents } from '../hooks/useHttpResponseEvents';
+import { CountBadge } from './core/CountBadge';
+import { DetailsBanner } from './core/DetailsBanner';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
+
+interface Props {
+  response: HttpResponse;
+}
+
+interface ParsedCookie {
+  name: string;
+  value: string;
+  domain?: string;
+  path?: string;
+  expires?: string;
+  maxAge?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: string;
+  isDeleted?: boolean;
+}
+
+function parseCookieHeader(cookieHeader: string): Array<{ name: string; value: string }> {
+  // Parse "Cookie: name=value; name2=value2" format
+  return cookieHeader.split(';').map((pair) => {
+    const [name = '', ...valueParts] = pair.split('=');
+    return {
+      name: name.trim(),
+      value: valueParts.join('=').trim(),
+    };
+  });
+}
+
+function parseSetCookieHeader(setCookieHeader: string): ParsedCookie {
+  // Parse "Set-Cookie: name=value; Domain=...; Path=..." format
+  const parts = setCookieHeader.split(';').map((p) => p.trim());
+  const [nameValue = '', ...attributes] = parts;
+  const [name = '', ...valueParts] = nameValue.split('=');
+
+  const cookie: ParsedCookie = {
+    name: name.trim(),
+    value: valueParts.join('=').trim(),
+  };
+
+  for (const attr of attributes) {
+    const [key = '', val] = attr.split('=').map((s) => s.trim());
+    const lowerKey = key.toLowerCase();
+
+    if (lowerKey === 'domain') cookie.domain = val;
+    else if (lowerKey === 'path') cookie.path = val;
+    else if (lowerKey === 'expires') cookie.expires = val;
+    else if (lowerKey === 'max-age') cookie.maxAge = val;
+    else if (lowerKey === 'secure') cookie.secure = true;
+    else if (lowerKey === 'httponly') cookie.httpOnly = true;
+    else if (lowerKey === 'samesite') cookie.sameSite = val;
+  }
+
+  // Detect if cookie is being deleted
+  if (cookie.maxAge !== undefined) {
+    const maxAgeNum = Number.parseInt(cookie.maxAge, 10);
+    if (!Number.isNaN(maxAgeNum) && maxAgeNum <= 0) {
+      cookie.isDeleted = true;
+    }
+  } else if (cookie.expires !== undefined) {
+    // Check if expires date is in the past
+    try {
+      const expiresDate = new Date(cookie.expires);
+      if (expiresDate.getTime() < Date.now()) {
+        cookie.isDeleted = true;
+      }
+    } catch {
+      // Invalid date, ignore
+    }
+  }
+
+  return cookie;
+}
+
+export function ResponseCookies({ response }: Props) {
+  const { data: events } = useHttpResponseEvents(response);
+
+  const { sentCookies, receivedCookies } = useMemo(() => {
+    if (!events) return { sentCookies: [], receivedCookies: [] };
+
+    // Use Maps to deduplicate by cookie name (latest value wins)
+    const sentMap = new Map<string, { name: string; value: string }>();
+    const receivedMap = new Map<string, ParsedCookie>();
+
+    for (const event of events) {
+      const e = event.event;
+
+      // Cookie headers sent (header_up with name=cookie)
+      if (e.type === 'header_up' && e.name.toLowerCase() === 'cookie') {
+        const cookies = parseCookieHeader(e.value);
+        for (const cookie of cookies) {
+          sentMap.set(cookie.name, cookie);
+        }
+      }
+
+      // Set-Cookie headers received (header_down with name=set-cookie)
+      if (e.type === 'header_down' && e.name.toLowerCase() === 'set-cookie') {
+        const cookie = parseSetCookieHeader(e.value);
+        receivedMap.set(cookie.name, cookie);
+      }
+    }
+
+    return {
+      sentCookies: Array.from(sentMap.values()),
+      receivedCookies: Array.from(receivedMap.values()),
+    };
+  }, [events]);
+
+  return (
+    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.sent_cookies`}
+        summary={
+          <h2 className="flex items-center">
+            Sent Cookies <CountBadge showZero count={sentCookies.length} />
+          </h2>
+        }
+      >
+        {sentCookies.length === 0 ? (
+          <NoCookies />
+        ) : (
+          <KeyValueRows>
+            {sentCookies.map((cookie, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: none
+              <KeyValueRow labelColor="primary" key={i} label={cookie.name}>
+                {cookie.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.received_cookies`}
+        summary={
+          <h2 className="flex items-center">
+            Received Cookies <CountBadge showZero count={receivedCookies.length} />
+          </h2>
+        }
+      >
+        {receivedCookies.length === 0 ? (
+          <NoCookies />
+        ) : (
+          <div className="flex flex-col gap-4">
+            {receivedCookies.map((cookie, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: none
+              <div key={i} className="flex flex-col gap-1">
+                <div className="flex items-center gap-2 my-1">
+                  <span
+                    className={classNames(
+                      'font-mono text-editor select-auto cursor-auto',
+                      cookie.isDeleted ? 'line-through opacity-60 text-text-subtle' : 'text-text',
+                    )}
+                  >
+                    {cookie.name}
+                    <span className="text-text-subtlest select-auto cursor-auto mx-0.5">=</span>
+                    {cookie.value}
+                  </span>
+                  {cookie.isDeleted && (
+                    <span className="text-xs font-sans text-danger bg-danger/10 px-1.5 py-0.5 rounded">
+                      Deleted
+                    </span>
+                  )}
+                </div>
+                <KeyValueRows>
+                  {[
+                    cookie.domain && (
+                      <KeyValueRow labelColor="info" label="Domain" key="domain">
+                        {cookie.domain}
+                      </KeyValueRow>
+                    ),
+                    cookie.path && (
+                      <KeyValueRow labelColor="info" label="Path" key="path">
+                        {cookie.path}
+                      </KeyValueRow>
+                    ),
+                    cookie.expires && (
+                      <KeyValueRow labelColor="info" label="Expires" key="expires">
+                        {cookie.expires}
+                      </KeyValueRow>
+                    ),
+                    cookie.maxAge && (
+                      <KeyValueRow labelColor="info" label="Max-Age" key="maxAge">
+                        {cookie.maxAge}
+                      </KeyValueRow>
+                    ),
+                    cookie.secure && (
+                      <KeyValueRow labelColor="info" label="Secure" key="secure">
+                        true
+                      </KeyValueRow>
+                    ),
+                    cookie.httpOnly && (
+                      <KeyValueRow labelColor="info" label="HttpOnly" key="httpOnly">
+                        true
+                      </KeyValueRow>
+                    ),
+                    cookie.sameSite && (
+                      <KeyValueRow labelColor="info" label="SameSite" key="sameSite">
+                        {cookie.sameSite}
+                      </KeyValueRow>
+                    ),
+                  ].filter((item): item is JSX.Element => Boolean(item))}
+                </KeyValueRows>
+              </div>
+            ))}
+          </div>
+        )}
+      </DetailsBanner>
+    </div>
+  );
+}
+
+function NoCookies() {
+  return <span className="text-text-subtlest text-sm italic">No Cookies</span>;
+}

apps/yaak-client/components/ResponseHeaders.tsx

@@ -0,0 +1,101 @@
+import { openUrl } from '@tauri-apps/plugin-opener';
+import type { HttpResponse } from '@yaakapp-internal/models';
+import { useMemo } from 'react';
+import { CountBadge } from './core/CountBadge';
+import { DetailsBanner } from './core/DetailsBanner';
+import { IconButton } from './core/IconButton';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function ResponseHeaders({ response }: Props) {
+  const responseHeaders = useMemo(
+    () =>
+      [...response.headers].sort((a, b) =>
+        a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()),
+      ),
+    [response.headers],
+  );
+  const requestHeaders = useMemo(
+    () =>
+      [...response.requestHeaders].sort((a, b) =>
+        a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()),
+      ),
+    [response.requestHeaders],
+  );
+  return (
+    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
+      <DetailsBanner storageKey={`${response.requestId}.general`} summary={<h2>Info</h2>}>
+        <KeyValueRows>
+          <KeyValueRow labelColor="secondary" label="Request URL">
+            <div className="flex items-center gap-1">
+              <span className="select-text cursor-text">{response.url}</span>
+              <IconButton
+                iconSize="sm"
+                className="inline-block w-auto !h-auto opacity-50 hover:opacity-100"
+                icon="external_link"
+                onClick={() => openUrl(response.url)}
+                title="Open in browser"
+              />
+            </div>
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Remote Address">
+            {response.remoteAddr ?? <span className="text-text-subtlest">--</span>}
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Version">
+            {response.version ?? <span className="text-text-subtlest">--</span>}
+          </KeyValueRow>
+        </KeyValueRows>
+      </DetailsBanner>
+      <DetailsBanner
+        storageKey={`${response.requestId}.request_headers`}
+        summary={
+          <h2 className="flex items-center">
+            Request Headers <CountBadge showZero count={requestHeaders.length} />
+          </h2>
+        }
+      >
+        {requestHeaders.length === 0 ? (
+          <NoHeaders />
+        ) : (
+          <KeyValueRows>
+            {requestHeaders.map((h, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: none
+              <KeyValueRow labelColor="primary" key={i} label={h.name}>
+                {h.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.response_headers`}
+        summary={
+          <h2 className="flex items-center">
+            Response Headers <CountBadge showZero count={responseHeaders.length} />
+          </h2>
+        }
+      >
+        {responseHeaders.length === 0 ? (
+          <NoHeaders />
+        ) : (
+          <KeyValueRows>
+            {responseHeaders.map((h, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: none
+              <KeyValueRow labelColor="info" key={i} label={h.name}>
+                {h.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+    </div>
+  );
+}
+
+function NoHeaders() {
+  return <span className="text-text-subtlest text-sm italic">No Headers</span>;
+}

apps/yaak-client/components/ResponseInfo.tsx

@@ -12,10 +12,10 @@ export function ResponseInfo({ response }: Props) {
     <div className="overflow-auto h-full pb-4">
       <KeyValueRows>
         <KeyValueRow labelColor="info" label="Version">
-          {response.version}
+          {response.version ?? <span className="text-text-subtlest">--</span>}
         </KeyValueRow>
         <KeyValueRow labelColor="info" label="Remote Address">
-          {response.remoteAddr}
+          {response.remoteAddr ?? <span className="text-text-subtlest">--</span>}
         </KeyValueRow>
         <KeyValueRow
           labelColor="info"

apps/yaak-client/components/RouteError.tsx

@@ -20,7 +20,7 @@ export default function RouteError({ error }: { error: unknown }) {
           {stack && (
             <DetailsBanner
               color="secondary"
-              className="mt-3 select-auto text-xs"
+              className="mt-3 select-auto text-xs max-h-[40vh]"
               summary="Stack Trace"
             >
               <div className="mt-2 text-xs">{stack}</div>