Reflect subscribed state in preview + compact subscribed tile labels

- Wire `isSubscribed` on the ReadResourceState passed to ResourcesScreen
  by deriving it from the live subscriptions list in App.tsx. The
  ResourcePreviewPanel's SubscribeButton already flips its label to
  "Unsubscribe" when subscribed; without this derivation isSubscribed
  was always false and the button looked stuck on "Subscribe".
- In ResourceSubscribedItem, display only the last URI path segment
  (truncated with ellipsis if it still overflows) and surface the full
  URI via a hover tooltip. Keeps the Subscriptions pleat readable when
  resources have long path-style URIs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

clients/web/src/App.tsx

@@ -562,6 +562,22 @@ function App() {
     /* TODO: not wired yet */
   }, []);
 
+  // The Resources screen needs `isSubscribed` to flip the Subscribe button
+  // label to "Unsubscribe". Derive it from the live subscriptions list rather
+  // than threading it through every setReadResourceState site — that way the
+  // button reflects state changes from any source (preview panel, subscribed
+  // tile, or future server-initiated subscribe notifications).
+  const effectiveReadResourceState = useMemo<
+    ReadResourceState | undefined
+  >(() => {
+    if (!readResourceState) return undefined;
+    if (!readResourceState.uri) return readResourceState;
+    const isSubscribed = subscriptions.some(
+      (s) => s.resource.uri === readResourceState.uri,
+    );
+    return { ...readResourceState, isSubscribed };
+  }, [readResourceState, subscriptions]);
+
   return (
     <InspectorView
       servers={servers}
@@ -580,7 +596,7 @@ function App() {
       history={messages}
       toolCallState={toolCallState}
       getPromptState={getPromptState}
-      readResourceState={readResourceState}
+      readResourceState={effectiveReadResourceState}
       currentLogLevel={currentLogLevel}
       sandboxPath={STUB_SANDBOX_PATH}
       bridgeFactory={stubBridgeFactory}

clients/web/src/components/groups/ResourceSubscribedItem/ResourceSubscribedItem.test.tsx

@@ -5,31 +5,61 @@ import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { ResourceSubscribedItem } from "./ResourceSubscribedItem";
 
 const subscription: InspectorResourceSubscription = {
-  resource: { uri: "file:///x", name: "x" },
+  resource: { uri: "file:///foo/bar/config.json", name: "config.json" },
   lastUpdated: new Date("2024-01-01T12:00:00Z"),
 };
 
 describe("ResourceSubscribedItem", () => {
-  it("renders the resource name", () => {
+  it("renders the last URI path segment, not the name or title", () => {
     renderWithMantine(
       <ResourceSubscribedItem
-        subscription={{ resource: subscription.resource }}
+        subscription={{
+          resource: {
+            uri: "file:///foo/bar/config.json",
+            name: "ignored-name",
+            title: "Ignored Title",
+          },
+        }}
         onUnsubscribe={() => {}}
       />,
     );
-    expect(screen.getByText("x")).toBeInTheDocument();
+    expect(screen.getByText("config.json")).toBeInTheDocument();
+    expect(screen.queryByText("ignored-name")).not.toBeInTheDocument();
+    expect(screen.queryByText("Ignored Title")).not.toBeInTheDocument();
   });
 
-  it("prefers the resource title over the name", () => {
+  it("falls back to the URI itself when it has no slash-separated segments", () => {
     renderWithMantine(
       <ResourceSubscribedItem
-        subscription={{
-          resource: { ...subscription.resource, title: "Display X" },
-        }}
+        subscription={{ resource: { uri: "opaque", name: "n" } }}
+        onUnsubscribe={() => {}}
+      />,
+    );
+    expect(screen.getByText("opaque")).toBeInTheDocument();
+  });
+
+  it("ignores trailing slashes when picking the last segment", () => {
+    renderWithMantine(
+      <ResourceSubscribedItem
+        subscription={{ resource: { uri: "file:///foo/bar/", name: "n" } }}
         onUnsubscribe={() => {}}
       />,
     );
-    expect(screen.getByText("Display X")).toBeInTheDocument();
+    expect(screen.getByText("bar")).toBeInTheDocument();
+  });
+
+  it("shows the full URI in a tooltip on hover", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ResourceSubscribedItem
+        subscription={subscription}
+        onUnsubscribe={() => {}}
+      />,
+    );
+    await user.hover(screen.getByText("config.json"));
+    expect(
+      await screen.findByText("file:///foo/bar/config.json"),
+    ).toBeInTheDocument();
   });
 
   it("renders the last updated timestamp when present", () => {

clients/web/src/components/groups/ResourceSubscribedItem/ResourceSubscribedItem.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text } from "@mantine/core";
+import { Button, Group, Stack, Text, Tooltip } from "@mantine/core";
 import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";
 
 export interface ResourceSubscribedItemProps {
@@ -9,6 +9,7 @@ export interface ResourceSubscribedItemProps {
 const NameText = Text.withProps({
   size: "sm",
   fw: 500,
+  truncate: "end",
 });
 
 const TimestampText = Text.withProps({
@@ -24,25 +25,42 @@ const SubtleButton = Button.withProps({
 const ItemRow = Group.withProps({
   justify: "space-between",
   wrap: "nowrap",
+  gap: "xs",
+});
+
+const NameStack = Stack.withProps({
+  gap: 2,
+  flex: 1,
+  miw: 0,
 });
 
 function formatLastUpdated(date: Date): string {
   return date.toLocaleString();
 }
 
+// Strip the URI down to its last non-empty path segment so the tile shows
+// a compact label (e.g. `file:///foo/bar/config.json` → `config.json`).
+// The full URI is restored via a tooltip on hover.
+function lastUriSegment(uri: string): string {
+  const segments = uri.split("/").filter(Boolean);
+  return segments[segments.length - 1] ?? uri;
+}
+
 export function ResourceSubscribedItem({
   subscription,
   onUnsubscribe,
 }: ResourceSubscribedItemProps) {
   const { resource, lastUpdated } = subscription;
   return (
     <ItemRow>
-      <Stack gap={2}>
-        <NameText>{resource.title ?? resource.name}</NameText>
+      <NameStack>
+        <Tooltip label={resource.uri} withinPortal>
+          <NameText>{lastUriSegment(resource.uri)}</NameText>
+        </Tooltip>
         {lastUpdated && (
           <TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
         )}
-      </Stack>
+      </NameStack>
       <SubtleButton onClick={onUnsubscribe}>Unsubscribe</SubtleButton>
     </ItemRow>
   );