chore(desktop): release v0.0.3

The collapsed reasoning block header showed 'Thought process · Complete'
with a brain icon; PM feedback is that the status text and icon read as
noise. The trigger is now just the label + disclosure chevron, with
'Thinking' as the default label in both streaming and complete states.
Removes the now-unused cline-chat-reasoning-status style and BrainIcon.

.agents/skills/publish-desktop

@@ -0,0 +1 @@
+../../.cline/skills/publish-desktop

.claude/skills/publish-desktop

@@ -0,0 +1 @@
+../../.cline/skills/publish-desktop

.cline/skills/publish-desktop/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: publish-desktop
+description: Use when preparing, tagging, and publishing a Cline Code desktop app (apps/examples/desktop-app) release. Guides changelog drafting, version bumps in package.json + tauri.conf.json, desktop-vX.Y.Z tags, and the desktop-publish GitHub workflow that builds, signs, notarizes, and updates the auto-update feed.
+---
+
+# Desktop App Release
+
+Use this skill when the user asks to release the desktop app, publish Cline Code, bump the desktop version, create a `desktop-vX.Y.Z` tag, or trigger the desktop publish workflow.
+
+> Working directory: run every command below from the repository root.
+
+Desktop releases are macOS-only today (signed + notarized DMG for Apple Silicon and Intel) and are built entirely in GitHub Actions — there is no local publish path. Installed apps discover new releases automatically through the Tauri updater, so publishing a release is what ships the update to every existing user.
+
+## Release contract
+
+- Version sources (must match each other and the tag): `apps/examples/desktop-app/package.json` and `apps/examples/desktop-app/src-tauri/tauri.conf.json`. (`src-tauri/Cargo.toml` has its own version but `tauri.conf.json` overrides it; no need to touch it.)
+- Release tag: `desktop-vX.Y.Z`, where `X.Y.Z` matches both version files.
+- Release prep includes approved release notes, the version bumps, and an `apps/examples/desktop-app/CHANGELOG.md` update.
+- Publish path: `.github/workflows/desktop-publish.yml` (workflow_dispatch, requires the tag to exist, point at the checked-out commit, and be reachable from `origin/main`).
+- The workflow creates the `desktop-vX.Y.Z` GitHub release (DMGs + updater artifacts + `latest.json`) and refreshes the rolling `desktop-latest` release, which is the static auto-update feed every installed app polls. Never delete the `desktop-latest` release or tag.
+- The changelog's top `## X.Y.Z` section is extracted verbatim into the GitHub release body, the Slack announcement, and the updater manifest notes.
+- Always ask before pushing commits or tags.
+
+## Workflow
+
+1. Gather context.
+
+```sh
+git status --short --branch
+git fetch origin --tags
+git tag --list 'desktop-v*' --sort=-v:refname | head -10
+node -p "require('./apps/examples/desktop-app/package.json').version"
+node -p "require('./apps/examples/desktop-app/src-tauri/tauri.conf.json').version"
+```
+
+If there is no `desktop-v*` tag yet, this is the first release; use the desktop app's first commit as the baseline and say the baseline is inferred.
+
+2. Collect release commits.
+
+```sh
+git log <last-desktop-tag>..HEAD --oneline --no-merges -- apps/examples/desktop-app sdk/packages .github/workflows/desktop-publish.yml
+```
+
+The sidecar bundles `@cline/core` and friends from the monorepo, so SDK changes ship inside the desktop app too. Fold user-visible SDK changes (providers, models, behavior fixes) into the notes; skip purely internal ones.
+
+3. Draft user-facing release notes.
+
+Flat bullet list, user-facing language. Present the draft and wait for approval before editing files.
+
+4. Decide the version bump.
+
+Ask whether this is patch, minor, major, or an explicit version. Do not guess if the user has not made it clear.
+
+5. Update release files.
+
+- `apps/examples/desktop-app/package.json` → new version
+- `apps/examples/desktop-app/src-tauri/tauri.conf.json` → same version
+- Prepend `## X.Y.Z` (no date) to `apps/examples/desktop-app/CHANGELOG.md` with the approved notes.
+
+6. Verify before committing.
+
+```sh
+bun -F @cline/code typecheck
+bun test apps/examples/desktop-app/scripts/generate-update-manifest.test.ts
+```
+
+The full desktop bundle can only be built on macOS; the workflow's build job is the real verification. For extra local confidence on a Mac checkout, `bun run package:desktop:mac --allow-unsigned-mac` from the app directory.
+
+7. Commit release changes.
+
+```sh
+git add apps/examples/desktop-app/package.json apps/examples/desktop-app/src-tauri/tauri.conf.json apps/examples/desktop-app/CHANGELOG.md
+git commit -m "chore(desktop): release vX.Y.Z"
+```
+
+Ask before pushing the release commit, then before creating and pushing the tag:
+
+```sh
+git push origin HEAD
+git tag -a desktop-vX.Y.Z -m "Desktop vX.Y.Z"
+git push origin refs/tags/desktop-vX.Y.Z
+```
+
+8. Publish.
+
+The release commit must be on `main` and the tag pushed first.
+
+```sh
+gh workflow run desktop-publish.yml -f git_tag=desktop-vX.Y.Z -f confirm_publish=publish
+gh run list --workflow=desktop-publish.yml --limit=1 --json url,status,conclusion,createdAt --jq '.[0]'
+```
+
+The workflow builds both architectures in parallel (aarch64 native, x86_64 cross-compiled), signs with the Developer ID certificate, notarizes with the App Store Connect API key, signs updater artifacts with the Tauri updater key, creates the GitHub release, refreshes `desktop-latest/latest.json`, and posts to Slack. Notarization typically adds 2–10 minutes.
+
+If the workflow fails on missing credentials, see "Repo secrets (one-time setup)" below.
+
+9. Verify the update feed after the run succeeds.
+
+```sh
+curl -sL https://github.com/cline/cline/releases/download/desktop-latest/latest.json | head -30
+```
+
+The `version` field must be the new release and both `darwin-aarch64` and `darwin-x86_64` URLs must point at the new `desktop-vX.Y.Z` assets. Installed apps pick the update up on next launch or within 2 hours.
+
+10. Final response.
+
+Report: version, tag, changelog updated, commit hash, what was pushed, workflow URL, and the feed verification result.
+
+## Repo secrets (one-time setup)
+
+The workflow needs these repository secrets. The Apple ones come from the same
+Apple Developer account used for manual signing (see the app README's "macOS
+signing & notarization" section for how to obtain them):
+
+| Secret | Value |
+| --- | --- |
+| `APPLE_CERTIFICATE` | Base64 of the **Developer ID Application** identity exported from Keychain Access as `.p12` (must include the private key): `base64 -i certificate.p12 \| pbcopy` |
+| `APPLE_CERTIFICATE_PASSWORD` | The password chosen when exporting the `.p12` |
+| `APPLE_SIGNING_IDENTITY` | `Developer ID Application: <Team Name> (<TEAMID>)` — from `security find-identity -v -p codesigning` |
+| `APPLE_API_KEY` | App Store Connect API **Key ID** (notarization) |
+| `APPLE_API_KEY_CONTENT` | Contents of the `AuthKey_<KEYID>.p8` file |
+| `APPLE_API_ISSUER` | App Store Connect **Issuer ID** (UUID from Users and Access → Integrations) |
+| `TAURI_SIGNING_PRIVATE_KEY` | Contents of the Tauri updater private key (`tauri signer generate`). If this key is ever lost, shipped apps can no longer verify updates — guard it. |
+| `TAURI_SIGNING_PRIVATE_KEY_PASSWORD` | Password for that key |
+
+The Slack + telemetry secrets (`SLACK_RELEASE_BOT_TOKEN`, `TELEMETRY_SERVICE_API_KEY`,
+OTEL settings) are shared with the CLI publish workflow and already configured.

.cline/skills/publish-ui/SKILL.md

@@ -0,0 +1,158 @@
+---
+name: publish-ui
+description: Prepare, validate, and publish standalone @cline/ui npm releases. Use when bumping the UI package version, publishing latest or next through ui-publish.yml, checking UI release readiness, or completing the one-time npm trusted-publishing bootstrap.
+---
+
+# Publish UI
+
+Release `@cline/ui` independently from the Cline SDK runtime packages.
+
+## Release contract
+
+- Version source: `sdk/packages/ui/package.json`.
+- Workflow: `.github/workflows/ui-publish.yml`.
+- The package keeps `internal: true` only to stay out of the SDK's shared
+  version/publish scripts. It is still a public npm package because
+  `private: false` and `publishConfig.access: public` control npm publication.
+- `latest` is the production channel. `next` is an opt-in preview channel.
+- Use prerelease versions such as `0.2.0-next.0` for `next`; do not publish a
+  version intended for `latest` under the preview tag because npm versions
+  cannot be republished.
+- There is no UI Git tag, GitHub release, schedule, or Slack announcement.
+- The workflow runs only by manual dispatch. Every release attempt runs the UI
+  quality checks before publishing and requires `confirm_publish=publish` from
+  `main`.
+- The publish job and npm trust relationship use the protected `Publish`
+  environment.
+- Every npm publication needs a new semver version; npm versions are immutable.
+- Always ask before pushing commits, triggering the publish workflow, changing
+  npm trust settings, or running a local publish command.
+
+## Normal release
+
+1. Inspect the branch, current version, npm state, and UI changes.
+
+```sh
+git status --short --branch
+node -p "require('./sdk/packages/ui/package.json').version"
+npm view @cline/ui dist-tags versions --json
+git log --oneline --no-merges -- \
+  sdk/packages/ui apps/examples/desktop-app/webview/components/views/chat \
+  .github/workflows/ui-publish.yml
+```
+
+2. Ask for the npm channel and version together. For `latest`, ask for patch,
+   minor, major, or an explicit version. For `next`, require an explicit
+   prerelease version such as `0.2.0-next.0`. Do not guess. Update only
+   `sdk/packages/ui/package.json` and its workspace version in `bun.lock`. Do
+   not run the SDK version command.
+
+3. Validate the release candidate.
+
+```sh
+bun install --filter @cline/ui --filter @cline/code --frozen-lockfile
+bun -F @cline/ui typecheck
+bun -F @cline/ui test
+bun -F @cline/ui test:package
+bun -F @cline/ui build-storybook
+bun -F @cline/code test:chat-ui
+```
+
+The packed-package test installs the tarball with Bun/React 19 and with
+npm/Node/React 18.
+Inspect `bun pm pack --dry-run` when the exported file set changed.
+
+4. Commit the version bump separately from feature work. Ask before pushing.
+
+```sh
+git add sdk/packages/ui/package.json bun.lock
+git commit -m "chore(ui): release vX.Y.Z"
+git push origin HEAD
+```
+
+5. After the release commit reaches `main`, restate the selected npm tag and ask
+   for explicit publish approval. Then trigger and watch the standalone
+   workflow:
+
+```sh
+run_url=$(gh workflow run ui-publish.yml --ref main \
+  -f npm_tag=latest \
+  -f confirm_publish=publish)
+test -n "$run_url"
+run_id=${run_url##*/}
+gh run watch "$run_id" --exit-status
+```
+
+Use `npm_tag=next` only for a deliberate preview. Do not report success until
+the workflow succeeds and npm shows the exact version under the selected tag.
+
+```sh
+npm view @cline/ui dist-tags versions --json
+```
+
+## One-time npm bootstrap
+
+Use this only while `npm view @cline/ui` returns `E404`. npm requires the
+package to exist before its GitHub trusted publisher can be configured.
+
+1. Merge the package and `ui-publish.yml` to `main`. Start from a clean,
+   reviewed `main` checkout. Verify authentication, account 2FA, and write
+   access to the `@cline` npm organization. The `npm trust` command in step 4
+   requires npm CLI 11.15 or newer; the automated trusted-publishing workflow
+   itself enforces npm 11.5.1 or newer.
+
+```sh
+npm --version
+npm whoami
+npm view @cline/ui version
+```
+
+If npm is older than 11.15, ask before upgrading with
+`npm install -g npm@^11.15.0`.
+
+2. Run the normal release validation in step 3 above. Then build, pack, test,
+   and inspect the exact initial tarball. Record the absolute archive path
+   printed by the final command.
+
+```sh
+bun -F @cline/ui build
+pack_dir=$(mktemp -d)
+(cd sdk/packages/ui && bun pm pack --ignore-scripts --destination "$pack_dir" --quiet)
+tarball=$(find "$pack_dir" -maxdepth 1 -name '*.tgz' -print -quit)
+test -n "$tarball"
+bun sdk/packages/ui/scripts/smoke-package.ts "$tarball"
+tar -tzf "$tarball"
+printf 'Bootstrap archive: %s\n' "$tarball"
+```
+
+3. Ask for explicit approval, then publish the initial version publicly under
+   `latest`:
+
+```sh
+npm publish /absolute/path/from-step-2.tgz --access public --tag latest
+```
+
+4. Ask separately before configuring the standalone workflow as the trusted
+   publisher:
+
+```sh
+npm trust github @cline/ui \
+  --repo cline/cline \
+  --file ui-publish.yml \
+  --env Publish \
+  --allow-publish
+```
+
+5. Verify both package state and trust. Every later release uses the workflow;
+   do not add a long-lived npm token.
+
+```sh
+npm view @cline/ui dist-tags versions --json
+npm trust list @cline/ui
+```
+
+## Final report
+
+Report the version and npm tag, release commit, whether anything was pushed,
+workflow URL or bootstrap result, npm verification, and tests/builds run. If
+the package still returns `E404`, state that bootstrap remains required.

.cline/skills/publish-ui/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Publish UI"
+  short_description: "Prepare and publish the Cline UI package"
+  default_prompt: "Use $publish-ui to prepare and publish a new @cline/ui npm release."

.clinerules/debug-harness.md

@@ -8,8 +8,9 @@ HTTP-controlled debugger for the VSCode extension at `src/dev/debug-harness/serv
 # Build extension first if needed (protos + esbuild):
 bun run protos && IS_DEV=true bun esbuild.mjs
 
-# Launch (skip-build if already built):
-bun src/dev/debug-harness/server.ts --skip-build --auto-launch
+# Launch (skip-build if already built). Run with node, NOT bun — Playwright's
+# Electron launch times out under bun:
+node src/dev/debug-harness/server.ts --skip-build --auto-launch
 
 # In another terminal:
 curl localhost:19229/api -d '{"method":"status"}'

.clinerules/general.md

@@ -16,6 +16,7 @@ This file is the secret sauce for working effectively in this codebase. It captu
 - The whole repo (including `apps/vscode`) uses **bun** for package management and task running. Emit `bun run X` / `bun install` / `bunx <bin>` / `bun file.ts`, never npm/npx. Node remains the *runtime* (VS Code's extension host and the standalone cline-core are Node), so Node-runtime tokens are legitimate and must not be "fixed" to bun — see @.clinerules/bun-and-node.md for the keep-list vs rewrite-list.
 - Avoid provider-specific string matching / hardcoded provider branches when fixing provider/config plumbing. Prefer provider metadata, shared catalog/defaults, explicit protocol/client capabilities, or centralized normalization utilities that apply by data shape rather than `providerId === "..."`. If a provider exception seems necessary, stop and explain why instead of adding ad-hoc string matching.
 - This is a VS Code extension—check `package.json` for available scripts before trying to verify builds (e.g., `bun run compile`, not `bun run build`).
+- When reading a configuration files that users may edit, use `readFileStrippingUtf8Bom`, `readFileSyncStrippingUtf8Bom`, or `stripUtf8Bom` from `@cline/shared/node`. DON'T strip byte order marks of user files handled by tools/passed to models.
 - When creating PRs, contributors should not create changelog-entry files. Maintainers handle release versioning and changelog curation during the release process.
 - When adding new feature flags, see this PR as a reference https://github.com/cline/cline/pull/7566
 - Additional instructions about making requests: @.clinerules/network.md

.github/workflows/desktop-publish.yml

@@ -0,0 +1,310 @@
+name: desktop-publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      git_tag:
+        description: "Existing release tag to publish, for example desktop-v0.1.0"
+        required: true
+        type: string
+      confirm_publish:
+        description: 'Type "publish" to confirm the desktop release.'
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+defaults:
+  run:
+    working-directory: .
+
+jobs:
+  validate:
+    name: Validate release tag
+    if: |
+      github.repository == 'cline/cline' &&
+      github.event.inputs.confirm_publish == 'publish' &&
+      !endsWith(github.actor, '[bot]')
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+      tag: ${{ steps.version.outputs.tag }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.git_tag }}
+          fetch-depth: 0
+          fetch-tags: true
+
+      - name: Validate release tag
+        id: version
+        env:
+          TAG: ${{ github.event.inputs.git_tag }}
+        run: |
+          if ! printf "%s\n" "$TAG" | grep -Eq '^desktop-v[0-9]+\.[0-9]+\.[0-9]+(-[0-9A-Za-z.-]+)?$'; then
+            echo "git_tag must look like desktop-vX.Y.Z, got: ${TAG}"
+            exit 1
+          fi
+
+          VERSION="${TAG#desktop-v}"
+          PACKAGE_VERSION=$(node -p "require('./apps/examples/desktop-app/package.json').version")
+          TAURI_VERSION=$(node -p "require('./apps/examples/desktop-app/src-tauri/tauri.conf.json').version")
+
+          if [ "$PACKAGE_VERSION" != "$VERSION" ]; then
+            echo "apps/examples/desktop-app/package.json version ${PACKAGE_VERSION} does not match ${TAG}"
+            exit 1
+          fi
+
+          if [ "$TAURI_VERSION" != "$VERSION" ]; then
+            echo "apps/examples/desktop-app/src-tauri/tauri.conf.json version ${TAURI_VERSION} does not match ${TAG}"
+            exit 1
+          fi
+
+          TAG_COMMIT=$(git rev-parse "${TAG}^{commit}")
+          HEAD_COMMIT=$(git rev-parse HEAD)
+          if [ "$TAG_COMMIT" != "$HEAD_COMMIT" ]; then
+            echo "${TAG} does not point at the checked out commit"
+            exit 1
+          fi
+
+          git fetch origin +main:refs/remotes/origin/main
+          if ! git merge-base --is-ancestor "$HEAD_COMMIT" origin/main; then
+            echo "${TAG} is not reachable from origin/main"
+            exit 1
+          fi
+
+          echo "version=${VERSION}" >> "$GITHUB_OUTPUT"
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+
+  build:
+    name: Build macOS (${{ matrix.arch }})
+    needs: validate
+    runs-on: macos-latest
+    timeout-minutes: 90
+    strategy:
+      fail-fast: true
+      matrix:
+        include:
+          - target: aarch64-apple-darwin
+            arch: aarch64
+          - target: x86_64-apple-darwin
+            arch: x86_64
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ needs.validate.outputs.tag }}
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: "1.3.13"
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.target }}
+
+      - name: Cache Rust build
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: apps/examples/desktop-app/src-tauri
+          key: ${{ matrix.target }}
+
+      - name: Install dependencies
+        run: bun install
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build SDK packages
+        run: bun run build:sdk
+        env:
+          TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
+          ERROR_SERVICE_API_KEY: ${{ secrets.ERROR_SERVICE_API_KEY }}
+          OTEL_TELEMETRY_ENABLED: ${{ secrets.OTEL_TELEMETRY_ENABLED }}
+          OTEL_LOGS_EXPORTER: otlp
+          OTEL_METRICS_EXPORTER: otlp
+          OTEL_EXPORTER_OTLP_PROTOCOL: ${{ secrets.OTEL_EXPORTER_OTLP_PROTOCOL }}
+          OTEL_EXPORTER_OTLP_ENDPOINT: ${{ secrets.OTEL_EXPORTER_OTLP_ENDPOINT }}
+          OTEL_EXPORTER_OTLP_HEADERS: ${{ secrets.OTEL_EXPORTER_OTLP_HEADERS }}
+
+      - name: Write App Store Connect API key
+        env:
+          APPLE_API_KEY_CONTENT: ${{ secrets.APPLE_API_KEY_CONTENT }}
+        run: |
+          if [ -z "$APPLE_API_KEY_CONTENT" ]; then
+            echo "APPLE_API_KEY_CONTENT secret is not configured"
+            exit 1
+          fi
+          printf "%s" "$APPLE_API_KEY_CONTENT" > "$RUNNER_TEMP/AuthKey.p8"
+
+      - name: Build, sign, and notarize desktop bundle
+        working-directory: apps/examples/desktop-app
+        run: bunx tauri build --target ${{ matrix.target }} --config src-tauri/tauri.release.conf.json
+        env:
+          # Developer ID signing (Tauri imports the cert into a temp keychain)
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          # Notarization via App Store Connect API key. Tauri reads the Key ID
+          # from APPLE_API_KEY; APPLE_API_KEY_ID alone silently skips notarization.
+          APPLE_API_KEY: ${{ secrets.APPLE_API_KEY }}
+          APPLE_API_KEY_PATH: ${{ runner.temp }}/AuthKey.p8
+          APPLE_API_ISSUER: ${{ secrets.APPLE_API_ISSUER }}
+          # Updater artifact signing (minisign keypair, independent of Apple)
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+
+      - name: Collect artifacts
+        working-directory: apps/examples/desktop-app
+        env:
+          VERSION: ${{ needs.validate.outputs.version }}
+          ARCH: ${{ matrix.arch }}
+          TARGET: ${{ matrix.target }}
+        run: |
+          BUNDLE_DIR="src-tauri/target/${TARGET}/release/bundle"
+          OUT="dist/publish"
+          mkdir -p "$OUT"
+
+          DMG=$(find "$BUNDLE_DIR/dmg" -name '*.dmg' -print -quit)
+          if [ -z "$DMG" ]; then
+            echo "no DMG produced under $BUNDLE_DIR/dmg"
+            exit 1
+          fi
+          cp "$DMG" "$OUT/Cline-Code_${VERSION}_${ARCH}.dmg"
+
+          TARBALL=$(find "$BUNDLE_DIR/macos" -name '*.app.tar.gz' -print -quit)
+          if [ -z "$TARBALL" ] || [ ! -f "${TARBALL}.sig" ]; then
+            echo "updater artifact or signature missing under $BUNDLE_DIR/macos"
+            exit 1
+          fi
+          cp "$TARBALL" "$OUT/Cline-Code_${VERSION}_${ARCH}.app.tar.gz"
+          cp "${TARBALL}.sig" "$OUT/Cline-Code_${VERSION}_${ARCH}.app.tar.gz.sig"
+
+          ls -lh "$OUT"
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: desktop-${{ matrix.arch }}
+          path: apps/examples/desktop-app/dist/publish/*
+          if-no-files-found: error
+
+  release:
+    name: Create GitHub release
+    needs: [validate, build]
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ needs.validate.outputs.tag }}
+          fetch-depth: 0
+          fetch-tags: true
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: "1.3.13"
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: dist/desktop
+          merge-multiple: true
+
+      - name: Get Changelog Entry
+        id: changelog
+        run: |
+          # Grab content between the first "## " header and the next one
+          CONTENT=$(awk '/^## [0-9]/{if(found) exit; found=1; next} found{print}' apps/examples/desktop-app/CHANGELOG.md)
+          echo "content<<EOF" >> $GITHUB_OUTPUT
+          echo "$CONTENT" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+          printf "%s\n" "$CONTENT" > "$RUNNER_TEMP/release-notes.md"
+
+      - name: Generate updater manifest
+        env:
+          VERSION: ${{ needs.validate.outputs.version }}
+          TAG: ${{ needs.validate.outputs.tag }}
+        run: |
+          bun apps/examples/desktop-app/scripts/generate-update-manifest.ts \
+            --version "$VERSION" \
+            --tag "$TAG" \
+            --dir dist/desktop \
+            --out dist/desktop/latest.json \
+            --repo "$GITHUB_REPOSITORY" \
+            --notes-file "$RUNNER_TEMP/release-notes.md"
+          cat dist/desktop/latest.json
+
+      - name: Get Previous Desktop Tag
+        id: prev_tag
+        env:
+          CURRENT_TAG: ${{ needs.validate.outputs.tag }}
+        run: |
+          PREV_TAG=$(git describe --tags --abbrev=0 --match 'desktop-v*' "$CURRENT_TAG^" 2>/dev/null || echo "")
+          echo "prev_tag=$PREV_TAG" >> $GITHUB_OUTPUT
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: ${{ needs.validate.outputs.tag }}
+          name: "Desktop v${{ needs.validate.outputs.version }}"
+          # The repo-wide "latest" release stays owned by CLI releases; the
+          # desktop auto-update feed is the rolling desktop-latest release.
+          make_latest: "false"
+          files: dist/desktop/*
+          body: |
+            ${{ steps.changelog.outputs.content }}
+
+            ${{ steps.prev_tag.outputs.prev_tag != '' && format('**Full Changelog**: https://github.com/{0}/compare/{1}...{2}', github.repository, steps.prev_tag.outputs.prev_tag, needs.validate.outputs.tag) || '' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Update auto-update feed (desktop-latest)
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if ! gh release view desktop-latest >/dev/null 2>&1; then
+            gh release create desktop-latest \
+              --title "Cline Code desktop (auto-update feed)" \
+              --notes "Rolling release backing the desktop app auto-updater. The latest.json asset points at the newest desktop-vX.Y.Z release. Do not delete." \
+              --latest=false \
+              --target "$(git rev-parse HEAD)"
+          fi
+          gh release upload desktop-latest dist/desktop/latest.json --clobber
+
+      - name: Summary
+        env:
+          VERSION: ${{ needs.validate.outputs.version }}
+          TAG: ${{ needs.validate.outputs.tag }}
+        run: |
+          echo "Published Cline Code desktop v${VERSION}"
+          echo "Release: https://github.com/${GITHUB_REPOSITORY}/releases/tag/${TAG}"
+          echo "Auto-update feed refreshed: https://github.com/${GITHUB_REPOSITORY}/releases/download/desktop-latest/latest.json"
+
+      - name: Post release to Slack
+        uses: slackapi/slack-github-action@v3.0.1
+        with:
+          method: chat.postMessage
+          token: ${{ secrets.SLACK_RELEASE_BOT_TOKEN }}
+          payload: |
+            channel: "C0APVKGGZFC"
+            text: "Cline Code desktop v${{ needs.validate.outputs.version }}"
+            blocks:
+              - type: "section"
+                text:
+                  type: "mrkdwn"
+                  text: "Cline Code desktop v${{ needs.validate.outputs.version }}"
+              - type: "section"
+                text:
+                  type: "mrkdwn"
+                  text: ${{ toJSON(steps.changelog.outputs.content) }}
+              - type: "context"
+                elements:
+                  - type: "mrkdwn"
+                    text: "<https://github.com/${{ github.repository }}/releases/tag/${{ needs.validate.outputs.tag }}|Download DMG> — installed apps auto-update on next launch${{ steps.prev_tag.outputs.prev_tag != '' && format(' | Full Changelog: https://github.com/{0}/compare/{1}...{2}', github.repository, steps.prev_tag.outputs.prev_tag, needs.validate.outputs.tag) || '' }}"

.github/workflows/ext-vscode-ab-package.yml

@@ -0,0 +1,205 @@
+name: ext-vscode-ab-package
+
+# Build (and optionally publish) the combined A/B VSIX: a tiny loader plus two
+# complete extension bundles — `next/` from the SDK-based apps/vscode on main,
+# `legacy/` from the legacy-extension branch. Cohort selection happens at
+# runtime via PostHog flags; see apps/vscode-rollout/README.md for the design
+# and the rollout runbook.
+
+on:
+    workflow_dispatch:
+        inputs:
+            version:
+                description: "Combined VSIX version — must exceed every previously published version (e.g. 4.1.0)"
+                required: true
+                type: string
+            next-ref:
+                description: "Ref to build the next (SDK) bundle from"
+                required: true
+                default: "main"
+                type: string
+            legacy-ref:
+                description: "Ref to build the legacy bundle from"
+                required: true
+                default: "legacy-extension"
+                type: string
+            publish:
+                description: "Publish to the VS Code Marketplace (unchecked: just build the .vsix artifact)"
+                required: true
+                default: false
+                type: boolean
+
+permissions:
+    contents: read
+
+concurrency:
+    group: ext-vscode-ab-package-${{ github.event.inputs.version }}
+    cancel-in-progress: false
+
+jobs:
+    package:
+        name: Build combined (legacy + next) VSIX
+        runs-on: ubuntu-latest
+        environment: publish
+        steps:
+            - name: Checkout next (SDK) source
+              uses: actions/checkout@v4
+              with:
+                  ref: ${{ github.event.inputs.next-ref }}
+                  path: next-src
+                  lfs: true
+
+            - name: Checkout legacy source
+              uses: actions/checkout@v4
+              with:
+                  ref: ${{ github.event.inputs.legacy-ref }}
+                  path: legacy-src
+                  lfs: true
+
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: 1.3.14
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 22
+
+            - name: Install next workspace dependencies
+              working-directory: next-src
+              run: bun install
+
+            # @cline/* are local workspace symlinks to source packages; apps/vscode's
+            # `package` script does NOT build them, so without this the esbuild step
+            # fails on a fresh checkout. (The nightly workflow already does this.)
+            - name: Build SDK packages
+              working-directory: next-src
+              run: bun run build:sdk
+
+            # Stamp the combined version into each bundle's package.json AFTER
+            # install and BEFORE its build: the About tab and telemetry
+            # extension_version read the bundle's own manifest, so without this
+            # the VSIX reports three different versions depending on where you
+            # look. (The nightly workflow gets the same alignment via nightlify.mjs.)
+            - name: Align next bundle version
+              working-directory: next-src/apps/vscode-rollout
+              run: node scripts/set-version.mjs --dir "$GITHUB_WORKSPACE/next-src/apps/vscode" --version "${{ github.event.inputs.version }}"
+
+            - name: Build next bundle
+              working-directory: next-src/apps/vscode
+              env:
+                  CLINE_ENVIRONMENT: production
+                  TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
+                  ERROR_SERVICE_API_KEY: ${{ secrets.ERROR_SERVICE_API_KEY }}
+                  # Inlined by esbuild: attributes every telemetry event with
+                  # extension_variant and unlocks the bundle's authoritative
+                  # extension.rollout.bundle_activated capture. Rollout builds only.
+                  CLINE_ROLLOUT_VARIANT: next
+                  # Match the stable publish workflow's OpenTelemetry production defaults.
+                  OTEL_TELEMETRY_ENABLED: ${{ secrets.OTEL_TELEMETRY_ENABLED }}
+                  OTEL_LOGS_EXPORTER: otlp
+                  OTEL_METRICS_EXPORTER: otlp
+                  OTEL_EXPORTER_OTLP_PROTOCOL: ${{ secrets.OTEL_EXPORTER_OTLP_PROTOCOL }}
+                  OTEL_EXPORTER_OTLP_ENDPOINT: ${{ secrets.OTEL_EXPORTER_OTLP_ENDPOINT }}
+                  OTEL_EXPORTER_OTLP_HEADERS: ${{ secrets.OTEL_EXPORTER_OTLP_HEADERS }}
+              run: bun run package
+
+            - name: Install legacy dependencies
+              working-directory: legacy-src
+              run: |
+                  npm --prefix apps/vscode install --include=optional
+                  npm --prefix apps/vscode/webview-ui install --include=optional
+
+            - name: Align legacy bundle version
+              working-directory: next-src/apps/vscode-rollout
+              run: node scripts/set-version.mjs --dir "$GITHUB_WORKSPACE/legacy-src/apps/vscode" --version "${{ github.event.inputs.version }}"
+
+            - name: Build legacy bundle
+              working-directory: legacy-src/apps/vscode
+              env:
+                  CLINE_ENVIRONMENT: production
+                  TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
+                  ERROR_SERVICE_API_KEY: ${{ secrets.ERROR_SERVICE_API_KEY }}
+                  CLINE_ROLLOUT_VARIANT: legacy
+                  # Match the stable publish workflow's OpenTelemetry production defaults.
+                  OTEL_TELEMETRY_ENABLED: ${{ secrets.OTEL_TELEMETRY_ENABLED }}
+                  OTEL_LOGS_EXPORTER: otlp
+                  OTEL_METRICS_EXPORTER: otlp
+                  OTEL_EXPORTER_OTLP_PROTOCOL: ${{ secrets.OTEL_EXPORTER_OTLP_PROTOCOL }}
+                  OTEL_EXPORTER_OTLP_ENDPOINT: ${{ secrets.OTEL_EXPORTER_OTLP_ENDPOINT }}
+                  OTEL_EXPORTER_OTLP_HEADERS: ${{ secrets.OTEL_EXPORTER_OTLP_HEADERS }}
+              run: npm run package
+
+            - name: Build loader and run rollout tests
+              working-directory: next-src/apps/vscode-rollout
+              env:
+                  TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
+              run: |
+                  bun run typecheck
+                  bun run test
+                  bun run build:production
+
+            - name: Stitch combined VSIX staging
+              working-directory: next-src/apps/vscode-rollout
+              run: |
+                  node scripts/stitch.mjs \
+                    --next "$GITHUB_WORKSPACE/next-src/apps/vscode" \
+                    --legacy "$GITHUB_WORKSPACE/legacy-src/apps/vscode" \
+                    --loader dist/extension.js \
+                    --version "${{ github.event.inputs.version }}" \
+                    --out "$GITHUB_WORKSPACE/staging"
+
+            - name: Smoke-test loader against staging
+              working-directory: next-src/apps/vscode-rollout
+              run: node scripts/smoke-loader.mjs "$GITHUB_WORKSPACE/staging"
+
+            # This workflow publishes the STABLE identity. If nightlify ever leaks
+            # into this path the union manifest would ship under the wrong name.
+            # The bundle sub-manifest checks guard the set-version.mjs stamping:
+            # the About tab and telemetry extension_version read those files.
+            - name: Assert stable manifest identity
+              working-directory: staging
+              env:
+                  EXPECTED_VERSION: ${{ github.event.inputs.version }}
+              run: |
+                  node -e '
+                    const assert = require("node:assert");
+                    const expected = process.env.EXPECTED_VERSION;
+                    const pkg = require("./package.json");
+                    assert.equal(pkg.name, "claude-dev", `unexpected name ${pkg.name}`);
+                    assert.equal(pkg.publisher, "saoudrizwan", `unexpected publisher ${pkg.publisher}`);
+                    assert.equal(pkg.version, expected, `unexpected union version ${pkg.version}`);
+                    for (const bundle of ["next", "legacy"]) {
+                      const sub = require(`./${bundle}/package.json`);
+                      assert.equal(sub.version, expected, `unexpected ${bundle} bundle version ${sub.version}`);
+                    }
+                    console.log(`stable identity ok: ${pkg.publisher}.${pkg.name}@${pkg.version} (bundle versions aligned)`);
+                  '
+
+            - name: Package VSIX
+              working-directory: staging
+              run: |
+                  npm install -g @vscode/vsce
+                  # Preserve the narrowly scoped VSCE `sendgrid` scanner exemption used by
+                  # both standalone bundle workflows. No SendGrid credential is intentionally
+                  # supplied here; inspect the reported artifact before widening the exemption.
+                  vsce package --no-dependencies --allow-package-secrets sendgrid --out "claude-dev-${{ github.event.inputs.version }}.vsix"
+
+            - name: Upload VSIX artifact
+              uses: actions/upload-artifact@v4
+              with:
+                  name: claude-dev-${{ github.event.inputs.version }}
+                  path: staging/claude-dev-${{ github.event.inputs.version }}.vsix
+                  if-no-files-found: error
+
+            - name: Publish to Marketplace
+              if: ${{ github.event.inputs.publish == 'true' }}
+              working-directory: staging
+              env:
+                  VSCE_PAT: ${{ secrets.VSCE_PAT }}
+              run: |
+                  if [[ -z "$VSCE_PAT" ]]; then
+                    echo "Error: VSCE_PAT is required to publish."
+                    exit 1
+                  fi
+                  vsce publish --no-dependencies --packagePath "claude-dev-${{ github.event.inputs.version }}.vsix"

.github/workflows/ext-vscode-publish-nightly.yml

@@ -1,17 +1,40 @@
 name: ext-vscode-publish-nightly
 
+# Publishes saoudrizwan.cline-nightly as the COMBINED A/B VSIX: the rollout
+# loader plus two complete extension bundles — `next/` from this ref's
+# apps/vscode (SDK-based) and `legacy/` from the legacy-extension branch.
+# Cohort selection happens at runtime via PostHog flags; see
+# apps/vscode-rollout/README.md for the design and rollout runbook.
+#
+# The stable-identity equivalent of this pipeline is ext-vscode-ab-package.yml
+# (manual dispatch, publishes claude-dev). Shared logic lives in
+# apps/vscode-rollout/scripts (nightlify/gen-manifest/stitch/smoke) so both
+# workflows stay thin. The single-bundle nightly path this replaced
+# (apps/vscode/scripts/publish-nightly.mjs) remains for manual feature-branch
+# pre-release publishes.
+
 on:
   schedule:
     # Every day at 4:00 AM PST (12:00 UTC)
     - cron: "0 12 * * *"
   workflow_dispatch:
+    inputs:
+      legacy-ref:
+        description: "Ref to build the legacy bundle from"
+        required: false
+        default: "legacy-extension"
+        type: string
+      dry-run:
+        description: "Build and upload the .vsix artifact without publishing or tagging"
+        required: false
+        default: false
+        type: boolean
 
-run-name: "Publish Nightly from ${{ github.ref_name }} @ ${{ github.sha }}"
+run-name: "Publish Combined Nightly from ${{ github.ref_name }} @ ${{ github.sha }}"
 
-# Prevent concurrent publish runs on the same branch. The nightly publish script
-# generates the extension version from a seconds-resolution timestamp, so parallel
-# runs on the same ref can collide on the same version and cause publish failures
-# or inconsistent tagging. Runs on different branches proceed independently.
+# Prevent concurrent publish runs on the same branch: the version is generated
+# from a seconds-resolution timestamp, so parallel runs on the same ref can
+# collide on the same version and cause publish failures or inconsistent tagging.
 concurrency:
   group: ext-vscode-publish-nightly-${{ github.ref }}
   cancel-in-progress: false
@@ -20,7 +43,7 @@ permissions: {}
 
 jobs:
   test:
-    if: github.repository == 'cline/cline' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dpc/sdk-migration-simpler-login')
+    if: github.repository == 'cline/cline'
     permissions:
       contents: read
       pull-requests: read
@@ -30,60 +53,79 @@ jobs:
     needs: test
     permissions:
       contents: write
-    name: Publish Cline (Nightly) Extension
-    if: github.repository == 'cline/cline' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dpc/sdk-migration-simpler-login')
+    name: Publish Cline (Nightly) Combined Extension
+    # Defense in depth: only protected main may enter the publishing environment.
+    # This `if` is advisory because a dispatched branch runs its own copy of this
+    # file; the enforced gate is the PublishNightly environment's deployment-branch
+    # policy, which must also allow only main.
+    if: github.repository == 'cline/cline' && github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
     environment: PublishNightly
-    # The VS Code extension's package.json and lockfiles live under apps/vscode/
-    # (the repo root has no package.json). Mirror ext-vscode-test.yml so install
-    # and publish steps run in the correct workspace.
-    defaults:
-      run:
-        working-directory: apps/vscode
 
     steps:
-      - name: Checkout selected branch
+      - name: Checkout next (SDK) source
         uses: actions/checkout@v4
         with:
           ref: ${{ github.sha }}
+          path: next-src
           lfs: true
           persist-credentials: false
 
-      - name: Show build source
-        working-directory: ${{ github.workspace }}
+      - name: Checkout legacy source
+        uses: actions/checkout@v4
+        with:
+          # NOTE: inputs are empty strings on `schedule` events, so the ||
+          # fallback (not the input's declared default) is what the cron uses.
+          ref: ${{ inputs.legacy-ref || 'legacy-extension' }}
+          path: legacy-src
+          lfs: true
+          persist-credentials: false
+
+      - name: Show build sources
+        env:
+          # Routed through env rather than interpolated into the script body so
+          # a crafted dispatch input can't inject shell (hygiene: dispatchers
+          # need write access anyway, but keep the pattern clean).
+          LEGACY_REF: ${{ inputs.legacy-ref || 'legacy-extension' }}
         run: |
-          echo "Building ref: $GITHUB_REF"
-          echo "Building sha: $GITHUB_SHA"
-          git --no-pager log -1 --oneline
+          echo "next:   $(git -C next-src rev-parse HEAD)"
+          echo "legacy: $(git -C legacy-src rev-parse HEAD) ($LEGACY_REF)"
 
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
         with:
           bun-version: 1.3.14
 
-      # Node is still REQUIRED in the publish job (not just for install): the publish
-      # scripts run as `node ./scripts/publish-*.mjs` and shell out to `npx ovsx`.
-      # setup-bun does not provide a Node runtime, so keep setup-node here.
-      # Pinned to Node 22 because newer LTS (Node 24 / npm 11) can make vsce's
-      # `npm list` dependency detection fail with ELSPROBLEMS during packaging.
+      # Node is required beyond install: the rollout scripts run under node and
+      # publishing shells out to vsce/ovsx. Pinned to Node 22 because newer LTS
+      # (Node 24 / npm 11) can make vsce's dependency detection fail.
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
 
-      # Single root install resolves the whole bun workspace at once (replaces the
-      # per-package `npm ci` steps for apps/vscode + webview-ui).
-      - name: Install workspace dependencies
-        working-directory: ${{ github.workspace }}
+      # ONE version for the next bundle, the legacy bundle, and the union
+      # manifest: gen-manifest hard-fails if the bundle identities diverge.
+      # Same scheme as the standalone nightly: <major>.<minor>.<unix-seconds>
+      # from next's base version, so it keeps outranking earlier nightlies.
+      - name: Compute nightly version
+        id: version
+        run: |
+          BASE=$(node -p "require('./next-src/apps/vscode/package.json').version")
+          VERSION="$(echo "$BASE" | cut -d. -f1,2).$(date +%s)"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "Combined nightly version: $VERSION (base $BASE)"
+
+      - name: Install next workspace dependencies
+        working-directory: next-src
         run: bun install --frozen-lockfile
 
-      # @cline/* are local workspace symlinks to source packages; build dist/ before
-      # packaging/publishing the extension.
       - name: Build SDK packages
-        working-directory: ${{ github.workspace }}
+        working-directory: next-src
         run: bun run build:sdk
 
       - name: Assert better-sqlite3 native binary present
+        working-directory: next-src/apps/vscode
         run: |
           NODE_FILE="node_modules/better-sqlite3/build/Release/better_sqlite3.node"
           if [ ! -f "$NODE_FILE" ]; then
@@ -93,20 +135,24 @@ jobs:
           fi
           echo "Found better-sqlite3 native binary: $NODE_FILE"
 
-      # vsce is now a workspace devDependency (on node_modules/.bin), but ovsx is not
-      # vendored and the publish script invokes it via `npx ovsx`, so install ovsx
-      # globally here (npm is available via setup-node). vsce is installed globally
-      # too to preserve the script's existing PATH expectations.
-      - name: Install Publishing Tools
-        run: npm install -g @vscode/vsce ovsx
+      # Rewrite each bundle's package.json to the cline-nightly identity BEFORE
+      # its build (runtime command/config IDs derive from the manifest) and
+      # AFTER dependency install (workspace self-links key off the original
+      # package name).
+      - name: Nightlify next bundle manifest
+        working-directory: next-src/apps/vscode-rollout
+        run: node scripts/nightlify.mjs --dir "$GITHUB_WORKSPACE/next-src/apps/vscode" --version "${{ steps.version.outputs.version }}"
 
-      - name: Publish Nightly Extension
+      - name: Build next bundle
+        working-directory: next-src/apps/vscode
         env:
-          VSCE_PAT: ${{ secrets.VSCE_PAT }}
-          OVSX_PAT: ${{ secrets.OVSX_PAT }}
+          CLINE_ENVIRONMENT: production
           TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
           ERROR_SERVICE_API_KEY: ${{ secrets.ERROR_SERVICE_API_KEY }}
-          CLINE_ENVIRONMENT: production
+          # Inlined by esbuild: attributes every telemetry event with
+          # extension_variant and unlocks the bundle's authoritative
+          # extension.rollout.bundle_activated capture. Rollout builds only.
+          CLINE_ROLLOUT_VARIANT: next
           # OpenTelemetry production defaults (can be overridden at runtime)
           OTEL_TELEMETRY_ENABLED: ${{ secrets.OTEL_TELEMETRY_ENABLED }}
           OTEL_LOGS_EXPORTER: otlp
@@ -114,12 +160,129 @@ jobs:
           OTEL_EXPORTER_OTLP_PROTOCOL: ${{ secrets.OTEL_EXPORTER_OTLP_PROTOCOL }}
           OTEL_EXPORTER_OTLP_ENDPOINT: ${{ secrets.OTEL_EXPORTER_OTLP_ENDPOINT }}
           OTEL_EXPORTER_OTLP_HEADERS: ${{ secrets.OTEL_EXPORTER_OTLP_HEADERS }}
-        # The script itself runs under `node ./scripts/publish-nightly.mjs`; bun run
-        # just launches it. Node + npm (for `npx ovsx`) are provided by setup-node above.
-        run: bun run publish:marketplace:nightly
+        run: bun run package
+
+      - name: Install legacy dependencies
+        working-directory: legacy-src
+        run: |
+          npm --prefix apps/vscode install --include=optional
+          npm --prefix apps/vscode/webview-ui install --include=optional
+
+      - name: Nightlify legacy bundle manifest
+        working-directory: next-src/apps/vscode-rollout
+        run: node scripts/nightlify.mjs --dir "$GITHUB_WORKSPACE/legacy-src/apps/vscode" --version "${{ steps.version.outputs.version }}"
+
+      - name: Build legacy bundle
+        working-directory: legacy-src/apps/vscode
+        env:
+          CLINE_ENVIRONMENT: production
+          TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
+          ERROR_SERVICE_API_KEY: ${{ secrets.ERROR_SERVICE_API_KEY }}
+          CLINE_ROLLOUT_VARIANT: legacy
+          # Legacy's esbuild inlines these too (its own publish workflow passes
+          # them) — omitting them here would ship the legacy bundle with the
+          # OTel pipeline dead, unlike what legacy users get today.
+          OTEL_TELEMETRY_ENABLED: ${{ secrets.OTEL_TELEMETRY_ENABLED }}
+          OTEL_LOGS_EXPORTER: otlp
+          OTEL_METRICS_EXPORTER: otlp
+          OTEL_EXPORTER_OTLP_PROTOCOL: ${{ secrets.OTEL_EXPORTER_OTLP_PROTOCOL }}
+          OTEL_EXPORTER_OTLP_ENDPOINT: ${{ secrets.OTEL_EXPORTER_OTLP_ENDPOINT }}
+          OTEL_EXPORTER_OTLP_HEADERS: ${{ secrets.OTEL_EXPORTER_OTLP_HEADERS }}
+        run: npm run package
+
+      - name: Build loader and run rollout tests
+        working-directory: next-src/apps/vscode-rollout
+        env:
+          TELEMETRY_SERVICE_API_KEY: ${{ secrets.TELEMETRY_SERVICE_API_KEY }}
+        run: |
+          bun run typecheck
+          bun run test
+          bun run build:production
+
+      - name: Stitch combined VSIX staging
+        working-directory: next-src/apps/vscode-rollout
+        run: |
+          node scripts/stitch.mjs \
+            --next "$GITHUB_WORKSPACE/next-src/apps/vscode" \
+            --legacy "$GITHUB_WORKSPACE/legacy-src/apps/vscode" \
+            --loader dist/extension.js \
+            --version "${{ steps.version.outputs.version }}" \
+            --out "$GITHUB_WORKSPACE/staging"
+
+      - name: Smoke-test loader against staging
+        working-directory: next-src/apps/vscode-rollout
+        run: node scripts/smoke-loader.mjs "$GITHUB_WORKSPACE/staging"
+
+      # The nightly identity must have fully propagated (nightlify -> both
+      # bundle manifests -> union manifest) or we'd publish over the stable
+      # extension ID. The bundle sub-manifest checks guard the version
+      # stamping: the About tab and telemetry extension_version read those.
+      - name: Assert nightly manifest identity
+        working-directory: staging
+        env:
+          EXPECTED_VERSION: ${{ steps.version.outputs.version }}
+        run: |
+          node -e '
+            const assert = require("node:assert");
+            const expected = process.env.EXPECTED_VERSION;
+            const pkg = require("./package.json");
+            assert.equal(pkg.name, "cline-nightly", `unexpected name ${pkg.name}`);
+            assert.equal(pkg.publisher, "saoudrizwan", `unexpected publisher ${pkg.publisher}`);
+            assert.equal(pkg.version, expected, `unexpected union version ${pkg.version}`);
+            for (const bundle of ["next", "legacy"]) {
+              const sub = require(`./${bundle}/package.json`);
+              assert.equal(sub.name, "cline-nightly", `unexpected ${bundle} bundle name ${sub.name}`);
+              assert.equal(sub.version, expected, `unexpected ${bundle} bundle version ${sub.version}`);
+            }
+            console.log(`nightly identity ok: ${pkg.publisher}.${pkg.name}@${pkg.version} (bundle identities aligned)`);
+          '
+
+      - name: Install Publishing Tools
+        run: npm install -g @vscode/vsce ovsx
+
+      - name: Package VSIX
+        working-directory: staging
+        # Preserve the narrowly scoped VSCE `sendgrid` scanner exemption used by
+        # both standalone bundle workflows. No SendGrid credential is intentionally
+        # supplied here; inspect the reported artifact before widening the exemption.
+        run: vsce package --no-dependencies --allow-package-secrets sendgrid --out "cline-nightly-${{ steps.version.outputs.version }}.vsix"
+
+      - name: Upload VSIX artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: cline-nightly-${{ steps.version.outputs.version }}
+          path: staging/cline-nightly-${{ steps.version.outputs.version }}.vsix
+          if-no-files-found: error
+
+      # The job is main-only; step-level dry-run gating still permits a build-only
+      # rehearsal without publishing or tagging.
+      - name: Publish to VS Code Marketplace and Open VSX
+        if: github.ref == 'refs/heads/main' && inputs.dry-run != true
+        working-directory: staging
+        env:
+          VSCE_PAT: ${{ secrets.VSCE_PAT }}
+          OVSX_PAT: ${{ secrets.OVSX_PAT }}
+        run: |
+          if [[ -z "$VSCE_PAT" ]]; then
+            echo "Error: VSCE_PAT is required to publish."
+            exit 1
+          fi
+          vsce publish --no-dependencies --packagePath "cline-nightly-${{ steps.version.outputs.version }}.vsix"
+          if [[ -n "$OVSX_PAT" ]]; then
+            npx ovsx publish --packagePath "cline-nightly-${{ steps.version.outputs.version }}.vsix" --pat "$OVSX_PAT"
+          else
+            echo "WARNING: OVSX_PAT not set; skipping Open VSX publish."
+          fi
 
       - name: Tag published commit
-        working-directory: ${{ github.workspace }}
+        if: github.ref == 'refs/heads/main' && inputs.dry-run != true
+        # Best-effort bookkeeping: the default GITHUB_TOKEN cannot create a ref
+        # whose commit modifies workflow files (no workflows permission exists
+        # for it), so this step fails whenever HEAD touched .github/workflows.
+        # The publish already succeeded by this point — don't mark the run red;
+        # push the tag manually with user credentials when it matters.
+        continue-on-error: true
+        working-directory: next-src
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
@@ -127,10 +290,11 @@ jobs:
           SHORT_SHA=$(git rev-parse --short=12 HEAD)
           TIMESTAMP=$(date -u +"%Y%m%d%H%M%S")
           TAG="nightly-${SAFE_REF}-${TIMESTAMP}-${SHORT_SHA}"
+          LEGACY_SHA=$(git -C "$GITHUB_WORKSPACE/legacy-src" rev-parse HEAD)
 
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
-          git tag -a "$TAG" -m "Cline Nightly published from ${GITHUB_REF_NAME} at ${GITHUB_SHA}"
+          git tag -a "$TAG" -m "Cline Nightly (combined A/B) published from ${GITHUB_REF_NAME} at ${GITHUB_SHA} (legacy bundle: ${LEGACY_SHA})"
           # Use an explicit HTTPS remote with GH_TOKEN because checkout was run with
           # persist-credentials: false, so actions/checkout did not persist a git credential helper.
           git push "https://x-access-token:${GH_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" "refs/tags/${TAG}"

.github/workflows/ext-vscode-test.yml

@@ -126,7 +126,7 @@ jobs:
         needs: [detect-changes, quality-checks]
         if: needs.detect-changes.outputs.vscode == 'true'
         env:
-            VSCODE_TEST_VERSION: 1.103.0
+            VSCODE_TEST_VERSION: 1.101.0
         strategy:
             fail-fast: false
             matrix:

.github/workflows/sdk-publish.yml

@@ -260,6 +260,41 @@ jobs:
             git push origin "refs/tags/${TAG}"
           done
 
+      - name: Get Previous SDK Tag
+        if: steps.check_commits.outputs.skip != 'true' && steps.channel.outputs.channel == 'latest'
+        id: prev_tag
+        env:
+          VERSION: ${{ steps.version.outputs.version }}
+        run: |
+          # The checkout is shallow and tagless, so fetch the release tags explicitly.
+          git fetch origin "+refs/tags/sdk/sdk/v*:refs/tags/sdk/sdk/v*"
+          PREV_TAG=$(git tag -l 'sdk/sdk/v*' | grep -vx "sdk/sdk/v${VERSION}" | sort -V | tail -1 || echo "")
+          echo "prev_tag=$PREV_TAG" >> $GITHUB_OUTPUT
+
+      - name: Get Changelog Entry
+        if: steps.check_commits.outputs.skip != 'true' && steps.channel.outputs.channel == 'latest'
+        id: changelog
+        run: |
+          # Grab content between the first "## " header and the next one in sdk/CHANGELOG.md
+          CONTENT=$(awk '/^## [0-9]/{if(found) exit; found=1; next} found{print}' sdk/CHANGELOG.md)
+          DELIMITER=$(openssl rand -hex 8)
+          echo "content<<${DELIMITER}" >> $GITHUB_OUTPUT
+          echo "$CONTENT" >> $GITHUB_OUTPUT
+          echo "${DELIMITER}" >> $GITHUB_OUTPUT
+
+      - name: Create GitHub Release
+        if: steps.check_commits.outputs.skip != 'true' && steps.channel.outputs.channel == 'latest'
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: sdk/sdk/v${{ steps.version.outputs.version }}
+          name: "SDK v${{ steps.version.outputs.version }}"
+          body: |
+            ${{ steps.changelog.outputs.content }}
+
+            ${{ steps.prev_tag.outputs.prev_tag != '' && format('**Full Changelog**: https://github.com/{0}/compare/{1}...sdk/sdk/v{2}', github.repository, steps.prev_tag.outputs.prev_tag, steps.version.outputs.version) || '' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Summary
         if: steps.check_commits.outputs.skip != 'true'
         env:
@@ -280,3 +315,26 @@ jobs:
             echo "  - sdk/core/v${VERSION}"
             echo "  - sdk/sdk/v${VERSION}"
           fi
+
+      - name: Post release to Slack
+        if: steps.check_commits.outputs.skip != 'true' && steps.channel.outputs.channel == 'latest'
+        uses: slackapi/slack-github-action@v3.0.1
+        with:
+          method: chat.postMessage
+          token: ${{ secrets.SLACK_RELEASE_BOT_TOKEN }}
+          payload: |
+            channel: "C0APVKGGZFC"
+            text: "Cline SDK v${{ steps.version.outputs.version }}"
+            blocks:
+              - type: "section"
+                text:
+                  type: "mrkdwn"
+                  text: "Cline SDK v${{ steps.version.outputs.version }}"
+              - type: "section"
+                text:
+                  type: "mrkdwn"
+                  text: ${{ toJSON(steps.changelog.outputs.content) }}
+              - type: "context"
+                elements:
+                  - type: "mrkdwn"
+                    text: "<https://www.npmjs.com/package/@cline/sdk/v/${{ steps.version.outputs.version }}|View on npm>${{ steps.prev_tag.outputs.prev_tag != '' && format(' | Full Changelog: https://github.com/{0}/compare/{1}...sdk/sdk/v{2}', github.repository, steps.prev_tag.outputs.prev_tag, steps.version.outputs.version) || '' }}"

.github/workflows/ui-publish.yml

@@ -0,0 +1,145 @@
+name: ui-publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      npm_tag:
+        description: "npm distribution tag"
+        required: true
+        type: choice
+        options:
+          - next
+          - latest
+        default: next
+      confirm_publish:
+        description: 'Type "publish" to publish @cline/ui to npm'
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  quality:
+    name: UI quality and package checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: "1.3.13"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.x"
+
+      - name: Install dependencies
+        run: bun install --filter @cline/ui --filter @cline/code --frozen-lockfile
+
+      - name: Typecheck UI
+        run: bun -F @cline/ui typecheck
+
+      - name: Test UI
+        run: bun -F @cline/ui test
+
+      - name: Build Storybook
+        run: bun -F @cline/ui build-storybook
+
+      - name: Build UI package
+        run: bun -F @cline/ui build
+
+      - name: Test desktop chat integration
+        run: bun -F @cline/code test:chat-ui
+
+      - name: Pack publish artifact
+        id: pack
+        shell: bash
+        run: |
+          set -euo pipefail
+          pack_dir="$RUNNER_TEMP/ui-npm-pack"
+          mkdir -p "$pack_dir"
+          cd sdk/packages/ui
+          bun pm pack --ignore-scripts --destination "$pack_dir" --quiet
+          archive=$(find "$pack_dir" -maxdepth 1 -name '*.tgz' -print -quit)
+          test -n "$archive"
+          echo "archive=$archive" >> "$GITHUB_OUTPUT"
+
+      - name: Test packed package
+        env:
+          UI_PACKAGE_ARCHIVE: ${{ steps.pack.outputs.archive }}
+        run: bun sdk/packages/ui/scripts/smoke-package.ts "$UI_PACKAGE_ARCHIVE"
+
+      - name: Upload publish artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ui-npm-package
+          path: ${{ runner.temp }}/ui-npm-pack/*.tgz
+          if-no-files-found: error
+          retention-days: 7
+
+  publish:
+    name: Publish @cline/ui
+    if: >-
+      github.event_name == 'workflow_dispatch' &&
+      github.repository == 'cline/cline' &&
+      github.ref == 'refs/heads/main' &&
+      inputs.confirm_publish == 'publish' &&
+      !endsWith(github.actor, '[bot]')
+    needs: quality
+    runs-on: ubuntu-latest
+    environment: Publish
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.x"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Download publish artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-npm-package
+          path: ${{ runner.temp }}/ui-npm-pack
+
+      - name: Verify publish tooling
+        shell: bash
+        run: |
+          set -euo pipefail
+          npm_version=$(npm --version)
+          echo "npm ${npm_version}"
+          node -e 'const [major, minor, patch] = process.argv[1].split(".").map(Number); if (major < 11 || (major === 11 && (minor < 5 || (minor === 5 && patch < 1)))) { console.error("npm 11.5.1 or newer is required for trusted publishing"); process.exit(1); }' "$npm_version"
+
+      - name: Publish package
+        shell: bash
+        env:
+          NPM_CONFIG_PROVENANCE: "true"
+          NPM_TAG: ${{ inputs.npm_tag }}
+        run: |
+          set -euo pipefail
+          archive=$(find "$RUNNER_TEMP/ui-npm-pack" -maxdepth 1 -name '*.tgz' -print -quit)
+          if [ -z "$archive" ]; then
+            echo "UI package archive was not downloaded"
+            exit 1
+          fi
+
+          version=$(tar -xOf "$archive" package/package.json | node -e 'let input=""; process.stdin.on("data", chunk => input += chunk); process.stdin.on("end", () => process.stdout.write(JSON.parse(input).version))')
+          if npm view "@cline/ui@${version}" version >/dev/null 2>&1; then
+            echo "@cline/ui@${version} already exists; bump sdk/packages/ui/package.json before publishing"
+            exit 1
+          fi
+
+          npm publish "$archive" --tag "$NPM_TAG" --access public
+          echo "Published @cline/ui@${version} with npm tag '${NPM_TAG}'"

.greptile/rules.md

@@ -42,6 +42,8 @@ event names. It exports:
    "emits X as a normal opt-out-respecting event"). Events that intentionally bypass
    opt-out must use `captureRequired` and assert that explicitly.
 
+**All events should be named using snake_case and so should their properties**
+
 ## The Activation Funnel
 
 The canonical funnel that downstream analytics depends on:

apps/cli/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Cline CLI Changelog
 
+## 3.0.46
+
+- Fixed out-of-credits detection so the CLI reliably recognizes the Cline API's real `insufficient_credits` (402) error and shows the "add credits" card instead of a generic error
+
+## 3.0.45
+
+- Smaller install: the Claude Code and Codex providers are now optional and loaded on demand, cutting `npm i -g cline` from ~640MB to ~285MB (from SDK v0.0.65)
+- Kimi K3 is now available as a ClinePass model (from SDK v0.0.65)
+- Runs now retry once after refreshing expired OAuth credentials (from SDK v0.0.65)
+- Team runs: the spawn tool is no longer exposed to teammates, and errored teammate runs now report as failed instead of completed (from SDK v0.0.65)
+- Hub status output now includes version numbers
+- Updated the bundled model catalog (from SDK v0.0.65)
+
+## 3.0.44
+
+- Improved max output token handling across providers (gateway routing, OpenAI vendor, and reasoning models) (from SDK v0.0.64)
+- Frontmatter and configuration files that start with a UTF-8 byte order mark (e.g. saved by Windows editors) now parse correctly (from SDK v0.0.64)
+
+## 3.0.43
+
+- The CLI now automatically trusts your operating system's certificate store, so it works behind corporate proxies and TLS-inspecting firewalls without manually setting `NODE_EXTRA_CA_CERTS` (fixes "unable to get local issuer certificate" errors, including Windows intermediate CA stores)
+
+## 3.0.42
+
+- Fixed Ollama native API routing so context window and timeout settings work again
+
+## 3.0.41
+
+- Compaction now shows progress status in the TUI
+- Model IDs are now suggested from OpenAI-compatible endpoints when configuring a provider
+- Workspace git info (branch/remote) is now persisted and refreshed across sessions
+- Compaction no longer runs during an active turn
+- Fixed a crash when the terminal title was updated during TUI teardown
+- The API key fallback hint is now highlighted for better visibility
+- Benign git states are no longer reported as workspace initialization errors
+
 ## 3.0.40
 
 - Added a manual API key escape hatch for Cline OAuth providers, so you can enter a key by hand from settings

apps/cli/README.md

@@ -346,9 +346,24 @@ Desktop-integrated approval mode is also supported via env wiring (`CLINE_TOOL_A
 - `CLINE_LOG_LEVEL` - Runtime log level (`trace|debug|info|warn|error|fatal|silent`, default `info`)
 - `CLINE_LOG_PATH` - Runtime log file path (default `<CLINE_DATA_DIR>/logs/cline.log`)
 - `CLINE_LOG_NAME` - Logger name embedded in runtime log records
+- `CLINE_DEBUG` - Set to `1`/`true` to print wrapper diagnostics (e.g. the CA bundle summary)
 
 `--key` takes precedence over environment variables.
 
+## Certificate trust
+
+The CLI automatically trusts your operating system's certificate store, so it
+works behind corporate TLS-inspecting proxies and with self-signed/internal
+endpoints without any setup. On launch the `cline` wrapper harvests the OS trust
+anchors and writes them to `~/.cline/cli-node-extra-ca-certs.pem`, then points
+the runtime's `NODE_EXTRA_CA_CERTS` at that bundle. The file is regenerated when
+it changes and is safe to delete (it is rebuilt on the next run).
+
+If you set `NODE_EXTRA_CA_CERTS` yourself, your certificates are **merged** into
+that bundle alongside the system store rather than replacing it. Run with
+`CLINE_DEBUG=1` to see how many OS and user CAs were loaded and where the bundle
+was written.
+
 ## Contributing
 
 See [DEVELOPMENT.md](./DEVELOPMENT.md) for local development setup, monorepo structure, and TUI architecture. See [DISTRIBUTION.md](./DISTRIBUTION.md) for how the CLI is packaged and distributed.

apps/cli/bin/ca-certs.cjs

@@ -0,0 +1,281 @@
+// Auto-discovery of OS trust anchors for the Cline CLI.
+//
+// Bun does not read the OS trust store, so the 3.x CLI cannot see corporate
+// MITM / self-signed CAs out of the box. This runs in the Node `bin/cline`
+// wrapper (not Bun), reads the full OS store via tls.getCACertificates("system")
+// (Node >= 22, no --use-system-ca flag), and hands the certs to the Bun child
+// via NODE_EXTRA_CA_CERTS, which both runtimes honor. Mirrors the JetBrains
+// plugin's configureCertificates(), sourcing from the OS instead of the IDE.
+//
+// Dependency-free CommonJS with injectable modules so it is unit-testable and
+// ships verbatim in the published wrapper package.
+
+const PEM_MARKER = "-----BEGIN CERTIFICATE-----";
+const CERT_BLOCK =
+	/-----BEGIN CERTIFICATE-----[\s\S]*?-----END CERTIFICATE-----/g;
+
+/**
+ * Returns only the complete certificate blocks from PEM text, or null when
+ * there are none. User files may also hold private keys (combined cert+key
+ * PEMs) or other sections, which must never be copied into the managed
+ * bundle. Files that contain nothing but certificates pass through verbatim
+ * so unchanged bundles keep hash-skipping the rewrite.
+ */
+function sanitizePem(text) {
+	const blocks = text.match(CERT_BLOCK) ?? [];
+	if (blocks.length === 0) {
+		return null;
+	}
+	const rest = text.replace(CERT_BLOCK, "");
+	if (/^\s*$/.test(rest)) {
+		return text;
+	}
+	return `${blocks.join("\n")}\n`;
+}
+
+/**
+ * Returns OS-trusted certificates as PEM strings, or [] when unavailable.
+ * tls.getCACertificates("system") requires Node >= 22.
+ */
+function harvestSystemCerts(tlsModule) {
+	try {
+		const tls = tlsModule || require("node:tls");
+		if (typeof tls.getCACertificates !== "function") {
+			return [];
+		}
+		const certs = tls.getCACertificates("system");
+		if (!Array.isArray(certs)) {
+			return [];
+		}
+		return certs.filter(
+			(cert) => typeof cert === "string" && cert.includes(PEM_MARKER),
+		);
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Returns the file's certificate blocks as PEM text, or null when missing,
+ * unreadable, or holding no complete certificate block.
+ */
+function readUserBundle(fsModule, userPath) {
+	if (!userPath) {
+		return null;
+	}
+	try {
+		const fs = fsModule || require("node:fs");
+		const stat = fs.statSync(userPath, { throwIfNoEntry: false });
+		if (!stat || !stat.isFile()) {
+			return null;
+		}
+		// Binary DER would not have loaded in the runtime either; require PEM.
+		return sanitizePem(fs.readFileSync(userPath, "utf8"));
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Reads the user's NODE_EXTRA_CA_CERTS value into PEM strings. Node treats the
+ * value as a single file, but some users set an OS-path-delimited list; the
+ * whole value is tried as one file first, then split.
+ * The managed bundle is excluded so reading it back never re-appends its certs.
+ */
+function readUserCerts(fsModule, pathModule, value, managedPath) {
+	if (!value) {
+		return [];
+	}
+	const fs = fsModule || require("node:fs");
+	const path = pathModule || require("node:path");
+	const candidates = [];
+	const whole = readUserBundle(fs, value);
+	if (whole) {
+		candidates.push({ filePath: value, pem: whole });
+	} else if (value.includes(path.delimiter)) {
+		for (const segment of value.split(path.delimiter)) {
+			const trimmed = segment.trim();
+			if (!trimmed) {
+				continue;
+			}
+			const pem = readUserBundle(fs, trimmed);
+			if (pem) {
+				candidates.push({ filePath: trimmed, pem });
+			}
+		}
+	}
+	const pems = [];
+	for (const candidate of candidates) {
+		const isManaged =
+			managedPath &&
+			path.resolve(candidate.filePath) === path.resolve(managedPath);
+		if (!isManaged) {
+			pems.push(candidate.pem);
+		}
+	}
+	return pems;
+}
+
+/**
+ * Concatenates the user PEMs (if any) and the system certificates into one
+ * bundle. A separating newline is inserted between parts so adjacent END/BEGIN
+ * markers cannot fuse into one invalid line.
+ */
+function buildBundle({ systemCerts, userPems }) {
+	const parts = [...(userPems ?? []), ...systemCerts];
+	return parts
+		.map((part) => (part.endsWith("\n") ? part : `${part}\n`))
+		.join("");
+}
+
+/** Counts individual PEM certificates across the given bundle strings. */
+function countCerts(pems) {
+	let count = 0;
+	for (const pem of pems) {
+		count += pem.split(PEM_MARKER).length - 1;
+	}
+	return count;
+}
+
+function readFileIfExists(fs, filePath) {
+	try {
+		return fs.readFileSync(filePath, "utf8");
+	} catch {
+		return null;
+	}
+}
+
+function resolveClineDir(env, os, path) {
+	return env.CLINE_DIR?.trim() || path.join(os.homedir(), ".cline");
+}
+
+/**
+ * True when the api-unavailable warning should print. Stamped per Node version
+ * in the cline dir so the nudge shows once rather than on every command; a
+ * version change (upgrade that still falls short, or downgrade) re-arms it.
+ * When the stamp cannot be read or written, warn — bookkeeping failures must
+ * never suppress a real diagnostic.
+ */
+function shouldWarnApiUnavailable(env, deps = {}) {
+	const fs = deps.fs || require("node:fs");
+	const os = deps.os || require("node:os");
+	const path = deps.path || require("node:path");
+	const version = deps.nodeVersion || process.versions.node;
+	const dir = resolveClineDir(env, os, path);
+	const stamp = path.join(dir, `.ca-api-warned-${version}`);
+	try {
+		if (fs.existsSync(stamp)) {
+			return false;
+		}
+		fs.mkdirSync(dir, { recursive: true });
+		fs.writeFileSync(stamp, "", { mode: 0o600 });
+		return true;
+	} catch {
+		return true;
+	}
+}
+
+/** Atomically writes [content] to [target]; returns true on success. */
+function writeBundle(fs, dir, target, content) {
+	const tmp = `${target}.${process.pid}.${Date.now()}.tmp`;
+	try {
+		fs.mkdirSync(dir, { recursive: true });
+		// Owner read/write: the bundle holds public CA material, not secrets,
+		// but there is no reason to make it world-writable.
+		fs.writeFileSync(tmp, content, { mode: 0o600 });
+		try {
+			fs.renameSync(tmp, target);
+		} catch {
+			// Windows can reject rename over a file a concurrent child holds open.
+			fs.rmSync(target, { force: true });
+			fs.renameSync(tmp, target);
+		}
+		return true;
+	} catch {
+		// Never leave a partial temp file behind (e.g. ENOSPC mid-write).
+		try {
+			fs.rmSync(tmp, { force: true });
+		} catch {
+			// Ignore: best-effort cleanup.
+		}
+		return false;
+	}
+}
+
+/**
+ * Harvests OS trust anchors, merges them with any user NODE_EXTRA_CA_CERTS, and
+ * points env.NODE_EXTRA_CA_CERTS at a single managed PEM bundle. Mutates `env`
+ * in place. Returns an outcome the caller can log; `action` is one of
+ * "unchanged" | "written" | "write-failed-reused" | "write-failed" |
+ * "no-system-certs" | "api-unavailable".
+ */
+function configureNodeExtraCaCerts(env, deps = {}) {
+	const fs = deps.fs || require("node:fs");
+	const os = deps.os || require("node:os");
+	const path = deps.path || require("node:path");
+	const tls = deps.tls || require("node:tls");
+
+	// tls.getCACertificates("system") needs Node >= 22.15; on older Nodes the
+	// harvest cannot run at all, which the caller should surface to the user.
+	if (typeof tls.getCACertificates !== "function") {
+		return {
+			action: "api-unavailable",
+			path: null,
+			systemCertCount: 0,
+			userCertCount: 0,
+		};
+	}
+
+	const systemCerts = harvestSystemCerts(tls);
+	if (systemCerts.length === 0) {
+		// Nothing to add: leave any user-provided NODE_EXTRA_CA_CERTS untouched
+		// and let the runtime fall back to its bundled CAs.
+		return {
+			action: "no-system-certs",
+			path: null,
+			systemCertCount: 0,
+			userCertCount: 0,
+		};
+	}
+
+	const managedDir = resolveClineDir(env, os, path);
+	const managedPath = path.join(managedDir, "cli-node-extra-ca-certs.pem");
+	const userValue = (env.NODE_EXTRA_CA_CERTS || "").trim() || null;
+	const userPems = readUserCerts(fs, path, userValue, managedPath);
+	const bundle = buildBundle({ systemCerts, userPems });
+	const base = {
+		path: managedPath,
+		systemCertCount: systemCerts.length,
+		userCertCount: countCerts(userPems),
+	};
+
+	// Skip the rewrite when the bundle is already current. Avoids per-launch I/O
+	// and the concurrent-rename race in the steady state.
+	if (readFileIfExists(fs, managedPath) === bundle) {
+		env.NODE_EXTRA_CA_CERTS = managedPath;
+		return { ...base, action: "unchanged" };
+	}
+
+	if (writeBundle(fs, managedDir, managedPath, bundle)) {
+		env.NODE_EXTRA_CA_CERTS = managedPath;
+		return { ...base, action: "written" };
+	}
+
+	// Write failed: fall back to a previously-written bundle if one exists.
+	if (readFileIfExists(fs, managedPath)) {
+		env.NODE_EXTRA_CA_CERTS = managedPath;
+		return { ...base, action: "write-failed-reused" };
+	}
+	return { ...base, path: null, action: "write-failed" };
+}
+
+module.exports = {
+	harvestSystemCerts,
+	sanitizePem,
+	readUserBundle,
+	readUserCerts,
+	buildBundle,
+	countCerts,
+	configureNodeExtraCaCerts,
+	shouldWarnApiUnavailable,
+};

apps/cli/bin/cline

@@ -23,6 +23,48 @@ const childEnv = {
 	CLINE_WRAPPER_PATH: scriptPath,
 };
 
+// Auto-discover OS trust anchors and pass them to the Bun child via
+// NODE_EXTRA_CA_CERTS. The Bun runtime does not read the OS store on its own,
+// so corporate/self-signed CAs would otherwise fail. This wrapper runs on
+// Node, which can read the full store here.
+try {
+	const caCerts = require("./ca-certs.cjs");
+	const outcome = caCerts.configureNodeExtraCaCerts(childEnv);
+	const debug =
+		process.env.CLINE_DEBUG === "1" || process.env.CLINE_DEBUG === "true";
+	// Not debug-gated: on old Nodes the harvest silently doing nothing is
+	// indistinguishable from a broken corporate proxy. Stamped per Node
+	// version so the nudge shows once, not on every command.
+	if (
+		outcome &&
+		outcome.action === "api-unavailable" &&
+		!childEnv.NODE_EXTRA_CA_CERTS &&
+		caCerts.shouldWarnApiUnavailable(childEnv)
+	) {
+		console.warn(
+			`[cline] Node ${process.versions.node} cannot read the OS trust store (needs >= 22.15); ` +
+				"corporate or self-signed CAs may fail TLS. Upgrade Node or set NODE_EXTRA_CA_CERTS.",
+		);
+	}
+	if (debug && outcome) {
+		if (outcome.action === "no-system-certs") {
+			console.warn(
+				"[cline] No OS trust anchors found; relying on the runtime's bundled CAs.",
+			);
+		} else if (outcome.action === "write-failed") {
+			console.warn(
+				"[cline] Could not write the managed CA bundle; relying on the runtime's bundled CAs.",
+			);
+		} else {
+			console.warn(
+				`[cline] Trust: ${outcome.systemCertCount} OS + ${outcome.userCertCount} user CAs (${outcome.action}) -> ${outcome.path}`,
+			);
+		}
+	}
+} catch {
+	// Best effort: fall back to the runtime's default trust on any failure.
+}
+
 function run(target) {
 	const result = childProcess.spawnSync(target, process.argv.slice(2), {
 		stdio: "inherit",

apps/cli/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@cline/cli",
 	"displayName": "cline",
-	"version": "3.0.40",
+	"version": "3.0.46",
 	"description": "Autonomous coding agent CLI - capable of creating/editing files, running commands, using the browser, and more",
 	"type": "module",
 	"publishConfig": {
@@ -78,19 +78,19 @@
 		"@cline/cline-hub": "workspace:*",
 		"@gramio/format": "^0.7.0",
 		"@opentui-ui/dialog": "^0.1.2",
-		"@opentui/core": "0.1.102",
-		"@opentui/react": "0.1.102",
+		"@opentui/core": "0.4.3",
+		"@opentui/react": "0.4.3",
 		"chat": "^4.23.0",
 		"commander": "^14.0.3",
 		"fzf": "^0.5.2",
 		"marked": "^15.0.12",
 		"open": "^10.2.0",
-		"opentui-spinner": "^0.0.6",
+		"opentui-spinner": "^0.0.7",
 		"pino": "^10.3.1",
 		"posthog-node": "^5.8.0",
 		"react": "19.2.4",
 		"react-devtools-core": "^7.0.1",
-		"react-reconciler": "0.32.0",
+		"react-reconciler": "0.33.0",
 		"yaml": "^2.8.2",
 		"nanoid": "^5.1.7",
 		"zod": "^4.1.11"

apps/cli/src/bin/ca-certs.test.ts

@@ -0,0 +1,367 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { delimiter, join } from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+// The helper ships as CommonJS in the published wrapper package, so it is
+// loaded via require rather than an ESM import.
+const caCerts = require("../../bin/ca-certs.cjs") as {
+	harvestSystemCerts: (tls?: unknown) => string[];
+	readUserBundle: (fs: unknown, p: string | null) => string | null;
+	readUserCerts: (
+		fs: unknown,
+		path: unknown,
+		value: string | null,
+		managedPath: string | null,
+	) => string[];
+	buildBundle: (input: {
+		systemCerts: string[];
+		userPems?: string[];
+	}) => string;
+	countCerts: (pems: string[]) => number;
+	configureNodeExtraCaCerts: (
+		env: Record<string, string>,
+		deps?: { tls?: unknown; fs?: unknown },
+	) => {
+		action: string;
+		path: string | null;
+		systemCertCount: number;
+		userCertCount: number;
+	};
+	shouldWarnApiUnavailable: (
+		env: Record<string, string>,
+		deps?: { fs?: unknown; nodeVersion?: string },
+	) => boolean;
+};
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+const certSystem =
+	"-----BEGIN CERTIFICATE-----\nSYSTEM\n-----END CERTIFICATE-----\n";
+const certUser = "-----BEGIN CERTIFICATE-----\nUSER\n-----END CERTIFICATE-----";
+
+function fakeTls(certs: unknown) {
+	return { getCACertificates: () => certs };
+}
+
+describe("ca-certs", () => {
+	let dir: string;
+
+	beforeEach(() => {
+		dir = mkdtempSync(join(tmpdir(), "cline-ca-"));
+	});
+
+	afterEach(() => {
+		rmSync(dir, { recursive: true, force: true });
+	});
+
+	describe("harvestSystemCerts", () => {
+		it("returns only PEM strings from the system store", () => {
+			expect(
+				caCerts.harvestSystemCerts(fakeTls([certSystem, "not-a-cert", 42])),
+			).toEqual([certSystem]);
+		});
+
+		it("returns [] when getCACertificates is unavailable", () => {
+			expect(caCerts.harvestSystemCerts({})).toEqual([]);
+		});
+
+		it("returns [] when getCACertificates throws", () => {
+			expect(
+				caCerts.harvestSystemCerts({
+					getCACertificates: () => {
+						throw new Error("nope");
+					},
+				}),
+			).toEqual([]);
+		});
+	});
+
+	describe("readUserBundle", () => {
+		it("returns PEM contents for a PEM file", () => {
+			const p = join(dir, "user.pem");
+			writeFileSync(p, certUser);
+			expect(caCerts.readUserBundle(fs, p)).toBe(certUser);
+		});
+
+		it("returns null for a non-PEM (DER) file", () => {
+			const p = join(dir, "user.der");
+			writeFileSync(p, Buffer.from([0x30, 0x82, 0x01, 0x02]));
+			expect(caCerts.readUserBundle(fs, p)).toBeNull();
+		});
+
+		it("returns null for a missing file and for null path", () => {
+			expect(caCerts.readUserBundle(fs, join(dir, "nope.pem"))).toBeNull();
+			expect(caCerts.readUserBundle(fs, null)).toBeNull();
+		});
+
+		it("strips non-certificate sections such as private keys", () => {
+			// Combined cert+key files (nginx/haproxy style) are common; the key
+			// must never reach the managed bundle.
+			const p = join(dir, "combined.pem");
+			writeFileSync(
+				p,
+				`${certUser}\n-----BEGIN PRIVATE KEY-----\nSECRET\n-----END PRIVATE KEY-----\n`,
+			);
+			const out = caCerts.readUserBundle(fs, p);
+			expect(out).toContain("USER");
+			expect(out).not.toContain("PRIVATE KEY");
+			expect(out).not.toContain("SECRET");
+		});
+
+		it("keeps certificates-only files verbatim", () => {
+			// Byte-identical passthrough keeps the unchanged-skip hash stable.
+			const p = join(dir, "clean.pem");
+			writeFileSync(p, `${certUser}\n${certSystem}`);
+			expect(caCerts.readUserBundle(fs, p)).toBe(`${certUser}\n${certSystem}`);
+		});
+
+		it("returns null for a BEGIN marker without a complete block", () => {
+			const p = join(dir, "truncated.pem");
+			writeFileSync(p, "-----BEGIN CERTIFICATE-----\ntruncated");
+			expect(caCerts.readUserBundle(fs, p)).toBeNull();
+		});
+	});
+
+	describe("readUserCerts", () => {
+		it("reads a single PEM file path", () => {
+			const p = join(dir, "corp.pem");
+			writeFileSync(p, certUser);
+			expect(caCerts.readUserCerts(fs, path, p, null)).toEqual([certUser]);
+		});
+
+		it("splits a legacy OS-path-delimited value and reads each PEM", () => {
+			// Legacy footgun: NODE_EXTRA_CA_CERTS="a.pem;b.pem".
+			const a = join(dir, "a.pem");
+			const b = join(dir, "b.pem");
+			writeFileSync(a, certUser);
+			writeFileSync(b, certSystem);
+			expect(
+				caCerts.readUserCerts(fs, path, [a, b].join(delimiter), null),
+			).toEqual([certUser, certSystem]);
+		});
+
+		it("skips missing segments in a delimited value", () => {
+			const a = join(dir, "a.pem");
+			writeFileSync(a, certUser);
+			const value = [a, join(dir, "missing.pem")].join(delimiter);
+			expect(caCerts.readUserCerts(fs, path, value, null)).toEqual([certUser]);
+		});
+
+		it("excludes the managed bundle from user certs", () => {
+			const managed = join(dir, "cli-node-extra-ca-certs.pem");
+			writeFileSync(managed, certUser);
+			expect(caCerts.readUserCerts(fs, path, managed, managed)).toEqual([]);
+		});
+
+		it("returns [] for empty value", () => {
+			expect(caCerts.readUserCerts(fs, path, null, null)).toEqual([]);
+		});
+	});
+
+	describe("buildBundle", () => {
+		it("merges user PEMs before system certs", () => {
+			expect(
+				caCerts.buildBundle({
+					systemCerts: [certSystem],
+					userPems: [certUser],
+				}),
+			).toBe(`${certUser}\n${certSystem}`);
+		});
+
+		it("inserts a separating newline so END/BEGIN markers do not fuse", () => {
+			// certUser has no trailing newline, so this proves the boundary fix.
+			const merged = caCerts.buildBundle({
+				systemCerts: [certSystem],
+				userPems: [certUser],
+			});
+			expect(merged).not.toContain(
+				"-----END CERTIFICATE----------BEGIN CERTIFICATE-----",
+			);
+		});
+
+		it("handles no user PEMs", () => {
+			expect(caCerts.buildBundle({ systemCerts: [certSystem] })).toBe(
+				certSystem,
+			);
+		});
+	});
+
+	describe("configureNodeExtraCaCerts", () => {
+		it("writes a managed bundle and points the env var at it", () => {
+			const env: Record<string, string> = { CLINE_DIR: dir };
+			const out = caCerts.configureNodeExtraCaCerts(env, {
+				tls: fakeTls([certSystem]),
+			});
+			expect(out.action).toBe("written");
+			expect(out.path).toBe(join(dir, "cli-node-extra-ca-certs.pem"));
+			expect(env.NODE_EXTRA_CA_CERTS).toBe(out.path);
+			expect(readFileSync(out.path as string, "utf8")).toContain("SYSTEM");
+		});
+
+		it("merges a user-supplied NODE_EXTRA_CA_CERTS with system certs", () => {
+			const userPath = join(dir, "corp.pem");
+			writeFileSync(userPath, certUser);
+			const env: Record<string, string> = {
+				CLINE_DIR: dir,
+				NODE_EXTRA_CA_CERTS: userPath,
+			};
+			const out = caCerts.configureNodeExtraCaCerts(env, {
+				tls: fakeTls([certSystem]),
+			});
+			expect(out.userCertCount).toBe(1);
+			const written = readFileSync(env.NODE_EXTRA_CA_CERTS, "utf8");
+			expect(written).toContain("USER");
+			expect(written).toContain("SYSTEM");
+		});
+
+		it("reports unchanged and skips rewrite on the second run", () => {
+			const env: Record<string, string> = { CLINE_DIR: dir };
+			expect(
+				caCerts.configureNodeExtraCaCerts(env, { tls: fakeTls([certSystem]) })
+					.action,
+			).toBe("written");
+			expect(
+				caCerts.configureNodeExtraCaCerts(env, { tls: fakeTls([certSystem]) })
+					.action,
+			).toBe("unchanged");
+		});
+
+		it("does not re-append when the user already points at the managed bundle", () => {
+			const env: Record<string, string> = { CLINE_DIR: dir };
+			const first = caCerts.configureNodeExtraCaCerts(env, {
+				tls: fakeTls([certSystem]),
+			}).path as string;
+			const env2: Record<string, string> = {
+				CLINE_DIR: dir,
+				NODE_EXTRA_CA_CERTS: first,
+			};
+			caCerts.configureNodeExtraCaCerts(env2, { tls: fakeTls([certSystem]) });
+			const written = readFileSync(env2.NODE_EXTRA_CA_CERTS, "utf8");
+			expect(written.match(/SYSTEM/g)?.length).toBe(1);
+		});
+
+		it("no-ops when no system certs are available", () => {
+			const env: Record<string, string> = {
+				CLINE_DIR: dir,
+				NODE_EXTRA_CA_CERTS: "/user/corp.pem",
+			};
+			const out = caCerts.configureNodeExtraCaCerts(env, { tls: fakeTls([]) });
+			expect(out.action).toBe("no-system-certs");
+			expect(out.path).toBeNull();
+			expect(env.NODE_EXTRA_CA_CERTS).toBe("/user/corp.pem");
+		});
+
+		it("reports api-unavailable on Nodes without getCACertificates", () => {
+			const env: Record<string, string> = {
+				CLINE_DIR: dir,
+				NODE_EXTRA_CA_CERTS: "/user/corp.pem",
+			};
+			const out = caCerts.configureNodeExtraCaCerts(env, { tls: {} });
+			expect(out.action).toBe("api-unavailable");
+			expect(out.path).toBeNull();
+			expect(env.NODE_EXTRA_CA_CERTS).toBe("/user/corp.pem");
+		});
+
+		it("reports write-failed when the bundle cannot be written", () => {
+			const realFs = require("node:fs");
+			const failingFs = {
+				...realFs,
+				mkdirSync: () => {
+					throw new Error("EACCES");
+				},
+				writeFileSync: () => {
+					throw new Error("EACCES");
+				},
+			};
+			const env: Record<string, string> = { CLINE_DIR: dir };
+			const out = caCerts.configureNodeExtraCaCerts(env, {
+				tls: fakeTls([certSystem]),
+				fs: failingFs,
+			});
+			expect(out.action).toBe("write-failed");
+			expect(out.path).toBeNull();
+			expect(env.NODE_EXTRA_CA_CERTS).toBeUndefined();
+		});
+
+		it("reuses a stale bundle when the rewrite fails", () => {
+			// First run writes the bundle normally.
+			const env: Record<string, string> = { CLINE_DIR: dir };
+			const managedPath = caCerts.configureNodeExtraCaCerts(env, {
+				tls: fakeTls([certSystem]),
+			}).path as string;
+
+			// Second run: writes fail, but the stale bundle is still readable.
+			const realFs = require("node:fs");
+			const failingFs = {
+				...realFs,
+				mkdirSync: () => {
+					throw new Error("EACCES");
+				},
+				writeFileSync: () => {
+					throw new Error("EACCES");
+				},
+			};
+			const env2: Record<string, string> = { CLINE_DIR: dir };
+			const out = caCerts.configureNodeExtraCaCerts(env2, {
+				// A different system cert forces a rewrite attempt (not "unchanged").
+				tls: fakeTls([certUser]),
+				fs: failingFs,
+			});
+
+			expect(out.action).toBe("write-failed-reused");
+			expect(env2.NODE_EXTRA_CA_CERTS).toBe(managedPath);
+		});
+	});
+
+	describe("countCerts", () => {
+		it("counts individual certificates, not files", () => {
+			// One file holding two certs must report 2, not 1.
+			const twoInOne = `${certUser}\n${certSystem}`;
+			expect(caCerts.countCerts([twoInOne])).toBe(2);
+			expect(caCerts.countCerts([certUser, certSystem])).toBe(2);
+			expect(caCerts.countCerts([])).toBe(0);
+		});
+	});
+
+	describe("shouldWarnApiUnavailable", () => {
+		it("warns once per Node version, then stays quiet", () => {
+			const env = { CLINE_DIR: dir };
+			const deps = { nodeVersion: "22.1.0" };
+			expect(caCerts.shouldWarnApiUnavailable(env, deps)).toBe(true);
+			expect(caCerts.shouldWarnApiUnavailable(env, deps)).toBe(false);
+		});
+
+		it("re-arms when the Node version changes", () => {
+			const env = { CLINE_DIR: dir };
+			expect(
+				caCerts.shouldWarnApiUnavailable(env, { nodeVersion: "22.1.0" }),
+			).toBe(true);
+			expect(
+				caCerts.shouldWarnApiUnavailable(env, { nodeVersion: "22.14.0" }),
+			).toBe(true);
+			expect(
+				caCerts.shouldWarnApiUnavailable(env, { nodeVersion: "22.1.0" }),
+			).toBe(false);
+		});
+
+		it("still warns when the stamp cannot be written", () => {
+			const realFs = require("node:fs");
+			const failingFs = {
+				...realFs,
+				mkdirSync: () => {
+					throw new Error("EACCES");
+				},
+				writeFileSync: () => {
+					throw new Error("EACCES");
+				},
+			};
+			const env = { CLINE_DIR: dir };
+			const deps = { fs: failingFs, nodeVersion: "22.1.0" };
+			// Bookkeeping failure must never suppress the diagnostic.
+			expect(caCerts.shouldWarnApiUnavailable(env, deps)).toBe(true);
+			expect(caCerts.shouldWarnApiUnavailable(env, deps)).toBe(true);
+		});
+	});
+});

apps/cli/src/commands/config.ts

@@ -1,4 +1,4 @@
-import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { existsSync, readdirSync } from "node:fs";
 import { homedir } from "node:os";
 import { basename, extname, join } from "node:path";
 import {
@@ -15,6 +15,7 @@ import {
 	type SkillConfig,
 	type WorkflowConfig,
 } from "@cline/core";
+import { readFileSyncStrippingUtf8Bom } from "@cline/shared/node";
 import { Command } from "commander";
 import { getToolCatalog } from "../runtime/tools";
 import { loadInteractiveConfigData } from "../tui/interactive-config";
@@ -209,7 +210,7 @@ async function runAgentsConfigCommand(
 					continue;
 				}
 				const filePath = join(directory, entry.name);
-				const raw = readFileSync(filePath, "utf8");
+				const raw = readFileSyncStrippingUtf8Bom(filePath);
 				const frontmatterMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---/);
 				const frontmatter = frontmatterMatch?.[1] ?? "";
 				const nameMatch = frontmatter.match(/^\s*name:\s*(.+?)\s*$/m);

apps/cli/src/commands/doctor.test.ts

@@ -9,6 +9,7 @@ import {
 import os from "node:os";
 import path from "node:path";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { version as cliVersion } from "../../package.json";
 import { getCliBuildInfo } from "../utils/common";
 
 const {
@@ -174,6 +175,40 @@ describe("runDoctorCommand", () => {
 		);
 	});
 
+	it("reports CLI and running hub Core versions", async () => {
+		const cwd = "/workspace";
+		mockReadHubDiscovery.mockResolvedValue({
+			url: "ws://127.0.0.1:25463/hub",
+			port: 25463,
+			pid: 50174,
+			coreVersion: "0.0.63",
+		});
+		mockProbeHubServer.mockResolvedValue({
+			url: "ws://127.0.0.1:25463/hub",
+			port: 25463,
+			pid: 50174,
+			coreVersion: "0.0.64",
+		});
+		mockSpawnSync.mockReturnValue({ status: 1, stdout: "" });
+
+		const output: string[] = [];
+		const code = await runDoctorCommand(
+			{ cwd, json: true },
+			{
+				writeln: (text) => {
+					output.push(text ?? "");
+				},
+				writeErr: () => {},
+			},
+		);
+
+		expect(code).toBe(0);
+		expect(JSON.parse(output[0] || "")).toMatchObject({
+			cliVersion,
+			coreVersion: "0.0.64",
+		});
+	});
+
 	it("doctor --fix clears wedged hub startup artifacts when no server is actually running", async () => {
 		const cwd = mkdtempSync(path.join(os.tmpdir(), "doctor-hub-fix-"));
 		tempDirs.push(cwd);

apps/cli/src/commands/doctor.ts

@@ -14,6 +14,7 @@ import {
 import { formatUptime, resolveClineBuildEnv } from "@cline/shared";
 import { Command } from "commander";
 import open from "open";
+import { version as cliVersion } from "../../package.json";
 import { isProcessRunning } from "../connectors/common";
 import {
 	type ActiveConnectorRecord,
@@ -49,6 +50,8 @@ type SpawnedProcessRecord = {
 
 type DoctorStatus = {
 	cwd: string;
+	cliVersion: string;
+	coreVersion?: string;
 	hubUrl?: string;
 	hubHealthy: boolean;
 	hubPid?: number;
@@ -337,6 +340,8 @@ async function collectDoctorStatus(cwd: string): Promise<DoctorStatus> {
 	];
 	return {
 		cwd,
+		cliVersion,
+		coreVersion: health?.coreVersion ?? discovery?.coreVersion,
 		hubUrl: current?.url,
 		hubHealthy: !!health?.url,
 		hubPid: current?.pid,
@@ -419,6 +424,8 @@ export async function runDoctorCommand(
 			io.writeln(JSON.stringify(before));
 			return 0;
 		}
+		writeln(`cli version ${c.dim}${before.cliVersion}${c.reset}`);
+		writeln(`core version ${c.dim}${before.coreVersion ?? "n/a"}${c.reset}`);
 		writeln(`hub url ${c.dim}${before.hubUrl ?? "none"}${c.reset}`);
 		writeln(
 			`hub healthy ${c.dim}${before.hubHealthy ? "yes" : "no"}${before.hubPid ? ` (pid=${before.hubPid})` : ""}${c.reset}`,

apps/cli/src/commands/hub.test.ts

@@ -34,6 +34,7 @@ vi.mock("@cline/core", () => ({
 	stopLocalHubServerGracefully: mockStopLocalHubServerGracefully,
 }));
 
+import { version as cliVersion } from "../../package.json";
 import { createHubCommand } from "./hub";
 
 const originalBuildEnv = process.env.CLINE_BUILD_ENV;
@@ -63,6 +64,7 @@ describe("createHubCommand", () => {
 			port: 25463,
 			pid: 50174,
 			startedAt: "2026-01-01T00:00:00.000Z",
+			coreVersion: "0.0.62",
 		});
 
 		const output: string[] = [];
@@ -88,6 +90,8 @@ describe("createHubCommand", () => {
 			pid: 50174,
 			startedAt: "2026-01-01T00:00:00.000Z",
 			uptime: "1m 5s",
+			cliVersion,
+			coreVersion: "0.0.62",
 		});
 	});
 

apps/cli/src/commands/hub.ts

@@ -9,6 +9,7 @@ import {
 } from "@cline/core";
 import { formatUptime, resolveClineBuildEnv } from "@cline/shared";
 import { Command } from "commander";
+import { version as cliVersion } from "../../package.json";
 
 interface HubCommandIo {
 	writeln: (text?: string) => void;
@@ -134,6 +135,8 @@ export function createHubCommand(
 					pid: health?.pid,
 					startedAt: health?.startedAt,
 					uptime,
+					cliVersion,
+					coreVersion: health?.coreVersion ?? discovery?.coreVersion,
 				}),
 			);
 		}),

apps/cli/src/connectors/runtime-turn.test.ts

@@ -67,6 +67,62 @@ describe("createConnectorRuntimeTurnStream", () => {
 		});
 	});
 
+	it("keeps streaming when tool status delivery fails", async () => {
+		let handlers: StreamHandlers | undefined;
+		const log = vi.fn();
+		const statusError = new Error("message_not_found");
+		const client = {
+			streamEvents: (_request: unknown, callbacks: StreamHandlers) => {
+				handlers = callbacks;
+				return () => {};
+			},
+			sendRuntimeSession: async () => {
+				handlers?.onEvent({
+					eventType: "runtime.chat.tool_call_start",
+					payload: { toolName: "run_commands" },
+				});
+				await new Promise((resolve) => setTimeout(resolve, 0));
+				handlers?.onEvent({
+					eventType: "runtime.chat.text_delta",
+					payload: { text: "Final response" },
+				});
+				return {
+					result: {
+						text: "Final response",
+						finishReason: "stop",
+						iterations: 1,
+					},
+				};
+			},
+		};
+
+		const chunks: string[] = [];
+		for await (const chunk of createConnectorRuntimeTurnStream({
+			client: client as never,
+			sessionId: "session-1",
+			request: { config: {} as never, prompt: "hi" },
+			clientId: "client-1",
+			logger: { core: { log } } as unknown as CliLoggerAdapter,
+			transport: "slack",
+			conversationId: "thread-1",
+			onToolStatus: async () => {
+				throw statusError;
+			},
+		})) {
+			chunks.push(chunk);
+		}
+
+		expect(chunks.join("")).toBe("Final response");
+		expect(log).toHaveBeenCalledWith(
+			"Connector tool status delivery failed",
+			expect.objectContaining({
+				severity: "warn",
+				transport: "slack",
+				error: statusError,
+			}),
+		);
+	});
+
 	it("treats queued runtime turns as non-error completion", async () => {
 		const log = vi.fn();
 		const client = {

apps/cli/src/connectors/runtime-turn.ts

@@ -169,7 +169,17 @@ export function createConnectorRuntimeTurnStream(input: {
 					return;
 				}
 				lastStatusMessage = message;
-				await input.onToolStatus?.(message);
+				try {
+					await input.onToolStatus?.(message);
+				} catch (error) {
+					input.logger.core.log("Connector tool status delivery failed", {
+						severity: "warn",
+						transport: input.transport,
+						conversationId: input.conversationId,
+						sessionId: input.sessionId,
+						error,
+					});
+				}
 			};
 
 			const stopStreaming = input.client.streamEvents(

apps/cli/src/main.ts

@@ -982,9 +982,15 @@ export async function runCli(): Promise<void> {
 		// and cannot be retroactively updated; this is by design for
 		// lightweight subcommand and pre-auth CLI flows. See CLINE-2406.
 		if (provider === "cline") {
-			const savedAccountId = selectedProviderSettings?.auth?.accountId;
-			if (savedAccountId) {
-				identifyTelemetryAccount({ id: savedAccountId, provider: "cline" });
+			const savedAuth = selectedProviderSettings?.auth;
+			if (savedAuth?.accountId) {
+				identifyTelemetryAccount({
+					id: savedAuth.accountId,
+					provider: "cline",
+					organizationId: savedAuth.organizationId,
+					organizationName: savedAuth.organizationName,
+					memberId: savedAuth.memberId,
+				});
 			}
 		}
 

apps/cli/src/runtime/interactive/compaction.test.ts

@@ -106,7 +106,7 @@ describe("compactInteractiveMessages", () => {
 		}));
 		const config = createConfig();
 		const compact = vi.fn((context: CoreCompactionContext) => {
-			expect(context.maxInputTokens).toBe(400_000);
+			expect(context.budget.request.maxInputTokens).toBe(400_000);
 			return { messages: [messages[0]] };
 		});
 		config.knownModels = {
@@ -130,7 +130,7 @@ describe("compactInteractiveMessages", () => {
 		expect(result.compactionState?.messages).toEqual([messages[0]]);
 	});
 
-	it("falls back to legacy contextWindow for manual compaction", async () => {
+	it("uses 90 percent of legacy contextWindow for manual compaction", async () => {
 		const longText = "x".repeat(16_000);
 		const messages = Array.from({ length: 10 }, (_, index) => ({
 			role: index % 2 === 0 ? ("user" as const) : ("assistant" as const),
@@ -138,7 +138,7 @@ describe("compactInteractiveMessages", () => {
 		}));
 		const config = createConfig();
 		const compact = vi.fn((context: CoreCompactionContext) => {
-			expect(context.maxInputTokens).toBe(400_000);
+			expect(context.budget.request.maxInputTokens).toBe(360_000);
 			return { messages: [messages[0]] };
 		});
 		config.knownModels = {

apps/cli/src/runtime/interactive/compaction.ts

@@ -61,11 +61,15 @@ export async function compactInteractiveMessages(input: {
 	compactionState?: SessionCompactionState;
 }> {
 	const modelInfo = input.config.knownModels?.[input.config.modelId];
-	const maxInputTokens =
-		input.config.compaction?.maxInputTokens ??
-		modelInfo?.maxInputTokens ??
-		modelInfo?.contextWindow ??
-		FALLBACK_MANUAL_COMPACTION_MAX_INPUT_TOKENS;
+	const compactionModelInfo = modelInfo
+		? {
+				...modelInfo,
+				id: modelInfo.id ?? input.config.modelId,
+			}
+		: {
+				id: input.config.modelId,
+				maxInputTokens: FALLBACK_MANUAL_COMPACTION_MAX_INPUT_TOKENS,
+			};
 	const compact = createContextCompactionPrepareTurn(
 		{
 			providerConfig: resolveCompactionProviderConfig(
@@ -106,11 +110,7 @@ export async function compactInteractiveMessages(input: {
 		model: {
 			id: input.config.modelId,
 			provider: input.config.providerId,
-			info: {
-				...(modelInfo ?? {}),
-				id: modelInfo?.id ?? input.config.modelId,
-				maxInputTokens: maxInputTokens,
-			},
+			info: compactionModelInfo,
 		},
 	});
 	if (!result?.messages) {

apps/cli/src/runtime/interactive/mode.ts

@@ -107,38 +107,13 @@ export async function sendTurnWithActModeContinuation<
 	};
 }
 
-export type ModeSwitchNotice = {
-	from: InteractiveUiMode;
-	to: InteractiveUiMode;
-};
-
-/**
- * Tracks a user-initiated mode switch so the next user message can carry a
- * <mode_notice> marking it. Only UI toggles are recorded: the model-initiated
- * switch_to_act_mode path already announces itself via the continuation
- * prompt. A round trip (plan -> act -> plan before sending anything) cancels
- * out, since the mode the model last saw never effectively changed.
- */
-export function createModeSwitchNoticeTracker() {
-	let pending: ModeSwitchNotice | null = null;
-	return {
-		record(from: InteractiveUiMode, to: InteractiveUiMode): void {
-			if (from === to) {
-				return;
-			}
-			if (pending) {
-				pending = pending.from === to ? null : { from: pending.from, to };
-				return;
-			}
-			pending = { from, to };
-		},
-		consume(): ModeSwitchNotice | null {
-			const notice = pending;
-			pending = null;
-			return notice;
-		},
-	};
-}
+// The tracker moved to @cline/shared so the VSCode extension can share the
+// exact round-trip-cancelling semantics; re-exported here to keep the CLI's
+// import surface stable.
+export {
+	createModeSwitchNoticeTracker,
+	type ModeSwitchNotice,
+} from "@cline/shared";
 
 export async function applyInteractiveModeConfig(input: {
 	config: Config;

apps/cli/src/runtime/interactive/session-runtime.ts

@@ -641,7 +641,22 @@ export function createInteractiveSessionRuntime(input: {
 					})
 				: undefined,
 		);
-		return { forkedFromSessionId, newSessionId: activeSessionId };
+		// Report carried context from what the new session actually accepted:
+		// the host can reject the inherited state (e.g. stale anchor), and the
+		// UI must not claim a carry-over that did not happen.
+		const acceptedState = projectedMessages
+			? await readCompactionState(activeSessionId)
+			: undefined;
+		return {
+			forkedFromSessionId,
+			newSessionId: activeSessionId,
+			carriedWorkingContext: acceptedState
+				? {
+						workingContextMessages: acceptedState.messages.length,
+						canonicalMessages: messages.length,
+					}
+				: undefined,
+		};
 	};
 
 	const resumeSession = async (sessionId: string): Promise<Message[]> => {

apps/cli/src/runtime/prompt.ts

@@ -9,23 +9,6 @@ import {
 import { type AgentMode, buildClineSystemPrompt } from "@cline/shared";
 import { isImagePath, loadImageAsDataUrl } from "../utils/image-attachments";
 
-const MODE_TAG_INSTRUCTIONS = `# Plan / Act Modes
-
-User messages arrive wrapped in a <user_input mode="..."> tag. The mode attribute is the interaction mode the user was in when they sent that message: "plan" means plan-mode constraints applied (explore, analyze, and align on a plan -- no edits or state-changing commands), while "act" (or "yolo") means implementation was allowed. If the mode attribute changes between messages, the user switched modes -- the newest message's mode is what governs right now, regardless of what earlier messages allowed. A <mode_notice> block inside a message marks exactly when such a switch happened.`;
-
-const PLAN_MODE_INSTRUCTIONS = `# Plan Mode
-
-You are in Plan mode. Your role is to explore, analyze, and plan -- not to execute.
-
-- Read files, search the codebase, and gather context to understand the problem
-- Ask clarifying questions when requirements are ambiguous
-- Present your plan as a structured outline with clear steps
-- Explain tradeoffs between different approaches when they exist
-- Do NOT edit files, write code, run destructive commands, or make any changes
-- Do NOT implement anything -- focus on understanding and alignment first
-
-Once the user has reviewed your plan and explicitly approved it in a follow-up message, use the switch_to_act_mode tool to switch to act mode and begin implementation. Calling switch_to_act_mode immediately starts execution, so never call it in the same turn you present a plan and never treat the original task request as approval -- end your turn after presenting the plan and wait for the user's response.`;
-
 export async function resolveSystemPrompt(input: {
 	cwd: string;
 	explicitSystemPrompt?: string;
@@ -34,15 +17,10 @@ export async function resolveSystemPrompt(input: {
 	mode?: AgentMode;
 }): Promise<string> {
 	const metadata = await buildWorkspaceMetadata(input.cwd);
-	let rules = mergeRulesForSystemPrompt(undefined, input.rules);
-	// Both modes get the mode-tag explanation: after a switch, the transcript
-	// still contains messages tagged with the other mode.
-	rules = rules
-		? `${rules}\n\n${MODE_TAG_INSTRUCTIONS}`
-		: MODE_TAG_INSTRUCTIONS;
-	if (input.mode === "plan") {
-		rules = `${rules}\n\n${PLAN_MODE_INSTRUCTIONS}`;
-	}
+	// Mode-tag and plan-mode instructions are appended by the shared prompt
+	// builder itself (see MODE_TAG_INSTRUCTIONS / PLAN_MODE_INSTRUCTIONS in
+	// @cline/shared), so only the caller-specific rules are merged here.
+	const rules = mergeRulesForSystemPrompt(undefined, input.rules);
 	return buildClineSystemPrompt({
 		ide: "Terminal Shell",
 		workspaceRoot: input.cwd,

apps/cli/src/tui/cline-account.test.ts

@@ -309,3 +309,62 @@ describe("loadIndividualSubscriptionPlans", () => {
 		expect(result).toEqual(plans);
 	});
 });
+
+describe("isClineAccountCreditsErrorMessage", () => {
+	it("matches the raw insufficient_credits JSON payload from the Cline API 402", async () => {
+		const { isClineAccountCreditsErrorMessage } = await import(
+			"./cline-account"
+		);
+		expect(
+			isClineAccountCreditsErrorMessage(
+				'{"code":"insufficient_credits","current_balance":-0.14,"message":"Not enough credits available"}',
+			),
+		).toBe(true);
+	});
+
+	it("matches the insufficient_credits payload wrapped in an error prefix", async () => {
+		const { isClineAccountCreditsErrorMessage } = await import(
+			"./cline-account"
+		);
+		expect(
+			isClineAccountCreditsErrorMessage(
+				'Error: {"code":"insufficient_credits","current_balance":0,"message":"Not enough credits available"}',
+			),
+		).toBe(true);
+	});
+
+	it("matches the plain human-readable Cline API message", async () => {
+		const { isClineAccountCreditsErrorMessage } = await import(
+			"./cline-account"
+		);
+		expect(
+			isClineAccountCreditsErrorMessage("Not enough credits available"),
+		).toBe(true);
+	});
+
+	it("matches the legacy insufficient balance phrasing", async () => {
+		const { isClineAccountCreditsErrorMessage } = await import(
+			"./cline-account"
+		);
+		expect(
+			isClineAccountCreditsErrorMessage(
+				"Insufficient balance. Your Cline credits balance is $0.00.",
+			),
+		).toBe(true);
+	});
+
+	it("does not match unrelated errors", async () => {
+		const { isClineAccountCreditsErrorMessage } = await import(
+			"./cline-account"
+		);
+		expect(isClineAccountCreditsErrorMessage("Payment Required")).toBe(false);
+		expect(
+			isClineAccountCreditsErrorMessage(
+				"Your credit balance is too low to access the Anthropic API.",
+			),
+		).toBe(false);
+		expect(
+			isClineAccountCreditsErrorMessage("insufficient balance on gateway"),
+		).toBe(false);
+	});
+});

apps/cli/src/tui/cline-account.ts

@@ -51,9 +51,16 @@ export function isClineAccountAuthErrorMessage(message: string): boolean {
 
 export function isClineAccountCreditsErrorMessage(message: string): boolean {
 	const normalized = message.trim().toLowerCase();
+	// The Cline API's 402 response carries `code: "insufficient_credits"` and
+	// the message "Not enough credits available". Depending on how much of the
+	// payload survives error extraction, the CLI may see the raw JSON blob or
+	// just the human-readable message, so match both. The
+	// "insufficient balance" pair is an older backend phrasing kept for safety.
 	return (
-		normalized.includes("insufficient balance") &&
-		normalized.includes("cline credits balance")
+		normalized.includes("insufficient_credits") ||
+		normalized.includes("not enough credits") ||
+		(normalized.includes("insufficient balance") &&
+			normalized.includes("cline credits balance"))
 	);
 }
 
@@ -151,6 +158,38 @@ export async function createClineAccountService(input: {
 	});
 }
 
+/**
+ * Persist the active organization so headless runs and the hub daemon can
+ * attach it to telemetry identity. Personal account clears stale org fields.
+ */
+function persistClineOrganizationContext(
+	activeOrganization: ClineAccountOrganization | null,
+	userId: string,
+): void {
+	try {
+		const manager = new ProviderSettingsManager();
+		const persisted = manager.getProviderSettings("cline");
+		if (!persisted) {
+			return;
+		}
+		manager.saveProviderSettings(
+			{
+				...persisted,
+				auth: {
+					...persisted.auth,
+					accountId: persisted.auth?.accountId ?? userId,
+					organizationId: activeOrganization?.organizationId,
+					organizationName: activeOrganization?.name,
+					memberId: activeOrganization?.memberId,
+				},
+			},
+			{ setLastUsed: false },
+		);
+	} catch {
+		// Best-effort only.
+	}
+}
+
 export async function loadClineAccountSnapshot(input: {
 	config: ClineAccountConfig;
 	clineApiBaseUrl?: string;
@@ -183,6 +222,7 @@ export async function loadClineAccountSnapshot(input: {
 		memberId: activeOrganization?.memberId,
 	};
 	identifyTelemetryAccount(accountContext, input.config.logger);
+	persistClineOrganizationContext(activeOrganization, user.id);
 
 	return {
 		user,

apps/cli/src/tui/components/chat-entry.tsx

@@ -25,6 +25,7 @@ import {
 	type TerminalTheme,
 } from "../palette";
 import type { ChatEntry } from "../types";
+import { formatCompactionDividerLabel } from "../utils/compaction-status";
 import { getSyntaxStyle, type SyntaxAccentMode } from "../utils/syntax-style";
 import { isWarningToolError } from "../utils/tool-errors";
 import {
@@ -133,7 +134,7 @@ function formatToolParams(
 				const el = f.endLine != null ? String(f.endLine) : "undefined";
 				const sep = i > 0 ? "; " : "";
 				return (
-					<span key={f.path}>
+					<span key={`${i}:${f.path}`}>
 						{sep}
 						{shortenPath(f.path)}
 						<span fg="gray">
@@ -421,6 +422,38 @@ function ClineOrgIndividualInferenceSubscriptionErrorView(props: {
 	);
 }
 
+function CompactionDividerRow(props: {
+	entry: Extract<ChatEntry, { kind: "compaction" }>;
+}) {
+	const { entry } = props;
+	const { width: terminalWidth } = useTerminalDimensions();
+	const inProgress = entry.status === "started";
+	const labelColor = inProgress
+		? "cyan"
+		: entry.status === "failed"
+			? "red"
+			: entry.status === "cancelled" || entry.status === "skipped"
+				? "gray"
+				: "cyan";
+	const label = `✻ ${formatCompactionDividerLabel(entry)} ✻`;
+	// Fill the remaining line with a plain rule instead of a flexGrow bordered
+	// box: a single fixed-content text row keeps the renderer's diffing stable.
+	const ruleWidth = Math.max(2, Math.min(40, terminalWidth - label.length - 8));
+	return (
+		<box flexDirection="row">
+			{inProgress ? (
+				<box width={2}>
+					<spinner name="dots" color={labelColor} />
+				</box>
+			) : (
+				<text fg="gray" content="── " />
+			)}
+			<text fg={labelColor} selectable content={label} />
+			<text fg="gray" content={` ${"─".repeat(ruleWidth)}`} />
+		</box>
+	);
+}
+
 function ClinePassLimitErrorView(props: {
 	message: string;
 	defaultFg?: string;
@@ -616,6 +649,9 @@ export function ChatEntryView(props: {
 				</box>
 			);
 
+		case "compaction":
+			return <CompactionDividerRow entry={entry} />;
+
 		case "done": {
 			const parts: string[] = [];
 			if (entry.elapsed) parts.push(`${entry.elapsed}s`);

apps/cli/src/tui/components/dialogs/provider-picker.tsx

@@ -891,6 +891,7 @@ export function OAuthLoginContent(
 	const escapeHint = allowApiKeyFallback
 		? "K to enter an API key instead, Esc to cancel"
 		: "Esc to cancel";
+	const escapeHintColor = allowApiKeyFallback ? "white" : "gray";
 
 	if (mode === "device") {
 		return (
@@ -918,7 +919,7 @@ export function OAuthLoginContent(
 
 				{deviceError && <text fg="red">{deviceError}</text>}
 
-				<text fg="gray">
+				<text fg={escapeHintColor}>
 					<em>{escapeHint}</em>
 				</text>
 			</box>
@@ -941,7 +942,7 @@ export function OAuthLoginContent(
 
 			{error && <text fg="red">{error}</text>}
 
-			<text fg="gray">
+			<text fg={escapeHintColor}>
 				<em>{escapeHint}</em>
 			</text>
 		</box>

apps/cli/src/tui/hooks/local-command-actions.ts

@@ -3,6 +3,7 @@ import type { OpenConfigOptions } from "./use-config-panel";
 
 export interface LocalSlashCommandActionInput {
 	name: string;
+	isRunning: boolean;
 	openAccount: () => void;
 	openConfig: (options?: OpenConfigOptions) => void;
 	openMcpManager: () => Promise<boolean>;
@@ -46,7 +47,12 @@ export function runLocalSlashCommandAction(
 		return true;
 	}
 	if (normalized === "compact") {
-		input.runCompact();
+		// Autocomplete can invoke local commands while a turn is running. Keep
+		// /compact handled, but do not let it take ownership of the active turn's
+		// shared running state.
+		if (!input.isRunning) {
+			input.runCompact();
+		}
 		return true;
 	}
 	if (normalized === "fork") {

apps/cli/src/tui/hooks/use-agent-events.ts

@@ -6,13 +6,14 @@ import type {
 	PendingPromptSubmittedEvent,
 } from "../../runtime/session-events";
 import { formatCliErrorMessage } from "../../utils/cline-pass-errors";
-import { resolveStatusNoticeLabel } from "../../utils/events";
+import { resolveNonCompactionStatusLabel } from "../../utils/events";
 import {
 	formatToolInput,
 	formatToolOutput,
 	truncate,
 } from "../../utils/helpers";
 import type { ChatEntry, InlineStream, TuiProps } from "../types";
+import { parseCompactionNoticeMetadata } from "../utils/compaction-status";
 
 interface AgentEventDeps {
 	appendEntry: (entry: ChatEntry) => void;
@@ -32,6 +33,7 @@ interface AgentEventDeps {
 }
 
 export function useAgentEventHandlers(deps: AgentEventDeps) {
+	const openCompactionEntryRef = useRef(false);
 	const {
 		appendEntry,
 		updateLastEntry,
@@ -45,6 +47,47 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 		verbose,
 	} = deps;
 
+	// Compaction dividers that arrived while an assistant message was still
+	// streaming. Appending them immediately would split the message in two, so
+	// they are held until the active content block closes (or the turn ends).
+	const pendingCompactionEntriesRef = useRef<
+		Extract<ChatEntry, { kind: "compaction" }>[]
+	>([]);
+
+	const flushPendingCompactionEntries = useCallback(() => {
+		const pending = pendingCompactionEntriesRef.current;
+		if (pending.length === 0) return;
+		pendingCompactionEntriesRef.current = [];
+		for (const entry of pending) {
+			if (entry.status !== "started" && openCompactionEntryRef.current) {
+				updateEntry((current) =>
+					current.kind === "compaction" && current.status === "started"
+						? { ...current, ...entry }
+						: current,
+				);
+				openCompactionEntryRef.current = false;
+			} else {
+				appendEntry(entry);
+				if (entry.status === "started") {
+					openCompactionEntryRef.current = true;
+				}
+			}
+		}
+	}, [appendEntry, updateEntry]);
+
+	const finalizeDanglingCompactionEntry = useCallback(
+		(status: "failed" | "cancelled") => {
+			if (!openCompactionEntryRef.current) return;
+			openCompactionEntryRef.current = false;
+			updateEntry((entry) =>
+				entry.kind === "compaction" && entry.status === "started"
+					? { ...entry, status }
+					: entry,
+			);
+		},
+		[updateEntry],
+	);
+
 	const closeToolEntry = useCallback(
 		(event: AgentEvent & { type: "content_end" }) => {
 			const error = event.error ?? undefined;
@@ -84,9 +127,11 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 					setIsRunning(true);
 					setIsStreaming(true);
 					closeInlineStream();
+					flushPendingCompactionEntries();
 					break;
 				case "iteration_end":
 					closeInlineStream();
+					flushPendingCompactionEntries();
 					break;
 				case "content_start": {
 					setIsStreaming(false);
@@ -165,11 +210,15 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 					setIsRunning(false);
 					setIsStreaming(false);
 					closeInlineStream();
+					flushPendingCompactionEntries();
+					finalizeDanglingCompactionEntry("cancelled");
 					break;
 				case "error":
 					setIsRunning(false);
 					setIsStreaming(false);
 					closeInlineStream();
+					flushPendingCompactionEntries();
+					finalizeDanglingCompactionEntry("failed");
 					turnErrorReportedRef.current = true;
 					onTurnErrorReported(true);
 					if (!event.recoverable || verbose) {
@@ -181,8 +230,40 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 					break;
 				case "notice":
 					if (event.displayRole === "status") {
-						closeInlineStream();
-						const label = resolveStatusNoticeLabel(event);
+						const compaction = parseCompactionNoticeMetadata(event.metadata);
+						if (!compaction) {
+							closeInlineStream();
+						}
+						if (compaction) {
+							if (activeInlineStreamRef.current) {
+								// An assistant message is still streaming; appending now
+								// would split it around the divider. Hold the divider (final
+								// state until the content block closes, then reconcile it
+								// with the same open divider atomically.
+								pendingCompactionEntriesRef.current.push({
+									kind: "compaction",
+									...compaction,
+								});
+								break;
+							}
+							if (compaction.status === "started") {
+								appendEntry({ kind: "compaction", ...compaction });
+								openCompactionEntryRef.current = true;
+							} else if (openCompactionEntryRef.current) {
+								// Finalize the in-progress divider in place, wherever it
+								// sits in the transcript.
+								updateEntry((entry) =>
+									entry.kind === "compaction" && entry.status === "started"
+										? { ...entry, ...compaction }
+										: entry,
+								);
+								openCompactionEntryRef.current = false;
+							} else {
+								appendEntry({ kind: "compaction", ...compaction });
+							}
+							break;
+						}
+						const label = resolveNonCompactionStatusLabel(event);
 						if (label) {
 							appendEntry({ kind: "status", text: label });
 						}
@@ -200,6 +281,7 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 		[
 			appendEntry,
 			updateLastEntry,
+			updateEntry,
 			closeInlineStream,
 			activeInlineStreamRef,
 			setIsRunning,
@@ -208,6 +290,8 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 			onTurnErrorReported,
 			verbose,
 			closeToolEntry,
+			finalizeDanglingCompactionEntry,
+			flushPendingCompactionEntries,
 		],
 	);
 

apps/cli/src/tui/hooks/use-local-command-actions.test.ts

@@ -9,6 +9,7 @@ function makeActions(
 	overrides: Partial<Omit<LocalSlashCommandActionInput, "name">> = {},
 ): Omit<LocalSlashCommandActionInput, "name"> {
 	return {
+		isRunning: false,
 		openAccount: vi.fn(),
 		openConfig: vi.fn(),
 		openMcpManager: vi.fn(async () => false),
@@ -58,6 +59,32 @@ describe("runLocalSlashCommandAction", () => {
 		expect(openConfig).toHaveBeenCalledWith({ initialTab: "plugins" });
 	});
 
+	it("does not start compaction while a turn is running", () => {
+		const runCompact = vi.fn();
+		const actions = makeActions({ isRunning: true, runCompact });
+
+		const handled = runLocalSlashCommandAction({
+			name: "compact",
+			...actions,
+		});
+
+		expect(handled).toBe(true);
+		expect(runCompact).not.toHaveBeenCalled();
+	});
+
+	it("starts compaction while the session is idle", () => {
+		const runCompact = vi.fn();
+		const actions = makeActions({ runCompact });
+
+		const handled = runLocalSlashCommandAction({
+			name: "compact",
+			...actions,
+		});
+
+		expect(handled).toBe(true);
+		expect(runCompact).toHaveBeenCalledOnce();
+	});
+
 	it("waits for clear to reset the runtime session", async () => {
 		let resolveClear: (() => void) | undefined;
 		const clearConversation = vi.fn(

apps/cli/src/tui/hooks/use-local-command-actions.tsx

@@ -9,7 +9,6 @@ import { HelpDialogContent } from "../components/dialogs/help-dialog";
 import { withLoadingDialog } from "../components/dialogs/loading-dialog";
 import { useSession } from "../contexts/session-context";
 import type { AppView, TuiProps } from "../types";
-import { formatCompactionStatus } from "../utils/compaction-status";
 import { hydrateSessionMessages } from "../utils/hydrate-messages";
 import type { LocalSlashCommandInvocation } from "../utils/skill-command-input";
 import { HistoryDialogContent } from "../views/history-view";
@@ -116,21 +115,42 @@ export function useLocalCommandActions(input: {
 	}, [dialog, refocusTextarea, termHeight]);
 
 	const runCompact = useCallback(async () => {
+		session.setIsRunning(true);
 		session.appendEntry({
-			kind: "status",
-			text: "Compacting context...",
+			kind: "compaction",
+			compactionMode: "manual",
+			status: "started",
 		});
 		try {
 			const result = await onCompact();
-			session.updateLastEntry(() => ({
-				kind: "status",
-				text: formatCompactionStatus(result),
-			}));
+			session.updateLastEntry((entry) =>
+				entry.kind === "compaction" && entry.status === "started"
+					? {
+							...entry,
+							status: result.compacted ? "completed" : "skipped",
+							messagesBefore: result.messagesBefore,
+							messagesAfter:
+								result.workingContextMessagesAfter ?? result.messagesAfter,
+						}
+					: entry,
+			);
 		} catch (error) {
-			session.appendEntry({
-				kind: "error",
-				text: `Compaction failed: ${error instanceof Error ? error.message : String(error)}`,
-			});
+			const cancelled =
+				error instanceof Error &&
+				(error.name === "AbortError" || /abort/i.test(error.message));
+			session.updateLastEntry((entry) =>
+				entry.kind === "compaction" && entry.status === "started"
+					? { ...entry, status: cancelled ? "cancelled" : "failed" }
+					: entry,
+			);
+			if (!cancelled) {
+				session.appendEntry({
+					kind: "error",
+					text: `Compaction failed: ${error instanceof Error ? error.message : String(error)}`,
+				});
+			}
+		} finally {
+			session.setIsRunning(false);
 		}
 	}, [onCompact, session]);
 
@@ -159,6 +179,15 @@ export function useLocalCommandActions(input: {
 					kind: "status",
 					text: `Forked into new session ${result.newSessionId}. This is now the active session. Use /history to switch sessions.`,
 				}));
+				if (result.carriedWorkingContext) {
+					session.appendEntry({
+						kind: "compaction",
+						compactionMode: "inherited",
+						status: "completed",
+						messagesBefore: result.carriedWorkingContext.canonicalMessages,
+						messagesAfter: result.carriedWorkingContext.workingContextMessages,
+					});
+				}
 			} else {
 				session.updateLastEntry(() => ({
 					kind: "error",
@@ -181,6 +210,7 @@ export function useLocalCommandActions(input: {
 			}
 			return runLocalSlashCommandAction({
 				name: resolved.name,
+				isRunning: session.isRunning,
 				invocation,
 				openAccount,
 				openConfig,
@@ -209,6 +239,7 @@ export function useLocalCommandActions(input: {
 			openSkills,
 			runCompact,
 			runFork,
+			session.isRunning,
 			slashCommandRegistry,
 		],
 	);

apps/cli/src/tui/hooks/use-model-selector.tsx

@@ -82,6 +82,51 @@ function usesModelIdInput(providerId: string): boolean {
 	return providerId === "openai-compatible";
 }
 
+/**
+ * Ask an OpenAI-compatible endpoint for its model list (`GET <baseUrl>/models`)
+ * using the provider's stored API key and headers, mirroring the extension's
+ * refreshOpenAiModels handler. Returns [] on any failure so callers fall back
+ * to manual model-id entry.
+ */
+async function fetchOpenAiCompatibleModelIds(
+	providerId: string,
+): Promise<string[]> {
+	try {
+		const manager = new ProviderSettingsManager();
+		const config = manager.getProviderConfig(providerId, {
+			includeKnownModels: false,
+		});
+		const baseUrl = config?.baseUrl?.trim().replace(/\/+$/, "");
+		if (!baseUrl || !URL.canParse(baseUrl)) return [];
+
+		const headers: Record<string, string> = { ...(config?.headers ?? {}) };
+		const apiKey = config?.apiKey?.trim();
+		if (
+			apiKey &&
+			!Object.keys(headers).some((h) => h.toLowerCase() === "authorization")
+		) {
+			headers.Authorization = `Bearer ${apiKey}`;
+		}
+
+		const response = await fetch(`${baseUrl}/models`, {
+			headers,
+			signal: AbortSignal.timeout(5_000),
+		});
+		if (!response.ok) return [];
+		const payload = (await response.json()) as { data?: unknown };
+		const list = Array.isArray(payload?.data) ? payload.data : [];
+		const ids = list
+			.map((model) => {
+				const id = (model as { id?: unknown } | null)?.id;
+				return typeof id === "string" ? id.trim() : "";
+			})
+			.filter(Boolean);
+		return [...new Set(ids)];
+	} catch {
+		return [];
+	}
+}
+
 function providerToExistingProviderOptions(input: {
 	providerId: string;
 	providerName: string;
@@ -300,12 +345,28 @@ export function useModelSelector(opts: {
 				config.knownModels as Record<string, Llms.ModelInfo>,
 			);
 			let providerDisplayName = config.providerId;
+			let endpointModelOptions: ModelOption[] = [];
 
 			const refreshProviderContext = async () => {
 				modelOptions = buildModelOptions(
 					config.knownModels as Record<string, Llms.ModelInfo>,
 				);
 				providerDisplayName = await getProviderDisplayName(config.providerId);
+				// Free-text providers (openai-compatible) can still suggest model
+				// ids when their endpoint answers /models; otherwise they keep the
+				// manual input.
+				endpointModelOptions = usesModelIdInput(config.providerId)
+					? buildModelOptions(
+							Object.fromEntries(
+								(await fetchOpenAiCompatibleModelIds(config.providerId)).map(
+									(id) => [id, { id, name: id }],
+								),
+							),
+						)
+					: [];
+				if (endpointModelOptions.length > 0) {
+					modelOptions = endpointModelOptions;
+				}
 			};
 
 			if (!options?.startWithProviderChange) {
@@ -341,7 +402,10 @@ export function useModelSelector(opts: {
 			let pickingModel = true;
 
 			while (pickingModel) {
-				if (usesModelIdInput(config.providerId)) {
+				if (
+					usesModelIdInput(config.providerId) &&
+					endpointModelOptions.length === 0
+				) {
 					const modelId = await dialog.choice<string>({
 						style: { maxHeight: termHeight - 2 },
 						content: (ctx: ChoiceContext<string>) => (

apps/cli/src/tui/hooks/use-terminal-title.test.ts

@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+	type TerminalTitleRenderer,
+	useTerminalTitle,
+} from "./use-terminal-title";
+
+const reactMock = vi.hoisted(() => {
+	const cleanups: Array<() => void> = [];
+	return {
+		cleanups,
+		// Run effect bodies now, but retain their cleanups so each test can move
+		// the renderer across the native destruction boundary before unmount.
+		useEffect: vi.fn((effect: () => undefined | (() => void)) => {
+			const cleanup = effect();
+			if (cleanup) {
+				cleanups.push(cleanup);
+			}
+		}),
+	};
+});
+
+vi.mock("react", () => ({
+	useEffect: reactMock.useEffect,
+}));
+
+function createTitleRenderer() {
+	let destroyed = false;
+	const setTerminalTitle = vi.fn(() => {
+		if (destroyed) {
+			throw new Error("setTerminalTitle called after renderer destruction");
+		}
+	});
+	const renderer: TerminalTitleRenderer = {
+		get isDestroyed() {
+			return destroyed;
+		},
+		setTerminalTitle,
+	};
+
+	return {
+		destroy: () => {
+			destroyed = true;
+		},
+		renderer,
+		setTerminalTitle,
+	};
+}
+
+beforeEach(() => {
+	reactMock.cleanups.length = 0;
+	reactMock.useEffect.mockClear();
+});
+
+describe("useTerminalTitle", () => {
+	it("sets and resets the title while the renderer is active", () => {
+		const titleRenderer = createTitleRenderer();
+
+		useTerminalTitle(titleRenderer.renderer, "Cline");
+		expect(titleRenderer.setTerminalTitle).toHaveBeenNthCalledWith(1, "Cline");
+
+		for (const cleanup of reactMock.cleanups) {
+			cleanup();
+		}
+
+		expect(titleRenderer.setTerminalTitle).toHaveBeenCalledTimes(2);
+		expect(titleRenderer.setTerminalTitle).toHaveBeenNthCalledWith(2, "");
+	});
+
+	it("does not set the title when its effect runs after renderer destruction", () => {
+		const titleRenderer = createTitleRenderer();
+		titleRenderer.destroy();
+
+		useTerminalTitle(titleRenderer.renderer, "Cline");
+
+		expect(titleRenderer.setTerminalTitle).not.toHaveBeenCalled();
+	});
+
+	it("does not reset the title when cleanup runs after renderer destruction", () => {
+		const titleRenderer = createTitleRenderer();
+
+		useTerminalTitle(titleRenderer.renderer, "Cline");
+		expect(titleRenderer.setTerminalTitle).toHaveBeenCalledOnce();
+
+		titleRenderer.destroy();
+		for (const cleanup of reactMock.cleanups) {
+			cleanup();
+		}
+
+		expect(titleRenderer.setTerminalTitle).toHaveBeenCalledOnce();
+	});
+});

apps/cli/src/tui/hooks/use-terminal-title.ts

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+export interface TerminalTitleRenderer {
+	readonly isDestroyed: boolean;
+	setTerminalTitle(title: string): void;
+}
+
+export function useTerminalTitle(
+	renderer: TerminalTitleRenderer,
+	terminalTitle: string,
+): void {
+	// setTerminalTitle writes into memory owned by the native renderer, so it
+	// must never run after destroy. React can flush passive effects after the
+	// renderer's memory has been freed.
+	useEffect(() => {
+		if (renderer.isDestroyed) {
+			return;
+		}
+		renderer.setTerminalTitle(terminalTitle);
+	}, [renderer, terminalTitle]);
+
+	useEffect(() => {
+		return () => {
+			if (!renderer.isDestroyed) {
+				renderer.setTerminalTitle("");
+			}
+		};
+	}, [renderer]);
+}

apps/cli/src/tui/index.test.ts

@@ -8,7 +8,9 @@ const rendererMock = vi.hoisted(() => ({
 		defaultBackground: null,
 		defaultForeground: null,
 	})),
+	isDestroyed: false,
 	on: vi.fn(),
+	setTerminalTitle: vi.fn(),
 }));
 
 const rootMock = vi.hoisted(() => ({
@@ -37,7 +39,9 @@ describe("renderOpenTui", () => {
 
 	beforeEach(() => {
 		destroyHandlers.length = 0;
+		rendererMock.isDestroyed = false;
 		rendererMock.destroy.mockReset();
+		rendererMock.setTerminalTitle.mockReset();
 		rendererMock.on.mockReset();
 		rendererMock.on.mockImplementation((event: string, handler: () => void) => {
 			if (event === "destroy") {
@@ -96,4 +100,37 @@ describe("renderOpenTui", () => {
 		expect(rendererMock.destroy).toHaveBeenCalledTimes(1);
 		expect(rootMock.unmount).toHaveBeenCalledTimes(1);
 	});
+
+	it("resets the terminal title before destroying the renderer", async () => {
+		const { renderOpenTui } = await import("./index");
+		const tui = await renderOpenTui({} as TuiProps);
+
+		tui.destroy();
+		await Promise.resolve();
+
+		expect(rendererMock.setTerminalTitle).toHaveBeenCalledWith("");
+		expect(rendererMock.destroy).toHaveBeenCalledTimes(1);
+		const titleCallOrder =
+			rendererMock.setTerminalTitle.mock.invocationCallOrder[0];
+		const destroyCallOrder = rendererMock.destroy.mock.invocationCallOrder[0];
+		expect(titleCallOrder).toBeLessThan(destroyCallOrder);
+	});
+
+	it("skips the title reset when the renderer is destroyed before the teardown microtask runs", async () => {
+		const { renderOpenTui } = await import("./index");
+		const tui = await renderOpenTui({} as TuiProps);
+
+		tui.destroy();
+		// Simulate OpenTUI's own signal handler destroying the renderer in the
+		// same dispatch (e.g. an idle SIGTERM fires both our handler and
+		// OpenTUI's exitHandler before microtasks drain).
+		rendererMock.isDestroyed = true;
+		for (const handler of destroyHandlers) {
+			handler();
+		}
+
+		await Promise.resolve();
+
+		expect(rendererMock.setTerminalTitle).not.toHaveBeenCalled();
+	});
 });

apps/cli/src/tui/index.tsx

@@ -67,6 +67,14 @@ export async function renderOpenTui(
 		unmountRoot();
 		// Let OpenTUI finish parsing the current stdin batch before teardown.
 		queueMicrotask(() => {
+			// Reset the title while the native renderer is still alive; the
+			// unmount cleanup in root.tsx skips it once the renderer is destroyed.
+			// Re-check here: OpenTUI's own signal handlers can destroy the
+			// renderer between destroy() queuing this microtask and it running
+			// (e.g. an idle SIGTERM dispatches to both our handler and OpenTUI's).
+			if (!renderer.isDestroyed) {
+				renderer.setTerminalTitle("");
+			}
 			renderer.destroy();
 		});
 	};

apps/cli/src/tui/interactive-config.ts

@@ -27,6 +27,7 @@ import {
 	type UserInstructionConfigService,
 	type WorkflowConfig,
 } from "@cline/core";
+import { readFileSyncStrippingUtf8Bom } from "@cline/shared/node";
 import { getToolCatalog } from "../runtime/tools";
 import {
 	type InteractiveSlashCommand,
@@ -195,7 +196,7 @@ function loadAgentConfigItems(workspaceRoot: string): InteractiveConfigItem[] {
 					continue;
 				}
 				const filePath = join(directory, entry.name);
-				const raw = readFileSync(filePath, "utf8");
+				const raw = readFileSyncStrippingUtf8Bom(filePath);
 				const frontmatterMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---/);
 				const frontmatter = frontmatterMatch?.[1] ?? "";
 				const nameMatch = frontmatter.match(/^\s*name:\s*(.+?)\s*$/m);

apps/cli/src/tui/root.tsx

@@ -53,6 +53,7 @@ import { useRootKeyboard } from "./hooks/use-root-keyboard";
 import { useRuntimeDialogBridge } from "./hooks/use-runtime-dialog-bridge";
 import { useSlashCommands } from "./hooks/use-slash-commands";
 import { TerminalColorsContext } from "./hooks/use-terminal-background";
+import { useTerminalTitle } from "./hooks/use-terminal-title";
 import type { AppView, TuiProps } from "./types";
 import { hydrateSessionMessages } from "./utils/hydrate-messages";
 import { isProviderConfigured } from "./utils/provider-configured";
@@ -472,15 +473,7 @@ function App(props: TuiProps) {
 		};
 	}, [renderer, showToast]);
 
-	useEffect(() => {
-		renderer.setTerminalTitle(terminalTitle);
-	}, [renderer, terminalTitle]);
-
-	useEffect(() => {
-		return () => {
-			renderer.setTerminalTitle("");
-		};
-	}, [renderer]);
+	useTerminalTitle(renderer, terminalTitle);
 
 	useEffect(() => {
 		return () => {

apps/cli/src/tui/types.ts

@@ -44,6 +44,15 @@ export type ChatEntry = (
 	  }
 	| { kind: "error"; text: string }
 	| { kind: "status"; text: string }
+	| {
+			kind: "compaction";
+			compactionMode: "auto" | "manual" | "inherited";
+			status: "started" | "completed" | "skipped" | "failed" | "cancelled";
+			tokensBefore?: number;
+			tokensAfter?: number;
+			messagesBefore?: number;
+			messagesAfter?: number;
+	  }
 	| { kind: "team"; text: string }
 	| { kind: "user_submitted"; text: string; delivery?: "queue" | "steer" }
 	| {
@@ -186,7 +195,15 @@ export interface TuiProps {
 	onResumeSession: (sessionId: string) => Promise<ResumedSessionResult>;
 	onCompact: () => Promise<InteractiveCompactionResult>;
 	onFork: () => Promise<
-		{ forkedFromSessionId: string; newSessionId: string } | undefined
+		| {
+				forkedFromSessionId: string;
+				newSessionId: string;
+				carriedWorkingContext?: {
+					workingContextMessages: number;
+					canonicalMessages: number;
+				};
+		  }
+		| undefined
 	>;
 	getCheckpointData: () => Promise<
 		{ messages: Message[]; checkpointHistory: CheckpointEntry[] } | undefined

apps/cli/src/tui/utils/compaction-status.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it } from "vitest";
+import {
+	formatCompactionDividerLabel,
+	formatTokenCount,
+	parseCompactionNoticeMetadata,
+} from "./compaction-status";
+
+describe("parseCompactionNoticeMetadata", () => {
+	it("extracts a divider entry from a completed auto-compaction notice", () => {
+		expect(
+			parseCompactionNoticeMetadata({
+				kind: "auto_compaction",
+				reason: "auto_compaction",
+				phase: "completed",
+				tokensBefore: 25_101,
+				tokensAfter: 6_300,
+				messagesBefore: 142,
+				messagesAfter: 9,
+			}),
+		).toEqual({
+			compactionMode: "auto",
+			status: "completed",
+			tokensBefore: 25_101,
+			tokensAfter: 6_300,
+			messagesBefore: 142,
+			messagesAfter: 9,
+		});
+	});
+
+	it("extracts a streaming divider entry from a started notice", () => {
+		expect(
+			parseCompactionNoticeMetadata({
+				kind: "auto_compaction",
+				phase: "started",
+			}),
+		).toEqual({ compactionMode: "auto", status: "started" });
+	});
+
+	it("maps manual compaction notices to manual mode", () => {
+		expect(
+			parseCompactionNoticeMetadata({
+				kind: "manual_compaction",
+				phase: "completed",
+			})?.compactionMode,
+		).toBe("manual");
+	});
+
+	it("maps a benign no-result terminal notice to skipped", () => {
+		expect(
+			parseCompactionNoticeMetadata({
+				kind: "auto_compaction",
+				phase: "skipped",
+			}),
+		).toEqual({ compactionMode: "auto", status: "skipped" });
+	});
+
+	it("ignores non-compaction metadata", () => {
+		expect(
+			parseCompactionNoticeMetadata({ kind: "recovery", phase: "completed" }),
+		).toBeUndefined();
+		expect(
+			parseCompactionNoticeMetadata({ kind: "auto_compaction" }),
+		).toBeUndefined();
+		expect(parseCompactionNoticeMetadata(undefined)).toBeUndefined();
+	});
+
+	it("drops non-numeric counters instead of rendering garbage", () => {
+		const parsed = parseCompactionNoticeMetadata({
+			kind: "auto_compaction",
+			phase: "completed",
+			tokensBefore: "25000",
+			tokensAfter: Number.NaN,
+		});
+		expect(parsed?.tokensBefore).toBeUndefined();
+		expect(parsed?.tokensAfter).toBeUndefined();
+	});
+});
+
+describe("formatTokenCount", () => {
+	it("formats counts into compact units", () => {
+		expect(formatTokenCount(999)).toBe("999");
+		expect(formatTokenCount(6_300)).toBe("6.3k");
+		expect(formatTokenCount(25_000)).toBe("25k");
+		expect(formatTokenCount(1_200_000)).toBe("1.2M");
+	});
+});
+
+describe("formatCompactionDividerLabel", () => {
+	it("includes token and message deltas when present", () => {
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "auto",
+				status: "completed",
+				tokensBefore: 25_101,
+				tokensAfter: 6_300,
+				messagesBefore: 142,
+				messagesAfter: 9,
+			}),
+		).toBe("Context compacted · 25.1k → 6.3k tokens · 142 → 9 messages");
+	});
+
+	it("labels in-progress compaction", () => {
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "auto",
+				status: "started",
+			}),
+		).toBe("Auto compacting messages");
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "manual",
+				status: "started",
+			}),
+		).toBe("Compacting messages");
+	});
+
+	it("labels failed and cancelled compaction", () => {
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "auto",
+				status: "failed",
+			}),
+		).toBe("Compaction failed");
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "auto",
+				status: "cancelled",
+			}),
+		).toBe("Compaction cancelled");
+	});
+
+	it("labels skipped compaction without calling it cancelled", () => {
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "auto",
+				status: "skipped",
+			}),
+		).toBe("Compaction skipped");
+	});
+
+	it("labels inherited working context from forks and restarts", () => {
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "inherited",
+				status: "completed",
+				messagesBefore: 60,
+				messagesAfter: 15,
+			}),
+		).toBe("Compacted working context carried over · 60 → 15 messages");
+	});
+
+	it("labels manual compaction and omits missing counters", () => {
+		expect(
+			formatCompactionDividerLabel({
+				kind: "compaction",
+				compactionMode: "manual",
+				status: "completed",
+			}),
+		).toBe("Context compacted (manual)");
+	});
+});

apps/cli/src/tui/utils/compaction-status.ts

@@ -1,9 +1,106 @@
-import type { InteractiveCompactionResult } from "../types";
+import type { ChatEntry, InteractiveCompactionResult } from "../types";
+
+export type CompactionDividerEntry = Extract<ChatEntry, { kind: "compaction" }>;
 
 function formatMessageCount(count: number): string {
 	return `${count} ${count === 1 ? "message" : "messages"}`;
 }
 
+function asFiniteNumber(value: unknown): number | undefined {
+	return typeof value === "number" && Number.isFinite(value)
+		? value
+		: undefined;
+}
+
+/**
+ * Extracts a compaction divider entry from a status notice's metadata.
+ * "started" notices produce a streaming (in-progress) divider; "completed"
+ * notices produce the final divider with counters. Returns undefined for
+ * non-compaction notices.
+ */
+export function parseCompactionNoticeMetadata(
+	metadata: Record<string, unknown> | undefined,
+): Omit<CompactionDividerEntry, "kind"> | undefined {
+	if (
+		!metadata ||
+		(metadata.phase !== "started" &&
+			metadata.phase !== "completed" &&
+			metadata.phase !== "skipped")
+	) {
+		return undefined;
+	}
+	const kind = metadata.kind ?? metadata.reason;
+	if (kind !== "auto_compaction" && kind !== "manual_compaction") {
+		return undefined;
+	}
+	const compactionMode = kind === "manual_compaction" ? "manual" : "auto";
+	if (metadata.phase === "started") {
+		return { compactionMode, status: "started" };
+	}
+	if (metadata.phase === "skipped") {
+		return { compactionMode, status: "skipped" };
+	}
+	return {
+		compactionMode,
+		status: "completed",
+		tokensBefore: asFiniteNumber(metadata.tokensBefore),
+		tokensAfter: asFiniteNumber(metadata.tokensAfter),
+		messagesBefore: asFiniteNumber(metadata.messagesBefore),
+		messagesAfter: asFiniteNumber(metadata.messagesAfter),
+	};
+}
+
+export function formatTokenCount(count: number): string {
+	if (count < 1_000) {
+		return `${count}`;
+	}
+	if (count < 1_000_000) {
+		return `${(count / 1_000).toFixed(1).replace(/\.0$/, "")}k`;
+	}
+	return `${(count / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
+}
+
+export function formatCompactionDividerLabel(
+	entry: CompactionDividerEntry,
+): string {
+	if (entry.status === "started") {
+		return entry.compactionMode === "manual"
+			? "Compacting messages"
+			: "Auto compacting messages";
+	}
+	if (entry.status === "failed") {
+		return "Compaction failed";
+	}
+	if (entry.status === "cancelled") {
+		return "Compaction cancelled";
+	}
+	if (entry.status === "skipped") {
+		return "Compaction skipped";
+	}
+	const parts: string[] = [
+		entry.compactionMode === "manual"
+			? "Context compacted (manual)"
+			: entry.compactionMode === "inherited"
+				? "Compacted working context carried over"
+				: "Context compacted",
+	];
+	if (
+		typeof entry.tokensBefore === "number" &&
+		typeof entry.tokensAfter === "number"
+	) {
+		parts.push(
+			`${formatTokenCount(entry.tokensBefore)} → ${formatTokenCount(entry.tokensAfter)} tokens`,
+		);
+	}
+	if (
+		typeof entry.messagesBefore === "number" &&
+		typeof entry.messagesAfter === "number"
+	) {
+		parts.push(`${entry.messagesBefore} → ${entry.messagesAfter} messages`);
+	}
+	return parts.join(" · ");
+}
+
 export function formatCompactionStatus(
 	result: InteractiveCompactionResult,
 ): string {

apps/cli/src/utils/chat-commands.ts

@@ -14,6 +14,15 @@ export type ChatCommandState = {
 export type ForkSessionResult = {
 	forkedFromSessionId: string;
 	newSessionId: string;
+	/**
+	 * Present when the source session had valid compaction state that was
+	 * re-anchored onto the forked session, so the UI can surface why the
+	 * next request is smaller than the canonical history.
+	 */
+	carriedWorkingContext?: {
+		workingContextMessages: number;
+		canonicalMessages: number;
+	};
 };
 
 export type MuteCommandInput = {

apps/cli/src/utils/compaction-mode.test.ts

@@ -26,20 +26,20 @@ describe("CLI compaction mode helpers", () => {
 	});
 
 	it("maps basic and off modes to core compaction config", () => {
-		const config = createConfig({ enabled: true, maxInputTokens: 123 });
+		const config = createConfig({ enabled: true, preserveRecentTokens: 123 });
 
 		applyCliCompactionMode(config, "basic");
 		expect(config.compaction).toEqual({
 			enabled: true,
 			strategy: "basic",
-			maxInputTokens: 123,
+			preserveRecentTokens: 123,
 		});
 		expect(getCliCompactionMode(config)).toBe("basic");
 
 		applyCliCompactionMode(config, "off");
 		expect(config.compaction).toEqual({
 			enabled: false,
-			maxInputTokens: 123,
+			preserveRecentTokens: 123,
 		});
 		expect(getCliCompactionMode(config)).toBe("off");
 	});

apps/cli/src/utils/events.ts

@@ -1,4 +1,8 @@
 import type { AgentEvent, TeamEvent } from "@cline/core";
+import {
+	formatCompactionDividerLabel,
+	parseCompactionNoticeMetadata,
+} from "../tui/utils/compaction-status";
 import { formatCliErrorMessage } from "./cline-pass-errors";
 import { formatToolInput, formatToolOutput, truncate } from "./helpers";
 import {
@@ -24,6 +28,24 @@ const TEAM_RUN_ACTIVE_SUFFIX = `${c.dim} ...${c.reset}`;
 
 export function resolveStatusNoticeLabel(
 	event: AgentEvent,
+): string | undefined {
+	if (event.type !== "notice" || event.displayRole !== "status") {
+		return undefined;
+	}
+	const compaction = parseCompactionNoticeMetadata(event.metadata);
+	if (compaction) {
+		return formatCompactionDividerLabel({ kind: "compaction", ...compaction });
+	}
+	return resolveNonCompactionStatusLabel(event);
+}
+
+/**
+ * Label for a status notice already known not to be a compaction notice.
+ * Callers that have parsed the compaction metadata themselves use this to
+ * avoid re-parsing.
+ */
+export function resolveNonCompactionStatusLabel(
+	event: AgentEvent,
 ): string | undefined {
 	if (event.type !== "notice" || event.displayRole !== "status") {
 		return undefined;

apps/cline-hub/src/server/user-instructions.ts

@@ -18,6 +18,7 @@ import {
 	resolvePluginConfigSearchPaths,
 	resolveAgentConfigSearchPaths as resolveSharedAgentConfigSearchPaths,
 } from "@cline/core";
+import { readFileSyncStrippingUtf8Bom } from "@cline/shared/node";
 import { readMcpServersResponse } from "./mcp";
 import type { JsonRecord } from "./types";
 
@@ -114,7 +115,7 @@ export async function listUserInstructionConfigs(
 					const ext = extname(entry.name).toLowerCase();
 					if (ext !== ".yml" && ext !== ".yaml") continue;
 					const filePath = join(directory, entry.name);
-					const raw = readFileSync(filePath, "utf8");
+					const raw = readFileSyncStrippingUtf8Bom(filePath);
 					const fmMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---/);
 					const fm = fmMatch?.[1] ?? "";
 					const nameMatch = fm.match(/^\s*name:\s*(.+?)\s*$/m);

apps/cline-hub/src/webview/package.json

@@ -26,7 +26,7 @@
 		"embla-carousel-react": "^8.6.0",
 		"lucide-react": "^0.577.0",
 		"media-chrome": "^4.18.1",
-		"mermaid": "^11.15.0",
+		"mermaid": "11.16.0",
 		"motion": "^12.38.0",
 		"nanoid": "^5.1.7",
 		"next-themes": "^0.4.6",

apps/examples/desktop-app/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Cline Code Desktop Changelog
+
+## 0.0.3
+
+- The reasoning section in the chat transcript now reads simply "Thinking" — dropped the redundant status text and brain icon.
+
+## 0.0.2
+
+- First public release of Cline Code for macOS: a desktop app for running and inspecting Cline agent sessions, signed and notarized for Apple Silicon and Intel.
+- Automatic updates: the app checks on launch and every 2 hours, downloads new versions in the background, and prompts for a one-click restart. Ignored updates apply on the next launch.
+- Download the DMG once from GitHub Releases — every future release arrives automatically.

apps/examples/desktop-app/README.md

@@ -16,7 +16,30 @@ From `apps/examples/desktop-app/`:
 - `bun run package:desktop` - package the current OS desktop app into `dist/desktop/`
 - `bun run typecheck` - TypeScript check
 
-## Shareable Desktop Packages
+## Web Visual System
+
+The framework-neutral color, typography, radius, and navigation contract lives
+in the internal [`@cline/ui`](../../../sdk/packages/ui/README.md) workspace
+package. Other Cline web surfaces can take only its tokens or opt into the
+Tailwind adapter and shared base styles without depending on the desktop
+runtime. See [`webview/styles/README.md`](./webview/styles/README.md) for the
+desktop integration notes.
+
+## Releases & Auto-Updates
+
+Releases are built, signed, notarized, and published by the `desktop-publish`
+GitHub workflow. The step-by-step flow (version bumps, changelog, tag, repo
+secrets) lives in the `publish-desktop` skill
+(`.cline/skills/publish-desktop/SKILL.md`).
+
+Installed apps auto-update via the Tauri updater: they poll the rolling
+`desktop-latest` release's `latest.json` on launch and every 2 hours, install
+updates in the background, and prompt for a restart. Two things must never be
+lost: the `desktop-latest` release/tag (its feed URL is baked into shipped
+apps) and the updater private key (`TAURI_SIGNING_PRIVATE_KEY` — without it,
+shipped apps can't verify new updates).
+
+## Shareable Desktop Packages (manual fallback)
 
 Tauri desktop bundles are OS-specific, so build each package on the target OS:
 
@@ -99,6 +122,21 @@ Desktop transport envelope:
 - `<sessionId>.hooks.jsonl` is observability/debug telemetry and should not be required for normal history replay/export flows.
 - Full v1 schema for the persisted messages file, including failure/retry semantics and golden fixtures, is documented in [`packages/core/docs/messages-contract-v1.md`](../../../sdk/packages/core/docs/messages-contract-v1.md).
 
+## Sidecar observability
+
+The desktop sidecar sends SDK telemetry through the same configured OpenTelemetry
+pipeline used by the CLI and writes structured runtime logs to
+`~/.cline/data/logs/code.log` by default. Telemetry continues to honor the global
+opt-out setting exposed in the desktop settings UI. The sidecar truncates stale
+logs and rotates the active file before it exceeds 50 MiB.
+
+Logging can be configured with the same environment variables as the CLI:
+
+- `CLINE_LOG_ENABLED=0` disables file logging.
+- `CLINE_LOG_LEVEL` sets the Pino level (for example, `debug` or `warn`).
+- `CLINE_LOG_PATH` overrides the log destination.
+- `CLINE_LOG_NAME` overrides the logger name.
+
 ## Troubleshooting
 
 - If live updates stall, verify the desktop backend websocket is connected and `chat_event` messages are arriving.

apps/examples/desktop-app/package.json

@@ -1,11 +1,14 @@
 {
 	"name": "@cline/code",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"private": true,
 	"scripts": {
+		"build:ui": "bun -F @cline/ui build",
+		"predev:web": "bun run build:ui",
 		"dev:web": "next dev webview -p 3125 --turbo",
 		"dev:sidecar": "bun run sidecar/index.ts",
 		"dev": "tauri dev",
+		"prebuild": "bun run build:ui",
 		"build": "bun run bun.mts",
 		"build:sidecar": "mkdir -p dist/sidecar && bun build ./sidecar/index.ts --outfile ./dist/sidecar/index.js --target bun",
 		"build:sidecar:bin": "bun run scripts/build-sidecar-bin.ts",
@@ -16,7 +19,10 @@
 		"package:desktop:windows": "bun run scripts/package-desktop.ts --platform windows",
 		"package:desktop:linux": "bun run scripts/package-desktop.ts --platform linux",
 		"start": "next start webview",
+		"pretypecheck": "bun run build:ui",
 		"typecheck": "tsc -p tsconfig.dev.json --noEmit",
+		"pretest:chat-ui": "bun run build:ui",
+		"test:chat-ui": "vitest run webview/components/views/chat/chat-messages.test.tsx --config vitest.config.ts",
 		"clean": "rm -rf webview/.next webview/out node_modules dist && (cd src-tauri && rm -rf target node_modules dist)"
 	},
 	"dependencies": {
@@ -24,6 +30,7 @@
 		"@cline/core": "workspace:*",
 		"@cline/llms": "workspace:*",
 		"@cline/shared": "workspace:*",
+		"@cline/ui": "workspace:*",
 		"@fontsource-variable/schibsted-grotesk": "^5.2.8",
 		"@fontsource/azeret-mono": "^5.2.9",
 		"@hookform/resolvers": "^3.9.1",
@@ -54,6 +61,9 @@
 		"@radix-ui/react-toggle": "1.1.10",
 		"@radix-ui/react-toggle-group": "1.1.11",
 		"@radix-ui/react-tooltip": "1.2.8",
+		"@shikijs/langs": "^4.2.0",
+		"@shikijs/themes": "^4.2.0",
+		"@streamdown/cjk": "^1.0.3",
 		"@tauri-apps/api": "^2.0.0",
 		"@vercel/analytics": "1.6.1",
 		"autoprefixer": "^10.4.20",
@@ -64,19 +74,19 @@
 		"embla-carousel-react": "8.6.0",
 		"input-otp": "1.4.2",
 		"lucide-react": "^0.564.0",
-		"marked": "^17.0.3",
 		"next": "16.2.6",
 		"next-themes": "^0.4.6",
+		"pino": "^10.3.1",
 		"radix-ui": "^1.4.3",
 		"react": "19.2.4",
 		"react-day-picker": "9.13.2",
 		"react-dom": "19.2.4",
 		"react-hook-form": "^7.54.1",
-		"react-markdown": "^10.1.0",
 		"react-resizable-panels": "^2.1.7",
 		"recharts": "2.15.0",
-		"remark-gfm": "^4.0.1",
+		"shiki": "^4.0.2",
 		"sonner": "^1.7.1",
+		"streamdown": "^2.5.0",
 		"tailwind-merge": "^3.3.1",
 		"vaul": "^1.1.2",
 		"zod": "^3.24.1"
@@ -86,6 +96,7 @@
 		"@tailwindcss/postcss": "^4.2.0",
 		"@types/react": "19.2.14",
 		"@types/react-dom": "19.2.3",
+		"jsdom": "^26.0.0",
 		"postcss": "^8.5",
 		"tailwindcss": "^4.2.0",
 		"tw-animate-css": "1.3.3",

apps/examples/desktop-app/scripts/build-sidecar-bin.ts

@@ -17,13 +17,33 @@ const resolveTargetTriple = async (): Promise<string> => {
 	return host;
 };
 
+// Bun cross-compiles --compile binaries, so a CI runner can produce the
+// sidecar for a different architecture than its own (e.g. the x86_64 macOS
+// bundle from an arm64 runner). Without an explicit --target, bun always
+// emits a host-arch binary even when Tauri is building for another triple.
+const resolveBunCompileTarget = (targetTriple: string): string | undefined => {
+	if (targetTriple.startsWith("aarch64-apple-darwin"))
+		return "bun-darwin-arm64";
+	if (targetTriple.startsWith("x86_64-apple-darwin")) return "bun-darwin-x64";
+	if (targetTriple.startsWith("x86_64-pc-windows")) return "bun-windows-x64";
+	if (targetTriple.startsWith("x86_64-unknown-linux")) return "bun-linux-x64";
+	if (targetTriple.startsWith("aarch64-unknown-linux"))
+		return "bun-linux-arm64";
+	return undefined;
+};
+
 const main = async () => {
 	const targetTriple = await resolveTargetTriple();
 	const extension = targetTriple.includes("windows") ? ".exe" : "";
 	const outfile = `./src-tauri/bin/code-sidecar-${targetTriple}${extension}`;
+	const bunTarget = resolveBunCompileTarget(targetTriple);
 
 	await $`mkdir -p src-tauri/bin`;
-	await $`bun build ./sidecar/index.ts --compile --outfile ${outfile}`;
+	if (bunTarget) {
+		await $`bun build ./sidecar/index.ts --compile --target=${bunTarget} --outfile ${outfile}`;
+	} else {
+		await $`bun build ./sidecar/index.ts --compile --outfile ${outfile}`;
+	}
 };
 
 main().catch((error: unknown) => {

apps/examples/desktop-app/scripts/generate-update-manifest.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { buildUpdateManifest } from "./generate-update-manifest";
+
+const makeArtifactDir = (): string => {
+	const dir = mkdtempSync(path.join(tmpdir(), "update-manifest-"));
+	writeFileSync(path.join(dir, "Cline-Code_0.1.0_aarch64.app.tar.gz"), "tar");
+	writeFileSync(
+		path.join(dir, "Cline-Code_0.1.0_aarch64.app.tar.gz.sig"),
+		"sig-aarch64\n",
+	);
+	writeFileSync(path.join(dir, "Cline-Code_0.1.0_x86_64.app.tar.gz"), "tar");
+	writeFileSync(
+		path.join(dir, "Cline-Code_0.1.0_x86_64.app.tar.gz.sig"),
+		"sig-x86_64\n",
+	);
+	writeFileSync(path.join(dir, "Cline-Code_0.1.0_aarch64.dmg"), "dmg");
+	return dir;
+};
+
+describe("buildUpdateManifest", () => {
+	test("maps updater artifacts to darwin platform entries", () => {
+		const dir = makeArtifactDir();
+		const manifest = buildUpdateManifest({
+			version: "0.1.0",
+			tag: "desktop-v0.1.0",
+			dir,
+			repo: "cline/cline",
+			notes: "notes",
+			pubDate: "2026-07-21T00:00:00.000Z",
+		});
+
+		expect(manifest.version).toBe("0.1.0");
+		expect(manifest.platforms["darwin-aarch64"]).toEqual({
+			signature: "sig-aarch64",
+			url: "https://github.com/cline/cline/releases/download/desktop-v0.1.0/Cline-Code_0.1.0_aarch64.app.tar.gz",
+		});
+		expect(manifest.platforms["darwin-x86_64"]).toEqual({
+			signature: "sig-x86_64",
+			url: "https://github.com/cline/cline/releases/download/desktop-v0.1.0/Cline-Code_0.1.0_x86_64.app.tar.gz",
+		});
+		// The DMG is a first-install artifact, not an updater artifact.
+		expect(Object.keys(manifest.platforms)).toHaveLength(2);
+	});
+
+	test("throws when a signature file is missing", () => {
+		const dir = mkdtempSync(path.join(tmpdir(), "update-manifest-"));
+		writeFileSync(path.join(dir, "Cline-Code_0.1.0_aarch64.app.tar.gz"), "tar");
+		expect(() =>
+			buildUpdateManifest({
+				version: "0.1.0",
+				tag: "desktop-v0.1.0",
+				dir,
+				repo: "cline/cline",
+				notes: "notes",
+				pubDate: "2026-07-21T00:00:00.000Z",
+			}),
+		).toThrow();
+	});
+
+	test("throws when no updater artifacts exist", () => {
+		const dir = mkdtempSync(path.join(tmpdir(), "update-manifest-"));
+		writeFileSync(path.join(dir, "Cline-Code_0.1.0_aarch64.dmg"), "dmg");
+		expect(() =>
+			buildUpdateManifest({
+				version: "0.1.0",
+				tag: "desktop-v0.1.0",
+				dir,
+				repo: "cline/cline",
+				notes: "notes",
+				pubDate: "2026-07-21T00:00:00.000Z",
+			}),
+		).toThrow(/no updater artifacts/);
+	});
+});

apps/examples/desktop-app/scripts/generate-update-manifest.ts

@@ -0,0 +1,133 @@
+// Generates the Tauri updater manifest (latest.json) from the updater
+// artifacts produced by the desktop-publish workflow. The manifest is uploaded
+// to the rolling `desktop-latest` GitHub release, which is the static endpoint
+// configured in src-tauri/tauri.conf.json; its platform URLs point back at the
+// immutable per-version release assets.
+//
+// Usage:
+//   bun scripts/generate-update-manifest.ts \
+//     --version 0.1.0 --tag desktop-v0.1.0 --dir dist/desktop \
+//     --out dist/desktop/latest.json [--repo cline/cline] [--notes-file notes.md]
+
+import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+
+type UpdaterPlatformEntry = {
+	signature: string;
+	url: string;
+};
+
+export type UpdateManifest = {
+	version: string;
+	notes: string;
+	pub_date: string;
+	platforms: Record<string, UpdaterPlatformEntry>;
+};
+
+// Maps the arch token embedded in artifact file names (see the "Collect
+// artifacts" workflow step) to the platform keys the Tauri updater requests.
+const PLATFORM_KEY_BY_ARCH_SUFFIX: Record<string, string> = {
+	aarch64: "darwin-aarch64",
+	x86_64: "darwin-x86_64",
+};
+
+const getArgValue = (args: string[], name: string): string | undefined => {
+	const index = args.indexOf(name);
+	if (index >= 0 && args[index + 1] && !args[index + 1].startsWith("--")) {
+		return args[index + 1];
+	}
+	const prefix = `${name}=`;
+	const inline = args.find((arg) => arg.startsWith(prefix));
+	return inline?.slice(prefix.length);
+};
+
+const archOfUpdaterArtifact = (fileName: string): string | undefined => {
+	if (!fileName.endsWith(".app.tar.gz")) {
+		return undefined;
+	}
+	return Object.keys(PLATFORM_KEY_BY_ARCH_SUFFIX).find((arch) =>
+		fileName.includes(`_${arch}`),
+	);
+};
+
+export const buildUpdateManifest = (options: {
+	version: string;
+	tag: string;
+	dir: string;
+	repo: string;
+	notes: string;
+	pubDate: string;
+}): UpdateManifest => {
+	const platforms: Record<string, UpdaterPlatformEntry> = {};
+
+	for (const fileName of readdirSync(options.dir).sort()) {
+		const arch = archOfUpdaterArtifact(fileName);
+		if (!arch) {
+			continue;
+		}
+		const signaturePath = path.join(options.dir, `${fileName}.sig`);
+		const signature = readFileSync(signaturePath, "utf8").trim();
+		if (!signature) {
+			throw new Error(`empty updater signature at ${signaturePath}`);
+		}
+		platforms[PLATFORM_KEY_BY_ARCH_SUFFIX[arch]] = {
+			signature,
+			url: `https://github.com/${options.repo}/releases/download/${options.tag}/${encodeURIComponent(fileName)}`,
+		};
+	}
+
+	if (Object.keys(platforms).length === 0) {
+		throw new Error(
+			`no updater artifacts (*.app.tar.gz with a known arch suffix) found in ${options.dir}`,
+		);
+	}
+
+	return {
+		version: options.version,
+		notes: options.notes,
+		pub_date: options.pubDate,
+		platforms,
+	};
+};
+
+const main = () => {
+	const args = process.argv.slice(2);
+	const version = getArgValue(args, "--version");
+	const tag = getArgValue(args, "--tag");
+	const dir = getArgValue(args, "--dir");
+	const out = getArgValue(args, "--out");
+	const repo =
+		getArgValue(args, "--repo") ??
+		process.env.GITHUB_REPOSITORY ??
+		"cline/cline";
+	const notesFile = getArgValue(args, "--notes-file");
+
+	if (!version || !tag || !dir || !out) {
+		throw new Error(
+			"usage: generate-update-manifest.ts --version X.Y.Z --tag desktop-vX.Y.Z --dir <artifact dir> --out <latest.json> [--repo owner/repo] [--notes-file <file>]",
+		);
+	}
+
+	const notes = notesFile
+		? readFileSync(notesFile, "utf8").trim()
+		: `Cline Code v${version}`;
+
+	const manifest = buildUpdateManifest({
+		version,
+		tag,
+		dir,
+		repo,
+		notes,
+		pubDate: new Date().toISOString(),
+	});
+
+	writeFileSync(out, `${JSON.stringify(manifest, null, "\t")}\n`);
+	console.log(`wrote ${out}`);
+	for (const [platform, entry] of Object.entries(manifest.platforms)) {
+		console.log(`- ${platform}: ${entry.url}`);
+	}
+};
+
+if (import.meta.main) {
+	main();
+}

apps/examples/desktop-app/sidecar/chat-session.test.ts

@@ -1,5 +1,18 @@
-import { describe, expect, it } from "vitest";
-import { buildSessionConnectionUpdate } from "./chat-session";
+import { rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { describe, expect, it, vi } from "vitest";
+import {
+	buildSessionConnectionUpdate,
+	consumeWorkspaceMetadata,
+	handleChatSessionCommand,
+	hasProviderChanged,
+	mergeSessionConfig,
+	prewarmWorkspaceMetadata,
+	shouldUpdateSessionConnection,
+	WORKSPACE_METADATA_PREWARM_TTL_MS,
+} from "./chat-session";
+import type { SidecarContext } from "./types";
 
 describe("buildSessionConnectionUpdate", () => {
 	it("does not clear reasoning settings when config omits reasoning fields", () => {
@@ -49,3 +62,510 @@ describe("buildSessionConnectionUpdate", () => {
 		expect(Object.hasOwn(update, "thinkingBudgetTokens")).toBe(false);
 	});
 });
+
+describe("shouldUpdateSessionConnection", () => {
+	it("skips the redundant connection update on the first send", () => {
+		const config = {
+			provider: "cline",
+			model: "anthropic/claude-sonnet-4.6",
+			thinking: true,
+			reasoningEffort: "high",
+		};
+
+		expect(shouldUpdateSessionConnection(config, { ...config })).toBe(false);
+	});
+
+	it("updates the connection when the selected reasoning level changes", () => {
+		const current = {
+			provider: "cline",
+			model: "anthropic/claude-sonnet-4.6",
+			thinking: true,
+			reasoningEffort: "low",
+		};
+
+		expect(
+			shouldUpdateSessionConnection(current, {
+				...current,
+				reasoningEffort: "high",
+			}),
+		).toBe(true);
+	});
+});
+
+describe("hasProviderChanged", () => {
+	it("distinguishes provider switches from model switches", () => {
+		expect(
+			hasProviderChanged(
+				{ provider: "cline", model: "anthropic/claude-sonnet-4.6" },
+				{ provider: "openai-codex", model: "gpt-5.3-codex" },
+			),
+		).toBe(true);
+		expect(
+			hasProviderChanged(
+				{ provider: "cline", model: "anthropic/claude-sonnet-4.6" },
+				{ provider: "cline", model: "openai/gpt-5.3-codex" },
+			),
+		).toBe(false);
+	});
+
+	it("honors a providerId-only update when the stored config uses provider", () => {
+		const current = {
+			provider: "cline",
+			model: "anthropic/claude-sonnet-4.6",
+		};
+		const update = {
+			providerId: "openai-codex",
+			modelId: "gpt-5.3-codex",
+		};
+
+		expect(hasProviderChanged(current, update)).toBe(true);
+		expect(mergeSessionConfig(current, update)).toMatchObject({
+			provider: "openai-codex",
+			providerId: "openai-codex",
+			model: "gpt-5.3-codex",
+			modelId: "gpt-5.3-codex",
+		});
+	});
+});
+
+describe("first-send connection updates", () => {
+	const baseConfig = {
+		provider: "cline",
+		model: "anthropic/claude-sonnet-4.6",
+		thinking: true,
+		reasoningEffort: "high",
+	};
+
+	function createContext(options?: {
+		attachedViaHub?: boolean;
+		config?: Record<string, unknown>;
+	}) {
+		const updateSessionConnection = vi.fn(async () => undefined);
+		const send = vi.fn(async () => ({
+			text: "done",
+			finishReason: "completed",
+			messages: [],
+		}));
+		const readMessages = vi.fn(async () => [
+			{ role: "user", content: "first prompt" },
+			{ role: "assistant", content: "first response" },
+		]);
+		const readSessionCompactionState = vi.fn(async () => undefined);
+		const stop = vi.fn(async () => undefined);
+		const sessionId = "session-connection-test";
+		const start = vi.fn(async (_input?: unknown) => ({ sessionId }));
+		const ctx = {
+			liveSessions: new Map([
+				[
+					sessionId,
+					{
+						config: options?.config ?? baseConfig,
+						messages: [],
+						promptsInQueue: [],
+						busy: false,
+						startedAt: Date.now(),
+						status: "idle",
+						attachedViaHub: options?.attachedViaHub ?? false,
+					},
+				],
+			]),
+			streamIndices: new Map(),
+			wsClients: new Set(),
+			sessionManager: {
+				readMessages,
+				readSessionCompactionState,
+				send,
+				start,
+				stop,
+				updateSessionConnection,
+				pendingPrompts: {
+					list: vi.fn(async () => []),
+				},
+			},
+		} as unknown as SidecarContext;
+		return {
+			ctx,
+			readMessages,
+			send,
+			sessionId,
+			start,
+			stop,
+			updateSessionConnection,
+		};
+	}
+
+	it("skips an identical update for a locally-created session", async () => {
+		const { ctx, send, sessionId, updateSessionConnection } = createContext();
+
+		await handleChatSessionCommand(ctx, {
+			action: "send",
+			sessionId,
+			prompt: "hello",
+			config: { ...baseConfig },
+		});
+
+		expect(updateSessionConnection).not.toHaveBeenCalled();
+		expect(send).toHaveBeenCalledTimes(1);
+	});
+
+	it("updates a changed connection before sending", async () => {
+		const { ctx, send, sessionId, updateSessionConnection } = createContext({
+			config: { ...baseConfig, reasoningEffort: "low" },
+		});
+
+		await handleChatSessionCommand(ctx, {
+			action: "send",
+			sessionId,
+			prompt: "hello",
+			config: { ...baseConfig },
+		});
+
+		expect(updateSessionConnection).toHaveBeenCalledTimes(1);
+		expect(updateSessionConnection.mock.invocationCallOrder[0]).toBeLessThan(
+			send.mock.invocationCallOrder[0] ?? 0,
+		);
+	});
+
+	it("rebuilds the same session with its transcript before a provider switch", async () => {
+		const {
+			ctx,
+			readMessages,
+			send,
+			sessionId,
+			start,
+			stop,
+			updateSessionConnection,
+		} = createContext();
+
+		await handleChatSessionCommand(ctx, {
+			action: "send",
+			sessionId,
+			prompt: "continue with Codex",
+			config: {
+				...baseConfig,
+				provider: "openai-codex",
+				model: "gpt-5.3-codex",
+			},
+		});
+
+		expect(readMessages).toHaveBeenCalledWith(sessionId);
+		expect(stop).toHaveBeenCalledWith(sessionId);
+		expect(start).toHaveBeenCalledWith(
+			expect.objectContaining({
+				config: expect.objectContaining({
+					providerId: "openai-codex",
+					modelId: "gpt-5.3-codex",
+					sessionId,
+				}),
+				initialMessages: [
+					{ role: "user", content: "first prompt" },
+					{ role: "assistant", content: "first response" },
+				],
+			}),
+		);
+		expect(updateSessionConnection).toHaveBeenCalledWith(sessionId, {
+			providerId: "openai-codex",
+			modelId: "gpt-5.3-codex",
+			thinking: true,
+			reasoningEffort: "high",
+			thinkingBudgetTokens: null,
+		});
+		expect(start.mock.invocationCallOrder[0]).toBeLessThan(
+			send.mock.invocationCallOrder[0] ?? 0,
+		);
+	});
+
+	it("blocks a concurrent send throughout provider-switch preparation", async () => {
+		let resolveMessages:
+			| ((messages: Array<{ role: string; content: string }>) => void)
+			| undefined;
+		const messages = new Promise<Array<{ role: string; content: string }>>(
+			(resolve) => {
+				resolveMessages = resolve;
+			},
+		);
+		const { ctx, readMessages, sessionId } = createContext();
+		readMessages.mockImplementationOnce(async () => await messages);
+
+		const switching = handleChatSessionCommand(ctx, {
+			action: "send",
+			sessionId,
+			prompt: "continue with Codex",
+			config: {
+				...baseConfig,
+				provider: "openai-codex",
+				model: "gpt-5.3-codex",
+			},
+		});
+		await vi.waitFor(() => expect(readMessages).toHaveBeenCalledOnce());
+
+		await expect(
+			handleChatSessionCommand(ctx, {
+				action: "send",
+				sessionId,
+				prompt: "racing prompt",
+				config: { ...baseConfig },
+			}),
+		).rejects.toThrow("A provider switch is already in progress");
+
+		resolveMessages?.([
+			{ role: "user", content: "first prompt" },
+			{ role: "assistant", content: "first response" },
+		]);
+		await switching;
+	});
+
+	it.each([
+		"queue",
+		"steer",
+	] as const)("locks provider-switch preparation for explicit %s delivery", async (delivery) => {
+		let resolveMessages:
+			| ((messages: Array<{ role: string; content: string }>) => void)
+			| undefined;
+		const messages = new Promise<Array<{ role: string; content: string }>>(
+			(resolve) => {
+				resolveMessages = resolve;
+			},
+		);
+		const { ctx, readMessages, sessionId } = createContext();
+		readMessages.mockImplementationOnce(async () => await messages);
+
+		const switching = handleChatSessionCommand(ctx, {
+			action: "send",
+			sessionId,
+			prompt: "queue this for Codex",
+			delivery,
+			config: {
+				...baseConfig,
+				provider: "openai-codex",
+				model: "gpt-5.3-codex",
+			},
+		});
+		await vi.waitFor(() => expect(readMessages).toHaveBeenCalledOnce());
+
+		await expect(
+			handleChatSessionCommand(ctx, {
+				action: "send",
+				sessionId,
+				prompt: "racing prompt",
+				config: { ...baseConfig },
+			}),
+		).rejects.toThrow("A provider switch is already in progress");
+
+		resolveMessages?.([
+			{ role: "user", content: "first prompt" },
+			{ role: "assistant", content: "first response" },
+		]);
+		await switching;
+	});
+
+	it("restores the previous provider runtime when replacement startup fails", async () => {
+		const { ctx, send, sessionId, start, stop } = createContext();
+		const previousKanbanDataDir = process.env.CLINE_KANBAN_DATA_DIR;
+		const testKanbanDataDir = join(
+			tmpdir(),
+			`cline-provider-rollback-${process.pid}`,
+		);
+		process.env.CLINE_KANBAN_DATA_DIR = testKanbanDataDir;
+		start
+			.mockRejectedValueOnce(new Error("Codex bootstrap failed"))
+			.mockResolvedValueOnce({ sessionId });
+
+		try {
+			const result = (await handleChatSessionCommand(ctx, {
+				action: "send",
+				sessionId,
+				prompt: "continue with Codex",
+				config: {
+					...baseConfig,
+					provider: "openai-codex",
+					model: "gpt-5.3-codex",
+				},
+			})) as { result?: { finishReason?: string; text?: string } };
+
+			expect(stop).toHaveBeenCalledOnce();
+			expect(start).toHaveBeenCalledTimes(2);
+			expect(start.mock.calls[1]?.[0]).toEqual(
+				expect.objectContaining({
+					config: expect.objectContaining({
+						providerId: "cline",
+						modelId: "anthropic/claude-sonnet-4.6",
+						sessionId,
+					}),
+				}),
+			);
+			expect(send).not.toHaveBeenCalled();
+			expect(result.result).toEqual({
+				finishReason: "error",
+				text: "Codex bootstrap failed",
+			});
+
+			await handleChatSessionCommand(ctx, {
+				action: "send",
+				sessionId,
+				prompt: "continue with Cline",
+				config: { ...baseConfig },
+			});
+			expect(send).toHaveBeenCalledOnce();
+		} finally {
+			if (previousKanbanDataDir === undefined) {
+				delete process.env.CLINE_KANBAN_DATA_DIR;
+			} else {
+				process.env.CLINE_KANBAN_DATA_DIR = previousKanbanDataDir;
+			}
+			rmSync(testKanbanDataDir, { recursive: true, force: true });
+		}
+	});
+
+	it("restores the previous provider when replacement label sync fails", async () => {
+		const { ctx, send, sessionId, start, stop, updateSessionConnection } =
+			createContext();
+		const previousKanbanDataDir = process.env.CLINE_KANBAN_DATA_DIR;
+		const testKanbanDataDir = join(
+			tmpdir(),
+			`cline-provider-label-rollback-${process.pid}`,
+		);
+		process.env.CLINE_KANBAN_DATA_DIR = testKanbanDataDir;
+		try {
+			updateSessionConnection
+				.mockRejectedValueOnce(new Error("manifest write failed"))
+				.mockResolvedValueOnce(undefined);
+
+			const result = (await handleChatSessionCommand(ctx, {
+				action: "send",
+				sessionId,
+				prompt: "continue with Codex",
+				config: {
+					...baseConfig,
+					provider: "openai-codex",
+					model: "gpt-5.3-codex",
+				},
+			})) as { result?: { finishReason?: string; text?: string } };
+
+			expect(stop).toHaveBeenCalledTimes(2);
+			expect(start).toHaveBeenCalledTimes(2);
+			expect(start.mock.calls[1]?.[0]).toEqual(
+				expect.objectContaining({
+					config: expect.objectContaining({
+						providerId: "cline",
+						modelId: "anthropic/claude-sonnet-4.6",
+						sessionId,
+					}),
+				}),
+			);
+			expect(updateSessionConnection).toHaveBeenNthCalledWith(2, sessionId, {
+				providerId: "cline",
+				modelId: "anthropic/claude-sonnet-4.6",
+				thinking: true,
+				reasoningEffort: "high",
+				thinkingBudgetTokens: null,
+			});
+			expect(send).not.toHaveBeenCalled();
+			expect(result.result).toEqual({
+				finishReason: "error",
+				text: "manifest write failed",
+			});
+			expect(ctx.liveSessions.get(sessionId)?.config).toEqual(baseConfig);
+
+			await handleChatSessionCommand(ctx, {
+				action: "send",
+				sessionId,
+				prompt: "continue with Cline",
+				config: { ...baseConfig },
+			});
+			expect(send).toHaveBeenCalledOnce();
+			expect(start).toHaveBeenCalledTimes(2);
+		} finally {
+			if (previousKanbanDataDir === undefined) {
+				delete process.env.CLINE_KANBAN_DATA_DIR;
+			} else {
+				process.env.CLINE_KANBAN_DATA_DIR = previousKanbanDataDir;
+			}
+			rmSync(testKanbanDataDir, { recursive: true, force: true });
+		}
+	});
+
+	it("refreshes hub-attached sessions even when the cached config matches", async () => {
+		const { ctx, sessionId, updateSessionConnection } = createContext({
+			attachedViaHub: true,
+		});
+
+		await handleChatSessionCommand(ctx, {
+			action: "send",
+			sessionId,
+			prompt: "hello",
+			config: { ...baseConfig },
+		});
+
+		expect(updateSessionConnection).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("workspace metadata prewarming", () => {
+	it("reuses one in-flight scan and consumes it only once", async () => {
+		let resolveFirst: ((value: string) => void) | undefined;
+		const firstResult = new Promise<string>((resolve) => {
+			resolveFirst = resolve;
+		});
+		const load = vi
+			.fn<(cwd: string) => Promise<string>>()
+			.mockImplementationOnce(async () => await firstResult)
+			.mockResolvedValueOnce("fresh metadata");
+		const cwd = "/tmp/cline-desktop-prewarm-reuse";
+
+		prewarmWorkspaceMetadata(cwd, load);
+		const consumed = consumeWorkspaceMetadata(cwd, load);
+		expect(load).toHaveBeenCalledTimes(1);
+		resolveFirst?.("prewarmed metadata");
+
+		await expect(consumed).resolves.toBe("prewarmed metadata");
+		await expect(consumeWorkspaceMetadata(cwd, load)).resolves.toBe(
+			"fresh metadata",
+		);
+		expect(load).toHaveBeenCalledTimes(2);
+	});
+
+	it("evicts failed scans so the next session can retry", async () => {
+		const load = vi
+			.fn<(cwd: string) => Promise<string>>()
+			.mockRejectedValueOnce(new Error("git unavailable"))
+			.mockResolvedValueOnce("recovered metadata");
+		const cwd = "/tmp/cline-desktop-prewarm-retry";
+
+		prewarmWorkspaceMetadata(cwd, load);
+		await expect(consumeWorkspaceMetadata(cwd, load)).rejects.toThrow(
+			"git unavailable",
+		);
+		await expect(consumeWorkspaceMetadata(cwd, load)).resolves.toBe(
+			"recovered metadata",
+		);
+		expect(load).toHaveBeenCalledTimes(2);
+	});
+
+	it("keeps different workspaces in separate single-flight entries", () => {
+		const load = vi.fn(async (cwd: string) => `metadata for ${cwd}`);
+
+		prewarmWorkspaceMetadata("/tmp/cline-desktop-prewarm-a", load);
+		prewarmWorkspaceMetadata("/tmp/cline-desktop-prewarm-b", load);
+
+		expect(load).toHaveBeenCalledTimes(2);
+	});
+
+	it("refreshes a prewarm that is older than the startup window", async () => {
+		const load = vi
+			.fn<(cwd: string) => Promise<string>>()
+			.mockResolvedValueOnce("startup metadata")
+			.mockResolvedValueOnce("current metadata");
+		const cwd = "/tmp/cline-desktop-prewarm-expired";
+
+		prewarmWorkspaceMetadata(cwd, load, () => 0);
+		await expect(
+			consumeWorkspaceMetadata(
+				cwd,
+				load,
+				() => WORKSPACE_METADATA_PREWARM_TTL_MS + 1,
+			),
+		).resolves.toBe("current metadata");
+		expect(load).toHaveBeenCalledTimes(2);
+	});
+});

apps/examples/desktop-app/sidecar/chat-session.ts

@@ -1,10 +1,14 @@
 import { existsSync, readFileSync } from "node:fs";
-import { basename, join } from "node:path";
+import { basename, join, resolve } from "node:path";
+import { isDeepStrictEqual } from "node:util";
 import {
 	buildConnectionUpdate,
 	buildWorkspaceMetadata,
 	type ClineCore,
 	type CoreSessionConfig,
+	createSessionCompactionState,
+	projectSessionCompactionState,
+	type SessionCompactionState,
 	type SessionPendingPrompt,
 	SessionSource,
 	splitCoreSessionConfig,
@@ -25,6 +29,69 @@ type SessionConnectionUpdate = Parameters<
 	ClineCore["updateSessionConnection"]
 >[1];
 
+type WorkspaceMetadataLoader = (cwd: string) => Promise<string>;
+type WorkspaceMetadataCacheEntry = {
+	createdAt: number;
+	promise: Promise<string>;
+};
+export const WORKSPACE_METADATA_PREWARM_TTL_MS = 60_000;
+const workspaceMetadataPromises = new Map<
+	string,
+	WorkspaceMetadataCacheEntry
+>();
+
+function getWorkspaceMetadataPromise(
+	cwd: string,
+	load: WorkspaceMetadataLoader,
+	now: () => number,
+): { key: string; promise: Promise<string> } {
+	const key = resolve(cwd);
+	const existing = workspaceMetadataPromises.get(key);
+	const createdAt = now();
+	if (
+		existing &&
+		createdAt - existing.createdAt <= WORKSPACE_METADATA_PREWARM_TTL_MS
+	) {
+		return { key, promise: existing.promise };
+	}
+	const promise = load(key);
+	workspaceMetadataPromises.set(key, { createdAt, promise });
+	void promise.catch(() => {
+		if (workspaceMetadataPromises.get(key)?.promise === promise) {
+			workspaceMetadataPromises.delete(key);
+		}
+	});
+	return { key, promise };
+}
+
+export function prewarmWorkspaceMetadata(
+	cwd: string,
+	load: WorkspaceMetadataLoader = buildWorkspaceMetadata,
+	now: () => number = Date.now,
+): void {
+	void getWorkspaceMetadataPromise(cwd, load, now).promise.catch(() => {});
+}
+
+export async function consumeWorkspaceMetadata(
+	cwd: string,
+	load: WorkspaceMetadataLoader = buildWorkspaceMetadata,
+	now: () => number = Date.now,
+): Promise<string> {
+	const { key, promise } = getWorkspaceMetadataPromise(cwd, load, now);
+	try {
+		return await promise;
+	} finally {
+		if (workspaceMetadataPromises.get(key)?.promise === promise) {
+			workspaceMetadataPromises.delete(key);
+		}
+	}
+}
+
+export function refreshWorkspaceMetadata(cwd: string): void {
+	workspaceMetadataPromises.delete(resolve(cwd));
+	prewarmWorkspaceMetadata(cwd);
+}
+
 // ---------------------------------------------------------------------------
 // Session data helpers
 // ---------------------------------------------------------------------------
@@ -148,6 +215,9 @@ function buildCoreSessionConfig(config: JsonRecord): JsonRecord {
 		modelId: config.model ?? config.modelId ?? "",
 		mode: config.mode ?? "act",
 		apiKey: config.apiKey ?? config.api_key ?? "",
+		baseUrl: config.baseUrl,
+		headers: config.headers,
+		providerConfig: config.providerConfig,
 		workspaceRoot: config.workspaceRoot ?? config.workspace_root ?? "",
 		cwd: config.cwd ?? config.workspaceRoot ?? config.workspace_root ?? "",
 		systemPrompt: config.systemPrompt ?? config.system_prompt ?? "",
@@ -219,6 +289,64 @@ export function buildSessionConnectionUpdate(
 	});
 }
 
+export function shouldUpdateSessionConnection(
+	currentConfig: JsonRecord,
+	nextConfig: JsonRecord,
+): boolean {
+	return !isDeepStrictEqual(
+		buildSessionConnectionUpdate(currentConfig),
+		buildSessionConnectionUpdate(nextConfig),
+	);
+}
+
+function readAliasedString(
+	config: JsonRecord,
+	primaryKey: string,
+	aliasKey: string,
+): string | undefined {
+	for (const key of [primaryKey, aliasKey]) {
+		if (!Object.hasOwn(config, key)) continue;
+		const value = String(config[key] ?? "").trim();
+		return value || undefined;
+	}
+	return undefined;
+}
+
+export function mergeSessionConfig(
+	currentConfig: JsonRecord,
+	updates: JsonRecord,
+): JsonRecord {
+	const providerId =
+		readAliasedString(updates, "provider", "providerId") ??
+		readAliasedString(currentConfig, "provider", "providerId");
+	const modelId =
+		readAliasedString(updates, "model", "modelId") ??
+		readAliasedString(currentConfig, "model", "modelId");
+	return {
+		...currentConfig,
+		...updates,
+		...(providerId ? { provider: providerId, providerId } : {}),
+		...(modelId ? { model: modelId, modelId } : {}),
+	};
+}
+
+export function hasProviderChanged(
+	currentConfig: JsonRecord,
+	nextConfig: JsonRecord,
+): boolean {
+	const currentProviderId = readAliasedString(
+		currentConfig,
+		"provider",
+		"providerId",
+	);
+	const nextProviderId = readAliasedString(
+		nextConfig,
+		"provider",
+		"providerId",
+	);
+	return nextProviderId !== undefined && currentProviderId !== nextProviderId;
+}
+
 async function resolveSystemPrompt(config: JsonRecord): Promise<string> {
 	const cwd = String(
 		config.cwd ?? config.workspaceRoot ?? config.workspace_root ?? "",
@@ -232,7 +360,7 @@ async function resolveSystemPrompt(config: JsonRecord): Promise<string> {
 		: config.mode === "plan"
 			? "plan"
 			: "act";
-	const metadata = await buildWorkspaceMetadata(cwd);
+	const metadata = await consumeWorkspaceMetadata(cwd);
 	const inlineRules =
 		typeof config.rules === "string" && config.rules.trim().length > 0
 			? config.rules
@@ -338,9 +466,10 @@ async function handleStart(
 	// the frontend call the separate "send" action to dispatch the prompt.
 	// This avoids a double-execution bug where start() would run the turn AND
 	// the subsequent manager.send() fire-and-forget would run it again.
-	console.error(
-		`[sidecar:handleStart] calling manager.start provider=${coreConfig.providerId} model=${coreConfig.modelId}`,
-	);
+	ctx.logger?.log("Starting desktop chat session", {
+		providerId: String(coreConfig.providerId ?? ""),
+		modelId: String(coreConfig.modelId ?? ""),
+	});
 	const startResult = await manager.start({
 		...splitCoreSessionConfig(coreConfig as unknown as CoreSessionConfig),
 		source: SessionSource.DESKTOP,
@@ -351,7 +480,7 @@ async function handleStart(
 		toolPolicies: resolveToolPolicies(request.config),
 	});
 	const sessionId = startResult.sessionId;
-	console.error(`[sidecar:handleStart] session started sessionId=${sessionId}`);
+	ctx.logger?.log("Desktop chat session started", { sessionId });
 	const session = createLiveSession(request.config, {
 		messages: initialMessages,
 		prompt: initialMessages
@@ -436,6 +565,114 @@ async function handleAttach(
 	};
 }
 
+async function startRebuiltSession(
+	manager: ClineCore,
+	sessionId: string,
+	config: JsonRecord,
+	systemPrompt: string,
+	messages: Message[],
+	compactionState: SessionCompactionState | undefined,
+): Promise<void> {
+	const projectedMessages = compactionState
+		? projectSessionCompactionState(compactionState, messages)
+		: undefined;
+	const restarted = await manager.start({
+		...splitCoreSessionConfig(
+			buildCoreSessionConfig({
+				...config,
+				sessionId,
+				systemPrompt,
+			}) as unknown as CoreSessionConfig,
+		),
+		source: SessionSource.DESKTOP,
+		interactive: true,
+		initialMessages: messages,
+		...(projectedMessages
+			? {
+					initialCompactionState: createSessionCompactionState({
+						sourceMessages: messages,
+						compactedMessages: projectedMessages,
+						systemPrompt: compactionState?.system_prompt,
+					}),
+				}
+			: {}),
+		toolPolicies: resolveToolPolicies(config),
+	});
+	if (restarted.sessionId !== sessionId) {
+		throw new Error(
+			`Provider switch changed session id from ${sessionId} to ${restarted.sessionId}`,
+		);
+	}
+}
+
+async function rebuildSessionForProviderChange(
+	ctx: SidecarContext,
+	manager: ClineCore,
+	sessionId: string,
+	previousConfig: JsonRecord,
+	nextConfig: JsonRecord,
+): Promise<void> {
+	const [messages, compactionState, previousSystemPrompt, nextSystemPrompt] =
+		await Promise.all([
+			manager.readMessages(sessionId),
+			manager.readSessionCompactionState(sessionId).catch((error) => {
+				ctx.logger?.log?.("Failed to read desktop session compaction state", {
+					sessionId,
+					error,
+					severity: "warn",
+				});
+				return undefined;
+			}),
+			resolveSystemPrompt(previousConfig),
+			resolveSystemPrompt(nextConfig),
+		]);
+
+	await manager.stop(sessionId);
+	let replacementStarted = false;
+	try {
+		await startRebuiltSession(
+			manager,
+			sessionId,
+			nextConfig,
+			nextSystemPrompt,
+			messages,
+			compactionState,
+		);
+		replacementStarted = true;
+		// Reusing a session id preserves its existing manifest. Treat refreshing
+		// its connection label as part of the replacement transaction so a
+		// persistence failure cannot leave runtime and cached state diverged.
+		await manager.updateSessionConnection(
+			sessionId,
+			buildSessionConnectionUpdate(nextConfig),
+		);
+	} catch (replacementError) {
+		try {
+			if (replacementStarted) {
+				await manager.stop(sessionId);
+			}
+			await startRebuiltSession(
+				manager,
+				sessionId,
+				previousConfig,
+				previousSystemPrompt,
+				messages,
+				compactionState,
+			);
+			await manager.updateSessionConnection(
+				sessionId,
+				buildSessionConnectionUpdate(previousConfig),
+			);
+		} catch (rollbackError) {
+			throw new AggregateError(
+				[replacementError, rollbackError],
+				"Provider switch and rollback both failed",
+			);
+		}
+		throw replacementError;
+	}
+}
+
 async function handleSend(
 	ctx: SidecarContext,
 	request: ChatSessionCommandRequest,
@@ -446,64 +683,101 @@ async function handleSend(
 	if (!prompt) throw new Error("prompt is required");
 	const manager = getSessionManager(ctx);
 	const session = ctx.liveSessions.get(sessionId);
-	if (request.config) {
-		const connectionUpdate = buildSessionConnectionUpdate(request.config);
-		await manager.updateSessionConnection(sessionId, connectionUpdate);
-		if (session) {
-			session.config = { ...session.config, ...request.config };
-		}
+	if (session?.transitioningProvider) {
+		throw new Error("A provider switch is already in progress");
 	}
-
-	// Determine effective delivery mode.
-	// When the session is busy and no explicit delivery was requested, queue it
-	// via Core so that Core's own pending-prompts mechanism handles draining.
-	// This avoids a sidecar-only local queue that never calls manager.send().
 	let delivery = request.delivery;
 	if (!delivery && session?.busy) {
 		delivery = "queue";
 	}
-
-	if (delivery === "queue") {
-		if (session) {
-			session.prompt = prompt;
-		}
-		// Delegate queuing to Core — it will drain the prompt once the current
-		// turn finishes and emit pending_prompts / pending_prompt_submitted events.
-		await manager.send({
-			sessionId,
-			prompt,
-			delivery: "queue",
-			userImages: request.attachments?.userImages,
-		});
-		const prompts = await manager.pendingPrompts.list({ sessionId });
-		return {
-			sessionId,
-			ok: true,
-			queued: true,
-			promptsInQueue: applyPendingPrompts(ctx, sessionId, prompts),
-		};
+	const nextConfig = request.config
+		? mergeSessionConfig(session?.config ?? {}, request.config)
+		: undefined;
+	const providerChanged = Boolean(
+		session &&
+			request.config &&
+			hasProviderChanged(session.config, request.config),
+	);
+	if (providerChanged && session?.busy) {
+		throw new Error("Cannot switch providers while a turn is running");
 	}
-
+	const ownsBusyState = Boolean(
+		session && delivery !== "queue" && delivery !== "steer",
+	);
 	if (session) {
-		session.prompt = prompt;
-		session.busy = true;
-		session.status = "running";
+		if (ownsBusyState) {
+			session.prompt = prompt;
+			session.busy = true;
+			session.status = "running";
+		}
+		if (providerChanged) {
+			session.transitioningProvider = true;
+		}
 	}
 	try {
-		console.error(
-			`[sidecar:handleSend] calling manager.send sessionId=${sessionId} prompt=${prompt.slice(0, 80)}`,
-		);
+		if (request.config && nextConfig) {
+			if (providerChanged && session) {
+				await rebuildSessionForProviderChange(
+					ctx,
+					manager,
+					sessionId,
+					session.config,
+					nextConfig,
+				);
+			} else if (
+				!session ||
+				session.attachedViaHub ||
+				shouldUpdateSessionConnection(session.config, nextConfig)
+			) {
+				await manager.updateSessionConnection(
+					sessionId,
+					buildSessionConnectionUpdate(nextConfig),
+				);
+			}
+			if (session) {
+				session.config = nextConfig;
+				if (providerChanged) {
+					session.attachedViaHub = false;
+				}
+			}
+		}
+
+		if (delivery === "queue") {
+			if (session) {
+				session.prompt = prompt;
+			}
+			await manager.send({
+				sessionId,
+				prompt,
+				delivery: "queue",
+				userImages: request.attachments?.userImages,
+			});
+			const prompts = await manager.pendingPrompts.list({ sessionId });
+			return {
+				sessionId,
+				ok: true,
+				queued: true,
+				promptsInQueue: applyPendingPrompts(ctx, sessionId, prompts),
+			};
+		}
+
+		ctx.logger?.debug("Sending desktop chat prompt", {
+			sessionId,
+			promptLength: prompt.length,
+			delivery,
+		});
 		const result = await manager.send({
 			sessionId,
 			prompt,
 			delivery,
 			userImages: request.attachments?.userImages,
 		});
-		console.error(
-			`[sidecar:handleSend] manager.send resolved sessionId=${sessionId} finishReason=${result?.finishReason} textLen=${result?.text?.length ?? 0}`,
-		);
-		if (session) {
-			session.busy = false;
+		ctx.logger?.log("Desktop chat prompt completed", {
+			sessionId,
+			finishReason: result?.finishReason,
+			textLength: result?.text?.length ?? 0,
+		});
+		if (session && ownsBusyState) {
 			session.status = "idle";
 			if (result?.messages) session.messages = result.messages as unknown[];
 		}
@@ -522,11 +796,8 @@ async function handleSend(
 				: undefined,
 		};
 	} catch (error) {
-		console.error(
-			`[sidecar:handleSend] manager.send THREW sessionId=${sessionId} error=${error instanceof Error ? error.message : String(error)}`,
-		);
-		if (session) {
-			session.busy = false;
+		ctx.logger?.error?.("Desktop chat prompt failed", { sessionId, error });
+		if (session && ownsBusyState) {
 			session.status = "error";
 		}
 		emitChunk(
@@ -546,6 +817,15 @@ async function handleSend(
 				text: error instanceof Error ? error.message : String(error),
 			},
 		};
+	} finally {
+		if (session) {
+			if (ownsBusyState) {
+				session.busy = false;
+			}
+			if (providerChanged) {
+				session.transitioningProvider = false;
+			}
+		}
 	}
 }
 

apps/examples/desktop-app/sidecar/commands.ts

@@ -1,6 +1,13 @@
 import { execFileSync, spawn } from "node:child_process";
-import { existsSync, readdirSync, readFileSync, rmSync } from "node:fs";
-import { basename, dirname, extname, join } from "node:path";
+import {
+	existsSync,
+	readdirSync,
+	readFileSync,
+	rmSync,
+	statSync,
+} from "node:fs";
+import { homedir } from "node:os";
+import { basename, dirname, extname, isAbsolute, join } from "node:path";
 import type {
 	ClineAccountActionRequest,
 	ProviderCapability,
@@ -28,6 +35,7 @@ import {
 	markLocalProviderEnabled,
 	normalizeOAuthProvider,
 	ProviderSettingsManager,
+	RuntimeOAuthTokenManager,
 	readGlobalSettings,
 	resolveLocalClineAuthToken,
 	resolvePluginConfigSearchPaths,
@@ -44,6 +52,8 @@ import {
 	updateMcpSettingsFileSync,
 } from "@cline/core";
 import { getClineEnvironmentConfig } from "@cline/shared";
+import { readFileSyncStrippingUtf8Bom } from "@cline/shared/node";
+import packageJson from "../package.json";
 import {
 	connectorChannelsPayload,
 	startConnectorChannel,
@@ -75,6 +85,51 @@ import type {
 	SidecarContext,
 } from "./types";
 
+function openUrlInDefaultBrowser(url: string): Promise<void> {
+	const platform = process.platform;
+	// On Windows the URL must not pass through cmd.exe: `cmd /c start <url>`
+	// re-parses metacharacters (&, ^, |) that are valid inside http(s) URLs,
+	// turning a crafted URL into command execution. rundll32 hands the URL
+	// straight to the protocol handler with no shell parsing.
+	const spawned =
+		platform === "darwin"
+			? spawn("open", [url], { stdio: "ignore", detached: true })
+			: platform === "win32"
+				? spawn("rundll32", ["url.dll,FileProtocolHandler", url], {
+						stdio: "ignore",
+						detached: true,
+					})
+				: spawn("xdg-open", [url], {
+						stdio: "ignore",
+						detached: true,
+					});
+	// A missing opener binary emits an async "error" event; without a listener
+	// it becomes an uncaught exception that kills the sidecar. Launchers hand
+	// off to the browser and exit quickly, so a fast non-zero exit means the
+	// handoff failed (xdg-open exits 3 when no handler is available; rundll32
+	// exits 0 even on failure, so Windows stays best-effort). If the launcher
+	// is still running after the grace window, assume the handoff worked
+	// rather than blocking on a launcher that lingers.
+	return new Promise((resolve, reject) => {
+		const graceTimer = setTimeout(resolve, 2_000);
+		spawned.once("spawn", () => {
+			spawned.unref();
+		});
+		spawned.once("error", (error) => {
+			clearTimeout(graceTimer);
+			reject(new Error(`could not open browser: ${error.message}`));
+		});
+		spawned.once("exit", (code) => {
+			clearTimeout(graceTimer);
+			if (code === 0 || code === null) {
+				resolve();
+			} else {
+				reject(new Error(`browser opener exited with code ${code}`));
+			}
+		});
+	});
+}
+
 function readProviderSettingsUpdate(
 	args: Record<string, unknown> | undefined,
 ): Partial<Omit<SaveProviderSettingsActionRequest, "action" | "providerId">> {
@@ -102,8 +157,13 @@ function readMcpServersResponse(): JsonRecord {
 			record.transport && typeof record.transport === "object"
 				? (record.transport as JsonRecord)
 				: undefined;
+		const rawTransportType =
+			transport?.type ?? record.transportType ?? record.type;
 		const transportType = String(
-			transport?.type ?? record.transportType ?? record.type ?? "stdio",
+			rawTransportType ??
+				(typeof transport?.url === "string" || typeof record.url === "string"
+					? "sse"
+					: "stdio"),
 		).trim();
 		return {
 			name,
@@ -150,6 +210,31 @@ function readMcpServersResponse(): JsonRecord {
 	return { settingsPath, hasSettingsFile: true, servers: entries };
 }
 
+/**
+ * Transport type + URL a server record actually points at, tolerating both
+ * the nested `transport` shape and legacy flat fields (mirrors
+ * readMcpServersResponse).
+ */
+function mcpTransportIdentity(record: JsonRecord): string {
+	const transport =
+		record.transport && typeof record.transport === "object"
+			? (record.transport as JsonRecord)
+			: undefined;
+	const url =
+		typeof transport?.url === "string"
+			? transport.url
+			: typeof record.url === "string"
+				? record.url
+				: "";
+	// Core's config-loader defaults a URL-based legacy record with no explicit
+	// type to SSE and maps the legacy "http" alias to streamableHttp; mirror
+	// both so an unchanged endpoint keeps the same identity.
+	const rawType = transport?.type ?? record.transportType ?? record.type;
+	const type = String(rawType ?? (url ? "sse" : "stdio")).trim();
+	const normalizedType = type === "http" ? "streamableHttp" : type;
+	return `${normalizedType}\u0000${url}`;
+}
+
 function writeMcpServersMap(servers: JsonRecord): void {
 	updateMcpSettingsFileSync(resolveMcpSettingsPath(), (settings) => {
 		settings.mcpServers = servers;
@@ -178,6 +263,31 @@ function removePathIfExists(
 	return true;
 }
 
+// Cline access tokens expire between app launches, so account requests must
+// resolve through the refresh-aware OAuth manager instead of reading the
+// persisted token directly. A single shared instance keeps concurrent account
+// requests single-flight; the refresh token is single-use, so parallel
+// refreshes would invalidate each other.
+let clineOAuthTokenManager: RuntimeOAuthTokenManager | undefined;
+
+async function resolveFreshClineAuthToken(
+	manager: ProviderSettingsManager,
+): Promise<string | undefined> {
+	try {
+		clineOAuthTokenManager ??= new RuntimeOAuthTokenManager();
+		const resolution = await clineOAuthTokenManager.resolveProviderApiKey({
+			providerId: "cline",
+		});
+		if (resolution?.apiKey) {
+			return resolution.apiKey;
+		}
+	} catch {
+		// Fall back to the persisted token; the account request surfaces the
+		// auth failure to the caller.
+	}
+	return resolveLocalClineAuthToken(manager.getProviderSettings("cline"));
+}
+
 async function listSessionsFromSidecarManager(
 	ctx: SidecarContext,
 	limit: number,
@@ -399,17 +509,57 @@ async function handleRoutineScheduleCommand(
 	};
 	try {
 		if (command === "list_routine_schedules") {
-			const [schedules, activeExecutions, upcomingRuns] = await Promise.all([
-				clientCommand("schedule.list", {
-					limit: toPositiveInt(args?.limit) ?? 200,
-				}),
-				clientCommand("schedule.active"),
-				clientCommand("schedule.upcoming", { limit: 30 }),
-			]);
+			const [schedules, activeExecutions, upcomingRuns, lastExecutions] =
+				await Promise.all([
+					clientCommand("schedule.list", {
+						limit: toPositiveInt(args?.limit) ?? 200,
+					}),
+					clientCommand("schedule.active"),
+					clientCommand("schedule.upcoming", { limit: 30 }),
+					clientCommand("schedule.list_executions", { limit: 50 }),
+				]);
+			const scheduleRecords = (schedules.schedules ?? []) as JsonRecord[];
+			const executionRecords = (lastExecutions.executions ??
+				[]) as JsonRecord[];
+			// The bulk query returns the newest executions across ALL schedules,
+			// so a few chatty schedules can evict everyone else's latest run.
+			// Backfill the latest execution for schedules that have run
+			// (lastRunAt set) but fell out of that window.
+			const covered = new Set<string>();
+			for (const execution of executionRecords) {
+				if (typeof execution.scheduleId === "string") {
+					covered.add(execution.scheduleId);
+				}
+			}
+			const missing = scheduleRecords.filter(
+				(schedule) =>
+					typeof schedule.scheduleId === "string" &&
+					schedule.lastRunAt != null &&
+					!covered.has(schedule.scheduleId),
+			);
+			const concurrency = 8;
+			for (let index = 0; index < missing.length; index += concurrency) {
+				const chunk = missing.slice(index, index + concurrency);
+				const replies = await Promise.all(
+					chunk.map((schedule) =>
+						clientCommand("schedule.list_executions", {
+							scheduleId: schedule.scheduleId,
+							limit: 1,
+						}).catch(() => undefined),
+					),
+				);
+				for (const reply of replies) {
+					const executions = (reply?.executions ?? []) as JsonRecord[];
+					if (executions[0]) {
+						executionRecords.push(executions[0]);
+					}
+				}
+			}
 			return {
-				schedules: schedules.schedules ?? [],
+				schedules: scheduleRecords,
 				activeExecutions: activeExecutions.executions ?? [],
 				upcomingRuns: upcomingRuns.runs ?? [],
+				lastExecutions: executionRecords,
 			};
 		}
 		if (command === "create_routine_schedule") {
@@ -458,7 +608,13 @@ async function handleRoutineScheduleCommand(
 			return { schedule: reply.schedule ?? null };
 		}
 		if (command === "trigger_routine_schedule") {
-			const reply = await clientCommand("schedule.trigger", { scheduleId });
+			// wait: false queues the run and returns immediately; the default
+			// path blocks until the whole agent run finishes, which outlives the
+			// webview's request timeout.
+			const reply = await clientCommand("schedule.trigger", {
+				scheduleId,
+				wait: false,
+			});
 			return { execution: reply.execution ?? null };
 		}
 		if (command === "delete_routine_schedule") {
@@ -552,7 +708,7 @@ async function listUserInstructionConfigs(
 					const ext = extname(entry.name).toLowerCase();
 					if (ext !== ".yml" && ext !== ".yaml") continue;
 					const filePath = join(directory, entry.name);
-					const raw = readFileSync(filePath, "utf8");
+					const raw = readFileSyncStrippingUtf8Bom(filePath);
 					const fmMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---/);
 					const fm = fmMatch?.[1] ?? "";
 					const nameMatch = fm.match(/^\s*name:\s*(.+?)\s*$/m);
@@ -711,9 +867,176 @@ function openFileInEditor(filePath: string): void {
 	const cmdArgs =
 		platform === "win32" ? ["/c", "start", "", filePath] : [filePath];
 	const child = spawn(cmd, cmdArgs, { stdio: "ignore", detached: true });
+	// An unhandled child error event would crash the sidecar process.
+	child.once("error", () => {});
 	child.unref();
 }
 
+// The macOS app shell launches the sidecar with a minimal GUI PATH
+// (/usr/bin:/bin:...), so editor CLIs installed under /usr/local/bin or
+// /opt/homebrew/bin are often not resolvable. `macApps` lets `open -a`
+// find the app bundle regardless of PATH.
+interface CodeEditorDefinition {
+	id: string;
+	label: string;
+	cli: string;
+	macApps: string[];
+}
+
+// Order doubles as the auto-open preference when no editor is requested.
+const CODE_EDITOR_CATALOG: readonly CodeEditorDefinition[] = [
+	{
+		id: "vscode",
+		label: "VS Code",
+		cli: "code",
+		macApps: ["Visual Studio Code"],
+	},
+	{ id: "cursor", label: "Cursor", cli: "cursor", macApps: ["Cursor"] },
+	{ id: "windsurf", label: "Windsurf", cli: "windsurf", macApps: ["Windsurf"] },
+	{ id: "zed", label: "Zed", cli: "zed", macApps: ["Zed"] },
+	{
+		id: "vscode-insiders",
+		label: "VS Code Insiders",
+		cli: "code-insiders",
+		macApps: ["Visual Studio Code - Insiders"],
+	},
+	{
+		id: "sublime",
+		label: "Sublime Text",
+		cli: "subl",
+		macApps: ["Sublime Text"],
+	},
+	{
+		id: "intellijidea",
+		label: "IntelliJ IDEA",
+		cli: "idea",
+		macApps: ["IntelliJ IDEA", "IntelliJ IDEA CE"],
+	},
+	{ id: "xcode", label: "Xcode", cli: "xed", macApps: ["Xcode"] },
+];
+
+function findExecutableOnPath(name: string): string | null {
+	try {
+		const locator = process.platform === "win32" ? "where" : "which";
+		const stdout = execFileSync(locator, [name], {
+			encoding: "utf8",
+			stdio: ["ignore", "pipe", "ignore"],
+		});
+		return stdout.split("\n")[0]?.trim() || null;
+	} catch {
+		return null;
+	}
+}
+
+// cmd.exe re-parses metacharacters inside arguments even when quoted (the
+// reason Node refuses to spawn .cmd files without a shell), so strings that
+// could smuggle a second command must never reach it.
+const WINDOWS_CMD_UNSAFE_PATTERN = /[&|^<>%!"\r\n]/;
+
+function isMacAppInstalled(app: string): boolean {
+	return (
+		existsSync(`/Applications/${app}.app`) ||
+		existsSync(join(homedir(), "Applications", `${app}.app`))
+	);
+}
+
+/** Editors the current machine can actually launch, in catalog order. */
+function listAvailableCodeEditors(): Array<{ id: string; label: string }> {
+	return CODE_EDITOR_CATALOG.filter(
+		(editor) =>
+			findExecutableOnPath(editor.cli) !== null ||
+			(process.platform === "darwin" && editor.macApps.some(isMacAppInstalled)),
+	).map(({ id, label }) => ({ id, label }));
+}
+
+/** Launches `executable filePath` detached; false if the CLI is unusable. */
+function launchEditorCli(executable: string, filePath: string): boolean {
+	// Windows `where` resolves editor CLIs to .cmd/.bat shims, which
+	// spawn() cannot launch directly — route those through cmd.exe.
+	const isWindowsShim =
+		process.platform === "win32" && /\.(cmd|bat)$/i.test(executable);
+	if (isWindowsShim && WINDOWS_CMD_UNSAFE_PATTERN.test(executable)) {
+		return false;
+	}
+	const child = isWindowsShim
+		? spawn("cmd", ["/c", executable, filePath], {
+				stdio: "ignore",
+				detached: true,
+			})
+		: spawn(executable, [filePath], {
+				stdio: "ignore",
+				detached: true,
+			});
+	// Spawn failures surface as async error events; without a listener
+	// they crash the sidecar. Fall back to the OS default opener so the
+	// click still opens the file.
+	child.once("error", () => {
+		openFileInEditor(filePath);
+	});
+	child.unref();
+	return true;
+}
+
+function launchMacApp(app: string, filePath: string): boolean {
+	try {
+		execFileSync("open", ["-a", app, filePath], {
+			stdio: ["ignore", "ignore", "ignore"],
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+/** Returns the launcher that handled the file, for logging/UI feedback. */
+function openFileInCodeEditor(filePath: string, editorId?: string): string {
+	if (
+		process.platform === "win32" &&
+		WINDOWS_CMD_UNSAFE_PATTERN.test(filePath)
+	) {
+		throw new Error(
+			"File path contains characters that cannot be passed safely to the Windows shell",
+		);
+	}
+	if (editorId && editorId !== "default") {
+		const editor = CODE_EDITOR_CATALOG.find((entry) => entry.id === editorId);
+		if (!editor) {
+			throw new Error(`Unknown editor: ${editorId}`);
+		}
+		const executable = findExecutableOnPath(editor.cli);
+		if (executable && launchEditorCli(executable, filePath)) {
+			return editor.label;
+		}
+		if (
+			process.platform === "darwin" &&
+			editor.macApps.some((app) => launchMacApp(app, filePath))
+		) {
+			return editor.label;
+		}
+		throw new Error(`${editor.label} is not available on this machine`);
+	}
+	if (!editorId) {
+		for (const editor of CODE_EDITOR_CATALOG) {
+			const executable = findExecutableOnPath(editor.cli);
+			if (executable && launchEditorCli(executable, filePath)) {
+				return editor.cli;
+			}
+		}
+		if (process.platform === "darwin") {
+			for (const editor of CODE_EDITOR_CATALOG) {
+				const app = editor.macApps.find((candidate) =>
+					launchMacApp(candidate, filePath),
+				);
+				if (app) {
+					return app;
+				}
+			}
+		}
+	}
+	openFileInEditor(filePath);
+	return "system default";
+}
+
 // ---------------------------------------------------------------------------
 // Main command router
 // ---------------------------------------------------------------------------
@@ -750,7 +1073,13 @@ export async function handleCommand(
 
 	// ── Process context ───────────────────────────────────────────────
 	if (command === "get_process_context") {
-		return { workspaceRoot: ctx.workspaceRoot, cwd: ctx.workspaceRoot };
+		return {
+			workspaceRoot: ctx.workspaceRoot,
+			cwd: ctx.workspaceRoot,
+			homeDir: homedir(),
+			platform: process.platform,
+			appVersion: packageJson.version,
+		};
 	}
 	if (command === "get_chat_ws_endpoint") {
 		return "";
@@ -835,9 +1164,7 @@ export async function handleCommand(
 	if (command === "delete_chat_session" || command === "delete_cli_session") {
 		const sessionId = String(args?.sessionId ?? args?.session_id ?? "").trim();
 		if (!sessionId) throw new Error("session id is required");
-		console.error(
-			`[sidecar:delete] request command=${command} sessionId=${sessionId}`,
-		);
+		ctx.logger?.log("Deleting desktop chat session", { command, sessionId });
 		const store = new SqliteSessionStore();
 		const row = store.get(sessionId);
 		const manifest = readSessionManifest(sessionId);
@@ -915,14 +1242,16 @@ export async function handleCommand(
 			}
 		}
 		if (!deleted && deleteError) {
-			console.error(
-				`[sidecar:delete] failed sessionId=${sessionId} error=${deleteError.message}`,
-			);
+			ctx.logger?.error?.("Failed to delete desktop chat session", {
+				sessionId,
+				error: deleteError,
+			});
 			throw deleteError;
 		}
-		console.error(
-			`[sidecar:delete] result sessionId=${sessionId} deleted=${deleted}`,
-		);
+		ctx.logger?.log("Desktop chat session delete completed", {
+			sessionId,
+			deleted,
+		});
 		if (deleted) {
 			broadcastEvent(ctx, "session_deleted", {
 				sessionId,
@@ -938,6 +1267,22 @@ export async function handleCommand(
 		return await searchWorkspaceFiles(ctx, args);
 	}
 
+	// ── External links ─────────────────────────────────────────────────
+	if (command === "open_external_url") {
+		const rawUrl = String(args?.url ?? "").trim();
+		let parsed: URL;
+		try {
+			parsed = new URL(rawUrl);
+		} catch {
+			throw new Error(`invalid url: ${rawUrl}`);
+		}
+		if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+			throw new Error("only http(s) urls can be opened externally");
+		}
+		await openUrlInDefaultBrowser(parsed.toString());
+		return { opened: true };
+	}
+
 	// ── Cline account ──────────────────────────────────────────────────
 	if (command === "cline_account") {
 		const operation = String(args?.operation ?? "").trim();
@@ -947,7 +1292,7 @@ export async function handleCommand(
 		const accountService = new ClineAccountService({
 			apiBaseUrl:
 				settings?.baseUrl?.trim() || getClineEnvironmentConfig().apiBaseUrl,
-			getAuthToken: async () => resolveLocalClineAuthToken(settings),
+			getAuthToken: async () => resolveFreshClineAuthToken(manager),
 		});
 		return await executeClineAccountAction(
 			args as ClineAccountActionRequest,
@@ -1023,20 +1368,11 @@ export async function handleCommand(
 			manager,
 			providerId,
 			(url) => {
-				const platform = process.platform;
-				const spawned =
-					platform === "darwin"
-						? spawn("open", [url], { stdio: "ignore", detached: true })
-						: platform === "win32"
-							? spawn("cmd", ["/c", "start", "", url], {
-									stdio: "ignore",
-									detached: true,
-								})
-							: spawn("xdg-open", [url], {
-									stdio: "ignore",
-									detached: true,
-								});
-				spawned.unref();
+				// The OAuth helper's openUrl callback is fire-and-forget; surface
+				// opener failures in the log instead of an unhandled rejection.
+				openUrlInDefaultBrowser(url).catch((error) => {
+					console.warn(`[sidecar] ${error instanceof Error ? error.message : error}`);
+				});
 			},
 		);
 		if (saved.provider !== providerId) {
@@ -1139,10 +1475,31 @@ export async function handleCommand(
 		updateMcpSettingsFileSync(path, (settings) => {
 			const servers = ((settings.mcpServers as JsonRecord | undefined) ??
 				{}) as JsonRecord;
+			// Preserve machine-managed fields the editor dialog doesn't expose:
+			// oauth tokens for remote servers and plugin-ownership metadata.
+			const sourceName =
+				previousName && servers[previousName] ? previousName : name;
+			const existing = servers[sourceName];
+			const upserted = { ...next };
+			if (existing && typeof existing === "object") {
+				const record = existing as JsonRecord;
+				if (upserted.metadata === undefined && record.metadata !== undefined) {
+					upserted.metadata = record.metadata;
+				}
+				// OAuth tokens were issued for a specific endpoint; carrying them
+				// onto an edited transport or URL would send the old server's
+				// credentials to a different endpoint.
+				if (
+					record.oauth !== undefined &&
+					mcpTransportIdentity(record) === mcpTransportIdentity(upserted)
+				) {
+					upserted.oauth = record.oauth;
+				}
+			}
 			if (previousName && previousName !== name) {
 				delete servers[previousName];
 			}
-			servers[name] = next;
+			servers[name] = upserted;
 			settings.mcpServers = servers;
 		});
 		return readMcpServersResponse();
@@ -1163,10 +1520,13 @@ export async function handleCommand(
 
 	// ── Git operations ─────────────────────────────────────────────────
 	if (command === "get_git_branch") {
-		const branches = listGitBranches(
-			ctx,
-			typeof args?.cwd === "string" ? args.cwd : undefined,
-		);
+		const cwd =
+			typeof args?.cwd === "string" && args.cwd.trim()
+				? args.cwd.trim()
+				: ctx.workspaceRoot;
+		const branches = listGitBranches(ctx, cwd);
+		const { prewarmWorkspaceMetadata } = await import("./chat-session");
+		prewarmWorkspaceMetadata(cwd);
 		return { branch: branches.current };
 	}
 	if (command === "list_git_branches") {
@@ -1179,11 +1539,14 @@ export async function handleCommand(
 		const cwd = typeof args?.cwd === "string" ? args.cwd : undefined;
 		const branch = String(args?.branch ?? "").trim();
 		if (!branch) throw new Error("branch is required");
+		const targetCwd = cwd?.trim() || ctx.workspaceRoot;
 		execFileSync("git", ["checkout", branch], {
-			cwd: cwd?.trim() || ctx.workspaceRoot,
+			cwd: targetCwd,
 			encoding: "utf8",
 			stdio: ["ignore", "pipe", "pipe"],
 		});
+		const { refreshWorkspaceMetadata } = await import("./chat-session");
+		refreshWorkspaceMetadata(targetCwd);
 		return { branch };
 	}
 
@@ -1252,6 +1615,15 @@ export async function handleCommand(
 	}
 
 	// ── Native OS commands ────────────────────────────────────────────
+	if (command === "validate_workspace_directory") {
+		const workspacePath = String(args?.path ?? "").trim();
+		if (!workspacePath) return { valid: false };
+		try {
+			return { valid: statSync(workspacePath).isDirectory() };
+		} catch {
+			return { valid: false };
+		}
+	}
 	if (command === "pick_workspace_directory") {
 		return pickWorkspaceDirectory();
 	}
@@ -1260,6 +1632,27 @@ export async function handleCommand(
 		openFileInEditor(path);
 		return path;
 	}
+	if (command === "list_available_editors") {
+		return listAvailableCodeEditors();
+	}
+	if (command === "open_file_in_editor") {
+		const rawPath = String(args?.path ?? "").trim();
+		if (!rawPath) throw new Error("path is required");
+		const baseDir =
+			typeof args?.cwd === "string" && args.cwd.trim()
+				? args.cwd.trim()
+				: ctx.workspaceRoot;
+		const filePath = isAbsolute(rawPath) ? rawPath : join(baseDir, rawPath);
+		if (!existsSync(filePath)) {
+			throw new Error(`File not found: ${filePath}`);
+		}
+		const requestedEditor =
+			typeof args?.editor === "string" && args.editor.trim()
+				? args.editor.trim()
+				: undefined;
+		const editor = openFileInCodeEditor(filePath, requestedEditor);
+		return { path: filePath, editor };
+	}
 
 	throw new Error(`unsupported desktop command: ${command}`);
 }

apps/examples/desktop-app/sidecar/context.test.ts

@@ -118,6 +118,35 @@ describe("Code sidecar runtime capabilities", () => {
 		);
 	});
 
+	it("wires the desktop logger and telemetry through the client and embedded hub", async () => {
+		const { createSidecarContext, initializeSessionManager } = await import(
+			"./context"
+		);
+		const logger = {
+			debug: vi.fn(),
+			log: vi.fn(),
+			error: vi.fn(),
+		};
+		const telemetry = { capture: vi.fn() };
+		const ctx = createSidecarContext("/workspace/project", {
+			logger,
+			telemetry: telemetry as never,
+		});
+
+		await initializeSessionManager(ctx);
+
+		expect(startHubWebSocketServerMock).toHaveBeenCalledWith(
+			expect.objectContaining({ logger, telemetry }),
+		);
+		expect(createCoreMock).toHaveBeenCalledWith(
+			expect.objectContaining({
+				clientName: "cline-code",
+				logger,
+				telemetry,
+			}),
+		);
+	});
+
 	it("resolves askQuestion through the websocket request/response protocol", async () => {
 		const { createSidecarContext, initializeSessionManager } = await import(
 			"./context"

apps/examples/desktop-app/sidecar/context.ts

@@ -4,12 +4,14 @@ import { homedir } from "node:os";
 import { dirname } from "node:path";
 import {
 	type AgentToolContext,
+	type BasicLogger,
 	ClineCore,
-	createLocalHubScheduleRuntimeHandlers,
 	type CoreSessionEvent,
+	createLocalHubScheduleRuntimeHandlers,
+	type ITelemetryService,
 	NodeHubClient,
-	resolveHubOwnerContext,
 	type RuntimeCapabilities,
+	resolveHubOwnerContext,
 	setHomeDirIfUnset,
 	startHubWebSocketServer,
 	type ToolApprovalRequest,
@@ -380,7 +382,13 @@ function handleCoreSessionEvent(
 // Context factory
 // ---------------------------------------------------------------------------
 
-export function createSidecarContext(workspaceRoot: string): SidecarContext {
+export function createSidecarContext(
+	workspaceRoot: string,
+	observability: {
+		logger?: BasicLogger;
+		telemetry?: ITelemetryService;
+	} = {},
+): SidecarContext {
 	return {
 		liveSessions: new Map(),
 		streamIndices: new Map(),
@@ -391,6 +399,8 @@ export function createSidecarContext(workspaceRoot: string): SidecarContext {
 		hubClient: null,
 		hubServer: null,
 		workspaceRoot,
+		logger: observability.logger,
+		telemetry: observability.telemetry,
 		unsubscribeSessionEvents: null,
 	};
 }
@@ -698,10 +708,15 @@ export async function initializeSessionManager(
 			`code-sidecar:${process.pid}:${randomUUID()}`,
 		),
 		runtimeHandlers: createLocalHubScheduleRuntimeHandlers(),
+		logger: ctx.logger,
+		telemetry: ctx.telemetry,
 	});
 	const sessionManager = await ClineCore.create({
+		clientName: "cline-code",
 		backendMode: "hub",
 		capabilities: createSidecarRuntimeCapabilities(ctx),
+		logger: ctx.logger,
+		telemetry: ctx.telemetry,
 		hub: {
 			endpoint: hubServer.url,
 			authToken: hubServer.authToken,

apps/examples/desktop-app/sidecar/index.ts

@@ -1,13 +1,20 @@
+import { homedir } from "node:os";
+import { setHomeDirIfUnset } from "@cline/core";
+import { prewarmWorkspaceMetadata } from "./chat-session";
 import {
 	createSidecarContext,
 	disposeSidecarContext,
 	initializeSessionManager,
 } from "./context";
+import { createDesktopObservability } from "./observability";
 import { resolveWorkspaceRoot } from "./paths";
 import { startServer } from "./server";
 import { BunRuntime, SIDECAR_HOST, SIDECAR_MODE, SIDECAR_PORT } from "./types";
 
 const SHUTDOWN_TIMEOUT_MS = 5_000;
+let activeObservability:
+	| ReturnType<typeof createDesktopObservability>
+	| undefined;
 
 function withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
 	let timeout: ReturnType<typeof setTimeout> | undefined;
@@ -32,17 +39,36 @@ async function main() {
 	}
 
 	const workspaceRoot = resolveWorkspaceRoot(process.cwd());
-	const ctx = createSidecarContext(workspaceRoot);
+	setHomeDirIfUnset(homedir());
+	const observability = createDesktopObservability();
+	activeObservability = observability;
+	const ctx = createSidecarContext(workspaceRoot, observability);
+	observability.logger.log("Desktop sidecar starting", {
+		workspaceRoot,
+		pid: process.pid,
+	});
 
+	prewarmWorkspaceMetadata(workspaceRoot);
 	await initializeSessionManager(ctx);
 
 	let shuttingDown = false;
+	let handlingFatalError = false;
 	const shutdown = async (reason = "code_sidecar_shutdown"): Promise<void> => {
 		if (shuttingDown) {
 			return;
 		}
 		shuttingDown = true;
-		await withTimeout(disposeSidecarContext(ctx, reason), SHUTDOWN_TIMEOUT_MS);
+		observability.logger.log("Desktop sidecar shutting down", { reason });
+		await withTimeout(
+			(async () => {
+				try {
+					await disposeSidecarContext(ctx, reason);
+				} finally {
+					await observability.dispose();
+				}
+			})(),
+			SHUTDOWN_TIMEOUT_MS,
+		);
 	};
 
 	const shutdownAndExit = (signal: string): void => {
@@ -53,11 +79,32 @@ async function main() {
 
 	process.once("SIGINT", () => shutdownAndExit("SIGINT"));
 	process.once("SIGTERM", () => shutdownAndExit("SIGTERM"));
+	const handleFatalError = (kind: string, error: unknown): void => {
+		if (handlingFatalError) {
+			process.exit(1);
+		}
+		handlingFatalError = true;
+		observability.logger.error?.("Desktop sidecar process error", {
+			kind,
+			error,
+		});
+		void shutdown(`code_sidecar_${kind}`).finally(() => process.exit(1));
+	};
+	process.on("uncaughtException", (error) => {
+		handleFatalError("uncaught_exception", error);
+	});
+	process.on("unhandledRejection", (error) => {
+		handleFatalError("unhandled_rejection", error);
+	});
 	process.once("beforeExit", () => {
 		void shutdown("code_sidecar_before_exit");
 	});
 
 	const { port } = startServer(ctx, SIDECAR_PORT, shutdown);
+	observability.logger.log("Desktop sidecar ready", {
+		port,
+		mode: SIDECAR_MODE,
+	});
 
 	// A wildcard bind isn't a dialable address; advertise loopback instead.
 	const dialHost = SIDECAR_HOST === "0.0.0.0" ? "127.0.0.1" : SIDECAR_HOST;
@@ -74,8 +121,12 @@ async function main() {
 	);
 }
 
-main().catch((error) => {
+main().catch(async (error) => {
 	const message = error instanceof Error ? error.message : String(error);
+	activeObservability?.logger.error?.("Desktop sidecar process failed", {
+		error,
+	});
+	await activeObservability?.dispose();
 	process.stderr.write(`${message}\n`);
 	process.exit(1);
 });

apps/examples/desktop-app/sidecar/logging.test.ts

@@ -0,0 +1,95 @@
+import {
+	mkdirSync,
+	mkdtempSync,
+	readFileSync,
+	rmSync,
+	statSync,
+	truncateSync,
+	writeFileSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createDesktopLoggerAdapter, DESKTOP_LOG_MAX_BYTES } from "./logging";
+
+const originalEnv = {
+	CLINE_LOG_ENABLED: process.env.CLINE_LOG_ENABLED,
+	CLINE_LOG_LEVEL: process.env.CLINE_LOG_LEVEL,
+	CLINE_LOG_NAME: process.env.CLINE_LOG_NAME,
+	CLINE_LOG_PATH: process.env.CLINE_LOG_PATH,
+};
+
+afterEach(() => {
+	for (const [key, value] of Object.entries(originalEnv)) {
+		if (value === undefined) delete process.env[key];
+		else process.env[key] = value;
+	}
+});
+
+describe("desktop sidecar logging", () => {
+	it("writes structured SDK logs to the configured file", () => {
+		const directory = mkdtempSync(join(tmpdir(), "cline-code-logging-"));
+		const destination = join(directory, "sidecar.log");
+		process.env.CLINE_LOG_PATH = destination;
+		process.env.CLINE_LOG_LEVEL = "debug";
+		delete process.env.CLINE_LOG_ENABLED;
+
+		try {
+			const adapter = createDesktopLoggerAdapter();
+			adapter.core.debug("desktop runtime event", { sessionId: "session-1" });
+			adapter.dispose();
+
+			const contents = readFileSync(destination, "utf8");
+			expect(contents).toContain("desktop runtime event");
+			expect(contents).toContain('"sessionId":"session-1"');
+			expect(adapter.runtimeConfig.name).toBe("cline-code.sidecar");
+		} finally {
+			rmSync(directory, { recursive: true, force: true });
+		}
+	});
+
+	it("warns once before falling back to stderr when the log file cannot open", () => {
+		const directory = mkdtempSync(join(tmpdir(), "cline-code-fallback-"));
+		process.env.CLINE_LOG_PATH = directory;
+		delete process.env.CLINE_LOG_ENABLED;
+		const stderr = vi.spyOn(process.stderr, "write").mockReturnValue(true);
+
+		try {
+			const adapter = createDesktopLoggerAdapter();
+			adapter.dispose();
+
+			expect(stderr).toHaveBeenCalledWith(
+				expect.stringContaining("Unable to open log file"),
+			);
+			expect(stderr).toHaveBeenCalledWith(
+				expect.stringContaining("falling back to stderr"),
+			);
+		} finally {
+			stderr.mockRestore();
+			rmSync(directory, { recursive: true, force: true });
+		}
+	});
+
+	it("rotates the active log before a write exceeds the size limit", () => {
+		const directory = mkdtempSync(join(tmpdir(), "cline-code-rotation-"));
+		const destination = join(directory, "sidecar.log");
+		process.env.CLINE_LOG_PATH = destination;
+		delete process.env.CLINE_LOG_ENABLED;
+
+		try {
+			mkdirSync(directory, { recursive: true });
+			writeFileSync(destination, "");
+			truncateSync(destination, DESKTOP_LOG_MAX_BYTES - 1);
+			const adapter = createDesktopLoggerAdapter();
+			adapter.core.log("rotate before writing this entry");
+			adapter.dispose();
+
+			expect(statSync(destination).size).toBeLessThan(1_024);
+			expect(readFileSync(destination, "utf8")).toContain(
+				"rotate before writing this entry",
+			);
+		} finally {
+			rmSync(directory, { recursive: true, force: true });
+		}
+	});
+});

apps/examples/desktop-app/sidecar/logging.ts

@@ -0,0 +1,245 @@
+import {
+	closeSync,
+	mkdirSync,
+	openSync,
+	statSync,
+	truncateSync,
+} from "node:fs";
+import { dirname, join } from "node:path";
+import {
+	type BasicLogger,
+	type RuntimeLoggerConfig,
+	resolveClineDataDir,
+} from "@cline/core";
+import pino, {
+	type DestinationStream,
+	type LevelWithSilent,
+	type Logger as PinoLogger,
+} from "pino";
+
+const LOG_MAX_AGE_MS = 2 * 24 * 60 * 60 * 1_000;
+export const DESKTOP_LOG_MAX_BYTES = 50 * 1024 * 1024;
+const LOG_LEVELS: ReadonlySet<LevelWithSilent> = new Set([
+	"trace",
+	"debug",
+	"info",
+	"warn",
+	"error",
+	"fatal",
+	"silent",
+]);
+
+export interface DesktopLoggerAdapter {
+	readonly core: BasicLogger;
+	readonly runtimeConfig: Required<RuntimeLoggerConfig>;
+	flush(): void;
+	dispose(): void;
+}
+
+function resolveLogLevel(value: string | undefined): LevelWithSilent {
+	const candidate = value?.trim().toLowerCase() as LevelWithSilent | undefined;
+	return candidate && LOG_LEVELS.has(candidate) ? candidate : "info";
+}
+
+function resolveRuntimeConfig(): Required<RuntimeLoggerConfig> {
+	const enabledValue = process.env.CLINE_LOG_ENABLED?.trim().toLowerCase();
+	return {
+		enabled: enabledValue !== "0" && enabledValue !== "false",
+		level: resolveLogLevel(process.env.CLINE_LOG_LEVEL),
+		destination:
+			process.env.CLINE_LOG_PATH?.trim() ||
+			join(resolveClineDataDir(), "logs", "code.log"),
+		name: process.env.CLINE_LOG_NAME?.trim() || "cline-code.sidecar",
+		bindings: {},
+	};
+}
+
+type ManagedDestination = DestinationStream & {
+	flushSync(): void;
+	end(): void;
+};
+
+type DestinationResult =
+	| { destination: ManagedDestination; error?: never }
+	| { destination?: never; error: unknown };
+
+function createDestination(path: string): DestinationResult {
+	try {
+		mkdirSync(dirname(path), { recursive: true });
+		const fd = openSync(path, "a");
+		closeSync(fd);
+		const initialStats = statSync(path);
+		if (
+			Date.now() - initialStats.mtimeMs >= LOG_MAX_AGE_MS ||
+			initialStats.size >= DESKTOP_LOG_MAX_BYTES
+		) {
+			truncateSync(path, 0);
+		}
+		const rawDestination = pino.destination({
+			dest: path,
+			mkdir: true,
+			sync: true,
+		});
+		const rawFlushSync = rawDestination.flushSync.bind(rawDestination);
+		let currentSize = statSync(path).size;
+		const destination: ManagedDestination = {
+			write(message: string) {
+				const messageSize = Buffer.byteLength(message);
+				if (currentSize + messageSize > DESKTOP_LOG_MAX_BYTES) {
+					try {
+						rawFlushSync();
+						truncateSync(path, 0);
+						currentSize = 0;
+					} catch {
+						// Rotation is best-effort; preserve the log entry if it fails.
+					}
+				}
+				rawDestination.write(message);
+				currentSize += messageSize;
+			},
+			flushSync() {
+				try {
+					rawFlushSync();
+				} catch {
+					// The synchronous stream may already be closed during teardown.
+				}
+			},
+			end() {
+				rawDestination.end();
+			},
+		};
+		return { destination };
+	} catch (error) {
+		return { error };
+	}
+}
+
+function writeDestinationFallbackWarning(path: string, error: unknown): void {
+	try {
+		const message = error instanceof Error ? error.message : String(error);
+		process.stderr.write(
+			`[cline-code] Unable to open log file ${path}; falling back to stderr (${message})\n`,
+		);
+	} catch {
+		// The fallback warning must never prevent sidecar startup.
+	}
+}
+
+function flushDestination(destination: ManagedDestination | undefined): void {
+	if (!destination) return;
+	try {
+		destination.flushSync();
+	} catch {
+		// Logging is best-effort during shutdown.
+	}
+}
+
+function closeDestination(destination: ManagedDestination | undefined): void {
+	if (!destination) return;
+	try {
+		destination.end();
+	} catch {
+		// Logging is best-effort during shutdown.
+	}
+}
+
+function createFallbackDestination(): DestinationStream {
+	return {
+		write(message: string) {
+			process.stderr.write(message);
+		},
+	};
+}
+
+/*
+	The adapter intentionally owns the destination lifecycle. Pino receives a
+	synchronous stream so telemetry and fatal-process logs can be flushed before
+	the sidecar exits.
+*/
+function createPinoLogger(
+	runtimeConfig: Required<RuntimeLoggerConfig>,
+	destination: ManagedDestination | undefined,
+): PinoLogger {
+	return pino(
+		{
+			name: runtimeConfig.name,
+			level: runtimeConfig.enabled ? runtimeConfig.level : "silent",
+			enabled: runtimeConfig.enabled,
+			timestamp: pino.stdTimeFunctions.isoTime,
+		},
+		destination ?? createFallbackDestination(),
+	).child({ component: "sidecar" });
+}
+
+function flushLogger(logger: PinoLogger): void {
+	try {
+		logger.flush?.();
+	} catch {
+		// Logging is best-effort during shutdown.
+	}
+}
+
+function toFields(
+	metadata?: Record<string, unknown>,
+): Record<string, unknown> | undefined {
+	if (!metadata) return undefined;
+	const { error, ...rest } = metadata;
+	const fields = error === undefined ? rest : { ...rest, err: error };
+	return Object.keys(fields).length > 0 ? fields : undefined;
+}
+
+function createCoreLogger(logger: PinoLogger): BasicLogger {
+	return {
+		debug(message, metadata) {
+			const fields = toFields(metadata);
+			fields ? logger.debug(fields, message) : logger.debug(message);
+		},
+		log(message, metadata) {
+			const fields = toFields(metadata);
+			const write =
+				metadata?.severity === "error"
+					? logger.error
+					: metadata?.severity === "warn"
+						? logger.warn
+						: logger.info;
+			fields
+				? write.call(logger, fields, message)
+				: write.call(logger, message);
+		},
+		error(message, metadata) {
+			const fields = toFields(metadata);
+			fields ? logger.error(fields, message) : logger.error(message);
+		},
+	};
+}
+
+export function createDesktopLoggerAdapter(): DesktopLoggerAdapter {
+	const runtimeConfig = resolveRuntimeConfig();
+	const destinationResult = runtimeConfig.enabled
+		? createDestination(runtimeConfig.destination)
+		: undefined;
+	const destination = destinationResult?.destination;
+	if (destinationResult?.error !== undefined) {
+		writeDestinationFallbackWarning(
+			runtimeConfig.destination,
+			destinationResult.error,
+		);
+	}
+	const logger = createPinoLogger(runtimeConfig, destination);
+	let disposed = false;
+	const flush = () => {
+		flushDestination(destination);
+		flushLogger(logger);
+	};
+	return {
+		core: createCoreLogger(logger),
+		runtimeConfig,
+		flush,
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			flush();
+			closeDestination(destination);
+		},
+	};
+}

apps/examples/desktop-app/sidecar/observability.test.ts

@@ -0,0 +1,81 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+	captureExtensionActivated: vi.fn(),
+	createClineTelemetryServiceConfig: vi.fn((config: unknown) => config),
+	createConfiguredTelemetryHandle: vi.fn(),
+	disposeTelemetry: vi.fn(async () => {}),
+	disposeLogger: vi.fn(),
+	identifyAccount: vi.fn(),
+	setSdkLogger: vi.fn(),
+}));
+
+const logger = {
+	debug: vi.fn(),
+	log: vi.fn(),
+	error: vi.fn(),
+};
+const telemetry = { capture: vi.fn() };
+
+vi.mock("@cline/core", async () => {
+	const actual =
+		await vi.importActual<typeof import("@cline/core")>("@cline/core");
+	return {
+		...actual,
+		captureExtensionActivated: mocks.captureExtensionActivated,
+		createClineTelemetryServiceConfig: mocks.createClineTelemetryServiceConfig,
+		createConfiguredTelemetryHandle: mocks.createConfiguredTelemetryHandle,
+		identifyAccount: mocks.identifyAccount,
+		ProviderSettingsManager: class {
+			getProviderSettings() {
+				return { auth: { accountId: "account-1" } };
+			}
+		},
+		setSdkLogger: mocks.setSdkLogger,
+	};
+});
+
+vi.mock("./logging", () => ({
+	createDesktopLoggerAdapter: () => ({
+		core: logger,
+		dispose: mocks.disposeLogger,
+	}),
+}));
+
+describe("desktop observability", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mocks.createConfiguredTelemetryHandle.mockReturnValue({
+			telemetry,
+			dispose: mocks.disposeTelemetry,
+		});
+	});
+
+	it("configures desktop telemetry, identity, activation, and lifecycle", async () => {
+		const { createDesktopObservability } = await import("./observability");
+		const observability = createDesktopObservability();
+
+		expect(mocks.createClineTelemetryServiceConfig).toHaveBeenCalledWith({
+			metadata: expect.objectContaining({
+				cline_type: "desktop",
+				platform: "Cline Code",
+			}),
+		});
+		expect(mocks.createConfiguredTelemetryHandle).toHaveBeenCalledWith(
+			expect.objectContaining({ logger }),
+		);
+		expect(mocks.identifyAccount).toHaveBeenCalledWith(telemetry, {
+			id: "account-1",
+			provider: "cline",
+		});
+		expect(mocks.captureExtensionActivated).toHaveBeenCalledWith(telemetry);
+		expect(mocks.setSdkLogger).toHaveBeenCalledWith(logger);
+
+		await observability.dispose();
+		await observability.dispose();
+
+		expect(mocks.disposeTelemetry).toHaveBeenCalledTimes(1);
+		expect(mocks.setSdkLogger).toHaveBeenLastCalledWith(undefined);
+		expect(mocks.disposeLogger).toHaveBeenCalledTimes(1);
+	});
+});

apps/examples/desktop-app/sidecar/observability.ts

@@ -0,0 +1,63 @@
+import * as os from "node:os";
+import {
+	captureExtensionActivated,
+	createClineTelemetryServiceConfig,
+	createConfiguredTelemetryHandle,
+	type ITelemetryService,
+	identifyAccount,
+	ProviderSettingsManager,
+	setSdkLogger,
+} from "@cline/core";
+import { version } from "../package.json";
+import {
+	createDesktopLoggerAdapter,
+	type DesktopLoggerAdapter,
+} from "./logging";
+
+export interface DesktopObservability {
+	readonly logger: DesktopLoggerAdapter["core"];
+	readonly telemetry: ITelemetryService;
+	dispose(): Promise<void>;
+}
+
+export function createDesktopObservability(): DesktopObservability {
+	const loggerAdapter = createDesktopLoggerAdapter();
+	const logger = loggerAdapter.core;
+	setSdkLogger(logger);
+
+	const telemetryHandle = createConfiguredTelemetryHandle({
+		...createClineTelemetryServiceConfig({
+			metadata: {
+				extension_version: version,
+				cline_type: "desktop",
+				platform: "Cline Code",
+				platform_version: process.version,
+				os_type: os.platform(),
+				os_version: os.version(),
+			},
+		}),
+		logger,
+	});
+	const telemetry = telemetryHandle.telemetry;
+	const auth = new ProviderSettingsManager().getProviderSettings("cline")?.auth;
+	if (auth?.accountId) {
+		identifyAccount(telemetry, {
+			id: auth.accountId,
+			provider: "cline",
+		});
+	}
+	captureExtensionActivated(telemetry);
+
+	let disposed = false;
+	return {
+		logger,
+		telemetry,
+		async dispose() {
+			if (disposed) return;
+			disposed = true;
+			await telemetryHandle.dispose();
+			setSdkLogger(undefined);
+			loggerAdapter.dispose();
+		},
+	};
+}

apps/examples/desktop-app/sidecar/server.ts

@@ -143,7 +143,7 @@ export function startServer(
 }
 
 export function createFetchHandler(
-	_ctx: SidecarContext,
+	ctx: SidecarContext,
 	onShutdown?: (reason?: string) => Promise<void>,
 ) {
 	return async (req: Request, server: SidecarServer) => {
@@ -199,11 +199,7 @@ export function createFetchHandler(
 			queueMicrotask(() => {
 				void onShutdown?.("code_sidecar_shutdown_endpoint")
 					.catch((error) => {
-						process.stderr.write(
-							`sidecar shutdown failed: ${
-								error instanceof Error ? error.message : String(error)
-							}\n`,
-						);
+						ctx.logger?.error?.("Desktop sidecar shutdown failed", { error });
 					})
 					.finally(() => process.exit(0));
 			});

apps/examples/desktop-app/sidecar/session-data/discovery.ts

@@ -58,6 +58,7 @@ export function discoverChatSessions(
 			prompt,
 			messages: session.messages,
 		});
+		const persistedMetadata = store.get(sessionId)?.metadata;
 		out.push({
 			sessionId,
 			status: session.status,
@@ -68,7 +69,10 @@ export function discoverChatSessions(
 			prompt,
 			startedAt: String(session.startedAt),
 			endedAt: session.endedAt ? String(session.endedAt) : undefined,
-			metadata: { title: resolvedTitle },
+			metadata: {
+				...(persistedMetadata ?? {}),
+				title: resolvedTitle,
+			},
 		});
 	}
 

apps/examples/desktop-app/sidecar/types.ts

@@ -1,7 +1,9 @@
 import type {
 	AgentToolContext,
+	BasicLogger,
 	ClineCore,
 	HubServer,
+	ITelemetryService,
 	NodeHubClient,
 	ToolApprovalResult,
 } from "@cline/core";
@@ -51,6 +53,7 @@ export type LiveSession = {
 	startedAt: number;
 	endedAt?: number;
 	status: string;
+	transitioningProvider?: boolean;
 	prompt?: string;
 	title?: string;
 	attachedViaHub?: boolean;
@@ -106,6 +109,8 @@ export type SidecarContext = {
 	hubClient: NodeHubClient | null;
 	hubServer: HubServer | null;
 	workspaceRoot: string;
+	logger?: BasicLogger;
+	telemetry?: ITelemetryService;
 	unsubscribeSessionEvents: (() => void) | null;
 };
 export type BunRuntimeApi = {

apps/examples/desktop-app/src-tauri/Cargo.toml

@@ -10,6 +10,8 @@ tauri-build = { version = "2.0.0", features = [] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri = { version = "2.11.1", features = [] }
+tauri-plugin-updater = "2"
+tokio = { version = "1", features = ["time"] }
 rfd = "0.15"
 
 [features]

apps/examples/desktop-app/src-tauri/src/main.rs

@@ -9,6 +9,10 @@ use std::sync::{Arc, Mutex};
 use std::thread;
 use std::time::Duration;
 use tauri::{Manager, RunEvent, State};
+use tauri_plugin_updater::UpdaterExt;
+
+const UPDATE_INITIAL_DELAY: Duration = Duration::from_secs(10);
+const UPDATE_CHECK_INTERVAL: Duration = Duration::from_secs(2 * 60 * 60);
 
 #[derive(Clone)]
 struct AppContext {
@@ -16,6 +20,108 @@ struct AppContext {
     workspace_root: String,
 }
 
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct UpdateStatus {
+    state: String,
+    version: Option<String>,
+    error: Option<String>,
+}
+
+impl Default for UpdateStatus {
+    fn default() -> Self {
+        Self {
+            state: "idle".to_string(),
+            version: None,
+            error: None,
+        }
+    }
+}
+
+#[derive(Default)]
+struct UpdateState {
+    status: Mutex<UpdateStatus>,
+}
+
+impl UpdateState {
+    fn set(&self, state: &str, version: Option<String>, error: Option<String>) {
+        if let Ok(mut guard) = self.status.lock() {
+            *guard = UpdateStatus {
+                state: state.to_string(),
+                version,
+                error,
+            };
+        }
+    }
+
+    fn snapshot(&self) -> UpdateStatus {
+        self.status
+            .lock()
+            .map(|guard| guard.clone())
+            .unwrap_or_default()
+    }
+
+    fn ready_version(&self) -> Option<String> {
+        self.status.lock().ok().and_then(|guard| {
+            if guard.state == "ready" {
+                guard.version.clone()
+            } else {
+                None
+            }
+        })
+    }
+}
+
+async fn check_and_install_update(app: &tauri::AppHandle, state: &UpdateState) {
+    // An update that already finished downloading only needs a restart; keep
+    // reporting "ready" instead of flipping back to transient states unless a
+    // newer version shows up.
+    let ready_version = state.ready_version();
+    if ready_version.is_none() {
+        state.set("checking", None, None);
+    }
+
+    let updater = match app.updater() {
+        Ok(updater) => updater,
+        Err(error) => {
+            state.set("error", None, Some(error.to_string()));
+            return;
+        }
+    };
+
+    match updater.check().await {
+        Ok(Some(update)) => {
+            let version = update.version.clone();
+            if ready_version.as_deref() == Some(version.as_str()) {
+                return;
+            }
+            state.set("downloading", Some(version.clone()), None);
+            match update.download_and_install(|_, _| {}, || {}).await {
+                Ok(()) => state.set("ready", Some(version), None),
+                Err(error) => state.set("error", Some(version), Some(error.to_string())),
+            }
+        }
+        Ok(None) => {
+            if ready_version.is_none() {
+                state.set("idle", None, None);
+            }
+        }
+        Err(error) => {
+            if ready_version.is_none() {
+                state.set("error", None, Some(error.to_string()));
+            }
+        }
+    }
+}
+
+async fn run_update_loop(app: tauri::AppHandle, state: Arc<UpdateState>) {
+    tokio::time::sleep(UPDATE_INITIAL_DELAY).await;
+    loop {
+        check_and_install_update(&app, &state).await;
+        tokio::time::sleep(UPDATE_CHECK_INTERVAL).await;
+    }
+}
+
 #[derive(Default)]
 struct DesktopBackendState {
     ws_endpoint: Mutex<Option<String>>,
@@ -44,7 +150,11 @@ impl DesktopBackendState {
 
         if let Ok(mut process_guard) = self.process.lock() {
             if let Some(child) = process_guard.as_mut() {
-                for _ in 0..30 {
+                // The sidecar bounds its own graceful shutdown with
+                // SHUTDOWN_TIMEOUT_MS (5s in sidecar/index.ts) and then exits
+                // itself; wait past that window before escalating to kill so
+                // an active session can finish persisting.
+                for _ in 0..70 {
                     match child.try_wait() {
                         Ok(Some(_)) => break,
                         Ok(None) => thread::sleep(Duration::from_millis(100)),
@@ -452,6 +562,22 @@ fn pick_workspace_directory(initial_path: Option<String>) -> Option<String> {
         .map(|path| path.to_string_lossy().to_string())
 }
 
+#[tauri::command]
+fn get_update_status(update_state: State<'_, Arc<UpdateState>>) -> UpdateStatus {
+    update_state.snapshot()
+}
+
+#[tauri::command]
+fn restart_to_apply_update(
+    app: tauri::AppHandle,
+    backend_state: State<'_, Arc<DesktopBackendState>>,
+) {
+    // restart() never returns, so the run-loop Exit handler does not get a
+    // chance to stop the sidecar; shut it down explicitly first.
+    backend_state.stop();
+    app.restart();
+}
+
 #[tauri::command]
 fn open_mcp_settings_file() -> Result<String, String> {
     let settings_path = resolve_mcp_settings_path()?;
@@ -485,14 +611,25 @@ fn main() {
     };
 
     tauri::Builder::default()
+        .plugin(tauri_plugin_updater::Builder::new().build())
         .manage(desktop_backend)
         .manage(app_context)
+        .manage(Arc::new(UpdateState::default()))
         .setup(|app| {
             let app_context = app.state::<AppContext>().inner().clone();
             let backend_state = app.state::<Arc<DesktopBackendState>>().inner().clone();
             if let Err(error) = ensure_desktop_backend_started(&backend_state, &app_context) {
                 eprintln!("[desktop-backend] startup failed: {error}");
             }
+            // Dev builds are not installed app bundles, so there is nothing the
+            // updater could meaningfully check or replace.
+            if !cfg!(debug_assertions) {
+                let update_state = app.state::<Arc<UpdateState>>().inner().clone();
+                let app_handle = app.handle().clone();
+                tauri::async_runtime::spawn(async move {
+                    run_update_loop(app_handle, update_state).await;
+                });
+            }
             thread::spawn(move || loop {
                 thread::sleep(Duration::from_secs(5));
                 if backend_state.is_shutting_down() {
@@ -507,7 +644,9 @@ fn main() {
         .invoke_handler(tauri::generate_handler![
             get_desktop_backend_endpoint,
             pick_workspace_directory,
-            open_mcp_settings_file
+            open_mcp_settings_file,
+            get_update_status,
+            restart_to_apply_update
         ])
         .build(tauri::generate_context!())
         .expect("error while building tauri app")

apps/examples/desktop-app/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schema.tauri.app/config/2",
 	"productName": "Cline Code",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"identifier": "bot.cline.app",
 	"build": {
 		"beforeDevCommand": "bun run build:sidecar:bin && bun run dev:web",
@@ -9,6 +9,14 @@
 		"beforeBuildCommand": "bun run build",
 		"frontendDist": "../webview/out"
 	},
+	"plugins": {
+		"updater": {
+			"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IENEMTJDNzk2RUExQUY3RDEKUldUUjl4cnFsc2NTelYxNzlFR1NkWnI0VTM1V0hvQXRyOW0xV2c0bFhkL3dhdkdpNGhNRW1MQXEK",
+			"endpoints": [
+				"https://github.com/cline/cline/releases/download/desktop-latest/latest.json"
+			]
+		}
+	},
 	"app": {
 		"windows": [
 			{

apps/examples/desktop-app/src-tauri/tauri.release.conf.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "https://schema.tauri.app/config/2",
+	"bundle": {
+		"createUpdaterArtifacts": true
+	}
+}

apps/examples/desktop-app/vitest.config.ts

@@ -1,6 +1,12 @@
+import { fileURLToPath } from "node:url";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+	resolve: {
+		alias: {
+			"@": fileURLToPath(new URL("./webview", import.meta.url)),
+		},
+	},
 	test: {
 		environment: "node",
 	},

apps/examples/desktop-app/webview/app/globals.css

@@ -2,181 +2,10 @@
 @import "@fontsource/azeret-mono/latin.css";
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "@cline/ui/theme/index.css";
+@import "@cline/ui/components/agent-chat.css";
 
-@custom-variant dark (&:is(.dark *));
-
-:root {
-	--font-desktop-sans: "Schibsted Grotesk Variable";
-	--font-desktop-mono: "Azeret Mono";
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.75 0.12 165);
-	--primary-foreground: oklch(0.962 0.018 272.314);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--radius: 0.5rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.75 0.12 165);
-	--primary-foreground: oklch(0.962 0.018 272.314);
-	--secondary: oklch(0.274 0.006 286.033);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.87 0 0);
-	--chart-2: oklch(0.556 0 0);
-	--chart-3: oklch(0.439 0 0);
-	--chart-4: oklch(0.371 0 0);
-	--chart-5: oklch(0.269 0 0);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.585 0.233 277.117);
-	--sidebar-primary-foreground: oklch(0.962 0.018 272.314);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-	--font-sans: var(--font-desktop-sans), sans-serif;
-	--font-mono:
-		var(--font-desktop-mono), ui-monospace, "SFMono-Regular", Menlo, Consolas,
-		"Liberation Mono", monospace;
-	--font-weight-normal: 480;
-	--font-weight-medium: 560;
-	--font-weight-semibold: 640;
-	--font-weight-bold: 640;
-	--text-step-1: 12px;
-	--text-step-1--line-height: 16px;
-	--text-step-1--letter-spacing: 0.0025em;
-	--text-step-2: 14px;
-	--text-step-2--line-height: 20px;
-	--text-step-2--letter-spacing: 0em;
-	--text-step-3: 16px;
-	--text-step-3--line-height: 24px;
-	--text-step-3--letter-spacing: 0em;
-	--text-step-4: 18px;
-	--text-step-4--line-height: 26px;
-	--text-step-4--letter-spacing: -0.0025em;
-	--text-step-5: 20px;
-	--text-step-5--line-height: 28px;
-	--text-step-5--letter-spacing: -0.005em;
-	--text-step-6: 24px;
-	--text-step-6--line-height: 30px;
-	--text-step-6--letter-spacing: -0.00625em;
-	--text-step-7: 28px;
-	--text-step-7--line-height: 36px;
-	--text-step-7--letter-spacing: -0.0075em;
-	--text-step-8: 35px;
-	--text-step-8--line-height: 40px;
-	--text-step-8--letter-spacing: -0.01em;
-	--text-step-9: 60px;
-	--text-step-9--line-height: 60px;
-	--text-step-9--letter-spacing: -0.025em;
-	--text-xs: var(--text-step-1);
-	--text-xs--line-height: var(--text-step-1--line-height);
-	--text-xs--letter-spacing: var(--text-step-1--letter-spacing);
-	--text-sm: var(--text-step-2);
-	--text-sm--line-height: var(--text-step-2--line-height);
-	--text-sm--letter-spacing: var(--text-step-2--letter-spacing);
-	--text-base: var(--text-step-3);
-	--text-base--line-height: var(--text-step-3--line-height);
-	--text-base--letter-spacing: var(--text-step-3--letter-spacing);
-	--text-lg: var(--text-step-4);
-	--text-lg--line-height: var(--text-step-4--line-height);
-	--text-lg--letter-spacing: var(--text-step-4--letter-spacing);
-	--text-xl: var(--text-step-5);
-	--text-xl--line-height: var(--text-step-5--line-height);
-	--text-xl--letter-spacing: var(--text-step-5--letter-spacing);
-	--text-2xl: var(--text-step-6);
-	--text-2xl--line-height: var(--text-step-6--line-height);
-	--text-2xl--letter-spacing: var(--text-step-6--letter-spacing);
-	--text-3xl: var(--text-step-7);
-	--text-3xl--line-height: var(--text-step-7--line-height);
-	--text-3xl--letter-spacing: var(--text-step-7--letter-spacing);
-	--text-4xl: var(--text-step-8);
-	--text-4xl--line-height: var(--text-step-8--line-height);
-	--text-4xl--letter-spacing: var(--text-step-8--letter-spacing);
-	--text-6xl: var(--text-step-9);
-	--text-6xl--line-height: var(--text-step-9--line-height);
-	--text-6xl--letter-spacing: var(--text-step-9--letter-spacing);
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-}
+@source "../../node_modules/streamdown/dist";
 
 @layer base {
 	html,
@@ -185,144 +14,124 @@
 		min-height: 100vh;
 		overflow: hidden;
 	}
+
 	#__next {
 		height: 100%;
 	}
-	* {
-		@apply border-border outline-ring/50;
+}
+
+/* Hero heading cycling verb (components/views/chat/welcome-chat.tsx) */
+@keyframes hero-word-in {
+	0% {
+		opacity: 0;
+		transform: translateY(0.42em);
+		filter: blur(6px);
 	}
-	body {
-		@apply m-0 bg-background text-base font-normal text-foreground;
+	60% {
+		filter: blur(0);
+	}
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+		filter: blur(0);
 	}
 }
 
-@layer components {
-	.markdown {
-		@apply leading-relaxed;
-	}
-	.markdown * {
-		@apply text-sm leading-relaxed;
-	}
-	.markdown + .markdown {
-		@apply mt-2;
-	}
-	.markdown p {
-		@apply my-2 first:mt-0 last:mb-0;
-	}
-	.markdown a {
-		@apply underline;
-	}
-	.markdown blockquote {
-		@apply border-l-2 border-border pl-3;
-	}
-	.markdown code {
-		@apply space-y-1 rounded bg-muted px-1 py-0.5;
-	}
-	.markdown h1 {
-		@apply text-lg font-bold;
-	}
-	.markdown h2,
-	.markdown h3 {
-		@apply text-lg font-semibold;
-	}
-	.markdown ul {
-		@apply list-disc space-y-1;
-	}
-	.markdown ol {
-		@apply list-decimal space-y-1;
-	}
-	.markdown li {
-		@apply ml-5;
-	}
-	.markdown pre {
-		@apply space-y-1 overflow-x-auto rounded bg-muted p-3;
-	}
-	.markdown div {
-		@apply space-y-1;
+.hero-word-char {
+	display: inline-block;
+	white-space: pre;
+	/* Solid fallback so the word is never invisible if text clipping is unsupported. */
+	color: var(--brand-violet);
+	animation: hero-word-in 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
+}
+
+/*
+ * Gradient fill per character. The clip lives on each animated span (not a
+ * shared parent) because WebKit — used by the Tauri webview on macOS — drops
+ * the parent's background when a child paints on its own transform/filter
+ * layer, which would leave the animating letters blank. The -webkit- prefixes
+ * are required by WebKit; @supports keeps the solid fallback above otherwise.
+ */
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+	.hero-word-char {
+		background-image: linear-gradient(
+			135deg,
+			var(--brand-periwinkle),
+			var(--brand-violet) 55%,
+			var(--brand-magenta)
+		);
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+		color: transparent;
 	}
 }
 
-/* Custom scrollbar for dark theme */
-::-webkit-scrollbar {
-	width: 6px;
-	height: 6px;
-}
-
-::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-	background: oklch(0.3 0.005 260);
-	border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: oklch(0.4 0.005 260);
-}
-
-/* Selection color */
-::selection {
-	background: oklch(0.75 0.12 165 / 0.25);
+@media (prefers-reduced-motion: reduce) {
+	.hero-word-char {
+		/* biome-ignore lint/complexity/noImportantStyles: reduced motion must override inline animation delay */
+		animation: none !important;
+	}
 }
 
 /* Aurora background (components/ui/aurora-bg.tsx) */
 @keyframes aurora-drift {
-	0%,
-	100% {
-		transform: translate(0, 0) rotate(0deg) scale(1);
-	}
-	25% {
-		transform: translate(14%, -10%) rotate(18deg) scale(1.25);
-	}
-	50% {
-		transform: translate(-4%, 6%) rotate(-6deg) scale(1.05);
-	}
-	75% {
-		transform: translate(-12%, -4%) rotate(-16deg) scale(0.9);
-	}
-}
-
-/* Curtain ribbons: sway side-to-side while skewing and stretching, like an
-   aurora curtain rippling. Ribbons are bottom-anchored (transform-origin
-   bottom), so skew/scale fan out from the horizon. */
-@keyframes aurora-wave {
-	0%,
-	100% {
-		transform: translateX(0) skewX(0deg) scaleY(1);
-		opacity: 0.7;
-	}
-	20% {
-		transform: translateX(4%) skewX(8deg) scaleY(1.15);
-		opacity: 1;
-	}
-	45% {
-		transform: translateX(-3%) skewX(-10deg) scaleY(0.9);
-		opacity: 0.55;
-	}
-	70% {
-		transform: translateX(5%) skewX(12deg) scaleY(1.25);
-		opacity: 0.9;
-	}
-}
-
-/* Traveling wave: a 200%-wide striped sheet slides left by half its width,
-   looping seamlessly, while bobbing vertically — bands visibly roll across. */
-@keyframes aurora-flow {
 	0% {
-		transform: translateX(0) translateY(0) skewX(-6deg);
-	}
-	25% {
-		transform: translateX(-12.5%) translateY(-4%) skewX(4deg);
+		opacity: 0.55;
+		transform: translate3d(-8%, 5%, 0) rotate(-5deg) scale(0.94);
 	}
 	50% {
-		transform: translateX(-25%) translateY(2%) skewX(-3deg);
-	}
-	75% {
-		transform: translateX(-37.5%) translateY(-5%) skewX(6deg);
+		opacity: 0.92;
+		transform: translate3d(13%, -10%, 0) rotate(6deg) scale(1.11);
 	}
 	100% {
-		transform: translateX(-50%) translateY(0) skewX(-6deg);
+		opacity: 0.62;
+		transform: translate3d(-5%, -2%, 0) rotate(-3deg) scale(1.02);
+	}
+}
+
+@keyframes aurora-drift-reverse {
+	0% {
+		opacity: 0.62;
+		transform: translate3d(10%, -6%, 0) rotate(5deg) scale(1.08);
+	}
+	50% {
+		opacity: 0.9;
+		transform: translate3d(-12%, -12%, 0) rotate(-6deg) scale(0.96);
+	}
+	100% {
+		opacity: 0.58;
+		transform: translate3d(6%, 2%, 0) rotate(3deg) scale(1.04);
+	}
+}
+
+@keyframes aurora-horizon-breathe {
+	0% {
+		opacity: 0.48;
+		transform: translate3d(-3%, 9%, 0) scale(0.96, 0.84);
+	}
+	50% {
+		opacity: 0.88;
+		transform: translate3d(3%, -5%, 0) scale(1.08, 1.16);
+	}
+	100% {
+		opacity: 0.58;
+		transform: translate3d(-1%, 2%, 0) scale(1.02, 0.96);
+	}
+}
+
+@keyframes aurora-current-sweep {
+	0% {
+		opacity: 0.28;
+		transform: translate3d(-16%, 8%, 0) rotate(-8deg) scaleX(0.84);
+	}
+	50% {
+		opacity: 0.72;
+		transform: translate3d(17%, -8%, 0) rotate(4deg) scaleX(1.08);
+	}
+	100% {
+		opacity: 0.38;
+		transform: translate3d(28%, 4%, 0) rotate(-2deg) scaleX(0.94);
 	}
 }
 
@@ -330,8 +139,78 @@
 	0%,
 	100% {
 		opacity: 0.15;
+		transform: translate3d(0, 4px, 0) rotate(0deg) scale(0.78);
 	}
 	50% {
-		opacity: 1;
+		opacity: 0.78;
+		transform: translate3d(var(--aurora-star-x, 5px), -8px, 0) rotate(35deg)
+			scale(1.08);
+	}
+}
+
+.aurora-horizon {
+	animation: aurora-horizon-breathe 8s ease-in-out -3s infinite alternate;
+	transform-origin: center bottom;
+	will-change: opacity, transform;
+}
+
+.aurora-current {
+	animation-name: aurora-current-sweep;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	will-change: opacity, transform;
+}
+
+.aurora-current-reverse {
+	animation-direction: alternate-reverse;
+}
+
+.aurora-motion {
+	animation-name: aurora-drift;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+}
+
+.aurora-motion-reverse {
+	animation-name: aurora-drift-reverse;
+}
+
+.aurora-star {
+	--aurora-star-x: 5px;
+	animation-name: aurora-twinkle;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+}
+
+.aurora-star:nth-of-type(2n) {
+	--aurora-star-x: -6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.aurora-current,
+	.aurora-horizon,
+	.aurora-motion,
+	.aurora-star {
+		/* biome-ignore lint/complexity/noImportantStyles: reduced motion must override inline animation timing */
+		animation: none !important;
+	}
+
+	.aurora-horizon {
+		opacity: 0.68;
+		transform: translate3d(0, -1%, 0) scale(1.05);
+	}
+
+	.aurora-current,
+	.aurora-motion {
+		opacity: 0.58;
+		transform: none;
+	}
+
+	.aurora-current,
+	.aurora-horizon,
+	.aurora-motion {
+		will-change: auto;
 	}
 }

apps/examples/desktop-app/webview/app/layout.tsx

@@ -1,11 +1,11 @@
 import { Analytics } from "@vercel/analytics/next";
 import type { Metadata } from "next";
+import { Toaster } from "@/components/ui/toaster";
 import "./globals.css";
 
 export const metadata: Metadata = {
-	title: "Agent Desktop",
-	description: "AI coding agent interface",
-	generator: "v0.app",
+	title: "Cline",
+	description: "Build software with Cline.",
 	icons: {
 		icon: [
 			{
@@ -34,6 +34,7 @@ export default function RootLayout({
 		<html className="h-full" lang="en">
 			<body className="h-full min-h-screen font-sans antialiased">
 				{children}
+				<Toaster />
 				<Analytics />
 			</body>
 		</html>

apps/examples/desktop-app/webview/app/page.tsx

@@ -18,25 +18,41 @@ import {
 	SidebarInset,
 	SidebarProvider,
 	SidebarRail,
+	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { ChatInputBar } from "@/components/views/chat/chat-input-bar";
 import { ChatMessages } from "@/components/views/chat/chat-messages";
 import { DiffView } from "@/components/views/chat/diff-view";
+import { WelcomeScreen } from "@/components/views/chat/welcome-chat";
 import { SessionsView } from "@/components/views/sessions/sessions-view";
-import { SettingsView } from "@/components/views/settings/settings-view";
+import {
+	type SettingsSection,
+	SettingsView,
+} from "@/components/views/settings/settings-view";
+import { AccountProvider } from "@/contexts/account-context";
 import { WorkspaceProvider } from "@/contexts/workspace-context";
 import type { PromptInQueue } from "@/hooks/chat-session/types";
+import { useAppUpdate } from "@/hooks/use-app-update";
 import { useChatSession } from "@/hooks/use-chat-session";
 import { useSessionHistory } from "@/hooks/use-session-history";
 import { toast } from "@/hooks/use-toast";
 import type { ChatSessionConfig } from "@/lib/chat-schema";
 import { desktopClient } from "@/lib/desktop-client";
+import { syncDesktopWindowTitle } from "@/lib/desktop-window-title";
 import {
 	getSessionMetadataTitle,
 	type SessionHistoryItem,
 	type SessionMetadata,
 } from "@/lib/session-history";
 import { syncHubTheme, watchSystemHubTheme } from "@/lib/theme";
+import {
+	filterWorkspacePaths,
+	mergeWorkspacePaths,
+	normalizeWorkspacePath,
+	readWorkspaceSelectionFromWindow,
+	workspacePathsFromSessions,
+	writeWorkspaceSelectionToWindow,
+} from "@/lib/workspace-paths";
 
 function makeThreadId(): string {
 	return `thread_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
@@ -45,24 +61,9 @@ function makeThreadId(): string {
 type Thread = {
 	id: string;
 	historySession?: SessionHistoryItem;
+	hasStarted?: boolean;
 };
 
-type WorkspaceSessionItem = {
-	cwd?: string;
-	workspaceRoot?: string;
-};
-
-function normalizeWorkspacePath(path: string): string {
-	const normalized = path.trim().replace(/[\\/]+$/, "");
-	if (!normalized) {
-		return "";
-	}
-	if (/^[A-Za-z]:/.test(normalized)) {
-		return normalized.toLowerCase();
-	}
-	return normalized;
-}
-
 function toThreadTitle(options: { title?: string; prompt?: string }): string {
 	const preferredTitle = options.title?.trim();
 	if (preferredTitle) {
@@ -75,6 +76,8 @@ function toThreadTitle(options: { title?: string; prompt?: string }): string {
 
 export default function Home() {
 	const [view, setView] = useState<"chat" | "sessions" | "settings">("chat");
+	const [settingsSection, setSettingsSection] =
+		useState<SettingsSection>("General");
 	const [threads, setThreads] = useState<Thread[]>(() => [
 		{ id: makeThreadId() },
 	]);
@@ -82,11 +85,17 @@ export default function Home() {
 		() => threads[0]?.id,
 	);
 
+	useAppUpdate();
+
 	useEffect(() => {
 		syncHubTheme();
 		return watchSystemHubTheme();
 	}, []);
 
+	useEffect(() => {
+		void syncDesktopWindowTitle();
+	}, []);
+
 	const handleNewThread = useCallback(() => {
 		const id = makeThreadId();
 		setThreads((prev) => [...prev, { id }]);
@@ -102,11 +111,15 @@ export default function Home() {
 				const next = [...prev];
 				next[existingIdx] = {
 					...next[existingIdx],
+					hasStarted: true,
 					historySession: session,
 				};
 				return next;
 			}
-			return [...prev, { id: threadId, historySession: session }];
+			return [
+				...prev,
+				{ id: threadId, hasStarted: true, historySession: session },
+			];
 		});
 		setActiveThreadId(threadId);
 		setView("chat");
@@ -188,15 +201,35 @@ export default function Home() {
 			?.sessionId ?? null;
 	const activeThread =
 		threads.find((thread) => thread.id === activeThreadId) ?? threads[0];
+	const handleHome = useCallback(() => {
+		if (activeThread?.historySession || activeThread?.hasStarted) {
+			handleNewThread();
+			return;
+		}
+		setView("chat");
+	}, [activeThread, handleNewThread]);
+	const handleThreadStarted = useCallback((threadId: string) => {
+		setThreads((current) =>
+			current.map((thread) =>
+				thread.id === threadId && !thread.hasStarted
+					? { ...thread, hasStarted: true }
+					: thread,
+			),
+		);
+	}, []);
 	const sessionHistory = useSessionHistory({
 		activeSessionId: activeHistorySessionId,
 		onDeleteSession: handleDeleteSession,
 		onOpenSession: handleOpenSession,
 		onUpdateSessionMetadata: handleUpdateSessionMetadata,
 	});
+	const historyWorkspacePaths = useMemo(
+		() => workspacePathsFromSessions(sessionHistory.sessions),
+		[sessionHistory.sessions],
+	);
 
 	return (
-		<>
+		<AccountProvider>
 			<SidebarProvider>
 				<div className="flex h-screen w-full overflow-hidden bg-background text-foreground">
 					<Sidebar
@@ -205,53 +238,75 @@ export default function Home() {
 					>
 						<AgentSidebar
 							activeSessionId={activeHistorySessionId}
+							isHomeActive={
+								view === "chat" &&
+								!activeThread?.historySession &&
+								!activeThread?.hasStarted
+							}
+							onHome={handleHome}
 							onNewThread={handleNewThread}
+							onSettingsSectionChange={setSettingsSection}
 							sessionHistory={sessionHistory}
 							setView={setView}
+							settingsSection={settingsSection}
+							view={view}
 						/>
 						<SidebarRail />
 					</Sidebar>
 					<SidebarInset className="min-h-0 min-w-0 overflow-hidden">
+						<SidebarTrigger className="absolute left-3 top-3 z-40 md:hidden" />
 						{view === "sessions" ? (
 							<SessionsView
 								activeSessionId={activeHistorySessionId}
 								history={sessionHistory}
 							/>
 						) : activeThread ? (
-							<div className="flex min-h-0 flex-1 flex-col">
+							<div
+								aria-hidden={view === "settings" ? true : undefined}
+								className="flex min-h-0 flex-1 flex-col"
+								inert={view === "settings" ? true : undefined}
+							>
 								<ChatThreadPane
 									key={activeThread.id}
 									historySession={activeThread.historySession}
+									knownWorkspacePaths={historyWorkspacePaths}
 									onUpdateSessionMetadata={handleUpdateSessionMetadata}
 									threadId={activeThread.id}
 									onDeleteSession={handleDeleteSession}
 									onNewThread={handleNewThread}
 									onOpenSession={handleOpenSession}
+									onThreadStarted={handleThreadStarted}
+								/>
+							</div>
+						) : null}
+						{view === "settings" ? (
+							<div className="absolute inset-0 z-30 bg-background text-foreground">
+								<SettingsView
+									onNavigateSection={setSettingsSection}
+									section={settingsSection}
 								/>
 							</div>
 						) : null}
 					</SidebarInset>
 				</div>
 			</SidebarProvider>
-			{view === "settings" ? (
-				<div className="fixed inset-0 z-50 bg-background text-foreground">
-					<SettingsView onClose={() => setView("chat")} />
-				</div>
-			) : null}
-		</>
+		</AccountProvider>
 	);
 }
 
 function ChatThreadPane({
 	threadId,
 	historySession,
+	knownWorkspacePaths,
 	onUpdateSessionMetadata,
 	onDeleteSession,
 	onNewThread,
 	onOpenSession,
+	onThreadStarted,
 }: {
 	threadId: string;
 	historySession?: SessionHistoryItem;
+	knownWorkspacePaths: string[];
 	onUpdateSessionMetadata?: (
 		sessionId: string,
 		metadata: SessionMetadata,
@@ -259,6 +314,7 @@ function ChatThreadPane({
 	onDeleteSession?: (sessionId: string, threadId?: string) => void;
 	onNewThread?: () => void;
 	onOpenSession?: (session: SessionHistoryItem) => void;
+	onThreadStarted?: (threadId: string) => void;
 }) {
 	const {
 		sessionId,
@@ -304,7 +360,16 @@ function ChatThreadPane({
 		Record<string, { apiKey: string }>
 	>({});
 	const [providersLoaded, setProvidersLoaded] = useState(false);
-	const [workspaces, setWorkspaces] = useState<string[]>([]);
+	// History paths lead each merge: they are ordered by session recency, so
+	// stored or stale entries only append after them.
+	const [workspaces, setWorkspaces] = useState<string[]>(() =>
+		filterWorkspacePaths(
+			mergeWorkspacePaths(
+				knownWorkspacePaths,
+				readWorkspaceSelectionFromWindow().workspaces,
+			),
+		),
+	);
 	const [workspacesLoaded, setWorkspacesLoaded] = useState(false);
 	const hydratedSessionRef = useRef<string | null>(null);
 	const resetThreadRef = useRef<string | null>(null);
@@ -318,6 +383,26 @@ function ChatThreadPane({
 		workspaceRoot: config.workspaceRoot,
 	};
 
+	useEffect(() => {
+		setWorkspaces((current) => {
+			const merged = filterWorkspacePaths(
+				mergeWorkspacePaths(knownWorkspacePaths, current),
+			);
+			return current.length === merged.length &&
+				current.every((workspace, index) => workspace === merged[index])
+				? current
+				: merged;
+		});
+	}, [knownWorkspacePaths]);
+
+	useEffect(() => {
+		const lastWorkspace = (config.workspaceRoot || config.cwd || "").trim();
+		writeWorkspaceSelectionToWindow({
+			lastWorkspace,
+			workspaces: mergeWorkspacePaths(workspaces, [lastWorkspace]),
+		});
+	}, [config.cwd, config.workspaceRoot, workspaces]);
+
 	useEffect(() => {
 		let cancelled = false;
 
@@ -438,52 +523,33 @@ function ChatThreadPane({
 
 	const listWorkspaces = useCallback(
 		async (preferredWorkspace?: string): Promise<string[]> => {
-			const roots = new Set<string>();
 			const preferred = (preferredWorkspace || "").trim();
-			if (preferred) {
-				roots.add(preferred);
-			}
 			const current = (
 				workspaceRef.current.workspaceRoot ||
 				workspaceRef.current.cwd ||
 				""
 			).trim();
-			if (current) {
-				roots.add(current);
-			}
-
-			try {
-				const discovered = await desktopClient
-					.invoke<WorkspaceSessionItem[]>("list_discovered_sessions", {
-						limit: 20,
-					})
-					.catch(() => []);
-
-				for (const session of discovered) {
-					const candidate = (session.workspaceRoot || session.cwd || "").trim();
-					if (candidate) {
-						roots.add(candidate);
-					}
-				}
-			} catch {
-				// Keep fallback to current workspace when history is unavailable.
-			}
-
-			return [...roots].sort((a, b) => a.localeCompare(b));
+			// The active workspace can be an excluded path (restored session,
+			// process cwd fallback); it renders via its own registration in the
+			// selector and welcome screen instead of joining the catalog.
+			return filterWorkspacePaths(
+				mergeWorkspacePaths(knownWorkspacePaths, [preferred, current]),
+			);
 		},
-		[],
+		[knownWorkspacePaths],
 	);
 
 	const refreshWorkspaces = useCallback(
 		async (preferredWorkspace?: string) => {
 			try {
 				const results = await listWorkspaces(preferredWorkspace);
-				setWorkspaces((current) =>
-					current.length === results.length &&
-					current.every((workspace, index) => workspace === results[index])
+				setWorkspaces((current) => {
+					const merged = mergeWorkspacePaths(results, current);
+					return current.length === merged.length &&
+						current.every((workspace, index) => workspace === merged[index])
 						? current
-						: results,
-				);
+						: merged;
+				});
 			} finally {
 				setWorkspacesLoaded(true);
 			}
@@ -508,17 +574,23 @@ function ChatThreadPane({
 			if (normalizedNext === normalizedCurrent) {
 				return true;
 			}
+			const validation = await desktopClient
+				.invoke<{ valid?: boolean }>("validate_workspace_directory", {
+					path: nextWorkspace,
+				})
+				.catch(() => ({ valid: false }));
+			if (validation.valid !== true) {
+				return false;
+			}
 
 			setConfig((prev) => ({
 				...prev,
 				workspaceRoot: nextWorkspace,
 				cwd: nextWorkspace,
 			}));
-			setWorkspaces((prev) => {
-				const next = new Set(prev);
-				next.add(nextWorkspace);
-				return [...next].sort((a, b) => a.localeCompare(b));
-			});
+			setWorkspaces((prev) =>
+				filterWorkspacePaths(mergeWorkspacePaths(prev, [nextWorkspace])),
+			);
 
 			// Fire git branch + workspace list refresh in the background
 			desktopClient
@@ -533,7 +605,7 @@ function ChatThreadPane({
 					setGitBranch("no-git");
 				});
 
-			// Re-fetch workspace list so the new root appears
+			// Refresh the merged history, stored, and current workspace catalog.
 			void refreshWorkspaces(nextWorkspace);
 
 			return true;
@@ -618,11 +690,12 @@ function ChatThreadPane({
 		if (!trimmed && pendingAttachments.length === 0) {
 			return;
 		}
+		onThreadStarted?.(threadId);
 		setPromptInput("");
 		const toSend = [...pendingAttachments];
 		setPendingAttachments([]);
 		await sendPrompt(trimmed, toSend);
-	}, [pendingAttachments, promptInput, sendPrompt]);
+	}, [onThreadStarted, pendingAttachments, promptInput, sendPrompt, threadId]);
 
 	const handleReasoningChange = useCallback(
 		(next: Pick<ChatSessionConfig, "thinking" | "reasoningEffort">) => {
@@ -827,7 +900,7 @@ function ChatThreadPane({
 		? false
 		: isHydratingSession;
 	const isWelcomeState =
-		displayedMessages.length === 0 && !displayedIsSwitching;
+		displayedMessages.length === 0 && !displayedIsSwitching && !displayedError;
 
 	const handleRenameTitle = useCallback(
 		async (nextTitle: string) => {
@@ -915,153 +988,157 @@ function ChatThreadPane({
 		);
 	}
 
+	const composer = (
+		<ChatInputBar
+			attachments={attachmentList}
+			onAbort={() => void abort()}
+			onAttachFiles={(files) => {
+				setPendingAttachments((prev) => {
+					const existing = new Set(
+						prev.map(
+							(file) => `${file.name}:${file.size}:${file.lastModified}`,
+						),
+					);
+					const next = [...prev];
+					for (const file of files) {
+						const key = `${file.name}:${file.size}:${file.lastModified}`;
+						if (!existing.has(key)) {
+							existing.add(key);
+							next.push(file);
+						}
+					}
+					return next;
+				});
+			}}
+			onListGitBranches={listGitBranches}
+			onRemoveAttachment={(id) => {
+				setPendingAttachments((prev) =>
+					prev.filter((file, index) => {
+						const fileId = `${file.name}:${file.size}:${file.lastModified}:${index}`;
+						return fileId !== id;
+					}),
+				);
+			}}
+			onSwitchGitBranch={switchGitBranch}
+			onModelChange={(nextModel) =>
+				setConfig((prev) =>
+					prev.model === nextModel ? prev : { ...prev, model: nextModel },
+				)
+			}
+			onModeToggle={() =>
+				setConfig((prev) => ({
+					...prev,
+					mode: prev.mode === "plan" ? "act" : "plan",
+				}))
+			}
+			onPromptInputChange={setPromptInput}
+			onReasoningChange={handleReasoningChange}
+			onSteerPromptInQueue={(promptId) => {
+				void steerPromptInQueue(promptId);
+			}}
+			onEditPromptInQueue={(promptId, prompt) => {
+				void updatePromptInQueue(promptId, prompt);
+			}}
+			onUndoPromptInQueue={(item) => {
+				void handleUndoQueuedPrompt(item);
+			}}
+			onProviderChange={(nextProvider) =>
+				setConfig((prev) => {
+					const selected = providerCredentials[nextProvider];
+					const nextApiKey = selected?.apiKey ?? "";
+					if (prev.provider === nextProvider && prev.apiKey === nextApiKey) {
+						return prev;
+					}
+					return {
+						...prev,
+						provider: nextProvider,
+						apiKey: nextApiKey,
+					};
+				})
+			}
+			onSend={() => void handleSend()}
+			gitBranch={gitBranch}
+			model={config.model}
+			mode={config.mode}
+			promptsInQueue={promptsInQueue}
+			promptInput={promptInput}
+			provider={config.provider}
+			reasoningEffort={config.reasoningEffort}
+			status={status}
+			summary={summary}
+			thinking={config.thinking}
+			variant={isWelcomeState ? "welcome" : "conversation"}
+		/>
+	);
+
 	return (
 		<WorkspaceProvider value={workspaceContextValue}>
-			<div className="grid h-full min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden">
-				<div className="z-20">
-					<AgentHeader
-						canEditTitle={Boolean(activeSessionForTitle)}
-						canDeleteSession={Boolean(activeSessionToDelete)}
-						deletingSession={deletingSession}
-						diff={{
-							additions: summary.additions,
-							deletions: summary.deletions,
-						}}
-						onDeleteSession={requestDeleteSession}
-						onNewThread={onNewThread}
-						onOpenDiff={() => {
-							if (hasDiffChanges) {
-								setShowDiffView(true);
-							}
-						}}
-						onRenameTitle={handleRenameTitle}
-						renamingTitle={renamingSession}
-						showSessionActions={!isWelcomeState}
-						status={status}
-						title={threadTitle}
-					/>
-				</div>
-				<div className="h-full min-h-0 overflow-hidden">
-					{showDiffView ? (
-						<DiffView
-							fileDiffs={fileDiffs}
-							onClose={() => setShowDiffView(false)}
-						/>
-					) : (
-						<ChatMessages
-							onAnswerAskQuestion={handleAnswerAskQuestion}
-							onApproveToolApproval={handleApproveToolApproval}
-							onRejectToolApproval={handleRejectToolApproval}
-							onStartChat={(prompt) => {
-								setPromptInput(prompt);
+			<div
+				className={
+					isWelcomeState
+						? "grid h-full min-h-0 flex-1 grid-rows-[minmax(0,1fr)] overflow-hidden"
+						: "grid h-full min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden"
+				}
+			>
+				{!isWelcomeState ? (
+					<div className="z-20 border-b border-border/70 bg-background/85 backdrop-blur-sm">
+						<AgentHeader
+							canEditTitle={Boolean(activeSessionForTitle)}
+							canDeleteSession={Boolean(activeSessionToDelete)}
+							deletingSession={deletingSession}
+							diff={{
+								additions: summary.additions,
+								deletions: summary.deletions,
 							}}
-							chatTransportState={chatTransportState}
-							error={displayedError}
-							messages={displayedMessages}
-							model={config.model}
-							onRestoreCheckpoint={(runCount) =>
-								void restoreCheckpoint(runCount)
-							}
-							onForkSession={handleForkSession}
-							pendingToolApprovals={pendingToolApprovals}
-							pendingAskQuestions={pendingAskQuestions}
-							provider={config.provider}
-							sessionId={displayedSessionId}
-							streamingMessageId={activeAssistantMessageId}
-							isSessionSwitching={displayedIsSwitching}
-							status={displayedStatus}
+							onDeleteSession={requestDeleteSession}
+							onNewThread={onNewThread}
+							onOpenDiff={() => {
+								if (hasDiffChanges) setShowDiffView(true);
+							}}
+							onRenameTitle={handleRenameTitle}
+							renamingTitle={renamingSession}
+							status={status}
+							title={threadTitle}
 						/>
-					)}
-				</div>
-				<div className="z-20 shrink-0">
-					<ChatInputBar
-						attachments={attachmentList}
-						onAbort={() => void abort()}
-						onAttachFiles={(files) => {
-							setPendingAttachments((prev) => {
-								const existing = new Set(
-									prev.map(
-										(file) => `${file.name}:${file.size}:${file.lastModified}`,
-									),
-								);
-								const next = [...prev];
-								for (const file of files) {
-									const key = `${file.name}:${file.size}:${file.lastModified}`;
-									if (!existing.has(key)) {
-										existing.add(key);
-										next.push(file);
-									}
+					</div>
+				) : null}
+				<WelcomeScreen
+					active={isWelcomeState}
+					body={
+						showDiffView ? (
+							<DiffView
+								cwd={config.cwd || config.workspaceRoot}
+								fileDiffs={fileDiffs}
+								onClose={() => setShowDiffView(false)}
+							/>
+						) : (
+							<ChatMessages
+								onAnswerAskQuestion={handleAnswerAskQuestion}
+								onApproveToolApproval={handleApproveToolApproval}
+								onRejectToolApproval={handleRejectToolApproval}
+								chatTransportState={chatTransportState}
+								error={displayedError}
+								messages={displayedMessages}
+								onRestoreCheckpoint={(runCount) =>
+									void restoreCheckpoint(runCount)
 								}
-								return next;
-							});
-						}}
-						onListGitBranches={listGitBranches}
-						onRemoveAttachment={(id) => {
-							setPendingAttachments((prev) =>
-								prev.filter((file, index) => {
-									const fileId = `${file.name}:${file.size}:${file.lastModified}:${index}`;
-									return fileId !== id;
-								}),
-							);
-						}}
-						onSwitchGitBranch={switchGitBranch}
-						onRefreshGitBranch={() => void refreshGitBranch()}
-						onModelChange={(nextModel) =>
-							setConfig((prev) =>
-								prev.model === nextModel ? prev : { ...prev, model: nextModel },
-							)
-						}
-						onModeToggle={() =>
-							setConfig((prev) => ({
-								...prev,
-								mode: prev.mode === "plan" ? "act" : "plan",
-							}))
-						}
-						onPromptInputChange={setPromptInput}
-						onReasoningChange={handleReasoningChange}
-						onSteerPromptInQueue={(promptId) => {
-							void steerPromptInQueue(promptId);
-						}}
-						onEditPromptInQueue={(promptId, prompt) => {
-							void updatePromptInQueue(promptId, prompt);
-						}}
-						onUndoPromptInQueue={(item) => {
-							void handleUndoQueuedPrompt(item);
-						}}
-						onProviderChange={(nextProvider) =>
-							setConfig((prev) => {
-								const selected = providerCredentials[nextProvider];
-								const nextApiKey = selected?.apiKey ?? "";
-								if (
-									prev.provider === nextProvider &&
-									prev.apiKey === nextApiKey
-								) {
-									return prev;
-								}
-								return {
-									...prev,
-									provider: nextProvider,
-									apiKey: nextApiKey,
-								};
-							})
-						}
-						onReset={() => {
-							setPendingAttachments([]);
-							void reset();
-						}}
-						onSend={() => void handleSend()}
-						gitBranch={gitBranch}
-						model={config.model}
-						mode={config.mode}
-						promptsInQueue={promptsInQueue}
-						promptInput={promptInput}
-						provider={config.provider}
-						reasoningEffort={config.reasoningEffort}
-						status={status}
-						summary={summary}
-						thinking={config.thinking}
-					/>
-				</div>
+								onForkSession={handleForkSession}
+								pendingToolApprovals={pendingToolApprovals}
+								pendingAskQuestions={pendingAskQuestions}
+								sessionId={displayedSessionId}
+								streamingMessageId={activeAssistantMessageId}
+								isSessionSwitching={displayedIsSwitching}
+								status={displayedStatus}
+							/>
+						)
+					}
+					composer={composer}
+					gitBranch={gitBranch}
+					onListGitBranches={listGitBranches}
+					onStartChat={setPromptInput}
+					onSwitchGitBranch={switchGitBranch}
+					quickActions={[]}
+				/>
 			</div>
 			<AlertDialog
 				open={deleteConfirmOpen}

apps/examples/desktop-app/webview/components/agent-header.tsx

@@ -82,12 +82,13 @@ export function AgentHeader({
 	const triggerDeleteSession = () => onDeleteSession?.();
 
 	return (
-		<header className="flex h-12 items-center justify-between px-4">
+		<header className="flex h-12 items-center justify-between gap-2 px-4 max-md:pl-12">
 			{/* Left: thread title */}
-			<div className="flex items-center gap-2">
-				<span
+			<div className="flex min-w-0 flex-1 items-center gap-2">
+				<output
+					aria-label={`Session status: ${status}`}
 					className={cn(
-						"rounded w-2 h-2 font-mono",
+						"size-2 shrink-0 rounded font-mono",
 						status === "running"
 							? "bg-green-500"
 							: status === "failed"
@@ -97,7 +98,7 @@ export function AgentHeader({
 				/>
 				{isEditingTitle ? (
 					<form
-						className="m-0"
+						className="m-0 min-w-0 flex-1"
 						onSubmit={(event) => {
 							event.preventDefault();
 							void submitTitle();
@@ -105,7 +106,7 @@ export function AgentHeader({
 					>
 						<Input
 							autoFocus
-							className="h-7 w-64 text-sm"
+							className="h-7 w-64 max-w-full text-sm"
 							disabled={renamingTitle}
 							onBlur={() => {
 								void submitTitle();
@@ -124,7 +125,7 @@ export function AgentHeader({
 				) : (
 					<button
 						className={cn(
-							"text-sm font-medium text-foreground",
+							"min-w-0 truncate text-sm font-medium text-foreground",
 							canEditTitle &&
 								"rounded px-1 py-0.5 transition-colors hover:bg-accent",
 						)}
@@ -137,6 +138,7 @@ export function AgentHeader({
 							setIsEditingTitle(true);
 						}}
 						type="button"
+						title={threadTitle}
 					>
 						{threadTitle}
 					</button>
@@ -144,7 +146,8 @@ export function AgentHeader({
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button
-							className="text-muted-foreground hover:text-foreground transition-colors"
+							aria-label="Session actions"
+							className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
 							id="show-more-btn"
 							variant="ghost"
 							size="icon-sm"
@@ -167,8 +170,9 @@ export function AgentHeader({
 			</div>
 
 			{showSessionActions ? (
-				<div className="flex items-center gap-2">
+				<div className="flex shrink-0 items-center gap-2">
 					<Button
+						aria-label={`Open diff: ${additions} additions, ${deletions} deletions`}
 						className={cn(
 							"flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-mono transition-colors",
 							hasChanges
@@ -186,6 +190,7 @@ export function AgentHeader({
 						<span className="text-destructive">-{deletions}</span>
 					</Button>
 					<Button
+						aria-label="New session"
 						className="flex items-center gap-1 rounded-md text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
 						onClick={() => onNewThread?.()}
 						size="icon-sm"

apps/examples/desktop-app/webview/components/agent-sidebar.test.tsx

@@ -0,0 +1,375 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+	AgentSidebar,
+	getSessionOverviewItems,
+	getSessionOverviewTitle,
+} from "@/components/agent-sidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AccountProvider } from "@/contexts/account-context";
+import type {
+	SessionThread,
+	UseSessionHistoryResult,
+} from "@/hooks/use-session-history";
+
+const { invoke } = vi.hoisted(() => ({ invoke: vi.fn() }));
+vi.mock("@/lib/desktop-client", () => ({ desktopClient: { invoke } }));
+
+let container: HTMLDivElement;
+let root: Root;
+
+function makeThread(project: string, index: number): SessionThread {
+	return {
+		id: `${project}-${index}`,
+		title: `${project} session ${index}`,
+		codebase: project,
+		workspacePath: `/projects/${project}`,
+		time: `${index}m`,
+		provider: "cline",
+		model: "test-model",
+		status: "completed",
+	};
+}
+
+function makeSessionHistory(
+	threads: SessionThread[],
+	loadMoreSessions: ReturnType<typeof vi.fn>,
+	options: {
+		loadOlderSessions?: ReturnType<typeof vi.fn>;
+		mayHaveMoreSessions?: boolean;
+	} = {},
+): UseSessionHistoryResult {
+	return {
+		deleteThread: vi.fn(),
+		forkThread: vi.fn(),
+		isLoadingHistory: false,
+		isLoadingMore: false,
+		loadOlderSessions: options.loadOlderSessions ?? vi.fn(),
+		loadMoreSessions,
+		mayHaveMoreSessions: options.mayHaveMoreSessions ?? false,
+		openThread: vi.fn(),
+		pendingAction: null,
+		renameThread: vi.fn(),
+		threads,
+		unreadSessionIds: new Set<string>(),
+	} as unknown as UseSessionHistoryResult;
+}
+
+async function click(element: Element): Promise<void> {
+	await act(async () => {
+		element.dispatchEvent(
+			new MouseEvent("pointerdown", { bubbles: true, cancelable: true }),
+		);
+		element.dispatchEvent(
+			new MouseEvent("click", { bubbles: true, cancelable: true }),
+		);
+		await Promise.resolve();
+	});
+}
+
+function buttonWithText(text: string, rootNode: ParentNode = container) {
+	const button = [
+		...rootNode.querySelectorAll<HTMLButtonElement>("button"),
+	].find((candidate) => candidate.textContent?.includes(text));
+	expect(button).toBeDefined();
+	return button as HTMLButtonElement;
+}
+
+function sessionIsVisible(title: string): boolean {
+	return [...container.querySelectorAll<HTMLButtonElement>("button")].some(
+		(button) => button.querySelector("span")?.textContent === title,
+	);
+}
+
+beforeEach(() => {
+	Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+	window.localStorage.clear();
+	invoke.mockReset();
+	invoke.mockRejectedValue(new Error("No Cline account auth token found"));
+	Object.defineProperty(window, "matchMedia", {
+		configurable: true,
+		value: vi.fn(() => ({
+			matches: false,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+		})),
+	});
+	HTMLElement.prototype.hasPointerCapture = vi.fn(() => false);
+	HTMLElement.prototype.setPointerCapture = vi.fn();
+	HTMLElement.prototype.releasePointerCapture = vi.fn();
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	vi.restoreAllMocks();
+});
+
+describe("AgentSidebar session organization", () => {
+	it("builds the hover overview with branch and secondary metadata last", () => {
+		const thread = {
+			...makeThread("cline", 5),
+			gitBranch: "bee/session-overview",
+			inputTokens: 3_000_000,
+			outputTokens: 9_000,
+			totalCostUsd: 3.06,
+		};
+
+		expect(getSessionOverviewItems(thread)).toEqual([
+			["Workspace", "cline", "/projects/cline"],
+			["Git branch", "bee/session-overview"],
+			["Provider", "cline"],
+			["Model", "test-model"],
+			["Tokens", "3009k"],
+			["Cost", "$3.06"],
+			["ID", "cline-5"],
+			["Updated", "5m"],
+		]);
+		expect(getSessionOverviewItems(makeThread("cline", 5))).not.toContainEqual([
+			"Git branch",
+			expect.anything(),
+		]);
+		expect(
+			getSessionOverviewItems(thread).some(([label]) => label === "Status"),
+		).toBe(false);
+	});
+
+	it("shows the full first line of the session title", () => {
+		const firstLine =
+			"This is a complete session title that is intentionally longer than seventy characters for the hover overview";
+		expect(getSessionOverviewTitle(`${firstLine}\nSecond line`)).toBe(
+			firstLine,
+		);
+	});
+
+	it("defaults to time and keeps project expansion scoped to one project", async () => {
+		const threads = [
+			...Array.from({ length: 12 }, (_, index) =>
+				makeThread("alpha", index + 1),
+			),
+			...Array.from({ length: 12 }, (_, index) =>
+				makeThread("beta", index + 1),
+			),
+		];
+		const loadMoreSessions = vi.fn(async () => undefined);
+		const loadOlderSessions = vi.fn(async () => undefined);
+		const sessionHistory = makeSessionHistory(threads, loadMoreSessions, {
+			loadOlderSessions,
+			mayHaveMoreSessions: true,
+		});
+
+		await act(async () => {
+			root.render(
+				<SidebarProvider>
+					<AgentSidebar
+						activeSessionId={null}
+						isHomeActive
+						onHome={vi.fn()}
+						onNewThread={vi.fn()}
+						onSettingsSectionChange={vi.fn()}
+						sessionHistory={sessionHistory}
+						setView={vi.fn()}
+						settingsSection="General"
+						view="chat"
+					/>
+				</SidebarProvider>,
+			);
+		});
+
+		expect(
+			container.querySelector('[aria-label="Sort sessions: Time"]'),
+		).not.toBeNull();
+		expect(sessionIsVisible("alpha session 10")).toBe(true);
+		expect(sessionIsVisible("alpha session 11")).toBe(false);
+		expect(sessionIsVisible("beta session 1")).toBe(false);
+
+		await click(buttonWithText("Show more"));
+		expect(sessionIsVisible("alpha session 11")).toBe(true);
+		expect(loadMoreSessions).toHaveBeenCalledWith(20);
+
+		await click(
+			container.querySelector('[aria-label="Sort sessions: Time"]') as Element,
+		);
+		const projectOption = await vi.waitFor(() => {
+			const option = [
+				...document.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
+			].find((candidate) => candidate.textContent?.includes("Sort by project"));
+			expect(option).toBeDefined();
+			return option as HTMLElement;
+		});
+		await click(projectOption);
+
+		await vi.waitFor(() => {
+			expect(
+				container.querySelector('[aria-label="Sort sessions: Project"]'),
+			).not.toBeNull();
+		});
+		expect(container.textContent).toContain("alpha");
+		expect(container.textContent).toContain("beta");
+		expect(sessionIsVisible("alpha session 11")).toBe(false);
+		expect(sessionIsVisible("beta session 11")).toBe(false);
+
+		await click(buttonWithText("Show more in alpha"));
+		expect(sessionIsVisible("alpha session 11")).toBe(true);
+		expect(sessionIsVisible("beta session 11")).toBe(false);
+
+		await click(buttonWithText("Load older projects"));
+		expect(loadOlderSessions).toHaveBeenCalledOnce();
+	});
+
+	it("shows the signed-in account and active organization in the footer", async () => {
+		invoke.mockResolvedValue({
+			id: "user-1",
+			email: "beatrix@cline.bot",
+			displayName: "Beatrix",
+			photoUrl: "",
+			createdAt: "2024-01-01T00:00:00Z",
+			updatedAt: "2024-01-01T00:00:00Z",
+			organizations: [
+				{
+					active: true,
+					memberId: "member-1",
+					name: "Cline Bot Inc",
+					organizationId: "org-1",
+					roles: ["admin"],
+				},
+			],
+		});
+
+		await act(async () => {
+			root.render(
+				<AccountProvider>
+					<SidebarProvider>
+						<AgentSidebar
+							activeSessionId={null}
+							isHomeActive
+							onHome={vi.fn()}
+							onNewThread={vi.fn()}
+							onSettingsSectionChange={vi.fn()}
+							sessionHistory={makeSessionHistory([], vi.fn())}
+							setView={vi.fn()}
+							settingsSection="General"
+							view="chat"
+						/>
+					</SidebarProvider>
+				</AccountProvider>,
+			);
+		});
+
+		await vi.waitFor(() => {
+			expect(container.textContent).toContain("Beatrix");
+			expect(container.textContent).toContain("Cline Bot Inc");
+		});
+		expect(container.textContent).not.toContain("Cline Desktop");
+		expect(container.textContent).not.toContain("Local");
+	});
+
+	it("opens the Account settings section when the footer account row is clicked", async () => {
+		const setView = vi.fn();
+		const onSettingsSectionChange = vi.fn();
+
+		await act(async () => {
+			root.render(
+				<AccountProvider>
+					<SidebarProvider>
+						<AgentSidebar
+							activeSessionId={null}
+							isHomeActive
+							onHome={vi.fn()}
+							onNewThread={vi.fn()}
+							onSettingsSectionChange={onSettingsSectionChange}
+							sessionHistory={makeSessionHistory([], vi.fn())}
+							setView={setView}
+							settingsSection="General"
+							view="chat"
+						/>
+					</SidebarProvider>
+				</AccountProvider>,
+			);
+		});
+
+		const accountButton = container.querySelector(
+			'[aria-label="Account settings"]',
+		);
+		expect(accountButton).not.toBeNull();
+		await click(accountButton as Element);
+
+		expect(onSettingsSectionChange).toHaveBeenCalledWith("Account");
+		expect(setView).toHaveBeenCalledWith("settings");
+	});
+
+	it("shows the desktop app version in a popover when the Cline logo is clicked", async () => {
+		const onHome = vi.fn();
+		invoke.mockImplementation(async (command: string) => {
+			if (command === "get_process_context") {
+				return { appVersion: "1.2.3" };
+			}
+			throw new Error("No Cline account auth token found");
+		});
+
+		await act(async () => {
+			root.render(
+				<AccountProvider>
+					<SidebarProvider>
+						<AgentSidebar
+							activeSessionId={null}
+							isHomeActive
+							onHome={onHome}
+							onNewThread={vi.fn()}
+							onSettingsSectionChange={vi.fn()}
+							sessionHistory={makeSessionHistory([], vi.fn())}
+							setView={vi.fn()}
+							settingsSection="General"
+							view="chat"
+						/>
+					</SidebarProvider>
+				</AccountProvider>,
+			);
+		});
+
+		const logoButton = container.querySelector('[aria-label="Cline home"]');
+		expect(logoButton).not.toBeNull();
+		expect(document.body.textContent).not.toContain("Version 1.2.3");
+
+		await click(logoButton as Element);
+
+		await vi.waitFor(() => {
+			expect(document.body.textContent).toContain("Version 1.2.3");
+		});
+		expect(onHome).toHaveBeenCalled();
+		expect(invoke).toHaveBeenCalledWith("get_process_context");
+	});
+
+	it("falls back to a signed-out footer without account data", async () => {
+		await act(async () => {
+			root.render(
+				<AccountProvider>
+					<SidebarProvider>
+						<AgentSidebar
+							activeSessionId={null}
+							isHomeActive
+							onHome={vi.fn()}
+							onNewThread={vi.fn()}
+							onSettingsSectionChange={vi.fn()}
+							sessionHistory={makeSessionHistory([], vi.fn())}
+							setView={vi.fn()}
+							settingsSection="General"
+							view="chat"
+						/>
+					</SidebarProvider>
+				</AccountProvider>,
+			);
+		});
+
+		await vi.waitFor(() => {
+			expect(container.textContent).toContain("Cline Desktop");
+		});
+		expect(container.textContent).not.toContain("Local");
+	});
+});

apps/examples/desktop-app/webview/components/agent-sidebar.tsx

@@ -1,18 +1,31 @@
 "use client";
 
 import {
+	Activity,
+	ArrowDownUp,
+	Bot,
 	ChevronDown,
+	CircleUserRound,
+	Clock3,
+	Code,
+	FileText,
 	Filter,
+	FolderTree,
 	GitFork,
 	Loader2,
 	MessageSquare,
 	PanelLeftOpen,
 	Pencil,
 	Pin,
+	Plug,
 	Plus,
+	Radio,
 	Search,
+	Server,
 	Settings,
+	SlidersHorizontal,
 	Trash2,
+	Wrench,
 } from "lucide-react";
 import {
 	type ReactNode,
@@ -22,6 +35,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { ClineLogo } from "@/components/cline-logo";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -52,40 +66,150 @@ import {
 	HoverCardTrigger,
 } from "@/components/ui/hover-card";
 import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useSidebar } from "@/components/ui/sidebar";
 import { normalizeTitle } from "@/components/utils";
+import {
+	CUSTOMIZATION_SECTIONS,
+	SETTINGS_SECTIONS,
+	type SettingsSection,
+} from "@/components/views/settings/settings-view";
+import { useAccount } from "@/contexts/account-context";
 import type {
 	SessionThread,
 	UseSessionHistoryResult,
 } from "@/hooks/use-session-history";
 import { formatCostUsd, formatTokenCount } from "@/hooks/use-session-history";
+import { desktopClient } from "@/lib/desktop-client";
+import {
+	groupThreadsByProject,
+	INITIAL_VISIBLE_THREAD_COUNT,
+	workspaceDisplayName,
+} from "@/lib/sidebar-session-organization";
 import { cn } from "@/lib/utils";
 
 type Thread = SessionThread;
+type AppView = "chat" | "sessions" | "settings";
 
 const filterOptions = ["All", "Running", "Recent", "Pinned"] as const;
 type FilterOption = (typeof filterOptions)[number];
-const INITIAL_VISIBLE_THREAD_COUNT = 10;
+type SidebarSortMode = "time" | "project";
+const SETTINGS_SECTION_ICONS = {
+	General: SlidersHorizontal,
+	Models: Bot,
+	Channels: Radio,
+	Schedules: Clock3,
+	Account: CircleUserRound,
+	Plugins: Plug,
+	Skills: Activity,
+	MCP: Server,
+	Hooks: Code,
+	Rules: FileText,
+	Agents: Bot,
+	Tools: Wrench,
+} satisfies Record<SettingsSection, typeof Settings>;
+
+function SettingsSectionNavigation({
+	activeSection,
+	collapsed,
+	onSelect,
+}: {
+	activeSection: SettingsSection;
+	collapsed: boolean;
+	onSelect: (section: SettingsSection) => void;
+}) {
+	const renderSectionButton = (section: SettingsSection) => {
+		const Icon = SETTINGS_SECTION_ICONS[section];
+		return (
+			<Button
+				aria-current={activeSection === section ? "page" : undefined}
+				aria-label={section}
+				className={cn(
+					"min-w-0 justify-start",
+					activeSection === section &&
+						"bg-sidebar-accent text-sidebar-accent-foreground",
+					collapsed && "mx-auto size-9 justify-center px-0",
+				)}
+				key={section}
+				onClick={() => onSelect(section)}
+				title={section}
+				type="button"
+				variant="sidebarItem"
+			>
+				<Icon className="size-4 shrink-0" />
+				{!collapsed ? <span className="truncate">{section}</span> : null}
+			</Button>
+		);
+	};
+
+	return (
+		<nav
+			aria-label="Settings sections"
+			className={cn(
+				"flex h-full min-h-0 flex-col gap-0.5 overflow-y-auto",
+				collapsed ? "w-full items-center" : "w-full",
+			)}
+		>
+			{!collapsed ? (
+				<p className="px-2 pb-2 text-sm font-medium text-muted-foreground">
+					Settings
+				</p>
+			) : null}
+			{SETTINGS_SECTIONS.map(renderSectionButton)}
+			{!collapsed ? (
+				<p className="px-2 pb-2 pt-4 text-sm font-medium text-muted-foreground">
+					Customizations
+				</p>
+			) : (
+				<div className="my-2 h-px w-6 shrink-0 bg-sidebar-border" />
+			)}
+			{CUSTOMIZATION_SECTIONS.map(renderSectionButton)}
+		</nav>
+	);
+}
 
 export function AgentSidebar({
+	isHomeActive,
+	onHome,
 	onNewThread,
+	onSettingsSectionChange,
 	setView,
+	settingsSection,
+	view,
 	activeSessionId,
 	sessionHistory,
 }: {
+	isHomeActive: boolean;
+	onHome: () => void;
 	onNewThread?: () => void;
-	setView: (view: "chat" | "sessions" | "settings") => void;
+	onSettingsSectionChange: (section: SettingsSection) => void;
+	setView: (view: AppView) => void;
+	settingsSection: SettingsSection;
+	view: AppView;
 	activeSessionId?: string | null;
 	sessionHistory: UseSessionHistoryResult;
 }) {
-	const { isMobile, setOpen, state } = useSidebar();
+	const { isMobile, setOpen, setOpenMobile, state } = useSidebar();
 	const isCollapsed = !isMobile && state === "collapsed";
+	const { user, activeOrganization } = useAccount();
+	const { displayName, email } = user || {};
+	const username = displayName?.split(" ")?.[0] || email?.split("@")?.[0];
+	const accountName = username?.trim() || "Cline Desktop";
+	const accountScope = user
+		? (activeOrganization?.name ?? "Personal")
+		: undefined;
+	const accountInitial = accountName.charAt(0).toUpperCase();
 	const {
 		deleteThread: deleteHistoryThread,
 		forkThread: forkHistoryThread,
 		isLoadingHistory,
 		isLoadingMore,
+		loadOlderSessions,
 		loadMoreSessions,
 		mayHaveMoreSessions,
 		openThread: openHistoryThread,
@@ -96,6 +220,7 @@ export function AgentSidebar({
 	} = sessionHistory;
 	const activeThread = activeSessionId ?? "";
 	const [filter, setFilter] = useState<FilterOption>("All");
+	const [sortMode, setSortMode] = useState<SidebarSortMode>("time");
 	const [searchOpen, setSearchOpen] = useState(false);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [showMoreCount, setShowMoreCount] = useState(
@@ -106,6 +231,32 @@ export function AgentSidebar({
 	const [deleteConfirmThread, setDeleteConfirmThread] = useState<Thread | null>(
 		null,
 	);
+	const [collapsedProjects, setCollapsedProjects] = useState<Set<string>>(
+		() => new Set(),
+	);
+	const [projectVisibleCounts, setProjectVisibleCounts] = useState<
+		Record<string, number>
+	>({});
+	const [appVersion, setAppVersion] = useState<string | null>(null);
+
+	const loadAppVersion = useCallback(async () => {
+		try {
+			const context = await desktopClient.invoke<{ appVersion?: unknown }>(
+				"get_process_context",
+			);
+			const version =
+				typeof context?.appVersion === "string"
+					? context.appVersion.trim()
+					: "";
+			setAppVersion(version || null);
+		} catch {
+			// Leave the version hidden; an older sidecar build has no appVersion.
+		}
+	}, []);
+
+	useEffect(() => {
+		void loadAppVersion();
+	}, [loadAppVersion]);
 
 	useEffect(() => {
 		if (isCollapsed && searchOpen) {
@@ -120,7 +271,8 @@ export function AgentSidebar({
 			filtered = filtered.filter(
 				(t) =>
 					t.title.toLowerCase().includes(q) ||
-					t.codebase.toLowerCase().includes(q),
+					t.codebase.toLowerCase().includes(q) ||
+					t.workspacePath.toLowerCase().includes(q),
 			);
 		}
 		switch (filter) {
@@ -134,19 +286,44 @@ export function AgentSidebar({
 				return filtered;
 		}
 	}, [filter, searchQuery, threads]);
+	const closeMobileSidebar = useCallback(() => {
+		if (isMobile) setOpenMobile(false);
+	}, [isMobile, setOpenMobile]);
 
 	const openThread = useCallback(
 		(threadId: string) => {
 			setView("chat");
 			openHistoryThread(threadId);
+			closeMobileSidebar();
 		},
-		[openHistoryThread, setView],
+		[closeMobileSidebar, openHistoryThread, setView],
 	);
 
 	const openNewThread = useCallback(() => {
 		setView("chat");
 		onNewThread?.();
-	}, [onNewThread, setView]);
+		closeMobileSidebar();
+	}, [closeMobileSidebar, onNewThread, setView]);
+	const openHome = useCallback(() => {
+		onHome();
+		closeMobileSidebar();
+	}, [closeMobileSidebar, onHome]);
+	const openSessions = useCallback(() => {
+		setView("sessions");
+		closeMobileSidebar();
+	}, [closeMobileSidebar, setView]);
+	const openSettings = useCallback(() => {
+		setView("settings");
+		closeMobileSidebar();
+	}, [closeMobileSidebar, setView]);
+	const openSettingsSection = useCallback(
+		(section: SettingsSection) => {
+			onSettingsSectionChange(section);
+			setView("settings");
+			closeMobileSidebar();
+		},
+		[closeMobileSidebar, onSettingsSectionChange, setView],
+	);
 
 	const startRenameThread = useCallback((thread: Thread) => {
 		setEditingSessionId(thread.id);
@@ -202,8 +379,30 @@ export function AgentSidebar({
 				: [...pinnedThreads, ...sessionThreads].slice(0, showMoreCount),
 		[filter, pinnedThreads, sessionThreads, showMoreCount],
 	);
-	const showShowMore =
-		sessionThreads.length > showMoreCount || mayHaveMoreSessions;
+	const showTimeShowMore =
+		sessionThreads.length > showMoreCount ||
+		(filter === "All" && !searchQuery && mayHaveMoreSessions);
+	const projectGroups = useMemo(
+		() => groupThreadsByProject([...pinnedThreads, ...sessionThreads]),
+		[pinnedThreads, sessionThreads],
+	);
+
+	const toggleProject = useCallback((project: string) => {
+		setCollapsedProjects((current) => {
+			const next = new Set(current);
+			if (next.has(project)) next.delete(project);
+			else next.add(project);
+			return next;
+		});
+	}, []);
+	const showMoreForProject = useCallback((project: string) => {
+		setProjectVisibleCounts((current) => ({
+			...current,
+			[project]:
+				(current[project] ?? INITIAL_VISIBLE_THREAD_COUNT) +
+				INITIAL_VISIBLE_THREAD_COUNT,
+		}));
+	}, []);
 
 	const filterMenu = (
 		<DropdownMenu>
@@ -222,6 +421,7 @@ export function AgentSidebar({
 					onValueChange={(value) => {
 						setFilter(value as FilterOption);
 						setShowMoreCount(INITIAL_VISIBLE_THREAD_COUNT);
+						setProjectVisibleCounts({});
 					}}
 					value={filter}
 				>
@@ -234,29 +434,136 @@ export function AgentSidebar({
 			</DropdownMenuContent>
 		</DropdownMenu>
 	);
+	const sortMenu = (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button
+					aria-label={`Sort sessions: ${sortMode === "time" ? "Time" : "Project"}`}
+					className="m-0! inline-flex size-8 items-center justify-center rounded-md p-0! text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+					size="icon"
+					title={sortMode === "time" ? "Sort by time" : "Sort by project"}
+					variant="ghost"
+				>
+					<ArrowDownUp className="size-3.5" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end" className="w-44">
+				<DropdownMenuRadioGroup
+					onValueChange={(value) => {
+						if (value === "time" || value === "project") {
+							setSortMode(value);
+						}
+					}}
+					value={sortMode}
+				>
+					<DropdownMenuRadioItem value="time">
+						<Clock3 className="size-4" />
+						Sort by time
+					</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="project">
+						<FolderTree className="size-4" />
+						Sort by project
+					</DropdownMenuRadioItem>
+				</DropdownMenuRadioGroup>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+	const threadItem = (thread: Thread) => (
+		<ThreadItem
+			editTitle={editingTitle}
+			editing={editingSessionId === thread.id}
+			isActive={activeThread === thread.id}
+			key={thread.id}
+			onCancelRename={cancelRenameThread}
+			onClick={() => openThread(thread.id)}
+			onCommitRename={() => void commitRenameThread(thread)}
+			onDelete={() => requestDeleteThread(thread)}
+			onEditTitleChange={setEditingTitle}
+			onFork={() => void forkThread(thread)}
+			onRename={() => startRenameThread(thread)}
+			pendingAction={
+				pendingAction?.sessionId === thread.id ? pendingAction.action : null
+			}
+			thread={thread}
+			unread={unreadSessionIds.has(thread.id)}
+		/>
+	);
 
 	return (
 		<>
 			<div className="flex h-full min-h-0 w-full min-w-0 shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground">
-				<div className="mt-2 flex w-full min-w-0 flex-col gap-1">
+				<div
+					className={cn(
+						"flex h-16 shrink-0 items-center px-4",
+						isCollapsed && "justify-center px-0",
+					)}
+				>
+					<Popover
+						onOpenChange={(open) => {
+							if (open && !appVersion) {
+								void loadAppVersion();
+							}
+						}}
+					>
+						<PopoverTrigger asChild>
+							<button
+								aria-label="Cline home"
+								className="flex items-center gap-2 rounded-md p-1 text-sidebar-foreground transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+								type="button"
+								onClick={openHome}
+								title="Home"
+							>
+								<ClineLogo className="h-6 w-6" />
+							</button>
+						</PopoverTrigger>
+						<PopoverContent align="start" className="w-52 p-3" side="bottom">
+							<p className="text-sm font-medium">Cline Code</p>
+							<p className="mt-0.5 text-xs text-muted-foreground">
+								{appVersion ? `Version ${appVersion}` : "Version unavailable"}
+							</p>
+						</PopoverContent>
+					</Popover>
+				</div>
+
+				<div className={cn("shrink-0 px-3", isCollapsed && "px-1.5")}>
 					<Button
 						className={cn(
-							"justify-start min-w-0",
+							"min-w-0 justify-start",
+							view === "chat" &&
+								isHomeActive &&
+								"bg-sidebar-accent text-sidebar-accent-foreground",
 							isCollapsed && "mx-auto size-9 justify-center px-0",
 						)}
 						aria-label="New Session"
-						onClick={openNewThread}
+						onClick={openHome}
 						title="New Session"
-						variant="sidebar"
+						variant="sidebarItem"
 					>
-						{isCollapsed ? (
-							<MessageSquare className="size-4" />
-						) : (
-							<Plus className="size-4" />
-						)}
+						<Plus className="size-4" />
 						{!isCollapsed ? "New Session" : null}
 					</Button>
-					{isCollapsed ? (
+				</div>
+
+				{isCollapsed ? (
+					<div className="mt-2 flex min-h-0 flex-1 flex-col items-center gap-1 px-1.5">
+						{view === "settings" ? (
+							<SettingsSectionNavigation
+								activeSection={settingsSection}
+								collapsed
+								onSelect={openSettingsSection}
+							/>
+						) : (
+							<Button
+								aria-label="New session"
+								className="mx-auto size-9 justify-center px-0"
+								onClick={openNewThread}
+								title="New session"
+								type="button"
+								variant="sidebarItem"
+							>
+								<MessageSquare className="size-4" />
+							</Button>
+						)}
 						<Button
 							aria-label="Expand sidebar"
 							className="mx-auto size-9 justify-center px-0"
@@ -267,139 +574,211 @@ export function AgentSidebar({
 						>
 							<PanelLeftOpen className="size-4" />
 						</Button>
-					) : null}
-				</div>
-
-				{!isCollapsed ? (
-					<div className="flex w-full min-w-0 flex-col gap-1">
-						{searchOpen ? (
-							<div className="flex min-w-0 items-center gap-2 overflow-hidden rounded-md bg-sidebar-accent px-2 py-1.5">
-								<Search className="size-4 shrink-0" />
-								<Input
-									className="min-w-0 flex-1 bg-transparent text-sm text-sidebar-foreground outline-none placeholder:text-muted-foreground"
-									onBlur={() => {
-										if (!searchQuery) setSearchOpen(false);
-									}}
-									autoFocus={true}
-									onChange={(e) => setSearchQuery(e.target.value)}
-									placeholder="Search sessions..."
-									value={searchQuery}
-								/>
-							</div>
-						) : (
-							<Button
-								className="py-1.5 min-w-0"
-								onClick={() => setSearchOpen(true)}
-								title="Search sessions"
-								type="button"
-								variant="sidebarItem"
-							>
-								<Search className="size-4 shrink-0" />
-								<span>Search</span>
-							</Button>
-						)}
 					</div>
-				) : null}
-
-				{!isCollapsed ? (
-					<div className="mt-2 min-h-0 w-full flex-1">
-						<ScrollArea className="h-full min-h-0 w-full min-w-0">
-							<div className="flex min-w-0 flex-col gap-0.5 pb-3 px-3">
-								{isLoadingHistory && threads.length === 0 ? (
-									<div className="p-4 text-xs text-muted-foreground">
-										Loading session history...
-									</div>
-								) : (
-									<>
-										{displayedThreads.length > 0 && (
-											<ThreadSection
-												action={filterMenu}
-												label={filter === "All" ? "Sessions" : filter}
-												onClick={() => setView("sessions")}
-											>
-												{displayedThreads.map((thread) => (
-													<ThreadItem
-														editTitle={editingTitle}
-														editing={editingSessionId === thread.id}
-														isActive={activeThread === thread.id}
-														key={thread.id}
-														onCancelRename={cancelRenameThread}
-														onClick={() => openThread(thread.id)}
-														onCommitRename={() =>
-															void commitRenameThread(thread)
-														}
-														onDelete={() => requestDeleteThread(thread)}
-														onEditTitleChange={setEditingTitle}
-														onFork={() => void forkThread(thread)}
-														onRename={() => startRenameThread(thread)}
-														pendingAction={
-															pendingAction?.sessionId === thread.id
-																? pendingAction.action
-																: null
-														}
-														thread={thread}
-														unread={unreadSessionIds.has(thread.id)}
-													/>
-												))}
-											</ThreadSection>
-										)}
-
-										{displayedThreads.length === 0 && (
-											<div className="p-4 text-xs text-muted-foreground">
-												{searchQuery
-													? "No sessions match your search."
-													: "No sessions found in history."}
-											</div>
-										)}
-									</>
-								)}
-								{showShowMore && (
-									<Button
-										className="pl-0"
-										disabled={isLoadingMore}
-										onClick={() => {
-											const nextCount =
-												showMoreCount + INITIAL_VISIBLE_THREAD_COUNT;
-											setShowMoreCount(nextCount);
-											void loadMoreSessions(nextCount);
-										}}
-										type="button"
-										variant="sidebarText"
-									>
-										{isLoadingMore ? (
-											<>
-												<Loader2 className="size-3 animate-spin" />
-												Loading...
-											</>
-										) : (
-											<>
-												Show more
-												<ChevronDown className="size-3" />
-											</>
-										)}
-									</Button>
-								)}
-							</div>
-						</ScrollArea>
+				) : view === "settings" ? (
+					<div className="mt-5 min-h-0 flex-1 px-3">
+						<SettingsSectionNavigation
+							activeSection={settingsSection}
+							collapsed={false}
+							onSelect={openSettingsSection}
+						/>
 					</div>
 				) : (
-					<div className="min-h-0 w-full flex-1" />
+					<>
+						<div className="mt-5 shrink-0 px-3">
+							<div className="flex h-8 items-center justify-between gap-2">
+								<button
+									className={cn(
+										"min-w-0 truncate text-sm font-medium text-muted-foreground transition-colors hover:text-sidebar-foreground",
+										view === "sessions" && "text-sidebar-foreground",
+									)}
+									onClick={openSessions}
+									type="button"
+								>
+									{sortMode === "time" ? "Sessions" : "Projects"}
+								</button>
+								<div className="flex shrink-0 items-center gap-0.5">
+									<Button
+										aria-label="Search sessions"
+										className="m-0! size-8 p-0! text-muted-foreground hover:text-sidebar-foreground"
+										onClick={() => setSearchOpen((current) => !current)}
+										size="icon"
+										title="Search sessions"
+										type="button"
+										variant="ghost"
+									>
+										<Search className="size-3.5" />
+									</Button>
+									{sortMenu}
+									{filterMenu}
+								</div>
+							</div>
+							{searchOpen ? (
+								<div className="mt-1 flex min-w-0 items-center gap-2 overflow-hidden rounded-md border border-sidebar-border bg-background/70 px-2 py-1">
+									<Search className="size-4 shrink-0" />
+									<Input
+										className="h-7 min-w-0 flex-1 border-0 bg-transparent px-0 text-sm text-sidebar-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:ring-0"
+										autoFocus={true}
+										onChange={(e) => setSearchQuery(e.target.value)}
+										placeholder="Search sessions..."
+										value={searchQuery}
+									/>
+								</div>
+							) : null}
+						</div>
+
+						<div className="mt-1 min-h-0 w-full flex-1">
+							<ScrollArea className="h-full min-h-0 w-full min-w-0">
+								<div className="flex min-w-0 flex-col gap-0.5 pb-3 px-3">
+									{isLoadingHistory && threads.length === 0 ? (
+										<div className="p-4 text-xs text-muted-foreground">
+											Loading session history...
+										</div>
+									) : (
+										<>
+											{sortMode === "time"
+												? displayedThreads.map(threadItem)
+												: projectGroups.map((project) => {
+														const visibleCount =
+															projectVisibleCounts[project.id] ??
+															INITIAL_VISIBLE_THREAD_COUNT;
+														return (
+															<ProjectSection
+																collapsed={collapsedProjects.has(project.id)}
+																key={project.id}
+																label={project.label}
+																onToggle={() => toggleProject(project.id)}
+															>
+																{project.threads
+																	.slice(0, visibleCount)
+																	.map(threadItem)}
+																{project.threads.length > visibleCount ? (
+																	<Button
+																		className="pl-2"
+																		onClick={() =>
+																			showMoreForProject(project.id)
+																		}
+																		type="button"
+																		variant="sidebarText"
+																	>
+																		Show more in {project.label}
+																		<ChevronDown className="size-3" />
+																	</Button>
+																) : null}
+															</ProjectSection>
+														);
+													})}
+
+											{(sortMode === "time"
+												? displayedThreads.length === 0
+												: projectGroups.length === 0) && (
+												<div className="px-2 py-4 text-xs text-muted-foreground">
+													{searchQuery
+														? "No sessions match your search."
+														: "No sessions found in history."}
+												</div>
+											)}
+										</>
+									)}
+									{sortMode === "time" && showTimeShowMore && (
+										<Button
+											className="pl-0"
+											disabled={isLoadingMore}
+											onClick={() => {
+												const nextCount =
+													showMoreCount + INITIAL_VISIBLE_THREAD_COUNT;
+												setShowMoreCount(nextCount);
+												void loadMoreSessions(nextCount);
+											}}
+											type="button"
+											variant="sidebarText"
+										>
+											{isLoadingMore ? (
+												<>
+													<Loader2 className="size-3 animate-spin" />
+													Loading...
+												</>
+											) : (
+												<>
+													Show more
+													<ChevronDown className="size-3" />
+												</>
+											)}
+										</Button>
+									)}
+									{sortMode === "project" &&
+										filter === "All" &&
+										!searchQuery &&
+										mayHaveMoreSessions && (
+											<Button
+												className="pl-0"
+												disabled={isLoadingMore}
+												onClick={() => void loadOlderSessions()}
+												type="button"
+												variant="sidebarText"
+											>
+												{isLoadingMore ? (
+													<>
+														<Loader2 className="size-3 animate-spin" />
+														Loading older projects...
+													</>
+												) : (
+													<>
+														Load older projects
+														<ChevronDown className="size-3" />
+													</>
+												)}
+											</Button>
+										)}
+								</div>
+							</ScrollArea>
+						</div>
+					</>
 				)}
 
-				<div className="shrink-0 px-2 py-3">
-					<Button
-						type="button"
-						variant="sidebarItem"
-						className={cn(
-							"justify-start min-w-0",
-							isCollapsed && "mx-auto size-9 justify-center px-0",
-						)}
-						onClick={() => setView("settings")}
-						title="Settings"
-					>
-						<Settings className="size-4" />
-						{!isCollapsed ? "Settings" : null}
-					</Button>
+				<div className="shrink-0 border-t border-sidebar-border/70 px-2 py-3">
+					{view !== "settings" && (
+						<Button
+							aria-label="Settings"
+							type="button"
+							variant="sidebarItem"
+							className={cn(
+								"min-w-0 justify-start",
+								isCollapsed && "mx-auto size-9 justify-center px-0",
+							)}
+							onClick={openSettings}
+							title="Settings"
+						>
+							<Settings className="size-4" />
+							{!isCollapsed ? "Settings" : null}
+						</Button>
+					)}
+					{!isCollapsed ? (
+						<button
+							aria-label="Account settings"
+							className={cn(
+								"flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sidebar-foreground transition-colors hover:bg-sidebar-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+								view === "settings" &&
+									settingsSection === "Account" &&
+									"bg-sidebar-accent text-sidebar-accent-foreground",
+							)}
+							onClick={() => openSettingsSection("Account")}
+							title={user?.email || undefined}
+							type="button"
+						>
+							<span className="min-w-0 flex gap-2 items-center">
+								<span className="flex size-4 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-primary-foreground">
+									{accountInitial}
+								</span>
+								<span className="block truncate text-sm font-medium">
+									{accountName}
+									<span className="pl-1 truncate text-[11px] text-muted-foreground">
+										{accountScope}
+									</span>
+								</span>
+							</span>
+						</button>
+					) : null}
 				</div>
 			</div>
 			<AlertDialog
@@ -451,33 +830,35 @@ export function AgentSidebar({
 	);
 }
 
-function ThreadSection({
+function ProjectSection({
 	label,
-	action,
-	onClick,
+	collapsed,
+	onToggle,
 	children,
 }: {
 	label: string;
-	action?: ReactNode;
-	onClick?: () => void;
+	collapsed: boolean;
+	onToggle: () => void;
 	children: ReactNode;
 }) {
 	return (
-		<div className={cn("mb-1 min-w-0")}>
-			<div className="flex h-9 w-full min-w-0 flex-nowrap items-center gap-1 text-sm font-medium text-muted-foreground">
-				<button
-					aria-label={`Open ${label} sessions view`}
-					className="flex min-w-0 flex-1 items-center self-stretch rounded-md pl-0 pr-2 text-left transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-					onClick={onClick}
-					type="button"
-				>
-					<span className="block min-w-0 shrink truncate">{label}</span>
-				</button>
-				{action ? (
-					<div className="flex shrink-0 items-center">{action}</div>
-				) : null}
-			</div>
-			{children}
+		<div className="mb-1 min-w-0">
+			<button
+				aria-expanded={!collapsed}
+				className="flex h-8 w-full min-w-0 items-center gap-1.5 rounded-md px-1 text-left text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+				onClick={onToggle}
+				title={label}
+				type="button"
+			>
+				<ChevronDown
+					className={cn(
+						"size-3.5 shrink-0 transition-transform",
+						collapsed && "-rotate-90",
+					)}
+				/>
+				<span className="block min-w-0 truncate">{label}</span>
+			</button>
+			{!collapsed ? <div className="pl-3">{children}</div> : null}
 		</div>
 	);
 }
@@ -511,9 +892,8 @@ function ThreadItem({
 	pendingAction: "rename" | "fork" | "delete" | null;
 	unread: boolean;
 }) {
-	const tokenLabel = formatTokenCount(thread.inputTokens, thread.outputTokens);
-	const costLabel = formatCostUsd(thread.totalCostUsd);
 	const title = normalizeTitle(thread.title);
+	const overviewTitle = getSessionOverviewTitle(thread.title);
 	const pending = pendingAction !== null;
 	const statusDotClass = pending
 		? "bg-yellow-400"
@@ -522,16 +902,7 @@ function ThreadItem({
 			: unread
 				? "bg-blue-500"
 				: "";
-	const infoItems: Array<[string, string | null | undefined]> = [
-		["ID", thread.id],
-		["Workspace", thread.codebase],
-		["Status", thread.status],
-		["Updated", thread.time],
-		["Provider", thread.provider],
-		["Model", thread.model],
-		["Tokens", tokenLabel],
-		["Cost", costLabel],
-	].filter((item): item is [string, string] => Boolean(item[1]));
+	const infoItems = getSessionOverviewItems(thread);
 
 	if (editing) {
 		return (
@@ -564,7 +935,7 @@ function ThreadItem({
 					<HoverCardTrigger asChild>
 						<button
 							className={cn(
-								"group grid h-8 w-full max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded-md px-2 text-left text-sm font-normal transition-colors",
+								"group grid h-8 w-full max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 overflow-hidden rounded-md px-2 text-left text-sm font-normal transition-colors",
 								isActive
 									? "bg-sidebar-accent text-sidebar-accent-foreground"
 									: "text-sidebar-foreground/80 hover:bg-sidebar-accent/50",
@@ -573,20 +944,20 @@ function ThreadItem({
 							onClick={onClick}
 							type="button"
 						>
-							<span className="block max-w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-tight">
+							<span className="block max-w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-normal leading-tight">
 								{title}
 							</span>
-							{thread.pinned ? (
-								<Pin
-									aria-label="Pinned"
-									className="size-3 shrink-0 text-muted-foreground"
-								/>
-							) : statusDotClass ? (
-								<span
-									aria-hidden="true"
-									className={cn("size-2 rounded-full", statusDotClass)}
-								/>
-							) : null}
+							<span className="flex shrink-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+								{thread.pinned ? (
+									<Pin aria-label="Pinned" className="size-3" />
+								) : statusDotClass ? (
+									<span
+										aria-hidden="true"
+										className={cn("size-1.5 rounded-full", statusDotClass)}
+									/>
+								) : null}
+								<span>{thread.time}</span>
+							</span>
 						</button>
 					</HoverCardTrigger>
 				</ContextMenuTrigger>
@@ -598,12 +969,19 @@ function ThreadItem({
 					sideOffset={8}
 				>
 					<div className="min-w-0 space-y-2">
-						<div className="truncate text-sm font-medium">{title}</div>
+						<div className="wrap-break-word text-sm font-medium">
+							{overviewTitle}
+						</div>
 						<div className="grid grid-cols-[72px_minmax(0,1fr)] gap-x-2 gap-y-1 text-xs">
-							{infoItems.map(([label, value]) => (
+							{infoItems.map(([label, value, fullValue]) => (
 								<div className="contents" key={label}>
 									<span className="text-muted-foreground">{label}</span>
-									<span className="min-w-0 truncate font-mono">{value}</span>
+									<span
+										className="min-w-0 truncate font-mono"
+										title={fullValue}
+									>
+										{value}
+									</span>
 								</div>
 							))}
 						</div>
@@ -620,6 +998,34 @@ function ThreadItem({
 	);
 }
 
+export function getSessionOverviewTitle(title: string): string {
+	const firstLine = title.split(/\r?\n/, 1)[0] ?? "";
+	return normalizeTitle(firstLine);
+}
+
+export function getSessionOverviewItems(
+	thread: SessionThread,
+): Array<[string, string, string?]> {
+	const workspacePath = thread.workspacePath || thread.codebase;
+	const items: Array<[string, string | null | undefined, string?]> = [
+		[
+			"Workspace",
+			workspaceDisplayName(workspacePath),
+			workspacePath || undefined,
+		],
+		["Git branch", thread.gitBranch],
+		["Provider", thread.provider],
+		["Model", thread.model],
+		["Tokens", formatTokenCount(thread.inputTokens, thread.outputTokens)],
+		["Cost", formatCostUsd(thread.totalCostUsd)],
+		["ID", thread.id],
+		["Updated", thread.time],
+	];
+	return items.filter((item): item is [string, string, string?] =>
+		Boolean(item[1]),
+	);
+}
+
 function EditableSessionTitle({
 	value,
 	disabled,

apps/examples/desktop-app/webview/components/cline-logo.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+export function ClineLogo({ className }: { className?: string }) {
+	return (
+		<span
+			aria-hidden="true"
+			className={cn("inline-block shrink-0 bg-current", className)}
+			style={{
+				maskImage: "url('/cline-logo-filled.svg')",
+				maskPosition: "center",
+				maskRepeat: "no-repeat",
+				maskSize: "contain",
+				WebkitMaskImage: "url('/cline-logo-filled.svg')",
+				WebkitMaskPosition: "center",
+				WebkitMaskRepeat: "no-repeat",
+				WebkitMaskSize: "contain",
+			}}
+		/>
+	);
+}

apps/examples/desktop-app/webview/components/ui/aurora-bg.tsx

@@ -9,36 +9,41 @@ interface Star {
 	delay: string;
 	duration: string;
 	opacity: number;
+	color: string;
 }
 
 // Big blurred gradient blobs that slowly drift/rotate to fake an aurora.
-// Each entry is [positionClasses, gradient, animationDuration, animationDelay].
-const BLOBS: Array<[string, string, string, string]> = [
-	[
-		"left-[-20%] bottom-[-40%] w-[70%] h-[80%]",
-		"radial-gradient(ellipse at center, oklch(0.55 0.2 278 / 0.55), transparent 70%)",
-		"16s",
-		"0s",
-	],
-	[
-		"left-[25%] bottom-[-50%] w-[60%] h-[90%]",
-		"radial-gradient(ellipse at center, oklch(0.65 0.19 200 / 0.4), transparent 70%)",
-		"22s",
-		"-6s",
-	],
-	[
-		"right-[-15%] bottom-[-40%] w-[65%] h-[85%]",
-		"radial-gradient(ellipse at center, oklch(0.6 0.18 310 / 0.5), transparent 70%)",
-		"19s",
-		"-12s",
-	],
-	[
-		"left-[10%] bottom-[-30%] w-[80%] h-[60%]",
-		"radial-gradient(ellipse at center, oklch(0.75 0.13 340 / 0.35), transparent 70%)",
-		"26s",
-		"-3s",
-	],
-];
+const BLOBS = [
+	{
+		id: "periwinkle-left",
+		position: "left-[-20%] bottom-[-40%] w-[70%] h-[80%]",
+		gradient:
+			"radial-gradient(ellipse at center, color-mix(in oklab, var(--brand-periwinkle) 64%, transparent), transparent 70%)",
+		duration: "11s",
+		delay: "0s",
+		reverse: false,
+	},
+	{
+		id: "violet-right",
+		position: "right-[-15%] bottom-[-40%] w-[65%] h-[85%]",
+		gradient:
+			"radial-gradient(ellipse at center, color-mix(in oklab, var(--brand-violet) 58%, transparent), transparent 70%)",
+		duration: "12.5s",
+		delay: "-12s",
+		reverse: true,
+	},
+] as const;
+
+function seededUnit(index: number, salt: number): number {
+	let value =
+		Math.imul(index + 1, 0x9e3779b1) ^ Math.imul(salt + 1, 0x85ebca6b);
+	value ^= value >>> 16;
+	value = Math.imul(value, 0x7feb352d);
+	value ^= value >>> 15;
+	value = Math.imul(value, 0x846ca68b);
+	value ^= value >>> 16;
+	return (value >>> 0) / 0x1_0000_0000;
+}
 
 /**
  * A decorative aurora background built entirely from CSS: blurred gradient
@@ -48,47 +53,81 @@ const BLOBS: Array<[string, string, string, string]> = [
  *
  * Keyframes (`aurora-drift`, `aurora-twinkle`) live in app/globals.css.
  */
-export function AuroraBackground({ starCount = 90 }: { starCount?: number }) {
-	// Random star field, generated once per mount.
+export function AuroraBackground({ starCount = 48 }: { starCount?: number }) {
+	// The field is deterministic so server and browser markup always agree.
 	const stars = useMemo<Star[]>(
 		() =>
-			Array.from({ length: starCount }, () => {
+			Array.from({ length: starCount }, (_, index) => {
 				// Squared skew biases stars toward the bottom, where the glow lives.
-				const r = Math.random();
+				const r = seededUnit(index, 1);
+				const sizeRoll = seededUnit(index, 3);
 				return {
-					left: `${Math.random() * 100}%`,
+					left: `${seededUnit(index, 2) * 100}%`,
 					top: `${100 - (1 - r * r) * 45}%`,
-					size: Math.random() < 0.15 ? 3 : Math.random() < 0.5 ? 2 : 1,
-					delay: `${Math.random() * 4}s`,
-					duration: `${1.5 + Math.random() * 3.5}s`,
-					opacity: 0.3 + Math.random() * 0.6,
+					size: sizeRoll < 0.14 ? 4 : sizeRoll < 0.52 ? 3 : 2,
+					delay: `${seededUnit(index, 4) * -5}s`,
+					duration: `${3.5 + seededUnit(index, 5) * 3.5}s`,
+					opacity: 0.35 + seededUnit(index, 6) * 0.6,
+					color:
+						seededUnit(index, 7) > 0.78
+							? "var(--brand-cyan)"
+							: "color-mix(in oklab, white 92%, var(--brand-lilac))",
 				};
 			}),
 		[starCount],
 	);
 
 	return (
-		<div className="pointer-events-none absolute inset-0 overflow-hidden">
-			{BLOBS.map(([position, gradient, duration, delay], idx) => (
+		<div
+			aria-hidden="true"
+			className="pointer-events-none absolute inset-0 overflow-hidden"
+		>
+			<div
+				className="aurora-horizon absolute inset-x-[-8%] bottom-[-3%] h-[40%] opacity-60 blur-[64px]"
+				style={{
+					background:
+						"linear-gradient(90deg, color-mix(in oklab, var(--brand-lilac) 58%, transparent), color-mix(in oklab, var(--brand-magenta) 62%, transparent) 42%, color-mix(in oklab, var(--brand-periwinkle) 72%, transparent) 78%, color-mix(in oklab, var(--brand-cyan) 58%, transparent))",
+				}}
+			/>
+			<div
+				className="aurora-current absolute bottom-[3%] left-[-45%] h-[30%] w-[125%] opacity-50 blur-[46px]"
+				style={{
+					animationDelay: "-2s",
+					animationDuration: "9s",
+					background:
+						"linear-gradient(105deg, transparent 12%, color-mix(in oklab, var(--brand-magenta) 66%, transparent) 38%, color-mix(in oklab, var(--brand-periwinkle) 72%, transparent) 58%, transparent 82%)",
+				}}
+			/>
+			<div
+				className="aurora-current aurora-current-reverse absolute bottom-[-5%] right-[-42%] h-[34%] w-[120%] opacity-45 blur-[52px]"
+				style={{
+					animationDelay: "-6s",
+					animationDuration: "12s",
+					background:
+						"linear-gradient(75deg, transparent 10%, color-mix(in oklab, var(--brand-cyan) 62%, transparent) 42%, color-mix(in oklab, var(--brand-violet) 70%, transparent) 64%, transparent 88%)",
+				}}
+			/>
+			{BLOBS.map((blob) => (
 				<div
-					key={`blob${idx}`}
-					className={`absolute blur-3xl animate-[aurora-drift_linear_infinite] ${position}`}
+					key={blob.id}
+					className={`aurora-motion absolute blur-[64px] ${blob.reverse ? "aurora-motion-reverse" : ""} ${blob.position}`}
 					style={{
-						background: gradient,
-						animationDuration: duration,
-						animationDelay: delay,
+						background: blob.gradient,
+						animationDuration: blob.duration,
+						animationDelay: blob.delay,
 					}}
 				/>
 			))}
-			{stars.map((s, idx) => (
+			{stars.map((s) => (
 				<span
-					key={`star${idx}`}
-					className="absolute rounded-none bg-[#b8f3ee] animate-[aurora-twinkle_ease-in-out_infinite]"
+					key={`${s.left}-${s.top}`}
+					className="aurora-star absolute rounded-[1px]"
 					style={{
 						left: s.left,
 						top: s.top,
 						width: s.size,
 						height: s.size,
+						background: s.color,
 						opacity: s.opacity,
 						animationDelay: s.delay,
 						animationDuration: s.duration,

apps/examples/desktop-app/webview/components/ui/markdown-highlighter.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from "vitest";
+import {
+	markdownCodeHighlighter,
+	SUPPORTED_MARKDOWN_LANGUAGES,
+} from "./markdown-highlighter";
+
+function highlight(code: string, language: "typescript") {
+	return new Promise<
+		NonNullable<ReturnType<typeof markdownCodeHighlighter.highlight>>
+	>((resolve) => {
+		const immediate = markdownCodeHighlighter.highlight(
+			{ code, language, themes: ["github-light", "github-dark"] },
+			resolve,
+		);
+		if (immediate) resolve(immediate);
+	});
+}
+
+describe("markdownCodeHighlighter", () => {
+	test("keeps the syntax bundle to the shared supported language set", () => {
+		expect(SUPPORTED_MARKDOWN_LANGUAGES).toEqual([
+			"bash",
+			"css",
+			"diff",
+			"html",
+			"javascript",
+			"json",
+			"jsonc",
+			"jsx",
+			"markdown",
+			"python",
+			"shellscript",
+			"tsx",
+			"typescript",
+			"yaml",
+		]);
+		expect(markdownCodeHighlighter.supportsLanguage("ts")).toBe(true);
+		expect(markdownCodeHighlighter.supportsLanguage("rust")).toBe(false);
+	});
+
+	test("loads a supported grammar and returns themed tokens", async () => {
+		const result = await highlight("const answer: number = 42;", "typescript");
+
+		expect(
+			result.tokens
+				.flat()
+				.map((token) => token.content)
+				.join(""),
+		).toBe("const answer: number = 42;");
+		expect(result.tokens.flat().some((token) => token.htmlStyle?.color)).toBe(
+			true,
+		);
+	});
+});

apps/examples/desktop-app/webview/components/ui/markdown-highlighter.ts

@@ -0,0 +1,237 @@
+import type {
+	HighlighterCore,
+	LanguageRegistration,
+	ThemeRegistration,
+} from "shiki/core";
+import type { CodeHighlighterPlugin } from "streamdown";
+
+type HighlightResult = NonNullable<
+	ReturnType<CodeHighlighterPlugin["highlight"]>
+>;
+
+export const SUPPORTED_MARKDOWN_LANGUAGES = [
+	"bash",
+	"css",
+	"diff",
+	"html",
+	"javascript",
+	"json",
+	"jsonc",
+	"jsx",
+	"markdown",
+	"python",
+	"shellscript",
+	"tsx",
+	"typescript",
+	"yaml",
+] as const;
+
+type SupportedMarkdownLanguage = (typeof SUPPORTED_MARKDOWN_LANGUAGES)[number];
+
+const SUPPORTED_LANGUAGE_SET = new Set<string>(SUPPORTED_MARKDOWN_LANGUAGES);
+
+const LANGUAGE_ALIASES: Record<string, SupportedMarkdownLanguage> = {
+	cjs: "javascript",
+	console: "shellscript",
+	htm: "html",
+	js: "javascript",
+	json5: "jsonc",
+	md: "markdown",
+	mjs: "javascript",
+	py: "python",
+	sh: "shellscript",
+	shell: "shellscript",
+	ts: "typescript",
+	yml: "yaml",
+};
+
+const LANGUAGE_LOADERS: Record<
+	SupportedMarkdownLanguage,
+	() => Promise<LanguageRegistration[]>
+> = {
+	bash: () => import("@shikijs/langs/bash").then((module) => module.default),
+	css: () => import("@shikijs/langs/css").then((module) => module.default),
+	diff: () => import("@shikijs/langs/diff").then((module) => module.default),
+	html: () => import("@shikijs/langs/html").then((module) => module.default),
+	javascript: () =>
+		import("@shikijs/langs/javascript").then((module) => module.default),
+	json: () => import("@shikijs/langs/json").then((module) => module.default),
+	jsonc: () => import("@shikijs/langs/jsonc").then((module) => module.default),
+	jsx: () => import("@shikijs/langs/jsx").then((module) => module.default),
+	markdown: () =>
+		import("@shikijs/langs/markdown").then((module) => module.default),
+	python: () =>
+		import("@shikijs/langs/python").then((module) => module.default),
+	shellscript: () =>
+		import("@shikijs/langs/shellscript").then((module) => module.default),
+	tsx: () => import("@shikijs/langs/tsx").then((module) => module.default),
+	typescript: () =>
+		import("@shikijs/langs/typescript").then((module) => module.default),
+	yaml: () => import("@shikijs/langs/yaml").then((module) => module.default),
+};
+
+const LIGHT_THEME = "github-light";
+const DARK_THEME = "github-dark";
+const MAX_CACHED_RESULTS = 256;
+
+let highlighterPromise: Promise<HighlighterCore> | undefined;
+let themesPromise: Promise<void> | undefined;
+const languagePromises = new Map<SupportedMarkdownLanguage, Promise<void>>();
+const resultCache = new Map<string, HighlightResult>();
+const pendingHighlights = new Map<string, Promise<HighlightResult>>();
+const loggedFailures = new Set<string>();
+
+function normalizeLanguage(language: string): SupportedMarkdownLanguage | null {
+	const normalized = language.trim().toLowerCase();
+	if (!normalized) return null;
+	const aliased = LANGUAGE_ALIASES[normalized] ?? normalized;
+	return SUPPORTED_LANGUAGE_SET.has(aliased)
+		? (aliased as SupportedMarkdownLanguage)
+		: null;
+}
+
+function getHighlighter(): Promise<HighlighterCore> {
+	if (!highlighterPromise) {
+		highlighterPromise = Promise.all([
+			import("shiki/core"),
+			import("shiki/engine/javascript"),
+		]).then(([core, engine]) =>
+			core.createHighlighterCore({
+				engine: engine.createJavaScriptRegexEngine({ forgiving: true }),
+			}),
+		);
+	}
+	return highlighterPromise;
+}
+
+function ensureThemes(highlighter: HighlighterCore): Promise<void> {
+	if (!themesPromise) {
+		themesPromise = Promise.all([
+			import("@shikijs/themes/github-light").then((module) => module.default),
+			import("@shikijs/themes/github-dark").then((module) => module.default),
+		]).then((themes: ThemeRegistration[]) => highlighter.loadTheme(...themes));
+	}
+	return themesPromise;
+}
+
+function ensureLanguage(
+	highlighter: HighlighterCore,
+	language: SupportedMarkdownLanguage,
+): Promise<void> {
+	const existing = languagePromises.get(language);
+	if (existing) return existing;
+
+	const loading = LANGUAGE_LOADERS[language]().then((registrations) =>
+		highlighter.loadLanguage(...registrations),
+	);
+	languagePromises.set(language, loading);
+	return loading;
+}
+
+function rawHighlight(code: string): HighlightResult {
+	return {
+		bg: "transparent",
+		fg: "inherit",
+		tokens: code.split("\n").map((line) =>
+			line
+				? [
+						{
+							bgColor: "transparent",
+							color: "inherit",
+							content: line,
+							htmlStyle: {},
+							offset: 0,
+						},
+					]
+				: [],
+		),
+	};
+}
+
+function cacheResult(key: string, result: HighlightResult): void {
+	resultCache.delete(key);
+	resultCache.set(key, result);
+	if (resultCache.size <= MAX_CACHED_RESULTS) return;
+
+	const oldestKey = resultCache.keys().next().value;
+	if (oldestKey !== undefined) resultCache.delete(oldestKey);
+}
+
+function reportHighlightFailure(
+	language: SupportedMarkdownLanguage,
+	error: unknown,
+): void {
+	if (loggedFailures.has(language)) return;
+	loggedFailures.add(language);
+	console.warn(
+		`Syntax highlighting unavailable for ${language}; rendering plain code.`,
+		error,
+	);
+}
+
+function loadHighlight(
+	code: string,
+	language: SupportedMarkdownLanguage,
+): Promise<HighlightResult> {
+	const cacheKey = `${language}\0${code}`;
+	const cached = resultCache.get(cacheKey);
+	if (cached) return Promise.resolve(cached);
+
+	const pending = pendingHighlights.get(cacheKey);
+	if (pending) return pending;
+
+	const loading = getHighlighter()
+		.then(async (highlighter) => {
+			await ensureThemes(highlighter);
+			await ensureLanguage(highlighter, language);
+			const result = highlighter.codeToTokens(code, {
+				lang: language,
+				themes: {
+					dark: DARK_THEME,
+					light: LIGHT_THEME,
+				},
+			});
+			return {
+				bg: result.bg,
+				fg: result.fg,
+				rootStyle: result.rootStyle,
+				tokens: result.tokens,
+			} satisfies HighlightResult;
+		})
+		.catch((error: unknown) => {
+			reportHighlightFailure(language, error);
+			return rawHighlight(code);
+		})
+		.then((result) => {
+			cacheResult(cacheKey, result);
+			return result;
+		})
+		.finally(() => {
+			pendingHighlights.delete(cacheKey);
+		});
+
+	pendingHighlights.set(cacheKey, loading);
+	return loading;
+}
+
+export const markdownCodeHighlighter = {
+	getSupportedLanguages: () => [...SUPPORTED_MARKDOWN_LANGUAGES],
+	getThemes: () => [LIGHT_THEME, DARK_THEME],
+	highlight: ({ code, language }, callback) => {
+		const normalizedLanguage = normalizeLanguage(language);
+		if (!normalizedLanguage) return rawHighlight(code);
+
+		const cacheKey = `${normalizedLanguage}\0${code}`;
+		const cached = resultCache.get(cacheKey);
+		if (cached) return cached;
+
+		const loading = loadHighlight(code, normalizedLanguage);
+		if (callback) {
+			void loading.then((result) => callback(result));
+		}
+		return null;
+	},
+	name: "shiki",
+	supportsLanguage: (language) => normalizeLanguage(language) !== null,
+	type: "code-highlighter",
+} satisfies CodeHighlighterPlugin;

apps/examples/desktop-app/webview/components/ui/markdown.interactions.test.tsx

@@ -0,0 +1,208 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { MarkdownLinkSafetyModal, MemoizedMarkdown } from "./markdown";
+
+const originalClipboard = Object.getOwnPropertyDescriptor(
+	navigator,
+	"clipboard",
+);
+
+let writeText: ReturnType<typeof vi.fn>;
+let openWindow: ReturnType<typeof vi.fn<typeof window.open>>;
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+	Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	writeText = vi.fn().mockResolvedValue(undefined);
+	Object.defineProperty(navigator, "clipboard", {
+		configurable: true,
+		value: { writeText },
+	});
+	openWindow = vi.fn<typeof window.open>(() => null);
+	vi.spyOn(window, "open").mockImplementation(openWindow);
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	vi.restoreAllMocks();
+	if (originalClipboard) {
+		Object.defineProperty(navigator, "clipboard", originalClipboard);
+	} else {
+		Reflect.deleteProperty(navigator, "clipboard");
+	}
+});
+
+async function renderMarkdown(
+	props: Parameters<typeof MemoizedMarkdown>[0],
+): Promise<void> {
+	await act(async () => root.render(<MemoizedMarkdown {...props} />));
+}
+
+async function click(element: Element): Promise<void> {
+	await act(async () => {
+		element.dispatchEvent(
+			new MouseEvent("click", { bubbles: true, cancelable: true }),
+		);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+	});
+}
+
+async function dispatchMouseEvent(
+	element: Element,
+	type: "auxclick" | "contextmenu",
+	button: number,
+): Promise<void> {
+	await act(async () => {
+		element.dispatchEvent(
+			new MouseEvent(type, { bubbles: true, button, cancelable: true }),
+		);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+	});
+}
+
+function getButton(label: string): HTMLButtonElement {
+	const button = [
+		...document.querySelectorAll<HTMLButtonElement>("button"),
+	].find((candidate) => candidate.textContent?.trim() === label);
+	expect(button).toBeDefined();
+	return button as HTMLButtonElement;
+}
+
+describe("MemoizedMarkdown interactions", () => {
+	test("confirms and closes an external link dialog exactly once", async () => {
+		const onClose = vi.fn();
+		const onConfirm = vi.fn();
+		await act(async () => {
+			root.render(
+				<MarkdownLinkSafetyModal
+					isOpen
+					onClose={onClose}
+					onConfirm={onConfirm}
+					url="https://example.com/review"
+				/>,
+			);
+		});
+
+		await click(getButton("Open link"));
+		await vi.waitFor(() => {
+			expect(onConfirm).toHaveBeenCalledOnce();
+			expect(onClose).toHaveBeenCalledOnce();
+		});
+	});
+
+	test("requires confirmation before opening an external link", async () => {
+		const url = "https://example.com/review?source=cline";
+		await renderMarkdown({ content: `[Review docs](${url})` });
+		const link = await vi.waitFor(() => {
+			const renderedLink = container.querySelector<HTMLElement>(
+				'[data-streamdown="link"]',
+			);
+			expect(renderedLink).not.toBeNull();
+			return renderedLink as HTMLElement;
+		});
+		expect(link.tagName).toBe("A");
+		expect(link.getAttribute("href")).toBe("#confirm-external-link");
+
+		await dispatchMouseEvent(link, "contextmenu", 2);
+		expect(openWindow).not.toHaveBeenCalled();
+		expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+
+		await dispatchMouseEvent(link, "auxclick", 1);
+		await vi.waitFor(() => {
+			expect(document.querySelector('[role="alertdialog"]')).not.toBeNull();
+		});
+		await click(getButton("Cancel"));
+
+		await click(link);
+		await vi.waitFor(() => {
+			expect(document.querySelector('[role="alertdialog"]')).not.toBeNull();
+			expect(document.body.textContent).toContain(url);
+		});
+
+		await click(getButton("Cancel"));
+		await vi.waitFor(() => {
+			expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+		});
+		expect(openWindow).not.toHaveBeenCalled();
+
+		await click(link);
+		await vi.waitFor(() => {
+			expect(document.querySelector('[role="alertdialog"]')).not.toBeNull();
+		});
+		await click(getButton("Open link"));
+
+		expect(openWindow).toHaveBeenCalledTimes(1);
+		expect(openWindow).toHaveBeenCalledWith(url, "_blank", "noreferrer");
+		await vi.waitFor(() => {
+			expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+		});
+	});
+
+	test("keeps same-document links navigable without a confirmation", async () => {
+		await renderMarkdown({ content: "[Details](#details)" });
+		const link = container.querySelector<HTMLAnchorElement>(
+			'[data-streamdown="link"]',
+		);
+
+		expect(link?.getAttribute("href")).toBe("#details");
+		await click(link as HTMLAnchorElement);
+		expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+		expect(openWindow).not.toHaveBeenCalled();
+	});
+
+	test("copies fenced code through the Clipboard API", async () => {
+		const source = "const answer = 42;";
+		await renderMarkdown({
+			content: `\`\`\`text\n${source}\n\`\`\``,
+		});
+		const copyButton = await vi.waitFor(() => {
+			const button = container.querySelector<HTMLButtonElement>(
+				'[data-streamdown="code-block-copy-button"]',
+			);
+			expect(button).not.toBeNull();
+			return button as HTMLButtonElement;
+		});
+
+		await click(copyButton);
+		await vi.waitFor(() => {
+			expect(writeText).toHaveBeenCalledWith(`${source}\n`);
+		});
+	});
+
+	test("rerenders incomplete streaming Markdown as completed static Markdown", async () => {
+		await renderMarkdown({
+			content: "```text\nconst answer =",
+			streaming: true,
+		});
+
+		await vi.waitFor(() => {
+			const codeBlock = container.querySelector(
+				'[data-streamdown="code-block"]',
+			);
+			expect(codeBlock?.getAttribute("data-incomplete")).toBe("true");
+		});
+
+		await renderMarkdown({
+			content: "```text\nconst answer = 42;\n```\n\nCompleted.",
+			streaming: false,
+		});
+
+		await vi.waitFor(() => {
+			const codeBlock = container.querySelector(
+				'[data-streamdown="code-block"]',
+			);
+			expect(codeBlock).not.toBeNull();
+			expect(codeBlock?.getAttribute("data-incomplete")).toBeNull();
+			expect(container.textContent).toContain("const answer = 42;");
+			expect(container.textContent).toContain("Completed.");
+		});
+	});
+});

apps/examples/desktop-app/webview/components/ui/markdown.test.tsx

@@ -0,0 +1,105 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test } from "vitest";
+import { MemoizedMarkdown } from "./markdown";
+
+describe("MemoizedMarkdown", () => {
+	test("renders structured GFM content and blocks remote images", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown
+				content={`# Review
+
+| Surface | Status |
+| --- | --- |
+| Code | Ready |
+
+\`\`\`typescript
+const ready = true;
+\`\`\`
+
+![remote image](https://example.com/tracker.png)`}
+			/>,
+		);
+
+		expect(html).toContain('data-streamdown="heading-1"');
+		expect(html).toContain('data-streamdown="table-wrapper"');
+		expect(html).toContain('data-streamdown="code-block"');
+		expect(html).toContain('data-streamdown="blocked-image"');
+		expect(html).toContain("External image blocked for privacy");
+		expect(html).not.toContain("<img");
+	});
+
+	test("renders app-local images", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown
+				content={`![local](/images/local.png)
+
+![second local](/images/second-local.png)`}
+			/>,
+		);
+
+		expect(html.match(/<img/g)).toHaveLength(2);
+		expect(html).toContain('src="/images/local.png"');
+		expect(html).toContain('src="/images/second-local.png"');
+		expect(html).not.toContain('data-streamdown="blocked-image"');
+	});
+
+	test("repairs an unfinished code fence while streaming", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown
+				content={"```typescript\nconst stillStreaming = true;"}
+				streaming
+			/>,
+		);
+
+		expect(html).toContain('data-streamdown="code-block"');
+		expect(html).toContain("stillStreaming");
+	});
+
+	test("routes external links through confirmation controls", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown content="[Review](https://example.com/review)" />,
+		);
+
+		expect(html).toContain('data-streamdown="link"');
+		expect(html).toContain("Review");
+		expect(html).toContain('href="#confirm-external-link"');
+		expect(html).toContain('aria-haspopup="dialog"');
+		expect(html).not.toContain('href="https://example.com/review"');
+	});
+
+	test("leaves app-local and fragment links navigable", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown content="[Details](#details) [Home](/)" />,
+		);
+
+		expect(html).toContain('href="#details"');
+		expect(html).toContain('href="/"');
+		expect(html).not.toContain('aria-haspopup="dialog"');
+	});
+
+	test("blocks scheme-less hostnames before they reach link rendering", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown content="[Review](example.com/path)" />,
+		);
+
+		expect(html).toContain("Review");
+		expect(html).toContain("blocked");
+		expect(html).not.toContain("<a");
+		expect(html).not.toContain('data-streamdown="link"');
+	});
+
+	test("does not expose unsafe script URLs or raw scripts", () => {
+		const html = renderToStaticMarkup(
+			<MemoizedMarkdown
+				content={
+					'[unsafe](javascript:alert("no"))\n\n![embedded](data:image/png;base64,iVBORw0KGgo=)\n\n![file](file:///etc/passwd)\n\n<script>window.pwned = true</script>'
+				}
+			/>,
+		);
+
+		expect(html).not.toContain("javascript:");
+		expect(html).not.toContain("data:image");
+		expect(html).not.toContain("file:///etc/passwd");
+		expect(html).not.toContain("<script");
+	});
+});

apps/examples/desktop-app/webview/components/ui/markdown.tsx

@@ -1,45 +1,216 @@
-import { marked } from "marked";
-import { memo, useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { cjk } from "@streamdown/cjk";
+import type { ComponentProps, MouseEvent } from "react";
+import { memo, useState } from "react";
+import {
+	type Components,
+	type ControlsConfig,
+	type ExtraProps,
+	type LinkSafetyModalProps,
+	Streamdown,
+} from "streamdown";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "./alert-dialog";
+import { markdownCodeHighlighter } from "./markdown-highlighter";
 
-const MemoizedMarkdownBlock = memo(
-	({ content }: { content: string }) => {
-		return (
-			<div className="markdown">
-				<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-			</div>
-		);
-	},
-	(prevProps, nextProps) => {
-		if (prevProps.content !== nextProps.content) return false;
-		return true;
-	},
-);
+const streamdownPlugins = { cjk, code: markdownCodeHighlighter };
+const streamdownControls = {
+	code: { copy: true, download: false },
+	mermaid: false,
+	table: false,
+} satisfies ControlsConfig;
 
-MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
-
-export function parseMarkdownIntoBlocks(markdown: string): string[] {
-	const tokens = marked.lexer(markdown);
-	return tokens.map((token) => token.raw);
+export function MarkdownLinkSafetyModal({
+	isOpen,
+	onClose,
+	onConfirm,
+	url,
+}: LinkSafetyModalProps) {
+	return (
+		<AlertDialog
+			onOpenChange={(open) => {
+				if (!open) onClose();
+			}}
+			open={isOpen}
+		>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Open external link?</AlertDialogTitle>
+					<AlertDialogDescription>
+						You are about to leave Cline and visit this address.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<div className="max-h-32 overflow-y-auto wrap-break-word rounded-md bg-muted p-3 font-mono text-sm">
+					{url}
+				</div>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction onClick={onConfirm}>Open link</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 }
 
-export const MemoizedMarkdown = memo(
-	({ content, id }: { content: string; id: string }) => {
-		const blocks = useMemo(() => parseMarkdownIntoBlocks(content), [content]);
-		const occurrences = new Map<string, number>();
+type MarkdownLinkProps = ComponentProps<"a"> & ExtraProps;
 
-		return blocks.map((block) => {
-			const occurrence = (occurrences.get(block) ?? 0) + 1;
-			occurrences.set(block, occurrence);
-			return (
-				<MemoizedMarkdownBlock
-					content={block}
-					key={`${id}-block_${occurrence}-${block}`}
-				/>
-			);
-		});
-	},
+function SafeMarkdownLink({
+	children,
+	className,
+	href,
+	node: _node,
+	rel: _rel,
+	target: _target,
+	title,
+	...props
+}: MarkdownLinkProps) {
+	const [isOpen, setIsOpen] = useState(false);
+	const isIncomplete = href === "streamdown:incomplete-link";
+	const url = isIncomplete ? undefined : href;
+
+	if (!url) {
+		return (
+			<span
+				className={className}
+				data-incomplete={isIncomplete}
+				data-streamdown="link"
+			>
+				{children}
+			</span>
+		);
+	}
+
+	const isAppLink =
+		url.startsWith("#") ||
+		(url.startsWith("/") && !url.startsWith("//")) ||
+		url.startsWith("./") ||
+		url.startsWith("../") ||
+		(!/^[a-z][a-z\d+.-]*:/i.test(url) && !url.startsWith("//"));
+
+	if (isAppLink) {
+		return (
+			<a
+				{...props}
+				className={`wrap-anywhere font-medium text-primary underline ${className ?? ""}`}
+				data-streamdown="link"
+				href={url}
+				title={title}
+			>
+				{children}
+			</a>
+		);
+	}
+
+	const openConfirmation = (event: MouseEvent<HTMLAnchorElement>) => {
+		event.preventDefault();
+		setIsOpen(true);
+	};
+	const confirmMiddleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+		if (event.button === 1) openConfirmation(event);
+	};
+
+	return (
+		<>
+			{/* biome-ignore lint/a11y/useValidAnchor: External Markdown retains native link semantics while confirmation withholds the live destination. */}
+			<a
+				{...props}
+				aria-haspopup="dialog"
+				className={`wrap-anywhere font-medium text-primary underline ${className ?? ""}`}
+				data-streamdown="link"
+				href="#confirm-external-link"
+				onAuxClick={confirmMiddleClick}
+				onClick={openConfirmation}
+				title={title ?? url}
+			>
+				{children}
+			</a>
+			<MarkdownLinkSafetyModal
+				isOpen={isOpen}
+				onClose={() => setIsOpen(false)}
+				onConfirm={() => window.open(url, "_blank", "noreferrer")}
+				url={url}
+			/>
+		</>
+	);
+}
+
+type MarkdownImageProps =
+	| (ComponentProps<"img"> & ExtraProps)
+	| (Record<string, unknown> & ExtraProps);
+
+const remoteImagePattern = /^(?:https?:)?[\\/]{2}/i;
+
+function isSafeMarkdownImageSource(source: string): boolean {
+	const normalized = source.trim();
+	if (!normalized || remoteImagePattern.test(normalized)) return false;
+
+	// Streamdown's hardened URL policy accepts app-root paths. Keeping the rule
+	// this narrow prevents model-authored Markdown from making hidden requests.
+	return normalized.startsWith("/");
+}
+
+function MarkdownImage({ alt, height, src, title, width }: MarkdownImageProps) {
+	const label = typeof alt === "string" ? alt.trim() : "";
+	const source = typeof src === "string" ? src.trim() : "";
+
+	if (source && isSafeMarkdownImageSource(source)) {
+		return (
+			// biome-ignore lint/performance/noImgElement: Markdown can reference runtime app assets that Next Image cannot statically optimize.
+			<img
+				alt={label}
+				className="my-4 max-w-full rounded-lg"
+				data-streamdown="image"
+				height={typeof height === "number" ? height : undefined}
+				loading="lazy"
+				src={source}
+				title={typeof title === "string" ? title : undefined}
+				width={typeof width === "number" ? width : undefined}
+			/>
+		);
+	}
+
+	return (
+		<span data-streamdown="blocked-image" role="note">
+			External image blocked for privacy{label ? `: ${label}` : ""}
+		</span>
+	);
+}
+
+const markdownComponents = {
+	a: SafeMarkdownLink,
+	img: MarkdownImage,
+} satisfies Components;
+
+export const MemoizedMarkdown = memo(
+	({
+		content,
+		streaming = false,
+	}: {
+		content: string;
+		streaming?: boolean;
+	}) => (
+		<Streamdown
+			className="cline-markdown"
+			components={markdownComponents}
+			controls={streamdownControls}
+			dir="auto"
+			isAnimating={streaming}
+			lineNumbers
+			mode={streaming ? "streaming" : "static"}
+			normalizeHtmlIndentation
+			parseIncompleteMarkdown={streaming}
+			plugins={streamdownPlugins}
+		>
+			{content}
+		</Streamdown>
+	),
 );
 
 MemoizedMarkdown.displayName = "MemoizedMarkdown";

apps/examples/desktop-app/webview/components/ui/sidebar.tsx

@@ -26,7 +26,7 @@ import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = 256;
+const SIDEBAR_WIDTH = 240;
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -313,8 +313,8 @@ function Sidebar({
 				className={cn(
 					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
 					side === "left"
-						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+						? "left-0 group-data-[collapsible=offcanvas]:-left-(--sidebar-width)"
+						: "right-0 group-data-[collapsible=offcanvas]:-right-(--sidebar-width)",
 					// Adjust the padding for floating and inset variants.
 					variant === "floating" || variant === "inset"
 						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"

apps/examples/desktop-app/webview/components/ui/slider.tsx

@@ -26,6 +26,7 @@ function Slider({
 
 	return (
 		<SliderPrimitive.Root
+			data-interactive=""
 			data-slot="slider"
 			defaultValue={defaultValue}
 			value={value}

apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.test.tsx

@@ -0,0 +1,209 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { WorkspaceProvider } from "@/contexts/workspace-context";
+import type { ChatSessionStatus } from "@/lib/chat-schema";
+import { ChatInputBar } from "./chat-input-bar";
+
+const { loadProviderModelCatalogMock, loadProviderModelsMock } = vi.hoisted(
+	() => ({
+		loadProviderModelCatalogMock: vi.fn(),
+		loadProviderModelsMock: vi.fn(),
+	}),
+);
+
+vi.mock("@/lib/provider-model-catalog", () => ({
+	loadProviderModelCatalog: loadProviderModelCatalogMock,
+	loadProviderModels: loadProviderModelsMock,
+}));
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+	Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+	loadProviderModelCatalogMock.mockReset().mockResolvedValue({
+		providers: [],
+		enabledProviderIds: ["cline"],
+		providerModels: { cline: ["test-model"] },
+		providerReasoningModels: { cline: [] },
+	});
+	loadProviderModelsMock.mockReset().mockResolvedValue([]);
+	HTMLElement.prototype.scrollIntoView = vi.fn();
+	HTMLElement.prototype.hasPointerCapture = vi.fn(() => false);
+	HTMLElement.prototype.setPointerCapture = vi.fn();
+	HTMLElement.prototype.releasePointerCapture = vi.fn();
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	vi.restoreAllMocks();
+});
+
+describe("ChatInputBar", () => {
+	it("preserves an explicit High selection across capability and status updates", async () => {
+		const onReasoningChange = vi.fn();
+		const render = async (status: ChatSessionStatus) => {
+			await act(async () => {
+				root.render(
+					<WorkspaceProvider
+						value={{
+							workspaceRoot: "/workspace/cline",
+							workspaces: ["/workspace/cline"],
+							listWorkspaces: vi.fn(async () => ["/workspace/cline"]),
+							refreshWorkspaces: vi.fn(async () => undefined),
+							switchWorkspace: vi.fn(async () => true),
+							pickWorkspaceDirectory: vi.fn(async () => null),
+						}}
+					>
+						<ChatInputBar
+							attachments={[]}
+							gitBranch="main"
+							mode="act"
+							model="test-model"
+							onAbort={vi.fn()}
+							onAttachFiles={vi.fn()}
+							onEditPromptInQueue={vi.fn()}
+							onListGitBranches={vi.fn(async () => ({
+								current: "main",
+								branches: ["main"],
+							}))}
+							onModeToggle={vi.fn()}
+							onModelChange={vi.fn()}
+							onPromptInputChange={vi.fn()}
+							onProviderChange={vi.fn()}
+							onReasoningChange={onReasoningChange}
+							onRemoveAttachment={vi.fn()}
+							onSend={vi.fn()}
+							onSteerPromptInQueue={vi.fn()}
+							onSwitchGitBranch={vi.fn(async () => true)}
+							onUndoPromptInQueue={vi.fn()}
+							promptInput=""
+							promptsInQueue={[]}
+							provider="cline"
+							reasoningEffort="high"
+							status={status}
+							summary={{ toolCalls: 0, tokensIn: 0, tokensOut: 0 }}
+							thinking
+						/>
+					</WorkspaceProvider>,
+				);
+				await Promise.resolve();
+			});
+		};
+
+		await render("idle");
+		await vi.waitFor(() => {
+			const trigger = container.querySelector<HTMLButtonElement>(
+				'[aria-label="Thinking level"]',
+			);
+			expect(trigger?.textContent).toContain("High");
+			expect(trigger?.disabled).toBe(true);
+		});
+		await render("starting");
+		expect(container.querySelector('[aria-label="Stop agent"]')).toBeNull();
+		await render("running");
+		expect(container.querySelector('[aria-label="Stop agent"]')).not.toBeNull();
+
+		expect(onReasoningChange).not.toHaveBeenCalled();
+		const workspaceTrigger = container.querySelector("#git-branch-btn");
+		expect(workspaceTrigger?.parentElement?.parentElement?.className).toContain(
+			"overflow-visible",
+		);
+		expect(
+			workspaceTrigger?.parentElement?.parentElement?.className,
+		).not.toContain("truncate");
+	});
+
+	it("selects High from the supported model thinking menu", async () => {
+		loadProviderModelCatalogMock.mockResolvedValue({
+			providers: [],
+			enabledProviderIds: ["cline"],
+			providerModels: { cline: ["test-model"] },
+			providerReasoningModels: { cline: ["test-model"] },
+		});
+		const onReasoningChange = vi.fn();
+		await act(async () => {
+			root.render(
+				<WorkspaceProvider
+					value={{
+						workspaceRoot: "/workspace/cline",
+						workspaces: ["/workspace/cline"],
+						listWorkspaces: vi.fn(async () => ["/workspace/cline"]),
+						refreshWorkspaces: vi.fn(async () => undefined),
+						switchWorkspace: vi.fn(async () => true),
+						pickWorkspaceDirectory: vi.fn(async () => null),
+					}}
+				>
+					<ChatInputBar
+						attachments={[]}
+						gitBranch="main"
+						mode="act"
+						model="test-model"
+						onAbort={vi.fn()}
+						onAttachFiles={vi.fn()}
+						onEditPromptInQueue={vi.fn()}
+						onListGitBranches={vi.fn(async () => ({
+							current: "main",
+							branches: ["main"],
+						}))}
+						onModeToggle={vi.fn()}
+						onModelChange={vi.fn()}
+						onPromptInputChange={vi.fn()}
+						onProviderChange={vi.fn()}
+						onReasoningChange={onReasoningChange}
+						onRemoveAttachment={vi.fn()}
+						onSend={vi.fn()}
+						onSteerPromptInQueue={vi.fn()}
+						onSwitchGitBranch={vi.fn(async () => true)}
+						onUndoPromptInQueue={vi.fn()}
+						promptInput=""
+						promptsInQueue={[]}
+						provider="cline"
+						reasoningEffort="low"
+						status="idle"
+						summary={{ toolCalls: 0, tokensIn: 0, tokensOut: 0 }}
+						thinking
+					/>
+				</WorkspaceProvider>,
+			);
+		});
+		const trigger = await vi.waitFor(() => {
+			const element = container.querySelector<HTMLButtonElement>(
+				'[aria-label="Thinking level"]',
+			);
+			expect(element?.disabled).toBe(false);
+			return element as HTMLButtonElement;
+		});
+		await act(async () => {
+			trigger.dispatchEvent(
+				new MouseEvent("pointerdown", { bubbles: true, cancelable: true }),
+			);
+			trigger.click();
+		});
+		const highOption = await vi.waitFor(() => {
+			const element = [
+				...document.querySelectorAll<HTMLElement>('[role="option"]'),
+			].find((option) => option.textContent?.includes("High"));
+			expect(element).toBeDefined();
+			return element as HTMLElement;
+		});
+		await act(async () => {
+			highOption.dispatchEvent(
+				new MouseEvent("pointerup", { bubbles: true, cancelable: true }),
+			);
+			highOption.click();
+		});
+
+		expect(onReasoningChange).toHaveBeenCalledWith({
+			thinking: true,
+			reasoningEffort: "high",
+		});
+	});
+});

apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.tsx

@@ -7,22 +7,19 @@ import {
 	ChevronDown,
 	CircleStop,
 	Coins,
-	Mic,
 	Paperclip,
 	Pencil,
-	RotateCcw,
 	Undo2,
 	X,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
-	Combobox,
-	ComboboxContent,
-	ComboboxEmpty,
-	ComboboxInput,
-	ComboboxItem,
-	ComboboxList,
-} from "@/components/ui/combobox";
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { useWorkspace } from "@/contexts/workspace-context";
 import type { PromptInQueue } from "@/hooks/chat-session/types";
 import type { ChatSessionConfig, ChatSessionStatus } from "@/lib/chat-schema";
@@ -37,6 +34,7 @@ import {
 	loadProviderModels,
 } from "@/lib/provider-model-catalog";
 import { cn } from "@/lib/utils";
+import { SearchableSelect } from "./searchable-select";
 import { WorkspaceSelector } from "./workspace-selector";
 
 type ActiveMention = {
@@ -188,6 +186,7 @@ function getActiveSlash(input: string, cursor: number): ActiveSlash | null {
 }
 
 type ChatInputBarProps = {
+	variant?: "conversation" | "welcome";
 	status: ChatSessionStatus;
 	provider: string;
 	model: string;
@@ -203,12 +202,10 @@ type ChatInputBarProps = {
 	onReasoningChange: (
 		next: Pick<ChatSessionConfig, "thinking" | "reasoningEffort">,
 	) => void;
-	onRefreshGitBranch: () => void;
 	onListGitBranches: () => Promise<{ current: string; branches: string[] }>;
 	onSwitchGitBranch: (branch: string) => Promise<boolean>;
 	onSend: () => void;
 	onAbort: () => void;
-	onReset: () => void;
 	promptsInQueue: PromptInQueue[];
 	attachments: Array<{ id: string; name: string; isImage: boolean }>;
 	onAttachFiles: (files: File[]) => void;
@@ -227,6 +224,7 @@ type ChatInputBarProps = {
 };
 
 export function ChatInputBar({
+	variant = "conversation",
 	status,
 	provider,
 	model,
@@ -240,12 +238,10 @@ export function ChatInputBar({
 	onModelChange,
 	onModeToggle,
 	onReasoningChange,
-	onRefreshGitBranch,
 	onListGitBranches,
 	onSwitchGitBranch,
 	onSend,
 	onAbort,
-	onReset,
 	promptsInQueue,
 	attachments,
 	onAttachFiles,
@@ -264,10 +260,33 @@ export function ChatInputBar({
 	} = useWorkspace();
 	const isBusy =
 		status === "starting" || status === "running" || status === "stopping";
+	const canAbort = status === "running" || status === "stopping";
 	const hasDraft = promptInput.trim().length > 0 || attachments.length > 0;
 
-	const [modelSupportsReasoning, setModelSupportsReasoning] = useState(() =>
-		hasReasoningCapability(FALLBACK_PROVIDER_REASONING_MODELS, provider, model),
+	const [reasoningCapability, setReasoningCapability] = useState<{
+		provider: string;
+		model: string;
+		supported: boolean | null;
+	} | null>(null);
+	const modelSupportsReasoning =
+		reasoningCapability?.provider === provider &&
+		reasoningCapability.model === model
+			? reasoningCapability.supported
+			: null;
+	const handleModelSupportsReasoningChange = useCallback(
+		(supported: boolean | null) => {
+			setReasoningCapability((current) => {
+				if (
+					current?.provider === provider &&
+					current.model === model &&
+					current.supported === supported
+				) {
+					return current;
+				}
+				return { provider, model, supported };
+			});
+		},
+		[model, provider],
 	);
 	const canSend = hasDraft;
 	const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -312,32 +331,50 @@ export function ChatInputBar({
 		() => resolveEffortIndex(thinking, reasoningEffort),
 		[reasoningEffort, thinking],
 	);
-	const effortLabel = modelSupportsReasoning
-		? (EFFORT_LEVELS[effortIndex]?.label ?? "Low")
-		: "None";
-	const handleEffortCycle = useCallback(() => {
-		if (!modelSupportsReasoning) {
-			return;
-		}
-		const nextOption = EFFORT_LEVELS[(effortIndex + 1) % EFFORT_LEVELS.length];
-		if (!nextOption) {
-			return;
-		}
-		onReasoningChange(buildReasoningConfig(nextOption));
-	}, [effortIndex, modelSupportsReasoning, onReasoningChange]);
+	const hasExplicitReasoningSelection =
+		thinking !== undefined || reasoningEffort !== undefined;
+	const effortLabel =
+		!hasExplicitReasoningSelection && modelSupportsReasoning === null
+			? "Reasoning"
+			: !hasExplicitReasoningSelection && modelSupportsReasoning === false
+				? "None"
+				: (EFFORT_LEVELS[effortIndex]?.label ?? "Reasoning");
+	const handleEffortChange = useCallback(
+		(value: string) => {
+			if (modelSupportsReasoning !== true) {
+				return;
+			}
+			const nextOption = EFFORT_LEVELS.find((option) => option.value === value);
+			if (nextOption) {
+				onReasoningChange(buildReasoningConfig(nextOption));
+			}
+		},
+		[modelSupportsReasoning, onReasoningChange],
+	);
 
 	useEffect(() => {
-		if (!modelSupportsReasoning) {
-			if (thinking !== false || reasoningEffort !== undefined) {
-				onReasoningChange({ thinking: false, reasoningEffort: undefined });
-			}
-			return;
-		}
-		if (thinking === undefined && reasoningEffort === undefined) {
+		if (
+			modelSupportsReasoning === true &&
+			thinking === undefined &&
+			reasoningEffort === undefined
+		) {
 			onReasoningChange(buildReasoningConfig(DEFAULT_REASONING_EFFORT));
 		}
 	}, [modelSupportsReasoning, onReasoningChange, reasoningEffort, thinking]);
 
+	useEffect(() => {
+		const input = promptInputRef.current;
+		if (!input) return;
+		if (
+			variant === "conversation" ||
+			(variant === "welcome" &&
+				promptInput.trim().length > 0 &&
+				document.activeElement !== input)
+		) {
+			input.focus();
+		}
+	}, [promptInput, variant]);
+
 	const startQueuedPromptEdit = useCallback((item: PromptInQueue) => {
 		setEditingQueuedPromptId(item.id);
 		setEditingQueuedPromptValue(item.prompt);
@@ -589,9 +626,16 @@ export function ChatInputBar({
 	);
 
 	return (
-		<div className="border-t border-border bg-card">
+		<div
+			className={cn(
+				"bg-card",
+				variant === "welcome"
+					? "overflow-visible rounded-xl border border-border/90 bg-card/90 shadow-[0_24px_80px_-56px_color-mix(in_oklab,var(--primary)_72%,transparent)] backdrop-blur-md"
+					: "border-t border-border bg-card/95 backdrop-blur-sm",
+			)}
+		>
 			{/* Input area */}
-			<div className="px-4 py-3">
+			<div className={cn("px-4 py-3", variant === "welcome" && "pb-2 pt-4")}>
 				{promptsInQueue.length > 0 && (
 					<div className="mb-3 rounded-lg border border-border bg-background/70 p-2">
 						<div className="mb-2 flex items-center justify-between gap-2">
@@ -734,7 +778,11 @@ export function ChatInputBar({
 				)}
 				<div className="relative">
 					{slashOpen && (
-						<div className="absolute inset-x-0 bottom-full z-50 mb-1 max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-xl">
+						<div
+							className="absolute inset-x-0 bottom-full z-50 mb-1 max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-xl"
+							id="slash-command-suggestions"
+							role="listbox"
+						>
 							{filteredSlashCommands.length === 0 ? (
 								<div className="px-3 py-2 text-xs text-muted-foreground">
 									{slashLoading
@@ -745,6 +793,7 @@ export function ChatInputBar({
 								<>
 									{filteredSlashCommands.map((cmd, index) => (
 										<button
+											aria-selected={index === slashSelectedIndex}
 											className={cn(
 												"flex w-full flex-col rounded-md px-3 py-2 text-left text-xs transition-colors",
 												index === slashSelectedIndex
@@ -752,7 +801,9 @@ export function ChatInputBar({
 													: "text-muted-foreground hover:bg-accent hover:text-foreground",
 											)}
 											key={cmd.name}
+											id={`slash-command-option-${index}`}
 											onClick={() => insertSlashCommandItem(cmd.name)}
+											role="option"
 											type="button"
 										>
 											<span className="font-medium">/{cmd.name}</span>
@@ -773,7 +824,11 @@ export function ChatInputBar({
 						</div>
 					)}
 					{mentionOpen && (
-						<div className="absolute inset-x-0 bottom-full z-50 mb-1 max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-xl">
+						<div
+							className="absolute inset-x-0 bottom-full z-50 mb-1 max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-xl"
+							id="mention-file-suggestions"
+							role="listbox"
+						>
 							{mentionFiles.length === 0 ? (
 								<div className="px-3 py-2 text-xs text-muted-foreground">
 									{mentionLoading ? "Searching files..." : "No matching files"}
@@ -782,6 +837,7 @@ export function ChatInputBar({
 								<>
 									{mentionFiles.map((filePath, index) => (
 										<button
+											aria-selected={index === mentionSelectedIndex}
 											className={cn(
 												"block w-full rounded-md px-3 py-2 text-left text-xs transition-colors",
 												index === mentionSelectedIndex
@@ -789,7 +845,9 @@ export function ChatInputBar({
 													: "text-muted-foreground hover:bg-accent hover:text-foreground",
 											)}
 											key={filePath}
+											id={`mention-file-option-${index}`}
 											onClick={() => insertMentionFile(filePath)}
+											role="option"
 											type="button"
 										>
 											{filePath}
@@ -804,8 +862,31 @@ export function ChatInputBar({
 							)}
 						</div>
 					)}
-					<div className="flex items-end gap-2 rounded-lg border border-border bg-background px-3 py-2.5 transition-all focus-within:border-primary/50 focus-within:ring-1 focus-within:ring-primary/20">
+					<div
+						className={cn(
+							"flex items-end gap-2 rounded-lg border border-border bg-background px-3 py-2.5 transition-all focus-within:border-primary/50 focus-within:ring-1 focus-within:ring-primary/20",
+							variant === "welcome" &&
+								"min-h-16 items-start rounded-none border-0 bg-transparent px-0 py-0 focus-within:ring-0",
+						)}
+					>
 						<textarea
+							aria-activedescendant={
+								slashOpen && filteredSlashCommands.length > 0
+									? `slash-command-option-${slashSelectedIndex}`
+									: mentionOpen && mentionFiles.length > 0
+										? `mention-file-option-${mentionSelectedIndex}`
+										: undefined
+							}
+							aria-autocomplete="list"
+							aria-controls={
+								slashOpen
+									? "slash-command-suggestions"
+									: mentionOpen
+										? "mention-file-suggestions"
+										: undefined
+							}
+							aria-expanded={slashOpen || mentionOpen}
+							aria-haspopup="listbox"
 							className="max-h-60 min-h-5 flex-1 resize-none overflow-y-auto bg-transparent text-sm leading-5 text-foreground placeholder:text-muted-foreground outline-none"
 							onChange={(e) => {
 								onPromptInputChange(e.target.value);
@@ -893,15 +974,20 @@ export function ChatInputBar({
 								)
 							}
 							placeholder={
-								isBusy
-									? "Agent is working... submit to queue another message"
-									: "Enter your question or type / for commands or @ for context"
+								variant === "welcome"
+									? "Ask to make changes, @mention files, reference #PRs, or run /commands."
+									: isBusy
+										? "Agent is working... submit to queue another message"
+										: "Enter your question or type / for commands or @ for context"
 							}
 							ref={promptInputRef}
+							role="combobox"
 							rows={
-								promptInputFocused
-									? PROMPT_INPUT_FOCUSED_ROWS
-									: PROMPT_INPUT_COLLAPSED_ROWS
+								variant === "welcome"
+									? 2
+									: promptInputFocused
+										? PROMPT_INPUT_FOCUSED_ROWS
+										: PROMPT_INPUT_COLLAPSED_ROWS
 							}
 							value={promptInput}
 						/>
@@ -916,6 +1002,7 @@ export function ChatInputBar({
 							>
 								{attachment.isImage ? "image:" : "file:"} {attachment.name}
 								<button
+									aria-label={`Remove ${attachment.name}`}
 									className="rounded-sm p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
 									onClick={() => onRemoveAttachment(attachment.id)}
 									type="button"
@@ -928,11 +1015,12 @@ export function ChatInputBar({
 				)}
 			</div>
 
-			{/* Controls row */}
-			<div className="flex items-center justify-between px-4 pb-2">
-				<div className="flex items-center gap-1">
+			{/* Composer settings and submit */}
+			<div className="flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-border px-3 py-2 text-[11px] text-muted-foreground max-[560px]:grid max-[560px]:grid-cols-[auto_auto_minmax(0,1fr)_auto] max-[560px]:items-center">
+				<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2 max-[560px]:contents">
 					<button
-						className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+						aria-label="Attach files"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground max-[560px]:col-start-1 max-[560px]:row-start-1"
 						onClick={() => fileInputRef.current?.click()}
 						type="button"
 					>
@@ -944,97 +1032,137 @@ export function ChatInputBar({
 						multiple
 						onChange={(event) => {
 							const files = Array.from(event.target.files ?? []);
-							if (files.length > 0) {
-								onAttachFiles(files);
-							}
+							if (files.length > 0) onAttachFiles(files);
 							event.currentTarget.value = "";
 						}}
 						ref={fileInputRef}
 						type="file"
 					/>
-
-					<ModelSelector
-						isBusy={isBusy}
-						model={model}
-						onModelChange={onModelChange}
-						onModelSupportsReasoningChange={setModelSupportsReasoning}
-						onProviderChange={onProviderChange}
-						provider={provider}
-					/>
-				</div>
-
-				<div className="flex items-center gap-1">
-					<button
-						className="hidden rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-						type="button"
-					>
-						<Mic className="h-4 w-4" />
-					</button>
-					{isBusy && (
+					<div className="hidden flex shrink-0 items-center rounded-md bg-muted p-0.5 max-[560px]:col-start-2 max-[560px]:row-start-1">
 						<button
-							className="rounded-full bg-foreground p-1.5 text-background hover:bg-foreground/80 transition-colors"
-							onClick={onAbort}
+							aria-pressed={mode === "plan"}
+							className={cn(
+								"rounded px-2 py-1 transition-colors",
+								mode === "plan"
+									? "bg-background text-foreground shadow-xs"
+									: "hover:text-foreground",
+							)}
+							onClick={() => {
+								if (mode !== "plan") onModeToggle();
+							}}
 							type="button"
 						>
-							<CircleStop className="h-4 w-4" />
+							Plan
 						</button>
-					)}
-					{(!isBusy || canSend) && (
 						<button
-							className="rounded-full bg-foreground p-1.5 text-background hover:bg-foreground/80 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-							disabled={!canSend}
-							onClick={onSend}
+							aria-pressed={mode === "act"}
+							className={cn(
+								"rounded px-2 py-1 transition-colors",
+								mode === "act"
+									? "bg-background text-foreground shadow-xs"
+									: "hover:text-foreground",
+							)}
+							onClick={() => {
+								if (mode !== "act") onModeToggle();
+							}}
 							type="button"
 						>
-							<ArrowUp className="h-4 w-4" />
+							Act
 						</button>
-					)}
+					</div>
+					<div className="min-w-0 shrink-0 max-[560px]:col-start-3 max-[560px]:col-end-5 max-[560px]:row-start-1">
+						<ModelSelector
+							isBusy={isBusy}
+							model={model}
+							onModelChange={onModelChange}
+							onModelSupportsReasoningChange={
+								handleModelSupportsReasoningChange
+							}
+							onProviderChange={onProviderChange}
+							provider={provider}
+						/>
+					</div>
+					<Select
+						disabled={modelSupportsReasoning !== true}
+						onValueChange={handleEffortChange}
+						value={EFFORT_LEVELS[effortIndex]?.value ?? "low"}
+					>
+						<SelectTrigger
+							aria-label="Thinking level"
+							className="h-7 gap-1.5 border-0 bg-muted px-2 text-[11px] shadow-none data-[size=sm]:h-7 [&>svg:last-child]:hidden max-[560px]:col-span-2 max-[560px]:col-start-1 max-[560px]:row-start-2"
+							size="sm"
+							title={
+								modelSupportsReasoning === false
+									? "The selected model does not report reasoning support"
+									: undefined
+							}
+						>
+							<Brain className="size-3" />
+							<SelectValue>{effortLabel}</SelectValue>
+						</SelectTrigger>
+						<SelectContent align="start">
+							{EFFORT_LEVELS.map((option) => (
+								<SelectItem key={option.value} value={option.value}>
+									{option.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+					{tokensSummary ? (
+						<span className="max-[900px]:hidden">
+							<StatusItem
+								icon={Coins}
+								label={tokensSummary}
+								hasOption={false}
+							/>
+						</span>
+					) : null}
 				</div>
-			</div>
 
-			{/* Status bar */}
-			<div className="flex items-center justify-between border-t border-border px-4 py-1.5 text-[11px] text-muted-foreground">
-				<div className="flex items-center gap-3">
-					<StatusItem
-						label={mode === "act" ? "Act" : "Plan"}
-						onClick={onModeToggle}
-					/>
-					<StatusItem
-						disabled={!modelSupportsReasoning}
-						icon={Brain}
-						label={effortLabel}
-						onClick={handleEffortCycle}
-					/>
-					{tokensSummary && (
-						<StatusItem icon={Coins} label={tokensSummary} hasOption={false} />
-					)}
-				</div>
-				{/* GIT BRANCH */}
-				<div className="flex items-center gap-3">
-					<WorkspaceSelector
-						currentBranch={gitBranch}
-						onListGitBranches={onListGitBranches}
-						onRefreshWorkspaces={onRefreshWorkspaces}
-						onPickWorkspaceDirectory={onPickWorkspaceDirectory}
-						onSwitchGitBranch={onSwitchGitBranch}
-						onSwitchWorkspace={onSwitchWorkspace}
-						workspaces={workspaces}
-						workspaceRoot={workspaceRoot}
-					/>
-					<button
-						className="hidden items-center gap-1 hover:text-foreground transition-colors"
-						onClick={onRefreshGitBranch}
-						type="button"
-					>
-						<RotateCcw className="h-3 w-3" />
-					</button>
-					<button
-						className="hidden items-center gap-1 hover:text-foreground transition-colors"
-						onClick={onReset}
-						type="button"
-					>
-						<RotateCcw className="h-4 w-4" />
-					</button>
+				<div className="ml-auto flex min-w-0 shrink-0 items-center gap-2 max-[560px]:contents">
+					<div className="hidden max-w-48 overflow-visible max-[720px]:max-w-36 max-[560px]:col-start-3 max-[560px]:row-start-2">
+						<WorkspaceSelector
+							currentBranch={gitBranch}
+							onListGitBranches={onListGitBranches}
+							onRefreshWorkspaces={onRefreshWorkspaces}
+							onPickWorkspaceDirectory={onPickWorkspaceDirectory}
+							onSwitchGitBranch={onSwitchGitBranch}
+							onSwitchWorkspace={onSwitchWorkspace}
+							workspaces={workspaces}
+							workspaceRoot={workspaceRoot}
+						/>
+					</div>
+					<div className="flex shrink-0 items-center gap-2 max-[560px]:col-start-4 max-[560px]:row-start-2">
+						{canAbort && (
+							<button
+								aria-label="Stop agent"
+								className={cn(
+									"bg-foreground p-1.5 text-background transition-colors hover:bg-foreground/80",
+									variant === "welcome" ? "rounded-md" : "rounded-full",
+								)}
+								onClick={onAbort}
+								type="button"
+							>
+								<CircleStop className="h-4 w-4" />
+							</button>
+						)}
+						{(!isBusy || canSend) && (
+							<button
+								aria-label="Send message"
+								className={cn(
+									"p-1.5 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+									variant === "welcome"
+										? "rounded-md bg-[linear-gradient(145deg,var(--primary-emphasis),var(--primary))] text-white shadow-sm hover:brightness-110"
+										: "rounded-full bg-foreground text-background hover:bg-foreground/80",
+								)}
+								disabled={!canSend}
+								onClick={onSend}
+								type="button"
+							>
+								<ArrowUp className="h-4 w-4" />
+							</button>
+						)}
+					</div>
 				</div>
 			</div>
 		</div>
@@ -1054,7 +1182,7 @@ function ModelSelector({
 	isBusy: boolean;
 	onProviderChange: (provider: string) => void;
 	onModelChange: (model: string) => void;
-	onModelSupportsReasoningChange: (supportsReasoning: boolean) => void;
+	onModelSupportsReasoningChange: (supportsReasoning: boolean | null) => void;
 }) {
 	const normalizedProvider = normalizeProviderId(provider);
 	const [providerModels, setProviderModels] = useState<
@@ -1063,6 +1191,9 @@ function ModelSelector({
 	const [providerReasoningModels, setProviderReasoningModels] = useState<
 		Record<string, string[]>
 	>(FALLBACK_PROVIDER_REASONING_MODELS);
+	const [reasoningCapabilitySource, setReasoningCapabilitySource] = useState<
+		"loading" | "catalog" | "fallback"
+	>("loading");
 	const [enabledProviderIds, setEnabledProviderIds] = useState<string[]>([]);
 	const [lastSelection, setLastSelection] = useState(() =>
 		readModelSelectionStorageFromWindow(),
@@ -1120,6 +1251,7 @@ function ModelSelector({
 
 	useEffect(() => {
 		let cancelled = false;
+		setReasoningCapabilitySource("loading");
 
 		async function loadCatalog() {
 			try {
@@ -1129,6 +1261,7 @@ function ModelSelector({
 				}
 				setProviderModels(payload.providerModels);
 				setProviderReasoningModels(payload.providerReasoningModels);
+				setReasoningCapabilitySource("catalog");
 				setEnabledProviderIds((current) => {
 					const nextProviderIds = new Set(payload.enabledProviderIds);
 					if (normalizedProvider) {
@@ -1142,7 +1275,7 @@ function ModelSelector({
 					return Array.from(nextProviderIds);
 				});
 			} catch {
-				// Keep local fallback values when provider catalog is unavailable.
+				if (!cancelled) setReasoningCapabilitySource("fallback");
 			}
 		}
 
@@ -1180,6 +1313,7 @@ function ModelSelector({
 					...current,
 					[normalizedProvider]: reasoningModelIds,
 				}));
+				setReasoningCapabilitySource("catalog");
 				setEnabledProviderIds((current) =>
 					current.includes(normalizedProvider)
 						? current
@@ -1246,6 +1380,16 @@ function ModelSelector({
 	]);
 
 	useEffect(() => {
+		if (reasoningCapabilitySource === "loading") {
+			return;
+		}
+		if (
+			reasoningCapabilitySource === "fallback" &&
+			!(FALLBACK_PROVIDER_MODELS[normalizedProvider] ?? []).includes(model)
+		) {
+			onModelSupportsReasoningChange(null);
+			return;
+		}
 		onModelSupportsReasoningChange(
 			hasReasoningCapability(
 				providerReasoningModels,
@@ -1258,16 +1402,17 @@ function ModelSelector({
 		onModelSupportsReasoningChange,
 		normalizedProvider,
 		providerReasoningModels,
+		reasoningCapabilitySource,
 	]);
 
 	return (
-		<div className="flex items-center gap-1 text-xxs">
-			<Combobox
+		<div className="flex min-w-0 shrink-0 items-center gap-0.5 text-[11px]">
+			<SearchableSelect
+				ariaLabel="Provider"
+				disabled={isBusy || providers.length === 0}
+				emptyLabel="No providers found."
 				items={providers}
-				onValueChange={(value) => {
-					if (!value) {
-						return;
-					}
+				onSelect={(value) => {
 					onProviderChange(value);
 					const rememberedModel = lastSelection.lastModelByProvider[value];
 					const providerModelIds = visibleProviderModels[value] ?? [];
@@ -1284,55 +1429,23 @@ function ModelSelector({
 						onModelChange(firstModel);
 					}
 				}}
+				placeholder="Provider"
+				searchPlaceholder="Search providers"
+				triggerClassName="max-w-28 text-[11px]"
 				value={resolvedProvider}
-			>
-				<ComboboxInput
-					className="h-7 text-xxs"
-					disabled={isBusy || providers.length === 0}
-					readOnly
-					showClear={false}
-					showTrigger
-				/>
-				<ComboboxContent>
-					<ComboboxEmpty>No providers found.</ComboboxEmpty>
-					<ComboboxList>
-						{(item) => (
-							<ComboboxItem className="text-xxs" key={item} value={item}>
-								{item}
-							</ComboboxItem>
-						)}
-					</ComboboxList>
-				</ComboboxContent>
-			</Combobox>
-
-			<Combobox
+			/>
+			<span className="text-muted-foreground/50">/</span>
+			<SearchableSelect
+				ariaLabel="Model"
+				disabled={isBusy || modelsForProvider.length === 0}
+				emptyLabel="No models found."
 				items={modelsForProvider}
-				onValueChange={(value) => {
-					if (!value) {
-						return;
-					}
-					onModelChange(value);
-				}}
+				onSelect={(value) => onModelChange(value)}
+				placeholder="Model"
+				searchPlaceholder="Search models"
+				triggerClassName="max-w-52 text-[11px]"
 				value={resolvedModel}
-			>
-				<ComboboxInput
-					className="h-7"
-					disabled={isBusy || modelsForProvider.length === 0}
-					readOnly
-					showClear={false}
-					showTrigger
-				/>
-				<ComboboxContent>
-					<ComboboxEmpty>No models found.</ComboboxEmpty>
-					<ComboboxList>
-						{(item) => (
-							<ComboboxItem className="text-xxs" key={item} value={item}>
-								{item}
-							</ComboboxItem>
-						)}
-					</ComboboxList>
-				</ComboboxContent>
-			</Combobox>
+			/>
 		</div>
 	);
 }
@@ -1350,6 +1463,16 @@ function StatusItem({
 	disabled?: boolean;
 	hasOption?: boolean;
 }) {
+	const content = (
+		<>
+			{Icon ? <Icon className="h-3 w-3" /> : null}
+			<span className="max-[560px]:sr-only">{label}</span>
+			{hasOption ? <ChevronDown className="h-2.5 w-2.5" /> : null}
+		</>
+	);
+	if (!onClick) {
+		return <span className="flex items-center gap-1">{content}</span>;
+	}
 	return (
 		<button
 			className={cn(
@@ -1360,9 +1483,7 @@ function StatusItem({
 			onClick={onClick}
 			type="button"
 		>
-			{Icon ? <Icon className="h-3 w-3" /> : null}
-			<span>{label}</span>
-			{hasOption ? <ChevronDown className="h-2.5 w-2.5" /> : null}
+			{content}
 		</button>
 	);
 }

apps/examples/desktop-app/webview/components/views/chat/chat-messages.test.tsx

@@ -0,0 +1,344 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ChatMessage } from "@/lib/chat-schema";
+import { ChatMessages } from "./chat-messages";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+	Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+	HTMLElement.prototype.scrollTo = vi.fn();
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	vi.restoreAllMocks();
+});
+
+async function renderMessages(
+	messages: ChatMessage[],
+	overrides: Partial<Parameters<typeof ChatMessages>[0]> = {},
+) {
+	await act(async () => {
+		root.render(
+			<ChatMessages
+				chatTransportState="connected"
+				error={null}
+				messages={messages}
+				onAnswerAskQuestion={vi.fn()}
+				onApproveToolApproval={vi.fn()}
+				onRejectToolApproval={vi.fn()}
+				pendingAskQuestions={[]}
+				pendingToolApprovals={[]}
+				sessionId="session-1"
+				status="completed"
+				{...overrides}
+			/>,
+		);
+	});
+}
+
+describe("ChatMessages tool disclosures", () => {
+	it("renders a detail-less tool summary as static text", async () => {
+		await renderMessages([
+			{
+				id: "tool-static",
+				sessionId: "session-1",
+				role: "tool",
+				content: "not-json",
+				createdAt: 1,
+				meta: { toolName: "search" },
+			},
+		]);
+
+		const summary = [...container.querySelectorAll("span")].find((element) =>
+			element.textContent?.includes("Explored"),
+		);
+		expect(summary).toBeDefined();
+		expect(summary?.closest("button")).toBeNull();
+	});
+
+	it("exposes and toggles expandable tool details", async () => {
+		await renderMessages([
+			{
+				id: "tool-expandable",
+				sessionId: "session-1",
+				role: "tool",
+				content: JSON.stringify({
+					toolName: "search",
+					input: { queries: ["workspace selector"] },
+					result: {},
+				}),
+				createdAt: 1,
+			},
+		]);
+
+		const trigger = [...container.querySelectorAll("button")].find((element) =>
+			element.textContent?.includes("Explored 1 search"),
+		);
+		expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+		const panelId = trigger?.getAttribute("aria-controls");
+		expect(panelId).toBeTruthy();
+
+		await act(async () => trigger?.click());
+		expect(trigger?.getAttribute("aria-expanded")).toBe("true");
+		expect(document.getElementById(panelId ?? "")?.textContent).toContain(
+			"workspace selector",
+		);
+	});
+
+	it("groups consecutive tool calls and combines matching activity totals", async () => {
+		const tools: ChatMessage[] = [
+			{
+				id: "read",
+				sessionId: "session-1",
+				role: "tool",
+				content: JSON.stringify({
+					toolName: "read_files",
+					input: { paths: ["one.ts", "two.ts"] },
+					result: {},
+				}),
+				createdAt: 1,
+			},
+			...["one.ts", "two.ts", "three.ts", "four.ts"].map(
+				(path, index): ChatMessage => ({
+					id: `edit-${index}`,
+					sessionId: "session-1",
+					role: "tool",
+					content: JSON.stringify({
+						toolName: "editor",
+						input: { path, old_text: "before", new_text: "after" },
+						result: {},
+					}),
+					createdAt: index + 2,
+				}),
+			),
+		];
+
+		await renderMessages(tools);
+
+		expect(container.textContent).toContain("Read 2 files. Edited 4 files");
+		expect(container.textContent?.match(/Read 2 files/g)).toHaveLength(1);
+	});
+
+	it("preserves interleaved tool activity order", async () => {
+		const read = (
+			id: string,
+			path: string,
+			createdAt: number,
+		): ChatMessage => ({
+			id,
+			sessionId: "session-1",
+			role: "tool",
+			content: JSON.stringify({
+				toolName: "read_files",
+				input: { paths: [path] },
+				result: {},
+			}),
+			createdAt,
+		});
+
+		await renderMessages([
+			read("read-before", "before.ts", 1),
+			{
+				id: "edit",
+				sessionId: "session-1",
+				role: "tool",
+				content: JSON.stringify({
+					toolName: "editor",
+					input: {
+						path: "change.ts",
+						old_text: "before",
+						new_text: "after",
+					},
+					result: {},
+				}),
+				createdAt: 2,
+			},
+			read("read-after", "after.ts", 3),
+		]);
+
+		expect(container.textContent).toContain(
+			"Read 1 file. Edited 1 file. Read 1 file",
+		);
+	});
+
+	it("starts a new tool group after non-tool content", async () => {
+		const tool = (id: string, createdAt: number): ChatMessage => ({
+			id,
+			sessionId: "session-1",
+			role: "tool",
+			content: JSON.stringify({
+				toolName: "read_files",
+				input: { paths: [`${id}.ts`] },
+				result: {},
+			}),
+			createdAt,
+		});
+
+		await renderMessages([
+			tool("first", 1),
+			{
+				id: "assistant",
+				sessionId: "session-1",
+				role: "assistant",
+				content: "Between tools",
+				createdAt: 2,
+			},
+			tool("second", 3),
+		]);
+
+		expect(container.textContent?.match(/Read 1 file/g)).toHaveLength(2);
+	});
+
+	it("normalizes payload-backed configured subagent names", async () => {
+		await renderMessages([
+			{
+				id: "commands",
+				sessionId: "session-1",
+				role: "tool",
+				content: JSON.stringify({
+					toolName: "run_commands",
+					input: { commands: ["bun test", "bun run typecheck"] },
+					result: {},
+				}),
+				createdAt: 1,
+			},
+			...[2, 3, 4].map(
+				(createdAt): ChatMessage => ({
+					id: `configured-subagent-${createdAt}`,
+					sessionId: "session-1",
+					role: "tool",
+					content: JSON.stringify({
+						toolName: "subagent_subagent",
+						input: { prompt: "Investigate" },
+						result: { text: "Done" },
+					}),
+					createdAt,
+				}),
+			),
+		]);
+
+		expect(container.textContent).toContain(
+			"Ran 2 commands. spawn_agent. spawn_agent. spawn_agent",
+		);
+		expect(container.textContent).not.toContain("subagent_subagent");
+	});
+
+	it("does not render assistant actions without text content", async () => {
+		await renderMessages([
+			{
+				id: "reasoning-only",
+				sessionId: "session-1",
+				role: "assistant",
+				content: "",
+				reasoning: "Internal reasoning",
+				createdAt: 1,
+			},
+		]);
+
+		expect(
+			container.querySelector('button[aria-label="Copy assistant message"]'),
+		).toBeNull();
+	});
+});
+
+describe("ChatMessages thinking indicator", () => {
+	const userMessage: ChatMessage = {
+		id: "user-1",
+		sessionId: "session-1",
+		role: "user",
+		content: "Hello",
+		createdAt: 1,
+	};
+
+	it("shows while starting", async () => {
+		await renderMessages([userMessage], { status: "starting" });
+		expect(container.textContent).toContain("Thinking...");
+	});
+
+	it("keeps showing while running until the first assistant output arrives", async () => {
+		await renderMessages([userMessage], { status: "running" });
+		expect(container.textContent).toContain("Thinking...");
+	});
+
+	it("ignores trailing status messages when deciding to show", async () => {
+		await renderMessages(
+			[
+				userMessage,
+				{
+					id: "status-1",
+					sessionId: "session-1",
+					role: "status",
+					content: "Session started: session-1",
+					createdAt: 2,
+				},
+			],
+			{ status: "running" },
+		);
+
+		expect(container.textContent).toContain("Thinking...");
+	});
+
+	it("hides once assistant output is streaming", async () => {
+		await renderMessages(
+			[
+				userMessage,
+				{
+					id: "assistant-1",
+					sessionId: "session-1",
+					role: "assistant",
+					content: "Working on it",
+					createdAt: 2,
+				},
+			],
+			{ status: "running", streamingMessageId: "assistant-1" },
+		);
+
+		expect(container.textContent).not.toContain("Thinking...");
+	});
+
+	it("hides while a tool runs", async () => {
+		await renderMessages(
+			[
+				userMessage,
+				{
+					id: "tool-1",
+					sessionId: "session-1",
+					role: "tool",
+					content: "not-json",
+					createdAt: 2,
+					meta: { toolName: "search" },
+				},
+			],
+			{ status: "running" },
+		);
+
+		expect(container.textContent).not.toContain("Thinking...");
+	});
+
+	it("hides while a tool approval is pending", async () => {
+		await renderMessages([userMessage], {
+			status: "running",
+			pendingToolApprovals: [
+				{
+					requestId: "req-1",
+					sessionId: "session-1",
+					createdAt: new Date(1).toISOString(),
+					toolCallId: "call-1",
+					toolName: "execute_command",
+				},
+			],
+		});
+
+		expect(container.textContent).not.toContain("Thinking...");
+	});
+});

apps/examples/desktop-app/webview/components/views/chat/diff-view.test.tsx

@@ -0,0 +1,182 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { SessionFileDiff } from "@/lib/session-diff";
+import { DiffView } from "./diff-view";
+
+const { invokeMock } = vi.hoisted(() => ({
+	invokeMock: vi.fn(async (command: string) =>
+		command === "list_available_editors"
+			? [{ id: "vscode", label: "VS Code" }]
+			: { path: "/repo/docs/a.mdx", editor: "VS Code" },
+	),
+}));
+
+vi.mock("@/lib/desktop-client", () => ({
+	desktopClient: { invoke: invokeMock },
+}));
+
+let container: HTMLDivElement;
+let root: Root;
+let writeText: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+	Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+	// jsdom lacks the layout/pointer APIs the Radix dropdown menu touches.
+	if (!("ResizeObserver" in globalThis)) {
+		Object.assign(globalThis, {
+			ResizeObserver: class {
+				observe() {}
+				unobserve() {}
+				disconnect() {}
+			},
+		});
+	}
+	Element.prototype.scrollIntoView ??= () => {};
+	Element.prototype.hasPointerCapture ??= () => false;
+	Element.prototype.setPointerCapture ??= () => {};
+	Element.prototype.releasePointerCapture ??= () => {};
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	writeText = vi.fn().mockResolvedValue(undefined);
+	Object.defineProperty(navigator, "clipboard", {
+		configurable: true,
+		value: { writeText },
+	});
+	invokeMock.mockClear();
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	vi.restoreAllMocks();
+});
+
+async function click(element: Element): Promise<void> {
+	await act(async () => {
+		element.dispatchEvent(
+			new MouseEvent("click", { bubbles: true, cancelable: true }),
+		);
+		await Promise.resolve();
+	});
+}
+
+// Radix dropdown triggers open on pointerdown, not click.
+async function pointerDown(element: Element): Promise<void> {
+	await act(async () => {
+		element.dispatchEvent(
+			new MouseEvent("pointerdown", {
+				bubbles: true,
+				cancelable: true,
+				button: 0,
+			}),
+		);
+		await Promise.resolve();
+	});
+}
+
+function buttonWithLabel(label: string): HTMLButtonElement {
+	const button = container.querySelector<HTMLButtonElement>(
+		`button[aria-label="${label}"]`,
+	);
+	expect(button).not.toBeNull();
+	return button as HTMLButtonElement;
+}
+
+// Menu items render in a portal attached to document.body.
+function menuItems(): HTMLElement[] {
+	return Array.from(
+		document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+	);
+}
+
+const FILE_DIFF: SessionFileDiff = {
+	path: "docs/a.mdx",
+	additions: 2,
+	deletions: 1,
+	hunks: [],
+};
+
+describe("DiffView file actions", () => {
+	it("copies the cwd-resolved absolute file path", async () => {
+		await act(async () => {
+			root.render(
+				<DiffView
+					cwd="/Users/renee/cline"
+					fileDiffs={[FILE_DIFF]}
+					onClose={vi.fn()}
+				/>,
+			);
+		});
+
+		await click(buttonWithLabel("Copy file path for docs/a.mdx"));
+
+		expect(writeText).toHaveBeenCalledWith("/Users/renee/cline/docs/a.mdx");
+	});
+
+	it("opens the file in a chosen editor through the desktop backend", async () => {
+		await act(async () => {
+			root.render(
+				<DiffView
+					cwd="/Users/renee/cline"
+					fileDiffs={[FILE_DIFF]}
+					onClose={vi.fn()}
+				/>,
+			);
+		});
+
+		await pointerDown(buttonWithLabel("Open docs/a.mdx in editor"));
+
+		const labels = menuItems().map((item) => item.textContent);
+		expect(labels).toEqual(["VS Code", "System default"]);
+
+		const vscodeItem = menuItems().find(
+			(item) => item.textContent === "VS Code",
+		);
+		await click(vscodeItem as Element);
+
+		expect(invokeMock).toHaveBeenCalledWith("open_file_in_editor", {
+			path: "docs/a.mdx",
+			cwd: "/Users/renee/cline",
+			editor: "vscode",
+		});
+	});
+
+	it("still offers the system default opener when editor detection fails", async () => {
+		invokeMock.mockImplementation(async (command: string) => {
+			if (command === "list_available_editors") {
+				throw new Error("unsupported desktop command");
+			}
+			return { path: "/repo/docs/a.mdx", editor: "system default" };
+		});
+
+		await act(async () => {
+			root.render(<DiffView fileDiffs={[FILE_DIFF]} onClose={vi.fn()} />);
+		});
+
+		await pointerDown(buttonWithLabel("Open docs/a.mdx in editor"));
+
+		const labels = menuItems().map((item) => item.textContent);
+		expect(labels).toEqual(["System default"]);
+
+		await click(menuItems()[0] as Element);
+
+		expect(invokeMock).toHaveBeenCalledWith("open_file_in_editor", {
+			path: "docs/a.mdx",
+			editor: "default",
+		});
+	});
+
+	it("copies the path as-is when no cwd is available", async () => {
+		await act(async () => {
+			root.render(<DiffView fileDiffs={[FILE_DIFF]} onClose={vi.fn()} />);
+		});
+
+		await click(buttonWithLabel("Copy file path for docs/a.mdx"));
+
+		expect(writeText).toHaveBeenCalledWith("docs/a.mdx");
+	});
+});