feat: show mock agent hint bubble in empty state

frontend/packages/inspector/index.html

@@ -723,6 +723,26 @@
         width: auto;
       }
 
+      .mock-agent-hint {
+        margin-top: 16px;
+        padding: 12px 16px;
+        background: var(--surface);
+        border: 1px solid var(--border-2);
+        border-radius: var(--radius);
+        font-size: 12px;
+        color: var(--text-secondary);
+        max-width: 320px;
+        line-height: 1.5;
+      }
+
+      .mock-agent-hint code {
+        background: var(--border-2);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
+        font-size: 11px;
+      }
+
       .empty-state-menu-wrapper {
         position: relative;
       }

frontend/packages/inspector/src/App.tsx

@@ -853,6 +853,7 @@ export default function App() {
           agentsLoading={agentsLoading}
           agentsError={agentsError}
           messagesEndRef={messagesEndRef}
+          agentId={agentId}
           agentLabel={agentLabel}
           agentMode={agentMode}
           permissionMode={permissionMode}

frontend/packages/inspector/src/components/agents/CapabilityBadges.tsx

@@ -3,6 +3,7 @@ import {
   Activity,
   AlertTriangle,
   Brain,
+  CircleDot,
   Download,
   FileDiff,
   Gauge,
@@ -35,7 +36,8 @@ const badges = [
   { key: "commandExecution", label: "Commands", icon: Terminal },
   { key: "fileChanges", label: "File Changes", icon: FileDiff },
   { key: "mcpTools", label: "MCP", icon: Plug },
-  { key: "streamingDeltas", label: "Deltas", icon: Activity }
+  { key: "streamingDeltas", label: "Deltas", icon: Activity },
+  { key: "itemStarted", label: "Item Start", icon: CircleDot }
 ] as const;
 
 type BadgeItem = (typeof badges)[number];

frontend/packages/inspector/src/components/chat/ChatPanel.tsx

@@ -22,6 +22,7 @@ const ChatPanel = ({
   agentsLoading,
   agentsError,
   messagesEndRef,
+  agentId,
   agentLabel,
   agentMode,
   permissionMode,
@@ -63,6 +64,7 @@ const ChatPanel = ({
   agentsLoading: boolean;
   agentsError: string | null;
   messagesEndRef: React.RefObject<HTMLDivElement>;
+  agentId: string;
   agentLabel: string;
   agentMode: string;
   permissionMode: string;
@@ -230,6 +232,11 @@ const ChatPanel = ({
             <Terminal className="empty-state-icon" />
             <div className="empty-state-title">Ready to Chat</div>
             <p className="empty-state-text">Send a message to start a conversation with the agent.</p>
+            {agentId === "mock" && (
+              <div className="mock-agent-hint">
+                The mock agent simulates agent responses for testing the inspector UI without requiring API credentials. Send <code>help</code> for available commands.
+              </div>
+            )}
           </div>
         ) : (
           <ChatMessages

frontend/packages/inspector/src/types/agents.ts

@@ -13,6 +13,7 @@ export type AgentCapabilitiesView = AgentCapabilities & {
   fileChanges?: boolean;
   mcpTools?: boolean;
   streamingDeltas?: boolean;
+  itemStarted?: boolean;
 };
 
 export const emptyCapabilities: AgentCapabilitiesView = {
@@ -32,5 +33,6 @@ export const emptyCapabilities: AgentCapabilitiesView = {
   fileChanges: false,
   mcpTools: false,
   streamingDeltas: false,
+  itemStarted: false,
   sharedProcess: false
 };