@elaraai/e3-ui-components 0.0.1-beta.16 → 0.0.1-beta.17

package/dist/components/InputPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputPreview.d.ts","sourceRoot":"","sources":["../../src/components/InputPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AA2BH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAO7D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDA+KuD,CAAC"}
+{"version":3,"file":"InputPreview.d.ts","sourceRoot":"","sources":["../../src/components/InputPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AA2BH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAO7D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDAuLuD,CAAC"}

package/dist/components/TaskLogs.d.ts

@@ -0,0 +1,13 @@
+import { RequestOptions } from '@elaraai/e3-api-client';
+export interface TaskLogsProps {
+    apiUrl: string;
+    repo: string;
+    workspace: string;
+    task: string;
+    requestOptions?: RequestOptions;
+}
+/**
+ * Renders a virtualized log viewer for a task's stdout/stderr.
+ */
+export declare const TaskLogs: import('react').NamedExoticComponent<TaskLogsProps>;
+//# sourceMappingURL=TaskLogs.d.ts.map

package/dist/components/TaskLogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskLogs.d.ts","sourceRoot":"","sources":["../../src/components/TaskLogs.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,qDA4BnB,CAAC"}

package/dist/components/TaskPreview.d.ts

@@ -9,8 +9,7 @@ export interface TaskPreviewProps {
 }
 /**
  * Renders a preview of a task's output and logs.
- * Decodes Beast2 data and renders as an East UI component if possible,
- * with a virtualized log viewer for stdout/stderr.
+ * Composes TaskUI/TaskValue for output and TaskLogs for stdout/stderr.
  */
 export declare const TaskPreview: import('react').NamedExoticComponent<TaskPreviewProps>;
 //# sourceMappingURL=TaskPreview.d.ts.map

package/dist/components/TaskPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskPreview.d.ts","sourceRoot":"","sources":["../../src/components/TaskPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAiCH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAO7D,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,wDA6NkH,CAAC"}
+{"version":3,"file":"TaskPreview.d.ts","sourceRoot":"","sources":["../../src/components/TaskPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAaH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAI7D,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,wDAsEkH,CAAC"}

package/dist/components/TaskUI.d.ts

@@ -0,0 +1,15 @@
+import { RequestOptions } from '@elaraai/e3-api-client';
+export interface TaskUIProps {
+    apiUrl: string;
+    repo: string;
+    workspace: string;
+    task: string;
+    output: string;
+    requestOptions?: RequestOptions;
+}
+/**
+ * Renders a task's output as an East UI component.
+ * Decodes Beast2 data and renders it using EastChakraComponent.
+ */
+export declare const TaskUI: import('react').NamedExoticComponent<TaskUIProps>;
+//# sourceMappingURL=TaskUI.d.ts.map

package/dist/components/TaskUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskUI.d.ts","sourceRoot":"","sources":["../../src/components/TaskUI.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAsBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAI7D,MAAM,WAAW,WAAW;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAUD;;;GAGG;AACH,eAAO,MAAM,MAAM,mDAqHjB,CAAC"}

package/dist/components/TaskValue.d.ts

@@ -0,0 +1,15 @@
+import { RequestOptions } from '@elaraai/e3-api-client';
+export interface TaskValueProps {
+    apiUrl: string;
+    repo: string;
+    workspace: string;
+    task: string;
+    output: string;
+    requestOptions?: RequestOptions;
+}
+/**
+ * Renders a preview of a task's non-UI output value.
+ * Decodes Beast2 data and displays it using EastValueViewer.
+ */
+export declare const TaskValue: import('react').NamedExoticComponent<TaskValueProps>;
+//# sourceMappingURL=TaskValue.d.ts.map

package/dist/components/TaskValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskValue.d.ts","sourceRoot":"","sources":["../../src/components/TaskValue.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAW7D,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC;AAUD;;;GAGG;AACH,eAAO,MAAM,SAAS,sDAwEpB,CAAC"}

package/dist/components/index.d.ts

@@ -4,6 +4,9 @@
  */
 export { InputPreview, type InputPreviewProps } from './InputPreview.js';
 export { TaskPreview, type TaskPreviewProps } from './TaskPreview.js';
+export { TaskLogs, type TaskLogsProps } from './TaskLogs.js';
+export { TaskUI, type TaskUIProps } from './TaskUI.js';
+export { TaskValue, type TaskValueProps } from './TaskValue.js';
 export { StatusDisplay, type StatusDisplayProps } from './StatusDisplay.js';
 export { EastValueViewer, type EastValueViewerProps } from './EastValueViewer.js';
 export { VirtualizedLogViewer, type VirtualizedLogViewerProps } from './VirtualizedLogViewer.js';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.cjs

@@ -4861,7 +4861,7 @@ function EastValueViewer({ type, value }) {
     }
   );
 }
-const platformImplementations$1 = [...eastUiComponents.StateImpl, ...eastUiComponents.DatasetImpl, ...eastUiComponents.OverlayImpl];
+const platformImplementations$2 = [...eastUiComponents.StateImpl, ...eastUiComponents.DatasetImpl, ...eastUiComponents.OverlayImpl];
 const InputPreview = React.memo(function InputPreview2({
   apiUrl,
   repo,
@@ -4874,21 +4874,27 @@ const InputPreview = React.memo(function InputPreview2({
     () => (preview == null ? void 0 : preview.value.type) === "some" ? preview.value.value : void 0,
     [preview]
   );
+  const isUIComponent = React.useMemo(() => {
+    if (!preview) return false;
+    try {
+      return east.isTypeValueEqual(preview.type, east.toEastTypeValue(eastUi.UIComponentType));
+    } catch {
+      return false;
+    }
+  }, [preview]);
   const decode = React.useMemo(() => {
     if (!output) return { type: "none" };
+    if (!isUIComponent) return { type: "other" };
     try {
-      const { type } = east.decodeBeast2(output);
-      if (!east.isTypeValueEqual(type, east.toEastTypeValue(eastUi.UIComponentType))) return { type: "other" };
-      try {
-        const decoder = east.decodeBeast2For(eastUi.UIComponentType, { platform: platformImplementations$1 });
-        return { type: "ui", value: decoder(output) };
-      } catch (e2) {
-        return { type: "ui-error", error: e2 instanceof Error ? e2 : new Error(String(e2)) };
-      }
-    } catch {
-      return { type: "other" };
+      const decoder = east.decodeBeast2For(eastUi.UIComponentType, {
+        platform: platformImplementations$2,
+        skipTypeCheck: true
+      });
+      return { type: "ui", value: decoder(output) };
+    } catch (e2) {
+      return { type: "ui-error", error: e2 instanceof Error ? e2 : new Error(String(e2)) };
     }
-  }, [output]);
+  }, [output, isUIComponent]);
   const store = React.useMemo(() => eastUiComponents.createEastStore(), [decode]);
   const displayName = path.replace(/^\.inputs\./, "");
   const hasData = React.useMemo(() => {
@@ -5357,55 +5363,6 @@ function VirtualizedLogViewer({ content, tabs }) {
     }
   );
 }
-const MAX_DOWNLOAD_SIZE = 50 * 1024 * 1024;
-function useTaskOutputPreview(apiUrl, repo, workspace, outputPath, requestOptions, queryOptions) {
-  const pathParts = React.useMemo(
-    () => (outputPath == null ? void 0 : outputPath.split(".").map((v2) => east.variant("field", v2))) ?? [],
-    [outputPath]
-  );
-  const status = reactQuery.useQuery({
-    queryKey: ["taskOutputStatus", apiUrl, repo, workspace, outputPath],
-    queryFn: () => e3ApiClient.datasetGetStatus(apiUrl, repo, workspace, pathParts, requestOptions ?? { token: null }),
-    enabled: !!workspace && !!outputPath,
-    refetchInterval: 1e3,
-    ...queryOptions
-  });
-  const hash = React.useMemo(() => {
-    var _a, _b;
-    return ((_b = (_a = status.data) == null ? void 0 : _a.hash) == null ? void 0 : _b.type) === "some" ? status.data.hash.value : null;
-  }, [status.data]);
-  const hasData = React.useMemo(() => {
-    var _a;
-    return ((_a = status.data) == null ? void 0 : _a.refType) === "value" && hash !== null;
-  }, [status.data, hash]);
-  const size = React.useMemo(() => {
-    var _a, _b;
-    return ((_b = (_a = status.data) == null ? void 0 : _a.size) == null ? void 0 : _b.type) === "some" ? status.data.size.value : null;
-  }, [status.data]);
-  const isOversized = React.useMemo(() => size !== null && size > MAX_DOWNLOAD_SIZE, [size]);
-  const data = reactQuery.useQuery({
-    queryKey: ["taskOutput", apiUrl, repo, workspace, outputPath, hash],
-    queryFn: () => e3ApiClient.datasetGet(apiUrl, repo, workspace, pathParts, requestOptions ?? { token: null }),
-    enabled: hasData && !isOversized,
-    ...queryOptions
-  });
-  const preview = React.useMemo(() => {
-    if (!status.data) return void 0;
-    return {
-      path: status.data.path,
-      type: status.data.type,
-      refType: status.data.refType,
-      hash: status.data.hash,
-      size: status.data.size,
-      value: data.data ? east.some(data.data.data) : east.none
-    };
-  }, [status.data, data.data]);
-  return {
-    data: preview,
-    isLoading: status.isLoading || status.isSuccess && hasData && !isOversized && data.isLoading,
-    error: status.error ?? data.error ?? null
-  };
-}
 const CHUNK_SIZE = 64 * 1024;
 const MAX_TOTAL_SIZE = 10 * 1024 * 1024;
 async function fetchAllLogs(apiUrl, repo, workspace, taskName, stream, requestOptions) {
@@ -5452,138 +5409,254 @@ function useTaskLogs(apiUrl, repo, workspace, taskName, stream = "stdout", reque
     ...queryOptions
   });
 }
-const platformImplementations = [...eastUiComponents.StateImpl, ...eastUiComponents.DatasetImpl, ...eastUiComponents.OverlayImpl];
-const TaskPreview = React.memo(function TaskPreview2({
+const TaskLogs = React.memo(function TaskLogs2({
   apiUrl,
   repo,
   workspace,
   task,
-  output,
   requestOptions
 }) {
-  const { data: preview, isLoading, error } = useTaskOutputPreview(apiUrl, repo, workspace, output, requestOptions);
-  const rawOutput = React.useMemo(
-    () => (preview == null ? void 0 : preview.value.type) === "some" ? preview.value.value : void 0,
-    [preview]
-  );
   const { data: stdout } = useTaskLogs(apiUrl, repo, workspace, task, "stdout", requestOptions);
   const { data: stderr } = useTaskLogs(apiUrl, repo, workspace, task, "stderr", requestOptions);
-  const ir = React.useMemo(() => {
-    if (!rawOutput) return null;
-    try {
-      const { type } = east.decodeBeast2(rawOutput);
-      if (east.isTypeValueEqual(type, east.toEastTypeValue(eastUi.UIComponentType))) {
-        const decoder = east.decodeBeast2For(eastUi.UIComponentType, { platform: platformImplementations });
-        const value = decoder(rawOutput);
-        return value;
-      } else {
-        return null;
-      }
-    } catch {
-      return null;
-    }
-  }, [rawOutput]);
-  const store = React.useMemo(() => eastUiComponents.createEastStore(), [ir]);
   const stdoutContent = React.useMemo(() => (stdout == null ? void 0 : stdout.data) ?? "", [stdout == null ? void 0 : stdout.data]);
   const stderrContent = React.useMemo(() => (stderr == null ? void 0 : stderr.data) ?? "", [stderr == null ? void 0 : stderr.data]);
   const tabs = react.useTabs({
     defaultValue: "stdout"
   });
-  const [viewMode, setViewMode] = React.useState(null);
-  React.useEffect(() => {
-    if (isLoading) return;
-    setViewMode((prev) => {
-      if (prev !== null) return prev;
-      return ir === null ? "logs" : "output";
-    });
-  }, [isLoading, ir]);
+  const activeLogContent = React.useMemo(
+    () => tabs.value === "stderr" ? stderrContent : stdoutContent,
+    [tabs.value, stderrContent, stdoutContent]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    VirtualizedLogViewer,
+    {
+      content: activeLogContent,
+      tabs
+    }
+  );
+});
+const MAX_DOWNLOAD_SIZE = 50 * 1024 * 1024;
+function useTaskOutputPreview(apiUrl, repo, workspace, outputPath, requestOptions, queryOptions) {
+  const pathParts = React.useMemo(
+    () => (outputPath == null ? void 0 : outputPath.split(".").map((v2) => east.variant("field", v2))) ?? [],
+    [outputPath]
+  );
+  const status = reactQuery.useQuery({
+    queryKey: ["taskOutputStatus", apiUrl, repo, workspace, outputPath],
+    queryFn: () => e3ApiClient.datasetGetStatus(apiUrl, repo, workspace, pathParts, requestOptions ?? { token: null }),
+    enabled: !!workspace && !!outputPath,
+    refetchInterval: 1e3,
+    ...queryOptions
+  });
+  const hash = React.useMemo(() => {
+    var _a, _b;
+    return ((_b = (_a = status.data) == null ? void 0 : _a.hash) == null ? void 0 : _b.type) === "some" ? status.data.hash.value : null;
+  }, [status.data]);
   const hasData = React.useMemo(() => {
     var _a;
-    return (preview == null ? void 0 : preview.refType) === "value" && ((_a = preview == null ? void 0 : preview.hash) == null ? void 0 : _a.type) === "some";
-  }, [preview]);
-  const outputPanel = React.useMemo(() => {
-    if (preview && !hasData) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        StatusDisplay,
-        {
-          variant: "info",
-          title: "No output available",
-          message: "Run the task to see output"
-        }
-      );
-    }
-    if (isLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        StatusDisplay,
-        {
-          variant: "loading",
-          title: "Loading output..."
-        }
-      );
+    return ((_a = status.data) == null ? void 0 : _a.refType) === "value" && hash !== null;
+  }, [status.data, hash]);
+  const size = React.useMemo(() => {
+    var _a, _b;
+    return ((_b = (_a = status.data) == null ? void 0 : _a.size) == null ? void 0 : _b.type) === "some" ? status.data.size.value : null;
+  }, [status.data]);
+  const isOversized = React.useMemo(() => size !== null && size > MAX_DOWNLOAD_SIZE, [size]);
+  const data = reactQuery.useQuery({
+    queryKey: ["taskOutput", apiUrl, repo, workspace, outputPath, hash],
+    queryFn: () => e3ApiClient.datasetGet(apiUrl, repo, workspace, pathParts, requestOptions ?? { token: null }),
+    enabled: hasData && !isOversized,
+    ...queryOptions
+  });
+  const preview = React.useMemo(() => {
+    if (!status.data) return void 0;
+    return {
+      path: status.data.path,
+      type: status.data.type,
+      refType: status.data.refType,
+      hash: status.data.hash,
+      size: status.data.size,
+      value: data.data ? east.some(data.data.data) : east.none
+    };
+  }, [status.data, data.data]);
+  return {
+    data: preview,
+    isLoading: status.isLoading || status.isSuccess && hasData && !isOversized && data.isLoading,
+    error: status.error ?? data.error ?? null
+  };
+}
+const platformImplementations$1 = [...eastUiComponents.StateImpl, ...eastUiComponents.DatasetImpl, ...eastUiComponents.OverlayImpl];
+const TaskValue = React.memo(function TaskValue2({
+  apiUrl,
+  repo,
+  workspace,
+  output,
+  requestOptions
+}) {
+  const { data: preview, isLoading, error } = useTaskOutputPreview(apiUrl, repo, workspace, output, requestOptions);
+  const previewState = React.useMemo(() => {
+    var _a;
+    if (!preview || isLoading) return { status: "loading" };
+    const hasData = preview.refType === "value" && ((_a = preview.hash) == null ? void 0 : _a.type) === "some";
+    if (!hasData) return { status: "no-data" };
+    if (preview.value.type === "none") {
+      return {
+        status: "oversized",
+        sizeBytes: Number(preview.size.type === "some" ? preview.size.value : 0)
+      };
     }
-    if (!preview) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        StatusDisplay,
-        {
-          variant: "info",
-          title: `No output available for task "${task}"`
-        }
-      );
+    const rawOutput = preview.value.value;
+    let decoder;
+    try {
+      decoder = east.decodeBeast2For(preview.type, {
+        platform: platformImplementations$1,
+        skipTypeCheck: true
+      });
+    } catch (e2) {
+      return {
+        status: "decode-error",
+        error: e2 instanceof Error ? e2.message : String(e2)
+      };
     }
-    if (preview.value.type === "none") {
-      const sizeBytes = Number(preview.size.type === "some" ? preview.size.value : 0);
+    return { status: "value", rawOutput, decoder };
+  }, [preview, isLoading]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Failed to load task output", details: error instanceof Error ? error.message : String(error) });
+  }
+  switch (previewState.status) {
+    case "loading":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "loading", title: "Loading output..." });
+    case "no-data":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "info", title: "No output available", message: "Run the task to see output" });
+    case "oversized":
       return /* @__PURE__ */ jsxRuntime.jsx(
         StatusDisplay,
         {
           variant: "warning",
           title: "Output too large to display",
-          message: `The task output is ${(sizeBytes / 1024 / 1024).toFixed(2)} MB, which exceeds the 10 MB display limit.`
+          message: `The task output is ${(previewState.sizeBytes / 1024 / 1024).toFixed(2)} MB, which exceeds the 10 MB display limit.`
         }
       );
-    }
-    if (ir !== null) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { height: "100%", overflow: "auto", p: "4", children: /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraComponent, { value: ir }) });
-    }
-    if (rawOutput && ir === null) {
+    case "decode-error":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Failed to render output", details: previewState.error });
+    case "value":
       try {
-        const decoded = east.decodeBeast2(rawOutput);
+        const decoded = previewState.decoder(previewState.rawOutput);
         return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { height: "100%", overflow: "auto", p: "4", children: /* @__PURE__ */ jsxRuntime.jsx(EastValueViewer, { type: decoded.type, value: decoded.value }) });
       } catch (e2) {
         const errorMessage = e2 instanceof Error ? e2.message : String(e2);
         return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Failed to render output", details: errorMessage });
       }
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StatusDisplay,
-      {
-        variant: "info",
-        title: `No output available for task "${task}"`
-      }
-    );
-  }, [preview, ir, task, isLoading, rawOutput, hasData]);
-  const activeLogContent = React.useMemo(() => tabs.value === "stderr" ? stderrContent : stdoutContent, [tabs.value, stderrContent, stdoutContent]);
-  const logsPanel = React.useMemo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      VirtualizedLogViewer,
-      {
-        content: activeLogContent,
-        tabs
-      }
-    );
-  }, [activeLogContent, tabs]);
-  if (viewMode === null) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StatusDisplay,
-      {
-        variant: "loading",
-        title: "Loading task..."
-      }
-    );
   }
+});
+const platformImplementations = [...eastUiComponents.StateImpl, ...eastUiComponents.DatasetImpl, ...eastUiComponents.OverlayImpl];
+const TaskUI = React.memo(function TaskUI2({
+  apiUrl,
+  repo,
+  workspace,
+  task,
+  output,
+  requestOptions
+}) {
+  const { data: preview, isLoading, error } = useTaskOutputPreview(apiUrl, repo, workspace, output, requestOptions);
+  const previewState = React.useMemo(() => {
+    var _a;
+    if (!preview || isLoading) return { status: "loading" };
+    const hasData = preview.refType === "value" && ((_a = preview.hash) == null ? void 0 : _a.type) === "some";
+    if (!hasData) return { status: "no-data" };
+    if (preview.value.type === "none") {
+      return {
+        status: "oversized",
+        sizeBytes: Number(preview.size.type === "some" ? preview.size.value : 0)
+      };
+    }
+    const rawOutput = preview.value.value;
+    const totalStart = performance.now();
+    let decoder;
+    try {
+      decoder = east.decodeBeast2For(preview.type, {
+        platform: platformImplementations,
+        skipTypeCheck: true
+      });
+    } catch (e2) {
+      return {
+        status: "decode-error",
+        error: e2 instanceof Error ? e2.message : String(e2)
+      };
+    }
+    const buildDecoderMs = performance.now() - totalStart;
+    let isUI = false;
+    try {
+      isUI = east.isTypeValueEqual(preview.type, east.toEastTypeValue(eastUi.UIComponentType));
+    } catch {
+    }
+    if (!isUI) {
+      return { status: "not-ui" };
+    }
+    try {
+      const decodeStart = performance.now();
+      const ir = decoder(rawOutput);
+      const decodeMs = performance.now() - decodeStart;
+      const totalMs = performance.now() - totalStart;
+      console.log(`[east-ui] decodeBeast2 total: ${totalMs.toFixed(1)}ms`);
+      console.log(`  buildDecoder: ${buildDecoderMs.toFixed(1)}ms, decode: ${decodeMs.toFixed(1)}ms`);
+      console.log(`  payload size: ${(rawOutput.length / 1024).toFixed(1)} KB`);
+      return { status: "ui", ir };
+    } catch (e2) {
+      return {
+        status: "decode-error",
+        error: e2 instanceof Error ? e2.message : String(e2)
+      };
+    }
+  }, [preview, isLoading]);
+  const store = React.useMemo(() => eastUiComponents.createEastStore(), []);
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Failed to load task output", details: error instanceof Error ? error.message : String(error) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastStoreProvider, { store, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden", children: [
+  const content = (() => {
+    switch (previewState.status) {
+      case "loading":
+        return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "loading", title: "Loading output..." });
+      case "no-data":
+        return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "info", title: "No output available", message: "Run the task to see output" });
+      case "oversized":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          StatusDisplay,
+          {
+            variant: "warning",
+            title: "Output too large to display",
+            message: `The task output is ${(previewState.sizeBytes / 1024 / 1024).toFixed(2)} MB, which exceeds the 10 MB display limit.`
+          }
+        );
+      case "ui":
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { height: "100%", overflow: "auto", p: "4", children: /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraComponent, { value: previewState.ir }) });
+      case "not-ui":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TaskValue,
+          {
+            apiUrl,
+            repo,
+            workspace,
+            task,
+            output,
+            ...requestOptions != null && { requestOptions }
+          }
+        );
+      case "decode-error":
+        return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Failed to render output", details: previewState.error });
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastStoreProvider, { store, children: content });
+});
+const TaskPreview = React.memo(function TaskPreview2({
+  apiUrl,
+  repo,
+  workspace,
+  task,
+  output,
+  requestOptions
+}) {
+  const [viewMode, setViewMode] = React.useState("output");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       react.Flex,
       {
@@ -5619,8 +5692,27 @@ const TaskPreview = React.memo(function TaskPreview2({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, overflow: "hidden", minHeight: 0, children: viewMode === "output" ? outputPanel : logsPanel })
-  ] }) });
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, overflow: "hidden", minHeight: 0, children: viewMode === "output" ? /* @__PURE__ */ jsxRuntime.jsx(
+      TaskUI,
+      {
+        apiUrl,
+        repo,
+        workspace,
+        task,
+        output,
+        ...requestOptions != null && { requestOptions }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      TaskLogs,
+      {
+        apiUrl,
+        repo,
+        workspace,
+        task,
+        ...requestOptions != null && { requestOptions }
+      }
+    ) })
+  ] });
 }, (prev, next) => prev.task === next.task && prev.repo === next.repo && prev.workspace === next.workspace && prev.output === next.output);
 exports.EastValueViewer = EastValueViewer;
 exports.ErrorBoundary = ErrorBoundary;