fix(web): theme sidebar status and local identity

apps/web/src/components/Sidebar.tsx

@@ -963,7 +963,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
     props.configuredEnvironmentIconColor,
     props.environmentKnown,
   );
-  const environmentIconKind = isRemote ? "server" : "monitor";
+  const environmentIconKind = isRemote ? "server" : "laptop";
   const cleanupBlockerTitle =
     cleanup?.status === "queued"
       ? (readThreadShell(scopeThreadRef(thread.environmentId, cleanup.blockedByThreadId))?.title ??
@@ -1872,7 +1872,7 @@ const SidebarSearchResultRow = memo(function SidebarSearchResultRow(props: {
           projectFaviconPath={props.projectFaviconPath}
           projectIcon={props.projectIcon}
           environmentLabel={props.environmentLabel}
-          environmentIconKind={thread.environmentId === primaryEnvironmentId ? "monitor" : "server"}
+          environmentIconKind={thread.environmentId === primaryEnvironmentId ? "laptop" : "server"}
           environmentIconColor={environmentIconColor}
           providerEntry={providerEntry}
           showInstanceBadge={showInstanceBadge}

apps/web/src/components/settings/LastCodeSettings.tsx

@@ -308,7 +308,7 @@ export function LastCodeSettingsPanel() {
               title={
                 <span className="inline-flex min-w-0 items-center gap-2">
                   <EnvironmentIcon
-                    kind={isLocal ? "monitor" : "server"}
+                    kind={isLocal ? "laptop" : "server"}
                     context="settings"
                     color={color}
                     className="size-4 shrink-0"
@@ -341,7 +341,7 @@ export function LastCodeSettingsPanel() {
                     <div className="min-w-0 space-y-1">
                       <div className="text-xs font-medium text-foreground">Show local icon</div>
                       <p className="max-w-xl text-xs leading-[1.45] text-muted-foreground">
-                        Show a Monitor icon for local threads. Legacy rows always reserve its space.
+                        Show a Laptop icon for local threads. Legacy rows always reserve its space.
                       </p>
                     </div>
                     <Switch

apps/web/src/components/sidebar/SidebarThreadHoverContent.tsx

@@ -19,7 +19,7 @@ export interface SidebarThreadHoverContentProps {
   projectFaviconPath: string | null;
   projectIcon?: ProjectIconOverride | null;
   environmentLabel: string | null;
-  environmentIconKind?: "monitor" | "server";
+  environmentIconKind?: "laptop" | "server";
   environmentIconColor?: EnvironmentIconColor | undefined;
   providerEntry: ProviderInstanceEntry | null;
   showInstanceBadge: boolean;

apps/web/src/components/sidebar/SidebarUpdatePill.test.ts

@@ -116,7 +116,7 @@ describe("SidebarUpdatePill release notes", () => {
 });
 
 describe("SidebarUpdatePill local failure", () => {
-  it("uses a destructive button tone without changing the ordinary update tone", () => {
+  it("uses the themed update tone and lets a local failure override it", () => {
     expect(
       resolveSidebarUpdateButtonToneClassName({
         hasLocalBuildFailure: true,
@@ -130,7 +130,7 @@ describe("SidebarUpdatePill local failure", () => {
         isInteractionDisabled: false,
         showUpdateIconState: true,
       }),
-    ).toContain("bg-sidebar-control-surface");
+    ).toContain("bg-update-surface text-update-foreground ring-update/40");
   });
 
   it("keeps disabled update details hoverable without applying action hover styling", () => {

apps/web/src/components/sidebar/SidebarUpdatePill.tsx

@@ -111,8 +111,8 @@ export function resolveSidebarUpdateButtonToneClassName({
   }
   if (showUpdateIconState) {
     return cn(
-      "bg-sidebar-control-surface text-sidebar-foreground",
-      !isInteractionDisabled && "hover:bg-sidebar-row-hover",
+      "bg-update-surface text-update-foreground ring-update/40",
+      !isInteractionDisabled && "hover:bg-update/18",
     );
   }
   return cn(

apps/web/src/environmentIcons.test.tsx

@@ -29,8 +29,8 @@ describe("environment icon preferences", () => {
     expect(updateEnvironmentIconColors({ buildbox: "#2563eb" }, buildbox, "")).toEqual({});
   });
 
-  it("uses absolute Monitor and Server identity", () => {
-    expect(environmentIconKind(local, local)).toBe("monitor");
+  it("uses absolute Laptop and Server identity", () => {
+    expect(environmentIconKind(local, local)).toBe("laptop");
     expect(environmentIconKind(buildbox, local)).toBe("server");
     expect(environmentIconKind(local, buildbox)).toBe("server");
   });
@@ -48,15 +48,15 @@ describe("environment icon preferences", () => {
         showLocalEnvironmentIcon: false,
         environmentLabel: "Workstation",
       }),
-    ).toEqual({ kind: "monitor", showRowIcon: false, hoverLabel: null });
+    ).toEqual({ kind: "laptop", showRowIcon: false, hoverLabel: null });
     expect(
       legacyThreadEnvironmentPresentation({
         isPrimary: true,
         isDesktopLocal: false,
         showLocalEnvironmentIcon: true,
         environmentLabel: "Workstation",
       }),
-    ).toEqual({ kind: "monitor", showRowIcon: true, hoverLabel: "Workstation (local)" });
+    ).toEqual({ kind: "laptop", showRowIcon: true, hoverLabel: "Workstation (local)" });
     expect(
       legacyThreadEnvironmentPresentation({
         isPrimary: false,
@@ -93,7 +93,7 @@ describe("project environment icons", () => {
     };
     expect(projectEnvironmentIconEntries({ ...base, showLocalEnvironmentIcon: false })).toEqual([]);
     expect(projectEnvironmentIconEntries({ ...base, showLocalEnvironmentIcon: true })).toEqual([
-      { environmentId: local, kind: "monitor", label: "Workstation (local)" },
+      { environmentId: local, kind: "laptop", label: "Workstation (local)" },
     ]);
   });
 
@@ -112,7 +112,7 @@ describe("project environment icons", () => {
         showLocalEnvironmentIcon: false,
       }),
     ).toEqual([
-      { environmentId: local, kind: "monitor", label: "Workstation (local)" },
+      { environmentId: local, kind: "laptop", label: "Workstation (local)" },
       { environmentId: buildbox, kind: "server", label: "Buildbox" },
       { environmentId: production, kind: "server", label: "Production" },
       { environmentId: wsl, kind: "container", label: "Ubuntu" },
@@ -131,8 +131,9 @@ describe("EnvironmentIcon", () => {
 
   it("uses an explicit color without the contextual opacity class", () => {
     const markup = renderToStaticMarkup(
-      <EnvironmentIcon kind="monitor" context="v2-row" color="#2563eb" className="size-3" />,
+      <EnvironmentIcon kind="laptop" context="v2-row" color="#2563eb" className="size-3" />,
     );
+    expect(markup).toContain("lucide-laptop");
     expect(markup).toContain("color:#2563eb");
     expect(markup).not.toContain("text-sidebar-muted-foreground/70");
   });

apps/web/src/environmentIcons.tsx

@@ -1,11 +1,11 @@
 import type { EnvironmentId } from "@t3tools/contracts";
 import type { EnvironmentIconColor } from "@t3tools/contracts/settings";
-import { ContainerIcon, MonitorIcon, ServerIcon } from "lucide-react";
+import { ContainerIcon, LaptopIcon, ServerIcon } from "lucide-react";
 import type { CSSProperties } from "react";
 
 import { cn } from "./lib/utils";
 
-export type EnvironmentIconKind = "container" | "monitor" | "server";
+export type EnvironmentIconKind = "container" | "laptop" | "server";
 export type EnvironmentIconContext = "hover" | "legacy-row" | "project" | "settings" | "v2-row";
 
 const DEFAULT_CONTEXT_CLASS: Record<EnvironmentIconContext, string> = {
@@ -44,8 +44,8 @@ export function formatLocalEnvironmentLabel(label: string | null | undefined): s
 export function environmentIconKind(
   environmentId: EnvironmentId,
   primaryEnvironmentId: EnvironmentId | null,
-): "monitor" | "server" {
-  return environmentId === primaryEnvironmentId ? "monitor" : "server";
+): "laptop" | "server" {
+  return environmentId === primaryEnvironmentId ? "laptop" : "server";
 }
 
 export function resolveEnvironmentIconColor(
@@ -61,7 +61,7 @@ export function legacyThreadEnvironmentPresentation(input: {
   readonly showLocalEnvironmentIcon: boolean;
   readonly environmentLabel: string | null | undefined;
 }) {
-  const kind = input.isPrimary ? ("monitor" as const) : ("server" as const);
+  const kind = input.isPrimary ? ("laptop" as const) : ("server" as const);
   return {
     kind,
     showRowIcon: input.isPrimary ? input.showLocalEnvironmentIcon : !input.isDesktopLocal,
@@ -111,7 +111,7 @@ export function projectEnvironmentIconEntries(input: {
       return [
         {
           environmentId: member.environmentId,
-          kind: "monitor",
+          kind: "laptop",
           label: formatLocalEnvironmentLabel(member.environmentLabel),
         },
       ];
@@ -144,7 +144,7 @@ export function EnvironmentIcon(props: {
   readonly "aria-hidden"?: boolean | undefined;
 }) {
   const Icon =
-    props.kind === "monitor" ? MonitorIcon : props.kind === "server" ? ServerIcon : ContainerIcon;
+    props.kind === "laptop" ? LaptopIcon : props.kind === "server" ? ServerIcon : ContainerIcon;
   return (
     <Icon
       aria-hidden={props["aria-hidden"]}

docs/user/thread-sidebar.md

@@ -143,7 +143,7 @@ each saved remote environment. **Default** preserves the semantic icon treatment
 a custom color is shown at full strength in sidebar rows, project headings, and thread details. The
 icon beside each environment name previews the selection.
 
-Remote environments use a Server icon. The primary machine uses a Monitor icon, which can be shown
+Remote environments use a Server icon. The primary machine uses a Laptop icon, which can be shown
 or hidden in thread cards and legacy thread rows with **Show local icon**. Legacy rows reserve the
 same icon space either way so their columns stay aligned. Mixed legacy project groups always show
 one icon for every environment in the group, including the primary machine, with duplicate