681 lines
25 KiB
TypeScript
681 lines
25 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
|
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
|
|
import { useTheme } from '@renderer/hooks/useTheme';
|
|
import { useStore } from '@renderer/store';
|
|
import { selectResolvedMembersForTeamName } from '@renderer/store/slices/teamSlice';
|
|
import { shortenDisplayPath } from '@renderer/utils/pathDisplay';
|
|
import { highlightLines } from '@renderer/utils/syntaxHighlighter';
|
|
import { AlertTriangle, FileText, MessageCircleQuestion, Search, Terminal } from 'lucide-react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
import {
|
|
ToolApprovalSettingsContent,
|
|
ToolApprovalSettingsToggle,
|
|
} from './dialogs/ToolApprovalSettingsPanel';
|
|
import { FileIcon } from './editor/FileIcon';
|
|
import { MemberBadge } from './MemberBadge';
|
|
import { ToolApprovalDiffPreview } from './ToolApprovalDiffPreview';
|
|
|
|
import type { ToolApprovalRequest } from '@shared/types';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Tool icon mapping
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/** Human-readable tool name for the approval header */
|
|
function getToolDisplayName(toolName: string): string {
|
|
switch (toolName) {
|
|
case 'AskUserQuestion':
|
|
return 'Question';
|
|
case 'Bash':
|
|
return 'Terminal';
|
|
case 'Read':
|
|
return 'Read File';
|
|
case 'Edit':
|
|
return 'Edit File';
|
|
case 'Write':
|
|
return 'Write File';
|
|
case 'NotebookEdit':
|
|
return 'Edit Notebook';
|
|
case 'Grep':
|
|
return 'Search Content';
|
|
case 'Glob':
|
|
return 'Find Files';
|
|
default:
|
|
return toolName;
|
|
}
|
|
}
|
|
|
|
function getToolIcon(toolName: string): React.JSX.Element {
|
|
const cls = 'size-4 shrink-0';
|
|
switch (toolName) {
|
|
case 'Bash':
|
|
return <Terminal className={cls} />;
|
|
case 'Read':
|
|
case 'Edit':
|
|
case 'Write':
|
|
case 'NotebookEdit':
|
|
return <FileText className={cls} />;
|
|
case 'Grep':
|
|
case 'Glob':
|
|
return <Search className={cls} />;
|
|
case 'AskUserQuestion':
|
|
return <MessageCircleQuestion className={cls} />;
|
|
default:
|
|
return <Terminal className={cls} />;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Smart input preview
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function renderToolInput(
|
|
toolName: string,
|
|
input: Record<string, unknown>,
|
|
projectPath?: string
|
|
): string {
|
|
switch (toolName) {
|
|
case 'Bash':
|
|
return typeof input.command === 'string' ? input.command : JSON.stringify(input, null, 2);
|
|
case 'Edit':
|
|
case 'Read':
|
|
case 'Write':
|
|
case 'NotebookEdit': {
|
|
const fp = typeof input.file_path === 'string' ? input.file_path : null;
|
|
if (!fp) return JSON.stringify(input, null, 2);
|
|
return projectPath ? shortenDisplayPath(fp, projectPath, 200) : fp;
|
|
}
|
|
case 'Grep':
|
|
case 'Glob':
|
|
return typeof input.pattern === 'string' ? input.pattern : JSON.stringify(input, null, 2);
|
|
default:
|
|
return JSON.stringify(input, null, 2);
|
|
}
|
|
}
|
|
|
|
/** Map tool name to a virtual filename for syntax highlighting. */
|
|
function getToolInputFileName(toolName: string, input: Record<string, unknown>): string {
|
|
switch (toolName) {
|
|
case 'Bash':
|
|
return 'command.sh';
|
|
case 'Edit':
|
|
case 'Read':
|
|
case 'Write':
|
|
case 'NotebookEdit':
|
|
return typeof input.file_path === 'string' ? input.file_path : 'input.json';
|
|
case 'Grep':
|
|
case 'Glob':
|
|
return 'pattern.txt';
|
|
default:
|
|
return 'input.json';
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Elapsed timer hook
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function useElapsed(receivedAt: string): number {
|
|
const [elapsed, setElapsed] = useState(() =>
|
|
Math.max(0, Math.floor((Date.now() - new Date(receivedAt).getTime()) / 1000))
|
|
);
|
|
|
|
useEffect(() => {
|
|
const computeElapsed = (): number =>
|
|
Math.max(0, Math.floor((Date.now() - new Date(receivedAt).getTime()) / 1000));
|
|
queueMicrotask(() => setElapsed(computeElapsed()));
|
|
const id = setInterval(() => {
|
|
setElapsed(computeElapsed());
|
|
}, 1000);
|
|
return () => clearInterval(id);
|
|
}, [receivedAt]);
|
|
|
|
return elapsed;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/** Max time (ms) to wait for the IPC before considering it stuck */
|
|
const RESPOND_TIMEOUT_MS = 10_000;
|
|
|
|
export const ToolApprovalSheet: React.FC = () => {
|
|
const { t } = useAppTranslation('team');
|
|
const {
|
|
pendingApprovals,
|
|
respondToToolApproval,
|
|
updateToolApprovalSettings,
|
|
teams,
|
|
selectedTeamName,
|
|
selectedTeamData,
|
|
selectedTeamMembers,
|
|
} = useStore(
|
|
useShallow((s) => ({
|
|
pendingApprovals: s.pendingApprovals,
|
|
respondToToolApproval: s.respondToToolApproval,
|
|
updateToolApprovalSettings: s.updateToolApprovalSettings,
|
|
teams: s.teams,
|
|
selectedTeamName: s.selectedTeamName,
|
|
selectedTeamData: s.selectedTeamData,
|
|
selectedTeamMembers: selectResolvedMembersForTeamName(s, s.selectedTeamName),
|
|
}))
|
|
);
|
|
const { isLight } = useTheme();
|
|
|
|
const current: ToolApprovalRequest | undefined = pendingApprovals[0];
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [disabled, setDisabled] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [diffExpanded, setDiffExpanded] = useState(false);
|
|
const [settingsExpanded, setSettingsExpanded] = useState(false);
|
|
const [selectedOptions, setSelectedOptions] = useState<Set<string>>(new Set());
|
|
|
|
// Clear error + selection when current approval changes
|
|
useEffect(() => {
|
|
setError(null);
|
|
setSelectedOptions(new Set());
|
|
}, [current?.requestId]);
|
|
|
|
const handleRespond = useCallback(
|
|
(allow: boolean) => {
|
|
if (!current || disabled) return;
|
|
setDisabled(true);
|
|
setError(null);
|
|
|
|
// For AskUserQuestion, build per-question answers from selected options
|
|
// Key format in selectedOptions: "qi:label" — parse question index to map correctly
|
|
const answersMessage =
|
|
allow && current.toolName === 'AskUserQuestion' && selectedOptions.size > 0
|
|
? (() => {
|
|
const questions = Array.isArray(current.toolInput.questions)
|
|
? (current.toolInput.questions as { question?: string }[])
|
|
: [];
|
|
const answersByQuestion: Record<string, string> = {};
|
|
for (const key of selectedOptions) {
|
|
const colonIdx = key.indexOf(':');
|
|
if (colonIdx < 0) continue;
|
|
const qi = parseInt(key.slice(0, colonIdx), 10);
|
|
const label = key.slice(colonIdx + 1);
|
|
const questionText = questions[qi]?.question ?? `Question ${qi + 1}`;
|
|
const existing = answersByQuestion[questionText];
|
|
answersByQuestion[questionText] = existing ? `${existing}, ${label}` : label;
|
|
}
|
|
return JSON.stringify(answersByQuestion);
|
|
})()
|
|
: undefined;
|
|
|
|
// Safety timeout — if IPC hangs (e.g. stdin.write callback never fires),
|
|
// re-enable the button so the user isn't stuck forever.
|
|
const safetyTimer = setTimeout(() => {
|
|
setDisabled(false);
|
|
setError('Response timed out — process may be unresponsive. Try again or stop the team.');
|
|
}, RESPOND_TIMEOUT_MS);
|
|
|
|
respondToToolApproval(
|
|
current.teamName,
|
|
current.runId,
|
|
current.requestId,
|
|
allow,
|
|
answersMessage
|
|
)
|
|
.then(() => {
|
|
clearTimeout(safetyTimer);
|
|
// Small delay before re-enabling to prevent accidental double-clicks
|
|
setTimeout(() => setDisabled(false), 200);
|
|
})
|
|
.catch((err: unknown) => {
|
|
clearTimeout(safetyTimer);
|
|
const msg = err instanceof Error ? err.message : String(err);
|
|
setError(msg);
|
|
setDisabled(false);
|
|
});
|
|
},
|
|
[current, disabled, respondToToolApproval, selectedOptions]
|
|
);
|
|
|
|
const isAskQuestion = current?.toolName === 'AskUserQuestion';
|
|
const hasSelection = selectedOptions.size > 0;
|
|
|
|
const handleOptionSelect = useCallback((label: string, multiSelect: boolean) => {
|
|
setSelectedOptions((prev) => {
|
|
// For single-select: clear all options from the SAME question (same prefix)
|
|
// Key format: "qi:label" where qi is the question index
|
|
const prefix = label.split(':')[0] + ':';
|
|
const next = multiSelect
|
|
? new Set(prev)
|
|
: new Set(Array.from(prev).filter((k) => !k.startsWith(prefix)));
|
|
if (next.has(label)) {
|
|
next.delete(label);
|
|
} else {
|
|
next.add(label);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent): void => {
|
|
const tag = document.activeElement?.tagName;
|
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
|
|
if (e.key === 'Enter') {
|
|
if (isAskQuestion && !hasSelection) return;
|
|
e.preventDefault();
|
|
handleRespond(true);
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
handleRespond(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [handleRespond, isAskQuestion, hasSelection]);
|
|
|
|
// Resolve teammate color for MemberBadge (when source !== 'lead')
|
|
const sourceColor = useMemo(() => {
|
|
if (!current || current.source === 'lead') return undefined;
|
|
const member = selectedTeamMembers.find((m) => m.name === current.source);
|
|
return member?.color;
|
|
}, [current, selectedTeamMembers]);
|
|
|
|
if (!current) return null;
|
|
|
|
const teamSummary = teams.find((t) => t.teamName === current.teamName);
|
|
const colorName = current.teamColor ?? teamSummary?.color ?? current.teamName;
|
|
const teamColor = getTeamColorSet(colorName);
|
|
const displayName = current.teamDisplayName ?? teamSummary?.displayName ?? current.teamName;
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop overlay */}
|
|
<div className="fixed inset-0 z-[54] bg-black/40 duration-200 animate-in fade-in" />
|
|
|
|
<div
|
|
ref={containerRef}
|
|
className={`fixed bottom-4 left-1/2 z-[55] w-full -translate-x-1/2 rounded-lg border shadow-xl outline-none transition-all duration-200 animate-in fade-in slide-in-from-bottom-4 ${diffExpanded ? 'max-w-screen-sm' : 'max-w-[480px]'}`}
|
|
style={{
|
|
backgroundColor: 'var(--color-surface-overlay)',
|
|
borderColor: 'var(--color-border-emphasis)',
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<div
|
|
className="flex items-center justify-between border-b px-4 py-2.5"
|
|
style={{ borderColor: 'var(--color-border)' }}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{current.source !== 'lead' && (
|
|
<MemberBadge name={current.source} color={sourceColor} size="xs" disableHoverCard />
|
|
)}
|
|
{getToolIcon(current.toolName)}
|
|
<span className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
|
|
{getToolDisplayName(current.toolName)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2.5">
|
|
{selectedTeamName !== current.teamName && (
|
|
<span
|
|
className="rounded-full px-2 py-0.5 text-[10px] font-medium"
|
|
style={{
|
|
backgroundColor: getThemedBadge(teamColor, isLight),
|
|
color: teamColor.text,
|
|
border: `1px solid ${teamColor.border}`,
|
|
}}
|
|
>
|
|
{displayName}
|
|
</span>
|
|
)}
|
|
<ElapsedDisplay receivedAt={current.receivedAt} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tool input preview (syntax-highlighted) */}
|
|
<ToolInputPreview
|
|
toolName={current.toolName}
|
|
toolInput={current.toolInput}
|
|
projectPath={selectedTeamData?.config?.projectPath}
|
|
selectedOptions={isAskQuestion ? selectedOptions : undefined}
|
|
onOptionSelect={isAskQuestion ? handleOptionSelect : undefined}
|
|
/>
|
|
|
|
{/* Diff preview (Write/Edit/NotebookEdit only) */}
|
|
<ToolApprovalDiffPreview
|
|
toolName={current.toolName}
|
|
toolInput={current.toolInput}
|
|
requestId={current.requestId}
|
|
onExpandedChange={setDiffExpanded}
|
|
/>
|
|
|
|
{/* Error feedback */}
|
|
{error && (
|
|
<div
|
|
className="mx-4 mb-1 flex items-start gap-2 rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
backgroundColor: 'rgba(239, 68, 68, 0.08)',
|
|
borderColor: 'rgba(239, 68, 68, 0.25)',
|
|
color: 'rgb(248, 113, 113)',
|
|
}}
|
|
>
|
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span className="break-words">{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div
|
|
className="flex items-center justify-between border-t px-4 py-2.5"
|
|
style={{ borderColor: 'var(--color-border)' }}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={disabled || (isAskQuestion && !hasSelection)}
|
|
onClick={() => handleRespond(true)}
|
|
className="rounded-md px-3.5 py-1.5 text-xs font-medium text-white transition-colors disabled:opacity-50"
|
|
style={{
|
|
backgroundColor:
|
|
isAskQuestion && !hasSelection
|
|
? 'var(--color-surface-raised)'
|
|
: 'rgb(5, 150, 105)',
|
|
color: isAskQuestion && !hasSelection ? 'var(--color-text-muted)' : undefined,
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (!disabled && !(isAskQuestion && !hasSelection))
|
|
Object.assign(e.currentTarget.style, { backgroundColor: 'rgb(16, 185, 129)' });
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
Object.assign(e.currentTarget.style, {
|
|
backgroundColor:
|
|
isAskQuestion && !hasSelection
|
|
? 'var(--color-surface-raised)'
|
|
: 'rgb(5, 150, 105)',
|
|
});
|
|
}}
|
|
>
|
|
{isAskQuestion ? t('toolApproval.submit') : t('toolApproval.allow')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => handleRespond(false)}
|
|
className="rounded-md border px-3.5 py-1.5 text-xs font-medium transition-colors disabled:opacity-50"
|
|
style={{
|
|
borderColor: 'rgba(239, 68, 68, 0.5)',
|
|
color: 'rgb(248, 113, 113)',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (!disabled)
|
|
Object.assign(e.currentTarget.style, {
|
|
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
|
});
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
Object.assign(e.currentTarget.style, { backgroundColor: 'transparent' });
|
|
}}
|
|
>
|
|
{t('toolApproval.deny')}
|
|
</button>
|
|
|
|
<div className="mx-1 h-4 w-px" style={{ backgroundColor: 'var(--color-border)' }} />
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
void updateToolApprovalSettings({ autoAllowAll: true }, current.teamName)
|
|
}
|
|
className="rounded-md border px-3.5 py-1.5 text-xs font-medium transition-colors"
|
|
style={{
|
|
color: 'var(--color-text-muted)',
|
|
borderColor: 'var(--color-border-emphasis)',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
Object.assign(e.currentTarget.style, {
|
|
color: 'var(--color-text-secondary)',
|
|
backgroundColor: 'var(--color-surface-raised)',
|
|
});
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
Object.assign(e.currentTarget.style, {
|
|
color: 'var(--color-text-muted)',
|
|
backgroundColor: 'transparent',
|
|
});
|
|
}}
|
|
>
|
|
{t('toolApproval.allowAll')}
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{pendingApprovals.length > 1 && (
|
|
<span className="text-[11px] text-[var(--color-text-muted)]">
|
|
{t('toolApproval.pendingCount', { count: pendingApprovals.length - 1 })}
|
|
</span>
|
|
)}
|
|
<ToolApprovalSettingsToggle
|
|
expanded={settingsExpanded}
|
|
onToggle={() => setSettingsExpanded((v) => !v)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Settings expanded content — below actions row */}
|
|
<ToolApprovalSettingsContent expanded={settingsExpanded} teamName={current.teamName} />
|
|
|
|
{/* Timeout progress bar */}
|
|
<TimeoutProgress receivedAt={current.receivedAt} />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Syntax-highlighted tool input preview
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const FILE_TOOLS = new Set(['Edit', 'Read', 'Write', 'NotebookEdit']);
|
|
|
|
const ToolInputPreview = ({
|
|
toolName,
|
|
toolInput,
|
|
projectPath,
|
|
selectedOptions,
|
|
onOptionSelect,
|
|
}: {
|
|
toolName: string;
|
|
toolInput: Record<string, unknown>;
|
|
projectPath?: string;
|
|
selectedOptions?: Set<string>;
|
|
onOptionSelect?: (label: string, multiSelect: boolean) => void;
|
|
}): React.JSX.Element => {
|
|
const text = renderToolInput(toolName, toolInput, projectPath);
|
|
const fileName = getToolInputFileName(toolName, toolInput);
|
|
const lines = useMemo(() => highlightLines(text, fileName), [text, fileName]);
|
|
const rawFilePath = typeof toolInput.file_path === 'string' ? toolInput.file_path : null;
|
|
const isFileTool = FILE_TOOLS.has(toolName) && rawFilePath;
|
|
|
|
// AskUserQuestion: render questions with options as readable UI
|
|
if (toolName === 'AskUserQuestion' && Array.isArray(toolInput.questions)) {
|
|
const questions = toolInput.questions as {
|
|
question?: string;
|
|
header?: string;
|
|
options?: { label?: string; description?: string }[];
|
|
multiSelect?: boolean;
|
|
}[];
|
|
return (
|
|
<div className="space-y-3 px-4 py-2.5">
|
|
{questions.map((q, qi) => (
|
|
<div
|
|
key={qi}
|
|
className="rounded-md border p-3"
|
|
style={{
|
|
backgroundColor: 'var(--color-surface)',
|
|
borderColor: 'var(--color-border)',
|
|
}}
|
|
>
|
|
{q.header && (
|
|
<span
|
|
className="mb-1.5 inline-block rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide"
|
|
style={{
|
|
backgroundColor: 'var(--color-surface-raised)',
|
|
color: 'var(--color-text-muted)',
|
|
}}
|
|
>
|
|
{q.header}
|
|
</span>
|
|
)}
|
|
{q.question && (
|
|
<p className="mb-2 text-xs font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{q.question}
|
|
</p>
|
|
)}
|
|
{Array.isArray(q.options) && (
|
|
<div className="space-y-1.5">
|
|
{q.options.map((opt, oi) => {
|
|
const optKey = `${qi}:${opt.label ?? `opt-${oi}`}`;
|
|
const isSelected = selectedOptions?.has(optKey) ?? false;
|
|
return (
|
|
<button
|
|
key={oi}
|
|
type="button"
|
|
onClick={() => onOptionSelect?.(optKey, q.multiSelect ?? false)}
|
|
className="flex w-full items-start gap-2 rounded px-2 py-1.5 text-left transition-colors"
|
|
style={{
|
|
backgroundColor: isSelected
|
|
? 'rgba(5, 150, 105, 0.15)'
|
|
: 'var(--color-surface-raised)',
|
|
border: isSelected
|
|
? '1px solid rgba(5, 150, 105, 0.4)'
|
|
: '1px solid transparent',
|
|
}}
|
|
>
|
|
<span
|
|
className="mt-0.5 text-[10px]"
|
|
style={{
|
|
color: isSelected ? 'rgb(52, 211, 153)' : 'var(--color-text-muted)',
|
|
}}
|
|
>
|
|
{q.multiSelect ? (isSelected ? '☑' : '☐') : isSelected ? '◉' : '○'}
|
|
</span>
|
|
<div className="min-w-0">
|
|
<span
|
|
className="text-xs font-medium"
|
|
style={{ color: isSelected ? 'rgb(52, 211, 153)' : 'var(--color-text)' }}
|
|
>
|
|
{opt.label ?? `Option ${oi + 1}`}
|
|
</span>
|
|
{opt.description && (
|
|
<p
|
|
className="mt-0.5 text-[10px]"
|
|
style={{ color: 'var(--color-text-muted)' }}
|
|
>
|
|
{opt.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-2.5">
|
|
<div
|
|
className="custom-scrollbar max-h-[120px] overflow-auto rounded-md border p-2 font-mono text-xs"
|
|
style={{
|
|
backgroundColor: 'var(--color-surface)',
|
|
borderColor: 'var(--color-border)',
|
|
color: 'var(--color-text-secondary)',
|
|
}}
|
|
>
|
|
{isFileTool ? (
|
|
<div className="flex items-center gap-1.5">
|
|
<FileIcon fileName={rawFilePath} className="size-3.5 shrink-0" />
|
|
<span className="break-all">{text}</span>
|
|
</div>
|
|
) : (
|
|
/* highlightLines uses hljs which HTML-escapes all input text, producing only <span class="hljs-*"> tags.
|
|
This is safe: the source is our own renderToolInput() output, not arbitrary user HTML.
|
|
Same pattern used in ReviewDiffContent.tsx and DiffViewer for syntax highlighting. */
|
|
lines.map((html, i) => (
|
|
<div
|
|
key={i}
|
|
className="whitespace-pre-wrap break-all"
|
|
dangerouslySetInnerHTML={{ __html: html || ' ' }}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Timeout progress bar sub-component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const TimeoutProgress = ({ receivedAt }: { receivedAt: string }): React.JSX.Element | null => {
|
|
const { t } = useAppTranslation('team');
|
|
const settings = useStore(useShallow((s) => s.toolApprovalSettings));
|
|
const elapsed = useElapsed(receivedAt);
|
|
|
|
if (settings.timeoutAction === 'wait') return null;
|
|
|
|
const progress = Math.min(1, elapsed / settings.timeoutSeconds);
|
|
const remaining = Math.max(0, settings.timeoutSeconds - elapsed);
|
|
const color = settings.timeoutAction === 'allow' ? 'rgb(5, 150, 105)' : 'rgb(239, 68, 68)';
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center gap-2 border-t px-4 py-1.5"
|
|
style={{ borderColor: 'var(--color-border)' }}
|
|
>
|
|
<div
|
|
className="h-1 flex-1 overflow-hidden rounded-full"
|
|
style={{ backgroundColor: 'var(--color-surface)' }}
|
|
>
|
|
<div
|
|
className="h-full rounded-full transition-all duration-1000 ease-linear"
|
|
style={{
|
|
width: `${progress * 100}%`,
|
|
backgroundColor: color,
|
|
}}
|
|
/>
|
|
</div>
|
|
<span className="text-[10px] tabular-nums" style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('toolApproval.autoActionIn', {
|
|
action: settings.timeoutAction,
|
|
time: formatElapsed(remaining),
|
|
})}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Elapsed display sub-component (uses hook)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function formatElapsed(seconds: number): string {
|
|
if (seconds < 60) return `${seconds}s`;
|
|
const m = Math.floor(seconds / 60);
|
|
const s = seconds % 60;
|
|
return s > 0 ? `${m}m ${s}s` : `${m}m`;
|
|
}
|
|
|
|
const ElapsedDisplay = ({ receivedAt }: { receivedAt: string }): React.JSX.Element => {
|
|
const elapsed = useElapsed(receivedAt);
|
|
return (
|
|
<span className="text-[11px] tabular-nums text-[var(--color-text-muted)]">
|
|
{formatElapsed(elapsed)}
|
|
</span>
|
|
);
|
|
};
|