From 0c2a63b8e59e4b38a5ed9d1de88ebb7cf86db499 Mon Sep 17 00:00:00 2001
From: repparw <ubritos@gmail.com>
Date: Tue, 27 Oct 2026 20:39:40 -0300
Subject: [PATCH 1/3] Add device-local per-environment badge glyphs

Let users assign a character or emoji to each environment, with the
server-backed machine icon as the fallback. Apply badges across run
selectors, project/thread indicators, settings and command palette.

Support Unicode graphemes, IME composition and storage failure recovery.
Cover independent environment preferences with unit tests.
---
 apps/web/src/components/BranchToolbar.tsx     | 17 +++--
 .../BranchToolbarEnvironmentSelector.tsx      | 14 ++--
 apps/web/src/components/CommandPalette.tsx    | 10 ++-
 .../src/components/EnvironmentBadgeIcon.tsx   | 32 +++++++++
 .../components/ProjectEnvironmentBadge.tsx    |  6 +-
 .../src/components/ThreadStatusIndicators.tsx |  5 +-
 .../settings/ConnectionsSettings.tsx          | 18 ++++-
 .../settings/EnvironmentGlyphInput.tsx        | 61 ++++++++++++++++
 .../components/settings/EnvironmentRow.tsx    | 27 +++++--
 .../settings/SavedEnvironmentRows.tsx         |  7 ++
 .../components/sidebar/SidebarThreadRow.tsx   | 15 ++--
 apps/web/src/environmentGlyphStore.test.ts    | 41 +++++++++++
 apps/web/src/environmentGlyphStore.ts         | 72 +++++++++++++++++++
 13 files changed, 296 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/src/components/EnvironmentBadgeIcon.tsx
 create mode 100644 apps/web/src/components/settings/EnvironmentGlyphInput.tsx
 create mode 100644 apps/web/src/environmentGlyphStore.test.ts
 create mode 100644 apps/web/src/environmentGlyphStore.ts

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index 93249bcf0c9f2..b5e4872178b4e 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -18,7 +18,7 @@ import {
 import { flushSync } from "react-dom";
 
 import { useComposerDraftStore, type DraftId } from "../composerDraftStore";
-import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "./EnvironmentBadgeIcon";
 import { useProject, useThreadShellsForProjectRefs } from "../state/entities";
 import {
   ADD_TO_MACHINE_LABEL_CLASS,
@@ -234,7 +234,8 @@ const RunContextSelector = memo(function RunContextSelector({
             aria-hidden="true"
           />
         ) : (
-          <EnvironmentMachineIcon
+          <EnvironmentBadgeIcon
+            environmentId={environmentId}
             kind={activeEnvironment?.machine ?? "server"}
             // Wide machine glyphs need a little more box to match the square row icons.
             className={
@@ -358,7 +359,11 @@ const RunContextSelector = memo(function RunContextSelector({
                     closeOnClick
                   >
                     <span className="flex min-w-0 items-center gap-1.5">
-                      <EnvironmentMachineIcon kind={env.machine} className="size-3" />
+                      <EnvironmentBadgeIcon
+                        environmentId={env.environmentId}
+                        kind={env.machine}
+                        className="size-3"
+                      />
                       <span className="min-w-0 truncate">{env.label}</span>
                     </span>
                   </MenuRadioItem>
@@ -379,7 +384,11 @@ const RunContextSelector = memo(function RunContextSelector({
                         onClick={() => onAddToMachine(target.environmentId)}
                       >
                         <span className="flex min-w-0 items-center gap-1.5">
-                          <EnvironmentMachineIcon kind={target.machine} className="size-3" />
+                          <EnvironmentBadgeIcon
+                            environmentId={target.environmentId}
+                            kind={target.machine}
+                            className="size-3"
+                          />
                           <span className="min-w-0 truncate">{target.label}</span>
                         </span>
                       </MenuItem>
diff --git a/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx b/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
index 4dfe1ae50f024..8588103aec692 100644
--- a/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
+++ b/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
@@ -9,7 +9,7 @@ import { PlusIcon, ScaleIcon } from "lucide-react";
 import { memo } from "react";
 
 import { ADD_TO_MACHINE_LABEL_CLASS, type EnvironmentOption } from "./BranchToolbar.logic";
-import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "./EnvironmentBadgeIcon";
 import { useComposerMenuProps } from "./chat/composerEventScope";
 import {
   Select,
@@ -71,7 +71,8 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-1.75 font-normal text-muted-foreground/70 text-sm sm:h-6 sm:text-xs"
         data-composer-context-control
       >
-        <EnvironmentMachineIcon
+        <EnvironmentBadgeIcon
+          environmentId={environmentId}
           kind={activeEnvironment?.machine ?? "server"}
           className="size-3 shrink-0"
         />
@@ -116,7 +117,8 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
           {autoEnvironmentLabel ? (
             <ScaleIcon className="size-3 shrink-0" aria-hidden="true" />
           ) : (
-            <EnvironmentMachineIcon
+            <EnvironmentBadgeIcon
+              environmentId={environmentId}
               kind={activeEnvironment?.machine ?? "server"}
               className="size-3 shrink-0"
             />
@@ -153,7 +155,11 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
               disabled={onEnvironmentChange === undefined && env.environmentId !== environmentId}
             >
               <span className="inline-flex items-center gap-1.5">
-                <EnvironmentMachineIcon kind={env.machine} className="size-3" />
+                <EnvironmentBadgeIcon
+                  environmentId={env.environmentId}
+                  kind={env.machine}
+                  className="size-3"
+                />
                 {env.label}
               </span>
             </SelectItem>
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 486d80a988666..3f2c38fa58b65 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -225,7 +225,7 @@ import {
   CommandPaletteVirtualizedResults,
   scrollCommandPaletteRowIntoView,
 } from "./CommandPaletteResults";
-import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "./EnvironmentBadgeIcon";
 import { Checkbox } from "./ui/checkbox";
 import { ProjectFilePicker } from "./files/ProjectFilePicker";
 import { openLinkPullRequestDialog } from "./pullRequest/LinkPullRequestDialog";
@@ -1113,7 +1113,13 @@ function OpenCommandPaletteDialog(props: {
         : option.environmentId
       : option.status,
     disabled: !option.isConnected,
-    icon: <EnvironmentMachineIcon kind={option.machine} className={ITEM_ICON_CLASS} />,
+    icon: (
+      <EnvironmentBadgeIcon
+        environmentId={option.environmentId}
+        kind={option.machine}
+        className={ITEM_ICON_CLASS}
+      />
+    ),
     keepOpen: true,
     run: async () => {
       run(option.environmentId);
diff --git a/apps/web/src/components/EnvironmentBadgeIcon.tsx b/apps/web/src/components/EnvironmentBadgeIcon.tsx
new file mode 100644
index 0000000000000..60decdb9f7d2a
--- /dev/null
+++ b/apps/web/src/components/EnvironmentBadgeIcon.tsx
@@ -0,0 +1,32 @@
+import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
+
+import { useEnvironmentGlyphStore } from "../environmentGlyphStore";
+import { cn } from "~/lib/utils";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+
+/** A device-local glyph overrides the machine icon without changing server settings. */
+export function EnvironmentBadgeIcon({
+  environmentId,
+  kind,
+  className,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly kind: EnvironmentMachineKind;
+  readonly className?: string;
+}) {
+  const glyph = useEnvironmentGlyphStore((state) => state.byId[environmentId]);
+
+  return glyph ? (
+    <span
+      aria-hidden
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center text-xs leading-none font-medium select-none",
+        className,
+      )}
+    >
+      {glyph}
+    </span>
+  ) : (
+    <EnvironmentMachineIcon aria-hidden kind={kind} className={className} />
+  );
+}
diff --git a/apps/web/src/components/ProjectEnvironmentBadge.tsx b/apps/web/src/components/ProjectEnvironmentBadge.tsx
index e9257d0de9408..12757d7ddd706 100644
--- a/apps/web/src/components/ProjectEnvironmentBadge.tsx
+++ b/apps/web/src/components/ProjectEnvironmentBadge.tsx
@@ -1,7 +1,7 @@
 import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
 
 import type { SidebarProjectSnapshot } from "~/sidebarProjectGrouping";
-import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "./EnvironmentBadgeIcon";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 
 export function ProjectEnvironmentBadge(props: {
@@ -32,8 +32,8 @@ export function ProjectEnvironmentBadge(props: {
           />
         }
       >
-        <EnvironmentMachineIcon
-          aria-hidden
+        <EnvironmentBadgeIcon
+          environmentId={first.environmentId}
           kind={props.machineByEnvironmentId.get(first.environmentId) ?? "server"}
           className="size-3.5"
         />
diff --git a/apps/web/src/components/ThreadStatusIndicators.tsx b/apps/web/src/components/ThreadStatusIndicators.tsx
index 0af0e063bdea3..78336c1a12f7c 100644
--- a/apps/web/src/components/ThreadStatusIndicators.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.tsx
@@ -18,7 +18,7 @@ import {
 } from "@t3tools/contracts";
 import { FolderGit2Icon, TerminalIcon } from "lucide-react";
 import { useEnvironment, usePrimaryEnvironmentId } from "../state/environments";
-import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "./EnvironmentBadgeIcon";
 import { useProject } from "../state/entities";
 import {
   pullRequestListLines,
@@ -794,7 +794,8 @@ export function ThreadRowTrailingStatus({ thread }: { thread: SidebarThreadSumma
               />
             }
           >
-            <EnvironmentMachineIcon
+            <EnvironmentBadgeIcon
+              environmentId={thread.environmentId}
               kind={remoteMachine}
               className="size-3 text-muted-foreground/60"
             />
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index a0ebd148453d6..c8ecb5f61b3b2 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -69,7 +69,8 @@ import { Switch } from "../ui/switch";
 import { stackedThreadToast, toastManager } from "../ui/toast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { Button } from "../ui/button";
-import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "../EnvironmentBadgeIcon";
+import { EnvironmentGlyphInput } from "./EnvironmentGlyphInput";
 import {
   revokeOtherServerClientSessions,
   revokeServerClientSession,
@@ -1024,8 +1025,8 @@ export function ConnectionsSettings({ view }: { readonly view: "environments" |
               primaryEnvironment?.label ?? (desktopBridge ? "This machine" : "Primary environment")
             }
             icon={
-              <EnvironmentMachineIcon
-                aria-hidden
+              <EnvironmentBadgeIcon
+                environmentId={primaryEnvironmentId}
                 kind={
                   primaryServerConfig
                     ? resolveEnvironmentMachineKind(primaryServerConfig)
@@ -1059,6 +1060,17 @@ export function ConnectionsSettings({ view }: { readonly view: "environments" |
               ) : null
             }
           >
+            <SettingsRow
+              title="Badge glyph"
+              description="One character or emoji, shown on this device. Clear it to use the machine icon."
+              control={
+                <EnvironmentGlyphInput
+                  key={primaryEnvironmentId}
+                  environmentId={primaryEnvironmentId}
+                  label={primaryEnvironment?.label ?? "this environment"}
+                />
+              }
+            />
             {canManageLocalBackend ? (
               <SettingsRow
                 title="Version"
diff --git a/apps/web/src/components/settings/EnvironmentGlyphInput.tsx b/apps/web/src/components/settings/EnvironmentGlyphInput.tsx
new file mode 100644
index 0000000000000..03f6fa24a1774
--- /dev/null
+++ b/apps/web/src/components/settings/EnvironmentGlyphInput.tsx
@@ -0,0 +1,61 @@
+import type { EnvironmentId } from "@t3tools/contracts";
+import { useRef, useState } from "react";
+
+import { normalizeEnvironmentGlyph, useEnvironmentGlyphStore } from "~/environmentGlyphStore";
+import { Input } from "../ui/input";
+
+/** Edit the local glyph without changing the server-backed machine icon. */
+export function EnvironmentGlyphInput({
+  environmentId,
+  label,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly label: string;
+}) {
+  const [draft, setDraft] = useState(
+    () => useEnvironmentGlyphStore.getState().byId[environmentId] ?? "",
+  );
+  const composing = useRef(false);
+  const setGlyph = (value: string) => {
+    useEnvironmentGlyphStore.getState().setGlyph(environmentId, value);
+  };
+
+  const finish = (value: string) => {
+    composing.current = false;
+    const normalized = normalizeEnvironmentGlyph(value) ?? "";
+    setDraft(normalized);
+    setGlyph(normalized);
+  };
+
+  return (
+    <div className="w-12 shrink-0 text-center">
+      <Input
+        aria-label={`Badge glyph for ${label}`}
+        title="One character or emoji (this device only). Clear to use the machine icon."
+        value={draft}
+        onChange={(event) => {
+          const value = event.currentTarget.value;
+          setDraft(value);
+          if (!composing.current) setGlyph(value);
+        }}
+        onCompositionStart={() => {
+          composing.current = true;
+        }}
+        onCompositionEnd={(event) => {
+          composing.current = false;
+          const value = event.currentTarget.value;
+          setDraft(value);
+          setGlyph(value);
+        }}
+        onBlur={(event) => finish(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !composing.current && !event.nativeEvent.isComposing) {
+            event.currentTarget.blur();
+          }
+        }}
+        placeholder="α"
+        size="sm"
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/settings/EnvironmentRow.tsx b/apps/web/src/components/settings/EnvironmentRow.tsx
index b902ab01c1f66..7d244db595b7d 100644
--- a/apps/web/src/components/settings/EnvironmentRow.tsx
+++ b/apps/web/src/components/settings/EnvironmentRow.tsx
@@ -4,7 +4,11 @@ import {
   connectionRouteLabel,
   connectionRoutes,
 } from "@t3tools/client-runtime/connection";
-import type { DesktopSshEnvironmentTarget, EnvironmentMachineKind } from "@t3tools/contracts";
+import type {
+  DesktopSshEnvironmentTarget,
+  EnvironmentId,
+  EnvironmentMachineKind,
+} from "@t3tools/contracts";
 import * as Option from "effect/Option";
 import type { ReactNode } from "react";
 
@@ -12,6 +16,7 @@ import { cn } from "~/lib/utils";
 import type { EnvironmentPresentation } from "~/state/environments";
 import { usePreparedConnection } from "~/state/session";
 import { isDesktopLocalConnectionTarget } from "~/connection/desktopLocal";
+import { EnvironmentBadgeIcon } from "../EnvironmentBadgeIcon";
 import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
 
 export function formatDesktopSshTarget(target: DesktopSshEnvironmentTarget): string {
@@ -66,6 +71,7 @@ export function EnvironmentTransportLabel(props: {
 }
 
 export function EnvironmentRow({
+  environmentId,
   kind,
   label,
   subtitle,
@@ -75,6 +81,7 @@ export function EnvironmentRow({
   className,
   children,
 }: {
+  readonly environmentId?: EnvironmentId;
   readonly kind: EnvironmentMachineKind;
   readonly label: string;
   readonly subtitle: ReactNode;
@@ -92,11 +99,19 @@ export function EnvironmentRow({
       )}
     >
       {/* Dim only identity so switched-off controls remain readable and distinct from disabled controls. */}
-      <EnvironmentMachineIcon
-        aria-hidden
-        kind={kind}
-        className={cn("size-4 text-muted-foreground", dimmed && "opacity-60")}
-      />
+      {environmentId ? (
+        <EnvironmentBadgeIcon
+          environmentId={environmentId}
+          kind={kind}
+          className={cn("size-4 text-muted-foreground", dimmed && "opacity-60")}
+        />
+      ) : (
+        <EnvironmentMachineIcon
+          aria-hidden
+          kind={kind}
+          className={cn("size-4 text-muted-foreground", dimmed && "opacity-60")}
+        />
+      )}
       <div className={cn("min-w-0", dimmed && "opacity-60")}>
         <p className="truncate text-sm font-medium text-foreground">{label}</p>
         <div className="truncate text-xs text-muted-foreground">{subtitle}</div>
diff --git a/apps/web/src/components/settings/SavedEnvironmentRows.tsx b/apps/web/src/components/settings/SavedEnvironmentRows.tsx
index fee5b9857a6ae..fbfc9e63e891b 100644
--- a/apps/web/src/components/settings/SavedEnvironmentRows.tsx
+++ b/apps/web/src/components/settings/SavedEnvironmentRows.tsx
@@ -27,6 +27,7 @@ import { cn } from "../../lib/utils";
 import { SettingsRow } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
 import { EnvironmentIconMenu } from "./EnvironmentIconPicker";
+import { EnvironmentGlyphInput } from "./EnvironmentGlyphInput";
 import { EnvironmentRoutesList } from "./EnvironmentRoutesList";
 import {
   ConnectionDiagnosisPanel,
@@ -240,6 +241,7 @@ export function SavedBackendListRow({
 
   return (
     <EnvironmentRow
+      environmentId={environmentId}
       kind={machineKind}
       label={environment.label}
       dimmed={!enabled}
@@ -357,6 +359,11 @@ export function SavedBackendListRow({
         </>
       }
     >
+      <EnvironmentGlyphInput
+        key={environmentId}
+        environmentId={environmentId}
+        label={environment.label}
+      />
       {unsupported &&
       environment.entry.serverUpdateRequired === true &&
       serverUpdateState.status !== "running" ? (
diff --git a/apps/web/src/components/sidebar/SidebarThreadRow.tsx b/apps/web/src/components/sidebar/SidebarThreadRow.tsx
index bc89186d93737..a9cd2fdee7d65 100644
--- a/apps/web/src/components/sidebar/SidebarThreadRow.tsx
+++ b/apps/web/src/components/sidebar/SidebarThreadRow.tsx
@@ -73,7 +73,7 @@ import type { SidebarThreadSummary } from "../../types";
 import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
 import { cn } from "~/lib/utils";
 import { textDirection } from "~/textDirection";
-import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
+import { EnvironmentBadgeIcon } from "../EnvironmentBadgeIcon";
 import {
   animateSidebarLayoutChanges,
   hasUnseenCompletion,
@@ -283,7 +283,8 @@ function SidebarThreadTooltip({
         ) : null}
         {environmentLabel ? (
           <div className="flex min-w-0 items-center gap-2">
-            <EnvironmentMachineIcon
+            <EnvironmentBadgeIcon
+              environmentId={thread.environmentId}
               kind={environmentMachine}
               className="size-3 shrink-0 stroke-muted-foreground"
             />
@@ -1125,7 +1126,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
   const remoteMachineIcon =
     isRemote && !showsScratchMachine ? (
       <span className="inline-flex shrink-0 items-center text-sidebar-muted-foreground/70">
-        <EnvironmentMachineIcon aria-hidden kind={props.environmentMachine} className="size-3.5" />
+        <EnvironmentBadgeIcon
+          environmentId={thread.environmentId}
+          kind={props.environmentMachine}
+          className="size-3.5"
+        />
       </span>
     ) : null;
   const diff = latestRunDiff(thread);
@@ -1147,8 +1152,8 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
         </>
       ) : showsScratchMachine ? (
         <>
-          <EnvironmentMachineIcon
-            aria-hidden
+          <EnvironmentBadgeIcon
+            environmentId={thread.environmentId}
             kind={props.environmentMachine}
             className="size-3 shrink-0"
           />
diff --git a/apps/web/src/environmentGlyphStore.test.ts b/apps/web/src/environmentGlyphStore.test.ts
new file mode 100644
index 0000000000000..015d4bb805ca2
--- /dev/null
+++ b/apps/web/src/environmentGlyphStore.test.ts
@@ -0,0 +1,41 @@
+import { EnvironmentId } from "@t3tools/contracts";
+import { beforeEach, describe, expect, it } from "vite-plus/test";
+
+import { normalizeEnvironmentGlyph, useEnvironmentGlyphStore } from "./environmentGlyphStore";
+
+const epsilonId = EnvironmentId.make("environment-epsilon");
+const alphaId = EnvironmentId.make("environment-alpha");
+
+describe("environment glyph store", () => {
+  beforeEach(() => {
+    useEnvironmentGlyphStore.setState({ byId: {} });
+  });
+
+  it("keeps one complete grapheme", () => {
+    expect(normalizeEnvironmentGlyph("  π  ")).toBe("π");
+    expect(normalizeEnvironmentGlyph("αβγδε")).toBe("α");
+    expect(normalizeEnvironmentGlyph("e\u0301xyz")).toBe("e\u0301");
+    expect(normalizeEnvironmentGlyph("👩🏽‍💻x")).toBe("👩🏽‍💻");
+    expect(normalizeEnvironmentGlyph("   ")).toBeNull();
+  });
+
+  it("stores and clears each environment independently", () => {
+    const store = useEnvironmentGlyphStore.getState();
+    store.setGlyph(epsilonId, " ε ");
+    store.setGlyph(alphaId, "α");
+    expect(useEnvironmentGlyphStore.getState().byId).toEqual({
+      [epsilonId]: "ε",
+      [alphaId]: "α",
+    });
+    store.setGlyph(epsilonId, "");
+    expect(useEnvironmentGlyphStore.getState().byId).toEqual({ [alphaId]: "α" });
+  });
+
+  it("avoids no-op updates", () => {
+    const store = useEnvironmentGlyphStore.getState();
+    store.setGlyph(epsilonId, "ε");
+    const previous = useEnvironmentGlyphStore.getState();
+    store.setGlyph(epsilonId, " ε ");
+    expect(useEnvironmentGlyphStore.getState()).toBe(previous);
+  });
+});
diff --git a/apps/web/src/environmentGlyphStore.ts b/apps/web/src/environmentGlyphStore.ts
new file mode 100644
index 0000000000000..23568c3340395
--- /dev/null
+++ b/apps/web/src/environmentGlyphStore.ts
@@ -0,0 +1,72 @@
+import type { EnvironmentId } from "@t3tools/contracts";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { createMemoryStorage } from "./lib/storage";
+
+const STORAGE_KEY = "t3code:environment-glyphs:v1";
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const fallbackStorage = createMemoryStorage();
+
+// Privacy modes and quotas can deny storage writes. Retain in-memory edits.
+const safeStorage = {
+  getItem: (name: string) => {
+    try {
+      return typeof window === "undefined"
+        ? fallbackStorage.getItem(name)
+        : window.localStorage.getItem(name);
+    } catch {
+      return fallbackStorage.getItem(name);
+    }
+  },
+  setItem: (name: string, value: string) => {
+    try {
+      if (typeof window === "undefined") fallbackStorage.setItem(name, value);
+      else window.localStorage.setItem(name, value);
+    } catch {
+      fallbackStorage.setItem(name, value);
+    }
+  },
+  removeItem: (name: string) => {
+    try {
+      if (typeof window === "undefined") fallbackStorage.removeItem(name);
+      else window.localStorage.removeItem(name);
+    } catch {
+      fallbackStorage.removeItem(name);
+    }
+  },
+};
+
+/** One visible character, including combining marks and multi-codepoint emoji. */
+export function normalizeEnvironmentGlyph(value: string): string | null {
+  const [first] = graphemes.segment(value.trim());
+  return first?.segment ?? null;
+}
+
+interface EnvironmentGlyphState {
+  readonly byId: Partial<Record<EnvironmentId, string>>;
+  readonly setGlyph: (environmentId: EnvironmentId, value: string) => void;
+}
+
+export const useEnvironmentGlyphStore = create<EnvironmentGlyphState>()(
+  persist(
+    (set) => ({
+      byId: {},
+      setGlyph: (environmentId, value) =>
+        set((state) => {
+          const glyph = normalizeEnvironmentGlyph(value);
+          if ((state.byId[environmentId] ?? null) === glyph) return state;
+
+          const byId = { ...state.byId };
+          if (glyph === null) delete byId[environmentId];
+          else byId[environmentId] = glyph;
+          return { byId };
+        }),
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => safeStorage),
+      partialize: (state) => ({ byId: state.byId }),
+    },
+  ),
+);

From c3455e3184d763368fdd1ff892fec629f6ac3632 Mon Sep 17 00:00:00 2001
From: repparw <ubritos@gmail.com>
Date: Sat, 31 Oct 2026 12:04:23 -0300
Subject: [PATCH 2/3] ci: retrigger web tests after unrelated PDF preview
 timeout


From 99a14c55c7c15aca37c9b42a434672086b75834e Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 2 Nov 2026 01:53:00 +0000
Subject: [PATCH 3/3] fix(web): make environment glyphs editable for local
 environments

---
 .../settings/ConnectionsSettings.tsx          | 19 +++++++++++++++++++
 .../settings/EnvironmentGlyphInput.tsx        |  1 +
 2 files changed, 20 insertions(+)

diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index c941583c53ed7..fe945ebaf5df8 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -1491,6 +1491,25 @@ export function ConnectionsSettings({ view }: { readonly view: "environments" |
       {desktopBridge ? (
         <SettingsSection id="this-app" title="This app">
           <LocalEnvironmentSetting />
+          {savedEnvironments
+            .filter(
+              (environment) =>
+                environment.environmentId !== primaryEnvironmentId &&
+                isDesktopLocalConnectionTarget(environment.entry.target),
+            )
+            .map((environment) => (
+              <SettingsRow
+                key={environment.environmentId}
+                title={environment.label}
+                description="One character or emoji, shown on this device. Clear it to use the machine icon."
+                control={
+                  <EnvironmentGlyphInput
+                    environmentId={environment.environmentId}
+                    label={environment.label}
+                  />
+                }
+              />
+            ))}
         </SettingsSection>
       ) : null}
       <SettingsSection
diff --git a/apps/web/src/components/settings/EnvironmentGlyphInput.tsx b/apps/web/src/components/settings/EnvironmentGlyphInput.tsx
index 03f6fa24a1774..385338f03bd27 100644
--- a/apps/web/src/components/settings/EnvironmentGlyphInput.tsx
+++ b/apps/web/src/components/settings/EnvironmentGlyphInput.tsx
@@ -38,6 +38,7 @@ export function EnvironmentGlyphInput({
           setDraft(value);
           if (!composing.current) setGlyph(value);
         }}
+        onFocus={(event) => event.currentTarget.select()}
         onCompositionStart={() => {
           composing.current = true;
         }}