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 66232885fb280..631813c90860f 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.5 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 196cb0215cc71..740c4ceb8b066 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -240,7 +240,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";
@@ -1137,7 +1137,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 e1ece5dfd53b4..6dd0515240794 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 ea49b01665b64..1d25933fcc838 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,
@@ -799,7 +799,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 087f73589f329..0a475b34880c1 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -73,7 +73,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 { type ServerClientSessionRecord } from "~/environments/primary";
 import { isDesktopLocalConnectionTarget } from "~/connection/desktopLocal";
 import { useUiStateStore } from "~/uiStateStore";
@@ -210,8 +211,8 @@ function AccessSettings() {
                 value={environment.environmentId}
               >
                 <span className="flex min-w-0 items-center gap-2">
-                  <EnvironmentMachineIcon
-                    aria-hidden
+                  <EnvironmentBadgeIcon
+                    environmentId={environment.environmentId}
                     kind={resolveEnvironmentMachineKind(environment.serverConfig)}
                     className="size-3.5 shrink-0"
                   />
@@ -1146,8 +1147,8 @@ function ConnectionsSettingsContent({
               accessEnvironment?.label ?? (desktopBridge ? "This machine" : "Primary environment")
             }
             icon={
-              <EnvironmentMachineIcon
-                aria-hidden
+              <EnvironmentBadgeIcon
+                environmentId={accessEnvironmentId}
                 kind={
                   accessServerConfig ? resolveEnvironmentMachineKind(accessServerConfig) : "desktop"
                 }
@@ -1179,6 +1180,17 @@ function ConnectionsSettingsContent({
               ) : null
             }
           >
+            <SettingsRow
+              title="Badge glyph"
+              description="One character or emoji, shown on this device. Clear it to use the machine icon."
+              control={
+                <EnvironmentGlyphInput
+                  key={accessEnvironmentId}
+                  environmentId={accessEnvironmentId}
+                  label={accessEnvironment?.label ?? "this environment"}
+                />
+              }
+            />
             {accessServerConfig?.managedPolicy ? (
               <div className="px-3 py-2 sm:px-4">
                 <ManagedByOrganization policy={accessServerConfig.managedPolicy} />
@@ -1594,6 +1606,25 @@ function ConnectionsSettingsContent({
       {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
new file mode 100644
index 0000000000000..385338f03bd27
--- /dev/null
+++ b/apps/web/src/components/settings/EnvironmentGlyphInput.tsx
@@ -0,0 +1,62 @@
+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);
+        }}
+        onFocus={(event) => event.currentTarget.select()}
+        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 53b745412d983..a559bfd96dd56 100644
--- a/apps/web/src/components/settings/SavedEnvironmentRows.tsx
+++ b/apps/web/src/components/settings/SavedEnvironmentRows.tsx
@@ -28,6 +28,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,
@@ -238,6 +239,7 @@ export function SavedBackendListRow({
 
   return (
     <EnvironmentRow
+      environmentId={environmentId}
       kind={machineKind}
       label={environment.label}
       dimmed={!enabled}
@@ -355,6 +357,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 7c9cc93f2b3b3..51366dac65a1b 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,
@@ -284,7 +284,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"
             />
@@ -1132,7 +1133,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);
@@ -1154,8 +1159,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 }),
+    },
+  ),
+);