clients: allow custom emoji icon override for connections

Adds a user-editable client_icon field so any connection's
Connections-page icon can be changed via the shared emoji picker,
falling back to the existing logo/known-client-name resolution when
unset. Threaded through storage (new migration + repo method), the
Tauri command, the GatewayWrites trait (desktop + web-admin HTTP
bridge), and the ClientsPage side panel UI.

Signed-off-by: crimsonsunset <jsangio1@gmail.com>

Author: crimsonsunset

apps/desktop/src-tauri/src/commands/oauth.rs

@@ -468,6 +468,7 @@ pub async fn get_oauth_clients(
             registration_type: client.registration_type.as_str().to_string(),
             client_name: client.client_name,
             client_alias: client.client_alias,
+            client_icon: client.client_icon,
             redirect_uris: client.redirect_uris,
             scope: client.scope,
             approved: client.approved,
@@ -526,6 +527,7 @@ pub struct OAuthClientInfo {
     pub registration_type: String,
     pub client_name: String,
     pub client_alias: Option<String>,
+    pub client_icon: Option<String>,
     pub redirect_uris: Vec<String>,
     pub scope: Option<String>,
 
@@ -570,11 +572,13 @@ pub struct OAuthClientInfo {
 
 /// Request to update client settings.
 ///
-/// Only the alias is user-editable now — connection mode / space pin no
-/// longer exist.
+/// Only the alias and icon are user-editable now — connection mode /
+/// space pin no longer exist.
 #[derive(Debug, Serialize, Deserialize)]
 pub struct UpdateClientSettingsRequest {
     pub client_alias: Option<String>,
+    #[serde(default)]
+    pub client_icon: Option<String>,
 }
 
 /// Update an OAuth client's settings (direct service access)
@@ -599,6 +603,9 @@ pub async fn update_oauth_client(
     repo.update_client_alias(&client_id, settings.client_alias)
         .await
         .map_err(|e| format!("Failed to update client: {}", e))?;
+    repo.update_client_icon(&client_id, settings.client_icon)
+        .await
+        .map_err(|e| format!("Failed to update client: {}", e))?;
 
     info!("[OAuth] Updated client: {}", client_id);
 
@@ -617,6 +624,7 @@ pub async fn update_oauth_client(
         registration_type: updated_client.registration_type.as_str().to_string(),
         client_name: updated_client.client_name,
         client_alias: updated_client.client_alias,
+        client_icon: updated_client.client_icon,
         redirect_uris: updated_client.redirect_uris,
         scope: updated_client.scope,
         approved: updated_client.approved,
@@ -759,6 +767,7 @@ pub async fn register_api_key_client(
         reports_roots: false,
         roots_capability_known: false,
         machine_id: None,
+        client_icon: None,
     };
     repo.save_client(&client)
         .await

apps/desktop/src-tauri/src/services/admin_write_runtime.rs

@@ -250,11 +250,15 @@ impl GatewayWriteRuntime for DesktopGatewayWriteRuntime {
         &self,
         client_id: String,
         client_alias: Option<String>,
+        client_icon: Option<String>,
     ) -> anyhow::Result<Value> {
         let client = update_oauth_client(
             self.app_handle.state(),
             client_id,
-            UpdateClientSettingsRequest { client_alias },
+            UpdateClientSettingsRequest {
+                client_alias,
+                client_icon,
+            },
         )
         .await
         .map_err(|e| anyhow::anyhow!(e))?;

apps/desktop/src/features/clients/ClientsPage.tsx

@@ -12,6 +12,7 @@ import androidStudioIcon from '@/assets/client-icons/android-studio.svg';
 import opencodeIcon from '@/assets/client-icons/opencode.svg';
 import opencodeIconDark from '@/assets/client-icons/opencode-dark.svg';
 import { ClientBrandIcon } from '@/components/ClientBrandIcon';
+import { EmojiPickerButton } from '@/components/emoji-picker-button.component';
 import { resolveKnownClientKey } from '@/lib/clientIcons';
 import {
   Laptop,
@@ -62,7 +63,18 @@ const CLIENT_ICON_ASSETS: Record<string, string> = {
   'android-studio': androidStudioIcon,
 };
 
-function ClientIcon({ logo_uri, client_name }: { logo_uri?: string | null; client_name: string }) {
+function ClientIcon({
+  logo_uri,
+  client_name,
+  client_icon,
+}: {
+  logo_uri?: string | null;
+  client_name: string;
+  client_icon?: string | null;
+}) {
+  if (client_icon) {
+    return <span>{client_icon}</span>;
+  }
   const knownKey = resolveKnownClientKey(client_name);
   // opencode ships theme-specific marks; render our bundled official logo
   // (overriding any outdated self-reported logo_uri).
@@ -123,6 +135,7 @@ export default function ClientsPage() {
   const [selected, setSelected] = useState<OAuthClient | null>(null);
   const [showRegister, setShowRegister] = useState(false);
   const [editAlias, setEditAlias] = useState('');
+  const [editIcon, setEditIcon] = useState('');
   const [isSaving, setIsSaving] = useState(false);
   const [gatewayStatus, setGatewayStatus] = useState<GatewayStatus>({
     running: false,
@@ -204,6 +217,7 @@ export default function ClientsPage() {
   const openPanel = (client: OAuthClient) => {
     setSelected(client);
     setEditAlias(client.client_alias || '');
+    setEditIcon(client.client_icon || '');
   };
 
   const handleSaveAlias = async () => {
@@ -212,9 +226,11 @@ export default function ClientsPage() {
     try {
       const updated = await updateOAuthClient(selected.client_id, {
         client_alias: editAlias || undefined,
+        client_icon: editIcon || undefined,
       });
       setClients((prev) => prev.map((c) => (c.client_id === updated.client_id ? updated : c)));
       setSelected(updated);
+      setEditIcon(updated.client_icon || '');
       success(t('toast.saved'), t('toast.savedBody', { name: updated.client_alias || updated.client_name }));
     } catch (e) {
       showError(t('toast.saveFailed'), e instanceof Error ? e.message : String(e));
@@ -374,7 +390,11 @@ export default function ClientsPage() {
                     <CardContent className="p-6">
                       <div className="mb-4 flex items-start gap-4">
                         <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl border border-[rgb(var(--border-subtle))] bg-[rgb(var(--surface))] text-3xl">
-                          <ClientIcon logo_uri={client.logo_uri} client_name={client.client_name} />
+                          <ClientIcon
+                            logo_uri={client.logo_uri}
+                            client_name={client.client_name}
+                            client_icon={client.client_icon}
+                          />
                         </div>
                         <div className="min-w-0 flex-1">
                           <h3 className="mb-1 truncate text-lg font-semibold">{displayName}</h3>
@@ -417,6 +437,8 @@ export default function ClientsPage() {
             client={selected}
             editAlias={editAlias}
             setEditAlias={setEditAlias}
+            editIcon={editIcon}
+            setEditIcon={setEditIcon}
             isSaving={isSaving}
             defaultSpaceId={defaultSpace?.id ?? null}
             onClose={() => setSelected(null)}
@@ -517,6 +539,8 @@ interface SidePanelProps {
   client: OAuthClient;
   editAlias: string;
   setEditAlias: (v: string) => void;
+  editIcon: string;
+  setEditIcon: (v: string) => void;
   isSaving: boolean;
   defaultSpaceId: string | null;
   onClose: () => void;
@@ -531,6 +555,8 @@ function SidePanel({
   client,
   editAlias,
   setEditAlias,
+  editIcon,
+  setEditIcon,
   isSaving,
   defaultSpaceId,
   onClose,
@@ -542,14 +568,19 @@ function SidePanel({
 }: SidePanelProps) {
   const { t } = useTranslation(['clients', 'nav']);
   const aliasDirty = (client.client_alias || '') !== editAlias;
+  const iconDirty = (client.client_icon || '') !== editIcon;
 
   return (
     <div className="animate-in slide-in-from-right fixed bottom-0 right-0 top-0 z-50 flex w-full min-w-[420px] max-w-[480px] flex-col border-l border-[rgb(var(--border))] bg-[rgb(var(--surface))] shadow-2xl duration-300">
       <div className="flex-shrink-0 border-b border-[rgb(var(--border))] bg-[rgb(var(--surface-elevated))] p-4">
         <div className="flex items-start justify-between">
           <div className="flex min-w-0 flex-1 items-center gap-3">
             <div className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--border-subtle))] bg-[rgb(var(--background))] text-2xl">
-              <ClientIcon logo_uri={client.logo_uri} client_name={client.client_name} />
+              <ClientIcon
+                logo_uri={client.logo_uri}
+                client_name={client.client_name}
+                client_icon={editIcon}
+              />
             </div>
             <div className="min-w-0 flex-1">
               <h2 className="truncate text-lg font-bold">
@@ -581,19 +612,25 @@ function SidePanel({
           <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-[rgb(var(--muted))]">
             {t('panel.displayName')}
           </h3>
-          <div className="flex gap-2">
+          <div className="flex items-end gap-2">
+            <EmojiPickerButton
+              value={editIcon}
+              onChange={setEditIcon}
+              disabled={isSaving}
+              testId="client-icon-picker"
+            />
             <input
               type="text"
               value={editAlias}
               onChange={(e) => setEditAlias(e.target.value)}
               placeholder={client.client_name}
-              className="focus:ring-primary-500 focus:border-primary-500 flex-1 rounded-lg border border-[rgb(var(--border))] bg-[rgb(var(--background))] px-3 py-2 text-sm focus:outline-none focus:ring-2"
+              className="focus:ring-primary-500 focus:border-primary-500 h-10 flex-1 rounded-lg border border-[rgb(var(--border))] bg-[rgb(var(--background))] px-3 text-sm focus:outline-none focus:ring-2"
             />
             <Button
               size="sm"
               variant="primary"
               onClick={onSaveAlias}
-              disabled={!aliasDirty || isSaving}
+              disabled={(!aliasDirty && !iconDirty) || isSaving}
               data-testid="client-save-alias-btn"
             >
               {isSaving ? (

apps/desktop/src/lib/api/gateway.ts

@@ -165,6 +165,8 @@ export interface OAuthClient {
   registration_type: RegistrationType;
   client_name: string;
   client_alias: string | null;
+  /** User-set emoji override for the Connections-page icon; `null` falls back to logo_uri / known-client resolution. */
+  client_icon: string | null;
   redirect_uris: string[];
   scope: string | null;
 
@@ -204,10 +206,11 @@ export interface OAuthClient {
 }
 
 /**
- * Update client settings request. Only the display alias is editable.
+ * Update client settings request. Only the display alias and icon are editable.
  */
 export interface UpdateClientRequest {
   client_alias?: string;
+  client_icon?: string;
 }
 
 /**

crates/mcpmux-gateway/src/admin/command_bridge/write.rs

@@ -229,6 +229,8 @@ pub struct MetaToolRevokeBody {
 #[derive(Debug, Deserialize)]
 pub struct OAuthClientUpdateBody {
     pub client_alias: Option<String>,
+    #[serde(default)]
+    pub client_icon: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -1180,7 +1182,7 @@ pub async fn update_oauth_client(
     body: OAuthClientUpdateBody,
 ) -> Result<Value> {
     ctx.gateway_writes
-        .update_oauth_client(client_id, body.client_alias)
+        .update_oauth_client(client_id, body.client_alias, body.client_icon)
         .await
 }
 

crates/mcpmux-gateway/src/admin/write_runtime.rs

@@ -61,6 +61,7 @@ pub trait GatewayWriteRuntime: Send + Sync {
         &self,
         client_id: String,
         client_alias: Option<String>,
+        client_icon: Option<String>,
     ) -> Result<Value>;
     async fn delete_oauth_client(&self, client_id: String) -> Result<Value>;
     async fn grant_oauth_client_feature_set(
@@ -279,6 +280,7 @@ impl GatewayWriteRuntime for LiveGatewayWriteRuntime {
         &self,
         _client_id: String,
         _client_alias: Option<String>,
+        _client_icon: Option<String>,
     ) -> Result<Value> {
         Err(gateway_write_unavailable())
     }
@@ -436,6 +438,7 @@ impl GatewayWriteRuntime for StubGatewayWriteRuntime {
         &self,
         _client_id: String,
         _client_alias: Option<String>,
+        _client_icon: Option<String>,
     ) -> Result<Value> {
         Err(gateway_not_running())
     }

crates/mcpmux-gateway/src/oauth/dcr.rs

@@ -141,6 +141,7 @@ fn build_inbound_client_from_request(
         reports_roots: false,
         roots_capability_known: false,
         machine_id: None,
+        client_icon: None,
     }
 }
 

crates/mcpmux-gateway/src/services/client_metadata_service.rs

@@ -143,6 +143,7 @@ impl ClientMetadataService {
             reports_roots: false,
             roots_capability_known: false,
             machine_id: None,
+            client_icon: None,
         }
     }
 }

crates/mcpmux-storage/src/database.rs

@@ -223,6 +223,11 @@ const MIGRATIONS: &[Migration] = &[
         name: "inbound_client_locked_space",
         sql: include_str!("migrations/038_inbound_client_locked_space.sql"),
     },
+    Migration {
+        version: 39,
+        name: "inbound_client_icon",
+        sql: include_str!("migrations/039_inbound_client_icon.sql"),
+    },
 ];
 
 /// SQLite database wrapper.

crates/mcpmux-storage/src/migrations/039_inbound_client_icon.sql

@@ -0,0 +1,4 @@
+-- User-editable emoji override for a client's Connections-page icon.
+-- NULL means "fall back to logo_uri / known-client-name resolution".
+
+ALTER TABLE inbound_clients ADD COLUMN client_icon TEXT;