Skip to content

fix(cockpit): production review pass — 22 fixes across 14 examples #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blove merged 1 commit into from
Apr 6, 2026
Merged

fix(cockpit): production review pass — 22 fixes across 14 examples #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Component, computed } from '@angular/core';
import { ChatDebugComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { AIMessage } from '@langchain/core/messages';
import { environment } from '../environments/environment';

@Component({
Expand All @@ -11,20 +12,21 @@ import { environment } from '../environments/environment';
template: `
<div class="flex h-screen">
<chat-debug [ref]="stream" class="flex-1 min-w-0" />
@if (fileOps().length > 0) {
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">File Operations</h3>
@for (op of fileOps(); track $index) {
<div class="flex items-start gap-2 text-sm py-1">
<span class="shrink-0">{{ op.name === 'read_file' ? '📖' : '✏️' }}</span>
<span class="font-mono text-xs break-all"
style="color: var(--chat-text, #e0e0e0);">{{ op.path }}</span>
</div>
}
</aside>
}
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">File Operations</h3>
@if (fileOps().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No file operations yet. Ask the agent to read or write a file.</p>
}
@for (op of fileOps(); track $index) {
<div class="flex items-start gap-2 text-sm py-1">
<span class="shrink-0">{{ op.name === 'read_file' ? '📖' : '✏️' }}</span>
<span class="font-mono text-xs break-all"
style="color: var(--chat-text, #e0e0e0);">{{ op.path }}</span>
</div>
}
</aside>
</div>
`,
})
Expand All @@ -38,11 +40,10 @@ export class FilesystemComponent {
const messages = this.stream.messages();
const ops: { name: string; path: string }[] = [];
for (const msg of messages) {
if ('tool_calls' in msg && Array.isArray((msg as any).tool_calls)) {
for (const tc of (msg as any).tool_calls) {
if (tc.name === 'read_file' || tc.name === 'write_file') {
ops.push({ name: tc.name, path: tc.args?.path ?? '' });
}
if (!(msg instanceof AIMessage)) continue;
for (const tc of this.stream.getToolCalls(msg)) {
if (tc.call.name === 'read_file' || tc.call.name === 'write_file') {
ops.push({ name: tc.call.name, path: (tc.call.args as Record<string, string>)?.['path'] ?? '' });
}
}
}
Expand Down
27 changes: 14 additions & 13 deletions cockpit/deep-agents/memory/angular/src/app/memory.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,20 @@ import { environment } from '../environments/environment';
template: `
<div class="flex h-screen">
<chat-debug [ref]="stream" class="flex-1 min-w-0" />
@if (memoryEntries().length > 0) {
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Agent Memory</h3>
@for (entry of memoryEntries(); track $index) {
<div class="text-sm py-1">
<span class="font-semibold" style="color: var(--chat-text-muted, #777);">{{ entry[0] }}:</span>
<span class="ml-1" style="color: var(--chat-text, #e0e0e0);">{{ entry[1] }}</span>
</div>
}
</aside>
}
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Agent Memory</h3>
@if (memoryEntries().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No facts learned yet. Have a conversation to build memory.</p>
}
@for (entry of memoryEntries(); track $index) {
<div class="text-sm py-1">
<span class="font-semibold" style="color: var(--chat-text-muted, #777);">{{ entry[0] }}:</span>
<span class="ml-1" style="color: var(--chat-text, #e0e0e0);">{{ entry[1] }}</span>
</div>
}
</aside>
</div>
`,
})
Expand Down
39 changes: 20 additions & 19 deletions cockpit/deep-agents/planning/angular/src/app/planning.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,26 @@ import { environment } from '../environments/environment';
template: `
<div class="flex h-screen">
<chat-debug [ref]="stream" class="flex-1 min-w-0" />
@if (planSteps().length > 0) {
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Plan Steps</h3>
@for (step of planSteps(); track $index) {
<div class="flex items-start gap-2 text-sm py-1">
<span class="shrink-0 mt-0.5"
style="color: {{ step.status === 'complete' ? 'var(--chat-accent, #4ade80)' : 'var(--chat-text-muted, #777)' }};">
{{ step.status === 'complete' ? '✓' : '○' }}
</span>
<span [style.text-decoration]="step.status === 'complete' ? 'line-through' : 'none'"
style="color: var(--chat-text, #e0e0e0);">
{{ step.title }}
</span>
</div>
}
</aside>
}
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Plan Steps</h3>
@if (planSteps().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No plan steps yet. Ask the agent to plan something.</p>
}
@for (step of planSteps(); track $index) {
<div class="flex items-start gap-2 text-sm py-1">
<span class="shrink-0 mt-0.5"
[style.color]="step.status === 'complete' ? 'var(--chat-accent, #4ade80)' : 'var(--chat-text-muted, #777)'">
{{ step.status === 'complete' ? '✓' : '○' }}
</span>
<span [style.text-decoration]="step.status === 'complete' ? 'line-through' : 'none'"
style="color: var(--chat-text, #e0e0e0);">
{{ step.title }}
</span>
</div>
}
</aside>
</div>
`,
})
Expand Down
80 changes: 41 additions & 39 deletions cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Component, computed } from '@angular/core';
import { ChatDebugComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { AIMessage } from '@langchain/core/messages';
import { environment } from '../environments/environment';

@Component({
Expand All @@ -11,32 +12,34 @@ import { environment } from '../environments/environment';
template: `
<div class="flex h-screen">
<chat-debug [ref]="stream" class="flex-1 min-w-0" />
@if (execLogs().length > 0) {
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-3"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Code Executions</h3>
@for (log of execLogs(); track $index) {
<div class="text-xs space-y-1 pb-2"
style="border-bottom: 1px solid var(--chat-border, #333);">
<div class="flex items-center gap-2">
<span class="px-1.5 py-0.5 rounded text-xs font-mono font-semibold"
style="background: {{ log.exitStatus === 0 ? 'var(--chat-accent, #4ade80)' : '#ef4444' }}; color: #000;">
exit {{ log.exitStatus }}
</span>
</div>
@if (log.code) {
<pre class="font-mono text-xs truncate"
style="color: var(--chat-text-muted, #777);">{{ log.code }}</pre>
}
@if (log.stdout) {
<pre class="font-mono text-xs whitespace-pre-wrap break-all"
style="color: var(--chat-text, #e0e0e0);">{{ log.stdout }}</pre>
}
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-3"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Code Executions</h3>
@if (execLogs().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No code executions yet. Ask the agent to write and run code.</p>
}
@for (log of execLogs(); track $index) {
<div class="text-xs space-y-1 pb-2"
style="border-bottom: 1px solid var(--chat-border, #333);">
<div class="flex items-center gap-2">
<span class="px-1.5 py-0.5 rounded text-xs font-mono font-semibold"
[style.background]="log.exitStatus === 0 ? 'var(--chat-accent, #4ade80)' : 'var(--chat-error-text, #ef4444)'"
style="color: #000;">
exit {{ log.exitStatus }}
</span>
</div>
}
</aside>
}
@if (log.code) {
<pre class="font-mono text-xs truncate"
style="color: var(--chat-text-muted, #777);">{{ log.code }}</pre>
}
@if (log.stdout) {
<pre class="font-mono text-xs whitespace-pre-wrap break-all"
style="color: var(--chat-text, #e0e0e0);">{{ log.stdout }}</pre>
}
</div>
}
</aside>
</div>
`,
})
Expand All @@ -50,21 +53,20 @@ export class SandboxesComponent {
const messages = this.stream.messages();
const logs: { code: string; stdout: string; exitStatus: number }[] = [];
for (const msg of messages) {
if ('tool_calls' in msg && Array.isArray((msg as any).tool_calls)) {
for (const tc of (msg as any).tool_calls) {
if (tc.name === 'run_code') {
const resultIdx = messages.indexOf(msg) + 1;
const resultMsg = messages[resultIdx];
let stdout = '', exitStatus = 0;
if (resultMsg && typeof resultMsg.content === 'string') {
try {
const parsed = JSON.parse(resultMsg.content);
stdout = parsed.stdout ?? '';
exitStatus = parsed.exit_status ?? 0;
} catch { /* ignore */ }
}
logs.push({ code: tc.args?.code ?? '', stdout, exitStatus });
if (!(msg instanceof AIMessage)) continue;
for (const tc of this.stream.getToolCalls(msg)) {
if (tc.call.name === 'run_code') {
const resultIdx = messages.indexOf(msg) + 1;
const resultMsg = messages[resultIdx];
let stdout = '', exitStatus = 0;
if (resultMsg && typeof resultMsg.content === 'string') {
try {
const parsed = JSON.parse(resultMsg.content);
stdout = parsed.stdout ?? '';
exitStatus = parsed.exit_status ?? 0;
} catch { /* ignore */ }
}
logs.push({ code: (tc.call.args as Record<string, string>)?.['code'] ?? '', stdout, exitStatus });
}
}
}
Expand Down
40 changes: 21 additions & 19 deletions cockpit/deep-agents/skills/angular/src/app/skills.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Component, computed } from '@angular/core';
import { ChatDebugComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { AIMessage } from '@langchain/core/messages';
import { environment } from '../environments/environment';

const SKILL_ICONS: Record<string, string> = {
Expand All @@ -17,20 +18,21 @@ const SKILL_ICONS: Record<string, string> = {
template: `
<div class="flex h-screen">
<chat-debug [ref]="stream" class="flex-1 min-w-0" />
@if (skillInvocations().length > 0) {
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Skill Invocations</h3>
@for (inv of skillInvocations(); track $index) {
<div class="flex items-center gap-2 text-sm py-1">
<span class="shrink-0">{{ inv.icon }}</span>
<span class="font-mono text-xs"
style="color: var(--chat-text, #e0e0e0);">{{ inv.name }}</span>
</div>
}
</aside>
}
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Skill Invocations</h3>
@if (skillInvocations().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No skill invocations yet. Ask the agent to calculate, count, or summarize.</p>
}
@for (inv of skillInvocations(); track $index) {
<div class="flex items-center gap-2 text-sm py-1">
<span class="shrink-0">{{ inv.icon }}</span>
<span class="font-mono text-xs"
style="color: var(--chat-text, #e0e0e0);">{{ inv.name }}</span>
</div>
}
</aside>
</div>
`,
})
Expand All @@ -44,11 +46,11 @@ export class SkillsComponent {
const messages = this.stream.messages();
const invocations: { name: string; icon: string }[] = [];
for (const msg of messages) {
if ('tool_calls' in msg && Array.isArray((msg as any).tool_calls)) {
for (const tc of (msg as any).tool_calls) {
if (tc.name === 'calculator' || tc.name === 'word_count' || tc.name === 'summarize') {
invocations.push({ name: tc.name, icon: SKILL_ICONS[tc.name] ?? '🔧' });
}
if (!(msg instanceof AIMessage)) continue;
for (const tc of this.stream.getToolCalls(msg)) {
const name = tc.call.name;
if (name === 'calculator' || name === 'word_count' || name === 'summarize') {
invocations.push({ name, icon: SKILL_ICONS[name] ?? '🔧' });
}
}
}
Expand Down
37 changes: 19 additions & 18 deletions cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Component, computed } from '@angular/core';
import { ChatDebugComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { AIMessage } from '@langchain/core/messages';
import { environment } from '../environments/environment';

@Component({
Expand All @@ -11,20 +12,21 @@ import { environment } from '../environments/environment';
template: `
<div class="flex h-screen">
<chat-debug [ref]="stream" class="flex-1 min-w-0" />
@if (delegations().length > 0) {
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Subagent Delegations</h3>
@for (entry of delegations(); track $index) {
<div class="flex items-center gap-2 text-sm py-1">
<span class="shrink-0">🤖</span>
<span class="font-mono text-xs"
style="color: var(--chat-text, #e0e0e0);">{{ entry.name }}</span>
</div>
}
</aside>
}
<aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide mb-3"
style="color: var(--chat-text-muted, #777);">Subagent Delegations</h3>
@if (delegations().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No delegations yet. Ask a question to see agent orchestration.</p>
}
@for (entry of delegations(); track $index) {
<div class="flex items-center gap-2 text-sm py-1">
<span class="shrink-0">🤖</span>
<span class="font-mono text-xs"
style="color: var(--chat-text, #e0e0e0);">{{ entry.name }}</span>
</div>
}
</aside>
</div>
`,
})
Expand All @@ -38,10 +40,9 @@ export class SubagentsComponent {
const messages = this.stream.messages();
const entries: { name: string }[] = [];
for (const msg of messages) {
if ('tool_calls' in msg && Array.isArray((msg as any).tool_calls)) {
for (const tc of (msg as any).tool_calls) {
entries.push({ name: tc.name });
}
if (!(msg instanceof AIMessage)) continue;
for (const tc of this.stream.getToolCalls(msg)) {
entries.push({ name: tc.call.name });
}
}
return entries;
Expand Down
Loading
Loading