@volter-ai-dev/supercode-ui 0.1.69 → 0.1.71

package/react/chunks/chunk-GYQOTTZ5.mjs

@@ -0,0 +1,224 @@
+import {
+  HarnessLogo
+} from "./chunk-GV5KV5UY.mjs";
+import {
+  harnessDisplayName
+} from "./chunk-LS6JBXNT.mjs";
+import {
+  UiIcon
+} from "./chunk-OINC7LV7.mjs";
+
+// src/settings.jsx
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HarnessAdvisory({ state, onReview }) {
+  const advisory = state.interopSettings?.advisories[0];
+  if (!advisory && !state.interopSettingsError) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "scui-advisory", "data-severity": advisory?.severity ?? "error", role: advisory?.severity === "error" || !advisory ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "!" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("strong", { children: advisory?.title ?? "Could not inspect harness settings" }),
+      /* @__PURE__ */ jsx("small", { children: advisory?.message ?? state.interopSettingsError })
+    ] }),
+    advisory && state.canConfigureSettings ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onReview(advisory.recommendation.change), children: "Review" }) : null
+  ] });
+}
+function initialValues(report, recommendedChange) {
+  return Object.fromEntries(report.controls.map((control) => [
+    control.key,
+    recommendedChange?.key === control.key ? recommendedChange.value : control.configuredValue ?? control.effectiveValue ?? control.choices[0]?.value ?? null
+  ]));
+}
+function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = null }) {
+  const report = state.interopSettings;
+  const titleId = useId();
+  const panel = useRef(null);
+  const valuesKey = `${report?.revision ?? ""}:${recommendedChange?.key ?? ""}:${recommendedChange?.value ?? ""}`;
+  const defaults = useMemo(() => report ? initialValues(report, recommendedChange) : {}, [valuesKey]);
+  const [values, setValues] = useState(defaults);
+  useEffect(() => setValues(defaults), [defaults]);
+  useEffect(() => {
+    panel.current?.querySelector("select, button")?.focus({ preventScroll: true });
+    const dismiss = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", dismiss);
+    return () => document.removeEventListener("keydown", dismiss);
+  }, [onClose]);
+  if (!report) return /* @__PURE__ */ jsx("section", { ref: panel, className: "scui-settings", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: /* @__PURE__ */ jsxs("header", { children: [
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close settings", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "close", size: 18 }) }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("strong", { id: titleId, children: "Harness settings" }),
+      /* @__PURE__ */ jsx("small", { children: state.interopSettingsError ?? "No interoperability controls are available." })
+    ] })
+  ] }) });
+  const changed = report.controls.flatMap((control) => values[control.key] !== (control.configuredValue ?? control.effectiveValue ?? control.choices[0]?.value ?? null) ? [{ key: control.key, value: values[control.key] ?? null }] : []);
+  const submit = (event) => {
+    event.preventDefault();
+    if (!changed.length || !state.canConfigureSettings) return;
+    adapter.onIntent({ action: "configureHarness", harness: report.harness, changes: changed, expectedRevision: report.revision });
+  };
+  return /* @__PURE__ */ jsxs("section", { ref: panel, className: "scui-settings", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close settings", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "close", size: 18 }) }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxs("strong", { id: titleId, children: [
+          harnessDisplayName(report.harness),
+          " interoperability"
+        ] }),
+        /* @__PURE__ */ jsx("small", { children: "Native harness settings used by Supercode" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: submit, children: [
+      report.controls.map((control) => {
+        const choice = control.choices.find((item) => item.value === values[control.key]);
+        const recommendation = report.advisories.map((advisory) => advisory.recommendation).find((item) => item.change.key === control.key && item.change.value === values[control.key]);
+        const consequence = choice?.risk ?? recommendation?.consequence;
+        return /* @__PURE__ */ jsxs("fieldset", { disabled: !control.writable || Boolean(state.operation), children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: `scui-setting-${control.key}`, children: [
+            /* @__PURE__ */ jsx("strong", { children: control.label }),
+            /* @__PURE__ */ jsx("small", { children: control.description })
+          ] }),
+          /* @__PURE__ */ jsxs("select", { id: `scui-setting-${control.key}`, value: values[control.key] ?? "@default", onChange: (event) => setValues((current) => ({ ...current, [control.key]: event.currentTarget.value === "@default" ? null : event.currentTarget.value })), children: [
+            control.resettable ? /* @__PURE__ */ jsx("option", { value: "@default", children: "Use harness default" }) : null,
+            control.choices.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
+          ] }),
+          choice ? /* @__PURE__ */ jsx("p", { children: choice.description }) : null,
+          consequence ? /* @__PURE__ */ jsxs("p", { className: "scui-setting-risk", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Security consequence" }),
+            consequence
+          ] }) : null,
+          /* @__PURE__ */ jsxs("small", { className: "scui-setting-source", children: [
+            control.effectiveNote,
+            control.sourcePath ? ` Source: ${control.sourcePath}` : ""
+          ] })
+        ] }, control.key);
+      }),
+      /* @__PURE__ */ jsxs("footer", { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { type: "submit", disabled: !changed.length || !state.canConfigureSettings || Boolean(state.operation), children: state.operation === "configureHarness" ? "Applying\u2026" : "Apply changes" })
+      ] })
+    ] })
+  ] });
+}
+var ACTIVE_AUTHENTICATION_PHASES = /* @__PURE__ */ new Set(["checking", "launching", "awaiting_user", "verifying"]);
+function HarnessAuthenticationButton({ item, state, adapter }) {
+  if (!item.installed || !["claude-code", "codex"].includes(item.id) || ["ready", "configured"].includes(item.auth)) return null;
+  const flow = state?.harnessAuthentication?.harness === item.id ? state.harnessAuthentication : null;
+  const busy = flow && ACTIVE_AUTHENTICATION_PHASES.has(flow.phase);
+  const completed = flow?.phase === "authenticated";
+  const label = flow?.phase === "checking" ? "Checking\u2026" : flow?.phase === "launching" ? "Opening\u2026" : flow?.phase === "awaiting_user" ? "Finish sign-in" : flow?.phase === "verifying" ? "Verifying\u2026" : flow?.phase === "authenticated" ? "Signed in" : flow?.phase === "failed" ? "Try again" : "Sign in";
+  return /* @__PURE__ */ jsx("button", { type: "button", disabled: Boolean(busy || completed), "aria-busy": Boolean(busy), onClick: () => adapter?.onIntent({ action: "authenticateHarness", harness: item.id }), children: label });
+}
+function canAuthenticateHarness(item) {
+  return item.installed && ["claude-code", "codex"].includes(item.id) && !["ready", "configured"].includes(item.auth);
+}
+function harnessAuthenticationReason(item, state) {
+  const flow = state?.harnessAuthentication?.harness === item.id ? state.harnessAuthentication : null;
+  return flow?.error?.message || flow?.plan?.instructions || item.reason || (item.auth === "required" ? "Authentication required" : "Unavailable");
+}
+function HarnessReadiness({ harnesses, state, adapter }) {
+  const blocked = harnesses.filter((item) => !item.startable);
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx("summary", { children: "No coding harness is ready" }),
+    /* @__PURE__ */ jsx("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(HarnessLogo, { id: item.id, size: 25 }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("strong", { children: item.label }),
+        /* @__PURE__ */ jsx("small", { children: harnessAuthenticationReason(item, state) }),
+        item.protocol ? /* @__PURE__ */ jsxs("em", { children: [
+          item.protocol,
+          " \xB7 ",
+          item.runtime
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(HarnessAuthenticationButton, { item, state, adapter }),
+      !canAuthenticateHarness(item) && item.repair ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => adapter.copyText?.(item.repair), children: "Copy fix" }) : null
+    ] }, item.id)) })
+  ] });
+}
+function HarnessPicker({ harnesses, state, value, disabled = false, adapter, onChange, logo: Logo = HarnessLogo }) {
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  const root = useRef(null);
+  const trigger = useRef(null);
+  const panel = useRef(null);
+  const available = harnesses.filter((item) => item.startable);
+  const unavailable = harnesses.filter((item) => !item.startable);
+  const selected = available.find((item) => item.id === value) ?? available[0] ?? null;
+  const close = () => {
+    setOpen(false);
+    trigger.current?.focus({ preventScroll: true });
+  };
+  useEffect(() => {
+    if (!open) return;
+    panel.current?.querySelector('[aria-selected="true"], [role="option"]')?.focus({ preventScroll: true });
+    const dismiss = (event) => {
+      if (event.type === "keydown" && event.key === "Escape") {
+        event.preventDefault();
+        close();
+      } else if (event.type === "pointerdown" && !root.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", dismiss);
+    document.addEventListener("pointerdown", dismiss, true);
+    return () => {
+      document.removeEventListener("keydown", dismiss);
+      document.removeEventListener("pointerdown", dismiss, true);
+    };
+  }, [open]);
+  const navigate = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const items = [...panel.current.querySelectorAll('[role="option"]')];
+    if (!items.length) return;
+    event.preventDefault();
+    const current = items.indexOf(document.activeElement);
+    const index = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowDown" ? (current + 1) % items.length : (current <= 0 ? items.length : current) - 1;
+    items[index].focus({ preventScroll: true });
+  };
+  const select = (id) => {
+    onChange(id);
+    close();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "scui-harness-menu", ref: root, onBlur: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, children: [
+    /* @__PURE__ */ jsxs("button", { ref: trigger, className: "scui-harness-trigger", type: "button", disabled: disabled || !selected, "aria-label": selected ? `Coding harness: ${selected.label}` : "No coding harness available", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? menuId : void 0, onClick: () => setOpen((current) => !current), children: [
+      selected ? /* @__PURE__ */ jsx(Logo, { id: selected.id, size: 20 }) : null,
+      /* @__PURE__ */ jsx("strong", { children: selected?.label ?? "No harness available" }),
+      /* @__PURE__ */ jsx(UiIcon, { name: "chevron", size: 13 })
+    ] }),
+    open ? /* @__PURE__ */ jsxs("div", { ref: panel, id: menuId, className: "scui-harness-popover", role: "dialog", "aria-label": "Choose coding harness", onKeyDown: navigate, children: [
+      /* @__PURE__ */ jsx("strong", { className: "scui-harness-popover-title", children: "Choose coding harness" }),
+      /* @__PURE__ */ jsx("div", { className: "scui-harness-options", role: "listbox", "aria-label": "Available coding harnesses", children: available.map((item) => /* @__PURE__ */ jsxs("button", { type: "button", role: "option", "aria-selected": item.id === selected?.id, onClick: () => select(item.id), children: [
+        /* @__PURE__ */ jsx(Logo, { id: item.id, size: 24 }),
+        /* @__PURE__ */ jsx("strong", { children: item.label }),
+        /* @__PURE__ */ jsx("span", { children: item.id === selected?.id ? /* @__PURE__ */ jsx(UiIcon, { name: "check", size: 15 }) : null })
+      ] }, item.id)) }),
+      unavailable.length ? /* @__PURE__ */ jsxs("details", { className: "scui-harness-manage", children: [
+        /* @__PURE__ */ jsx("summary", { children: "Manage additional harnesses" }),
+        /* @__PURE__ */ jsx("div", { children: unavailable.map((item) => /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(Logo, { id: item.id, size: 24 }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("strong", { children: item.label }),
+            /* @__PURE__ */ jsx("small", { children: harnessAuthenticationReason(item, state) })
+          ] }),
+          /* @__PURE__ */ jsx(HarnessAuthenticationButton, { item, state, adapter }),
+          !canAuthenticateHarness(item) && item.repair ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => adapter?.copyText?.(item.repair), children: "Copy fix" }) : null
+        ] }, item.id)) })
+      ] }) : null
+    ] }) : null
+  ] });
+}
+
+export {
+  HarnessAdvisory,
+  HarnessSettingsPanel,
+  HarnessReadiness,
+  HarnessPicker
+};