Initial plan

.claude-context.md

@@ -1,83 +0,0 @@
-# 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

@@ -1,50 +0,0 @@
----
-description: Generate formatted release notes for Yaak releases
-allowed-tools: Bash(git tag:*)
----
-
-Generate formatted release notes for Yaak releases by analyzing git history and pull request descriptions.
-
-## What to do
-
-1. Identifies the version tag and previous version
-2. Retrieves all commits between versions
-   - If the version is a beta version, it retrieves commits between the beta version and previous beta version
-   - If the version is a stable version, it retrieves commits between the stable version and the previous stable version
-3. Fetches PR descriptions for linked issues to find:
-   - Feedback URLs (feedback.yaak.app)
-   - Additional context and descriptions
-   - Installation links for plugins
-4. Formats the release notes using the standard Yaak format:
-   - Changelog badge at the top
-   - Bulleted list of changes with PR links
-   - Feedback links where available
-   - Full changelog comparison link at the bottom
-
-## Output Format
-
-The skill generates markdown-formatted release notes following this structure:
-
-```markdown
-[![Changelog](https://img.shields.io/badge/Changelog-VERSION-blue)](https://yaak.app/changelog/VERSION)
-
-- Feature/fix description in by @username [#123](https://github.com/mountain-loop/yaak/pull/123)
-- [Linked feedback item](https://feedback.yaak.app/p/item) by @username in [#456](https://github.com/mountain-loop/yaak/pull/456)
-- A simple item that doesn't have a feedback or PR link
-
-**Full Changelog**: https://github.com/mountain-loop/yaak/compare/vPREV...vCURRENT
-```
-
-**IMPORTANT**: Always add a blank lines around the markdown code fence and output the markdown code block last
-**IMPORTANT**: PRs by `@gschier` should not mention the @username
-**IMPORTANT**: These are app release notes. Exclude CLI-only changes (commits prefixed with `cli:` or only touching `crates-cli/`) since the CLI has its own release process.
-
-## 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

@@ -1,27 +0,0 @@
-# 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

@@ -1,49 +0,0 @@
----
-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`.
-- These are app release notes. Exclude CLI-only changes (commits prefixed with `cli:` or only touching `crates-cli/`) since the CLI has its own release process.
-
-## Release Creation Prompt
-
-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,7 +1,5 @@
-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
+src-tauri/vendored/**/* linguist-generated=true
+src-tauri/gen/schemas/**/* linguist-generated=true
 
 # Ensure consistent line endings for test files that check exact content
-crates/yaak-http/tests/test.txt text eol=lf
+src-tauri/yaak-http/tests/test.txt text eol=lf

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/pull_request_template.md

@@ -1,19 +0,0 @@
-## 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

@@ -14,20 +14,18 @@ jobs:
     runs-on: macos-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: voidzero-dev/setup-vp@v1
-        with:
-          node-version: "24"
-          cache: true
+      - uses: actions/setup-node@v4
       - uses: dtolnay/rust-toolchain@stable
       - uses: Swatinem/rust-cache@v2
         with:
+          workspaces: 'src-tauri'
           shared-key: ci
           cache-on-failure: true
 
-      - run: vp install
-      - run: npm run bootstrap
+      - run: npm ci
       - run: npm run lint
       - name: Run JS Tests
-        run: vp test
+        run: npm test
       - name: Run Rust Tests
         run: cargo test --all
+        working-directory: src-tauri

.github/workflows/claude.yml

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

.github/workflows/flathub.yml

@@ -1,52 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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 Vite+
-        uses: voidzero-dev/setup-vp@v1
-        with:
-          node-version: "24"
-          cache: true
-
-      - name: install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.targets }}
-
-      - uses: Swatinem/rust-cache@v2
-        with:
-          shared-key: ci
-          cache-on-failure: true
-
-      - name: 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: vp install
-      - run: npm run bootstrap
-        env:
-          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
-      - run: npm run lint
-      - name: Run JS Tests
-        run: vp test
-      - name: Run Rust Tests
-        run: cargo test --all --exclude yaak-cli
-
-      - 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

@@ -1,218 +0,0 @@
-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

@@ -0,0 +1,131 @@
+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'

.github/workflows/sponsors.yml

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

.gitignore

@@ -36,25 +36,3 @@ out
 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

.node-version

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

.npmrc

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

.oxfmtignore

@@ -1,3 +0,0 @@
-**/bindings/**
-**/routeTree.gen.ts
-crates/yaak-templates/pkg/**

.vite-hooks/post-checkout

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

.vite-hooks/pre-commit

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

.vscode/extensions.json

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

.vscode/settings.json

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

AGENTS.md

@@ -1,2 +0,0 @@
-- 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

@@ -1,16 +0,0 @@
-# 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

@@ -1,91 +0,0 @@
-[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

DEVELOPMENT.md

@@ -1,26 +1,24 @@
 # Developer Setup
 
-Yaak is a combined Node.js and Rust monorepo. It is a [Tauri](https://tauri.app) project, so
+Yaak is a combined Node.js and Rust monorepo. It is a [Tauri](https://tauri.app) project, so 
 uses Rust and HTML/CSS/JS for the main application but there is also a plugin system powered
 by a Node.js sidecar that communicates to the app over gRPC.
 
-Because of the moving parts, there are a few setup steps required before development can
+Because of the moving parts, there are a few setup steps required before development can 
 begin.
 
 ## Prerequisites
 
 Make sure you have the following tools installed:
 
-- [Node.js](https://nodejs.org/en/download/package-manager) (v24+)
+- [Node.js](https://nodejs.org/en/download/package-manager)
 - [Rust](https://www.rust-lang.org/tools/install)
-- [Vite+](https://vite.dev/guide/vite-plus) (`vp` CLI)
 
 Check the installations with the following commands:
 
 ```shell
 node -v
 npm -v
-vp --version
 rustc --version
 ```
 
@@ -47,12 +45,12 @@ npm start
 ## SQLite Migrations
 
 New migrations can be created from the `src-tauri/` directory:
-
+   
 ```shell
 npm run migration
 ```
 
-Rerun the app to apply the migrations.
+Rerun the app to apply the migrations. 
 
 _Note: For safety, development builds use a separate database location from production builds._
 
@@ -63,9 +61,9 @@ _Note: For safety, development builds use a separate database location from prod
 lezer-generator components/core/Editor/<LANG>/<LANG>.grammar > components/core/Editor/<LANG>/<LANG>.ts
 ```
 
-## Linting and Formatting
+## Linting & Formatting
 
-This repo uses [Vite+](https://vite.dev/guide/vite-plus) for linting (oxlint) and formatting (oxfmt).
+This repo uses Biome for linting and formatting (replacing ESLint + Prettier).
 
 - Lint the entire repo:
 
@@ -73,6 +71,12 @@ This repo uses [Vite+](https://vite.dev/guide/vite-plus) for linting (oxlint) an
 npm run lint
 ```
 
+- Auto-fix lint issues where possible:
+
+```sh
+npm run lint:fix
+```
+
 - Format code:
 
 ```sh
@@ -80,7 +84,5 @@ npm run format
 ```
 
 Notes:
-
-- A pre-commit hook runs `vp lint` automatically on commit.
-- Some workspace packages also run `tsc --noEmit` for type-checking.
-- VS Code users should install the recommended extensions for format-on-save support.
+- Many workspace packages also expose the same scripts (`lint`, `lint:fix`, and `format`).
+- TypeScript type-checking still runs separately via `tsc --noEmit` in relevant packages.

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/JamesIves/github-sponsors-readme-action">
-    <img width="200px" src="https://github.com/mountain-loop/yaak/raw/main/crates-tauri/yaak-app-client/icons/icon.png">
+    <img width="200px" src="https://github.com/mountain-loop/yaak/raw/main/src-tauri/icons/icon.png">
   </a>
 </p>
 
@@ -16,19 +16,23 @@
 </p>
 <br>
 
+
+
 <p align="center">
-  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
+  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
 </p>
 <p align="center">
-  <!-- sponsors-base --><a href="https://github.com/seanwash"><img src="https:&#x2F;&#x2F;github.com&#x2F;seanwash.png" width="50px" alt="User avatar: seanwash" /></a>&nbsp;&nbsp;<a href="https://github.com/jerath"><img src="https:&#x2F;&#x2F;github.com&#x2F;jerath.png" width="50px" alt="User avatar: jerath" /></a>&nbsp;&nbsp;<a href="https://github.com/itsa-sh"><img src="https:&#x2F;&#x2F;github.com&#x2F;itsa-sh.png" width="50px" alt="User avatar: itsa-sh" /></a>&nbsp;&nbsp;<a href="https://github.com/dmmulroy"><img src="https:&#x2F;&#x2F;github.com&#x2F;dmmulroy.png" width="50px" alt="User avatar: dmmulroy" /></a>&nbsp;&nbsp;<a href="https://github.com/timcole"><img src="https:&#x2F;&#x2F;github.com&#x2F;timcole.png" width="50px" alt="User avatar: timcole" /></a>&nbsp;&nbsp;<a href="https://github.com/VLZH"><img src="https:&#x2F;&#x2F;github.com&#x2F;VLZH.png" width="50px" alt="User avatar: VLZH" /></a>&nbsp;&nbsp;<a href="https://github.com/terasaka2k"><img src="https:&#x2F;&#x2F;github.com&#x2F;terasaka2k.png" width="50px" alt="User avatar: terasaka2k" /></a>&nbsp;&nbsp;<a href="https://github.com/andriyor"><img src="https:&#x2F;&#x2F;github.com&#x2F;andriyor.png" width="50px" alt="User avatar: andriyor" /></a>&nbsp;&nbsp;<a href="https://github.com/majudhu"><img src="https:&#x2F;&#x2F;github.com&#x2F;majudhu.png" width="50px" alt="User avatar: majudhu" /></a>&nbsp;&nbsp;<a href="https://github.com/axelrindle"><img src="https:&#x2F;&#x2F;github.com&#x2F;axelrindle.png" width="50px" alt="User avatar: axelrindle" /></a>&nbsp;&nbsp;<a href="https://github.com/jirizverina"><img src="https:&#x2F;&#x2F;github.com&#x2F;jirizverina.png" width="50px" alt="User avatar: jirizverina" /></a>&nbsp;&nbsp;<a href="https://github.com/chip-well"><img src="https:&#x2F;&#x2F;github.com&#x2F;chip-well.png" width="50px" alt="User avatar: chip-well" /></a>&nbsp;&nbsp;<a href="https://github.com/GRAYAH"><img src="https:&#x2F;&#x2F;github.com&#x2F;GRAYAH.png" width="50px" alt="User avatar: GRAYAH" /></a>&nbsp;&nbsp;<a href="https://github.com/flashblaze"><img src="https:&#x2F;&#x2F;github.com&#x2F;flashblaze.png" width="50px" alt="User avatar: flashblaze" /></a>&nbsp;&nbsp;<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 -->
+  <!-- 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 -->
 </p>
 
 ![Yaak API Client](https://yaak.app/static/screenshot.png)
 
+
 ## Features
 
-Yaak is an offline-first API client designed to stay out of your way while giving you everything you need when you need it.
-Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight, and private. No telemetry, no VC funding, and no cloud lock-in.
+Yaak is an offline-first API client designed to stay out of your way while giving you everything you need when you need it. 
+Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight, and private. No telemetry, no VC funding, and no cloud lock-in.  
+
 
 ### 🌐 Work with any API
 
@@ -37,34 +41,30 @@ Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight
 - Filter and inspect responses with JSONPath or XPath.
 
 ### 🔐 Stay secure
-
 - Use OAuth 2.0, JWT, Basic Auth, or custom plugins for authentication.
-- Secure sensitive values with encrypted secrets.
+- Secure sensitive values with encrypted secrets. 
 - Store secrets in your OS keychain.
 
 ### ☁️ Organize & collaborate
-
 - Group requests into workspaces and nested folders.
 - Use environment variables to switch between dev, staging, and prod.
 - Mirror workspaces to your filesystem for versioning in Git or syncing with Dropbox.
 
 ### 🧩 Extend & customize
-
 - Insert dynamic values like UUIDs or timestamps with template tags.
 - Pick from built-in themes or build your own.
 - Create plugins to extend authentication, template tags, or the UI.
 
+
 ## Contribution Policy
 
-> [!IMPORTANT]
-> Community PRs are currently limited to bug fixes and small-scope improvements.
-> If your PR is out of scope, link an approved feedback item from [yaak.app/feedback](https://yaak.app/feedback).
-> See [`CONTRIBUTING.md`](CONTRIBUTING.md) for policy details and [`DEVELOPMENT.md`](DEVELOPMENT.md) for local setup.
+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.
 
 ## Useful Resources
 
 - [Feedback and Bug Reports](https://feedback.yaak.app)
-- [Documentation](https://yaak.app/docs)
+- [Documentation](https://feedback.yaak.app/help)
 - [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

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

apps/yaak-client/commands/openFolderSettings.tsx

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

apps/yaak-client/commands/openSettings.tsx

@@ -1,30 +0,0 @@
-import type { SettingsTab } from "../components/Settings/Settings";
-import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
-import { createFastMutation } from "../hooks/useFastMutation";
-import { jotaiStore } from "../lib/jotai";
-import { router } from "../lib/router";
-import { invokeCmd } from "../lib/tauri";
-
-// 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);
-    if (workspaceId == null) return;
-
-    const location = router.buildLocation({
-      to: "/workspaces/$workspaceId/settings",
-      params: { workspaceId },
-      search: { tab: (tab ?? undefined) as SettingsTab | undefined },
-    });
-
-    await invokeCmd("cmd_new_child_window", {
-      url: location.href,
-      label: "settings",
-      title: "Yaak Settings",
-      innerSize: [750, 600],
-    });
-  },
-});

apps/yaak-client/commands/openWorkspaceFromSyncDir.tsx

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

apps/yaak-client/commands/openWorkspaceSettings.tsx

@@ -1,19 +0,0 @@
-import type { WorkspaceSettingsTab } from "../components/WorkspaceSettingsDialog";
-import { WorkspaceSettingsDialog } from "../components/WorkspaceSettingsDialog";
-import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
-import { showDialog } from "../lib/dialog";
-import { jotaiStore } from "../lib/jotai";
-
-export function openWorkspaceSettings(tab?: WorkspaceSettingsTab) {
-  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
-  if (workspaceId == null) return;
-  showDialog({
-    id: "workspace-settings",
-    size: "md",
-    className: "h-[calc(100vh-5rem)] !max-h-[40rem]",
-    noPadding: true,
-    render: ({ hide }) => (
-      <WorkspaceSettingsDialog workspaceId={workspaceId} hide={hide} tab={tab} />
-    ),
-  });
-}

apps/yaak-client/components/CloneGitRepositoryDialog.tsx

@@ -1,160 +0,0 @@
-import { open } from "@tauri-apps/plugin-dialog";
-import { gitClone } from "@yaakapp-internal/git";
-import { Banner, VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
-import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
-import { appInfo } from "../lib/appInfo";
-import { showErrorToast } from "../lib/toast";
-import { Button } from "./core/Button";
-import { Checkbox } from "./core/Checkbox";
-import { IconButton } from "./core/IconButton";
-import { PlainInput } from "./core/PlainInput";
-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/ConfirmLargeResponseRequest.tsx

@@ -1,56 +0,0 @@
-import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
-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 { Button } from "./core/Button";
-import { SizeTag } from "./core/SizeTag";
-
-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/CopyButton.tsx

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

apps/yaak-client/components/CopyIconButton.tsx

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

apps/yaak-client/components/DnsOverridesEditor.tsx

@@ -1,190 +0,0 @@
-import type { DnsOverride, Workspace } from "@yaakapp-internal/models";
-import { patchModel } from "@yaakapp-internal/models";
-import { fireAndForget } from "../lib/fireAndForget";
-import {
-  HStack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-  VStack,
-} from "@yaakapp-internal/ui";
-import { useCallback, useId, useMemo } from "react";
-import { Button } from "./core/Button";
-import { Checkbox } from "./core/Checkbox";
-import { IconButton } from "./core/IconButton";
-import { PlainInput } from "./core/PlainInput";
-
-interface Props {
-  workspace: Workspace;
-}
-
-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[]) => {
-      fireAndForget(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

@@ -1,34 +0,0 @@
-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/FolderSettingsDialog.tsx

@@ -1,197 +0,0 @@
-import { createWorkspaceModel, foldersAtom, patchModel } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
-import { useAtomValue } from "jotai";
-import { Fragment, useMemo } from "react";
-import { useAuthTab } from "../hooks/useAuthTab";
-import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
-import { useHeadersTab } from "../hooks/useHeadersTab";
-import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
-import { useModelAncestors } from "../hooks/useModelAncestors";
-import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
-import { hideDialog } from "../lib/dialog";
-import { CopyIconButton } from "./CopyIconButton";
-import { Button } from "./core/Button";
-import { CountBadge } from "./core/CountBadge";
-import { Input } from "./core/Input";
-import { Link } from "./core/Link";
-import type { TabItem } from "./core/Tabs/Tabs";
-import { TabContent, Tabs } from "./core/Tabs/Tabs";
-import { EmptyStateText } from "./EmptyStateText";
-import { EnvironmentEditor } from "./EnvironmentEditor";
-import { HeadersEditor } from "./HeadersEditor";
-import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
-import { MarkdownEditor } from "./MarkdownEditor";
-
-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/GlobalHooks.tsx

@@ -1,38 +0,0 @@
-import { activeRequestAtom } from "../hooks/useActiveRequest";
-import { useSubscribeActiveWorkspaceId } from "../hooks/useActiveWorkspace";
-import { useActiveWorkspaceChangedToast } from "../hooks/useActiveWorkspaceChangedToast";
-import { useHotKey, useSubscribeHotKeys } from "../hooks/useHotKey";
-import { useSubscribeHttpAuthentication } from "../hooks/useHttpAuthentication";
-import { useSyncFontSizeSetting } from "../hooks/useSyncFontSizeSetting";
-import { useSyncWorkspaceChildModels } from "../hooks/useSyncWorkspaceChildModels";
-import { useSyncZoomSetting } from "../hooks/useSyncZoomSetting";
-import { useSubscribeTemplateFunctions } from "../hooks/useTemplateFunctions";
-import { jotaiStore } from "../lib/jotai";
-import { renameModelWithPrompt } from "../lib/renameModelWithPrompt";
-
-export function GlobalHooks() {
-  useSyncZoomSetting();
-  useSyncFontSizeSetting();
-
-  useSubscribeActiveWorkspaceId();
-
-  useSyncWorkspaceChildModels();
-  useSubscribeTemplateFunctions();
-  useSubscribeHttpAuthentication();
-
-  // Other useful things
-  useActiveWorkspaceChangedToast();
-  useSubscribeHotKeys();
-
-  useHotKey(
-    "request.rename",
-    async () => {
-      const model = jotaiStore.get(activeRequestAtom);
-      if (model == null) return;
-      await renameModelWithPrompt(model);
-    },
-    { allowDefault: true },
-  );
-
-  return null;
-}

apps/yaak-client/components/GrpcResponsePane.tsx

@@ -1,248 +0,0 @@
-import type { GrpcEvent, GrpcRequest } from "@yaakapp-internal/models";
-import { HStack, Icon, type IconProps, LoadingIcon, VStack } from "@yaakapp-internal/ui";
-import { useAtomValue, useSetAtom } from "jotai";
-import type { CSSProperties } from "react";
-import { useEffect, useMemo, useState } from "react";
-import {
-  activeGrpcConnectionAtom,
-  activeGrpcConnections,
-  pinnedGrpcConnectionIdAtom,
-  useGrpcEvents,
-} from "../hooks/usePinnedGrpcConnection";
-import { useStateWithDeps } from "../hooks/useStateWithDeps";
-import { Button } from "./core/Button";
-import { Editor } from "./core/Editor/LazyEditor";
-import { EventDetailHeader, EventViewer } from "./core/EventViewer";
-import { EventViewerRow } from "./core/EventViewerRow";
-import { HotkeyList } from "./core/HotkeyList";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
-import { EmptyStateText } from "./EmptyStateText";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { RecentGrpcConnectionsDropdown } from "./RecentGrpcConnectionsDropdown";
-
-interface Props {
-  style?: CSSProperties;
-  className?: string;
-  activeRequest: GrpcRequest;
-  methodType:
-    | "unary"
-    | "client_streaming"
-    | "server_streaming"
-    | "streaming"
-    | "no-schema"
-    | "no-method";
-}
-
-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
-  // oxlint-disable-next-line react-hooks/exhaustive-deps
-  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}
-          splitLayoutStorageKey="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/HttpResponsePane.tsx

@@ -1,427 +0,0 @@
-import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
-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 { 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 { PillButton } from "./core/PillButton";
-import { SizeTag } from "./core/SizeTag";
-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

@@ -1,418 +0,0 @@
-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"
-      splitLayoutStorageKey="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/JsonBodyEditor.tsx

@@ -1,122 +0,0 @@
-import { linter } from "@codemirror/lint";
-import type { HttpRequest } from "@yaakapp-internal/models";
-import { patchModel } from "@yaakapp-internal/models";
-import { Banner, Icon } from "@yaakapp-internal/ui";
-import { useCallback, useMemo } from "react";
-import { useKeyValue } from "../hooks/useKeyValue";
-import { fireAndForget } from "../lib/fireAndForget";
-import { textLikelyContainsJsonComments } from "../lib/jsonComments";
-import type { DropdownItem } from "./core/Dropdown";
-import { Dropdown } from "./core/Dropdown";
-import type { EditorProps } from "./core/Editor/Editor";
-import { jsonParseLinter } from "./core/Editor/json-lint";
-import { Editor } from "./core/Editor/LazyEditor";
-import { IconButton } from "./core/IconButton";
-import { IconTooltip } from "./core/IconTooltip";
-
-interface Props {
-  forceUpdateKey: string;
-  heightMode: EditorProps["heightMode"];
-  request: HttpRequest;
-}
-
-export function JsonBodyEditor({ forceUpdateKey, heightMode, request }: Props) {
-  const handleChange = useCallback(
-    (text: string) => patchModel(request, { body: { ...request.body, text } }),
-    [request],
-  );
-
-  const autoFix = request.body?.sendJsonComments !== true;
-
-  const lintExtension = useMemo(
-    () =>
-      linter(
-        jsonParseLinter(
-          autoFix
-            ? { allowComments: true, allowTrailingCommas: true }
-            : { allowComments: false, allowTrailingCommas: false },
-        ),
-      ),
-    [autoFix],
-  );
-
-  const hasComments = useMemo(
-    () => textLikelyContainsJsonComments(request.body?.text ?? ""),
-    [request.body?.text],
-  );
-
-  const { value: bannerDismissed, set: setBannerDismissed } = useKeyValue<boolean>({
-    namespace: "no_sync",
-    key: ["json-fix-3", request.workspaceId],
-    fallback: false,
-  });
-
-  const handleToggleAutoFix = useCallback(() => {
-    const newBody = { ...request.body };
-    if (autoFix) {
-      newBody.sendJsonComments = true;
-    } else {
-      delete newBody.sendJsonComments;
-    }
-    fireAndForget(patchModel(request, { body: newBody }));
-  }, [request, autoFix]);
-
-  const handleDropdownOpen = useCallback(() => {
-    if (!bannerDismissed) {
-      fireAndForget(setBannerDismissed(true));
-    }
-  }, [bannerDismissed, setBannerDismissed]);
-
-  const showBanner = hasComments && autoFix && !bannerDismissed;
-
-  const stripMessage = "Automatically strip comments and trailing commas before sending";
-  const actions = useMemo<EditorProps["actions"]>(
-    () => [
-      showBanner && (
-        <Banner color="notice" className="!opacity-100 h-sm !py-0 !px-2 flex items-center text-xs">
-          <p className="inline-flex items-center gap-1 min-w-0">
-            <span className="truncate">Auto-fix enabled</span>
-            <Icon icon="arrow_right" size="sm" className="opacity-disabled" />
-          </p>
-        </Banner>
-      ),
-      <div key="settings" className="!opacity-100 !shadow">
-        <Dropdown
-          onOpen={handleDropdownOpen}
-          items={
-            [
-              {
-                label: "Automatically Fix JSON",
-                keepOpenOnSelect: true,
-                onSelect: handleToggleAutoFix,
-                rightSlot: <IconTooltip content={stripMessage} />,
-                leftSlot: (
-                  <Icon icon={autoFix ? "check_square_checked" : "check_square_unchecked"} />
-                ),
-              },
-            ] satisfies DropdownItem[]
-          }
-        >
-          <IconButton size="sm" variant="border" icon="settings" title="JSON Settings" />
-        </Dropdown>
-      </div>,
-    ],
-    [handleDropdownOpen, handleToggleAutoFix, autoFix, showBanner],
-  );
-
-  return (
-    <Editor
-      forceUpdateKey={forceUpdateKey}
-      autocompleteFunctions
-      autocompleteVariables
-      placeholder="..."
-      heightMode={heightMode}
-      defaultValue={`${request.body?.text ?? ""}`}
-      language="json"
-      onChange={handleChange}
-      stateKey={`json.${request.id}`}
-      actions={actions}
-      lintExtension={lintExtension}
-    />
-  );
-}

apps/yaak-client/components/KeyboardShortcutsDialog.tsx

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

apps/yaak-client/components/Markdown.tsx

@@ -1,113 +0,0 @@
-import type { CSSProperties } from "react";
-import ReactMarkdown, { type Components } from "react-markdown";
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import remarkGfm from "remark-gfm";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { Prose } from "./Prose";
-
-interface Props {
-  children: string | null;
-  className?: string;
-}
-
-export function Markdown({ children, className }: Props) {
-  if (children == null) return null;
-
-  return (
-    <Prose className={className}>
-      <ErrorBoundary name="Markdown">
-        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
-          {children}
-        </ReactMarkdown>
-      </ErrorBoundary>
-    </Prose>
-  );
-}
-
-const prismTheme = {
-  'pre[class*="language-"]': {
-    // Needs to be here, so the lib doesn't add its own
-  },
-
-  // Syntax tokens
-  comment: { color: "var(--textSubtle)" },
-  prolog: { color: "var(--textSubtle)" },
-  doctype: { color: "var(--textSubtle)" },
-  cdata: { color: "var(--textSubtle)" },
-
-  punctuation: { color: "var(--textSubtle)" },
-
-  property: { color: "var(--primary)" },
-  "attr-name": { color: "var(--primary)" },
-
-  string: { color: "var(--notice)" },
-  char: { color: "var(--notice)" },
-
-  number: { color: "var(--info)" },
-  constant: { color: "var(--info)" },
-  symbol: { color: "var(--info)" },
-
-  boolean: { color: "var(--warning)" },
-  "attr-value": { color: "var(--warning)" },
-
-  variable: { color: "var(--success)" },
-
-  tag: { color: "var(--info)" },
-  operator: { color: "var(--danger)" },
-  keyword: { color: "var(--danger)" },
-  function: { color: "var(--success)" },
-  "class-name": { color: "var(--primary)" },
-  builtin: { color: "var(--danger)" },
-  selector: { color: "var(--danger)" },
-  inserted: { color: "var(--success)" },
-  deleted: { color: "var(--danger)" },
-  regex: { color: "var(--warning)" },
-
-  important: { color: "var(--danger)", fontWeight: "bold" },
-  italic: { fontStyle: "italic" },
-  bold: { fontWeight: "bold" },
-  entity: { cursor: "help" },
-};
-
-const lineStyle: CSSProperties = {
-  paddingRight: "1.5em",
-  paddingLeft: "0",
-  opacity: 0.5,
-};
-
-const markdownComponents: Partial<Components> = {
-  // Ensure links open in external browser by adding target="_blank"
-  a: ({ href, children, ...rest }) => {
-    if (href && !href.match(/https?:\/\//)) {
-      href = `http://${href}`;
-    }
-    return (
-      <a target="_blank" rel="noreferrer noopener" href={href} {...rest}>
-        {children}
-      </a>
-    );
-  },
-  code(props) {
-    const { children, className, ref, ...extraProps } = props;
-    extraProps.node = undefined;
-
-    const match = /language-(\w+)/.exec(className || "");
-    return match ? (
-      <SyntaxHighlighter
-        {...extraProps}
-        CodeTag="code"
-        showLineNumbers
-        PreTag="div"
-        lineNumberStyle={lineStyle}
-        language={match[1]}
-        style={prismTheme}
-      >
-        {String(children as string).replace(/\n$/, "")}
-      </SyntaxHighlighter>
-    ) : (
-      <code {...extraProps} ref={ref} className={className}>
-        {children}
-      </code>
-    );
-  },
-};

apps/yaak-client/components/MoveToWorkspaceDialog.tsx

@@ -1,88 +0,0 @@
-import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
-import { patchModel, workspacesAtom } from "@yaakapp-internal/models";
-import { InlineCode, VStack } from "@yaakapp-internal/ui";
-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";
-import { Button } from "./core/Button";
-import { Select } from "./core/Select";
-
-interface Props {
-  activeWorkspaceId: string;
-  requests: (HttpRequest | GrpcRequest | WebsocketRequest)[];
-  onDone: () => void;
-}
-
-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="Target Workspace"
-        name="workspace"
-        value={selectedWorkspaceId}
-        onChange={setSelectedWorkspaceId}
-        options={workspaces.map((w) => ({
-          label: w.id === activeWorkspaceId ? `${w.name} (current)` : w.name,
-          value: w.id,
-        }))}
-      />
-      <Button
-        color="primary"
-        disabled={isSameWorkspace}
-        onClick={async () => {
-          const patch = {
-            workspaceId: selectedWorkspaceId,
-            folderId: null,
-          };
-
-          await Promise.all(requests.map((r) => patchModel(r, patch)));
-
-          // Hide after a moment, to give time for requests to disappear
-          setTimeout(onDone, 100);
-          showToast({
-            id: "workspace-moved",
-            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"
-                color="secondary"
-                className="mr-auto min-w-[5rem]"
-                onClick={async () => {
-                  await router.navigate({
-                    to: "/workspaces/$workspaceId",
-                    params: { workspaceId: selectedWorkspaceId },
-                  });
-                  hide();
-                }}
-              >
-                Switch to Workspace
-              </Button>
-            ),
-          });
-        }}
-      >
-        {requests.length === 1 ? "Move" : `Move ${pluralizeCount("Request", requests.length)}`}
-      </Button>
-    </VStack>
-  );
-}

apps/yaak-client/components/Prose.tsx

@@ -1,12 +0,0 @@
-import classNames from "classnames";
-import type { ReactNode } from "react";
-import "./Prose.css";
-
-interface Props {
-  children: ReactNode;
-  className?: string;
-}
-
-export function Prose({ className, ...props }: Props) {
-  return <div className={classNames("prose", className)} {...props} />;
-}

apps/yaak-client/components/RedirectToLatestWorkspace.tsx

@@ -1,44 +0,0 @@
-import { workspacesAtom } from "@yaakapp-internal/models";
-import { useAtomValue } from "jotai";
-import { useEffect } from "react";
-import { getRecentCookieJars } from "../hooks/useRecentCookieJars";
-import { getRecentEnvironments } from "../hooks/useRecentEnvironments";
-import { getRecentRequests } from "../hooks/useRecentRequests";
-import { useRecentWorkspaces } from "../hooks/useRecentWorkspaces";
-import { fireAndForget } from "../lib/fireAndForget";
-import { router } from "../lib/router";
-
-export function RedirectToLatestWorkspace() {
-  const workspaces = useAtomValue(workspacesAtom);
-  const recentWorkspaces = useRecentWorkspaces();
-
-  useEffect(() => {
-    if (workspaces.length === 0 || recentWorkspaces == null) {
-      console.log("No workspaces found to redirect to. Skipping.", {
-        workspaces,
-        recentWorkspaces,
-      });
-      return;
-    }
-
-    fireAndForget(
-      (async () => {
-        const workspaceId = recentWorkspaces[0] ?? workspaces[0]?.id ?? "n/a";
-        const environmentId = (await getRecentEnvironments(workspaceId))[0] ?? null;
-        const cookieJarId = (await getRecentCookieJars(workspaceId))[0] ?? null;
-        const requestId = (await getRecentRequests(workspaceId))[0] ?? null;
-        const params = { workspaceId };
-        const search = {
-          cookie_jar_id: cookieJarId,
-          environment_id: environmentId,
-          request_id: requestId,
-        };
-
-        console.log("Redirecting to workspace", params, search);
-        await router.navigate({ to: "/workspaces/$workspaceId", params, search });
-      })(),
-    );
-  }, [recentWorkspaces, workspaces, workspaces.length]);
-
-  return null;
-}

apps/yaak-client/components/RequestBodyViewer.tsx

@@ -1,102 +0,0 @@
-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

@@ -1,78 +0,0 @@
-import type { HttpRequest } from "@yaakapp-internal/models";
-import { patchModel } from "@yaakapp-internal/models";
-import classNames from "classnames";
-import { memo, useCallback, useMemo } from "react";
-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 "@yaakapp-internal/ui";
-import type { RadioDropdownItem } from "./core/RadioDropdown";
-import { RadioDropdown } from "./core/RadioDropdown";
-
-type Props = {
-  request: HttpRequest;
-  className?: string;
-};
-
-const radioItems: RadioDropdownItem<string>[] = [
-  "GET",
-  "PUT",
-  "POST",
-  "PATCH",
-  "DELETE",
-  "OPTIONS",
-  "QUERY",
-  "HEAD",
-].map((m) => ({
-  value: m,
-  label: <HttpMethodTagRaw method={m} />,
-}));
-
-export const RequestMethodDropdown = memo(function RequestMethodDropdown({
-  request,
-  className,
-}: Props) {
-  const handleChange = useCallback(
-    async (method: string) => {
-      await patchModel(request, { method });
-    },
-    [request],
-  );
-
-  const itemsAfter = useMemo<DropdownItem[]>(
-    () => [
-      {
-        key: "custom",
-        label: "CUSTOM",
-        leftSlot: <Icon icon="sparkles" />,
-        onSelect: async () => {
-          const newMethod = await showPrompt({
-            id: "custom-method",
-            label: "Http Method",
-            title: "Custom Method",
-            confirmText: "Save",
-            description: "Enter a custom method name",
-            placeholder: "CUSTOM",
-          });
-          if (newMethod == null) return;
-          await handleChange(newMethod);
-        },
-      },
-    ],
-    [handleChange],
-  );
-
-  return (
-    <RadioDropdown
-      value={request.method}
-      items={radioItems}
-      itemsAfter={itemsAfter}
-      onChange={handleChange}
-    >
-      <Button size="xs" className={classNames(className, "text-text-subtle hover:text")}>
-        <HttpMethodTag request={request} noAlias />
-      </Button>
-    </RadioDropdown>
-  );
-});

apps/yaak-client/components/ResponseCookies.tsx

@@ -1,225 +0,0 @@
-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) => (
-              // oxlint-disable-next-line react/no-array-index-key
-              <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) => (
-              // oxlint-disable-next-line react/no-array-index-key
-              <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

@@ -1,101 +0,0 @@
-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) => (
-              // oxlint-disable-next-line react/no-array-index-key
-              <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) => (
-              // oxlint-disable-next-line react/no-array-index-key
-              <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/Settings/Settings.tsx

@@ -1,161 +0,0 @@
-import { useSearch } from "@tanstack/react-router";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { type } from "@tauri-apps/plugin-os";
-import { useLicense } from "@yaakapp-internal/license";
-import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
-import { HeaderSize, HStack, Icon } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { useAtomValue } from "jotai";
-import { useKeyPressEvent } from "react-use";
-import { appInfo } from "../../lib/appInfo";
-import { capitalize } from "../../lib/capitalize";
-import { CountBadge } from "../core/CountBadge";
-import { TabContent, type TabItem, Tabs } from "../core/Tabs/Tabs";
-import { SettingsCertificates } from "./SettingsCertificates";
-import { SettingsGeneral } from "./SettingsGeneral";
-import { SettingsHotkeys } from "./SettingsHotkeys";
-import { SettingsInterface } from "./SettingsInterface";
-import { SettingsLicense } from "./SettingsLicense";
-import { SettingsPlugins } from "./SettingsPlugins";
-import { SettingsProxy } from "./SettingsProxy";
-import { SettingsTheme } from "./SettingsTheme";
-
-interface Props {
-  hide?: () => void;
-}
-
-const TAB_GENERAL = "general";
-const TAB_INTERFACE = "interface";
-const TAB_THEME = "theme";
-const TAB_SHORTCUTS = "shortcuts";
-const TAB_PROXY = "proxy";
-const TAB_CERTIFICATES = "certificates";
-const TAB_PLUGINS = "plugins";
-const TAB_LICENSE = "license";
-const tabs = [
-  TAB_GENERAL,
-  TAB_THEME,
-  TAB_INTERFACE,
-  TAB_SHORTCUTS,
-  TAB_PLUGINS,
-  TAB_CERTIFICATES,
-  TAB_PROXY,
-  TAB_LICENSE,
-] as const;
-export type SettingsTab = (typeof tabs)[number];
-
-export default function Settings({ hide }: Props) {
-  const { tab: tabFromQuery } = useSearch({ from: "/workspaces/$workspaceId/settings" });
-  // Parse tab and subtab (e.g., "plugins:installed")
-  const [mainTab, subtab] = tabFromQuery?.split(":") ?? [];
-  const settings = useAtomValue(settingsAtom);
-  const plugins = useAtomValue(pluginsAtom);
-  const licenseCheck = useLicense();
-
-  // Close settings window on escape
-  // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window
-  useKeyPressEvent("Escape", async () => {
-    if (hide != null) {
-      // It's being shown in a dialog, so close the dialog
-      hide();
-    } else {
-      // It's being shown in a window, so close the window
-      await getCurrentWebviewWindow().close();
-    }
-  });
-
-  return (
-    <div className={classNames("grid grid-rows-[auto_minmax(0,1fr)] h-full")}>
-      {hide ? (
-        <span />
-      ) : (
-        <HeaderSize
-          data-tauri-drag-region
-          ignoreControlsSpacing
-          onlyXWindowControl
-          size="md"
-          className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
-          osType={type()}
-          hideWindowControls={settings.hideWindowControls}
-          useNativeTitlebar={settings.useNativeTitlebar}
-          interfaceScale={settings.interfaceScale}
-        >
-          <HStack
-            space={2}
-            justifyContent="center"
-            className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
-          >
-            <div className={classNames(type() === "macos" ? "text-center" : "pl-2")}>Settings</div>
-          </HStack>
-        </HeaderSize>
-      )}
-      <Tabs
-        layout="horizontal"
-        defaultValue={mainTab || tabFromQuery}
-        addBorders
-        tabListClassName="min-w-[10rem] bg-surface x-theme-sidebar border-r border-border pl-3"
-        label="Settings"
-        tabs={tabs.map(
-          (value): TabItem => ({
-            value,
-            label: capitalize(value),
-            hidden: !appInfo.featureLicense && value === TAB_LICENSE,
-            leftSlot:
-              value === TAB_GENERAL ? (
-                <Icon icon="settings" className="text-secondary" />
-              ) : value === TAB_THEME ? (
-                <Icon icon="palette" className="text-secondary" />
-              ) : value === TAB_INTERFACE ? (
-                <Icon icon="columns_2" className="text-secondary" />
-              ) : value === TAB_SHORTCUTS ? (
-                <Icon icon="keyboard" className="text-secondary" />
-              ) : value === TAB_CERTIFICATES ? (
-                <Icon icon="shield_check" className="text-secondary" />
-              ) : value === TAB_PROXY ? (
-                <Icon icon="wifi" className="text-secondary" />
-              ) : value === TAB_PLUGINS ? (
-                <Icon icon="puzzle" className="text-secondary" />
-              ) : value === TAB_LICENSE ? (
-                <Icon icon="key_round" className="text-secondary" />
-              ) : null,
-            rightSlot:
-              value === TAB_CERTIFICATES ? (
-                <CountBadge count={settings.clientCertificates.length} />
-              ) : value === TAB_PLUGINS ? (
-                <CountBadge count={plugins.filter((p) => p.source !== "bundled").length} />
-              ) : value === TAB_PROXY && settings.proxy?.type === "enabled" ? (
-                <CountBadge count />
-              ) : value === TAB_LICENSE && licenseCheck.check.data?.status === "personal_use" ? (
-                <CountBadge count color="notice" />
-              ) : null,
-          }),
-        )}
-      >
-        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsGeneral />
-        </TabContent>
-        <TabContent value={TAB_INTERFACE} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsInterface />
-        </TabContent>
-        <TabContent value={TAB_THEME} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsTheme />
-        </TabContent>
-        <TabContent value={TAB_SHORTCUTS} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsHotkeys />
-        </TabContent>
-        <TabContent value={TAB_PLUGINS} className="h-full grid grid-rows-1">
-          <SettingsPlugins defaultSubtab={mainTab === TAB_PLUGINS ? subtab : undefined} />
-        </TabContent>
-        <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsProxy />
-        </TabContent>
-        <TabContent value={TAB_CERTIFICATES} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsCertificates />
-        </TabContent>
-        <TabContent value={TAB_LICENSE} className="overflow-y-auto h-full px-6 !py-4">
-          <SettingsLicense />
-        </TabContent>
-      </Tabs>
-    </div>
-  );
-}

apps/yaak-client/components/Settings/SettingsHotkeys.tsx

@@ -1,365 +0,0 @@
-import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import {
-  Heading,
-  HStack,
-  Icon,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-  VStack,
-} from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { fuzzyMatch } from "fuzzbunny";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  defaultHotkeys,
-  formatHotkeyString,
-  getHotkeyScope,
-  type HotkeyAction,
-  hotkeyActions,
-  hotkeysAtom,
-  useHotkeyLabel,
-} from "../../hooks/useHotKey";
-import { capitalize } from "../../lib/capitalize";
-import { showDialog } from "../../lib/dialog";
-import { Button } from "../core/Button";
-import { Dropdown, type DropdownItem } from "../core/Dropdown";
-import { HotkeyRaw } from "../core/Hotkey";
-import { IconButton } from "../core/IconButton";
-import { PlainInput } from "../core/PlainInput";
-
-const HOLD_KEYS = ["Shift", "Control", "Alt", "Meta"];
-const LAYOUT_INSENSITIVE_KEYS = [
-  "Equal",
-  "Minus",
-  "BracketLeft",
-  "BracketRight",
-  "Backquote",
-  "Space",
-];
-
-/** Convert a KeyboardEvent to a hotkey string like "Meta+Shift+k" or "Control+Shift+k" */
-function eventToHotkeyString(e: KeyboardEvent): string | null {
-  // Don't capture modifier-only key presses
-  if (HOLD_KEYS.includes(e.key)) {
-    return null;
-  }
-
-  const parts: string[] = [];
-
-  // Add modifiers in consistent order (Meta, Control, Alt, Shift)
-  if (e.metaKey) {
-    parts.push("Meta");
-  }
-  if (e.ctrlKey) {
-    parts.push("Control");
-  }
-  if (e.altKey) {
-    parts.push("Alt");
-  }
-  if (e.shiftKey) {
-    parts.push("Shift");
-  }
-
-  // Get the main key - use the same logic as useHotKey.ts
-  const key = LAYOUT_INSENSITIVE_KEYS.includes(e.code) ? e.code : e.key;
-  parts.push(key);
-
-  return parts.join("+");
-}
-
-export function SettingsHotkeys() {
-  const settings = useAtomValue(settingsAtom);
-  const hotkeys = useAtomValue(hotkeysAtom);
-  const [filter, setFilter] = useState("");
-
-  const filteredActions = useMemo(() => {
-    if (!filter.trim()) {
-      return hotkeyActions;
-    }
-    return hotkeyActions.filter((action) => {
-      const scope = getHotkeyScope(action).replace(/_/g, " ");
-      const label = action.replace(/[_.]/g, " ");
-      const searchText = `${scope} ${label}`;
-      return fuzzyMatch(searchText, filter) != null;
-    });
-  }, [filter]);
-
-  if (settings == null) {
-    return null;
-  }
-
-  return (
-    <VStack space={3} className="mb-4">
-      <div className="mb-3">
-        <Heading>Keyboard Shortcuts</Heading>
-        <p className="text-text-subtle">
-          Click the menu button to add, remove, or reset keyboard shortcuts.
-        </p>
-      </div>
-      <PlainInput
-        label="Filter"
-        placeholder="Filter shortcuts..."
-        defaultValue={filter}
-        onChange={setFilter}
-        hideLabel
-        containerClassName="max-w-xs"
-      />
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeaderCell>Scope</TableHeaderCell>
-            <TableHeaderCell>Action</TableHeaderCell>
-            <TableHeaderCell>Shortcut</TableHeaderCell>
-            <TableHeaderCell></TableHeaderCell>
-          </TableRow>
-        </TableHead>
-        {/* key={filter} forces re-render on filter change to fix Safari table rendering bug */}
-        <TableBody key={filter}>
-          {filteredActions.map((action) => (
-            <HotkeyRow
-              key={action}
-              action={action}
-              currentKeys={hotkeys[action]}
-              defaultKeys={defaultHotkeys[action]}
-              onSave={async (keys) => {
-                const newHotkeys = { ...settings.hotkeys };
-                if (arraysEqual(keys, defaultHotkeys[action])) {
-                  // Remove from settings if it matches default (use default)
-                  delete newHotkeys[action];
-                } else {
-                  // Store the keys (including empty array to disable)
-                  newHotkeys[action] = keys;
-                }
-                await patchModel(settings, { hotkeys: newHotkeys });
-              }}
-              onReset={async () => {
-                const newHotkeys = { ...settings.hotkeys };
-                delete newHotkeys[action];
-                await patchModel(settings, { hotkeys: newHotkeys });
-              }}
-            />
-          ))}
-        </TableBody>
-      </Table>
-    </VStack>
-  );
-}
-
-interface HotkeyRowProps {
-  action: HotkeyAction;
-  currentKeys: string[];
-  defaultKeys: string[];
-  onSave: (keys: string[]) => Promise<void>;
-  onReset: () => Promise<void>;
-}
-
-function HotkeyRow({ action, currentKeys, defaultKeys, onSave, onReset }: HotkeyRowProps) {
-  const label = useHotkeyLabel(action);
-  const scope = capitalize(getHotkeyScope(action).replace(/_/g, " "));
-  const isCustomized = !arraysEqual(currentKeys, defaultKeys);
-  const isDisabled = currentKeys.length === 0;
-
-  const handleStartRecording = useCallback(() => {
-    showDialog({
-      id: `record-hotkey-${action}`,
-      title: label,
-      size: "sm",
-      render: ({ hide }) => (
-        <RecordHotkeyDialog
-          label={label}
-          onSave={async (key) => {
-            await onSave([...currentKeys, key]);
-            hide();
-          }}
-          onCancel={hide}
-        />
-      ),
-    });
-  }, [action, label, currentKeys, onSave]);
-
-  const handleRemove = useCallback(
-    async (keyToRemove: string) => {
-      const newKeys = currentKeys.filter((k) => k !== keyToRemove);
-      await onSave(newKeys);
-    },
-    [currentKeys, onSave],
-  );
-
-  const handleClearAll = useCallback(async () => {
-    await onSave([]);
-  }, [onSave]);
-
-  // Build dropdown items dynamically
-  const dropdownItems: DropdownItem[] = [
-    {
-      label: "Add Keyboard Shortcut",
-      leftSlot: <Icon icon="plus" />,
-      onSelect: handleStartRecording,
-    },
-  ];
-
-  // Add remove options for each existing shortcut
-  if (!isDisabled) {
-    currentKeys.forEach((key) => {
-      dropdownItems.push({
-        label: (
-          <HStack space={1.5}>
-            <span>Remove</span>
-            <HotkeyRaw labelParts={formatHotkeyString(key)} variant="with-bg" className="text-xs" />
-          </HStack>
-        ),
-        leftSlot: <Icon icon="trash" />,
-        onSelect: () => handleRemove(key),
-      });
-    });
-
-    if (currentKeys.length > 1) {
-      dropdownItems.push(
-        {
-          type: "separator",
-        },
-        {
-          label: "Remove All Shortcuts",
-          leftSlot: <Icon icon="trash" />,
-          onSelect: handleClearAll,
-        },
-      );
-    }
-  }
-
-  if (isCustomized) {
-    dropdownItems.push({
-      type: "separator",
-    });
-    dropdownItems.push({
-      label: "Reset to Default",
-      leftSlot: <Icon icon="refresh" />,
-      onSelect: onReset,
-    });
-  }
-
-  return (
-    <TableRow>
-      <TableCell>
-        <span className="text-sm text-text-subtlest">{scope}</span>
-      </TableCell>
-      <TableCell>
-        <span className="text-sm">{label}</span>
-      </TableCell>
-      <TableCell>
-        <HStack space={1.5} className="py-1">
-          {isDisabled ? (
-            <span className="text-text-subtlest">Disabled</span>
-          ) : (
-            currentKeys.map((k) => (
-              <HotkeyRaw key={k} labelParts={formatHotkeyString(k)} variant="with-bg" />
-            ))
-          )}
-        </HStack>
-      </TableCell>
-      <TableCell align="right">
-        <Dropdown items={dropdownItems}>
-          <IconButton
-            icon="ellipsis_vertical"
-            size="sm"
-            title="Hotkey actions"
-            className="ml-auto text-text-subtlest"
-          />
-        </Dropdown>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-function arraysEqual(a: string[], b: string[]): boolean {
-  if (a.length !== b.length) return false;
-  const sortedA = [...a].sort();
-  const sortedB = [...b].sort();
-  return sortedA.every((v, i) => v === sortedB[i]);
-}
-
-interface RecordHotkeyDialogProps {
-  label: string;
-  onSave: (key: string) => void;
-  onCancel: () => void;
-}
-
-function RecordHotkeyDialog({ label, onSave, onCancel }: RecordHotkeyDialogProps) {
-  const [recordedKey, setRecordedKey] = useState<string | null>(null);
-  const [isFocused, setIsFocused] = useState(false);
-
-  useEffect(() => {
-    if (!isFocused) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (e.key === "Escape") {
-        onCancel();
-        return;
-      }
-
-      const hotkeyString = eventToHotkeyString(e);
-      if (hotkeyString) {
-        setRecordedKey(hotkeyString);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown, { capture: true });
-    };
-  }, [isFocused, onCancel]);
-
-  const handleSave = useCallback(() => {
-    if (recordedKey) {
-      onSave(recordedKey);
-    }
-  }, [recordedKey, onSave]);
-
-  return (
-    <VStack space={4}>
-      <div>
-        <p className="text-text-subtle mb-2">
-          Record a key combination for <span className="font-semibold">{label}</span>
-        </p>
-        <button
-          type="button"
-          data-disable-hotkey
-          aria-label="Keyboard shortcut input"
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          onClick={(e) => {
-            e.preventDefault();
-            e.currentTarget.focus();
-          }}
-          className={classNames(
-            "flex items-center justify-center",
-            "px-4 py-2 rounded-lg bg-surface-highlight border outline-none cursor-default w-full",
-            "border-border-subtle focus:border-border-focus",
-          )}
-        >
-          {recordedKey ? (
-            <HotkeyRaw labelParts={formatHotkeyString(recordedKey)} />
-          ) : (
-            <span className="text-text-subtlest">Press keys...</span>
-          )}
-        </button>
-      </div>
-      <HStack space={2} justifyContent="end">
-        <Button color="secondary" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button color="primary" onClick={handleSave} disabled={!recordedKey}>
-          Save
-        </Button>
-      </HStack>
-    </VStack>
-  );
-}

apps/yaak-client/components/SettingsDropdown.tsx

@@ -1,111 +0,0 @@
-import { openUrl } from "@tauri-apps/plugin-opener";
-import { useLicense } from "@yaakapp-internal/license";
-import { useRef } from "react";
-import { openSettings } from "../commands/openSettings";
-import { useCheckForUpdates } from "../hooks/useCheckForUpdates";
-import { useExportData } from "../hooks/useExportData";
-import { appInfo } from "../lib/appInfo";
-import { showDialog } from "../lib/dialog";
-import { importData } from "../lib/importData";
-import type { DropdownRef } from "./core/Dropdown";
-import { Dropdown } from "./core/Dropdown";
-import { Icon } from "@yaakapp-internal/ui";
-import { IconButton } from "./core/IconButton";
-import { KeyboardShortcutsDialog } from "./KeyboardShortcutsDialog";
-
-export function SettingsDropdown() {
-  const exportData = useExportData();
-  const dropdownRef = useRef<DropdownRef>(null);
-  const checkForUpdates = useCheckForUpdates();
-  const { check } = useLicense();
-
-  return (
-    <Dropdown
-      ref={dropdownRef}
-      items={[
-        {
-          label: "Settings",
-          hotKeyAction: "settings.show",
-          leftSlot: <Icon icon="settings" />,
-          onSelect: () => openSettings.mutate(null),
-        },
-        {
-          label: "Keyboard shortcuts",
-          hotKeyAction: "hotkeys.showHelp",
-          leftSlot: <Icon icon="keyboard" />,
-          onSelect: () => {
-            showDialog({
-              id: "hotkey",
-              title: "Keyboard Shortcuts",
-              size: "dynamic",
-              render: () => <KeyboardShortcutsDialog />,
-            });
-          },
-        },
-        {
-          label: "Plugins",
-          leftSlot: <Icon icon="puzzle" />,
-          onSelect: () => openSettings.mutate("plugins"),
-        },
-        { type: "separator", label: "Share Workspace(s)" },
-        {
-          label: "Import Data",
-          leftSlot: <Icon icon="folder_input" />,
-          onSelect: () => importData.mutate(),
-        },
-        {
-          label: "Export Data",
-          leftSlot: <Icon icon="folder_output" />,
-          onSelect: () => exportData.mutate(),
-        },
-        {
-          label: "Create Run Button",
-          leftSlot: <Icon icon="rocket" />,
-          onSelect: () => openUrl("https://yaak.app/button/new"),
-        },
-        { type: "separator", label: `Yaak v${appInfo.version}` },
-        {
-          label: "Check for Updates",
-          leftSlot: <Icon icon="update" />,
-          hidden: !appInfo.featureUpdater,
-          onSelect: () => checkForUpdates.mutate(),
-        },
-        {
-          label: "Purchase License",
-          color: "success",
-          hidden: check.data == null || check.data.status === "active",
-          leftSlot: <Icon icon="circle_dollar_sign" />,
-          rightSlot: <Icon icon="external_link" color="success" className="opacity-60" />,
-          onSelect: () => openUrl("https://yaak.app/pricing"),
-        },
-        {
-          label: "Install CLI",
-          hidden: appInfo.cliVersion != null,
-          leftSlot: <Icon icon="square_terminal" />,
-          rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => openUrl("https://yaak.app/docs/cli"),
-        },
-        {
-          label: "Feedback",
-          leftSlot: <Icon icon="chat" />,
-          rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => openUrl("https://yaak.app/feedback"),
-        },
-        {
-          label: "Changelog",
-          leftSlot: <Icon icon="cake" />,
-          rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => openUrl(`https://yaak.app/changelog/${appInfo.version}`),
-        },
-      ]}
-    >
-      <IconButton
-        size="sm"
-        title="Main Menu"
-        icon="settings"
-        iconColor="secondary"
-        className="pointer-events-auto"
-      />
-    </Dropdown>
-  );
-}

apps/yaak-client/components/SidebarActions.tsx

@@ -1,39 +0,0 @@
-import { HStack } from "@yaakapp-internal/ui";
-import { useMemo } from "react";
-import { useFloatingSidebarHidden } from "../hooks/useFloatingSidebarHidden";
-import { useSidebarHidden } from "../hooks/useSidebarHidden";
-import { CreateDropdown } from "./CreateDropdown";
-import { IconButton } from "./core/IconButton";
-
-interface Props {
-  floating?: boolean;
-}
-
-export function SidebarActions({ floating = false }: Props) {
-  const [sidebarHidden, setSidebarHidden] = useSidebarHidden();
-  const [floatingHidden, setFloatingHidden] = useFloatingSidebarHidden();
-
-  const hidden = floating ? floatingHidden : sidebarHidden;
-  const setHidden = useMemo(
-    () => (floating ? setFloatingHidden : setSidebarHidden),
-    [floating, setFloatingHidden, setSidebarHidden],
-  );
-
-  return (
-    <HStack className="h-full">
-      <IconButton
-        onClick={async () => {
-          await setHidden(!hidden);
-        }}
-        className="pointer-events-auto"
-        size="sm"
-        title="Toggle sidebar"
-        icon={hidden ? "left_panel_hidden" : "left_panel_visible"}
-        iconColor="secondary"
-      />
-      <CreateDropdown hotKeyAction="model.create">
-        <IconButton size="sm" icon="plus_circle" iconColor="secondary" title="Add Resource" />
-      </CreateDropdown>
-    </HStack>
-  );
-}

apps/yaak-client/components/WebsocketRequestLayout.tsx

@@ -1,49 +0,0 @@
-import type { WebsocketRequest } from "@yaakapp-internal/models";
-import classNames from "classnames";
-import { useAtomValue } from "jotai";
-import type { CSSProperties } from "react";
-
-import { SplitLayout } from "@yaakapp-internal/ui";
-import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
-import { workspaceLayoutAtom } from "../lib/atoms";
-import { WebsocketRequestPane } from "./WebsocketRequestPane";
-import { WebsocketResponsePane } from "./WebsocketResponsePane";
-
-interface Props {
-  activeRequest: WebsocketRequest;
-  style: CSSProperties;
-}
-
-export function WebsocketRequestLayout({ activeRequest, style }: Props) {
-  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
-  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
-  const wsId = activeWorkspace?.id ?? "n/a";
-  return (
-    <SplitLayout
-      storageKey={`websocket_layout::${wsId}`}
-      className="p-3 gap-1.5"
-      layout={workspaceLayout}
-      style={style}
-      firstSlot={({ orientation, style }) => (
-        <WebsocketRequestPane
-          style={style}
-          activeRequest={activeRequest}
-          fullHeight={orientation === "horizontal"}
-        />
-      )}
-      secondSlot={({ style }) => (
-        <div
-          style={style}
-          className={classNames(
-            "x-theme-responsePane",
-            "max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1",
-            "bg-surface rounded-md border border-border-subtle",
-            "shadow relative",
-          )}
-        >
-          <WebsocketResponsePane activeRequest={activeRequest} />
-        </div>
-      )}
-    />
-  );
-}

apps/yaak-client/components/WebsocketResponsePane.tsx

@@ -1,229 +0,0 @@
-import type { WebsocketEvent, WebsocketRequest } from "@yaakapp-internal/models";
-import { HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
-import { hexy } from "hexy";
-import { useAtomValue } from "jotai";
-import { useMemo, useState } from "react";
-import { useFormatText } from "../hooks/useFormatText";
-import {
-  activeWebsocketConnectionAtom,
-  activeWebsocketConnectionsAtom,
-  setPinnedWebsocketConnectionId,
-  useWebsocketEvents,
-} from "../hooks/usePinnedWebsocketConnection";
-import { useStateWithDeps } from "../hooks/useStateWithDeps";
-import { languageFromContentType } from "../lib/contentType";
-import { Button } from "./core/Button";
-import { Editor } from "./core/Editor/LazyEditor";
-import { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
-import { EventViewerRow } from "./core/EventViewerRow";
-import { HotkeyList } from "./core/HotkeyList";
-import { WebsocketStatusTag } from "./core/WebsocketStatusTag";
-import { EmptyStateText } from "./EmptyStateText";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { RecentWebsocketConnectionsDropdown } from "./RecentWebsocketConnectionsDropdown";
-
-interface Props {
-  activeRequest: WebsocketRequest;
-}
-
-export function WebsocketResponsePane({ activeRequest }: Props) {
-  const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
-  const [showingLarge, setShowingLarge] = useState<boolean>(false);
-  const [hexDumps, setHexDumps] = useState<Record<number, boolean>>({});
-
-  const activeConnection = useAtomValue(activeWebsocketConnectionAtom);
-  const connections = useAtomValue(activeWebsocketConnectionsAtom);
-  const events = useWebsocketEvents(activeConnection?.id ?? null);
-
-  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">
-      <HStack space={2}>
-        {activeConnection.state !== "closed" && (
-          <LoadingIcon size="sm" className="text-text-subtlest" />
-        )}
-        <WebsocketStatusTag connection={activeConnection} />
-        <span>&bull;</span>
-        <span>{events.length} Messages</span>
-      </HStack>
-      <HStack space={0.5} className="ml-auto">
-        <RecentWebsocketConnectionsDropdown
-          connections={connections}
-          activeConnection={activeConnection}
-          onPinnedConnectionId={setPinnedWebsocketConnectionId}
-        />
-      </HStack>
-    </HStack>
-  );
-
-  return (
-    <ErrorBoundary name="Websocket Events">
-      <EventViewer
-        events={events}
-        getEventKey={(event) => event.id}
-        error={activeConnection.error}
-        header={header}
-        splitLayoutStorageKey="websocket_events"
-        defaultRatio={0.4}
-        renderRow={({ event, isActive, onClick }) => (
-          <WebsocketEventRow event={event} isActive={isActive} onClick={onClick} />
-        )}
-        renderDetail={({ event, index, onClose }) => (
-          <WebsocketEventDetail
-            event={event}
-            hexDump={hexDumps[index] ?? event.messageType === "binary"}
-            setHexDump={(v) => setHexDumps({ ...hexDumps, [index]: v })}
-            showLarge={showLarge}
-            showingLarge={showingLarge}
-            setShowLarge={setShowLarge}
-            setShowingLarge={setShowingLarge}
-            onClose={onClose}
-          />
-        )}
-      />
-    </ErrorBoundary>
-  );
-}
-
-function WebsocketEventRow({
-  event,
-  isActive,
-  onClick,
-}: {
-  event: WebsocketEvent;
-  isActive: boolean;
-  onClick: () => void;
-}) {
-  const { message: messageBytes, isServer, messageType } = event;
-  const message = messageBytes
-    ? new TextDecoder("utf-8").decode(Uint8Array.from(messageBytes))
-    : "";
-
-  const iconColor =
-    messageType === "close" || messageType === "open" ? "secondary" : isServer ? "info" : "primary";
-
-  const icon =
-    messageType === "close" || messageType === "open"
-      ? "info"
-      : isServer
-        ? "arrow_big_down_dash"
-        : "arrow_big_up_dash";
-
-  const content =
-    messageType === "close" ? (
-      "Disconnected from server"
-    ) : messageType === "open" ? (
-      "Connected to server"
-    ) : message === "" ? (
-      <em className="italic text-text-subtlest">No content</em>
-    ) : (
-      <span className="text-xs">{message.slice(0, 1000)}</span>
-    );
-
-  return (
-    <EventViewerRow
-      isActive={isActive}
-      onClick={onClick}
-      icon={<Icon color={iconColor} icon={icon} />}
-      content={content}
-      timestamp={event.createdAt}
-    />
-  );
-}
-
-function WebsocketEventDetail({
-  event,
-  hexDump,
-  setHexDump,
-  showLarge,
-  showingLarge,
-  setShowLarge,
-  setShowingLarge,
-  onClose,
-}: {
-  event: WebsocketEvent;
-  hexDump: boolean;
-  setHexDump: (v: boolean) => void;
-  showLarge: boolean;
-  showingLarge: boolean;
-  setShowLarge: (v: boolean) => void;
-  setShowingLarge: (v: boolean) => void;
-  onClose: () => void;
-}) {
-  const message = useMemo(() => {
-    if (hexDump) {
-      return event.message ? hexy(event.message) : "";
-    }
-    return event.message ? new TextDecoder("utf-8").decode(Uint8Array.from(event.message)) : "";
-  }, [event.message, hexDump]);
-
-  const language = languageFromContentType(null, message);
-  const formattedMessage = useFormatText({ language, text: message, pretty: true });
-
-  const title =
-    event.messageType === "close"
-      ? "Connection Closed"
-      : event.messageType === "open"
-        ? "Connection Open"
-        : `Message ${event.isServer ? "Received" : "Sent"}`;
-
-  const actions: EventDetailAction[] =
-    message !== ""
-      ? [
-          {
-            key: "toggle-hexdump",
-            label: hexDump ? "Show Message" : "Show Hexdump",
-            onClick: () => setHexDump(!hexDump),
-          },
-        ]
-      : [];
-
-  return (
-    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
-      <EventDetailHeader
-        title={title}
-        timestamp={event.createdAt}
-        actions={actions}
-        copyText={formattedMessage || undefined}
-        onClose={onClose}
-      />
-      {!showLarge && event.message.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>
-      ) : event.message.length === 0 ? (
-        <EmptyStateText>No Content</EmptyStateText>
-      ) : (
-        <Editor
-          language={language}
-          defaultValue={formattedMessage ?? ""}
-          wrapLines={false}
-          readOnly={true}
-          stateKey={null}
-        />
-      )}
-    </div>
-  );
-}

apps/yaak-client/components/Workspace.tsx

@@ -1,221 +0,0 @@
-import { type } from "@tauri-apps/plugin-os";
-import { settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HeaderSize, HStack, SidebarLayout } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { useAtomValue } from "jotai";
-import * as m from "motion/react-m";
-import { useMemo, useState } from "react";
-import {
-  useEnsureActiveCookieJar,
-  useSubscribeActiveCookieJarId,
-} from "../hooks/useActiveCookieJar";
-import {
-  activeEnvironmentAtom,
-  useSubscribeActiveEnvironmentId,
-} from "../hooks/useActiveEnvironment";
-import { activeFolderAtom } from "../hooks/useActiveFolder";
-import { useSubscribeActiveFolderId } from "../hooks/useActiveFolderId";
-import { activeRequestAtom } from "../hooks/useActiveRequest";
-import { useSubscribeActiveRequestId } from "../hooks/useActiveRequestId";
-import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
-import { useFloatingSidebarHidden } from "../hooks/useFloatingSidebarHidden";
-import { useHotKey } from "../hooks/useHotKey";
-import { useSubscribeRecentCookieJars } from "../hooks/useRecentCookieJars";
-import { useSubscribeRecentEnvironments } from "../hooks/useRecentEnvironments";
-import { useSubscribeRecentRequests } from "../hooks/useRecentRequests";
-import { useSubscribeRecentWorkspaces } from "../hooks/useRecentWorkspaces";
-import { useSidebarHidden } from "../hooks/useSidebarHidden";
-import { useSidebarWidth } from "../hooks/useSidebarWidth";
-import { useSyncWorkspaceRequestTitle } from "../hooks/useSyncWorkspaceRequestTitle";
-import { duplicateRequestOrFolderAndNavigate } from "../lib/duplicateRequestOrFolderAndNavigate";
-import { importData } from "../lib/importData";
-import { jotaiStore } from "../lib/jotai";
-import { CreateDropdown } from "./CreateDropdown";
-import { Button } from "./core/Button";
-import { HotkeyList } from "./core/HotkeyList";
-import { FeedbackLink } from "./core/Link";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { FolderLayout } from "./FolderLayout";
-import { GrpcConnectionLayout } from "./GrpcConnectionLayout";
-import { HttpRequestLayout } from "./HttpRequestLayout";
-import Sidebar from "./Sidebar";
-import { SidebarActions } from "./SidebarActions";
-import { WebsocketRequestLayout } from "./WebsocketRequestLayout";
-import { WorkspaceHeader } from "./WorkspaceHeader";
-
-const body = { gridArea: "body" };
-
-export function Workspace() {
-  // First, subscribe to some things applicable to workspaces
-  useGlobalWorkspaceHooks();
-
-  const workspaces = useAtomValue(workspacesAtom);
-  const settings = useAtomValue(settingsAtom);
-  const osType = type();
-  const [width, setWidth] = useSidebarWidth();
-  const [sidebarHidden, setSidebarHidden] = useSidebarHidden();
-  const [floatingSidebarHidden, setFloatingSidebarHidden] = useFloatingSidebarHidden();
-  const activeEnvironment = useAtomValue(activeEnvironmentAtom);
-  const [floating, setFloating] = useState(false);
-
-  const environmentBgStyle = useMemo(() => {
-    if (activeEnvironment?.color == null) return undefined;
-    const background = `linear-gradient(to right, ${activeEnvironment.color} 15%, transparent 40%)`;
-    return { background };
-  }, [activeEnvironment?.color]);
-
-  // We're loading still
-  if (workspaces.length === 0) {
-    return null;
-  }
-
-  const header = (
-    <HeaderSize
-      data-tauri-drag-region
-      size="lg"
-      className="relative x-theme-appHeader bg-surface"
-      osType={osType}
-      hideWindowControls={settings.hideWindowControls}
-      useNativeTitlebar={settings.useNativeTitlebar}
-      interfaceScale={settings.interfaceScale}
-    >
-      <div className="absolute inset-0 pointer-events-none">
-        <div style={environmentBgStyle} className="absolute inset-0 opacity-[0.07]" />
-        <div
-          style={environmentBgStyle}
-          className="absolute left-0 right-0 -bottom-[1px] h-[1px] opacity-20"
-        />
-      </div>
-      <WorkspaceHeader className="pointer-events-none" floatingSidebar={floating} />
-    </HeaderSize>
-  );
-
-  const workspaceBody = (
-    <ErrorBoundary name="Workspace Body">
-      <WorkspaceBody />
-    </ErrorBoundary>
-  );
-
-  const sidebarContent = floating ? (
-    <div
-      className={classNames(
-        "x-theme-sidebar",
-        "h-full bg-surface border-r border-border-subtle",
-        "grid grid-rows-[auto_1fr]",
-      )}
-    >
-      <HeaderSize
-        hideControls
-        size="lg"
-        className="border-transparent flex items-center"
-        osType={osType}
-        hideWindowControls={settings.hideWindowControls}
-        useNativeTitlebar={settings.useNativeTitlebar}
-        interfaceScale={settings.interfaceScale}
-      >
-        <SidebarActions floating />
-      </HeaderSize>
-      <ErrorBoundary name="Sidebar (Floating)">
-        <Sidebar />
-      </ErrorBoundary>
-    </div>
-  ) : (
-    <div className="x-theme-sidebar overflow-hidden bg-surface h-full">
-      <ErrorBoundary name="Sidebar">
-        <Sidebar className="border-r border-border-subtle" />
-      </ErrorBoundary>
-    </div>
-  );
-
-  return (
-    <div className="grid w-full h-full grid-rows-[auto_1fr]">
-      {header}
-      <SidebarLayout
-        width={width ?? 250}
-        onWidthChange={setWidth}
-        hidden={sidebarHidden ?? false}
-        onHiddenChange={(hidden) => setSidebarHidden(hidden)}
-        floatingHidden={floatingSidebarHidden ?? true}
-        onFloatingHiddenChange={(hidden) => setFloatingSidebarHidden(hidden)}
-        onFloatingChange={setFloating}
-        sidebar={sidebarContent}
-      >
-        {workspaceBody}
-      </SidebarLayout>
-    </div>
-  );
-}
-
-function WorkspaceBody() {
-  const activeRequest = useAtomValue(activeRequestAtom);
-  const activeFolder = useAtomValue(activeFolderAtom);
-  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
-
-  if (activeWorkspace == null) {
-    return (
-      <m.div
-        className="m-auto"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        // Delay the entering because the workspaces might load after a slight delay
-        transition={{ delay: 0.5 }}
-      >
-        <Banner color="warning" className="max-w-[30rem]">
-          The active workspace was not found. Select a workspace from the header menu or report this
-          bug to <FeedbackLink />
-        </Banner>
-      </m.div>
-    );
-  }
-
-  if (activeRequest?.model === "grpc_request") {
-    return <GrpcConnectionLayout style={body} />;
-  }
-  if (activeRequest?.model === "websocket_request") {
-    return <WebsocketRequestLayout style={body} activeRequest={activeRequest} />;
-  }
-  if (activeRequest?.model === "http_request") {
-    return <HttpRequestLayout activeRequest={activeRequest} style={body} />;
-  }
-  if (activeFolder != null) {
-    return <FolderLayout folder={activeFolder} style={body} />;
-  }
-
-  return (
-    <HotkeyList
-      hotkeys={["model.create", "sidebar.focus", "settings.show"]}
-      bottomSlot={
-        <HStack space={1} justifyContent="center" className="mt-3">
-          <Button variant="border" size="sm" onClick={() => importData.mutate()}>
-            Import
-          </Button>
-          <CreateDropdown hideFolder>
-            <Button variant="border" forDropdown size="sm">
-              New Request
-            </Button>
-          </CreateDropdown>
-        </HStack>
-      }
-    />
-  );
-}
-
-function useGlobalWorkspaceHooks() {
-  useEnsureActiveCookieJar();
-
-  useSubscribeActiveRequestId();
-  useSubscribeActiveFolderId();
-  useSubscribeActiveEnvironmentId();
-  useSubscribeActiveCookieJarId();
-
-  useSubscribeRecentRequests();
-  useSubscribeRecentWorkspaces();
-  useSubscribeRecentEnvironments();
-  useSubscribeRecentCookieJars();
-
-  useSyncWorkspaceRequestTitle();
-
-  useHotKey("model.duplicate", () =>
-    duplicateRequestOrFolderAndNavigate(jotaiStore.get(activeRequestAtom)),
-  );
-}

apps/yaak-client/components/WorkspaceActionsDropdown.tsx

@@ -1,188 +0,0 @@
-import { open } from "@tauri-apps/plugin-dialog";
-import { revealItemInDir } from "@tauri-apps/plugin-opener";
-import { getModel, settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
-import classNames from "classnames";
-import { useAtomValue } from "jotai";
-import { memo, useCallback, useMemo } from "react";
-import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
-import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
-import { switchWorkspace } from "../commands/switchWorkspace";
-import {
-  activeWorkspaceAtom,
-  activeWorkspaceIdAtom,
-  activeWorkspaceMetaAtom,
-} from "../hooks/useActiveWorkspace";
-import { useCreateWorkspace } from "../hooks/useCreateWorkspace";
-import { useDeleteSendHistory } from "../hooks/useDeleteSendHistory";
-import { useWorkspaceActions } from "../hooks/useWorkspaceActions";
-import { showDialog } from "../lib/dialog";
-import { jotaiStore } from "../lib/jotai";
-import { revealInFinderText } from "../lib/reveal";
-import { CloneGitRepositoryDialog } from "./CloneGitRepositoryDialog";
-import type { ButtonProps } from "./core/Button";
-import { Button } from "./core/Button";
-import type { DropdownItem } from "./core/Dropdown";
-import { Icon } from "@yaakapp-internal/ui";
-import type { RadioDropdownItem } from "./core/RadioDropdown";
-import { RadioDropdown } from "./core/RadioDropdown";
-import { SwitchWorkspaceDialog } from "./SwitchWorkspaceDialog";
-
-type Props = Pick<ButtonProps, "className" | "justify" | "forDropdown" | "leftSlot">;
-
-export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
-  className,
-  ...buttonProps
-}: Props) {
-  const workspaces = useAtomValue(workspacesAtom);
-  const workspace = useAtomValue(activeWorkspaceAtom);
-  const createWorkspace = useCreateWorkspace();
-  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
-  const { mutate: deleteSendHistory } = useDeleteSendHistory();
-  const workspaceActions = useWorkspaceActions();
-
-  const openCloneGitRepositoryDialog = useCallback(() => {
-    showDialog({
-      id: "clone-git-repository",
-      size: "md",
-      title: "Clone Git Repository",
-      render: ({ hide }) => <CloneGitRepositoryDialog hide={hide} />,
-    });
-  }, []);
-
-  const { workspaceItems, itemsAfter, itemsBefore } = useMemo<{
-    workspaceItems: RadioDropdownItem[];
-    itemsAfter: DropdownItem[];
-    itemsBefore: DropdownItem[];
-  }>(() => {
-    const workspaceItems: RadioDropdownItem[] = workspaces.map((w) => ({
-      key: w.id,
-      label: w.name,
-      value: w.id,
-      leftSlot: w.id === workspace?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
-    }));
-
-    const itemsBefore: DropdownItem[] = [
-      {
-        label: "New Workspace",
-        leftSlot: <Icon icon="plus" />,
-        submenu: [
-          {
-            label: "Create Empty",
-            leftSlot: <Icon icon="plus_circle" />,
-            onSelect: createWorkspace,
-          },
-          {
-            label: "Open Folder",
-            leftSlot: <Icon icon="folder_open" />,
-            onSelect: async () => {
-              const dir = await open({
-                title: "Select Workspace Directory",
-                directory: true,
-                multiple: false,
-              });
-
-              if (dir == null) return;
-              openWorkspaceFromSyncDir.mutate(dir);
-            },
-          },
-          {
-            label: "Clone Git Repository",
-            leftSlot: <Icon icon="hard_drive_download" />,
-            onSelect: openCloneGitRepositoryDialog,
-          },
-        ],
-      },
-    ];
-    const itemsAfter: DropdownItem[] = [
-      ...workspaceActions.map((a) => ({
-        label: a.label,
-        leftSlot: <Icon icon={a.icon ?? "empty"} />,
-        onSelect: async () => {
-          if (workspace != null) await a.call(workspace);
-        },
-      })),
-      ...(workspaceActions.length > 0 ? [{ type: "separator" as const }] : []),
-      {
-        label: "Workspace Settings",
-        leftSlot: <Icon icon="settings" />,
-        hotKeyAction: "workspace_settings.show",
-        onSelect: openWorkspaceSettings,
-      },
-      {
-        label: revealInFinderText,
-        hidden: workspaceMeta == null || workspaceMeta.settingSyncDir == null,
-        leftSlot: <Icon icon="folder_symlink" />,
-        onSelect: async () => {
-          if (workspaceMeta?.settingSyncDir == null) return;
-          await revealItemInDir(workspaceMeta.settingSyncDir);
-        },
-      },
-      {
-        label: "Clear Send History",
-        color: "warning",
-        leftSlot: <Icon icon="history" />,
-        onSelect: deleteSendHistory,
-      },
-    ];
-
-    return { workspaceItems, itemsAfter, itemsBefore };
-  }, [
-    workspaces,
-    workspaceMeta,
-    deleteSendHistory,
-    createWorkspace,
-    openCloneGitRepositoryDialog,
-    workspace?.id,
-    workspace,
-    workspaceActions.map,
-    workspaceActions.length,
-  ]);
-
-  const handleSwitchWorkspace = useCallback(async (workspaceId: string | null) => {
-    if (workspaceId == null) return;
-
-    const settings = jotaiStore.get(settingsAtom);
-    const activeWorkspaceId = jotaiStore.get(activeWorkspaceIdAtom);
-    if (workspaceId === activeWorkspaceId) {
-      // Always open a new window if the selected one is already active
-      switchWorkspace.mutate({ workspaceId, inNewWindow: true });
-      return;
-    }
-    if (typeof settings.openWorkspaceNewWindow === "boolean") {
-      switchWorkspace.mutate({ workspaceId, inNewWindow: settings.openWorkspaceNewWindow });
-      return;
-    }
-
-    const workspace = getModel("workspace", workspaceId);
-    if (workspace == null) return;
-
-    showDialog({
-      id: "switch-workspace",
-      size: "sm",
-      title: "Switch Workspace",
-      render: ({ hide }) => <SwitchWorkspaceDialog workspace={workspace} hide={hide} />,
-    });
-  }, []);
-
-  return (
-    <RadioDropdown
-      items={workspaceItems}
-      itemsAfter={itemsAfter}
-      itemsBefore={itemsBefore}
-      onChange={handleSwitchWorkspace}
-      value={workspace?.id ?? null}
-    >
-      <Button
-        size="sm"
-        className={classNames(
-          className,
-          "text !px-2 truncate",
-          workspace === null && "italic opacity-disabled",
-        )}
-        {...buttonProps}
-      >
-        {workspace?.name ?? "Workspace"}
-      </Button>
-    </RadioDropdown>
-  );
-});

apps/yaak-client/components/WorkspaceHeader.tsx

@@ -1,94 +0,0 @@
-import { HStack, Icon } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { useAtom, useAtomValue } from "jotai";
-import { memo } from "react";
-import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
-import { useToggleCommandPalette } from "../hooks/useToggleCommandPalette";
-import { workspaceLayoutAtom } from "../lib/atoms";
-import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
-import { CookieDropdown } from "./CookieDropdown";
-import { IconButton } from "./core/IconButton";
-import { PillButton } from "./core/PillButton";
-import { EnvironmentActionsDropdown } from "./EnvironmentActionsDropdown";
-import { ImportCurlButton } from "./ImportCurlButton";
-import { LicenseBadge } from "./LicenseBadge";
-import { RecentRequestsDropdown } from "./RecentRequestsDropdown";
-import { SettingsDropdown } from "./SettingsDropdown";
-import { SidebarActions } from "./SidebarActions";
-import { WorkspaceActionsDropdown } from "./WorkspaceActionsDropdown";
-
-interface Props {
-  className?: string;
-  floatingSidebar?: boolean;
-}
-
-export const WorkspaceHeader = memo(function WorkspaceHeader({
-  className,
-  floatingSidebar,
-}: Props) {
-  const togglePalette = useToggleCommandPalette();
-  const [workspaceLayout, setWorkspaceLayout] = useAtom(workspaceLayoutAtom);
-  const workspace = useAtomValue(activeWorkspaceAtom);
-  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
-  const showEncryptionSetup =
-    workspace != null &&
-    workspaceMeta != null &&
-    workspace.encryptionKeyChallenge != null &&
-    workspaceMeta.encryptionKey == null;
-
-  return (
-    <div
-      className={classNames(
-        className,
-        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center w-full h-full",
-      )}
-    >
-      <HStack space={0.5} className={classNames("flex-1 pointer-events-none")}>
-        <SidebarActions floating={floatingSidebar} />
-        <CookieDropdown />
-        <HStack className="min-w-0">
-          <WorkspaceActionsDropdown />
-          <Icon icon="chevron_right" color="secondary" />
-          <EnvironmentActionsDropdown className="w-auto pointer-events-auto" />
-        </HStack>
-      </HStack>
-      <div className="pointer-events-none w-full max-w-[30vw] mx-auto flex justify-center">
-        <RecentRequestsDropdown />
-      </div>
-      <div className="flex-1 flex gap-1 items-center h-full justify-end pointer-events-none pr-1">
-        <ImportCurlButton />
-        {showEncryptionSetup ? (
-          <PillButton color="danger" onClick={setupOrConfigureEncryption}>
-            Enter Encryption Key
-          </PillButton>
-        ) : (
-          <LicenseBadge />
-        )}
-        <IconButton
-          icon={
-            workspaceLayout === "responsive"
-              ? "magic_wand"
-              : workspaceLayout === "horizontal"
-                ? "columns_2"
-                : "rows_2"
-          }
-          title={`Change to ${workspaceLayout === "horizontal" ? "vertical" : "horizontal"} layout`}
-          size="sm"
-          iconColor="secondary"
-          onClick={() =>
-            setWorkspaceLayout((prev) => (prev === "horizontal" ? "vertical" : "horizontal"))
-          }
-        />
-        <IconButton
-          icon="search"
-          title="Search or execute a command"
-          size="sm"
-          hotkeyAction="command_palette.toggle"
-          iconColor="secondary"
-          onClick={togglePalette}
-        />
-        <SettingsDropdown />
-      </div>
-    </div>
-  );
-});

apps/yaak-client/components/core/Button.tsx

@@ -1,34 +0,0 @@
-import { Button as BaseButton, type ButtonProps as BaseButtonProps } from "@yaakapp-internal/ui";
-import { forwardRef, useImperativeHandle, useRef } from "react";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { useFormattedHotkey, useHotKey } from "../../hooks/useHotKey";
-
-export type ButtonProps = BaseButtonProps & {
-  hotkeyAction?: HotkeyAction;
-  hotkeyLabelOnly?: boolean;
-  hotkeyPriority?: number;
-};
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { hotkeyAction, hotkeyPriority, hotkeyLabelOnly, title, ...props }: ButtonProps,
-  ref,
-) {
-  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join("");
-  const fullTitle = hotkeyTrigger ? `${title ?? ""} ${hotkeyTrigger}`.trim() : title;
-
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    ref,
-    () => buttonRef.current,
-  );
-
-  useHotKey(
-    hotkeyAction ?? null,
-    () => {
-      buttonRef.current?.click();
-    },
-    { priority: hotkeyPriority, enable: !hotkeyLabelOnly },
-  );
-
-  return <BaseButton ref={buttonRef} title={fullTitle} {...props} />;
-});

apps/yaak-client/components/core/Dropdown.tsx

@@ -1,974 +0,0 @@
-import { HStack, Icon, type IconProps, LoadingIcon, Overlay, VStack } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { atom } from "jotai";
-import * as m from "motion/react-m";
-import type {
-  CSSProperties,
-  HTMLAttributes,
-  MouseEvent,
-  ReactElement,
-  FocusEvent as ReactFocusEvent,
-  KeyboardEvent as ReactKeyboardEvent,
-  ReactNode,
-  RefObject,
-  SetStateAction,
-} from "react";
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useKey, useWindowSize } from "react-use";
-import { useClickOutside } from "../../hooks/useClickOutside";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { useHotKey } from "../../hooks/useHotKey";
-import { useStateWithDeps } from "../../hooks/useStateWithDeps";
-import { generateId } from "../../lib/generateId";
-import { getNodeText } from "../../lib/getNodeText";
-import { jotaiStore } from "../../lib/jotai";
-import { fireAndForget } from "../../lib/fireAndForget";
-import { ErrorBoundary } from "../ErrorBoundary";
-import { Button } from "./Button";
-import { Hotkey } from "./Hotkey";
-import { Separator } from "./Separator";
-
-export type DropdownItemSeparator = {
-  type: "separator";
-  label?: ReactNode;
-  hidden?: boolean;
-};
-
-export type DropdownItemContent = {
-  type: "content";
-  label?: ReactNode;
-  hidden?: boolean;
-};
-
-export type DropdownItemDefault = {
-  type?: "default";
-  label: ReactNode;
-  hotKeyAction?: HotkeyAction;
-  hotKeyLabelOnly?: boolean;
-  color?: "default" | "primary" | "danger" | "info" | "warning" | "notice" | "success";
-  disabled?: boolean;
-  hidden?: boolean;
-  leftSlot?: ReactNode;
-  rightSlot?: ReactNode;
-  waitForOnSelect?: boolean;
-  keepOpenOnSelect?: boolean;
-  onSelect?: () => void | Promise<void>;
-  submenu?: DropdownItem[];
-  /** If true, submenu opens on click instead of hover */
-  submenuOpenOnClick?: boolean;
-  icon?: IconProps["icon"];
-};
-
-export type DropdownItem = DropdownItemDefault | DropdownItemSeparator | DropdownItemContent;
-
-export interface DropdownProps {
-  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
-  items: DropdownItem[];
-  fullWidth?: boolean;
-  hotKeyAction?: HotkeyAction;
-  onOpen?: () => void;
-}
-
-export interface DropdownRef {
-  isOpen: boolean;
-  open: (index?: number) => void;
-  toggle: () => void;
-  close?: () => void;
-  next?: (incrBy?: number) => void;
-  prev?: (incrBy?: number) => void;
-  select?: () => void;
-}
-
-// Every dropdown gets a unique ID and we use this global atom to ensure
-// only one dropdown can be open at a time.
-// TODO: Also make ContextMenu use this
-const openAtom = atom<string | null>(null);
-
-export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown(
-  { children, items, hotKeyAction, fullWidth, onOpen }: DropdownProps,
-  ref,
-) {
-  const id = useRef(generateId());
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    return jotaiStore.sub(openAtom, () => {
-      const globalOpenId = jotaiStore.get(openAtom);
-      const newIsOpen = globalOpenId === id.current;
-      if (newIsOpen !== isOpen) {
-        setIsOpen(newIsOpen);
-      }
-    });
-  }, [isOpen]);
-
-  // const [isOpen, _setIsOpen] = useState<boolean>(false);
-  const [defaultSelectedIndex, setDefaultSelectedIndex] = useState<number | null>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const menuRef = useRef<Omit<DropdownRef, "open">>(null);
-
-  const handleSetIsOpen = useCallback(
-    (o: SetStateAction<boolean>) => {
-      jotaiStore.set(openAtom, (prevId) => {
-        const prevIsOpen = prevId === id.current;
-        const newIsOpen = typeof o === "function" ? o(prevIsOpen) : o;
-        // Persist background color of button until we close the dropdown
-        if (newIsOpen) {
-          onOpen?.();
-          if (buttonRef.current) {
-            buttonRef.current.style.backgroundColor = window
-              .getComputedStyle(buttonRef.current)
-              .getPropertyValue("background-color");
-          }
-        }
-        return newIsOpen ? id.current : null; // Set global atom to current ID to signify open state
-      });
-    },
-    [onOpen],
-  );
-
-  // Because a different dropdown can cause ours to close, a useEffect([isOpen]) is the only method
-  // we have of detecting the dropdown closed, to do cleanup.
-  useEffect(() => {
-    if (!isOpen) {
-      // Clear persisted BG
-      if (buttonRef.current) buttonRef.current.style.backgroundColor = "";
-      // Set to different value when opened and closed to force it to update. This is to force
-      // <Menu/> to reset its selected-index state, which it does when this prop changes
-      setDefaultSelectedIndex(null);
-    }
-  }, [isOpen]);
-
-  // Pull into variable so linter forces us to add it as a hook dep to useImperativeHandle. If we don't,
-  // the ref will not update when menuRef updates, causing stale callback state to be used.
-  const menuRefCurrent = menuRef.current;
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      ...menuRefCurrent,
-      isOpen: isOpen,
-      toggle() {
-        if (!isOpen) this.open();
-        else this.close();
-      },
-      open(index?: number) {
-        handleSetIsOpen(true);
-        setDefaultSelectedIndex(index ?? -1);
-      },
-      close() {
-        handleSetIsOpen(false);
-      },
-    }),
-    [isOpen, handleSetIsOpen, menuRefCurrent],
-  );
-
-  useHotKey(hotKeyAction ?? null, () => {
-    setDefaultSelectedIndex(0);
-    handleSetIsOpen(true);
-  });
-
-  const child = useMemo(() => {
-    const existingChild = Children.only(children);
-    const originalOnClick = existingChild.props?.onClick;
-    const props: HTMLAttributes<HTMLButtonElement> & { ref: RefObject<HTMLButtonElement | null> } =
-      {
-        ...existingChild.props,
-        ref: buttonRef,
-        "aria-haspopup": "true",
-        onClick: (e: MouseEvent<HTMLButtonElement>) => {
-          // Call original onClick first if it exists
-          originalOnClick?.(e);
-
-          // Only toggle dropdown if event wasn't prevented
-          if (!e.defaultPrevented) {
-            e.preventDefault();
-            e.stopPropagation();
-            handleSetIsOpen((o) => !o); // Toggle dropdown
-          }
-        },
-      };
-    return cloneElement(existingChild, props);
-  }, [children, handleSetIsOpen]);
-
-  useEffect(() => {
-    buttonRef.current?.setAttribute("aria-expanded", isOpen.toString());
-  }, [isOpen]);
-
-  const windowSize = useWindowSize();
-  const triggerRect = useMemo(() => {
-    if (!windowSize) return null; // No-op to TS happy with this dep
-    if (!isOpen) return null;
-    return buttonRef.current?.getBoundingClientRect();
-  }, [isOpen, windowSize]);
-
-  return (
-    <>
-      {child}
-      <ErrorBoundary name={"Dropdown Menu"}>
-        <Menu
-          ref={menuRef}
-          showTriangle
-          triggerRef={buttonRef}
-          fullWidth={fullWidth}
-          defaultSelectedIndex={defaultSelectedIndex}
-          items={items}
-          triggerShape={triggerRect ?? null}
-          onClose={() => handleSetIsOpen(false)}
-          isOpen={isOpen}
-        />
-      </ErrorBoundary>
-    </>
-  );
-});
-
-export interface ContextMenuProps {
-  triggerPosition: { x: number; y: number } | null;
-  className?: string;
-  items: DropdownProps["items"];
-  onClose: () => void;
-}
-
-export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function ContextMenu(
-  { triggerPosition, className, items, onClose },
-  ref,
-) {
-  const triggerShape = useMemo(
-    () => ({
-      top: triggerPosition?.y ?? 0,
-      bottom: triggerPosition?.y ?? 0,
-      left: triggerPosition?.x ?? 0,
-      right: triggerPosition?.x ?? 0,
-    }),
-    [triggerPosition],
-  );
-
-  if (triggerPosition == null) return null;
-
-  return (
-    <Menu
-      isOpen={true} // Always open because we return null if not
-      className={className}
-      defaultSelectedIndex={null}
-      ref={ref}
-      items={items}
-      onClose={onClose}
-      triggerShape={triggerShape}
-    />
-  );
-});
-
-interface MenuProps {
-  className?: string;
-  defaultSelectedIndex: number | null;
-  triggerShape: Pick<DOMRect, "top" | "bottom" | "left" | "right"> | null;
-  onClose: () => void;
-  onCloseAll?: () => void;
-  showTriangle?: boolean;
-  fullWidth?: boolean;
-  isOpen: boolean;
-  items: DropdownItem[];
-  triggerRef?: RefObject<HTMLButtonElement | null>;
-  isSubmenu?: boolean;
-}
-
-const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items">, MenuProps>(
-  (
-    {
-      className,
-      isOpen,
-      items,
-      fullWidth,
-      onClose,
-      onCloseAll,
-      triggerShape,
-      defaultSelectedIndex,
-      showTriangle,
-      triggerRef,
-      isSubmenu,
-    }: MenuProps,
-    ref,
-  ) => {
-    const [selectedIndex, setSelectedIndex] = useStateWithDeps<number | null>(
-      defaultSelectedIndex ?? -1,
-      [defaultSelectedIndex],
-    );
-
-    const [filter, setFilter] = useState<string>("");
-
-    // Clear filter when menu opens
-    useEffect(() => {
-      if (isOpen) {
-        setFilter("");
-      }
-    }, [isOpen]);
-
-    const [activeSubmenu, setActiveSubmenu] = useState<{
-      item: DropdownItemDefault;
-      parent: HTMLButtonElement;
-      viaKeyboard?: boolean;
-    } | null>(null);
-
-    const mousePosition = useRef({ x: 0, y: 0 });
-    const submenuTimeoutRef = useRef<number | null>(null);
-    const submenuRef = useRef<HTMLDivElement>(null);
-
-    // HACK: Use a ref to track selectedIndex so our closure functions (eg. select()) can
-    //  have access to the latest value.
-    const selectedIndexRef = useRef(selectedIndex);
-    useEffect(() => {
-      selectedIndexRef.current = selectedIndex;
-    }, [selectedIndex]);
-
-    const handleClose = useCallback(() => {
-      onClose();
-      setActiveSubmenu(null);
-    }, [onClose]);
-
-    // Close the entire menu hierarchy (used when selecting an item)
-    const handleCloseAll = useCallback(() => {
-      if (onCloseAll) {
-        onCloseAll();
-      } else {
-        handleClose();
-      }
-    }, [onCloseAll, handleClose]);
-
-    // Handle type-ahead filtering (only for the deepest open menu)
-    const handleMenuKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
-      // Skip if this menu has a submenu open - let the submenu handle typing
-      if (activeSubmenu) return;
-
-      const isCharacter = e.key.length === 1;
-      const isSpecial = e.ctrlKey || e.metaKey || e.altKey;
-      if (isCharacter && !isSpecial) {
-        e.preventDefault();
-        setFilter((f) => f + e.key);
-        setSelectedIndex(0);
-      } else if (e.key === "Backspace" && !isSpecial) {
-        e.preventDefault();
-        setFilter((f) => f.slice(0, -1));
-      }
-    };
-
-    useKey(
-      "Escape",
-      () => {
-        if (!isOpen) return;
-        if (activeSubmenu) setActiveSubmenu(null);
-        else if (filter !== "") setFilter("");
-        else handleClose();
-      },
-      {},
-      [isOpen, filter, setFilter, handleClose, activeSubmenu],
-    );
-
-    const handlePrev = useCallback(
-      (incrBy = 1) => {
-        setSelectedIndex((currIndex) => {
-          let nextIndex = (currIndex ?? 0) - incrBy;
-          const maxTries = items.length;
-          for (let i = 0; i < maxTries; i++) {
-            if (items[nextIndex]?.hidden || items[nextIndex]?.type === "separator") {
-              nextIndex--;
-            } else if (nextIndex < 0) {
-              nextIndex = items.length - 1;
-            } else {
-              break;
-            }
-          }
-          return nextIndex;
-        });
-      },
-      [items, setSelectedIndex],
-    );
-
-    const handleNext = useCallback(
-      (incrBy = 1) => {
-        setSelectedIndex((currIndex) => {
-          let nextIndex = (currIndex ?? -1) + incrBy;
-          const maxTries = items.length;
-          for (let i = 0; i < maxTries; i++) {
-            if (items[nextIndex]?.hidden || items[nextIndex]?.type === "separator") {
-              nextIndex++;
-            } else if (nextIndex >= items.length) {
-              nextIndex = 0;
-            } else {
-              break;
-            }
-          }
-          return nextIndex;
-        });
-      },
-      [items, setSelectedIndex],
-    );
-
-    // Ensure selection is on a valid item (not hidden/separator/content)
-    useEffect(() => {
-      const item = items[selectedIndex ?? -1];
-      if (item?.hidden || item?.type === "separator" || item?.type === "content") {
-        handleNext();
-      }
-    }, [selectedIndex, items, handleNext]);
-
-    useKey(
-      "ArrowUp",
-      (e) => {
-        if (!isOpen || activeSubmenu) return;
-        e.preventDefault();
-        handlePrev();
-      },
-      {},
-      [isOpen, activeSubmenu],
-    );
-
-    useKey(
-      "ArrowDown",
-      (e) => {
-        if (!isOpen || activeSubmenu) return;
-        e.preventDefault();
-        handleNext();
-      },
-      {},
-      [isOpen, activeSubmenu],
-    );
-
-    useKey(
-      "ArrowLeft",
-      (e) => {
-        if (!isOpen) return;
-        // Only handle if this menu doesn't have an open submenu
-        // (let the deepest submenu handle the key first)
-        if (activeSubmenu) return;
-        // If this is a submenu, ArrowLeft closes it and returns to parent
-        if (isSubmenu) {
-          e.preventDefault();
-          onClose();
-        }
-      },
-      {},
-      [isOpen, isSubmenu, activeSubmenu, onClose],
-    );
-
-    const handleSelect = useCallback(
-      async (item: DropdownItem, parentEl?: HTMLButtonElement) => {
-        // Handle click-to-open submenu
-        if ("submenu" in item && item.submenu && item.submenuOpenOnClick && parentEl) {
-          setActiveSubmenu({ item, parent: parentEl });
-          return;
-        }
-
-        if (!("onSelect" in item) || !item.onSelect) return;
-        setSelectedIndex(null);
-
-        const promise = item.onSelect();
-        if (item.waitForOnSelect) {
-          try {
-            await promise;
-          } catch {
-            // Nothing
-          }
-        }
-
-        if (!item.keepOpenOnSelect) handleCloseAll();
-      },
-      [handleCloseAll, setSelectedIndex],
-    );
-
-    useImperativeHandle(ref, () => {
-      return {
-        close: handleClose,
-        prev: handlePrev,
-        next: handleNext,
-        select: async () => {
-          const item = items[selectedIndexRef.current ?? -1] ?? null;
-          if (!item) return;
-          await handleSelect(item);
-        },
-      };
-    }, [handleClose, handleNext, handlePrev, handleSelect, items]);
-
-    const styles = useMemo<{
-      container: CSSProperties;
-      menu: CSSProperties;
-      triangle: CSSProperties;
-      upsideDown: boolean;
-    }>(() => {
-      if (triggerShape == null) return { container: {}, triangle: {}, menu: {}, upsideDown: false };
-
-      if (isSubmenu) {
-        const parentRect = triggerShape;
-        const docRect = document.documentElement.getBoundingClientRect();
-        const spaceRight = docRect.width - parentRect.right;
-        const spaceBelow = docRect.height - parentRect.top;
-        const spaceAbove = parentRect.bottom;
-        const openLeft = spaceRight < 200; // Heuristic to open on left if not enough space on right
-        // Estimate submenu height (items * ~28px + padding), flip if not enough space below
-        const estimatedHeight = items.length * 28 + 20;
-        const openUpward = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
-
-        return {
-          upsideDown: openUpward,
-          container: {
-            top: openUpward ? undefined : parentRect.top,
-            bottom: openUpward ? docRect.height - parentRect.bottom : undefined,
-            left: openLeft ? undefined : parentRect.right,
-            right: openLeft ? docRect.width - parentRect.left : undefined,
-          },
-          menu: {
-            maxHeight: `${(openUpward ? spaceAbove : spaceBelow) - 20}px`,
-          },
-          triangle: {}, // No triangle for submenus
-        };
-      }
-
-      const menuMarginY = 5;
-      const docRect = document.documentElement.getBoundingClientRect();
-      const width = triggerShape.right - triggerShape.left;
-      const heightAbove = triggerShape.top;
-      const heightBelow = docRect.height - triggerShape.bottom;
-      const horizontalSpaceRemaining = docRect.width - triggerShape.left;
-      const top = triggerShape.bottom;
-      const onRight = horizontalSpaceRemaining < 300;
-      const upsideDown = heightBelow < heightAbove && heightBelow < items.length * 25 + 20 + 200;
-      const triggerWidth = triggerShape.right - triggerShape.left;
-      return {
-        upsideDown,
-        container: {
-          top: !upsideDown ? top + menuMarginY : undefined,
-          bottom: upsideDown
-            ? docRect.height - top - (triggerShape.top - triggerShape.bottom) + menuMarginY
-            : undefined,
-          right: onRight ? docRect.width - triggerShape.right : undefined,
-          left: !onRight ? triggerShape.left : undefined,
-          minWidth: fullWidth ? triggerWidth : undefined,
-          maxWidth: "40rem",
-        },
-        triangle: {
-          width: "0.4rem",
-          height: "0.4rem",
-          ...(onRight
-            ? { right: width / 2, marginRight: "-0.2rem" }
-            : { left: width / 2, marginLeft: "-0.2rem" }),
-          ...(upsideDown
-            ? { bottom: "-0.2rem", rotate: "225deg" }
-            : { top: "-0.2rem", rotate: "45deg" }),
-        },
-        menu: {
-          maxHeight: `${(upsideDown ? heightAbove : heightBelow) - 15}px`,
-        },
-      };
-    }, [fullWidth, items.length, triggerShape, isSubmenu]);
-
-    const filteredItems = useMemo(
-      () => items.filter((i) => getNodeText(i.label).toLowerCase().includes(filter.toLowerCase())),
-      [items, filter],
-    );
-
-    const handleFocus = useCallback(
-      (i: DropdownItem) => {
-        const index = filteredItems.indexOf(i) ?? null;
-        setSelectedIndex(index);
-      },
-      [filteredItems, setSelectedIndex],
-    );
-
-    useKey(
-      "ArrowRight",
-      (e) => {
-        if (!isOpen || activeSubmenu) return;
-        const item = filteredItems[selectedIndex ?? -1];
-        if (item?.type !== "separator" && item?.type !== "content" && item?.submenu) {
-          e.preventDefault();
-          const parent = document.activeElement as HTMLButtonElement;
-          if (parent) {
-            setActiveSubmenu({ item, parent, viaKeyboard: true });
-          }
-        }
-      },
-      {},
-      [isOpen, activeSubmenu, filteredItems, selectedIndex],
-    );
-
-    useKey(
-      "Enter",
-      (e) => {
-        if (!isOpen || activeSubmenu) return;
-        const item = filteredItems[selectedIndex ?? -1];
-        if (!item || item.type === "separator" || item.type === "content") return;
-        e.preventDefault();
-        if (item.submenu) {
-          const parent = document.activeElement as HTMLButtonElement;
-          if (parent) {
-            setActiveSubmenu({ item, parent, viaKeyboard: true });
-          }
-        } else if (item.onSelect) {
-          fireAndForget(handleSelect(item));
-        }
-      },
-      {},
-      [isOpen, activeSubmenu, filteredItems, selectedIndex, handleSelect],
-    );
-
-    const handleItemHover = useCallback(
-      (item: DropdownItemDefault, parent: HTMLButtonElement) => {
-        if (submenuTimeoutRef.current) {
-          clearTimeout(submenuTimeoutRef.current);
-        }
-
-        if (item.submenu && !item.submenuOpenOnClick) {
-          setActiveSubmenu({ item, parent });
-        } else if (activeSubmenu) {
-          submenuTimeoutRef.current = window.setTimeout(() => {
-            const submenuEl = submenuRef.current;
-            if (!submenuEl || !activeSubmenu) {
-              setActiveSubmenu(null);
-              return;
-            }
-
-            const { parent } = activeSubmenu;
-            const parentRect = parent.getBoundingClientRect();
-            const submenuRect = submenuEl.getBoundingClientRect();
-            const mouse = mousePosition.current;
-
-            if (
-              mouse.x >= submenuRect.left &&
-              mouse.x <= submenuRect.right &&
-              mouse.y >= submenuRect.top &&
-              mouse.y <= submenuRect.bottom
-            ) {
-              return;
-            }
-
-            const tolerance = 5;
-            const p1 = { x: parentRect.right, y: parentRect.top - tolerance };
-            const p2 = { x: parentRect.right, y: parentRect.bottom + tolerance };
-            const p3 = { x: submenuRect.left, y: submenuRect.top - tolerance };
-            const p4 = { x: submenuRect.left, y: submenuRect.bottom + tolerance };
-
-            const inTriangle =
-              isPointInTriangle(mouse, p1, p2, p4) || isPointInTriangle(mouse, p1, p3, p4);
-
-            if (!inTriangle) {
-              setActiveSubmenu(null);
-            }
-          }, 100);
-        }
-      },
-      [activeSubmenu],
-    );
-
-    const menuRef = useRef<HTMLDivElement | null>(null);
-    useClickOutside(menuRef, handleClose, triggerRef);
-
-    // Keep focus on menu container when filtering leaves no items
-    useEffect(() => {
-      if (filteredItems.length === 0 && filter && menuRef.current) {
-        menuRef.current.focus();
-      }
-    }, [filteredItems.length, filter]);
-
-    const submenuTriggerShape = useMemo(() => {
-      if (!activeSubmenu) return null;
-      const rect = activeSubmenu.parent.getBoundingClientRect();
-      return {
-        top: rect.top,
-        bottom: rect.bottom,
-        left: rect.left,
-        right: rect.right,
-      };
-    }, [activeSubmenu]);
-
-    const handleMouseMove = (event: React.MouseEvent) => {
-      mousePosition.current = { x: event.clientX, y: event.clientY };
-    };
-
-    const menuContent = (
-      <m.div
-        ref={menuRef}
-        tabIndex={0}
-        onKeyDown={handleMenuKeyDown}
-        onMouseMove={handleMouseMove}
-        onContextMenu={(e) => {
-          // Prevent showing any ancestor context menus
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        initial={{ opacity: 0, y: (styles.upsideDown ? 1 : -1) * 5, scale: 0.98 }}
-        animate={{ opacity: 1, y: 0, scale: 1 }}
-        role="menu"
-        aria-orientation="vertical"
-        dir="ltr"
-        style={styles.container}
-        className={classNames(
-          className,
-          "x-theme-menu",
-          "outline-none my-1 pointer-events-auto z-40",
-          "fixed",
-        )}
-      >
-        {showTriangle && !isSubmenu && (
-          <span
-            aria-hidden
-            style={styles.triangle}
-            className="bg-surface absolute border-border-subtle border-t border-l"
-          />
-        )}
-        <VStack
-          style={styles.menu}
-          className={classNames(
-            className,
-            "h-auto bg-surface rounded-md shadow-lg py-1.5 border",
-            "border-border-subtle overflow-y-auto overflow-x-hidden mx-0.5",
-          )}
-        >
-          {filter && (
-            <HStack
-              space={2}
-              className="pb-0.5 px-1.5 mb-2 text-sm border border-border-subtle mx-2 rounded font-mono h-xs"
-            >
-              <Icon icon="search" size="xs" />
-              <div className="text">{filter}</div>
-            </HStack>
-          )}
-          {filteredItems.length === 0 && (
-            <span className="text-text-subtlest text-center px-2 py-1">No matches</span>
-          )}
-          {filteredItems.map((item, i) => {
-            if (item.hidden) {
-              return null;
-            }
-            if (item.type === "separator") {
-              return (
-                <Separator
-                  // oxlint-disable-next-line no-array-index-key -- Nothing else available
-                  key={i}
-                  className={classNames("my-1.5", item.label ? "ml-2" : null)}
-                >
-                  {item.label}
-                </Separator>
-              );
-            }
-            if (item.type === "content") {
-              return (
-                // oxlint-disable-next-line no-array-index-key -- index is fine
-                <div key={i} className={classNames("my-1 mx-2 max-w-xs")} onClick={onClose}>
-                  {item.label}
-                </div>
-              );
-            }
-            const isParentOfActiveSubmenu = activeSubmenu?.item === item;
-            return (
-              <MenuItem
-                focused={i === selectedIndex}
-                isParentOfActiveSubmenu={isParentOfActiveSubmenu}
-                onFocus={handleFocus}
-                onSelect={handleSelect}
-                onHover={handleItemHover}
-                // oxlint-disable-next-line no-array-index-key -- It's fine
-                key={i}
-                item={item}
-              />
-            );
-          })}
-        </VStack>
-        {activeSubmenu && (
-          <div
-            ref={submenuRef}
-            onMouseEnter={() => {
-              if (submenuTimeoutRef.current) {
-                clearTimeout(submenuTimeoutRef.current);
-              }
-            }}
-          >
-            <Menu
-              isSubmenu
-              isOpen
-              items={activeSubmenu.item.submenu ?? []}
-              defaultSelectedIndex={activeSubmenu.viaKeyboard ? 0 : null}
-              onClose={() => setActiveSubmenu(null)}
-              onCloseAll={handleCloseAll}
-              triggerShape={submenuTriggerShape}
-            />
-          </div>
-        )}
-      </m.div>
-    );
-
-    // Hotkeys must be rendered even when menu is closed (so they work globally)
-    const hotKeyElements = items.map(
-      (item, i) =>
-        item.type !== "separator" &&
-        item.type !== "content" &&
-        !item.hotKeyLabelOnly &&
-        item.hotKeyAction && (
-          <MenuItemHotKey
-            key={`${item.hotKeyAction}::${i}`}
-            onSelect={handleSelect}
-            item={item}
-            action={item.hotKeyAction}
-          />
-        ),
-    );
-
-    if (!isOpen) {
-      return <>{hotKeyElements}</>;
-    }
-
-    if (isSubmenu) {
-      return menuContent;
-    }
-
-    return (
-      <>
-        {hotKeyElements}
-        <Overlay noBackdrop open={isOpen} portalName="dropdown-menu">
-          {menuContent}
-        </Overlay>
-      </>
-    );
-  },
-);
-
-interface MenuItemProps {
-  className?: string;
-  item: DropdownItemDefault;
-  onSelect: (item: DropdownItemDefault, el?: HTMLButtonElement) => Promise<void>;
-  onFocus: (item: DropdownItemDefault) => void;
-  onHover: (item: DropdownItemDefault, el: HTMLButtonElement) => void;
-  focused: boolean;
-  isParentOfActiveSubmenu?: boolean;
-}
-
-function MenuItem({
-  className,
-  focused,
-  onFocus,
-  onHover,
-  item,
-  onSelect,
-  isParentOfActiveSubmenu,
-  ...props
-}: MenuItemProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const handleClick = useCallback(async () => {
-    if (item.waitForOnSelect) setIsLoading(true);
-    await onSelect?.(item, buttonRef.current ?? undefined);
-    if (item.waitForOnSelect) setIsLoading(false);
-  }, [item, onSelect]);
-
-  const handleFocus = useCallback(
-    (e: ReactFocusEvent<HTMLButtonElement>) => {
-      e.stopPropagation(); // Don't trigger focus on any parents
-      return onFocus?.(item);
-    },
-    [item, onFocus],
-  );
-
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const initRef = useCallback(
-    (el: HTMLButtonElement | null) => {
-      buttonRef.current = el;
-      if (el === null) return;
-      if (focused) {
-        setTimeout(() => el.focus(), 0);
-      }
-    },
-    [focused],
-  );
-
-  const handleMouseEnter = (e: MouseEvent<HTMLButtonElement>) => {
-    onHover(item, e.currentTarget);
-    e.currentTarget.focus();
-  };
-
-  const rightSlot = item.submenu ? (
-    <Icon icon="chevron_right" color="secondary" />
-  ) : (
-    (item.rightSlot ?? <Hotkey variant="text" action={item.hotKeyAction ?? null} />)
-  );
-
-  return (
-    <Button
-      ref={initRef}
-      size="sm"
-      tabIndex={-1}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={(e) => e.currentTarget.blur()}
-      disabled={item.disabled}
-      onFocus={handleFocus}
-      onClick={handleClick}
-      justify="start"
-      leftSlot={
-        (isLoading || item.leftSlot || item.icon) && (
-          <div className={classNames("pr-2 flex justify-start [&_svg]:opacity-70")}>
-            {isLoading ? <LoadingIcon /> : item.icon ? <Icon icon={item.icon} /> : item.leftSlot}
-          </div>
-        )
-      }
-      rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
-      innerClassName="!text-left"
-      color="custom"
-      className={classNames(
-        className,
-        "h-xs", // More compact
-        "min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap",
-        "focus:bg-surface-highlight focus:text rounded focus:outline-none focus-visible:outline-1",
-        isParentOfActiveSubmenu && "bg-surface-highlight text rounded",
-        item.color === "danger" && "!text-danger",
-        item.color === "primary" && "!text-primary",
-        item.color === "success" && "!text-success",
-        item.color === "warning" && "!text-warning",
-        item.color === "notice" && "!text-notice",
-        item.color === "info" && "!text-info",
-      )}
-      {...props}
-    >
-      <div className={classNames("truncate min-w-[5rem]")}>{item.label}</div>
-    </Button>
-  );
-}
-
-interface MenuItemHotKeyProps {
-  action: HotkeyAction | undefined;
-  onSelect: MenuItemProps["onSelect"];
-  item: MenuItemProps["item"];
-}
-
-function MenuItemHotKey({ action, onSelect, item }: MenuItemHotKeyProps) {
-  useHotKey(action ?? null, () => onSelect(item));
-  return null;
-}
-
-function sign(
-  p1: { x: number; y: number },
-  p2: { x: number; y: number },
-  p3: { x: number; y: number },
-) {
-  return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
-}
-
-function isPointInTriangle(
-  pt: { x: number; y: number },
-  v1: { x: number; y: number },
-  v2: { x: number; y: number },
-  v3: { x: number; y: number },
-) {
-  const d1 = sign(pt, v1, v2);
-  const d2 = sign(pt, v2, v3);
-  const d3 = sign(pt, v3, v1);
-
-  const has_neg = d1 < 0 || d2 < 0 || d3 < 0;
-  const has_pos = d1 > 0 || d2 > 0 || d3 > 0;
-
-  return !(has_neg && has_pos);
-}

apps/yaak-client/components/core/Editor/DiffViewer.css

@@ -1,39 +0,0 @@
-.cm-wrapper.cm-multiline .cm-mergeView {
-  @apply h-full w-full overflow-auto pr-0.5;
-
-  .cm-mergeViewEditors {
-    @apply w-full min-h-full;
-  }
-
-  .cm-mergeViewEditor {
-    @apply w-full min-h-full relative;
-
-    .cm-collapsedLines {
-      @apply bg-none bg-surface border border-border py-1 mx-0.5 text-text opacity-80 hover:opacity-100 rounded cursor-default;
-    }
-  }
-
-  .cm-line {
-    @apply pl-1.5;
-  }
-  .cm-changedLine {
-    /* Round top corners only if previous line is not a changed line */
-    &:not(.cm-changedLine + &) {
-      @apply rounded-t;
-    }
-    /* Round bottom corners only if next line is not a changed line */
-    &:not(:has(+ .cm-changedLine)) {
-      @apply rounded-b;
-    }
-  }
-
-  /* Let content grow and disable individual scrolling for sync */
-  .cm-editor {
-    @apply h-auto relative !important;
-    position: relative !important;
-  }
-
-  .cm-scroller {
-    @apply overflow-visible !important;
-  }
-}

apps/yaak-client/components/core/Editor/DiffViewer.tsx

@@ -1,64 +0,0 @@
-import { yaml } from "@codemirror/lang-yaml";
-import { syntaxHighlighting } from "@codemirror/language";
-import { MergeView } from "@codemirror/merge";
-import { EditorView } from "@codemirror/view";
-import classNames from "classnames";
-import { useEffect, useRef } from "react";
-import "./DiffViewer.css";
-import { readonlyExtensions, syntaxHighlightStyle } from "./extensions";
-
-interface Props {
-  /** Original/previous version (left side) */
-  original: string;
-  /** Modified/current version (right side) */
-  modified: string;
-  className?: string;
-}
-
-export function DiffViewer({ original, modified, className }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const viewRef = useRef<MergeView | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    // Clean up previous instance
-    viewRef.current?.destroy();
-
-    const sharedExtensions = [
-      yaml(),
-      syntaxHighlighting(syntaxHighlightStyle),
-      ...readonlyExtensions,
-      EditorView.lineWrapping,
-    ];
-
-    viewRef.current = new MergeView({
-      a: {
-        doc: original,
-        extensions: sharedExtensions,
-      },
-      b: {
-        doc: modified,
-        extensions: sharedExtensions,
-      },
-      parent: containerRef.current,
-      collapseUnchanged: { margin: 2, minSize: 3 },
-      highlightChanges: false,
-      gutter: true,
-      orientation: "a-b",
-      revertControls: undefined,
-    });
-
-    return () => {
-      viewRef.current?.destroy();
-      viewRef.current = null;
-    };
-  }, [original, modified]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={classNames("cm-wrapper cm-multiline h-full w-full", className)}
-    />
-  );
-}

apps/yaak-client/components/core/Editor/LazyEditor.tsx

@@ -1,12 +0,0 @@
-import { lazy, Suspense } from "react";
-import type { EditorProps } from "./Editor";
-
-const Editor_ = lazy(() => import("./Editor").then((m) => ({ default: m.Editor })));
-
-export function Editor(props: EditorProps) {
-  return (
-    <Suspense>
-      <Editor_ {...props} />
-    </Suspense>
-  );
-}

apps/yaak-client/components/core/Editor/extensions.ts

@@ -1,331 +0,0 @@
-import {
-  autocompletion,
-  closeBrackets,
-  closeBracketsKeymap,
-  completionKeymap,
-} from "@codemirror/autocomplete";
-import { history, historyKeymap } from "@codemirror/commands";
-import { go } from "@codemirror/lang-go";
-import { java } from "@codemirror/lang-java";
-import { javascript } from "@codemirror/lang-javascript";
-import { markdown } from "@codemirror/lang-markdown";
-import { php } from "@codemirror/lang-php";
-import { python } from "@codemirror/lang-python";
-import { xml } from "@codemirror/lang-xml";
-import {
-  bracketMatching,
-  codeFolding,
-  foldGutter,
-  foldKeymap,
-  HighlightStyle,
-  indentOnInput,
-  LanguageSupport,
-  StreamLanguage,
-  syntaxHighlighting,
-} from "@codemirror/language";
-import { c, csharp, kotlin, objectiveC } from "@codemirror/legacy-modes/mode/clike";
-import { clojure } from "@codemirror/legacy-modes/mode/clojure";
-import { http } from "@codemirror/legacy-modes/mode/http";
-import { oCaml } from "@codemirror/legacy-modes/mode/mllike";
-import { powerShell } from "@codemirror/legacy-modes/mode/powershell";
-import { r } from "@codemirror/legacy-modes/mode/r";
-import { ruby } from "@codemirror/legacy-modes/mode/ruby";
-import { shell } from "@codemirror/legacy-modes/mode/shell";
-import { swift } from "@codemirror/legacy-modes/mode/swift";
-import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
-import { search, searchKeymap } from "@codemirror/search";
-import type { Extension } from "@codemirror/state";
-import { EditorState } from "@codemirror/state";
-import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  keymap,
-  lineNumbers,
-  rectangularSelection,
-} from "@codemirror/view";
-import { tags as t } from "@lezer/highlight";
-import { jsonc, jsoncLanguage } from "@shopify/lang-jsonc";
-import { graphql } from "cm6-graphql";
-import type { GraphQLSchema } from "graphql";
-import { activeRequestIdAtom } from "../../../hooks/useActiveRequestId";
-import type { WrappedEnvironmentVariable } from "../../../hooks/useEnvironmentVariables";
-import { jotaiStore } from "../../../lib/jotai";
-import { renderMarkdown } from "../../../lib/markdown";
-import { pluralizeCount } from "../../../lib/pluralize";
-import { showGraphQLDocExplorerAtom } from "../../graphql/graphqlAtoms";
-import type { EditorProps } from "./Editor";
-import { jsonParseLinter } from "./json-lint";
-import { pairs } from "./pairs/extension";
-import { searchMatchCount } from "./searchMatchCount";
-import { text } from "./text/extension";
-import { timeline } from "./timeline/extension";
-import type { TwigCompletionOption } from "./twig/completion";
-import { twig } from "./twig/extension";
-import { pathParametersPlugin } from "./twig/pathParameters";
-import { url } from "./url/extension";
-
-export const syntaxHighlightStyle = HighlightStyle.define([
-  {
-    tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
-    color: "var(--textSubtlest)",
-  },
-  {
-    tag: [t.emphasis],
-    textDecoration: "underline",
-  },
-  {
-    tag: [t.angleBracket, t.paren, t.bracket, t.squareBracket, t.brace, t.separator, t.punctuation],
-    color: "var(--textSubtle)",
-  },
-  {
-    tag: [t.link, t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: "var(--info)",
-  },
-  { tag: [t.variableName], color: "var(--success)" },
-  { tag: [t.bool], color: "var(--warning)" },
-  { tag: [t.attributeName, t.propertyName], color: "var(--primary)" },
-  { tag: [t.attributeValue], color: "var(--warning)" },
-  { tag: [t.string], color: "var(--notice)" },
-  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: "var(--danger)" },
-]);
-
-const syntaxTheme = EditorView.theme({}, { dark: true });
-
-const closeBracketsExtensions: Extension = [closeBrackets(), keymap.of([...closeBracketsKeymap])];
-
-const legacyLang = (mode: Parameters<typeof StreamLanguage.define>[0]) => {
-  return () => new LanguageSupport(StreamLanguage.define(mode));
-};
-
-const syntaxExtensions: Record<
-  NonNullable<EditorProps["language"]>,
-  null | (() => LanguageSupport)
-> = {
-  graphql: null,
-  json: jsonc,
-  javascript: javascript,
-  // HTML as XML because HTML is oddly slow
-  html: xml,
-  xml: xml,
-  url: url,
-  pairs: pairs,
-  text: text,
-  timeline: timeline,
-  markdown: markdown,
-  c: legacyLang(c),
-  clojure: legacyLang(clojure),
-  csharp: legacyLang(csharp),
-  go: go,
-  http: legacyLang(http),
-  java: java,
-  kotlin: legacyLang(kotlin),
-  objective_c: legacyLang(objectiveC),
-  ocaml: legacyLang(oCaml),
-  php: php,
-  powershell: legacyLang(powerShell),
-  python: python,
-  r: legacyLang(r),
-  ruby: legacyLang(ruby),
-  shell: legacyLang(shell),
-  swift: legacyLang(swift),
-};
-
-const closeBracketsFor: (keyof typeof syntaxExtensions)[] = ["json", "javascript", "graphql"];
-
-export function getLanguageExtension({
-  useTemplating,
-  language = "text",
-  lintExtension,
-  environmentVariables,
-  autocomplete,
-  hideGutter,
-  onClickVariable,
-  onClickMissingVariable,
-  onClickPathParameter,
-  completionOptions,
-  graphQLSchema,
-}: {
-  useTemplating: boolean;
-  environmentVariables: WrappedEnvironmentVariable[];
-  onClickVariable: (option: WrappedEnvironmentVariable, tagValue: string, startPos: number) => void;
-  onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
-  onClickPathParameter: (name: string) => void;
-  completionOptions: TwigCompletionOption[];
-  graphQLSchema: GraphQLSchema | null;
-} & Pick<EditorProps, "language" | "autocomplete" | "hideGutter" | "lintExtension">) {
-  const extraExtensions: Extension[] = [];
-
-  if (language === "url") {
-    extraExtensions.push(pathParametersPlugin(onClickPathParameter));
-  }
-
-  // Only close brackets on languages that need it
-  if (language && closeBracketsFor.includes(language)) {
-    extraExtensions.push(closeBracketsExtensions);
-  }
-
-  // GraphQL is a special exception
-  if (language === "graphql") {
-    return [
-      graphql(graphQLSchema ?? undefined, {
-        async onCompletionInfoRender(gqlCompletionItem): Promise<Node | null> {
-          if (!gqlCompletionItem.documentation) return null;
-          const innerHTML = await renderMarkdown(gqlCompletionItem.documentation);
-          const span = document.createElement("span");
-          span.innerHTML = innerHTML;
-          return span;
-        },
-        onShowInDocs(field, type, parentType) {
-          const activeRequestId = jotaiStore.get(activeRequestIdAtom);
-          if (activeRequestId == null) return;
-          jotaiStore.set(showGraphQLDocExplorerAtom, (v) => ({
-            ...v,
-            [activeRequestId]: { field, type, parentType },
-          }));
-        },
-      }),
-      extraExtensions,
-    ];
-  }
-
-  if (language === "json") {
-    extraExtensions.push(lintExtension ?? linter(jsonParseLinter()));
-    extraExtensions.push(
-      jsoncLanguage.data.of({
-        commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
-      }),
-    );
-    if (!hideGutter) {
-      extraExtensions.push(lintGutter());
-    }
-  }
-
-  const maybeBase = language ? syntaxExtensions[language] : null;
-  const base = typeof maybeBase === "function" ? maybeBase() : null;
-  if (base == null) {
-    return [];
-  }
-
-  if (!useTemplating) {
-    return [base, extraExtensions];
-  }
-
-  return twig({
-    base,
-    environmentVariables,
-    completionOptions,
-    autocomplete,
-    onClickVariable,
-    onClickMissingVariable,
-    onClickPathParameter,
-    extraExtensions,
-  });
-}
-
-// Filter out autocomplete start triggers from completionKeymap since we handle it via configurable hotkeys.
-// Keep navigation keys (ArrowUp/Down, Enter, Escape, etc.) but remove startCompletion bindings.
-const filteredCompletionKeymap = completionKeymap.filter((binding) => {
-  const key = binding.key?.toLowerCase() ?? "";
-  const mac = (binding as { mac?: string }).mac?.toLowerCase() ?? "";
-  // Filter out Ctrl-Space and Mac-specific autocomplete triggers (Alt-`, Alt-i)
-  const isStartTrigger = key.includes("space") || mac.includes("alt-") || mac.includes("`");
-  return !isStartTrigger;
-});
-
-export const baseExtensions = [
-  highlightSpecialChars(),
-  history(),
-  dropCursor(),
-  drawSelection(),
-  autocompletion({
-    tooltipClass: () => "x-theme-menu",
-    closeOnBlur: true, // Set to `false` for debugging in devtools without closing it
-    defaultKeymap: false, // We handle the trigger via configurable hotkeys
-    compareCompletions: (a, b) => {
-      // Don't sort completions at all, only on boost
-      return (a.boost ?? 0) - (b.boost ?? 0);
-    },
-  }),
-  syntaxHighlighting(syntaxHighlightStyle),
-  syntaxTheme,
-  keymap.of([...historyKeymap, ...filteredCompletionKeymap]),
-];
-
-export const readonlyExtensions = [
-  EditorState.readOnly.of(true),
-  EditorView.contentAttributes.of({ tabindex: "-1" }),
-];
-
-export const multiLineExtensions = ({ hideGutter }: { hideGutter?: boolean }) => [
-  search({ top: true }),
-  searchMatchCount(),
-  hideGutter
-    ? []
-    : [
-        lineNumbers(),
-        foldGutter({
-          markerDOM: (open) => {
-            const el = document.createElement("div");
-            el.classList.add("fold-gutter-icon");
-            el.tabIndex = -1;
-            if (open) {
-              el.setAttribute("data-open", "");
-            }
-            return el;
-          },
-        }),
-      ],
-  codeFolding({
-    placeholderDOM(_view, onclick, prepared) {
-      const el = document.createElement("span");
-      el.onclick = onclick;
-      el.className = "cm-foldPlaceholder";
-      el.innerText = prepared || "…";
-      el.title = "unfold";
-      el.ariaLabel = "folded code";
-      return el;
-    },
-    /**
-     * Show the number of items when code folded. NOTE: this doesn't get called when restoring
-     * a previous serialized editor state, which is a bummer
-     */
-    preparePlaceholder(state, range) {
-      let count: number | undefined;
-      let startToken = "{";
-      let endToken = "}";
-
-      const prevLine = state.doc.lineAt(range.from).text;
-      const isArray = prevLine.lastIndexOf("[") > prevLine.lastIndexOf("{");
-
-      if (isArray) {
-        startToken = "[";
-        endToken = "]";
-      }
-
-      const internal = state.sliceDoc(range.from, range.to);
-      const toParse = startToken + internal + endToken;
-
-      try {
-        const parsed = JSON.parse(toParse);
-        count = Object.keys(parsed).length;
-      } catch {
-        /* empty */
-      }
-
-      if (count !== undefined) {
-        const label = isArray ? "item" : "key";
-        return pluralizeCount(label, count);
-      }
-    },
-  }),
-  indentOnInput(),
-  rectangularSelection(),
-  crosshairCursor(),
-  bracketMatching(),
-  highlightActiveLineGutter(),
-  keymap.of([...searchKeymap, ...foldKeymap, ...lintKeymap]),
-];

apps/yaak-client/components/core/Editor/searchMatchCount.ts

@@ -1,116 +0,0 @@
-import { getSearchQuery, searchPanelOpen } from "@codemirror/search";
-import type { Extension } from "@codemirror/state";
-import { type EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
-
-/**
- * A CodeMirror extension that displays the total number of search matches
- * inside the built-in search panel.
- */
-export function searchMatchCount(): Extension {
-  return ViewPlugin.fromClass(
-    class {
-      private countEl: HTMLElement | null = null;
-
-      constructor(private view: EditorView) {
-        this.updateCount();
-      }
-
-      update(update: ViewUpdate) {
-        // Recompute when doc changes, search state changes, or selection moves
-        const query = getSearchQuery(update.state);
-        const prevQuery = getSearchQuery(update.startState);
-        const open = searchPanelOpen(update.state);
-        const prevOpen = searchPanelOpen(update.startState);
-
-        if (update.docChanged || update.selectionSet || !query.eq(prevQuery) || open !== prevOpen) {
-          this.updateCount();
-        }
-      }
-
-      private updateCount() {
-        const state = this.view.state;
-        const open = searchPanelOpen(state);
-        const query = getSearchQuery(state);
-
-        if (!open) {
-          this.removeCountEl();
-          return;
-        }
-
-        this.ensureCountEl();
-
-        if (!query.search) {
-          if (this.countEl) {
-            this.countEl.textContent = "0/0";
-          }
-          return;
-        }
-
-        const selection = state.selection.main;
-        let count = 0;
-        let currentIndex = 0;
-        const MAX_COUNT = 9999;
-        const cursor = query.getCursor(state);
-        for (let result = cursor.next(); !result.done; result = cursor.next()) {
-          count++;
-          const match = result.value;
-          if (match.from <= selection.from && match.to >= selection.to) {
-            currentIndex = count;
-          }
-          if (count > MAX_COUNT) break;
-        }
-
-        if (this.countEl) {
-          if (count > MAX_COUNT) {
-            this.countEl.textContent = `${MAX_COUNT}+`;
-          } else if (count === 0) {
-            this.countEl.textContent = "0/0";
-          } else if (currentIndex > 0) {
-            this.countEl.textContent = `${currentIndex}/${count}`;
-          } else {
-            this.countEl.textContent = `0/${count}`;
-          }
-        }
-      }
-
-      private ensureCountEl() {
-        // Find the search panel in the editor DOM
-        const panel = this.view.dom.querySelector(".cm-search");
-        if (!panel) {
-          this.countEl = null;
-          return;
-        }
-
-        if (this.countEl && this.countEl.parentElement === panel) {
-          return; // Already attached
-        }
-
-        this.countEl = document.createElement("span");
-        this.countEl.className = "cm-search-match-count";
-
-        // Reorder: insert prev button, then next button, then count after the search input
-        const searchInput = panel.querySelector("input");
-        const prevBtn = panel.querySelector('button[name="prev"]');
-        const nextBtn = panel.querySelector('button[name="next"]');
-        if (searchInput && searchInput.parentElement === panel) {
-          searchInput.after(this.countEl);
-          if (prevBtn) this.countEl.after(prevBtn);
-          if (nextBtn && prevBtn) prevBtn.after(nextBtn);
-        } else {
-          panel.prepend(this.countEl);
-        }
-      }
-
-      private removeCountEl() {
-        if (this.countEl) {
-          this.countEl.remove();
-          this.countEl = null;
-        }
-      }
-
-      destroy() {
-        this.removeCountEl();
-      }
-    },
-  );
-}

apps/yaak-client/components/core/Editor/timeline/extension.ts

@@ -1,12 +0,0 @@
-import { LanguageSupport, LRLanguage } from "@codemirror/language";
-import { parser } from "./timeline";
-
-export const timelineLanguage = LRLanguage.define({
-  name: "timeline",
-  parser,
-  languageData: {},
-});
-
-export function timeline() {
-  return new LanguageSupport(timelineLanguage);
-}

apps/yaak-client/components/core/Editor/timeline/highlight.ts

@@ -1,7 +0,0 @@
-import { styleTags, tags as t } from "@lezer/highlight";
-
-export const highlight = styleTags({
-  OutgoingText: t.propertyName, // > lines - primary color (matches timeline icons)
-  IncomingText: t.tagName, // < lines - info color (matches timeline icons)
-  InfoText: t.comment, // * lines - subtle color (matches timeline icons)
-});

apps/yaak-client/components/core/Editor/timeline/timeline.grammar

@@ -1,21 +0,0 @@
-@top Timeline { line* }
-
-line { OutgoingLine | IncomingLine | InfoLine | PlainLine }
-
-@skip {} {
-  OutgoingLine { OutgoingText Newline }
-  IncomingLine { IncomingText Newline }
-  InfoLine { InfoText Newline }
-  PlainLine { PlainText Newline }
-}
-
-@tokens {
-  OutgoingText { "> " ![\n]* }
-  IncomingText { "< " ![\n]* }
-  InfoText { "* " ![\n]* }
-  PlainText { ![\n]+ }
-  Newline { "\n" }
-  @precedence { OutgoingText, IncomingText, InfoText, PlainText }
-}
-
-@external propSource highlight from "./highlight"

apps/yaak-client/components/core/Editor/timeline/timeline.terms.ts

@@ -1,11 +0,0 @@
-// This file was generated by lezer-generator. You probably shouldn't edit it.
-export const Timeline = 1,
-  OutgoingLine = 2,
-  OutgoingText = 3,
-  Newline = 4,
-  IncomingLine = 5,
-  IncomingText = 6,
-  InfoLine = 7,
-  InfoText = 8,
-  PlainLine = 9,
-  PlainText = 10;

apps/yaak-client/components/core/Editor/timeline/timeline.ts

@@ -1,21 +0,0 @@
-// This file was generated by lezer-generator. You probably shouldn't edit it.
-import { LRParser } from "@lezer/lr";
-import { highlight } from "./highlight";
-export const parser = LRParser.deserialize({
-  version: 14,
-  states:
-    "!pQQOPOOO`OPO'#C^OeOPO'#CaOjOPO'#CcOoOPO'#CeOOOO'#Ci'#CiOOOO'#Cg'#CgQQOPOOOOOO,58x,58xOOOO,58{,58{OOOO,58},58}OOOO,59P,59POOOO-E6e-E6e",
-  stateData: "z~ORPOUQOWROYSO~OSWO~OSXO~OSYO~OSZO~ORUWYW~",
-  goto: "m^PP_PP_P_P_PcPiTTOVQVOR[VTUOV",
-  nodeNames:
-    "⚠ Timeline OutgoingLine OutgoingText Newline IncomingLine IncomingText InfoLine InfoText PlainLine PlainText",
-  maxTerm: 13,
-  propSources: [highlight],
-  skippedNodes: [0],
-  repeatNodeCount: 1,
-  tokenData:
-    "%h~RZOYtYZ!]Zztz{!b{!^t!^!_#d!_!`t!`!a$f!a;'St;'S;=`!V<%lOt~ySY~OYtZ;'St;'S;=`!V<%lOt~!YP;=`<%lt~!bOS~~!gUY~OYtZptpq!yq;'St;'S;=`!V<%lOt~#QSW~Y~OY!yZ;'S!y;'S;=`#^<%lO!y~#aP;=`<%l!y~#iUY~OYtZptpq#{q;'St;'S;=`!V<%lOt~$SSU~Y~OY#{Z;'S#{;'S;=`$`<%lO#{~$cP;=`<%l#{~$kUY~OYtZptpq$}q;'St;'S;=`!V<%lOt~%USR~Y~OY$}Z;'S$};'S;=`%b<%lO$}~%eP;=`<%l$}",
-  tokenizers: [0],
-  topRules: { Timeline: [0, 1] },
-  tokenPrec: 36,
-});

apps/yaak-client/components/core/Editor/twig/twig.test.ts

@@ -1,108 +0,0 @@
-/* oxlint-disable no-template-curly-in-string */
-
-import { describe, expect, test } from "vite-plus/test";
-import { parser } from "./twig";
-
-function getNodeNames(input: string): string[] {
-  const tree = parser.parse(input);
-  const nodes: string[] = [];
-  const cursor = tree.cursor();
-  do {
-    if (cursor.name !== "Template") {
-      nodes.push(cursor.name);
-    }
-  } while (cursor.next());
-  return nodes;
-}
-
-function hasTag(input: string): boolean {
-  return getNodeNames(input).includes("Tag");
-}
-
-function hasError(input: string): boolean {
-  return getNodeNames(input).includes("⚠");
-}
-
-describe("twig grammar", () => {
-  describe("${[var]} format (valid template tags)", () => {
-    test("parses simple variable as Tag", () => {
-      expect(hasTag("${[var]}")).toBe(true);
-      expect(hasError("${[var]}")).toBe(false);
-    });
-
-    test("parses variable with whitespace as Tag", () => {
-      expect(hasTag("${[ var ]}")).toBe(true);
-      expect(hasError("${[ var ]}")).toBe(false);
-    });
-
-    test("parses embedded variable as Tag", () => {
-      expect(hasTag("hello ${[name]} world")).toBe(true);
-      expect(hasError("hello ${[name]} world")).toBe(false);
-    });
-
-    test("parses function call as Tag", () => {
-      expect(hasTag("${[fn()]}")).toBe(true);
-      expect(hasError("${[fn()]}")).toBe(false);
-    });
-  });
-
-  describe("${var} format (should be plain text, not tags)", () => {
-    test("parses ${var} as plain Text without errors", () => {
-      expect(hasTag("${var}")).toBe(false);
-      expect(hasError("${var}")).toBe(false);
-    });
-
-    test("parses embedded ${var} as plain Text", () => {
-      expect(hasTag("hello ${name} world")).toBe(false);
-      expect(hasError("hello ${name} world")).toBe(false);
-    });
-
-    test("parses JSON with ${var} as plain Text", () => {
-      const json = '{"key": "${value}"}';
-      expect(hasTag(json)).toBe(false);
-      expect(hasError(json)).toBe(false);
-    });
-
-    test("parses multiple ${var} as plain Text", () => {
-      expect(hasTag("${a} and ${b}")).toBe(false);
-      expect(hasError("${a} and ${b}")).toBe(false);
-    });
-  });
-
-  describe("mixed content", () => {
-    test("distinguishes ${var} from ${[var]} in same string", () => {
-      const input = "${plain} and ${[tag]}";
-      expect(hasTag(input)).toBe(true);
-      expect(hasError(input)).toBe(false);
-    });
-
-    test("parses JSON with ${[var]} as having Tag", () => {
-      const json = '{"key": "${[value]}"}';
-      expect(hasTag(json)).toBe(true);
-      expect(hasError(json)).toBe(false);
-    });
-  });
-
-  describe("edge cases", () => {
-    test("handles $ at end of string", () => {
-      expect(hasError("hello$")).toBe(false);
-      expect(hasTag("hello$")).toBe(false);
-    });
-
-    test("handles ${ at end of string without crash", () => {
-      // Incomplete syntax may produce errors, but should not crash
-      expect(() => parser.parse("hello${")).not.toThrow();
-    });
-
-    test("handles ${[ without closing without crash", () => {
-      // Unclosed tag may produce partial match, but should not crash
-      expect(() => parser.parse("${[unclosed")).not.toThrow();
-    });
-
-    test("handles empty ${[]}", () => {
-      // Empty tags may or may not be valid depending on grammar
-      // Just ensure no crash
-      expect(() => parser.parse("${[]}")).not.toThrow();
-    });
-  });
-});

apps/yaak-client/components/core/Editor/twig/twig.ts

@@ -1,20 +0,0 @@
-// This file was generated by lezer-generator. You probably shouldn't edit it.
-import { LocalTokenGroup, LRParser } from "@lezer/lr";
-import { highlight } from "./highlight";
-export const parser = LRParser.deserialize({
-  version: 14,
-  states:
-    "!^QQOPOOOOOO'#C_'#C_OYOQO'#C^OOOO'#Cc'#CcQQOPOOOOOO'#Cd'#CdO_OQO,58xOOOO-E6a-E6aOOOO-E6b-E6bOOOO1G.d1G.d",
-  stateData: "g~OUROYPO~OSTO~OSTOTXO~O",
-  goto: "nXPPY^PPPbhTROSTQOSQSORVSQUQRWU",
-  nodeNames: "⚠ Template Tag TagOpen TagContent TagClose Text",
-  maxTerm: 10,
-  propSources: [highlight],
-  skippedNodes: [0],
-  repeatNodeCount: 2,
-  tokenData:
-    "#{~RTOtbtu!zu;'Sb;'S;=`!o<%lOb~gTU~Otbtuvu;'Sb;'S;=`!o<%lOb~yVO#ob#o#p!`#p;'Sb;'S;=`!o<%l~b~Ob~~!u~!cSO!}b#O;'Sb;'S;=`!o<%lOb~!rP;=`<%lb~!zOU~~!}VO#ob#o#p#d#p;'Sb;'S;=`!o<%l~b~Ob~~!u~#gTO!}b!}#O#v#O;'Sb;'S;=`!o<%lOb~#{OY~",
-  tokenizers: [1, new LocalTokenGroup("b~RP#P#QU~XP#q#r[~aOT~~", 17, 4)],
-  topRules: { Template: [0, 1] },
-  tokenPrec: 0,
-});

apps/yaak-client/components/core/Editor/url/completion.ts

@@ -1,9 +0,0 @@
-import { genericCompletion } from "../genericCompletion";
-
-export const completions = genericCompletion({
-  options: [
-    { label: "http://", type: "constant" },
-    { label: "https://", type: "constant" },
-  ],
-  minMatch: 1,
-});

apps/yaak-client/components/core/EventViewer.tsx

@@ -1,273 +0,0 @@
-import type { Virtualizer } from "@tanstack/react-virtual";
-import { Banner, HStack, SplitLayout } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { format } from "date-fns";
-import type { ReactNode } from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { useEventViewerKeyboard } from "../../hooks/useEventViewerKeyboard";
-import { CopyIconButton } from "../CopyIconButton";
-import { AutoScroller } from "./AutoScroller";
-import { Button } from "./Button";
-import { IconButton } from "./IconButton";
-import { Separator } from "./Separator";
-
-interface EventViewerProps<T> {
-  /** Array of events to display */
-  events: T[];
-
-  /** Get unique key for each event */
-  getEventKey: (event: T, index: number) => string;
-
-  /** Render the event row - receives event, index, isActive, and onClick */
-  renderRow: (props: {
-    event: T;
-    index: number;
-    isActive: boolean;
-    onClick: () => void;
-  }) => ReactNode;
-
-  /** Render the detail pane for the selected event */
-  renderDetail?: (props: { event: T; index: number; onClose: () => void }) => ReactNode;
-
-  /** Optional header above the event list (e.g., connection status) */
-  header?: ReactNode;
-
-  /** Error message to display as a banner */
-  error?: string | null;
-
-  /** Key for SplitLayout state persistence */
-  splitLayoutStorageKey: string;
-
-  /** Default ratio for the split (0.0 - 1.0) */
-  defaultRatio?: number;
-
-  /** Enable keyboard navigation (arrow keys) */
-  enableKeyboardNav?: boolean;
-
-  /** Loading state */
-  isLoading?: boolean;
-
-  /** Message to show while loading */
-  loadingMessage?: string;
-
-  /** Message to show when no events */
-  emptyMessage?: string;
-
-  /** Callback when active index changes (for controlled state in parent) */
-  onActiveIndexChange?: (index: number | null) => void;
-}
-
-export function EventViewer<T>({
-  events,
-  getEventKey,
-  renderRow,
-  renderDetail,
-  header,
-  error,
-  splitLayoutStorageKey,
-  defaultRatio = 0.4,
-  enableKeyboardNav = true,
-  isLoading = false,
-  loadingMessage = "Loading events...",
-  emptyMessage = "No events recorded",
-  onActiveIndexChange,
-}: EventViewerProps<T>) {
-  const [activeIndex, setActiveIndexInternal] = useState<number | null>(null);
-  const [isPanelOpen, setIsPanelOpen] = useState(false);
-
-  // Wrap setActiveIndex to notify parent
-  const setActiveIndex = useCallback(
-    (indexOrUpdater: number | null | ((prev: number | null) => number | null)) => {
-      setActiveIndexInternal((prev) => {
-        const newIndex =
-          typeof indexOrUpdater === "function" ? indexOrUpdater(prev) : indexOrUpdater;
-        onActiveIndexChange?.(newIndex);
-        return newIndex;
-      });
-    },
-    [onActiveIndexChange],
-  );
-  const containerRef = useRef<HTMLDivElement>(null);
-  const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element> | null>(null);
-
-  const activeEvent = useMemo(
-    () => (activeIndex != null ? events[activeIndex] : null),
-    [activeIndex, events],
-  );
-
-  // Check if the event list container is focused
-  const isContainerFocused = useCallback(() => {
-    return containerRef.current?.contains(document.activeElement) ?? false;
-  }, []);
-
-  // Keyboard navigation
-  useEventViewerKeyboard({
-    totalCount: events.length,
-    activeIndex,
-    setActiveIndex,
-    virtualizer: virtualizerRef.current,
-    isContainerFocused,
-    enabled: enableKeyboardNav,
-    closePanel: () => setIsPanelOpen(false),
-    openPanel: () => setIsPanelOpen(true),
-  });
-
-  // Handle virtualizer ready callback
-  const handleVirtualizerReady = useCallback(
-    (virtualizer: Virtualizer<HTMLDivElement, Element>) => {
-      virtualizerRef.current = virtualizer;
-    },
-    [],
-  );
-
-  // Handle row click - select and open panel, scroll into view
-  const handleRowClick = useCallback(
-    (index: number) => {
-      setActiveIndex(index);
-      setIsPanelOpen(true);
-      // Scroll to ensure selected item is visible after panel opens
-      requestAnimationFrame(() => {
-        virtualizerRef.current?.scrollToIndex(index, { align: "auto" });
-      });
-    },
-    [setActiveIndex],
-  );
-
-  const handleClose = useCallback(() => {
-    setIsPanelOpen(false);
-  }, []);
-
-  if (isLoading) {
-    return <div className="p-3 text-text-subtlest italic">{loadingMessage}</div>;
-  }
-
-  if (events.length === 0 && !error) {
-    return <div className="p-3 text-text-subtlest italic">{emptyMessage}</div>;
-  }
-
-  return (
-    <div ref={containerRef} className="h-full">
-      <SplitLayout
-        layout="vertical"
-        storageKey={splitLayoutStorageKey}
-        defaultRatio={defaultRatio}
-        minHeightPx={10}
-        firstSlot={({ style }) => (
-          <div style={style} className="w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
-            {header ?? <span aria-hidden />}
-            <AutoScroller
-              data={events}
-              focusable={enableKeyboardNav}
-              onVirtualizerReady={handleVirtualizerReady}
-              header={
-                error && (
-                  <Banner color="danger" className="m-3">
-                    {error}
-                  </Banner>
-                )
-              }
-              render={(event, index) => (
-                <div key={getEventKey(event, index)}>
-                  {renderRow({
-                    event,
-                    index,
-                    isActive: index === activeIndex,
-                    onClick: () => handleRowClick(index),
-                  })}
-                </div>
-              )}
-            />
-          </div>
-        )}
-        secondSlot={
-          activeEvent != null && renderDetail && isPanelOpen
-            ? ({ style }) => (
-                <div style={style} className="grid grid-rows-[auto_minmax(0,1fr)] bg-surface">
-                  <div className="pb-3 px-2">
-                    <Separator />
-                  </div>
-                  <div className="mx-2 overflow-y-auto">
-                    {renderDetail({
-                      event: activeEvent,
-                      index: activeIndex ?? 0,
-                      onClose: handleClose,
-                    })}
-                  </div>
-                </div>
-              )
-            : null
-        }
-      />
-    </div>
-  );
-}
-
-export interface EventDetailAction {
-  /** Unique key for React */
-  key: string;
-  /** Button label */
-  label: string;
-  /** Optional icon */
-  icon?: ReactNode;
-  /** Click handler */
-  onClick: () => void;
-}
-
-interface EventDetailHeaderProps {
-  title: string;
-  prefix?: ReactNode;
-  timestamp?: string;
-  actions?: EventDetailAction[];
-  copyText?: string;
-  onClose?: () => void;
-}
-
-export function EventDetailHeader({
-  title,
-  prefix,
-  timestamp,
-  actions,
-  copyText,
-  onClose,
-}: EventDetailHeaderProps) {
-  const formattedTime = timestamp ? format(new Date(`${timestamp}Z`), "HH:mm:ss.SSS") : null;
-
-  return (
-    <div className="flex items-center justify-between gap-2 mb-2 h-xs">
-      <HStack space={2} className="items-center min-w-0">
-        {prefix}
-        <h3 className="font-semibold select-auto cursor-auto truncate">{title}</h3>
-      </HStack>
-      <HStack space={2} className="items-center">
-        {actions?.map((action) => (
-          <Button key={action.key} variant="border" size="xs" onClick={action.onClick}>
-            {action.icon}
-            {action.label}
-          </Button>
-        ))}
-        {copyText != null && (
-          <CopyIconButton text={copyText} size="xs" title="Copy" variant="border" iconSize="sm" />
-        )}
-        {formattedTime && (
-          <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
-        )}
-        <div
-          className={classNames(
-            copyText != null ||
-              formattedTime ||
-              ((actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3"),
-          )}
-        >
-          <IconButton
-            color="custom"
-            className="text-text-subtle -mr-3"
-            size="xs"
-            icon="x"
-            title="Close event panel"
-            onClick={onClose}
-          />
-        </div>
-      </HStack>
-    </div>
-  );
-}

apps/yaak-client/components/core/EventViewerRow.tsx

@@ -1,38 +0,0 @@
-import classNames from "classnames";
-import { format } from "date-fns";
-import type { ReactNode } from "react";
-
-interface EventViewerRowProps {
-  isActive: boolean;
-  onClick: () => void;
-  icon: ReactNode;
-  content: ReactNode;
-  timestamp?: string;
-}
-
-export function EventViewerRow({
-  isActive,
-  onClick,
-  icon,
-  content,
-  timestamp,
-}: EventViewerRowProps) {
-  return (
-    <div className="px-1">
-      <button
-        type="button"
-        onClick={onClick}
-        className={classNames(
-          "w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left",
-          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded",
-          isActive && "bg-surface-active !text-text",
-          "text-text-subtle hover:text",
-        )}
-      >
-        {icon}
-        <div className="w-full truncate">{content}</div>
-        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, "HH:mm:ss.SSS")}</div>}
-      </button>
-    </div>
-  );
-}

apps/yaak-client/components/core/Hotkey.tsx

@@ -1,45 +0,0 @@
-import { HStack } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { useFormattedHotkey } from "../../hooks/useHotKey";
-
-interface Props {
-  action: HotkeyAction | null;
-  className?: string;
-  variant?: "text" | "with-bg";
-}
-
-export function Hotkey({ action, className, variant }: Props) {
-  const labelParts = useFormattedHotkey(action);
-  if (labelParts === null) {
-    return null;
-  }
-
-  return <HotkeyRaw labelParts={labelParts} className={className} variant={variant} />;
-}
-
-interface HotkeyRawProps {
-  labelParts: string[];
-  className?: string;
-  variant?: "text" | "with-bg";
-}
-
-export function HotkeyRaw({ labelParts, className, variant }: HotkeyRawProps) {
-  return (
-    <HStack
-      className={classNames(
-        className,
-        variant === "with-bg" &&
-          "rounded bg-surface-highlight px-1 border border-border text-text-subtle",
-        variant === "text" && "text-text-subtlest",
-      )}
-    >
-      {labelParts.map((char, index) => (
-        // oxlint-disable-next-line react/no-array-index-key
-        <div key={index} className="min-w-[1em] text-center">
-          {char}
-        </div>
-      ))}
-    </HStack>
-  );
-}

apps/yaak-client/components/core/HotkeyLabel.tsx

@@ -1,15 +0,0 @@
-import classNames from "classnames";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { useHotkeyLabel } from "../../hooks/useHotKey";
-
-interface Props {
-  action: HotkeyAction;
-  className?: string;
-}
-
-export function HotkeyLabel({ action, className }: Props) {
-  const label = useHotkeyLabel(action);
-  return (
-    <span className={classNames(className, "text-text-subtle whitespace-nowrap")}>{label}</span>
-  );
-}

apps/yaak-client/components/core/HotkeyList.tsx

@@ -1,28 +0,0 @@
-import classNames from "classnames";
-import type { ReactNode } from "react";
-import { Fragment } from "react";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { Hotkey } from "./Hotkey";
-import { HotkeyLabel } from "./HotkeyLabel";
-
-interface Props {
-  hotkeys: HotkeyAction[];
-  bottomSlot?: ReactNode;
-  className?: string;
-}
-
-export const HotkeyList = ({ hotkeys, bottomSlot, className }: Props) => {
-  return (
-    <div className={classNames(className, "h-full flex items-center justify-center")}>
-      <div className="grid gap-2 grid-cols-[auto_auto]">
-        {hotkeys.map((hotkey) => (
-          <Fragment key={hotkey}>
-            <HotkeyLabel className="truncate" action={hotkey} />
-            <Hotkey className="ml-4" action={hotkey} />
-          </Fragment>
-        ))}
-        {bottomSlot}
-      </div>
-    </div>
-  );
-};

apps/yaak-client/components/core/HttpMethodTag.tsx

@@ -1,91 +0,0 @@
-import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
-import { settingsAtom } from "@yaakapp-internal/models";
-import classNames from "classnames";
-import { useAtomValue } from "jotai";
-import { memo } from "react";
-
-interface Props {
-  request: HttpRequest | GrpcRequest | WebsocketRequest;
-  className?: string;
-  short?: boolean;
-  noAlias?: boolean;
-}
-
-const methodNames: Record<string, string> = {
-  get: "GET",
-  put: "PUT",
-  post: "POST",
-  patch: "PTCH",
-  delete: "DELE",
-  options: "OPTN",
-  head: "HEAD",
-  query: "QURY",
-  graphql: "GQL",
-  grpc: "GRPC",
-  websocket: "WS",
-};
-
-export const HttpMethodTag = memo(function HttpMethodTag({
-  request,
-  className,
-  short,
-  noAlias,
-}: Props) {
-  const method =
-    request.model === "http_request" && request.bodyType === "graphql" && !noAlias
-      ? "graphql"
-      : request.model === "grpc_request"
-        ? "grpc"
-        : request.model === "websocket_request"
-          ? "websocket"
-          : request.method;
-
-  return <HttpMethodTagRaw method={method} className={className} short={short} />;
-});
-
-export function HttpMethodTagRaw({
-  className,
-  method,
-  short,
-  forceColor,
-}: {
-  method: string;
-  className?: string;
-  short?: boolean;
-  forceColor?: boolean;
-}) {
-  let label = method.toUpperCase();
-  if (short) {
-    label = methodNames[method.toLowerCase()] ?? method.slice(0, 4);
-    label = label.padStart(4, " ");
-  }
-
-  const m = method.toUpperCase();
-
-  const settings = useAtomValue(settingsAtom);
-  const colored = forceColor || settings.coloredMethods;
-
-  return (
-    <span
-      className={classNames(
-        className,
-        !colored && "text-text-subtle",
-        colored && m === "GRAPHQL" && "text-info",
-        colored && m === "WEBSOCKET" && "text-info",
-        colored && m === "GRPC" && "text-info",
-        colored && m === "QUERY" && "text-text-subtle",
-        colored && m === "OPTIONS" && "text-info",
-        colored && m === "HEAD" && "text-text-subtle",
-        colored && m === "GET" && "text-primary",
-        colored && m === "PUT" && "text-warning",
-        colored && m === "PATCH" && "text-notice",
-        colored && m === "POST" && "text-success",
-        colored && m === "DELETE" && "text-danger",
-        "font-mono flex-shrink-0 whitespace-pre",
-        "pt-[0.15em]", // Fix for monospace font not vertically centering
-      )}
-    >
-      {label}
-    </span>
-  );
-}

apps/yaak-client/components/core/IconButton.tsx

@@ -1,37 +0,0 @@
-import {
-  IconButton as BaseIconButton,
-  type IconButtonProps as BaseIconButtonProps,
-} from "@yaakapp-internal/ui";
-import { forwardRef, useImperativeHandle, useRef } from "react";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { useFormattedHotkey, useHotKey } from "../../hooks/useHotKey";
-
-export type IconButtonProps = BaseIconButtonProps & {
-  hotkeyAction?: HotkeyAction;
-  hotkeyLabelOnly?: boolean;
-  hotkeyPriority?: number;
-};
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  { hotkeyAction, hotkeyPriority, hotkeyLabelOnly, title, ...props }: IconButtonProps,
-  ref,
-) {
-  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join("");
-  const fullTitle = hotkeyTrigger ? `${title ?? ""} ${hotkeyTrigger}`.trim() : title;
-
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    ref,
-    () => buttonRef.current,
-  );
-
-  useHotKey(
-    hotkeyAction ?? null,
-    () => {
-      buttonRef.current?.click();
-    },
-    { priority: hotkeyPriority, enable: !hotkeyLabelOnly },
-  );
-
-  return <BaseIconButton ref={buttonRef} title={fullTitle} {...props} />;
-});

apps/yaak-client/components/core/PairEditor.util.tsx

@@ -1,9 +0,0 @@
-import { generateId } from "../../lib/generateId";
-import type { Pair, PairWithId } from "./PairEditor";
-
-export function ensurePairId(p: Pair): PairWithId {
-  if (typeof p.id === "string") {
-    return p as PairWithId;
-  }
-  return { ...p, id: p.id ?? generateId() };
-}

apps/yaak-client/components/core/PillButton.tsx

@@ -1,14 +0,0 @@
-import classNames from "classnames";
-import type { ButtonProps } from "./Button";
-import { Button } from "./Button";
-
-export function PillButton({ className, ...props }: ButtonProps) {
-  return (
-    <Button
-      size="2xs"
-      variant="border"
-      className={classNames(className, "!rounded-full mx-1 !px-3")}
-      {...props}
-    />
-  );
-}

apps/yaak-client/components/core/Prompt.tsx

@@ -1,66 +0,0 @@
-import type { FormInput, JsonPrimitive } from "@yaakapp-internal/plugins";
-import { HStack } from "@yaakapp-internal/ui";
-import type { FormEvent } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { generateId } from "../../lib/generateId";
-import { DynamicForm } from "../DynamicForm";
-import { Button } from "./Button";
-
-export interface PromptProps {
-  inputs: FormInput[];
-  onCancel: () => void;
-  onResult: (value: Record<string, JsonPrimitive> | null) => void;
-  confirmText?: string;
-  cancelText?: string;
-  onValuesChange?: (values: Record<string, JsonPrimitive>) => void;
-  onInputsUpdated?: (cb: (inputs: FormInput[]) => void) => void;
-}
-
-export function Prompt({
-  onCancel,
-  inputs: initialInputs,
-  onResult,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  onValuesChange,
-  onInputsUpdated,
-}: PromptProps) {
-  const [value, setValue] = useState<Record<string, JsonPrimitive>>({});
-  const [inputs, setInputs] = useState<FormInput[]>(initialInputs);
-  const handleSubmit = useCallback(
-    (e: FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      onResult(value);
-    },
-    [onResult, value],
-  );
-
-  // Register callback for external input updates (from plugin dynamic resolution)
-  useEffect(() => {
-    onInputsUpdated?.(setInputs);
-  }, [onInputsUpdated]);
-
-  // Notify of value changes for dynamic resolution
-  useEffect(() => {
-    onValuesChange?.(value);
-  }, [value, onValuesChange]);
-
-  const id = `prompt.form.${useRef(generateId()).current}`;
-
-  return (
-    <form
-      className="grid grid-rows-[auto_auto] grid-cols-[minmax(0,1fr)] gap-4 mb-4"
-      onSubmit={handleSubmit}
-    >
-      <DynamicForm inputs={inputs} onChange={setValue} data={value} stateKey={id} />
-      <HStack space={2} justifyContent="end">
-        <Button onClick={onCancel} variant="border" color="secondary">
-          {cancelText || "Cancel"}
-        </Button>
-        <Button type="submit" color="primary">
-          {confirmText || "Done"}
-        </Button>
-      </HStack>
-    </form>
-  );
-}

apps/yaak-client/components/core/RadioCards.tsx

@@ -1,64 +0,0 @@
-import classNames from "classnames";
-import type { ReactNode } from "react";
-
-export interface RadioCardOption<T extends string> {
-  value: T;
-  label: ReactNode;
-  description?: ReactNode;
-}
-
-export interface RadioCardsProps<T extends string> {
-  value: T | null;
-  onChange: (value: T) => void;
-  options: RadioCardOption<T>[];
-  name: string;
-}
-
-export function RadioCards<T extends string>({
-  value,
-  onChange,
-  options,
-  name,
-}: RadioCardsProps<T>) {
-  return (
-    <div className="flex flex-col gap-2">
-      {options.map((option) => {
-        const selected = value === option.value;
-        return (
-          <label
-            key={option.value}
-            className={classNames(
-              "flex items-start gap-3 p-3 rounded-lg border cursor-pointer",
-              "transition-colors",
-              selected ? "border-border-focus" : "border-border-subtle hocus:border-text-subtlest",
-            )}
-          >
-            <input
-              type="radio"
-              name={name}
-              value={option.value}
-              checked={selected}
-              onChange={() => onChange(option.value)}
-              className="sr-only"
-            />
-            <div
-              className={classNames(
-                "mt-1 w-4 h-4 flex-shrink-0 rounded-full border",
-                "flex items-center justify-center",
-                selected ? "border-focus" : "border-border",
-              )}
-            >
-              {selected && <div className="w-2 h-2 rounded-full bg-text" />}
-            </div>
-            <div className="flex flex-col gap-0.5">
-              <span className="font-semibold text-text">{option.label}</span>
-              {option.description && (
-                <span className="text-sm text-text-subtle">{option.description}</span>
-              )}
-            </div>
-          </label>
-        );
-      })}
-    </div>
-  );
-}

apps/yaak-client/components/core/Separator.tsx

@@ -1,43 +0,0 @@
-import type { Color } from "@yaakapp-internal/plugins";
-import classNames from "classnames";
-import type { ReactNode } from "react";
-
-interface Props {
-  orientation?: "horizontal" | "vertical";
-  dashed?: boolean;
-  className?: string;
-  children?: ReactNode;
-  color?: Color;
-}
-
-export function Separator({
-  color,
-  className,
-  dashed,
-  orientation = "horizontal",
-  children,
-}: Props) {
-  return (
-    <div role="presentation" className={classNames(className, "flex items-center w-full")}>
-      {children && (
-        <div className="text-sm text-text-subtlest mr-2 whitespace-nowrap">{children}</div>
-      )}
-      <div
-        className={classNames(
-          "h-0 border-t opacity-60",
-          color == null && "border-border",
-          color === "primary" && "border-primary",
-          color === "secondary" && "border-secondary",
-          color === "success" && "border-success",
-          color === "notice" && "border-notice",
-          color === "warning" && "border-warning",
-          color === "danger" && "border-danger",
-          color === "info" && "border-info",
-          dashed && "border-dashed",
-          orientation === "horizontal" && "w-full h-[1px]",
-          orientation === "vertical" && "h-full w-[1px]",
-        )}
-      />
-    </div>
-  );
-}

apps/yaak-client/components/core/Tabs/Tabs.tsx

@@ -1,585 +0,0 @@
-import type { DragEndEvent, DragMoveEvent, DragStartEvent } from "@dnd-kit/core";
-import {
-  closestCenter,
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useDraggable,
-  useDroppable,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import classNames from "classnames";
-import type { ReactNode, Ref } from "react";
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useKeyValue } from "../../../hooks/useKeyValue";
-import { computeSideForDragMove, DropMarker } from "@yaakapp-internal/ui";
-import { fireAndForget } from "../../../lib/fireAndForget";
-import { ErrorBoundary } from "../../ErrorBoundary";
-import type { ButtonProps } from "../Button";
-import { Button } from "../Button";
-import { Icon } from "@yaakapp-internal/ui";
-import type { RadioDropdownProps } from "../RadioDropdown";
-import { RadioDropdown } from "../RadioDropdown";
-
-export type TabItem =
-  | {
-      value: string;
-      label: string;
-      hidden?: boolean;
-      leftSlot?: ReactNode;
-      rightSlot?: ReactNode;
-    }
-  | {
-      value: string;
-      options: Omit<RadioDropdownProps, "children">;
-      leftSlot?: ReactNode;
-      rightSlot?: ReactNode;
-    };
-
-interface TabsStorage {
-  order: string[];
-  activeTabs: Record<string, string>;
-}
-
-export interface TabsRef {
-  /** Programmatically set the active tab */
-  setActiveTab: (value: string) => void;
-}
-
-interface Props {
-  label: string;
-  /** Default tab value. If not provided, defaults to first tab. */
-  defaultValue?: string;
-  /** Called when active tab changes */
-  onChangeValue?: (value: string) => void;
-  tabs: TabItem[];
-  tabListClassName?: string;
-  className?: string;
-  children: ReactNode;
-  addBorders?: boolean;
-  layout?: "horizontal" | "vertical";
-  /** Storage key for persisting tab order and active tab. When provided, enables drag-to-reorder and active tab persistence. */
-  storageKey?: string | string[];
-  /** Key to identify which context this tab belongs to (e.g., request ID). Used for per-context active tab persistence. */
-  activeTabKey?: string;
-}
-
-export const Tabs = forwardRef<TabsRef, Props>(function Tabs(
-  {
-    defaultValue,
-    onChangeValue: onChangeValueProp,
-    label,
-    children,
-    tabs: originalTabs,
-    className,
-    tabListClassName,
-    addBorders,
-    layout = "vertical",
-    storageKey,
-    activeTabKey,
-  }: Props,
-  forwardedRef: Ref<TabsRef>,
-) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const reorderable = !!storageKey;
-
-  // Use key-value storage for persistence if storageKey is provided
-  // Handle migration from old format (string[]) to new format (TabsStorage)
-  const { value: rawStorage, set: setStorage } = useKeyValue<TabsStorage | string[]>({
-    namespace: "no_sync",
-    key: storageKey ?? ["tabs", "default"],
-    fallback: { order: [], activeTabs: {} },
-  });
-
-  // Migrate old format (string[]) to new format (TabsStorage)
-  const storage: TabsStorage = Array.isArray(rawStorage)
-    ? { order: rawStorage, activeTabs: {} }
-    : (rawStorage ?? { order: [], activeTabs: {} });
-
-  const savedOrder = storage.order;
-
-  // Get the active tab value - prefer storage (if activeTabKey), then defaultValue, then first tab
-  const storedActiveTab = activeTabKey ? storage?.activeTabs?.[activeTabKey] : undefined;
-  const [internalValue, setInternalValue] = useState<string | undefined>(undefined);
-  const value = storedActiveTab ?? internalValue ?? defaultValue ?? originalTabs[0]?.value;
-
-  // Helper to normalize storage (handle migration from old format)
-  const normalizeStorage = useCallback(
-    (s: TabsStorage | string[]): TabsStorage =>
-      Array.isArray(s) ? { order: s, activeTabs: {} } : s,
-    [],
-  );
-
-  // Handle tab change - update internal state, storage if we have a key, and call prop callback
-  const onChangeValue = useCallback(
-    async (newValue: string) => {
-      setInternalValue(newValue);
-      if (storageKey && activeTabKey) {
-        await setStorage((s) => {
-          const normalized = normalizeStorage(s);
-          return {
-            ...normalized,
-            activeTabs: { ...normalized.activeTabs, [activeTabKey]: newValue },
-          };
-        });
-      }
-      onChangeValueProp?.(newValue);
-    },
-    [storageKey, activeTabKey, setStorage, onChangeValueProp, normalizeStorage],
-  );
-
-  // Expose imperative methods via ref
-  useImperativeHandle(
-    forwardedRef,
-    () => ({
-      setActiveTab: (value: string) => {
-        fireAndForget(onChangeValue(value));
-      },
-    }),
-    [onChangeValue],
-  );
-
-  // Helper to save order
-  const setSavedOrder = useCallback(
-    async (order: string[]) => {
-      await setStorage((s) => {
-        const normalized = normalizeStorage(s);
-        return { ...normalized, order };
-      });
-    },
-    [setStorage, normalizeStorage],
-  );
-
-  // State for ordered tabs
-  const [orderedTabs, setOrderedTabs] = useState<TabItem[]>(originalTabs);
-  const [isDragging, setIsDragging] = useState<TabItem | null>(null);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-
-  // Reorder tabs based on saved order when tabs or savedOrder changes
-  useEffect(() => {
-    if (!storageKey || savedOrder == null || savedOrder.length === 0) {
-      setOrderedTabs(originalTabs);
-      return;
-    }
-
-    // Create a map of tab values to tab items
-    const tabMap = new Map(originalTabs.map((tab) => [tab.value, tab]));
-
-    // Reorder based on saved order, adding any new tabs at the end
-    const reordered: TabItem[] = [];
-    const seenValues = new Set<string>();
-
-    // Add tabs in saved order
-    for (const value of savedOrder) {
-      const tab = tabMap.get(value);
-      if (tab) {
-        reordered.push(tab);
-        seenValues.add(value);
-      }
-    }
-
-    // Add any new tabs that weren't in the saved order
-    for (const tab of originalTabs) {
-      if (!seenValues.has(tab.value)) {
-        reordered.push(tab);
-      }
-    }
-
-    setOrderedTabs(reordered);
-  }, [originalTabs, savedOrder, storageKey]);
-
-  const tabs = storageKey ? orderedTabs : originalTabs;
-
-  // Update tabs when value changes
-  useEffect(() => {
-    const tabs = ref.current?.querySelectorAll<HTMLDivElement>("[data-tab]");
-    for (const tab of tabs ?? []) {
-      const v = tab.getAttribute("data-tab");
-      const parent = tab.closest(".tabs-container");
-      if (parent !== ref.current) {
-        // Tab is part of a nested tab container, so ignore it
-      } else if (v === value) {
-        tab.setAttribute("data-state", "active");
-        tab.setAttribute("aria-hidden", "false");
-        tab.style.display = "block";
-      } else {
-        tab.setAttribute("data-state", "inactive");
-        tab.setAttribute("aria-hidden", "true");
-        tab.style.display = "none";
-      }
-    }
-  }, [value]);
-
-  // Drag and drop handlers
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
-
-  const onDragStart = useCallback(
-    (e: DragStartEvent) => {
-      const tab = tabs.find((t) => t.value === e.active.id);
-      setIsDragging(tab ?? null);
-    },
-    [tabs],
-  );
-
-  const onDragMove = useCallback(
-    (e: DragMoveEvent) => {
-      const overId = e.over?.id as string | undefined;
-      if (!overId) return setHoveredIndex(null);
-
-      const overTab = tabs.find((t) => t.value === overId);
-      if (overTab == null) return setHoveredIndex(null);
-
-      // For vertical layout, tabs are arranged horizontally (side-by-side)
-      const orientation = layout === "vertical" ? "horizontal" : "vertical";
-      const side = computeSideForDragMove(overTab.value, e, orientation);
-
-      // If computeSideForDragMove returns null (shouldn't happen but be safe), default to null
-      if (side === null) return setHoveredIndex(null);
-
-      const overIndex = tabs.findIndex((t) => t.value === overId);
-      const hoveredIndex = overIndex + (side === "before" ? 0 : 1);
-
-      setHoveredIndex(hoveredIndex);
-    },
-    [tabs, layout],
-  );
-
-  const onDragCancel = useCallback(() => {
-    setIsDragging(null);
-    setHoveredIndex(null);
-  }, []);
-
-  const onDragEnd = useCallback(
-    (e: DragEndEvent) => {
-      setIsDragging(null);
-      setHoveredIndex(null);
-
-      const activeId = e.active.id as string | undefined;
-      const overId = e.over?.id as string | undefined;
-      if (!activeId || !overId || activeId === overId) return;
-
-      const from = tabs.findIndex((t) => t.value === activeId);
-      const baseTo = tabs.findIndex((t) => t.value === overId);
-      const to = hoveredIndex ?? (baseTo === -1 ? from : baseTo);
-
-      if (from !== -1 && to !== -1 && from !== to) {
-        const newTabs = [...tabs];
-        const [moved] = newTabs.splice(from, 1);
-        if (moved === undefined) return;
-        newTabs.splice(to > from ? to - 1 : to, 0, moved);
-
-        setOrderedTabs(newTabs);
-
-        // Save order to storage
-        setSavedOrder(newTabs.map((t) => t.value)).catch(console.error);
-      }
-    },
-    [tabs, hoveredIndex, setSavedOrder],
-  );
-
-  const tabButtons = useMemo(() => {
-    const items: ReactNode[] = [];
-    tabs.forEach((t, i) => {
-      if ("hidden" in t && t.hidden) {
-        return;
-      }
-
-      const isActive = t.value === value;
-      const showDropMarkerBefore = hoveredIndex === i;
-
-      if (showDropMarkerBefore) {
-        items.push(
-          <div
-            key={`marker-${t.value}`}
-            className={classNames("relative", layout === "vertical" ? "w-0" : "h-0")}
-          >
-            <DropMarker orientation={layout === "vertical" ? "vertical" : "horizontal"} />
-          </div>,
-        );
-      }
-
-      items.push(
-        <TabButton
-          key={t.value}
-          tab={t}
-          isActive={isActive}
-          addBorders={addBorders}
-          layout={layout}
-          reorderable={reorderable}
-          isDragging={isDragging?.value === t.value}
-          onChangeValue={onChangeValue}
-        />,
-      );
-    });
-    return items;
-  }, [tabs, value, addBorders, layout, reorderable, isDragging, onChangeValue, hoveredIndex]);
-
-  const tabList = (
-    <div
-      role="tablist"
-      aria-label={label}
-      className={classNames(
-        tabListClassName,
-        addBorders && layout === "horizontal" && "pl-3 -ml-1",
-        addBorders && layout === "vertical" && "ml-0 mb-2",
-        "flex items-center hide-scrollbars",
-        layout === "horizontal" && "h-full overflow-auto p-2",
-        layout === "vertical" && "overflow-x-auto overflow-y-visible ",
-        // Give space for button focus states within overflow boundary.
-        !addBorders && layout === "vertical" && "py-1 pl-3 -ml-5 pr-1",
-      )}
-    >
-      <div
-        className={classNames(
-          layout === "horizontal" && "flex flex-col w-full pb-3 mb-auto",
-          layout === "vertical" && "flex flex-row flex-shrink-0 w-full",
-        )}
-      >
-        {tabButtons}
-        {hoveredIndex === tabs.length && (
-          <div className={classNames("relative", layout === "vertical" ? "w-0" : "h-0")}>
-            <DropMarker orientation={layout === "vertical" ? "vertical" : "horizontal"} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={classNames(
-        className,
-        "tabs-container",
-        "h-full grid",
-        layout === "horizontal" && "grid-rows-1 grid-cols-[auto_minmax(0,1fr)]",
-        layout === "vertical" && "grid-rows-[auto_minmax(0,1fr)] grid-cols-1",
-      )}
-    >
-      {reorderable ? (
-        <DndContext
-          autoScroll
-          sensors={sensors}
-          onDragMove={onDragMove}
-          onDragEnd={onDragEnd}
-          onDragStart={onDragStart}
-          onDragCancel={onDragCancel}
-          collisionDetection={closestCenter}
-        >
-          {tabList}
-          <DragOverlay dropAnimation={null}>
-            {isDragging && (
-              <TabButton
-                tab={isDragging}
-                isActive={isDragging.value === value}
-                addBorders={addBorders}
-                layout={layout}
-                reorderable={false}
-                isDragging={false}
-                onChangeValue={onChangeValue}
-                overlay
-              />
-            )}
-          </DragOverlay>
-        </DndContext>
-      ) : (
-        tabList
-      )}
-      {children}
-    </div>
-  );
-});
-
-interface TabButtonProps {
-  tab: TabItem;
-  isActive: boolean;
-  addBorders?: boolean;
-  layout: "horizontal" | "vertical";
-  reorderable: boolean;
-  isDragging: boolean;
-  onChangeValue?: (value: string) => void;
-  overlay?: boolean;
-}
-
-function TabButton({
-  tab,
-  isActive,
-  addBorders,
-  layout,
-  reorderable,
-  isDragging,
-  onChangeValue,
-  overlay = false,
-}: TabButtonProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef: setDraggableRef,
-  } = useDraggable({
-    id: tab.value,
-    disabled: !reorderable,
-    // The button inside handles focus
-    attributes: { tabIndex: -1 },
-  });
-  const { setNodeRef: setDroppableRef } = useDroppable({
-    id: tab.value,
-    disabled: !reorderable,
-  });
-
-  const handleSetWrapperRef = useCallback(
-    (n: HTMLDivElement | null) => {
-      if (reorderable) {
-        setDraggableRef(n);
-        setDroppableRef(n);
-      }
-    },
-    [reorderable, setDraggableRef, setDroppableRef],
-  );
-
-  const btnProps: Partial<ButtonProps> = {
-    color: "custom",
-    justify: layout === "horizontal" ? "start" : "center",
-    onClick: isActive
-      ? undefined
-      : (e: React.MouseEvent) => {
-          e.preventDefault(); // Prevent dropdown from opening on first click
-          onChangeValue?.(tab.value);
-        },
-    className: classNames(
-      "flex items-center rounded whitespace-nowrap",
-      "!px-2 ml-[1px]",
-      "outline-none",
-      "ring-none",
-      "focus-visible-or-class:outline-2",
-      addBorders && "border focus-visible:bg-surface-highlight",
-      isActive ? "text-text" : "text-text-subtle",
-      isActive && addBorders
-        ? "border-surface-active bg-surface-active"
-        : layout === "vertical"
-          ? "border-border-subtle"
-          : "border-transparent",
-      layout === "horizontal" && "min-w-[10rem]",
-      isDragging && "opacity-50",
-      overlay && "opacity-80",
-    ),
-  };
-
-  const buttonContent = (() => {
-    if ("options" in tab) {
-      const option = tab.options.items.find((i) => "value" in i && i.value === tab.options.value);
-      return (
-        <RadioDropdown
-          key={tab.value}
-          items={tab.options.items}
-          itemsAfter={tab.options.itemsAfter}
-          itemsBefore={tab.options.itemsBefore}
-          value={tab.options.value}
-          onChange={tab.options.onChange}
-        >
-          <Button
-            leftSlot={tab.leftSlot}
-            rightSlot={
-              <div className="flex items-center">
-                {tab.rightSlot}
-                <Icon
-                  size="sm"
-                  icon="chevron_down"
-                  className={classNames(
-                    "ml-1",
-                    isActive ? "text-text-subtle" : "text-text-subtlest",
-                  )}
-                />
-              </div>
-            }
-            {...btnProps}
-          >
-            {option && "shortLabel" in option && option.shortLabel
-              ? option.shortLabel
-              : (option?.label ?? "Unknown")}
-          </Button>
-        </RadioDropdown>
-      );
-    }
-    return (
-      <Button leftSlot={tab.leftSlot} rightSlot={tab.rightSlot} {...btnProps}>
-        {"label" in tab && tab.label ? tab.label : tab.value}
-      </Button>
-    );
-  })();
-
-  // Apply drag handlers to wrapper, not button
-  const wrapperProps = reorderable && !overlay ? { ...attributes, ...listeners } : {};
-
-  return (
-    <div
-      ref={handleSetWrapperRef}
-      className={classNames("relative", layout === "vertical" && "mr-2")}
-      {...wrapperProps}
-    >
-      {buttonContent}
-    </div>
-  );
-}
-
-interface TabContentProps {
-  value: string;
-  children: ReactNode;
-  className?: string;
-}
-
-export const TabContent = memo(function TabContent({
-  value,
-  children,
-  className,
-}: TabContentProps) {
-  return (
-    <ErrorBoundary name={`Tab ${value}`}>
-      <div
-        tabIndex={-1}
-        data-tab={value}
-        className={classNames(className, "tab-content", "hidden w-full h-full pt-2")}
-      >
-        {children}
-      </div>
-    </ErrorBoundary>
-  );
-});
-
-/**
- * Programmatically set the active tab for a Tabs component that uses storageKey + activeTabKey.
- * This is useful when you need to change the tab from outside the component (e.g., in response to an event).
- */
-export async function setActiveTab({
-  storageKey,
-  activeTabKey,
-  value,
-}: {
-  storageKey: string;
-  activeTabKey: string;
-  value: string;
-}): Promise<void> {
-  const { getKeyValue, setKeyValue } = await import("../../../lib/keyValueStore");
-  const current = getKeyValue<TabsStorage>({
-    namespace: "no_sync",
-    key: storageKey,
-    fallback: { order: [], activeTabs: {} },
-  });
-  await setKeyValue({
-    namespace: "no_sync",
-    key: storageKey,
-    value: {
-      ...current,
-      activeTabs: { ...current.activeTabs, [activeTabKey]: value },
-    },
-  });
-}

apps/yaak-client/components/core/Toast.tsx

@@ -1,90 +0,0 @@
-import type { ShowToastRequest } from "@yaakapp-internal/plugins";
-import { Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import * as m from "motion/react-m";
-import type { ReactNode } from "react";
-import { useKey } from "react-use";
-import { IconButton } from "./IconButton";
-
-export interface ToastProps {
-  children: ReactNode;
-  open: boolean;
-  onClose: () => void;
-  className?: string;
-  timeout: number | null;
-  action?: (args: { hide: () => void }) => ReactNode;
-  icon?: ShowToastRequest["icon"] | null;
-  color?: ShowToastRequest["color"];
-}
-
-const ICONS: Record<NonNullable<ToastProps["color"] | "custom">, IconProps["icon"] | null> = {
-  custom: null,
-  danger: "alert_triangle",
-  info: "info",
-  notice: "alert_triangle",
-  primary: "info",
-  secondary: "info",
-  success: "check_circle",
-  warning: "alert_triangle",
-};
-
-export function Toast({ children, open, onClose, timeout, action, icon, color }: ToastProps) {
-  useKey(
-    "Escape",
-    () => {
-      if (!open) return;
-      onClose();
-    },
-    {},
-    [open],
-  );
-
-  const toastIcon = icon === null ? null : (icon ?? (color && color in ICONS && ICONS[color]));
-
-  return (
-    <m.div
-      initial={{ opacity: 0, right: "-10%" }}
-      animate={{ opacity: 100, right: 0 }}
-      exit={{ opacity: 0, right: "-100%" }}
-      transition={{ duration: 0.2 }}
-      className={classNames("bg-surface m-2 rounded-lg")}
-    >
-      <div
-        className={classNames(
-          `x-theme-toast x-theme-toast--${color}`,
-          "pointer-events-auto overflow-hidden",
-          "relative pointer-events-auto bg-surface text-text rounded-lg",
-          "border border-border shadow-lg w-[25rem]",
-        )}
-      >
-        <div className="pl-3 py-3 pr-10 flex items-start gap-2 w-full max-h-[11rem] overflow-auto">
-          {toastIcon && <Icon icon={toastIcon} color={color} className="mt-1 flex-shrink-0" />}
-          <VStack space={2} className="w-full min-w-0">
-            <div className="select-auto">{children}</div>
-            {action?.({ hide: onClose })}
-          </VStack>
-        </div>
-
-        <IconButton
-          color={color}
-          variant="border"
-          className="opacity-60 border-0 !absolute top-2 right-2"
-          title="Dismiss"
-          icon="x"
-          onClick={onClose}
-        />
-
-        {timeout != null && (
-          <div className="w-full absolute bottom-0 left-0 right-0">
-            <m.div
-              className="bg-surface-highlight h-[3px]"
-              initial={{ width: "100%" }}
-              animate={{ width: "0%", opacity: 0.2 }}
-              transition={{ duration: timeout / 1000, ease: "linear" }}
-            />
-          </div>
-        )}
-      </div>
-    </m.div>
-  );
-}

apps/yaak-client/components/core/WebsocketStatusTag.tsx

@@ -1,31 +0,0 @@
-import type { WebsocketConnection } from "@yaakapp-internal/models";
-import classNames from "classnames";
-
-interface Props {
-  connection: WebsocketConnection;
-  className?: string;
-}
-
-export function WebsocketStatusTag({ connection, className }: Props) {
-  const { state, error } = connection;
-
-  let label: string;
-  let colorClass = "text-text-subtle";
-
-  if (error) {
-    label = "ERROR";
-    colorClass = "text-danger";
-  } else if (state === "connected") {
-    label = "CONNECTED";
-    colorClass = "text-success";
-  } else if (state === "closing") {
-    label = "CLOSING";
-  } else if (state === "closed") {
-    label = "CLOSED";
-    colorClass = "text-warning";
-  } else {
-    label = "CONNECTING";
-  }
-
-  return <span className={classNames(className, "font-mono", colorClass)}>{label}</span>;
-}

apps/yaak-client/components/git/GitCommitDialog.tsx

@@ -1,481 +0,0 @@
-import type { GitStatusEntry } from "@yaakapp-internal/git";
-import { useGit } from "@yaakapp-internal/git";
-import type {
-  Environment,
-  Folder,
-  GrpcRequest,
-  HttpRequest,
-  WebsocketRequest,
-  Workspace,
-} from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, InlineCode, SplitLayout } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { useCallback, useMemo, useState } from "react";
-import { modelToYaml } from "../../lib/diffYaml";
-import { resolvedModelName } from "../../lib/resolvedModelName";
-import { showErrorToast } from "../../lib/toast";
-import { Button } from "../core/Button";
-import type { CheckboxProps } from "../core/Checkbox";
-import { Checkbox } from "../core/Checkbox";
-import { DiffViewer } from "../core/Editor/DiffViewer";
-import { Input } from "../core/Input";
-import { Separator } from "../core/Separator";
-import { EmptyStateText } from "../EmptyStateText";
-import { gitCallbacks } from "./callbacks";
-import { handlePushResult } from "./git-util";
-
-interface Props {
-  syncDir: string;
-  onDone: () => void;
-  workspace: Workspace;
-}
-
-interface CommitTreeNode {
-  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Environment | Workspace;
-  status: GitStatusEntry;
-  children: CommitTreeNode[];
-  ancestors: CommitTreeNode[];
-}
-
-export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
-  const [{ status }, { commit, commitAndPush, add, unstage }] = useGit(
-    syncDir,
-    gitCallbacks(syncDir),
-  );
-  const [isPushing, setIsPushing] = useState(false);
-  const [commitError, setCommitError] = useState<string | null>(null);
-  const [message, setMessage] = useState<string>("");
-  const [selectedEntry, setSelectedEntry] = useState<GitStatusEntry | null>(null);
-
-  const handleCreateCommit = async () => {
-    setCommitError(null);
-    try {
-      await commit.mutateAsync({ message });
-      onDone();
-    } catch (err) {
-      setCommitError(String(err));
-    }
-  };
-
-  const handleCreateCommitAndPush = async () => {
-    setIsPushing(true);
-    try {
-      const r = await commitAndPush.mutateAsync({ message });
-      handlePushResult(r);
-      onDone();
-    } catch (err) {
-      showErrorToast({
-        id: "git-commit-and-push-error",
-        title: "Error committing and pushing",
-        message: String(err),
-      });
-    } finally {
-      setIsPushing(false);
-    }
-  };
-
-  const { internalEntries, externalEntries, allEntries } = useMemo(() => {
-    const allEntries = [];
-    const yaakEntries = [];
-    const externalEntries = [];
-
-    for (const entry of status.data?.entries ?? []) {
-      allEntries.push(entry);
-      if (entry.next == null && entry.prev == null) {
-        externalEntries.push(entry);
-      } else {
-        yaakEntries.push(entry);
-      }
-    }
-    return { internalEntries: yaakEntries, externalEntries, allEntries };
-  }, [status.data?.entries]);
-
-  const hasAddedAnything = allEntries.find((e) => e.staged) != null;
-  const hasAnythingToAdd = allEntries.find((e) => e.status !== "current") != null;
-
-  const tree: CommitTreeNode | null = useMemo(() => {
-    const next = (
-      model: CommitTreeNode["model"],
-      ancestors: CommitTreeNode[],
-    ): CommitTreeNode | null => {
-      const statusEntry = internalEntries?.find((s) => s.relaPath.includes(model.id));
-      if (statusEntry == null) {
-        return null;
-      }
-
-      const node: CommitTreeNode = {
-        model,
-        status: statusEntry,
-        children: [],
-        ancestors,
-      };
-
-      for (const entry of internalEntries) {
-        const childModel = entry.next ?? entry.prev;
-
-        // Should never happen because we're iterating internalEntries
-        if (childModel == null) continue;
-
-        // TODO: Figure out why not all of these show up
-        if ("folderId" in childModel && childModel.folderId != null) {
-          if (childModel.folderId === model.id) {
-            const c = next(childModel, [...ancestors, node]);
-            if (c != null) node.children.push(c);
-          }
-        } else if ("workspaceId" in childModel && childModel.workspaceId === model.id) {
-          const c = next(childModel, [...ancestors, node]);
-          if (c != null) node.children.push(c);
-        } else {
-          // Do nothing
-        }
-      }
-
-      return node;
-    };
-
-    return next(workspace, []);
-  }, [workspace, internalEntries]);
-
-  const checkNode = useCallback(
-    (treeNode: CommitTreeNode) => {
-      const checked = nodeCheckedStatus(treeNode);
-      const newChecked = checked === "indeterminate" ? true : !checked;
-      setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
-      // TODO: Also ensure parents are added properly
-    },
-    [add.mutate, unstage.mutate],
-  );
-
-  const checkEntry = useCallback(
-    (entry: GitStatusEntry) => {
-      if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
-      else add.mutate({ relaPaths: [entry.relaPath] });
-    },
-    [add.mutate, unstage.mutate],
-  );
-
-  const handleSelectChild = useCallback(
-    (entry: GitStatusEntry) => {
-      if (entry === selectedEntry) {
-        setSelectedEntry(null);
-      } else {
-        setSelectedEntry(entry);
-      }
-    },
-    [selectedEntry],
-  );
-
-  if (tree == null) {
-    return null;
-  }
-
-  if (!hasAnythingToAdd) {
-    return (
-      <div className="h-full px-6 pb-4">
-        <EmptyStateText>No changes since last commit</EmptyStateText>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full px-2 pb-4">
-      <SplitLayout
-        storageKey="commit-horizontal"
-        layout="horizontal"
-        defaultRatio={0.6}
-        firstSlot={({ style }) => (
-          <div style={style} className="h-full px-4">
-            <SplitLayout
-              storageKey="commit-vertical"
-              layout="vertical"
-              defaultRatio={0.35}
-              firstSlot={({ style: innerStyle }) => (
-                <div
-                  style={innerStyle}
-                  className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
-                >
-                  <TreeNodeChildren
-                    node={tree}
-                    depth={0}
-                    onCheck={checkNode}
-                    onSelect={handleSelectChild}
-                    selectedPath={selectedEntry?.relaPath ?? null}
-                  />
-                  {externalEntries.find((e) => e.status !== "current") && (
-                    <>
-                      <Separator className="mt-3 mb-1">External file changes</Separator>
-                      {externalEntries.map((entry) => (
-                        <ExternalTreeNode
-                          key={entry.relaPath + entry.status}
-                          entry={entry}
-                          onCheck={checkEntry}
-                        />
-                      ))}
-                    </>
-                  )}
-                </div>
-              )}
-              secondSlot={({ style: innerStyle }) => (
-                <div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
-                  <Input
-                    className="!text-base font-sans rounded-md"
-                    placeholder="Commit message..."
-                    onChange={setMessage}
-                    stateKey={null}
-                    label="Commit message"
-                    fullHeight
-                    multiLine
-                    hideLabel
-                  />
-                  {commitError && <Banner color="danger">{commitError}</Banner>}
-                  <HStack alignItems="center" space={2}>
-                    <InlineCode>{status.data?.headRefShorthand}</InlineCode>
-                    <HStack space={2} className="ml-auto">
-                      <Button
-                        color="secondary"
-                        size="sm"
-                        onClick={handleCreateCommit}
-                        disabled={!hasAddedAnything || message.trim().length === 0}
-                        isLoading={isPushing}
-                      >
-                        Commit
-                      </Button>
-                      <Button
-                        color="primary"
-                        size="sm"
-                        disabled={!hasAddedAnything || message.trim().length === 0}
-                        onClick={handleCreateCommitAndPush}
-                        isLoading={isPushing}
-                      >
-                        Commit and Push
-                      </Button>
-                    </HStack>
-                  </HStack>
-                </div>
-              )}
-            />
-          </div>
-        )}
-        secondSlot={({ style }) => (
-          <div style={style} className="h-full px-4 border-l border-l-border-subtle">
-            {selectedEntry ? (
-              <DiffPanel entry={selectedEntry} />
-            ) : (
-              <EmptyStateText>Select a change to view diff</EmptyStateText>
-            )}
-          </div>
-        )}
-      />
-    </div>
-  );
-}
-
-function TreeNodeChildren({
-  node,
-  depth,
-  onCheck,
-  onSelect,
-  selectedPath,
-}: {
-  node: CommitTreeNode | null;
-  depth: number;
-  onCheck: (node: CommitTreeNode, checked: boolean) => void;
-  onSelect: (entry: GitStatusEntry) => void;
-  selectedPath: string | null;
-}) {
-  if (node === null) return null;
-  if (!isNodeRelevant(node)) return null;
-
-  const checked = nodeCheckedStatus(node);
-  const isSelected = selectedPath === node.status.relaPath;
-
-  return (
-    <div
-      className={classNames(
-        depth > 0 && "pl-4 ml-2 border-l border-dashed border-border-subtle relative",
-      )}
-    >
-      <div
-        className={classNames(
-          "relative flex gap-1 w-full h-xs items-center",
-          isSelected ? "text-text" : "text-text-subtle",
-        )}
-      >
-        {isSelected && (
-          <div className="absolute -left-[100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
-        )}
-        <Checkbox
-          checked={checked}
-          title={checked ? "Unstage change" : "Stage change"}
-          hideLabel
-          onChange={(checked) => onCheck(node, checked)}
-        />
-        <button
-          type="button"
-          className={classNames("flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left")}
-          onClick={() => node.status.status !== "current" && onSelect(node.status)}
-        >
-          {node.model.model !== "http_request" &&
-          node.model.model !== "grpc_request" &&
-          node.model.model !== "websocket_request" ? (
-            <Icon
-              color="secondary"
-              icon={
-                node.model.model === "folder"
-                  ? "folder"
-                  : node.model.model === "environment"
-                    ? "variable"
-                    : "house"
-              }
-            />
-          ) : (
-            <span aria-hidden className="w-4" />
-          )}
-          <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
-          {node.status.status !== "current" && (
-            <InlineCode
-              className={classNames(
-                "py-0 bg-transparent w-[6rem] text-center shrink-0",
-                node.status.status === "modified" && "text-info",
-                node.status.status === "untracked" && "text-success",
-                node.status.status === "removed" && "text-danger",
-              )}
-            >
-              {node.status.status}
-            </InlineCode>
-          )}
-        </button>
-      </div>
-
-      {node.children.map((childNode) => {
-        return (
-          <TreeNodeChildren
-            key={childNode.status.relaPath + childNode.status.status + childNode.status.staged}
-            node={childNode}
-            depth={depth + 1}
-            onCheck={onCheck}
-            onSelect={onSelect}
-            selectedPath={selectedPath}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-function ExternalTreeNode({
-  entry,
-  onCheck,
-}: {
-  entry: GitStatusEntry;
-  onCheck: (entry: GitStatusEntry) => void;
-}) {
-  if (entry.status === "current") {
-    return null;
-  }
-
-  return (
-    <Checkbox
-      fullWidth
-      className="h-xs w-full hover:bg-surface-highlight rounded px-1 group"
-      checked={entry.staged}
-      onChange={() => onCheck(entry)}
-      title={
-        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
-          <Icon color="secondary" icon="file_code" />
-          <div className="truncate">{entry.relaPath}</div>
-          <InlineCode
-            className={classNames(
-              "py-0 ml-auto bg-transparent w-[6rem] text-center",
-              entry.status === "modified" && "text-info",
-              entry.status === "untracked" && "text-success",
-              entry.status === "removed" && "text-danger",
-            )}
-          >
-            {entry.status}
-          </InlineCode>
-        </div>
-      }
-    />
-  );
-}
-
-function nodeCheckedStatus(root: CommitTreeNode): CheckboxProps["checked"] {
-  let numVisited = 0;
-  let numChecked = 0;
-  let numCurrent = 0;
-
-  const visitChildren = (n: CommitTreeNode) => {
-    numVisited += 1;
-    if (n.status.status === "current") {
-      numCurrent += 1;
-    } else if (n.status.staged) {
-      numChecked += 1;
-    }
-    for (const child of n.children) {
-      visitChildren(child);
-    }
-  };
-
-  visitChildren(root);
-
-  if (numVisited === numChecked + numCurrent) {
-    return true;
-  }
-  if (numChecked === 0) {
-    return false;
-  }
-  return "indeterminate";
-}
-
-function setCheckedAndChildren(
-  node: CommitTreeNode,
-  checked: boolean,
-  unstage: (args: { relaPaths: string[] }) => void,
-  add: (args: { relaPaths: string[] }) => void,
-) {
-  const toAdd: string[] = [];
-  const toUnstage: string[] = [];
-
-  const next = (node: CommitTreeNode) => {
-    for (const child of node.children) {
-      next(child);
-    }
-
-    if (node.status.status === "current") {
-      // Nothing required
-    } else if (checked && !node.status.staged) {
-      toAdd.push(node.status.relaPath);
-    } else if (!checked && node.status.staged) {
-      toUnstage.push(node.status.relaPath);
-    }
-  };
-
-  next(node);
-
-  if (toAdd.length > 0) add({ relaPaths: toAdd });
-  if (toUnstage.length > 0) unstage({ relaPaths: toUnstage });
-}
-
-function isNodeRelevant(node: CommitTreeNode): boolean {
-  if (node.status.status !== "current") {
-    return true;
-  }
-
-  // Recursively check children
-  return node.children.some((c) => isNodeRelevant(c));
-}
-
-function DiffPanel({ entry }: { entry: GitStatusEntry }) {
-  const prevYaml = modelToYaml(entry.prev);
-  const nextYaml = modelToYaml(entry.next);
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="text-sm text-text-subtle mb-2 px-1">
-        {resolvedModelName(entry.next ?? entry.prev)} ({entry.status})
-      </div>
-      <DiffViewer original={prevYaml ?? ""} modified={nextYaml ?? ""} className="flex-1 min-h-0" />
-    </div>
-  );
-}

apps/yaak-client/components/git/GitDropdown.tsx

@@ -1,654 +0,0 @@
-import { useGit } from "@yaakapp-internal/git";
-import type { WorkspaceMeta } from "@yaakapp-internal/models";
-import classNames from "classnames";
-import { useAtomValue } from "jotai";
-import type { HTMLAttributes } from "react";
-import { forwardRef } from "react";
-import { openWorkspaceSettings } from "../../commands/openWorkspaceSettings";
-import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../../hooks/useActiveWorkspace";
-import { useKeyValue } from "../../hooks/useKeyValue";
-import { useRandomKey } from "../../hooks/useRandomKey";
-import { sync } from "../../init/sync";
-import { showConfirm, showConfirmDelete } from "../../lib/confirm";
-import { fireAndForget } from "../../lib/fireAndForget";
-import { showDialog } from "../../lib/dialog";
-import { showPrompt } from "../../lib/prompt";
-import { showErrorToast, showToast } from "../../lib/toast";
-import type { DropdownItem } from "../core/Dropdown";
-import { Dropdown } from "../core/Dropdown";
-import { Banner, Icon, InlineCode } from "@yaakapp-internal/ui";
-import { gitCallbacks } from "./callbacks";
-import { GitCommitDialog } from "./GitCommitDialog";
-import { GitRemotesDialog } from "./GitRemotesDialog";
-import { handlePullResult, handlePushResult } from "./git-util";
-import { HistoryDialog } from "./HistoryDialog";
-
-export function GitDropdown() {
-  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
-  if (workspaceMeta == null) return null;
-
-  if (workspaceMeta.settingSyncDir == null) {
-    return <SetupSyncDropdown workspaceMeta={workspaceMeta} />;
-  }
-
-  return <SyncDropdownWithSyncDir syncDir={workspaceMeta.settingSyncDir} />;
-}
-
-function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
-  const workspace = useAtomValue(activeWorkspaceAtom);
-  const [refreshKey, regenerateKey] = useRandomKey();
-  const [
-    { status, log },
-    {
-      createBranch,
-      deleteBranch,
-      deleteRemoteBranch,
-      renameBranch,
-      mergeBranch,
-      push,
-      pull,
-      checkout,
-      resetChanges,
-      init,
-    },
-  ] = useGit(syncDir, gitCallbacks(syncDir), refreshKey);
-
-  const localBranches = status.data?.localBranches ?? [];
-  const remoteBranches = status.data?.remoteBranches ?? [];
-  const remoteOnlyBranches = remoteBranches.filter(
-    (b) => !localBranches.includes(b.replace(/^origin\//, "")),
-  );
-  if (workspace == null) {
-    return null;
-  }
-
-  const noRepo = status.error?.includes("not found");
-  if (noRepo) {
-    return <SetupGitDropdown workspaceId={workspace.id} initRepo={init.mutate} />;
-  }
-
-  // Still loading
-  if (status.data == null) {
-    return null;
-  }
-
-  const currentBranch = status.data.headRefShorthand;
-  const hasChanges = status.data.entries.some((e) => e.status !== "current");
-  const _hasRemotes = (status.data.origins ?? []).length > 0;
-  const { ahead, behind } = status.data;
-
-  const tryCheckout = (branch: string, force: boolean) => {
-    checkout.mutate(
-      { branch, force },
-      {
-        disableToastError: true,
-        async onError(err) {
-          if (!force) {
-            // Checkout failed so ask user if they want to force it
-            const forceCheckout = await showConfirm({
-              id: "git-force-checkout",
-              title: "Conflicts Detected",
-              description:
-                "Your branch has conflicts. Either make a commit or force checkout to discard changes.",
-              confirmText: "Force Checkout",
-              color: "warning",
-            });
-            if (forceCheckout) {
-              tryCheckout(branch, true);
-            }
-          } else {
-            // Checkout failed
-            showErrorToast({
-              id: "git-checkout-error",
-              title: "Error checking out branch",
-              message: String(err),
-            });
-          }
-        },
-        async onSuccess(branchName) {
-          showToast({
-            id: "git-checkout-success",
-            message: (
-              <>
-                Switched branch <InlineCode>{branchName}</InlineCode>
-              </>
-            ),
-            color: "success",
-          });
-          await sync({ force: true });
-        },
-      },
-    );
-  };
-
-  const items: DropdownItem[] = [
-    {
-      label: "View History...",
-      hidden: (log.data ?? []).length === 0,
-      leftSlot: <Icon icon="history" />,
-      onSelect: async () => {
-        showDialog({
-          id: "git-history",
-          size: "md",
-          title: "Commit History",
-          noPadding: true,
-          render: () => <HistoryDialog log={log.data ?? []} />,
-        });
-      },
-    },
-    {
-      label: "Manage Remotes...",
-      leftSlot: <Icon icon="hard_drive_download" />,
-      onSelect: () => GitRemotesDialog.show(syncDir),
-    },
-    { type: "separator" },
-    {
-      label: "New Branch...",
-      leftSlot: <Icon icon="git_branch_plus" />,
-      async onSelect() {
-        const name = await showPrompt({
-          id: "git-branch-name",
-          title: "Create Branch",
-          label: "Branch Name",
-        });
-        if (!name) return;
-
-        await createBranch.mutateAsync(
-          { branch: name },
-          {
-            disableToastError: true,
-            onError: (err) => {
-              showErrorToast({
-                id: "git-branch-error",
-                title: "Error creating branch",
-                message: String(err),
-              });
-            },
-          },
-        );
-        tryCheckout(name, false);
-      },
-    },
-    { type: "separator" },
-    {
-      label: "Push",
-      leftSlot: <Icon icon="arrow_up_from_line" />,
-      waitForOnSelect: true,
-      async onSelect() {
-        await push.mutateAsync(undefined, {
-          disableToastError: true,
-          onSuccess: handlePushResult,
-          onError(err) {
-            showErrorToast({
-              id: "git-push-error",
-              title: "Error pushing changes",
-              message: String(err),
-            });
-          },
-        });
-      },
-    },
-    {
-      label: "Pull",
-      leftSlot: <Icon icon="arrow_down_to_line" />,
-      waitForOnSelect: true,
-      async onSelect() {
-        await pull.mutateAsync(undefined, {
-          disableToastError: true,
-          onSuccess: handlePullResult,
-          onError(err) {
-            showErrorToast({
-              id: "git-pull-error",
-              title: "Error pulling changes",
-              message: String(err),
-            });
-          },
-        });
-      },
-    },
-    {
-      label: "Commit...",
-
-      leftSlot: <Icon icon="git_commit_vertical" />,
-      onSelect() {
-        showDialog({
-          id: "commit",
-          title: "Commit Changes",
-          size: "full",
-          noPadding: true,
-          render: ({ hide }) => (
-            <GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
-          ),
-        });
-      },
-    },
-    {
-      label: "Reset Changes",
-      hidden: !hasChanges,
-      leftSlot: <Icon icon="rotate_ccw" />,
-      color: "danger",
-      async onSelect() {
-        const confirmed = await showConfirm({
-          id: "git-reset-changes",
-          title: "Reset Changes",
-          description: "This will discard all uncommitted changes. This cannot be undone.",
-          confirmText: "Reset",
-          color: "danger",
-        });
-        if (!confirmed) return;
-
-        await resetChanges.mutateAsync(undefined, {
-          disableToastError: true,
-          onSuccess() {
-            showToast({
-              id: "git-reset-success",
-              message: "Changes have been reset",
-              color: "success",
-            });
-            fireAndForget(sync({ force: true }));
-          },
-          onError(err) {
-            showErrorToast({
-              id: "git-reset-error",
-              title: "Error resetting changes",
-              message: String(err),
-            });
-          },
-        });
-      },
-    },
-    { type: "separator", label: "Branches", hidden: localBranches.length < 1 },
-    ...localBranches.map((branch) => {
-      const isCurrent = currentBranch === branch;
-      return {
-        label: branch,
-        leftSlot: <Icon icon={isCurrent ? "check" : "empty"} />,
-        submenuOpenOnClick: true,
-        submenu: [
-          {
-            label: "Checkout",
-            hidden: isCurrent,
-            onSelect: () => tryCheckout(branch, false),
-          },
-          {
-            label: (
-              <>
-                Merge into <InlineCode>{currentBranch}</InlineCode>
-              </>
-            ),
-            hidden: isCurrent,
-            async onSelect() {
-              await mergeBranch.mutateAsync(
-                { branch },
-                {
-                  disableToastError: true,
-                  onSuccess() {
-                    showToast({
-                      id: "git-merged-branch",
-                      message: (
-                        <>
-                          Merged <InlineCode>{branch}</InlineCode> into{" "}
-                          <InlineCode>{currentBranch}</InlineCode>
-                        </>
-                      ),
-                    });
-                    fireAndForget(sync({ force: true }));
-                  },
-                  onError(err) {
-                    showErrorToast({
-                      id: "git-merged-branch-error",
-                      title: "Error merging branch",
-                      message: String(err),
-                    });
-                  },
-                },
-              );
-            },
-          },
-          {
-            label: "New Branch...",
-            async onSelect() {
-              const name = await showPrompt({
-                id: "git-new-branch-from",
-                title: "New Branch",
-                description: (
-                  <>
-                    Create a new branch from <InlineCode>{branch}</InlineCode>
-                  </>
-                ),
-                label: "Branch Name",
-              });
-              if (!name) return;
-
-              await createBranch.mutateAsync(
-                { branch: name, base: branch },
-                {
-                  disableToastError: true,
-                  onError: (err) => {
-                    showErrorToast({
-                      id: "git-branch-error",
-                      title: "Error creating branch",
-                      message: String(err),
-                    });
-                  },
-                },
-              );
-              tryCheckout(name, false);
-            },
-          },
-          {
-            label: "Rename...",
-            async onSelect() {
-              const newName = await showPrompt({
-                id: "git-rename-branch",
-                title: "Rename Branch",
-                label: "New Branch Name",
-                defaultValue: branch,
-              });
-              if (!newName || newName === branch) return;
-
-              await renameBranch.mutateAsync(
-                { oldName: branch, newName },
-                {
-                  disableToastError: true,
-                  onSuccess() {
-                    showToast({
-                      id: "git-rename-branch-success",
-                      message: (
-                        <>
-                          Renamed <InlineCode>{branch}</InlineCode> to{" "}
-                          <InlineCode>{newName}</InlineCode>
-                        </>
-                      ),
-                      color: "success",
-                    });
-                  },
-                  onError(err) {
-                    showErrorToast({
-                      id: "git-rename-branch-error",
-                      title: "Error renaming branch",
-                      message: String(err),
-                    });
-                  },
-                },
-              );
-            },
-          },
-          { type: "separator", hidden: isCurrent },
-          {
-            label: "Delete",
-            color: "danger",
-            hidden: isCurrent,
-            onSelect: async () => {
-              const confirmed = await showConfirmDelete({
-                id: "git-delete-branch",
-                title: "Delete Branch",
-                description: (
-                  <>
-                    Permanently delete <InlineCode>{branch}</InlineCode>?
-                  </>
-                ),
-              });
-              if (!confirmed) {
-                return;
-              }
-
-              const result = await deleteBranch.mutateAsync(
-                { branch },
-                {
-                  disableToastError: true,
-                  onError(err) {
-                    showErrorToast({
-                      id: "git-delete-branch-error",
-                      title: "Error deleting branch",
-                      message: String(err),
-                    });
-                  },
-                },
-              );
-
-              if (result.type === "not_fully_merged") {
-                const confirmed = await showConfirm({
-                  id: "force-branch-delete",
-                  title: "Branch not fully merged",
-                  description: (
-                    <>
-                      <p>
-                        Branch <InlineCode>{branch}</InlineCode> is not fully merged.
-                      </p>
-                      <p>Do you want to delete it anyway?</p>
-                    </>
-                  ),
-                });
-                if (confirmed) {
-                  await deleteBranch.mutateAsync(
-                    { branch, force: true },
-                    {
-                      disableToastError: true,
-                      onError(err) {
-                        showErrorToast({
-                          id: "git-force-delete-branch-error",
-                          title: "Error force deleting branch",
-                          message: String(err),
-                        });
-                      },
-                    },
-                  );
-                }
-              }
-            },
-          },
-        ],
-      } satisfies DropdownItem;
-    }),
-    ...remoteOnlyBranches.map((branch) => {
-      const isCurrent = currentBranch === branch;
-      return {
-        label: branch,
-        leftSlot: <Icon icon={isCurrent ? "check" : "empty"} />,
-        submenuOpenOnClick: true,
-        submenu: [
-          {
-            label: "Checkout",
-            hidden: isCurrent,
-            onSelect: () => tryCheckout(branch, false),
-          },
-          {
-            label: "Delete",
-            color: "danger",
-            async onSelect() {
-              const confirmed = await showConfirmDelete({
-                id: "git-delete-remote-branch",
-                title: "Delete Remote Branch",
-                description: (
-                  <>
-                    Permanently delete <InlineCode>{branch}</InlineCode> from the remote?
-                  </>
-                ),
-              });
-              if (!confirmed) return;
-
-              await deleteRemoteBranch.mutateAsync(
-                { branch },
-                {
-                  disableToastError: true,
-                  onSuccess() {
-                    showToast({
-                      id: "git-delete-remote-branch-success",
-                      message: (
-                        <>
-                          Deleted remote branch <InlineCode>{branch}</InlineCode>
-                        </>
-                      ),
-                      color: "success",
-                    });
-                  },
-                  onError(err) {
-                    showErrorToast({
-                      id: "git-delete-remote-branch-error",
-                      title: "Error deleting remote branch",
-                      message: String(err),
-                    });
-                  },
-                },
-              );
-            },
-          },
-        ],
-      } satisfies DropdownItem;
-    }),
-  ];
-
-  return (
-    <Dropdown fullWidth items={items} onOpen={regenerateKey}>
-      <GitMenuButton>
-        <InlineCode className="flex items-center gap-1">
-          <Icon icon="git_branch" size="xs" className="opacity-50" />
-          {currentBranch}
-        </InlineCode>
-        <div className="flex items-center gap-1.5">
-          {ahead > 0 && (
-            <span className="text-xs flex items-center gap-0.5">
-              <span className="text-primary">↗</span>
-              {ahead}
-            </span>
-          )}
-          {behind > 0 && (
-            <span className="text-xs flex items-center gap-0.5">
-              <span className="text-info">↙</span>
-              {behind}
-            </span>
-          )}
-        </div>
-      </GitMenuButton>
-    </Dropdown>
-  );
-}
-
-const GitMenuButton = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  function GitMenuButton({ className, ...props }: HTMLAttributes<HTMLButtonElement>, ref) {
-    return (
-      <button
-        ref={ref}
-        className={classNames(
-          className,
-          "px-3 h-md border-t border-border flex items-center justify-between text-text-subtle outline-none focus-visible:bg-surface-highlight",
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta }) {
-  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
-    key: "setup_sync",
-    fallback: {},
-  });
-
-  if (hidden == null || hidden[workspaceMeta.workspaceId]) {
-    return null;
-  }
-
-  const banner = (
-    <Banner color="info">
-      When enabled, workspace data syncs to the chosen folder as text files, ideal for backup and
-      Git collaboration.
-    </Banner>
-  );
-
-  return (
-    <Dropdown
-      fullWidth
-      items={[
-        {
-          type: "content",
-          label: banner,
-        },
-        {
-          color: "success",
-          label: "Open Workspace Settings",
-          leftSlot: <Icon icon="settings" />,
-          onSelect: () => openWorkspaceSettings("data"),
-        },
-        { type: "separator" },
-        {
-          label: "Hide This Message",
-          leftSlot: <Icon icon="eye_closed" />,
-          async onSelect() {
-            const confirmed = await showConfirm({
-              id: "hide-sync-menu-prompt",
-              title: "Hide Setup Message",
-              description: "You can configure filesystem sync or Git it in the workspace settings",
-            });
-            if (confirmed) {
-              await setHidden((prev) => ({ ...prev, [workspaceMeta.workspaceId]: true }));
-            }
-          },
-        },
-      ]}
-    >
-      <GitMenuButton>
-        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
-          <Icon icon="wrench" />
-          <div className="truncate">Setup FS Sync or Git</div>
-        </div>
-      </GitMenuButton>
-    </Dropdown>
-  );
-}
-
-function SetupGitDropdown({
-  workspaceId,
-  initRepo,
-}: {
-  workspaceId: string;
-  initRepo: () => void;
-}) {
-  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
-    key: "setup_git_repo",
-    fallback: {},
-  });
-
-  if (hidden == null || hidden[workspaceId]) {
-    return null;
-  }
-
-  const banner = <Banner color="info">Initialize local repo to start versioning with Git</Banner>;
-
-  return (
-    <Dropdown
-      fullWidth
-      items={[
-        { type: "content", label: banner },
-        {
-          label: "Initialize Git Repo",
-          leftSlot: <Icon icon="magic_wand" />,
-          onSelect: initRepo,
-        },
-        { type: "separator" },
-        {
-          label: "Hide This Message",
-          leftSlot: <Icon icon="eye_closed" />,
-          async onSelect() {
-            const confirmed = await showConfirm({
-              id: "hide-git-init-prompt",
-              title: "Hide Git Setup",
-              description: "You can initialize a git repo outside of Yaak to bring this back",
-            });
-            if (confirmed) {
-              await setHidden((prev) => ({ ...prev, [workspaceId]: true }));
-            }
-          },
-        },
-      ]}
-    >
-      <GitMenuButton>
-        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
-          <Icon icon="folder_git" />
-          <div className="truncate">Setup Git</div>
-        </div>
-      </GitMenuButton>
-    </Dropdown>
-  );
-}

apps/yaak-client/components/git/callbacks.tsx

@@ -1,26 +0,0 @@
-import type { GitCallbacks } from "@yaakapp-internal/git";
-import { sync } from "../../init/sync";
-import { promptCredentials } from "./credentials";
-import { promptDivergedStrategy } from "./diverged";
-import { addGitRemote } from "./showAddRemoteDialog";
-import { promptUncommittedChangesStrategy } from "./uncommitted";
-
-export function gitCallbacks(dir: string): GitCallbacks {
-  return {
-    addRemote: async () => {
-      return addGitRemote(dir, "origin");
-    },
-    promptCredentials: async ({ url, error }) => {
-      const creds = await promptCredentials({ url, error });
-      if (creds == null) throw new Error("Cancelled credentials prompt");
-      return creds;
-    },
-    promptDiverged: async ({ remote, branch }) => {
-      return promptDivergedStrategy({ remote, branch });
-    },
-    promptUncommittedChanges: async () => {
-      return promptUncommittedChangesStrategy();
-    },
-    forceSync: () => sync({ force: true }),
-  };
-}

apps/yaak-client/components/git/credentials.tsx

@@ -1,49 +0,0 @@
-import { showPromptForm } from "../../lib/prompt-form";
-import { Banner, InlineCode } from "@yaakapp-internal/ui";
-
-export interface GitCredentials {
-  username: string;
-  password: string;
-}
-
-export async function promptCredentials({
-  url: remoteUrl,
-  error,
-}: {
-  url: string;
-  error: string | null;
-}): Promise<GitCredentials | null> {
-  const isGitHub = /github\.com/i.test(remoteUrl);
-  const userLabel = isGitHub ? "GitHub Username" : "Username";
-  const passLabel = isGitHub ? "GitHub Personal Access Token" : "Password / Token";
-  const userDescription = isGitHub ? "Use your GitHub username (not your email)." : undefined;
-  const passDescription = isGitHub
-    ? "GitHub requires a Personal Access Token (PAT) for write operations over HTTPS. Passwords are not supported."
-    : "Enter your password or access token for this Git server.";
-  const r = await showPromptForm({
-    id: "git-credentials",
-    title: "Credentials Required",
-    description: error ? (
-      <Banner color="danger">{error}</Banner>
-    ) : (
-      <>
-        Enter credentials for <InlineCode>{remoteUrl}</InlineCode>
-      </>
-    ),
-    inputs: [
-      { type: "text", name: "username", label: userLabel, description: userDescription },
-      {
-        type: "text",
-        name: "password",
-        label: passLabel,
-        description: passDescription,
-        password: true,
-      },
-    ],
-  });
-  if (r == null) return null;
-
-  const username = String(r.username || "");
-  const password = String(r.password || "");
-  return { username, password };
-}

apps/yaak-client/components/git/diverged.tsx

@@ -1,102 +0,0 @@
-import type { DivergedStrategy } from "@yaakapp-internal/git";
-import { HStack, InlineCode } from "@yaakapp-internal/ui";
-import { useState } from "react";
-import { showDialog } from "../../lib/dialog";
-import { Button } from "../core/Button";
-import { RadioCards } from "../core/RadioCards";
-
-type Resolution = "force_reset" | "merge";
-
-const resolutionLabel: Record<Resolution, string> = {
-  force_reset: "Force Pull",
-  merge: "Merge",
-};
-
-interface DivergedDialogProps {
-  remote: string;
-  branch: string;
-  onResult: (strategy: DivergedStrategy) => void;
-  onHide: () => void;
-}
-
-function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProps) {
-  const [selected, setSelected] = useState<Resolution | null>(null);
-
-  const handleSubmit = () => {
-    if (selected == null) return;
-    onResult(selected);
-    onHide();
-  };
-
-  const handleCancel = () => {
-    onResult("cancel");
-    onHide();
-  };
-
-  return (
-    <div className="flex flex-col gap-4 mb-4">
-      <p className="text-text-subtle">
-        Your local branch has diverged from{" "}
-        <InlineCode>
-          {remote}/{branch}
-        </InlineCode>
-        . How would you like to resolve this?
-      </p>
-      <RadioCards
-        name="diverged-strategy"
-        value={selected}
-        onChange={setSelected}
-        options={[
-          {
-            value: "merge",
-            label: "Merge Commit",
-            description: "Combining local and remote changes into a single merge commit",
-          },
-          {
-            value: "force_reset",
-            label: "Force Pull",
-            description: "Discard local commits and reset to match the remote branch",
-          },
-        ]}
-      />
-      <HStack space={2} justifyContent="start" className="flex-row-reverse">
-        <Button
-          color={selected === "force_reset" ? "danger" : "primary"}
-          disabled={selected == null}
-          onClick={handleSubmit}
-        >
-          {selected != null ? resolutionLabel[selected] : "Select an option"}
-        </Button>
-        <Button variant="border" onClick={handleCancel}>
-          Cancel
-        </Button>
-      </HStack>
-    </div>
-  );
-}
-
-export async function promptDivergedStrategy({
-  remote,
-  branch,
-}: {
-  remote: string;
-  branch: string;
-}): Promise<DivergedStrategy> {
-  return new Promise((resolve) => {
-    showDialog({
-      id: "git-diverged",
-      title: "Branches Diverged",
-      hideX: true,
-      size: "sm",
-      disableBackdropClose: true,
-      onClose: () => resolve("cancel"),
-      render: ({ hide }) =>
-        DivergedDialog({
-          remote,
-          branch,
-          onHide: hide,
-          onResult: resolve,
-        }),
-    });
-  });
-}

apps/yaak-client/components/git/git-util.ts

@@ -1,36 +0,0 @@
-import type { PullResult, PushResult } from "@yaakapp-internal/git";
-import { showToast } from "../../lib/toast";
-
-export function handlePushResult(r: PushResult) {
-  switch (r.type) {
-    case "needs_credentials":
-      showToast({ id: "push-error", message: "Credentials not found", color: "danger" });
-      break;
-    case "success":
-      showToast({ id: "push-success", message: r.message, color: "success" });
-      break;
-    case "up_to_date":
-      showToast({ id: "push-nothing", message: "Already up-to-date", color: "info" });
-      break;
-  }
-}
-
-export function handlePullResult(r: PullResult) {
-  switch (r.type) {
-    case "needs_credentials":
-      showToast({ id: "pull-error", message: "Credentials not found", color: "danger" });
-      break;
-    case "success":
-      showToast({ id: "pull-success", message: r.message, color: "success" });
-      break;
-    case "up_to_date":
-      showToast({ id: "pull-nothing", message: "Already up-to-date", color: "info" });
-      break;
-    case "diverged":
-      // Handled by mutation callback before reaching here
-      break;
-    case "uncommitted_changes":
-      // Handled by mutation callback before reaching here
-      break;
-  }
-}

apps/yaak-client/components/git/showAddRemoteDialog.tsx

@@ -1,20 +0,0 @@
-import type { GitRemote } from "@yaakapp-internal/git";
-import { gitMutations } from "@yaakapp-internal/git";
-import { showPromptForm } from "../../lib/prompt-form";
-import { gitCallbacks } from "./callbacks";
-
-export async function addGitRemote(dir: string, defaultName?: string): Promise<GitRemote> {
-  const r = await showPromptForm({
-    id: "add-remote",
-    title: "Add Remote",
-    inputs: [
-      { type: "text", label: "Name", name: "name", defaultValue: defaultName },
-      { type: "text", label: "URL", name: "url" },
-    ],
-  });
-  if (r == null) throw new Error("Cancelled remote prompt");
-
-  const name = String(r.name ?? "");
-  const url = String(r.url ?? "");
-  return gitMutations(dir, gitCallbacks(dir)).addRemote.mutateAsync({ name, url });
-}