Show connection identities in the UI

packages/app/src/web/shell.tsx

@@ -4,10 +4,16 @@ import { useAtomRefresh, useAtomValue } from "@effect/atom-react";
 import * as Effect from "effect/Effect";
 import * as Exit from "effect/Exit";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import { sourcesAtom, sourcesOptimisticAtom, toolsAtom } from "@executor-js/react/api/atoms";
+import {
+  connectionsAtom,
+  sourcesAtom,
+  sourcesOptimisticAtom,
+  toolsAtom,
+} from "@executor-js/react/api/atoms";
 import { useScope, useScopeInfo } from "@executor-js/react/api/scope-context";
 import { Button } from "@executor-js/react/components/button";
-import { SourceFavicon, sourcePresetIconUrl } from "@executor-js/react/components/source-favicon";
+import { sourcePresetIconUrl } from "@executor-js/react/components/source-favicon";
+import { SourceIconWithAccount } from "@executor-js/react/components/source-icon-with-account";
 import { CommandPalette } from "@executor-js/react/components/command-palette";
 import { useClientPlugins, useSourcePlugins } from "@executor-js/sdk/client";
 import { ServerConnectionMenu } from "./server-connection-menu";
@@ -269,6 +275,8 @@ function PluginNav(props: { pathname: string; onNavigate?: () => void }) {
 function SourceList(props: { pathname: string; onNavigate?: () => void }) {
   const scopeId = useScope();
   const sources = useAtomValue(sourcesOptimisticAtom(scopeId));
+  const connectionsResult = useAtomValue(connectionsAtom(scopeId));
+  const connections = AsyncResult.isSuccess(connectionsResult) ? connectionsResult.value : [];
   const sourcePlugins = useSourcePlugins();
 
   return AsyncResult.match(sources, {
@@ -287,6 +295,9 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
             const detailPath = `/sources/${s.id}`;
             const active =
               props.pathname === detailPath || props.pathname.startsWith(`${detailPath}/`);
+            const connection = connections.find((candidate) =>
+              s.connectionIds?.includes(candidate.id),
+            );
             return (
               <Link
                 key={s.id}
@@ -300,10 +311,12 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
                     : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
                 ].join(" ")}
               >
-                <SourceFavicon
+                <SourceIconWithAccount
                   icon={sourcePresetIconUrl(s, sourcePlugins)}
                   sourceId={s.id}
                   url={s.url}
+                  connection={connection}
+                  size="sm"
                 />
                 <span className="flex-1 truncate">{s.name}</span>
                 <span className="rounded bg-secondary/50 px-1 py-px text-xs font-medium text-muted-foreground">

packages/react/src/api/atoms.tsx

@@ -88,6 +88,13 @@ export const connectionsAtom = (scopeId: ScopeId) =>
     reactivityKeys: [ReactivityKey.connections],
   });
 
+export const connectionIdentityAtom = (scopeId: ScopeId, connectionId: ConnectionId) =>
+  ExecutorApiClient.query("connections", "identity", {
+    params: { scopeId, connectionId },
+    timeToLive: "1 minute",
+    reactivityKeys: [ReactivityKey.connections],
+  });
+
 export const secretUsagesAtom = (scopeId: ScopeId, secretId: SecretId) =>
   ExecutorApiClient.query("secrets", "usages", {
     params: { scopeId, secretId },
@@ -130,6 +137,8 @@ export const removeSecret = ExecutorApiClient.mutation("secrets", "remove");
 
 export const removeConnection = ExecutorApiClient.mutation("connections", "remove");
 
+export const updateConnectionIdentity = ExecutorApiClient.mutation("connections", "updateIdentity");
+
 export const removeSource = ExecutorApiClient.mutation("sources", "remove");
 
 export const refreshSource = ExecutorApiClient.mutation("sources", "refresh");

packages/react/src/components/source-account-badge.tsx

@@ -0,0 +1,40 @@
+import { useAtomValue } from "@effect/atom-react";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+import { ConnectionId, ScopeId } from "@executor-js/sdk/shared";
+
+import { connectionIdentityAtom } from "../api/atoms";
+
+export function SourceAccountBadge(props: {
+  readonly connection: {
+    readonly id: string;
+    readonly scopeId: string;
+    readonly identityLabel: string | null;
+  };
+  readonly size?: "sm" | "md";
+}) {
+  const identityResult = useAtomValue(
+    connectionIdentityAtom(
+      ScopeId.make(props.connection.scopeId),
+      ConnectionId.make(props.connection.id),
+    ),
+  );
+  const identity =
+    AsyncResult.isSuccess(identityResult) && identityResult.value.status === "available"
+      ? identityResult.value
+      : null;
+  const label = identity?.email ?? identity?.name ?? props.connection.identityLabel ?? "Connected";
+  const sizeClass = props.size === "sm" ? "size-3 text-[7px]" : "size-4 text-[9px]";
+  const badgeClass = `absolute -bottom-1 -right-1 z-10 flex ${sizeClass} items-center justify-center rounded-full border-2 border-card bg-background font-medium leading-none text-muted-foreground shadow-sm`;
+
+  return identity?.picture ? (
+    <span
+      title={label}
+      className={`${badgeClass} bg-cover bg-center`}
+      style={{ backgroundImage: `url("${identity.picture.replaceAll('"', "%22")}")` }}
+    />
+  ) : (
+    <span title={label} className={badgeClass}>
+      {label.slice(0, 1).toUpperCase()}
+    </span>
+  );
+}

packages/react/src/components/source-icon-with-account.tsx

@@ -0,0 +1,27 @@
+import { SourceAccountBadge } from "./source-account-badge";
+import { SourceFavicon } from "./source-favicon";
+
+export function SourceIconWithAccount(props: {
+  readonly icon?: string | null;
+  readonly sourceId: string;
+  readonly url?: string;
+  readonly connection?: {
+    readonly id: string;
+    readonly scopeId: string;
+    readonly identityLabel: string | null;
+  } | null;
+  readonly size?: "sm" | "md";
+}) {
+  const iconSize = props.size === "sm" ? 16 : 32;
+  return (
+    <span className={props.size === "sm" ? "relative size-4 shrink-0" : "relative size-8 shrink-0"}>
+      <SourceFavicon icon={props.icon} sourceId={props.sourceId} url={props.url} size={iconSize} />
+      {props.connection ? (
+        <SourceAccountBadge
+          connection={props.connection}
+          size={props.size === "sm" ? "sm" : "md"}
+        />
+      ) : null}
+    </span>
+  );
+}