[Init] Initial commit - NetMesh terminal manager

components/settings/tabs/ai/CodebuddyCard.tsx

@@ -0,0 +1,310 @@
+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>
+  );
+};