@agent-native/core 0.129.2 → 0.130.0

package/corpus/templates/design/app/components/design/code-workbench/CodeWorkbenchLoader.tsx

@@ -0,0 +1,278 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { IconFileCode, IconLoader2 } from "@tabler/icons-react";
+import {
+  useCallback,
+  Component,
+  lazy,
+  useMemo,
+  Suspense,
+  useEffect,
+  useState,
+  type ComponentType,
+  type ErrorInfo,
+  type ReactNode,
+} from "react";
+
+import { Spinner } from "@/components/ui/spinner";
+import { prettyScreenName } from "@/lib/screen-names";
+
+import type { CodeWorkbenchProps } from "./CodeWorkbench";
+import { baseName } from "./workspace/types";
+
+export type CodeWorkbenchModuleLoader = () => Promise<{
+  default: ComponentType<CodeWorkbenchProps>;
+}>;
+
+const loadCodeWorkbench: CodeWorkbenchModuleLoader = () =>
+  import("./CodeWorkbench").then((module) => ({
+    default: module.CodeWorkbench,
+  }));
+
+export function preloadCodeWorkbench() {
+  void loadCodeWorkbench().catch(() => {
+    // The mounted boundary reports import failures. Hover/focus preloading is
+    // speculative and must not produce an unhandled rejection.
+  });
+}
+
+if (typeof window !== "undefined" && import.meta.env.MODE !== "test") {
+  preloadCodeWorkbench();
+}
+
+export function CodeWorkbenchLoader(props: CodeWorkbenchProps) {
+  return (
+    <RetryableCodeWorkbenchLoader
+      loadWorkbench={loadCodeWorkbench}
+      workbenchProps={props}
+    />
+  );
+}
+
+export function RetryableCodeWorkbenchLoader({
+  loadWorkbench,
+  workbenchProps,
+}: {
+  loadWorkbench: CodeWorkbenchModuleLoader;
+  workbenchProps: CodeWorkbenchProps;
+}) {
+  const [attempt, setAttempt] = useState(0);
+  const LazyCodeWorkbench = useMemo(
+    () => lazy(loadWorkbench),
+    [attempt, loadWorkbench],
+  );
+  const retry = useCallback(() => setAttempt((current) => current + 1), []);
+
+  return (
+    <CodeWorkbenchLoadErrorBoundary key={attempt} onRetry={retry}>
+      <Suspense
+        fallback={<CodeWorkbenchLoading {...workbenchProps} onRetry={retry} />}
+      >
+        <LazyCodeWorkbench {...workbenchProps} />
+      </Suspense>
+    </CodeWorkbenchLoadErrorBoundary>
+  );
+}
+
+interface PreviewFile {
+  path: string;
+  label: string;
+}
+
+function CodeWorkbenchLoading({
+  designId,
+  localhostConnections = [],
+  onRetry,
+}: CodeWorkbenchProps & { onRetry: () => void }) {
+  const [slow, setSlow] = useState(false);
+  const sourceFilesQuery = useActionQuery("list-source-files", { designId });
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setSlow(true), 12_000);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  const inlineFiles = (
+    sourceFilesQuery.data as
+      | { files?: Array<{ path?: string; displayName?: string }> }
+      | undefined
+  )?.files;
+
+  return (
+    <div
+      role="status"
+      data-testid="design-code-workbench-loading"
+      className="flex min-h-0 flex-1 bg-[var(--design-editor-panel-bg)] text-muted-foreground"
+    >
+      <div className="flex w-60 shrink-0 flex-col border-r border-border">
+        <div className="flex h-9 shrink-0 items-center border-b border-border px-3 text-[11px] font-medium uppercase tracking-wide">
+          {"Explorer" /* i18n-ignore */}
+        </div>
+        <div className="min-h-0 flex-1 overflow-auto py-1">
+          <PreviewFileRoot
+            label="DESIGN FILES"
+            files={(inlineFiles ?? []).map((file) => ({
+              path: file.path ?? file.displayName ?? "",
+              label:
+                file.displayName ??
+                (file.path
+                  ? prettyScreenName(baseName(file.path))
+                  : "Untitled"),
+            }))}
+            loading={sourceFilesQuery.isLoading}
+            error={
+              sourceFilesQuery.error instanceof Error
+                ? sourceFilesQuery.error.message
+                : undefined
+            }
+          />
+          {localhostConnections.map((connection) => (
+            <PreviewFileRoot
+              key={connection.connectionId}
+              label={`LOCAL FILES — ${connection.label}`}
+              title={connection.rootPath}
+              files={[]}
+              loading
+              loadingLabel={"Starting editor…" /* i18n-ignore */}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="grid min-h-0 flex-1 place-items-center bg-[var(--workbench-editor-bg,var(--design-editor-panel-bg))] p-6">
+        {slow ? (
+          <div className="max-w-sm text-center text-[12px]">
+            <p>
+              {
+                "The code editor is taking longer than expected to load." /* i18n-ignore */
+              }
+            </p>
+            <button
+              type="button"
+              className="mt-3 cursor-pointer rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground hover:opacity-90"
+              onClick={onRetry}
+            >
+              {"Retry code editor" /* i18n-ignore */}
+            </button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 text-[12px]">
+            <Spinner className="size-3.5" />
+            <span>{"Starting Monaco…" /* i18n-ignore */}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PreviewFileRoot({
+  label,
+  title,
+  files,
+  loading,
+  loadingLabel = "Loading files…" /* i18n-ignore */,
+  error,
+}: {
+  label: string;
+  title?: string;
+  files: PreviewFile[];
+  loading: boolean;
+  loadingLabel?: string;
+  error?: string;
+}) {
+  return (
+    <section className="pb-1">
+      <div
+        className="flex h-[22px] items-center px-2 text-[11px] font-bold uppercase tracking-wide"
+        title={title}
+      >
+        <span className="truncate">{label}</span>
+      </div>
+      {loading ? (
+        <div className="flex items-center gap-1.5 px-3 py-1 text-[11px]">
+          <IconLoader2 className="size-3 animate-spin" />
+          <span>{loadingLabel}</span>
+        </div>
+      ) : error ? (
+        <p className="break-words px-3 py-1 text-[11px]">{error}</p>
+      ) : (
+        files.map((file) => (
+          <div
+            key={file.path}
+            className="flex h-6 items-center gap-1.5 px-3 text-[12px]"
+            title={file.path}
+          >
+            <IconFileCode className="size-3.5 shrink-0" />
+            <span className="truncate">{file.label}</span>
+          </div>
+        ))
+      )}
+    </section>
+  );
+}
+
+function CodeWorkbenchLoadFailure({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div
+      role="alert"
+      data-testid="design-code-workbench-load-error"
+      className="grid min-h-0 flex-1 place-items-center bg-[var(--design-editor-panel-bg)] p-6 text-muted-foreground"
+    >
+      <div className="max-w-sm text-center text-[12px]">
+        <p>{message}</p>
+        <button
+          type="button"
+          className="mt-3 cursor-pointer rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground hover:opacity-90"
+          onClick={onRetry}
+        >
+          {"Retry code editor" /* i18n-ignore */}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface CodeWorkbenchLoadErrorBoundaryProps {
+  children: ReactNode;
+  onRetry: () => void;
+}
+
+interface CodeWorkbenchLoadErrorBoundaryState {
+  error: Error | null;
+}
+
+class CodeWorkbenchLoadErrorBoundary extends Component<
+  CodeWorkbenchLoadErrorBoundaryProps,
+  CodeWorkbenchLoadErrorBoundaryState
+> {
+  state: CodeWorkbenchLoadErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(_error: Error, _info: ErrorInfo) {
+    // The visible retry state is actionable; runtime reporting still receives
+    // the original error through React's error boundary instrumentation.
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <CodeWorkbenchLoadFailure
+          message={
+            this.state.error.message ||
+            "The code editor could not be loaded." /* i18n-ignore */
+          }
+          onRetry={this.props.onRetry}
+        />
+      );
+    }
+    return this.props.children;
+  }
+}

package/corpus/templates/design/app/components/design/code-workbench/editor/MonacoHost.tsx

@@ -45,7 +45,7 @@ export function MonacoHost({
   commands,
   commandContext,
 }: MonacoHostProps) {
-  const { state } = useWorkbench();
+  const { state, api } = useWorkbench();
   const hostRef = useRef<HTMLDivElement | null>(null);
   const activeUriRef = useRef<string | null>(null);
   const commandsRef = useRef(commands);
@@ -117,17 +117,19 @@ export function MonacoHost({
     // Explorer, sidebar toggle, tab navigation) must also work while Monaco
     // has focus — Monaco swallows keydown otherwise, so register editor
     // commands that call back into the same dispatcher the root uses.
-    const editorKeyDownDisposable = editor.onKeyDown((event) => {
-      const handled = dispatchKeybinding(
-        event.browserEvent,
-        commandsRef.current,
-        commandContextRef.current,
-      );
-      if (handled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    });
+    const editorKeyDownDisposable = editor.onKeyDown(
+      (event: monaco.IKeyboardEvent) => {
+        const handled = dispatchKeybinding(
+          event.browserEvent,
+          commandsRef.current,
+          commandContextRef.current,
+        );
+        if (handled) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+    );
 
     return () => {
       editorKeyDownDisposable.dispose();
@@ -275,6 +277,24 @@ export function MonacoHost({
           <Spinner className="size-4" />
         </div>
       ) : null}
+      {!loading && activeUri && activeBuffer?.error ? (
+        <div
+          role="alert"
+          data-testid="design-code-buffer-error"
+          className="absolute inset-0 grid place-items-center bg-[var(--workbench-editor-bg)]/95 p-6 text-[var(--workbench-muted-fg)]"
+        >
+          <div className="max-w-sm text-center text-[12px]">
+            <p className="break-words">{activeBuffer.error}</p>
+            <button
+              type="button"
+              className="mt-3 cursor-pointer rounded-[5px] bg-[var(--workbench-accent)] px-3 py-1.5 font-medium text-white hover:opacity-90"
+              onClick={() => void api.reloadBuffer(activeUri)}
+            >
+              {"Try again" /* i18n-ignore */}
+            </button>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }

package/corpus/templates/design/app/components/design/code-workbench/editor/monaco-setup.ts

@@ -1,13 +1,24 @@
-import * as monaco from "monaco-editor";
-import { typescript as monacoTypescript } from "monaco-editor";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 
 import "monaco-editor/min/vs/editor/editor.main.css";
-import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
+import "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js";
+import "monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js";
+import "monaco-editor/esm/vs/basic-languages/xml/xml.contribution.js";
+import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
 import CssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import "monaco-editor/esm/vs/language/css/monaco.contribution.js";
 import HtmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import "monaco-editor/esm/vs/language/html/monaco.contribution.js";
 import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import "monaco-editor/esm/vs/language/json/monaco.contribution.js";
+import * as monacoTypescriptRuntime from "monaco-editor/esm/vs/language/typescript/monaco.contribution.js";
 import TypeScriptWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 
+const monacoTypescript =
+  monacoTypescriptRuntime as unknown as (typeof import("monaco-editor"))["typescript"];
+
 /**
  * Global Monaco environment + language-service wiring, adopted from the old
  * CodeWorkbenchHost. Idempotent: safe to call from every mount site (the

package/corpus/templates/design/app/components/design/code-workbench/explorer/ExplorerView.tsx

@@ -1,5 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client/hooks";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useT } from "@agent-native/core/client/i18n";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { prettyScreenName } from "@/lib/screen-names";
 
@@ -17,6 +18,12 @@ export interface ExplorerViewProps {
   ) => void;
 }
 
+interface LocalhostFileListState {
+  files: WorkspaceFileEntry[];
+  loading: boolean;
+  error?: string;
+}
+
 /**
  * Multi-root explorer: one collapsible section per workspace provider.
  * "Design files" (inline) is fetched via `list-source-files` so useDbSync
@@ -28,6 +35,7 @@ export function ExplorerView({
   explorerFocusToken,
   onRequestLocalWriteConsent,
 }: ExplorerViewProps) {
+  const t = useT();
   const { state, api, providers } = useWorkbench();
 
   const inlineProviderKey = `inline:${designId}`;
@@ -55,22 +63,64 @@ export function ExplorerView({
   const localhostProviders = providers.filter(
     (provider) => provider.kind === "localhost",
   );
-  const [localhostFiles, setLocalhostFiles] = useState<
-    Record<string, WorkspaceFileEntry[]>
+  const [localhostFileLists, setLocalhostFileLists] = useState<
+    Record<string, LocalhostFileListState>
   >({});
+  const requestIdsRef = useRef<Record<string, number>>({});
+  const mountedRef = useRef(false);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      requestIdsRef.current = {};
+    };
+  }, []);
 
   const loadLocalhostFiles = useCallback(
     async (providerKey: string) => {
       const provider = providers.find((entry) => entry.key === providerKey);
-      if (!provider) return;
+      if (!provider || !mountedRef.current) return;
+      const requestId = (requestIdsRef.current[providerKey] ?? 0) + 1;
+      requestIdsRef.current[providerKey] = requestId;
+      setLocalhostFileLists((current) => ({
+        ...current,
+        [providerKey]: {
+          files: current[providerKey]?.files ?? [],
+          loading: true,
+        },
+      }));
       try {
         const files = await provider.listFiles();
-        setLocalhostFiles((current) => ({ ...current, [providerKey]: files }));
-      } catch {
-        // Best-effort: leave the previous listing (or empty) on failure.
+        if (
+          !mountedRef.current ||
+          requestIdsRef.current[providerKey] !== requestId
+        ) {
+          return;
+        }
+        setLocalhostFileLists((current) => ({
+          ...current,
+          [providerKey]: { files, loading: false },
+        }));
+      } catch (error) {
+        if (
+          !mountedRef.current ||
+          requestIdsRef.current[providerKey] !== requestId
+        ) {
+          return;
+        }
+        setLocalhostFileLists((current) => ({
+          ...current,
+          [providerKey]: {
+            files: current[providerKey]?.files ?? [],
+            loading: false,
+            error:
+              error instanceof Error ? error.message : t("common.genericError"),
+          },
+        }));
       }
     },
-    [providers],
+    [providers, t],
   );
 
   useEffect(() => {
@@ -126,6 +176,14 @@ export function ExplorerView({
           nodes={buildFileTree(inlineFiles)}
           activeUri={activeUri}
           dirtyUris={dirtyUris}
+          loading={sourceFilesQuery.isLoading}
+          error={
+            sourceFilesQuery.error instanceof Error
+              ? sourceFilesQuery.error.message
+              : sourceFilesQuery.error
+                ? "Could not load design files" /* i18n-ignore */
+                : undefined
+          }
           focusToken={
             focusOwnerKey === inlineProviderKey ? explorerFocusToken : 0
           }
@@ -134,22 +192,27 @@ export function ExplorerView({
           onRequestLocalWriteConsent={onRequestLocalWriteConsent}
         />
       ) : null}
-      {localhostProviders.map((provider) => (
-        <FileTree
-          key={provider.key}
-          providerKey={provider.key}
-          providerLabel={`LOCAL FILES — ${provider.label}` /* i18n-ignore */}
-          providerTitle={provider.rootPath}
-          capabilities={provider.capabilities}
-          nodes={buildFileTree(localhostFiles[provider.key] ?? [])}
-          activeUri={activeUri}
-          dirtyUris={dirtyUris}
-          focusToken={focusOwnerKey === provider.key ? explorerFocusToken : 0}
-          registerRef={() => {}}
-          onRefresh={() => void loadLocalhostFiles(provider.key)}
-          onRequestLocalWriteConsent={onRequestLocalWriteConsent}
-        />
-      ))}
+      {localhostProviders.map((provider) => {
+        const fileList = localhostFileLists[provider.key];
+        return (
+          <FileTree
+            key={provider.key}
+            providerKey={provider.key}
+            providerLabel={`LOCAL FILES — ${provider.label}` /* i18n-ignore */}
+            providerTitle={provider.rootPath}
+            capabilities={provider.capabilities}
+            nodes={buildFileTree(fileList?.files ?? [])}
+            activeUri={activeUri}
+            dirtyUris={dirtyUris}
+            loading={fileList?.loading ?? true}
+            error={fileList?.error}
+            focusToken={focusOwnerKey === provider.key ? explorerFocusToken : 0}
+            registerRef={() => {}}
+            onRefresh={() => void loadLocalhostFiles(provider.key)}
+            onRequestLocalWriteConsent={onRequestLocalWriteConsent}
+          />
+        );
+      })}
       {!inlineFiles.length &&
       localhostProviders.length === 0 &&
       !sourceFilesQuery.isLoading ? (

package/corpus/templates/design/app/components/design/code-workbench/explorer/FileTree.tsx

@@ -2,6 +2,7 @@ import {
   IconChevronDown,
   IconChevronRight,
   IconFold,
+  IconLoader2,
   IconPlus,
   IconRefresh,
 } from "@tabler/icons-react";
@@ -53,6 +54,8 @@ interface FileTreeProps {
   nodes: TreeNode[];
   activeUri: string | null;
   dirtyUris: ReadonlySet<string>;
+  loading?: boolean;
+  error?: string;
   focusToken: number;
   registerRef: (element: HTMLDivElement | null) => void;
   onRefresh: () => void;
@@ -75,6 +78,8 @@ export function FileTree({
   nodes,
   activeUri,
   dirtyUris,
+  loading = false,
+  error,
   focusToken,
   registerRef,
   onRefresh,
@@ -343,6 +348,32 @@ export function FileTree({
           if (node) handleRowKeyDown(event, node, index);
         }}
       >
+        {error ? (
+          <div
+            role="status"
+            data-testid={`design-code-file-list-error-${providerKey}`}
+            className="mx-1 my-1 rounded-[5px] border border-border bg-[var(--workbench-editor-bg)] px-2 py-2 text-[11px] text-[var(--workbench-muted-fg)]"
+          >
+            <p className="break-words">{error}</p>
+            <button
+              type="button"
+              className="mt-1 cursor-pointer font-medium text-[var(--workbench-accent)] hover:underline"
+              onClick={onRefresh}
+            >
+              {"Try again" /* i18n-ignore */}
+            </button>
+          </div>
+        ) : null}
+        {loading && rows.length === 0 ? (
+          <div
+            role="status"
+            data-testid={`design-code-file-list-loading-${providerKey}`}
+            className="flex items-center gap-1.5 px-2 py-2 text-[11px] text-[var(--workbench-muted-fg)]"
+          >
+            <IconLoader2 className="size-3 animate-spin" />
+            <span>{"Loading files…" /* i18n-ignore */}</span>
+          </div>
+        ) : null}
         {rows.map((row, index) => {
           const uri = workbenchUri(providerKey, row.path);
           const isActive = activeUri === uri;
@@ -489,6 +520,11 @@ export function FileTree({
             </ContextMenu>
           );
         })}
+        {!loading && !error && rows.length === 0 ? (
+          <p className="px-2 py-2 text-[11px] text-[var(--workbench-muted-fg)]">
+            {"No files found" /* i18n-ignore */}
+          </p>
+        ) : null}
         {pendingNewFile ? (
           <div
             className="flex h-6 items-center gap-1 rounded-[5px] pr-1 text-[12px]"

package/corpus/templates/design/app/components/design/code-workbench/store.tsx

@@ -362,7 +362,7 @@ export function WorkbenchProvider({
       dispatch({
         type: "SET_BUFFER",
         meta: existingMeta
-          ? { ...existingMeta, uri, loading: true }
+          ? { ...existingMeta, uri, loading: true, error: undefined }
           : {
               uri,
               loading: true,
@@ -370,6 +370,7 @@ export function WorkbenchProvider({
               conflict: false,
               saving: false,
               readonly: false,
+              error: undefined,
             },
       });
       try {