311 lines
14 KiB
TypeScript
311 lines
14 KiB
TypeScript
|
import React, { useEffect, useState } from "react";
|
||
|
|
import { ChevronDown, RefreshCw, RotateCcw } from "lucide-react";
|
||
|
|
import { useI18n } from "../../../../application/i18n/I18nProvider";
|
||
|
|
import { Button } from "../../../ui/button";
|
||
|
|
import { cn } from "../../../../lib/utils";
|
||
|
|
import type { AgentPathInfo } from "./types";
|
||
|
|
import type { CodebuddyAdvancedOptions } from "../../../../infrastructure/ai/types";
|
||
|
|
import { parseEnvLines, serializeEnvLines } from "./codebuddyConfigEnv";
|
||
|
|
|
||
|
|
const INTERNET_ENV_OPTIONS = [
|
||
|
|
{ value: "", labelKey: "ai.codebuddy.internetEnv.default" },
|
||
|
|
{ value: "internal", labelKey: "ai.codebuddy.internetEnv.internal" },
|
||
|
|
{ value: "ioa", labelKey: "ai.codebuddy.internetEnv.ioa" },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
const EFFORT_OPTIONS = [
|
||
|
|
{ value: "", labelKey: "ai.codebuddy.effort.default" },
|
||
|
|
{ value: "low", labelKey: "ai.codebuddy.effort.low" },
|
||
|
|
{ value: "medium", labelKey: "ai.codebuddy.effort.medium" },
|
||
|
|
{ value: "high", labelKey: "ai.codebuddy.effort.high" },
|
||
|
|
{ value: "xhigh", labelKey: "ai.codebuddy.effort.xhigh" },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
export const CodebuddyCard: React.FC<{
|
||
|
|
pathInfo: AgentPathInfo | null;
|
||
|
|
isResolvingPath: boolean;
|
||
|
|
customPath: string;
|
||
|
|
onCustomPathChange: (path: string) => void;
|
||
|
|
onRecheckPath: () => void;
|
||
|
|
onResetPath: () => void;
|
||
|
|
internetEnv: string;
|
||
|
|
onInternetEnvChange: (value: string) => void;
|
||
|
|
envText: string;
|
||
|
|
onEnvTextChange: (value: string) => void;
|
||
|
|
advancedOptions?: CodebuddyAdvancedOptions;
|
||
|
|
onAdvancedOptionsChange?: (options: CodebuddyAdvancedOptions | undefined) => void;
|
||
|
|
}> = ({
|
||
|
|
pathInfo,
|
||
|
|
isResolvingPath,
|
||
|
|
customPath,
|
||
|
|
onCustomPathChange,
|
||
|
|
onRecheckPath,
|
||
|
|
onResetPath,
|
||
|
|
internetEnv,
|
||
|
|
onInternetEnvChange,
|
||
|
|
envText,
|
||
|
|
onEnvTextChange,
|
||
|
|
advancedOptions,
|
||
|
|
onAdvancedOptionsChange,
|
||
|
|
}) => {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const found = pathInfo?.available;
|
||
|
|
// Collapsed by default; auto-expand when the user already has config so it
|
||
|
|
// isn't hidden. Local UI state — not persisted.
|
||
|
|
const [configOpen, setConfigOpen] = useState(
|
||
|
|
() => Boolean(internetEnv.trim() || envText.trim()),
|
||
|
|
);
|
||
|
|
const [advancedOpen, setAdvancedOpen] = useState(
|
||
|
|
() => Boolean(advancedOptions && Object.keys(advancedOptions).length > 0),
|
||
|
|
);
|
||
|
|
|
||
|
|
const updateAdvanced = (patch: Partial<CodebuddyAdvancedOptions>) => {
|
||
|
|
if (!onAdvancedOptionsChange) return;
|
||
|
|
const next = { ...(advancedOptions || {}), ...patch };
|
||
|
|
// Remove undefined/empty values to keep storage clean.
|
||
|
|
const cleaned = Object.fromEntries(
|
||
|
|
Object.entries(next).filter(([, v]) => v != null && v !== "" && v !== 0),
|
||
|
|
) as CodebuddyAdvancedOptions;
|
||
|
|
onAdvancedOptionsChange(Object.keys(cleaned).length > 0 ? cleaned : undefined);
|
||
|
|
};
|
||
|
|
|
||
|
|
// The env editor keeps the raw text the user types. Persisting parses it into
|
||
|
|
// a record (dropping incomplete lines), so binding the textarea directly to
|
||
|
|
// the persisted value would erase a key the moment it's typed before its "=".
|
||
|
|
// Only resync from the persisted value when it changes for some reason other
|
||
|
|
// than our own parse→serialize round-trip.
|
||
|
|
const [envDraft, setEnvDraft] = useState(envText);
|
||
|
|
useEffect(() => {
|
||
|
|
setEnvDraft((prev) =>
|
||
|
|
serializeEnvLines(parseEnvLines(prev)) === envText ? prev : envText,
|
||
|
|
);
|
||
|
|
}, [envText]);
|
||
|
|
|
||
|
|
const statusText = isResolvingPath
|
||
|
|
? t('ai.codebuddy.detecting')
|
||
|
|
: found
|
||
|
|
? t('ai.codebuddy.detected')
|
||
|
|
: t('ai.codebuddy.notFound');
|
||
|
|
|
||
|
|
const statusClassName = isResolvingPath
|
||
|
|
? "text-muted-foreground"
|
||
|
|
: found
|
||
|
|
? "text-emerald-500"
|
||
|
|
: "text-amber-500";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="rounded-lg border bg-card p-4 space-y-3">
|
||
|
|
<div className="flex items-start justify-between gap-4">
|
||
|
|
<p className="min-w-0 text-xs text-muted-foreground leading-5">
|
||
|
|
{t('ai.codebuddy.description')}
|
||
|
|
</p>
|
||
|
|
<div className={cn("text-xs font-medium shrink-0", statusClassName)}>
|
||
|
|
{statusText}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{found && (
|
||
|
|
<div className="flex items-center gap-2 text-xs">
|
||
|
|
<span className="text-muted-foreground">{t('ai.codebuddy.path')}</span>
|
||
|
|
<span className="font-mono text-foreground truncate">{pathInfo.path}</span>
|
||
|
|
{pathInfo.version && (
|
||
|
|
<>
|
||
|
|
<span className="text-muted-foreground">|</span>
|
||
|
|
<span className="text-muted-foreground">{pathInfo.version}</span>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{!isResolvingPath && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
{!found && (
|
||
|
|
<p className="text-xs text-amber-500">
|
||
|
|
{t('ai.codebuddy.notFoundHint')}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={customPath}
|
||
|
|
onChange={(e) => onCustomPathChange(e.target.value)}
|
||
|
|
placeholder={t('ai.codebuddy.customPathPlaceholder')}
|
||
|
|
className="flex-1 h-8 rounded-md border border-input bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||
|
|
/>
|
||
|
|
<Button variant="outline" size="sm" onClick={onRecheckPath} disabled={!customPath.trim()}>
|
||
|
|
<RefreshCw size={14} className="mr-1.5" />
|
||
|
|
{t('ai.codebuddy.check')}
|
||
|
|
</Button>
|
||
|
|
<Button variant="ghost" size="sm" onClick={onResetPath} disabled={!customPath.trim()}>
|
||
|
|
<RotateCcw size={14} className="mr-1.5" />
|
||
|
|
{t('ai.codebuddy.resetPath')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Authentication & config (optional, collapsible) */}
|
||
|
|
<div className="border-t border-border/60 pt-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setConfigOpen((v) => !v)}
|
||
|
|
aria-expanded={configOpen}
|
||
|
|
className="flex w-full items-center justify-between gap-2 text-left"
|
||
|
|
>
|
||
|
|
<span className="text-xs font-medium text-muted-foreground">
|
||
|
|
{t('ai.codebuddy.configSection')}
|
||
|
|
</span>
|
||
|
|
<ChevronDown
|
||
|
|
size={14}
|
||
|
|
className={cn("text-muted-foreground transition-transform", configOpen && "rotate-180")}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
{configOpen && (
|
||
|
|
<div className="space-y-3 mt-3">
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<label htmlFor="codebuddy-internet-env" className="text-xs text-muted-foreground">{t('ai.codebuddy.internetEnv')}</label>
|
||
|
|
<select
|
||
|
|
id="codebuddy-internet-env"
|
||
|
|
value={internetEnv}
|
||
|
|
onChange={(e) => onInternetEnvChange(e.target.value)}
|
||
|
|
className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm font-mono focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||
|
|
>
|
||
|
|
{INTERNET_ENV_OPTIONS.map((opt) => (
|
||
|
|
<option key={opt.value} value={opt.value}>{t(opt.labelKey)}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.internetEnv.hint')}</p>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<label htmlFor="codebuddy-env-vars" className="text-xs text-muted-foreground">{t('ai.codebuddy.envVars')}</label>
|
||
|
|
<textarea
|
||
|
|
id="codebuddy-env-vars"
|
||
|
|
value={envDraft}
|
||
|
|
onChange={(e) => { setEnvDraft(e.target.value); onEnvTextChange(e.target.value); }}
|
||
|
|
placeholder={t('ai.codebuddy.envVars.placeholder')}
|
||
|
|
rows={3}
|
||
|
|
spellCheck={false}
|
||
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y"
|
||
|
|
/>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.envVars.hint')}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Advanced SDK options (SDK 0.3.230) */}
|
||
|
|
{onAdvancedOptionsChange && (
|
||
|
|
<div className="border-t border-border/60 pt-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setAdvancedOpen((v) => !v)}
|
||
|
|
aria-expanded={advancedOpen}
|
||
|
|
className="flex w-full items-center justify-between gap-2 text-left"
|
||
|
|
>
|
||
|
|
<span className="text-xs font-medium text-muted-foreground">
|
||
|
|
{t('ai.codebuddy.advancedSection')}
|
||
|
|
</span>
|
||
|
|
<ChevronDown
|
||
|
|
size={14}
|
||
|
|
className={cn("text-muted-foreground transition-transform", advancedOpen && "rotate-180")}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
{advancedOpen && (
|
||
|
|
<div className="space-y-3 mt-3">
|
||
|
|
{/* Effort */}
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<label htmlFor="codebuddy-effort" className="text-xs text-muted-foreground">{t('ai.codebuddy.effort')}</label>
|
||
|
|
<select
|
||
|
|
id="codebuddy-effort"
|
||
|
|
value={advancedOptions?.effort || ""}
|
||
|
|
onChange={(e) => updateAdvanced({ effort: (e.target.value || undefined) as CodebuddyAdvancedOptions['effort'] })}
|
||
|
|
className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||
|
|
>
|
||
|
|
{EFFORT_OPTIONS.map((opt) => (
|
||
|
|
<option key={opt.value} value={opt.value}>{t(opt.labelKey)}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.effort.hint')}</p>
|
||
|
|
</div>
|
||
|
|
{/* Max Turns */}
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<label htmlFor="codebuddy-max-turns" className="text-xs text-muted-foreground">{t('ai.codebuddy.maxTurns')}</label>
|
||
|
|
<input
|
||
|
|
id="codebuddy-max-turns"
|
||
|
|
type="number"
|
||
|
|
min={1}
|
||
|
|
max={200}
|
||
|
|
value={advancedOptions?.maxTurns ?? ""}
|
||
|
|
onChange={(e) => updateAdvanced({ maxTurns: e.target.value ? Number(e.target.value) : undefined })}
|
||
|
|
placeholder="20"
|
||
|
|
className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||
|
|
/>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.maxTurns.hint')}</p>
|
||
|
|
</div>
|
||
|
|
{/* Max Budget USD */}
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<label htmlFor="codebuddy-max-budget" className="text-xs text-muted-foreground">{t('ai.codebuddy.maxBudget')}</label>
|
||
|
|
<input
|
||
|
|
id="codebuddy-max-budget"
|
||
|
|
type="number"
|
||
|
|
min={0.01}
|
||
|
|
step={0.01}
|
||
|
|
value={advancedOptions?.maxBudgetUsd ?? ""}
|
||
|
|
onChange={(e) => updateAdvanced({ maxBudgetUsd: e.target.value ? Number(e.target.value) : undefined })}
|
||
|
|
placeholder="0.50"
|
||
|
|
className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||
|
|
/>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.maxBudget.hint')}</p>
|
||
|
|
</div>
|
||
|
|
{/* Sandbox */}
|
||
|
|
<div className="flex items-center justify-between gap-2">
|
||
|
|
<div>
|
||
|
|
<span className="text-xs text-muted-foreground">{t('ai.codebuddy.sandbox')}</span>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.sandbox.hint')}</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
role="switch"
|
||
|
|
aria-checked={Boolean(advancedOptions?.sandbox?.enabled)}
|
||
|
|
onClick={() => updateAdvanced({ sandbox: advancedOptions?.sandbox?.enabled ? undefined : { enabled: true } })}
|
||
|
|
className={cn(
|
||
|
|
"relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors",
|
||
|
|
advancedOptions?.sandbox?.enabled ? "bg-primary" : "bg-muted",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<span className={cn(
|
||
|
|
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
|
||
|
|
advancedOptions?.sandbox?.enabled ? "translate-x-[18px]" : "translate-x-[3px]",
|
||
|
|
)} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{/* File Checkpointing */}
|
||
|
|
<div className="flex items-center justify-between gap-2">
|
||
|
|
<div>
|
||
|
|
<span className="text-xs text-muted-foreground">{t('ai.codebuddy.fileCheckpointing')}</span>
|
||
|
|
<p className="text-[11px] text-muted-foreground leading-4">{t('ai.codebuddy.fileCheckpointing.hint')}</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
role="switch"
|
||
|
|
aria-checked={Boolean(advancedOptions?.enableFileCheckpointing)}
|
||
|
|
onClick={() => updateAdvanced({ enableFileCheckpointing: advancedOptions?.enableFileCheckpointing ? undefined : true })}
|
||
|
|
className={cn(
|
||
|
|
"relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors",
|
||
|
|
advancedOptions?.enableFileCheckpointing ? "bg-primary" : "bg-muted",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<span className={cn(
|
||
|
|
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
|
||
|
|
advancedOptions?.enableFileCheckpointing ? "translate-x-[18px]" : "translate-x-[3px]",
|
||
|
|
)} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|