mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-07 20:28:46 +02:00
refactor: move session controls from activity panel to chat input
Move interactive tool toggles and auto-approval overrides from the ActivityPanel side panel into compact pill-style popovers above the chat composer in ChatPane. This cleanly separates concerns: - ActivityPanel is now purely read-only (agents + timeline) - ChatPane owns all session-level interactive controls - Tools pill: popover with MCP/LSP enable/disable toggles - Auto-approval pill: popover with grouped tool auto-approval overrides including session override state and reset action Follows the existing InlineModelPill/InlineThinkingPill pattern for scratchpad sessions, giving non-scratchpad sessions the same kind of inline configuration experience. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useMemo, type ReactNode } from 'react';
|
||||
import { Activity, Clock, RotateCcw, Server, Code, ShieldAlert, ShieldCheck, Sparkles, Users } from 'lucide-react';
|
||||
import { Activity, Clock, ShieldAlert, Sparkles, Users } from 'lucide-react';
|
||||
|
||||
import {
|
||||
buildAgentActivityRows,
|
||||
@@ -12,19 +12,7 @@ import {
|
||||
import { RunTimeline } from '@renderer/components/RunTimeline';
|
||||
import { inferProvider } from '@shared/domain/models';
|
||||
import type { OrchestrationMode, PatternAgentDefinition, PatternDefinition } from '@shared/domain/pattern';
|
||||
import {
|
||||
resolveSessionToolingSelection,
|
||||
type SessionRecord,
|
||||
} from '@shared/domain/session';
|
||||
import type {
|
||||
LspProfileDefinition,
|
||||
McpServerDefinition,
|
||||
RuntimeToolDefinition,
|
||||
SessionToolingSelection,
|
||||
WorkspaceToolingSettings,
|
||||
} from '@shared/domain/tooling';
|
||||
import { listApprovalToolDefinitions, type ApprovalToolDefinition, type ApprovalToolKind } from '@shared/domain/tooling';
|
||||
import type { SessionApprovalSettings } from '@shared/domain/approval';
|
||||
import type { SessionRecord } from '@shared/domain/session';
|
||||
import { ProviderIcon } from './ProviderIcons';
|
||||
|
||||
/* ── Mode accent colours ───────────────────────────────────── */
|
||||
@@ -161,57 +149,27 @@ function AgentRow({
|
||||
|
||||
interface ActivityPanelProps {
|
||||
activity?: SessionActivityState;
|
||||
lspProfiles: LspProfileDefinition[];
|
||||
mcpServers: McpServerDefinition[];
|
||||
toolingSettings: WorkspaceToolingSettings;
|
||||
runtimeTools?: ReadonlyArray<RuntimeToolDefinition>;
|
||||
onJumpToMessage?: (messageId: string) => void;
|
||||
onUpdateSessionTooling: (selection: SessionToolingSelection) => void;
|
||||
onUpdateSessionApprovalSettings: (settings: { autoApprovedToolNames?: string[] }) => void;
|
||||
pattern: PatternDefinition;
|
||||
projectIsScratchpad: boolean;
|
||||
session: SessionRecord;
|
||||
}
|
||||
|
||||
export function ActivityPanel({
|
||||
activity,
|
||||
lspProfiles,
|
||||
mcpServers,
|
||||
toolingSettings,
|
||||
runtimeTools,
|
||||
onJumpToMessage,
|
||||
onUpdateSessionTooling,
|
||||
onUpdateSessionApprovalSettings,
|
||||
pattern,
|
||||
projectIsScratchpad,
|
||||
session,
|
||||
}: ActivityPanelProps) {
|
||||
const activityRows = useMemo(
|
||||
() => buildAgentActivityRows(activity, pattern.agents),
|
||||
[activity, pattern.agents],
|
||||
);
|
||||
const selection = useMemo(() => resolveSessionToolingSelection(session), [session]);
|
||||
const approvalTools = useMemo(
|
||||
() => listApprovalToolDefinitions(toolingSettings, runtimeTools),
|
||||
[runtimeTools, toolingSettings],
|
||||
);
|
||||
|
||||
const isOverridden = session.approvalSettings !== undefined;
|
||||
const effectiveAutoApproved = new Set(
|
||||
isOverridden
|
||||
? session.approvalSettings!.autoApprovedToolNames
|
||||
: pattern.approvalPolicy?.autoApprovedToolNames ?? [],
|
||||
);
|
||||
|
||||
const isBusy = session.status === 'running';
|
||||
const hasPendingApproval = session.pendingApproval?.status === 'pending';
|
||||
const queuedCount = (session.pendingApprovalQueue ?? []).filter((a) => a.status === 'pending').length;
|
||||
const totalApprovalCount = (hasPendingApproval ? 1 : 0) + queuedCount;
|
||||
const toolsDisabled = isBusy || projectIsScratchpad;
|
||||
const approvalDisabled = isBusy || projectIsScratchpad;
|
||||
const accent = modeAccent[pattern.mode] ?? modeAccent.single;
|
||||
const hasTools = mcpServers.length > 0 || lspProfiles.length > 0;
|
||||
const hasToolCallApproval = pattern.approvalPolicy?.rules.some((r) => r.kind === 'tool-call') ?? false;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
@@ -281,271 +239,10 @@ export function ActivityPanel({
|
||||
<RunTimeline onJumpToMessage={onJumpToMessage} runs={session.runs} />
|
||||
</div>
|
||||
|
||||
{/* ── Tools section ────────────────────────────────── */}
|
||||
<div className="mb-4">
|
||||
<SectionHeader>
|
||||
<Server className="size-3" />
|
||||
<span>Tools</span>
|
||||
{toolsDisabled && (
|
||||
<span className="ml-auto text-[9px] font-medium normal-case tracking-normal text-zinc-600">
|
||||
{projectIsScratchpad ? 'Scratchpad' : 'Running'}
|
||||
</span>
|
||||
)}
|
||||
</SectionHeader>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5">
|
||||
{projectIsScratchpad ? (
|
||||
<p className="text-[11px] leading-relaxed text-zinc-600">
|
||||
Start a project-backed session to use MCPs or LSPs.
|
||||
</p>
|
||||
) : !hasTools ? (
|
||||
<p className="text-[11px] leading-relaxed text-zinc-600">
|
||||
Add MCP servers or LSP profiles in Settings to enable them here.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{mcpServers.map((server) => (
|
||||
<ToolToggleRow
|
||||
detail={server.transport === 'local' ? server.command : server.url}
|
||||
disabled={toolsDisabled}
|
||||
enabled={selection.enabledMcpServerIds.includes(server.id)}
|
||||
icon={<Server className="size-3 text-zinc-600" />}
|
||||
key={server.id}
|
||||
label={server.name}
|
||||
onToggle={() =>
|
||||
onUpdateSessionTooling({
|
||||
...selection,
|
||||
enabledMcpServerIds: toggleId(selection.enabledMcpServerIds, server.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
{lspProfiles.map((profile) => (
|
||||
<ToolToggleRow
|
||||
detail={profile.command}
|
||||
disabled={toolsDisabled}
|
||||
enabled={selection.enabledLspProfileIds.includes(profile.id)}
|
||||
icon={<Code className="size-3 text-zinc-600" />}
|
||||
key={profile.id}
|
||||
label={profile.name}
|
||||
onToggle={() =>
|
||||
onUpdateSessionTooling({
|
||||
...selection,
|
||||
enabledLspProfileIds: toggleId(selection.enabledLspProfileIds, profile.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Auto-approval overrides section ──────────────── */}
|
||||
{hasToolCallApproval && !projectIsScratchpad && (
|
||||
<div className="mb-4">
|
||||
<SectionHeader>
|
||||
<ShieldCheck className="size-3" />
|
||||
<span>Auto-Approval</span>
|
||||
<span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[9px] tabular-nums text-zinc-500">
|
||||
{effectiveAutoApproved.size}/{approvalTools.length}
|
||||
</span>
|
||||
{approvalDisabled && (
|
||||
<span className="ml-auto text-[9px] font-medium normal-case tracking-normal text-zinc-600">
|
||||
Running
|
||||
</span>
|
||||
)}
|
||||
</SectionHeader>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5">
|
||||
{approvalTools.length === 0 ? (
|
||||
<p className="text-[11px] leading-relaxed text-zinc-600">
|
||||
No tools available yet. Connect MCP servers or wait for runtime capabilities to load.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Override state badge + reset action */}
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className={`rounded-full px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
|
||||
isOverridden
|
||||
? 'bg-amber-500/15 text-amber-400'
|
||||
: 'bg-zinc-800 text-zinc-500'
|
||||
}`}>
|
||||
{isOverridden ? 'Session override' : 'Using pattern defaults'}
|
||||
</span>
|
||||
{isOverridden && (
|
||||
<button
|
||||
className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={approvalDisabled}
|
||||
onClick={() => onUpdateSessionApprovalSettings({})}
|
||||
type="button"
|
||||
>
|
||||
<RotateCcw className="size-2.5" />
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ApprovalOverrideGroupedList
|
||||
approvalDisabled={approvalDisabled}
|
||||
effectiveAutoApproved={effectiveAutoApproved}
|
||||
onToggle={(toolId) => {
|
||||
const next = new Set(effectiveAutoApproved);
|
||||
if (next.has(toolId)) {
|
||||
next.delete(toolId);
|
||||
} else {
|
||||
next.add(toolId);
|
||||
}
|
||||
onUpdateSessionApprovalSettings({
|
||||
autoApprovedToolNames: [...next],
|
||||
});
|
||||
}}
|
||||
tools={approvalTools}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolToggleRow({
|
||||
label,
|
||||
detail,
|
||||
icon,
|
||||
enabled,
|
||||
disabled,
|
||||
onToggle,
|
||||
}: {
|
||||
label: string;
|
||||
detail?: string;
|
||||
icon: ReactNode;
|
||||
enabled: boolean;
|
||||
disabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition ${
|
||||
disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-zinc-800/60'
|
||||
}`}
|
||||
disabled={disabled}
|
||||
onClick={onToggle}
|
||||
type="button"
|
||||
>
|
||||
{icon}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-[12px] font-medium text-zinc-300">{label}</div>
|
||||
{detail && (
|
||||
<div className="truncate text-[10px] text-zinc-600">{detail}</div>
|
||||
)}
|
||||
</div>
|
||||
<ToggleSwitch enabled={enabled} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ToggleSwitch({ enabled }: { enabled: boolean }) {
|
||||
return (
|
||||
<span
|
||||
className={`relative inline-flex h-[16px] w-[28px] shrink-0 items-center rounded-full transition-colors ${
|
||||
enabled ? 'bg-indigo-500' : 'bg-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block size-[12px] rounded-full bg-white shadow-sm transition-transform ${
|
||||
enabled ? 'translate-x-[14px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function toggleId(current: string[], id: string): string[] {
|
||||
return current.includes(id)
|
||||
? current.filter((currentId) => currentId !== id)
|
||||
: [...current, id];
|
||||
}
|
||||
|
||||
/* ── Approval override grouped list ─────────────────────────── */
|
||||
|
||||
const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
|
||||
const approvalKindLabels: Record<ApprovalToolKind, string> = {
|
||||
builtin: 'Built-in',
|
||||
mcp: 'MCP Servers',
|
||||
lsp: 'Language Servers',
|
||||
mixed: 'Other',
|
||||
};
|
||||
|
||||
function ApprovalOverrideGroupedList({
|
||||
tools,
|
||||
effectiveAutoApproved,
|
||||
approvalDisabled,
|
||||
onToggle,
|
||||
}: {
|
||||
tools: ApprovalToolDefinition[];
|
||||
effectiveAutoApproved: Set<string>;
|
||||
approvalDisabled: boolean;
|
||||
onToggle: (toolId: string) => void;
|
||||
}) {
|
||||
const groups = approvalKindOrder
|
||||
.map((kind) => ({ kind, tools: tools.filter((t) => t.kind === kind) }))
|
||||
.filter((g) => g.tools.length > 0);
|
||||
const showHeaders = groups.length > 1;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{groups.map((group, i) => (
|
||||
<div key={group.kind}>
|
||||
{showHeaders && (
|
||||
<div className={`text-[9px] font-semibold uppercase tracking-wider text-zinc-600 ${i > 0 ? 'mt-2' : ''} mb-1`}>
|
||||
{approvalKindLabels[group.kind]}
|
||||
</div>
|
||||
)}
|
||||
{group.tools.map((tool) => (
|
||||
<ApprovalOverrideRow
|
||||
disabled={approvalDisabled}
|
||||
enabled={effectiveAutoApproved.has(tool.id)}
|
||||
key={tool.id}
|
||||
onToggle={() => onToggle(tool.id)}
|
||||
tool={tool}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ApprovalOverrideRow({
|
||||
tool,
|
||||
enabled,
|
||||
disabled,
|
||||
onToggle,
|
||||
}: {
|
||||
tool: ApprovalToolDefinition;
|
||||
enabled: boolean;
|
||||
disabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
|
||||
return (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition ${
|
||||
disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-zinc-800/60'
|
||||
}`}
|
||||
disabled={disabled}
|
||||
onClick={onToggle}
|
||||
type="button"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="truncate text-[12px] font-medium text-zinc-300">{tool.label}</span>
|
||||
{detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
|
||||
</div>
|
||||
<ToggleSwitch enabled={enabled} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user