@opengeni/react 0.15.0 → 0.23.0

package/src/components/code-editor.tsx

@@ -3,8 +3,6 @@ import {
   type ComponentType,
   type CSSProperties,
   type ReactNode,
-  lazy,
-  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -92,13 +90,6 @@ export function languageForPath(path: string): keyof typeof LANGUAGE_LOADERS | n
   }
 }
 
-const LazyCodeMirror = lazy(async () => {
-  const mod = (await import("@uiw/react-codemirror")) as unknown as {
-    default: ReactCodeMirrorComponent;
-  };
-  return { default: mod.default };
-});
-
 export type CodeEditorProps = {
   /** Workspace-relative path — drives language inference (and the save target upstream). */
   path: string;
@@ -106,6 +97,10 @@ export type CodeEditorProps = {
   initialContents: string;
   /** Persist the current buffer. Resolves when the write lands; rejects to surface an error. */
   onSave: (contents: string) => Promise<unknown>;
+  /** Explicitly overwrite after a visible expected-content conflict. */
+  onOverwrite?: ((contents: string) => Promise<unknown>) | undefined;
+  /** Re-read the selected file after a visible save conflict. */
+  onReload?: (() => void) | undefined;
   /** Fired once when the buffer FIRST diverges from its baseline (the first real
    *  keystroke) — the wake-on-edit intent. The host warms the box on this so the
    *  eventual save lands fast; merely opening the file for reading never fires it. */
@@ -136,6 +131,8 @@ export function CodeEditor({
   path,
   initialContents,
   onSave,
+  onOverwrite,
+  onReload,
   onEditIntent,
   readOnly = false,
   themeType = "dark",
@@ -156,6 +153,8 @@ export function CodeEditor({
   const [savedTick, setSavedTick] = useState(false);
 
   const dirty = value !== baseline;
+  const saveConflict =
+    saveError !== null && (saveError as Error & { code?: unknown }).code === "file_write_conflict";
 
   // Reload the buffer when the file identity changes. Guard on initialContents
   // too so an external refresh of the SAME path (e.g. fs.changed re-read) reseeds
@@ -201,7 +200,16 @@ export function CodeEditor({
           keymap: { of: (binds: unknown[]) => unknown };
           Prec: { highest: (ext: unknown) => unknown };
         };
-        const languageExtension = langKey ? await LANGUAGE_LOADERS[langKey]?.() : null;
+        // Language peers are optional. A missing grammar must degrade to a plain
+        // CodeMirror document, not throw the entire editor down to textarea.
+        let languageExtension: unknown | null = null;
+        if (langKey) {
+          try {
+            languageExtension = (await LANGUAGE_LOADERS[langKey]?.()) ?? null;
+          } catch {
+            languageExtension = null;
+          }
+        }
         if (cancelled) return;
         // A high-precedence Cmd/Ctrl-S keymap that calls back into the latest
         // save handler (kept fresh via a ref) and swallows the browser's
@@ -222,8 +230,9 @@ export function CodeEditor({
         setBundle({
           Editor: cmMod.default,
           saveKeymapExtension,
-          languageExtension: languageExtension ?? null,
+          languageExtension,
         });
+        setFailed(false);
       } catch {
         if (!cancelled) setFailed(true);
       }
@@ -256,6 +265,25 @@ export function CodeEditor({
     }
   }, [readOnly, value, baseline, onSave, path]);
 
+  const overwrite = useCallback(async () => {
+    if (readOnly || !onOverwrite) return;
+    const snapshot = value;
+    if (snapshot === baseline) return;
+    setSaving(true);
+    setSaveError(null);
+    setSavedTick(false);
+    try {
+      await onOverwrite(snapshot);
+      setBaseline(snapshot);
+      lastSeed.current = { path, contents: snapshot };
+      setSavedTick(true);
+    } catch (cause) {
+      setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
+    } finally {
+      setSaving(false);
+    }
+  }, [readOnly, onOverwrite, value, baseline, path]);
+
   saveRef.current = () => {
     void save();
   };
@@ -276,13 +304,7 @@ export function CodeEditor({
     return exts;
   }, [bundle]);
 
-  if (failed) {
-    return (
-      <div className={cn("flex h-full min-h-0 flex-col", className)}>
-        {fallback ?? <PlainTextarea value={value} readOnly={readOnly} onChange={noteEdit} />}
-      </div>
-    );
-  }
+  const Editor = bundle?.Editor;
 
   return (
     <div
@@ -291,7 +313,7 @@ export function CodeEditor({
       style={editorVars}
     >
       {/* Save bar: dirty indicator + status + the explicit Save button. */}
-      <div className="flex shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1">
+      <div className="flex min-h-9 shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1">
         <span
           className={cn(
             "size-1.5 shrink-0 rounded-full transition-colors",
@@ -304,7 +326,7 @@ export function CodeEditor({
           {dirty && !readOnly ? " •" : ""}
         </span>
         <div className="ml-auto flex shrink-0 items-center gap-2">
-          {saveError && (
+          {saveError && !saveConflict && (
             <span
               className="max-w-[220px] truncate text-og-xs text-og-status-failed"
               title={saveError.message}
@@ -315,13 +337,13 @@ export function CodeEditor({
           {!saveError && savedTick && <span className="text-og-xs text-og-status-idle">Saved</span>}
           {readOnly ? (
             <span className="text-og-xs uppercase tracking-wide text-og-fg-subtle">Read-only</span>
-          ) : (
+          ) : !saveConflict ? (
             <button
               type="button"
               onClick={() => void save()}
               disabled={saving || !dirty}
               className={cn(
-                "flex items-center gap-1 rounded-og-sm border border-og-border px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-10",
+                "flex items-center gap-1 rounded-og-sm border border-og-border px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-11",
                 saving || !dirty
                   ? "cursor-default text-og-fg-subtle opacity-60"
                   : "text-og-fg hover:bg-og-accent-soft",
@@ -335,14 +357,59 @@ export function CodeEditor({
               )}
               Save
             </button>
-          )}
+          ) : null}
         </div>
       </div>
 
+      {saveConflict ? (
+        <div
+          className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-og-status-failed/25 bg-og-status-failed/8 px-2 py-2"
+          role="alert"
+        >
+          <div className="min-w-[12rem] flex-1 text-og-xs text-og-fg-muted">
+            <span className="font-medium text-og-status-failed">File changed on machine.</span>{" "}
+            Reloading discards your edits; overwriting replaces the live version.
+          </div>
+          <div className="ml-auto flex shrink-0 items-center gap-1.5">
+            {onReload ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setSaveError(null);
+                  onReload();
+                }}
+                className="min-h-8 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-og-xs font-medium text-og-fg hover:bg-og-surface-2 pointer-coarse:min-h-11"
+              >
+                Reload live
+              </button>
+            ) : null}
+            {onOverwrite ? (
+              <button
+                type="button"
+                onClick={() => void overwrite()}
+                disabled={saving}
+                className="min-h-8 rounded-og-sm border border-og-status-failed/40 px-2 text-og-xs font-medium text-og-status-failed hover:bg-og-status-failed/10 disabled:opacity-50 pointer-coarse:min-h-11"
+              >
+                Overwrite
+              </button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
       {/* The editor surface. */}
       <div className="min-h-0 flex-1 overflow-auto">
-        <Suspense fallback={loading ?? <EditorSkeleton />}>
-          <LazyCodeMirror
+        {failed ? (
+          (fallback ?? (
+            <PlainTextarea
+              value={value}
+              readOnly={readOnly}
+              onChange={noteEdit}
+              onSave={() => void save()}
+            />
+          ))
+        ) : Editor ? (
+          <Editor
             value={value}
             theme={themeType === "light" ? "light" : "dark"}
             editable={!readOnly}
@@ -353,7 +420,9 @@ export function CodeEditor({
             className="og-cm-editor min-h-full text-og-sm"
             onChange={readOnly ? undefined : noteEdit}
           />
-        </Suspense>
+        ) : (
+          (loading ?? <EditorSkeleton />)
+        )}
       </div>
     </div>
   );
@@ -369,10 +438,12 @@ function PlainTextarea({
   value,
   readOnly,
   onChange,
+  onSave,
 }: {
   value: string;
   readOnly: boolean;
   onChange: (value: string) => void;
+  onSave: () => void;
 }) {
   return (
     <textarea
@@ -380,6 +451,13 @@ function PlainTextarea({
       readOnly={readOnly}
       spellCheck={false}
       onChange={(e) => onChange(e.target.value)}
+      onKeyDown={(event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+          event.preventDefault();
+          onSave();
+        }
+      }}
+      aria-label="Plain text file editor"
       className="h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-none"
     />
   );

package/src/components/command-palette.tsx

@@ -15,6 +15,10 @@ export type CommandPaletteProps = {
   argHintText: string;
   /** id used for aria-activedescendant wiring from the textarea. */
   listboxId: string;
+  /** Accessible list label. Defaults to "Slash commands". */
+  label?: string | undefined;
+  /** Badge shown for destructive commands. Defaults to "danger". */
+  dangerLabel?: string | undefined;
 };
 
 /**
@@ -31,6 +35,8 @@ export function CommandPalette({
   onRun,
   argHintText,
   listboxId,
+  label = "Slash commands",
+  dangerLabel = "danger",
 }: CommandPaletteProps) {
   return (
     <AnimatePresence>
@@ -48,7 +54,7 @@ export function CommandPalette({
           <ul
             id={listboxId}
             role="listbox"
-            aria-label="Slash commands"
+            aria-label={label}
             className="max-h-72 overflow-y-auto py-1"
           >
             {items.map((command, index) => {
@@ -92,7 +98,7 @@ export function CommandPalette({
                   <span className="ml-auto flex items-center gap-1.5">
                     {command.danger ? (
                       <span className="rounded-og-xs bg-og-status-failed/15 px-1 text-[10px] uppercase tracking-wide text-og-status-failed">
-                        danger
+                        {dangerLabel}
                       </span>
                     ) : null}
                     <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">

package/src/components/composer-transcription-control.tsx

@@ -0,0 +1,211 @@
+import type {
+  TranscriptionAdapter,
+  TranscriptionDiagnostic,
+  TranscriptionErrorCode,
+  TranscriptionTargetSelection,
+  WorkspaceTranscriptionPolicy,
+} from "@opengeni/sdk";
+import { LoaderCircleIcon, MicIcon, RotateCwIcon, SquareIcon } from "lucide-react";
+import { type MouseEvent } from "react";
+import { cn } from "../lib/cn";
+import { useTranscription, type TranscriptionLifecycleTimeouts } from "../hooks/use-transcription";
+import { useChatComposer } from "./composer";
+
+export type ComposerTranscriptionMessages = {
+  start: string;
+  stop: string;
+  retry: string;
+  requestingPermission: string;
+  listening: string;
+  reconnecting: string;
+  cancelling: string;
+  unavailableDisabled: string;
+  unavailableAdapter: string;
+  unavailablePolicy: string;
+  errorPermissionDenied: string;
+  errorNotSupported: string;
+  errorNetwork: string;
+  errorProvider: string;
+  errorPolicyBlocked: string;
+  errorTimeout: string;
+  errorCancelled: string;
+  errorUnknown: string;
+};
+
+const defaultMessages: ComposerTranscriptionMessages = {
+  start: "Start voice input",
+  stop: "Stop voice input",
+  retry: "Retry voice input",
+  requestingPermission: "Requesting microphone permission…",
+  listening: "Listening… Press Escape to cancel.",
+  reconnecting: "Reconnecting voice input…",
+  cancelling: "Cancelling voice input…",
+  unavailableDisabled: "Voice input is unavailable while the composer is disabled.",
+  unavailableAdapter: "Voice input needs an approved transcription adapter.",
+  unavailablePolicy: "Enable and accept transcription in Workspace settings.",
+  errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
+  errorNotSupported: "Voice input is not supported on this device.",
+  errorNetwork: "Voice input lost its network connection.",
+  errorProvider: "The transcription service could not continue.",
+  errorPolicyBlocked: "Workspace policy does not authorize voice input.",
+  errorTimeout: "Voice input took too long to start. Try again.",
+  errorCancelled: "Voice input was cancelled.",
+  errorUnknown: "Voice input could not start. Try again.",
+};
+
+export type ComposerTranscriptionControlProps = {
+  adapter: TranscriptionAdapter | null;
+  policy: WorkspaceTranscriptionPolicy;
+  selection?: TranscriptionTargetSelection | undefined;
+  messages?: Partial<ComposerTranscriptionMessages> | undefined;
+  className?: string | undefined;
+  lifecycleTimeouts?: Partial<TranscriptionLifecycleTimeouts> | undefined;
+  onDiagnostic?: ((diagnostic: TranscriptionDiagnostic) => void) | undefined;
+};
+
+/** One provider-neutral microphone control for the nearest editable composer. */
+export function ComposerTranscriptionControl({
+  adapter,
+  policy,
+  selection,
+  messages: overrides,
+  className,
+  lifecycleTimeouts,
+  onDiagnostic,
+}: ComposerTranscriptionControlProps) {
+  const composer = useChatComposer();
+  const messages = { ...defaultMessages, ...overrides };
+  const transcription = useTranscription({
+    adapter,
+    policy,
+    ...(selection ? { selection } : {}),
+    value: composer.value,
+    setValue: composer.setValue,
+    focusInput: composer.focusInput,
+    disabled: composer.disabled,
+    lifecycleTimeouts,
+    onDiagnostic,
+  });
+  const status = transcription.state.status;
+  const active =
+    status === "requesting-permission" ||
+    status === "listening" ||
+    status === "reconnecting" ||
+    status === "cancelling";
+  const unavailableMessage =
+    transcription.unavailableReason === "composer_disabled"
+      ? messages.unavailableDisabled
+      : transcription.unavailableReason === "adapter_missing"
+        ? messages.unavailableAdapter
+        : transcription.unavailableReason
+          ? messages.unavailablePolicy
+          : null;
+  const label = unavailableMessage
+    ? unavailableMessage
+    : status === "error"
+      ? messages.retry
+      : active
+        ? messages.stop
+        : messages.start;
+  const errorMessage = transcription.state.error
+    ? transcriptionErrorMessage(transcription.state.error.code, messages)
+    : null;
+  const announcement =
+    transcription.state.partial ||
+    (status === "requesting-permission"
+      ? messages.requestingPermission
+      : status === "listening"
+        ? messages.listening
+        : status === "reconnecting"
+          ? (errorMessage ?? messages.reconnecting)
+          : status === "cancelling"
+            ? messages.cancelling
+            : status === "error"
+              ? (errorMessage ?? messages.errorUnknown)
+              : unavailableMessage);
+
+  function activate(event: MouseEvent<HTMLButtonElement>) {
+    if (unavailableMessage || status === "cancelling") {
+      event.preventDefault();
+      return;
+    }
+    if (active) void transcription.cancel();
+    else void transcription.start();
+  }
+
+  return (
+    <span
+      className={cn("inline-flex min-w-0 items-center gap-1.5", className)}
+      data-transcription-status={status}
+    >
+      <button
+        type="button"
+        onClick={activate}
+        aria-label={label}
+        aria-pressed={active}
+        aria-disabled={unavailableMessage !== null || status === "cancelling"}
+        aria-keyshortcuts={active ? "Escape" : undefined}
+        title={label}
+        className={cn(
+          "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md pointer-coarse:size-11",
+          "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
+          unavailableMessage
+            ? "cursor-not-allowed opacity-45"
+            : status === "cancelling"
+              ? "cursor-not-allowed"
+              : "hover:bg-og-surface-2 hover:text-og-fg",
+          status === "listening" && "bg-og-status-failed/10 text-og-status-failed",
+        )}
+      >
+        {status === "requesting-permission" || status === "cancelling" ? (
+          <LoaderCircleIcon className="size-4 animate-og-spin motion-reduce:animate-none" />
+        ) : status === "reconnecting" ? (
+          <RotateCwIcon className="size-4 animate-og-spin motion-reduce:animate-none" />
+        ) : active ? (
+          <SquareIcon className="size-3.5 fill-current" />
+        ) : (
+          <MicIcon className="size-4" />
+        )}
+      </button>
+      {announcement && (active || status === "error") ? (
+        <span
+          aria-hidden="true"
+          title={announcement}
+          className={cn(
+            "max-w-48 truncate text-og-xs text-og-fg-muted max-sm:max-w-28",
+            status === "error" && "text-og-status-failed",
+          )}
+        >
+          {announcement}
+        </span>
+      ) : null}
+      <span className="sr-only" role={status === "error" ? "alert" : "status"} aria-live="polite">
+        {announcement}
+      </span>
+    </span>
+  );
+}
+
+function transcriptionErrorMessage(
+  code: TranscriptionErrorCode,
+  messages: ComposerTranscriptionMessages,
+): string {
+  switch (code) {
+    case "permission_denied":
+      return messages.errorPermissionDenied;
+    case "not_supported":
+      return messages.errorNotSupported;
+    case "network":
+      return messages.errorNetwork;
+    case "provider":
+      return messages.errorProvider;
+    case "policy_blocked":
+      return messages.errorPolicyBlocked;
+    case "timeout":
+      return messages.errorTimeout;
+    case "cancelled":
+      return messages.errorCancelled;
+    case "unknown":
+      return messages.errorUnknown;
+  }
+}