Updated for bb-mcp-server compatibility

fresh-ui/components/ClientSelector.tsx

@@ -11,15 +11,30 @@ import { selectedClientId } from '../hooks/useConsoleState.ts';
 import type { ClientInfo, SessionId } from '@shared/types/index.ts';
 import { isClientList } from '@shared/types/index.ts';
 
+/**
+ * Format a timestamp to a readable date/time string
+ */
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
 export default function ClientSelector() {
   const detailsRef = useRef<HTMLDetailsElement>(null);
   const dropdownContentRef = useRef<HTMLDivElement>(null);
   const summaryRef = useRef<HTMLElement>(null);
 
-  // Extract clients from messages
+  // Extract clients from messages and sort by most recently seen
   const clientListMessage = wsMessages.value.find(isClientList);
   const clients = clientListMessage
     ? (clientListMessage.payload as { clients: ClientInfo[] }).clients
+      .sort((a, b) => b.lastSeen - a.lastSeen) // Sort by most recent first
     : [];
 
   // Auto-select first client if none selected and clients available
@@ -206,6 +221,18 @@ export default function ClientSelector() {
                                 {client.sessionId.slice(0, 8)}...
                               </div>
 
+                              {/* Connection Times */}
+                              <div class='mt-2 text-xs opacity-60 space-y-0.5'>
+                                <div>
+                                  <span class='opacity-70'>Connected:</span>{' '}
+                                  {formatTimestamp(client.connectedAt)}
+                                </div>
+                                <div>
+                                  <span class='opacity-70'>Last Seen:</span>{' '}
+                                  {formatTimestamp(client.lastSeen)}
+                                </div>
+                              </div>
+
                               {/* Last Meta Indicator */}
                               {metadata?.lastMeta && (
                                 <div class='mt-1'>
@@ -246,9 +273,23 @@ export default function ClientSelector() {
           )}
 
         {/* Selection Info */}
-        {selectedClientId.value && (
-          <div class='text-xs opacity-60 mt-2'>
-            Selected: <span class='font-mono'>{selectedClientId.value}</span>
+        {selectedClient && (
+          <div class='mt-4 p-3 bg-base-200 rounded-lg'>
+            <div class='text-xs font-semibold opacity-70 mb-2'>Selected Client</div>
+            <div class='text-xs space-y-1'>
+              <div>
+                <span class='opacity-70'>Session ID:</span>{' '}
+                <span class='font-mono'>{selectedClient.sessionId}</span>
+              </div>
+              <div>
+                <span class='opacity-70'>Connected:</span>{' '}
+                {formatTimestamp(selectedClient.connectedAt)}
+              </div>
+              <div>
+                <span class='opacity-70'>Last Seen:</span>{' '}
+                {formatTimestamp(selectedClient.lastSeen)}
+              </div>
+            </div>
           </div>
         )}
       </div>

fresh-ui/components/ElicitationForm.tsx

@@ -112,7 +112,7 @@ export default function ElicitationForm() {
         type: 'object',
         properties: {}, // Empty properties for approval mode
       },
-      sessionId: selectedClientId.value || undefined, // Target specific client
+      options: { sessionId: selectedClientId.value || undefined }, // Target specific client
     };
 
     // Add schema if in form mode and schema provided
@@ -127,14 +127,15 @@ export default function ElicitationForm() {
       }
     }
 
+    //console.log('[ElicitationForm] Validating payload:', payload);
     // Validate payload with Zod
     const validation = validateElicitationPayload(payload);
     if (!validation.success) {
       alert(`Validation error: ${formatZodError(validation.error)}`);
       return;
     }
 
-    console.log('[ElicitationForm] Sending request:', payload);
+    console.log('[ElicitationForm] Sending request:', validation.data);
     sendCommand({
       type: 'request_elicitation',
       payload: validation.data,

fresh-ui/components/NotificationForm.tsx

@@ -20,7 +20,7 @@ export default function NotificationForm() {
       level: notificationLevel.value,
       logger: notificationLogger.value || undefined,
       data: notificationMessage.value,
-      sessionId: selectedClientId.value || undefined, // Target specific client
+      options: { sessionId: selectedClientId.value || undefined }, // Target specific client
     };
 
     sendCommand({

fresh-ui/components/SamplingForm.tsx

@@ -40,7 +40,7 @@ export default function SamplingForm() {
         : undefined,
       temperature: temperature.value,
       maxTokens: maxTokens.value,
-      sessionId: selectedClientId.value || undefined, // Target specific client
+      options: { sessionId: selectedClientId.value || undefined }, // Target specific client
     };
 
     console.log('[SamplingForm] Sending request:', payload);

import_map.json

@@ -3,8 +3,8 @@
     "@shared/types/": "./shared/types/",
     "@shared/version.ts": "./shared/version.ts",
 
-    "@beyondbetter/bb-mcp-server": "jsr:@beyondbetter/bb-mcp-server@^0.1.17",
-    "@beyondbetter/bb-mcp-server/": "jsr:@beyondbetter/bb-mcp-server@^0.1.17/",
+    "@beyondbetter/bb-mcp-server": "jsr:@beyondbetter/bb-mcp-server@^0.1.18",
+    "@beyondbetter/bb-mcp-server/": "jsr:@beyondbetter/bb-mcp-server@^0.1.18/",
 
     "mcp": "npm:@modelcontextprotocol/sdk@1.18.2",
     "mcp/client/": "npm:@modelcontextprotocol/sdk@1.18.2/client/",

mcp-server/src/console/ConsoleManager.ts

@@ -235,7 +235,7 @@ export class ConsoleManager {
           logger: payload.logger,
           data: payload.data,
         },
-        payload.sessionId,
+        payload.options,
       );
 
       this.broadcastMessage({
@@ -273,7 +273,7 @@ export class ConsoleManager {
   ): Promise<void> {
     try {
       this.logger.info('ConsoleManager: Requesting sampling from client', {
-        sessionId: payload.sessionId,
+        options: payload.options,
       });
 
       // Convert to library's CreateMessageRequest format
@@ -289,7 +289,7 @@ export class ConsoleManager {
         maxTokens: payload.maxTokens,
         temperature: payload.temperature,
         stopSequences: payload.stopSequences,
-      }, payload.sessionId); // Pass sessionId for client targeting
+      }, payload.options); // Pass options for client targeting
 
       this.broadcastMessage({
         type: 'sampling_response',
@@ -321,24 +321,24 @@ export class ConsoleManager {
   ): Promise<void> {
     try {
       this.logger.info('ConsoleManager: Requesting elicitation from client', {
-        sessionId: payload.sessionId,
+        options: payload.options,
       });
       this.logger.debug('ConsoleManager: Elicitation request payload:', {
         message: payload.message,
         requestedSchema: payload.requestedSchema,
-        sessionId: payload.sessionId,
+        options: payload.options,
       });
 
       const response = await beyondMcpServer.elicitInput({
         message: payload.message,
         requestedSchema: payload.requestedSchema,
-      }, payload.sessionId);
+      }, payload.options);
 
       this.logger.debug('ConsoleManager: Elicitation response received:', {
         response: JSON.stringify(response, null, 2),
         responseType: typeof response,
         responseKeys: response ? Object.keys(response) : [],
-      }); // Pass sessionId for client targeting
+      }); // Pass options for client targeting
 
       this.broadcastMessage({
         type: 'elicitation_response',
@@ -355,7 +355,7 @@ export class ConsoleManager {
           payloadSent: {
             message: payload.message,
             requestedSchema: payload.requestedSchema,
-            sessionId: payload.sessionId,
+            sessionId: payload.options.sessionId,
           },
         },
       );
@@ -476,7 +476,7 @@ export class ConsoleManager {
   ): Promise<void> {
     try {
       const messages = await this.messageTracker.getMessages(
-        payload.sessionId || 'default',
+        payload.options.sessionId || 'default',
         payload.limit || 100,
       );
 

shared/types/console.types.ts

@@ -120,7 +120,7 @@ export interface NotificationPayload {
   /**
    * Optional session ID for targeting specific client
    */
-  sessionId?: SessionId;
+  options: { sessionId?: SessionId; meta?: Record<string, unknown> };
 }
 
 /**
@@ -151,7 +151,7 @@ export interface SamplingPayload {
   /**
    * Optional session ID for targeting specific client
    */
-  sessionId?: SessionId;
+  options: { sessionId?: SessionId; meta?: Record<string, unknown> };
 }
 
 /**
@@ -204,7 +204,7 @@ export interface ElicitationPayload {
   /**
    * Optional session ID for targeting specific client
    */
-  sessionId?: SessionId;
+  options: { sessionId?: SessionId; meta?: Record<string, unknown> };
 }
 
 /**

shared/types/validation.ts

@@ -36,7 +36,10 @@ export const notificationPayloadSchema = z.object({
   ]),
   logger: z.string().optional(),
   data: z.unknown(),
-  sessionId: z.string().optional(),
+  options: z.object({
+    sessionId: z.string().optional(),
+    meta: z.record(z.unknown()).optional(),
+  }),
 });
 
 /**
@@ -125,6 +128,10 @@ const elicitationSchemaSchema = z.object({
 export const elicitationPayloadSchema = z.object({
   message: z.string().min(1, 'Message is required'),
   requestedSchema: elicitationSchemaSchema,
+  options: z.object({
+    sessionId: z.string().optional(),
+    meta: z.record(z.unknown()).optional(),
+  }),
 });
 
 /**

tests/fixtures/console-messages.ts

@@ -62,6 +62,7 @@ export const notificationPayload: NotificationPayload = {
   level: 'info',
   logger: 'test',
   data: 'Test notification message',
+  options: {},
 };
 
 /**
@@ -100,6 +101,7 @@ export const samplingPayload: SamplingPayload = {
   ],
   maxTokens: 100,
   temperature: 0.7,
+  options: {},
 };
 
 /**
@@ -153,6 +155,7 @@ export const elicitationPayload: ElicitationPayload = {
     },
     required: ['confirmed'],
   },
+  options: {},
 };
 
 /**