@datalayer/agent-runtimes 1.3.74 → 1.3.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/lib/agents/AgentDetails.d.ts +16 -2
  2. package/lib/agents/AgentDetails.js +381 -272
  3. package/lib/chat/ChatFloating.d.ts +27 -1
  4. package/lib/chat/ChatFloating.js +97 -13
  5. package/lib/chat/assistant/AgentDetailsDialog.d.ts +21 -0
  6. package/lib/chat/assistant/AgentDetailsDialog.js +19 -0
  7. package/lib/chat/assistant/AssistantContextMenu.d.ts +67 -0
  8. package/lib/chat/assistant/AssistantContextMenu.js +68 -0
  9. package/lib/chat/assistant/AssistantStage.d.ts +144 -4
  10. package/lib/chat/assistant/AssistantStage.js +280 -10
  11. package/lib/chat/assistant/BalloonParts.d.ts +33 -5
  12. package/lib/chat/assistant/BalloonParts.js +66 -44
  13. package/lib/chat/assistant/BalloonVisual.d.ts +10 -2
  14. package/lib/chat/assistant/BalloonVisual.js +4 -3
  15. package/lib/chat/assistant/SandboxDetailsDialog.d.ts +44 -0
  16. package/lib/chat/assistant/SandboxDetailsDialog.js +214 -0
  17. package/lib/chat/assistant/SpeechBalloon.d.ts +54 -6
  18. package/lib/chat/assistant/SpeechBalloon.js +73 -22
  19. package/lib/chat/assistant/assistantDetails.d.ts +84 -0
  20. package/lib/chat/assistant/assistantDetails.js +140 -0
  21. package/lib/chat/assistant/formats/files.d.ts +23 -0
  22. package/lib/chat/assistant/formats/files.js +48 -0
  23. package/lib/chat/assistant/formats/index.d.ts +2 -0
  24. package/lib/chat/assistant/formats/index.js +1 -0
  25. package/lib/chat/assistant/state.d.ts +7 -14
  26. package/lib/chat/assistant/state.js +21 -20
  27. package/lib/chat/assistant/toolLine.d.ts +16 -0
  28. package/lib/chat/assistant/toolLine.js +46 -0
  29. package/lib/chat/base/ChatBase.js +71 -1
  30. package/lib/chat/base/loopMessage.d.ts +37 -0
  31. package/lib/chat/base/loopMessage.js +37 -0
  32. package/lib/chat/indicators/TypingDots.d.ts +13 -0
  33. package/lib/chat/indicators/TypingDots.js +21 -0
  34. package/lib/chat/messages/ChatMarkdown.d.ts +16 -0
  35. package/lib/chat/messages/ChatMarkdown.js +18 -0
  36. package/lib/chat/messages/ChatMessageList.d.ts +8 -1
  37. package/lib/chat/messages/ChatMessageList.js +25 -33
  38. package/lib/chat/styles/streamdownStyles.js +3 -1
  39. package/lib/chat/tools/ToolCallDisplay.d.ts +8 -1
  40. package/lib/chat/tools/ToolCallDisplay.js +8 -7
  41. package/lib/components/code-sandboxes/CodeSandboxCellVariablesDialog.js +5 -11
  42. package/lib/components/code-sandboxes/CodeSandboxVariables.d.ts +8 -0
  43. package/lib/components/code-sandboxes/CodeSandboxVariables.js +17 -11
  44. package/lib/components/inspector/AgentInspector.d.ts +59 -0
  45. package/lib/components/inspector/AgentInspector.js +220 -0
  46. package/lib/components/inspector/AgentInspectorDialog.d.ts +19 -0
  47. package/lib/components/inspector/AgentInspectorDialog.js +9 -0
  48. package/lib/components/inspector/JsonTree.d.ts +24 -0
  49. package/lib/components/inspector/JsonTree.js +89 -0
  50. package/lib/components/inspector/a2aInspect.d.ts +56 -0
  51. package/lib/components/inspector/a2aInspect.js +478 -0
  52. package/lib/components/inspector/agentInspector.d.ts +179 -0
  53. package/lib/components/inspector/agentInspector.js +267 -0
  54. package/lib/components/inspector/chatInspect.d.ts +38 -0
  55. package/lib/components/inspector/chatInspect.js +65 -0
  56. package/lib/components/inspector/classify.d.ts +19 -0
  57. package/lib/components/inspector/classify.js +42 -0
  58. package/lib/components/inspector/index.d.ts +14 -0
  59. package/lib/components/inspector/index.js +18 -0
  60. package/lib/components/teams/A2ATeamGraph.d.ts +69 -1
  61. package/lib/components/teams/A2ATeamGraph.js +277 -37
  62. package/lib/components/teams/NotebookPreviewView.js +9 -1
  63. package/lib/components/teams/TeamNotebook.d.ts +3 -1
  64. package/lib/components/teams/TeamNotebook.js +3 -3
  65. package/lib/components/teams/TeamNotebookView.js +15 -0
  66. package/lib/components/teams/jupyterThemeVariables.d.ts +9 -0
  67. package/lib/components/teams/jupyterThemeVariables.js +441 -0
  68. package/lib/components/teams/teamConnections.d.ts +9 -1
  69. package/lib/components/teams/teamConnections.js +20 -0
  70. package/lib/components/teams/teamNotebookKernel.d.ts +3 -0
  71. package/lib/components/teams/teamNotebookKernel.js +17 -0
  72. package/lib/components/teams/useA2ATeam.d.ts +20 -3
  73. package/lib/components/teams/useA2ATeam.js +108 -23
  74. package/lib/examples/AgentA2ATeamExample.d.ts +13 -0
  75. package/lib/examples/AgentA2ATeamExample.js +67 -13
  76. package/lib/examples/AssistantExample.js +65 -26
  77. package/lib/examples/AssistantGalleryExample.js +2 -1
  78. package/lib/examples/exampleGroups.d.ts +1 -1
  79. package/lib/examples/exampleGroups.js +1 -1
  80. package/lib/examples/utils/assistantGallery.d.ts +7 -6
  81. package/lib/examples/utils/assistantGallery.js +23 -8
  82. package/lib/jupyter/exec/Python.d.ts +0 -1
  83. package/lib/jupyter/exec/Python.js +0 -32
  84. package/lib/jupyter/exec/Snippets.d.ts +4 -12
  85. package/lib/jupyter/exec/Snippets.js +0 -8
  86. package/lib/loop/apps/AppFeedback.js +3 -1
  87. package/lib/loop/apps/AppKept.d.ts +22 -0
  88. package/lib/loop/apps/AppKept.js +36 -0
  89. package/lib/loop/apps/AppRenderer.d.ts +11 -1
  90. package/lib/loop/apps/AppRenderer.js +22 -4
  91. package/lib/loop/apps/checks.d.ts +7 -0
  92. package/lib/loop/apps/checks.js +39 -0
  93. package/lib/loop/apps/index.d.ts +3 -0
  94. package/lib/loop/apps/index.js +3 -0
  95. package/lib/loop/apps/kept.d.ts +30 -0
  96. package/lib/loop/apps/kept.js +52 -0
  97. package/lib/loop/apps/records.d.ts +12 -4
  98. package/lib/loop/apps/records.js +13 -5
  99. package/lib/loop/apps/saved.d.ts +30 -0
  100. package/lib/loop/apps/saved.js +40 -0
  101. package/lib/loop/core/index.d.ts +17 -0
  102. package/lib/loop/core/index.js +1 -0
  103. package/lib/loop/embed/AppEmbed.d.ts +8 -1
  104. package/lib/loop/embed/AppEmbed.js +4 -4
  105. package/lib/loop/embed/LoopEmbed.d.ts +6 -1
  106. package/lib/loop/embed/LoopEmbed.js +4 -2
  107. package/lib/loop/embed/element.js +1 -1
  108. package/lib/loop/plugins/agents/DatalayerAgentBridge.js +12 -6
  109. package/lib/loop/plugins/agents/browserService.d.ts +7 -1
  110. package/lib/loop/plugins/agents/browserService.js +4 -0
  111. package/lib/loop/plugins/agents/plugin.d.ts +16 -0
  112. package/lib/loop/plugins/agents/switchable.d.ts +3 -0
  113. package/lib/loop/plugins/agents/switchable.js +1 -0
  114. package/lib/loop/plugins/app-activity/index.js +3 -0
  115. package/lib/loop/plugins/app-computer/index.js +3 -0
  116. package/lib/loop/plugins/app-rules/AppRulesCard.d.ts +5 -0
  117. package/lib/loop/plugins/app-rules/AppRulesCard.js +25 -6
  118. package/lib/loop/plugins/app-rules/index.js +3 -0
  119. package/lib/loop/plugins/assistant/index.d.ts +7 -2
  120. package/lib/loop/plugins/assistant/index.js +58 -4
  121. package/lib/loop/plugins/assistant-characters/index.d.ts +7 -0
  122. package/lib/loop/plugins/assistant-characters/index.js +17 -0
  123. package/lib/loop/plugins/chat/ChatView.js +4 -1
  124. package/lib/loop/plugins/page-layout/SplitLayout.d.ts +2 -1
  125. package/lib/loop/plugins/page-layout/SplitLayout.js +4 -0
  126. package/lib/loop/presets.d.ts +4 -0
  127. package/lib/loop/presets.js +3 -1
  128. package/lib/loop/shell/LoopWorkspace.d.ts +7 -0
  129. package/lib/loop/shell/LoopWorkspace.js +5 -4
  130. package/lib/loop/shell/SidebarRail.d.ts +53 -0
  131. package/lib/loop/shell/SidebarRail.js +74 -0
  132. package/lib/loop/shell/index.d.ts +2 -0
  133. package/lib/loop/shell/index.js +2 -0
  134. package/lib/loop/shell/paneMotion.d.ts +21 -0
  135. package/lib/loop/shell/paneMotion.js +37 -0
  136. package/lib/runtimes/browser/a2aPeer.d.ts +4 -1
  137. package/lib/specs/apps.js +8 -5
  138. package/lib/specs/uiPlugins.js +529 -0
  139. package/lib/types/agentspecs.d.ts +5 -3
  140. package/lib/types/chat.d.ts +12 -0
  141. package/package.json +2 -2
  142. package/scripts/codegen/generate_jupyter_theme_variables.mjs +57 -0
  143. package/scripts/codegen/generate_ui_plugins.py +112 -2
package/lib/agents/AgentDetails.js CHANGED
@@ -186,7 +186,7 @@ async function downloadContextSnapshotAsCSV(agentId, _apiBase, preloadedData) {
186
186
  /**
187
187
  * AgentDetails component displays comprehensive information about the agent.
188
188
  */
189
- export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader = true, showUsage = true, padded = true, mcpStatusData, codemodeStatusData, contextSnapshotData, fullContextData, }) {
189
+ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader = true, showUsage = true, padded = true, mcpStatusData, codemodeStatusData, contextSnapshotData, fullContextData, runtime = true, summary, }) {
190
190
  const wsMcpStatus = useAgentRuntimeMcpStatus();
191
191
  const wsCodemodeStatus = useAgentRuntimeCodemodeStatus();
192
192
  const wsContextSnapshot = useAgentRuntimeContextSnapshot();
@@ -237,7 +237,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
237
237
  }
238
238
  return response.json();
239
239
  },
240
- enabled: !!agentId,
240
+ enabled: !!agentId && runtime,
241
241
  });
242
242
  return (_jsxs(Box, { sx: {
243
243
  display: 'flex',
@@ -270,341 +270,450 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
270
270
  p: 2,
271
271
  bg: 'accent.subtle',
272
272
  borderRadius: 2,
273
- }, children: icon ? (_jsx(Box, { sx: { display: 'inline-flex', color: 'accent.fg' }, children: icon })) : emoji ? (_jsx(Text, { sx: { fontSize: 5, lineHeight: 1 }, children: emoji })) : (_jsx(AiAgentIcon, { colored: true, size: 32 })) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold', mb: 1 }, children: name }), agentId && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["ID: ", agentId] }))] })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
273
+ }, children: icon ? (_jsx(Box, { sx: { display: 'inline-flex', color: 'accent.fg' }, children: icon })) : emoji ? (_jsx(Text, { sx: { fontSize: 5, lineHeight: 1 }, children: emoji })) : (_jsx(AiAgentIcon, { colored: true, size: 32 })) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold', mb: 1 }, children: name }), agentId && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["ID: ", agentId] }))] })] }), summary &&
274
+ (summary.spec ||
275
+ summary.model ||
276
+ summary.where ||
277
+ summary.description ||
278
+ summary.skills?.length) && (_jsxs(Box, { "data-agent-details-summary": "", children: [_jsx(Heading, { as: "h4", sx: {
274
279
  fontSize: 1,
275
280
  fontWeight: 'semibold',
276
281
  mb: 2,
277
282
  color: 'fg.muted',
278
- }, children: "Connection" }), _jsx(Box, { sx: {
283
+ }, children: "Agent" }), _jsxs(Box, { sx: {
279
284
  p: 3,
280
285
  bg: 'canvas.subtle',
281
286
  borderRadius: 2,
282
287
  border: '1px solid',
283
288
  borderColor: 'border.default',
284
- }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { variant: "accent", size: "small", children: protocol.toUpperCase().replace(/-/g, ' ') }), _jsx(Text, { sx: {
285
- fontSize: 1,
286
- fontFamily: 'mono',
287
- wordBreak: 'break-all',
288
- }, children: url })] }) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
289
- fontSize: 1,
290
- fontWeight: 'semibold',
291
- mb: 2,
292
- color: 'fg.muted',
293
- }, children: "Agentspec" }), _jsx(Box, { sx: {
294
- p: 3,
295
- bg: 'canvas.subtle',
296
- borderRadius: 2,
297
- border: '1px solid',
298
- borderColor: 'border.default',
299
- }, children: specLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading agent spec..." })] })) : agentSpec ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Box, { children: _jsx(Button, { size: "small", leadingVisual: FileCodeIcon, onClick: () => setShowSpecPayload(true), children: "View spec payload" }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Model:" }), _jsx(Text, { sx: {
300
- fontSize: 0,
301
- fontFamily: 'mono',
302
- color: 'fg.default',
303
- }, children: agentSpec.model })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Library:" }), _jsx(Label, { variant: "secondary", size: "small", children: agentSpec.agent_library })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Codemode:" }), _jsx(Label, { variant: agentSpec.enable_codemode ? 'accent' : 'secondary', size: "small", children: agentSpec.enable_codemode ? 'Enabled' : 'Disabled' })] }), agentSpec.enable_skills && agentSpec.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: agentSpec.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(NoteIcon, { size: 16 }), _jsx(Text, { sx: {
289
+ display: 'flex',
290
+ flexDirection: 'column',
291
+ gap: 1,
292
+ }, children: [summary.description && (_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: summary.description })), [
293
+ ['Spec', summary.spec],
294
+ ['Model', summary.model],
295
+ ['Runs', summary.where],
296
+ ]
297
+ .filter(([, value]) => value)
298
+ .map(([key, value]) => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: [key, ":"] }), _jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: value })] }, key))), summary.skills && summary.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: summary.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] })] })), url && (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
299
+ fontSize: 1,
300
+ fontWeight: 'semibold',
301
+ mb: 2,
302
+ color: 'fg.muted',
303
+ }, children: "Connection" }), _jsx(Box, { sx: {
304
+ p: 3,
305
+ bg: 'canvas.subtle',
306
+ borderRadius: 2,
307
+ border: '1px solid',
308
+ borderColor: 'border.default',
309
+ }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { variant: "accent", size: "small", children: protocol.toUpperCase().replace(/-/g, ' ') }), _jsx(Text, { sx: {
310
+ fontSize: 1,
311
+ fontFamily: 'mono',
312
+ wordBreak: 'break-all',
313
+ }, children: url })] }) })] }) })), runtime && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
314
+ fontSize: 1,
315
+ fontWeight: 'semibold',
316
+ mb: 2,
317
+ color: 'fg.muted',
318
+ }, children: "Agentspec" }), _jsx(Box, { sx: {
319
+ p: 3,
320
+ bg: 'canvas.subtle',
321
+ borderRadius: 2,
322
+ border: '1px solid',
323
+ borderColor: 'border.default',
324
+ }, children: specLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading agent spec..." })] })) : agentSpec ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Box, { children: _jsx(Button, { size: "small", leadingVisual: FileCodeIcon, onClick: () => setShowSpecPayload(true), children: "View spec payload" }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Model:" }), _jsx(Text, { sx: {
325
+ fontSize: 0,
326
+ fontFamily: 'mono',
327
+ color: 'fg.default',
328
+ }, children: agentSpec.model })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Library:" }), _jsx(Label, { variant: "secondary", size: "small", children: agentSpec.agent_library })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Codemode:" }), _jsx(Label, { variant: agentSpec.enable_codemode ? 'accent' : 'secondary', size: "small", children: agentSpec.enable_codemode ? 'Enabled' : 'Disabled' })] }), agentSpec.enable_skills &&
329
+ agentSpec.skills.length > 0 && (_jsxs(Box, { sx: {
330
+ display: 'flex',
331
+ alignItems: 'center',
332
+ gap: 2,
333
+ }, children: [_jsx(Text, { sx: {
334
+ fontSize: 0,
335
+ color: 'fg.muted',
336
+ width: 100,
337
+ }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: agentSpec.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(NoteIcon, { size: 16 }), _jsx(Text, { sx: {
338
+ fontSize: 0,
339
+ fontWeight: 'semibold',
340
+ color: 'fg.muted',
341
+ }, children: "System Prompt" })] }), _jsx(Box, { sx: {
342
+ p: 2,
343
+ bg: 'canvas.default',
344
+ borderRadius: 2,
345
+ border: '1px solid',
346
+ borderColor: 'border.default',
347
+ maxHeight: 200,
348
+ overflow: 'auto',
349
+ }, children: _jsx(Text, { sx: {
350
+ fontSize: 0,
351
+ fontFamily: 'mono',
352
+ whiteSpace: 'pre-wrap',
353
+ wordBreak: 'break-word',
354
+ color: 'fg.default',
355
+ }, children: agentSpec.system_prompt }) })] }), agentSpec.system_prompt_codemode_addons && (_jsxs(Box, { sx: {
356
+ display: 'flex',
357
+ flexDirection: 'column',
358
+ gap: 1,
359
+ }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
360
+ fontSize: 0,
361
+ fontWeight: 'semibold',
362
+ color: 'fg.muted',
363
+ }, children: "Codemode Addon Prompt" }), agentSpec.enable_codemode ? (_jsx(Label, { variant: "accent", size: "small", children: "Active" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Inactive" }))] }), _jsx(Box, { sx: {
364
+ p: 2,
365
+ bg: 'canvas.default',
366
+ borderRadius: 2,
367
+ border: '1px solid',
368
+ borderColor: 'border.default',
369
+ maxHeight: 200,
370
+ overflow: 'auto',
371
+ }, children: _jsx(Text, { sx: {
372
+ fontSize: 0,
373
+ fontFamily: 'mono',
374
+ whiteSpace: 'pre-wrap',
375
+ wordBreak: 'break-word',
376
+ color: 'fg.default',
377
+ }, children: agentSpec.system_prompt_codemode_addons }) })] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No agent spec available" })) })] }), agentSpec?.sandbox && (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
378
+ fontSize: 1,
379
+ fontWeight: 'semibold',
380
+ mb: 2,
381
+ color: 'fg.muted',
382
+ }, children: "Code Sandbox" }), _jsx(Box, { sx: {
383
+ p: 3,
384
+ bg: 'canvas.subtle',
385
+ borderRadius: 2,
386
+ border: '1px solid',
387
+ borderColor: 'border.default',
388
+ }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'jupyter-server'
389
+ ? 'accent'
390
+ : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
304
391
  fontSize: 0,
305
- fontWeight: 'semibold',
306
392
  color: 'fg.muted',
307
- }, children: "System Prompt" })] }), _jsx(Box, { sx: {
308
- p: 2,
309
- bg: 'canvas.default',
310
- borderRadius: 2,
311
- border: '1px solid',
312
- borderColor: 'border.default',
313
- maxHeight: 200,
314
- overflow: 'auto',
315
- }, children: _jsx(Text, { sx: {
316
- fontSize: 0,
317
- fontFamily: 'mono',
318
- whiteSpace: 'pre-wrap',
319
- wordBreak: 'break-word',
320
- color: 'fg.default',
321
- }, children: agentSpec.system_prompt }) })] }), agentSpec.system_prompt_codemode_addons && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
393
+ width: 100,
394
+ pl: 4,
395
+ }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
396
+ display: 'flex',
397
+ alignItems: 'center',
398
+ gap: 1,
399
+ }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
400
+ display: 'flex',
401
+ alignItems: 'center',
402
+ gap: 1,
403
+ }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
404
+ fontSize: 0,
405
+ color: 'fg.muted',
406
+ width: 100,
407
+ pl: 4,
408
+ }, children: "Jupyter URL:" }), _jsx(Text, { sx: {
409
+ fontSize: 0,
410
+ fontFamily: 'mono',
411
+ color: 'fg.default',
412
+ overflow: 'hidden',
413
+ textOverflow: 'ellipsis',
414
+ whiteSpace: 'nowrap',
415
+ }, children: agentSpec.jupyter_sandbox ||
416
+ agentSpec.sandbox.jupyter_url ||
417
+ 'Not configured' })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
418
+ fontSize: 0,
419
+ color: 'fg.muted',
420
+ width: 100,
421
+ pl: 4,
422
+ }, children: "Connection:" }), agentSpec.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
423
+ display: 'flex',
424
+ alignItems: 'center',
425
+ gap: 1,
426
+ }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
427
+ display: 'flex',
428
+ flexDirection: 'column',
429
+ gap: 1,
430
+ }, children: [_jsxs(Box, { sx: {
431
+ display: 'flex',
432
+ alignItems: 'center',
433
+ gap: 1,
434
+ }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), agentSpec.sandbox.jupyter_error && (_jsx(Text, { sx: {
435
+ fontSize: 0,
436
+ color: 'danger.fg',
437
+ fontFamily: 'mono',
438
+ whiteSpace: 'pre-wrap',
439
+ wordBreak: 'break-word',
440
+ }, children: agentSpec.sandbox.jupyter_error }))] }))] })] })), agentSpec.sandbox.generated_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
322
441
  fontSize: 0,
323
- fontWeight: 'semibold',
324
442
  color: 'fg.muted',
325
- }, children: "Codemode Addon Prompt" }), agentSpec.enable_codemode ? (_jsx(Label, { variant: "accent", size: "small", children: "Active" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Inactive" }))] }), _jsx(Box, { sx: {
326
- p: 2,
327
- bg: 'canvas.default',
328
- borderRadius: 2,
329
- border: '1px solid',
330
- borderColor: 'border.default',
331
- maxHeight: 200,
332
- overflow: 'auto',
333
- }, children: _jsx(Text, { sx: {
334
- fontSize: 0,
335
- fontFamily: 'mono',
336
- whiteSpace: 'pre-wrap',
337
- wordBreak: 'break-word',
338
- color: 'fg.default',
339
- }, children: agentSpec.system_prompt_codemode_addons }) })] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No agent spec available" })) })] }), agentSpec?.sandbox && (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
340
- fontSize: 1,
341
- fontWeight: 'semibold',
342
- mb: 2,
343
- color: 'fg.muted',
344
- }, children: "Code Sandbox" }), _jsx(Box, { sx: {
345
- p: 3,
346
- bg: 'canvas.subtle',
347
- borderRadius: 2,
348
- border: '1px solid',
349
- borderColor: 'border.default',
350
- }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'jupyter-server'
351
- ? 'accent'
352
- : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100, pl: 4 }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
353
- display: 'flex',
354
- alignItems: 'center',
355
- gap: 1,
356
- }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
357
- display: 'flex',
358
- alignItems: 'center',
359
- gap: 1,
360
- }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
443
+ width: 100,
444
+ pl: 4,
445
+ }, children: "Generated:" }), _jsx(Text, { sx: {
446
+ fontSize: 0,
447
+ fontFamily: 'mono',
448
+ color: 'fg.default',
449
+ overflow: 'hidden',
450
+ textOverflow: 'ellipsis',
451
+ whiteSpace: 'nowrap',
452
+ }, title: agentSpec.sandbox.generated_path, children: agentSpec.sandbox.generated_path })] })), agentSpec.sandbox.skills_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
361
453
  fontSize: 0,
362
454
  color: 'fg.muted',
363
455
  width: 100,
364
456
  pl: 4,
365
- }, children: "Jupyter URL:" }), _jsx(Text, { sx: {
457
+ }, children: "Skills:" }), _jsx(Text, { sx: {
366
458
  fontSize: 0,
367
459
  fontFamily: 'mono',
368
460
  color: 'fg.default',
369
461
  overflow: 'hidden',
370
462
  textOverflow: 'ellipsis',
371
463
  whiteSpace: 'nowrap',
372
- }, children: agentSpec.jupyter_sandbox ||
373
- agentSpec.sandbox.jupyter_url ||
374
- 'Not configured' })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
464
+ }, title: agentSpec.sandbox.skills_path, children: agentSpec.sandbox.skills_path })] })), agentSpec.sandbox.python_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
375
465
  fontSize: 0,
376
466
  color: 'fg.muted',
377
467
  width: 100,
378
468
  pl: 4,
379
- }, children: "Connection:" }), agentSpec.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
469
+ }, children: "Python:" }), _jsx(Text, { sx: {
470
+ fontSize: 0,
471
+ fontFamily: 'mono',
472
+ color: 'fg.default',
473
+ overflow: 'hidden',
474
+ textOverflow: 'ellipsis',
475
+ whiteSpace: 'nowrap',
476
+ }, title: agentSpec.sandbox.python_path, children: agentSpec.sandbox.python_path })] }))] }) })] })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
477
+ fontSize: 1,
478
+ fontWeight: 'semibold',
479
+ mb: 2,
480
+ color: 'fg.muted',
481
+ }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
482
+ p: 3,
483
+ bg: 'canvas.subtle',
484
+ borderRadius: 2,
485
+ border: '1px solid',
486
+ borderColor: 'border.default',
487
+ }, children: !hasMcpLiveData && mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: {
488
+ display: 'flex',
489
+ flexDirection: 'column',
490
+ gap: 1,
491
+ }, children: [_jsx(Text, { sx: {
492
+ fontSize: 0,
493
+ fontWeight: 'semibold',
494
+ color: 'fg.muted',
495
+ }, children: "Ready:" }), mcpStatus.ready_servers.map(server => (_jsxs(Box, { sx: {
380
496
  display: 'flex',
381
497
  alignItems: 'center',
382
- gap: 1,
383
- }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
498
+ gap: 2,
499
+ pl: 2,
500
+ }, children: [_jsx(CheckCircleIcon, { size: 16, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }, server)))] })), Object.keys(mcpStatus.failed_servers).length > 0 && (_jsxs(Box, { sx: {
501
+ display: 'flex',
502
+ flexDirection: 'column',
503
+ gap: 1,
504
+ }, children: [_jsx(Text, { sx: {
505
+ fontSize: 0,
506
+ fontWeight: 'semibold',
507
+ color: 'fg.muted',
508
+ }, children: "Failed:" }), Object.entries(mcpStatus.failed_servers).map(([server, error]) => (_jsxs(Box, { sx: {
384
509
  display: 'flex',
385
510
  flexDirection: 'column',
386
511
  gap: 1,
512
+ pl: 2,
387
513
  }, children: [_jsxs(Box, { sx: {
388
514
  display: 'flex',
389
515
  alignItems: 'center',
390
- gap: 1,
391
- }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), agentSpec.sandbox.jupyter_error && (_jsx(Text, { sx: {
516
+ gap: 2,
517
+ }, children: [_jsx(XCircleIcon, { size: 16, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }), _jsx(Text, { sx: {
392
518
  fontSize: 0,
393
519
  color: 'danger.fg',
394
520
  fontFamily: 'mono',
521
+ pl: 4,
395
522
  whiteSpace: 'pre-wrap',
396
523
  wordBreak: 'break-word',
397
- }, children: agentSpec.sandbox.jupyter_error }))] }))] })] })), agentSpec.sandbox.generated_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
398
- fontSize: 0,
399
- color: 'fg.muted',
400
- width: 100,
401
- pl: 4,
402
- }, children: "Generated:" }), _jsx(Text, { sx: {
403
- fontSize: 0,
404
- fontFamily: 'mono',
405
- color: 'fg.default',
406
- overflow: 'hidden',
407
- textOverflow: 'ellipsis',
408
- whiteSpace: 'nowrap',
409
- }, title: agentSpec.sandbox.generated_path, children: agentSpec.sandbox.generated_path })] })), agentSpec.sandbox.skills_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
410
- fontSize: 0,
411
- color: 'fg.muted',
412
- width: 100,
413
- pl: 4,
414
- }, children: "Skills:" }), _jsx(Text, { sx: {
415
- fontSize: 0,
416
- fontFamily: 'mono',
417
- color: 'fg.default',
418
- overflow: 'hidden',
419
- textOverflow: 'ellipsis',
420
- whiteSpace: 'nowrap',
421
- }, title: agentSpec.sandbox.skills_path, children: agentSpec.sandbox.skills_path })] })), agentSpec.sandbox.python_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
422
- fontSize: 0,
423
- color: 'fg.muted',
424
- width: 100,
425
- pl: 4,
426
- }, children: "Python:" }), _jsx(Text, { sx: {
427
- fontSize: 0,
428
- fontFamily: 'mono',
429
- color: 'fg.default',
430
- overflow: 'hidden',
431
- textOverflow: 'ellipsis',
432
- whiteSpace: 'nowrap',
433
- }, title: agentSpec.sandbox.python_path, children: agentSpec.sandbox.python_path })] }))] }) })] })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
434
- fontSize: 1,
435
- fontWeight: 'semibold',
436
- mb: 2,
437
- color: 'fg.muted',
438
- }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
439
- p: 3,
440
- bg: 'canvas.subtle',
441
- borderRadius: 2,
442
- border: '1px solid',
443
- borderColor: 'border.default',
444
- }, children: !hasMcpLiveData && mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
445
- fontSize: 0,
446
- fontWeight: 'semibold',
447
- color: 'fg.muted',
448
- }, children: "Ready:" }), mcpStatus.ready_servers.map(server => (_jsxs(Box, { sx: {
524
+ }, children: error.split('\n')[0] })] }, server)))] }))] })) : hasMcpLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for MCP status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
525
+ fontSize: 1,
526
+ fontWeight: 'semibold',
527
+ mb: 2,
528
+ color: 'fg.muted',
529
+ }, children: "Codemode" }), _jsx(Box, { sx: {
530
+ p: 3,
531
+ bg: 'canvas.subtle',
532
+ borderRadius: 2,
533
+ border: '1px solid',
534
+ borderColor: 'border.default',
535
+ }, children: !hasCodemodeLiveData && codemodeLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading Codemode status..." })] })) : codemodeStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: {
449
536
  display: 'flex',
450
537
  alignItems: 'center',
451
- gap: 2,
452
- pl: 2,
453
- }, children: [_jsx(CheckCircleIcon, { size: 16, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }, server)))] })), Object.keys(mcpStatus.failed_servers).length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
454
- fontSize: 0,
455
- fontWeight: 'semibold',
456
- color: 'fg.muted',
457
- }, children: "Failed:" }), Object.entries(mcpStatus.failed_servers).map(([server, error]) => (_jsxs(Box, { sx: {
538
+ justifyContent: 'space-between',
539
+ }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsxs(Box, { children: [_jsx(Text, { id: "codemode-toggle-label", sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Codemode" }), _jsx(Text, { sx: {
540
+ fontSize: 0,
541
+ color: 'fg.muted',
542
+ marginLeft: 1,
543
+ }, children: "MCP servers become programmatic tools" })] })] }), _jsx(ToggleSwitch, { "aria-labelledby": "codemode-toggle-label", checked: codemodeStatus.enabled, onClick: () => toggleCodemodeMutation.mutate(!codemodeStatus.enabled), disabled: toggleCodemodeMutation.isPending, size: "small" })] }), codemodeStatus.sandbox && (_jsxs(Box, { sx: {
458
544
  display: 'flex',
459
545
  flexDirection: 'column',
460
- gap: 1,
461
- pl: 2,
462
- }, children: [_jsxs(Box, { sx: {
546
+ gap: 2,
547
+ p: 2,
548
+ bg: 'canvas.default',
549
+ borderRadius: 2,
550
+ border: '1px solid',
551
+ borderColor: 'border.default',
552
+ }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
553
+ fontSize: 0,
554
+ fontWeight: 'semibold',
555
+ color: 'fg.muted',
556
+ }, children: "Code Sandbox" })] }), _jsxs(Box, { sx: {
463
557
  display: 'flex',
464
- alignItems: 'center',
465
- gap: 2,
466
- }, children: [_jsx(XCircleIcon, { size: 16, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }), _jsx(Text, { sx: {
467
- fontSize: 0,
468
- color: 'danger.fg',
469
- fontFamily: 'mono',
558
+ flexDirection: 'column',
559
+ gap: 1,
470
560
  pl: 4,
471
- whiteSpace: 'pre-wrap',
472
- wordBreak: 'break-word',
473
- }, children: error.split('\n')[0] })] }, server)))] }))] })) : hasMcpLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for MCP status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
474
- fontSize: 1,
475
- fontWeight: 'semibold',
476
- mb: 2,
477
- color: 'fg.muted',
478
- }, children: "Codemode" }), _jsx(Box, { sx: {
479
- p: 3,
480
- bg: 'canvas.subtle',
481
- borderRadius: 2,
482
- border: '1px solid',
483
- borderColor: 'border.default',
484
- }, children: !hasCodemodeLiveData && codemodeLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading Codemode status..." })] })) : codemodeStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: {
485
- display: 'flex',
486
- alignItems: 'center',
487
- justifyContent: 'space-between',
488
- }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsxs(Box, { children: [_jsx(Text, { id: "codemode-toggle-label", sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', marginLeft: 1 }, children: "MCP servers become programmatic tools" })] })] }), _jsx(ToggleSwitch, { "aria-labelledby": "codemode-toggle-label", checked: codemodeStatus.enabled, onClick: () => toggleCodemodeMutation.mutate(!codemodeStatus.enabled), disabled: toggleCodemodeMutation.isPending, size: "small" })] }), codemodeStatus.sandbox && (_jsxs(Box, { sx: {
489
- display: 'flex',
490
- flexDirection: 'column',
491
- gap: 2,
492
- p: 2,
493
- bg: 'canvas.default',
494
- borderRadius: 2,
495
- border: '1px solid',
496
- borderColor: 'border.default',
497
- }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
498
- fontSize: 0,
499
- fontWeight: 'semibold',
500
- color: 'fg.muted',
501
- }, children: "Code Sandbox" })] }), _jsxs(Box, { sx: {
502
- display: 'flex',
503
- flexDirection: 'column',
504
- gap: 1,
505
- pl: 4,
506
- }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Variant:" }), _jsx(Label, { variant: codemodeStatus.sandbox.variant === 'jupyter-server'
507
- ? 'accent'
508
- : 'secondary', size: "small", children: codemodeStatus.sandbox.variant })] }), codemodeStatus.sandbox.variant === 'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
561
+ }, children: [_jsxs(Box, { sx: {
509
562
  display: 'flex',
510
563
  alignItems: 'center',
511
564
  gap: 2,
512
- }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "URL:" }), _jsx(Text, { sx: {
513
- fontSize: 0,
514
- fontFamily: 'mono',
515
- color: 'fg.default',
516
- overflow: 'hidden',
517
- textOverflow: 'ellipsis',
518
- whiteSpace: 'nowrap',
519
- }, children: codemodeStatus.sandbox.jupyter_url ||
520
- 'Not configured' })] }), _jsxs(Box, { sx: {
565
+ }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Variant:" }), _jsx(Label, { variant: codemodeStatus.sandbox.variant ===
566
+ 'jupyter-server'
567
+ ? 'accent'
568
+ : 'secondary', size: "small", children: codemodeStatus.sandbox.variant })] }), codemodeStatus.sandbox.variant ===
569
+ 'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
570
+ display: 'flex',
571
+ alignItems: 'center',
572
+ gap: 2,
573
+ }, children: [_jsx(Text, { sx: {
574
+ fontSize: 0,
575
+ color: 'fg.muted',
576
+ width: 80,
577
+ }, children: "URL:" }), _jsx(Text, { sx: {
578
+ fontSize: 0,
579
+ fontFamily: 'mono',
580
+ color: 'fg.default',
581
+ overflow: 'hidden',
582
+ textOverflow: 'ellipsis',
583
+ whiteSpace: 'nowrap',
584
+ }, children: codemodeStatus.sandbox.jupyter_url ||
585
+ 'Not configured' })] }), _jsxs(Box, { sx: {
586
+ display: 'flex',
587
+ alignItems: 'center',
588
+ gap: 2,
589
+ }, children: [_jsx(Text, { sx: {
590
+ fontSize: 0,
591
+ color: 'fg.muted',
592
+ width: 80,
593
+ }, children: "Status:" }), codemodeStatus.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
594
+ display: 'flex',
595
+ alignItems: 'center',
596
+ gap: 1,
597
+ }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
598
+ display: 'flex',
599
+ flexDirection: 'column',
600
+ gap: 1,
601
+ }, children: [_jsxs(Box, { sx: {
602
+ display: 'flex',
603
+ alignItems: 'center',
604
+ gap: 1,
605
+ }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), codemodeStatus.sandbox.jupyter_error && (_jsx(Text, { sx: {
606
+ fontSize: 0,
607
+ color: 'danger.fg',
608
+ fontFamily: 'mono',
609
+ whiteSpace: 'pre-wrap',
610
+ wordBreak: 'break-word',
611
+ }, children: codemodeStatus.sandbox.jupyter_error }))] }))] })] })), _jsxs(Box, { sx: {
521
612
  display: 'flex',
522
613
  alignItems: 'center',
523
614
  gap: 2,
524
- }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Status:" }), codemodeStatus.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
615
+ }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Running:" }), codemodeStatus.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
525
616
  display: 'flex',
526
617
  alignItems: 'center',
527
618
  gap: 1,
528
- }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
619
+ }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
529
620
  display: 'flex',
530
- flexDirection: 'column',
621
+ alignItems: 'center',
531
622
  gap: 1,
532
- }, children: [_jsxs(Box, { sx: {
533
- display: 'flex',
534
- alignItems: 'center',
535
- gap: 1,
536
- }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), codemodeStatus.sandbox.jupyter_error && (_jsx(Text, { sx: {
537
- fontSize: 0,
538
- color: 'danger.fg',
539
- fontFamily: 'mono',
540
- whiteSpace: 'pre-wrap',
541
- wordBreak: 'break-word',
542
- }, children: codemodeStatus.sandbox.jupyter_error }))] }))] })] })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Running:" }), codemodeStatus.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
623
+ }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), codemodeStatus.sandbox.generated_path && (_jsxs(Box, { sx: {
543
624
  display: 'flex',
544
625
  alignItems: 'center',
545
- gap: 1,
546
- }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
626
+ gap: 2,
627
+ }, children: [_jsx(Text, { sx: {
628
+ fontSize: 0,
629
+ color: 'fg.muted',
630
+ width: 80,
631
+ }, children: "Generated:" }), _jsx(Text, { sx: {
632
+ fontSize: 0,
633
+ fontFamily: 'mono',
634
+ color: 'fg.default',
635
+ overflow: 'hidden',
636
+ textOverflow: 'ellipsis',
637
+ whiteSpace: 'nowrap',
638
+ }, title: codemodeStatus.sandbox.generated_path, children: codemodeStatus.sandbox.generated_path })] })), codemodeStatus.sandbox.skills_path && (_jsxs(Box, { sx: {
547
639
  display: 'flex',
548
640
  alignItems: 'center',
549
- gap: 1,
550
- }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), codemodeStatus.sandbox.generated_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Generated:" }), _jsx(Text, { sx: {
551
- fontSize: 0,
552
- fontFamily: 'mono',
553
- color: 'fg.default',
554
- overflow: 'hidden',
555
- textOverflow: 'ellipsis',
556
- whiteSpace: 'nowrap',
557
- }, title: codemodeStatus.sandbox.generated_path, children: codemodeStatus.sandbox.generated_path })] })), codemodeStatus.sandbox.skills_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Skills:" }), _jsx(Text, { sx: {
558
- fontSize: 0,
559
- fontFamily: 'mono',
560
- color: 'fg.default',
561
- overflow: 'hidden',
562
- textOverflow: 'ellipsis',
563
- whiteSpace: 'nowrap',
564
- }, title: codemodeStatus.sandbox.skills_path, children: codemodeStatus.sandbox.skills_path })] })), codemodeStatus.sandbox.python_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Python Path:" }), _jsx(Text, { sx: {
565
- fontSize: 0,
566
- fontFamily: 'mono',
567
- color: 'fg.default',
568
- overflow: 'hidden',
569
- textOverflow: 'ellipsis',
570
- whiteSpace: 'nowrap',
571
- }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BriefcaseIcon, { size: 16 }), _jsxs(Text, { sx: {
572
- fontSize: 0,
573
- fontWeight: 'semibold',
574
- color: 'fg.muted',
575
- }, children: ["Active Skills (", codemodeStatus.skills.length, ")"] })] }), codemodeStatus.skills.map(skill => (_jsxs(Box, { sx: {
641
+ gap: 2,
642
+ }, children: [_jsx(Text, { sx: {
643
+ fontSize: 0,
644
+ color: 'fg.muted',
645
+ width: 80,
646
+ }, children: "Skills:" }), _jsx(Text, { sx: {
647
+ fontSize: 0,
648
+ fontFamily: 'mono',
649
+ color: 'fg.default',
650
+ overflow: 'hidden',
651
+ textOverflow: 'ellipsis',
652
+ whiteSpace: 'nowrap',
653
+ }, title: codemodeStatus.sandbox.skills_path, children: codemodeStatus.sandbox.skills_path })] })), codemodeStatus.sandbox.python_path && (_jsxs(Box, { sx: {
654
+ display: 'flex',
655
+ alignItems: 'center',
656
+ gap: 2,
657
+ }, children: [_jsx(Text, { sx: {
658
+ fontSize: 0,
659
+ color: 'fg.muted',
660
+ width: 80,
661
+ }, children: "Python Path:" }), _jsx(Text, { sx: {
662
+ fontSize: 0,
663
+ fontFamily: 'mono',
664
+ color: 'fg.default',
665
+ overflow: 'hidden',
666
+ textOverflow: 'ellipsis',
667
+ whiteSpace: 'nowrap',
668
+ }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: {
576
669
  display: 'flex',
577
670
  flexDirection: 'column',
578
671
  gap: 1,
579
- pl: 4,
580
- py: 1,
581
- borderLeft: '2px solid',
582
- borderColor: 'accent.emphasis',
583
- }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description })), skill.tags && skill.tags.length > 0 && (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: skill.tags.map(tag => (_jsx(Label, { variant: "secondary", size: "small", children: tag }, tag))) }))] }, skill.name)))] })), codemodeStatus.available_skills.length > 0 &&
584
- codemodeStatus.skills.length === 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Text, { sx: {
585
- fontSize: 0,
586
- fontWeight: 'semibold',
587
- color: 'fg.muted',
588
- }, children: ["Available Skills (", codemodeStatus.available_skills.length, ")"] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable skills via CLI with --skills flag" }), _jsx(Box, { sx: {
672
+ }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BriefcaseIcon, { size: 16 }), _jsxs(Text, { sx: {
673
+ fontSize: 0,
674
+ fontWeight: 'semibold',
675
+ color: 'fg.muted',
676
+ }, children: ["Active Skills (", codemodeStatus.skills.length, ")"] })] }), codemodeStatus.skills.map(skill => (_jsxs(Box, { sx: {
677
+ display: 'flex',
678
+ flexDirection: 'column',
679
+ gap: 1,
680
+ pl: 4,
681
+ py: 1,
682
+ borderLeft: '2px solid',
683
+ borderColor: 'accent.emphasis',
684
+ }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description })), skill.tags && skill.tags.length > 0 && (_jsx(Box, { sx: {
685
+ display: 'flex',
686
+ gap: 1,
687
+ flexWrap: 'wrap',
688
+ }, children: skill.tags.map(tag => (_jsx(Label, { variant: "secondary", size: "small", children: tag }, tag))) }))] }, skill.name)))] })), codemodeStatus.available_skills.length > 0 &&
689
+ codemodeStatus.skills.length === 0 && (_jsxs(Box, { sx: {
589
690
  display: 'flex',
691
+ flexDirection: 'column',
590
692
  gap: 1,
591
- flexWrap: 'wrap',
592
- mt: 1,
593
- }, children: codemodeStatus.available_skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill.name }, skill.name))) })] })), codemodeStatus.available_skills.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No CodeMode skills are available for this agent. You can still use MCP tools by selecting MCP servers." }))] })) : hasCodemodeLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for Codemode status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), showUsage && agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, liveData: resolvedContextSnapshot, messageCount: messageCount, chartHeight: "200px" })), showUsage && agentId && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
594
- display: 'flex',
595
- alignItems: 'center',
596
- justifyContent: 'space-between',
597
- mb: 2,
598
- }, children: [_jsx(Heading, { as: "h4", sx: {
599
- fontSize: 1,
600
- fontWeight: 'semibold',
601
- color: 'fg.muted',
602
- }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase, resolvedFullContext), children: "Download" })] }), _jsx(Box, { sx: {
603
- p: 3,
604
- bg: 'canvas.subtle',
605
- borderRadius: 2,
606
- border: '1px solid',
607
- borderColor: 'border.default',
608
- }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase, liveData: resolvedFullContext }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] }), showSpecPayload && agentSpec ? (_jsx(SpecPayloadPreview, { spec: agentSpec, onClose: () => setShowSpecPayload(false) })) : null] }));
693
+ }, children: [_jsxs(Text, { sx: {
694
+ fontSize: 0,
695
+ fontWeight: 'semibold',
696
+ color: 'fg.muted',
697
+ }, children: ["Available Skills (", codemodeStatus.available_skills.length, ")"] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable skills via CLI with --skills flag" }), _jsx(Box, { sx: {
698
+ display: 'flex',
699
+ gap: 1,
700
+ flexWrap: 'wrap',
701
+ mt: 1,
702
+ }, children: codemodeStatus.available_skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill.name }, skill.name))) })] })), codemodeStatus.available_skills.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No CodeMode skills are available for this agent. You can still use MCP tools by selecting MCP servers." }))] })) : hasCodemodeLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for Codemode status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), showUsage && agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, liveData: resolvedContextSnapshot, messageCount: messageCount, chartHeight: "200px" })), showUsage && agentId && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
703
+ display: 'flex',
704
+ alignItems: 'center',
705
+ justifyContent: 'space-between',
706
+ mb: 2,
707
+ }, children: [_jsx(Heading, { as: "h4", sx: {
708
+ fontSize: 1,
709
+ fontWeight: 'semibold',
710
+ color: 'fg.muted',
711
+ }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase, resolvedFullContext), children: "Download" })] }), _jsx(Box, { sx: {
712
+ p: 3,
713
+ bg: 'canvas.subtle',
714
+ borderRadius: 2,
715
+ border: '1px solid',
716
+ borderColor: 'border.default',
717
+ }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase, liveData: resolvedFullContext }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect })] })), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] }), showSpecPayload && agentSpec ? (_jsx(SpecPayloadPreview, { spec: agentSpec, onClose: () => setShowSpecPayload(false) })) : null] }));
609
718
  }
610
719
  export default AgentDetails;