diff --git a/.config/dotnet-tools.json b/.config/dotnet-tools.json
index e3703c2..fabe46b 100644
--- a/.config/dotnet-tools.json
+++ b/.config/dotnet-tools.json
@@ -2,12 +2,19 @@
   "version": 1,
   "isRoot": true,
   "tools": {
-    "markdownutil": {
-      "version": "4.8.0",
+    "mdu": {
+      "version": "6.0.1",
       "commands": [
         "mdu"
       ],
       "rollForward": false
+    },
+    "dotnet-ef": {
+      "version": "10.0.14",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
     }
   }
 }
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9ecc17e..c15e399 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,7 +8,7 @@ on:
     inputs:
       version:
         type: string
-        default: '0.1.0'
+        default: '0.2.0'
 
 permissions:
   contents: read
@@ -62,7 +62,7 @@ jobs:
       - name: Publish Native AOT executable
         shell: bash
         env:
-          PACKAGE_VERSION: ${{ inputs.version || '0.1.0' }}
+          PACKAGE_VERSION: ${{ inputs.version || '0.2.0' }}
         run: dotnet publish src/DotnetCockpit/DotnetCockpit.csproj --configuration Release --runtime ${{ matrix.rid }} --self-contained true -p:PublishAot=true -warnaserror:IL2026,IL2104,IL3050,IL3053 -p:Version="$PACKAGE_VERSION" --output artifacts/native
       - name: Smoke test published executable
         run: node scripts/smoke.mjs artifacts/native/${{ matrix.exe }}
@@ -73,6 +73,13 @@ jobs:
       - name: Test UI against native backend
         if: runner.os == 'Linux'
         run: npm --prefix ui run test:browser
+      - name: Install browser for screenshot comparison
+        if: matrix.os == 'macos-latest'
+        working-directory: ui
+        run: npx playwright install chromium
+      - name: Compare screenshots
+        if: matrix.os == 'macos-latest'
+        run: npm --prefix ui run test:visual
       - name: Archive native executable
         shell: pwsh
         env:
@@ -116,11 +123,11 @@ jobs:
           npm --prefix ui run build
       - name: Pack .NET tool
         env:
-          PACKAGE_VERSION: ${{ inputs.version || '0.1.0' }}
+          PACKAGE_VERSION: ${{ inputs.version || '0.2.0' }}
         run: dotnet pack src/DotnetCockpit/DotnetCockpit.csproj --configuration Release -p:Version="$PACKAGE_VERSION" --output artifacts/packages
       - name: Install and smoke test tool package
         env:
-          PACKAGE_VERSION: ${{ inputs.version || '0.1.0' }}
+          PACKAGE_VERSION: ${{ inputs.version || '0.2.0' }}
         run: |
           dotnet tool install dotnet-cockpit --tool-path "$PWD/artifacts/tool" --add-source "$PWD/artifacts/packages" --version "$PACKAGE_VERSION"
           PATH="$PWD/artifacts/tool:$PATH" dotnet cockpit --help
diff --git a/AGENTS.md b/AGENTS.md
index ca7a84d..be3075e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,6 +1,6 @@
 # Repository guide
 
-.NET Cockpit is a local browser application: a Native AOT ASP.NET Core Minimal API host renders HTML in C#. Fluent UI Web Components enhance the server-rendered page; React is not used.
+.NET Cockpit is a local browser application: a Native AOT ASP.NET Core Minimal API host renders HTML in C#. A small module script enhances the server-rendered page; no UI framework is used.
 
 - Keep native startup independent of an installed .NET runtime or SDK. The optional managed .NET tool is an additional distribution.
 - Build browser assets before compiling .NET: `npm --prefix ui ci` and `npm --prefix ui run build`. Node is only a build/test dependency.
@@ -11,8 +11,12 @@
 - Inventory reflects the selected dotnet host on PATH. Distinguish a missing host from a failed query.
 - `/tools` lists user-global tools and local manifest declarations for Cockpit's startup working directory. Do not scan arbitrary projects or imply that a listed local package has been restored. Keep the two scopes independent when a query fails.
 - Tool mutations run only through explicit local forms: search results install globally until a local manifest exists, initialized workspaces offer global/local targets, installed rows offer uninstall, and the current workspace can remove its own local manifest. Keep POST actions scoped to the startup working directory and preserve server-rendered behavior without JavaScript; never remove an inherited parent manifest.
+- Every mutation asks first through `ConfirmActions`: the shared dialog with JavaScript, the `/confirm` page without it.
+- Support dates, end-of-life state and the timeline come only from the release catalog. When it is unavailable, say the status is unknown instead of guessing.
+- Preferences live in `SettingsStore`, not browser storage, because the free port changes the origin on every launch.
+- Styles use the tokens in `ui/src/styles/tokens.css`: six type sizes, three radii, semantic colors. Add no literal colors, other sizes or `!important`. Palettes in `palettes.css` override color roles only and must pass the contrast test in both themes.
 - `/setup` may detect, install, update, and remove only the official global `dotnet-core-uninstall` installation for Windows and macOS. Global installs use the platform paths and must surface administrator approval. Release discovery must follow every page of the official GitHub Releases API, filter stable releases to those with a compatible asset, and treat an incomplete/failed response as unavailable rather than presenting a partial list. Do not download arbitrary URLs or claim Linux support.
 - The CLI's bracketed path is a base directory. Display `InstallationPath` (base path plus version) for an individual SDK or runtime; retain `Path` in the JSON API for compatibility.
-- Run `dotnet test DotnetCockpit.sln`, publish the native binary, run `node scripts/smoke.mjs <binary>`, and run the browser tests for UI changes.
+- Run `dotnet test DotnetCockpit.sln`, publish the native binary, run `node scripts/smoke.mjs <binary>`, and run the browser tests for UI changes. For visual changes also run `npm --prefix ui run test:visual`; after an intended change, update the baselines with `npm --prefix ui run test:visual:update` and review them.
 - Use `gh` for GitHub operations. Commit messages follow Conventional Commits and contain no AI attribution.
 - Keep changes focused and avoid speculative abstractions or functionality.
diff --git a/docs/Features.md b/docs/Features.md
index 3540096..0ec2438 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -20,10 +20,12 @@ The **.NET Tools** page keeps the two scopes separate:
 
 A local declaration is not proof that its package has been restored. Cockpit never scans unrelated projects. Tool changes are deliberate POST actions: search results install globally until the current workspace has a manifest; initialized workspaces can choose global or local installation; installed rows can uninstall; and Cockpit only removes a manifest owned by its own startup directory.
 
-## Setup
+## Settings
 
 On macOS and Windows, Cockpit can detect, install, update, and remove the official global `dotnet-core-uninstall` installation. These operations request administrator approval where the platform requires it. Linux is not supported by the official tool.
 
-On macOS, **Setup** also lists official `.pkg` installers for the host architecture. The catalog comes from Microsoft's release metadata and includes SDKs and standalone .NET Runtimes, release channels, support status, release dates, SHA-512 checksums, and release CVEs where Microsoft provides them. Downloading a package is separate from installing it: open the downloaded package in macOS Installer to complete installation.
+On macOS, **Versions → Install .NET** lists official `.pkg` installers for the host architecture. The catalog comes from Microsoft's release metadata and includes SDKs and standalone .NET Runtimes, release channels, support status, release dates, SHA-512 checksums, and release CVEs where Microsoft provides them. Downloading a package is separate from installing it: open the downloaded package in macOS Installer to complete installation.
 
 The SDK installer includes the matching .NET Runtime and ASP.NET Core Runtime. Use the standalone Runtime package only when you do not need the SDK.
+
+The colors can be switched under **Settings** between the Cockpit, macOS, GitHub and Codex styles, each in light and dark. On macOS, the macOS style follows the accent color from System Settings.
diff --git a/docs/Getting-Started.md b/docs/Getting-Started.md
index 4e408cd..a86d66c 100644
--- a/docs/Getting-Started.md
+++ b/docs/Getting-Started.md
@@ -44,6 +44,6 @@ The .NET tool is optional. Use the native download on machines without an SDK.
 
 1. Open **Installations** to inspect the SDKs and runtimes reported by the selected `dotnet` host.
 2. Open **.NET Tools** to see global tools and local manifest declarations for the directory where Cockpit was launched.
-3. Open **Setup** to manage the supported uninstall tool or download an official macOS SDK or runtime package.
+3. Open **Settings** to manage the supported uninstall tool, or **Versions → Install .NET** to download an official macOS SDK or runtime package.
 
 Restart Cockpit after changing its inherited `PATH` or installing a new `dotnet` host.
diff --git a/docs/Privacy-and-Safety.md b/docs/Privacy-and-Safety.md
index ef59cab..381ee96 100644
--- a/docs/Privacy-and-Safety.md
+++ b/docs/Privacy-and-Safety.md
@@ -13,10 +13,14 @@ Cockpit reads the .NET host selected by its own `PATH`, the output of the standa
 
 ## Network requests
 
-The application starts without an internet connection. The Setup page requests release metadata only when it needs current installer or uninstall-tool release information. Installer links target official Microsoft-hosted files; uninstall-tool release discovery uses the official GitHub releases API.
+The application starts without an internet connection. The Settings page requests release metadata only when it needs current installer or uninstall-tool release information. Installer links target official Microsoft-hosted files; uninstall-tool release discovery uses the official GitHub releases API.
 
 ## Explicit changes
 
 Cockpit never changes .NET installations or tool manifests during inventory. Mutations require a local form submission and are scoped to the startup directory. An inherited parent tool manifest is displayed but cannot be removed from Cockpit.
 
 Before removing an installation, confirm that it is not needed by another application. Cockpit surfaces the command result, but the underlying platform installer and .NET tooling remain authoritative.
+
+## Local files
+
+Cockpit stores your appearance and pre-flight choices in `settings.json` in the `dotnet-cockpit` folder of your user configuration directory. Delete the file to reset them.
diff --git a/scripts/smoke.mjs b/scripts/smoke.mjs
index b31c077..032c9e0 100644
--- a/scripts/smoke.mjs
+++ b/scripts/smoke.mjs
@@ -146,7 +146,7 @@ await runWithoutRepositoryFiles(process.env, async (data, html, get, url) => {
   const setupPage = await get('setup');
   assert.equal(setupPage.status, 200);
   const setupHtml = await setupPage.text();
-  assert.ok(setupHtml.includes('<h1>Setup</h1>'));
+  assert.ok(setupHtml.includes('<h1>Settings</h1>'));
   assert.ok(setupHtml.includes('.NET Uninstall Tool'));
   assert.ok(setupHtml.includes('learn.microsoft.com/en-us/dotnet/core/additional-tools/uninstall-tool-overview'));
   const invalidAction = await fetch(new URL('tools/install', url), {
diff --git a/src/DotnetCockpit/AppJsonContext.cs b/src/DotnetCockpit/AppJsonContext.cs
index 48122ea..5ccf406 100644
--- a/src/DotnetCockpit/AppJsonContext.cs
+++ b/src/DotnetCockpit/AppJsonContext.cs
@@ -8,6 +8,10 @@ namespace DotnetCockpit;
 [JsonSerializable(typeof(InstallationSnapshot))]
 [JsonSerializable(typeof(HealthStatus))]
 [JsonSerializable(typeof(ToolsSnapshot))]
+[JsonSerializable(typeof(ToolSearch))]
+[JsonSerializable(typeof(AppSettings))]
+[JsonSerializable(typeof(SystemAccentStatus))]
 internal partial class AppJsonContext : JsonSerializerContext;
 
 internal sealed record HealthStatus(string Status);
+internal sealed record SystemAccentStatus(string? Accent);
diff --git a/src/DotnetCockpit/ConfirmActions.cs b/src/DotnetCockpit/ConfirmActions.cs
new file mode 100644
index 0000000..7d7aefd
--- /dev/null
+++ b/src/DotnetCockpit/ConfirmActions.cs
@@ -0,0 +1,242 @@
+using System.Runtime.InteropServices;
+using DotnetCockpit.SdkDownloads;
+using DotnetCockpit.Installation;
+using static DotnetCockpit.PageLayout;
+
+namespace DotnetCockpit;
+
+/// <summary>
+/// Describes one change Cockpit can make. The same description drives the dialog (with JavaScript) and
+/// the /confirm page (without it), so both show identical wording and the identical command.
+/// </summary>
+internal sealed record ConfirmSpec(
+    string Action,
+    string Title,
+    string Body,
+    string Command,
+    string ConfirmLabel,
+    string BusyLabel,
+    string PostUrl,
+    string CancelHref,
+    (string Name, string Value)[] Fields,
+    bool Danger = false,
+    bool NeedsAdmin = false,
+    string[]? Items = null);
+
+internal static class ConfirmActions
+{
+    private static string UninstallPrefix => RuntimeInformation.IsOSPlatform(OSPlatform.Windows) ? "dotnet-core-uninstall" : "sudo dotnet-core-uninstall";
+
+    public static string AdminNote => RuntimeInformation.IsOSPlatform(OSPlatform.Windows)
+        ? "Windows will ask for administrator approval."
+        : "macOS will ask for your administrator password.";
+
+    public static string RemovalCommand(string version, string filter) =>
+        $"{UninstallPrefix} remove {version} \\\n  {filter} \\\n  --yes";
+
+    public const string YesFlagNote = "The --yes flag skips the tool's own prompt, because you confirm here. You approve once, however many items are selected.";
+
+    public static ConfirmSpec VersionRemove(InstallationPage.Row row, InstallationViewOptions? view = null) => new(
+        "version-remove",
+        $"Remove {row.Name} {row.DisplayVersion}?",
+        $"Projects targeting net{row.Channel}.0 may stop building or running unless another compatible version is installed. {YesFlagNote}",
+        row.EquivalentCommand ?? "",
+        $"Remove {row.DisplayVersion}",
+        $"Removing {row.DisplayVersion}…",
+        "/installation/remove",
+        "/",
+        [("version", row.Version), ("kind", row.Kind), .. ViewFields(view)],
+        Danger: true,
+        NeedsAdmin: true);
+
+    public static ConfirmSpec ChannelRemove(string channel, InstallationPage.Row[] rows)
+    {
+        var count = rows.Length;
+        return new(
+            "channel-remove",
+            $"Remove .NET {channel}?",
+            $"Projects targeting net{channel}.0 will no longer build on this machine. {YesFlagNote}",
+            string.Join("\n\n", rows.Select(row => row.EquivalentCommand)),
+            $"Remove {count} {(count == 1 ? "item" : "items")}",
+            $"Removing .NET {channel}…",
+            "/installation/remove",
+            "/",
+            [("channel", channel), .. rows.Select(row => ("items", $"{row.Version}|{row.Kind}"))],
+            Danger: true,
+            NeedsAdmin: true,
+            Items: rows.Select(row => $"{row.Name} {row.DisplayVersion}").ToArray());
+    }
+
+    public static ConfirmSpec ToolInstall(string packageId, string version, string scope) => new(
+        "tool-install",
+        $"Install {packageId}?",
+        ToolInstallBody(scope),
+        $"dotnet tool install --{Scope(scope)} \\\n  {packageId} \\\n  --version {version}",
+        "Install tool",
+        $"Installing {packageId}…",
+        "/tools/install",
+        $"/tools?scope={Scope(scope)}",
+        [("packageId", packageId), ("version", version), ("scope", Scope(scope))]);
+
+    public static string ToolInstallBody(string scope) => scope == "local"
+        ? "The tool is added to this workspace's manifest."
+        : "The tool is installed for your user account and works in every project.";
+
+    public static ConfirmSpec ToolUninstall(string packageId, string scope) => new(
+        "tool-uninstall",
+        $"Remove {packageId}?",
+        scope == "local"
+            ? "The tool is removed from this workspace's manifest."
+            : "The tool is removed for your user account. Its commands stop working in every project.",
+        $"dotnet tool uninstall --{Scope(scope)} {packageId}",
+        "Remove tool",
+        $"Removing {packageId}…",
+        "/tools/uninstall",
+        $"/tools?scope={Scope(scope)}",
+        [("packageId", packageId), ("scope", Scope(scope))],
+        Danger: true);
+
+    public static ConfirmSpec ToolUpdate(string packageId, string scope, string? latestVersion) => new(
+        "tool-update",
+        $"Update {packageId}{(string.IsNullOrEmpty(latestVersion) ? "" : $" to {latestVersion}")}?",
+        "The newest version from NuGet.org replaces the installed one.",
+        $"dotnet tool update --{Scope(scope)} {packageId}",
+        "Update tool",
+        $"Updating {packageId}…",
+        "/tools/update",
+        $"/tools?scope={Scope(scope)}",
+        [("packageId", packageId), ("scope", Scope(scope))]);
+
+    public static ConfirmSpec ToolsUpdateAll(string scope, string query, string[] items)
+    {
+        var parsed = items.Select(item => item.Split('|', 2)).Where(parts => parts[0].Length > 0).ToArray();
+        return new(
+            "tools-update-all",
+            $"Update {parsed.Length} {(parsed.Length == 1 ? "tool" : "tools")}?",
+            "The newest versions from NuGet.org replace the installed ones.",
+            string.Join("\n", parsed.Select(parts => $"dotnet tool update --{Scope(parts.Length > 1 ? parts[1] : scope)} {parts[0]}")),
+            $"Update {parsed.Length} {(parsed.Length == 1 ? "tool" : "tools")}",
+            "Updating tools…",
+            "/tools/update-all",
+            $"/tools?scope={scope}",
+            [("scope", scope), ("q", query), .. items.Select(item => ("items", item))],
+            Items: parsed.Select(parts => parts[0]).ToArray());
+    }
+
+    public static ConfirmSpec ManifestInit(string query) => new(
+        "manifest-init",
+        "Initialize local tools?",
+        "Creates .config/dotnet-tools.json in this workspace, so tools can be installed for this project only.",
+        "dotnet new tool-manifest --output .config",
+        "Initialize",
+        "Initializing…",
+        "/tools/init",
+        "/tools?scope=local",
+        [("scope", "local"), ("q", query)]);
+
+    public static ConfirmSpec ManifestRemove(string query) => new(
+        "manifest-remove",
+        "Remove local tools from this workspace?",
+        "Deletes this workspace's .config/dotnet-tools.json. Cached packages are left untouched and inherited manifests are not affected.",
+        "",
+        "Remove local tools",
+        "Removing local tools…",
+        "/tools/remove-manifest",
+        "/tools?scope=local",
+        [("scope", "local"), ("q", query)],
+        Danger: true);
+
+    public static ConfirmSpec SetupInstall(string? version, string installPath) => new(
+        "setup-install",
+        "Install the .NET Uninstall Tool?",
+        $"Downloads the official release from github.com/dotnet/cli-lab and installs it to {installPath}.",
+        "",
+        "Install",
+        "Installing…",
+        "/setup/install",
+        "/setup",
+        string.IsNullOrEmpty(version) ? [] : [("version", version)],
+        NeedsAdmin: true);
+
+    public static ConfirmSpec SetupUpdate(string? latestVersion) => new(
+        "setup-update",
+        $"Update the .NET Uninstall Tool{(string.IsNullOrEmpty(latestVersion) ? "" : $" to {latestVersion}")}?",
+        "Downloads the official release from github.com/dotnet/cli-lab and replaces the installed tool.",
+        "",
+        "Update",
+        "Updating…",
+        "/setup/update",
+        "/setup",
+        [],
+        NeedsAdmin: true);
+
+    public static ConfirmSpec SetupUninstall() => new(
+        "setup-uninstall",
+        "Remove the .NET Uninstall Tool?",
+        "Cockpit can no longer remove SDKs and runtimes for you until the tool is installed again. Installed .NET versions are not affected.",
+        "",
+        "Remove tool",
+        "Removing…",
+        "/setup/uninstall",
+        "/setup",
+        [],
+        Danger: true,
+        NeedsAdmin: true);
+
+    /// <summary>A form that opens the dialog with JavaScript and the /confirm page without it.</summary>
+    public static string Trigger(ConfirmSpec spec, string controlsHtml, string formClass = "") => $"""
+        <form method="get" action="/confirm" class="{formClass}" data-confirm data-confirm-title="{Encode(spec.Title)}" data-confirm-body="{Encode(spec.Body)}" data-confirm-command="{Encode(spec.Command)}" data-confirm-label="{Encode(spec.ConfirmLabel)}" data-confirm-busy="{Encode(spec.BusyLabel)}" data-confirm-post="{Encode(spec.PostUrl)}" data-confirm-danger="{(spec.Danger ? "true" : "false")}" data-confirm-admin="{(spec.NeedsAdmin ? "true" : "false")}"><input type="hidden" name="action" value="{Encode(spec.Action)}">{string.Concat(spec.Fields.Select(field => $"<input type=\"hidden\" name=\"{Encode(field.Name)}\" value=\"{Encode(field.Value)}\">"))}{controlsHtml}</form>
+        """;
+
+    /// <summary>The shared dialog; app.js fills it from the data attributes of the submitted trigger.</summary>
+    public static string Dialog => $"""
+        <dialog id="confirm-dialog" class="remove-modal" closedby="any" aria-labelledby="confirm-dialog-title">
+          <form method="post" id="confirm-dialog-form" class="remove-modal-inner">
+            <div class="remove-modal-head">
+              <div class="remove-modal-icon" id="confirm-dialog-icon">{Icon("trash", "sm")}</div>
+              <div>
+                <h2 id="confirm-dialog-title"></h2>
+                <p id="confirm-dialog-body" class="muted"></p>
+              </div>
+            </div>
+            <div id="confirm-dialog-fields" hidden></div>
+            <div class="remove-modal-notice" id="confirm-dialog-admin" hidden>
+              <span class="notice-lock">{Icon("lock", "sm")}</span>
+              <div><strong>{AdminNote}</strong></div>
+            </div>
+            <div class="drawer-command-box" id="confirm-dialog-command-box" hidden>
+              <span class="cmd-prompt">$</span>
+              <code id="confirm-dialog-command"></code>
+              <button class="button icon ghost copy-btn" id="confirm-dialog-copy" type="button" title="Copy command" aria-label="Copy command">{Icon("clipboard")}</button>
+            </div>
+            <div class="remove-modal-foot">
+              <button type="button" class="button" id="confirm-dialog-cancel" autofocus>Cancel</button>
+              <button type="submit" class="button" id="confirm-dialog-submit"></button>
+            </div>
+          </form>
+        </dialog>
+        """;
+
+    /// <summary>The same confirmation as a page, for browsers without JavaScript and for links from other pages.</summary>
+    public static string RenderPage(ConfirmSpec spec, int issueCount, int? versionsCount, int? toolsCount) => PageLayout.Render($"""
+        <div class="page-heading"><div><h1>Confirm</h1></div></div>
+        <section class="setup-card settings-card confirm-card" aria-labelledby="confirm-title">
+          <h2 id="confirm-title">{Encode(spec.Title)}</h2>
+          <p class="muted">{Encode(spec.Body)}</p>
+          {(spec.Items is { Length: > 0 } items ? $"<ul class=\"confirm-items\">{string.Concat(items.Select(item => $"<li>{Encode(item)}</li>"))}</ul>" : "")}
+          {(spec.NeedsAdmin ? $"<div class=\"remove-modal-notice\"><span class=\"notice-lock\">{Icon("lock", "sm")}</span><div><strong>{AdminNote}</strong></div></div>" : "")}
+          {(spec.Command.Length > 0 ? $"<div class=\"drawer-command-box\"><span class=\"cmd-prompt\">$</span><code>{Encode(spec.Command)}</code><button class=\"button icon ghost copy-btn\" data-copy=\"{Encode(spec.Command)}\" type=\"button\" title=\"Copy command\" aria-label=\"Copy command\">{Icon("clipboard")}</button></div>" : "")}
+          <form method="post" action="{Encode(spec.PostUrl)}" class="remove-modal-foot" data-busy="{Encode(spec.BusyLabel)}">
+            {string.Concat(spec.Fields.Where(field => field.Name != "channel").Select(field => $"<input type=\"hidden\" name=\"{Encode(field.Name)}\" value=\"{Encode(field.Value)}\">"))}
+            <a class="button" href="{Encode(spec.CancelHref)}">Cancel</a>
+            <button type="submit" class="button {(spec.Danger ? "danger" : "primary")}">{Encode(spec.ConfirmLabel)}</button>
+          </form>
+        </section>
+        """, "/confirm", "Confirm | .NET Cockpit", issueCount, versionsCount, toolsCount);
+
+    private static string Scope(string scope) => scope == "local" ? "local" : "global";
+
+    private static (string, string)[] ViewFields(InstallationViewOptions? view) => view is null
+        ? []
+        : [("viewKind", view.Kind), ("q", view.Query), ("sort", view.Sort), ("direction", view.Ascending ? "asc" : "desc")];
+}
diff --git a/src/DotnetCockpit/DotnetCockpit.csproj b/src/DotnetCockpit/DotnetCockpit.csproj
index e6f732f..e64cf7c 100644
--- a/src/DotnetCockpit/DotnetCockpit.csproj
+++ b/src/DotnetCockpit/DotnetCockpit.csproj
@@ -11,7 +11,7 @@
     <IsPackable>true</IsPackable>
     <ToolCommandName>dotnet-cockpit</ToolCommandName>
     <PackageId>dotnet-cockpit</PackageId>
-    <Version>0.1.0</Version>
+    <Version>0.2.0</Version>
     <Authors>Jan Ruhlaender</Authors>
     <Description>A local browser cockpit for your .NET installations.</Description>
     <RepositoryUrl>https://github.com/capjan/dotnet-cockpit</RepositoryUrl>
diff --git a/src/DotnetCockpit/EnvironmentHealth.cs b/src/DotnetCockpit/EnvironmentHealth.cs
new file mode 100644
index 0000000..9656516
--- /dev/null
+++ b/src/DotnetCockpit/EnvironmentHealth.cs
@@ -0,0 +1,129 @@
+using DotnetCockpit.Installation;
+using DotnetCockpit.SdkDownloads;
+
+namespace DotnetCockpit;
+
+internal sealed record HealthLink(string Label, string Href, string Class = "button sm", string? Icon = null, bool Download = false);
+
+internal sealed record HealthAction(string Severity, string Icon, string Title, string Detail, HealthLink[] Links);
+
+/// <summary>The single source for the number shown in the ring, the action list and the navigation badge.</summary>
+internal sealed record HealthReport(HealthAction[] Actions, bool SupportKnown, string Headline)
+{
+    public int Count => Actions.Length;
+
+    /// <summary>The ring shows the action list in proportion, most severe first, with a hairline between parts.</summary>
+    public string RingGradient
+    {
+        get
+        {
+            if (Count == 0) return SupportKnown ? "var(--ok)" : "var(--line-strong)";
+            string[] order = ["bad", "warn", "info"];
+            var parts = order
+                .Select(severity => (Severity: severity, Share: Actions.Count(action => action.Severity == severity) / (double)Count))
+                .Where(part => part.Share > 0)
+                .ToArray();
+            var gap = parts.Length > 1 ? 1.5 : 0;
+            var start = 0.0;
+            var stops = new List<string>();
+            foreach (var (severity, share) in parts)
+            {
+                var end = start + share * 100;
+                stops.Add(FormattableString.Invariant($"var(--{severity}) {start:0.##}% {end - gap:0.##}%"));
+                if (gap > 0) stops.Add(FormattableString.Invariant($"transparent {end - gap:0.##}% {end:0.##}%"));
+                start = end;
+            }
+            return $"conic-gradient({string.Join(", ", stops)})";
+        }
+    }
+}
+
+internal static class EnvironmentHealth
+{
+    public static HealthReport Evaluate(InstallationSnapshot snapshot, SdkDownloadSnapshot? catalog, DateOnly? today = null)
+    {
+        if (snapshot.Status == "error")
+            return new([], false, "The .NET installation could not be read.");
+
+        var currentDate = today ?? SupportLifecycle.Today;
+        var rows = InstallationPage.BuildRows(snapshot, catalog, currentDate);
+        var supportKnown = catalog?.Channels is { Length: > 0 };
+        var actions = new List<HealthAction>();
+
+        if (snapshot.Sdks.Length == 0)
+        {
+            actions.Add(new("warn", "code", "Install a .NET SDK",
+                snapshot.Status == "notFound" ? "No dotnet host was found on PATH." : "No SDK was found on this machine. An SDK is required to build applications.",
+                [new("Install .NET", "/?install=1", "button sm primary")]));
+        }
+
+        var channels = rows.GroupBy(row => row.Channel)
+            .OrderBy(group => group.First().Support.DaysLeft ?? int.MaxValue)
+            .ToArray();
+        var eol = channels.Where(group => group.First().Support.IsEol).ToArray();
+        var endingSoon = channels.Where(group => group.First().Support.IsEndingSoon).ToArray();
+        var patchable = channels
+            .Where(group => group.Any(row => row.HasPatch && !row.LatestPatchInstalled))
+            .OrderByDescending(group => group.Key.Length).ThenByDescending(group => group.Key, StringComparer.Ordinal)
+            .ToArray();
+
+        foreach (var group in eol)
+        {
+            var count = group.Count();
+            var support = group.First().Support;
+            actions.Add(new("bad", "shield",
+                support.EndDate.Length > 0 ? $".NET {group.Key} has been out of support since {support.EndDate}" : $".NET {group.Key} is out of support",
+                $"{count} installed {(count == 1 ? "item no longer receives" : "items no longer receive")} security fixes.",
+                [
+                    new("Details", $"/?selected={Uri.EscapeDataString(group.First().Version)}#inventory", "button sm ghost"),
+                    .. group.Any(row => row.CanRemove)
+                        ? [new HealthLink($"Remove {count} {(count == 1 ? "item" : "items")}", $"/confirm?action=channel-remove&channel={Uri.EscapeDataString(group.Key)}", "button sm", "trash")]
+                        : Array.Empty<HealthLink>()
+                ]));
+        }
+
+        foreach (var group in endingSoon)
+        {
+            var count = group.Count();
+            var support = group.First().Support;
+            actions.Add(new("warn", "clock",
+                $".NET {group.Key} support ends {SupportLifecycle.RelativeDays(support.DaysLeft ?? 0)}",
+                $"{support.EndDate}. {count} installed {(count == 1 ? "item stops" : "items stop")} receiving security fixes after that date.",
+                [new("Details", $"/?selected={Uri.EscapeDataString(group.First().Version)}#inventory", "button sm ghost")]));
+        }
+
+        foreach (var group in patchable)
+        {
+            var row = group.First(candidate => candidate.HasPatch && !candidate.LatestPatchInstalled);
+            var product = row.Kind == "sdk" ? "SDK" : "Runtime";
+            actions.Add(new("info", "download",
+                $"Patch available for .NET {group.Key}",
+                $"{product} {row.DisplayVersion} → {row.LatestPatchVersion}.",
+                [row.PackageUrl is { Length: > 0 } url
+                    ? new("Download", url, "button sm", "download", Download: true)
+                    : new("Details", $"/?selected={Uri.EscapeDataString(row.Version)}#inventory", "button sm ghost")]));
+        }
+
+        return new([.. actions], supportKnown, BuildHeadline(snapshot, eol, endingSoon, patchable.Length, supportKnown));
+    }
+
+    private static string BuildHeadline(InstallationSnapshot snapshot, IGrouping<string, InstallationPage.Row>[] eol, IGrouping<string, InstallationPage.Row>[] endingSoon, int patchCount, bool supportKnown)
+    {
+        var phrases = new List<string>();
+        if (snapshot.Sdks.Length == 0) phrases.Add("No .NET SDK is installed");
+        if (eol.Length > 0)
+            phrases.Add($"{Names(eol)} {(eol.Length == 1 ? "is" : "are")} out of support");
+        if (endingSoon.Length > 0)
+            phrases.Add($"{Names(endingSoon)} support ends {SupportLifecycle.RelativeDays(endingSoon[0].First().Support.DaysLeft ?? 0)}");
+        if (patchCount > 0)
+            phrases.Add($"{patchCount} {(patchCount == 1 ? "patch" : "patches")} available");
+
+        if (phrases.Count > 0) return string.Join(", ", phrases) + ".";
+        return supportKnown
+            ? "All installed versions are supported and up to date."
+            : "Support status could not be checked because the release catalog is unavailable.";
+    }
+
+    private static string Names(IEnumerable<IGrouping<string, InstallationPage.Row>> groups) =>
+        string.Join(" and ", groups.Select(group => $".NET {group.Key}"));
+}
diff --git a/src/DotnetCockpit/Installation/DotnetInstallationService.cs b/src/DotnetCockpit/Installation/DotnetInstallationService.cs
index 1c4d040..f593e88 100644
--- a/src/DotnetCockpit/Installation/DotnetInstallationService.cs
+++ b/src/DotnetCockpit/Installation/DotnetInstallationService.cs
@@ -2,8 +2,40 @@
 
 namespace DotnetCockpit.Installation;
 
+/// <summary>The SDK the dotnet host resolves for Cockpit's working directory, including a global.json pin.</summary>
+internal sealed record ActiveSdk(string? Version, string? GlobalJsonPath);
+
 internal sealed class DotnetInstallationService
 {
+    public async Task<ActiveSdk> ReadActiveSdkAsync(CancellationToken cancellationToken)
+    {
+        var globalJson = FindGlobalJson(Environment.CurrentDirectory);
+        var executable = DotnetLocator.Find(Environment.GetEnvironmentVariable("PATH"));
+        if (executable is null) return new(null, globalJson);
+
+        using var timeout = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        timeout.CancelAfter(TimeSpan.FromSeconds(15));
+        try
+        {
+            var output = await DotnetCommand.RunAsync(executable, ["--version"], timeout.Token);
+            return new(output.Trim(), globalJson);
+        }
+        catch (Exception exception) when (IsQueryFailure(exception) && !cancellationToken.IsCancellationRequested)
+        {
+            return new(null, globalJson);
+        }
+    }
+
+    private static string? FindGlobalJson(string directory)
+    {
+        for (var current = new DirectoryInfo(directory); current is not null; current = current.Parent)
+        {
+            var candidate = Path.Combine(current.FullName, "global.json");
+            if (File.Exists(candidate)) return candidate;
+        }
+        return null;
+    }
+
     public async Task<InstallationSnapshot> ReadAsync(CancellationToken cancellationToken)
     {
         var executable = DotnetLocator.Find(Environment.GetEnvironmentVariable("PATH"));
diff --git a/src/DotnetCockpit/Installation/InstallationSnapshot.cs b/src/DotnetCockpit/Installation/InstallationSnapshot.cs
index 32de2e3..1462a0a 100644
--- a/src/DotnetCockpit/Installation/InstallationSnapshot.cs
+++ b/src/DotnetCockpit/Installation/InstallationSnapshot.cs
@@ -29,6 +29,15 @@ internal sealed record InstallationSnapshot(
     RuntimeInstallation[] Runtimes,
     string? Error = null)
 {
+    /// <summary>One row per SDK and one per runtime version, because frameworks sharing a version are grouped.</summary>
+    [JsonIgnore]
+    public int InstallationCount => Sdks.Length + Runtimes.Select(runtime => runtime.Version).Distinct().Count();
+
+    /// <summary>Changes whenever a version appears or disappears, so an open page can notice without polling.</summary>
+    public string Signature => string.Join('|', Sdks.Select(sdk => $"sdk:{sdk.Version}")
+        .Concat(Runtimes.Select(runtime => $"{runtime.Name}:{runtime.Version}"))
+        .Order(StringComparer.Ordinal));
+
     public static InstallationSnapshot Create(
         string status, string? executablePath,
         SdkInstallation[]? sdks = null, RuntimeInstallation[]? runtimes = null, string? error = null) =>
diff --git a/src/DotnetCockpit/InstallationPage.cs b/src/DotnetCockpit/InstallationPage.cs
index cfb6ef5..abd9c01 100644
--- a/src/DotnetCockpit/InstallationPage.cs
+++ b/src/DotnetCockpit/InstallationPage.cs
@@ -1,38 +1,89 @@
 using System.Globalization;
+using System.Net;
 using DotnetCockpit.Installation;
+using DotnetCockpit.SdkDownloads;
+using DotnetCockpit.Setup;
 using static DotnetCockpit.PageLayout;
+using static DotnetCockpit.SdkDownloadsSection;
 
 namespace DotnetCockpit;
 
-internal sealed record InstallationViewOptions(string Query = "", string Kind = "all", string Sort = "version", bool Ascending = false, string Notice = "")
+internal sealed record InstallationViewOptions(string Query = "", string Kind = "all", string Sort = "version", bool Ascending = false, string Notice = "", string Selected = "", bool OpenInstall = false, string InstallProduct = "SDK", string InstallView = "latest", bool InstallPreviews = false, string InstallQuery = "")
 {
-    public static InstallationViewOptions From(IQueryCollection query) => new(
-        query["q"].ToString(),
-        query["kind"].ToString() is "sdks" or "runtimes" ? query["kind"].ToString() : "all",
-        query["sort"].ToString() is "name" or "path" ? query["sort"].ToString() : "version",
-        query["direction"] == "asc",
-        query["notice"].ToString());
+    public static InstallationViewOptions From(IQueryCollection query)
+    {
+        var kind = query["kind"].ToString() is "sdks" or "runtimes" or "previews" ? query["kind"].ToString() : "all";
+        var openInstall = query["install"].ToString() is "1" or "true" or "open" || query["tab"].ToString() is "all-releases" or "all";
+
+        return new(
+            query["q"].ToString(),
+            kind,
+            query["sort"].ToString() is "name" or "path" ? query["sort"].ToString() : "version",
+            query["direction"] == "asc",
+            query["notice"].ToString(),
+            query["selected"].ToString(),
+            openInstall,
+            query["product"].ToString() == "runtime" ? ".NET Runtime" : "SDK",
+            query["view"].ToString() is "supported" or "lts" or "all" ? query["view"].ToString() : "latest",
+            query["previews"].ToString() == "true",
+            query["installQ"].ToString().Trim());
+    }
 }
 
 internal static class InstallationPage
 {
-    private sealed record Row(string Kind, string Name, string Description, string Version, IReadOnlyList<string> Paths, bool CanRemove)
+    internal sealed record Row(
+        string Kind,
+        string Name,
+        string Description,
+        string Version,
+        string DisplayVersion,
+        IReadOnlyList<string> Paths,
+        bool CanRemove,
+        string Channel,
+        SupportStatus Support,
+        bool IsPreview,
+        string? LatestPatchVersion = null,
+        bool LatestPatchInstalled = false,
+        string? PackageVersion = null,
+        string? PackageDate = null,
+        string? PackageRuntime = null,
+        string? PackageUrl = null,
+        string? PackageSha512 = null,
+        IReadOnlyList<SdkCve>? Cves = null,
+        string? IncludedRuntime = null,
+        string? ReleasedDate = null,
+        string? EquivalentCommand = null)
     {
         public string Path => string.Join(" ", Paths);
+        public bool IsLts => Support.IsLts;
+        public bool IsEol => Support.IsEol;
+        public bool HasPatch => !IsEol && !string.IsNullOrEmpty(LatestPatchVersion) && LatestPatchVersion != Version && LatestPatchVersion != DisplayVersion;
+        public bool HasPackageInfo => !string.IsNullOrEmpty(PackageUrl) || !string.IsNullOrEmpty(PackageSha512);
     }
 
     private static readonly IComparer<string> VersionComparer = Comparer<string>.Create((left, right) =>
         CultureInfo.InvariantCulture.CompareInfo.Compare(left, right, CompareOptions.IgnoreCase | CompareOptions.NumericOrdering));
 
-    public static string Render(InstallationSnapshot snapshot, InstallationViewOptions options)
+    public static string Render(InstallationSnapshot snapshot, InstallationViewOptions options) =>
+        Render(snapshot, null, options);
+
+    public static string Render(InstallationSnapshot snapshot, SdkDownloadSnapshot? sdkSnapshot, InstallationViewOptions options, DateOnly? today = null, int? navTools = null)
     {
-        var allRows = BuildRows(snapshot);
+        var currentDate = today ?? SupportLifecycle.Today;
+        var health = EnvironmentHealth.Evaluate(snapshot, sdkSnapshot, currentDate);
+        var allRows = BuildRows(snapshot, sdkSnapshot, currentDate);
         var rows = FilterRows(allRows, options);
         var total = allRows.Length;
         var runtimeCount = allRows.Count(row => row.Kind == "runtime");
         var inventoryDescription = snapshot.ExecutablePath is null
             ? "Versions reported by dotnet-core-uninstall."
             : "The .NET installation available on your PATH.";
+
+        var selectedRow = !string.IsNullOrWhiteSpace(options.Selected)
+            ? allRows.FirstOrDefault(r => r.Version == options.Selected || r.DisplayVersion == options.Selected)
+            : null;
+
         var content = snapshot.Status switch
         {
             "notFound" => """
@@ -40,128 +91,955 @@ public static string Render(InstallationSnapshot snapshot, InstallationViewOptio
                 """,
             "error" => $"<div class=\"empty-state error-state\" role=\"alert\"><h3>Installation information is unavailable</h3><p>{Encode(snapshot.Error ?? "The installation could not be read.")}</p><a class=\"button\" href=\"{RefreshLink(options, snapshot.CheckedAt)}\">Try again</a></div>",
             _ when total == 0 => $"<div class=\"empty-state\"><h3>No SDKs or runtimes found</h3><p class=\"muted\">{(snapshot.ExecutablePath is null ? "dotnet-core-uninstall reported no removable SDKs or runtimes." : "The dotnet host reported no installed SDKs or runtimes.")}</p></div>",
-            _ => RenderTable(rows, options)
+            _ => RenderVersionsHub(allRows, rows, options, selectedRow)
         };
 
+        var sdkCount = allRows.Count(row => row.Kind == "sdk");
+        var isFiltered = options.Kind != "all" || !string.IsNullOrWhiteSpace(options.Query);
+        var filterNavHtml = $"""
+            <div class="segmented">
+              {KindSegment("All", "all", total, options, " versions")}
+              {KindSegment("SDKs", "sdks", sdkCount, options)}
+              {KindSegment("Runtimes", "runtimes", runtimeCount, options)}
+            </div>
+            <a href="{Link(options with { Kind = options.Kind == "previews" ? "all" : "previews" })}" class="toggle-chip {(options.Kind == "previews" ? "active" : "")}" data-version-kind="previews"{(options.Kind == "previews" ? " aria-current=\"page\"" : "")}><span class="chip-box" aria-hidden="true">{Icon("check", "xs")}</span>Previews</a>
+            """;
+
+        var hasSuperseded = allRows
+            .Where(r => r.CanRemove)
+            .GroupBy(r => (r.Channel, r.Kind))
+            .Any(g => g.Count() > 1);
+        var hasRemovablePreviews = allRows.Any(r => r.CanRemove && r.IsPreview);
+        var hasRemovableEol = allRows.Any(r => r.CanRemove && r.IsEol);
+        var canSmartCleanup = hasSuperseded || hasRemovablePreviews || hasRemovableEol;
+        var defaultCleanupMode = hasSuperseded
+            ? "superseded"
+            : hasRemovablePreviews
+                ? "previews"
+                : "eol";
+
         return PageLayout.Render($$"""
-                  <div class="breadcrumb">Environment <span>/</span> Installations</div>
                   <div class="page-heading">
-                    <div><h1>Your .NET environment</h1><p class="muted intro">Installed SDKs and runtimes, in one place.</p></div>
-                    <a class="button primary" href="{{RefreshLink(options, snapshot.CheckedAt)}}">{{Icon("refresh")}} Refresh</a>
+                    <div>
+                      <h1>Versions</h1>
+                      <p class="muted intro">Installed SDKs and runtimes, organised by release channel.</p>
+                    </div>
+                    <div class="overview-header-actions">
+                      {{(canSmartCleanup ? $"<button type=\"button\" class=\"button\" id=\"open-cleanup-btn\" hidden data-js-only data-cleanup-action=\"{defaultCleanupMode}\">{Icon("sparkle", "xs")} Clean up…</button>" : "")}}
+                      <a class="button primary" id="open-install-dotnet-btn" href="/?install=1">{{Icon("download", "xs")}} Install .NET</a>
+                    </div>
                   </div>
                   {{RenderNotice(options.Notice)}}
-                  <section class="summary-grid" aria-label="Installation summary">
-                    {{SummaryCard("Installed SDKs", snapshot.Sdks.Length.ToString(CultureInfo.InvariantCulture), "Build and develop applications", "code")}}
-                    {{SummaryCard("Installed runtimes", runtimeCount.ToString(CultureInfo.InvariantCulture), "Run .NET applications", "server")}}
-                    {{SummaryCard("This machine", snapshot.Architecture.ToUpperInvariant(), snapshot.OperatingSystem, "desktop")}}
-                  </section>
+                  <div class="sr-only" aria-label="Installation summary">
+                    <span>Installed runtimes</span>
+                    <strong class="summary-number">{{runtimeCount}}</strong>
+                  </div>
+
                   <section class="inventory" id="inventory" aria-labelledby="inventory-title">
-                    <div class="inventory-heading"><div><h2 id="inventory-title">Installed versions</h2><p class="muted">{{inventoryDescription}}</p></div><fluent-badge appearance="outline" color="brand" class="inventory-count">{{total}} installed</fluent-badge></div>
-                    <div class="inventory-toolbar">
-                      <nav class="type-filter" aria-label="Installation type">
-                        {{TypeLink("All versions", "all", options)}}{{TypeLink("SDKs", "sdks", options)}}{{TypeLink("Runtimes", "runtimes", options)}}
+                    <div class="sr-only">
+                      <h2 id="inventory-title">Installed versions</h2>
+                      <p class="muted">{{inventoryDescription}}</p>
+                    </div>
+                    <div class="filter-bar">
+                      <nav class="filter-group" aria-label="Installation type">
+                        {{filterNavHtml}}
                       </nav>
-                      <form class="filter-form" method="get" action="/#inventory" role="search">
-                        <input type="hidden" name="kind" value="{{Encode(options.Kind)}}">
-                        <input type="hidden" name="sort" value="{{Encode(options.Sort)}}">
+                      <span class="filter-count" data-versions-count {{(isFiltered ? "" : "hidden")}}>{{rows.Length}} of {{total}} installations shown</span>
+                      <a class="filter-reset" href="/" data-filter-reset {{(isFiltered ? "" : "hidden")}}>Reset</a>
+                      <span class="spacer"></span>
+                      {{SortMenu(options)}}
+                      <form method="get" action="/" class="filter-form" role="search" data-versions-filter>
+                        <label class="search-field">
+                          {{Icon("search", "xs")}}
+                          <input id="installed-version-filter" type="search" name="q" value="{{Encode(options.Query)}}" placeholder="Filter by version or path" aria-label="Filter installed versions">
+                        </label>
+                        <input type="hidden" name="kind" value="{{options.Kind}}">
+                        <input type="hidden" name="sort" value="{{options.Sort}}">
                         <input type="hidden" name="direction" value="{{(options.Ascending ? "asc" : "desc")}}">
-                        <label class="filter-input">{{Icon("search")}}<input type="search" name="q" value="{{Encode(options.Query)}}" placeholder="Filter versions, names, or paths" aria-label="Filter installed versions"></label>
-                        <button class="button" type="submit">Filter</button>
+                        <noscript><button class="button sm" type="submit">Filter</button></noscript>
                       </form>
                     </div>
                     {{content}}
-                    <div class="inventory-footer"><span>{{rows.Length}} of {{total}} installations shown</span><span>Checked <time datetime="{{snapshot.CheckedAt.ToString("O", CultureInfo.InvariantCulture)}}">{{snapshot.CheckedAt.ToLocalTime().ToString("HH:mm:ss", CultureInfo.InvariantCulture)}}</time></span></div>
                   </section>
-                  {{(snapshot.ExecutablePath is null ? "" : $"<div class=\"host-info\"><span class=\"status-dot\"></span><span>dotnet host</span><code>{Encode(snapshot.ExecutablePath)}</code></div>")}}
+                  {{RenderInstallDotnetSheet(sdkSnapshot ?? new("ready", []), snapshot, options, currentDate)}}
                   <p class="scope-note muted">Locations include the version subfolder. When dotnet-core-uninstall is installed, only versions it can remove are shown; runtime frameworks that share a version are grouped together. Separate installations and other architectures may not appear here.</p>
-            """, "/");
+                  """, "/", ".NET Cockpit", health.Count, total, navTools, WebUtility.HtmlDecode(RefreshLink(options, snapshot.CheckedAt)), snapshot.Signature);
+    }
+
+    private static string RenderVersionsHub(Row[] allRows, Row[] rows, InstallationViewOptions options, Row? selectedRow)
+    {
+        var showActions = allRows.Any(row => row.CanRemove);
+
+        // Preserve the sorted order of `rows` from FilterRows when grouping by channel
+        var channelGroups = rows
+            .GroupBy(r => r.Channel)
+            .ToArray();
+
+        var tableBody = string.Concat(channelGroups.Select(group =>
+        {
+            var channel = group.Key;
+            var support = group.First().Support;
+            var isEol = support.IsEol;
+            var isPreviewChannel = support.State == SupportState.Preview || group.All(r => r.IsPreview);
+            var lifeTextClass = isEol ? "bad" : support.IsEndingSoon ? "warn" : "";
+            var tagClass = isPreviewChannel ? "preview" : (support.IsLts ? "lts" : "sts");
+            var tagLabel = isPreviewChannel ? "Preview" : support.ReleaseType;
+
+            var removeAll = group.Any(r => r.CanRemove)
+                ? $"<a class=\"button sm {(isEol ? "danger" : "remove")}\" href=\"/confirm?action=channel-remove&amp;channel={channel}\" data-remove-channel=\"{channel}\" aria-label=\"Remove all of .NET {channel}\">Remove all</a>"
+                : "";
+
+            var headerRow = $"""
+                <tr class="channel-header-row" role="row" data-channel-header="{channel}">
+                  <td role="cell">
+                    <div class="channel-header-card">
+                      <span class="chevron-slot"><button type="button" class="button icon sm ghost channel-collapse-btn" data-collapse-channel="{channel}" aria-label="Toggle .NET {channel} channel" aria-expanded="true" hidden data-js-only>{Icon("chevd", "sm")}</button></span>
+                      <div class="channel-title-row">
+                        <strong class="channel-title">.NET {channel}</strong>
+                        {(tagLabel.Length > 0 ? $"<span class=\"channel-tag {tagClass}\">{tagLabel}</span>" : "")}
+                      </div>
+                      <span class="life-status {lifeTextClass}">{Encode(support.Label)}</span>
+                      <span class="channel-actions">{removeAll}</span>
+                    </div>
+                  </td>
+                </tr>
+                """;
+
+            var rowsHtml = string.Concat(group.Select(row =>
+            {
+                var isSelected = selectedRow?.Version == row.Version;
+                var fullVersion = $"<span class=\"sr-only\" data-full-version>{Encode(row.Version)}</span>";
+                var versionCell = row.HasPatch
+                    ? $"""<div class="version-patch-flow">{fullVersion}<span class="v-current">{Encode(row.DisplayVersion)}</span><span class="v-arrow" aria-hidden="true">→</span><span class="sr-only">, patch available: {Encode(row.LatestPatchVersion!)}</span><span class="v-patch" aria-hidden="true">{Encode(ShortPatchTarget(row.DisplayVersion, row.LatestPatchVersion!))}</span></div>"""
+                    : row.IsEol || row.Support.State == SupportState.Unknown
+                        ? $"""<div class="version-patch-flow">{fullVersion}<span class="v-current">{Encode(row.DisplayVersion)}</span></div>"""
+                        : $"""<div class="version-patch-flow">{fullVersion}<span class="v-current">{Encode(row.DisplayVersion)}</span><span class="v-ok" title="Latest patch">{Icon("check", "xs")}<span class="sr-only">Latest patch</span></span></div>""";
+
+                var primaryPath = row.Paths.FirstOrDefault() ?? "";
+                var extraPaths = row.Paths.Count > 1 ? $"<span class=\"sr-only\"> {Encode(string.Join(" ", row.Paths.Skip(1)))}</span>" : "";
+                return $"""
+                    <tr data-kind="{row.Kind}" role="row" data-drawer-key="{Encode(row.Version)}" data-preview="{(row.IsPreview ? "true" : "false")}"{(isSelected ? " class=\"row-selected\"" : "")}>
+                      <td role="cell" class="cell-name"><strong>{Encode(row.Name)}</strong><span class="muted framework-name">{Encode(ShortFrameworkSubtitle(row.Description))}<span class="sr-only"> {Encode(row.Description)}</span></span></td>
+                      <td role="cell" class="cell-path"><code class="installation-path" title="{Encode(primaryPath)}"><bdi>{Encode(primaryPath)}</bdi>{extraPaths}</code></td>
+                      <td role="cell" class="cell-version">{versionCell}</td>
+                      <td role="cell" class="cell-actions">
+                        <a href="{Link(options with { Selected = row.Version })}" class="button sm ghost inspect-btn" data-inspect="{Encode(row.Version)}" aria-label="Inspect {Encode(row.Version)}">Inspect</a>
+                        {RemoveAction(row, options)}
+                      </td>
+                    </tr>
+                    """;
+            }));
+
+            var cardState = isEol ? "eol" : support.IsEndingSoon ? "ending" : "ok";
+            return $"""
+                <tbody class="channel-card" role="rowgroup" data-channel-card="{channel}" data-state="{cardState}">
+                  {headerRow}
+                  {rowsHtml}
+                </tbody>
+                """;
+        }));
+
+        var emptyRow = $"""<tr class="empty-row" role="row" {(rows.Length == 0 ? "" : "hidden")}><td role="cell"><div class="empty-state"><h3>No matching versions</h3><p class="muted">Try another filter or switch to All versions.</p><a class="button" href="/">Clear filters</a></div></td></tr>""";
+
+        var drawerHtml = RenderDrawer(selectedRow, options, allRows);
+        var jsonDictionary = SerializeRowsJson(allRows);
+        var multiRemoveForm = showActions
+            ? $"""
+              <form id="remove-dialog-form" method="post" action="/installation/remove" hidden>
+                <input type="hidden" name="viewKind" value="{options.Kind}">
+                <input type="hidden" name="q" value="{Encode(options.Query)}">
+                <input type="hidden" name="sort" value="{options.Sort}">
+                <input type="hidden" name="direction" value="{(options.Ascending ? "asc" : "desc")}">
+                <div id="remove-dialog-form-inputs"></div>
+              </form>
+              """
+            : "";
+
+        return $$"""
+            <div class="versions-hub" id="versions-hub">
+              <div class="versions-list">
+                <div class="table-scroll" role="region" aria-label="Installed .NET versions" tabindex="0">
+                  <table class="versions-table" role="table" aria-label="Installed .NET versions">
+                    <thead class="sr-only" role="rowgroup"><tr role="row"><th scope="col" role="columnheader">Installation</th><th scope="col" role="columnheader">Location</th><th scope="col" role="columnheader">Version</th><th scope="col" role="columnheader">Actions</th></tr></thead>
+                    {{tableBody}}
+                    <tbody role="rowgroup">
+                      {{emptyRow}}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              {{drawerHtml}}
+            </div>
+            <dialog id="remove-dialog" class="remove-modal" closedby="any" aria-labelledby="remove-dialog-title">
+              <div class="remove-modal-inner">
+                <div class="remove-modal-head">
+                  <div class="remove-modal-icon" id="remove-dialog-icon">{{Icon("trash", "sm")}}</div>
+                  <div>
+                    <h2 id="remove-dialog-title">Remove .NET version from this machine?</h2>
+                    <p id="remove-dialog-subtitle" class="muted">1 item selected for removal.</p>
+                  </div>
+                </div>
+                <div id="remove-dialog-modes" class="cleanup-strategy-grid" role="group" aria-label="Cleanup strategy" hidden>
+                  <button type="button" class="cleanup-strategy-card" data-remove-mode="superseded">
+                    <strong>Older versions</strong>
+                    <span class="muted text-xs">Keeps the newest SDK and runtime in each channel.</span>
+                  </button>
+                  <button type="button" class="cleanup-strategy-card" data-remove-mode="previews">
+                    <strong>Previews</strong>
+                    <span class="muted text-xs">Removes preview and RC installations. Stable releases stay.</span>
+                  </button>
+                  <button type="button" class="cleanup-strategy-card" data-remove-mode="eol">
+                    <strong>Out of support</strong>
+                    <span class="muted text-xs">Removes versions that no longer receive security fixes.</span>
+                  </button>
+                </div>
+                <div id="remove-dialog-items" class="remove-modal-items"></div>
+                <div class="remove-modal-notice">
+                  <span class="notice-lock">{{Icon("lock", "sm")}}</span>
+                  <div>
+                    <strong>{{ConfirmActions.AdminNote}}</strong>
+                    <p id="remove-dialog-warn" class="muted">Removal runs through Microsoft's dotnet-core-uninstall. {{ConfirmActions.YesFlagNote}}</p>
+                  </div>
+                </div>
+                <div class="drawer-command-box">
+                  <span class="cmd-prompt">$</span>
+                  <code id="remove-dialog-cmd">sudo dotnet-core-uninstall remove</code>
+                  <button class="button icon ghost copy-btn" id="remove-dialog-copy" type="button" title="Copy command" aria-label="Copy command">{{Icon("clipboard")}}</button>
+                </div>
+                {{multiRemoveForm}}
+                <div class="remove-modal-foot">
+                  <button type="button" class="button" id="remove-dialog-cancel" autofocus>Cancel</button>
+                  <button type="button" class="button danger" id="remove-dialog-confirm">{{Icon("trash", "xs")}} <span id="remove-dialog-confirm-text">Remove</span></button>
+                </div>
+              </div>
+            </dialog>
+            <script id="versions-data" type="application/json">
+            {{jsonDictionary}}
+            </script>
+            """;
+    }
+
+    /// <summary>One server-rendered detail panel per row. Without JavaScript the selected one is rendered directly; with it, app.js swaps them in from templates.</summary>
+    private static string RenderDrawer(Row? selected, InstallationViewOptions options, Row[] allRows)
+    {
+        var templates = string.Concat(allRows.Select(row =>
+            $"<template data-drawer-content=\"{Encode(row.Version)}\">{RenderDrawerContent(row, options, allRows)}</template>"));
+        return $"""
+            <aside id="version-drawer" class="detail-drawer" {(selected is null ? "hidden" : "")} aria-label="Version details">{(selected is null ? "" : RenderDrawerContent(selected, options, allRows))}</aside>
+            {templates}
+            """;
+    }
+
+    private static string RenderDrawerContent(Row row, InstallationViewOptions options, Row[] allRows)
+    {
+        var support = row.Support;
+        var channelType = row.IsPreview
+            ? "Preview release"
+            : support.IsLts
+                ? "Long Term Support"
+                : support.ReleaseType == "STS"
+                    ? "Standard Term Support"
+                    : "Support type unavailable";
+
+        var badgeHtml = row.IsEol
+            ? "<span class=\"badge bad\">End of life</span>"
+            : row.HasPatch
+                ? "<span class=\"badge warn\">Patch available</span>"
+                : "";
+
+        var hasSdkInChannel = allRows.Any(r => r.Channel == row.Channel && r.Kind == "sdk");
+        var patchAlertText = row.Kind == "runtime" && hasSdkInChannel
+            ? $"A newer update in the .NET {row.Channel} channel includes security and reliability fixes. The matching SDK package updates this runtime too."
+            : $"A newer update in the .NET {row.Channel} channel includes security and reliability fixes.";
+
+        var supportedChannel = allRows
+            .Where(r => r.Channel != row.Channel && r.Support.State == SupportState.Supported && !r.IsPreview)
+            .OrderByDescending(r => r.Version, SdkVersionComparer.Instance)
+            .FirstOrDefault();
+        var upgradeHint = supportedChannel is null
+            ? "We recommend moving to a supported release."
+            : $".NET {supportedChannel.Channel} is already installed and supported.";
+
+        var alertHtml = row.IsEol
+            ? $"""
+              <div class="drawer-alert drawer-alert-bad">
+                <strong>.NET {row.Channel} no longer receives security fixes</strong>
+                <p class="muted">{Encode(support.Label)}. {Encode(upgradeHint)}</p>
+              </div>
+              """
+            : support.IsEndingSoon
+                ? $"""
+                  <div class="drawer-alert drawer-alert-warn">
+                    <strong>.NET {row.Channel} support ends {SupportLifecycle.RelativeDays(support.DaysLeft ?? 0)}</strong>
+                    <p class="muted">No more security fixes after {Encode(support.EndDate)}. {Encode(upgradeHint)}</p>
+                  </div>
+                  """
+                : row.HasPatch && row.LatestPatchInstalled
+                    ? $"""
+                      <div class="drawer-alert drawer-alert-warn">
+                        <strong>Newer release {Encode(row.LatestPatchVersion!)} is already installed</strong>
+                        <p class="muted">You can remove {Encode(row.DisplayVersion)} if no global.json pins it.</p>
+                      </div>
+                      """
+                    : row.HasPatch
+                        ? $"""
+                          <div class="drawer-alert drawer-alert-warn">
+                            <strong>Newer release {Encode(row.LatestPatchVersion!)} available</strong>
+                            <p class="muted">{Encode(patchAlertText)}</p>
+                          </div>
+                          """
+                        : $"""<p class="drawer-status-line">{Icon("check", "xs")} {Encode(support.State == SupportState.Unknown ? "Patch and support status unavailable" : $"Latest patch installed. {support.Label}.")}</p>""";
+
+        var pkgTitle = row.HasPatch ? "Newest patch" : "Release package & security";
+        var pkgVer = row.PackageVersion ?? row.DisplayVersion;
+        var pkgDate = row.PackageDate ?? row.ReleasedDate;
+        var pkgRuntime = row.PackageRuntime is { Length: > 0 } packageRuntime ? $"Runtime {ShortDisplayVersion(packageRuntime)}" : "";
+        var pkgMeta = string.Join(" · ", new[] { pkgDate, pkgRuntime }.Where(value => !string.IsNullOrEmpty(value)));
+        var cveBadgeHtml = row.Cves is { Count: > 0 }
+            ? $"<span class=\"badge sm\">{row.Cves.Count} security {(row.Cves.Count == 1 ? "fix" : "fixes")}</span>"
+            : "";
+        var cvePillsHtml = string.Concat((row.Cves ?? []).Take(6).Select(c =>
+            $"<a class=\"cve-pill\" href=\"{Encode(c.Url ?? "#")}\" target=\"_blank\" rel=\"noopener\">{Encode(c.Id)}</a>"));
+
+        var patchSection = row.HasPackageInfo
+            ? $"""
+              <div class="drawer-section">
+                <div class="drawer-patch-box">
+                  <h4 class="drawer-section-title">{pkgTitle}</h4>
+                  <div class="drawer-patch-header">
+                    <strong>{Encode(pkgVer)}</strong>
+                    <span class="muted text-xs">{Encode(pkgMeta)}</span>
+                  </div>
+                  {(cveBadgeHtml.Length + cvePillsHtml.Length > 0 ? $"<div class=\"drawer-cve-list\">{cveBadgeHtml}{cvePillsHtml}</div>" : "")}
+                  <div class="drawer-code-box">
+                    <span class="drawer-pkg-meta">{Icon("package", "xs")} <span class="drawer-pkg-name">{Encode(GetInstallerFileName(row.PackageUrl))}</span> · SHA-512 <code class="drawer-sha">{Encode(ShortSha(row.PackageSha512))}</code></span>
+                    <button class="button icon ghost copy-btn" data-copy="{Encode(row.PackageSha512 ?? "")}" type="button" title="Copy SHA-512" aria-label="Copy SHA-512">{Icon("clipboard")}</button>
+                  </div>
+                </div>
+              </div>
+              """
+            : "";
+
+        var command = row.EquivalentCommand ?? "";
+        var needsPatchDownload = row.HasPatch && !row.LatestPatchInstalled;
+        var downloadBtn = string.IsNullOrEmpty(row.PackageUrl)
+            ? ""
+            : needsPatchDownload
+                ? $"<a class=\"button primary drawer-primary-btn\" href=\"{Encode(row.PackageUrl)}\" download>{Icon("download", "sm")} Download {Encode(row.LatestPatchVersion!)}</a>"
+                : $"<a class=\"button ghost drawer-primary-btn\" href=\"{Encode(row.PackageUrl)}\" download>{Icon("download", "sm")} Download again</a>";
+
+        var removeAction = row.CanRemove
+            ? ConfirmActions.Trigger(ConfirmActions.VersionRemove(row, options), $"<button class=\"button remove drawer-remove-btn\" type=\"submit\">{Icon("trash", "xs")} Remove</button>")
+            : "";
+
+        var runtimeLabel = row.Kind == "sdk" ? "Included runtime" : "Frameworks";
+        var runtimeValue = row.IncludedRuntime ?? ShortFrameworkSubtitle(row.Description);
+        var location = row.Paths.FirstOrDefault();
+
+        var drawerTitleHtml = row.Version.StartsWith(row.DisplayVersion, StringComparison.Ordinal) && row.Version.Length > row.DisplayVersion.Length
+            ? $"{Encode(row.DisplayVersion)}<span class=\"sr-only\">{Encode(row.Version[row.DisplayVersion.Length..])}</span>"
+            : Encode(row.Version);
+
+        return $$"""
+              <div class="drawer-header">
+                <div class="drawer-eyebrow-row">
+                  <span id="drawer-eyebrow">.NET {{row.Channel}} · {{(row.Kind == "sdk" ? "SDK" : "Runtime")}}</span>
+                  <a href="{{Link(options with { Selected = "" })}}" id="drawer-close" data-drawer-close class="button icon ghost drawer-close-btn" aria-label="Close details">{{Icon("x", "sm")}}</a>
+                </div>
+                <div class="drawer-title-row">
+                  <h3 id="drawer-title" class="drawer-title">{{drawerTitleHtml}}</h3>
+                  {{badgeHtml}}
+                </div>
+              </div>
+              <div class="drawer-body">
+                {{alertHtml}}
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">Installed</h4>
+                  <dl class="drawer-dl">
+                    <dt>Channel</dt>
+                    <dd>{{row.Channel}}.0 · {{channelType}}</dd>
+                    <dt>{{runtimeLabel}}</dt>
+                    <dd>{{Encode(runtimeValue)}}</dd>
+                    {{(row.ReleasedDate is { Length: > 0 } released ? $"<dt>Released</dt><dd>{Encode(released)}</dd>" : "")}}
+                    {{(location is null ? "" : $$"""
+                    <dt>Location</dt>
+                    <dd>
+                      <div class="drawer-code-box">
+                        <code class="drawer-path">{{Encode(location)}}</code>
+                        <button class="button icon ghost copy-btn" data-copy="{{Encode(location)}}" type="button" title="Copy path" aria-label="Copy path">{{Icon("clipboard")}}</button>
+                      </div>
+                    </dd>
+                    """)}}
+                  </dl>
+                </div>
+                {{patchSection}}
+                {{(row.CanRemove ? $$"""
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">Command to remove this version</h4>
+                  <div class="drawer-command-box">
+                    <span class="cmd-prompt">$</span>
+                    <code id="drawer-command">{{Encode(command)}}</code>
+                    <button class="button icon ghost copy-btn" data-copy="{{Encode(command)}}" type="button" title="Copy command" aria-label="Copy command">{{Icon("clipboard")}}</button>
+                  </div>
+                </div>
+                """ : "")}}
+              </div>
+              {{(downloadBtn.Length + removeAction.Length > 0 ? $"<div class=\"drawer-footer\">{downloadBtn}{removeAction}</div>" : "")}}
+            """;
+    }
+
+    private static string RenderInstallDotnetSheet(SdkDownloadSnapshot sdkSnapshot, InstallationSnapshot installation, InstallationViewOptions options, DateOnly today)
+    {
+        var open = options.OpenInstall;
+        string SheetLink(string? product = null, string? view = null, bool? previews = null)
+        {
+            var targetProduct = product ?? options.InstallProduct;
+            var targetView = view ?? options.InstallView;
+            var targetPreviews = previews ?? options.InstallPreviews;
+            var query = options.InstallQuery.Length > 0 ? $"&installQ={Uri.EscapeDataString(options.InstallQuery)}" : "";
+            return Encode($"/?install=1&product={(targetProduct == "SDK" ? "sdk" : "runtime")}&view={targetView}&previews={(targetPreviews ? "true" : "false")}{query}");
+        }
+        string ProductSegment(string product, string label) =>
+            $"<a class=\"seg {(options.InstallProduct == product ? "active" : "")}\" href=\"{SheetLink(product: product)}\" data-install-product=\"{product}\" aria-pressed=\"{(options.InstallProduct == product ? "true" : "false")}\" role=\"button\">{label}</a>";
+        string ViewSegment(string view, string label) =>
+            $"<a class=\"seg {(options.InstallView == view ? "active" : "")}\" href=\"{SheetLink(view: view)}\" data-install-lifecycle=\"{view}\" aria-pressed=\"{(options.InstallView == view ? "true" : "false")}\" role=\"button\">{label}</a>";
+
+        static bool IsDownloadEol(SdkDownload download, DateOnly date) =>
+            string.Equals(download.SupportPhase, "EOL", StringComparison.OrdinalIgnoreCase) ||
+            SupportLifecycle.ParseDate(download.EndOfSupportDate) is { } end && end < date;
+
+        var installedSdks = installation.Sdks
+            .SelectMany(s => new[] { s.Version, ShortDisplayVersion(s.Version) })
+            .ToHashSet(StringComparer.OrdinalIgnoreCase);
+        var installedRuntimes = installation.Runtimes
+            .SelectMany(r => new[] { r.Version, ShortDisplayVersion(r.Version) })
+            .ToHashSet(StringComparer.OrdinalIgnoreCase);
+
+        var downloads = sdkSnapshot.Downloads ?? [];
+        const int releasesPerChannel = 8;
+        var channelLeaders = downloads
+            .GroupBy(d => (d.Product, d.Channel))
+            .Select(g => g.OrderByDescending(d => d.Version, SdkVersionComparer.Instance).First())
+            .ToHashSet();
+        var latestStableLeaders = downloads
+            .Where(d => !d.Version.Contains("-preview", StringComparison.OrdinalIgnoreCase) && !d.Version.Contains("-rc", StringComparison.OrdinalIgnoreCase))
+            .GroupBy(d => (d.Product, d.Channel))
+            .Select(g => g.OrderByDescending(d => d.Version, SdkVersionComparer.Instance).First())
+            .ToHashSet();
+
+        var curated = downloads
+            .GroupBy(d => (d.Product, d.Channel))
+            .SelectMany(g => g
+                .OrderByDescending(d => d.Version, SdkVersionComparer.Instance)
+                .Take(releasesPerChannel))
+            .OrderByDescending(d => int.TryParse(d.Channel.Split('.')[0], out var ch) ? ch : 0)
+            .ThenByDescending(d => d.Version, SdkVersionComparer.Instance)
+            .ToArray();
+
+
+        string resultsHtml;
+        if (sdkSnapshot.Status != "ready" || curated.Length == 0)
+        {
+            resultsHtml = $"""
+                <div class="empty-state error-state">
+                  <h3>Release catalog unavailable</h3>
+                  <p class="muted">{Encode(sdkSnapshot.Error ?? "Could not load official Microsoft release metadata right now.")}</p>
+                </div>
+                """;
+        }
+        else
+        {
+            var channelGroups = curated
+                .GroupBy(d => d.Channel.Split('.')[0])
+                .OrderByDescending(g => int.TryParse(g.Key, out var ch) ? ch : 0)
+                .ToArray();
+
+            var totalVisible = 0;
+            var groupsHtml = string.Concat(channelGroups.Select(channelGroup =>
+            {
+                var major = channelGroup.Key;
+                var orderedItems = channelGroup
+                    .OrderByDescending(d => d.Version, SdkVersionComparer.Instance)
+                    .ToArray();
+                var sample = orderedItems[0];
+                var chIsPreviewOnly = orderedItems.All(d =>
+                    d.Version.Contains("-preview", StringComparison.OrdinalIgnoreCase) ||
+                    d.Version.Contains("-rc", StringComparison.OrdinalIgnoreCase));
+                var chIsEol = orderedItems.All(d => IsDownloadEol(d, today));
+                var chIsLts = orderedItems.Any(d => string.Equals(d.ReleaseType, "LTS", StringComparison.OrdinalIgnoreCase));
+                var chTagClass = chIsPreviewOnly ? "preview" : (chIsLts ? "lts" : "sts");
+                var chTagLabel = chIsPreviewOnly ? "Preview" : (chIsLts ? "LTS" : "STS");
+                var chPhaseBadge = chIsEol ? "<span class=\"badge bad sm\">End of life</span>" : "";
+
+                var initialVisibleCount = 0;
+                var rowsHtml = string.Concat(orderedItems.Select(d =>
+                {
+                    var isPreview = d.Version.Contains("-preview", StringComparison.OrdinalIgnoreCase) || d.Version.Contains("-rc", StringComparison.OrdinalIgnoreCase);
+                    var isEol = IsDownloadEol(d, today);
+                    var isLts = string.Equals(d.ReleaseType, "LTS", StringComparison.OrdinalIgnoreCase);
+                    static string tagLabelFor(bool preview, bool lts) => preview ? "Preview" : lts ? "LTS" : "STS";
+                    var isInstalled = d.Product == "SDK"
+                        ? installedSdks.Contains(d.Version) || installedSdks.Contains(d.InstallationVersion)
+                        : installedRuntimes.Contains(d.Version) || installedRuntimes.Contains(d.InstallationVersion);
+                    var isLeader = channelLeaders.Contains(d) || latestStableLeaders.Contains(d);
+                    var searchText = $"{d.Product} {d.Version} .NET {major} {d.Channel} {tagLabelFor(isPreview, isLts)} {string.Join(' ', d.Cves.Select(c => c.Id))}";
+                    var matchesView = options.InstallView switch
+                    {
+                        "latest" => !isEol && isLeader,
+                        "supported" => !isEol,
+                        "lts" => !isEol && isLts,
+                        _ => true
+                    };
+                    var matchesQuery = options.InstallQuery.Split(' ', StringSplitOptions.RemoveEmptyEntries).All(term => searchText.Contains(term, StringComparison.OrdinalIgnoreCase));
+                    var initiallyHidden = d.Product != options.InstallProduct || !matchesView || (isPreview && !options.InstallPreviews) || !matchesQuery;
+                    if (!initiallyHidden)
+                    {
+                        initialVisibleCount++;
+                        totalVisible++;
+                    }
+
+                    var tagClass = isPreview ? "preview" : (isLts ? "lts" : "sts");
+                    var tagLabel = isPreview ? "Preview" : (isLts ? "LTS" : "STS");
+                    var statusBadge = isInstalled
+                        ? $"<span class=\"v-ok\">{Icon("check", "xs")} Installed</span>"
+                        : isEol
+                            ? "<span class=\"badge bad sm\">End of life</span>"
+                            : "";
+
+                    var relDate = FormatReleaseDate(d.ReleaseDate) ?? d.ReleaseDate;
+                    var inclRt = ShortDisplayVersion(d.IncludedRuntimeVersion ?? $"{major}.0");
+                    var subtitle = d.Product == "SDK"
+                        ? $"Includes .NET Runtime {inclRt} · Released {relDate}"
+                        : $"Shared framework · Released {relDate}";
+
+                    var fileName = GetInstallerFileName(d.Url);
+                    var shortSha = ShortSha(d.Sha512);
+                    var verifyCmd = FormatVerifyInstallCommand(d.Sha512, fileName);
+
+                    var cveMeta = d.Cves.Length > 0
+                        ? $"<span>{Icon("shield", "xs")} {d.Cves.Length} {(d.Cves.Length == 1 ? "CVE fix" : "CVE fixes")}</span>"
+                        : "";
+
+                    return $"""
+                        <div class="sheet-result-item"
+                             data-install-row
+                             data-product="{Encode(d.Product)}"
+                             data-version="{Encode(d.Version)}"
+                             data-channel="{Encode(major)}"
+                             data-lts="{(isLts ? "true" : "false")}"
+                             data-preview="{(isPreview ? "true" : "false")}"
+                             data-supported="{(!isEol ? "true" : "false")}"
+                             data-latest="{(isLeader ? "true" : "false")}"
+                             data-search="{Encode($"{d.Product} {d.Version} .NET {major} {d.Channel} {tagLabel} {inclRt} {relDate} {string.Join(' ', d.Cves.Select(c => c.Id))}")}"
+                             {(initiallyHidden ? "hidden" : "")}>
+                          <div class="sheet-result-body">
+                            <div class="sheet-result-top">
+                              <strong>.NET {Encode(d.Product == "SDK" ? "SDK" : "Runtime")} {Encode(d.Version)}</strong>
+                              <span class="channel-tag {tagClass}">{tagLabel}</span>
+                              {statusBadge}
+                            </div>
+                            <span class="muted text-xs">{Encode(subtitle)}</span>
+                            <div class="sheet-result-meta muted text-xs">
+                              {(string.IsNullOrEmpty(shortSha) ? "" : $"<span>SHA-512 <code class=\"drawer-sha\" data-copy=\"{Encode(d.Sha512)}\" title=\"Copy SHA-512\">{Encode(shortSha)}</code></span>")}
+                              {cveMeta}
+                            </div>
+                            <details class="row-command">
+                              <summary>Install command</summary>
+                              <div class="drawer-command-box">
+                                <span class="cmd-prompt">$</span>
+                                <code>{Encode(verifyCmd)}</code>
+                                <button class="button icon ghost copy-btn" data-copy="{Encode(verifyCmd)}" type="button" title="Copy command" aria-label="Copy command">{Icon("clipboard")}</button>
+                              </div>
+                            </details>
+                          </div>
+                          <div class="sheet-result-actions">
+                            <a class="button {(isInstalled ? "ghost" : "")} sm" href="{Encode(d.Url)}" download>{Icon("download", "xs")} {(isInstalled ? "Download again" : "Download")}</a>
+                          </div>
+                        </div>
+                        """;
+                }));
+
+                int Available(string product) => downloads.Count(d => d.Product == product && d.Channel.Split('.')[0] == major);
+                var available = Available(options.InstallProduct);
+                var countLabel = initialVisibleCount >= releasesPerChannel && available > initialVisibleCount
+                    ? $"Newest {initialVisibleCount} of {available}"
+                    : initialVisibleCount == 1 ? "1 release" : $"{initialVisibleCount} releases";
+                return $"""
+                    <details class="sheet-channel-group" open data-install-channel-group="{Encode(major)}" data-available-sdk="{Available("SDK")}" data-available-runtime="{Available(".NET Runtime")}" data-cap="{releasesPerChannel}" {(initialVisibleCount == 0 ? "hidden" : "")}>
+                      <summary class="sheet-channel-head">
+                        <span class="sheet-channel-chevron">{Icon("chevd", "xs")}</span>
+                        <div class="sheet-channel-head-main">
+                          <strong>.NET {Encode(major)}</strong>
+                          <span class="channel-tag {chTagClass}">{chTagLabel}</span>
+                          {chPhaseBadge}
+                        </div>
+                        <span class="sheet-channel-count muted text-xs" data-install-channel-count>{countLabel}</span>
+                      </summary>
+                      <div class="sheet-channel-items">
+                        {rowsHtml}
+                      </div>
+                    </details>
+                    """;
+            }));
+
+            resultsHtml = $"""
+                {groupsHtml}
+                <div id="install-dotnet-empty" class="empty-state" {(totalVisible > 0 ? "hidden" : "")}>
+                  <h3>No matching releases</h3>
+                  <p class="muted">Try another search, or choose Everything above.</p>
+                </div>
+                """;
+        }
+
+        return $$"""
+            <dialog id="install-dotnet-dialog" class="add-tool-sheet install-dotnet-sheet" closedby="any" aria-labelledby="install-dotnet-sheet-title" data-product="{{options.InstallProduct}}" data-view="{{options.InstallView}}" data-previews="{{(options.InstallPreviews ? "true" : "false")}}"{{(open ? " open data-open-on-load" : "")}}>
+              <div class="sheet-inner">
+                <div class="sheet-head">
+                  <div class="sheet-title-group">
+                    <h2 id="install-dotnet-sheet-title">Install .NET</h2>
+                    <span class="search-source">builds.dotnet.microsoft.com</span>
+                  </div>
+                  <a class="button icon ghost" id="close-install-dotnet-btn" href="/" aria-label="Close install .NET panel">{{Icon("x", "sm")}}</a>
+                </div>
+
+                <div class="sheet-controls">
+                  <form method="get" action="/" class="filter-form" data-install-search>
+                    <input type="hidden" name="install" value="1">
+                    <input type="hidden" name="product" value="{{(options.InstallProduct == "SDK" ? "sdk" : "runtime")}}">
+                    <input type="hidden" name="view" value="{{options.InstallView}}">
+                    <input type="hidden" name="previews" value="{{(options.InstallPreviews ? "true" : "false")}}">
+                    <label class="search-field wide" for="install-dotnet-search-input">
+                      {{Icon("search", "xs")}}
+                      <input id="install-dotnet-search-input" type="search" name="installQ" value="{{Encode(options.InstallQuery)}}" placeholder="Search by version, channel or CVE" autocomplete="off">
+                    </label>
+                    <noscript><button class="button sm" type="submit">Search</button></noscript>
+                  </form>
+                  <div class="filter-bar">
+                    <div class="segmented" role="group" aria-label="Product">
+                      {{ProductSegment("SDK", "SDK")}}{{ProductSegment(".NET Runtime", "Runtime")}}
+                    </div>
+                    <div class="segmented" role="group" aria-label="Releases to show">
+                      {{ViewSegment("latest", "Latest")}}{{ViewSegment("supported", "All patches")}}{{ViewSegment("lts", "LTS")}}{{ViewSegment("all", "Everything")}}
+                    </div>
+                    <a class="toggle-chip {{(options.InstallPreviews ? "active" : "")}}" href="{{SheetLink(previews: !options.InstallPreviews)}}" data-install-previews aria-pressed="{{(options.InstallPreviews ? "true" : "false")}}" role="button"><span class="chip-box" aria-hidden="true">{{Icon("check", "xs")}}</span>Previews</a>
+                  </div>
+                </div>
+
+                <div id="install-dotnet-results" class="sheet-results">
+                  {{resultsHtml}}
+                </div>
+
+              </div>
+            </dialog>
+            """;
     }
 
-    private static Row[] BuildRows(InstallationSnapshot snapshot)
+    /// <summary>Only what the removal dialog needs. Details live in the server-rendered drawer templates.</summary>
+    private static string SerializeRowsJson(Row[] rows)
+    {
+        var newest = rows
+            .GroupBy(row => (row.Channel, row.Kind))
+            .Select(group => group.OrderByDescending(row => row.Version, SdkVersionComparer.Instance).First())
+            .ToHashSet();
+        var entries = rows.Where(row => row.CanRemove).Select(row =>
+            $"{{\"version\": \"{EscapeJson(row.Version)}\"," +
+            $"\"displayVersion\": \"{EscapeJson(row.DisplayVersion)}\"," +
+            $"\"kind\": \"{row.Kind}\"," +
+            $"\"name\": \"{EscapeJson(row.Name)}\"," +
+            $"\"channel\": \"{EscapeJson(row.Channel)}\"," +
+            $"\"isEol\": {(row.IsEol ? "true" : "false")}," +
+            $"\"isPreview\": {(row.IsPreview ? "true" : "false")}," +
+            $"\"isSuperseded\": {(newest.Contains(row) ? "false" : "true")}," +
+            $"\"location\": \"{EscapeJson(row.Paths.FirstOrDefault() ?? "")}\"," +
+            $"\"command\": \"{EscapeJson(row.EquivalentCommand ?? "")}\"}}");
+        return "[" + string.Join(",\n", entries) + "]";
+    }
+
+    private static string EscapeJson(string value) =>
+        value.Replace("\\", "\\\\").Replace("\"", "\\\"").Replace("<", "\\u003c").Replace(">", "\\u003e").Replace("\r", "").Replace("\n", "\\n");
+
+    internal static Row[] BuildRows(InstallationSnapshot snapshot, SdkDownloadSnapshot? sdkSnapshot, DateOnly today)
     {
+        var downloads = sdkSnapshot?.Downloads ?? [];
+        var installedSdkSet = snapshot.Sdks
+            .SelectMany(s => new[] { s.Version, ShortDisplayVersion(s.Version) })
+            .ToHashSet(StringComparer.OrdinalIgnoreCase);
+        var installedRuntimeSet = snapshot.Runtimes
+            .SelectMany(r => new[] { r.Version, ShortDisplayVersion(r.Version) })
+            .ToHashSet(StringComparer.OrdinalIgnoreCase);
+
         var sdkRows = snapshot.Sdks.Select(sdk =>
         {
-            var path = sdk.InstallationPath;
-            return new Row("sdk", ".NET SDK", "Software development kit", sdk.Version,
-                string.IsNullOrWhiteSpace(path) ? [] : [path], sdk.CanRemove);
+            var major = sdk.Version.Split('.')[0];
+            var support = SupportLifecycle.For(sdkSnapshot, sdk.Version, today);
+            var isEol = support.IsEol;
+            var isPreview = sdk.Version.Contains("-preview", StringComparison.OrdinalIgnoreCase) || sdk.Version.Contains("-rc", StringComparison.OrdinalIgnoreCase);
+            var shortVer = ShortDisplayVersion(sdk.Version);
+
+            var catalogEntry = downloads.FirstOrDefault(d => d.Product == "SDK" && (d.Version == sdk.Version || d.InstallationVersion == sdk.Version || d.Version == shortVer));
+
+            var channelDownloads = downloads
+                .Where(d => d.Product == "SDK" && (d.Channel == major || d.Channel == $"{major}.0") && (isPreview || (!d.Version.Contains("-preview") && !d.Version.Contains("-rc"))))
+                .OrderByDescending(d => d.Version, SdkVersionComparer.Instance)
+                .ToArray();
+            var latest = channelDownloads.FirstOrDefault();
+
+            var bandPrefix = GetSdkFeatureBandPrefix(shortVer);
+            var latestInBand = !string.IsNullOrEmpty(bandPrefix)
+                ? channelDownloads.FirstOrDefault(d => GetSdkFeatureBandPrefix(d.Version) == bandPrefix)
+                : null;
+
+            // An SDK in an active feature band (e.g. 10.0.114 in 10.0.1xx) is up-to-date if it is the newest in its band
+            // and includes the same latest runtime as the channel's newest SDK.
+            var isCurrentFeatureBandLatest = latestInBand != null &&
+                (latestInBand.Version == sdk.Version || latestInBand.Version == shortVer) &&
+                !string.IsNullOrEmpty(catalogEntry?.IncludedRuntimeVersion) &&
+                catalogEntry.IncludedRuntimeVersion == latest?.IncludedRuntimeVersion;
+
+            var patchTarget = (latestInBand != null && latestInBand.IncludedRuntimeVersion == latest?.IncludedRuntimeVersion)
+                ? latestInBand
+                : latest;
+
+            var hasNewerPatch = !isEol && !isCurrentFeatureBandLatest && patchTarget != null &&
+                patchTarget.Version != sdk.Version && patchTarget.InstallationVersion != sdk.Version &&
+                SdkVersionComparer.Instance.Compare(patchTarget.Version, shortVer) > 0;
+
+            var patchAlreadyInstalled = hasNewerPatch && patchTarget != null &&
+                (installedSdkSet.Contains(patchTarget.Version) || installedSdkSet.Contains(patchTarget.InstallationVersion));
+
+            var targetPkg = (hasNewerPatch ? patchTarget : null) ?? catalogEntry ?? latest;
+            var inclRt = ShortDisplayVersion(catalogEntry?.IncludedRuntimeVersion ?? InferRuntimeVersion(shortVer, snapshot.Runtimes, major));
+
+            var cmd = ConfirmActions.RemovalCommand(sdk.Version, "--sdk");
+
+            return new Row(
+                Kind: "sdk",
+                Name: ".NET SDK",
+                Description: $"incl. Runtime {inclRt}",
+                Version: sdk.Version,
+                DisplayVersion: shortVer,
+                Paths: string.IsNullOrWhiteSpace(sdk.InstallationPath) ? [] : [sdk.InstallationPath],
+                CanRemove: sdk.CanRemove,
+                Channel: major,
+                Support: support,
+                IsPreview: isPreview,
+                LatestPatchVersion: hasNewerPatch ? patchTarget!.Version : null,
+                LatestPatchInstalled: patchAlreadyInstalled,
+                PackageVersion: targetPkg?.Version ?? shortVer,
+                PackageDate: FormatReleaseDate(targetPkg?.ReleaseDate),
+                PackageRuntime: targetPkg?.IncludedRuntimeVersion ?? inclRt,
+                PackageUrl: targetPkg?.Url,
+                PackageSha512: targetPkg?.Sha512,
+                Cves: targetPkg?.Cves ?? [],
+                IncludedRuntime: $"{inclRt} + ASP.NET Core",
+                ReleasedDate: FormatReleaseDate(catalogEntry?.ReleaseDate),
+                EquivalentCommand: cmd);
         });
+
         var runtimeRows = snapshot.Runtimes
-            .GroupBy(runtime => runtime.Version, StringComparer.OrdinalIgnoreCase)
+            .GroupBy(runtime => runtime.Version)
             .Select(group =>
             {
                 var runtimes = group.ToArray();
-                var names = runtimes.Select(runtime => RuntimeName(runtime.Name)).Distinct(StringComparer.OrdinalIgnoreCase).ToArray();
-                var descriptions = runtimes.Select(runtime => runtime.Name).Distinct(StringComparer.OrdinalIgnoreCase).ToArray();
-                var paths = runtimes.Select(runtime => runtime.InstallationPath)
-                    .Where(path => !string.IsNullOrWhiteSpace(path))
-                    .Distinct(StringComparer.OrdinalIgnoreCase).ToArray();
-                return new Row("runtime", names.Length == 1 ? names[0] : ".NET Runtime", string.Join(" · ", descriptions), group.Key, paths, runtimes.Any(runtime => runtime.CanRemove));
+                var sample = runtimes[0];
+                var major = sample.Version.Split('.')[0];
+                var support = SupportLifecycle.For(sdkSnapshot, sample.Version, today);
+                var isEol = support.IsEol;
+                var isPreview = sample.Version.Contains("-preview", StringComparison.OrdinalIgnoreCase) || sample.Version.Contains("-rc", StringComparison.OrdinalIgnoreCase);
+                var shortVer = ShortDisplayVersion(sample.Version);
+
+                var catalogEntry = downloads.FirstOrDefault(d => d.Product == ".NET Runtime" && (d.Version == sample.Version || d.InstallationVersion == sample.Version || d.Version == shortVer));
+
+                var channelDownloads = downloads
+                    .Where(d => d.Product == ".NET Runtime" && (d.Channel == major || d.Channel == $"{major}.0") && (isPreview || (!d.Version.Contains("-preview") && !d.Version.Contains("-rc"))))
+                    .OrderByDescending(d => d.Version, SdkVersionComparer.Instance)
+                    .ToArray();
+                var latest = channelDownloads.FirstOrDefault();
+                var hasNewerPatch = !isEol && latest != null && latest.Version != sample.Version && latest.InstallationVersion != sample.Version && SdkVersionComparer.Instance.Compare(latest.Version, shortVer) > 0;
+                var patchAlreadyInstalled = hasNewerPatch && latest != null &&
+                    (installedRuntimeSet.Contains(latest.Version) || installedRuntimeSet.Contains(latest.InstallationVersion));
+                var targetPkg = (hasNewerPatch ? latest : null) ?? catalogEntry ?? latest;
+
+                var cmd = string.Join("\n\n", runtimes.Select(runtime => DotnetUninstallToolService.RuntimeFilter(runtime.Name)).Distinct(StringComparer.Ordinal).Select(filter => ConfirmActions.RemovalCommand(sample.Version, filter)));
+                var description = string.Join(" · ", runtimes.Select(runtime => runtime.Name));
+
+                return new Row(
+                    Kind: "runtime",
+                    Name: runtimes.Length == 1 ? RuntimeName(sample.Name) : ".NET Runtime",
+                    Description: description,
+                    Version: sample.Version,
+                    DisplayVersion: shortVer,
+                    Paths: runtimes.Select(runtime => runtime.InstallationPath).Where(p => !string.IsNullOrWhiteSpace(p)).Distinct().ToArray(),
+                    CanRemove: runtimes.Any(runtime => runtime.CanRemove),
+                    Channel: major,
+                    Support: support,
+                    IsPreview: isPreview,
+                    LatestPatchVersion: hasNewerPatch ? latest!.Version : null,
+                    LatestPatchInstalled: patchAlreadyInstalled,
+                    PackageVersion: targetPkg?.Version ?? shortVer,
+                    PackageDate: FormatReleaseDate(targetPkg?.ReleaseDate),
+                    PackageRuntime: targetPkg?.Version,
+                    PackageUrl: targetPkg?.Url,
+                    PackageSha512: targetPkg?.Sha512,
+                    Cves: targetPkg?.Cves ?? [],
+                    IncludedRuntime: ShortFrameworkSubtitle(description),
+                    ReleasedDate: FormatReleaseDate(catalogEntry?.ReleaseDate),
+                    EquivalentCommand: cmd);
             });
-        return sdkRows.Concat(runtimeRows).ToArray();
+
+        return [.. sdkRows, .. runtimeRows];
+    }
+
+    internal static string GetSdkFeatureBandPrefix(string version)
+    {
+        if (string.IsNullOrWhiteSpace(version) || version.Contains('-')) return "";
+        var parts = version.Split('.');
+        if (parts.Length < 3 || parts[2].Length < 3) return "";
+        return $"{parts[0]}.{parts[1]}.{parts[2][0]}";
+    }
+
+    private static string InferRuntimeVersion(string sdkShortVer, RuntimeInstallation[] runtimes, string major)
+    {
+        if (!sdkShortVer.Contains('-'))
+        {
+            var parts = sdkShortVer.Split('.');
+            if (parts.Length >= 3 && parts[2].Length == 3 && int.TryParse(parts[2][1..], out var patchNum))
+            {
+                var candidate = $"{parts[0]}.{parts[1]}.{patchNum}";
+                if (runtimes.Any(r => r.Version == candidate) || parts[2][0] == '1')
+                    return candidate;
+            }
+        }
+        return runtimes
+            .Where(r => r.Version.StartsWith($"{major}.", StringComparison.Ordinal))
+            .Select(r => ShortDisplayVersion(r.Version))
+            .OrderByDescending(v => v, SdkVersionComparer.Instance)
+            .FirstOrDefault() ?? $"{major}.0";
+    }
+
+    internal static string ShortDisplayVersion(string version)
+    {
+        if (string.IsNullOrWhiteSpace(version)) return "";
+        var dashIdx = version.IndexOf('-');
+        if (dashIdx < 0) return version;
+        var core = version[..dashIdx];
+        var pre = version[(dashIdx + 1)..];
+        var parts = pre.Split('.');
+        if (parts.Length > 2 && (parts[0].Equals("preview", StringComparison.OrdinalIgnoreCase) || parts[0].Equals("rc", StringComparison.OrdinalIgnoreCase)))
+            return $"{core}-{parts[0]}.{parts[1]}";
+        return version;
+    }
+
+    /// <summary>"11.0.100-preview.7" → "11.0.100-rc.3" reads better as "rc.3" once the shared core is on screen.</summary>
+    private static string ShortPatchTarget(string current, string target)
+    {
+        var dash = target.IndexOf('-');
+        return dash > 0 && current.StartsWith(target[..dash], StringComparison.Ordinal) ? target[(dash + 1)..] : target;
     }
 
+    private static string ShortSha(string? sha) =>
+        string.IsNullOrEmpty(sha)
+            ? ""
+            : sha.Length > 12
+                ? $"{sha[..4]}…{sha[^4..]}"
+                : sha;
+
     private static Row[] FilterRows(Row[] allRows, InstallationViewOptions options)
     {
-        var rows = allRows.AsEnumerable();
-        var terms = options.Query.Split((char[]?)null, StringSplitOptions.RemoveEmptyEntries);
-        rows = rows.Where(row => (options.Kind == "all" || (options.Kind == "sdks" ? row.Kind == "sdk" : row.Kind == "runtime")) &&
-            terms.All(term => $"{row.Name} {row.Description} {row.Version} {row.Path}".Contains(term, StringComparison.OrdinalIgnoreCase)));
-        Func<Row, string> key = options.Sort switch { "name" => row => row.Name, "path" => row => row.Path, _ => row => row.Version };
-        var comparer = options.Sort == "version" ? VersionComparer : StringComparer.OrdinalIgnoreCase;
-        return (options.Ascending ? rows.OrderBy(key, comparer) : rows.OrderByDescending(key, comparer))
-            .ThenBy(row => row.Name, StringComparer.OrdinalIgnoreCase).ToArray();
+        var filtered = allRows.Where(row => MatchesKind(row, options.Kind) && MatchesQuery(row, options.Query));
+        return (options.Sort switch
+        {
+            "name" => options.Ascending ? filtered.OrderBy(row => row.Name, StringComparer.OrdinalIgnoreCase).ThenBy(row => row.Version, VersionComparer) : filtered.OrderByDescending(row => row.Name, StringComparer.OrdinalIgnoreCase).ThenByDescending(row => row.Version, VersionComparer),
+            "path" => options.Ascending ? filtered.OrderBy(row => row.Path, StringComparer.OrdinalIgnoreCase).ThenBy(row => row.Version, VersionComparer) : filtered.OrderByDescending(row => row.Path, StringComparer.OrdinalIgnoreCase).ThenByDescending(row => row.Version, VersionComparer),
+            _ => options.Ascending ? filtered.OrderBy(row => row.Version, VersionComparer) : filtered.OrderByDescending(row => row.Version, VersionComparer)
+        }).ToArray();
     }
 
-    private static string RenderTable(Row[] rows, InstallationViewOptions options)
+    private static bool MatchesKind(Row row, string kind) => kind switch
     {
-        var showActions = rows.Any(row => row.CanRemove);
-        return $$"""
-            <div class="table-scroll" role="region" aria-label="Installed .NET versions" tabindex="0">
-              <table aria-label="Installed .NET versions">
-                <thead><tr>{{SortHeader("Installation", "name", options)}}{{SortHeader("Version", "version", options)}}{{SortHeader("Location", "path", options)}}{{(showActions ? "<th scope=\"col\">Actions</th>" : "")}}</tr></thead>
-                <tbody>{{string.Concat(rows.Select(row => $"""
-                  <tr data-kind="{row.Kind}">
-                    <td><div class="installation-name"><span class="installation-icon">{Icon(row.Kind == "sdk" ? "code" : "server")}</span><div><strong>{Encode(row.Name)}</strong><span class="muted framework-name">{Encode(row.Description)}</span></div></div></td>
-                    <td><fluent-badge appearance="tint" color="{(row.Kind == "sdk" ? "brand" : "informative")}" class="version-badge">{Encode(row.Version)}</fluent-badge></td>
-                    <td><div class="installation-paths">{string.Concat(row.Paths.Select(path => $"<code class=\"installation-path\">{Encode(path)}</code>"))}</div></td>
-                    {(showActions ? $"<td class=\"installation-actions\">{RemoveAction(row, options)}</td>" : "")}
-                  </tr>
-                  """))}}</tbody>
-              </table>
-              {{(rows.Length == 0 ? "<div class=\"empty-state\"><h3>No matching versions</h3><p class=\"muted\">Try another filter or switch to All versions.</p><a class=\"button\" href=\"/#inventory\">Clear filters</a></div>" : "")}}
-            </div>
-            """;
+        "sdks" => row.Kind == "sdk",
+        "runtimes" => row.Kind == "runtime",
+        "previews" => row.IsPreview,
+        _ => true
+    };
+
+    private static bool MatchesQuery(Row row, string query)
+    {
+        if (string.IsNullOrWhiteSpace(query)) return true;
+        var terms = query.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        var searchable = $"{row.Name} {row.Description} {row.Version} {row.DisplayVersion} {row.Path} {row.Channel}";
+        return terms.All(term => searchable.Contains(term, StringComparison.OrdinalIgnoreCase));
     }
 
-    private static string SummaryCard(string label, string value, string description, string icon) =>
-        $"<div class=\"summary-card\"><div class=\"summary-top\"><span>{Encode(label)}</span>{Icon(icon)}</div><strong class=\"summary-number\">{Encode(value)}</strong><span class=\"muted\">{Encode(description)}</span></div>";
+    private static string ShortFrameworkSubtitle(string description) =>
+        description
+            .Replace("Microsoft.NETCore.App", ".NET", StringComparison.Ordinal)
+            .Replace("Microsoft.AspNetCore.App", "ASP.NET Core", StringComparison.Ordinal)
+            .Replace("Microsoft.WindowsDesktop.App", "Desktop", StringComparison.Ordinal);
+
+    private static string GetInstallerFileName(string? url) =>
+        Uri.TryCreate(url, UriKind.Absolute, out var uri) ? System.IO.Path.GetFileName(uri.LocalPath) : "";
+
+    private static string FormatVerifyInstallCommand(string? sha512, string fileName) =>
+        !string.IsNullOrEmpty(sha512)
+            ? $"echo \"{sha512}  {fileName}\" \\\n  | shasum -a 512 -c - \\\n  && sudo installer -pkg {fileName} \\\n    -target /"
+            : $"sudo installer -pkg {fileName} \\\n  -target /";
+
+    private static string? FormatReleaseDate(string? dateStr)
+    {
+        if (string.IsNullOrWhiteSpace(dateStr)) return null;
+        if (DateTimeOffset.TryParse(dateStr, CultureInfo.InvariantCulture, DateTimeStyles.None, out var dt))
+            return dt.ToString("MMM d, yyyy", CultureInfo.InvariantCulture);
+        return dateStr;
+    }
 
     private static string RemoveAction(Row row, InstallationViewOptions options) => !row.CanRemove
         ? ""
-        : $"<form method=\"post\" action=\"/installation/remove\"><input type=\"hidden\" name=\"version\" value=\"{Encode(row.Version)}\"><input type=\"hidden\" name=\"kind\" value=\"{row.Kind}\"><input type=\"hidden\" name=\"viewKind\" value=\"{options.Kind}\"><input type=\"hidden\" name=\"q\" value=\"{Encode(options.Query)}\"><input type=\"hidden\" name=\"sort\" value=\"{options.Sort}\"><input type=\"hidden\" name=\"direction\" value=\"{(options.Ascending ? "asc" : "desc")}\"><button class=\"button danger\" type=\"submit\">Remove</button></form>";
+        : ConfirmActions.Trigger(ConfirmActions.VersionRemove(row, options), $"<button class=\"button sm remove\" type=\"submit\" aria-label=\"Remove {Encode(row.Name)} {Encode(row.DisplayVersion)}\">Remove</button>");
 
     private static string RenderNotice(string notice) => notice switch
     {
-        "removed" => "<div class=\"action-notice\" role=\"status\">The selected .NET installation was removed.</div>",
-        "remove-failed" => "<div class=\"action-notice error-state\" role=\"alert\">The selected .NET installation could not be removed. Check the permissions and try again.</div>",
+        "removed" => SuccessToast("The selected .NET installation was removed."),
+        "detected" => SuccessToast("Installed .NET versions changed. This view is up to date."),
+        "remove-failed" => "<div class=\"action-notice error-state\" role=\"alert\">Not everything selected could be removed. The administrator approval may have been declined. Try again, or run the command yourself.</div>",
         _ => ""
     };
 
-    private static string TypeLink(string label, string kind, InstallationViewOptions options) =>
-        $"<a href=\"{Link(options with { Kind = kind })}\"{(options.Kind == kind ? " aria-current=\"page\"" : "")}>{label}</a>";
+    private static string KindSegment(string label, string kind, int count, InstallationViewOptions options, string srSuffix = "")
+    {
+        var active = options.Kind == kind;
+        var target = options with { Kind = active ? "all" : kind };
+        return $"<a href=\"{Link(target)}\" class=\"seg {(active ? "active" : "")}\" data-version-kind=\"{kind}\"{(active ? " aria-current=\"page\"" : "")}>{label}{(srSuffix.Length > 0 ? $"<span class=\"sr-only\">{srSuffix}</span>" : "")}<span class=\"seg-count\" aria-hidden=\"true\">{count}</span></a>";
+    }
 
-    private static string SortHeader(string label, string column, InstallationViewOptions options)
+    private static string SortMenu(InstallationViewOptions options)
     {
-        var active = options.Sort == column;
-        var direction = active ? options.Ascending ? "ascending" : "descending" : "none";
-        return $"<th scope=\"col\" aria-sort=\"{direction}\"><a href=\"{Link(options with { Sort = column, Ascending = !active || !options.Ascending })}\">{label}{(active ? options.Ascending ? " ↑" : " ↓" : "")}</a></th>";
+        var current = (options.Sort, options.Ascending) switch
+        {
+            ("name", false) => "Name, Z to A",
+            ("name", true) => "Name, A to Z",
+            ("path", false) => "Location, Z to A",
+            ("path", true) => "Location, A to Z",
+            (_, true) => "Oldest version",
+            _ => "Newest version"
+        };
+        string Option(string label, string sort, bool ascending) =>
+            $"<a class=\"menu-item {(label == current ? "active" : "")}\" href=\"{Link(options with { Sort = sort, Ascending = ascending })}\"{(label == current ? " aria-current=\"true\"" : "")}>{label}</a>";
+        return $"""
+            <details class="menu sort-menu">
+              <summary class="button sm ghost" aria-label="Sort: {current}">{current} {Icon("chevd", "xs")}</summary>
+              <div class="menu-panel">
+                {Option("Newest version", "version", false)}{Option("Oldest version", "version", true)}{Option("Name, A to Z", "name", true)}{Option("Name, Z to A", "name", false)}{Option("Location, A to Z", "path", true)}{Option("Location, Z to A", "path", false)}
+              </div>
+            </details>
+            """;
     }
 
     private static string RefreshLink(InstallationViewOptions options, DateTimeOffset checkedAt) => Encode(
-        $"/?q={Uri.EscapeDataString(options.Query)}&kind={options.Kind}&sort={options.Sort}&direction={(options.Ascending ? "asc" : "desc")}&refresh={checkedAt.ToUnixTimeMilliseconds().ToString(CultureInfo.InvariantCulture)}#inventory");
+        $"/?q={Uri.EscapeDataString(options.Query)}&kind={options.Kind}&sort={options.Sort}&direction={(options.Ascending ? "asc" : "desc")}&refresh={checkedAt.ToUnixTimeMilliseconds().ToString(CultureInfo.InvariantCulture)}");
 
     private static string Link(InstallationViewOptions options) => Encode(
-        $"/?q={Uri.EscapeDataString(options.Query)}&kind={options.Kind}&sort={options.Sort}&direction={(options.Ascending ? "asc" : "desc")}#inventory");
+        $"/?q={Uri.EscapeDataString(options.Query)}&kind={options.Kind}&sort={options.Sort}&direction={(options.Ascending ? "asc" : "desc")}{(string.IsNullOrEmpty(options.Selected) ? "" : $"&selected={Uri.EscapeDataString(options.Selected)}")}");
 
     private static string RuntimeName(string name) => name switch
     {
diff --git a/src/DotnetCockpit/OverviewPage.cs b/src/DotnetCockpit/OverviewPage.cs
new file mode 100644
index 0000000..c400a7b
--- /dev/null
+++ b/src/DotnetCockpit/OverviewPage.cs
@@ -0,0 +1,300 @@
+using System.Globalization;
+using DotnetCockpit.Installation;
+using DotnetCockpit.SdkDownloads;
+using DotnetCockpit.Setup;
+using DotnetCockpit.Tools;
+using static DotnetCockpit.PageLayout;
+
+namespace DotnetCockpit;
+
+internal static class OverviewPage
+{
+    public static string Render(InstallationSnapshot snapshot, ToolsSnapshot tools, SetupSnapshot setup, SdkDownloadSnapshot sdkSnapshot, ActiveSdk? activeSdk = null, DateOnly? today = null)
+    {
+        var currentDate = today ?? SupportLifecycle.Today;
+        var health = EnvironmentHealth.Evaluate(snapshot, sdkSnapshot, currentDate);
+        var rows = InstallationPage.BuildRows(snapshot, sdkSnapshot, currentDate);
+        var runtimeCount = snapshot.Runtimes.Select(r => r.Version).Distinct().Count();
+        var issues = health.Count;
+        var eolRuntimes = rows.Count(row => row.Kind == "runtime" && row.IsEol);
+        var patchableSdks = rows.Count(row => row.Kind == "sdk" && row.HasPatch && !row.LatestPatchInstalled);
+        var isHealthy = issues == 0 && health.SupportKnown;
+
+        var newestStableSdk = snapshot.Sdks
+            .Where(sdk => !sdk.Version.Contains('-'))
+            .OrderByDescending(sdk => sdk.Version, SdkDownloadsSection.SdkVersionComparer.Instance)
+            .FirstOrDefault()?.Version;
+
+        var healthBadgeClass = isHealthy ? "ok" : "warn";
+        var healthStatus = snapshot.Status == "error"
+            ? "Not available"
+            : isHealthy ? "Healthy" : issues == 0 ? "Partly checked" : "Attention needed";
+
+        var actions = health.Actions.Select(action => $"""
+            <div class="overview-action-item">
+              <div class="action-icon {action.Severity}">{Icon(action.Icon, "sm")}</div>
+              <div class="action-text">
+                <strong>{Encode(action.Title)}</strong>
+                <p class="muted">{Encode(action.Detail)}</p>
+              </div>
+              <div class="action-buttons">
+                {string.Concat(action.Links.Select(link => $"<a class=\"{link.Class}\" href=\"{Encode(link.Href)}\"{(link.Download ? " download" : "")}>{(link.Icon is null ? "" : Icon(link.Icon, "xs"))} {Encode(link.Label)}</a>"))}
+              </div>
+            </div>
+            """).ToArray();
+        var actionsHtml = actions.Length > 0
+            ? string.Join("\n", actions)
+            : $"""<div class="overview-all-clear">{Icon("check", "sm")}<div><strong>{(health.SupportKnown ? "Nothing to do" : "No known actions")}</strong><p class="muted">{(health.SupportKnown ? "Every installed version is supported and fully patched." : "Support dates could not be loaded, so end-of-support risks are not listed. Refresh to try again.")}</p></div></div>""";
+
+        var sdkBadge = patchableSdks > 0
+            ? $"<span class=\"badge warn sm\">{patchableSdks} {(patchableSdks == 1 ? "patch" : "patches")}</span>"
+            : "";
+
+        var runtimeBadge = eolRuntimes > 0
+            ? $"<span class=\"badge bad sm\">{eolRuntimes} end of life</span>"
+            : "";
+
+        var toolsAvailable = tools.Status == "ready";
+        string ToolCount(ToolList list) => toolsAvailable && list.Error is null ? list.Tools.Length.ToString(CultureInfo.InvariantCulture) : "–";
+        var toolsNote = toolsAvailable ? null : "Not available";
+
+        var sdkInUse = activeSdk?.Version is { Length: > 0 } activeVersion
+            ? $"<strong>{Encode(activeVersion)}</strong> <span class=\"muted\">· {(activeSdk.GlobalJsonPath is null ? "no global.json" : $"pinned by <code>{Encode(ShortenPath(activeSdk.GlobalJsonPath))}</code>")}</span>"
+            : "<span class=\"muted\">Not available</span>";
+
+        var manifestSummary = !tools.LocalManifestInitialized
+            ? "<span class=\"muted\">No local manifest</span>"
+            : tools.LocalManifestOwned
+                ? "<strong>Local</strong> <span class=\"muted\">in .config/dotnet-tools.json</span>"
+                : $"<strong>Inherited</strong> <span class=\"muted\">from parent .config</span>";
+
+        var localToolPills = tools.Local.Tools.Length > 0
+            ? string.Concat(tools.Local.Tools.Select(t => $"<a class=\"ws-tool-pill-link\" href=\"/tools?scope=local&amp;selected={Uri.EscapeDataString(t.PackageId)}\" title=\"Inspect {Encode(t.PackageId)} in .NET Tools\"><code class=\"ws-tool-pill\">{Encode(t.PackageId)} {Encode(t.Version)}</code></a>"))
+            : "<span class=\"muted\">None declared</span>";
+
+        return PageLayout.Render($$"""
+            <div class="page-heading">
+              <div>
+                <h1>Overview</h1>
+                <p class="muted intro">Here's the state of .NET on this machine.</p>
+              </div>
+              <div class="overview-header-actions">
+                <a class="button" href="/tools?add=1">{{Icon("plus", "xs")}} Add tool</a>
+                <a class="button primary" href="/?install=1">{{Icon("download", "xs")}} Install .NET</a>
+              </div>
+            </div>
+
+            <section class="overview-hero-card" aria-label="System health and summary">
+              <div class="hero-health-pane">
+                <div class="hero-ring" style="--ring: {{health.RingGradient}}">
+                  <div class="hero-ring-inner">
+                    <strong>{{issues}}</strong>
+                    <span>to review</span>
+                  </div>
+                </div>
+                <div class="hero-health-copy">
+                  <div class="hero-eyebrow-row">
+                    <span class="sr-only">System Health</span>
+                    <span class="badge {{healthBadgeClass}}">{{healthStatus}}</span>
+                  </div>
+                  <h2 class="hero-headline">{{Encode(health.Headline)}}</h2>
+                  <div class="hero-meta-row">
+                    <span>{{Icon("cpu", "xs")}} {{Encode(snapshot.OperatingSystem)}} · {{Encode(snapshot.Architecture.ToLowerInvariant())}}</span>
+                    <span>{{Icon("code", "xs")}} {{(snapshot.ExecutablePath is { } hostPath ? $"<code>{Encode(hostPath)}</code>" : "No dotnet host on PATH")}}</span>
+                    {{(newestStableSdk is null ? "" : $"<span>{Icon("shield", "xs")} Newest stable SDK {Encode(newestStableSdk)}</span>")}}
+                  </div>
+                </div>
+              </div>
+
+              <div class="hero-stats-grid" aria-label="Installation summary">
+                <div class="hero-stat-cell">
+                  <div class="stat-top">{{Icon("versions", "xs")}} <span>Installed SDKs</span></div>
+                  <div class="stat-val-row">
+                    <strong class="summary-number">{{snapshot.Sdks.Length.ToString(CultureInfo.InvariantCulture)}}</strong>
+                    {{sdkBadge}}
+                  </div>
+                </div>
+                <div class="hero-stat-cell">
+                  <div class="stat-top">{{Icon("server", "xs")}} <span>Installed runtimes</span></div>
+                  <div class="stat-val-row">
+                    <strong class="summary-number">{{runtimeCount.ToString(CultureInfo.InvariantCulture)}}</strong>
+                    {{runtimeBadge}}
+                  </div>
+                </div>
+                <div class="hero-stat-cell">
+                  <div class="stat-top">{{Icon("tools", "xs")}} <span>Global tools</span></div>
+                  <div class="stat-val-row">
+                    <strong class="summary-number">{{ToolCount(tools.Global)}}</strong>
+                    <span class="muted text-xs">{{Encode(toolsNote ?? $"for {Environment.UserName}")}}</span>
+                  </div>
+                </div>
+                <div class="hero-stat-cell">
+                  <div class="stat-top">{{Icon("folder", "xs")}} <span>Local tools</span></div>
+                  <div class="stat-val-row">
+                    <strong class="summary-number">{{ToolCount(tools.Local)}}</strong>
+                    <span class="muted text-xs">{{Encode(toolsNote ?? "this workspace")}}</span>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="overview-main-grid" aria-label="Recommendations and workspace">
+              <div class="overview-card actions-card">
+                <div class="card-top">
+                  <div>
+                    <h2>Recommended actions</h2>
+                    <p class="muted text-xs">Sorted by risk. Every change asks for confirmation first.</p>
+                  </div>
+                </div>
+                <div class="action-list">
+                  {{actionsHtml}}
+                </div>
+              </div>
+
+              <div class="overview-side-stack">
+                <div class="overview-card workspace-card">
+                  <div class="ws-widget-head">
+                    <div class="ws-icon-box">{{Icon("folder", "sm")}}</div>
+                    <div class="ws-head-copy">
+                      <h3>This workspace</h3>
+                      <code>{{Encode(ShortenPath(tools.WorkingDirectory))}}</code>
+                    </div>
+                  </div>
+                  <dl class="ws-dl">
+                    <dt>SDK in use</dt>
+                    <dd>{{sdkInUse}}</dd>
+                    <dt>Tool manifest</dt>
+                    <dd>{{manifestSummary}}</dd>
+                    <dt>Local tools</dt>
+                    <dd class="ws-tools-dd">{{localToolPills}}</dd>
+                  </dl>
+                </div>
+
+                <div class="overview-card shortcuts-card">
+                  <h3>Shortcuts</h3>
+                  <div class="shortcuts-list">
+                    <a class="shortcut-row" href="/?install=1">
+                      <span>{{Icon("download", "xs")}} Install .NET</span>
+                    </a>
+                    <a class="shortcut-row" href="/tools?add=1">
+                      <span>{{Icon("plus", "xs")}} Find a .NET tool on NuGet</span>
+                      <kbd>T</kbd>
+                    </a>
+                    {{(setup.UninstallTool.Installed || setup.Status == "unsupported" ? "" : $"<a class=\"shortcut-row\" href=\"/setup#uninstall-tool-title\"><span>{Icon("trash", "xs")} Set up removal support</span></a>")}}
+                    <a class="shortcut-row" href="/preflight">
+                      <span>{{Icon("pulse", "xs")}} Pre-flight diagnostics</span>
+                      <kbd>P</kbd>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="inventory timeline-section" aria-labelledby="timeline-title">
+              <div class="inventory-heading">
+                <div>
+                  <h2 id="timeline-title">Support Lifecycle Timeline</h2>
+                  <p class="muted">Official Microsoft lifecycle dates. Ringed bars are installed, pale bars are available to install.</p>
+                </div>
+                <div class="tl-legend">
+                  <span class="tl-leg-item"><i class="tl-dot lts"></i> LTS</span>
+                  <span class="tl-leg-item"><i class="tl-dot sts"></i> STS</span>
+                  <span class="tl-leg-item"><i class="tl-dot preview"></i> Preview</span>
+                </div>
+              </div>
+              {{RenderTimeline(snapshot, sdkSnapshot, currentDate)}}
+            </section>
+            """, "/overview", ".NET Cockpit · Overview", issues, snapshot.InstallationCount, toolsAvailable ? tools.Global.Tools.Length + tools.Local.Tools.Length : null, inventorySignature: snapshot.Signature);
+    }
+
+    private static string RenderTimeline(InstallationSnapshot snapshot, SdkDownloadSnapshot sdkSnapshot, DateOnly today)
+    {
+        var channels = sdkSnapshot.Channels ?? [];
+        if (channels.Length == 0)
+            return """<div class="empty-state"><h3>Support dates are unavailable</h3><p class="muted">The official release metadata could not be loaded. Refresh to try again.</p></div>""";
+
+        var installedVersions = snapshot.Sdks.Select(sdk => sdk.Version)
+            .Concat(snapshot.Runtimes.Select(runtime => runtime.Version))
+            .ToArray();
+        var installed = installedVersions.Select(SupportLifecycle.ChannelVersion).ToHashSet();
+        var newestSdkByChannel = snapshot.Sdks
+            .GroupBy(sdk => SupportLifecycle.ChannelVersion(sdk.Version))
+            .ToDictionary(group => group.Key, group => group.OrderByDescending(sdk => sdk.Version, SdkDownloadsSection.SdkVersionComparer.Instance).First().Version);
+
+        var visible = channels
+            .Select(channel => (Channel: channel, Status: SupportLifecycle.Evaluate(channel, today)))
+            .Where(entry => (!entry.Status.IsEol || installed.Contains(entry.Channel.Channel)) && entry.Channel.FirstRelease is not null)
+            .OrderByDescending(entry => entry.Channel.FirstRelease)
+            .ToArray();
+        if (visible.Length == 0)
+            return """<div class="empty-state"><h3>Support dates are unavailable</h3><p class="muted">The release metadata contains no dates for these channels.</p></div>""";
+
+        var startYear = visible.Min(entry => entry.Channel.FirstRelease!.Value.Year);
+        var endYear = Math.Max(visible.Max(entry => (entry.Channel.EndOfSupport ?? today).Year), today.Year) + 1;
+        var rangeStart = new DateOnly(startYear, 1, 1).DayNumber;
+        var rangeDays = (double)(new DateOnly(endYear, 1, 1).DayNumber - rangeStart);
+        string Percent(DateOnly date) => (Math.Clamp((date.DayNumber - rangeStart) / rangeDays, 0, 1) * 100).ToString("0.##", CultureInfo.InvariantCulture);
+        var todayFraction = ((today.DayNumber - rangeStart) / rangeDays).ToString("0.####", CultureInfo.InvariantCulture);
+
+        var years = string.Concat(Enumerable.Range(startYear, endYear - startYear).Select(year => $"<span>{year}</span>"));
+        var rows = string.Concat(visible.Select(entry =>
+        {
+            var (channel, status) = entry;
+            var major = channel.Channel.EndsWith(".0", StringComparison.Ordinal) ? channel.Channel[..^2] : channel.Channel;
+            var isPreview = status.State == SupportState.Preview;
+            var isInstalled = installed.Contains(channel.Channel);
+            var tag = isPreview ? "Preview" : channel.ReleaseType;
+            var tagClass = isPreview ? "preview" : channel.ReleaseType.ToLowerInvariant();
+            var barClass = status.IsEol ? "eol" : isPreview ? "preview" : tagClass;
+            var left = channel.FirstRelease!.Value;
+            var right = channel.EndOfSupport ?? today;
+            var width = Math.Max(Math.Clamp((right.DayNumber - left.DayNumber) / rangeDays, 0, 1) * 100, 1).ToString("0.##", CultureInfo.InvariantCulture);
+            var barLabel = newestSdkByChannel.TryGetValue(channel.Channel, out var sdk)
+                ? $"{InstallationPage.ShortDisplayVersion(sdk)} installed"
+                : isInstalled ? "Runtime installed" : "";
+            var (statusClass, statusText) = status.State switch
+            {
+                SupportState.EndOfLife => ("bad", channel.EndOfSupport is { } end ? $"ended {end.Year}" : "ended"),
+                SupportState.EndingSoon => ("warn", $"ends {SupportLifecycle.RelativeDays(status.DaysLeft ?? 0)}"),
+                SupportState.Preview => ("muted", "preview"),
+                _ => ("muted", channel.EndOfSupport is { } until ? $"until {until.ToString("MMM yyyy", CultureInfo.InvariantCulture)}" : "supported")
+            };
+            return $"""
+                <div class="timeline-row {(isInstalled ? "" : "not-installed")}">
+                  <div class="tl-channel">
+                    <b>.NET {Encode(major)}</b>
+                    <span class="channel-tag {tagClass}">{Encode(tag)}</span>
+                  </div>
+                  <div class="tl-track">
+                    <div class="tl-bar {barClass} {(isInstalled ? "installed" : "")}" style="left: {Percent(left)}%; width: {width}%;" title="{Encode(status.Label)}">{Encode(barLabel)}</div>
+                  </div>
+                  <span class="tl-status {statusClass}">{Encode(statusText)}</span>
+                </div>
+                """;
+        }));
+
+        return $"""
+            <div class="timeline-chart">
+              <div class="tl-years">
+                <span></span>
+                <div class="tl-years-track">{years}</div>
+                <span></span>
+              </div>
+              <div class="tl-rows">
+                <div class="tl-today-marker" style="left: calc(130px + 16px + (100% - 272px) * {todayFraction});">
+                  <span class="tl-today-pill">Today</span>
+                </div>
+                {rows}
+              </div>
+            </div>
+            """;
+    }
+
+    private static string ShortenPath(string path)
+    {
+        if (string.IsNullOrEmpty(path)) return "";
+        var parts = path.Split(['/', '\\'], StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length <= 3) return path;
+        return "../" + string.Join("/", parts[^3..]);
+    }
+}
diff --git a/src/DotnetCockpit/PageLayout.cs b/src/DotnetCockpit/PageLayout.cs
index 020efb1..5a220fe 100644
--- a/src/DotnetCockpit/PageLayout.cs
+++ b/src/DotnetCockpit/PageLayout.cs
@@ -4,57 +4,242 @@ namespace DotnetCockpit;
 
 internal static class PageLayout
 {
-    public static string Render(string content, string currentPath, string title = ".NET Cockpit") => $$"""
+    /// <summary>Set at startup from the settings file. Tests and tools that render pages directly get the defaults.</summary>
+    public static Func<AppSettings> CurrentSettings { get; set; } = () => new();
+
+    /// <summary>Set at startup. Rendered as an attribute only where the system has an accent color.</summary>
+    public static Func<string?> CurrentAccent { get; set; } = () => null;
+
+    public static string AccentAttribute => CurrentAccent() is { } accent ? $" data-accent=\"{accent}\"" : "";
+
+    private static string WorkspaceName =>
+        Path.GetFileName(Environment.CurrentDirectory.TrimEnd(Path.DirectorySeparatorChar)) is { Length: > 0 } name ? name : Environment.CurrentDirectory;
+
+    public static string Render(string content, string currentPath, string title = ".NET Cockpit", int issueCount = 0, int? versionsCount = null, int? toolsCount = null, string? refreshHref = null, string? inventorySignature = null) => $$"""
         <!doctype html>
-        <html lang="en" data-theme="auto">
+        <html lang="en" data-theme="{{CurrentSettings().Theme}}" data-palette="{{CurrentSettings().Palette}}"{{AccentAttribute}}>
         <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
+          <meta name="color-scheme" content="light dark">
           <meta name="description" content="Your local .NET environment, in one place.">
           <title>{{Encode(title)}}</title>
           <link rel="icon" type="image/png" sizes="32x32" href="/assets/logo-32.png">
           <link rel="stylesheet" href="/assets/app.css">
           <script type="module" src="/assets/app.js"></script>
         </head>
-        <body class="app">
+        <body class="app-body"{{(inventorySignature is null ? "" : $" data-inventory=\"{Encode(inventorySignature)}\"")}}>
           <a class="skip-link" href="#main">Skip to content</a>
-          <header class="app-header">
-            <div class="brand"><img class="brand-logo" src="/assets/logo.png" alt=""><strong>.NET Cockpit</strong></div>
-            <div class="header-actions">
-              <fluent-badge appearance="tint" color="success">Local workspace</fluent-badge>
-              <fluent-button id="theme-toggle" role="button" type="button" appearance="subtle" aria-label="Switch to dark mode" title="Switch to dark mode" hidden><span aria-hidden="true">◐</span></fluent-button>
-            </div>
-          </header>
-          <div class="workspace">
-            <aside class="sidebar" aria-label="Workspace navigation">
-              <span class="sidebar-label">ENVIRONMENT</span>
-              <a href="/" class="nav-link"{{(currentPath == "/" ? " aria-current=\"page\"" : "")}}>{{Icon("desktop")}} Installations</a>
-              <a href="/tools" class="nav-link"{{(currentPath == "/tools" ? " aria-current=\"page\"" : "")}}>{{Icon("code")}} .NET Tools</a>
-              <a href="/setup" class="nav-link"{{(currentPath == "/setup" ? " aria-current=\"page\"" : "")}}>{{Icon("settings")}} Setup</a>
-              <div class="sidebar-footer"><span class="status-dot"></span>Running on your machine</div>
+          <div class="app">
+            <aside class="rail" aria-label="Workspace navigation">
+              <div class="brand">
+                <img src="/assets/logo.png" alt=".NET Cockpit logo">
+                <div>
+                  <b>.NET Cockpit</b>
+                  <small>Runs on this machine</small>
+                </div>
+              </div>
+
+              <div class="rail-label">Environment</div>
+              <a href="/overview" class="nav-link"{{(currentPath == "/overview" ? " aria-current=\"page\"" : "")}}>{{Icon("dashboard")}} Overview {{(issueCount > 0 ? $"<span class=\"badge warn sm nav-badge\"><span class=\"sr-only\">, </span>{issueCount}<span class=\"sr-only\"> to review</span></span>" : "")}}</a>
+              <a href="/" class="nav-link"{{(currentPath is "/" or "/versions" ? " aria-current=\"page\"" : "")}} >{{Icon("versions")}} Versions{{(versionsCount is not null ? $"<span class=\"nav-count\" aria-hidden=\"true\">{versionsCount}</span>" : "")}}</a>
+              <a href="/tools" class="nav-link"{{(currentPath == "/tools" ? " aria-current=\"page\"" : "")}} >{{Icon("tools")}} Tools{{(toolsCount is not null ? $"<span class=\"nav-count\" aria-hidden=\"true\">{toolsCount}</span>" : "")}}</a>
+
+              <div class="rail-label">Cockpit</div>
+              <a href="/setup" class="nav-link"{{(currentPath == "/setup" ? " aria-current=\"page\"" : "")}}>{{Icon("settings")}} Settings</a>
+
+              <div class="rail-foot">
+                <div class="ws-card">
+                  <div class="k">{{Icon("folder", "xs")}} Workspace</div>
+                  <b>{{Encode(WorkspaceName)}}</b>
+                  <code title="{{Encode(Environment.CurrentDirectory)}}"><bdi>{{Encode(Environment.CurrentDirectory)}}</bdi></code>
+                </div>
+              </div>
             </aside>
-            <main id="main" tabindex="-1">
-              {{content}}
-            </main>
+
+            <div class="main">
+              <header class="topbar">
+                <div class="crumbs">
+                  <b>{{GetPageName(currentPath)}}</b>
+                </div>
+                <button type="button" id="cmdk-trigger" class="cmdk" aria-label="Open command palette" hidden data-js-only>
+                  {{Icon("search", "sm")}}
+                  <span>Search versions, tools and actions</span>
+                  <kbd>⌘K</kbd>
+                </button>
+                <a class="checked" href="{{Encode(refreshHref ?? (currentPath == "/confirm" ? "/overview" : currentPath))}}" title="Check again" aria-label="Refresh. Checked {{DateTime.Now.ToString("HH:mm")}}">
+                  {{Icon("refresh", "xs")}}
+                  <span>Checked <time datetime="{{DateTimeOffset.Now:O}}">{{DateTime.Now.ToString("HH:mm")}}</time></span>
+                </a>
+                {{ThemeSwitch()}}
+              </header>
+
+              <main id="main" class="content" tabindex="-1">
+                {{content}}
+              </main>
+            </div>
+          </div>
+
+          <div id="cmdk-scrim" class="scrim" hidden></div>
+          <div id="cmdk-dialog" class="palette" role="dialog" aria-modal="true" aria-label="Command palette" hidden>
+            <div class="q">
+              {{Icon("search", "sm")}}
+              <input id="cmdk-input" type="text" placeholder="Search actions, versions and tools" autocomplete="off" aria-label="Search actions, versions and tools">
+              <kbd>ESC</kbd>
+            </div>
+            <div id="cmdk-dynamic-grp" class="grp" hidden>
+              <div class="grp-k">Installed</div>
+              <div id="cmdk-dynamic-list"></div>
+            </div>
+            <div class="grp">
+              <div class="grp-k">Actions</div>
+              <a class="opt" href="/tools?add=1">
+                {{Icon("plus", "sm")}}
+                <div><b>Add a .NET tool</b> <small>· Search and install from NuGet.org</small></div>
+                <span class="badge">NuGet</span>
+              </a>
+              <a class="opt" href="/?install=1">
+                {{Icon("download", "sm")}}
+                <div><b>Install new .NET SDK or Runtime</b> <small>· Official macOS .pkg catalog</small></div>
+                <span class="badge brand">Download</span>
+              </a>
+              <a class="opt" href="/preflight">
+                {{Icon("sparkle", "sm")}}
+                <div><b>Run Pre-flight Diagnostics</b> <small>· Verify .NET host, SDKs and workspace</small></div>
+                <span class="badge brand">Check</span>
+              </a>
+              <a class="opt" href="/?cleanup=1">
+                {{Icon("sparkle", "sm")}}
+                <div><b>Clean up installations</b> <small>· Remove older versions, previews or unsupported releases</small></div>
+              </a>
+              <a class="opt" href="/setup#uninstall-tool-title">
+                {{Icon("trash", "sm")}}
+                <div><b>Settings → Removal support</b> <small>· Manage dotnet-core-uninstall</small></div>
+              </a>
+            </div>
+            <div class="grp">
+              <div class="grp-k">Navigation</div>
+              <a class="opt" href="/overview">
+                {{Icon("dashboard", "sm")}}
+                <div><b>Go to Overview</b> <small>· Environment status, workspace &amp; lifecycle timeline</small></div>
+                <kbd>G O</kbd>
+              </a>
+              <a class="opt" href="/">
+                {{Icon("versions", "sm")}}
+                <div><b>Go to Versions</b> <small>· Installed SDKs and Runtimes</small></div>
+                <kbd>G V</kbd>
+              </a>
+              <a class="opt" href="/tools">
+                {{Icon("tools", "sm")}}
+                <div><b>Go to .NET Tools</b> <small>· Global &amp; workspace local tools</small></div>
+                <kbd>G T</kbd>
+              </a>
+              <a class="opt" href="/setup">
+                {{Icon("settings", "sm")}}
+                <div><b>Go to Settings</b> <small>· Appearance, removal support &amp; privacy policy</small></div>
+                <kbd>G S</kbd>
+              </a>
+              <a class="opt" href="/preflight">
+                {{Icon("pulse", "sm")}}
+                <div><b>Go to Pre-flight Check</b> <small>· System diagnostics</small></div>
+                <kbd>G P</kbd>
+              </a>
+            </div>
+            <div id="cmdk-empty" class="cmdk-empty" hidden>
+              <p>No matches.</p>
+              <a class="button sm" id="cmdk-nuget" href="/tools?add=1">Search NuGet.org</a>
+            </div>
+            <div class="foot">
+              <span><kbd>↑</kbd> <kbd>↓</kbd> navigate</span>
+              <span><kbd>↵</kbd> select</span>
+              <span><kbd>ESC</kbd> close</span>
+            </div>
           </div>
+          {{ConfirmActions.Dialog}}
         </body>
         </html>
         """;
 
+    private static string GetPageName(string path) => path switch
+    {
+        "/overview" => "Overview",
+        "/tools" => "Tools",
+        "/setup" => "Settings",
+        "/confirm" => "Confirm",
+        "/preflight" => "Pre-flight Check",
+        _ => "Versions"
+    };
+
+    /// <summary>A success message that confirms and then gets out of the way. Failures stay on the page instead.</summary>
+    public static string SuccessToast(string text) =>
+        $"<div class=\"toast\" role=\"status\"><span class=\"toast-check\">{Icon("check", "sm")}</span>{Encode(text)}</div>";
+
     public static string Encode(string value) => HtmlEncoder.Default.Encode(value);
 
-    public static string Icon(string name)
+    /// <summary>Three-state appearance switch. A plain form, so it also works without JavaScript.</summary>
+    public static string ThemeSwitch(bool showLabels = false, string extraClass = "")
+    {
+        var current = CurrentSettings().Theme;
+        string Option(string value, string label, string title) =>
+            $"<button type=\"submit\" name=\"theme\" value=\"{value}\" class=\"theme-switch-btn{(current == value ? " active" : "")}\" data-theme-pref=\"{value}\" aria-pressed=\"{(current == value ? "true" : "false")}\" title=\"{title}\">{Icon($"theme-{value}", "sm")}<span class=\"{(showLabels ? "" : "sr-only")}\">{label}</span></button>";
+        return $"""
+            <form method="post" action="/settings/theme" class="theme-switch {extraClass}" role="group" aria-label="Appearance" data-theme-switch>
+              {Option("auto", "Auto", "Automatic (follow system)")}{Option("light", "Light", "Light")}{Option("dark", "Dark", "Dark")}
+            </form>
+            """;
+    }
+
+    /// <summary>Palette choice with a small preview. A plain form, so it also works without JavaScript.</summary>
+    public static string PaletteSwitch()
+    {
+        var current = CurrentSettings().Palette;
+        var options = string.Concat(SettingsStore.Palettes.Select(palette =>
+            $"<button type=\"submit\" name=\"palette\" value=\"{palette.Id}\" class=\"palette-option{(current == palette.Id ? " active" : "")}\" data-palette-pref=\"{palette.Id}\" aria-pressed=\"{(current == palette.Id ? "true" : "false")}\"><span class=\"palette-swatch\" data-palette=\"{palette.Id}\" aria-hidden=\"true\"><i class=\"swatch-rail\"></i><i class=\"swatch-panel\"><i class=\"swatch-line\"></i><i class=\"swatch-accent\"></i></i></span><span>{palette.Label}</span></button>"));
+        return $"""<form method="post" action="/settings/palette" class="palette-switch" role="group" aria-label="Color palette" data-palette-switch>{options}</form>""";
+    }
+
+    public static string Icon(string name, string cls = "")
     {
+        var extraCls = string.IsNullOrEmpty(cls) ? "" : $" {cls}";
         var path = name switch
         {
-            "code" => "<path d=\"m7 5-5 5 5 5m6-10 5 5-5 5M12 2 8 18\"/>",
-            "server" => "<rect x=\"4\" y=\"2\" width=\"12\" height=\"16\" rx=\"2\"/><path d=\"M7 6h6M7 9h6M7 14h2\"/>",
-            "refresh" => "<path d=\"M17 7a7 7 0 1 0 0 6M17 2v5h-5\"/>",
-            "download" => "<path d=\"M10 2v10m0 0 4-4m-4 4-4-4M3 15v3h14v-3\"/>",
-            "search" => "<circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\"/><path d=\"m13 13 5 5\"/>",
-            "settings" => "<path d=\"M10 2.5v2M10 15.5v2M2.5 10h2M15.5 10h2M4.7 4.7l1.4 1.4M13.9 13.9l1.4 1.4M15.3 4.7l-1.4 1.4M6.1 13.9l-1.4 1.4\"/><circle cx=\"10\" cy=\"10\" r=\"3.2\"/>",
-            _ => "<rect x=\"2\" y=\"3\" width=\"16\" height=\"11\" rx=\"1\"/><path d=\"M7 18h6M10 14v4\"/>"
+            "dashboard" => "<path d=\"M12 14v4M3.34 17a10 10 0 1 1 17.32 0\"/><path d=\"m4.93 4.93 4.24 4.24\"/>",
+            "versions" => "<path d=\"m12 3 9 5-9 5-9-5 9-5Z\"/><path d=\"m3 13 9 5 9-5\"/>",
+            "tools" or "code" => "<path d=\"M14.7 6.3a4 4 0 0 0-5.4 5.2L3.6 17.2a1.6 1.6 0 0 0 2.3 2.3l5.7-5.7a4 4 0 0 0 5.2-5.4l-2.5 2.5-2.1-.5-.5-2.1 2.5-2.5Z\"/>",
+            "server" or "cpu" => "<rect x=\"4\" y=\"2\" width=\"12\" height=\"16\" rx=\"2\"/><path d=\"M7 6h6M7 9h6M7 14h2\"/>",
+            "refresh" => "<path d=\"M21 12a9 9 0 1 1-2.6-6.4L21 8\"/><path d=\"M21 3v5h-5\"/>",
+            "download" => "<path d=\"M12 4v11m0 0 4.5-4.5M12 15l-4.5-4.5\"/><path d=\"M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2\"/>",
+            "search" => "<circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-3.5-3.5\"/>",
+            "settings" => "<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/>",
+            "folder" => "<path d=\"M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z\"/>",
+            "clock" => "<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/>",
+            "moon" => "<path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\"/>",
+            "sun" => "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2m-7.1-14.1 1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4m11.4-11.4 1.4-1.4\"/>",
+            "desktop" => "<rect x=\"2\" y=\"3\" width=\"16\" height=\"11\" rx=\"1\"/><path d=\"M7 18h6M10 14v4\"/>",
+            "pulse" => "<polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>",
+            "check" => "<polyline points=\"20 6 9 17 4 12\"/>",
+            "warn" => "<path d=\"m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z\"/><path d=\"M12 9v4M12 17h.01\"/>",
+            "sparkle" => "<path d=\"m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3Z\"/>",
+            "lock" => "<rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
+            "trash" => "<path d=\"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>",
+            "clipboard" or "copy" => "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>",
+            "shield" => "<path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>",
+            "shieldok" => "<path d=\"M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3Z\"/><path d=\"m9 12 2 2 4-4\"/>",
+            "globe" => "<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\"/>",
+            "package" => "<path d=\"m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z\"/><path d=\"m12 12 8-4.5M12 12v9M12 12 4 7.5\"/>",
+            "chevron-right" => "<polyline points=\"9 18 15 12 9 6\"/>",
+            "chevd" => "<path d=\"m6 9 6 6 6-6\"/>",
+            "more" => "<circle cx=\"5\" cy=\"12\" r=\"1.4\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\"/><circle cx=\"19\" cy=\"12\" r=\"1.4\" fill=\"currentColor\"/>",
+            "external" => "<path d=\"M14 4h6v6M20 4l-9 9\"/><path d=\"M10 6H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5\"/>",
+            "terminal" => "<rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"m7 9 3 3-3 3M12 15h5\"/>",
+            "cloud" => "<path d=\"M17.5 19H9a7 7 0 1 1 6.7-9h.8a5.5 5.5 0 0 1 1 11Z\"/>",
+            "plus" => "<path d=\"M12 5v14M5 12h14\"/>",
+            "x" => "<path d=\"M6 6l12 12M18 6 6 18\"/>",
+            "theme-auto" => "<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 3a9 9 0 0 1 0 18Z\" fill=\"currentColor\"/>",
+            "theme-light" => "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2.5M12 19.5V22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M2 12h2.5M19.5 12H22M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8\"/>",
+            "theme-dark" => "<path d=\"M20.5 14.6A8.5 8.5 0 0 1 9.4 3.5a8.5 8.5 0 1 0 11.1 11.1Z\" fill=\"currentColor\"/>",
+            _ => "<circle cx=\"12\" cy=\"12\" r=\"9\"/>"
         };
-        return $"<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">{path}</svg>";
+        return $"<svg class=\"i{extraCls}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">{path}</svg>";
     }
 }
diff --git a/src/DotnetCockpit/PreflightPage.cs b/src/DotnetCockpit/PreflightPage.cs
new file mode 100644
index 0000000..794c66d
--- /dev/null
+++ b/src/DotnetCockpit/PreflightPage.cs
@@ -0,0 +1,212 @@
+using DotnetCockpit.Installation;
+using DotnetCockpit.SdkDownloads;
+using DotnetCockpit.Setup;
+using DotnetCockpit.Tools;
+using static DotnetCockpit.PageLayout;
+
+namespace DotnetCockpit;
+
+internal static class PreflightPage
+{
+    public static string Render(InstallationSnapshot installation, ToolsSnapshot tools, SetupSnapshot setup, SdkDownloadSnapshot sdkDownloads, bool showOnLaunch = false, DateOnly? today = null)
+    {
+        var currentDate = today ?? SupportLifecycle.Today;
+        var rows = InstallationPage.BuildRows(installation, sdkDownloads, currentDate);
+        var health = EnvironmentHealth.Evaluate(installation, sdkDownloads, currentDate);
+
+        var hostOk = installation.Status != "notFound" && !string.IsNullOrWhiteSpace(installation.ExecutablePath);
+        var hostTitle = hostOk ? "dotnet host found" : "No dotnet host found";
+        var hostDetail = hostOk
+            ? $"<code>{Encode(installation.ExecutablePath!)}</code> · first dotnet on PATH"
+            : Encode("The dotnet executable was not found on PATH. Install an SDK or configure PATH.");
+        var hostAction = hostOk
+            ? "<span class=\"badge ok\">Ready</span>"
+            : "<a class=\"button sm\" href=\"/?install=1\">Install .NET</a>";
+
+        var sdks = installation.Sdks;
+        var eolSdks = rows.Where(row => row.Kind == "sdk" && row.IsEol).ToArray();
+        var sdkChannels = sdks.Select(s => s.Version.Split('.')[0]).Distinct().OrderByDescending(c => int.TryParse(c, out var v) ? v : 0).ToArray();
+        var sdkOk = sdks.Length > 0;
+        var sdkStepState = !sdkOk || eolSdks.Length > 0 ? "warn" : "ok";
+        var sdkTitle = sdkOk
+            ? $"{sdks.Length} SDK{(sdks.Length == 1 ? "" : "s")} detected"
+            : "No .NET SDK installed";
+        var sdkDetail = sdkOk
+            ? $"Installed: {string.Join(", ", sdks.Select(s => s.Version))} ({string.Join(", ", sdkChannels.Select(c => $".NET {c}"))})"
+            : "Required to build projects and use dotnet CLI tools.";
+        var sdkAction = !sdkOk
+            ? "<a class=\"button sm\" href=\"/?install=1\">Install .NET</a>"
+            : eolSdks.Length > 0
+                ? $"<span class=\"badge warn\">{eolSdks.Length} EOL</span>"
+                : "<span class=\"badge ok\">Ready</span>";
+
+        var runtimes = installation.Runtimes;
+        var distinctRuntimeVersions = runtimes.Select(r => r.Version).Distinct().ToArray();
+        var eolRuntimes = rows.Where(row => row.Kind == "runtime" && row.IsEol).ToArray();
+        var runtimeOk = runtimes.Length > 0;
+        var runtimeStepState = !runtimeOk || eolRuntimes.Length > 0 ? "warn" : "ok";
+        var runtimeTitle = runtimeOk
+            ? $"{distinctRuntimeVersions.Length} runtime{(distinctRuntimeVersions.Length == 1 ? "" : "s")} detected"
+            : "No .NET runtime installed";
+        var runtimeDetail = runtimeOk
+            ? $"Installed: {string.Join(", ", distinctRuntimeVersions)} (ASP.NET Core & .NET Runtime)"
+            : "Required to execute compiled .NET applications.";
+        var runtimeAction = !runtimeOk
+            ? "<a class=\"button sm\" href=\"/?install=1\">Install .NET</a>"
+            : eolRuntimes.Length > 0
+                ? $"<span class=\"badge warn\">{eolRuntimes.Length} EOL</span>"
+                : "<span class=\"badge ok\">Ready</span>";
+
+        var catalogOk = sdkDownloads.Status == "ready";
+        var catalogTitle = catalogOk ? "Official release catalog loaded" : "Release catalog offline";
+        var catalogDetail = catalogOk
+            ? "Microsoft release metadata · support dates, patches, security fixes"
+            : Encode(sdkDownloads.Error ?? "Could not reach Microsoft release servers. Support status cannot be checked.");
+        var catalogBadge = catalogOk
+            ? "<span class=\"badge ok\">Ready</span>"
+            : "<span class=\"badge warn\">Offline</span>";
+
+        var wsInitialized = tools.LocalManifestInitialized;
+        var wsOwned = tools.LocalManifestOwned;
+        var wsTitle = "Workspace detected";
+        var shortenedWsPath = ShortenPath(tools.WorkingDirectory);
+        var wsToolWord = tools.Local.Tools.Length == 1 ? "local tool" : "local tools";
+        var wsDetail = wsInitialized
+            ? $"<code>{Encode(shortenedWsPath)}</code> · {(wsOwned ? $"{tools.Local.Tools.Length} {wsToolWord} declared" : $"{tools.Local.Tools.Length} {wsToolWord} from an inherited manifest")}"
+            : $"<code>{Encode(shortenedWsPath)}</code> · No local tool manifest";
+
+        var uninstallInstalled = setup.UninstallTool.Installed;
+        var uninstallTitle = uninstallInstalled ? "Uninstall tool is installed" : "Removal support is not installed";
+        var uninstallDetail = uninstallInstalled
+            ? $"Ready to list and remove installations · version {Encode(setup.UninstallTool.Version ?? "detected")}"
+            : "Optional. Cockpit needs Microsoft’s dotnet-core-uninstall to remove old versions for you.";
+        var uninstallAction = uninstallInstalled
+            ? "<span class=\"badge ok\">Ready</span>"
+            : "<a class=\"button sm\" href=\"/setup\">Set up now</a>";
+
+        var issues = health.Count;
+        var attentionBadgeClass = issues > 0 || !health.SupportKnown ? "warn" : "ok";
+        var attentionTitle = issues switch
+        {
+            0 when health.SupportKnown => "All systems look healthy",
+            0 => "Support status could not be checked",
+            1 => "1 thing needs your attention",
+            _ => $"{issues} things need your attention"
+        };
+        var attentionSubtitle = Encode(health.Headline);
+
+        return $$"""
+            <!doctype html>
+            <html lang="en" data-theme="{{SettingsTheme}}" data-palette="{{PageLayout.CurrentSettings().Palette}}"{{PageLayout.AccentAttribute}}>
+            <head>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1">
+              <meta name="color-scheme" content="light dark">
+              <title>Pre-flight Check | .NET Cockpit</title>
+              <link rel="icon" type="image/png" sizes="32x32" href="/assets/logo-32.png">
+              <link rel="stylesheet" href="/assets/app.css">
+              <script type="module" src="/assets/app.js"></script>
+            </head>
+            <body class="app-body preflight-body">
+              {{PageLayout.ThemeSwitch(extraClass: "pf-theme-btn")}}
+
+              <div class="preflight">
+                <div class="pf">
+                  <div class="pf-brand">
+                    <img src="/assets/logo.png" alt=".NET Cockpit logo">
+                    <div>
+                      <div class="muted pf-kicker">.NET Cockpit</div>
+                      <h1 class="pf-title">Pre-flight <span class="grad-text">check</span></h1>
+                    </div>
+                  </div>
+                  <p class="sub pf-desc">Cockpit looks at the .NET installation on this machine. It only reads — nothing is installed or removed without your explicit confirmation.</p>
+
+                  <div class="card steps">
+                    <div class="step">
+                      <span class="st {{(hostOk ? "ok" : "warn")}}">{{Icon(hostOk ? "check" : "warn", "sm")}}</span>
+                      <div><b>{{hostTitle}}</b><p>{{hostDetail}}</p></div>
+                      {{hostAction}}
+                    </div>
+
+                    <div class="step">
+                      <span class="st {{sdkStepState}}">{{Icon(sdkStepState == "ok" ? "check" : "warn", "sm")}}</span>
+                      <div><b>{{sdkTitle}}</b><p>{{Encode(sdkDetail)}}</p></div>
+                      {{sdkAction}}
+                    </div>
+
+                    <div class="step">
+                      <span class="st {{runtimeStepState}}">{{Icon(runtimeStepState == "ok" ? "check" : "warn", "sm")}}</span>
+                      <div><b>{{runtimeTitle}}</b><p>{{Encode(runtimeDetail)}}</p></div>
+                      {{runtimeAction}}
+                    </div>
+
+                    <div class="step">
+                      <span class="st {{(catalogOk ? "ok" : "warn")}}">{{Icon(catalogOk ? "check" : "warn", "sm")}}</span>
+                      <div><b>{{catalogTitle}}</b><p>{{catalogDetail}}</p></div>
+                      {{catalogBadge}}
+                    </div>
+
+                    <div class="step">
+                      <span class="st ok">{{Icon("check", "sm")}}</span>
+                      <div><b>{{wsTitle}}</b><p>{{wsDetail}}</p></div>
+                      <span class="badge ok">Ready</span>
+                    </div>
+
+                    <div class="step">
+                      <span class="st {{(uninstallInstalled ? "ok" : "warn")}}">{{Icon(uninstallInstalled ? "check" : "warn", "sm")}}</span>
+                      <div><b>{{uninstallTitle}}</b><p>{{uninstallDetail}}</p></div>
+                      {{uninstallAction}}
+                    </div>
+                  </div>
+
+                  <div class="card pf-attention">
+                    <span class="pf-attention-icon {{attentionBadgeClass}}">{{Icon("sparkle", "sm")}}</span>
+                    <div class="pf-attention-text">
+                      <b>{{attentionTitle}}</b>
+                      <p class="muted">{{attentionSubtitle}}</p>
+                    </div>
+                  </div>
+
+                  <form method="post" action="/settings/preflight" class="pf-foot">
+                    <button class="button primary lg pf-open-btn" type="submit">Open cockpit {{Icon("chevron-right", "sm")}}</button>
+                    <span class="spacer"></span>
+                    <label class="pf-skip-label">
+                      <input type="checkbox" id="skip-preflight-checkbox" name="skip" value="true"{{(showOnLaunch ? "" : " checked")}}>
+                      <span>Don’t show on next launch</span>
+                    </label>
+                  </form>
+
+                  <div class="trust">
+                    <span>{{Icon("lock", "xs")}} Runs only on 127.0.0.1</span>
+                    <span>{{Icon("shield", "xs")}} No telemetry, no accounts</span>
+                    <span>{{Icon("code", "xs")}} Single native binary — no .NET or Node required</span>
+                    <span>{{Icon("cloud", "xs")}} Talks only to Microsoft, NuGet and GitHub</span>
+                  </div>
+                </div>
+              </div>
+            </body>
+            </html>
+            """;
+    }
+
+    private static string SettingsTheme => PageLayout.CurrentSettings().Theme;
+
+    private static string ShortenPath(string path)
+    {
+        if (string.IsNullOrWhiteSpace(path)) return "";
+        var home = Environment.GetFolderPath(Environment.SpecialFolder.UserProfile);
+        if (!string.IsNullOrEmpty(home) && path.StartsWith(home, StringComparison.OrdinalIgnoreCase))
+        {
+            path = "~" + path[home.Length..];
+        }
+        else if (path.StartsWith("/Volumes/", StringComparison.OrdinalIgnoreCase))
+        {
+            var parts = path.Split('/', StringSplitOptions.RemoveEmptyEntries);
+            if (parts.Length >= 4)
+            {
+                path = "~/" + string.Join('/', parts.Skip(2));
+            }
+        }
+        return path;
+    }
+}
diff --git a/src/DotnetCockpit/Program.cs b/src/DotnetCockpit/Program.cs
index e3b4be5..90bfafd 100644
--- a/src/DotnetCockpit/Program.cs
+++ b/src/DotnetCockpit/Program.cs
@@ -40,8 +40,12 @@
 });
 builder.Services.AddSingleton<DotnetUninstallToolService>();
 builder.Services.AddSingleton<WebAssets>();
+builder.Services.AddSingleton<SettingsStore>();
 
 var app = builder.Build();
+var settingsStore = app.Services.GetRequiredService<SettingsStore>();
+PageLayout.CurrentSettings = () => settingsStore.Current;
+PageLayout.CurrentAccent = () => SystemAccent.Current;
 app.Use(async (context, next) =>
 {
     if (context.Request.Host.Host != "127.0.0.1")
@@ -55,13 +59,36 @@
 });
 
 app.MapGet("/api/health", () => new HealthStatus("ok"));
-app.MapGet("/", async (DotnetInstallationService service, HttpContext context, ILogger<Program> logger) =>
+app.MapGet("/api/accent", (HttpContext context) =>
 {
     context.Response.Headers.CacheControl = "no-store";
-    var snapshot = await ReadInstallation(service, context, logger);
-    return Results.Content(InstallationPage.Render(snapshot, InstallationViewOptions.From(context.Request.Query)),
+    return Results.Json(new SystemAccentStatus(SystemAccent.Current), AppJsonContext.Default.SystemAccentStatus);
+});
+app.MapGet("/overview", async (DotnetInstallationService installationService, DotnetToolsService toolsService, DotnetUninstallToolService setupService, SdkDownloadCatalog sdkCatalog, HttpContext context, ILogger<Program> logger) =>
+{
+    context.Response.Headers.CacheControl = "no-store";
+    var installationTask = ReadInstallation(installationService, context, logger);
+    var toolsTask = ReadTools(toolsService, context, logger);
+    var setupTask = setupService.ReadAsync(context.RequestAborted);
+    var sdkTask = sdkCatalog.ReadAsync(context.RequestAborted);
+    var activeSdkTask = installationService.ReadActiveSdkAsync(context.RequestAborted);
+    await Task.WhenAll(installationTask, toolsTask, setupTask, sdkTask, activeSdkTask);
+    return Results.Content(OverviewPage.Render(installationTask.Result, toolsTask.Result, setupTask.Result, sdkTask.Result, activeSdkTask.Result), "text/html; charset=utf-8");
+});
+app.MapGet("/", async (DotnetInstallationService service, DotnetToolsService toolsService, SdkDownloadCatalog sdkCatalog, HttpContext context, ILogger<Program> logger) =>
+{
+    context.Response.Headers.CacheControl = "no-store";
+    var installationTask = ReadInstallation(service, context, logger);
+    var sdkTask = sdkCatalog.ReadAsync(context.RequestAborted);
+    var toolsTask = ReadTools(toolsService, context, logger);
+    await Task.WhenAll(installationTask, sdkTask, toolsTask);
+    var snapshot = installationTask.Result;
+    var sdkSnapshot = sdkTask.Result;
+    int? toolsCount = toolsTask.Result.Status == "ready" ? toolsTask.Result.Global.Tools.Length + toolsTask.Result.Local.Tools.Length : null;
+    return Results.Content(InstallationPage.Render(snapshot, sdkSnapshot, InstallationViewOptions.From(context.Request.Query), navTools: toolsCount),
         "text/html; charset=utf-8", statusCode: snapshot.Status == "error" ? 503 : 200);
 });
+app.MapGet("/versions", (HttpContext context) => Results.Redirect("/"));
 app.MapGet("/api/installation", async (DotnetInstallationService service, HttpContext context, ILogger<Program> logger) =>
 {
     context.Response.Headers.CacheControl = "no-store";
@@ -71,17 +98,96 @@
 app.MapPost("/installation/remove", async (HttpContext context, DotnetUninstallToolService service) =>
 {
     var form = await context.Request.ReadFormAsync(context.RequestAborted);
+    var items = form["items"];
+    if (items.Count > 0)
+    {
+        var targets = items.Select(item => (item ?? "").Split('|', 2))
+            .Where(parts => parts.Length == 2 && !string.IsNullOrWhiteSpace(parts[0]))
+            .Select(parts => ((string?)parts[0], (string?)parts[1]))
+            .ToArray();
+        var batch = await service.RemoveInstallationsAsync(targets, context.RequestAborted);
+        return Results.Redirect(InstallationRedirect(form, batch.Success ? "removed" : "remove-failed"));
+    }
     var result = await service.RemoveInstallationAsync(form["version"].ToString(), form["kind"].ToString(), context.RequestAborted);
     return Results.Redirect(InstallationRedirect(form, result.Success ? "removed" : "remove-failed"));
 });
-app.MapGet("/setup", async (DotnetUninstallToolService service, SdkDownloadCatalog sdkCatalog, DotnetInstallationService installationService, HttpContext context, ILogger<Program> logger) =>
+app.MapGet("/preflight", async (DotnetInstallationService installationService, DotnetToolsService toolsService, DotnetUninstallToolService setupService, SdkDownloadCatalog sdkCatalog, HttpContext context, ILogger<Program> logger) =>
+{
+    context.Response.Headers.CacheControl = "no-store";
+    var installationTask = ReadInstallation(installationService, context, logger);
+    var toolsTask = ReadTools(toolsService, context, logger);
+    var setupTask = setupService.ReadAsync(context.RequestAborted);
+    var sdkTask = sdkCatalog.ReadAsync(context.RequestAborted);
+    await Task.WhenAll(installationTask, toolsTask, setupTask, sdkTask);
+    return Results.Content(PreflightPage.Render(installationTask.Result, toolsTask.Result, setupTask.Result, sdkTask.Result, settingsStore.Current.PreflightOnLaunch), "text/html; charset=utf-8");
+});
+app.MapGet("/setup", async (DotnetUninstallToolService service, SdkDownloadCatalog sdkCatalog, DotnetInstallationService installationService, DotnetToolsService toolsService, HttpContext context, ILogger<Program> logger) =>
 {
     context.Response.Headers.CacheControl = "no-store";
     var setupTask = service.ReadAsync(context.RequestAborted);
     var sdkTask = sdkCatalog.ReadAsync(context.RequestAborted);
     var installationTask = ReadInstallation(installationService, context, logger);
-    await Task.WhenAll(setupTask, sdkTask, installationTask);
-    return Results.Content(SetupPage.Render(setupTask.Result, sdkTask.Result, installationTask.Result, SetupViewOptions.From(context.Request.Query)), "text/html; charset=utf-8");
+    var toolsTask = ReadTools(toolsService, context, logger);
+    await Task.WhenAll(setupTask, sdkTask, installationTask, toolsTask);
+    int? toolsCount = toolsTask.Result.Status == "ready" ? toolsTask.Result.Global.Tools.Length + toolsTask.Result.Local.Tools.Length : null;
+    return Results.Content(SetupPage.Render(setupTask.Result, sdkTask.Result, installationTask.Result, SetupViewOptions.From(context.Request.Query), toolsCount), "text/html; charset=utf-8");
+});
+app.MapGet("/settings", () => Results.Redirect("/setup"));
+app.MapPost("/settings/theme", async (HttpContext context) =>
+{
+    var form = await context.Request.ReadFormAsync(context.RequestAborted);
+    var theme = SettingsStore.NormalizeTheme(form["theme"].ToString());
+    settingsStore.Update(settings => settings with { Theme = theme });
+    return Results.Redirect(LocalReferer(context));
+});
+app.MapPost("/settings/palette", async (HttpContext context) =>
+{
+    var form = await context.Request.ReadFormAsync(context.RequestAborted);
+    var palette = SettingsStore.NormalizePalette(form["palette"].ToString());
+    settingsStore.Update(settings => settings with { Palette = palette });
+    return Results.Redirect(LocalReferer(context));
+});
+app.MapPost("/settings/preflight", async (HttpContext context) =>
+{
+    var form = await context.Request.ReadFormAsync(context.RequestAborted);
+    var fromSettings = form["return"].ToString() == "settings";
+    var show = fromSettings ? form["show"].ToString() == "true" : form["skip"].ToString() != "true";
+    settingsStore.Update(settings => settings with { PreflightOnLaunch = show });
+    return Results.Redirect(fromSettings ? "/setup" : "/");
+});
+app.MapGet("/confirm", async (DotnetInstallationService installationService, DotnetToolsService toolsService, DotnetUninstallToolService setupService, SdkDownloadCatalog sdkCatalog, HttpContext context, ILogger<Program> logger) =>
+{
+    context.Response.Headers.CacheControl = "no-store";
+    var query = context.Request.Query;
+    var installationTask = ReadInstallation(installationService, context, logger);
+    var sdkTask = sdkCatalog.ReadAsync(context.RequestAborted);
+    var toolsTask = ReadTools(toolsService, context, logger);
+    var setupTask = setupService.ReadAsync(context.RequestAborted);
+    await Task.WhenAll(installationTask, sdkTask, toolsTask, setupTask);
+    var rows = InstallationPage.BuildRows(installationTask.Result, sdkTask.Result, SupportLifecycle.Today);
+    var scope = query["scope"].ToString();
+    var packageId = query["packageId"].ToString();
+    var isListedTool = toolsTask.Result.Global.Tools.Concat(toolsTask.Result.Local.Tools).Any(tool => string.Equals(tool.PackageId, packageId, StringComparison.OrdinalIgnoreCase));
+    var viewOptions = InstallationViewOptions.From(query) with { Kind = query["viewKind"].ToString() is "sdks" or "runtimes" or "previews" ? query["viewKind"].ToString() : "all" };
+    ConfirmSpec? spec = query["action"].ToString() switch
+    {
+        "version-remove" when rows.FirstOrDefault(row => row.CanRemove && row.Version == query["version"].ToString() && row.Kind == query["kind"].ToString()) is { } row => ConfirmActions.VersionRemove(row, viewOptions),
+        "channel-remove" when rows.Where(row => row.CanRemove && row.Channel == query["channel"].ToString()).ToArray() is { Length: > 0 } channelRows => ConfirmActions.ChannelRemove(query["channel"].ToString(), channelRows),
+        "tool-install" when packageId.Length > 0 => ConfirmActions.ToolInstall(packageId, query["version"].ToString(), scope),
+        "tool-uninstall" when isListedTool => ConfirmActions.ToolUninstall(packageId, scope),
+        "tool-update" when isListedTool => ConfirmActions.ToolUpdate(packageId, scope, null),
+        "tools-update-all" when query["items"].Count > 0 => ConfirmActions.ToolsUpdateAll(scope is "local" or "all" ? scope : "global", query["q"].ToString(), query["items"].Select(item => item ?? "").ToArray()),
+        "manifest-init" => ConfirmActions.ManifestInit(query["q"].ToString()),
+        "manifest-remove" => ConfirmActions.ManifestRemove(query["q"].ToString()),
+        "setup-install" => ConfirmActions.SetupInstall(query["version"].ToString(), setupTask.Result.GlobalInstallPath),
+        "setup-update" => ConfirmActions.SetupUpdate(setupTask.Result.LatestVersion),
+        "setup-uninstall" => ConfirmActions.SetupUninstall(),
+        _ => null
+    };
+    if (spec is null) return Results.Redirect("/");
+    var health = EnvironmentHealth.Evaluate(installationTask.Result, sdkTask.Result);
+    int? toolsCount = toolsTask.Result.Status == "ready" ? toolsTask.Result.Global.Tools.Length + toolsTask.Result.Local.Tools.Length : null;
+    return Results.Content(ConfirmActions.RenderPage(spec, health.Count, installationTask.Result.InstallationCount, toolsCount), "text/html; charset=utf-8");
 });
 app.MapPost("/setup/install", async (HttpContext context, DotnetUninstallToolService service) =>
 {
@@ -99,22 +205,55 @@
     var result = await service.UninstallAsync(context.RequestAborted);
     return Results.Redirect($"/setup?notice={(result.Success ? "uninstalled" : "uninstall-failed")}");
 });
-app.MapGet("/tools", async (DotnetToolsService service, HttpContext context, ILogger<Program> logger) =>
+app.MapGet("/tools", async (DotnetToolsService service, DotnetInstallationService installationService, SdkDownloadCatalog sdkCatalog, HttpClient httpClient, HttpContext context, ILogger<Program> logger) =>
 {
     context.Response.Headers.CacheControl = "no-store";
-    var snapshot = await ReadTools(service, context, logger);
+    var toolsTask = ReadTools(service, context, logger);
+    var installationTask = ReadInstallation(installationService, context, logger);
+    var sdkTask = sdkCatalog.ReadAsync(context.RequestAborted);
+    await Task.WhenAll(toolsTask, installationTask, sdkTask);
+    var snapshot = toolsTask.Result;
+    var health = EnvironmentHealth.Evaluate(installationTask.Result, sdkTask.Result);
+    if (snapshot.Status == "ready")
+    {
+        await ToolMetadataCatalog.WarmCacheAsync(snapshot, httpClient, context.RequestAborted);
+    }
     var options = ToolsViewOptions.From(context.Request.Query);
     var search = snapshot.Status == "ready" && options.SearchQuery.Length > 0
         ? await service.SearchAsync(options.SearchQuery, context.RequestAborted)
         : new ToolSearch(options.SearchQuery, []);
-    return Results.Content(ToolsPage.Render(snapshot, options, search), "text/html; charset=utf-8", statusCode: snapshot.Status == "error" ? 503 : 200);
+    return Results.Content(ToolsPage.Render(snapshot, options, search, health.Count, installationTask.Result.InstallationCount, installationTask.Result.Signature), "text/html; charset=utf-8", statusCode: snapshot.Status == "error" ? 503 : 200);
 });
 app.MapPost("/tools/install", async (HttpContext context, DotnetToolsService service) =>
 {
     var form = await context.Request.ReadFormAsync(context.RequestAborted);
     var scope = form["scope"].ToString();
     var result = await service.InstallAsync(form["packageId"].ToString(), form["version"].ToString(), scope, context.RequestAborted);
-    return Results.Redirect(ToolRedirect(scope, form["q"].ToString(), result.Success ? "installed" : "failed"));
+    return Results.Redirect(ToolRedirect(scope, form["q"].ToString(), result.Success ? "installed" : "failed", form["packageId"].ToString()));
+});
+app.MapPost("/tools/update", async (HttpContext context, DotnetToolsService service) =>
+{
+    var form = await context.Request.ReadFormAsync(context.RequestAborted);
+    var scope = form["scope"].ToString();
+    var result = await service.UpdateAsync(form["packageId"].ToString(), scope, context.RequestAborted);
+    return Results.Redirect(ToolRedirect(scope, "", result.Success ? "updated" : "failed", form["packageId"].ToString()));
+});
+app.MapPost("/tools/update-all", async (HttpContext context, DotnetToolsService service) =>
+{
+    var form = await context.Request.ReadFormAsync(context.RequestAborted);
+    var scope = form["scope"].ToString();
+    var items = form["items"];
+    var anySucceeded = false;
+    foreach (var item in items)
+    {
+        if (string.IsNullOrWhiteSpace(item)) continue;
+        var parts = item.Split('|', 2);
+        var pkgId = parts[0];
+        var itemScope = parts.Length > 1 ? parts[1] : (scope == "local" ? "local" : "global");
+        var res = await service.UpdateAsync(pkgId, itemScope, context.RequestAborted);
+        if (res.Success) anySucceeded = true;
+    }
+    return Results.Redirect(ToolRedirect(scope, form["q"].ToString(), anySucceeded ? "updated" : "failed"));
 });
 app.MapPost("/tools/uninstall", async (HttpContext context, DotnetToolsService service) =>
 {
@@ -141,8 +280,30 @@
     var snapshot = await ReadTools(service, context, logger);
     return Results.Json(snapshot, AppJsonContext.Default.ToolsSnapshot, statusCode: snapshot.Status == "error" ? 503 : 200);
 });
+app.MapGet("/api/tools/search", async (DotnetToolsService service, HttpContext context) =>
+{
+    context.Response.Headers.CacheControl = "no-store";
+    var query = context.Request.Query["q"].ToString().Trim();
+    if (query.Length is 0 or > 100)
+        return Results.Json(new ToolSearch("", []), AppJsonContext.Default.ToolSearch);
+    var search = await service.SearchAsync(query, context.RequestAborted);
+    return Results.Json(search, AppJsonContext.Default.ToolSearch);
+});
+app.MapGet("/api/tools/icon", async (HttpContext context, HttpClient httpClient) =>
+{
+    var packageId = context.Request.Query["packageId"].ToString().Trim();
+    var version = context.Request.Query["version"].ToString().Trim();
+    var (bytes, contentType) = await ToolMetadataCatalog.GetOrFetchIconAsync(packageId, version, httpClient, context.RequestAborted);
+    context.Response.Headers.CacheControl = "public, max-age=3600";
+    return Results.Bytes(bytes ?? [], contentType);
+});
 app.MapGet("/{**path}", (HttpContext context, WebAssets assets, string? path) => assets.Get(context, path));
 
+static string LocalReferer(HttpContext context) =>
+    Uri.TryCreate(context.Request.Headers.Referer.ToString(), UriKind.Absolute, out var referer) && referer.Host == context.Request.Host.Host
+        ? referer.PathAndQuery
+        : "/";
+
 static async Task<InstallationSnapshot> ReadInstallation(DotnetInstallationService service, HttpContext context, ILogger<Program> logger)
 {
     try { return await service.ReadAsync(context.RequestAborted); }
@@ -167,12 +328,13 @@ static async Task<ToolsSnapshot> ReadTools(DotnetToolsService service, HttpConte
     }
 }
 
-static string ToolRedirect(string scope, string query, string notice)
+static string ToolRedirect(string scope, string query, string notice, string changed = "")
 {
-    var normalizedScope = scope == "local" ? "local" : "global";
+    var normalizedScope = scope == "local" ? "local" : scope == "all" ? "all" : "global";
     var normalizedQuery = query.Trim();
     var result = $"/tools?scope={normalizedScope}";
     if (normalizedQuery.Length is > 0 and <= 100) result += $"&q={Uri.EscapeDataString(normalizedQuery)}";
+    if (changed.Length is > 0 and <= 100) result += $"&changed={Uri.EscapeDataString(changed)}";
     return $"{result}&notice={notice}";
 }
 
@@ -182,8 +344,7 @@ static string InstallationRedirect(IFormCollection form, string notice)
     var sort = form["sort"].ToString() is "name" or "path" ? form["sort"].ToString() : "version";
     var direction = form["direction"].ToString() == "asc" ? "asc" : "desc";
     var query = form["q"].ToString().Trim();
-    var result = $"/?q={Uri.EscapeDataString(query)}&kind={kind}&sort={sort}&direction={direction}&notice={notice}";
-    return $"{result}#inventory";
+    return $"/?q={Uri.EscapeDataString(query)}&kind={kind}&sort={sort}&direction={direction}&notice={notice}";
 }
 
 await app.StartAsync();
@@ -191,7 +352,10 @@ static string InstallationRedirect(IFormCollection form, string notice)
 Console.WriteLine($".NET Cockpit: {url}");
 if (options.OpenBrowser)
 {
-    try { Process.Start(new ProcessStartInfo(url) { UseShellExecute = true }); }
+    var launchSettings = settingsStore.Current;
+    var startUrl = launchSettings.PreflightOnLaunch || !launchSettings.FirstLaunchCompleted ? url + "preflight" : url;
+    settingsStore.Update(settings => settings with { FirstLaunchCompleted = true });
+    try { Process.Start(new ProcessStartInfo(startUrl) { UseShellExecute = true }); }
     catch (Exception exception) when (exception is Win32Exception or InvalidOperationException)
     {
         Console.Error.WriteLine($"Open {url} in your browser.");
diff --git a/src/DotnetCockpit/SdkDownloads/SdkDownloadCatalog.cs b/src/DotnetCockpit/SdkDownloads/SdkDownloadCatalog.cs
index 367e65c..f85a83e 100644
--- a/src/DotnetCockpit/SdkDownloads/SdkDownloadCatalog.cs
+++ b/src/DotnetCockpit/SdkDownloads/SdkDownloadCatalog.cs
@@ -7,13 +7,13 @@ internal sealed record SdkCve(string Id, string? Url);
 
 internal sealed record SdkDownload(string Product, string Version, string InstallationVersion, string? IncludedRuntimeVersion, string Channel, string ReleaseType, string SupportPhase, string? EndOfSupportDate, string ReleaseDate, SdkCve[] Cves, string Url, string Sha512);
 
-internal sealed record SdkDownloadSnapshot(string Status, SdkDownload[] Downloads, string? Error = null);
+internal sealed record SdkDownloadSnapshot(string Status, SdkDownload[] Downloads, string? Error = null, ChannelLifecycle[]? Channels = null);
 
 internal sealed class SdkDownloadCatalog(ILogger<SdkDownloadCatalog> logger, HttpClient httpClient)
 {
     private const string IndexUrl = "https://builds.dotnet.microsoft.com/dotnet/release-metadata/releases-index.json";
     private static readonly Uri OfficialHost = new("https://builds.dotnet.microsoft.com/");
-    private SdkDownload[]? cachedDownloads;
+    private (SdkDownload[] Downloads, ChannelLifecycle[] Channels)? cachedCatalog;
     private DateTimeOffset cacheExpiresAt;
     private readonly SemaphoreSlim cacheLock = new(1, 1);
 
@@ -21,8 +21,8 @@ public async Task<SdkDownloadSnapshot> ReadAsync(CancellationToken cancellationT
     {
         try
         {
-            var downloads = await ReadCatalogAsync(cancellationToken);
-            return new("ready", downloads);
+            var catalog = await ReadCatalogAsync(cancellationToken);
+            return new("ready", catalog.Downloads, Channels: catalog.Channels);
         }
         catch (OperationCanceledException) when (!cancellationToken.IsCancellationRequested)
         {
@@ -36,19 +36,20 @@ public async Task<SdkDownloadSnapshot> ReadAsync(CancellationToken cancellationT
         }
     }
 
-    private async Task<SdkDownload[]> ReadCatalogAsync(CancellationToken cancellationToken)
+    private async Task<(SdkDownload[] Downloads, ChannelLifecycle[] Channels)> ReadCatalogAsync(CancellationToken cancellationToken)
     {
-        if (cachedDownloads is not null && cacheExpiresAt > DateTimeOffset.UtcNow) return cachedDownloads;
+        if (cachedCatalog is { } current && cacheExpiresAt > DateTimeOffset.UtcNow) return current;
 
         await cacheLock.WaitAsync(cancellationToken);
         try
         {
-            if (cachedDownloads is not null && cacheExpiresAt > DateTimeOffset.UtcNow) return cachedDownloads;
+            if (cachedCatalog is { } fresh && cacheExpiresAt > DateTimeOffset.UtcNow) return fresh;
             using var timeout = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
-            timeout.CancelAfter(TimeSpan.FromSeconds(30));
-            cachedDownloads = await FetchCatalogAsync(timeout.Token);
+            timeout.CancelAfter(TimeSpan.FromSeconds(5));
+            var catalog = await FetchCatalogAsync(timeout.Token);
+            cachedCatalog = catalog;
             cacheExpiresAt = DateTimeOffset.UtcNow.AddHours(1);
-            return cachedDownloads;
+            return catalog;
         }
         finally
         {
@@ -56,7 +57,7 @@ private async Task<SdkDownload[]> ReadCatalogAsync(CancellationToken cancellatio
         }
     }
 
-    private async Task<SdkDownload[]> FetchCatalogAsync(CancellationToken cancellationToken)
+    private async Task<(SdkDownload[] Downloads, ChannelLifecycle[] Channels)> FetchCatalogAsync(CancellationToken cancellationToken)
     {
         using var indexDocument = await GetJsonAsync(IndexUrl, cancellationToken);
         if (!indexDocument.RootElement.TryGetProperty("releases-index", out var channels) || channels.ValueKind != JsonValueKind.Array)
@@ -75,37 +76,62 @@ private async Task<SdkDownload[]> FetchCatalogAsync(CancellationToken cancellati
         }).ToArray();
 
         var results = await Task.WhenAll(channelTasks);
-        return results.SelectMany(downloads => downloads)
+        var downloads = results.SelectMany(result => result.Downloads)
             .DistinctBy(download => (download.Product, download.Version), ProductTupleComparer.Instance)
             .OrderByDescending(download => download.ReleaseDate, StringComparer.Ordinal)
             .ThenByDescending(download => download.Version, StringComparer.Ordinal)
             .ToArray();
+        return (downloads, results.Select(result => result.Lifecycle).ToArray());
     }
 
-    private async Task<SdkDownload[]> ReadChannelAsync(string channel, string releaseType, string supportPhase, string? endOfSupportDate, string releaseUrl, CancellationToken cancellationToken)
+    private async Task<(SdkDownload[] Downloads, ChannelLifecycle Lifecycle)> ReadChannelAsync(string channel, string releaseType, string supportPhase, string? endOfSupportDate, string releaseUrl, CancellationToken cancellationToken)
     {
         using var document = await GetJsonAsync(releaseUrl, cancellationToken);
         if (!document.RootElement.TryGetProperty("releases", out var releases) || releases.ValueKind != JsonValueKind.Array)
             throw new InvalidDataException($"The .NET {channel} release metadata did not contain releases.");
 
         var downloads = new List<SdkDownload>();
+        DateOnly? firstRelease = null;
+        DateOnly? generalAvailability = null;
         foreach (var release in releases.EnumerateArray())
         {
             var releaseDate = GetString(release, "release-date");
             if (string.IsNullOrWhiteSpace(releaseDate)) continue;
+            if (SupportLifecycle.ParseDate(releaseDate) is { } parsedDate)
+            {
+                if (firstRelease is null || parsedDate < firstRelease) firstRelease = parsedDate;
+                var isStable = GetString(release, "release-version") is { } releaseVersion && !releaseVersion.Contains('-');
+                if (isStable && (generalAvailability is null || parsedDate < generalAvailability)) generalAvailability = parsedDate;
+            }
             var cves = ReadCves(release);
             AddPackages(release, "sdk", "SDK", "dotnet-sdk", channel, releaseType, supportPhase, endOfSupportDate, releaseDate, cves, downloads);
+            if (release.TryGetProperty("sdks", out var sdksArray) && sdksArray.ValueKind == JsonValueKind.Array)
+            {
+                foreach (var sdkEl in sdksArray.EnumerateArray())
+                {
+                    if (sdkEl.ValueKind == JsonValueKind.Object)
+                        AddProductElement(sdkEl, "sdk", "SDK", "dotnet-sdk", channel, releaseType, supportPhase, endOfSupportDate, releaseDate, cves, downloads);
+                }
+            }
             AddPackages(release, "runtime", ".NET Runtime", "dotnet-runtime", channel, releaseType, supportPhase, endOfSupportDate, releaseDate, cves, downloads);
         }
 
-        return downloads.ToArray();
+        var lifecycle = new ChannelLifecycle(channel, releaseType, supportPhase, SupportLifecycle.ParseDate(endOfSupportDate), firstRelease, generalAvailability);
+        return (downloads.ToArray(), lifecycle);
     }
 
     private static void AddPackages(JsonElement release, string productProperty, string productName, string packagePrefix,
         string channel, string releaseType, string supportPhase, string? endOfSupportDate, string releaseDate, SdkCve[] cves, List<SdkDownload> downloads)
     {
-        if (!release.TryGetProperty(productProperty, out var product) || product.ValueKind != JsonValueKind.Object ||
-            !product.TryGetProperty("files", out var files) || files.ValueKind != JsonValueKind.Array)
+        if (!release.TryGetProperty(productProperty, out var product) || product.ValueKind != JsonValueKind.Object)
+            return;
+        AddProductElement(product, productProperty, productName, packagePrefix, channel, releaseType, supportPhase, endOfSupportDate, releaseDate, cves, downloads);
+    }
+
+    private static void AddProductElement(JsonElement product, string productProperty, string productName, string packagePrefix,
+        string channel, string releaseType, string supportPhase, string? endOfSupportDate, string releaseDate, SdkCve[] cves, List<SdkDownload> downloads)
+    {
+        if (!product.TryGetProperty("files", out var files) || files.ValueKind != JsonValueKind.Array)
             return;
 
         var version = GetString(product, "version-display") ?? GetString(product, "version");
diff --git a/src/DotnetCockpit/SdkDownloads/SupportLifecycle.cs b/src/DotnetCockpit/SdkDownloads/SupportLifecycle.cs
new file mode 100644
index 0000000..883fbde
--- /dev/null
+++ b/src/DotnetCockpit/SdkDownloads/SupportLifecycle.cs
@@ -0,0 +1,80 @@
+using System.Globalization;
+
+namespace DotnetCockpit.SdkDownloads;
+
+/// <summary>Official lifecycle data for one .NET channel, read from the Microsoft release metadata.</summary>
+internal sealed record ChannelLifecycle(
+    string Channel,
+    string ReleaseType,
+    string SupportPhase,
+    DateOnly? EndOfSupport,
+    DateOnly? FirstRelease,
+    DateOnly? GeneralAvailability);
+
+internal enum SupportState { Unknown, Preview, Supported, EndingSoon, EndOfLife }
+
+internal sealed record SupportStatus(SupportState State, ChannelLifecycle? Channel, int? DaysLeft)
+{
+    public bool IsEol => State == SupportState.EndOfLife;
+    public bool IsEndingSoon => State == SupportState.EndingSoon;
+    public string ReleaseType => Channel?.ReleaseType ?? "";
+    public bool IsLts => ReleaseType == "LTS";
+    public string EndDate => Channel?.EndOfSupport is { } date ? SupportLifecycle.FormatDate(date) : "";
+
+    /// <summary>Short status for a channel header, such as "Support ends in 6 days".</summary>
+    public string Label => State switch
+    {
+        SupportState.EndOfLife => EndDate.Length > 0 ? $"Out of support since {EndDate}" : "Out of support",
+        SupportState.EndingSoon => $"Support ends {SupportLifecycle.RelativeDays(DaysLeft ?? 0)} ({EndDate})",
+        SupportState.Preview => "Preview release",
+        SupportState.Supported => EndDate.Length > 0 ? $"Supported until {EndDate}" : "Supported",
+        _ => "Support status unavailable"
+    };
+}
+
+internal static class SupportLifecycle
+{
+    public const int EndingSoonDays = 30;
+
+    public static DateOnly Today => DateOnly.FromDateTime(DateTime.Now);
+
+    public static SupportStatus For(SdkDownloadSnapshot? catalog, string version, DateOnly today)
+    {
+        var channel = ChannelVersion(version);
+        var lifecycle = catalog?.Channels?.FirstOrDefault(entry => entry.Channel == channel);
+        return lifecycle is null ? new(SupportState.Unknown, null, null) : Evaluate(lifecycle, today);
+    }
+
+    public static SupportStatus Evaluate(ChannelLifecycle lifecycle, DateOnly today)
+    {
+        var daysLeft = lifecycle.EndOfSupport is { } end ? end.DayNumber - today.DayNumber : (int?)null;
+        var state = lifecycle.SupportPhase switch
+        {
+            "EOL" => SupportState.EndOfLife,
+            _ when daysLeft < 0 => SupportState.EndOfLife,
+            "PREVIEW" or "GO-LIVE" => SupportState.Preview,
+            _ when daysLeft <= EndingSoonDays => SupportState.EndingSoon,
+            _ => SupportState.Supported
+        };
+        return new(state, lifecycle, daysLeft);
+    }
+
+    /// <summary>"9.0.320" and "9.0.0-rc.1.2" both belong to the "9.0" channel.</summary>
+    public static string ChannelVersion(string version)
+    {
+        var parts = version.Split('-', 2)[0].Split('.');
+        return parts.Length >= 2 ? $"{parts[0]}.{parts[1]}" : version;
+    }
+
+    public static DateOnly? ParseDate(string? value) =>
+        DateOnly.TryParse(value, CultureInfo.InvariantCulture, DateTimeStyles.None, out var date) ? date : null;
+
+    public static string FormatDate(DateOnly date) => date.ToString("MMM d, yyyy", CultureInfo.InvariantCulture);
+
+    public static string RelativeDays(int days) => days switch
+    {
+        <= 0 => "today",
+        1 => "tomorrow",
+        _ => $"in {days} days"
+    };
+}
diff --git a/src/DotnetCockpit/SdkDownloadsSection.cs b/src/DotnetCockpit/SdkDownloadsSection.cs
index fba3eaf..264c202 100644
--- a/src/DotnetCockpit/SdkDownloadsSection.cs
+++ b/src/DotnetCockpit/SdkDownloadsSection.cs
@@ -1,205 +1,8 @@
-using DotnetCockpit.SdkDownloads;
-using DotnetCockpit.Installation;
-using static DotnetCockpit.PageLayout;
-
 namespace DotnetCockpit;
 
-internal sealed record SdkDownloadsViewOptions(string Query = "", string Product = "sdk", bool IncludePreview = false, bool IncludeRc = false, bool SupportedOnly = false, bool LatestThree = false, bool IncludeLts = true, bool IncludeSts = true)
-{
-    public static SdkDownloadsViewOptions From(SetupViewOptions options) => new(options.Query, options.Product, options.IncludePreview, options.IncludeRc, options.SupportedOnly, options.LatestThree, options.IncludeLts, options.IncludeSts);
-}
-
 internal static class SdkDownloadsSection
 {
-    public static string Render(SdkDownloadSnapshot snapshot, InstallationSnapshot installation, SdkDownloadsViewOptions options)
-    {
-        if (snapshot.Status == "error")
-            return $"<section class=\"inventory empty-state error-state\" role=\"alert\"><h2>SDK downloads are unavailable</h2><p>{Encode(snapshot.Error ?? "The official release information could not be loaded.")}</p><a class=\"button\" href=\"/setup\">Try again</a></section>";
-
-        return RenderCatalog(snapshot.Downloads, installation, options);
-    }
-
-    private static string RenderCatalog(SdkDownload[] downloads, InstallationSnapshot installation, SdkDownloadsViewOptions options)
-    {
-        var selectedProduct = options.Product == "runtime" ? ".NET Runtime" : "SDK";
-        var productDownloads = downloads.Where(download => download.Product == selectedProduct).ToArray();
-        var latest = productDownloads
-            .Where(download => !IsPreview(download.Version) && !IsRc(download.Version) && MatchesLifecycle(download, options) && (!options.SupportedOnly || IsSupported(download)))
-            .OrderByDescending(download => download.Version, SdkVersionComparer.Instance)
-            .FirstOrDefault();
-        var visibleCount = GetVisibleDownloads(productDownloads, options).Length;
-        var groups = productDownloads
-            .GroupBy(download => MajorVersion(download.Version))
-            .OrderByDescending(group => group.Key)
-            .ToArray();
-        var groupContent = string.Concat(groups.Select(group => RenderMajorGroup(group.Key,
-            group.OrderByDescending(download => download.Version, SdkVersionComparer.Instance).ToArray(), options)));
-
-        return $$"""
-            <section class="inventory" aria-labelledby="sdk-downloads-title">
-              <div class="inventory-heading"><div><h2 id="sdk-downloads-title">Install .NET SDKs and runtimes</h2><p class="muted">Official macOS .pkg packages for this host's architecture. Stable releases are shown by default.</p></div><fluent-badge appearance="outline" color="brand" class="inventory-count"><span data-sdk-results>{{visibleCount}}</span> shown</fluent-badge></div>
-              <div class="tool-tabs" role="tablist" aria-label="Package type">{{RenderTab("sdk", "SDK", CountPackages(downloads, "SDK", options), options)}}{{RenderTab("runtime", ".NET Runtime", CountPackages(downloads, ".NET Runtime", options), options)}}</div>
-              <div class="inventory-toolbar">
-                <form method="get" action="/setup" class="filter-form" data-sdk-filter>
-                  <label class="filter-input">{{Icon("search")}}<input id="sdk-version-filter" type="search" name="q" value="{{Encode(options.Query)}}" placeholder="Filter by version or channel" aria-label="Filter versions"></label>
-                  <input type="hidden" name="product" value="{{options.Product}}">
-                  <input type="hidden" name="lifecycle-filter" value="true">
-                  <fieldset class="sdk-version-filters"><legend>Versions</legend><label><input id="sdk-preview-filter" type="checkbox" name="preview" value="true"{{(options.IncludePreview ? " checked" : "")}}><span>Preview</span></label><label><input id="sdk-rc-filter" type="checkbox" name="rc" value="true"{{(options.IncludeRc ? " checked" : "")}}><span>RC</span></label><label><input id="sdk-supported-filter" type="checkbox" name="supported" value="true"{{(options.SupportedOnly ? " checked" : "")}}><span>Supported</span></label><label><input id="sdk-latest-three-filter" type="checkbox" name="latest3" value="true"{{(options.LatestThree ? " checked" : "")}}><span>Latest 3 per channel</span></label></fieldset>
-                  <fieldset class="sdk-lifecycle-filter"><legend>Release type</legend><label><input type="checkbox" name="lifecycle" value="LTS"{{(options.IncludeLts ? " checked" : "")}}><span>LTS</span></label><label><input type="checkbox" name="lifecycle" value="STS"{{(options.IncludeSts ? " checked" : "")}}><span>STS</span></label></fieldset>
-                  <noscript><button class="button" type="submit">Apply filters</button></noscript>
-                </form>
-              </div>
-              {{(latest is null ? "" : RenderLatestPackage(latest, installation, options.Product))}}
-              <div id="{{options.Product}}-packages" class="sdk-major-groups" role="tabpanel">{{groupContent}}<div class="empty-state" data-sdk-empty{{(visibleCount == 0 ? "" : " hidden")}}><h3>No packages found</h3><p class="muted">Try another version filter.</p></div></div>
-            </section>
-            <p class="scope-note muted">SDK installers include the listed .NET Runtime version and the matching ASP.NET Core Runtime. Download links point directly to Microsoft-hosted .pkg files; SHA-512 values are available for integrity checks.</p>
-            """;
-    }
-
-    private static string RenderTab(string product, string label, int count, SdkDownloadsViewOptions options)
-    {
-        var selected = options.Product == product;
-        var query = options.Query.Length == 0 ? "" : $"&q={Uri.EscapeDataString(options.Query)}";
-        var preview = options.IncludePreview ? "&preview=true" : "";
-        var rc = options.IncludeRc ? "&rc=true" : "";
-        var supported = options.SupportedOnly ? "&supported=true" : "";
-        var latestThree = options.LatestThree ? "&latest3=true" : "";
-        var lts = options.IncludeLts ? "&lifecycle=LTS" : "";
-        var sts = options.IncludeSts ? "&lifecycle=STS" : "";
-        return $"<a class=\"tool-tab\" href=\"/setup?product={product}{query}{preview}{rc}{supported}{latestThree}&lifecycle-filter=true{lts}{sts}\" role=\"tab\" aria-selected=\"{selected.ToString().ToLowerInvariant()}\" aria-controls=\"{product}-packages\">{Encode(label)}<span class=\"tool-tab-count\">{count}</span></a>";
-    }
-
-    private static int CountPackages(SdkDownload[] downloads, string product, SdkDownloadsViewOptions options) =>
-        GetVisibleDownloads(downloads.Where(download => download.Product == product), options).Length;
-
-    private static SdkDownload[] GetVisibleDownloads(IEnumerable<SdkDownload> downloads, SdkDownloadsViewOptions options)
-    {
-        var matchingDownloads = downloads.Where(download => MatchesFilters(download, options));
-        return options.LatestThree
-            ? matchingDownloads.GroupBy(download => download.Channel)
-                .SelectMany(channel => channel.OrderByDescending(download => download.Version, SdkVersionComparer.Instance).Take(3))
-                .ToArray()
-            : matchingDownloads.ToArray();
-    }
-
-    private static bool MatchesFilters(SdkDownload download, SdkDownloadsViewOptions options) =>
-        (options.IncludePreview || !IsPreview(download.Version)) &&
-        (options.IncludeRc || !IsRc(download.Version)) &&
-        (!options.SupportedOnly || IsSupported(download)) &&
-        MatchesLifecycle(download, options) &&
-        (options.Query.Length == 0 || download.Version.Contains(options.Query, StringComparison.OrdinalIgnoreCase) || download.Channel.Contains(options.Query, StringComparison.OrdinalIgnoreCase));
-
-    private static bool IsSupported(SdkDownload download) => download.SupportPhase is "ACTIVE" or "MAINTENANCE";
-
-    private static bool MatchesLifecycle(SdkDownload download, SdkDownloadsViewOptions options) =>
-        download.ReleaseType == "LTS" ? options.IncludeLts : download.ReleaseType == "STS" && options.IncludeSts;
-
-    private static bool IsPreview(string version)
-    {
-        var versionWithoutMetadata = version.Split('+', 2)[0];
-        return versionWithoutMetadata.Contains("-preview", StringComparison.OrdinalIgnoreCase);
-    }
-
-    private static bool IsRc(string version) => version.Split('+', 2)[0].Contains("-rc", StringComparison.OrdinalIgnoreCase);
-
-    private static int MajorVersion(string version)
-    {
-        var core = version.Split(['-', '+'], 2)[0];
-        return int.TryParse(core.Split('.')[0], out var major) ? major : 0;
-    }
-
-    private static string RenderLatestPackage(SdkDownload latest, InstallationSnapshot installation, string product)
-    {
-        var installed = installation.Status == "ready" && (product == "sdk"
-            ? installation.Sdks.Any(sdk => string.Equals(sdk.Version, latest.InstallationVersion, StringComparison.OrdinalIgnoreCase))
-            : installation.Runtimes.Any(runtime => string.Equals(runtime.Version, latest.InstallationVersion, StringComparison.OrdinalIgnoreCase)));
-        var status = installed
-            ? "<fluent-badge appearance=\"tint\" color=\"success\">Installed</fluent-badge>"
-            : $"<a class=\"button primary\" href=\"{Encode(latest.Url)}\" download>Download latest .pkg</a>";
-        var label = product == "runtime" ? ".NET Runtime" : ".NET SDK";
-        var includedRuntime = product == "sdk" && latest.IncludedRuntimeVersion is not null
-            ? $"<p class=\"muted\">Includes .NET Runtime <code>{Encode(latest.IncludedRuntimeVersion)}</code> and the matching ASP.NET Core Runtime.</p>"
-            : "";
-        var cves = RenderCves(latest.Cves);
-        return $$"""
-            <section class="sdk-latest-card" aria-label="Latest {{label}}">
-              <div><span class="sdk-latest-kicker">Latest {{label}}</span><strong>{{Encode(latest.Version)}}</strong>{{includedRuntime}}{{cves}}</div>
-              {{status}}
-            </section>
-            """;
-    }
-
-    private static string RenderCves(SdkCve[] cves)
-    {
-        if (cves.Length == 0) return "";
-
-        var label = cves.Length == 1 ? "1 CVE" : $"{cves.Length} CVEs";
-        var links = string.Concat(cves.Select(cve =>
-        {
-            var id = Encode(cve.Id);
-            return Uri.TryCreate(cve.Url, UriKind.Absolute, out var uri) && uri.Scheme == Uri.UriSchemeHttps
-                ? $"<a href=\"{Encode(uri.AbsoluteUri)}\" target=\"_blank\" rel=\"noopener noreferrer\">{id}</a>"
-                : $"<span>{id}</span>";
-        }));
-
-        return $$"""
-            <details class="sdk-cves">
-              <summary>{{label}}</summary>
-              <div class="sdk-cve-links">{{links}}</div>
-            </details>
-            """;
-    }
-
-    private static string RenderMajorGroup(int major, SdkDownload[] downloads, SdkDownloadsViewOptions options)
-    {
-        var visibleDownloads = GetVisibleDownloads(downloads, options).ToHashSet();
-        var visibleCount = visibleDownloads.Count;
-        var releaseType = downloads.Select(download => download.ReleaseType).FirstOrDefault(type => type is "LTS" or "STS");
-        var lifecycleTag = releaseType is null
-            ? ""
-            : $"<fluent-badge appearance=\"outline\" color=\"neutral\" class=\"lifecycle-badge\">{Encode(releaseType)}</fluent-badge>";
-        var endOfLifeTag = downloads.Any(download => string.Equals(download.SupportPhase, "EOL", StringComparison.OrdinalIgnoreCase))
-            ? "<span class=\"lifecycle-badge eol-badge\" title=\"End of support\">EOL</span>"
-            : "";
-        var endOfSupportDate = downloads.Select(download => download.EndOfSupportDate).FirstOrDefault(date => !string.IsNullOrWhiteSpace(date));
-        var supportMessage = endOfSupportDate is null
-            ? ""
-            : $"<span class=\"sdk-support-date muted\">Support {(endOfLifeTag.Length == 0 ? "ends" : "ended")} {Encode(endOfSupportDate)}</span>";
-        var entries = string.Concat(downloads.Select(download =>
-        {
-            var hidden = visibleDownloads.Contains(download) ? "" : " hidden";
-            var preview = IsPreview(download.Version).ToString().ToLowerInvariant();
-            var rc = IsRc(download.Version).ToString().ToLowerInvariant();
-            var supported = IsSupported(download).ToString().ToLowerInvariant();
-            var runtimeCell = options.Product == "sdk"
-                ? $"<td><code>{Encode(download.IncludedRuntimeVersion ?? "Unknown")}</code></td>"
-                : "";
-            return $$"""
-            <tr data-sdk-row data-search="{{Encode($"{download.Version} {download.Channel}")}}" data-channel="{{Encode(download.Channel)}}" data-preview="{{preview}}" data-rc="{{rc}}" data-supported="{{supported}}" data-lifecycle="{{Encode(download.ReleaseType)}}"{{hidden}}>
-              <td><fluent-badge appearance="tint" color="brand" class="version-badge">{{Encode(download.Version)}}</fluent-badge>{{RenderCves(download.Cves)}}</td>
-              {{runtimeCell}}
-              <td>{{Encode(download.Channel)}}</td>
-              <td>{{Encode(download.ReleaseDate)}}</td>
-              <td><a class="button" href="{{Encode(download.Url)}}" download>Download .pkg</a>{{(download.Sha512.Length == 0 ? "" : $"<details class=\"sdk-checksum\"><summary>SHA-512</summary><code>{Encode(download.Sha512)}</code></details>")}}</td>
-            </tr>
-            """;
-        }));
-        var hiddenAttribute = visibleCount == 0 ? " hidden" : "";
-        var label = options.Product == "runtime" ? ".NET Runtime" : ".NET SDK";
-        return $$"""
-            <details class="sdk-major-group" data-sdk-group{{hiddenAttribute}}>
-              <summary><strong>{{label}} {{major}}</strong>{{lifecycleTag}}{{endOfLifeTag}}{{supportMessage}}<span class="muted"><span data-sdk-group-count>{{visibleCount}}</span> versions</span></summary>
-              <div class="table-scroll" role="region" aria-label="{{label}} major version {{major}}" tabindex="0">
-                <table class="tools-table" aria-label="{{label}} major version {{major}} packages">
-                  <thead><tr><th scope="col">Version</th>{{(options.Product == "sdk" ? "<th scope=\"col\">Included .NET Runtime</th>" : "")}}<th scope="col">Channel</th><th scope="col">Release date</th><th scope="col">Installer</th></tr></thead>
-                  <tbody>{{entries}}</tbody>
-                </table>
-              </div>
-            </details>
-            """;
-    }
-
-    private sealed class SdkVersionComparer : IComparer<string>
+    internal sealed class SdkVersionComparer : IComparer<string>
     {
         public static SdkVersionComparer Instance { get; } = new();
 
diff --git a/src/DotnetCockpit/Settings.cs b/src/DotnetCockpit/Settings.cs
new file mode 100644
index 0000000..0057e4e
--- /dev/null
+++ b/src/DotnetCockpit/Settings.cs
@@ -0,0 +1,74 @@
+using System.Text.Json;
+
+namespace DotnetCockpit;
+
+internal sealed record AppSettings(string Theme = "auto", bool PreflightOnLaunch = false, bool FirstLaunchCompleted = false, string Palette = "cockpit");
+
+/// <summary>
+/// Stores preferences in the user profile. The browser's storage cannot hold them because Cockpit
+/// chooses a free port on every start, which gives each launch a different origin.
+/// </summary>
+internal sealed class SettingsStore
+{
+    private readonly string path;
+    private readonly Lock gate = new();
+    private AppSettings current;
+
+    public SettingsStore() : this(DefaultDirectory()) { }
+
+    public SettingsStore(string directory)
+    {
+        path = Path.Combine(directory, "settings.json");
+        current = Load(path);
+    }
+
+    public AppSettings Current { get { lock (gate) return current; } }
+
+    public void Update(Func<AppSettings, AppSettings> change)
+    {
+        lock (gate)
+        {
+            current = change(current);
+            try
+            {
+                Directory.CreateDirectory(Path.GetDirectoryName(path)!);
+                File.WriteAllText(path, JsonSerializer.Serialize(current, AppJsonContext.Default.AppSettings));
+            }
+            catch (Exception exception) when (exception is IOException or UnauthorizedAccessException)
+            {
+                // A read-only profile must not stop Cockpit; the choice still applies until it exits.
+            }
+        }
+    }
+
+    public static string NormalizeTheme(string? theme) => theme is "light" or "dark" ? theme : "auto";
+
+    /// <summary>The color palettes, each defined for light and dark in ui/src/styles/palettes.css.</summary>
+    public static readonly (string Id, string Label)[] Palettes =
+        [("cockpit", "Cockpit"), ("macos", "macOS style"), ("github", "GitHub style"), ("codex", "Codex style")];
+
+    public static string NormalizePalette(string? palette) =>
+        Palettes.Any(entry => entry.Id == palette) ? palette! : "cockpit";
+
+    private static string DefaultDirectory()
+    {
+        var configured = Environment.GetEnvironmentVariable("DOTNET_COCKPIT_CONFIG_DIR");
+        return string.IsNullOrWhiteSpace(configured)
+            ? Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData, Environment.SpecialFolderOption.DoNotVerify), "dotnet-cockpit")
+            : configured;
+    }
+
+    private static AppSettings Load(string file)
+    {
+        try
+        {
+            if (!File.Exists(file)) return new();
+            var settings = JsonSerializer.Deserialize(File.ReadAllText(file), AppJsonContext.Default.AppSettings) ?? new();
+            return settings with { Theme = NormalizeTheme(settings.Theme), Palette = NormalizePalette(settings.Palette) };
+        }
+        catch (Exception exception) when (exception is IOException or UnauthorizedAccessException or JsonException)
+        {
+            return new();
+        }
+    }
+}
diff --git a/src/DotnetCockpit/Setup/DotnetUninstallToolService.cs b/src/DotnetCockpit/Setup/DotnetUninstallToolService.cs
index 86888bb..e966b7c 100644
--- a/src/DotnetCockpit/Setup/DotnetUninstallToolService.cs
+++ b/src/DotnetCockpit/Setup/DotnetUninstallToolService.cs
@@ -127,15 +127,14 @@ public async Task<SetupActionResult> InstallAsync(string? version, CancellationT
         }
     }
 
-    public async Task<SetupActionResult> RemoveInstallationAsync(string? version, string? kind, CancellationToken cancellationToken)
+    public Task<SetupActionResult> RemoveInstallationAsync(string? version, string? kind, CancellationToken cancellationToken) =>
+        RemoveInstallationsAsync([(version, kind)], cancellationToken);
+
+    /// <summary>Removes everything in one elevated run, so the person approves once however many items are selected.</summary>
+    public async Task<SetupActionResult> RemoveInstallationsAsync(IReadOnlyList<(string? Version, string? Kind)> items, CancellationToken cancellationToken)
     {
         if (!IsSupported()) return new(false, "The .NET Uninstall Tool supports Windows and macOS only.");
 
-        var targetVersion = version?.Trim();
-        var targetKind = kind?.Trim().ToLowerInvariant();
-        if (string.IsNullOrWhiteSpace(targetVersion) || targetKind is not ("sdk" or "runtime"))
-            return new(false, "The selected .NET installation is invalid.");
-
         var installation = Read().UninstallTool;
         if (!installation.Installed || installation.Path is null)
             return new(false, "The .NET Uninstall Tool is not installed.");
@@ -143,37 +142,42 @@ public async Task<SetupActionResult> RemoveInstallationAsync(string? version, st
         try
         {
             using var timeout = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
-            timeout.CancelAfter(TimeSpan.FromMinutes(5));
+            timeout.CancelAfter(TimeSpan.FromMinutes(10));
             var list = DotnetOutputParser.ParseUninstallList(await DotnetCommand.RunAsync(installation.Path, ["list"], timeout.Token));
-            if (targetKind == "sdk")
-            {
-                if (!list.SdkVersions.Contains(targetVersion, StringComparer.OrdinalIgnoreCase))
-                    return new(false, "The selected SDK is no longer available for removal.");
-                await RemoveWithElevationAsync(installation.Path, targetVersion, "--sdk", timeout.Token);
-            }
-            else
+
+            var removals = new List<(string Version, string Filter)>();
+            var allResolved = true;
+            foreach (var (version, kind) in items)
             {
-                var filters = list.Runtimes
-                    .Where(runtime => string.Equals(runtime.Version, targetVersion, StringComparison.OrdinalIgnoreCase))
-                    .Select(runtime => RuntimeFilter(runtime.Name))
-                    .Distinct(StringComparer.Ordinal)
-                    .ToArray();
-                if (filters.Length == 0)
-                    return new(false, "The selected runtime is no longer available for removal.");
-                foreach (var filter in filters)
-                    await RemoveWithElevationAsync(installation.Path, targetVersion, filter, timeout.Token);
+                var targetVersion = version?.Trim() ?? "";
+                var targetKind = kind?.Trim().ToLowerInvariant();
+                var filters = targetVersion.Length == 0
+                    ? []
+                    : targetKind == "sdk" && list.SdkVersions.Contains(targetVersion, StringComparer.OrdinalIgnoreCase)
+                        ? ["--sdk"]
+                        : targetKind == "runtime"
+                            ? list.Runtimes
+                                .Where(runtime => string.Equals(runtime.Version, targetVersion, StringComparison.OrdinalIgnoreCase))
+                                .Select(runtime => RuntimeFilter(runtime.Name))
+                                .Distinct(StringComparer.Ordinal)
+                                .ToArray()
+                            : Array.Empty<string>();
+                if (filters.Length == 0) allResolved = false;
+                removals.AddRange(filters.Select(filter => (targetVersion, filter)));
             }
 
-            return new(true);
+            if (removals.Count == 0) return new(false, "The selected .NET installation is no longer available for removal.");
+            await RemoveWithElevationAsync(installation.Path, removals, timeout.Token);
+            return allResolved ? new(true) : new(false, "Some selected .NET installations were no longer available for removal.");
         }
         catch (Exception exception) when (exception is HttpRequestException or IOException or UnauthorizedAccessException or InvalidOperationException or Win32Exception)
         {
-            logger.LogWarning(exception, "Could not remove .NET {Kind} {Version}.", targetKind, targetVersion);
+            logger.LogWarning(exception, "Could not remove {Count} .NET installations.", items.Count);
             return new(false, "The selected .NET installation could not be removed. Check the permissions and try again.");
         }
         catch (OperationCanceledException) when (!cancellationToken.IsCancellationRequested)
         {
-            logger.LogWarning("Timed out while removing .NET {Kind} {Version}.", targetKind, targetVersion);
+            logger.LogWarning("Timed out while removing {Count} .NET installations.", items.Count);
             return new(false, "The .NET installation removal timed out. Check the permissions and try again.");
         }
     }
@@ -246,21 +250,28 @@ private async Task RemoveGlobalInstallationAsync(string executablePath, Cancella
         await RunProcessAsync("cmd.exe", ["/d", "/c", windowsCommand], cancellationToken, useShellExecute: true, elevate: true);
     }
 
-    private async Task RemoveWithElevationAsync(string executablePath, string version, string filter, CancellationToken cancellationToken)
+    private async Task RemoveWithElevationAsync(string executablePath, IReadOnlyList<(string Version, string Filter)> removals, CancellationToken cancellationToken)
     {
-        var arguments = new[] { "remove", version, filter, "--yes" };
         if (OperatingSystem.IsMacOS())
         {
-            var command = $"cd / && {ShellQuote(executablePath)} {string.Join(' ', arguments.Select(ShellQuote))}";
-            var script = $"do shell script {AppleScriptLiteral(command)} with administrator privileges";
+            var script = $"do shell script {AppleScriptLiteral(BuildBatchRemovalCommand(executablePath, removals))} with administrator privileges";
             await RunProcessAsync("/usr/bin/osascript", ["-e", script], cancellationToken, useShellExecute: false);
             return;
         }
 
-        await RunProcessAsync(executablePath, arguments, cancellationToken, useShellExecute: true, elevate: true);
+        foreach (var (version, filter) in removals)
+            await RunProcessAsync(executablePath, ["remove", version, filter, "--yes"], cancellationToken, useShellExecute: true, elevate: true);
+    }
+
+    /// <summary>One shell line for all removals. Every item is attempted, and the exit code reports whether any failed.</summary>
+    internal static string BuildBatchRemovalCommand(string executablePath, IEnumerable<(string Version, string Filter)> removals)
+    {
+        var commands = removals.Select(removal =>
+            $"{ShellQuote(executablePath)} 'remove' {ShellQuote(removal.Version)} {ShellQuote(removal.Filter)} '--yes' || status=1");
+        return $"cd / ; status=0 ; {string.Join(" ; ", commands)} ; exit $status";
     }
 
-    private static string RuntimeFilter(string name) => name switch
+    internal static string RuntimeFilter(string name) => name switch
     {
         "Microsoft.AspNetCore.App" => "--aspnet-runtime",
         "Microsoft.WindowsDesktop.App" => "--windows-desktop-runtime",
diff --git a/src/DotnetCockpit/SetupPage.cs b/src/DotnetCockpit/SetupPage.cs
index c543357..90d8350 100644
--- a/src/DotnetCockpit/SetupPage.cs
+++ b/src/DotnetCockpit/SetupPage.cs
@@ -1,3 +1,4 @@
+using System.Globalization;
 using DotnetCockpit.Setup;
 using DotnetCockpit.SdkDownloads;
 using DotnetCockpit.Installation;
@@ -34,8 +35,9 @@ internal static class SetupPage
     public static string Render(SetupSnapshot snapshot, SetupViewOptions options)
         => Render(snapshot, new SdkDownloadSnapshot("ready", []), InstallationSnapshot.Create("notFound", null), options);
 
-    public static string Render(SetupSnapshot snapshot, SdkDownloadSnapshot sdkDownloads, InstallationSnapshot installation, SetupViewOptions options)
+    public static string Render(SetupSnapshot snapshot, SdkDownloadSnapshot sdkDownloads, InstallationSnapshot installation, SetupViewOptions options, int? toolsCount = null)
     {
+        var settings = PageLayout.CurrentSettings();
         var content = snapshot.Status switch
         {
             "unsupported" => """
@@ -46,26 +48,146 @@ public static string Render(SetupSnapshot snapshot, SdkDownloadSnapshot sdkDownl
                 """,
             "error" => $"""
                 <section class="setup-card empty-state error-state" role="alert">
-                  <h2>Setup information is unavailable</h2>
+                  <h2>Removal support information is unavailable</h2>
                   <p>{Encode(snapshot.Error ?? "The setup information could not be read.")}</p>
                   <a class="button" href="/setup">Try again</a>
                 </section>
                 """,
             _ => RenderToolCard(snapshot)
         };
-        var sdkSection = SdkDownloadsSection.Render(sdkDownloads, installation, SdkDownloadsViewOptions.From(options));
+        var issues = EnvironmentHealth.Evaluate(installation, sdkDownloads).Count;
 
         return PageLayout.Render($"""
-            <div class="breadcrumb">Environment <span>/</span> Setup</div>
             <div class="page-heading">
-              <div><h1>Setup</h1><p class="muted intro">Install .NET SDKs and runtimes or manage the global uninstall tool.</p></div>
-              <div class="inventory-heading-actions"><a class="button" href="/setup">Refresh</a><a class="button primary" href="#sdk-downloads-title">{Icon("download")} Install SDK or runtime</a></div>
+              <div>
+                <h1>Settings</h1>
+                <p class="muted intro">How Cockpit behaves on this machine.</p>
+              </div>
+              <div class="inventory-heading-actions">
+                <a class="button primary" href="/?install=1">{Icon("download", "xs")} Install .NET</a>
+              </div>
             </div>
             {RenderNotice(options.Notice)}
-            {content}
-            {sdkSection}
-            <p class="scope-note muted">Choose a package to download it, then open the .pkg file in macOS Installer to complete installation. The SDK also installs the ASP.NET Core Runtime; Microsoft provides the standalone .NET Runtime as a separate package. The .NET Uninstall Tool uses official dotnet/cli-lab release assets. Review the <a href="{DocumentationUrl}">Microsoft documentation</a> for the tool's limitations and commands.</p>
-            """, "/setup", "Setup | .NET Cockpit");
+            <div class="settings-layout">
+              <nav class="settings-rail" aria-label="Settings sections">
+                <a class="settings-nav-item active" href="#settings-general">General</a>
+                <a class="settings-nav-item" href="#uninstall-tool-title">Removal support</a>
+                <a class="settings-nav-item" href="#settings-environment">Environment</a>
+                <a class="settings-nav-item" href="#settings-privacy">Privacy &amp; network</a>
+                <a class="settings-nav-item" href="#settings-about">About</a>
+              </nav>
+
+              <div class="settings-main">
+                <section class="setup-card settings-card" id="settings-general" aria-labelledby="settings-general-title">
+                  <div class="settings-card-head">
+                    <h2 id="settings-general-title">General</h2>
+                  </div>
+                  <div class="settings-row">
+                    <div>
+                      <strong>Appearance</strong>
+                      <p class="muted">Follows your operating system by default.</p>
+                    </div>
+                    {PageLayout.ThemeSwitch(showLabels: true)}
+                  </div>
+                  <div class="settings-row">
+                    <div>
+                      <strong>Colors</strong>
+                      <p class="muted">Applies to light and dark. Status colors keep their meaning.{(OperatingSystem.IsMacOS() ? " macOS style follows your system accent color." : "")}</p>
+                    </div>
+                    {PageLayout.PaletteSwitch()}
+                  </div>
+                  <div class="settings-row">
+                    <div>
+                      <strong>Show pre-flight check on launch</strong>
+                      <p class="muted">A short health summary before the dashboard opens.</p>
+                    </div>
+                    <form method="post" action="/settings/preflight" class="settings-toggle-form" data-settings-toggle>
+                      <input type="hidden" name="return" value="settings">
+                      <label class="toggle-switch">
+                        <input type="checkbox" id="settings-preflight-toggle" name="show" value="true"{(settings.PreflightOnLaunch ? " checked" : "")} aria-label="Show pre-flight check on launch">
+                        <span class="toggle-slider"></span>
+                      </label>
+                      <noscript><button class="button sm" type="submit">Save</button></noscript>
+                    </form>
+                  </div>
+                </section>
+
+                {content}
+
+                <section class="setup-card settings-card" id="settings-environment" aria-labelledby="settings-env-title">
+                  <div class="settings-card-head">
+                    <h2 id="settings-env-title">Environment</h2>
+                  </div>
+                  <dl class="settings-dl">
+                    <dt>Active dotnet host</dt>
+                    <dd><code>{Encode(installation.ExecutablePath ?? "Not detected on PATH")}</code></dd>
+                    <dt>Platform</dt>
+                    <dd><strong>{Encode(snapshot.OperatingSystem)} · {Encode(snapshot.Architecture)}</strong></dd>
+                    <dt>Startup workspace</dt>
+                    <dd><code>{Encode(Environment.CurrentDirectory)}</code></dd>
+                    <dt>Official installers</dt>
+                    <dd><a href="/?install=1">Browse .NET SDK &amp; Runtime catalog →</a></dd>
+                  </dl>
+                </section>
+
+                <section class="setup-card settings-card" id="settings-privacy" aria-labelledby="settings-privacy-title">
+                  <div class="settings-card-head">
+                    <h2 id="settings-privacy-title">Privacy &amp; network</h2>
+                    <p class="muted">Cockpit listens on <code>127.0.0.1</code> only. These are the only outbound requests it ever makes:</p>
+                  </div>
+                  <div class="endpoint-list">
+                    <div class="endpoint-row">
+                      <div class="endpoint-left">
+                        <span class="endpoint-icon">{Icon("globe", "sm")}</span>
+                        <div>
+                          <strong>Microsoft release metadata</strong>
+                          <p class="muted text-xs">Official release index, lifecycle dates, CVEs, SHA-512 checksums, and .pkg installers.</p>
+                        </div>
+                      </div>
+                      <code class="muted">builds.dotnet.microsoft.com</code>
+                    </div>
+                    <div class="endpoint-row">
+                      <div class="endpoint-left">
+                        <span class="endpoint-icon">{Icon("search", "sm")}</span>
+                        <div>
+                          <strong>NuGet search</strong>
+                          <p class="muted text-xs">Queried only when you search in "Add tool".</p>
+                        </div>
+                      </div>
+                      <code class="muted">api.nuget.org</code>
+                    </div>
+                    <div class="endpoint-row">
+                      <div class="endpoint-left">
+                        <span class="endpoint-icon">{Icon("package", "sm")}</span>
+                        <div>
+                          <strong>GitHub Releases</strong>
+                          <p class="muted text-xs">Official <code>dotnet/cli-lab</code> releases for Microsoft's <code>dotnet-core-uninstall</code> tool.</p>
+                        </div>
+                      </div>
+                      <code class="muted">api.github.com</code>
+                    </div>
+                    <div class="endpoint-row">
+                      <div class="endpoint-left">
+                        <span class="endpoint-icon ok">{Icon("shieldok", "sm")}</span>
+                        <div>
+                          <strong>No telemetry, no CDN, no accounts</strong>
+                          <p class="muted text-xs">All fonts, icons and scripts are bundled into the binary.</p>
+                        </div>
+                      </div>
+                      <span class="badge ok sm">Enforced</span>
+                    </div>
+                  </div>
+                </section>
+
+                <section class="setup-card settings-card" id="settings-about" aria-labelledby="settings-about-title">
+                  <div class="settings-card-head">
+                    <h2 id="settings-about-title">About .NET Cockpit</h2>
+                  </div>
+                  <p class="scope-note muted">Choose a package in Versions → Install .NET to download it, then open the .pkg file in macOS Installer to complete installation. The SDK also installs the ASP.NET Core Runtime; Microsoft provides the standalone .NET Runtime as a separate package. The .NET Uninstall Tool uses official dotnet/cli-lab release assets. Review the <a href="{DocumentationUrl}">Microsoft documentation</a> for the tool's limitations and commands.</p>
+                </section>
+              </div>
+            </div>
+            """, "/setup", "Settings | .NET Cockpit", issues, installation.InstallationCount, toolsCount, inventorySignature: installation.Signature);
     }
 
     private static string RenderToolCard(SetupSnapshot snapshot)
@@ -77,12 +199,28 @@ private static string RenderToolCard(SetupSnapshot snapshot)
             : RenderInstallDetails(snapshot);
 
         return $"""
-            <section class="setup-card" aria-labelledby="uninstall-tool-title">
+            <section class="setup-card settings-card" aria-labelledby="uninstall-tool-title">
               <div class="setup-card-heading">
-                <div class="setup-title"><span class="setup-icon">{Icon("settings")}</span><div><h2 id="uninstall-tool-title">.NET Uninstall Tool</h2><p class="muted">Remove SDKs and runtimes that were installed by supported installers.</p></div></div>
+                <div class="setup-title">
+                  <span class="setup-icon">{Icon("trash")}</span>
+                  <div>
+                    <div class="removal-support-title-row">
+                      <h2 id="uninstall-tool-title">Removal support · .NET Uninstall Tool</h2>
+                      {(installed ? $"<span class=\"badge ok sm\">{(snapshot.LatestVersion is null || IsUpdateAvailable(snapshot.UninstallTool.Version, snapshot.LatestVersion) ? "Installed" : "Up to date")}</span>" : "")}
+                    </div>
+                    <p class="muted">Microsoft's <code>dotnet-core-uninstall</code> lets Cockpit remove SDKs and runtimes that were installed by supported installers.</p>
+                  </div>
+                </div>
                 {headerActions}
               </div>
               {details}
+              <div class="remove-modal-notice setup-admin-box">
+                <span class="notice-lock">{Icon("lock", "sm")}</span>
+                <div>
+                  <strong>Administrator approval</strong>
+                  <p class="muted">Installing, updating and removing this tool — and removing .NET versions with it — asks for your {Encode(snapshot.OperatingSystem)} administrator password.</p>
+                </div>
+              </div>
               {RenderReleaseList(snapshot)}
               <div class="setup-note"><strong>{Encode(snapshot.OperatingSystem)} · {Encode(snapshot.Architecture)}</strong><span class="muted">The tool requires administrator privileges when it removes .NET installations.</span></div>
             </section>
@@ -95,12 +233,12 @@ private static string RenderHeaderActions(SetupSnapshot snapshot)
         {
             if (snapshot.UninstallTool.Scope != "global") return "";
             var update = IsUpdateAvailable(snapshot.UninstallTool.Version, snapshot.LatestVersion)
-                ? $"<form method=\"post\" action=\"/setup/update\"><button class=\"button primary\" type=\"submit\">Update to {Encode(snapshot.LatestVersion!)}</button></form>"
+                ? ConfirmActions.Trigger(ConfirmActions.SetupUpdate(snapshot.LatestVersion), $"<button class=\"button primary\" type=\"submit\">Update to {Encode(snapshot.LatestVersion!)}</button>")
                 : "";
-            return $"<div class=\"setup-card-actions\">{update}<form method=\"post\" action=\"/setup/uninstall\"><button class=\"button danger\" type=\"submit\" aria-label=\"Remove .NET Uninstall Tool\" title=\"Remove .NET Uninstall Tool\">Remove</button></form></div>";
+            return $"<div class=\"setup-card-actions\">{update}{ConfirmActions.Trigger(ConfirmActions.SetupUninstall(), "<button class=\"button remove\" type=\"submit\" aria-label=\"Remove .NET Uninstall Tool\" title=\"Remove .NET Uninstall Tool\">Remove</button>")}</div>";
         }
 
-        return $"<div class=\"setup-card-actions\"><fluent-badge appearance=\"outline\" color=\"neutral\">Not installed</fluent-badge>{RenderInstallControl(snapshot)}</div>";
+        return $"<div class=\"setup-card-actions\"><span class=\"badge sm\">Not installed</span>{RenderInstallControl(snapshot)}</div>";
     }
 
     private static string RenderInstallControl(SetupSnapshot snapshot)
@@ -110,7 +248,7 @@ private static string RenderInstallControl(SetupSnapshot snapshot)
         var options = $"<option value=\"latest\">{latestLabel}</option>" + string.Join("", snapshot.AvailableReleases
             .Where(release => !string.Equals(release.Version, snapshot.LatestVersion, StringComparison.OrdinalIgnoreCase))
             .Select(release => $"<option value=\"{Encode(release.Version)}\">{Encode(release.Version)}</option>"));
-        return $"<form class=\"setup-version-form\" method=\"post\" action=\"/setup/install\"><label class=\"setup-version-picker\" for=\"setup-version\"><span class=\"visually-hidden\">Version</span><select id=\"setup-version\" name=\"version\">{options}</select></label><button class=\"button primary setup-install-button\" type=\"submit\" aria-label=\"Install selected version\" title=\"Install selected version\">{Icon("download")}</button></form>";
+        return ConfirmActions.Trigger(ConfirmActions.SetupInstall(null, snapshot.GlobalInstallPath), $"<label class=\"setup-version-picker\" for=\"setup-version\"><span class=\"visually-hidden\">Version</span><select id=\"setup-version\" name=\"version\">{options}</select></label><button class=\"button primary setup-install-button\" type=\"submit\">{Icon("download", "xs")} Install</button>", "setup-version-form");
     }
 
     private static string RenderInstallDetails(SetupSnapshot snapshot)
@@ -138,9 +276,16 @@ private static string RenderInstalledDetails(SetupSnapshot snapshot)
 
         return $"""
                 <div class="setup-installed" role="status">
-                  <label class="setup-ready"><input type="checkbox" checked disabled><span>Ready to list and remove .NET Installations</span></label>
-                  <span class="muted">Detected at <code>{Encode(installation.Path ?? "")}</code> ({Encode(installation.Scope ?? "path")} installation).</span>
-                  <span class="muted">{version} {latest}</span>
+                  <dl class="settings-dl">
+                    <dt>Installed version</dt>
+                    <dd><span class="sr-only">{version}</span><strong><code>{Encode(installation.Version ?? "Unknown")}</code></strong> <span class="muted">· {latest}</span></dd>
+                    <dt>Location</dt>
+                    <dd><code>{Encode(installation.Path ?? "")}</code> <span class="badge sm">{Encode(installation.Scope ?? "path")}</span> <span class="sr-only">Detected at <code>{Encode(installation.Path ?? "")}</code> ({Encode(installation.Scope ?? "path")} installation).</span></dd>
+                    <dt>Source</dt>
+                    <dd><a href="https://github.com/dotnet/cli-lab/releases" target="_blank" rel="noopener">github.com/dotnet/cli-lab/releases ↗</a></dd>
+                    <dt>Status</dt>
+                    <dd><span class="setup-ready">{Icon("check", "xs")} Ready to list and remove .NET Installations</span></dd>
+                  </dl>
                   {actions}
                 </div>
                 """;
@@ -152,20 +297,25 @@ private static string RenderReleaseList(SetupSnapshot snapshot)
             return "<div class=\"setup-release-list\"><p class=\"muted\" role=\"alert\">Available releases are currently unavailable.</p></div>";
 
         var releases = string.Join("", snapshot.AvailableReleases.Select(release =>
-            $"<li><a href=\"{Encode(release.Url)}\">{Encode(release.Version)}</a>{(string.IsNullOrWhiteSpace(release.PublishedAt) ? "" : $"<span class=\"muted\">{Encode(release.PublishedAt!)}</span>")}</li>"));
+            $"<li><a href=\"{Encode(release.Url)}\">{Encode(release.Version)}</a>{(string.IsNullOrWhiteSpace(release.PublishedAt) ? "" : $"<span class=\"muted\">{Encode(FormatReleaseDate(release.PublishedAt!))}</span>")}</li>"));
         return $"<div class=\"setup-release-list\"><strong>Available releases</strong><ul>{releases}</ul></div>";
     }
 
+    private static string FormatReleaseDate(string raw) =>
+        DateTimeOffset.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var dto)
+            ? dto.ToString("MMM d, yyyy", CultureInfo.InvariantCulture)
+            : raw;
+
     private static bool IsUpdateAvailable(string? installedVersion, string? latestVersion) =>
         Version.TryParse(installedVersion, out var installed) && Version.TryParse(latestVersion, out var latest) && latest > installed;
 
     private static string RenderNotice(string notice) => notice switch
     {
-        "installed" => "<div class=\"action-notice\" role=\"status\">The .NET Uninstall Tool was installed successfully.</div>",
+        "installed" => SuccessToast("The .NET Uninstall Tool was installed."),
         "failed" => "<div class=\"action-notice error-state\" role=\"alert\">The .NET Uninstall Tool could not be installed. Check the network connection and permissions, then try again.</div>",
-        "updated" => "<div class=\"action-notice\" role=\"status\">The .NET Uninstall Tool was updated successfully.</div>",
+        "updated" => SuccessToast("The .NET Uninstall Tool was updated."),
         "update-failed" => "<div class=\"action-notice error-state\" role=\"alert\">The .NET Uninstall Tool could not be updated. Check the network connection and permissions, then try again.</div>",
-        "uninstalled" => "<div class=\"action-notice\" role=\"status\">The .NET Uninstall Tool was uninstalled successfully.</div>",
+        "uninstalled" => SuccessToast("The .NET Uninstall Tool was removed."),
         "uninstall-failed" => "<div class=\"action-notice error-state\" role=\"alert\">The .NET Uninstall Tool could not be uninstalled. Check the permissions and try again.</div>",
         _ => ""
     };
diff --git a/src/DotnetCockpit/SystemAccent.cs b/src/DotnetCockpit/SystemAccent.cs
new file mode 100644
index 0000000..524e2dc
--- /dev/null
+++ b/src/DotnetCockpit/SystemAccent.cs
@@ -0,0 +1,73 @@
+using System.ComponentModel;
+using System.Diagnostics;
+
+namespace DotnetCockpit;
+
+/// <summary>
+/// Reads the accent color from the macOS settings. The CSS system color AccentColor depends on the browser,
+/// while Cockpit runs on the same machine and can simply ask the system.
+/// </summary>
+internal static class SystemAccent
+{
+    private static readonly TimeSpan CacheDuration = TimeSpan.FromSeconds(1);
+    private static readonly Lock Gate = new();
+    private static string? cached;
+    private static DateTimeOffset cachedAt = DateTimeOffset.MinValue;
+
+    public static string? Current
+    {
+        get
+        {
+            if (!OperatingSystem.IsMacOS()) return null;
+            lock (Gate)
+            {
+                if (DateTimeOffset.UtcNow - cachedAt < CacheDuration) return cached;
+                cached = Parse(ReadSetting());
+                cachedAt = DateTimeOffset.UtcNow;
+                return cached;
+            }
+        }
+    }
+
+    /// <summary>macOS stores a number. The key is missing for the multicolor choice, which appears blue.</summary>
+    public static string Parse(string? value) => value?.Trim() switch
+    {
+        "-1" => "graphite",
+        "0" => "red",
+        "1" => "orange",
+        "2" => "yellow",
+        "3" => "green",
+        "5" => "purple",
+        "6" => "pink",
+        _ => "blue"
+    };
+
+    private static string? ReadSetting()
+    {
+        try
+        {
+            var startInfo = new ProcessStartInfo("/usr/bin/defaults")
+            {
+                UseShellExecute = false,
+                CreateNoWindow = true,
+                RedirectStandardOutput = true,
+                RedirectStandardError = true,
+            };
+            foreach (var argument in new[] { "read", "-g", "AppleAccentColor" }) startInfo.ArgumentList.Add(argument);
+            using var process = Process.Start(startInfo);
+            if (process is null) return null;
+            var output = process.StandardOutput.ReadToEndAsync();
+            _ = process.StandardError.ReadToEndAsync();
+            if (!process.WaitForExit(1000))
+            {
+                process.Kill();
+                return null;
+            }
+            return process.ExitCode == 0 ? output.GetAwaiter().GetResult() : null;
+        }
+        catch (Exception exception) when (exception is Win32Exception or InvalidOperationException or IOException)
+        {
+            return null;
+        }
+    }
+}
diff --git a/src/DotnetCockpit/Tools/DotnetToolsService.cs b/src/DotnetCockpit/Tools/DotnetToolsService.cs
index 1925f09..66c9f87 100644
--- a/src/DotnetCockpit/Tools/DotnetToolsService.cs
+++ b/src/DotnetCockpit/Tools/DotnetToolsService.cs
@@ -48,6 +48,9 @@ public async Task<ToolSearch> SearchAsync(string query, CancellationToken cancel
     public Task<ToolActionResult> InstallAsync(string packageId, string version, string scope, CancellationToken cancellationToken) =>
         RunToolActionAsync(packageId, version, scope, "install", cancellationToken);
 
+    public Task<ToolActionResult> UpdateAsync(string packageId, string scope, CancellationToken cancellationToken) =>
+        RunToolActionAsync(packageId, "", scope, "update", cancellationToken);
+
     public Task<ToolActionResult> UninstallAsync(string packageId, string scope, CancellationToken cancellationToken) =>
         RunToolActionAsync(packageId, "", scope, "uninstall", cancellationToken);
 
diff --git a/src/DotnetCockpit/Tools/ToolMetadataCatalog.cs b/src/DotnetCockpit/Tools/ToolMetadataCatalog.cs
new file mode 100644
index 0000000..dbdc640
--- /dev/null
+++ b/src/DotnetCockpit/Tools/ToolMetadataCatalog.cs
@@ -0,0 +1,777 @@
+using System.Collections.Concurrent;
+using System.Globalization;
+using System.Net;
+using System.Text.Json;
+using System.Xml.Linq;
+using DotnetCockpit.SdkDownloads;
+
+namespace DotnetCockpit.Tools;
+
+internal sealed record ToolMetadata(
+    string PackageId,
+    string Summary,
+    string FullDescription,
+    string Authors,
+    string License,
+    string ProjectUrl,
+    string RepositoryUrl,
+    string[] Tags,
+    string? IconDataUri,
+    string IconKind,
+    string StorePath,
+    bool IsVerified,
+    string DownloadsDisplay,
+    string DownloadsFullDisplay,
+    string? LatestVersion,
+    bool HasUpdate);
+
+internal static class ToolMetadataCatalog
+{
+    private sealed record BuiltInEntry(
+        string Summary,
+        string FullDescription,
+        string Authors,
+        string License,
+        string ProjectUrl,
+        string[] Tags,
+        string IconKind,
+        bool IsVerified,
+        long? FallbackDownloads = null);
+
+    private sealed record CachedNuGetPackage(
+        string Id,
+        string LatestVersion,
+        string? LatestStableVersion,
+        string? Description,
+        string? ProjectUrl,
+        string? Authors,
+        string[] Tags,
+        long TotalDownloads,
+        bool Verified,
+        string? IconUrl,
+        DateTimeOffset FetchedAt);
+
+    private static readonly ConcurrentDictionary<string, CachedNuGetPackage> NuGetCache = new(StringComparer.OrdinalIgnoreCase);
+    private static readonly ConcurrentDictionary<string, string?> RemoteIconCache = new(StringComparer.OrdinalIgnoreCase);
+
+    private static readonly Dictionary<string, BuiltInEntry> KnownTools = new(StringComparer.OrdinalIgnoreCase)
+    {
+        ["dotnet-ef"] = new(
+            "Entity Framework Core CLI migrations, DbContext scaffolding, and database management tools.",
+            "Entity Framework Core Tools for the .NET Command-Line Interface.\nEnables migrations (dotnet ef migrations add/list/script), DbContext scaffolding (dotnet ef dbcontext info/scaffold), and database updates (dotnet ef database update/drop).",
+            "Microsoft",
+            "MIT",
+            "https://learn.microsoft.com/ef/core/cli/dotnet",
+            ["EntityFrameworkCore", "EFCore", "Database", "Migrations", "O/RM"],
+            "database",
+            true,
+            136_748_282),
+        ["jetbrains.dottrace.globaltools"] = new(
+            "JetBrains dotTrace command-line performance profiler for .NET applications.",
+            "The dotTrace console tool lets you start a profiling session and get performance snapshots from the command line for .NET, Mono, and Unity applications.",
+            "JetBrains",
+            "Bundled license",
+            "https://www.jetbrains.com/profiler/",
+            ["Profiling", "Performance", "JetBrains", "dotTrace"],
+            "activity",
+            true,
+            1_700_566),
+        ["dotnet-coverage"] = new(
+            "Cross-platform CLI tool to collect code coverage data and merge coverage reports.",
+            "Cross-platform .NET tool for collecting code coverage of any .NET process and merging multiple coverage snapshots (.coverage, Cobertura, XML).",
+            "Microsoft",
+            "MIT",
+            "https://learn.microsoft.com/dotnet/core/additional-tools/dotnet-coverage",
+            ["Coverage", "Testing", "Cobertura", "Diagnostics"],
+            "shield",
+            true,
+            18_240_000),
+        ["dotnet-reportgenerator-globaltool"] = new(
+            "Turns XML coverage reports (OpenCover, Cobertura, Coverlet) into readable HTML dashboards.",
+            "ReportGenerator converts coverage reports generated by coverlet, OpenCover, dotCover, Visual Studio, NCover, Cobertura, JaCoCo, Clover, gcov, or lcov into human-readable HTML, Markdown, and badge reports.",
+            "danielpalme",
+            "Apache-2.0",
+            "https://github.com/danielpalme/ReportGenerator",
+            ["Coverage", "Reporting", "HTML", "Cobertura"],
+            "chart",
+            true,
+            48_610_000),
+        ["coverlet.console"] = new(
+            "Cross-platform code coverage framework for .NET as a global or local CLI tool.",
+            "Coverlet is a cross-platform code coverage framework for .NET, with support for line, branch, and method coverage across Windows, macOS, and Linux.",
+            "tonerdo",
+            "MIT",
+            "https://github.com/coverlet-coverage/coverlet",
+            ["Coverage", "Testing", "xUnit", "MSTest"],
+            "shield",
+            false,
+            12_150_000),
+        ["corecli.ipinfo"] = new(
+            "Show public and local IPv4/IPv6 network addresses directly from the command line.",
+            "Show public and local IP addresses, network interfaces, and routing details from the command line.",
+            "Jan Ruhlaender",
+            "MIT",
+            "https://github.com/capjan/CoreCli",
+            ["ip", "network", "cli", "dotnet-tool"],
+            "globe",
+            false,
+            299),
+        ["mdu"] = new(
+            "Markdown Documentation Utility for linting and rendering Markdown documentation.",
+            "MDU (Markdown Documentation Utility) for linting, validating, and rendering Markdown documentation and static websites.",
+            "Jan Ruhlaender",
+            "MIT",
+            "https://github.com/capjan/mdu",
+            ["Markdown", "Documentation", "Static-Website-Generator"],
+            "markdown",
+            false,
+            1_479),
+        ["cap.regex"] = new(
+            "Fast regular expression testing, matching, and replacement utility for the command line.",
+            "Regex command for the command line — test patterns, inspect capture groups, and filter streams using .NET regular expressions.",
+            "Jan Ruhlaender",
+            "MIT",
+            "https://github.com/capjan/regex",
+            ["regex", "grep", "cli", "dotnet-tool"],
+            "regex",
+            false,
+            2_265),
+        ["capjan.wakelock.tool"] = new(
+            "Command-line utility that keeps the machine awake until a key is pressed.",
+            "Command line tool that prevents system sleep and keeps the machine awake during builds, downloads, or long-running tasks until a key is pressed.",
+            "Jan Ruhländer",
+            "MIT",
+            "https://www.nuget.org/packages/Capjan.WakeLock.Tool",
+            ["wakelock", "power-management", "sleep", "cli"],
+            "bolt",
+            false,
+            156),
+        ["cap.dotnetdoctor"] = new(
+            "Diagnostic CLI tool for inspecting and troubleshooting .NET development environments.",
+            "A .NET global tool for diagnosing .NET development environments, SDK installations, PATH configuration, and workload health.",
+            "DotnetDoctor",
+            "MIT",
+            "https://github.com/capjan/dotnet-doctor",
+            ["diagnostics", "doctor", "environment", "sdk"],
+            "doctor",
+            false,
+            113),
+        ["cockpit.fixture.tool"] = new(
+            "Workspace verification fixture tool for testing local manifest declarations and CLI invocation.",
+            "Local workspace fixture package declared in .config/dotnet-tools.json for testing .NET Cockpit tool discovery, filtering, and command inspection.",
+            ".NET Cockpit",
+            "MIT",
+            "https://www.nuget.org/packages/cockpit.fixture.tool",
+            ["fixture", "workspace", "local-tool", "testing"],
+            "box",
+            false,
+            1_024),
+        ["dotnet-outdated-tool"] = new(
+            "Displays outdated NuGet packages across .NET solutions and projects with one command.",
+            "A .NET global tool that lists outdated NuGet package references in a project or solution and optionally upgrades them in place.",
+            "jerriep, Imre Pühvel",
+            "MIT",
+            "https://github.com/dotnet-outdated/dotnet-outdated",
+            ["NuGet", "Dependencies", "Upgrades", "CLI"],
+            "package",
+            false,
+            9_420_000),
+        ["csharpier"] = new(
+            "Opinionated code formatter for C# and XML projects.",
+            "CSharpier is an opinionated code formatter for C# and XML that parses your code and reprints it using its own clean formatting rules.",
+            "BelaVanderVoort",
+            "MIT",
+            "https://csharpier.com",
+            ["Formatter", "C#", "CodeStyle", "Linting"],
+            "sparkles",
+            false,
+            6_800_000),
+        ["dotnet-format"] = new(
+            "Code formatter for .NET that applies style preferences from .editorconfig.",
+            "Formats code to match editorconfig settings across C# and Visual Basic projects and solutions.",
+            "Microsoft",
+            "MIT",
+            "https://github.com/dotnet/format",
+            ["Formatter", "EditorConfig", "Roslyn"],
+            "sparkles",
+            true,
+            14_500_000),
+        ["dotnet-trace"] = new(
+            "Cross-platform performance profiler collecting EventPipe traces from running .NET processes.",
+            "Enables the collection of .NET Core traces of a running process without a native profiler using EventPipe.",
+            "Microsoft",
+            "MIT",
+            "https://learn.microsoft.com/dotnet/core/diagnostics/dotnet-trace",
+            ["Diagnostics", "Profiling", "EventPipe", "Performance"],
+            "activity",
+            true,
+            11_300_000),
+        ["dotnet-counters"] = new(
+            "Performance monitoring tool for ad-hoc health monitoring and first-level performance investigation.",
+            "Displays live EventCounter metrics such as CPU usage, GC heap sizes, exception rates, and threadpool queues in real time.",
+            "Microsoft",
+            "MIT",
+            "https://learn.microsoft.com/dotnet/core/diagnostics/dotnet-counters",
+            ["Diagnostics", "Metrics", "Counters", "Performance"],
+            "activity",
+            true,
+            8_900_000),
+        ["dotnet-dump"] = new(
+            "Collect and analyze Windows and Linux process dumps without a native debugger.",
+            "Collects and analyzes crash dumps and GC heaps of .NET applications using SOS commands.",
+            "Microsoft",
+            "MIT",
+            "https://learn.microsoft.com/dotnet/core/diagnostics/dotnet-dump",
+            ["Diagnostics", "CrashDump", "Memory", "Debugging"],
+            "activity",
+            true,
+            9_700_000),
+    };
+
+    public const string NuGetLogoSvg = """<svg class="tool-logo-svg nuget-logo-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="6" y="6" width="23" height="23" rx="5.5" fill="#004880" stroke="#1d6fb8" stroke-width="1"/><circle cx="4.2" cy="4.2" r="2.3" fill="#0078d4"/><circle cx="13.2" cy="13.2" r="2.8" fill="#ffffff"/><circle cx="21.2" cy="21.2" r="4.8" fill="#ffffff"/></svg>""";
+
+    private static readonly (string Id, string Version)[] FeaturedSheetPackages =
+    [
+        ("dotnet-coverage", "18.1.0"),
+        ("dotnet-reportgenerator-globaltool", "5.4.18"),
+        ("coverlet.console", "6.0.4"),
+        ("dotnet-ef", "10.0.0"),
+        ("dotnet-outdated-tool", "4.6.8")
+    ];
+
+    public static async Task WarmCacheAsync(ToolsSnapshot snapshot, HttpClient httpClient, CancellationToken cancellationToken)
+    {
+        var allTools = snapshot.Global.Tools.Concat(snapshot.Local.Tools)
+            .Select(t => (Id: t.PackageId, Version: t.Version))
+            .Concat(FeaturedSheetPackages)
+            .GroupBy(t => t.Id, StringComparer.OrdinalIgnoreCase)
+            .Select(g => g.First())
+            .ToArray();
+        if (allTools.Length == 0) return;
+
+        var now = DateTimeOffset.UtcNow;
+        var missingIds = allTools
+            .Where(t => !NuGetCache.TryGetValue(t.Id, out var cached) || (now - cached.FetchedAt) > TimeSpan.FromMinutes(15))
+            .Select(t => t.Id)
+            .ToArray();
+
+        if (missingIds.Length > 0)
+        {
+            try
+            {
+                using var cts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+                cts.CancelAfter(TimeSpan.FromSeconds(4));
+
+                var queryTerms = string.Join("+", missingIds.Select(id => $"packageid:{Uri.EscapeDataString(id)}"));
+                var url = $"https://azuresearch-usnc.nuget.org/query?q={queryTerms}&prerelease=true&semVerLevel=2.0.0&take=50";
+                using var response = await httpClient.GetAsync(url, cts.Token);
+                if (response.IsSuccessStatusCode)
+                {
+                    await using var stream = await response.Content.ReadAsStreamAsync(cts.Token);
+                    using var doc = await JsonDocument.ParseAsync(stream, cancellationToken: cts.Token);
+                    if (doc.RootElement.TryGetProperty("data", out var dataArr) && dataArr.ValueKind == JsonValueKind.Array)
+                    {
+                        foreach (var item in dataArr.EnumerateArray())
+                        {
+                            var id = item.TryGetProperty("id", out var idEl) ? idEl.GetString() : null;
+                            if (string.IsNullOrWhiteSpace(id)) continue;
+
+                            var latestVer = item.TryGetProperty("version", out var vEl) ? vEl.GetString() ?? "" : "";
+                            var desc = item.TryGetProperty("description", out var dEl) ? dEl.GetString() : null;
+                            var projUrl = item.TryGetProperty("projectUrl", out var pEl) ? pEl.GetString() : null;
+                            var iconUrl = item.TryGetProperty("iconUrl", out var iEl) ? iEl.GetString() : null;
+                            var verified = item.TryGetProperty("verified", out var verEl) && verEl.ValueKind == JsonValueKind.True;
+                            var totalDownloads = item.TryGetProperty("totalDownloads", out var dlEl) && dlEl.TryGetInt64(out var dl) ? dl : 0L;
+
+                            string? authors = null;
+                            if (item.TryGetProperty("authors", out var authEl))
+                            {
+                                if (authEl.ValueKind == JsonValueKind.Array)
+                                    authors = string.Join(", ", authEl.EnumerateArray().Select(a => a.GetString()).Where(s => !string.IsNullOrWhiteSpace(s)));
+                                else if (authEl.ValueKind == JsonValueKind.String)
+                                    authors = authEl.GetString();
+                            }
+
+                            var tags = Array.Empty<string>();
+                            if (item.TryGetProperty("tags", out var tagsEl) && tagsEl.ValueKind == JsonValueKind.Array)
+                            {
+                                tags = tagsEl.EnumerateArray()
+                                    .Select(t => t.GetString() ?? "")
+                                    .Where(t => !string.IsNullOrWhiteSpace(t))
+                                    .Distinct(StringComparer.OrdinalIgnoreCase)
+                                    .Take(6)
+                                    .ToArray();
+                            }
+
+                            string? latestStable = null;
+                            if (item.TryGetProperty("versions", out var versEl) && versEl.ValueKind == JsonValueKind.Array)
+                            {
+                                var allVers = versEl.EnumerateArray()
+                                    .Select(v => v.TryGetProperty("version", out var vv) ? vv.GetString() : null)
+                                    .Where(v => !string.IsNullOrWhiteSpace(v))
+                                    .Select(v => v!)
+                                    .ToArray();
+                                latestStable = allVers
+                                    .Where(v => !v.Contains('-'))
+                                    .OrderByDescending(v => v, SdkDownloadsSection.SdkVersionComparer.Instance)
+                                    .FirstOrDefault();
+                            }
+
+                            NuGetCache[id] = new CachedNuGetPackage(
+                                id,
+                                latestVer,
+                                latestStable,
+                                desc,
+                                projUrl,
+                                authors,
+                                tags,
+                                totalDownloads,
+                                verified,
+                                iconUrl,
+                                now);
+                        }
+                    }
+                }
+            }
+            catch
+            {
+                // Ignore transient network errors and rely on local .nuspec metadata.
+            }
+        }
+
+        // Fetch flatcontainer icons for packages that lack an embedded local icon file in .store
+        foreach (var tool in allTools)
+        {
+            if (RemoteIconCache.ContainsKey(tool.Id)) continue;
+            if (HasLocalStoreIcon(tool.Id, tool.Version)) continue;
+            if (!NuGetCache.TryGetValue(tool.Id, out var pkg) || string.IsNullOrWhiteSpace(pkg.IconUrl))
+            {
+                RemoteIconCache[tool.Id] = null;
+                continue;
+            }
+
+            try
+            {
+                using var iconCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+                iconCts.CancelAfter(TimeSpan.FromSeconds(2));
+                var lowerId = tool.Id.ToLowerInvariant();
+                var targetVer = (!string.IsNullOrWhiteSpace(pkg.LatestStableVersion) ? pkg.LatestStableVersion : tool.Version).ToLowerInvariant();
+                var flatIconUrl = $"https://api.nuget.org/v3-flatcontainer/{Uri.EscapeDataString(lowerId)}/{Uri.EscapeDataString(targetVer)}/icon";
+                using var iconResp = await httpClient.GetAsync(flatIconUrl, iconCts.Token);
+                if (iconResp.IsSuccessStatusCode)
+                {
+                    var bytes = await iconResp.Content.ReadAsByteArrayAsync(iconCts.Token);
+                    var detectedMime = DetectImageMimeType(bytes, iconResp.Content.Headers.ContentType?.MediaType);
+                    if (detectedMime is not null)
+                    {
+                        RemoteIconCache[tool.Id] = $"data:{detectedMime};base64,{Convert.ToBase64String(bytes)}";
+                        continue;
+                    }
+                }
+            }
+            catch
+            {
+                // Fall back to standard NuGet logo if flatcontainer icon cannot be fetched.
+            }
+            RemoteIconCache[tool.Id] = null;
+        }
+    }
+
+    public static async Task<(byte[]? Bytes, string ContentType)> GetOrFetchIconAsync(string packageId, string version, HttpClient httpClient, CancellationToken cancellationToken)
+    {
+        var meta = Resolve(packageId, version, false);
+        if (!string.IsNullOrEmpty(meta.IconDataUri) && TryDecodeDataUri(meta.IconDataUri, out var cachedBytes, out var cachedMime))
+        {
+            return (cachedBytes, cachedMime);
+        }
+
+        if (!RemoteIconCache.ContainsKey(packageId) && !string.IsNullOrWhiteSpace(packageId) && !string.IsNullOrWhiteSpace(version))
+        {
+            try
+            {
+                using var iconCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+                iconCts.CancelAfter(TimeSpan.FromSeconds(2));
+                var lowerId = packageId.ToLowerInvariant();
+                var lowerVer = version.ToLowerInvariant();
+                var flatIconUrl = $"https://api.nuget.org/v3-flatcontainer/{Uri.EscapeDataString(lowerId)}/{Uri.EscapeDataString(lowerVer)}/icon";
+                using var iconResp = await httpClient.GetAsync(flatIconUrl, iconCts.Token);
+                if (iconResp.IsSuccessStatusCode)
+                {
+                    var bytes = await iconResp.Content.ReadAsByteArrayAsync(iconCts.Token);
+                    var detectedMime = DetectImageMimeType(bytes, iconResp.Content.Headers.ContentType?.MediaType);
+                    if (detectedMime is not null)
+                    {
+                        RemoteIconCache[packageId] = $"data:{detectedMime};base64,{Convert.ToBase64String(bytes)}";
+                        return (bytes, detectedMime);
+                    }
+                }
+            }
+            catch
+            {
+                // Ignore network failure and return standard NuGet SVG.
+            }
+            RemoteIconCache[packageId] = null;
+        }
+
+        return (System.Text.Encoding.UTF8.GetBytes(NuGetLogoSvg), "image/svg+xml");
+    }
+
+    private static string? DetectImageMimeType(byte[] bytes, string? contentType)
+    {
+        if (bytes.Length is <= 8 or > 200_000) return null;
+        if (bytes[0] == 0x89 && bytes[1] == 0x50 && bytes[2] == 0x4E && bytes[3] == 0x47)
+            return "image/png";
+        if (bytes[0] == 0xFF && bytes[1] == 0xD8 && bytes[2] == 0xFF)
+            return "image/jpeg";
+        if (bytes.Length >= 12 && bytes[0] == (byte)'R' && bytes[1] == (byte)'I' && bytes[2] == (byte)'F' && bytes[3] == (byte)'F' &&
+            bytes[8] == (byte)'W' && bytes[9] == (byte)'E' && bytes[10] == (byte)'B' && bytes[11] == (byte)'P')
+            return "image/webp";
+        var head = System.Text.Encoding.UTF8.GetString(bytes.AsSpan(0, Math.Min(bytes.Length, 256))).TrimStart();
+        if (head.StartsWith("<svg", StringComparison.OrdinalIgnoreCase) ||
+            (head.StartsWith("<?xml", StringComparison.OrdinalIgnoreCase) && head.Contains("<svg", StringComparison.OrdinalIgnoreCase)))
+            return "image/svg+xml";
+        if (!string.IsNullOrWhiteSpace(contentType) && contentType.StartsWith("image/", StringComparison.OrdinalIgnoreCase))
+            return contentType;
+        return null;
+    }
+
+    private static bool TryDecodeDataUri(string dataUri, out byte[] bytes, out string mimeType)
+    {
+        bytes = [];
+        mimeType = "image/png";
+        if (!dataUri.StartsWith("data:", StringComparison.OrdinalIgnoreCase)) return false;
+        var commaIdx = dataUri.IndexOf(',');
+        if (commaIdx < 0) return false;
+        var header = dataUri[5..commaIdx];
+        var semiIdx = header.IndexOf(';');
+        if (semiIdx > 0) mimeType = header[..semiIdx];
+        try
+        {
+            bytes = Convert.FromBase64String(dataUri[(commaIdx + 1)..]);
+            return bytes.Length > 0;
+        }
+        catch
+        {
+            return false;
+        }
+    }
+
+    public static ToolMetadata Resolve(string packageId, string version, bool isLocal, string? manifestPath = null)
+    {
+        KnownTools.TryGetValue(packageId, out var builtIn);
+        NuGetCache.TryGetValue(packageId, out var nuget);
+        var defaultKind = builtIn?.IconKind ?? InferIconKind(packageId);
+
+        var userProfile = Environment.GetFolderPath(Environment.SpecialFolder.UserProfile);
+        var lowerId = packageId.ToLowerInvariant();
+        var lowerVer = version.ToLowerInvariant();
+
+        var storeDir = FindStoreDirectory(userProfile, lowerId, lowerVer);
+        var exactStoreDir = Path.Combine(userProfile, ".dotnet", "tools", ".store", lowerId, lowerVer);
+
+        var displayStorePath = !string.IsNullOrWhiteSpace(manifestPath)
+            ? manifestPath
+            : Directory.Exists(exactStoreDir)
+                ? exactStoreDir
+                : Path.Combine(userProfile, ".dotnet", "tools");
+
+        string? nuspecDescription = null;
+        string? nuspecAuthors = null;
+        string? nuspecLicense = null;
+        string? nuspecProjectUrl = null;
+        string? nuspecRepoUrl = null;
+        string[]? nuspecTags = null;
+        string? iconDataUri = null;
+
+        if (!string.IsNullOrEmpty(storeDir))
+        {
+            try
+            {
+                var nuspecPath = Directory.EnumerateFiles(storeDir, "*.nuspec").FirstOrDefault();
+                if (nuspecPath is not null)
+                {
+                    var doc = XDocument.Load(nuspecPath);
+                    var meta = doc.Root?.Elements().FirstOrDefault(e => e.Name.LocalName == "metadata");
+                    if (meta is not null)
+                    {
+                        nuspecDescription = GetElementValue(meta, "description");
+                        nuspecAuthors = GetElementValue(meta, "authors");
+
+                        var licenseEl = meta.Elements().FirstOrDefault(e => e.Name.LocalName == "license");
+                        if (licenseEl is not null)
+                        {
+                            var licType = licenseEl.Attribute("type")?.Value;
+                            var licVal = licenseEl.Value.Trim();
+                            if (string.Equals(licType, "file", StringComparison.OrdinalIgnoreCase) || licVal.Contains('\\') || licVal.Contains('/'))
+                                nuspecLicense = "Bundled license";
+                            else if (!string.IsNullOrWhiteSpace(licVal))
+                                nuspecLicense = licVal;
+                        }
+
+                        nuspecProjectUrl = GetElementValue(meta, "projectUrl");
+                        var tagsRaw = GetElementValue(meta, "tags");
+                        if (!string.IsNullOrWhiteSpace(tagsRaw))
+                        {
+                            nuspecTags = tagsRaw
+                                .Split([' ', ',', ';'], StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries)
+                                .Distinct(StringComparer.OrdinalIgnoreCase)
+                                .Take(6)
+                                .ToArray();
+                        }
+
+                        var repoEl = meta.Elements().FirstOrDefault(e => e.Name.LocalName == "repository");
+                        nuspecRepoUrl = repoEl?.Attribute("url")?.Value;
+
+                        var iconRel = GetElementValue(meta, "icon");
+                        if (!string.IsNullOrWhiteSpace(iconRel))
+                        {
+                            iconDataUri = TryReadIconDataUri(storeDir, iconRel);
+                        }
+                    }
+                }
+            }
+            catch
+            {
+                // Ignore malformed local cache metadata and fall back cleanly.
+            }
+        }
+
+        if (string.IsNullOrEmpty(iconDataUri) && RemoteIconCache.TryGetValue(packageId, out var remoteIcon) && !string.IsNullOrEmpty(remoteIcon))
+        {
+            iconDataUri = remoteIcon;
+        }
+
+        var rawDescription = !string.IsNullOrWhiteSpace(nuspecDescription)
+            ? nuspecDescription
+            : nuget?.Description;
+
+        var fullDescription = NormalizeDescription(rawDescription)
+            ?? builtIn?.FullDescription
+            ?? (isLocal
+                ? $"Local .NET CLI tool package ({packageId}) declared in the workspace tool manifest."
+                : $"Global .NET CLI tool package ({packageId}) installed for the current user account.");
+
+        var summary = SummarizeDescription(rawDescription)
+            ?? builtIn?.Summary
+            ?? FirstSentence(fullDescription);
+
+        var authors = !string.IsNullOrWhiteSpace(nuspecAuthors)
+            ? nuspecAuthors
+            : !string.IsNullOrWhiteSpace(nuget?.Authors)
+                ? nuget.Authors
+                : builtIn?.Authors ?? InferAuthor(packageId);
+
+        var license = !string.IsNullOrWhiteSpace(nuspecLicense)
+            ? nuspecLicense
+            : builtIn?.License ?? "NuGet";
+
+        var repoUrl = !string.IsNullOrWhiteSpace(nuspecRepoUrl)
+            ? nuspecRepoUrl
+            : builtIn?.ProjectUrl ?? "";
+
+        var projectUrl = !string.IsNullOrWhiteSpace(nuspecProjectUrl)
+            ? nuspecProjectUrl
+            : !string.IsNullOrWhiteSpace(nuget?.ProjectUrl)
+                ? nuget.ProjectUrl
+                : !string.IsNullOrWhiteSpace(repoUrl)
+                    ? repoUrl
+                    : $"https://www.nuget.org/packages/{packageId}";
+
+        var tags = nuspecTags is { Length: > 0 }
+            ? nuspecTags
+            : nuget?.Tags is { Length: > 0 }
+                ? nuget.Tags
+                : builtIn?.Tags ?? ["dotnet-tool", "cli"];
+
+        // Authoritative Verified check: from NuGet.org API when available, otherwise only explicitly verified built-ins.
+        var isVerified = nuget is not null
+            ? nuget.Verified
+            : builtIn?.IsVerified == true;
+
+        var totalDownloads = nuget?.TotalDownloads ?? builtIn?.FallbackDownloads;
+        var downloadsDisplay = totalDownloads is > 0 ? FormatCompactDownloads(totalDownloads.Value) : "";
+        var downloadsFullDisplay = totalDownloads is > 0 ? FormatFullDownloads(totalDownloads.Value) : "Published on NuGet.org";
+
+        var isInstalledPreview = version.Contains('-', StringComparison.Ordinal);
+        var candidateLatest = isInstalledPreview
+            ? (nuget?.LatestVersion ?? nuget?.LatestStableVersion)
+            : (nuget?.LatestStableVersion ?? nuget?.LatestVersion);
+        var hasUpdate = !string.IsNullOrWhiteSpace(candidateLatest) &&
+            !string.Equals(candidateLatest, version, StringComparison.OrdinalIgnoreCase) &&
+            SdkDownloadsSection.SdkVersionComparer.Instance.Compare(candidateLatest, version) > 0;
+
+        return new ToolMetadata(
+            packageId,
+            summary,
+            fullDescription,
+            authors,
+            license,
+            projectUrl,
+            repoUrl,
+            tags,
+            iconDataUri,
+            defaultKind,
+            displayStorePath,
+            isVerified,
+            downloadsDisplay,
+            downloadsFullDisplay,
+            hasUpdate ? candidateLatest : null,
+            hasUpdate);
+    }
+
+    public static string FormatCompactDownloads(long count)
+    {
+        if (count >= 1_000_000_000)
+            return $"{(count / 1_000_000_000.0).ToString("0.#", CultureInfo.InvariantCulture)}B";
+        if (count >= 1_000_000)
+            return $"{(count / 1_000_000.0).ToString("0.#", CultureInfo.InvariantCulture)}M";
+        if (count >= 10_000)
+            return $"{(count / 1_000.0).ToString("0.#", CultureInfo.InvariantCulture)}K";
+        return count.ToString("N0", CultureInfo.InvariantCulture);
+    }
+
+    public static string FormatFullDownloads(long count) =>
+        count >= 10_000
+            ? $"{count.ToString("N0", CultureInfo.InvariantCulture)} ({FormatCompactDownloads(count)})"
+            : $"{count.ToString("N0", CultureInfo.InvariantCulture)} total";
+
+    public static string RenderLogo(ToolMetadata meta, int colorIdx = 0, string monogram = "", string extraClass = "")
+    {
+        var cls = string.IsNullOrEmpty(extraClass) ? "" : $" {extraClass}";
+        if (!string.IsNullOrEmpty(meta.IconDataUri))
+        {
+            return $"<span class=\"tool-monogram tool-logo has-img{cls}\"><img src=\"{meta.IconDataUri}\" alt=\"\" class=\"tool-logo-img\" width=\"36\" height=\"36\" loading=\"lazy\"></span>";
+        }
+
+        return $"<span class=\"tool-monogram tool-logo nuget-default-logo{cls}\" title=\"NuGet package ({WebUtility.HtmlEncode(meta.PackageId)})\">{NuGetLogoSvg}</span>";
+    }
+
+    public static string RenderKindSvg(string kind) => NuGetLogoSvg;
+
+    public static string InferIconKind(string packageId) => "nuget";
+
+    private static string FindStoreDirectory(string userProfile, string lowerId, string lowerVer)
+    {
+        if (!string.IsNullOrEmpty(lowerVer))
+        {
+            var globalStoreDir = Path.Combine(userProfile, ".dotnet", "tools", ".store", lowerId, lowerVer, lowerId, lowerVer);
+            if (Directory.Exists(globalStoreDir)) return globalStoreDir;
+
+            var nugetCacheDir = Path.Combine(userProfile, ".nuget", "packages", lowerId, lowerVer);
+            if (Directory.Exists(nugetCacheDir)) return nugetCacheDir;
+        }
+
+        try
+        {
+            var pkgRoot = Path.Combine(userProfile, ".dotnet", "tools", ".store", lowerId);
+            if (Directory.Exists(pkgRoot))
+            {
+                foreach (var verDir in Directory.EnumerateDirectories(pkgRoot))
+                {
+                    var vName = Path.GetFileName(verDir);
+                    var inner = Path.Combine(verDir, lowerId, vName);
+                    if (Directory.Exists(inner)) return inner;
+                }
+            }
+
+            var nugetPkgRoot = Path.Combine(userProfile, ".nuget", "packages", lowerId);
+            if (Directory.Exists(nugetPkgRoot))
+            {
+                var firstVerDir = Directory.EnumerateDirectories(nugetPkgRoot).FirstOrDefault();
+                if (firstVerDir is not null) return firstVerDir;
+            }
+        }
+        catch
+        {
+            // Ignore directory enumeration errors.
+        }
+
+        return "";
+    }
+
+    private static bool HasLocalStoreIcon(string packageId, string version)
+    {
+        try
+        {
+            var userProfile = Environment.GetFolderPath(Environment.SpecialFolder.UserProfile);
+            var lowerId = packageId.ToLowerInvariant();
+            var lowerVer = version.ToLowerInvariant();
+            var storeDir = FindStoreDirectory(userProfile, lowerId, lowerVer);
+            if (string.IsNullOrEmpty(storeDir)) return false;
+            var nuspecPath = Directory.EnumerateFiles(storeDir, "*.nuspec").FirstOrDefault();
+            if (nuspecPath is null) return false;
+            var doc = XDocument.Load(nuspecPath);
+            var meta = doc.Root?.Elements().FirstOrDefault(e => e.Name.LocalName == "metadata");
+            var iconRel = meta is not null ? GetElementValue(meta, "icon") : null;
+            return !string.IsNullOrWhiteSpace(iconRel);
+        }
+        catch
+        {
+            return false;
+        }
+    }
+
+    private static string InferAuthor(string packageId)
+    {
+        if (packageId.StartsWith("dotnet-", StringComparison.OrdinalIgnoreCase) ||
+            packageId.StartsWith("Microsoft.", StringComparison.OrdinalIgnoreCase))
+            return "Microsoft";
+        var parts = packageId.Split(['.', '-'], StringSplitOptions.RemoveEmptyEntries);
+        return parts.Length > 0 ? parts[0] : "NuGet author";
+    }
+
+    private static string? GetElementValue(XElement parent, string localName) =>
+        parent.Elements().FirstOrDefault(e => e.Name.LocalName == localName)?.Value?.Trim();
+
+    private static string? TryReadIconDataUri(string storeDir, string iconRelativePath)
+    {
+        var normalizedRel = iconRelativePath.Replace('\\', Path.DirectorySeparatorChar).Replace('/', Path.DirectorySeparatorChar);
+        var fullDir = Path.GetFullPath(storeDir);
+        var fullIcon = Path.GetFullPath(Path.Combine(fullDir, normalizedRel));
+        if (!fullIcon.StartsWith(fullDir, StringComparison.Ordinal) || !File.Exists(fullIcon))
+            return null;
+
+        var info = new FileInfo(fullIcon);
+        if (info.Length is <= 0 or > 200_000)
+            return null;
+
+        var ext = Path.GetExtension(fullIcon).ToLowerInvariant();
+        var mime = ext switch
+        {
+            ".png" => "image/png",
+            ".jpg" or ".jpeg" => "image/jpeg",
+            ".svg" => "image/svg+xml",
+            ".webp" => "image/webp",
+            _ => null
+        };
+        if (mime is null) return null;
+
+        var bytes = File.ReadAllBytes(fullIcon);
+        return $"data:{mime};base64,{Convert.ToBase64String(bytes)}";
+    }
+
+    private static string? NormalizeDescription(string? raw)
+    {
+        if (string.IsNullOrWhiteSpace(raw)) return null;
+        var lines = raw.Split(['\r', '\n'], StringSplitOptions.TrimEntries)
+            .Where(l => l.Length > 0)
+            .ToArray();
+        return lines.Length == 0 ? null : string.Join("\n", lines);
+    }
+
+    private static string? SummarizeDescription(string? raw)
+    {
+        if (string.IsNullOrWhiteSpace(raw)) return null;
+        var firstLine = raw.Split(['\r', '\n'], StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries)
+            .FirstOrDefault();
+        if (string.IsNullOrWhiteSpace(firstLine)) return null;
+        return firstLine.Length <= 115 ? firstLine : firstLine[..112].TrimEnd() + "…";
+    }
+
+    private static string FirstSentence(string text)
+    {
+        var firstLine = text.Split(['\r', '\n'], StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries)
+            .FirstOrDefault() ?? text;
+        return firstLine.Length <= 115 ? firstLine : firstLine[..112].TrimEnd() + "…";
+    }
+}
diff --git a/src/DotnetCockpit/ToolsPage.cs b/src/DotnetCockpit/ToolsPage.cs
index faeb512..091c9b1 100644
--- a/src/DotnetCockpit/ToolsPage.cs
+++ b/src/DotnetCockpit/ToolsPage.cs
@@ -3,12 +3,14 @@
 
 namespace DotnetCockpit;
 
-internal sealed record ToolsViewOptions(string Scope = "global", string SearchQuery = "", string Notice = "")
+internal sealed record ToolsViewOptions(string Scope = "global", string SearchQuery = "", string Notice = "", string Selected = "", string Changed = "")
 {
     public static ToolsViewOptions From(IQueryCollection query) => new(
-        query["scope"].ToString() is "local" ? "local" : "global",
+        query["scope"].ToString() is "local" ? "local" : query["scope"].ToString() is "all" ? "all" : "global",
         query["q"].ToString().Trim() is { Length: <= 100 } search ? search : "",
-        query["notice"].ToString());
+        query["notice"].ToString(),
+        query["selected"].ToString().Trim() is { Length: <= 100 } selected ? selected : "",
+        query["changed"].ToString().Trim());
 }
 
 internal static class ToolsPage
@@ -16,7 +18,7 @@ internal static class ToolsPage
     public static string Render(ToolsSnapshot snapshot, ToolsViewOptions options) =>
         Render(snapshot, options, new(options.SearchQuery, []));
 
-    public static string Render(ToolsSnapshot snapshot, ToolsViewOptions options, ToolSearch search)
+    public static string Render(ToolsSnapshot snapshot, ToolsViewOptions options, ToolSearch search, int navIssues = 0, int? navVersions = null, string? navInventory = null)
     {
         var content = snapshot.Status switch
         {
@@ -25,90 +27,348 @@ public static string Render(ToolsSnapshot snapshot, ToolsViewOptions options, To
             "error" => $"<section class=\"inventory empty-state error-state\" role=\"alert\"><h2>Tool information is unavailable</h2><p>{Encode(snapshot.Error ?? "The tools could not be read.")}</p><a class=\"button\" href=\"/tools\">Try again</a></section>",
             _ => RenderTabs(snapshot, options)
         };
+
+        var manifestBadge = snapshot.LocalManifestInitialized
+            ? (snapshot.LocalManifestOwned ? "Local manifest in this workspace" : "Local manifest inherited from a parent folder")
+            : "No local manifest";
+
+        var activeTools = options.Scope == "local"
+            ? snapshot.Local.Tools
+            : options.Scope == "all"
+                ? snapshot.Global.Tools.Concat(snapshot.Local.Tools).ToArray()
+                : snapshot.Global.Tools;
+        var updatableTools = snapshot.Status == "ready"
+            ? activeTools
+                .Select(t =>
+                {
+                    var isToolLocal = options.Scope == "local" || t.Manifest is not null;
+                    var meta = ToolMetadataCatalog.Resolve(t.PackageId, t.Version, isToolLocal, t.Manifest);
+                    return (Tool: t, Scope: isToolLocal ? "local" : "global", Meta: meta);
+                })
+                .Where(x => x.Meta.HasUpdate)
+                .ToArray()
+            : [];
+        var updateAllHtml = updatableTools.Length > 0
+            ? ConfirmActions.Trigger(
+                ConfirmActions.ToolsUpdateAll(options.Scope, options.SearchQuery, updatableTools.Select(u => $"{u.Tool.PackageId}|{u.Scope}").ToArray()),
+                $"<button type=\"submit\" class=\"button\" id=\"update-all-tools-btn\">{Icon("refresh", "xs")} Update all <span class=\"summary-count\">{updatableTools.Length}</span></button>",
+                "inline-action-form")
+            : "";
+
         return PageLayout.Render($$"""
-            <div class="breadcrumb">Environment <span>/</span> .NET Tools</div>
             <div class="page-heading">
-              <div><h1>.NET Tools</h1><p class="muted intro">Global tools for your account and local tools for this workspace.</p></div>
-              <a class="button primary" href="{{RefreshLink(options)}}">{{Icon("refresh")}} Refresh</a>
+              <div>
+                <h1>.NET Tools</h1>
+                <p class="muted intro">Global tools for your account and local tools declared for this workspace.</p>
+              </div>
+              <div class="tools-header-actions">
+                {{updateAllHtml}}
+                {{(snapshot.Status == "ready" ? $"<a class=\"button primary\" id=\"open-add-tool-btn\" href=\"/tools?add=1#tool-search-section\">{Icon("plus", "xs")} Add tool</a>" : "")}}
+              </div>
+            </div>
+            <div class="working-directory">
+              {{Icon("folder", "xs")}}
+              <code title="{{Encode(snapshot.LocalManifestPath ?? "")}}">{{Encode(snapshot.WorkingDirectory)}}</code>
+              <span class="muted">{{manifestBadge}}</span>
             </div>
-            <div class="working-directory"><div class="working-directory-heading"><span class="context-icon">{{Icon("desktop")}}</span><div><strong>Working directory</strong><span class="muted">Local tools use manifests from this directory and its parents.</span></div><span class="context-badge">Current workspace</span></div><code>{{Encode(snapshot.WorkingDirectory)}}</code></div>
             {{RenderNotice(options.Notice)}}
-            {{(snapshot.Status == "ready" ? RenderSearch(snapshot, options, search) : "")}}
             {{content}}
-            <p class="scope-note muted">Local tools are declared in manifests for this working directory or its parents. This view does not check whether they have been restored.</p>
-            """, "/tools", ".NET Tools | .NET Cockpit");
+            {{(snapshot.Status == "ready" ? RenderSearch(snapshot, options, search) : "")}}
+            {{(snapshot.Status == "ready" ? RenderAddToolSheet(snapshot, options, search) : "")}}
+            <p class="scope-note muted">Local tools are declared in manifests for this working directory or its parents. This view does not check whether they have been restored — run <code>dotnet tool restore</code> in the workspace.</p>
+            """, "/tools", ".NET Tools | .NET Cockpit", navIssues, navVersions, snapshot.Global.Tools.Length + snapshot.Local.Tools.Length, refreshHref: RefreshLink(options), inventorySignature: navInventory);
     }
 
     private static string RenderTabs(ToolsSnapshot snapshot, ToolsViewOptions options)
     {
-        var local = options.Scope == "local";
-        var selected = local ? snapshot.Local : snapshot.Global;
-        return $$"""
-            <div class="tool-tabs" role="tablist" aria-label="Tool scope">
-              {{RenderTab("global", "Global", snapshot.Global, !local)}}
-              {{RenderTab("local", "Local", snapshot.Local, local)}}
+        var isLocal = options.Scope == "local";
+        var isAll = options.Scope == "all";
+        var isGlobal = !isLocal && !isAll;
+        var allCount = snapshot.Global.Error is null && snapshot.Local.Error is null ? snapshot.Global.Tools.Length + snapshot.Local.Tools.Length : (int?)null;
+        var tabsHtml = $"""
+            <div class="segmented tool-tabs" role="tablist" aria-label="Tool scope">
+              {RenderTab("global", "Global", snapshot.Global.Error is null ? snapshot.Global.Tools.Length : null, isGlobal)}
+              {RenderTab("local", "Local", snapshot.Local.Error is null ? snapshot.Local.Tools.Length : null, isLocal)}
+              {RenderTab("all", "All", allCount, isAll)}
             </div>
-            {{RenderList(local ? "Local tools" : "Global tools", local ? "local-tools" : "global-tools", selected, local, snapshot.LocalManifestInitialized, snapshot.LocalManifestOwned, options)}}
             """;
+        if (isAll)
+        {
+            var combined = snapshot.Global.Tools.Concat(snapshot.Local.Tools).ToArray();
+            var allList = new ToolList(combined, snapshot.Global.Error ?? snapshot.Local.Error);
+            return RenderList("All tools", "all-tools", allList, false, snapshot.LocalManifestInitialized, snapshot.LocalManifestOwned, options, tabsHtml);
+        }
+        var selected = isLocal ? snapshot.Local : snapshot.Global;
+        return RenderList(isLocal ? "Local tools" : "Global tools", isLocal ? "local-tools" : "global-tools", selected, isLocal, snapshot.LocalManifestInitialized, snapshot.LocalManifestOwned, options, tabsHtml);
     }
 
-    private static string RenderTab(string scope, string label, ToolList list, bool selected)
+    private static string RenderTab(string scope, string label, int? count, bool selected)
     {
-        var count = list.Error is null ? $"<span class=\"tool-tab-count\">{list.Tools.Length}</span>" : "";
-        return $"<a class=\"tool-tab\" href=\"/tools?scope={scope}\" role=\"tab\" aria-selected=\"{selected.ToString().ToLowerInvariant()}\" aria-controls=\"{scope}-tools-panel\">{label}{count}</a>";
+        var countHtml = count is null ? "" : $"<span class=\"seg-count\" aria-hidden=\"true\">{count}</span>";
+        return $"<a class=\"seg tool-tab {(selected ? "active" : "")}\" href=\"/tools?scope={scope}\" role=\"tab\" aria-selected=\"{selected.ToString().ToLowerInvariant()}\" aria-controls=\"{scope}-tools-panel\">{label}{countHtml}</a>";
     }
 
     private static string RefreshLink(ToolsViewOptions options) =>
         options.Scope == "local" ? "/tools?scope=local" : "/tools";
 
-    private static string RenderList(string title, string id, ToolList list, bool local, bool localInitialized, bool localOwned, ToolsViewOptions options)
+    private static string RenderList(string title, string id, ToolList list, bool local, bool localInitialized, bool localOwned, ToolsViewOptions options, string tabsHtml)
     {
+        var orderedTools = list.Tools.OrderBy(t => t.PackageId, StringComparer.OrdinalIgnoreCase).ToArray();
+        var selectedTool = !string.IsNullOrEmpty(options.Selected)
+            ? orderedTools.FirstOrDefault(t => string.Equals(t.PackageId, options.Selected, StringComparison.OrdinalIgnoreCase))
+            : null;
+
         var content = list.Error is not null
             ? $"<div class=\"empty-state error-state\" role=\"alert\"><h3>{title} could not be read</h3><p>{Encode(list.Error)}</p><a class=\"button\" href=\"{(options.Scope == "local" ? "/tools?scope=local" : "/tools")}\">Try again</a></div>"
-            : list.Tools.Length == 0
+            : orderedTools.Length == 0
                 ? $"<div class=\"empty-state\"><h3>{(local ? (localInitialized ? "No local tools found" : "No local tools initialized") : "No global tools installed")}</h3><p class=\"muted\">{(local ? (localInitialized ? "No tools are declared in the tool manifests for this working directory." : "Initialize local tools to add a manifest in this working directory.") : "No global tools were reported for this user account.")}</p></div>"
-                : RenderTable(list.Tools, local, title);
+                : RenderTable(orderedTools, local, title, localOwned, options, selectedTool);
+
+        var filterInput = orderedTools.Length > 0
+            ? $"<span class=\"filter-count\" data-tools-count hidden></span><span class=\"spacer\"></span><label class=\"search-field\">{Icon("search", "xs")}<input type=\"search\" data-tools-table-filter placeholder=\"Filter by name or command\" aria-label=\"Filter {title.ToLowerInvariant()}\"></label>"
+            : "";
         var localAction = local ? RenderLocalManifestAction(localInitialized, localOwned, options) : "";
+        var drawerHtml = RenderToolDrawer(orderedTools, selectedTool, local, localOwned, options);
+
         return $$"""
-            <section class="inventory tool-panel" role="tabpanel" aria-labelledby="{{id}}" id="{{id}}-panel">
-              <div class="inventory-heading"><div><h2 id="{{id}}">{{title}}</h2><p class="muted">{{(local ? "Tools declared in the manifests for this workspace." : "Tools installed for the current user account.")}}</p></div><div class="inventory-heading-actions">{{(list.Error is null ? $"<fluent-badge appearance=\"outline\" color=\"brand\" class=\"inventory-count\">{list.Tools.Length} tools</fluent-badge>" : "")}}{{localAction}}</div></div>
-              {{content}}
+            <section class="tool-panel-wrapper" role="tabpanel" aria-labelledby="{{id}}" id="{{id}}-panel">
+              <div class="sr-only"><h2 id="{{id}}">{{title}}</h2></div>
+              <div class="filter-bar">
+                {{tabsHtml}}
+                {{filterInput}}
+                {{(filterInput.Length == 0 ? "<span class=\"spacer\"></span>" : "")}}
+                {{localAction}}
+              </div>
+              <div class="tools-hub" id="tools-hub">
+                <div class="tools-list">
+                  <div class="inventory tool-panel">
+                    {{content}}
+                  </div>
+                </div>
+                {{drawerHtml}}
+              </div>
             </section>
             """;
     }
 
-    private static string RenderTable(DotnetTool[] tools, bool local, string title) => $$"""
+    private static string RenderTable(DotnetTool[] orderedTools, bool local, string title, bool localOwned, ToolsViewOptions options, DotnetTool? selectedTool) => $$"""
         <div class="table-scroll" role="region" aria-label="{{title}}" tabindex="0">
           <table class="tools-table" aria-label="{{title}}">
-            <thead><tr><th scope="col">Package ID</th><th scope="col">Version</th><th scope="col">Commands</th>{{(local ? "<th scope=\"col\">Manifest</th>" : "")}}<th scope="col">Actions</th></tr></thead>
-            <tbody>{{string.Concat(tools.OrderBy(tool => tool.PackageId, StringComparer.OrdinalIgnoreCase).Select(tool => $"""
-              <tr data-tool-scope="{(local ? "local" : "global")}">
-                <td><div class="tool-name"><span class="tool-icon">{Icon("code")}</span><strong>{Encode(tool.PackageId)}</strong></div></td>
-                <td><fluent-badge appearance="tint" color="brand" class="version-badge">{Encode(tool.Version)}</fluent-badge></td>
-                <td>{string.Join(", ", tool.Commands.Select(command => $"<code>{Encode(command)}</code>"))}</td>
-                {(local ? $"<td><code class=\"tool-manifest\">{Encode(tool.Manifest ?? "")}</code></td>" : "")}
-                <td><form method="post" action="/tools/uninstall" class="tool-action"><input type="hidden" name="packageId" value="{Encode(tool.PackageId)}"><input type="hidden" name="scope" value="{(local ? "local" : "global")}"><button class="button danger" type="submit">Uninstall</button></form></td>
-              </tr>
-              """))}}</tbody>
+            <thead><tr><th scope="col">Tool</th><th scope="col">Command</th><th scope="col">Version</th>{{(options.Scope == "global" ? "" : $"<th scope=\"col\">{(local ? "Manifest" : "Scope")}</th>")}}<th scope="col" class="th-actions">Actions</th></tr></thead>
+            <tbody>{{string.Concat(orderedTools.Select(tool =>
+            {
+                var isToolLocal = local || tool.Manifest is not null;
+                var isSelected = selectedTool is not null && string.Equals(selectedTool.PackageId, tool.PackageId, StringComparison.OrdinalIgnoreCase);
+                var monogram = GetMonogram(tool.PackageId);
+                var colorIdx = GetColorIndex(tool.PackageId);
+                var meta = ToolMetadataCatalog.Resolve(tool.PackageId, tool.Version, isToolLocal, tool.Manifest);
+                var logoHtml = ToolMetadataCatalog.RenderLogo(meta, colorIdx, monogram);
+                var scopeBadge = isToolLocal
+                    ? $"<span class=\"tool-scope-pill\">{(localOwned ? "Local" : "Local · inherited")}</span>"
+                    : "<span class=\"tool-scope-pill\">Global</span>";
+                var primaryCmd = tool.Commands.FirstOrDefault() ?? tool.PackageId;
+                var copyCmd = isToolLocal ? $"dotnet {primaryCmd}" : primaryCmd;
+                var cliEquiv = $"dotnet tool update {(isToolLocal ? "--local" : "--global")} {tool.PackageId}";
+                var toolScopeStr = isToolLocal ? "local" : "global";
+                var toolKey = $"{toolScopeStr}:{tool.PackageId}";
+                var inspectHref = $"/tools?scope={Uri.EscapeDataString(options.Scope)}&selected={Uri.EscapeDataString(tool.PackageId)}";
+                var versionCellHtml = meta.HasUpdate && !string.IsNullOrEmpty(meta.LatestVersion)
+                    ? $"<div class=\"version-patch-flow\"><span class=\"v-current\">{Encode(tool.Version)}</span><span class=\"v-arrow\" aria-hidden=\"true\">→</span><span class=\"sr-only\">, update available: </span><span class=\"v-patch\" title=\"Latest on NuGet.org: {Encode(meta.LatestVersion)}\">{Encode(meta.LatestVersion)}</span></div>"
+                    : $"<span class=\"v-current\">{Encode(tool.Version)}</span>";
+
+                return $"""
+                  <tr data-tool-scope="{toolScopeStr}" data-tool-row data-drawer-key="{Encode(toolKey)}" data-search="{Encode($"{tool.PackageId} {tool.Version} {string.Join(' ', tool.Commands)} {tool.Manifest} {meta.Summary} {meta.Authors}")}"{(isSelected ? " class=\"row-selected\"" : string.Equals(options.Changed, tool.PackageId, StringComparison.OrdinalIgnoreCase) ? " class=\"row-changed\"" : "")}>
+                    <td class="tool-cell-main">
+                      <div class="tool-name">
+                        {logoHtml}
+                        <div class="tool-name-body">
+                          <div class="tool-title-line">
+                            <span class="tool-id-group">
+                              <strong>{Encode(tool.PackageId)}</strong>
+                              {(meta.IsVerified ? $"<span class=\"v-ok\" title=\"Verified publisher on NuGet.org\">{Icon("check", "xs")}<span class=\"sr-only\">Verified publisher</span></span>" : "")}
+                            </span>
+                            <span class="tool-author-chip muted text-xs">by {Encode(meta.Authors)}</span>
+                          </div>
+                          <span class="tool-desc muted text-xs">{Encode(meta.Summary)}</span>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="tool-cell-cmd">
+                      <div class="row">
+                        {string.Concat(tool.Commands.Select(command => $"<span class=\"tool-command-pill\" data-copy=\"{Encode(isToolLocal ? $"dotnet {command}" : command)}\" title=\"Click to copy command\"><code>{Encode(command)}</code>{Icon("clipboard", "xs")}</span>"))}
+                      </div>
+                    </td>
+                    <td class="tool-cell-ver">{versionCellHtml}</td>
+                    {(options.Scope == "global" ? "" : $"<td class=\"tool-cell-scope\"><div class=\"tool-scope-cell\">{scopeBadge}{(isToolLocal ? $"<code class=\"tool-manifest\">{Encode(tool.Manifest ?? "")}</code>" : "")}</div></td>")}
+                    <td class="tool-cell-actions">
+                      <div class="tool-row-actions">
+                        <a class="button sm ghost tool-inspect-btn" href="{inspectHref}" data-inspect="{Encode(toolKey)}" aria-label="Inspect {Encode(tool.PackageId)}">Inspect</a>
+                        {(meta.HasUpdate ? ConfirmActions.Trigger(ConfirmActions.ToolUpdate(tool.PackageId, toolScopeStr, meta.LatestVersion), $"<button class=\"button sm\" type=\"submit\" aria-label=\"Update {Encode(tool.PackageId)}\">Update</button>", "tool-action tool-update-form") : "<span class=\"tool-update-slot\" aria-hidden=\"true\"></span>")}
+                        {ConfirmActions.Trigger(ConfirmActions.ToolUninstall(tool.PackageId, toolScopeStr), $"<button class=\"button remove sm\" type=\"submit\" aria-label=\"Remove {Encode(tool.PackageId)}\">Remove</button>", "tool-action tool-uninstall-form")}
+                        <div class="tool-more-wrap">
+                          <button type="button" class="button icon sm ghost tool-menu-trigger" hidden data-js-only data-tool-menu-btn aria-label="More actions for {Encode(tool.PackageId)}" aria-expanded="false">{Icon("more", "sm")}</button>
+                          <div class="tool-context-menu" hidden>
+                            <button type="button" class="tool-menu-item" data-inspect="{Encode(toolKey)}">{Icon("search", "sm")} <span>Inspect tool details</span></button>
+                            {(meta.HasUpdate ? $"<button type=\"button\" class=\"tool-menu-item\" data-tool-menu-update>{Icon("refresh", "sm")} <span>Update to {Encode(meta.LatestVersion ?? "latest")}</span></button>" : "")}
+                            <button type="button" class="tool-menu-item copy-btn" data-copy="{Encode(copyCmd)}">{Icon("copy", "sm")} <span>Copy command</span> <kbd>C</kbd></button>
+                            <a class="tool-menu-item" href="https://www.nuget.org/packages/{Encode(tool.PackageId)}" target="_blank" rel="noopener">{Icon("external", "sm")} <span>Open on NuGet.org</span></a>
+                            <button type="button" class="tool-menu-item copy-btn" data-copy="{Encode(cliEquiv)}">{Icon("terminal", "sm")} <span>Copy CLI update command</span></button>
+                            <hr>
+                            <button type="button" class="tool-menu-item danger" data-tool-menu-uninstall>{Icon("trash", "sm")} <span>Remove tool…</span></button>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  """;
+            }))}}</tbody>
           </table>
+          <div class="empty-state client-tools-empty" data-tools-empty hidden><h3>No matching tools</h3><p class="muted">No tools match your filter.</p></div>
         </div>
         """;
 
+    private static string RenderToolDrawer(DotnetTool[] tools, DotnetTool? selected, bool local, bool localOwned, ToolsViewOptions options)
+    {
+        var templates = string.Concat(tools.Select(tool =>
+        {
+            var isToolLocal = local || tool.Manifest is not null;
+            var key = $"{(isToolLocal ? "local" : "global")}:{tool.PackageId}";
+            return $"<template data-drawer-content=\"{Encode(key)}\">{RenderToolDrawerContent(tool, local, localOwned, options)}</template>";
+        }));
+        return $"""
+            <aside id="tool-drawer" class="detail-drawer tool-detail-drawer" {(selected is null ? "hidden" : "")} aria-label="Tool details">{(selected is null ? "" : RenderToolDrawerContent(selected, local, localOwned, options))}</aside>
+            {templates}
+            """;
+    }
+
+    private static string RenderToolDrawerContent(DotnetTool tool, bool local, bool localOwned, ToolsViewOptions options)
+    {
+        var isToolLocal = local || tool.Manifest is not null;
+        var scope = isToolLocal ? "local" : "global";
+        var monogram = GetMonogram(tool.PackageId);
+        var colorIdx = GetColorIndex(tool.PackageId);
+        var meta = ToolMetadataCatalog.Resolve(tool.PackageId, tool.Version, isToolLocal, tool.Manifest);
+        var logoHtml = ToolMetadataCatalog.RenderLogo(meta, colorIdx, monogram, "drawer-logo-lg");
+        var scopeLabel = isToolLocal
+            ? (localOwned ? "Local workspace manifest" : "Inherited workspace manifest")
+            : "Global user tool (~/.dotnet/tools)";
+        var eyebrow = isToolLocal ? "Local workspace tool" : "Global .NET tool";
+        var updateCmd = $"dotnet tool update --{scope} \\\n  {tool.PackageId}";
+        var uninstallCmd = $"dotnet tool uninstall --{scope} \\\n  {tool.PackageId}";
+        var nugetUrl = $"https://www.nuget.org/packages/{Encode(tool.PackageId)}";
+
+        var commandsHtml = string.Concat(tool.Commands.Select(cmd =>
+        {
+            var invoke = isToolLocal ? $"dotnet {cmd}" : cmd;
+            return $"""
+                <div class="drawer-code-box tool-drawer-cmd-item">
+                  <code>{Encode(invoke)}</code>
+                  <button class="button icon ghost copy-btn" data-copy="{Encode(invoke)}" type="button" title="Copy command" aria-label="Copy command {Encode(invoke)}">{Icon("clipboard")}</button>
+                </div>
+                """;
+        }));
+
+        var tagsHtml = string.Concat(meta.Tags.Select(t => $"<span class=\"tool-tag-pill\">{Encode(t)}</span>"));
+        var closeHref = $"/tools?scope={Uri.EscapeDataString(options.Scope)}";
+
+        return $"""
+              <div class="drawer-header">
+                <div class="drawer-eyebrow-row">
+                  <span>{eyebrow}</span>
+                  <a id="tool-drawer-close" data-drawer-close class="button icon ghost drawer-close-btn" href="{closeHref}" aria-label="Close tool details">{Icon("x", "sm")}</a>
+                </div>
+                <div class="tool-drawer-hero">
+                  <div>{logoHtml}</div>
+                  <div class="tool-drawer-hero-text">
+                    <h3 id="tool-drawer-title" class="drawer-title">{Encode(tool.PackageId)}</h3>
+                    <div class="tool-drawer-badges">
+                      <span class="v-current">{Encode(tool.Version)}</span>
+                      {(meta.IsVerified ? $"<span class=\"tool-verified\">{Icon("check", "xs")} Verified</span>" : "")}
+                      {(meta.HasUpdate && !string.IsNullOrEmpty(meta.LatestVersion) ? $"<span class=\"badge warn sm\">{Encode(meta.LatestVersion)} available</span>" : "")}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="drawer-body">
+                <div class="tool-drawer-about">
+                  <p class="tool-drawer-desc">{Encode(meta.FullDescription)}</p>
+                  {(tagsHtml.Length > 0 ? $"<div class=\"tool-drawer-tags\">{tagsHtml}</div>" : "")}
+                </div>
+
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">Exposed commands</h4>
+                  <div class="tool-drawer-cmd-list">{commandsHtml}</div>
+                </div>
+
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">Package &amp; installation</h4>
+                  <dl class="drawer-dl">
+                    <dt>Package ID</dt><dd><code>{Encode(tool.PackageId)}</code></dd>
+                    <dt>Version</dt><dd><code>{Encode(tool.Version)}</code>{(meta.HasUpdate && !string.IsNullOrEmpty(meta.LatestVersion) ? $" <span class=\"muted text-xs\">(latest: <code>{Encode(meta.LatestVersion)}</code>)</span>" : "")}</dd>
+                    {(string.IsNullOrEmpty(meta.DownloadsFullDisplay) ? "" : $"<dt>Downloads</dt><dd id=\"tool-drawer-downloads\">{Encode(meta.DownloadsFullDisplay)}</dd>")}
+                    <dt>Author</dt><dd>{Encode(meta.Authors)}</dd>
+                    <dt>Publisher</dt><dd id="tool-drawer-verified">{(meta.IsVerified ? "Verified prefix on NuGet.org" : "Standard NuGet package")}</dd>
+                    <dt>License</dt><dd>{Encode(meta.License)}</dd>
+                    <dt>Scope</dt><dd>{Encode(scopeLabel)}</dd>
+                    <dt>Project</dt><dd><a href="{Encode(meta.ProjectUrl)}" target="_blank" rel="noopener">{Encode(ShortUrlDisplay(meta.ProjectUrl))} {Icon("external", "xs")}</a></dd>
+                  </dl>
+                </div>
+
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">{(isToolLocal ? "Manifest file" : "Package store location")}</h4>
+                  <div class="drawer-code-box">
+                    <code class="drawer-path">{Encode(meta.StorePath)}</code>
+                    <button class="button icon ghost copy-btn" data-copy="{Encode(meta.StorePath)}" type="button" title="Copy path" aria-label="Copy path">{Icon("clipboard")}</button>
+                  </div>
+                </div>
+
+                {(meta.HasUpdate ? $"""
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">Update command</h4>
+                  <div class="drawer-command-box">
+                    <span class="cmd-prompt">$</span>
+                    <code id="tool-drawer-update-cmd">{Encode(updateCmd)}</code>
+                    <button class="button icon ghost copy-btn" data-copy="{Encode(updateCmd)}" type="button" title="Copy update command" aria-label="Copy update command">{Icon("clipboard")}</button>
+                  </div>
+                </div>
+                """ : "")}
+
+                <div class="drawer-section">
+                  <h4 class="drawer-section-title">Remove command</h4>
+                  <div class="drawer-command-box">
+                    <span class="cmd-prompt">$</span>
+                    <code id="tool-drawer-uninstall-cmd">{Encode(uninstallCmd)}</code>
+                    <button class="button icon ghost copy-btn" data-copy="{Encode(uninstallCmd)}" type="button" title="Copy remove command" aria-label="Copy remove command">{Icon("clipboard")}</button>
+                  </div>
+                </div>
+              </div>
+              <div class="drawer-footer">
+                <a class="button ghost" href="{nugetUrl}" target="_blank" rel="noopener">{Icon("external", "xs")} NuGet.org</a>
+                <span class="spacer"></span>
+                {(meta.HasUpdate ? ConfirmActions.Trigger(ConfirmActions.ToolUpdate(tool.PackageId, scope, meta.LatestVersion), $"<button class=\"button primary\" type=\"submit\">{Icon("refresh", "xs")} Update to {Encode(meta.LatestVersion ?? "latest")}</button>") : "")}
+                {ConfirmActions.Trigger(ConfirmActions.ToolUninstall(tool.PackageId, scope), $"<button class=\"button remove drawer-remove-btn\" type=\"submit\">{Icon("trash", "xs")} Remove</button>")}
+              </div>
+            """;
+    }
+
+    private static string ShortUrlDisplay(string url)
+    {
+        if (string.IsNullOrWhiteSpace(url)) return "NuGet.org";
+        var trimmed = url.Replace("https://", "", StringComparison.OrdinalIgnoreCase)
+            .Replace("http://", "", StringComparison.OrdinalIgnoreCase)
+            .TrimEnd('/');
+        return trimmed.Length <= 38 ? trimmed : trimmed[..35] + "…";
+    }
+
     private static string RenderLocalManifestAction(bool initialized, bool owned, ToolsViewOptions options)
     {
         if (!initialized)
-            return $$"""
-                <form method="post" action="/tools/init" class="manifest-action"><input type="hidden" name="scope" value="local"><input type="hidden" name="q" value="{{Encode(options.SearchQuery)}}"><button class="button" type="submit">Initialize local tools</button></form>
-                """;
+            return ConfirmActions.Trigger(ConfirmActions.ManifestInit(options.SearchQuery), "<button class=\"button\" type=\"submit\">Initialize local tools</button>", "manifest-action");
 
         if (!owned)
-            return $$"""
-                <span class="manifest-status muted">Using an inherited manifest</span>
-                """;
+            return "<span class=\"manifest-status muted\">Using an inherited manifest</span>";
 
-        return $$"""
-            <form method="post" action="/tools/remove-manifest" class="manifest-action"><input type="hidden" name="scope" value="local"><input type="hidden" name="q" value="{{Encode(options.SearchQuery)}}"><button class="button danger" type="submit">Remove local tools</button></form>
-            """;
+        return ConfirmActions.Trigger(ConfirmActions.ManifestRemove(options.SearchQuery), "<button class=\"button remove\" type=\"submit\">Remove local tools</button>", "manifest-action");
     }
 
     private static string RenderSearch(ToolsSnapshot snapshot, ToolsViewOptions options, ToolSearch search)
@@ -125,30 +385,166 @@ private static string RenderSearch(ToolsSnapshot snapshot, ToolsViewOptions opti
                     : $"<div class=\"search-results\"><h3>Search results for <strong>{Encode(options.SearchQuery)}</strong></h3><div class=\"search-result-list\">{string.Concat(search.Results.Select(result => RenderSearchResult(result, options.SearchQuery, localChoice)))}</div></div>";
 
         return $$"""
-            <section class="tool-search" aria-labelledby="tool-search-title">
-              <div class="tool-search-heading"><div class="tool-search-title"><span class="search-icon">{{Icon("search")}}</span><div><label id="tool-search-title" for="tool-search-input">Search .NET tools</label><p class="muted">Find packages by ID or description.</p></div></div><span class="search-source">NuGet</span></div>
+            <section class="tool-search" id="tool-search-section" data-has-query="{{(options.SearchQuery.Length > 0 ? "true" : "false")}}" aria-labelledby="tool-search-title">
+              <div class="tool-search-heading">
+                <div class="tool-search-title">
+                  <span class="search-icon">{{Icon("search")}}</span>
+                  <div>
+                    <label id="tool-search-title" for="tool-search-input">Search .NET tools</label>
+                    <p class="muted">Find packages on NuGet.org by ID or description.</p>
+                  </div>
+                </div>
+                <span class="search-source">NuGet.org</span>
+              </div>
               <form method="get" action="/tools" class="tool-search-form">
-                <div class="tool-search-controls"><input id="tool-search-input" name="q" value="{{Encode(options.SearchQuery)}}" placeholder="Package ID or description"><input type="hidden" name="scope" value="{{options.Scope}}"><button class="button primary" type="submit">Search</button></div>
+                <div class="tool-search-controls">
+                  <input id="tool-search-input" name="q" value="{{Encode(options.SearchQuery)}}" placeholder="Package ID or description (e.g. dotnet-ef, coverage)">
+                  <input type="hidden" name="scope" value="{{options.Scope}}">
+                  <button class="button primary" type="submit">Search</button>
+                </div>
               </form>
               {{results}}
             </section>
             """;
     }
 
-    private static string RenderSearchResult(ToolSearchResult result, string query, string localChoice) => $$"""
-        <article class="search-result">
-          <div><strong>{{Encode(result.PackageId)}}</strong><span class="muted">{{Encode(result.Version)}} · {{Encode(result.Authors)}}</span></div>
-          <div class="search-result-meta"><span>{{Encode(result.Downloads)}} downloads</span>{{(result.Verified ? "<span class=\"verified\">Verified</span>" : "")}}</div>
-          <form method="post" action="/tools/install" class="tool-install-actions"><input type="hidden" name="packageId" value="{{Encode(result.PackageId)}}"><input type="hidden" name="version" value="{{Encode(result.Version)}}"><input type="hidden" name="q" value="{{Encode(query)}}"><button class="button" type="submit" name="scope" value="global">Install globally</button>{{localChoice}}</form>
-        </article>
-        """;
+    private static string RenderSearchResult(ToolSearchResult result, string query, string localChoice)
+    {
+        var monogram = GetMonogram(result.PackageId);
+        var colorIdx = GetColorIndex(result.PackageId);
+        var meta = ToolMetadataCatalog.Resolve(result.PackageId, result.Version, false);
+        var logoHtml = ToolMetadataCatalog.RenderLogo(meta, colorIdx, monogram);
+        return $$"""
+            <article class="search-result">
+              <div class="search-result-main">
+                {{logoHtml}}
+                <div>
+                  <div class="search-result-title-row">
+                    <strong>{{Encode(result.PackageId)}}</strong>
+                    <code class="muted">{{Encode(result.Version)}}</code>
+                    {{(result.Verified ? "<span class=\"badge ok sm verified\">✓ Verified</span>" : "")}}
+                  </div>
+                  <p class="tool-desc muted text-xs">{{Encode(meta.Summary)}}</p>
+                  <div class="search-result-meta">
+                    <span>{{Encode(result.Authors)}}</span>
+                    <span>· {{Encode(result.Downloads)}} downloads</span>
+                  </div>
+                  <div class="tool-cli-preview"><span class="cli-label">CLI</span><code>dotnet tool install --global \&#10;  {{Encode(result.PackageId)}} \&#10;  --version {{Encode(result.Version)}}</code></div>
+                </div>
+              </div>
+              <form method="post" action="/tools/install" class="tool-install-actions">
+                <input type="hidden" name="packageId" value="{{Encode(result.PackageId)}}">
+                <input type="hidden" name="version" value="{{Encode(result.Version)}}">
+                <input type="hidden" name="q" value="{{Encode(query)}}">
+                <button class="button primary sm" type="submit" name="scope" value="global">Install globally</button>
+                {{localChoice}}
+              </form>
+            </article>
+            """;
+    }
+
+    private static string RenderAddToolSheet(ToolsSnapshot snapshot, ToolsViewOptions options, ToolSearch search)
+    {
+        var canInstallLocal = snapshot.LocalManifestInitialized;
+        var featured = new (string Id, string DefaultVer, string Cmd)[]
+        {
+            ("dotnet-coverage", "18.1.0", "dotnet-coverage"),
+            ("dotnet-reportgenerator-globaltool", "5.4.18", "reportgenerator"),
+            ("coverlet.console", "6.0.4", "coverlet"),
+            ("dotnet-ef", "10.0.0", "dotnet-ef"),
+            ("dotnet-outdated-tool", "4.6.8", "dotnet-outdated")
+        };
+
+        var itemsHtml = string.Concat(featured.Select(item =>
+        {
+            var meta = ToolMetadataCatalog.Resolve(item.Id, item.DefaultVer, false);
+            var ver = !string.IsNullOrWhiteSpace(meta.LatestVersion) ? meta.LatestVersion : item.DefaultVer;
+            var logoHtml = ToolMetadataCatalog.RenderLogo(meta);
+            return $"""
+                <div class="sheet-result-item" data-pkg-id="{Encode(item.Id)}">
+                  {logoHtml}
+                  <div class="sheet-result-body">
+                    <div class="sheet-result-top">
+                      <strong>{Encode(item.Id)}</strong>
+                      <code class="muted">{Encode(ver)}</code>
+                      {(meta.IsVerified ? "<span class=\"badge ok sm\">✓ Verified</span>" : "")}
+                    </div>
+                    <span class="muted text-xs">{Encode(meta.Summary)}</span>
+                    <div class="sheet-result-meta muted text-xs">
+                      <span>by {Encode(meta.Authors)}</span>
+                      {(string.IsNullOrWhiteSpace(meta.DownloadsDisplay) ? "" : $"<span>{Encode(meta.DownloadsDisplay)} downloads</span>")}
+                      <span><code>{Encode(item.Cmd)}</code></span>
+                    </div>
+                  </div>
+                  {ConfirmActions.Trigger(ConfirmActions.ToolInstall(item.Id, ver, "global"), "<button type=\"submit\" class=\"button sm\">Install</button>")}
+                </div>
+                """;
+        }));
+
+        return $$"""
+            <dialog id="add-tool-dialog" class="add-tool-sheet" closedby="any" aria-labelledby="add-tool-sheet-title" data-can-local="{{canInstallLocal.ToString().ToLowerInvariant()}}">
+              <div class="sheet-inner">
+                <div class="sheet-head">
+                  <div class="sheet-title-group">
+                    <h2 id="add-tool-sheet-title">Add a .NET tool</h2>
+                    <span class="search-source">NuGet.org</span>
+                  </div>
+                  <button type="button" class="button icon ghost" id="close-add-tool-btn" aria-label="Close add tool panel">{{Icon("x", "sm")}}</button>
+                </div>
+
+                <div class="sheet-controls">
+                  <label class="search-field wide" for="sheet-search-input">
+                    {{Icon("search", "xs")}}
+                    <input id="sheet-search-input" type="search" placeholder="Search NuGet.org, for example coverage or dotnet-ef" value="{{Encode(options.SearchQuery)}}" autocomplete="off">
+                  </label>
+
+                  <div class="filter-bar">
+                    <span class="muted">Install to</span>
+                    <div class="segmented" role="group" aria-label="Installation target">
+                      <button type="button" class="seg active" data-sheet-scope="global">Global · User</button>
+                      {{(canInstallLocal ? "<button type=\"button\" class=\"seg\" data-sheet-scope=\"local\">Local · Workspace</button>" : "<button type=\"button\" class=\"seg\" disabled title=\"A local manifest is required to install into this workspace\">Local · Workspace</button>")}}
+                    </div>
+                  </div>
+                </div>
+
+                <div id="sheet-results" class="sheet-results" data-body-global="{{Encode(ConfirmActions.ToolInstallBody("global"))}}" data-body-local="{{Encode(ConfirmActions.ToolInstallBody("local"))}}">
+                  {{itemsHtml}}
+                </div>
+
+              </div>
+            </dialog>
+            """;
+    }
+
+    internal static string GetMonogram(string packageId)
+    {
+        if (string.IsNullOrWhiteSpace(packageId)) return "TL";
+        var parts = packageId.Split(['.', '-', '_'], StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length >= 2)
+        {
+            var filtered = parts.Where(p => !string.Equals(p, "dotnet", StringComparison.OrdinalIgnoreCase) && !string.Equals(p, "tool", StringComparison.OrdinalIgnoreCase)).ToArray();
+            if (filtered.Length >= 2)
+                return $"{char.ToUpperInvariant(filtered[0][0])}{char.ToUpperInvariant(filtered[1][0])}";
+            if (filtered.Length == 1 && filtered[0].Length >= 2)
+                return filtered[0][..2].ToUpperInvariant();
+        }
+        return packageId.Length >= 2 ? packageId[..2].ToUpperInvariant() : packageId.ToUpperInvariant();
+    }
+
+    internal static int GetColorIndex(string packageId)
+    {
+        var hash = 0;
+        foreach (var ch in packageId) hash = (hash * 31) + char.ToLowerInvariant(ch);
+        return Math.Abs(hash) % 5;
+    }
 
     private static string RenderNotice(string notice) => notice switch
     {
-        "installed" => "<div class=\"action-notice\" role=\"status\">Tool installed successfully.</div>",
-        "uninstalled" => "<div class=\"action-notice\" role=\"status\">Tool uninstalled successfully.</div>",
-        "initialized" => "<div class=\"action-notice\" role=\"status\">Local tools are now initialized in this working directory.</div>",
-        "removed" => "<div class=\"action-notice\" role=\"status\">The local tool manifest was removed. Cached packages were left untouched.</div>",
+        "installed" => SuccessToast("Tool installed."),
+        "updated" => SuccessToast("Tool updated."),
+        "uninstalled" => SuccessToast("Tool removed."),
+        "initialized" => SuccessToast("Local tools are initialized in this workspace."),
+        "removed" => SuccessToast("Local manifest removed. Cached packages were left untouched."),
         "failed" => "<div class=\"action-notice error-state\" role=\"alert\">The requested tool action failed. Check the SDK and package sources, then try again.</div>",
         _ => ""
     };
diff --git a/tests/DotnetCockpit.Tests/BatchRemovalTests.cs b/tests/DotnetCockpit.Tests/BatchRemovalTests.cs
new file mode 100644
index 0000000..93dfce9
--- /dev/null
+++ b/tests/DotnetCockpit.Tests/BatchRemovalTests.cs
@@ -0,0 +1,60 @@
+using System.Diagnostics;
+using DotnetCockpit.Installation;
+using DotnetCockpit.Setup;
+using Xunit;
+
+namespace DotnetCockpit.Tests;
+
+public sealed class BatchRemovalTests
+{
+    [Fact]
+    public void BuildsOneCommandForAllRemovalsAndQuotesEveryValue()
+    {
+        var command = DotnetUninstallToolService.BuildBatchRemovalCommand("/opt/it's/tool", [("7.0.408", "--sdk"), ("7.0.18", "--aspnet-runtime")]);
+
+        Assert.Contains("'/opt/it'\\''s/tool' 'remove' '7.0.408' '--sdk' '--yes' || status=1", command);
+        Assert.Contains("'7.0.18' '--aspnet-runtime'", command);
+        Assert.EndsWith("exit $status", command);
+    }
+
+    [Fact]
+    public async Task AttemptsEveryItemAndReportsAFailureAtTheEnd()
+    {
+        if (OperatingSystem.IsWindows()) return;
+
+        var directory = Directory.CreateTempSubdirectory("cockpit-batch-");
+        try
+        {
+            var log = Path.Combine(directory.FullName, "log");
+            var tool = Path.Combine(directory.FullName, "tool");
+            await File.WriteAllTextAsync(tool, $"#!/bin/sh\necho \"$2\" >> '{log}'\n[ \"$2\" != bad ]\n");
+            File.SetUnixFileMode(tool, UnixFileMode.UserRead | UnixFileMode.UserWrite | UnixFileMode.UserExecute);
+
+            var command = DotnetUninstallToolService.BuildBatchRemovalCommand(tool, [("first", "--sdk"), ("bad", "--sdk"), ("last", "--runtime")]);
+            using var process = Process.Start(new ProcessStartInfo("/bin/sh") { ArgumentList = { "-c", command } })!;
+            await process.WaitForExitAsync();
+
+            Assert.Equal(1, process.ExitCode);
+            Assert.Equal(["first", "bad", "last"], await File.ReadAllLinesAsync(log));
+        }
+        finally
+        {
+            directory.Delete(recursive: true);
+        }
+    }
+
+    [Fact]
+    public void TheShownCommandNamesEveryFrameworkOfARuntime()
+    {
+        var snapshot = InstallationSnapshot.Create("ready", "/opt/dotnet/dotnet", runtimes:
+        [
+            new RuntimeInstallation("Microsoft.NETCore.App", "7.0.18", "/shared/core") { CanRemove = true },
+            new RuntimeInstallation("Microsoft.AspNetCore.App", "7.0.18", "/shared/asp") { CanRemove = true },
+        ]);
+
+        var row = Assert.Single(InstallationPage.BuildRows(snapshot, null, new(2026, 11, 4)));
+
+        Assert.Contains("--runtime", row.EquivalentCommand);
+        Assert.Contains("--aspnet-runtime", row.EquivalentCommand);
+    }
+}
diff --git a/tests/DotnetCockpit.Tests/ConfirmActionsTests.cs b/tests/DotnetCockpit.Tests/ConfirmActionsTests.cs
new file mode 100644
index 0000000..3c070df
--- /dev/null
+++ b/tests/DotnetCockpit.Tests/ConfirmActionsTests.cs
@@ -0,0 +1,75 @@
+using Xunit;
+
+namespace DotnetCockpit.Tests;
+
+public sealed class ConfirmActionsTests
+{
+    [Fact]
+    public void ToolRemovalAsksFirstAndShowsTheCommand()
+    {
+        var spec = ConfirmActions.ToolUninstall("dotnet-ef", "global");
+        var html = ConfirmActions.Trigger(spec, "<button type=\"submit\">Remove</button>");
+
+        Assert.Contains("method=\"get\" action=\"/confirm\"", html);
+        Assert.Contains("data-confirm-post=\"/tools/uninstall\"", html);
+        Assert.Contains("dotnet tool uninstall --global dotnet-ef", html);
+        Assert.DoesNotContain("method=\"post\"", html);
+    }
+
+    [Fact]
+    public void TheConfirmPagePostsTheSameFieldsWithoutJavaScript()
+    {
+        var html = ConfirmActions.RenderPage(ConfirmActions.ToolUninstall("dotnet-ef", "local"), 0, null, null);
+
+        Assert.Contains("method=\"post\" action=\"/tools/uninstall\"", html);
+        Assert.Contains("name=\"packageId\" value=\"dotnet-ef\"", html);
+        Assert.Contains("name=\"scope\" value=\"local\"", html);
+        Assert.Contains("href=\"/tools?scope=local\"", html);
+    }
+
+    [Fact]
+    public void EscapesUntrustedValues()
+    {
+        var html = ConfirmActions.Trigger(ConfirmActions.ToolUninstall("\"><script>", "global"), "");
+        Assert.DoesNotContain("<script>", html);
+    }
+
+    [Theory]
+    [InlineData("github", "github")]
+    [InlineData("codex", "codex")]
+    [InlineData("<script>", "cockpit")]
+    [InlineData(null, "cockpit")]
+    public void AcceptsOnlyKnownPalettes(string? value, string expected) =>
+        Assert.Equal(expected, SettingsStore.NormalizePalette(value));
+
+    [Fact]
+    public void ASettingsFileFromBeforePalettesKeepsItsChoicesAndGetsTheDefault()
+    {
+        var directory = Directory.CreateTempSubdirectory("cockpit-settings-");
+        try
+        {
+            File.WriteAllText(Path.Combine(directory.FullName, "settings.json"), "{\"theme\":\"dark\",\"preflightOnLaunch\":true}");
+            var settings = new SettingsStore(directory.FullName).Current;
+            Assert.Equal("dark", settings.Theme);
+            Assert.True(settings.PreflightOnLaunch);
+            Assert.Equal("cockpit", settings.Palette);
+        }
+        finally
+        {
+            directory.Delete(recursive: true);
+        }
+    }
+
+    [Theory]
+    [InlineData("-1\n", "graphite")]
+    [InlineData("0", "red")]
+    [InlineData("1", "orange")]
+    [InlineData("2", "yellow")]
+    [InlineData("3", "green")]
+    [InlineData("4", "blue")]
+    [InlineData("5", "purple")]
+    [InlineData("6", "pink")]
+    [InlineData(null, "blue")]
+    public void MapsTheMacOsAccentSetting(string? value, string expected) =>
+        Assert.Equal(expected, SystemAccent.Parse(value));
+}
diff --git a/tests/DotnetCockpit.Tests/InstallationPageTests.cs b/tests/DotnetCockpit.Tests/InstallationPageTests.cs
index 43070fc..406a25d 100644
--- a/tests/DotnetCockpit.Tests/InstallationPageTests.cs
+++ b/tests/DotnetCockpit.Tests/InstallationPageTests.cs
@@ -19,7 +19,7 @@ public void RendersInventoryAndVersionDirectoriesInTheInitialHtml()
         Assert.Equal(4, Regex.Matches(html, "<tr data-kind=").Count);
         Assert.Contains(snapshot.Sdks[0].InstallationPath, html);
         Assert.Contains(snapshot.Runtimes[0].InstallationPath, html);
-        Assert.Contains("10.0.5</fluent-badge>", html);
+        Assert.Contains("data-full-version>10.0.5</span>", html);
         Assert.DoesNotContain("id=\"root\"", html);
     }
 
@@ -29,7 +29,7 @@ public void FiltersByTypeAndAllSearchTermsOnTheServer()
         var html = InstallationPage.Render(Snapshot(), new(Query: "asp.net 10.0.7", Kind: "runtimes"));
         Assert.Single(Regex.Matches(html, "<tr data-kind="));
         Assert.Contains("ASP.NET Core Runtime</strong>", html);
-        Assert.DoesNotContain("10.0.5</fluent-badge>", html);
+        Assert.DoesNotContain("data-full-version>10.0.5</span>", html);
         Assert.Contains("1 of 4 installations shown", html);
     }
 
@@ -43,7 +43,7 @@ public void GroupsRuntimeFrameworksWithTheSameVersionInOneCard()
 
         var html = InstallationPage.Render(snapshot, new());
 
-        Assert.Single(Regex.Matches(html, "<tr data-kind=\"runtime\">"));
+        Assert.Single(Regex.Matches(html, "<tr data-kind=\"runtime\""));
         Assert.Contains("Microsoft.NETCore.App", html);
         Assert.Contains("Microsoft.AspNetCore.App", html);
         Assert.Contains(Path.Combine("/opt/dotnet/shared/Microsoft.NETCore.App", "10.0.7"), html);
@@ -60,11 +60,11 @@ public void RendersRemoveActionOnlyForUninstallableInstallations()
 
         var html = InstallationPage.Render(snapshot, new(Kind: "sdks"));
 
-        Assert.Contains("<th scope=\"col\">Actions</th>", html);
-        Assert.Contains("action=\"/installation/remove\"", html);
+        Assert.Contains(">Actions</th>", html);
+        Assert.Contains("data-confirm-post=\"/installation/remove\"", html);
         Assert.Contains("name=\"kind\" value=\"sdk\"", html);
         Assert.Contains("name=\"version\" value=\"10.0.9\"", html);
-        Assert.DoesNotContain("action=\"/installation/remove\"", InstallationPage.Render(Snapshot(), new()));
+        Assert.DoesNotContain("data-confirm-post=\"/installation/remove\"", InstallationPage.Render(Snapshot(), new()));
     }
 
     [Fact]
@@ -76,8 +76,8 @@ [new SdkInstallation("10.0.403", "") { CanRemove = true }],
 
         var html = InstallationPage.Render(snapshot, new());
 
-        Assert.Contains("10.0.403</fluent-badge>", html);
-        Assert.Contains("10.0.14</fluent-badge>", html);
+        Assert.Contains("data-full-version>10.0.403</span>", html);
+        Assert.Contains("data-full-version>10.0.14</span>", html);
         Assert.Contains("name=\"version\" value=\"10.0.403\"", html);
         Assert.DoesNotContain("/10.0.403", html);
         Assert.DoesNotContain("/10.0.14", html);
@@ -89,8 +89,8 @@ public void SortsVersionsNumericallyInBothDirections()
     {
         var descending = InstallationPage.Render(Snapshot(), new());
         var ascending = InstallationPage.Render(Snapshot(), new(Ascending: true));
-        Assert.True(descending.IndexOf("10.0.10</fluent-badge>", StringComparison.Ordinal) < descending.IndexOf("10.0.9</fluent-badge>", StringComparison.Ordinal));
-        Assert.True(ascending.IndexOf("10.0.10</fluent-badge>", StringComparison.Ordinal) > ascending.IndexOf("10.0.9</fluent-badge>", StringComparison.Ordinal));
+        Assert.True(descending.IndexOf("data-full-version>10.0.10</span>", StringComparison.Ordinal) < descending.IndexOf("data-full-version>10.0.9</span>", StringComparison.Ordinal));
+        Assert.True(ascending.IndexOf("data-full-version>10.0.10</span>", StringComparison.Ordinal) > ascending.IndexOf("data-full-version>10.0.9</span>", StringComparison.Ordinal));
     }
 
     [Fact]
diff --git a/tests/DotnetCockpit.Tests/PageFixtureTests.cs b/tests/DotnetCockpit.Tests/PageFixtureTests.cs
new file mode 100644
index 0000000..d9251ea
--- /dev/null
+++ b/tests/DotnetCockpit.Tests/PageFixtureTests.cs
@@ -0,0 +1,98 @@
+using DotnetCockpit.Installation;
+using DotnetCockpit.SdkDownloads;
+using DotnetCockpit.Setup;
+using DotnetCockpit.Tools;
+using Xunit;
+
+namespace DotnetCockpit.Tests;
+
+/// <summary>
+/// Renders the pages with fixed data and a fixed date for the screenshot tests. It writes files only when
+/// DOTNET_COCKPIT_FIXTURES names a directory, which `npm run test:visual` does.
+/// </summary>
+public sealed class PageFixtureTests
+{
+    private static readonly DateOnly Today = new(2026, 11, 4);
+
+    private static readonly SdkDownloadSnapshot Catalog = new("ready",
+    [
+        Download("SDK", "10.0.403", "10.0.14", "10.0", "LTS", "ACTIVE", "2028-11-14"),
+        Download(".NET Runtime", "10.0.14", null, "10.0", "LTS", "ACTIVE", "2028-11-14"),
+        Download("SDK", "9.0.320", "9.0.22", "9.0", "STS", "MAINTENANCE", "2026-11-10"),
+        Download(".NET Runtime", "9.0.22", null, "9.0", "STS", "MAINTENANCE", "2026-11-10"),
+        Download("SDK", "11.0.100-rc.3", "11.0.0-rc.3", "11.0", "STS", "GO-LIVE", null),
+        Download(".NET Runtime", "11.0.0-rc.3", null, "11.0", "STS", "GO-LIVE", null),
+    ], Channels:
+    [
+        new("11.0", "STS", "GO-LIVE", null, new(2026, 2, 10), null),
+        new("10.0", "LTS", "ACTIVE", new(2028, 11, 14), new(2025, 2, 11), new(2025, 11, 11)),
+        new("9.0", "STS", "MAINTENANCE", new(2026, 11, 10), new(2024, 2, 13), new(2024, 12, 3)),
+        new("8.0", "LTS", "MAINTENANCE", new(2026, 11, 10), new(2023, 2, 21), new(2023, 11, 14)),
+        new("7.0", "STS", "EOL", new(2024, 5, 14), new(2022, 2, 17), new(2022, 11, 8)),
+    ]);
+
+    private static InstallationSnapshot Mixed() => InstallationSnapshot.Create("ready", "/usr/local/share/dotnet/dotnet",
+    [
+        new SdkInstallation("11.0.100-preview.7.26381.103", "/usr/local/share/dotnet/sdk") { CanRemove = true },
+        new SdkInstallation("10.0.403", "/usr/local/share/dotnet/sdk") { CanRemove = true },
+        new SdkInstallation("9.0.320", "/usr/local/share/dotnet/sdk") { CanRemove = true },
+        new SdkInstallation("7.0.408", "/usr/local/share/dotnet/sdk") { CanRemove = true },
+    ],
+    [
+        new RuntimeInstallation("Microsoft.NETCore.App", "10.0.14", "/usr/local/share/dotnet/shared/Microsoft.NETCore.App") { CanRemove = true },
+        new RuntimeInstallation("Microsoft.AspNetCore.App", "10.0.14", "/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App") { CanRemove = true },
+        new RuntimeInstallation("Microsoft.NETCore.App", "7.0.18", "/usr/local/share/dotnet/shared/Microsoft.NETCore.App") { CanRemove = true },
+    ]);
+
+    private static InstallationSnapshot Healthy() => InstallationSnapshot.Create("ready", "/usr/local/share/dotnet/dotnet",
+        [new SdkInstallation("10.0.403", "/usr/local/share/dotnet/sdk") { CanRemove = true }],
+        [new RuntimeInstallation("Microsoft.NETCore.App", "10.0.14", "/usr/local/share/dotnet/shared/Microsoft.NETCore.App") { CanRemove = true }]);
+
+    private static ToolsSnapshot Tools(bool empty = false) => new("ready", "/Users/dev/project",
+        new(empty ? [] :
+        [
+            new DotnetTool("fixture.formatter", "1.2.0", ["fixture-format"], null),
+            new DotnetTool("fixture.analyzer", "4.0.1", ["fixture-analyze"], null),
+        ]),
+        new([]),
+        LocalManifestInitialized: false);
+
+    private static readonly SetupSnapshot Setup = new("ready", "macOS", "Arm64",
+        new(true, "/usr/local/bin/dotnet-core-uninstall", "global", "1.7.661902"), "/usr/local/bin",
+        LatestVersion: "1.7.661902",
+        LatestReleaseUrl: "https://github.com/dotnet/cli-lab/releases/tag/1.7.661902",
+        AvailableReleases: [new SetupRelease("1.7.661902", "https://github.com/dotnet/cli-lab/releases/tag/1.7.661902", "2026-01-08T18:51:08Z", "dotnet-core-uninstall-osx-arm64.tar.gz")]);
+
+    private static readonly ActiveSdk Active = new("10.0.403", null);
+
+    [Fact]
+    public void WritesFixturePagesWhenRequested()
+    {
+        var directory = Environment.GetEnvironmentVariable("DOTNET_COCKPIT_FIXTURES");
+        var empty = InstallationSnapshot.Create("notFound", null);
+        var pages = new Dictionary<string, string>
+        {
+            ["mixed-overview"] = OverviewPage.Render(Mixed(), Tools(), Setup, Catalog, Active, Today),
+            ["mixed-versions"] = InstallationPage.Render(Mixed(), Catalog, new(), Today),
+            ["mixed-tools"] = ToolsPage.Render(Tools(), new()),
+            ["mixed-settings"] = SetupPage.Render(Setup, Catalog, Mixed(), new()),
+            ["mixed-preflight"] = PreflightPage.Render(Mixed(), Tools(), Setup, Catalog, false, Today),
+            ["healthy-overview"] = OverviewPage.Render(Healthy(), Tools(), Setup, Catalog, Active, Today),
+            ["healthy-versions"] = InstallationPage.Render(Healthy(), Catalog, new(), Today),
+            ["empty-overview"] = OverviewPage.Render(empty, ToolsSnapshot.Empty("notFound", "/Users/dev/project"), Setup, new("error", [], "offline"), null, Today),
+            ["empty-versions"] = InstallationPage.Render(empty, new("error", [], "offline"), new(), Today),
+            ["empty-tools"] = ToolsPage.Render(Tools(empty: true), new()),
+        };
+
+        Assert.All(pages.Values, html => Assert.StartsWith("<!doctype html>", html.TrimStart()));
+        if (string.IsNullOrWhiteSpace(directory)) return;
+        Directory.CreateDirectory(directory);
+        foreach (var (name, html) in pages) File.WriteAllText(Path.Combine(directory, $"{name}.html"), html);
+    }
+
+    private static SdkDownload Download(string product, string version, string? runtime, string channel, string type, string phase, string? end) =>
+        new(product, version, version, runtime, channel, type, phase, end, "2026-10-25",
+            [new("CVE-2026-0001", "https://msrc.microsoft.com/update-guide/vulnerability/CVE-2026-0001")],
+            $"https://builds.dotnet.microsoft.com/dotnet/{(product == "SDK" ? "Sdk" : "Runtime")}/{version}/dotnet-{(product == "SDK" ? "sdk" : "runtime")}-{version}-osx-arm64.pkg",
+            "0f1e2d3c4b5a69788796a5b4c3d2e1f00f1e2d3c4b5a69788796a5b4c3d2e1f00f1e2d3c4b5a69788796a5b4c3d2e1f00f1e2d3c4b5a69788796a5b4c3d2e1f0");
+}
diff --git a/tests/DotnetCockpit.Tests/SdkDownloadsSectionTests.cs b/tests/DotnetCockpit.Tests/SdkDownloadsSectionTests.cs
deleted file mode 100644
index 108f1b1..0000000
--- a/tests/DotnetCockpit.Tests/SdkDownloadsSectionTests.cs
+++ /dev/null
@@ -1,45 +0,0 @@
-using DotnetCockpit.Installation;
-using DotnetCockpit.SdkDownloads;
-using Xunit;
-
-namespace DotnetCockpit.Tests;
-
-public sealed class SdkDownloadsSectionTests
-{
-    [Fact]
-    public void RendersOfficialMacPackagesWithIntegrityAndSecurityDetails()
-    {
-        var downloads = new[]
-        {
-            Download("SDK", "10.0.100", "10.0.0", "ACTIVE", "LTS"),
-            Download("SDK", "10.0.100-preview.1", "10.0.0-preview.1", "ACTIVE", "LTS"),
-            Download(".NET Runtime", "10.0.0", null, "EOL", "STS")
-        };
-
-        var html = SdkDownloadsSection.Render(new SdkDownloadSnapshot("ready", downloads), InstallationSnapshot.Create("notFound", null), new());
-
-        Assert.Contains("Latest .NET SDK", html);
-        Assert.Contains("10.0.100", html);
-        Assert.Contains("Includes .NET Runtime <code>10.0.0</code>", html);
-        Assert.Contains("SHA-512", html);
-        Assert.Contains("CVE-2026-0001", html);
-        Assert.Contains("data-preview=\"true\"", html);
-        Assert.Contains("data-lifecycle=\"LTS\" hidden", html);
-        Assert.Contains("Official macOS .pkg packages", html);
-    }
-
-    [Fact]
-    public void ReportsAnUnavailableCatalogWithoutRenderingDownloads()
-    {
-        var html = SdkDownloadsSection.Render(new SdkDownloadSnapshot("error", [], "Timed out"), InstallationSnapshot.Create("notFound", null), new());
-
-        Assert.Contains("SDK downloads are unavailable", html);
-        Assert.Contains("Timed out", html);
-        Assert.DoesNotContain("Download .pkg", html);
-    }
-
-    private static SdkDownload Download(string product, string version, string? includedRuntimeVersion, string supportPhase, string releaseType) =>
-        new(product, version, version, includedRuntimeVersion, "10.0", releaseType, supportPhase, "2028-11-14", "2026-11-01",
-            [new("CVE-2026-0001", "https://msrc.microsoft.com/update-guide/vulnerability/CVE-2026-0001")],
-            "https://builds.dotnet.microsoft.com/dotnet/package.pkg", "abc123");
-}
diff --git a/tests/DotnetCockpit.Tests/SetupPageTests.cs b/tests/DotnetCockpit.Tests/SetupPageTests.cs
index 32c974b..09a7ac2 100644
--- a/tests/DotnetCockpit.Tests/SetupPageTests.cs
+++ b/tests/DotnetCockpit.Tests/SetupPageTests.cs
@@ -22,7 +22,7 @@ public void RendersInstallOptionsAndOfficialDocumentation()
         Assert.Contains("/usr/local/bin", html);
         Assert.Contains("Latest (1.7.661902)", html);
         Assert.Contains("name=\"version\"", html);
-        Assert.Contains("action=\"/setup/install\"", html);
+        Assert.Contains("data-confirm-post=\"/setup/install\"", html);
         Assert.Contains("dotnet/cli-lab/releases/tag/1.6.656206", html);
         Assert.DoesNotContain("Install for current user", html);
         Assert.Contains("https://learn.microsoft.com/en-us/dotnet/core/additional-tools/uninstall-tool-overview", html);
@@ -38,7 +38,6 @@ public void RendersInstalledPathAndDoesNotOfferDuplicateInstallActions()
             AvailableReleases: [new SetupRelease("1.7.661902", "https://github.com/dotnet/cli-lab/releases/tag/1.7.661902", null, "dotnet-core-uninstall-osx-arm64.tar.gz")]);
         var html = SetupPage.Render(snapshot, new());
 
-        Assert.DoesNotContain("<fluent-badge appearance=\"tint\" color=\"success\">Installed</fluent-badge>", html);
         Assert.Contains("/usr/local/bin/dotnet-core-uninstall", html);
         Assert.Contains("Installed version <code>1.7.661902</code>", html);
         Assert.Contains("Ready to list and remove .NET Installations", html);
@@ -47,10 +46,10 @@ public void RendersInstalledPathAndDoesNotOfferDuplicateInstallActions()
         Assert.Contains(">Remove</button>", html);
         Assert.Contains("setup-card-actions", html);
         Assert.DoesNotContain("setup-icon-button", html);
-        Assert.Contains("action=\"/setup/uninstall\"", html);
+        Assert.Contains("data-confirm-post=\"/setup/uninstall\"", html);
         Assert.DoesNotContain("Uninstall globally", html);
-        Assert.DoesNotContain("action=\"/setup/update\"", html);
-        Assert.DoesNotContain("action=\"/setup/install\"", html);
+        Assert.DoesNotContain("data-confirm-post=\"/setup/update\"", html);
+        Assert.DoesNotContain("data-confirm-post=\"/setup/install\"", html);
 
         var headerActionsIndex = html.IndexOf("setup-card-actions", StringComparison.Ordinal);
         var installedDetailsIndex = html.IndexOf("setup-installed", StringComparison.Ordinal);
@@ -68,7 +67,7 @@ public void OffersAnUpdateWhenTheOfficialReleaseIsNewer()
         var html = SetupPage.Render(snapshot, new());
 
         Assert.Contains("Latest official release <a href=\"https://github.com/dotnet/cli-lab/releases/tag/1.7.661902\"><code>1.7.661902</code>", html);
-        Assert.Contains("action=\"/setup/update\"", html);
+        Assert.Contains("data-confirm-post=\"/setup/update\"", html);
         Assert.Contains("Update to 1.7.661902", html);
     }
 
@@ -81,7 +80,7 @@ public void DoesNotOfferAutomaticRemovalForAnUnmanagedPathInstallation()
             AvailableReleases: [new SetupRelease("1.7.661902", "https://github.com/dotnet/cli-lab/releases/tag/1.7.661902", null, "dotnet-core-uninstall-osx-arm64.tar.gz")]);
         var html = SetupPage.Render(snapshot, new());
 
-        Assert.DoesNotContain("action=\"/setup/uninstall\"", html);
+        Assert.DoesNotContain("data-confirm-post=\"/setup/uninstall\"", html);
         Assert.Contains("must be removed manually", html);
     }
 
diff --git a/tests/DotnetCockpit.Tests/SupportLifecycleTests.cs b/tests/DotnetCockpit.Tests/SupportLifecycleTests.cs
new file mode 100644
index 0000000..76e3229
--- /dev/null
+++ b/tests/DotnetCockpit.Tests/SupportLifecycleTests.cs
@@ -0,0 +1,106 @@
+using DotnetCockpit.Installation;
+using DotnetCockpit.SdkDownloads;
+using Xunit;
+
+namespace DotnetCockpit.Tests;
+
+public sealed class SupportLifecycleTests
+{
+    private static readonly DateOnly Today = new(2026, 11, 4);
+
+    private static SdkDownloadSnapshot Catalog() => new("ready", [], Channels:
+    [
+        new("11.0", "STS", "GO-LIVE", null, new(2026, 2, 10), null),
+        new("10.0", "LTS", "ACTIVE", new(2028, 11, 14), new(2025, 2, 11), new(2025, 11, 11)),
+        new("9.0", "STS", "MAINTENANCE", new(2026, 11, 10), new(2024, 2, 13), new(2024, 12, 3)),
+        new("7.0", "STS", "EOL", new(2024, 5, 14), new(2022, 2, 17), new(2022, 11, 8)),
+    ]);
+
+    [Theory]
+    [InlineData("10.0.403", nameof(SupportState.Supported), "Supported until Nov 14, 2028")]
+    [InlineData("9.0.320", nameof(SupportState.EndingSoon), "Support ends in 6 days (Nov 10, 2026)")]
+    [InlineData("7.0.408", nameof(SupportState.EndOfLife), "Out of support since May 14, 2024")]
+    [InlineData("11.0.100-rc.3.26501.103", nameof(SupportState.Preview), "Preview release")]
+    [InlineData("12.0.100", nameof(SupportState.Unknown), "Support status unavailable")]
+    public void DerivesTheStateFromCatalogDatesAndTheCurrentDate(string version, string state, string label)
+    {
+        var status = SupportLifecycle.For(Catalog(), version, Today);
+        Assert.Equal(state, status.State.ToString());
+        Assert.Equal(label, status.Label);
+    }
+
+    [Fact]
+    public void TheRemainingTimeFollowsTheCurrentDateAndEndsInEndOfLife()
+    {
+        Assert.Equal("Support ends tomorrow (Nov 10, 2026)", SupportLifecycle.For(Catalog(), "9.0.320", new(2026, 11, 9)).Label);
+        Assert.Equal("Support ends today (Nov 10, 2026)", SupportLifecycle.For(Catalog(), "9.0.320", new(2026, 11, 10)).Label);
+        Assert.Equal(SupportState.EndOfLife, SupportLifecycle.For(Catalog(), "9.0.320", new(2026, 11, 11)).State);
+        Assert.Equal(SupportState.Supported, SupportLifecycle.For(Catalog(), "9.0.320", new(2026, 9, 1)).State);
+    }
+
+    [Fact]
+    public void AnUnavailableCatalogNeverClaimsASupportState()
+    {
+        Assert.Equal(SupportState.Unknown, SupportLifecycle.For(null, "7.0.408", Today).State);
+        Assert.Equal(SupportState.Unknown, SupportLifecycle.For(new("error", [], "offline"), "7.0.408", Today).State);
+    }
+
+    [Fact]
+    public void HealthCountsExactlyTheRecommendedActions()
+    {
+        var snapshot = InstallationSnapshot.Create("ready", "/opt/dotnet/dotnet",
+            [new("10.0.403", "/sdk"), new("9.0.320", "/sdk"), new("7.0.408", "/sdk")],
+            [new("Microsoft.NETCore.App", "7.0.18", "/shared")]);
+
+        var health = EnvironmentHealth.Evaluate(snapshot, Catalog(), Today);
+
+        Assert.Equal(2, health.Count);
+        Assert.Contains("out of support", health.Actions[0].Title);
+        Assert.Equal(".NET 9 support ends in 6 days", health.Actions[1].Title);
+        Assert.Contains(".NET 7 is out of support", health.Headline);
+        Assert.Contains(".NET 9 support ends in 6 days", health.Headline);
+    }
+
+    [Fact]
+    public void AHealthySystemHasNoActionsButAnOfflineCatalogIsNotCalledHealthy()
+    {
+        var snapshot = InstallationSnapshot.Create("ready", "/opt/dotnet/dotnet", [new("10.0.403", "/sdk")]);
+
+        var healthy = EnvironmentHealth.Evaluate(snapshot, Catalog(), Today);
+        var offline = EnvironmentHealth.Evaluate(snapshot, new("error", [], "offline"), Today);
+
+        Assert.Equal(0, healthy.Count);
+        Assert.True(healthy.SupportKnown);
+        Assert.Contains("supported and up to date", healthy.Headline);
+        Assert.False(offline.SupportKnown);
+        Assert.Contains("could not be checked", offline.Headline);
+    }
+
+    [Fact]
+    public void TheRingShowsTheActionListInProportionMostSevereFirst()
+    {
+        HealthAction Action(string severity) => new(severity, "", "", "", []);
+        var report = new HealthReport([Action("bad"), Action("bad"), Action("warn"), Action("info")], true, "");
+
+        Assert.Equal("conic-gradient(var(--bad) 0% 48.5%, transparent 48.5% 50%, var(--warn) 50% 73.5%, transparent 73.5% 75%, var(--info) 75% 98.5%, transparent 98.5% 100%)", report.RingGradient);
+        Assert.Equal("var(--ok)", new HealthReport([], true, "").RingGradient);
+        Assert.Equal("var(--line-strong)", new HealthReport([], false, "").RingGradient);
+    }
+
+    [Fact]
+    public void AFailedQueryIsNotReportedAsAMissingSdk()
+    {
+        var health = EnvironmentHealth.Evaluate(InstallationSnapshot.Create("error", null, error: "boom"), Catalog(), Today);
+        Assert.Equal(0, health.Count);
+        Assert.Contains("could not be read", health.Headline);
+    }
+
+    [Fact]
+    public void VersionsPageShowsTheComputedDateInsteadOfAFixedText()
+    {
+        var snapshot = InstallationSnapshot.Create("ready", "/opt/dotnet/dotnet", [new("9.0.320", "/sdk")]);
+        var html = InstallationPage.Render(snapshot, Catalog(), new(), Today);
+        Assert.Contains("Support ends in 6 days (Nov 10, 2026)", html);
+        Assert.DoesNotContain("Ends in 7 days", html);
+    }
+}
diff --git a/tests/DotnetCockpit.Tests/ToolsTests.cs b/tests/DotnetCockpit.Tests/ToolsTests.cs
index cac21d5..76ba490 100644
--- a/tests/DotnetCockpit.Tests/ToolsTests.cs
+++ b/tests/DotnetCockpit.Tests/ToolsTests.cs
@@ -105,10 +105,10 @@ public void RendersSearchInstallTargetsAndUninstallActions()
         var withoutManifestLocal = ToolsPage.Render(snapshot, new("local", "format"), search);
         Assert.DoesNotContain("Initialize local tools", withoutManifest);
         Assert.Contains("Initialize local tools", withoutManifestLocal);
-        Assert.Contains("action=\"/tools/init\"", withoutManifestLocal);
+        Assert.Contains("data-confirm-post=\"/tools/init\"", withoutManifestLocal);
         Assert.Contains("Install globally", withoutManifest);
         Assert.DoesNotContain("Install locally", withoutManifest);
-        Assert.Contains("action=\"/tools/uninstall\"", withoutManifest);
+        Assert.Contains("data-confirm-post=\"/tools/uninstall\"", withoutManifest);
 
         var initialized = snapshot with { LocalManifestInitialized = true };
         var withManifest = ToolsPage.Render(initialized, new("global", "format"), search);
@@ -122,7 +122,7 @@ public void OffersToRemoveOnlyAWorkspaceOwnedManifest()
             "/workspace/.config/dotnet-tools.json", true);
         var ownedHtml = ToolsPage.Render(owned, new("local"));
         Assert.Contains("Remove local tools", ownedHtml);
-        Assert.Contains("action=\"/tools/remove-manifest\"", ownedHtml);
+        Assert.Contains("data-confirm-post=\"/tools/remove-manifest\"", ownedHtml);
 
         var inherited = owned with { LocalManifestOwned = false, LocalManifestPath = "/workspace/../.config/dotnet-tools.json" };
         var inheritedHtml = ToolsPage.Render(inherited, new("local"));
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 43dceb5..169df80 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,16 +1,12 @@
 {
   "name": "dotnet-cockpit-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dotnet-cockpit-ui",
-      "version": "0.1.0",
-      "dependencies": {
-        "@fluentui/tokens": "1.0.0-alpha.24",
-        "@fluentui/web-components": "3.1.3"
-      },
+      "version": "0.2.0",
       "devDependencies": {
         "@playwright/test": "1.64.1",
         "esbuild": "0.28.2"
@@ -458,46 +454,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@fluentui/tokens": {
-      "version": "1.0.0-alpha.24",
-      "resolved": "https://registry.npmjs.org/@fluentui/tokens/-/tokens-1.0.0-alpha.24.tgz",
-      "integrity": "sha512-YrjGQfnxBR+9o8wXyTflON3Ohsv7OrZWYLVRU+7RaiFO1gcu36iDm3WjudlVmYuWRLDO0Gmxotm6RQNhbZuEQQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@swc/helpers": "^0.5.1"
-      }
-    },
-    "node_modules/@fluentui/web-components": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-3.1.3.tgz",
-      "integrity": "sha512-1jl4CHoFFSfevkr8l7F+dKNJzyMWBZqwQfB/khNZtwyY0rv87799mpDWSVu0QeiZAFEbqCtnAOnXWsxJ/kek+Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@fluentui/tokens": "^1.0.0-alpha.24",
-        "tslib": "^2.1.0"
-      },
-      "engines": {
-        "node": "^22.0.0 || ^24.0.0"
-      },
-      "peerDependencies": {
-        "@microsoft/fast-element": "^3.0.0",
-        "@microsoft/focusgroup-polyfill": "^1.5.0"
-      }
-    },
-    "node_modules/@microsoft/fast-element": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-3.1.2.tgz",
-      "integrity": "sha512-LmyiGq1zjszwgcqSkiOsZph+9NUZJqnmBhuqPDmqndWfyo0bMXKPTevQX9q3nEKCuIIFDMsGdPNGcQ1xoK7sGw==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@microsoft/focusgroup-polyfill": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/focusgroup-polyfill/-/focusgroup-polyfill-1.6.0.tgz",
-      "integrity": "sha512-SlJO8FKrdFdSEXtNTNPTlCeqyqbpyLf6suYHTK7G8WYXZf8/BWK0ucERiPgrUIpNewfQjV82BahSOW/p8YNJ1A==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@playwright/test": {
       "version": "1.64.1",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.64.1.tgz",
@@ -514,15 +470,6 @@
         "node": ">=20"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.23",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
-      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.28.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
@@ -593,12 +540,6 @@
       "engines": {
         "node": ">=20"
       }
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
     }
   }
 }
diff --git a/ui/package.json b/ui/package.json
index 4769948..de703dd 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,15 +1,13 @@
 {
   "name": "dotnet-cockpit-ui",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "build": "node build.mjs",
-    "test:browser": "playwright test"
-  },
-  "dependencies": {
-    "@fluentui/web-components": "3.1.3",
-    "@fluentui/tokens": "1.0.0-alpha.24"
+    "test:browser": "playwright test",
+    "test:visual": "node tests/visual/render-fixtures.mjs",
+    "test:visual:update": "node tests/visual/render-fixtures.mjs --update-snapshots=all"
   },
   "devDependencies": {
     "@playwright/test": "1.64.1",
diff --git a/ui/playwright.config.mjs b/ui/playwright.config.mjs
index 66f22ae..c376c4b 100644
--- a/ui/playwright.config.mjs
+++ b/ui/playwright.config.mjs
@@ -1,11 +1,18 @@
 import { defineConfig } from '@playwright/test';
+import { mkdtempSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+// Tests must never touch the settings of the person running them.
+const configDir = mkdtempSync(join(tmpdir(), 'cockpit-browser-config-'));
+process.env.DOTNET_COCKPIT_CONFIG_DIR = configDir;
 
 export default defineConfig({
   testDir: './tests',
   use: { baseURL: 'http://127.0.0.1:5231', colorScheme: 'light', trace: 'retain-on-failure' },
   webServer: [
     { command: 'node tests/empty-server.mjs 5231', url: 'http://127.0.0.1:5231/api/health', timeout: 30_000 },
-    { command: '../artifacts/native/dotnet-cockpit --no-browser --port 5232', url: 'http://127.0.0.1:5232/api/health', env: { PATH: '' }, timeout: 30_000 },
+    { command: '../artifacts/native/dotnet-cockpit --no-browser --port 5232', url: 'http://127.0.0.1:5232/api/health', env: { PATH: '', DOTNET_COCKPIT_CONFIG_DIR: configDir }, timeout: 30_000 },
     { command: 'node tests/tools-server.mjs', url: 'http://127.0.0.1:5234/api/health', timeout: 30_000 },
   ],
 });
diff --git a/ui/playwright.visual.config.mjs b/ui/playwright.visual.config.mjs
new file mode 100644
index 0000000..3496f9f
--- /dev/null
+++ b/ui/playwright.visual.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/visual',
+  testMatch: '*.visual.mjs',
+  snapshotPathTemplate: '{testDir}/baselines/{platform}/{arg}{ext}',
+  expect: { toHaveScreenshot: { maxDiffPixelRatio: 0.005 } },
+  use: { baseURL: 'http://127.0.0.1:5235' },
+  webServer: { command: 'node tests/visual/fixture-server.mjs', url: 'http://127.0.0.1:5235/api/health', timeout: 30_000 },
+});
diff --git a/ui/src/app.js b/ui/src/app.js
index be022b5..66dba06 100644
--- a/ui/src/app.js
+++ b/ui/src/app.js
@@ -1,122 +1,32 @@
-import '@fluentui/web-components/button.js';
-import '@fluentui/web-components/badge.js';
-import { setTheme } from '@fluentui/web-components/theme/set-theme.js';
-import { webDarkTheme, webLightTheme } from '@fluentui/tokens';
-import './styles.css';
-
-const root = document.documentElement;
-const button = document.getElementById('theme-toggle');
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-let preference = null;
-try { preference = localStorage.getItem('cockpit-theme'); } catch { /* Storage can be unavailable. */ }
-
-function updateTheme() {
-  const dark = preference === 'dark' || preference !== 'light' && systemDark.matches;
-  root.dataset.theme = dark ? 'dark' : 'light';
-  setTheme(dark ? webDarkTheme : webLightTheme);
-  button.setAttribute('aria-label', dark ? 'Switch to light mode' : 'Switch to dark mode');
-  button.title = button.getAttribute('aria-label');
-  button.firstElementChild.textContent = dark ? '☀' : '◐';
-}
-
-button.addEventListener('click', () => {
-  preference = root.dataset.theme === 'dark' ? 'light' : 'dark';
-  try { localStorage.setItem('cockpit-theme', preference); } catch { /* Keep the current page usable. */ }
-  updateTheme();
-});
-systemDark.addEventListener('change', updateTheme);
-updateTheme();
-button.hidden = false;
-
-const sdkFilter = document.querySelector('[data-sdk-filter]');
-if (sdkFilter) {
-  const versionInput = sdkFilter.querySelector('#sdk-version-filter');
-  const previewInput = sdkFilter.querySelector('#sdk-preview-filter');
-  const rcInput = sdkFilter.querySelector('#sdk-rc-filter');
-  const supportedInput = sdkFilter.querySelector('#sdk-supported-filter');
-  const latestThreeInput = sdkFilter.querySelector('#sdk-latest-three-filter');
-  const lifecycleInputs = [...sdkFilter.querySelectorAll('input[name="lifecycle"]')];
-  const toggleFilters = [
-    [previewInput, 'preview'],
-    [rcInput, 'rc'],
-    [supportedInput, 'supported'],
-    [latestThreeInput, 'latest3'],
-  ];
-  const resultsCount = document.querySelector('[data-sdk-results]');
-  const emptyState = document.querySelector('[data-sdk-empty]');
-  const rows = [...document.querySelectorAll('[data-sdk-row]')];
-  const groups = [...document.querySelectorAll('[data-sdk-group]')];
-
-  function filterSdkVersions() {
-    const query = versionInput.value.trim().toLowerCase();
-    const lifecycle = new Set(lifecycleInputs.filter(input => input.checked).map(input => input.value));
-    let visibleCount = 0;
-    const latestThreeCounts = new Map();
-    for (const row of rows) {
-      const matchesQuery = row.dataset.search.toLowerCase().includes(query);
-      const matchesPreview = previewInput.checked || row.dataset.preview !== 'true';
-      const matchesRc = rcInput.checked || row.dataset.rc !== 'true';
-      const matchesSupport = !supportedInput.checked || row.dataset.supported === 'true';
-      const matchesLifecycle = lifecycle.has(row.dataset.lifecycle);
-      const matchesFilters = matchesQuery && matchesPreview && matchesRc && matchesSupport && matchesLifecycle;
-      let withinLatestThree = true;
-      if (matchesFilters && latestThreeInput.checked) {
-        const channelCount = latestThreeCounts.get(row.dataset.channel) ?? 0;
-        withinLatestThree = channelCount < 3;
-        latestThreeCounts.set(row.dataset.channel, channelCount + 1);
-      }
-      row.hidden = !matchesFilters || !withinLatestThree;
-      if (!row.hidden) visibleCount++;
-    }
-
-    for (const group of groups) {
-      const groupRows = [...group.querySelectorAll('[data-sdk-row]')];
-      const groupVisibleCount = groupRows.reduce((count, row) => count + Number(!row.hidden), 0);
-      group.hidden = groupVisibleCount === 0;
-      group.querySelector('[data-sdk-group-count]').textContent = groupVisibleCount;
-      if (query && groupVisibleCount > 0) group.open = true;
-    }
-
-    resultsCount.textContent = visibleCount;
-    emptyState.hidden = visibleCount > 0;
-
-    const selectedTab = document.querySelector('.tool-tabs [role="tab"][aria-selected="true"] .tool-tab-count');
-    if (selectedTab) selectedTab.textContent = visibleCount;
-
-    const url = new URL(window.location.href);
-    if (versionInput.value.trim()) url.searchParams.set('q', versionInput.value.trim());
-    else url.searchParams.delete('q');
-    url.searchParams.delete('previews');
-    for (const [input, parameter] of toggleFilters) {
-      if (input.checked) url.searchParams.set(parameter, 'true');
-      else url.searchParams.delete(parameter);
-    }
-    url.searchParams.set('lifecycle-filter', 'true');
-    url.searchParams.delete('lifecycle');
-    for (const value of lifecycle) url.searchParams.append('lifecycle', value);
-    history.replaceState(null, '', url);
-    for (const tab of document.querySelectorAll('.tool-tabs [role="tab"]')) {
-      const tabUrl = new URL(tab.href);
-      if (versionInput.value.trim()) tabUrl.searchParams.set('q', versionInput.value.trim());
-      else tabUrl.searchParams.delete('q');
-      tabUrl.searchParams.delete('previews');
-      for (const [input, parameter] of toggleFilters) {
-        if (input.checked) tabUrl.searchParams.set(parameter, 'true');
-        else tabUrl.searchParams.delete(parameter);
-      }
-      tabUrl.searchParams.set('lifecycle-filter', 'true');
-      tabUrl.searchParams.delete('lifecycle');
-      for (const value of lifecycle) tabUrl.searchParams.append('lifecycle', value);
-      tab.href = tabUrl;
-    }
-  }
-
-  versionInput.addEventListener('input', filterSdkVersions);
-  for (const [input] of toggleFilters) input.addEventListener('change', filterSdkVersions);
-  for (const input of lifecycleInputs) input.addEventListener('change', filterSdkVersions);
-  sdkFilter.addEventListener('submit', event => {
-    event.preventDefault();
-    filterSdkVersions();
-  });
-  filterSdkVersions();
-}
+import './styles/index.css';
+import { setupClipboard } from './js/clipboard.js';
+import { setupConfirm } from './js/confirm.js';
+import { setupDialogs, revealScriptOnlyControls } from './js/dialogs.js';
+import { setupDrawer } from './js/drawer.js';
+import { setupInstallSheet } from './js/install-sheet.js';
+import { setupLiveInventory } from './js/live-inventory.js';
+import { setupAddToolSheet } from './js/add-tool-sheet.js';
+import { setupPalette } from './js/palette.js';
+import { setupRemoval } from './js/removal.js';
+import { setupSettings } from './js/settings.js';
+import { setupShortcuts } from './js/shortcuts.js';
+import { setupTheme } from './js/theme.js';
+import { setupToolsTable } from './js/tools-table.js';
+import { setupVersionsFilter } from './js/versions-filter.js';
+
+revealScriptOnlyControls();
+setupTheme();
+setupClipboard();
+setupDialogs();
+setupConfirm();
+setupPalette();
+setupVersionsFilter();
+setupRemoval();
+setupToolsTable();
+setupInstallSheet();
+setupAddToolSheet();
+setupSettings();
+setupShortcuts();
+setupLiveInventory();
+setupDrawer('version-drawer', key => key);
+setupDrawer('tool-drawer', key => key.split(':').slice(1).join(':'));
diff --git a/ui/src/js/add-tool-sheet.js b/ui/src/js/add-tool-sheet.js
new file mode 100644
index 0000000..2badd66
--- /dev/null
+++ b/ui/src/js/add-tool-sheet.js
@@ -0,0 +1,121 @@
+import { esc } from './dom.js';
+import { openModal } from './dialogs.js';
+
+export function setupAddToolSheet() {
+  const dialog = document.getElementById('add-tool-dialog');
+  if (!dialog) return;
+  const inlineSearch = document.getElementById('tool-search-section');
+  // The inline form is the path without JavaScript. With it, the sheet does this job.
+  if (inlineSearch) inlineSearch.hidden = true;
+
+  const search = document.getElementById('sheet-search-input');
+  const results = document.getElementById('sheet-results');
+  const scopeButtons = [...dialog.querySelectorAll('[data-sheet-scope]')];
+  let scope = 'global';
+  let timer = null;
+
+  // Each Install button opens the shared confirmation, which shows the exact command for that tool.
+  function applyScope() {
+    for (const form of dialog.querySelectorAll('form[data-confirm]')) {
+      form.querySelector('input[name="scope"]').value = scope;
+      form.dataset.confirmCommand = form.dataset.confirmCommand.replace(/--(global|local)/, `--${scope}`);
+      form.dataset.confirmBody = results.dataset[scope === 'local' ? 'bodyLocal' : 'bodyGlobal'];
+    }
+  }
+
+  function installTrigger(item) {
+    const command = `dotnet tool install --${scope} \\\n  ${item.packageId} \\\n  --version ${item.version}`;
+    return `<form method="get" action="/confirm" data-confirm
+        data-confirm-title="Install ${esc(item.packageId)}?" data-confirm-body=""
+        data-confirm-command="${esc(command)}" data-confirm-label="Install tool"
+        data-confirm-busy="Installing ${esc(item.packageId)}…" data-confirm-post="/tools/install"
+        data-confirm-danger="false" data-confirm-admin="false">
+        <input type="hidden" name="action" value="tool-install">
+        <input type="hidden" name="packageId" value="${esc(item.packageId)}">
+        <input type="hidden" name="version" value="${esc(item.version)}">
+        <input type="hidden" name="scope" value="${esc(scope)}">
+        <button type="submit" class="button sm">Install</button>
+      </form>`;
+  }
+
+  function message(html) {
+    results.innerHTML = `<div class="empty-state">${html}</div>`;
+  }
+
+  async function runSearch(rawQuery) {
+    const query = rawQuery.trim();
+    if (!query) {
+      message('<p class="muted">Type a package name to search NuGet.org.</p>');
+      return;
+    }
+    message('<p class="muted">Searching NuGet.org…</p>');
+    try {
+      const response = await fetch(`/api/tools/search?q=${encodeURIComponent(query)}`);
+      const data = await response.json();
+      if (search.value.trim() !== query) return;
+      if (data.error) {
+        message(`<h3>Search failed</h3><p>${esc(data.error)}</p>`);
+        return;
+      }
+      const items = data.results || [];
+      if (!items.length) {
+        message(`<h3>No tools found</h3><p class="muted">Nothing on NuGet.org matches “${esc(query)}”.</p>`);
+        return;
+      }
+      results.innerHTML = items.map(item => `
+        <div class="sheet-result-item" data-pkg-id="${esc(item.packageId)}">
+          <span class="tool-monogram tool-logo has-img"><img src="/api/tools/icon?packageId=${encodeURIComponent(item.packageId)}&version=${encodeURIComponent(item.version)}" alt="" class="tool-logo-img" width="36" height="36" loading="lazy"></span>
+          <div class="sheet-result-body">
+            <div class="sheet-result-top">
+              <strong>${esc(item.packageId)}</strong>
+              <code class="muted">${esc(item.version)}</code>
+              ${item.verified ? '<span class="badge ok sm">Verified</span>' : ''}
+            </div>
+            <div class="sheet-result-meta muted text-xs">
+              <span>by ${esc(item.authors)}</span>
+              <span>${esc(item.downloads)} downloads</span>
+            </div>
+          </div>
+          ${installTrigger(item)}
+        </div>`).join('');
+      applyScope();
+    } catch {
+      message('<h3>Search failed</h3><p class="muted">NuGet.org could not be searched. Try again.</p>');
+    }
+  }
+
+  for (const button of scopeButtons) {
+    button.addEventListener('click', () => {
+      if (button.disabled) return;
+      scope = button.dataset.sheetScope;
+      for (const other of scopeButtons) other.classList.toggle('active', other === button);
+      applyScope();
+    });
+  }
+
+  search.addEventListener('input', () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => runSearch(search.value), 260);
+  });
+  search.addEventListener('keydown', event => {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    clearTimeout(timer);
+    runSearch(search.value);
+  });
+
+  document.addEventListener('click', event => {
+    if (event.target.closest('#open-add-tool-btn')) {
+      event.preventDefault();
+      openModal(dialog, search);
+    } else if (event.target.closest('#close-add-tool-btn')) {
+      dialog.close();
+    }
+  });
+
+  const params = new URLSearchParams(window.location.search);
+  if (params.get('add') === '1' || params.get('q')) {
+    openModal(dialog, search);
+    if (search.value.trim()) runSearch(search.value);
+  }
+}
diff --git a/ui/src/js/clipboard.js b/ui/src/js/clipboard.js
new file mode 100644
index 0000000..56fab04
--- /dev/null
+++ b/ui/src/js/clipboard.js
@@ -0,0 +1,23 @@
+const SELECTOR = '.tool-command-pill, .copy-btn, .drawer-sha, .drawer-path';
+
+export function setupClipboard() {
+  const live = document.createElement('div');
+  live.className = 'sr-only';
+  live.setAttribute('role', 'status');
+  document.body.append(live);
+
+  document.addEventListener('click', event => {
+    const target = event.target.closest(SELECTOR);
+    if (!target) return;
+    const text = (target.dataset.copy || target.textContent || '').trim();
+    if (!text) return;
+    navigator.clipboard?.writeText(text).then(() => {
+      target.classList.add('copied');
+      live.textContent = 'Copied to clipboard';
+      setTimeout(() => {
+        target.classList.remove('copied');
+        live.textContent = '';
+      }, 1200);
+    }).catch(() => {});
+  });
+}
diff --git a/ui/src/js/confirm.js b/ui/src/js/confirm.js
new file mode 100644
index 0000000..eee703d
--- /dev/null
+++ b/ui/src/js/confirm.js
@@ -0,0 +1,93 @@
+import { openModal } from './dialogs.js';
+
+/** While a change runs nothing can be clicked twice, and the button says what is happening. */
+export function markBusy(button, label) {
+  if (!button) return;
+  button.dataset.idleHtml = button.innerHTML;
+  button.classList.add('is-busy');
+  button.setAttribute('aria-busy', 'true');
+  if (label) button.textContent = label;
+  // Disabling synchronously would drop the button's name and value from the submission.
+  setTimeout(() => { button.disabled = true; });
+}
+
+function setupBusyForms() {
+  document.addEventListener('submit', event => {
+    const form = event.target;
+    if (event.defaultPrevented || form.method !== 'post') return;
+    const button = event.submitter ?? form.querySelector('button[type="submit"]');
+    markBusy(button, form.dataset.busy || 'Working…');
+    form.setAttribute('aria-busy', 'true');
+  });
+  // Coming back through the history restores the page as it was left.
+  window.addEventListener('pageshow', event => {
+    if (!event.persisted) return;
+    for (const button of document.querySelectorAll('.is-busy')) {
+      button.disabled = false;
+      button.classList.remove('is-busy');
+      button.removeAttribute('aria-busy');
+      if (button.dataset.idleHtml) button.innerHTML = button.dataset.idleHtml;
+    }
+    for (const dialog of document.querySelectorAll('dialog[data-busy]')) dialog.removeAttribute('data-busy');
+  });
+}
+
+export function setupConfirm() {
+  setupBusyForms();
+  // A result message belongs to the action, not to the address, so reloading must not repeat it.
+  const current = new URL(window.location.href);
+  if (current.searchParams.has('notice') || current.searchParams.has('changed')) {
+    current.searchParams.delete('notice');
+    current.searchParams.delete('changed');
+    history.replaceState(null, '', current);
+  }
+  const dialog = document.getElementById('confirm-dialog');
+  if (!dialog) return;
+  const form = document.getElementById('confirm-dialog-form');
+  const fields = document.getElementById('confirm-dialog-fields');
+  const submit = document.getElementById('confirm-dialog-submit');
+  const cancel = document.getElementById('confirm-dialog-cancel');
+  const icon = document.getElementById('confirm-dialog-icon');
+  const commandBox = document.getElementById('confirm-dialog-command-box');
+  const command = document.getElementById('confirm-dialog-command');
+  const copy = document.getElementById('confirm-dialog-copy');
+
+  document.addEventListener('submit', event => {
+    const trigger = event.target.closest('form[data-confirm]');
+    if (!trigger) return;
+    event.preventDefault();
+    const data = trigger.dataset;
+
+    document.getElementById('confirm-dialog-title').textContent = data.confirmTitle;
+    document.getElementById('confirm-dialog-body').textContent = data.confirmBody;
+    document.getElementById('confirm-dialog-admin').hidden = data.confirmAdmin !== 'true';
+    command.textContent = data.confirmCommand;
+    copy.dataset.copy = data.confirmCommand;
+    commandBox.hidden = !data.confirmCommand;
+    icon.hidden = data.confirmDanger !== 'true';
+    submit.textContent = data.confirmLabel;
+    submit.className = `button ${data.confirmDanger === 'true' ? 'danger' : 'primary'}`;
+    form.action = data.confirmPost;
+    form.dataset.busy = data.confirmBusy;
+
+    fields.replaceChildren();
+    for (const [name, value] of new FormData(trigger)) {
+      if (name === 'action') continue;
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = name;
+      input.value = value;
+      fields.append(input);
+    }
+    openModal(dialog);
+  });
+
+  cancel.addEventListener('click', () => dialog.close());
+  form.addEventListener('submit', () => {
+    dialog.setAttribute('data-busy', 'true');
+    cancel.disabled = true;
+  });
+  dialog.addEventListener('cancel', event => {
+    if (dialog.hasAttribute('data-busy')) event.preventDefault();
+  });
+}
diff --git a/ui/src/js/dialogs.js b/ui/src/js/dialogs.js
new file mode 100644
index 0000000..4993ce9
--- /dev/null
+++ b/ui/src/js/dialogs.js
@@ -0,0 +1,42 @@
+export function revealScriptOnlyControls() {
+  document.documentElement.classList.add('js');
+  for (const element of document.querySelectorAll('[data-js-only]')) element.hidden = false;
+}
+
+// Browsers without <dialog closedby="any"> get the same light dismiss through a pointer check.
+export function setupDialogs() {
+  // Native disclosure menus close on outside click and Escape like every other menu.
+  document.addEventListener('click', event => {
+    for (const menu of document.querySelectorAll('details.menu[open]')) {
+      if (!menu.contains(event.target)) menu.open = false;
+    }
+  });
+  document.addEventListener('keydown', event => {
+    if (event.key !== 'Escape') return;
+    const menu = document.querySelector('details.menu[open]');
+    if (!menu) return;
+    event.stopPropagation();
+    menu.open = false;
+    menu.querySelector('summary')?.focus();
+  }, true);
+
+  if ('closedBy' in HTMLDialogElement.prototype) return;
+  const outside = (event, dialog) => {
+    const box = dialog.getBoundingClientRect();
+    return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+  };
+  for (const dialog of document.querySelectorAll('dialog[closedby="any"]')) {
+    let pressedOutside = false;
+    dialog.addEventListener('pointerdown', event => { pressedOutside = outside(event, dialog); });
+    dialog.addEventListener('pointerup', event => {
+      if (pressedOutside && outside(event, dialog) && !dialog.hasAttribute('data-busy')) dialog.close();
+    });
+  }
+}
+
+/** Opens a sheet that the server may already have rendered open for browsers without JavaScript. */
+export function openModal(dialog, focusTarget) {
+  if (dialog.open) dialog.close();
+  dialog.showModal();
+  focusTarget?.focus();
+}
diff --git a/ui/src/js/dom.js b/ui/src/js/dom.js
new file mode 100644
index 0000000..f9cf8e2
--- /dev/null
+++ b/ui/src/js/dom.js
@@ -0,0 +1,20 @@
+export function esc(value) {
+  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+  return String(value ?? '').replace(/[&<>"']/g, ch => map[ch]);
+}
+
+export function matchesTerms(text, query) {
+  const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  const haystack = text.toLowerCase();
+  return terms.every(term => haystack.includes(term));
+}
+
+export function isPlainClick(event) {
+  return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
+}
+
+export function replaceQuery(mutate) {
+  const url = new URL(window.location.href);
+  mutate(url);
+  history.replaceState(null, '', url);
+}
diff --git a/ui/src/js/drawer.js b/ui/src/js/drawer.js
new file mode 100644
index 0000000..3ec0dbd
--- /dev/null
+++ b/ui/src/js/drawer.js
@@ -0,0 +1,68 @@
+import { replaceQuery } from './dom.js';
+
+/** Fills a detail drawer from the server-rendered template of a row. */
+export function setupDrawer(drawerId, selectedValue) {
+  const drawer = document.getElementById(drawerId);
+  if (!drawer) return;
+  const rows = () => [...document.querySelectorAll('tr[data-drawer-key]')];
+  const templateFor = key => [...document.querySelectorAll('template[data-drawer-content]')].find(t => t.dataset.drawerContent === key);
+  let currentKey = rows().find(row => row.classList.contains('row-selected'))?.dataset.drawerKey ?? null;
+  let returnFocus = null;
+
+  function open(key, opener) {
+    const template = templateFor(key);
+    if (!template) return;
+    returnFocus = opener ?? returnFocus;
+    drawer.replaceChildren(template.content.cloneNode(true));
+    drawer.hidden = false;
+    currentKey = key;
+    replaceQuery(url => url.searchParams.set('selected', selectedValue(key)));
+    for (const row of rows()) row.classList.toggle('row-selected', row.dataset.drawerKey === key);
+    drawer.querySelector('[data-drawer-close]')?.focus({ preventScroll: true });
+  }
+
+  function close() {
+    drawer.hidden = true;
+    drawer.replaceChildren();
+    currentKey = null;
+    replaceQuery(url => url.searchParams.delete('selected'));
+    for (const row of rows()) row.classList.remove('row-selected');
+    returnFocus?.focus({ preventScroll: true });
+    returnFocus = null;
+  }
+
+  document.addEventListener('click', event => {
+    if (event.target.closest('[data-drawer-close]')) {
+      event.preventDefault();
+      close();
+      return;
+    }
+    const inspect = event.target.closest('[data-inspect]');
+    if (inspect) {
+      event.preventDefault();
+      for (const menu of document.querySelectorAll('.tool-context-menu:not([hidden])')) menu.hidden = true;
+      open(inspect.dataset.inspect, inspect);
+      return;
+    }
+    const row = event.target.closest('tr[data-drawer-key]');
+    if (!row || event.target.closest('a, button, form, input, label, .tool-command-pill, .tool-more-wrap')) return;
+    open(row.dataset.drawerKey, row.querySelector('[data-inspect]'));
+  });
+
+  window.addEventListener('keydown', event => {
+    if (drawer.hidden || document.querySelector('dialog[open]') || !document.getElementById('cmdk-dialog')?.hidden) return;
+    if (event.key === 'Escape') {
+      close();
+      return;
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    if (event.target.closest?.('input, textarea, select')) return;
+    const visible = rows().filter(row => !row.hidden && !row.closest('[hidden]'));
+    if (!visible.length) return;
+    event.preventDefault();
+    const index = visible.findIndex(row => row.dataset.drawerKey === currentKey);
+    const next = visible[(index + (event.key === 'ArrowDown' ? 1 : visible.length - 1)) % visible.length] ?? visible[0];
+    open(next.dataset.drawerKey, next.querySelector('[data-inspect]'));
+    next.scrollIntoView({ block: 'nearest' });
+  });
+}
diff --git a/ui/src/js/install-sheet.js b/ui/src/js/install-sheet.js
new file mode 100644
index 0000000..5527f8b
--- /dev/null
+++ b/ui/src/js/install-sheet.js
@@ -0,0 +1,115 @@
+import { matchesTerms, replaceQuery } from './dom.js';
+import { openModal } from './dialogs.js';
+
+export function setupInstallSheet() {
+  const dialog = document.getElementById('install-dotnet-dialog');
+  if (!dialog) return;
+  const search = document.getElementById('install-dotnet-search-input');
+  const empty = document.getElementById('install-dotnet-empty');
+  const productButtons = [...dialog.querySelectorAll('[data-install-product]')];
+  const filterButtons = [...dialog.querySelectorAll('[data-install-lifecycle]')];
+  const groups = [...dialog.querySelectorAll('[data-install-channel-group]')];
+  const rows = [...dialog.querySelectorAll('[data-install-row]')];
+  const previewsToggle = dialog.querySelector('[data-install-previews]');
+  const state = {
+    product: dialog.dataset.product || 'SDK',
+    view: dialog.dataset.view || 'latest',
+    previews: dialog.dataset.previews === 'true',
+  };
+
+  function syncButtons() {
+    for (const button of filterButtons) {
+      const active = button.dataset.installLifecycle === state.view;
+      button.classList.toggle('active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    }
+  }
+
+  function matchesView(data) {
+    const supported = data.supported === 'true';
+    if (state.view === 'latest') return supported && data.latest === 'true';
+    if (state.view === 'supported') return supported;
+    if (state.view === 'lts') return supported && data.lts === 'true';
+    return true;
+  }
+
+  function filter() {
+    let visible = 0;
+    for (const row of rows) {
+      const data = row.dataset;
+      const isPreview = data.preview === 'true';
+      const show = data.product === state.product
+        && matchesView(data)
+        && (state.previews || !isPreview)
+        && matchesTerms(data.search || '', search.value);
+      row.hidden = !show;
+      if (show) visible++;
+    }
+    for (const group of groups) {
+      const count = group.querySelectorAll('[data-install-row]:not([hidden])').length;
+      group.hidden = count === 0;
+      const label = group.querySelector('[data-install-channel-count]');
+      if (label) {
+        const available = Number(state.product === 'SDK' ? group.dataset.availableSdk : group.dataset.availableRuntime);
+        label.textContent = count >= Number(group.dataset.cap) && available > count
+          ? `Newest ${count} of ${available}`
+          : count === 1 ? '1 release' : `${count} releases`;
+      }
+    }
+    if (empty) empty.hidden = visible > 0;
+  }
+
+  for (const button of productButtons) {
+    button.addEventListener('click', event => {
+      event.preventDefault();
+      state.product = button.dataset.installProduct;
+      for (const other of productButtons) {
+        const active = other === button;
+        other.classList.toggle('active', active);
+        other.setAttribute('aria-pressed', active ? 'true' : 'false');
+      }
+      filter();
+    });
+  }
+
+  for (const button of filterButtons) {
+    button.addEventListener('click', event => {
+      event.preventDefault();
+      state.view = button.dataset.installLifecycle;
+      syncButtons();
+      filter();
+    });
+  }
+
+  previewsToggle?.addEventListener('click', event => {
+    event.preventDefault();
+    state.previews = !state.previews;
+    previewsToggle.classList.toggle('active', state.previews);
+    previewsToggle.setAttribute('aria-pressed', state.previews ? 'true' : 'false');
+    filter();
+  });
+
+  search?.addEventListener('input', filter);
+  dialog.querySelector('[data-install-search]')?.addEventListener('submit', event => event.preventDefault());
+
+  function open() {
+    openModal(dialog, search);
+  }
+
+  document.addEventListener('click', event => {
+    if (event.target.closest('#open-install-dotnet-btn')) {
+      event.preventDefault();
+      open();
+    } else if (event.target.closest('#close-install-dotnet-btn')) {
+      event.preventDefault();
+      dialog.close();
+    }
+  });
+
+  if (dialog.hasAttribute('data-open-on-load')) {
+    replaceQuery(url => {
+      for (const name of ['install', 'tab', 'product', 'view', 'previews', 'installQ']) url.searchParams.delete(name);
+    });
+    open();
+  }
+}
diff --git a/ui/src/js/live-inventory.js b/ui/src/js/live-inventory.js
new file mode 100644
index 0000000..32a5148
--- /dev/null
+++ b/ui/src/js/live-inventory.js
@@ -0,0 +1,47 @@
+const MIN_INTERVAL_MS = 3000;
+
+/**
+ * An installer runs outside the browser, so the moment to look again is when the person comes back:
+ * the window regains focus, or the install sheet closes. Nothing polls in the background.
+ */
+export function setupLiveInventory() {
+  const known = document.body.dataset.inventory;
+  if (known === undefined) return;
+  let lastCheck = 0;
+
+  async function check() {
+    const now = Date.now();
+    if (now - lastCheck < MIN_INTERVAL_MS) return;
+    lastCheck = now;
+    let snapshot;
+    try {
+      const response = await fetch('/api/installation');
+      if (!response.ok) return;
+      snapshot = await response.json();
+    } catch {
+      return;
+    }
+    if (snapshot.status !== 'ready' || snapshot.signature === known) return;
+    // A running confirmation or removal must not be interrupted; it reloads the page by itself.
+    if (document.querySelector('dialog[data-busy], #confirm-dialog[open], #remove-dialog[open]')) return;
+    const url = new URL(window.location.href);
+    if (url.pathname === '/') url.searchParams.set('notice', 'detected');
+    const sheet = document.getElementById('install-dotnet-dialog');
+    if (sheet?.open) {
+      url.searchParams.set('install', '1');
+      url.searchParams.set('product', sheet.querySelector('[data-install-product].active')?.dataset.installProduct === 'SDK' ? 'sdk' : 'runtime');
+      url.searchParams.set('view', sheet.querySelector('[data-install-lifecycle].active')?.dataset.installLifecycle ?? 'latest');
+      url.searchParams.set('previews', sheet.querySelector('[data-install-previews]')?.classList.contains('active') ? 'true' : 'false');
+    }
+    window.location.replace(url);
+  }
+
+  window.addEventListener('focus', check);
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') check();
+  });
+  document.getElementById('install-dotnet-dialog')?.addEventListener('close', () => {
+    lastCheck = 0;
+    check();
+  });
+}
diff --git a/ui/src/js/palette.js b/ui/src/js/palette.js
new file mode 100644
index 0000000..5621ccf
--- /dev/null
+++ b/ui/src/js/palette.js
@@ -0,0 +1,138 @@
+import { esc } from './dom.js';
+
+async function loadIndex() {
+  const items = [];
+  const read = async url => {
+    try {
+      const response = await fetch(url);
+      return response.ok ? await response.json() : null;
+    } catch {
+      return null;
+    }
+  };
+  const [installation, tools] = await Promise.all([read('/api/installation'), read('/api/tools')]);
+  for (const sdk of installation?.sdks ?? []) {
+    items.push({ title: `.NET SDK ${sdk.version}`, detail: 'Installed version', href: `/?selected=${encodeURIComponent(sdk.version)}#inventory`, tag: 'SDK' });
+  }
+  const runtimeVersions = new Map();
+  for (const runtime of installation?.runtimes ?? []) {
+    if (!runtimeVersions.has(runtime.version)) runtimeVersions.set(runtime.version, []);
+    runtimeVersions.get(runtime.version).push(runtime.name);
+  }
+  for (const [version, names] of runtimeVersions) {
+    items.push({ title: `.NET Runtime ${version}`, detail: names.join(', '), href: `/?selected=${encodeURIComponent(version)}#inventory`, tag: 'Runtime' });
+  }
+  for (const [scope, list] of [['global', tools?.global?.tools], ['local', tools?.local?.tools]]) {
+    for (const tool of list ?? []) {
+      items.push({
+        title: tool.packageId,
+        detail: `${tool.version} · ${(tool.commands ?? []).join(', ')}`,
+        href: `/tools?scope=${scope}&selected=${encodeURIComponent(tool.packageId)}`,
+        tag: scope === 'local' ? 'Local tool' : 'Global tool',
+      });
+    }
+  }
+  return items;
+}
+
+export function setupPalette() {
+  const trigger = document.getElementById('cmdk-trigger');
+  const dialog = document.getElementById('cmdk-dialog');
+  const scrim = document.getElementById('cmdk-scrim');
+  const input = document.getElementById('cmdk-input');
+  if (!trigger || !dialog || !scrim || !input) return;
+  const group = document.getElementById('cmdk-dynamic-grp');
+  const list = document.getElementById('cmdk-dynamic-list');
+  const empty = document.getElementById('cmdk-empty');
+  const nuget = document.getElementById('cmdk-nuget');
+  const groups = [...dialog.querySelectorAll('.grp')];
+  let index = null;
+  let activeIndex = -1;
+  let opener = null;
+
+  const visibleOptions = () => [...dialog.querySelectorAll('.opt:not([hidden])')];
+
+  function setActive(options, next) {
+    for (const option of options) option.classList.remove('selected');
+    activeIndex = next >= 0 && next < options.length ? next : -1;
+    if (activeIndex >= 0) {
+      options[activeIndex].classList.add('selected');
+      options[activeIndex].scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  function filter() {
+    const query = input.value.trim().toLowerCase();
+    for (const option of dialog.querySelectorAll('.opt')) {
+      option.hidden = Boolean(query && !option.textContent.toLowerCase().includes(query));
+    }
+    // Installed items only appear once there is something to search for, to keep the first view short.
+    if (!query) for (const option of list.querySelectorAll('.opt')) option.hidden = true;
+    for (const section of groups) section.hidden = section.querySelector('.opt:not([hidden])') === null;
+    const options = visibleOptions();
+    empty.hidden = options.length > 0 || !query;
+    nuget.href = `/tools?add=1&q=${encodeURIComponent(input.value.trim())}`;
+    setActive(options, options.length ? 0 : -1);
+  }
+
+  async function open() {
+    opener = document.activeElement;
+    dialog.hidden = false;
+    scrim.hidden = false;
+    input.value = '';
+    filter();
+    input.focus();
+    if (index === null) {
+      index = await loadIndex();
+      list.innerHTML = index.map(item => `<a class="opt" href="${esc(item.href)}"><div><b>${esc(item.title)}</b> <small>· ${esc(item.detail)}</small></div><span class="badge sm">${esc(item.tag)}</span></a>`).join('');
+      group.hidden = false;
+      filter();
+    }
+  }
+
+  function close() {
+    dialog.hidden = true;
+    scrim.hidden = true;
+    activeIndex = -1;
+    opener?.focus?.();
+  }
+
+  trigger.addEventListener('click', open);
+  scrim.addEventListener('click', close);
+  input.addEventListener('input', filter);
+  input.addEventListener('keydown', event => {
+    const options = visibleOptions();
+    if (event.key === 'ArrowDown' && options.length) {
+      event.preventDefault();
+      setActive(options, (activeIndex + 1) % options.length);
+    } else if (event.key === 'ArrowUp' && options.length) {
+      event.preventDefault();
+      setActive(options, (activeIndex - 1 + options.length) % options.length);
+    } else if (event.key === 'Enter') {
+      if (activeIndex >= 0) {
+        event.preventDefault();
+        options[activeIndex].click();
+      } else if (!empty.hidden) {
+        event.preventDefault();
+        nuget.click();
+      }
+    }
+  });
+
+  window.addEventListener('keydown', event => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      if (dialog.hidden) open();
+      else close();
+    } else if (event.key === 'Escape' && !dialog.hidden) {
+      event.stopPropagation();
+      close();
+    } else if (event.key === 'Tab' && !dialog.hidden) {
+      // The palette is modal, so focus stays inside it.
+      const focusable = [...dialog.querySelectorAll('input, a.opt:not([hidden]), #cmdk-nuget')].filter(element => element.offsetParent !== null);
+      const current = focusable.indexOf(document.activeElement);
+      event.preventDefault();
+      focusable[(current + (event.shiftKey ? -1 : 1) + focusable.length) % focusable.length]?.focus();
+    }
+  }, true);
+}
diff --git a/ui/src/js/removal.js b/ui/src/js/removal.js
new file mode 100644
index 0000000..e6f9fcb
--- /dev/null
+++ b/ui/src/js/removal.js
@@ -0,0 +1,136 @@
+import { esc } from './dom.js';
+import { openModal } from './dialogs.js';
+import { markBusy } from './confirm.js';
+
+const MODES = {
+  superseded: { filter: item => item.isSuperseded, noun: 'older' },
+  previews: { filter: item => item.isPreview, noun: 'preview' },
+  eol: { filter: item => item.isEol, noun: 'out-of-support' },
+};
+
+export function setupRemoval() {
+  const dialog = document.getElementById('remove-dialog');
+  const dataElement = document.getElementById('versions-data');
+  if (!dialog || !dataElement) return;
+  let allItems = [];
+  try { allItems = JSON.parse(dataElement.textContent || '[]'); } catch { /* The links keep working through /confirm. */ }
+
+  const title = document.getElementById('remove-dialog-title');
+  const subtitle = document.getElementById('remove-dialog-subtitle');
+  const list = document.getElementById('remove-dialog-items');
+  const modes = document.getElementById('remove-dialog-modes');
+  const modeButtons = [...modes.querySelectorAll('[data-remove-mode]')];
+  const command = document.getElementById('remove-dialog-cmd');
+  const copy = document.getElementById('remove-dialog-copy');
+  const confirm = document.getElementById('remove-dialog-confirm');
+  const confirmText = document.getElementById('remove-dialog-confirm-text');
+  const cancel = document.getElementById('remove-dialog-cancel');
+  const form = document.getElementById('remove-dialog-form');
+  const inputs = document.getElementById('remove-dialog-form-inputs');
+  let items = [];
+
+  function badge(item) {
+    if (item.isEol) return '<span class="badge bad sm">End of life</span>';
+    if (item.isPreview) return '<span class="badge sm">Preview</span>';
+    return '';
+  }
+
+  function renderList() {
+    list.innerHTML = items.map((item, index) => `
+      <label class="remove-item-row">
+        <input type="checkbox" checked data-remove-idx="${index}">
+        <span class="remove-item-copy">
+          <strong>${esc(item.name)} <code>${esc(item.displayVersion)}</code></strong>
+          ${item.location ? `<code>${esc(item.location)}</code>` : ''}
+        </span>
+        ${badge(item)}
+      </label>`).join('');
+  }
+
+  function selected() {
+    return [...list.querySelectorAll('input:checked')].map(box => items[Number(box.dataset.removeIdx)]);
+  }
+
+  function sync() {
+    const chosen = selected();
+    const text = chosen.length ? chosen.map(item => item.command).join('\n\n') : '# Select at least one item';
+    command.textContent = text;
+    copy.dataset.copy = chosen.length ? text : '';
+    confirmText.textContent = `Remove ${chosen.length} ${chosen.length === 1 ? 'item' : 'items'}`;
+    confirm.disabled = chosen.length === 0;
+    subtitle.textContent = `${chosen.length} of ${items.length} selected.`;
+    inputs.innerHTML = chosen.map(item => `<input type="hidden" name="items" value="${esc(item.version)}|${esc(item.kind)}">`).join('');
+  }
+
+  list.addEventListener('change', sync);
+
+  function selectMode(mode) {
+    for (const button of modeButtons) {
+      const active = button.dataset.removeMode === mode;
+      button.classList.toggle('active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    }
+    items = allItems.filter(MODES[mode].filter);
+    renderList();
+    sync();
+  }
+
+  function openChannel(channel) {
+    items = allItems.filter(item => item.channel === channel);
+    if (!items.length) return false;
+    title.textContent = `Remove .NET ${channel}?`;
+    modes.hidden = true;
+    renderList();
+    sync();
+    openModal(dialog, cancel);
+    return true;
+  }
+
+  function openCleanup(mode) {
+    let hasAny = false;
+    for (const button of modeButtons) {
+      const available = allItems.some(MODES[button.dataset.removeMode].filter);
+      button.hidden = !available;
+      hasAny ||= available;
+    }
+    if (!hasAny) return;
+    title.textContent = 'Clean up .NET installations';
+    modes.hidden = false;
+    const preferred = allItems.some(MODES[mode]?.filter ?? (() => false)) ? mode : modeButtons.find(button => !button.hidden).dataset.removeMode;
+    selectMode(preferred);
+    openModal(dialog, cancel);
+  }
+
+  for (const button of modeButtons) button.addEventListener('click', () => selectMode(button.dataset.removeMode));
+
+  cancel.addEventListener('click', () => dialog.close());
+  confirm.addEventListener('click', () => {
+    if (!selected().length) return;
+    dialog.setAttribute('data-busy', 'true');
+    cancel.disabled = true;
+    form.submit();
+    markBusy(confirm, 'Removing…');
+  });
+  dialog.addEventListener('cancel', event => {
+    if (dialog.hasAttribute('data-busy')) event.preventDefault();
+  });
+
+  document.addEventListener('click', event => {
+    const channel = event.target.closest('[data-remove-channel]');
+    if (channel) {
+      event.preventDefault();
+      if (!openChannel(channel.dataset.removeChannel)) window.location.href = channel.href;
+      return;
+    }
+    const cleanup = event.target.closest('[data-cleanup-action]');
+    if (cleanup) {
+      event.preventDefault();
+      openCleanup(cleanup.dataset.cleanupAction);
+    }
+  });
+
+  if (new URLSearchParams(window.location.search).get('cleanup') === '1') {
+    const cleanupButton = document.querySelector('[data-cleanup-action]');
+    if (cleanupButton) openCleanup(cleanupButton.dataset.cleanupAction);
+  }
+}
diff --git a/ui/src/js/settings.js b/ui/src/js/settings.js
new file mode 100644
index 0000000..c2eab0f
--- /dev/null
+++ b/ui/src/js/settings.js
@@ -0,0 +1,39 @@
+export function setupSettings() {
+  for (const form of document.querySelectorAll('[data-settings-toggle]')) {
+    form.addEventListener('change', () => {
+      fetch(form.action, { method: 'POST', body: new URLSearchParams(new FormData(form)), redirect: 'manual' }).catch(() => {});
+    });
+  }
+
+  const skip = document.getElementById('skip-preflight-checkbox');
+  if (skip) {
+    skip.addEventListener('change', () => {
+      const body = new URLSearchParams();
+      if (skip.checked) body.set('skip', 'true');
+      fetch('/settings/preflight', { method: 'POST', body, redirect: 'manual' }).catch(() => {});
+    });
+  }
+
+  const links = [...document.querySelectorAll('.settings-nav-item')];
+  if (!links.length || !('IntersectionObserver' in window)) return;
+  const sections = new Map(links.map(link => [document.querySelector(link.getAttribute('href'))?.closest('section'), link]).filter(([section]) => section));
+  const visible = new Set();
+  const update = () => {
+    const current = [...sections.keys()].find(section => visible.has(section));
+    if (!current) return;
+    for (const link of links) {
+      const active = link === sections.get(current);
+      link.classList.toggle('active', active);
+      if (active) link.setAttribute('aria-current', 'true');
+      else link.removeAttribute('aria-current');
+    }
+  };
+  const observer = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) visible.add(entry.target);
+      else visible.delete(entry.target);
+    }
+    update();
+  }, { rootMargin: '-20% 0px -60% 0px' });
+  for (const section of sections.keys()) observer.observe(section);
+}
diff --git a/ui/src/js/shortcuts.js b/ui/src/js/shortcuts.js
new file mode 100644
index 0000000..863d927
--- /dev/null
+++ b/ui/src/js/shortcuts.js
@@ -0,0 +1,37 @@
+const CHORDS = { o: '/overview', v: '/', t: '/tools', s: '/setup', p: '/preflight' };
+
+export function setupShortcuts() {
+  const palette = document.getElementById('cmdk-dialog');
+  let waitingForChord = false;
+  let timer = null;
+
+  window.addEventListener('keydown', event => {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+    const active = document.activeElement;
+    if (active?.matches('input, textarea, select') || active?.isContentEditable) return;
+    if (document.querySelector('dialog[open]') || (palette && !palette.hidden)) return;
+
+    const key = event.key.toLowerCase();
+    if (waitingForChord) {
+      waitingForChord = false;
+      clearTimeout(timer);
+      if (CHORDS[key]) {
+        event.preventDefault();
+        window.location.href = CHORDS[key];
+      }
+      return;
+    }
+    if (key === 'g') {
+      waitingForChord = true;
+      timer = setTimeout(() => { waitingForChord = false; }, 900);
+    } else if (key === 't') {
+      event.preventDefault();
+      const opener = document.getElementById('open-add-tool-btn');
+      if (opener) opener.click();
+      else window.location.href = '/tools?add=1';
+    } else if (key === 'p') {
+      event.preventDefault();
+      window.location.href = '/preflight';
+    }
+  });
+}
diff --git a/ui/src/js/theme.js b/ui/src/js/theme.js
new file mode 100644
index 0000000..a2be019
--- /dev/null
+++ b/ui/src/js/theme.js
@@ -0,0 +1,51 @@
+function apply(theme) {
+  document.documentElement.dataset.theme = theme;
+  for (const button of document.querySelectorAll('[data-theme-pref]')) {
+    const active = button.dataset.themePref === theme;
+    button.classList.toggle('active', active);
+    button.setAttribute('aria-pressed', active ? 'true' : 'false');
+  }
+}
+
+function applyPalette(palette) {
+  document.documentElement.dataset.palette = palette;
+  for (const button of document.querySelectorAll('[data-palette-pref]')) {
+    const active = button.dataset.palettePref === palette;
+    button.classList.toggle('active', active);
+    button.setAttribute('aria-pressed', active ? 'true' : 'false');
+  }
+}
+
+/** System Settings is another window, so coming back is the moment a new accent color can appear. */
+function followSystemAccent() {
+  window.addEventListener('focus', async () => {
+    if (document.documentElement.dataset.accent === undefined) return;
+    try {
+      const { accent } = await (await fetch('/api/accent')).json();
+      if (accent) document.documentElement.dataset.accent = accent;
+    } catch { /* The current accent stays. */ }
+  });
+}
+
+export function setupTheme() {
+  followSystemAccent();
+  document.addEventListener('submit', event => {
+    const form = event.target.closest('[data-palette-switch]');
+    const palette = event.submitter?.dataset.palettePref;
+    if (!form || !palette) return;
+    event.preventDefault();
+    applyPalette(palette);
+    fetch(form.action, { method: 'POST', body: new URLSearchParams({ palette }), redirect: 'manual' }).catch(() => {});
+  });
+
+  document.addEventListener('submit', event => {
+    const form = event.target.closest('[data-theme-switch]');
+    if (!form) return;
+    const button = event.submitter;
+    if (!button?.dataset.themePref) return;
+    event.preventDefault();
+    const theme = button.dataset.themePref;
+    apply(theme);
+    fetch(form.action, { method: 'POST', body: new URLSearchParams({ theme }), redirect: 'manual' }).catch(() => {});
+  });
+}
diff --git a/ui/src/js/tools-table.js b/ui/src/js/tools-table.js
new file mode 100644
index 0000000..8976209
--- /dev/null
+++ b/ui/src/js/tools-table.js
@@ -0,0 +1,65 @@
+import { matchesTerms } from './dom.js';
+
+function closeMenus() {
+  for (const menu of document.querySelectorAll('.tool-context-menu:not([hidden])')) {
+    menu.hidden = true;
+    menu.closest('.tool-more-wrap')?.querySelector('[data-tool-menu-btn]')?.setAttribute('aria-expanded', 'false');
+  }
+}
+
+export function setupToolsTable() {
+  const filter = document.querySelector('[data-tools-table-filter]');
+  if (filter) {
+    const rows = [...document.querySelectorAll('[data-tool-row]')];
+    const count = document.querySelector('[data-tools-count]');
+    const empty = document.querySelector('[data-tools-empty]');
+    filter.addEventListener('input', () => {
+      let visible = 0;
+      for (const row of rows) {
+        row.hidden = !matchesTerms(row.dataset.search || row.textContent, filter.value);
+        if (!row.hidden) visible++;
+      }
+      if (count) {
+        count.textContent = `${visible} of ${rows.length} tools shown`;
+        count.hidden = !filter.value.trim();
+      }
+      if (empty) empty.hidden = visible > 0;
+    });
+  }
+
+  document.addEventListener('click', event => {
+    const trigger = event.target.closest('[data-tool-menu-btn]');
+    if (trigger) {
+      event.preventDefault();
+      const menu = trigger.closest('.tool-more-wrap')?.querySelector('.tool-context-menu');
+      const wasOpen = menu && !menu.hidden;
+      closeMenus();
+      if (menu && !wasOpen) {
+        menu.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        menu.querySelector('button, a')?.focus();
+      }
+      return;
+    }
+    for (const [attribute, selector] of [['[data-tool-menu-update]', 'form.tool-update-form'], ['[data-tool-menu-uninstall]', 'form.tool-uninstall-form']]) {
+      const item = event.target.closest(attribute);
+      if (item) {
+        event.preventDefault();
+        item.closest('tr')?.querySelector(selector)?.requestSubmit();
+        closeMenus();
+        return;
+      }
+    }
+    if (!event.target.closest('.tool-context-menu')) closeMenus();
+  });
+
+  document.addEventListener('keydown', event => {
+    if (event.key !== 'Escape') return;
+    const open = document.querySelector('.tool-context-menu:not([hidden])');
+    if (!open) return;
+    event.stopPropagation();
+    const trigger = open.closest('.tool-more-wrap')?.querySelector('[data-tool-menu-btn]');
+    closeMenus();
+    trigger?.focus();
+  }, true);
+}
diff --git a/ui/src/js/versions-filter.js b/ui/src/js/versions-filter.js
new file mode 100644
index 0000000..7b596e1
--- /dev/null
+++ b/ui/src/js/versions-filter.js
@@ -0,0 +1,90 @@
+import { isPlainClick, matchesTerms, replaceQuery } from './dom.js';
+
+export function setupVersionsFilter() {
+  const input = document.getElementById('installed-version-filter');
+  if (!input) return;
+  const form = input.closest('form');
+  const kindField = form.querySelector('input[name="kind"]');
+  const links = [...document.querySelectorAll('[data-version-kind]')];
+  const rows = [...document.querySelectorAll('tr[data-kind]')];
+  const cards = [...document.querySelectorAll('tbody.channel-card[data-channel-card]')];
+  const counter = document.querySelector('[data-versions-count]');
+  const emptyRow = document.querySelector('tr.empty-row');
+  const reset = document.querySelector('[data-filter-reset]');
+  let activeKind = kindField.value;
+
+  function matchesKind(row) {
+    if (activeKind === 'sdks') return row.dataset.kind === 'sdk';
+    if (activeKind === 'runtimes') return row.dataset.kind === 'runtime';
+    if (activeKind === 'previews') return row.dataset.preview === 'true';
+    return true;
+  }
+
+  function run() {
+    let visible = 0;
+    for (const row of rows) {
+      row.hidden = !(matchesKind(row) && matchesTerms(row.textContent, input.value));
+      if (!row.hidden) visible++;
+    }
+    for (const card of cards) card.hidden = card.querySelectorAll('tr[data-kind]:not([hidden])').length === 0;
+    const filtered = activeKind !== 'all' || input.value.trim() !== '';
+    if (counter) {
+      counter.textContent = `${visible} of ${rows.length} installations shown`;
+      counter.hidden = !filtered;
+    }
+    if (reset) reset.hidden = !filtered;
+    if (emptyRow) emptyRow.hidden = visible > 0;
+    replaceQuery(url => {
+      url.hash = '';
+      if (input.value.trim()) url.searchParams.set('q', input.value.trim());
+      else url.searchParams.delete('q');
+      if (activeKind !== 'all') url.searchParams.set('kind', activeKind);
+      else url.searchParams.delete('kind');
+    });
+  }
+
+  function syncLinks() {
+    for (const link of links) {
+      const active = link.dataset.versionKind === activeKind;
+      link.classList.toggle('active', active);
+      if (active) link.setAttribute('aria-current', 'page');
+      else link.removeAttribute('aria-current');
+    }
+    kindField.value = activeKind;
+  }
+
+  for (const link of links) {
+    link.addEventListener('click', event => {
+      if (!isPlainClick(event)) return;
+      event.preventDefault();
+      const clicked = link.dataset.versionKind;
+      activeKind = clicked === activeKind ? 'all' : clicked;
+      syncLinks();
+      run();
+    });
+  }
+
+  reset?.addEventListener('click', event => {
+    if (!isPlainClick(event)) return;
+    event.preventDefault();
+    activeKind = 'all';
+    input.value = '';
+    syncLinks();
+    run();
+    input.focus();
+  });
+
+  input.addEventListener('input', run);
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    run();
+  });
+
+  document.addEventListener('click', event => {
+    const collapse = event.target.closest('[data-collapse-channel]');
+    if (!collapse) return;
+    event.preventDefault();
+    const collapsed = collapse.closest('tbody.channel-card')?.classList.toggle('collapsed');
+    collapse.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+  });
+}
diff --git a/ui/src/styles.css b/ui/src/styles.css
deleted file mode 100644
index 29aeb71..0000000
--- a/ui/src/styles.css
+++ /dev/null
@@ -1,231 +0,0 @@
-:root {
-  color-scheme: light;
-  --canvas: #f6f8fb; --panel: #fff; --line: #e4e8ee; --text: #242424;
-  --muted: #616b78; --brand-soft: #e8f1fc; --brand: #0f6cbd;
-}
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  --canvas: #141820; --panel: #1c222c; --line: #303947; --text: #f5f5f5;
-  --muted: #a5afbd; --brand-soft: #25374e; --brand: #80baff;
-}
-@media (prefers-color-scheme: dark) {
-  :root[data-theme="auto"] {
-    color-scheme: dark;
-    --canvas: #141820; --panel: #1c222c; --line: #303947; --text: #f5f5f5;
-    --muted: #a5afbd; --brand-soft: #25374e; --brand: #80baff;
-  }
-}
-* { box-sizing: border-box; }
-body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; }
-button, input { font: inherit; }
-svg { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
-[hidden] { display: none !important; }
-a { color: var(--brand); }
-:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
-.app-header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--panel); }
-.brand, .header-actions { display: flex; align-items: center; gap: 14px; }
-.brand strong { font-size: 17px; letter-spacing: -.3px; }
-.brand-logo { width: 37px; height: 37px; object-fit: contain; }
-#theme-toggle { width: 34px; min-width: 34px; }
-.workspace { display: grid; grid-template-columns: 222px minmax(0, 1fr); min-height: calc(100vh - 68px); }
-.sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 28px 14px; display: flex; flex-direction: column; gap: 10px; }
-.sidebar-label { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; margin: 0 12px 8px; }
-.nav-link { display: flex; align-items: center; gap: 12px; color: var(--text); padding: 11px 12px; border-radius: 6px; text-decoration: none; }
-.nav-link[aria-current] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
-.nav-link:hover { background: var(--brand-soft); }
-.sidebar-footer { margin-top: auto; padding: 40px 10px 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
-.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #107c41; }
-main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 34px 44px 28px; }
-.breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 25px; }
-.breadcrumb span { padding: 0 9px; opacity: .6; }
-.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 29px; }
-h1 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.25; letter-spacing: -.8px; font-weight: 600; margin: 0; }
-h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
-h3 { font-size: 18px; font-weight: 600; }
-.muted { color: var(--muted); }
-.intro { margin: 10px 0 0; font-size: 14px; }
-.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 32px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); padding: 5px 12px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
-.button:hover { background: var(--brand-soft); }
-.button:active { transform: translateY(1px); }
-.button.primary { background: #0f6cbd; color: white; border-color: #0f6cbd; }
-.button.primary:hover { background: #115ea3; }
-.button svg { width: 16px; height: 16px; }
-.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 28px; }
-.summary-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 4px #00000003; padding: 20px 22px; gap: 9px; }
-.summary-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
-.summary-top svg { color: var(--brand); }
-.summary-number { font-size: 36px; line-height: 45px; font-weight: 600; letter-spacing: -1px; }
-.summary-card:last-child .summary-number { font-size: 26px; }
-.summary-card .muted { font-size: 12px; overflow-wrap: anywhere; }
-.inventory { margin-top: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; scroll-margin-top: 20px; }
-.inventory-heading { display: flex; align-items: center; justify-content: space-between; padding: 23px 24px 8px; gap: 16px; }
-.inventory-heading p { margin: 7px 0 0; font-size: 12px; }
-.inventory-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
-.inventory-count { flex-shrink: 0; white-space: nowrap; }
-.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 9px 24px 16px; }
-.type-filter { display: flex; align-items: center; gap: 24px; }
-.type-filter a { display: block; color: var(--text); text-decoration: none; padding: 14px 0; border-bottom: 3px solid transparent; }
-.type-filter a[aria-current] { border-bottom-color: var(--brand); font-weight: 600; }
-.type-filter a:focus-visible { outline-offset: -2px; }
-.filter-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
-.filter-input { display: flex; align-items: center; gap: 8px; width: 280px; max-width: 100%; padding: 0 10px; min-height: 32px; border: 1px solid var(--line); border-bottom-color: var(--muted); border-radius: 4px; background: var(--panel); }
-.filter-input svg { color: var(--muted); width: 16px; height: 16px; }
-.filter-input input { min-width: 0; width: 100%; color: var(--text); background: transparent; border: 0; padding: 5px 0; }
-.filter-input input::placeholder { color: var(--muted); }
-.sdk-version-filters, .sdk-lifecycle-filter { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
-.sdk-version-filters legend, .sdk-lifecycle-filter legend { margin-right: 2px; color: var(--muted); font-size: 12px; }
-.sdk-version-filters label, .sdk-lifecycle-filter label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
-.sdk-version-filters input, .sdk-lifecycle-filter input { accent-color: var(--brand); }
-.sdk-checksum { margin-top: 5px; font-size: 11px; }
-.sdk-checksum summary { color: var(--muted); cursor: pointer; }
-.sdk-checksum code { display: block; max-width: 360px; margin-top: 4px; overflow-wrap: anywhere; font-size: 10px; }
-.sdk-cves { margin-top: 4px; font-size: 10px; }
-.sdk-cves summary { color: var(--brand); cursor: pointer; font-weight: 600; }
-.sdk-cve-links { display: flex; flex-wrap: wrap; gap: 4px 9px; max-width: 300px; margin-top: 4px; }
-.sdk-cve-links a, .sdk-cve-links span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; white-space: nowrap; }
-.lifecycle-badge { font-size: 11px; }
-.eol-badge { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid #a4262c; border-radius: 999px; background: #a4262c; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; }
-.sdk-latest-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 16px 18px; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--brand-soft); }
-.sdk-latest-card > div { display: grid; gap: 5px; }
-.sdk-latest-card strong { font-size: 20px; font-weight: 600; }
-.sdk-latest-card p { margin: 0; font-size: 12px; }
-.sdk-latest-kicker { color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
-.sdk-major-groups { display: grid; gap: 10px; padding: 0 16px 16px; }
-.sdk-major-group { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
-.sdk-major-group > summary { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; cursor: pointer; background: var(--canvas); }
-.sdk-major-group > summary strong { font-size: 13px; font-weight: 600; }
-.sdk-major-group > summary > span:last-child { margin-left: auto; font-size: 11px; }
-.sdk-major-group > summary .sdk-support-date { margin-left: 8px; font-size: 11px; }
-.sdk-major-group .table-scroll { border-top: 1px solid var(--line); }
-.table-scroll { overflow: auto; }
-.table-scroll:focus-visible { outline-offset: -2px; }
-table { border-collapse: collapse; width: 100%; min-width: 660px; text-align: left; }
-thead { background: var(--canvas); }
-th { height: 42px; font-size: 12px; font-weight: 400; }
-th a { display: inline-block; color: var(--text); text-decoration: none; padding: 8px 0; }
-th a:focus-visible { outline-offset: -2px; }
-td { height: 76px; border-top: 1px solid var(--line); }
-th, td { padding: 8px 12px; }
-th:first-child, td:first-child { padding-left: 24px; width: 34%; }
-th:nth-child(2), td:nth-child(2) { width: 145px; }
-td:last-child { padding-right: 24px; }
-.installation-name { display: flex; align-items: center; gap: 12px; }
-.installation-name strong { font-weight: 600; font-size: 13px; }
-.installation-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
-.framework-name { display: block; font-size: 11px; margin-top: 4px; }
-.version-badge, .installation-path, .host-info code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
-.installation-paths { display: flex; flex-direction: column; gap: 4px; }
-.installation-path { color: var(--muted); white-space: nowrap; }
-.installation-actions { width: 110px; text-align: right; }
-.installation-actions form { margin: 0; }
-fluent-badge:not(:defined) { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; background: var(--brand-soft); color: var(--brand); }
-.inventory-footer { display: flex; justify-content: space-between; gap: 12px; padding: 13px 24px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }
-.empty-state { padding: 48px 24px; text-align: center; }
-.empty-state h3 { margin: 14px 0 8px; }
-.empty-state p { margin: 8px auto; max-width: 480px; }
-.error-state h3 { color: #c50f1f; }
-.host-info { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; font-size: 11px; color: var(--muted); }
-.host-info code { overflow-wrap: anywhere; }
-.scope-note { max-width: 760px; font-size: 11px; line-height: 1.7; margin: 12px 0; }
-.working-directory { display: flex; flex-direction: column; gap: 10px; padding: 17px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
-.working-directory-heading { display: flex; align-items: center; gap: 10px; }
-.working-directory-heading > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.working-directory-heading strong { font-size: 13px; }
-.working-directory-heading .muted { font-size: 11px; }
-.context-icon, .tool-icon, .search-icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--brand); }
-.context-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--brand-soft); }
-.context-icon svg { width: 16px; height: 16px; }
-.context-badge, .search-source { margin-left: auto; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; white-space: nowrap; }
-.working-directory code { color: var(--muted); overflow-wrap: anywhere; padding-left: 38px; font-size: 12px; }
-.action-notice { color: var(--text); }
-.action-notice.error-state { color: #c50f1f; background: transparent; }
-.setup-card { margin-top: 20px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
-.setup-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
-.setup-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
-.setup-card-actions form { margin: 0; }
-.setup-card .button { transition: none; }
-.setup-card .button:active { transform: none; }
-.setup-title { display: flex; align-items: flex-start; gap: 12px; }
-.setup-title p { margin: 6px 0 0; font-size: 12px; }
-.setup-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; color: var(--brand); background: var(--brand-soft); }
-.setup-icon svg { width: 18px; height: 18px; }
-.setup-installed { display: flex; flex-direction: column; gap: 5px; margin-top: 24px; padding: 16px; background: var(--brand-soft); border-radius: 7px; }
-.setup-installed span { font-size: 12px; overflow-wrap: anywhere; }
-.setup-ready { display: flex; align-items: center; gap: 8px; font-weight: 600; }
-.setup-ready input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
-.setup-install-summary { margin-top: 24px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 7px; }
-.setup-install-summary p { margin: 4px 0 0; font-size: 12px; }
-.setup-install-summary code, .setup-note code { overflow-wrap: anywhere; }
-.setup-version-form { display: flex; align-items: center; gap: 8px; }
-.setup-version-picker select { min-height: 32px; min-width: 170px; padding: 5px 28px 5px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--canvas); }
-.setup-install-button { min-width: 34px; padding-inline: 8px; }
-.setup-release-list { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
-.setup-release-list ul { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 9px 0 0; padding: 0; list-style: none; }
-.setup-release-list li { display: flex; align-items: baseline; gap: 7px; }
-.setup-release-list li span { font-size: 11px; }
-.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-.setup-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11px; }
-.manifest-action { margin: 0; }
-.manifest-status { font-size: 11px; white-space: nowrap; }
-.tool-search { position: relative; overflow: hidden; margin-top: 20px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
-.tool-search::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand); opacity: .75; }
-.tool-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.tool-search-title { display: flex; align-items: center; gap: 10px; }
-.search-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--brand-soft); }
-.search-icon svg { width: 17px; height: 17px; }
-.tool-search-form { margin-top: 16px; }
-.tool-search-form label { font-weight: 600; }
-.tool-search-title p { margin: 2px 0 0; font-size: 11px; }
-.tool-search-controls { display: flex; gap: 8px; width: min(620px, 100%); }
-.tool-search-controls input { min-width: 0; flex: 1; color: var(--text); background: var(--canvas); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font-size: 13px; }
-.search-results { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
-.search-results h3 { margin: 0 0 12px; font-size: 15px; }
-.search-result-list { display: grid; gap: 8px; }
-.search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); transition: background-color .16s ease, padding-inline .16s ease; }
-.search-result:hover { padding-inline: 8px; background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
-.search-result > div:first-child { display: flex; flex-direction: column; gap: 3px; }
-.search-result-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; white-space: nowrap; }
-.verified { color: #107c41; font-weight: 600; }
-.tool-install-actions, .tool-action { display: flex; gap: 7px; }
-.button.danger { color: #fff; background: #c50f1f; border-color: #c50f1f; }
-.button.danger:hover { color: #fff; background: #a4262c; border-color: #a4262c; }
-.tool-tabs { display: flex; gap: 4px; margin-top: 20px; border-bottom: 1px solid var(--line); }
-.tool-tab { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); padding: 11px 18px; border-bottom: 3px solid transparent; text-decoration: none; }
-.tool-tab:hover { color: var(--text); background: var(--brand-soft); }
-.tool-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
-.tool-tab-count { font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
-.tool-panel { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
-.tool-name { display: flex; align-items: center; gap: 10px; }
-.tool-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--brand-soft); }
-.tool-icon svg { width: 15px; height: 15px; }
-.tools-table tbody tr { transition: background-color .16s ease; }
-.tools-table tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 35%, transparent); }
-.tools-table code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
-.tools-table td { height: 60px; }
-.tool-manifest { white-space: nowrap; color: var(--muted); }
-.tools-table .version-badge { white-space: nowrap; }
-.tool-search, .action-notice, .tool-panel { animation: tool-enter .28s cubic-bezier(.2, .8, .2, 1) both; }
-.tool-panel { animation-delay: .04s; }
-@keyframes tool-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
-}
-.skip-link { position: fixed; top: -100px; left: 12px; z-index: 20; padding: 12px; background: var(--panel); color: var(--brand); }
-.skip-link:focus-visible { top: 8px; }
-@media (min-width: 1500px) { main { padding-top: 44px; } }
-@media (max-width: 1100px) { main { padding: 28px 24px; } .workspace { grid-template-columns: 180px minmax(0, 1fr); } .summary-grid { gap: 12px; } .summary-card { padding: 16px; } }
-@media (max-width: 760px) {
-  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .app-header { padding: 0 18px; }
-  .sidebar { flex-direction: row; padding: 10px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
-  .sidebar-label, .sidebar-footer { display: none; } .nav-link { padding: 8px 10px; }
-  .header-actions > :first-child { display: none; } main { padding: 24px 18px; } .breadcrumb { margin-bottom: 20px; }
-  .working-directory-heading { align-items: flex-start; } .context-badge { display: none; } .working-directory code { padding-left: 38px; }
-  .action-notice { align-items: flex-start; flex-direction: column; } .tool-search-controls { width: 100%; }
-  .setup-card { padding: 20px 18px; } .setup-card-heading { align-items: flex-start; flex-direction: column; } .setup-card-actions { align-self: stretch; justify-content: flex-end; } .setup-version-form { width: 100%; } .setup-version-picker { flex: 1; } .setup-version-picker select { width: 100%; }
-  .search-result { grid-template-columns: minmax(0, 1fr); gap: 9px; } .search-result-meta { white-space: normal; } .tool-install-actions { flex-wrap: wrap; } .sdk-latest-card { align-items: flex-start; flex-direction: column; }
-  .summary-grid { grid-template-columns: minmax(0, 1fr); } .summary-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
-  .summary-top { grid-column: 1; gap: 12px; justify-content: flex-start; } .summary-number { grid-column: 2; grid-row: 1 / 3; }
-  .summary-card .muted { grid-column: 1; } .inventory-heading { padding: 20px 18px 8px; }
-  .inventory-toolbar { padding: 9px 18px 16px; } .filter-form { width: 100%; } .filter-input { flex: 1; width: auto; }
-  .inventory-footer { padding: 13px 18px; }
-}
diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
new file mode 100644
index 0000000..ab9118c
--- /dev/null
+++ b/ui/src/styles/base.css
@@ -0,0 +1,91 @@
+:where(*, *::before, *::after) { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font: 400 var(--t-md)/1.5 var(--sans);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, p, dl, dd { margin: 0; }
+h1 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
+h2 { font-size: var(--t-lg); font-weight: 600; }
+h3 { font-size: var(--t-md); font-weight: 600; }
+
+a { color: var(--brand); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+code, kbd {
+  font-family: var(--mono);
+  font-size: var(--t-xs);
+}
+
+kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 20px;
+  padding: 0 5px;
+  height: 20px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--surface-2);
+  color: var(--muted);
+}
+
+button, input, select { font: inherit; color: inherit; }
+
+:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+  border-radius: var(--r-sm);
+}
+main:focus-visible { outline: none; }
+
+.i { width: 18px; height: 18px; flex: none; }
+.i.sm { width: 16px; height: 16px; }
+.i.xs { width: 14px; height: 14px; }
+
+.muted { color: var(--muted); }
+.text-xs { font-size: var(--t-xs); }
+.spacer { flex: 1; }
+.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+
+.sr-only, .visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.skip-link {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  z-index: 100;
+  padding: 8px 12px;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-sm);
+  transform: translateY(-200%);
+}
+.skip-link:focus { transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms;
+    animation-duration: 0.01ms;
+    scroll-behavior: auto;
+  }
+}
+
+@media (forced-colors: active) {
+  .button, .seg, .toggle-chip, .search-field, .badge, .channel-tag { border: 1px solid ButtonText; }
+  .seg.active, .toggle-chip.active, .nav-link[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .tl-bar { border: 1px solid CanvasText; forced-color-adjust: none; }
+  .row-selected { outline: 2px solid Highlight; outline-offset: -2px; }
+}
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
new file mode 100644
index 0000000..18fc60d
--- /dev/null
+++ b/ui/src/styles/components.css
@@ -0,0 +1,302 @@
+/* Buttons */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--control);
+  padding: 0 12px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--text);
+  font-size: var(--t-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--ease), border-color var(--ease), color var(--ease);
+}
+.button:hover { background: var(--surface-2); text-decoration: none; }
+.button:disabled { opacity: .6; cursor: not-allowed; }
+.button.sm { height: var(--control-sm); padding: 0 10px; font-size: var(--t-xs); }
+.button.lg { height: 40px; padding: 0 16px; font-size: var(--t-md); }
+.button.icon { width: var(--control); padding: 0; }
+.button.icon.sm { width: var(--control-sm); }
+.button.primary { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
+.button.primary:hover { background: color-mix(in srgb, var(--brand-fill) 88%, black); }
+.button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
+.button.ghost:hover { background: var(--surface-2); color: var(--text); }
+.button.danger { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
+.button.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
+/* Removing stays available but only turns red when it is about to happen. */
+.button.remove { background: transparent; border-color: var(--line); color: var(--text-2); }
+.button.remove:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
+.button.is-busy { opacity: .75; cursor: progress; }
+.button.copied { color: var(--ok); }
+
+/* Status */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: var(--r-full);
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: var(--t-xs);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.badge.sm { height: 20px; padding: 0 7px; }
+.badge.ok { background: var(--ok-soft); color: var(--ok); }
+.badge.warn { background: var(--warn-soft); color: var(--warn); }
+.badge.bad { background: var(--bad-soft); color: var(--bad); }
+.badge.brand { background: var(--brand-soft); color: var(--brand); }
+
+.channel-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-sm);
+  color: var(--muted);
+  font-size: var(--t-xs);
+  font-weight: 500;
+}
+
+.v-current { font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; }
+.v-arrow { color: var(--muted); }
+.v-patch { font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; color: var(--warn); }
+.v-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: var(--t-xs); }
+.version-patch-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
+.summary-count { font-size: var(--t-xs); color: var(--muted); }
+
+/* Filters: one model everywhere. */
+.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: var(--control); }
+.filter-group { display: flex; align-items: center; gap: 8px; }
+.filter-form { display: flex; align-items: center; gap: 8px; margin: 0; }
+.filter-count { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
+.filter-reset { font-size: var(--t-sm); }
+
+.segmented {
+  display: inline-flex;
+  height: var(--control);
+  padding: 2px;
+  gap: 2px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+}
+.seg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--muted);
+  font-size: var(--t-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.seg:hover { color: var(--text); text-decoration: none; }
+.seg:disabled { opacity: .55; cursor: not-allowed; }
+.seg.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
+.seg-count { font-size: var(--t-xs); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
+
+.toggle-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--control);
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--muted);
+  font-size: var(--t-sm);
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.toggle-chip:hover { color: var(--text); border-color: var(--line-strong); text-decoration: none; }
+.chip-box { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
+.chip-box .i { width: 10px; height: 10px; stroke-width: 3; opacity: 0; }
+.toggle-chip.active { color: var(--text); border-color: var(--line-strong); }
+.toggle-chip.active .chip-box { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
+.toggle-chip.active .chip-box .i { opacity: 1; }
+
+.search-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 240px;
+  height: var(--control);
+  padding: 0 10px;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-sm);
+  color: var(--muted);
+}
+.search-field.wide { width: 100%; }
+.search-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
+.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--t-sm); }
+.search-field input::placeholder { color: var(--muted); }
+
+.menu { position: relative; }
+.menu summary { list-style: none; cursor: pointer; }
+.menu summary::-webkit-details-marker { display: none; }
+.menu-panel, .tool-context-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 30;
+  display: grid;
+  min-width: 190px;
+  padding: 4px;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-sm);
+  box-shadow: var(--shadow);
+}
+.menu-item, .tool-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 30px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--text-2);
+  font-size: var(--t-sm);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.menu-item:hover, .tool-menu-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
+.menu-item.active { color: var(--brand); font-weight: 500; }
+.tool-menu-item kbd { margin-left: auto; }
+.tool-menu-item.danger:hover { background: var(--bad-soft); color: var(--bad); }
+.tool-context-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
+
+/* Surfaces */
+.card, .overview-card, .inventory.tool-panel, .setup-card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+}
+
+.empty-state { display: grid; justify-items: center; gap: 6px; padding: 48px 24px; text-align: center; }
+.empty-state h2, .empty-state h3 { font-size: var(--t-lg); }
+.error-state h2, .error-state h3 { color: var(--bad); }
+
+.action-notice {
+  padding: 10px 14px;
+  border-radius: var(--r-sm);
+  background: var(--ok-soft);
+  color: var(--ok);
+  font-size: var(--t-sm);
+}
+.action-notice.error-state { background: var(--bad-soft); color: var(--bad); }
+
+.drawer-command-box {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 40px 10px 12px;
+  background: var(--code-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  font-family: var(--mono);
+  font-size: var(--t-xs);
+}
+.drawer-command-box code { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--code-text); }
+.drawer-command-box .copy-btn { position: absolute; top: 4px; right: 4px; }
+.cmd-prompt { color: var(--muted); user-select: none; }
+
+.drawer-code-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 4px 4px 4px 10px;
+  background: var(--code-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+}
+.drawer-code-box code { overflow-wrap: anywhere; color: var(--code-text); }
+
+.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; cursor: pointer; }
+.toggle-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.toggle-slider { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); pointer-events: none; transition: background var(--ease); }
+.toggle-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--r-full); background: var(--muted); transition: transform var(--ease), background var(--ease); }
+.toggle-switch input:checked + .toggle-slider { background: var(--brand-fill); border-color: var(--brand-fill); }
+.toggle-switch input:checked + .toggle-slider::after { transform: translateX(16px); background: var(--on-brand); }
+.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--brand); outline-offset: 2px; }
+
+.theme-switch { display: inline-flex; gap: 2px; padding: 2px; margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
+.theme-switch-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; min-width: 28px; justify-content: center; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: var(--t-sm); cursor: pointer; }
+.theme-switch-btn:hover { color: var(--text); }
+.theme-switch-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
+
+.remove-modal-notice { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--info-soft); font-size: var(--t-sm); }
+.notice-lock { color: var(--info); display: inline-flex; }
+.remove-modal-notice strong { font-weight: 500; }
+
+/* Copying needs script, so the controls only appear once it has loaded. */
+html:not(.js) .copy-btn { display: none; }
+
+/* Success confirms briefly and leaves; the changed row keeps the eye on the result. */
+@keyframes toast-life {
+  0% { opacity: 0; transform: translate(-50%, -8px); visibility: visible; }
+  6%, 88% { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
+  100% { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; }
+}
+@keyframes toast-steps {
+  0%, 99% { visibility: visible; }
+  100% { visibility: hidden; }
+}
+@keyframes check-pop {
+  0%, 10% { transform: scale(0); }
+  18% { transform: scale(1.2); }
+  24%, 100% { transform: scale(1); }
+}
+@keyframes row-flash {
+  0%, 60% { background: var(--ok-soft); }
+  100% { background: transparent; }
+}
+.toast {
+  position: fixed;
+  top: 64px;
+  left: 50%;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px 8px 8px;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-full);
+  box-shadow: var(--shadow);
+  font-size: var(--t-sm);
+  white-space: nowrap;
+  transform: translateX(-50%);
+  animation: toast-life 3200ms ease forwards;
+}
+.toast:hover { animation-play-state: paused; }
+.toast-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--ok-soft); color: var(--ok); animation: check-pop 3200ms ease both; }
+tr.row-changed { animation: row-flash 2600ms ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .toast { animation: toast-steps 3200ms steps(1) forwards; }
+  .toast-check { animation: none; }
+  tr.row-changed { animation: none; }
+}
diff --git a/ui/src/styles/index.css b/ui/src/styles/index.css
new file mode 100644
index 0000000..12daacb
--- /dev/null
+++ b/ui/src/styles/index.css
@@ -0,0 +1,19 @@
+/*
+  Layer order keeps specificity flat. The rule below stays outside every layer on purpose:
+  unlayered rules beat layered ones, so the hidden attribute always wins without !important.
+*/
+@layer tokens, base, layout, components, pages;
+
+@import './tokens.css' layer(tokens);
+@import './palettes.css' layer(tokens);
+@import './base.css' layer(base);
+@import './layout.css' layer(layout);
+@import './components.css' layer(components);
+@import './overlays.css' layer(components);
+@import './versions.css' layer(pages);
+@import './tools.css' layer(pages);
+@import './overview.css' layer(pages);
+@import './settings.css' layer(pages);
+
+[hidden] { display: none; }
+
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
new file mode 100644
index 0000000..d8c1fcd
--- /dev/null
+++ b/ui/src/styles/layout.css
@@ -0,0 +1,144 @@
+.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
+
+.rail {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 16px 12px;
+  background: var(--surface);
+  border-right: 1px solid var(--line);
+}
+
+.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
+.brand img { width: 30px; height: 30px; object-fit: contain; }
+.brand b { display: block; font-size: var(--t-md); font-weight: 600; }
+.brand small { display: block; font-size: var(--t-xs); color: var(--muted); }
+
+.rail-label {
+  padding: 16px 10px 6px;
+  font-size: var(--t-xs);
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  transition: background var(--ease), color var(--ease);
+}
+.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
+.nav-link[aria-current] { background: var(--brand-soft); color: var(--text); font-weight: 500; }
+.nav-link[aria-current] .i { color: var(--brand); }
+/* Counts and the review badge share one centered column, so the digits line up. */
+.nav-count, .nav-link .nav-badge {
+  display: inline-grid;
+  place-items: center;
+  margin-left: auto;
+  min-width: 24px;
+  padding: 0 4px;
+  font-size: var(--t-xs);
+  font-variant-numeric: tabular-nums;
+}
+.nav-count { color: var(--muted); }
+
+.rail-foot { margin-top: auto; display: grid; gap: 8px; }
+.ws-card { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
+.ws-card .k { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); }
+.ws-card b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-card code { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+
+.main { min-width: 0; display: flex; flex-direction: column; }
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 52px;
+  padding: 0 max(32px, calc(100% - 1600px + 32px)) 0 32px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+}
+.crumbs { flex: 1; font-size: var(--t-md); min-width: 0; }
+.crumbs b { font-weight: 500; }
+
+.cmdk {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 300px;
+  height: var(--control);
+  padding: 0 6px 0 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  color: var(--muted);
+  cursor: pointer;
+  text-align: left;
+}
+.cmdk:hover { border-color: var(--line-strong); }
+.cmdk span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.checked {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--control);
+  padding: 0 8px;
+  border-radius: var(--r-sm);
+  color: var(--muted);
+  font-size: var(--t-sm);
+  white-space: nowrap;
+}
+.checked:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
+
+.content {
+  flex: 1;
+  width: 100%;
+  max-width: 1600px;
+  padding: 28px 32px 56px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.page-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+}
+.intro { margin-top: 2px; }
+.overview-header-actions, .tools-header-actions, .inventory-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.scope-note { font-size: var(--t-sm); max-width: 80ch; }
+
+@media (max-width: 960px) {
+  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
+  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
+  .brand { padding: 0 12px 0 0; }
+  .rail-label, .rail-foot { display: none; }
+  .nav-count { margin-left: 4px; }
+  .nav-badge { margin-left: 4px; }
+  .topbar, .content { padding-inline: 16px; }
+  .cmdk { width: auto; flex: 1; }
+  .crumbs { display: none; }
+}
+
+@media (max-width: 640px) {
+  .cmdk span, .cmdk kbd, .checked span { display: none; }
+  .cmdk { flex: 0 0 auto; width: var(--control); justify-content: center; padding: 0; }
+  .topbar { gap: 8px; }
+  .topbar .theme-switch { margin-left: auto; }
+}
diff --git a/ui/src/styles/overlays.css b/ui/src/styles/overlays.css
new file mode 100644
index 0000000..62274a2
--- /dev/null
+++ b/ui/src/styles/overlays.css
@@ -0,0 +1,166 @@
+/* Detail drawer: lies above the list, so opening it never reflows the columns. */
+.detail-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 25;
+  width: min(460px, 100vw);
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border-left: 1px solid var(--line-strong);
+  box-shadow: var(--shadow);
+}
+.drawer-header { display: grid; gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
+.drawer-eyebrow-row { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--t-sm); }
+.drawer-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.drawer-title { font-family: var(--mono); font-size: var(--t-xl); font-weight: 600; overflow-wrap: anywhere; }
+.drawer-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 16px 20px; }
+.drawer-section { display: grid; gap: 8px; min-width: 0; }
+.drawer-section-title { font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
+.drawer-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: var(--t-sm); }
+.drawer-dl dt { color: var(--muted); }
+.drawer-dl dd { min-width: 0; overflow-wrap: anywhere; }
+.drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
+.drawer-footer form { margin: 0; }
+.drawer-status-line { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--text-2); }
+.drawer-status-line .i { color: var(--ok); }
+.drawer-alert { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--t-sm); }
+.drawer-alert strong { font-weight: 600; }
+.drawer-alert-warn { background: var(--warn-soft); }
+.drawer-alert-warn strong { color: var(--warn); }
+.drawer-alert-bad { background: var(--bad-soft); }
+.drawer-alert-bad strong { color: var(--bad); }
+.drawer-alert .muted { color: var(--text-2); }
+.drawer-patch-box { display: grid; gap: 8px; }
+.drawer-patch-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.drawer-patch-header strong { font-family: var(--mono); font-size: var(--t-sm); }
+.drawer-cve-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.cve-pill { font-family: var(--mono); font-size: var(--t-xs); }
+.drawer-pkg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: var(--t-xs); color: var(--muted); }
+.drawer-pkg-name { font-family: var(--mono); overflow-wrap: anywhere; }
+.drawer-sha { color: var(--text-2); cursor: copy; }
+.drawer-path { cursor: copy; }
+
+/* Modal dialogs */
+dialog { color: var(--text); }
+dialog::backdrop { background: var(--scrim); }
+
+.remove-modal {
+  width: min(580px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  padding: 0;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow);
+}
+.remove-modal-inner { display: flex; flex-direction: column; gap: 14px; padding: 20px; margin: 0; }
+.remove-modal-head { display: flex; gap: 12px; align-items: flex-start; }
+.remove-modal-head h2 { font-size: var(--t-lg); overflow-wrap: anywhere; }
+.remove-modal-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); }
+.remove-modal-items { display: grid; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
+.remove-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
+.remove-item-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; }
+.remove-item-row + .remove-item-row { border-top: 1px solid var(--line); }
+.remove-item-row:hover { background: var(--surface-2); }
+.remove-item-row input { width: 16px; height: 16px; flex: none; accent-color: var(--brand-fill); }
+.remove-item-copy { display: grid; flex: 1; min-width: 0; }
+.remove-item-copy strong { font-weight: 500; font-size: var(--t-sm); }
+.remove-item-copy > code { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cleanup-strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
+.cleanup-strategy-card { display: grid; gap: 2px; padding: 10px 12px; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
+.cleanup-strategy-card strong { font-size: var(--t-sm); font-weight: 600; }
+.cleanup-strategy-card:hover { border-color: var(--line-strong); }
+.cleanup-strategy-card.active { border-color: var(--brand); background: var(--brand-soft); }
+
+/* Side sheets */
+.add-tool-sheet {
+  position: fixed;
+  inset: 0 0 0 auto;
+  z-index: 40;
+  width: min(640px, 100vw);
+  height: 100vh;
+  max-height: none;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  background: var(--surface);
+  border: 0;
+  border-left: 1px solid var(--line-strong);
+  box-shadow: var(--shadow);
+}
+.sheet-inner { display: flex; flex-direction: column; height: 100%; }
+.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
+.sheet-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.sheet-title-group h2 { font-size: var(--t-lg); }
+.search-source { font-size: var(--t-xs); color: var(--muted); }
+.sheet-controls { display: grid; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
+.sheet-results { flex: 1; min-height: 0; overflow-y: auto; }
+.sheet-channel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
+.sheet-channel-head::-webkit-details-marker { display: none; }
+.sheet-channel-head:hover { background: var(--surface-3); }
+.sheet-channel-chevron { display: inline-grid; color: var(--muted); transition: transform var(--ease); }
+.sheet-channel-group:not([open]) .sheet-channel-chevron { transform: rotate(-90deg); }
+.sheet-channel-head-main { display: flex; align-items: center; gap: 8px; flex: 1; }
+.row-command { font-size: var(--t-xs); }
+.row-command summary { width: fit-content; color: var(--muted); cursor: pointer; }
+.row-command summary:hover { color: var(--text); }
+.row-command .drawer-command-box { margin-top: 6px; }
+.sheet-channel-head-main strong { font-weight: 600; }
+.sheet-channel-count { font-size: var(--t-xs); }
+.sheet-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
+.sheet-result-item:hover { background: var(--surface-2); }
+.sheet-result-item form { margin: 0; }
+.sheet-result-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
+.sheet-result-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.sheet-result-top strong { font-weight: 600; font-size: var(--t-sm); }
+.sheet-result-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.sheet-result-meta span { display: inline-flex; align-items: center; gap: 4px; }
+.sheet-result-actions { display: flex; align-items: center; gap: 4px; }
+
+/* Command palette */
+.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); }
+.palette {
+  position: fixed;
+  top: 12vh;
+  left: 50%;
+  z-index: 51;
+  transform: translateX(-50%);
+  width: min(620px, calc(100vw - 32px));
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.palette .q { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-bottom: 1px solid var(--line); color: var(--muted); flex: none; }
+.palette .q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--t-md); }
+.palette .grp { padding: 6px; overflow-y: auto; }
+.palette .grp + .grp { border-top: 1px solid var(--line); }
+.grp-k { padding: 4px 8px; font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
+.opt { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--t-sm); }
+.opt:hover { text-decoration: none; }
+.opt > div { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opt b { font-weight: 500; color: var(--text); }
+.opt small { font-size: var(--t-xs); color: var(--muted); }
+.opt.selected, .opt:hover { background: var(--surface-2); }
+.palette .foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xs); flex: none; }
+.cmdk-empty { display: grid; gap: 10px; justify-items: start; padding: 16px 18px; color: var(--muted); }
+
+/* Confirmation as a page */
+.confirm-card { display: grid; gap: 14px; max-width: 640px; padding: 20px; }
+.confirm-items { margin: 0; padding-left: 18px; }
+
+/* Motion stays short and only explains where something came from; base.css turns it off on request. */
+@keyframes slide-in { from { transform: translateX(16px); opacity: 0; } }
+@keyframes rise-in { from { transform: translateY(6px); opacity: 0; } }
+@keyframes fade-in { from { opacity: 0; } }
+.detail-drawer:not([hidden]), .add-tool-sheet[open] { animation: slide-in 160ms ease-out; }
+.remove-modal[open] { animation: rise-in 140ms ease-out; }
+.palette:not([hidden]) { animation: fade-in 100ms ease-out; }
+dialog[open]::backdrop { animation: fade-in 140ms ease-out; }
diff --git a/ui/src/styles/overview.css b/ui/src/styles/overview.css
new file mode 100644
index 0000000..2505d86
--- /dev/null
+++ b/ui/src/styles/overview.css
@@ -0,0 +1,133 @@
+.overview-hero-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 440px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+}
+.hero-health-pane { display: flex; align-items: center; gap: 20px; padding: 20px; min-width: 0; }
+.hero-ring { position: relative; display: grid; place-items: center; width: 84px; height: 84px; flex: none; }
+.hero-ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--r-full);
+  background: var(--ring);
+  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 5.5px));
+}
+.hero-ring-inner { display: grid; justify-items: center; line-height: 1.1; }
+.hero-ring-inner strong { font-size: var(--t-2xl); font-weight: 600; }
+.hero-ring-inner span { font-size: var(--t-xs); color: var(--muted); }
+.hero-health-copy { display: grid; gap: 6px; min-width: 0; }
+.hero-eyebrow-row { display: flex; }
+.hero-headline { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
+.hero-meta-row { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-sm); color: var(--muted); }
+.hero-meta-row span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.hero-meta-row code { overflow-wrap: anywhere; }
+.hero-stats-grid { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); }
+.hero-stat-cell { display: grid; align-content: center; gap: 4px; padding: 12px 16px; }
+.hero-stat-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
+.hero-stat-cell:nth-child(even) { border-left: 1px solid var(--line); }
+.stat-top { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); }
+.stat-val-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
+.summary-number { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.overview-main-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
+.overview-main-grid > * { min-width: 0; }
+.overview-card { padding: 16px; min-width: 0; }
+.actions-card { display: grid; gap: 12px; }
+.card-top { display: grid; gap: 2px; }
+.action-list { display: grid; }
+.overview-action-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
+.overview-action-item + .overview-action-item { border-top: 1px solid var(--line); }
+.action-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); }
+.action-icon.bad { background: var(--bad-soft); color: var(--bad); }
+.action-icon.warn { background: var(--warn-soft); color: var(--warn); }
+.action-icon.info { background: var(--info-soft); color: var(--info); }
+.action-text { flex: 1; min-width: 0; }
+.action-text strong { font-weight: 600; font-size: var(--t-sm); }
+.action-text p { font-size: var(--t-sm); }
+.action-buttons { display: flex; align-items: center; gap: 6px; flex: none; }
+.overview-all-clear { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
+.overview-all-clear .i { color: var(--ok); margin-top: 2px; }
+.overview-all-clear strong { font-weight: 600; }
+
+.overview-side-stack { display: grid; gap: 16px; min-width: 0; }
+.ws-widget-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.ws-icon-box { color: var(--muted); display: inline-flex; flex: none; }
+.ws-head-copy { display: grid; min-width: 0; }
+.ws-head-copy code { color: var(--muted); overflow-wrap: anywhere; }
+.workspace-card { display: grid; gap: 12px; }
+.ws-dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 12px; font-size: var(--t-sm); }
+.ws-dl dt { color: var(--muted); }
+.ws-dl dd { min-width: 0; overflow-wrap: anywhere; }
+.ws-tools-dd { display: flex; flex-wrap: wrap; gap: 4px; }
+.ws-tool-pill { padding: 1px 6px; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
+.ws-tool-pill-link:hover { text-decoration: none; }
+.ws-tool-pill-link:hover .ws-tool-pill { border-color: var(--line-strong); }
+.shortcuts-card { display: grid; gap: 6px; }
+.shortcuts-list { display: grid; }
+.shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 6px; margin-inline: -6px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--t-sm); }
+.shortcut-row:hover { background: var(--surface-2); text-decoration: none; }
+.shortcut-row > span { display: inline-flex; align-items: center; gap: 8px; }
+
+.timeline-section { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); gap: 12px; }
+.inventory-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.tl-legend { display: flex; gap: 12px; font-size: var(--t-xs); color: var(--muted); }
+.tl-leg-item { display: inline-flex; align-items: center; gap: 6px; }
+.tl-dot { width: 10px; height: 10px; border-radius: var(--r-sm); }
+.tl-dot.lts { background: var(--lts); }
+.tl-dot.sts { background: var(--sts); }
+.tl-dot.preview { border: 1px dashed var(--brand); }
+.timeline-chart { overflow-x: auto; }
+.tl-years, .timeline-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px; column-gap: 16px; align-items: center; min-width: 640px; }
+.tl-years { padding-bottom: 6px; font-size: var(--t-xs); color: var(--muted); }
+.tl-years-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
+.tl-years-track span { padding-left: 4px; border-left: 1px solid var(--line); }
+.tl-rows { position: relative; display: grid; gap: 6px; padding-top: 4px; min-width: 640px; }
+.tl-channel { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
+.tl-channel b { font-weight: 600; }
+.tl-track { position: relative; height: 22px; background: var(--surface-2); border-radius: var(--r-sm); }
+.tl-bar {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  padding: 0 6px;
+  border-radius: var(--r-sm);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--t-xs);
+  line-height: 18px;
+  color: var(--bar-text);
+}
+.tl-bar.lts { --bar: var(--lts); background: var(--bar); }
+.tl-bar.sts { --bar: var(--sts); background: var(--bar); }
+.tl-bar.preview { background: var(--brand-soft); border: 1px dashed var(--brand); line-height: 16px; }
+.tl-bar.eol { background: var(--surface-3); }
+/* Not installed: a tinted fill with a solid outline, so the bar stays visible on any palette's track. */
+.timeline-row.not-installed .tl-bar.lts, .timeline-row.not-installed .tl-bar.sts {
+  background: color-mix(in srgb, var(--bar) 35%, transparent);
+  box-shadow: inset 0 0 0 1px var(--bar);
+}
+.timeline-row.not-installed .tl-channel b { font-weight: 400; color: var(--muted); }
+.tl-bar.installed { outline: 2px solid var(--text-2); outline-offset: -1px; }
+.tl-status { font-size: var(--t-xs); text-align: right; color: var(--muted); }
+.tl-status.warn { color: var(--warn); font-weight: 500; }
+.tl-status.bad { color: var(--bad); font-weight: 500; }
+.tl-today-marker { position: absolute; top: -18px; bottom: 0; z-index: 2; width: 0; border-left: 1px dashed var(--text-2); pointer-events: none; }
+.tl-today-pill { position: absolute; top: -2px; left: 0; transform: translateX(-50%); padding: 0 5px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-size: var(--t-xs); line-height: 16px; }
+
+@media (max-width: 1240px) {
+  .overview-hero-card { grid-template-columns: minmax(0, 1fr); }
+  .hero-stats-grid { grid-template-columns: repeat(4, 1fr); border-left: 0; border-top: 1px solid var(--line); }
+  .hero-stat-cell:nth-child(n+3) { border-top: 0; }
+  .hero-stat-cell + .hero-stat-cell { border-left: 1px solid var(--line); }
+}
+@media (max-width: 1040px) {
+  .overview-main-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 760px) {
+  .hero-stats-grid { grid-template-columns: 1fr 1fr; }
+  .overview-action-item { flex-wrap: wrap; }
+}
diff --git a/ui/src/styles/palettes.css b/ui/src/styles/palettes.css
new file mode 100644
index 0000000..132f6fe
--- /dev/null
+++ b/ui/src/styles/palettes.css
@@ -0,0 +1,148 @@
+/*
+  Palettes change color roles only, never shape or spacing. The selector is deliberately not tied to :root:
+  a swatch in Settings sets data-palette on itself and so previews that palette inside any other one.
+*/
+[data-palette="macos"] {
+  --bg:           light-dark(#f5f5f7, #1c1c1e);
+  --surface:      light-dark(#ffffff, #2c2c2e);
+  --surface-2:    light-dark(#f2f2f7, #363638);
+  --surface-3:    light-dark(#e5e5ea, #444446);
+  --line:         light-dark(#d8d8dd, #414143);
+  --line-strong:  light-dark(#b4b4ba, #5e5e62);
+  --text:         light-dark(#1d1d1f, #f5f5f7);
+  --text-2:       light-dark(#3a3a3c, #d6d6da);
+  --muted:        light-dark(#5e5e63, #b4b4ba);
+  --brand:        light-dark(#0062cc, #6cb4ff);
+  --brand-fill:   light-dark(#0071e3, #0071e3);
+  --on-brand:     #ffffff;
+  --brand-soft:   light-dark(#dcebfd, #1f3a5c);
+  --ok:           light-dark(#1b7a35, #4cd964);
+  --ok-soft:      light-dark(#e0f4e5, #1d3a25);
+  --warn:         light-dark(#935100, #ffb340);
+  --warn-soft:    light-dark(#fdeed8, #43321a);
+  --bad:          light-dark(#c41c13, #ff7a70);
+  --bad-soft:     light-dark(#fde7e5, #4a2422);
+  --info:         light-dark(#0062cc, #6cb4ff);
+  --info-soft:    light-dark(#e1eefc, #1f3249);
+  --lts:          light-dark(#bcd9fb, #1d5ca8);
+  --sts:          light-dark(#c8e8d0, #2a6b3c);
+  --bar-text:     light-dark(#1d1d1f, #f5f5f7);
+  --code-bg:      light-dark(#f2f2f7, #1c1c1e);
+  --code-text:    light-dark(#1d1d1f, #e8e8ed);
+}
+
+[data-palette="github"] {
+  --bg:           light-dark(#f6f8fa, #0d1117);
+  --surface:      light-dark(#ffffff, #151b23);
+  --surface-2:    light-dark(#f6f8fa, #212830);
+  --surface-3:    light-dark(#e7ecf0, #2a313c);
+  --line:         light-dark(#d1d9e0, #30363d);
+  --line-strong:  light-dark(#b1bac4, #484f58);
+  --text:         light-dark(#1f2328, #f0f6fc);
+  --text-2:       light-dark(#31383f, #d1d7e0);
+  --muted:        light-dark(#59636e, #a0a8b2);
+  --brand:        light-dark(#0969da, #58a6ff);
+  --brand-fill:   light-dark(#1a7f37, #238636);
+  --on-brand:     #ffffff;
+  --brand-soft:   light-dark(#ddf4ff, #15304d);
+  --ok:           light-dark(#1a7f37, #3fb950);
+  --ok-soft:      light-dark(#dafbe1, #12301c);
+  --warn:         light-dark(#8a5a00, #d9a227);
+  --warn-soft:    light-dark(#fff8c5, #33290e);
+  --bad:          light-dark(#cf222e, #ff7b72);
+  --bad-soft:     light-dark(#ffebe9, #3c1618);
+  --info:         light-dark(#0969da, #58a6ff);
+  --info-soft:    light-dark(#ddf4ff, #15304d);
+  --lts:          light-dark(#b6e3ff, #1f5a99);
+  --sts:          light-dark(#aceebb, #1f6b34);
+  --bar-text:     light-dark(#1f2328, #f0f6fc);
+  --code-bg:      light-dark(#f6f8fa, #0d1117);
+  --code-text:    light-dark(#1f2328, #e6edf3);
+}
+
+/* macOS style follows the system accent. Fill and text differ so each stays readable; blue is the default above. */
+:root[data-accent="red"][data-palette="macos"],
+:root[data-accent="red"] [data-palette="macos"] {
+  --brand:      light-dark(#c41c13, #ff7a70);
+  --brand-fill: light-dark(#d70015, #d70015);
+  --on-brand:   light-dark(#ffffff, #ffffff);
+  --brand-soft: light-dark(#fde7e5, #4a2422);
+}
+
+:root[data-accent="orange"][data-palette="macos"],
+:root[data-accent="orange"] [data-palette="macos"] {
+  --brand:      light-dark(#9c4a00, #ffb340);
+  --brand-fill: light-dark(#ff9500, #ff9f0a);
+  --on-brand:   light-dark(#1d1d1f, #1d1d1f);
+  --brand-soft: light-dark(#fdeed8, #43321a);
+}
+
+:root[data-accent="yellow"][data-palette="macos"],
+:root[data-accent="yellow"] [data-palette="macos"] {
+  --brand:      light-dark(#7f6200, #ffd60a);
+  --brand-fill: light-dark(#ffcc00, #ffd60a);
+  --on-brand:   light-dark(#1d1d1f, #1d1d1f);
+  --brand-soft: light-dark(#fbf3cf, #3f3717);
+}
+
+:root[data-accent="green"][data-palette="macos"],
+:root[data-accent="green"] [data-palette="macos"] {
+  --brand:      light-dark(#1b7a35, #4cd964);
+  --brand-fill: light-dark(#1f7a35, #1f7a35);
+  --on-brand:   light-dark(#ffffff, #ffffff);
+  --brand-soft: light-dark(#e0f4e5, #1d3a25);
+}
+
+:root[data-accent="purple"][data-palette="macos"],
+:root[data-accent="purple"] [data-palette="macos"] {
+  --brand:      light-dark(#8338b0, #d18cf5);
+  --brand-fill: light-dark(#8944ab, #8944ab);
+  --on-brand:   light-dark(#ffffff, #ffffff);
+  --brand-soft: light-dark(#f3e6fa, #3a2547);
+}
+
+:root[data-accent="pink"][data-palette="macos"],
+:root[data-accent="pink"] [data-palette="macos"] {
+  --brand:      light-dark(#c4104a, #ff7096);
+  --brand-fill: light-dark(#d30f45, #d30f45);
+  --on-brand:   light-dark(#ffffff, #ffffff);
+  --brand-soft: light-dark(#fde4ec, #4a2030);
+}
+
+:root[data-accent="graphite"][data-palette="macos"],
+:root[data-accent="graphite"] [data-palette="macos"] {
+  --brand:      light-dark(#58585c, #c4c4ca);
+  --brand-fill: light-dark(#636366, #636366);
+  --on-brand:   light-dark(#ffffff, #ffffff);
+  --brand-soft: light-dark(#e8e8ec, #3e3e40);
+}
+
+/* Neutral grays with an inverted primary button, blue only for links and selection accents. */
+[data-palette="codex"] {
+  --bg:           light-dark(#f7f7f7, #171717);
+  --surface:      light-dark(#ffffff, #1f1f1f);
+  --surface-2:    light-dark(#f1f1f1, #2a2a2a);
+  --surface-3:    light-dark(#e4e4e4, #353535);
+  --line:         light-dark(#e0e0e0, #303030);
+  --line-strong:  light-dark(#bdbdbd, #4c4c4c);
+  --text:         light-dark(#171717, #ececec);
+  --text-2:       light-dark(#3d3d3d, #d0d0d0);
+  --muted:        light-dark(#5f5f5f, #a8a8a8);
+  --brand:        light-dark(#1d5fd1, #7fabff);
+  --brand-fill:   light-dark(#171717, #f4f4f4);
+  --on-brand:     light-dark(#ffffff, #171717);
+  --brand-soft:   light-dark(#ececec, #2d2d2d);
+  --ok:           light-dark(#0f7b4b, #4ccb8a);
+  --ok-soft:      light-dark(#e0f3e9, #16322a);
+  --warn:         light-dark(#8a5300, #e8a33d);
+  --warn-soft:    light-dark(#faefd9, #38291a);
+  --bad:          light-dark(#c0261e, #f0776e);
+  --bad-soft:     light-dark(#fbe6e4, #3b1f1d);
+  --info:         light-dark(#1d5fd1, #7fabff);
+  --info-soft:    light-dark(#e4edfb, #15294f);
+  --lts:          light-dark(#a9c6f7, #2f5fc0);
+  --sts:          light-dark(#b9b9b9, #6b6b6b);
+  --bar-text:     light-dark(#171717, #f4f4f4);
+  --code-bg:      light-dark(#f4f4f4, #141414);
+  --code-text:    light-dark(#171717, #e6e6e6);
+}
diff --git a/ui/src/styles/settings.css b/ui/src/styles/settings.css
new file mode 100644
index 0000000..2391280
--- /dev/null
+++ b/ui/src/styles/settings.css
@@ -0,0 +1,89 @@
+.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
+.settings-rail { position: sticky; top: 72px; display: grid; gap: 2px; }
+.settings-nav-item { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-sm); color: var(--muted); font-size: var(--t-sm); }
+.settings-nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
+.settings-nav-item.active { background: var(--brand-soft); color: var(--text); font-weight: 500; }
+.settings-main { display: grid; gap: 16px; min-width: 0; }
+.settings-main > section { scroll-margin-top: 72px; }
+.settings-card { display: grid; gap: 12px; padding: 16px 20px; }
+.settings-card-head { display: grid; gap: 2px; }
+.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
+.settings-row strong { font-weight: 500; }
+.settings-row p { font-size: var(--t-sm); }
+.settings-toggle-form { display: flex; align-items: center; gap: 8px; margin: 0; }
+.settings-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; font-size: var(--t-sm); }
+.settings-dl dt { color: var(--muted); }
+.settings-dl dd { min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.setup-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.setup-title { display: flex; gap: 12px; min-width: 0; flex: 1; }
+.setup-title p { font-size: var(--t-sm); max-width: 70ch; }
+.setup-icon { color: var(--muted); display: inline-flex; flex: none; padding-top: 2px; }
+.removal-support-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.setup-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.setup-card-actions form { margin: 0; }
+.setup-version-form { display: flex; align-items: center; gap: 8px; }
+.setup-version-picker select { height: var(--control); padding: 0 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-sm); }
+.setup-install-summary p { font-size: var(--t-sm); }
+.setup-ready { display: inline-flex; align-items: center; gap: 6px; }
+.setup-ready .i { color: var(--ok); }
+.setup-release-list { display: grid; gap: 6px; font-size: var(--t-sm); }
+.setup-release-list strong { font-weight: 500; }
+.setup-release-list ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
+.setup-release-list li { display: inline-flex; gap: 6px; }
+.setup-note { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--t-xs); }
+.setup-note strong { font-weight: 500; }
+.setup-card.empty-state { display: grid; }
+
+.endpoint-list { display: grid; }
+.endpoint-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
+.endpoint-left { display: flex; gap: 10px; min-width: 0; }
+.endpoint-left strong { font-weight: 500; font-size: var(--t-sm); }
+.endpoint-icon { color: var(--muted); display: inline-flex; padding-top: 2px; flex: none; }
+.endpoint-icon.ok { color: var(--ok); }
+
+.palette-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
+.palette-option { display: grid; justify-items: center; gap: 6px; width: 96px; padding: 6px 6px 8px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); font-size: var(--t-xs); cursor: pointer; }
+.palette-option:hover { border-color: var(--line-strong); color: var(--text); }
+.palette-option.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); color: var(--text); }
+.palette-swatch { display: grid; grid-template-columns: 22px 1fr; width: 100%; height: 44px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
+.swatch-rail { background: var(--surface); border-right: 1px solid var(--line); }
+.swatch-panel { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 6px; }
+.swatch-line { display: block; height: 4px; border-radius: var(--r-sm); background: var(--muted); }
+.swatch-accent { display: block; width: 26px; height: 10px; border-radius: var(--r-sm); background: var(--brand-fill); }
+
+/* Pre-flight */
+.preflight-body { min-height: 100vh; }
+.pf-theme-btn { position: fixed; top: 16px; right: 16px; }
+.preflight { display: grid; justify-items: center; padding: 48px 16px; }
+.pf { display: grid; gap: 14px; width: min(720px, 100%); }
+.pf-brand { display: flex; align-items: last baseline; gap: 14px; }
+/* The image file has transparent padding; the margins put the visible mark on the text's baseline and left edge. */
+.pf-brand img { width: 56px; height: 56px; margin: 0 -9px -16.5px -8px; object-fit: contain; }
+.pf-kicker { font-size: var(--t-sm); }
+.grad-text { background: linear-gradient(120deg, var(--brand), var(--info)); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.pf-desc { color: var(--muted); max-width: 66ch; }
+.steps { display: grid; }
+.step { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
+.step + .step { border-top: 1px solid var(--line); }
+.step > div { flex: 1; min-width: 0; }
+.step b { font-weight: 600; font-size: var(--t-sm); }
+.step p { font-size: var(--t-sm); color: var(--muted); overflow-wrap: anywhere; }
+.st { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--r-full); }
+.st.ok { background: var(--ok-soft); color: var(--ok); }
+.st.warn { background: var(--warn-soft); color: var(--warn); }
+.pf-attention { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
+.pf-attention-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); }
+.pf-attention-icon.ok { background: var(--ok-soft); color: var(--ok); }
+.pf-attention-icon.warn { background: var(--warn-soft); color: var(--warn); }
+.pf-attention-text b { font-weight: 600; font-size: var(--t-sm); }
+.pf-attention-text p { font-size: var(--t-sm); }
+.pf-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
+.pf-skip-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--muted); cursor: pointer; }
+.pf-skip-label input { accent-color: var(--brand-fill); }
+.trust { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); color: var(--muted); }
+.trust span { display: inline-flex; align-items: center; gap: 6px; }
+
+@media (max-width: 860px) {
+  .settings-layout { grid-template-columns: minmax(0, 1fr); }
+  .settings-rail { position: static; grid-auto-flow: column; justify-content: start; overflow-x: auto; }
+}
diff --git a/ui/src/styles/tokens.css b/ui/src/styles/tokens.css
new file mode 100644
index 0000000..8e01008
--- /dev/null
+++ b/ui/src/styles/tokens.css
@@ -0,0 +1,58 @@
+/* Colors are defined once per role; light-dark() follows the color-scheme set by data-theme. */
+:root { color-scheme: light dark; }
+
+/* The Cockpit palette is the default. The others in palettes.css override these same color roles. */
+:root, [data-palette="cockpit"] {
+  --bg:           light-dark(#f5f7fb, #080b15);
+  --surface:      light-dark(#ffffff, #10162a);
+  --surface-2:    light-dark(#f1f4f9, #161d34);
+  --surface-3:    light-dark(#e6ebf3, #1f2845);
+  --line:         light-dark(#dfe5ee, #222c49);
+  --line-strong:  light-dark(#c3ccda, #33405f);
+  --text:         light-dark(#0f172a, #eef2ff);
+  --text-2:       light-dark(#334155, #cbd5e8);
+  --muted:        light-dark(#556176, #97a4bd);
+  --brand:        light-dark(#5132e6, #a48dff);
+  --brand-fill:   light-dark(#5132e6, #6d4dff);
+  --on-brand:     #ffffff;
+  --brand-soft:   light-dark(#ebe8fd, #231f4d);
+  --ok:           light-dark(#04724d, #4ade9f);
+  --ok-soft:      light-dark(#def5ea, #10332a);
+  --warn:         light-dark(#8a5300, #fbbf24);
+  --warn-soft:    light-dark(#fcf0d2, #3a2d0d);
+  --bad:          light-dark(#b42318, #fb8e85);
+  --bad-soft:     light-dark(#fde8e6, #3e1a1c);
+  --info:         light-dark(#1f5aa8, #8ab8ff);
+  --info-soft:    light-dark(#e3edfb, #16294a);
+  --lts:          light-dark(#c9c1f7, #4b3cae);
+  --sts:          light-dark(#b4e3ee, #0e5a70);
+  --bar-text:     light-dark(#0f172a, #f4f6ff);
+  --code-bg:      light-dark(#f1f4f9, #0a0e1b);
+  --code-text:    light-dark(#0f172a, #dfe6f5);
+  --scrim:        light-dark(rgb(15 23 42 / 35%), rgb(3 5 12 / 65%));
+}
+
+:root {
+  --shadow:       0 1px 2px rgb(0 0 0 / 8%), 0 16px 40px -12px rgb(0 0 0 / 30%);
+
+  --t-xs: 12px;
+  --t-sm: 13px;
+  --t-md: 14px;
+  --t-lg: 16px;
+  --t-xl: 20px;
+  --t-2xl: 28px;
+
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-full: 999px;
+
+  --control: 32px;
+  --control-sm: 28px;
+
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
+  --ease: 140ms ease;
+}
+
+:root[data-theme="light"] { color-scheme: light; }
+:root[data-theme="dark"] { color-scheme: dark; }
diff --git a/ui/src/styles/tools.css b/ui/src/styles/tools.css
new file mode 100644
index 0000000..5748558
--- /dev/null
+++ b/ui/src/styles/tools.css
@@ -0,0 +1,128 @@
+.working-directory { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-sm); color: var(--muted); }
+.working-directory .i { flex: none; }
+.working-directory code { min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.working-directory .muted { flex: none; }
+
+.tool-panel-wrapper { display: flex; flex-direction: column; gap: 12px; }
+.tool-panel { overflow: hidden; }
+.tool-panel .table-scroll { overflow-x: auto; }
+.table-scroll:focus-visible { outline-offset: -2px; }
+.tools-table { width: 100%; border-collapse: collapse; }
+.tools-table th {
+  padding: 8px 14px;
+  font-size: var(--t-xs);
+  font-weight: 500;
+  text-align: left;
+  color: var(--muted);
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+.tools-table td { padding: 8px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
+.tools-table tbody tr:first-child td { border-top: 0; }
+.tools-table .th-actions { text-align: right; }
+tr[data-tool-row] { cursor: pointer; transition: background var(--ease); }
+tr[data-tool-row]:hover { background: var(--surface-2); }
+
+.tool-name { display: flex; align-items: center; gap: 12px; min-width: 220px; }
+.tool-name-body { display: grid; min-width: 0; }
+.tool-title-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.tool-id-group { display: inline-flex; align-items: center; gap: 4px; }
+.tool-id-group strong { font-weight: 600; font-size: var(--t-sm); }
+.tool-author-chip { white-space: nowrap; }
+.tool-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+
+.tool-monogram.tool-logo {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border-radius: var(--r-sm);
+  overflow: hidden;
+}
+.tool-logo-img { width: 100%; height: 100%; object-fit: contain; }
+.tool-logo-svg { width: 20px; height: 20px; }
+.tool-monogram.tool-logo.drawer-logo-lg { width: 44px; height: 44px; }
+.tool-monogram.tool-logo.drawer-logo-lg .tool-logo-svg { width: 28px; height: 28px; }
+
+.tool-command-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 6px;
+  background: var(--code-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  white-space: nowrap;
+  cursor: copy;
+}
+.tool-command-pill .i { color: var(--muted); opacity: 0; transition: opacity var(--ease); }
+tr[data-tool-row]:hover .tool-command-pill .i, .tool-command-pill:focus-visible .i { opacity: 1; }
+.tool-command-pill.copied { border-color: var(--ok); }
+.tool-cell-ver { white-space: nowrap; }
+.tool-cell-ver .version-patch-flow { flex-wrap: nowrap; }
+
+.tool-scope-cell { display: grid; gap: 2px; }
+.tool-scope-pill { font-size: var(--t-xs); color: var(--text-2); white-space: nowrap; }
+.tool-manifest { color: var(--muted); overflow-wrap: anywhere; }
+
+/* Fixed slots keep Remove in one column whether or not a tool can be updated. */
+.tool-row-actions { display: grid; grid-template-columns: 64px 72px 72px 28px; gap: 6px; align-items: center; justify-content: end; }
+.tool-row-actions form { margin: 0; }
+.tool-row-actions .button:not(.icon) { width: 100%; }
+.tool-update-form { grid-column: 2; }
+.tool-uninstall-form { grid-column: 3; }
+.tool-more-wrap { position: relative; grid-column: 4; }
+
+@media (max-width: 1240px) {
+  .tool-row-actions .button.tool-inspect-btn:not(.icon) { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
+  .tool-row-actions { grid-template-columns: 72px 72px 28px; }
+  .tool-update-form { grid-column: 1; }
+  .tool-uninstall-form { grid-column: 2; }
+  .tool-more-wrap { grid-column: 3; }
+}
+
+/* The command stays one click away in the drawer, so the column gives way before the table scrolls. */
+@media (max-width: 1100px) {
+  .tools-table th, .tools-table td { padding-inline: 10px; }
+  .tools-table th:nth-child(2), .tool-cell-cmd { display: none; }
+  .tool-name { min-width: 0; }
+}
+
+/* Drawer */
+.tool-drawer-hero { display: flex; gap: 12px; align-items: center; }
+.tool-drawer-hero-text { display: grid; gap: 4px; min-width: 0; }
+.tool-detail-drawer .drawer-title { font-family: var(--sans); font-size: var(--t-lg); }
+.tool-drawer-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.tool-verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--muted); }
+.tool-verified .i { color: var(--ok); }
+.tool-drawer-about { display: grid; gap: 8px; }
+.tool-drawer-desc { font-size: var(--t-sm); color: var(--text-2); }
+.tool-drawer-tags { display: flex; flex-wrap: wrap; gap: 4px; }
+.tool-tag-pill { padding: 1px 6px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: var(--t-xs); }
+.tool-drawer-cmd-list { display: grid; gap: 6px; }
+
+/* Search without JavaScript */
+.tool-search { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
+.tool-search-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.tool-search-title { display: flex; gap: 10px; }
+.tool-search-title label { font-weight: 600; }
+.search-icon { color: var(--muted); }
+.tool-search-form { margin: 0; }
+.tool-search-controls { display: flex; gap: 8px; }
+.tool-search-controls input { flex: 1; min-width: 0; height: var(--control); padding: 0 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
+.search-results { display: grid; gap: 8px; }
+.search-result-list { display: grid; gap: 8px; }
+.search-result { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
+.search-result-main { display: flex; gap: 10px; min-width: 0; }
+.search-result-title-row, .search-result-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.search-result-meta { font-size: var(--t-xs); color: var(--muted); }
+.tool-cli-preview { display: flex; gap: 6px; margin-top: 4px; font-size: var(--t-xs); }
+.tool-cli-preview code { white-space: pre-wrap; color: var(--muted); }
+.cli-label { color: var(--muted); }
+.tool-install-actions { display: flex; gap: 6px; align-items: flex-start; margin: 0; flex: none; }
+.manifest-action { margin: 0; }
+.manifest-status { font-size: var(--t-sm); }
+.inline-action-form { margin: 0; }
diff --git a/ui/src/styles/versions.css b/ui/src/styles/versions.css
new file mode 100644
index 0000000..192b613
--- /dev/null
+++ b/ui/src/styles/versions.css
@@ -0,0 +1,100 @@
+.inventory { display: flex; flex-direction: column; gap: 12px; }
+.versions-table { display: block; width: 100%; }
+.versions-table tbody { display: block; }
+.versions-table tr { display: block; }
+
+.channel-card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+  overflow: hidden;
+}
+.channel-card + .channel-card { margin-top: 12px; }
+
+/* One column system for the channel header and its rows, so every action lines up. */
+.versions-table {
+  --chevron: 24px;
+  --name: 170px;
+  --version: 250px;
+  --actions: 160px;
+  --gap: 12px;
+  --pad: 14px;
+}
+
+.channel-header-row td { display: block; padding: 0; }
+.channel-header-card {
+  display: grid;
+  grid-template-columns: var(--chevron) var(--name) minmax(0, 1fr) var(--actions);
+  column-gap: var(--gap);
+  align-items: center;
+  min-height: 52px;
+  padding: 0 var(--pad);
+}
+.channel-card[data-state="eol"] .channel-header-card { box-shadow: inset 3px 0 0 var(--bad); }
+.channel-card[data-state="ending"] .channel-header-card { box-shadow: inset 3px 0 0 var(--warn); }
+.chevron-slot { display: grid; place-items: center; width: var(--chevron); }
+.channel-collapse-btn { width: 24px; height: 24px; }
+.channel-collapse-btn .i { transition: transform var(--ease); }
+.channel-card.collapsed .channel-collapse-btn .i { transform: rotate(-90deg); }
+.channel-card.collapsed tr[data-kind] { display: none; }
+.channel-title-row { display: flex; align-items: center; gap: 8px; }
+.channel-title { font-size: var(--t-lg); font-weight: 600; white-space: nowrap; }
+.life-status { font-size: var(--t-sm); color: var(--muted); }
+.life-status.warn { color: var(--warn); font-weight: 500; }
+.life-status.bad { color: var(--bad); font-weight: 500; }
+.channel-actions { display: flex; justify-content: flex-end; }
+.channel-actions .button { width: 84px; }
+
+tr[data-kind] {
+  display: grid;
+  grid-template-columns: var(--name) minmax(0, 1fr) var(--version) var(--actions);
+  column-gap: var(--gap);
+  align-items: center;
+  min-height: 48px;
+  padding: 4px var(--pad) 4px calc(var(--pad) + var(--chevron) + var(--gap));
+  border-top: 1px solid var(--line);
+  cursor: pointer;
+  transition: background var(--ease);
+}
+tr[data-kind]:hover { background: var(--surface-2); }
+tr.row-selected, tr.row-selected:hover { background: var(--brand-soft); }
+tr[data-kind] > td { min-width: 0; padding: 0; }
+.cell-name { display: grid; align-content: center; }
+.cell-name strong { font-weight: 500; font-size: var(--t-sm); }
+.framework-name { font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Cuts the start of a long path, because the version at its end is what tells paths apart. */
+.installation-path {
+  display: block;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+
+.cell-path, .cell-version { display: block; }
+.cell-actions { display: grid; grid-template-columns: 64px 84px; column-gap: var(--gap); align-items: center; }
+.cell-actions form { margin: 0; grid-column: 2; }
+.cell-actions .button { width: 100%; }
+
+.empty-row, .empty-row td { display: block; }
+
+@media (max-width: 1240px) {
+  .versions-table { --name: 140px; --version: 200px; }
+}
+@media (max-width: 1100px) {
+  .versions-table { --actions: 84px; }
+  .cell-actions .inspect-btn { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
+  .cell-actions { grid-template-columns: 84px; }
+  .cell-actions form { grid-column: 1; }
+}
+@media (max-width: 760px) {
+  .channel-header-card { grid-template-columns: var(--chevron) minmax(0, 1fr) var(--actions); padding-block: 8px; }
+  .life-status { grid-row: 2; grid-column: 2 / -1; }
+  tr[data-kind] { grid-template-columns: minmax(0, 1fr) var(--actions); padding-left: var(--pad); row-gap: 2px; }
+  .cell-path { display: none; }
+  .cell-version { grid-column: 1; grid-row: 2; }
+  .cell-actions { grid-row: 1 / span 2; grid-column: 2; }
+}
diff --git a/ui/tests/empty-server.mjs b/ui/tests/empty-server.mjs
index f639ecb..b9ac586 100644
--- a/ui/tests/empty-server.mjs
+++ b/ui/tests/empty-server.mjs
@@ -7,7 +7,8 @@ import { fileURLToPath } from 'node:url';
 const directory = await mkdtemp(join(tmpdir(), 'cockpit-browser-empty-'));
 const port = process.argv[2] ?? '5231';
 const executable = fileURLToPath(new URL('../../artifacts/native/dotnet-cockpit', import.meta.url));
-const child = spawn(executable, ['--no-browser', '--port', port], { cwd: directory, stdio: 'inherit' });
+const pathEnv = process.env.PATH?.includes('.dotnet') ? process.env.PATH : `${process.env.HOME}/.dotnet:${process.env.PATH}`;
+const child = spawn(executable, ['--no-browser', '--port', port], { cwd: directory, stdio: 'inherit', env: { ...process.env, PATH: pathEnv } });
 process.on('SIGTERM', () => child.kill());
 process.on('SIGINT', () => child.kill());
 child.on('exit', async code => {
diff --git a/ui/tests/installations.spec.mjs b/ui/tests/installations.spec.mjs
index d5ce346..e0ca002 100644
--- a/ui/tests/installations.spec.mjs
+++ b/ui/tests/installations.spec.mjs
@@ -5,11 +5,13 @@ test('receives the real inventory in the initial HTML with version-specific dire
   const runtimeCards = new Set(snapshot.runtimes.map(runtime => runtime.version)).size;
   const response = await page.goto('/');
   const html = await response.text();
-  expect(html).toContain('<tr data-kind="sdk">');
-  await expect(page.getByRole('heading', { name: 'Your .NET environment' })).toBeVisible();
-  await expect(page.locator('tbody tr')).toHaveCount(snapshot.sdks.length + runtimeCards);
+  expect(html).toContain('<tr data-kind="sdk"');
+  await expect(page.getByRole('heading', { name: 'Versions', level: 1 })).toBeVisible();
+  await expect(page.locator('tbody tr[data-kind]')).toHaveCount(snapshot.sdks.length + runtimeCards);
   for (const item of [...snapshot.sdks, ...snapshot.runtimes]) {
-    await expect(page.locator('.installation-path').filter({ hasText: item.installationPath })).toBeVisible();
+    if (item.installationPath) {
+      await expect(page.locator('.installation-path').filter({ hasText: item.installationPath })).toBeVisible();
+    }
   }
 });
 
@@ -21,19 +23,20 @@ test('filters and sorts on the server with JavaScript disabled', async ({ browse
   try {
     await page.goto(baseURL);
     await page.getByRole('navigation', { name: 'Installation type' }).getByRole('link', { name: 'SDKs', exact: true }).click();
-    await expect(page.locator('tbody tr')).toHaveCount(snapshot.sdks.length);
+    await expect(page.locator('tbody tr[data-kind]')).toHaveCount(snapshot.sdks.length);
     await page.getByRole('searchbox', { name: 'Filter installed versions' }).fill(snapshot.sdks[0].version);
     await page.getByRole('button', { name: 'Filter', exact: true }).click();
     await expect(page).toHaveURL(/q=/);
-    await expect(page.locator('tbody tr').first()).toContainText(snapshot.sdks[0].version);
+    await expect(page.locator('tbody tr[data-kind]').first()).toContainText(snapshot.sdks[0].version);
     await expect(page.locator('tbody tr[data-kind="runtime"]')).toHaveCount(0);
-    await page.getByRole('columnheader', { name: /^Version/ }).getByRole('link').click();
+    await page.locator('.sort-menu summary').click();
+    await page.locator('.sort-menu').getByRole('link', { name: 'Oldest version' }).click();
     await expect(page).toHaveURL(/direction=asc/);
     await page.getByRole('searchbox', { name: 'Filter installed versions' }).fill('no-match');
     await page.getByRole('button', { name: 'Filter', exact: true }).click();
     await expect(page.getByRole('heading', { name: 'No matching versions' })).toBeVisible();
     await page.getByRole('link', { name: 'Clear filters' }).click();
-    await expect(page.locator('tbody tr')).toHaveCount(snapshot.sdks.length + runtimeCards);
+    await expect(page.locator('tbody tr[data-kind]')).toHaveCount(snapshot.sdks.length + runtimeCards);
   } finally { await context.close(); }
 });
 
@@ -41,7 +44,7 @@ test('switches Fluent themes with the keyboard and retains the choice across nav
   const errors = [];
   page.on('pageerror', error => errors.push(error.message));
   await page.goto('/');
-  const theme = page.getByRole('button', { name: 'Switch to dark mode' });
+  const theme = page.locator('header [data-theme-pref="dark"]');
   await theme.focus();
   await page.keyboard.press('Enter');
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
@@ -53,7 +56,7 @@ test('switches Fluent themes with the keyboard and retains the choice across nav
 test('refreshes the server-rendered inventory', async ({ page }) => {
   await page.goto('/?q=&kind=all&sort=version&direction=desc#inventory');
   const before = await page.locator('time').getAttribute('datetime');
-  await page.getByRole('link', { name: 'Refresh', exact: true }).click();
+  await page.getByRole('link', { name: /^Refresh/ }).click();
   await expect(page.locator('time')).not.toHaveAttribute('datetime', before);
   await expect(page.getByRole('table')).toBeVisible();
 });
@@ -67,9 +70,336 @@ test('renders the no-host installation view on a narrow screen without JavaScrip
     if (html.includes('No .NET installation found')) {
       await expect(page.getByRole('heading', { name: 'No .NET installation found' })).toBeVisible();
     } else {
-      await expect(page.getByRole('heading', { name: 'Your .NET environment' })).toBeVisible();
+      await expect(page.getByRole('heading', { name: 'Versions', level: 1 })).toBeVisible();
       await expect(page.getByRole('heading', { name: 'Installed versions' })).toBeVisible();
     }
     expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
   } finally { await context.close(); }
 });
+
+test('filters instantly with client-side JavaScript without page reload', async ({ page, request }) => {
+  const snapshot = await (await request.get('/api/installation')).json();
+  const runtimeCards = new Set(snapshot.runtimes.map(runtime => runtime.version)).size;
+  const totalRows = snapshot.sdks.length + runtimeCards;
+  await page.goto('/');
+
+  const searchBox = page.getByRole('searchbox', { name: 'Filter installed versions' });
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(totalRows);
+
+  await searchBox.fill(snapshot.sdks[0].version);
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])').first()).toContainText(snapshot.sdks[0].version);
+  await expect(page.locator('tbody.channel-card:not([hidden])')).toHaveCount(1);
+
+  await searchBox.fill('xyz-nonexistent-query');
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(0);
+  await expect(page.locator('tbody.channel-card:not([hidden])')).toHaveCount(0);
+  await expect(page.getByRole('heading', { name: 'No matching versions' })).toBeVisible();
+
+  await searchBox.fill('');
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(totalRows);
+
+  // Toggling SDKs, Runtimes, and Previews filter pills does not scroll the page
+  const nav = page.getByRole('navigation', { name: 'Installation type' });
+  await nav.getByRole('link', { name: 'SDKs', exact: true }).click();
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(snapshot.sdks.length);
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+
+  await nav.getByRole('link', { name: 'SDKs', exact: true }).click();
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(totalRows);
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+
+  await nav.getByRole('link', { name: 'Runtimes', exact: true }).click();
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(runtimeCards);
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+
+  await nav.getByRole('link', { name: 'Previews', exact: true }).click();
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+
+  await nav.getByRole('link', { name: 'Previews', exact: true }).click();
+  await expect(page.locator('tbody tr[data-kind]:not([hidden])')).toHaveCount(totalRows);
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+});
+
+test('opens command palette with keyboard shortcut and triggers navigation', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#cmdk-dialog')).toBeHidden();
+  await page.keyboard.press('Meta+k');
+  await expect(page.locator('#cmdk-dialog')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(page.locator('#cmdk-dialog')).toBeHidden();
+});
+
+test('renders pre-flight check with live diagnostic steps and trust policies', async ({ page }) => {
+  await page.goto('/preflight');
+  await expect(page.getByRole('heading', { name: 'Pre-flight check' })).toBeVisible();
+  await expect(page.locator('.step')).toHaveCount(6);
+  await expect(page.locator('.step').first()).toContainText('dotnet host');
+  await expect(page.locator('.trust')).toContainText('127.0.0.1');
+  await expect(page.locator('.trust')).toContainText('No telemetry');
+  await page.getByRole('button', { name: /Open cockpit/i }).click();
+  await expect(page).toHaveURL('/');
+  await expect(page.getByRole('heading', { name: 'Versions', level: 1 })).toBeVisible();
+});
+
+test('opens detail drawer when inspecting a version and displays equivalent command', async ({ page, request }) => {
+  const snapshot = await (await request.get('/api/installation')).json();
+  await page.goto('/');
+
+  const firstSdk = snapshot.sdks[0];
+  await expect(page.locator('#version-drawer')).toBeHidden();
+
+  // Click on the row for firstSdk to inspect it
+  await page.locator(`tbody tr[data-kind="sdk"]`).filter({ hasText: firstSdk.version }).first().click();
+  await expect(page.locator('#version-drawer')).toBeVisible();
+  await expect(page.locator('#drawer-title')).toHaveText(firstSdk.version);
+  if (await page.locator('#drawer-command').count()) {
+    await expect(page.locator('#drawer-command')).toContainText(`dotnet-core-uninstall remove ${firstSdk.version} \\`);
+    await expect(page.locator('#drawer-command')).toContainText('--sdk \\');
+  }
+  await expect(page.locator('#version-drawer .drawer-patch-box')).toBeVisible();
+  await expect(page.locator('#version-drawer .drawer-primary-btn')).toBeVisible();
+
+  // Close drawer
+  await page.locator('#drawer-close').click();
+  await expect(page.locator('#version-drawer')).toBeHidden();
+});
+
+test('opens the Install .NET side-drawer with Latest filter active and filters SDK and runtime releases', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('.rail a[href="/preflight"]')).toHaveCount(0);
+  const channelCards = await page.locator('tbody.channel-card').count();
+  const removeChannelBtns = await page.locator('[data-remove-channel]').count();
+  // Removal needs dotnet-core-uninstall, which not every machine has. Where it exists, every channel offers it.
+  expect([0, channelCards]).toContain(removeChannelBtns);
+
+  const openBtn = page.locator('#open-install-dotnet-btn');
+  await expect(openBtn).toBeVisible();
+  await openBtn.click();
+
+  const dialog = page.locator('#install-dotnet-dialog');
+  await expect(dialog).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Install .NET' })).toBeVisible();
+  await expect(page.locator('[data-install-lifecycle="latest"]')).toHaveClass(/active/);
+  await expect(page.locator('[data-install-lifecycle="lts"]')).toHaveText('LTS');
+  const firstCommand = dialog.locator('[data-install-row]:not([hidden]) .row-command').first();
+  await firstCommand.locator('summary').click();
+  await expect(firstCommand).toContainText('sudo installer -pkg');
+  await firstCommand.locator('summary').click();
+  const firstChannel = dialog.locator('[data-install-channel-group]:not([hidden])').first();
+  await firstChannel.locator('.sheet-channel-head').click();
+  await expect(firstChannel.locator('[data-install-row]:not([hidden])').first()).toBeHidden();
+  await firstChannel.locator('.sheet-channel-head').click();
+
+  const visibleGroups = page.locator('[data-install-channel-group]:not([hidden])');
+  expect(await visibleGroups.count()).toBeGreaterThan(0);
+
+  const latestCount = await page.locator('[data-install-row]:not([hidden])').count();
+  expect(latestCount).toBeGreaterThan(0);
+
+  // Exactly one view is active at a time, and more patches means at least as many rows
+  await page.locator('[data-install-lifecycle="supported"]').click();
+  await expect(page.locator('[data-install-lifecycle="supported"]')).toHaveClass(/active/);
+  await expect(page.locator('[data-install-lifecycle="latest"]')).not.toHaveClass(/active/);
+  expect(await page.locator('[data-install-row]:not([hidden])').count()).toBeGreaterThanOrEqual(latestCount);
+  await page.locator('[data-install-lifecycle="latest"]').click();
+  await expect(page.locator('[data-install-row]:not([hidden])')).toHaveCount(latestCount);
+
+  await page.locator('[data-install-product=".NET Runtime"]').click();
+  await expect(page.locator('[data-install-row]:not([hidden])').first()).toContainText('.NET Runtime');
+
+  await page.locator('#close-install-dotnet-btn').click();
+  await expect(dialog).toBeHidden();
+
+  // Open channel removal dialog and verify multi-line command & strategy pills
+  const removeDialog = page.locator('#remove-dialog');
+  if (removeChannelBtns > 0) {
+    await page.locator('[data-remove-channel]').first().click();
+    await expect(removeDialog).toBeVisible();
+    await expect(page.locator('#remove-dialog-cmd')).toContainText('dotnet-core-uninstall remove');
+    await page.locator('#remove-dialog-cancel').click();
+    await expect(removeDialog).toBeHidden();
+  }
+
+  // Smart cleanup: a single "Clean up…" action opens the removal dialog with strategy cards
+  const cleanupBtn = page.locator('#open-cleanup-btn');
+  if (await cleanupBtn.count() > 0) {
+    await cleanupBtn.click();
+    await expect(removeDialog).toBeVisible();
+    await expect(page.locator('#remove-dialog-title')).toHaveText('Clean up .NET installations');
+    await expect(page.locator('#remove-dialog-modes')).toBeVisible();
+    await expect(page.locator('.cleanup-strategy-card:not([hidden])').first()).toBeVisible();
+    await expect(page.locator('#remove-dialog-items input:checked')).toHaveCount(await page.locator('#remove-dialog-items input').count());
+    await page.locator('#remove-dialog-cancel').click();
+    await expect(removeDialog).toBeHidden();
+  }
+  await expect(page.locator('[data-update-channel]')).toHaveCount(0);
+});
+
+test('switches between auto, light and dark appearance', async ({ page }) => {
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await page.goto('/');
+  const sw = page.locator('header [data-theme-switch]');
+  await expect(sw).toBeVisible();
+  await sw.locator('[data-theme-pref="light"]').click();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+  await sw.locator('[data-theme-pref="dark"]').click();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await sw.locator('[data-theme-pref="auto"]').click();
+  await expect(sw.locator('[data-theme-pref="auto"]')).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'auto');
+});
+
+test('renders the overview page with system summary and health cards', async ({ page }) => {
+  await page.goto('/overview');
+  await expect(page.getByRole('heading', { name: 'Overview', level: 1 })).toBeVisible();
+  await expect(page.getByText('Installed SDKs', { exact: true })).toBeVisible();
+  await expect(page.getByText('System Health')).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'This workspace' })).toBeVisible();
+  await expect(page.getByText('Support Lifecycle Timeline')).toBeVisible();
+  await expect(page.locator('.tl-today-pill')).toHaveText('Today');
+});
+
+test('the command palette finds tools and versions from any page and says when nothing matches', async ({ page, request }) => {
+  const snapshot = await (await request.get('/api/installation')).json();
+  await page.goto('/overview');
+  await page.keyboard.press('Meta+k');
+  const input = page.locator('#cmdk-input');
+  await expect(input).toBeFocused();
+  await input.fill(snapshot.sdks[0].version);
+  await expect(page.locator('#cmdk-dialog .opt:not([hidden])').first()).toContainText(snapshot.sdks[0].version);
+  await input.fill('zzzz-no-such-thing');
+  await expect(page.locator('#cmdk-empty')).toBeVisible();
+  await expect(page.locator('#cmdk-nuget')).toHaveAttribute('href', /q=zzzz-no-such-thing/);
+});
+
+test('remembers the appearance across pages through the settings file', async ({ page }) => {
+  await page.goto('/');
+  await page.locator('header [data-theme-pref="light"]').click();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+  await page.waitForLoadState('networkidle');
+  await page.goto('/overview');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+  await page.locator('header [data-theme-pref="auto"]').click();
+  await page.waitForLoadState('networkidle');
+});
+
+test('all row actions line up with the channel action in every channel', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/');
+  const edges = await page.evaluate(() => [...document.querySelectorAll('[data-remove-channel], tr[data-kind] .remove')]
+    .map(element => { const box = element.getBoundingClientRect(); return [Math.round(box.right * 10) / 10, Math.round(box.width * 10) / 10]; }));
+  if (edges.length) {
+    expect(new Set(edges.map(edge => edge[0])).size).toBe(1);
+    expect(new Set(edges.map(edge => edge[1])).size).toBe(1);
+  }
+});
+
+test('filters keep their position and height while switching', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/');
+  const measure = () => page.evaluate(() => [...document.querySelectorAll('[data-version-kind], .inventory .filter-form .search-field')]
+    .map(element => { const box = element.getBoundingClientRect(); return { left: Math.round(box.left), top: Math.round(box.top), height: Math.round(box.height) }; }));
+  const before = await measure();
+  await page.locator('[data-version-kind="sdks"]').click();
+  const after = await measure();
+  expect(after.map(item => item.left)).toEqual(before.map(item => item.left));
+  expect(new Set(before.filter((_, index) => index > 2).map(item => item.height)).size).toBe(1);
+});
+
+test('without a dotnet host the overview says so instead of reporting zero tools', async ({ page }) => {
+  await page.goto('http://127.0.0.1:5232/overview');
+  await expect(page.locator('.hero-meta-row')).not.toContainText('dotnet on PATH');
+  await expect(page.locator('.hero-stat-cell').nth(2)).toContainText('Not available');
+});
+
+test('every control works without JavaScript', async ({ browser }) => {
+  const context = await browser.newContext({ javaScriptEnabled: false, viewport: { width: 1440, height: 900 } });
+  const page = await context.newPage();
+  try {
+    for (const path of ['/', '/tools', '/tools?scope=local', '/overview', '/setup', '/preflight', '/?install=1']) {
+      await page.goto(path);
+      await expect(page.locator('button[type="button"]:visible'), path).toHaveCount(0);
+    }
+    await page.goto('/?install=1');
+    await page.locator('[data-install-product=".NET Runtime"]').click();
+    await expect(page).toHaveURL(/product=runtime/);
+    await expect(page.locator('#install-dotnet-dialog')).toBeVisible();
+    await expect(page.locator('[data-install-row]:not([hidden])').first()).toContainText('.NET Runtime');
+    await page.locator('[data-install-lifecycle="all"]').click();
+    await expect(page).toHaveURL(/view=all/);
+    await page.goto('/');
+    await page.locator('header [data-theme-pref="dark"]').click();
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+    await page.locator('header [data-theme-pref="auto"]').click();
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'auto');
+  } finally { await context.close(); }
+});
+
+test('no table scrolls sideways at desktop widths', async ({ page }) => {
+  for (const width of [1920, 1440, 1280, 1100, 1024]) {
+    await page.setViewportSize({ width, height: 800 });
+    for (const path of ['/', '/overview', '/setup', 'http://127.0.0.1:5234/tools', 'http://127.0.0.1:5234/tools?scope=all']) {
+      await page.goto(path);
+      const overflow = await page.evaluate(() => ({
+        page: document.documentElement.scrollWidth - innerWidth,
+        table: Math.max(0, ...[...document.querySelectorAll('.table-scroll')].map(element => element.scrollWidth - element.clientWidth)),
+      }));
+      expect(overflow, `${path} at ${width}`).toEqual({ page: 0, table: 0 });
+    }
+  }
+});
+
+test('overlays return focus and keep the keyboard inside', async ({ page }) => {
+  await page.goto('/');
+  const inspect = page.locator('[data-inspect]').first();
+  await inspect.focus();
+  await page.keyboard.press('Enter');
+  await expect(page.locator('#drawer-close')).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(inspect).toBeFocused();
+
+  const install = page.locator('#open-install-dotnet-btn');
+  await install.focus();
+  await page.keyboard.press('Enter');
+  await expect(page.locator('#install-dotnet-search-input')).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(install).toBeFocused();
+
+  await page.keyboard.press('Meta+k');
+  await expect(page.locator('#cmdk-input')).toBeFocused();
+  for (let index = 0; index < 4; index++) await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => Boolean(document.activeElement.closest('#cmdk-dialog')))).toBe(true);
+  await page.keyboard.press('Escape');
+  await expect(page.locator('#cmdk-dialog')).toBeHidden();
+});
+
+test('the page notices a changed installation when the window regains focus, without polling', async ({ page }) => {
+  let calls = 0;
+  page.on('request', request => { if (request.url().endsWith('/api/installation')) calls++; });
+  await page.goto('/');
+  await page.waitForTimeout(500);
+  expect(calls).toBe(0);
+  await page.route('**/api/installation', async route => {
+    const response = await route.fetch();
+    const json = await response.json();
+    await route.fulfill({ response, json: { ...json, signature: 'changed' } });
+  });
+  await page.evaluate(() => window.dispatchEvent(new Event('focus')));
+  await expect(page.locator('.toast')).toContainText('versions changed');
+});
+
+test('digits in the navigation share one vertical line', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/');
+  const centers = await page.evaluate(() => [...document.querySelectorAll('.nav-link .nav-count, .nav-link .nav-badge')]
+    .map(element => { const box = element.getBoundingClientRect(); return Math.round(box.left + box.width / 2); }));
+  expect(centers.length).toBeGreaterThan(1);
+  expect(new Set(centers).size).toBe(1);
+});
+
+test('the navigation stays compact when the window is narrow and the page is short', async ({ page }) => {
+  await page.setViewportSize({ width: 800, height: 1100 });
+  await page.goto('/setup');
+  const height = await page.evaluate(() => document.querySelector('.rail').getBoundingClientRect().height);
+  expect(height).toBeLessThan(80);
+});
diff --git a/ui/tests/palettes.spec.mjs b/ui/tests/palettes.spec.mjs
new file mode 100644
index 0000000..54a8447
--- /dev/null
+++ b/ui/tests/palettes.spec.mjs
@@ -0,0 +1,116 @@
+import { expect, test } from '@playwright/test';
+
+const palettes = ['cockpit', 'macos', 'github', 'codex'];
+const themes = ['light', 'dark'];
+const pages = ['/', '/overview', '/setup', 'http://127.0.0.1:5234/tools'];
+
+/** Measures text against its effective background; bars on gradients or with opacity are decorative. */
+function lowContrast() {
+  const parse = color => {
+    const parts = color.match(/[\d.]+/g)?.map(Number);
+    if (!parts || !color.startsWith('rgb')) return null;
+    return { r: parts[0], g: parts[1], b: parts[2], a: parts[3] ?? 1 };
+  };
+  const lum = c => {
+    const f = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+    return 0.2126 * f(c.r) + 0.7152 * f(c.g) + 0.0722 * f(c.b);
+  };
+  const background = element => {
+    const layers = [];
+    for (let node = element; node; node = node.parentElement) {
+      const color = parse(getComputedStyle(node).backgroundColor);
+      if (color && color.a > 0) {
+        layers.push(color);
+        if (color.a >= 1) break;
+      }
+    }
+    let base = layers.pop() ?? { r: 255, g: 255, b: 255 };
+    while (layers.length) {
+      const top = layers.pop();
+      base = { r: top.r * top.a + base.r * (1 - top.a), g: top.g * top.a + base.g * (1 - top.a), b: top.b * top.a + base.b * (1 - top.a) };
+    }
+    return base;
+  };
+  const failures = new Set();
+  for (const element of document.querySelectorAll('main *, .rail *, .topbar *')) {
+    if (![...element.childNodes].some(node => node.nodeType === 3 && node.textContent.trim())) continue;
+    if (element.closest('[hidden], dialog:not([open]), .sr-only, .tl-bar, .grad-text') || !element.getBoundingClientRect().width) continue;
+    if (element.closest('.palette-swatch') || element.matches(':disabled')) continue;
+    const style = getComputedStyle(element);
+    const foreground = parse(style.color);
+    if (!foreground) continue;
+    const back = background(element);
+    const fore = { r: foreground.r * foreground.a + back.r * (1 - foreground.a), g: foreground.g * foreground.a + back.g * (1 - foreground.a), b: foreground.b * foreground.a + back.b * (1 - foreground.a) };
+    const [high, low] = [lum(fore), lum(back)].sort((a, b) => b - a);
+    const ratio = (high + 0.05) / (low + 0.05);
+    if (ratio < 4.5) failures.add(`${String(element.className).slice(0, 30) || element.tagName} ${ratio.toFixed(2)} "${element.textContent.trim().slice(0, 16)}"`);
+  }
+  return [...failures];
+}
+
+for (const palette of palettes) {
+  for (const theme of themes) {
+    test(`${palette} ${theme} meets 4.5:1 on every page`, async ({ page }) => {
+      for (const path of pages) {
+        await page.goto(path);
+        await page.addStyleTag({ content: '*, *::before, *::after { transition: none !important; animation: none !important; }' });
+        await page.evaluate(([p, t]) => {
+          document.documentElement.dataset.palette = p;
+          document.documentElement.dataset.theme = t;
+        }, [palette, theme]);
+        expect(await page.evaluate(lowContrast), `${path}`).toEqual([]);
+      }
+    });
+  }
+}
+
+for (const accent of ['blue', 'red', 'orange', 'yellow', 'green', 'purple', 'pink', 'graphite']) {
+  for (const theme of themes) {
+    test(`macOS accent ${accent} ${theme} meets 4.5:1`, async ({ page }) => {
+      for (const path of ['/', '/setup']) {
+        await page.goto(path);
+        await page.addStyleTag({ content: '*, *::before, *::after { transition: none !important; animation: none !important; }' });
+        await page.evaluate(([a, t]) => {
+          document.documentElement.dataset.palette = 'macos';
+          document.documentElement.dataset.accent = a;
+          document.documentElement.dataset.theme = t;
+        }, [accent, theme]);
+        expect(await page.evaluate(lowContrast), path).toEqual([]);
+      }
+    });
+  }
+}
+
+test('the macOS style picks up a changed accent color when the window regains focus', async ({ page }) => {
+  await page.goto('/');
+  await page.evaluate(() => { document.documentElement.dataset.accent = 'blue'; });
+  await page.route('**/api/accent', route => route.fulfill({ json: { accent: 'pink' } }));
+  await page.evaluate(() => window.dispatchEvent(new Event('focus')));
+  await expect(page.locator('html')).toHaveAttribute('data-accent', 'pink');
+});
+
+test('the palette switch applies at once and the choice survives a reload', async ({ page }) => {
+  await page.goto('/setup');
+  await page.locator('[data-palette-pref="github"]').click();
+  await expect(page.locator('html')).toHaveAttribute('data-palette', 'github');
+  await expect(page.locator('[data-palette-pref="github"]')).toHaveAttribute('aria-pressed', 'true');
+  await page.waitForLoadState('networkidle');
+  await page.reload();
+  await expect(page.locator('html')).toHaveAttribute('data-palette', 'github');
+  await page.locator('[data-palette-pref="cockpit"]').click();
+  await page.waitForLoadState('networkidle');
+  await page.reload();
+  await expect(page.locator('html')).toHaveAttribute('data-palette', 'cockpit');
+});
+
+test('the palette switch works without JavaScript', async ({ browser }) => {
+  const context = await browser.newContext({ javaScriptEnabled: false });
+  const page = await context.newPage();
+  try {
+    await page.goto('/setup');
+    await page.locator('[data-palette-pref="codex"]').click();
+    await expect(page.locator('html')).toHaveAttribute('data-palette', 'codex');
+    await page.locator('[data-palette-pref="cockpit"]').click();
+    await expect(page.locator('html')).toHaveAttribute('data-palette', 'cockpit');
+  } finally { await context.close(); }
+});
diff --git a/ui/tests/setup.spec.mjs b/ui/tests/setup.spec.mjs
index a63d6bb..24e9a20 100644
--- a/ui/tests/setup.spec.mjs
+++ b/ui/tests/setup.spec.mjs
@@ -2,7 +2,12 @@ import { expect, test } from '@playwright/test';
 
 test('shows the setup page on every platform', async ({ page }) => {
   await page.goto('/setup');
-  await expect(page.getByRole('heading', { name: 'Setup', exact: true })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Setup', exact: true })).toHaveAttribute('aria-current', 'page');
+  await expect(page.getByRole('heading', { name: 'Settings', exact: true })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Settings', exact: true })).toHaveAttribute('aria-current', 'page');
   await expect(page.getByRole('link', { name: 'Microsoft documentation', exact: true })).toHaveAttribute('href', /learn\.microsoft\.com/);
+  await expect(page.getByRole('heading', { name: 'General', exact: true })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Privacy & network', exact: true })).toBeVisible();
+  await expect(page.locator('#settings-privacy')).toContainText('builds.dotnet.microsoft.com');
+  await expect(page.locator('#settings-privacy')).toContainText('api.nuget.org');
+  await expect(page.locator('#settings-privacy')).toContainText('api.github.com');
 });
diff --git a/ui/tests/tools-server.mjs b/ui/tests/tools-server.mjs
index ff107e8..5333719 100644
--- a/ui/tests/tools-server.mjs
+++ b/ui/tests/tools-server.mjs
@@ -10,7 +10,8 @@ await writeFile(join(directory, '.config', 'dotnet-tools.json'), JSON.stringify(
   'cockpit.fixture.tool': { version: '1.2.3', commands: ['fixture', 'fixture-alt'] },
 } }));
 const executable = fileURLToPath(new URL('../../artifacts/native/dotnet-cockpit', import.meta.url));
-const child = spawn(executable, ['--no-browser', '--port', '5234'], { cwd: directory, stdio: 'inherit' });
+const pathEnv = process.env.PATH?.includes('.dotnet') ? process.env.PATH : `${process.env.HOME}/.dotnet:${process.env.PATH}`;
+const child = spawn(executable, ['--no-browser', '--port', '5234'], { cwd: directory, stdio: 'inherit', env: { ...process.env, PATH: pathEnv } });
 process.on('SIGTERM', () => child.kill());
 process.on('SIGINT', () => child.kill());
 child.on('exit', async code => {
diff --git a/ui/tests/tools.spec.mjs b/ui/tests/tools.spec.mjs
index 0420287..b11ddfa 100644
--- a/ui/tests/tools.spec.mjs
+++ b/ui/tests/tools.spec.mjs
@@ -5,17 +5,17 @@ test('navigates to the tools page and lists both scopes without JavaScript', asy
   const page = await context.newPage();
   try {
     await page.goto('http://127.0.0.1:5234/');
-    await page.getByRole('link', { name: 'Installations', exact: true }).focus();
+    await page.getByRole('link', { name: /^Versions/ }).focus();
     await page.keyboard.press('Tab');
-    await expect(page.getByRole('link', { name: '.NET Tools', exact: true })).toBeFocused();
+    await expect(page.getByRole('link', { name: /^Tools/ })).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(page.getByRole('heading', { name: '.NET Tools', exact: true })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Global tools', exact: true })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Local tools', exact: true })).toHaveCount(0);
     await expect(page.getByRole('button', { name: 'Initialize local tools', exact: true })).toHaveCount(0);
     await expect(page.locator('a.tool-tab[href="/tools?scope=local"]')).toHaveAttribute('aria-selected', 'false');
-    await expect(page.getByRole('link', { name: '.NET Tools', exact: true })).not.toHaveClass(/nav-child/);
-    await expect(page.getByRole('link', { name: '.NET Tools', exact: true })).toHaveAttribute('aria-current', 'page');
+    await expect(page.getByRole('link', { name: /^Tools/ })).not.toHaveClass(/nav-child/);
+    await expect(page.getByRole('link', { name: /^Tools/ })).toHaveAttribute('aria-current', 'page');
     const response = await page.request.get('http://127.0.0.1:5234/api/tools');
     const tools = await response.json();
     await expect(page.locator('.working-directory')).toContainText(tools.workingDirectory);
@@ -24,12 +24,12 @@ test('navigates to the tools page and lists both scopes without JavaScript', asy
     await expect(page.getByRole('table', { name: 'Local tools' })).toContainText('cockpit.fixture.tool');
     await expect(page.getByRole('table', { name: 'Local tools' })).toContainText('fixture-alt');
     await expect(page.getByRole('table', { name: 'Local tools' })).toContainText('dotnet-tools.json');
-    await expect(page.getByRole('button', { name: 'Uninstall', exact: true })).toHaveCount(1);
+    await expect(page.locator('#local-tools-panel').getByRole('button', { name: /^Remove cockpit/ })).toHaveCount(1);
     await expect(page.getByRole('button', { name: 'Remove local tools', exact: true })).toBeVisible();
     await expect(page.getByRole('textbox', { name: 'Search .NET tools' })).toBeVisible();
     await expect(page.locator('a.tool-tab[href="/tools?scope=local"]')).toHaveAttribute('aria-selected', 'true');
-    await expect(page.getByRole('link', { name: 'Refresh', exact: true })).toHaveAttribute('href', '/tools?scope=local');
-    await page.getByRole('link', { name: 'Refresh', exact: true }).click();
+    await expect(page.getByRole('link', { name: /^Refresh/ })).toHaveAttribute('href', '/tools?scope=local');
+    await page.getByRole('link', { name: /^Refresh/ }).click();
     await expect(page.getByRole('table', { name: 'Local tools' })).toContainText('cockpit.fixture.tool');
   } finally { await context.close(); }
 });
@@ -37,7 +37,7 @@ test('navigates to the tools page and lists both scopes without JavaScript', asy
 test('keeps tools navigation available on narrow screens', async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 844 });
   await page.goto('/');
-  await page.getByRole('link', { name: '.NET Tools', exact: true }).click();
+  await page.getByRole('link', { name: /^Tools/ }).click();
   await expect(page.getByRole('heading', { name: '.NET Tools', exact: true })).toBeVisible();
   await expect(page.getByRole('heading', { name: 'Global tools', exact: true })).toBeVisible();
   await page.locator('a.tool-tab[href="/tools?scope=local"]').click();
@@ -59,3 +59,96 @@ test('explains why tools cannot be listed without a dotnet host', async ({ page
   await expect(page.getByRole('heading', { name: 'No .NET installation found' })).toBeVisible();
   await expect(page.getByText('A .NET SDK is required to list tools.', { exact: false })).toBeVisible();
 });
+
+test('filters installed local tools instantly with client-side JavaScript', async ({ page }) => {
+  await page.goto('http://127.0.0.1:5234/tools?scope=local');
+  await expect(page.locator('tr[data-tool-scope="local"]')).toHaveCount(1);
+  const filterInput = page.locator('input[data-tools-table-filter]');
+  await expect(filterInput).toBeVisible();
+
+  await filterInput.fill('fixture');
+  await expect(page.locator('tr[data-tool-scope="local"]:not([hidden])')).toHaveCount(1);
+
+  await filterInput.fill('no-matching-tool');
+  await expect(page.locator('tr[data-tool-scope="local"]:not([hidden])')).toHaveCount(0);
+  await expect(page.locator('.client-tools-empty')).toBeVisible();
+
+  await filterInput.fill('');
+  await expect(page.locator('tr[data-tool-scope="local"]:not([hidden])')).toHaveCount(1);
+  await expect(page.locator('.client-tools-empty')).toBeHidden();
+});
+
+test('opens the NuGet Add Tool sheet and updates CLI preview', async ({ page }) => {
+  await page.goto('http://127.0.0.1:5234/tools');
+  const openBtn = page.locator('#open-add-tool-btn');
+  await expect(openBtn).toBeVisible();
+  await openBtn.click();
+  const dialog = page.locator('#add-tool-dialog');
+  await expect(dialog).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Add a .NET tool' })).toBeVisible();
+  await expect(page.locator('[data-sheet-scope="global"]')).toContainText('Global');
+  await expect(page.locator('[data-sheet-scope="global"]')).toContainText('User');
+  await expect(page.locator('[data-sheet-scope="local"]')).toContainText('Local');
+  await expect(page.locator('[data-sheet-scope="local"]')).toContainText('Workspace');
+  // No row is singled out, and the command appears only once a tool is chosen
+  await expect(dialog.locator('.sheet-result-item .button.primary')).toHaveCount(0);
+  await page.locator('[data-sheet-scope="local"]').click();
+  await dialog.locator('.sheet-result-item button[type="submit"]').first().click();
+  const confirm = page.locator('#confirm-dialog');
+  await expect(confirm).toBeVisible();
+  await expect(page.locator('#confirm-dialog-command')).toContainText('dotnet tool install --local');
+  await page.locator('#confirm-dialog-cancel').click();
+  await expect(confirm).toBeHidden();
+  await expect(dialog).toBeVisible();
+  await page.locator('#close-add-tool-btn').click();
+  await expect(dialog).toBeHidden();
+});
+
+test('displays tool logos, descriptions, and download counts and opens the tool detail drawer', async ({ page }) => {
+  await page.goto('http://127.0.0.1:5234/tools?scope=local');
+  const row = page.locator('tr[data-tool-scope="local"]').first();
+  await expect(row.locator('.tool-logo.nuget-default-logo svg.nuget-logo-svg')).toBeVisible();
+  await expect(row.locator('.tool-desc')).toContainText('Workspace verification fixture tool');
+
+  const drawer = page.locator('#tool-drawer');
+  await expect(drawer).toBeHidden();
+
+  await row.click();
+  await expect(drawer).toBeVisible();
+  await expect(page.locator('#tool-drawer-title')).toHaveText('cockpit.fixture.tool');
+  await expect(page.locator('#tool-drawer-downloads')).toBeVisible();
+  await expect(page.locator('#tool-drawer-verified')).toBeVisible();
+  await expect(page.locator('#tool-drawer-uninstall-cmd')).toContainText('dotnet tool uninstall --local \\');
+
+  await page.locator('#tool-drawer-close').click();
+  await expect(drawer).toBeHidden();
+});
+
+test('asks for confirmation before removing a tool, with and without JavaScript', async ({ page, browser }) => {
+  await page.goto('http://127.0.0.1:5234/tools?scope=local');
+  const row = page.locator('tr[data-tool-scope="local"]').first();
+  await row.getByRole('button', { name: /^Remove cockpit\.fixture\.tool/ }).click();
+  const dialog = page.locator('#confirm-dialog');
+  await expect(dialog).toBeVisible();
+  await expect(dialog).toContainText('dotnet tool uninstall --local cockpit.fixture.tool');
+  await page.locator('#confirm-dialog-cancel').click();
+  await expect(dialog).toBeHidden();
+  await expect(row).toBeVisible();
+
+  const context = await browser.newContext({ javaScriptEnabled: false });
+  const plain = await context.newPage();
+  try {
+    await plain.goto('http://127.0.0.1:5234/tools?scope=local');
+    await plain.locator('tr[data-tool-scope="local"]').first().getByRole('button', { name: /^Remove cockpit\.fixture\.tool/ }).click();
+    await expect(plain).toHaveURL(/\/confirm\?/);
+    await expect(plain.getByRole('heading', { name: 'Remove cockpit.fixture.tool?' })).toBeVisible();
+    await plain.getByRole('link', { name: 'Cancel' }).click();
+    await expect(plain).toHaveURL(/\/tools\?scope=local/);
+  } finally { await context.close(); }
+});
+
+test('the inline search stays out of the way once script has loaded', async ({ page }) => {
+  await page.goto('http://127.0.0.1:5234/tools?scope=global&q=coverage');
+  await expect(page.locator('#tool-search-section')).toBeHidden();
+  await expect(page.locator('#add-tool-dialog')).toBeVisible();
+});
diff --git a/ui/tests/visual/baselines/darwin/codex-mixed-overview-dark.png b/ui/tests/visual/baselines/darwin/codex-mixed-overview-dark.png
new file mode 100644
index 0000000..2650177
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/codex-mixed-overview-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/codex-mixed-overview-light.png b/ui/tests/visual/baselines/darwin/codex-mixed-overview-light.png
new file mode 100644
index 0000000..0c24f6c
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/codex-mixed-overview-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/codex-mixed-versions-dark.png b/ui/tests/visual/baselines/darwin/codex-mixed-versions-dark.png
new file mode 100644
index 0000000..a7245a9
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/codex-mixed-versions-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/codex-mixed-versions-light.png b/ui/tests/visual/baselines/darwin/codex-mixed-versions-light.png
new file mode 100644
index 0000000..b0c12d7
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/codex-mixed-versions-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/empty-overview.png b/ui/tests/visual/baselines/darwin/empty-overview.png
new file mode 100644
index 0000000..bb1fd67
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/empty-overview.png differ
diff --git a/ui/tests/visual/baselines/darwin/empty-tools.png b/ui/tests/visual/baselines/darwin/empty-tools.png
new file mode 100644
index 0000000..e7abdf3
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/empty-tools.png differ
diff --git a/ui/tests/visual/baselines/darwin/empty-versions.png b/ui/tests/visual/baselines/darwin/empty-versions.png
new file mode 100644
index 0000000..ac7c03a
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/empty-versions.png differ
diff --git a/ui/tests/visual/baselines/darwin/github-mixed-overview-dark.png b/ui/tests/visual/baselines/darwin/github-mixed-overview-dark.png
new file mode 100644
index 0000000..7d5bfdd
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/github-mixed-overview-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/github-mixed-overview-light.png b/ui/tests/visual/baselines/darwin/github-mixed-overview-light.png
new file mode 100644
index 0000000..c6d35bc
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/github-mixed-overview-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/github-mixed-versions-dark.png b/ui/tests/visual/baselines/darwin/github-mixed-versions-dark.png
new file mode 100644
index 0000000..5a3d084
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/github-mixed-versions-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/github-mixed-versions-light.png b/ui/tests/visual/baselines/darwin/github-mixed-versions-light.png
new file mode 100644
index 0000000..5a82331
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/github-mixed-versions-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/healthy-overview.png b/ui/tests/visual/baselines/darwin/healthy-overview.png
new file mode 100644
index 0000000..b7cc141
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/healthy-overview.png differ
diff --git a/ui/tests/visual/baselines/darwin/healthy-versions.png b/ui/tests/visual/baselines/darwin/healthy-versions.png
new file mode 100644
index 0000000..c6f3408
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/healthy-versions.png differ
diff --git a/ui/tests/visual/baselines/darwin/macos-mixed-overview-dark.png b/ui/tests/visual/baselines/darwin/macos-mixed-overview-dark.png
new file mode 100644
index 0000000..521baaa
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/macos-mixed-overview-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/macos-mixed-overview-light.png b/ui/tests/visual/baselines/darwin/macos-mixed-overview-light.png
new file mode 100644
index 0000000..cba79fa
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/macos-mixed-overview-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/macos-mixed-versions-dark.png b/ui/tests/visual/baselines/darwin/macos-mixed-versions-dark.png
new file mode 100644
index 0000000..78d1825
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/macos-mixed-versions-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/macos-mixed-versions-light.png b/ui/tests/visual/baselines/darwin/macos-mixed-versions-light.png
new file mode 100644
index 0000000..4c6c262
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/macos-mixed-versions-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-overview-1024.png b/ui/tests/visual/baselines/darwin/mixed-overview-1024.png
new file mode 100644
index 0000000..a86e25f
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-overview-1024.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-overview-dark.png b/ui/tests/visual/baselines/darwin/mixed-overview-dark.png
new file mode 100644
index 0000000..ddf4d74
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-overview-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-overview-light.png b/ui/tests/visual/baselines/darwin/mixed-overview-light.png
new file mode 100644
index 0000000..da811a7
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-overview-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-preflight-dark.png b/ui/tests/visual/baselines/darwin/mixed-preflight-dark.png
new file mode 100644
index 0000000..15a0052
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-preflight-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-preflight-light.png b/ui/tests/visual/baselines/darwin/mixed-preflight-light.png
new file mode 100644
index 0000000..f3a88e0
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-preflight-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-settings-dark.png b/ui/tests/visual/baselines/darwin/mixed-settings-dark.png
new file mode 100644
index 0000000..b5b6479
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-settings-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-settings-light.png b/ui/tests/visual/baselines/darwin/mixed-settings-light.png
new file mode 100644
index 0000000..dae0b1f
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-settings-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-tools-1024.png b/ui/tests/visual/baselines/darwin/mixed-tools-1024.png
new file mode 100644
index 0000000..1f12e0a
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-tools-1024.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-tools-dark.png b/ui/tests/visual/baselines/darwin/mixed-tools-dark.png
new file mode 100644
index 0000000..c3b4d2f
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-tools-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-tools-light.png b/ui/tests/visual/baselines/darwin/mixed-tools-light.png
new file mode 100644
index 0000000..b79cdf2
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-tools-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-versions-1024.png b/ui/tests/visual/baselines/darwin/mixed-versions-1024.png
new file mode 100644
index 0000000..81bfbc1
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-versions-1024.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-versions-dark.png b/ui/tests/visual/baselines/darwin/mixed-versions-dark.png
new file mode 100644
index 0000000..1b2065a
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-versions-dark.png differ
diff --git a/ui/tests/visual/baselines/darwin/mixed-versions-light.png b/ui/tests/visual/baselines/darwin/mixed-versions-light.png
new file mode 100644
index 0000000..bcffb88
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/mixed-versions-light.png differ
diff --git a/ui/tests/visual/baselines/darwin/overlay-cleanup.png b/ui/tests/visual/baselines/darwin/overlay-cleanup.png
new file mode 100644
index 0000000..0844d7c
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/overlay-cleanup.png differ
diff --git a/ui/tests/visual/baselines/darwin/overlay-confirm.png b/ui/tests/visual/baselines/darwin/overlay-confirm.png
new file mode 100644
index 0000000..925b752
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/overlay-confirm.png differ
diff --git a/ui/tests/visual/baselines/darwin/overlay-version-drawer.png b/ui/tests/visual/baselines/darwin/overlay-version-drawer.png
new file mode 100644
index 0000000..f38f6ff
Binary files /dev/null and b/ui/tests/visual/baselines/darwin/overlay-version-drawer.png differ
diff --git a/ui/tests/visual/fixture-server.mjs b/ui/tests/visual/fixture-server.mjs
new file mode 100644
index 0000000..2d557ba
--- /dev/null
+++ b/ui/tests/visual/fixture-server.mjs
@@ -0,0 +1,25 @@
+// Serves the pages rendered by PageFixtureTests together with the built assets.
+import { createReadStream, existsSync, statSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { extname, join, normalize } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const pages = process.env.DOTNET_COCKPIT_FIXTURES;
+const assets = fileURLToPath(new URL('../../../src/DotnetCockpit/wwwroot', import.meta.url));
+const types = { '.html': 'text/html; charset=utf-8', '.css': 'text/css', '.js': 'text/javascript', '.png': 'image/png' };
+
+createServer((request, response) => {
+  const path = normalize(new URL(request.url, 'http://127.0.0.1').pathname);
+  if (path === '/api/health') {
+    response.end('{"status":"ok"}');
+    return;
+  }
+  const file = path.startsWith('/assets/') ? join(assets, path) : join(pages, `${path}.html`);
+  if (!existsSync(file) || !statSync(file).isFile()) {
+    response.statusCode = 404;
+    response.end();
+    return;
+  }
+  response.setHeader('content-type', types[extname(file)] ?? 'application/octet-stream');
+  createReadStream(file).pipe(response);
+}).listen(5235, '127.0.0.1');
diff --git a/ui/tests/visual/pages.visual.mjs b/ui/tests/visual/pages.visual.mjs
new file mode 100644
index 0000000..69ef27e
--- /dev/null
+++ b/ui/tests/visual/pages.visual.mjs
@@ -0,0 +1,78 @@
+import { expect, test } from '@playwright/test';
+
+// Machine-specific text stays out of the comparison.
+const masks = page => ['.checked', '.ws-card', '.working-directory', '.ws-head-copy', '.hero-meta-row', '.hero-stat-cell .muted', '.step code', '.settings-dl']
+  .map(selector => page.locator(selector));
+
+async function shoot(page, name) {
+  await page.waitForLoadState('networkidle');
+  await page.evaluate(() => document.fonts.ready);
+  await expect(page).toHaveScreenshot(`${name}.png`, { fullPage: true, mask: masks(page), animations: 'disabled' });
+}
+
+const pages = ['mixed-overview', 'mixed-versions', 'mixed-tools', 'mixed-settings', 'mixed-preflight'];
+
+for (const colorScheme of ['dark', 'light']) {
+  test.describe(colorScheme, () => {
+    test.use({ colorScheme, viewport: { width: 1440, height: 900 } });
+    for (const name of pages) {
+      test(name, async ({ page }) => {
+        await page.goto(`/${name}`);
+        await shoot(page, `${name}-${colorScheme}`);
+      });
+    }
+  });
+}
+
+test.describe('states', () => {
+  test.use({ colorScheme: 'dark', viewport: { width: 1440, height: 900 } });
+  for (const name of ['healthy-overview', 'healthy-versions', 'empty-overview', 'empty-versions', 'empty-tools']) {
+    test(name, async ({ page }) => {
+      await page.goto(`/${name}`);
+      await shoot(page, name);
+    });
+  }
+
+  test('version drawer', async ({ page }) => {
+    await page.goto('/mixed-versions');
+    await page.locator('[data-inspect="9.0.320"]').click();
+    await shoot(page, 'overlay-version-drawer');
+  });
+
+  test('removal confirmation', async ({ page }) => {
+    await page.goto('/mixed-versions');
+    await page.locator('tr[data-drawer-key="7.0.408"] button.remove').click();
+    await shoot(page, 'overlay-confirm');
+  });
+
+  test('clean up', async ({ page }) => {
+    await page.goto('/mixed-versions');
+    await page.locator('#open-cleanup-btn').click();
+    await shoot(page, 'overlay-cleanup');
+  });
+});
+
+for (const palette of ['macos', 'github', 'codex']) {
+  for (const colorScheme of ['dark', 'light']) {
+    test.describe(`${palette} ${colorScheme}`, () => {
+      test.use({ colorScheme, viewport: { width: 1440, height: 900 } });
+      for (const name of ['mixed-versions', 'mixed-overview']) {
+        test(name, async ({ page }) => {
+          await page.goto(`/${name}`);
+          await page.evaluate(value => { document.documentElement.dataset.palette = value; }, palette);
+          await shoot(page, `${palette}-${name}-${colorScheme}`);
+        });
+      }
+    });
+  }
+}
+
+test.describe('narrow desktop', () => {
+  test.use({ colorScheme: 'dark', viewport: { width: 1024, height: 768 } });
+  for (const name of ['mixed-versions', 'mixed-tools', 'mixed-overview']) {
+    test(name, async ({ page }) => {
+      await page.goto(`/${name}`);
+      await shoot(page, `${name}-1024`);
+    });
+  }
+});
diff --git a/ui/tests/visual/render-fixtures.mjs b/ui/tests/visual/render-fixtures.mjs
new file mode 100644
index 0000000..3c46246
--- /dev/null
+++ b/ui/tests/visual/render-fixtures.mjs
@@ -0,0 +1,16 @@
+// Renders the fixture pages through the .NET test project, then runs the screenshot comparison.
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = fileURLToPath(new URL('../../..', import.meta.url));
+const pages = mkdtempSync(join(tmpdir(), 'cockpit-visual-'));
+const env = { ...process.env, DOTNET_COCKPIT_FIXTURES: pages };
+const run = (command, args, cwd) => {
+  const result = spawnSync(command, args, { cwd, env, stdio: 'inherit', shell: process.platform === 'win32' });
+  if (result.status !== 0) process.exit(result.status ?? 1);
+};
+run('dotnet', ['test', 'DotnetCockpit.sln', '--filter', 'FullyQualifiedName~PageFixtureTests', '--nologo', '--verbosity', 'quiet'], root);
+run('npx', ['playwright', 'test', '--config', 'playwright.visual.config.mjs', ...process.argv.slice(2)], join(root, 'ui'));