@nextclaw/ui 0.19.5 → 0.20.0-beta.0

package/src/features/chat/features/conversation/hooks/use-session-run-queue.ts

@@ -48,14 +48,19 @@ export function useSessionRunQueue(sessionKey: string | null) {
     );
   }, [normalizedSessionKey]);
 
-  const refreshQueuedInputs = useCallback(async (): Promise<readonly UiNcpSessionQueuedInputView[]> => {
+  const refreshPendingInputs = useCallback(async (): Promise<readonly UiNcpSessionPendingInputView[]> => {
     if (!normalizedSessionKey) {
       return [];
     }
     const result = await refetch();
-    return result.data?.inputs.filter(({ placement }) => placement === 'queued') ?? [];
+    return result.data?.inputs ?? [];
   }, [normalizedSessionKey, refetch]);
 
+  const refreshQueuedInputs = useCallback(async (): Promise<readonly UiNcpSessionQueuedInputView[]> => {
+    const inputs = await refreshPendingInputs();
+    return inputs.filter(({ placement }) => placement === 'queued');
+  }, [refreshPendingInputs]);
+
   const steerQueuedInput = useCallback(async (
     queuedInputId: string,
   ): Promise<UiNcpSessionPendingInputView | null> => {
@@ -69,6 +74,7 @@ export function useSessionRunQueue(sessionKey: string | null) {
     inputs: inputs.filter(({ placement }) => placement === 'queued'),
     pendingInputs: inputs,
     isLoading,
+    refreshPendingInputs,
     refreshQueuedInputs,
     removeQueuedInput,
     steerQueuedInput,

package/src/features/chat/features/message/components/__tests__/chat-message-observation-event.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import { ChatMessageObservationEvent } from "@/features/chat/features/message/components/chat-message-observation-event";
+
+vi.mock("@/app/components/i18n-provider", () => ({
+  useI18n: () => ({ language: "en" }),
+}));
+
+vi.mock("@/shared/lib/i18n", () => ({
+  formatDateTime: (value: string) => `formatted:${value}`,
+  t: (key: string) => key,
+}));
+
+it("shows the event identity and keeps the payload behind an expandable detail", () => {
+  render(
+    <ChatMessageObservationEvent
+      event={{
+        deliveryId: "delivery-1",
+        extensionId: "calendar-extension",
+        eventId: "event-1",
+        eventType: "calendar.event.created",
+        occurredAt: "2026-08-23T10:00:00.000Z",
+        payload: { title: "Planning" },
+      }}
+    />,
+  );
+
+  expect(screen.getByTestId("chat-observation-event")).toBeTruthy();
+  expect(screen.getAllByText("calendar.event.created")).toHaveLength(2);
+  expect(screen.getByText(/calendar-extension/)).toBeTruthy();
+  const eventDetails = screen.getByTestId(
+    "chat-observation-event",
+  ) as HTMLDetailsElement;
+  expect(eventDetails.querySelector("summary")).toBeTruthy();
+  expect(eventDetails.open).toBe(false);
+  expect(screen.getByText(/event-1/)).toBeTruthy();
+  expect(screen.getByText(/Planning/)).toBeTruthy();
+  expect(screen.getByText("chatObservationEventDetailsTitle")).toBeTruthy();
+  expect(screen.getByText("chatObservationEventPayloadLabel")).toBeTruthy();
+
+  expect(eventDetails.className).toContain("my-3");
+  expect(eventDetails.querySelector("summary")?.textContent).toContain(
+    "calendar.event.created",
+  );
+  expect(eventDetails.className).not.toContain("amber");
+});

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -64,6 +64,11 @@ import { buildServerPathContentUrl } from "@/shared/lib/api";
 import { formatDateTime, formatNumber, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 import type { SessionMessageToolPayloadState } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
+import { ChatMessageObservationEvent } from "@/features/chat/features/message/components/chat-message-observation-event";
+import {
+  isObservationEventPartExtensionType,
+  readObservationEventPartData,
+} from "@/features/chat/features/message/utils/chat-message-observation-event.utils";
 
 type ChatMessageListContainerProps = {
   canContinue?: boolean;
@@ -371,6 +376,10 @@ export function ChatMessageListContainer({
   }, []);
   const renderCustomPart = useCallback(
     (part: Extract<ChatMessageViewModel["parts"][number], { type: "custom" }>) => {
+      if (isObservationEventPartExtensionType(part.customType)) {
+        const event = readObservationEventPartData(part.data);
+        return event ? <ChatMessageObservationEvent event={event} /> : undefined;
+      }
       if (part.customType !== CONTEXT_COMPACTION_PART_EXTENSION_TYPE) {
         return undefined;
       }
@@ -411,6 +420,8 @@ export function ChatMessageListContainer({
               <ChatContextCompactionDivider checkpoint={item.checkpoint} />
             ) : item.kind === "context-inheritance" ? (
               <ChatContextInheritanceDivider inheritance={item.inheritance} />
+            ) : item.kind === "observation-event" ? (
+              <ChatMessageObservationEvent event={item.event} />
             ) : (
               <div className={item.kind === "message" ? "pb-5" : undefined}>
                 <ChatMessageList

package/src/features/chat/features/message/components/chat-message-observation-event.tsx

@@ -0,0 +1,92 @@
+import { ChevronDown } from "lucide-react";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+import { useI18n } from "@/app/components/i18n-provider";
+import {
+  stringifyObservationEventPayload,
+  type ObservationEventPartData,
+} from "@/features/chat/features/message/utils/chat-message-observation-event.utils";
+
+type ChatMessageObservationEventProps = {
+  event: ObservationEventPartData;
+};
+
+export function ChatMessageObservationEvent({
+  event,
+}: ChatMessageObservationEventProps) {
+  const { language } = useI18n();
+  const payload = stringifyObservationEventPayload(event.payload);
+
+  return (
+    <details
+      aria-label={t("chatObservationEventLabel", language)}
+      data-testid="chat-observation-event"
+      className="group my-3 min-w-0 text-[11px] text-muted-foreground"
+    >
+      <summary
+        aria-label={`${t("chatObservationEventLabel", language)}: ${event.eventType}. ${t("chatObservationEventShowDetails", language)}`}
+        className="flex cursor-pointer list-none items-center gap-3 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&::-webkit-details-marker]:hidden"
+      >
+        <span className="h-px min-w-4 flex-1 bg-border/70" />
+        <span className="inline-flex min-w-0 max-w-[min(80%,32rem)] items-center gap-1.5 px-1 text-xs text-muted-foreground transition-colors hover:text-foreground">
+          <span
+            aria-hidden="true"
+            className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50"
+          />
+          <span className="shrink-0">
+            {t("chatObservationEventLabel", language)}
+          </span>
+          <span aria-hidden="true" className="text-muted-foreground/60">·</span>
+          <span className="min-w-0 truncate">
+            {event.eventType}
+          </span>
+          <ChevronDown
+            className="h-3.5 w-3.5 shrink-0 transition-transform group-open:rotate-180"
+            aria-hidden="true"
+          />
+        </span>
+        <span className="h-px min-w-4 flex-1 bg-border/70" />
+      </summary>
+      <div className="mx-auto mt-3 max-w-2xl overflow-hidden rounded-xl border border-border/70 bg-card shadow-sm">
+        <div className="flex min-w-0 items-center gap-2 border-b border-border/60 bg-muted/35 px-3 py-2">
+          <span
+            aria-hidden="true"
+            className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/55"
+          />
+          <span className="shrink-0 text-xs font-medium text-foreground/85">
+            {t("chatObservationEventDetailsTitle", language)}
+          </span>
+          <span aria-hidden="true" className="text-muted-foreground/50">·</span>
+          <span className="min-w-0 truncate text-[11px] text-muted-foreground">
+            {event.eventType}
+          </span>
+        </div>
+        <dl className="grid grid-cols-[max-content_minmax(0,1fr)] gap-x-4 gap-y-2 px-3 py-3 text-xs">
+          <dt className="text-muted-foreground">
+            {t("chatObservationEventExtension", language)}
+          </dt>
+          <dd className="min-w-0 truncate text-foreground/80">{event.extensionId}</dd>
+          <dt className="text-muted-foreground">
+            {t("chatObservationEventId", language)}
+          </dt>
+          <dd className="min-w-0 break-all font-mono text-[11px] text-foreground/75">
+            {event.eventId}
+          </dd>
+          <dt className="text-muted-foreground">{t("chatObservationEventTime", language)}</dt>
+          <dd className="text-foreground/80">
+            <time dateTime={event.occurredAt}>
+              {formatDateTime(event.occurredAt, language)}
+            </time>
+          </dd>
+        </dl>
+        <div className="border-t border-border/60 px-3 py-3">
+          <div className="mb-1.5 text-[11px] font-medium text-muted-foreground">
+            {t("chatObservationEventPayloadLabel", language)}
+          </div>
+          <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-lg bg-muted/55 px-3 py-2.5 text-[11px] leading-5 text-muted-foreground">
+            {payload || t("chatObservationEventPayloadEmpty", language)}
+          </pre>
+        </div>
+      </div>
+    </details>
+  );
+}

package/src/features/chat/features/message/utils/__tests__/chat-message-timeline-compaction.utils.test.ts

@@ -90,6 +90,44 @@ describe("mid-run compaction timeline projection", () => {
     }).map((item) => item.kind)).toEqual(["message"]);
   });
 
+  it("keeps a deferred tool part in the coordinate space used by compaction", () => {
+    const activeAssistant = {
+      ...visibleMessage,
+      status: "streaming" as const,
+      parts: [
+        {
+          type: "tool-invocation" as const,
+          toolCallId: "tool-visible",
+          toolName: "exec",
+          state: "result" as const,
+        },
+        {
+          type: "tool-invocation" as const,
+          toolCallId: "tool-deferred",
+          toolName: "read_file",
+          state: "result" as const,
+          payloadDeferred: true,
+        },
+        { type: "text" as const, text: "after" },
+      ],
+    };
+    const compactionMessage = createCompactionMessage({
+      assistantId: activeAssistant.id,
+      coveredPartCount: activeAssistant.parts.length,
+      id: "context-compaction-deferred-tool",
+    });
+
+    expect(projectVisibleChatMessages([
+      activeAssistant,
+      compactionMessage,
+    ])[0]?.parts.map((part) => part.type)).toEqual([
+      "tool-invocation",
+      "tool-invocation",
+      "text",
+      "extension",
+    ]);
+  });
+
   it("keeps repeated compactions ordered inside one assistant message", () => {
     const activeAssistant = {
       ...visibleMessage,

package/src/features/chat/features/message/utils/__tests__/chat-message-timeline.utils.test.ts

@@ -62,6 +62,58 @@ describe("chat message timeline visibility", () => {
     ]);
   });
 
+  it("renders a standalone observation message at its timeline boundary", () => {
+    const observationMessage = {
+      ...visibleMessage,
+      id: "observation-event-1",
+      role: "service" as const,
+      timestamp: "2026-08-07T00:01:00.000Z",
+      parts: [{
+        type: "extension" as const,
+        extensionType: "observation.event",
+        data: {
+          deliveryId: "delivery-1",
+          extensionId: "calendar-extension",
+          eventId: "event-1",
+          eventType: "calendar.event.created",
+          occurredAt: "2026-08-07T00:00:59.000Z",
+          payload: { title: "Planning" },
+        },
+      }],
+    } satisfies NcpMessage;
+    const afterMessage = {
+      ...visibleMessage,
+      id: "assistant-after-observation",
+      timestamp: "2026-08-07T00:02:00.000Z",
+    };
+
+    expect(projectVisibleChatMessages([
+      visibleMessage,
+      observationMessage,
+      afterMessage,
+    ]).map((message) => message.id)).toEqual([
+      visibleMessage.id,
+      afterMessage.id,
+    ]);
+    const items = buildChatMessageTimelineItems({
+      rawMessages: [visibleMessage, observationMessage, afterMessage],
+      messages: [
+        { id: visibleMessage.id } as never,
+        { id: afterMessage.id } as never,
+      ],
+    });
+
+    expect(items.map((item) => item.kind)).toEqual([
+      "message",
+      "observation-event",
+      "message",
+    ]);
+    expect(items[1]).toMatchObject({
+      kind: "observation-event",
+      event: { eventId: "event-1" },
+    });
+  });
+
   it("hides internal and legacy silent messages", () => {
     expect(isVisibleChatMessage({
       ...visibleMessage,

package/src/features/chat/features/message/utils/__tests__/chat-message.utils.test.ts

@@ -116,6 +116,40 @@ it("maps context compaction extensions into stable process parts", () => {
   }]);
 });
 
+it("maps observation event extensions into visible custom parts", () => {
+  const adapted = adapt([{
+    id: "observation-event-message-1",
+    role: "system",
+    parts: [{
+      type: "extension",
+      extensionType: "observation.event",
+      data: {
+        deliveryId: "delivery-1",
+        extensionId: "calendar-extension",
+        eventId: "event-1",
+        eventType: "calendar.event.created",
+        occurredAt: "2026-08-23T10:00:00.000Z",
+        payload: { title: "Planning" },
+      },
+    }],
+  }]);
+
+  expect(adapted[0]?.role).toBe("system");
+  expect(adapted[0]?.parts).toEqual([{
+    type: "custom",
+    id: "delivery-1",
+    customType: "observation.event",
+    data: {
+      deliveryId: "delivery-1",
+      extensionId: "calendar-extension",
+      eventId: "event-1",
+      eventType: "calendar.event.created",
+      occurredAt: "2026-08-23T10:00:00.000Z",
+      payload: { title: "Planning" },
+    },
+  }]);
+});
+
 it("maps tool lifecycle statuses into visible card state feedback", () => {
   const adapted = adapt([
     {

package/src/features/chat/features/message/utils/chat-message-observation-event.utils.ts

@@ -0,0 +1,81 @@
+import { OBSERVATION_EVENT_EXTENSION_TYPE } from "@nextclaw/ncp";
+
+export const OBSERVATION_EVENT_PART_EXTENSION_TYPE =
+  OBSERVATION_EVENT_EXTENSION_TYPE;
+const LEGACY_OBSERVATION_EVENT_PART_EXTENSION_TYPE =
+  "nextclaw.observation.event";
+const PREVIOUS_OBSERVATION_EVENT_PART_EXTENSION_TYPE =
+  "ncp.observation.event";
+
+export function isObservationEventPartExtensionType(value: string): boolean {
+  return value === OBSERVATION_EVENT_PART_EXTENSION_TYPE ||
+    value === PREVIOUS_OBSERVATION_EVENT_PART_EXTENSION_TYPE ||
+    value === LEGACY_OBSERVATION_EVENT_PART_EXTENSION_TYPE;
+}
+
+export type ObservationEventPartData = {
+  deliveryId: string;
+  extensionId: string;
+  eventId: string;
+  eventType: string;
+  occurredAt: string;
+  payload: unknown;
+  sourceRefs?: unknown;
+  causationId?: string;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readRequiredString(
+  record: Record<string, unknown>,
+  key: string,
+): string | null {
+  const value = record[key];
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+
+export function readObservationEventPartData(
+  value: unknown,
+): ObservationEventPartData | null {
+  if (!isRecord(value)) return null;
+  const deliveryId = readRequiredString(value, "deliveryId");
+  const extensionId = readRequiredString(value, "extensionId");
+  const eventId = readRequiredString(value, "eventId");
+  const eventType = readRequiredString(value, "eventType");
+  const occurredAt = readRequiredString(value, "occurredAt");
+  if (!deliveryId || !extensionId || !eventId || !eventType || !occurredAt) {
+    return null;
+  }
+  return {
+    deliveryId,
+    extensionId,
+    eventId,
+    eventType,
+    occurredAt,
+    payload: value.payload,
+    ...(value.sourceRefs !== undefined ? { sourceRefs: value.sourceRefs } : {}),
+    ...(typeof value.causationId === "string" && value.causationId.trim()
+      ? { causationId: value.causationId.trim() }
+      : {}),
+  };
+}
+
+export function stringifyObservationEventPayload(
+  value: unknown,
+  maxChars = 6000,
+): string {
+  let serialized: string;
+  if (typeof value === "string") {
+    serialized = value;
+  } else {
+    try {
+      serialized = JSON.stringify(value, null, 2) ?? "";
+    } catch {
+      serialized = String(value);
+    }
+  }
+  if (serialized.length <= maxChars) return serialized;
+  return `${serialized.slice(0, Math.max(0, maxChars - 16))}\n…`;
+}

package/src/features/chat/features/message/utils/chat-message-part.utils.ts

@@ -27,6 +27,10 @@ import {
   CONTEXT_COMPACTION_PART_EXTENSION_TYPE,
   type ContextCompactionPartData,
 } from "@/features/chat/features/message/utils/chat-message-timeline.utils";
+import {
+  isObservationEventPartExtensionType,
+  readObservationEventPartData,
+} from "@/features/chat/features/message/utils/chat-message-observation-event.utils";
 
 export type {
   ChatMessageAdapterTexts,
@@ -243,6 +247,16 @@ function isToolInvocationPart(
 function buildExtensionPart(
   part: Extract<ChatMessagePartSource, { type: "extension" }>,
 ): Extract<ChatMessagePartViewModel, { type: "custom" }> | null {
+  if (isObservationEventPartExtensionType(part.extensionType)) {
+    const data = readObservationEventPartData(part.data);
+    if (!data) return null;
+    return {
+      type: "custom",
+      id: data.deliveryId,
+      customType: part.extensionType,
+      data,
+    };
+  }
   if (part.extensionType !== CONTEXT_COMPACTION_PART_EXTENSION_TYPE) {
     return null;
   }
@@ -288,7 +302,7 @@ export function adaptChatMessagePart(
     return buildToolInvocationPart(part, texts);
   }
   if (isExtensionPart(part)) {
-    return buildExtensionPart(part);
+    return buildExtensionPart(part) ?? buildUnknownPart(part, texts);
   }
   return buildUnknownPart(part, texts);
 }

package/src/features/chat/features/message/utils/chat-message-timeline.utils.ts

@@ -8,6 +8,11 @@ import {
   readContextCompactionTimeline,
   type ContextCompactionTimelineView,
 } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
+import {
+  isObservationEventPartExtensionType,
+  readObservationEventPartData,
+  type ObservationEventPartData,
+} from "@/features/chat/features/message/utils/chat-message-observation-event.utils";
 
 const INHERITED_FROM_SESSION_METADATA_KEY = "inherited_from_session_id";
 export const CONTEXT_COMPACTION_PART_EXTENSION_TYPE =
@@ -43,6 +48,11 @@ export type ChatTimelineItem =
       key: string;
       inheritance: ContextInheritanceTimelineView;
     }
+  | {
+      kind: "observation-event";
+      key: string;
+      event: ObservationEventPartData;
+    }
   | {
       kind: "typing";
       key: "typing";
@@ -57,6 +67,21 @@ function readInheritedSourceSessionId(message: NcpMessage): string | null {
   return typeof value === "string" && value.trim() ? value.trim() : null;
 }
 
+function readStandaloneObservationEvent(
+  message: NcpMessage,
+): ObservationEventPartData | null {
+  if (message.parts.length !== 1) return null;
+  const part = message.parts[0];
+  if (
+    !part ||
+    part.type !== "extension" ||
+    !isObservationEventPartExtensionType(part.extensionType)
+  ) {
+    return null;
+  }
+  return readObservationEventPartData(part.data);
+}
+
 export function isVisibleChatMessage(message: NcpMessage): boolean {
   return (
     !isHiddenNcpMessage(message) &&
@@ -100,6 +125,13 @@ function mergeAssistantContinuation(
 type VisibleChatMessageProjection = {
   messages: NcpMessage[];
   inlineCompactionMessageIds: Set<string>;
+  observationEvents: ObservationEventTimelinePlacement[];
+};
+
+type ObservationEventTimelinePlacement = {
+  boundaryIndex: number;
+  event: ObservationEventPartData;
+  messageId: string;
 };
 
 type ProjectedMessagePartAnchor = {
@@ -127,6 +159,7 @@ function projectVisibleChatMessageState(
   );
   const inlineCompactions: InlineCompactionPlacement[] = [];
   const inlineCompactionMessageIds = new Set<string>();
+  const observationEvents: ObservationEventTimelinePlacement[] = [];
   let pendingContinuationTargetId: string | null = null;
 
   rawMessages.forEach((message, rawOrder) => {
@@ -166,6 +199,15 @@ function projectVisibleChatMessageState(
     if (!isVisibleChatMessage(message)) {
       return;
     }
+    const observationEvent = readStandaloneObservationEvent(message);
+    if (observationEvent) {
+      observationEvents.push({
+        boundaryIndex: messages.length,
+        event: observationEvent,
+        messageId: message.id,
+      });
+      return;
+    }
     const targetIndex = pendingContinuationTargetId && message.role === "assistant"
       ? projectedIndexByMessageId.get(pendingContinuationTargetId)
       : undefined;
@@ -238,7 +280,7 @@ function projectVisibleChatMessageState(
       status: "pending",
     };
   }
-  return { messages, inlineCompactionMessageIds };
+  return { messages, inlineCompactionMessageIds, observationEvents };
 }
 
 export function projectVisibleChatMessages(
@@ -292,6 +334,7 @@ export function buildChatMessageTimelineItems(params: {
 }): ChatTimelineItem[] {
   const projection = projectVisibleChatMessageState(params.rawMessages);
   const visibleRawMessages = projection.messages;
+  const observationEvents = projection.observationEvents;
   const checkpoints = params.rawMessages
     .map((message) => ({
       rawMessageId: message.id,
@@ -324,6 +367,7 @@ export function buildChatMessageTimelineItems(params: {
   const items: ChatTimelineItem[] = [];
   let pendingMessages: ChatMessageViewModel[] = [];
   let checkpointCursor = 0;
+  let observationEventCursor = 0;
   const flushPendingMessages = () => {
     if (pendingMessages.length === 0) {
       return;
@@ -337,8 +381,24 @@ export function buildChatMessageTimelineItems(params: {
     );
     pendingMessages = [];
   };
+  const flushObservationEvents = (boundaryIndex: number) => {
+    while (
+      observationEventCursor < observationEvents.length &&
+      observationEvents[observationEventCursor]!.boundaryIndex <= boundaryIndex
+    ) {
+      const currentEvent = observationEvents[observationEventCursor]!;
+      flushPendingMessages();
+      items.push({
+        kind: "observation-event",
+        key: `observation-event:${currentEvent.messageId}`,
+        event: currentEvent.event,
+      });
+      observationEventCursor += 1;
+    }
+  };
 
   visibleRawMessages.forEach((rawMessage, index) => {
+    flushObservationEvents(index);
     if (contextInheritance?.boundaryIndex === index) {
       flushPendingMessages();
       items.push({
@@ -373,6 +433,7 @@ export function buildChatMessageTimelineItems(params: {
       inheritance: contextInheritance,
     });
   }
+  flushObservationEvents(visibleRawMessages.length);
   while (checkpointCursor < checkpoints.length) {
     const currentCheckpoint = checkpoints[checkpointCursor];
     flushPendingMessages();

package/src/features/chat/features/ncp/hooks/use-ncp-session-queries.ts

@@ -1,8 +1,14 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
+  fetchNcpSessionObservations,
   fetchNcpSessionSkills,
   fetchNcpSessionTokenUsage,
-  fetchNcpSessions
+  fetchNcpSessions,
+  updateNcpSessionObservation,
+} from '@/shared/lib/api';
+import type {
+  NcpSessionObservationAction,
+  NcpSessionObservationKind,
 } from '@/shared/lib/api';
 
 const ncpSessionQueryDefaults = { staleTime: 5_000, retry: false } as const;
@@ -40,3 +46,31 @@ export function useNcpSessionTokenUsage(sessionId: string | null) {
     ...ncpSessionQueryDefaults
   });
 }
+
+export const ncpSessionObservationsQueryKey = (sessionId: string | null) =>
+  ['ncp-session-observations', sessionId] as const;
+
+export function useNcpSessionObservations(sessionId: string | null) {
+  return useQuery({
+    queryKey: ncpSessionObservationsQueryKey(sessionId),
+    queryFn: () => fetchNcpSessionObservations(sessionId as string),
+    enabled: Boolean(sessionId),
+    ...ncpSessionQueryDefaults
+  });
+}
+
+export function useNcpObservationAction(sessionId: string | null) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (input: {
+      kind: NcpSessionObservationKind;
+      id: string;
+      action: NcpSessionObservationAction;
+    }) => updateNcpSessionObservation(sessionId as string, input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: ncpSessionObservationsQueryKey(sessionId),
+      });
+    },
+  });
+}