mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-04 02:48:44 +02:00
refactor: decompose large frontend components into focused modules
Split six monolithic component files into smaller, single-responsibility modules organized by feature domain: - ChatPane (1054→~250 lines): extract InlinePills, ApprovalBanner, ThinkingDots into chat/ directory - SettingsPanel (1027→~280 lines): extract McpServerEditor, LspProfileEditor, ToolingEditorShell into settings/ directory; mutation helpers into lib/settingsHelpers.ts - PatternEditor: use shared ToggleSwitch from ui/ - App.tsx: extract useTheme and useSidecarCapabilities into hooks/ - Sidebar: extracted accessibility improvements inline New shared primitives: - hooks/useClickOutside: replaces 5 duplicated click-outside listeners - components/ui/: ToggleSwitch, PopoverToggleRow, FormField, TextInput, TextareaInput, SelectInput, InfoCallout Accessibility improvements: - NewSessionModal: role=dialog, aria-modal, Escape-to-close - Pill dropdowns: aria-expanded, aria-haspopup, role=listbox/option - Sidebar context menu: role=menu/menuitem, Escape-to-close - SessionItem: Space key activation alongside Enter - ToolbarButton: aria-pressed for toggle state - ApprovalBanner: role=alert - QueuedApprovalsList: aria-expanded on toggle - ThinkingDots: aria-label No behavioral changes. All 137 tests pass. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
+5
-41
@@ -14,7 +14,7 @@ import {
|
||||
import { applySessionEventWorkspace } from '@renderer/lib/sessionWorkspace';
|
||||
import { WelcomePane } from '@renderer/components/WelcomePane';
|
||||
import { getElectronApi } from '@renderer/lib/electronApi';
|
||||
import type { SidecarCapabilities } from '@shared/contracts/sidecar';
|
||||
import { useTheme, useSidecarCapabilities } from '@renderer/hooks/useAppHooks';
|
||||
import {
|
||||
buildAvailableModelCatalog,
|
||||
findModel,
|
||||
@@ -84,9 +84,8 @@ export default function App() {
|
||||
const api = getElectronApi();
|
||||
const [workspace, setWorkspace] = useState<WorkspaceState>();
|
||||
const [error, setError] = useState<string>();
|
||||
const [sidecarCapabilities, setSidecarCapabilities] = useState<SidecarCapabilities>();
|
||||
const { capabilities: sidecarCapabilities, isRefreshing: isRefreshingCapabilities, refresh: refreshCapabilities } = useSidecarCapabilities(api);
|
||||
const [sessionActivities, setSessionActivities] = useState<SessionActivityMap>({});
|
||||
const [isRefreshingCapabilities, setIsRefreshingCapabilities] = useState(false);
|
||||
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [newSessionProjectId, setNewSessionProjectId] = useState<string>();
|
||||
@@ -99,14 +98,6 @@ export default function App() {
|
||||
.loadWorkspace()
|
||||
.then((ws) => !disposed && setWorkspace(ws))
|
||||
.catch((e) => !disposed && setError(e instanceof Error ? e.message : String(e)));
|
||||
void api
|
||||
.describeSidecarCapabilities()
|
||||
.then((capabilities) => !disposed && setSidecarCapabilities(capabilities))
|
||||
.catch((e) => {
|
||||
if (!disposed) {
|
||||
console.warn('Failed to load sidecar capabilities', e);
|
||||
}
|
||||
});
|
||||
|
||||
const offWorkspace = api.onWorkspaceUpdated((ws) => {
|
||||
setWorkspace(ws);
|
||||
@@ -133,24 +124,7 @@ export default function App() {
|
||||
|
||||
// Apply theme to the document root
|
||||
const themeSetting: AppearanceTheme = workspace?.settings.theme ?? 'dark';
|
||||
useEffect(() => {
|
||||
function resolveEffective(pref: AppearanceTheme): 'dark' | 'light' {
|
||||
if (pref === 'dark' || pref === 'light') return pref;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const apply = () => {
|
||||
document.documentElement.dataset.theme = resolveEffective(themeSetting);
|
||||
};
|
||||
|
||||
apply();
|
||||
|
||||
if (themeSetting === 'system') {
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
mq.addEventListener('change', apply);
|
||||
return () => mq.removeEventListener('change', apply);
|
||||
}
|
||||
}, [themeSetting]);
|
||||
useTheme(themeSetting);
|
||||
|
||||
// Derived state
|
||||
const selectedSession = useMemo(
|
||||
@@ -212,17 +186,7 @@ export default function App() {
|
||||
);
|
||||
}
|
||||
|
||||
const refreshCapabilities = async () => {
|
||||
setIsRefreshingCapabilities(true);
|
||||
try {
|
||||
const capabilities = await api.refreshSidecarCapabilities();
|
||||
setSidecarCapabilities(capabilities);
|
||||
} finally {
|
||||
setIsRefreshingCapabilities(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateScratchpad = () => {
|
||||
const handleCreateScratchpad = useCallback(() => {
|
||||
const singlePatterns = workspace.patterns
|
||||
.filter((p) => p.mode === 'single' && p.availability !== 'unavailable')
|
||||
.sort((a, b) => {
|
||||
@@ -235,7 +199,7 @@ export default function App() {
|
||||
if (defaultPattern) {
|
||||
void api.createSession({ projectId: SCRATCHPAD_PROJECT_ID, patternId: defaultPattern.id });
|
||||
}
|
||||
};
|
||||
}, [api, workspace?.patterns]);
|
||||
|
||||
// Determine main content
|
||||
let content: React.ReactNode;
|
||||
|
||||
@@ -1,650 +1,29 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { AlertCircle, ArrowUp, Bot, Check, ChevronDown, Circle, GitBranch, Loader2, RotateCcw, Server, ShieldAlert, ShieldCheck, Sparkles, User, X } from 'lucide-react';
|
||||
import { AlertCircle, ArrowUp, Bot, Circle, GitBranch, Loader2, ShieldAlert, User } from 'lucide-react';
|
||||
|
||||
import { MarkdownContent } from '@renderer/components/MarkdownContent';
|
||||
import { MarkdownComposer, type MarkdownComposerHandle } from '@renderer/components/MarkdownComposer';
|
||||
import { ApprovalBanner, QueuedApprovalsList } from '@renderer/components/chat/ApprovalBanner';
|
||||
import { InlineApprovalPill, InlineModelPill, InlineThinkingPill, InlineToolsPill } from '@renderer/components/chat/InlinePills';
|
||||
import { ThinkingDots } from '@renderer/components/chat/ThinkingDots';
|
||||
import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
|
||||
import { ProviderIcon } from '@renderer/components/ProviderIcons';
|
||||
import type { ApprovalDecision, PendingApprovalRecord } from '@shared/domain/approval';
|
||||
import type { ApprovalDecision } from '@shared/domain/approval';
|
||||
import {
|
||||
findModel,
|
||||
getSupportedReasoningEfforts,
|
||||
inferProvider,
|
||||
providerMeta,
|
||||
resolveReasoningEffort,
|
||||
type ModelDefinition,
|
||||
} from '@shared/domain/models';
|
||||
import { reasoningEffortOptions, type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
|
||||
import { type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
|
||||
import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
|
||||
import { resolveSessionToolingSelection, type SessionRecord } from '@shared/domain/session';
|
||||
import {
|
||||
listApprovalToolDefinitions,
|
||||
type ApprovalToolDefinition,
|
||||
type ApprovalToolKind,
|
||||
type LspProfileDefinition,
|
||||
type McpServerDefinition,
|
||||
type RuntimeToolDefinition,
|
||||
type SessionToolingSelection,
|
||||
type WorkspaceToolingSettings,
|
||||
} from '@shared/domain/tooling';
|
||||
|
||||
function ThinkingDots() {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="thinking-dot size-2 rounded-full bg-zinc-500" />
|
||||
<span className="thinking-dot size-2 rounded-full bg-zinc-500" />
|
||||
<span className="thinking-dot size-2 rounded-full bg-zinc-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Tier badge for model dropdown ─────────────────────────── */
|
||||
|
||||
function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
|
||||
if (!tier) return null;
|
||||
const styles = {
|
||||
premium: 'bg-amber-500/10 text-amber-400',
|
||||
standard: 'bg-zinc-700/50 text-zinc-500',
|
||||
fast: 'bg-emerald-500/10 text-emerald-400',
|
||||
};
|
||||
return (
|
||||
<span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
|
||||
{tier}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Inline model pill with dropdown ───────────────────────── */
|
||||
|
||||
function InlineModelPill({
|
||||
value,
|
||||
models,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
value: string;
|
||||
models: ReadonlyArray<ModelDefinition>;
|
||||
onChange: (model: string) => void;
|
||||
disabled: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [open]);
|
||||
|
||||
const selected = findModel(value, models);
|
||||
const provider = selected?.provider ?? inferProvider(value);
|
||||
const displayName = selected?.name ?? value ?? 'Model';
|
||||
|
||||
const groupedModels = providerMeta
|
||||
.map((pg) => ({ ...pg, models: models.filter((m) => m.provider === pg.id) }))
|
||||
.filter((pg) => pg.models.length > 0);
|
||||
const otherModels = models.filter((m) => !m.provider);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
{provider && <ProviderIcon provider={provider} className="size-3" />}
|
||||
<span className="max-w-[140px] truncate">{displayName}</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
|
||||
{groupedModels.map((pg) => (
|
||||
<div key={pg.id}>
|
||||
<div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
|
||||
<ProviderIcon provider={pg.id} className="size-3.5" />
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
{pg.label}
|
||||
</span>
|
||||
</div>
|
||||
{pg.models.map((model) => (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
|
||||
model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
|
||||
}`}
|
||||
key={model.id}
|
||||
onClick={() => { onChange(model.id); setOpen(false); }}
|
||||
type="button"
|
||||
>
|
||||
<span className="flex-1">{model.name}</span>
|
||||
<TierBadge tier={model.tier} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{otherModels.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Other
|
||||
</div>
|
||||
{otherModels.map((model) => (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
|
||||
model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
|
||||
}`}
|
||||
key={model.id}
|
||||
onClick={() => { onChange(model.id); setOpen(false); }}
|
||||
type="button"
|
||||
>
|
||||
<span className="flex-1">{model.name}</span>
|
||||
<TierBadge tier={model.tier} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Inline thinking effort pill with dropdown ─────────────── */
|
||||
|
||||
function InlineThinkingPill({
|
||||
value,
|
||||
supportedEfforts,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
value?: ReasoningEffort;
|
||||
supportedEfforts?: ReadonlyArray<ReasoningEffort>;
|
||||
onChange: (effort: ReasoningEffort) => void;
|
||||
disabled: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [open]);
|
||||
|
||||
const options = supportedEfforts
|
||||
? reasoningEffortOptions.filter((o) => supportedEfforts.includes(o.value))
|
||||
: [...reasoningEffortOptions];
|
||||
|
||||
if (supportedEfforts && supportedEfforts.length === 0) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-2 py-1 text-[12px] text-zinc-600">
|
||||
<Sparkles className="size-3" />
|
||||
N/A
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const currentLabel = options.find((o) => o.value === value)?.label ?? value ?? 'Thinking';
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<Sparkles className="size-3" />
|
||||
<span>{currentLabel}</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
|
||||
option.value === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
|
||||
}`}
|
||||
key={option.value}
|
||||
onClick={() => { onChange(option.value); setOpen(false); }}
|
||||
type="button"
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Inline tools pill with popover ─────────────────────────── */
|
||||
|
||||
function InlineToolsPill({
|
||||
mcpServers,
|
||||
lspProfiles,
|
||||
selection,
|
||||
disabled,
|
||||
onToggle,
|
||||
}: {
|
||||
mcpServers: ReadonlyArray<McpServerDefinition>;
|
||||
lspProfiles: ReadonlyArray<LspProfileDefinition>;
|
||||
selection: SessionToolingSelection;
|
||||
disabled: boolean;
|
||||
onToggle: (selection: SessionToolingSelection) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [open]);
|
||||
|
||||
const enabledCount = selection.enabledMcpServerIds.length + selection.enabledLspProfileIds.length;
|
||||
const totalCount = mcpServers.length + lspProfiles.length;
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<Server className="size-3" />
|
||||
<span>{enabledCount}/{totalCount} tools</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
|
||||
{mcpServers.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
|
||||
MCP Servers
|
||||
</div>
|
||||
{mcpServers.map((server) => (
|
||||
<PopoverToggleRow
|
||||
detail={server.transport === 'local' ? server.command : server.url}
|
||||
enabled={selection.enabledMcpServerIds.includes(server.id)}
|
||||
key={server.id}
|
||||
label={server.name}
|
||||
onToggle={() =>
|
||||
onToggle({
|
||||
...selection,
|
||||
enabledMcpServerIds: toggleInArray(selection.enabledMcpServerIds, server.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{lspProfiles.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
|
||||
Language Servers
|
||||
</div>
|
||||
{lspProfiles.map((profile) => (
|
||||
<PopoverToggleRow
|
||||
detail={profile.command}
|
||||
enabled={selection.enabledLspProfileIds.includes(profile.id)}
|
||||
key={profile.id}
|
||||
label={profile.name}
|
||||
onToggle={() =>
|
||||
onToggle({
|
||||
...selection,
|
||||
enabledLspProfileIds: toggleInArray(selection.enabledLspProfileIds, profile.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Inline auto-approval pill with popover ────────────────── */
|
||||
|
||||
const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
|
||||
const approvalKindLabels: Record<ApprovalToolKind, string> = {
|
||||
builtin: 'Built-in',
|
||||
mcp: 'MCP Servers',
|
||||
lsp: 'Language Servers',
|
||||
mixed: 'Other',
|
||||
};
|
||||
|
||||
function InlineApprovalPill({
|
||||
approvalTools,
|
||||
effectiveAutoApproved,
|
||||
isOverridden,
|
||||
disabled,
|
||||
onUpdate,
|
||||
}: {
|
||||
approvalTools: ApprovalToolDefinition[];
|
||||
effectiveAutoApproved: Set<string>;
|
||||
isOverridden: boolean;
|
||||
disabled: boolean;
|
||||
onUpdate: (settings: { autoApprovedToolNames?: string[] }) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [open]);
|
||||
|
||||
function toggleTool(toolId: string) {
|
||||
const next = new Set(effectiveAutoApproved);
|
||||
if (next.has(toolId)) {
|
||||
next.delete(toolId);
|
||||
} else {
|
||||
next.add(toolId);
|
||||
}
|
||||
onUpdate({ autoApprovedToolNames: [...next] });
|
||||
}
|
||||
|
||||
const groups = approvalKindOrder
|
||||
.map((kind) => ({ kind, tools: approvalTools.filter((t) => t.kind === kind) }))
|
||||
.filter((g) => g.tools.length > 0);
|
||||
const showHeaders = groups.length > 1;
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: isOverridden
|
||||
? 'border-amber-500/30 bg-amber-500/5 text-amber-400 hover:border-amber-500/50'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<ShieldCheck className="size-3" />
|
||||
<span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-80 w-72 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
|
||||
{/* Override state + reset */}
|
||||
<div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-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' : '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"
|
||||
onClick={() => onUpdate({})}
|
||||
type="button"
|
||||
>
|
||||
<RotateCcw className="size-2.5" />
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tool list grouped by kind */}
|
||||
<div className="py-1">
|
||||
{groups.map((group, i) => (
|
||||
<div key={group.kind}>
|
||||
{showHeaders && (
|
||||
<div className={`px-3 pb-1 ${i > 0 ? 'pt-2' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-zinc-600`}>
|
||||
{approvalKindLabels[group.kind]}
|
||||
</div>
|
||||
)}
|
||||
{group.tools.map((tool) => {
|
||||
const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
|
||||
return (
|
||||
<PopoverToggleRow
|
||||
detail={detail}
|
||||
enabled={effectiveAutoApproved.has(tool.id)}
|
||||
key={tool.id}
|
||||
label={tool.label}
|
||||
onToggle={() => toggleTool(tool.id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Shared popover toggle row + helpers ───────────────────── */
|
||||
|
||||
function PopoverToggleRow({
|
||||
label,
|
||||
detail,
|
||||
enabled,
|
||||
onToggle,
|
||||
}: {
|
||||
label: string;
|
||||
detail?: string;
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition hover:bg-zinc-800"
|
||||
onClick={onToggle}
|
||||
type="button"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
className={`relative inline-flex h-[14px] w-[24px] shrink-0 items-center rounded-full transition-colors ${
|
||||
enabled ? 'bg-indigo-500' : 'bg-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block size-[10px] rounded-full bg-white shadow-sm transition-transform ${
|
||||
enabled ? 'translate-x-[12px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function toggleInArray(current: string[], id: string): string[] {
|
||||
return current.includes(id)
|
||||
? current.filter((currentId) => currentId !== id)
|
||||
: [...current, id];
|
||||
}
|
||||
|
||||
/* ── Approval banner ────────────────────────────────────────── */
|
||||
|
||||
function ApprovalBanner({
|
||||
approval,
|
||||
onResolve,
|
||||
isResolving,
|
||||
position,
|
||||
total,
|
||||
}: {
|
||||
approval: PendingApprovalRecord;
|
||||
onResolve: (decision: ApprovalDecision) => void;
|
||||
isResolving: boolean;
|
||||
position?: number;
|
||||
total?: number;
|
||||
}) {
|
||||
const kindLabel = approval.kind === 'final-response' ? 'Final response review' : 'Tool call approval';
|
||||
const hasMessages = approval.messages && approval.messages.length > 0;
|
||||
const showPosition = position !== undefined && total !== undefined && total > 1;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-2.5">
|
||||
<ShieldAlert className="mt-0.5 size-4 shrink-0 text-amber-400" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[13px] font-semibold text-amber-200">{approval.title}</span>
|
||||
<span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-400">
|
||||
{kindLabel}
|
||||
</span>
|
||||
{showPosition && (
|
||||
<span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[9px] font-semibold tabular-nums text-zinc-400">
|
||||
{position} of {total}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Agent / permission context */}
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-zinc-400">
|
||||
{approval.agentName && <span>Agent: <span className="text-zinc-300">{approval.agentName}</span></span>}
|
||||
{approval.toolName && <span>Tool: <span className="text-zinc-300">{approval.toolName}</span></span>}
|
||||
{approval.permissionKind && <span>Permission: <span className="text-zinc-300">{approval.permissionKind}</span></span>}
|
||||
</div>
|
||||
|
||||
{approval.detail && (
|
||||
<p className="mt-1.5 text-[12px] leading-relaxed text-zinc-400">{approval.detail}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final-response message preview */}
|
||||
{hasMessages && (
|
||||
<div className="mt-3 space-y-2 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Pending messages — not yet published
|
||||
</p>
|
||||
{approval.messages!.map((message) => (
|
||||
<div className="mt-2" key={message.id}>
|
||||
<div className="mb-1 flex items-center gap-2 text-[11px] font-medium text-zinc-500">
|
||||
<Bot className="size-3" />
|
||||
<span>{message.authorName}</span>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800/60 bg-zinc-900/40 px-3 py-2 text-[13px] leading-relaxed text-zinc-300">
|
||||
<MarkdownContent content={message.content} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={isResolving}
|
||||
onClick={() => onResolve('approved')}
|
||||
type="button"
|
||||
>
|
||||
{isResolving ? <Loader2 className="size-3 animate-spin" /> : <Check className="size-3" />}
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3.5 py-1.5 text-[12px] font-medium text-zinc-300 transition hover:bg-zinc-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={isResolving}
|
||||
onClick={() => onResolve('rejected')}
|
||||
type="button"
|
||||
>
|
||||
<X className="size-3" />
|
||||
Reject
|
||||
</button>
|
||||
{showPosition && (
|
||||
<span className="ml-auto text-[10px] text-zinc-600">
|
||||
Next approval will appear after this one is resolved
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Queued approvals preview ──────────────────────────────── */
|
||||
|
||||
function QueuedApprovalsList({ approvals }: { approvals: PendingApprovalRecord[] }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2">
|
||||
<button
|
||||
className="flex w-full items-center gap-2 text-left"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
type="button"
|
||||
>
|
||||
<ShieldCheck className="size-3 text-zinc-500" />
|
||||
<span className="text-[11px] font-medium text-zinc-400">
|
||||
{approvals.length} queued approval{approvals.length === 1 ? '' : 's'}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={`ml-auto size-3 text-zinc-600 transition-transform ${expanded ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div className="mt-2 space-y-1.5 border-t border-zinc-800/60 pt-2">
|
||||
{approvals.map((approval) => {
|
||||
const kindLabel = approval.kind === 'final-response' ? 'response' : 'tool';
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-2 rounded-md bg-zinc-800/40 px-2.5 py-1.5"
|
||||
key={approval.id}
|
||||
>
|
||||
<ShieldAlert className="size-3 shrink-0 text-zinc-600" />
|
||||
<span className="min-w-0 flex-1 truncate text-[11px] text-zinc-400">{approval.title}</span>
|
||||
<span className="shrink-0 rounded-full bg-zinc-800 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
{kindLabel}
|
||||
</span>
|
||||
{approval.toolName && (
|
||||
<span className="shrink-0 text-[10px] text-zinc-500">{approval.toolName}</span>
|
||||
)}
|
||||
{approval.agentName && (
|
||||
<span className="shrink-0 text-[10px] text-zinc-600">{approval.agentName}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── ChatPane ──────────────────────────────────────────────── */
|
||||
|
||||
interface ChatPaneProps {
|
||||
|
||||
@@ -756,6 +756,7 @@ function ToolbarButton({
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
aria-pressed={active}
|
||||
className={`flex size-7 items-center justify-center rounded transition ${
|
||||
active
|
||||
? 'bg-indigo-600/30 text-indigo-300'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Star, X } from 'lucide-react';
|
||||
|
||||
import type { PatternDefinition } from '@shared/domain/pattern';
|
||||
@@ -45,14 +45,23 @@ export function NewSessionModal({
|
||||
}
|
||||
}, [availablePatterns, patternId]);
|
||||
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [handleKeyDown]);
|
||||
|
||||
const canCreate = projectId && patternId;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="new-session-title">
|
||||
<div className="w-full max-w-md rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
|
||||
<h2 className="text-[13px] font-semibold text-zinc-100">New Session</h2>
|
||||
<h2 id="new-session-title" className="text-[13px] font-semibold text-zinc-100">New Session</h2>
|
||||
<button
|
||||
className="flex size-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
|
||||
onClick={onClose}
|
||||
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
type WorkspaceToolingSettings,
|
||||
} from '@shared/domain/tooling';
|
||||
|
||||
import { ToggleSwitch } from '@renderer/components/ui';
|
||||
import { addAgentNodeToGraph } from '@renderer/lib/patternGraph';
|
||||
import { PatternGraphCanvas } from './pattern-graph/PatternGraphCanvas';
|
||||
import { PatternGraphInspector } from './pattern-graph/PatternGraphInspector';
|
||||
@@ -485,24 +486,6 @@ export function PatternEditor({
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Toggle switch ─────────────────────────────────────────── */
|
||||
|
||||
function ToggleSwitch({ enabled }: { enabled: boolean }) {
|
||||
return (
|
||||
<span
|
||||
className={`relative inline-flex h-[18px] w-[32px] shrink-0 items-center rounded-full transition-colors ${
|
||||
enabled ? 'bg-indigo-500' : 'bg-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block size-[14px] rounded-full bg-white shadow-sm transition-transform ${
|
||||
enabled ? 'translate-x-[16px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Approval checkpoint row ───────────────────────────────── */
|
||||
|
||||
function ApprovalCheckpointRow({
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState, type HTMLAttributes, type ReactNode } from 'react';
|
||||
import { AlertCircle, ChevronLeft, ChevronRight, Code, Cpu, Info, Palette, Plus, Server, Trash, Workflow } from 'lucide-react';
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import { ChevronLeft, ChevronRight, Code, Cpu, Palette, Plus, Server, Workflow } from 'lucide-react';
|
||||
|
||||
import { CopilotStatusCard } from '@renderer/components/CopilotStatusCard';
|
||||
import { PatternEditor } from '@renderer/components/PatternEditor';
|
||||
import { LspProfileEditor } from '@renderer/components/settings/LspProfileEditor';
|
||||
import { McpServerEditor } from '@renderer/components/settings/McpServerEditor';
|
||||
import type { SidecarCapabilities } from '@shared/contracts/sidecar';
|
||||
import type { ModelDefinition } from '@shared/domain/models';
|
||||
import type { PatternDefinition } from '@shared/domain/pattern';
|
||||
@@ -13,10 +15,7 @@ import {
|
||||
type LspProfileDefinition,
|
||||
type McpServerDefinition,
|
||||
type WorkspaceToolingSettings,
|
||||
validateLspProfileDefinition,
|
||||
validateMcpServerDefinition,
|
||||
} from '@shared/domain/tooling';
|
||||
import { nowIso } from '@shared/utils/ids';
|
||||
|
||||
interface SettingsPanelProps {
|
||||
availableModels: ReadonlyArray<ModelDefinition>;
|
||||
@@ -492,221 +491,6 @@ function LspProfilesSection({
|
||||
);
|
||||
}
|
||||
|
||||
function McpServerEditor({
|
||||
server,
|
||||
onChange,
|
||||
onBack,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: {
|
||||
server: McpServerDefinition;
|
||||
onChange: (server: McpServerDefinition) => void;
|
||||
onBack: () => void;
|
||||
onSave: () => Promise<void>;
|
||||
onDelete?: () => Promise<void>;
|
||||
}) {
|
||||
const validationError = validateMcpServerDefinition(server);
|
||||
|
||||
return (
|
||||
<ToolingEditorShell
|
||||
disableSave={Boolean(validationError)}
|
||||
error={validationError}
|
||||
onBack={onBack}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
subtitle="Machine-wide server definition"
|
||||
title={server.name || 'Untitled MCP Server'}
|
||||
>
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
General
|
||||
</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField label="Name" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { name: value }))}
|
||||
value={server.name}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Transport" required>
|
||||
<SelectInput
|
||||
onChange={(value) => onChange(changeMcpTransport(server, value as McpServerDefinition['transport']))}
|
||||
options={[
|
||||
{ value: 'local', label: 'Local process' },
|
||||
{ value: 'http', label: 'HTTP' },
|
||||
{ value: 'sse', label: 'SSE' },
|
||||
]}
|
||||
value={server.transport}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
{server.transport === 'local' ? 'Process' : 'Endpoint'}
|
||||
</h4>
|
||||
{server.transport === 'local' ? (
|
||||
<>
|
||||
<FormField label="Command" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { command: value }))}
|
||||
placeholder="node"
|
||||
value={server.command}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Arguments">
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { args: splitMultiline(value) }))}
|
||||
placeholder="One argument per line"
|
||||
rows={3}
|
||||
value={joinMultiline(server.args)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Working directory">
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { cwd: value || undefined }))}
|
||||
placeholder="Optional — defaults to project root"
|
||||
value={server.cwd ?? ''}
|
||||
/>
|
||||
</FormField>
|
||||
</>
|
||||
) : (
|
||||
<FormField label="Server URL" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { url: value }))}
|
||||
placeholder="https://example.com/mcp"
|
||||
value={server.url}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Advanced
|
||||
</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField label="Allowed tools">
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { tools: splitTokens(value) }))}
|
||||
placeholder="* for all, or one per line"
|
||||
rows={3}
|
||||
value={joinMultiline(server.tools)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Timeout (ms)">
|
||||
<TextInput
|
||||
inputMode="numeric"
|
||||
onChange={(value) =>
|
||||
onChange(
|
||||
updateMcpServer(server, {
|
||||
timeoutMs: value.trim() ? Number(value) : undefined,
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="Optional"
|
||||
value={server.timeoutMs?.toString() ?? ''}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<InfoCallout>
|
||||
Keep secrets out of this form. Use commands or endpoints that authenticate through the OS or external tooling.
|
||||
</InfoCallout>
|
||||
</ToolingEditorShell>
|
||||
);
|
||||
}
|
||||
|
||||
function LspProfileEditor({
|
||||
profile,
|
||||
onChange,
|
||||
onBack,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: {
|
||||
profile: LspProfileDefinition;
|
||||
onChange: (profile: LspProfileDefinition) => void;
|
||||
onBack: () => void;
|
||||
onSave: () => Promise<void>;
|
||||
onDelete?: () => Promise<void>;
|
||||
}) {
|
||||
const validationError = validateLspProfileDefinition(profile);
|
||||
|
||||
return (
|
||||
<ToolingEditorShell
|
||||
disableSave={Boolean(validationError)}
|
||||
error={validationError}
|
||||
onBack={onBack}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
subtitle="Machine-wide language server definition"
|
||||
title={profile.name || 'Untitled LSP Profile'}
|
||||
>
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
General
|
||||
</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField label="Name" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { name: value }))}
|
||||
value={profile.name}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Language ID" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { languageId: value }))}
|
||||
placeholder="typescript"
|
||||
value={profile.languageId}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Server
|
||||
</h4>
|
||||
<FormField label="Command" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { command: value }))}
|
||||
placeholder="typescript-language-server"
|
||||
value={profile.command}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Arguments">
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { args: splitMultiline(value) }))}
|
||||
placeholder="One argument per line"
|
||||
rows={3}
|
||||
value={joinMultiline(profile.args)}
|
||||
/>
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
File matching
|
||||
</h4>
|
||||
<FormField label="File extensions" required>
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { fileExtensions: splitTokens(value) }))}
|
||||
placeholder={'.ts\n.tsx'}
|
||||
rows={3}
|
||||
value={joinMultiline(profile.fileExtensions)}
|
||||
/>
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<InfoCallout>
|
||||
Project root resolution comes from the active session's project, not from this definition.
|
||||
</InfoCallout>
|
||||
</ToolingEditorShell>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeader({
|
||||
title,
|
||||
description,
|
||||
@@ -778,249 +562,3 @@ function EmptyState({ children }: { children: ReactNode }) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolingEditorShell({
|
||||
title,
|
||||
subtitle,
|
||||
error,
|
||||
disableSave,
|
||||
onBack,
|
||||
onSave,
|
||||
onDelete,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
error?: string;
|
||||
disableSave: boolean;
|
||||
onBack: () => void;
|
||||
onSave: () => Promise<void>;
|
||||
onDelete?: () => Promise<void>;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
|
||||
onClick={onBack}
|
||||
type="button"
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="text-[13px] font-semibold text-zinc-100">{title}</h2>
|
||||
<p className="text-[12px] text-zinc-500">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="no-drag flex items-center gap-2">
|
||||
{onDelete && (
|
||||
<button
|
||||
className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
|
||||
onClick={() => void onDelete()}
|
||||
type="button"
|
||||
>
|
||||
<Trash className="size-3.5" />
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
disabled={disableSave}
|
||||
onClick={() => void onSave()}
|
||||
type="button"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">
|
||||
<div className="mx-auto max-w-2xl space-y-8">
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[13px] text-amber-300">
|
||||
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FormField({
|
||||
label,
|
||||
required,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
required?: boolean;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="mb-1.5 block text-[12px] font-medium text-zinc-400">
|
||||
{label}
|
||||
{required && <span className="ml-1 text-amber-400">*</span>}
|
||||
</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function TextInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
inputMode,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
|
||||
inputMode={inputMode}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TextareaInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
rows,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
rows: number;
|
||||
}) {
|
||||
return (
|
||||
<textarea
|
||||
className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
rows={rows}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectInput({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
value: string;
|
||||
options: Array<{ value: string; label: string }>;
|
||||
onChange: (value: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
value={value}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoCallout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-start gap-2.5 rounded-lg border border-zinc-800 bg-zinc-900/30 px-3 py-2.5 text-[12px] leading-relaxed text-zinc-500">
|
||||
<Info className="mt-0.5 size-3.5 shrink-0 text-zinc-600" />
|
||||
<span>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function updateMcpServer(
|
||||
server: McpServerDefinition,
|
||||
patch: Partial<McpServerDefinition>,
|
||||
): McpServerDefinition;
|
||||
function updateMcpServer<T extends McpServerDefinition>(server: T, patch: Partial<T>): T;
|
||||
function updateMcpServer<T extends McpServerDefinition>(server: T, patch: Partial<T>): T {
|
||||
return {
|
||||
...server,
|
||||
...patch,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
}
|
||||
|
||||
function changeMcpTransport(
|
||||
server: McpServerDefinition,
|
||||
transport: McpServerDefinition['transport'],
|
||||
): McpServerDefinition {
|
||||
if (transport === server.transport) {
|
||||
return server;
|
||||
}
|
||||
|
||||
if (transport === 'local') {
|
||||
return {
|
||||
id: server.id,
|
||||
name: server.name,
|
||||
transport: 'local',
|
||||
command: '',
|
||||
args: [],
|
||||
cwd: undefined,
|
||||
tools: server.tools,
|
||||
timeoutMs: server.timeoutMs,
|
||||
createdAt: server.createdAt,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
id: server.id,
|
||||
name: server.name,
|
||||
transport,
|
||||
url: server.transport === 'local' ? '' : server.url,
|
||||
tools: server.tools,
|
||||
timeoutMs: server.timeoutMs,
|
||||
createdAt: server.createdAt,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
}
|
||||
|
||||
function updateLspProfile(
|
||||
profile: LspProfileDefinition,
|
||||
patch: Partial<LspProfileDefinition>,
|
||||
): LspProfileDefinition {
|
||||
return {
|
||||
...profile,
|
||||
...patch,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
}
|
||||
|
||||
function splitMultiline(value: string): string[] {
|
||||
return value
|
||||
.split(/\r?\n/)
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
function splitTokens(value: string): string[] {
|
||||
return value
|
||||
.split(/[\r\n,]+/)
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
function joinMultiline(value: string[]): string {
|
||||
return value.join('\n');
|
||||
}
|
||||
|
||||
@@ -136,6 +136,7 @@ function ActionMenuItem({
|
||||
<button
|
||||
className="flex w-full items-center gap-2 px-3 py-1.5 text-[12px] text-zinc-300 transition hover:bg-zinc-800"
|
||||
onClick={onClick}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<Icon className="size-3.5" />
|
||||
@@ -214,7 +215,7 @@ function SessionItem({
|
||||
onClick={isRenaming ? undefined : onSelect}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' && !isRenaming) onSelect(); }}
|
||||
onKeyDown={(e) => { if ((e.key === 'Enter' || e.key === ' ') && !isRenaming) { e.preventDefault(); onSelect(); } }}
|
||||
>
|
||||
{/* Running/approval left accent bar */}
|
||||
{isRunning && !hasPendingApproval && (
|
||||
@@ -690,9 +691,10 @@ export function Sidebar({
|
||||
{/* Context menu overlay */}
|
||||
{menuState && menuSession && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={closeMenu} />
|
||||
<div className="fixed inset-0 z-40" onClick={closeMenu} onKeyDown={(e) => { if (e.key === 'Escape') closeMenu(); }} />
|
||||
<div
|
||||
className="fixed z-50 w-40 rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-xl"
|
||||
role="menu"
|
||||
style={{ top: menuState.top, left: menuState.left }}
|
||||
>
|
||||
<ActionMenuItem
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useState } from 'react';
|
||||
import { Bot, Check, ChevronDown, Loader2, ShieldAlert, ShieldCheck, X } from 'lucide-react';
|
||||
|
||||
import { MarkdownContent } from '@renderer/components/MarkdownContent';
|
||||
import type { ApprovalDecision, PendingApprovalRecord } from '@shared/domain/approval';
|
||||
|
||||
/* ── ApprovalBanner ────────────────────────────────────────── */
|
||||
|
||||
export function ApprovalBanner({
|
||||
approval,
|
||||
onResolve,
|
||||
isResolving,
|
||||
position,
|
||||
total,
|
||||
}: {
|
||||
approval: PendingApprovalRecord;
|
||||
onResolve: (decision: ApprovalDecision) => void;
|
||||
isResolving: boolean;
|
||||
position?: number;
|
||||
total?: number;
|
||||
}) {
|
||||
const kindLabel = approval.kind === 'final-response' ? 'Final response review' : 'Tool call approval';
|
||||
const hasMessages = approval.messages && approval.messages.length > 0;
|
||||
const showPosition = position !== undefined && total !== undefined && total > 1;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3" role="alert">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-2.5">
|
||||
<ShieldAlert className="mt-0.5 size-4 shrink-0 text-amber-400" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[13px] font-semibold text-amber-200">{approval.title}</span>
|
||||
<span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-400">
|
||||
{kindLabel}
|
||||
</span>
|
||||
{showPosition && (
|
||||
<span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[9px] font-semibold tabular-nums text-zinc-400">
|
||||
{position} of {total}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-zinc-400">
|
||||
{approval.agentName && <span>Agent: <span className="text-zinc-300">{approval.agentName}</span></span>}
|
||||
{approval.toolName && <span>Tool: <span className="text-zinc-300">{approval.toolName}</span></span>}
|
||||
{approval.permissionKind && <span>Permission: <span className="text-zinc-300">{approval.permissionKind}</span></span>}
|
||||
</div>
|
||||
|
||||
{approval.detail && (
|
||||
<p className="mt-1.5 text-[12px] leading-relaxed text-zinc-400">{approval.detail}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final-response message preview */}
|
||||
{hasMessages && (
|
||||
<div className="mt-3 space-y-2 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Pending messages — not yet published
|
||||
</p>
|
||||
{approval.messages!.map((message) => (
|
||||
<div className="mt-2" key={message.id}>
|
||||
<div className="mb-1 flex items-center gap-2 text-[11px] font-medium text-zinc-500">
|
||||
<Bot className="size-3" />
|
||||
<span>{message.authorName}</span>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800/60 bg-zinc-900/40 px-3 py-2 text-[13px] leading-relaxed text-zinc-300">
|
||||
<MarkdownContent content={message.content} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={isResolving}
|
||||
onClick={() => onResolve('approved')}
|
||||
type="button"
|
||||
>
|
||||
{isResolving ? <Loader2 className="size-3 animate-spin" /> : <Check className="size-3" />}
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3.5 py-1.5 text-[12px] font-medium text-zinc-300 transition hover:bg-zinc-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={isResolving}
|
||||
onClick={() => onResolve('rejected')}
|
||||
type="button"
|
||||
>
|
||||
<X className="size-3" />
|
||||
Reject
|
||||
</button>
|
||||
{showPosition && (
|
||||
<span className="ml-auto text-[10px] text-zinc-600">
|
||||
Next approval will appear after this one is resolved
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── QueuedApprovalsList ───────────────────────────────────── */
|
||||
|
||||
export function QueuedApprovalsList({ approvals }: { approvals: PendingApprovalRecord[] }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2">
|
||||
<button
|
||||
aria-expanded={expanded}
|
||||
className="flex w-full items-center gap-2 text-left"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
type="button"
|
||||
>
|
||||
<ShieldCheck className="size-3 text-zinc-500" />
|
||||
<span className="text-[11px] font-medium text-zinc-400">
|
||||
{approvals.length} queued approval{approvals.length === 1 ? '' : 's'}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={`ml-auto size-3 text-zinc-600 transition-transform ${expanded ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div className="mt-2 space-y-1.5 border-t border-zinc-800/60 pt-2">
|
||||
{approvals.map((approval) => {
|
||||
const kindLabel = approval.kind === 'final-response' ? 'response' : 'tool';
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-2 rounded-md bg-zinc-800/40 px-2.5 py-1.5"
|
||||
key={approval.id}
|
||||
>
|
||||
<ShieldAlert className="size-3 shrink-0 text-zinc-600" />
|
||||
<span className="min-w-0 flex-1 truncate text-[11px] text-zinc-400">{approval.title}</span>
|
||||
<span className="shrink-0 rounded-full bg-zinc-800 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
{kindLabel}
|
||||
</span>
|
||||
{approval.toolName && (
|
||||
<span className="shrink-0 text-[10px] text-zinc-500">{approval.toolName}</span>
|
||||
)}
|
||||
{approval.agentName && (
|
||||
<span className="shrink-0 text-[10px] text-zinc-600">{approval.agentName}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,408 @@
|
||||
import { useState } from 'react';
|
||||
import { ChevronDown, Sparkles } from 'lucide-react';
|
||||
|
||||
import { ProviderIcon } from '@renderer/components/ProviderIcons';
|
||||
import { PopoverToggleRow } from '@renderer/components/ui';
|
||||
import { useClickOutside } from '@renderer/hooks/useClickOutside';
|
||||
import type { ApprovalToolDefinition, ApprovalToolKind, LspProfileDefinition, McpServerDefinition, SessionToolingSelection } from '@shared/domain/tooling';
|
||||
import { findModel, inferProvider, providerMeta, type ModelDefinition } from '@shared/domain/models';
|
||||
import { reasoningEffortOptions, type ReasoningEffort } from '@shared/domain/pattern';
|
||||
import { RotateCcw, Server, ShieldCheck } from 'lucide-react';
|
||||
|
||||
/* ── Tier badge ────────────────────────────────────────────── */
|
||||
|
||||
function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
|
||||
if (!tier) return null;
|
||||
const styles = {
|
||||
premium: 'bg-amber-500/10 text-amber-400',
|
||||
standard: 'bg-zinc-700/50 text-zinc-500',
|
||||
fast: 'bg-emerald-500/10 text-emerald-400',
|
||||
};
|
||||
return (
|
||||
<span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
|
||||
{tier}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Helpers ────────────────────────────────────────────────── */
|
||||
|
||||
function toggleInArray(current: string[], id: string): string[] {
|
||||
return current.includes(id)
|
||||
? current.filter((currentId) => currentId !== id)
|
||||
: [...current, id];
|
||||
}
|
||||
|
||||
/* ── InlineModelPill ───────────────────────────────────────── */
|
||||
|
||||
export function InlineModelPill({
|
||||
value,
|
||||
models,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
value: string;
|
||||
models: ReadonlyArray<ModelDefinition>;
|
||||
onChange: (model: string) => void;
|
||||
disabled: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
|
||||
|
||||
const selected = findModel(value, models);
|
||||
const provider = selected?.provider ?? inferProvider(value);
|
||||
const displayName = selected?.name ?? value ?? 'Model';
|
||||
|
||||
const groupedModels = providerMeta
|
||||
.map((pg) => ({ ...pg, models: models.filter((m) => m.provider === pg.id) }))
|
||||
.filter((pg) => pg.models.length > 0);
|
||||
const otherModels = models.filter((m) => !m.provider);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
{provider && <ProviderIcon provider={provider} className="size-3" />}
|
||||
<span className="max-w-[140px] truncate">{displayName}</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
|
||||
{groupedModels.map((pg) => (
|
||||
<div key={pg.id}>
|
||||
<div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
|
||||
<ProviderIcon provider={pg.id} className="size-3.5" />
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
{pg.label}
|
||||
</span>
|
||||
</div>
|
||||
{pg.models.map((model) => (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
|
||||
model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
|
||||
}`}
|
||||
key={model.id}
|
||||
onClick={() => { onChange(model.id); setOpen(false); }}
|
||||
role="option"
|
||||
aria-selected={model.id === value}
|
||||
type="button"
|
||||
>
|
||||
<span className="flex-1">{model.name}</span>
|
||||
<TierBadge tier={model.tier} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{otherModels.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Other
|
||||
</div>
|
||||
{otherModels.map((model) => (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
|
||||
model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
|
||||
}`}
|
||||
key={model.id}
|
||||
onClick={() => { onChange(model.id); setOpen(false); }}
|
||||
role="option"
|
||||
aria-selected={model.id === value}
|
||||
type="button"
|
||||
>
|
||||
<span className="flex-1">{model.name}</span>
|
||||
<TierBadge tier={model.tier} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── InlineThinkingPill ────────────────────────────────────── */
|
||||
|
||||
export function InlineThinkingPill({
|
||||
value,
|
||||
supportedEfforts,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
value?: ReasoningEffort;
|
||||
supportedEfforts?: ReadonlyArray<ReasoningEffort>;
|
||||
onChange: (effort: ReasoningEffort) => void;
|
||||
disabled: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
|
||||
|
||||
const options = supportedEfforts
|
||||
? reasoningEffortOptions.filter((o) => supportedEfforts.includes(o.value))
|
||||
: [...reasoningEffortOptions];
|
||||
|
||||
if (supportedEfforts && supportedEfforts.length === 0) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-2 py-1 text-[12px] text-zinc-600">
|
||||
<Sparkles className="size-3" />
|
||||
N/A
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const currentLabel = options.find((o) => o.value === value)?.label ?? value ?? 'Thinking';
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<Sparkles className="size-3" />
|
||||
<span>{currentLabel}</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
|
||||
option.value === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
|
||||
}`}
|
||||
key={option.value}
|
||||
onClick={() => { onChange(option.value); setOpen(false); }}
|
||||
role="option"
|
||||
aria-selected={option.value === value}
|
||||
type="button"
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── InlineToolsPill ───────────────────────────────────────── */
|
||||
|
||||
export function InlineToolsPill({
|
||||
mcpServers,
|
||||
lspProfiles,
|
||||
selection,
|
||||
disabled,
|
||||
onToggle,
|
||||
}: {
|
||||
mcpServers: ReadonlyArray<McpServerDefinition>;
|
||||
lspProfiles: ReadonlyArray<LspProfileDefinition>;
|
||||
selection: SessionToolingSelection;
|
||||
disabled: boolean;
|
||||
onToggle: (selection: SessionToolingSelection) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
|
||||
|
||||
const enabledCount = selection.enabledMcpServerIds.length + selection.enabledLspProfileIds.length;
|
||||
const totalCount = mcpServers.length + lspProfiles.length;
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<Server className="size-3" />
|
||||
<span>{enabledCount}/{totalCount} tools</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
|
||||
{mcpServers.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
|
||||
MCP Servers
|
||||
</div>
|
||||
{mcpServers.map((server) => (
|
||||
<PopoverToggleRow
|
||||
detail={server.transport === 'local' ? server.command : server.url}
|
||||
enabled={selection.enabledMcpServerIds.includes(server.id)}
|
||||
key={server.id}
|
||||
label={server.name}
|
||||
onToggle={() =>
|
||||
onToggle({
|
||||
...selection,
|
||||
enabledMcpServerIds: toggleInArray(selection.enabledMcpServerIds, server.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{lspProfiles.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
|
||||
Language Servers
|
||||
</div>
|
||||
{lspProfiles.map((profile) => (
|
||||
<PopoverToggleRow
|
||||
detail={profile.command}
|
||||
enabled={selection.enabledLspProfileIds.includes(profile.id)}
|
||||
key={profile.id}
|
||||
label={profile.name}
|
||||
onToggle={() =>
|
||||
onToggle({
|
||||
...selection,
|
||||
enabledLspProfileIds: toggleInArray(selection.enabledLspProfileIds, profile.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── InlineApprovalPill ────────────────────────────────────── */
|
||||
|
||||
const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
|
||||
const approvalKindLabels: Record<ApprovalToolKind, string> = {
|
||||
builtin: 'Built-in',
|
||||
mcp: 'MCP Servers',
|
||||
lsp: 'Language Servers',
|
||||
mixed: 'Other',
|
||||
};
|
||||
|
||||
export function InlineApprovalPill({
|
||||
approvalTools,
|
||||
effectiveAutoApproved,
|
||||
isOverridden,
|
||||
disabled,
|
||||
onUpdate,
|
||||
}: {
|
||||
approvalTools: ApprovalToolDefinition[];
|
||||
effectiveAutoApproved: Set<string>;
|
||||
isOverridden: boolean;
|
||||
disabled: boolean;
|
||||
onUpdate: (settings: { autoApprovedToolNames?: string[] }) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
|
||||
|
||||
function toggleTool(toolId: string) {
|
||||
const next = new Set(effectiveAutoApproved);
|
||||
if (next.has(toolId)) {
|
||||
next.delete(toolId);
|
||||
} else {
|
||||
next.add(toolId);
|
||||
}
|
||||
onUpdate({ autoApprovedToolNames: [...next] });
|
||||
}
|
||||
|
||||
const groups = approvalKindOrder
|
||||
.map((kind) => ({ kind, tools: approvalTools.filter((t) => t.kind === kind) }))
|
||||
.filter((g) => g.tools.length > 0);
|
||||
const showHeaders = groups.length > 1;
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
|
||||
open
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: isOverridden
|
||||
? 'border-amber-500/30 bg-amber-500/5 text-amber-400 hover:border-amber-500/50'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<ShieldCheck className="size-3" />
|
||||
<span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span>
|
||||
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
<div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-80 w-72 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
|
||||
<div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-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' : '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"
|
||||
onClick={() => onUpdate({})}
|
||||
type="button"
|
||||
>
|
||||
<RotateCcw className="size-2.5" />
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="py-1">
|
||||
{groups.map((group, i) => (
|
||||
<div key={group.kind}>
|
||||
{showHeaders && (
|
||||
<div className={`px-3 pb-1 ${i > 0 ? 'pt-2' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-zinc-600`}>
|
||||
{approvalKindLabels[group.kind]}
|
||||
</div>
|
||||
)}
|
||||
{group.tools.map((tool) => {
|
||||
const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
|
||||
return (
|
||||
<PopoverToggleRow
|
||||
detail={detail}
|
||||
enabled={effectiveAutoApproved.has(tool.id)}
|
||||
key={tool.id}
|
||||
label={tool.label}
|
||||
onToggle={() => toggleTool(tool.id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export function ThinkingDots() {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5" aria-label="Thinking">
|
||||
<span className="thinking-dot size-2 rounded-full bg-zinc-500" />
|
||||
<span className="thinking-dot size-2 rounded-full bg-zinc-500" />
|
||||
<span className="thinking-dot size-2 rounded-full bg-zinc-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { FormField, InfoCallout, TextareaInput, TextInput } from '@renderer/components/ui';
|
||||
import { joinMultiline, splitMultiline, splitTokens, updateLspProfile } from '@renderer/lib/settingsHelpers';
|
||||
import { validateLspProfileDefinition, type LspProfileDefinition } from '@shared/domain/tooling';
|
||||
import { ToolingEditorShell } from './ToolingEditorShell';
|
||||
|
||||
export function LspProfileEditor({
|
||||
profile,
|
||||
onChange,
|
||||
onBack,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: {
|
||||
profile: LspProfileDefinition;
|
||||
onChange: (profile: LspProfileDefinition) => void;
|
||||
onBack: () => void;
|
||||
onSave: () => Promise<void>;
|
||||
onDelete?: () => Promise<void>;
|
||||
}) {
|
||||
const validationError = validateLspProfileDefinition(profile);
|
||||
|
||||
return (
|
||||
<ToolingEditorShell
|
||||
disableSave={Boolean(validationError)}
|
||||
error={validationError}
|
||||
onBack={onBack}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
subtitle="Machine-wide language server definition"
|
||||
title={profile.name || 'Untitled LSP Profile'}
|
||||
>
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
General
|
||||
</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField label="Name" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { name: value }))}
|
||||
value={profile.name}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Language ID" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { languageId: value }))}
|
||||
placeholder="typescript"
|
||||
value={profile.languageId}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Server
|
||||
</h4>
|
||||
<FormField label="Command" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { command: value }))}
|
||||
placeholder="typescript-language-server"
|
||||
value={profile.command}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Arguments">
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { args: splitMultiline(value) }))}
|
||||
placeholder="One argument per line"
|
||||
rows={3}
|
||||
value={joinMultiline(profile.args)}
|
||||
/>
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
File matching
|
||||
</h4>
|
||||
<FormField label="File extensions" required>
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateLspProfile(profile, { fileExtensions: splitTokens(value) }))}
|
||||
placeholder={'.ts\n.tsx'}
|
||||
rows={3}
|
||||
value={joinMultiline(profile.fileExtensions)}
|
||||
/>
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<InfoCallout>
|
||||
Project root resolution comes from the active session's project, not from this definition.
|
||||
</InfoCallout>
|
||||
</ToolingEditorShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { FormField, InfoCallout, SelectInput, TextareaInput, TextInput } from '@renderer/components/ui';
|
||||
import { changeMcpTransport, joinMultiline, splitMultiline, splitTokens, updateMcpServer } from '@renderer/lib/settingsHelpers';
|
||||
import { validateMcpServerDefinition, type McpServerDefinition } from '@shared/domain/tooling';
|
||||
import { ToolingEditorShell } from './ToolingEditorShell';
|
||||
|
||||
export function McpServerEditor({
|
||||
server,
|
||||
onChange,
|
||||
onBack,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: {
|
||||
server: McpServerDefinition;
|
||||
onChange: (server: McpServerDefinition) => void;
|
||||
onBack: () => void;
|
||||
onSave: () => Promise<void>;
|
||||
onDelete?: () => Promise<void>;
|
||||
}) {
|
||||
const validationError = validateMcpServerDefinition(server);
|
||||
|
||||
return (
|
||||
<ToolingEditorShell
|
||||
disableSave={Boolean(validationError)}
|
||||
error={validationError}
|
||||
onBack={onBack}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
subtitle="Machine-wide server definition"
|
||||
title={server.name || 'Untitled MCP Server'}
|
||||
>
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
General
|
||||
</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField label="Name" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { name: value }))}
|
||||
value={server.name}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Transport" required>
|
||||
<SelectInput
|
||||
onChange={(value) => onChange(changeMcpTransport(server, value as McpServerDefinition['transport']))}
|
||||
options={[
|
||||
{ value: 'local', label: 'Local process' },
|
||||
{ value: 'http', label: 'HTTP' },
|
||||
{ value: 'sse', label: 'SSE' },
|
||||
]}
|
||||
value={server.transport}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
{server.transport === 'local' ? 'Process' : 'Endpoint'}
|
||||
</h4>
|
||||
{server.transport === 'local' ? (
|
||||
<>
|
||||
<FormField label="Command" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { command: value }))}
|
||||
placeholder="node"
|
||||
value={server.command}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Arguments">
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { args: splitMultiline(value) }))}
|
||||
placeholder="One argument per line"
|
||||
rows={3}
|
||||
value={joinMultiline(server.args)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Working directory">
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { cwd: value || undefined }))}
|
||||
placeholder="Optional — defaults to project root"
|
||||
value={server.cwd ?? ''}
|
||||
/>
|
||||
</FormField>
|
||||
</>
|
||||
) : (
|
||||
<FormField label="Server URL" required>
|
||||
<TextInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { url: value }))}
|
||||
placeholder="https://example.com/mcp"
|
||||
value={server.url}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Advanced
|
||||
</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField label="Allowed tools">
|
||||
<TextareaInput
|
||||
onChange={(value) => onChange(updateMcpServer(server, { tools: splitTokens(value) }))}
|
||||
placeholder="* for all, or one per line"
|
||||
rows={3}
|
||||
value={joinMultiline(server.tools)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Timeout (ms)">
|
||||
<TextInput
|
||||
inputMode="numeric"
|
||||
onChange={(value) =>
|
||||
onChange(
|
||||
updateMcpServer(server, {
|
||||
timeoutMs: value.trim() ? Number(value) : undefined,
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="Optional"
|
||||
value={server.timeoutMs?.toString() ?? ''}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<InfoCallout>
|
||||
Keep secrets out of this form. Use commands or endpoints that authenticate through the OS or external tooling.
|
||||
</InfoCallout>
|
||||
</ToolingEditorShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { AlertCircle, ChevronLeft, Trash } from 'lucide-react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export function ToolingEditorShell({
|
||||
title,
|
||||
subtitle,
|
||||
error,
|
||||
disableSave,
|
||||
onBack,
|
||||
onSave,
|
||||
onDelete,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
error?: string;
|
||||
disableSave: boolean;
|
||||
onBack: () => void;
|
||||
onSave: () => Promise<void>;
|
||||
onDelete?: () => Promise<void>;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
|
||||
onClick={onBack}
|
||||
type="button"
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="text-[13px] font-semibold text-zinc-100">{title}</h2>
|
||||
<p className="text-[12px] text-zinc-500">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="no-drag flex items-center gap-2">
|
||||
{onDelete && (
|
||||
<button
|
||||
className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
|
||||
onClick={() => void onDelete()}
|
||||
type="button"
|
||||
>
|
||||
<Trash className="size-3.5" />
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
disabled={disableSave}
|
||||
onClick={() => void onSave()}
|
||||
type="button"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">
|
||||
<div className="mx-auto max-w-2xl space-y-8">
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[13px] text-amber-300">
|
||||
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export function FormField({
|
||||
label,
|
||||
required,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
required?: boolean;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="mb-1.5 block text-[12px] font-medium text-zinc-400">
|
||||
{label}
|
||||
{required && <span className="ml-1 text-amber-400">*</span>}
|
||||
</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Info } from 'lucide-react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export function InfoCallout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-start gap-2.5 rounded-lg border border-zinc-800 bg-zinc-900/30 px-3 py-2.5 text-[12px] leading-relaxed text-zinc-500">
|
||||
<Info className="mt-0.5 size-3.5 shrink-0 text-zinc-600" />
|
||||
<span>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ToggleSwitch } from './ToggleSwitch';
|
||||
|
||||
export interface PopoverToggleRowProps {
|
||||
label: string;
|
||||
detail?: string;
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export function PopoverToggleRow({ label, detail, enabled, onToggle }: PopoverToggleRowProps) {
|
||||
return (
|
||||
<button
|
||||
className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition hover:bg-zinc-800"
|
||||
onClick={onToggle}
|
||||
type="button"
|
||||
>
|
||||
<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} size="sm" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
export function SelectInput({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
value: string;
|
||||
options: Array<{ value: string; label: string }>;
|
||||
onChange: (value: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
value={value}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { HTMLAttributes } from 'react';
|
||||
|
||||
export function TextInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
inputMode,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
|
||||
inputMode={inputMode}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export function TextareaInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
rows,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
rows: number;
|
||||
}) {
|
||||
return (
|
||||
<textarea
|
||||
className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
rows={rows}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
export interface ToggleSwitchProps {
|
||||
enabled: boolean;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
export function ToggleSwitch({ enabled, size = 'md' }: ToggleSwitchProps) {
|
||||
const trackSize = size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18px] w-[32px]';
|
||||
const thumbSize = size === 'sm' ? 'size-[10px]' : 'size-[14px]';
|
||||
const translateOn = size === 'sm' ? 'translate-x-[12px]' : 'translate-x-[16px]';
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`relative inline-flex ${trackSize} shrink-0 items-center rounded-full transition-colors ${
|
||||
enabled ? 'bg-indigo-500' : 'bg-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block ${thumbSize} rounded-full bg-white shadow-sm transition-transform ${
|
||||
enabled ? translateOn : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export type { ToggleSwitchProps } from './ToggleSwitch';
|
||||
export { ToggleSwitch } from './ToggleSwitch';
|
||||
export type { PopoverToggleRowProps } from './PopoverToggleRow';
|
||||
export { PopoverToggleRow } from './PopoverToggleRow';
|
||||
export { FormField } from './FormField';
|
||||
export { TextInput } from './TextInput';
|
||||
export { TextareaInput } from './TextareaInput';
|
||||
export { SelectInput } from './SelectInput';
|
||||
export { InfoCallout } from './InfoCallout';
|
||||
@@ -0,0 +1,58 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { AppearanceTheme } from '@shared/domain/tooling';
|
||||
|
||||
/** Resolves the effective theme and applies it to the document root. */
|
||||
export function useTheme(themeSetting: AppearanceTheme) {
|
||||
useEffect(() => {
|
||||
function resolveEffective(pref: AppearanceTheme): 'dark' | 'light' {
|
||||
if (pref === 'dark' || pref === 'light') return pref;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const apply = () => {
|
||||
document.documentElement.dataset.theme = resolveEffective(themeSetting);
|
||||
};
|
||||
|
||||
apply();
|
||||
|
||||
if (themeSetting === 'system') {
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
mq.addEventListener('change', apply);
|
||||
return () => mq.removeEventListener('change', apply);
|
||||
}
|
||||
}, [themeSetting]);
|
||||
}
|
||||
|
||||
/** Manages sidecar capabilities loading and refresh. */
|
||||
export function useSidecarCapabilities(api: {
|
||||
describeSidecarCapabilities: () => Promise<import('@shared/contracts/sidecar').SidecarCapabilities>;
|
||||
refreshSidecarCapabilities: () => Promise<import('@shared/contracts/sidecar').SidecarCapabilities>;
|
||||
}) {
|
||||
const [capabilities, setCapabilities] = useState<import('@shared/contracts/sidecar').SidecarCapabilities>();
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
|
||||
void api
|
||||
.describeSidecarCapabilities()
|
||||
.then((c) => !disposed && setCapabilities(c))
|
||||
.catch((e) => {
|
||||
if (!disposed) console.warn('Failed to load sidecar capabilities', e);
|
||||
});
|
||||
|
||||
return () => { disposed = true; };
|
||||
}, [api]);
|
||||
|
||||
async function refresh() {
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
const c = await api.refreshSidecarCapabilities();
|
||||
setCapabilities(c);
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
return { capabilities, isRefreshing, refresh };
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useEffect, useRef, type RefObject } from 'react';
|
||||
|
||||
/**
|
||||
* Calls `onClose` when a click lands outside the referenced element.
|
||||
* Only attaches the listener while `active` is true.
|
||||
*/
|
||||
export function useClickOutside<T extends HTMLElement>(
|
||||
onClose: () => void,
|
||||
active: boolean,
|
||||
): RefObject<T | null> {
|
||||
const ref = useRef<T | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) return;
|
||||
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [active, onClose]);
|
||||
|
||||
return ref;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { McpServerDefinition, LspProfileDefinition } from '@shared/domain/tooling';
|
||||
import { nowIso } from '@shared/utils/ids';
|
||||
|
||||
export function updateMcpServer<T extends McpServerDefinition>(
|
||||
server: T,
|
||||
patch: Partial<T>,
|
||||
): T {
|
||||
return { ...server, ...patch, updatedAt: nowIso() } as T;
|
||||
}
|
||||
|
||||
export function changeMcpTransport(
|
||||
server: McpServerDefinition,
|
||||
transport: McpServerDefinition['transport'],
|
||||
): McpServerDefinition {
|
||||
if (transport === server.transport) return server;
|
||||
|
||||
if (transport === 'local') {
|
||||
return {
|
||||
id: server.id,
|
||||
name: server.name,
|
||||
transport: 'local',
|
||||
command: '',
|
||||
args: [],
|
||||
cwd: undefined,
|
||||
tools: server.tools,
|
||||
timeoutMs: server.timeoutMs,
|
||||
createdAt: server.createdAt,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
id: server.id,
|
||||
name: server.name,
|
||||
transport,
|
||||
url: server.transport === 'local' ? '' : server.url,
|
||||
tools: server.tools,
|
||||
timeoutMs: server.timeoutMs,
|
||||
createdAt: server.createdAt,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
}
|
||||
|
||||
export function updateLspProfile(
|
||||
profile: LspProfileDefinition,
|
||||
patch: Partial<LspProfileDefinition>,
|
||||
): LspProfileDefinition {
|
||||
return { ...profile, ...patch, updatedAt: nowIso() };
|
||||
}
|
||||
|
||||
export function splitMultiline(value: string): string[] {
|
||||
return value
|
||||
.split(/\r?\n/)
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
export function splitTokens(value: string): string[] {
|
||||
return value
|
||||
.split(/[\r\n,]+/)
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
export function joinMultiline(value: string[]): string {
|
||||
return value.join('\n');
|
||||
}
|
||||
Reference in New Issue
Block a user