feat(web): PR 4 — kilo-chat web wiring + 3-tier presence

apps/web/src/app/(app)/claw/components/PersonalInstancePresenceMount.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useInstancePresence } from '@/hooks/useInstancePresence';
+import { useKiloClawStatus } from '@/hooks/useKiloClaw';
+
+export function PersonalInstancePresenceMount() {
+  const { data: status } = useKiloClawStatus();
+  useInstancePresence(status?.sandboxId ?? undefined);
+  return null;
+}

apps/web/src/app/(app)/claw/kilo-chat/components/KiloChatLayout.tsx

@@ -7,7 +7,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { formatKiloChatError } from '@kilocode/kilo-chat';
 import { ConversationList } from './ConversationList';
 import { KiloChatContext, type KiloChatContextValue } from './kiloChatContext';
-import { useEventService, useInstanceContext } from '../hooks/useEventService';
+import { kiloclawInstanceContext } from '@kilocode/event-service';
+import { usePresenceSubscription } from '@/hooks/usePresenceSubscription';
+import { useEventServiceClient } from '@/contexts/EventServiceContext';
 import {
   useConversations,
   useCreateConversation,
@@ -20,7 +22,6 @@ import {
 
 // ── Layout component ────────────────────────────────────────────────
 type KiloChatLayoutProps = {
-  getToken: () => Promise<string>;
   currentUserId: string;
   sandboxId: string | null;
   basePath: string;
@@ -32,7 +33,6 @@ type KiloChatLayoutProps = {
 };
 
 export function KiloChatLayout({
-  getToken,
   currentUserId,
   sandboxId,
   basePath,
@@ -44,8 +44,11 @@ export function KiloChatLayout({
 }: KiloChatLayoutProps) {
   const router = useRouter();
 
-  const { eventService, kiloChatClient } = useEventService(getToken);
-  useInstanceContext(eventService, sandboxId);
+  const { eventService, kiloChatClient } = useEventServiceClient();
+  usePresenceSubscription(
+    sandboxId ? kiloclawInstanceContext(sandboxId) : null,
+    Boolean(sandboxId)
+  );
 
   const queryClient = useQueryClient();
   const params = useParams<{ conversationId?: string }>();
@@ -189,7 +192,6 @@ export function KiloChatLayout({
 
   const contextValue = useMemo<KiloChatContextValue>(
     () => ({
-      getToken,
       currentUserId,
       instanceStatus,
       leavingConversationId,
@@ -202,7 +204,6 @@ export function KiloChatLayout({
       kiloChatClient,
     }),
     [
-      getToken,
       currentUserId,
       instanceStatus,
       leavingConversationId,

apps/web/src/app/(app)/claw/kilo-chat/components/MessageArea.tsx

@@ -14,7 +14,12 @@ import {
   useRemoveReaction,
   useExecuteAction,
 } from '../hooks/useMessages';
-import { useConversationContext } from '../hooks/useEventService';
+import {
+  kiloclawConversationContext,
+  presenceContextForConversation,
+} from '@kilocode/event-service';
+import { usePresenceSubscription } from '@/hooks/usePresenceSubscription';
+import { useDocumentVisible } from '@/hooks/useDocumentVisible';
 import { useTypingSender, useTypingState } from '../hooks/useTyping';
 import {
   useConversationDetail,
@@ -75,13 +80,27 @@ export function MessageArea({ conversationId }: MessageAreaProps) {
   const [isRenamingTitle, setIsRenamingTitle] = useState(false);
   const [renameText, setRenameText] = useState('');
 
-  // Subscribe to this conversation's events via the event-service WebSocket
-  useConversationContext(eventService, sandboxId, conversationId);
+  const visible = useDocumentVisible();
+
+  // Subscribe to this conversation's chat-event stream while the conversation
+  // is open. Not gated on visibility — we want incoming messages to land in
+  // the cache even when the tab is hidden.
+  usePresenceSubscription(
+    sandboxId && conversationId ? kiloclawConversationContext(sandboxId, conversationId) : null,
+    Boolean(sandboxId && conversationId)
+  );
+
+  // Signal our own presence on this conversation. Gated on visibility so we
+  // only appear "viewing" while the tab is actually in the foreground.
+  usePresenceSubscription(
+    sandboxId && conversationId ? presenceContextForConversation(sandboxId, conversationId) : null,
+    Boolean(sandboxId && conversationId) && visible
+  );
 
   // Event Service delivers subscribed contexts to every handler, so each
   // handler must validate the incoming `ctx` against this string before
   // applying changes to the active conversation's state.
-  const expectedContext = sandboxId ? `/kiloclaw/${sandboxId}/${conversationId}` : null;
+  const expectedContext = sandboxId ? kiloclawConversationContext(sandboxId, conversationId) : null;
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useMessages(
     kiloChatClient,

apps/web/src/app/(app)/claw/kilo-chat/components/kiloChatContext.ts

@@ -5,7 +5,6 @@ import type { EventServiceClient } from '@kilocode/event-service';
 import type { KiloChatClient } from '@kilocode/kilo-chat';
 
 export type KiloChatContextValue = {
-  getToken: () => Promise<string>;
   currentUserId: string;
   instanceStatus: string | null;
   leavingConversationId: string | null;

apps/web/src/app/(app)/claw/kilo-chat/hooks/useMessages.ts

@@ -16,6 +16,7 @@ import type {
   ExecApprovalDecision,
 } from '@kilocode/kilo-chat';
 import { useEffect } from 'react';
+import { kiloclawConversationContext } from '@kilocode/event-service';
 import { toast } from 'sonner';
 
 const PAGE_SIZE = 50;
@@ -401,7 +402,7 @@ export function useMessageCacheUpdater(
   useEffect(() => {
     if (!conversationId || !sandboxId) return;
     const queryKey = ['kilo-chat', 'messages', conversationId];
-    const expectedContext = `/kiloclaw/${sandboxId}/${conversationId}`;
+    const expectedContext = kiloclawConversationContext(sandboxId, conversationId);
 
     const onCreated = (ctx: string, e: MessageCreatedEvent) => {
       if (ctx !== expectedContext) return;

apps/web/src/app/(app)/claw/kilo-chat/layout.tsx

@@ -1,20 +1,15 @@
 'use client';
 
-import { useCallback } from 'react';
 import { useUser } from '@/hooks/useUser';
 import { useKiloClawStatus } from '@/hooks/useKiloClaw';
-import { getKiloChatToken } from './token';
 import { KiloChatLayout } from './components/KiloChatLayout';
 
 export default function KiloChatRootLayout({ children }: { children: React.ReactNode }) {
   const { data: user } = useUser();
   const { data: status, isLoading } = useKiloClawStatus();
 
-  const getToken = useCallback(() => getKiloChatToken(), []);
-
   return (
     <KiloChatLayout
-      getToken={getToken}
       currentUserId={user?.id ?? ''}
       sandboxId={status?.sandboxId ?? null}
       basePath="/claw/kilo-chat"

apps/web/src/app/(app)/claw/layout.tsx

@@ -1,12 +1,14 @@
 import { getUserFromAuthOrRedirect } from '@/lib/user.server';
 import { PylonWidget } from '@/components/pylon-widget';
 import { PylonSupportButton } from '@/components/pylon-support-button';
+import { PersonalInstancePresenceMount } from './components/PersonalInstancePresenceMount';
 import './claw-chat.css';
 
 export default async function ClawLayout({ children }: { children: React.ReactNode }) {
   await getUserFromAuthOrRedirect();
   return (
     <>
+      <PersonalInstancePresenceMount />
       {children}
       <PylonWidget>
         <PylonSupportButton />

apps/web/src/app/(app)/components/PlatformPresenceMount.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { usePlatformPresence } from '@/hooks/usePlatformPresence';
+
+export function PlatformPresenceMount() {
+  usePlatformPresence();
+  return null;
+}

apps/web/src/app/(app)/layout.tsx

@@ -3,26 +3,31 @@ import { AppTopbar } from './components/AppTopbar';
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
 import { RoleTestingProvider } from '@/contexts/RoleTestingContext';
 import { PageTitleProvider } from '@/contexts/PageTitleContext';
+import { EventServiceProvider } from '@/contexts/EventServiceContext';
 import { AdminOmnibox } from '@/components/admin-omnibox';
 import { PrefetchedOrganizations } from './components/PrefetchedOrganizations';
+import { PlatformPresenceMount } from './components/PlatformPresenceMount';
 import { ImpactIdentify } from '@/components/ImpactIdentify';
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <RoleTestingProvider>
       <PageTitleProvider>
-        <SidebarProvider>
-          <ImpactIdentify />
-          <PrefetchedOrganizations>
-            <div className="flex min-h-screen w-full">
-              <AppSidebar />
-              <SidebarInset>
-                <AppTopbar />
-                <main className="bg-background w-full flex-1">{children}</main>
-              </SidebarInset>
-            </div>
-          </PrefetchedOrganizations>
-        </SidebarProvider>
+        <EventServiceProvider>
+          <PlatformPresenceMount />
+          <SidebarProvider>
+            <ImpactIdentify />
+            <PrefetchedOrganizations>
+              <div className="flex min-h-screen w-full">
+                <AppSidebar />
+                <SidebarInset>
+                  <AppTopbar />
+                  <main className="bg-background w-full flex-1">{children}</main>
+                </SidebarInset>
+              </div>
+            </PrefetchedOrganizations>
+          </SidebarProvider>
+        </EventServiceProvider>
       </PageTitleProvider>
       <AdminOmnibox />
     </RoleTestingProvider>

apps/web/src/app/(app)/organizations/[id]/claw/components/OrgInstancePresenceMount.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useInstancePresence } from '@/hooks/useInstancePresence';
+import { useOrgKiloClawStatus } from '@/hooks/useOrgKiloClaw';
+
+export function OrgInstancePresenceMount() {
+  const params = useParams<{ id: string }>();
+  const organizationId = params?.id;
+  const { data: status } = useOrgKiloClawStatus(organizationId);
+  useInstancePresence(status?.sandboxId ?? undefined);
+  return null;
+}

apps/web/src/app/(app)/organizations/[id]/claw/kilo-chat/layout.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { useCallback } from 'react';
 import { useParams } from 'next/navigation';
 import { useUser } from '@/hooks/useUser';
 import { useOrgKiloClawStatus } from '@/hooks/useOrgKiloClaw';
-import { getKiloChatToken } from '@/app/(app)/claw/kilo-chat/token';
 import { KiloChatLayout } from '@/app/(app)/claw/kilo-chat/components/KiloChatLayout';
 
 export default function OrgKiloChatRootLayout({ children }: { children: React.ReactNode }) {
@@ -13,14 +11,11 @@ export default function OrgKiloChatRootLayout({ children }: { children: React.Re
   const { data: user } = useUser();
   const { data: status, isLoading } = useOrgKiloClawStatus(organizationId);
 
-  const getToken = useCallback(() => getKiloChatToken(), []);
-
   const basePath = `/organizations/${organizationId}/claw/kilo-chat`;
   const noInstanceRedirect = `/organizations/${organizationId}/claw/new`;
 
   return (
     <KiloChatLayout
-      getToken={getToken}
       currentUserId={user?.id ?? ''}
       sandboxId={status?.sandboxId ?? null}
       basePath={basePath}

apps/web/src/app/(app)/organizations/[id]/claw/layout.tsx

@@ -1,10 +1,12 @@
 import { PylonSupportButton } from '@/components/pylon-support-button';
 import { PylonWidget } from '@/components/pylon-widget';
+import { OrgInstancePresenceMount } from './components/OrgInstancePresenceMount';
 import '@/app/(app)/claw/claw-chat.css';
 
 export default function OrgClawLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
+      <OrgInstancePresenceMount />
       {children}
       <PylonWidget>
         <PylonSupportButton />