gloomberb 0.11.0 → 0.11.2

package/src/renderers/electrobun/view/styles.css

@@ -422,21 +422,121 @@ body.gloom-dragging [data-gloom-role="chart-surface"] {
   right: 16px;
   bottom: 16px;
   display: flex;
+  width: min(380px, calc(100vw - 32px));
   flex-direction: column;
   gap: 8px;
+  pointer-events: none;
   z-index: 10000;
 }
 .gloom-toast {
-  min-width: 260px;
-  max-width: 420px;
-  padding: 10px 12px;
-  border: 1px solid;
-  box-shadow: 0 12px 24px color-mix(in srgb, var(--gloom-bg) 28%, transparent);
+  --gloom-toast-accent: var(--gloom-border-focused);
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+  width: 100%;
+  padding: 11px 10px 11px 12px;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--gloom-toast-accent) 54%, var(--gloom-border));
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--gloom-panel) 94%, var(--gloom-bg));
+  color: var(--gloom-text);
+  box-shadow: 0 14px 32px color-mix(in srgb, var(--gloom-bg) 42%, transparent);
+  pointer-events: auto;
+}
+.gloom-toast[data-type="success"] { --gloom-toast-accent: var(--gloom-positive); }
+.gloom-toast[data-type="error"] { --gloom-toast-accent: var(--gloom-negative); }
+.gloom-toast[data-actionable="true"] {
+  cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms ease, background-color 120ms ease;
+}
+.gloom-toast[data-actionable="true"]:active { transform: scale(0.985); }
+.gloom-toast-indicator {
+  width: 8px;
+  height: 8px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--gloom-toast-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gloom-toast-accent) 14%, transparent);
+}
+.gloom-toast-content { min-width: 0; }
+.gloom-toast-heading {
+  display: flex;
+  min-width: 0;
+  margin-bottom: 2px;
+  align-items: baseline;
+  gap: 7px;
+}
+.gloom-toast-title {
+  overflow: hidden;
+  color: var(--gloom-text-bright);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gloom-toast-subtitle {
+  overflow: hidden;
+  color: var(--gloom-text-dim);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gloom-toast-body {
+  color: var(--gloom-text);
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+.gloom-toast-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.gloom-toast-action,
+.gloom-toast-dismiss {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--gloom-text-dim);
 }
 .gloom-toast-action {
-  margin-top: 8px;
-  padding: 4px 8px;
+  padding: 3px 7px;
+  border-color: color-mix(in srgb, var(--gloom-toast-accent) 42%, var(--gloom-border));
+  border-radius: 4px;
+  color: var(--gloom-text-bright);
+}
+.gloom-toast-dismiss {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  padding: 0;
   border-radius: 4px;
+  place-items: center;
+}
+.gloom-toast-dismiss svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-width: 1.5;
+}
+.gloom-toast-action:focus-visible,
+.gloom-toast-dismiss:focus-visible {
+  outline: 1px solid var(--gloom-border-focused);
+  outline-offset: 1px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .gloom-toast[data-actionable="true"]:hover {
+    border-color: var(--gloom-toast-accent);
+    background: color-mix(in srgb, var(--gloom-panel) 88%, var(--gloom-toast-accent));
+  }
+  .gloom-toast-action:hover,
+  .gloom-toast-dismiss:hover {
+    background: color-mix(in srgb, var(--gloom-text) 10%, transparent);
+    color: var(--gloom-text-bright);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gloom-toast[data-actionable="true"] { transition: none; }
+  .gloom-toast[data-actionable="true"]:active { transform: none; }
 }
 .gloom-dialog-backdrop {
   position: fixed;

package/src/renderers/electrobun/view/toast-host.test.tsx

@@ -0,0 +1,78 @@
+/** @jsxImportSource react */
+import { Window } from "happy-dom";
+
+const testWindow = new Window({ url: "http://localhost" });
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  window: testWindow,
+  document: testWindow.document,
+  navigator: testWindow.navigator,
+  HTMLElement: testWindow.HTMLElement,
+  MouseEvent: testWindow.MouseEvent,
+});
+
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { useToastHost, type ToastHost } from "../../../ui/toast";
+import { WebToastHostProvider } from "./toast-host";
+
+let toastHost: ToastHost | null = null;
+
+function ToastViewport() {
+  const host = useToastHost();
+  toastHost = host;
+  const Viewport = host.Viewport;
+  return <Viewport />;
+}
+
+test("DOM notifications show context and open from the whole card", async () => {
+  const container = testWindow.document.createElement("div");
+  testWindow.document.body.appendChild(container);
+  const root = createRoot(container as unknown as HTMLElement);
+  let opened = 0;
+
+  await act(async () => {
+    root.render(
+      <WebToastHostProvider>
+        <ToastViewport />
+      </WebToastHostProvider>,
+    );
+  });
+  await act(async () => {
+    toastHost?.info("@bob mentioned you", {
+      title: "Gloomberb chat",
+      subtitle: "#everyone",
+      duration: 0,
+      action: { label: "Open", onClick: () => opened++ },
+    });
+  });
+
+  const toast = container.querySelector(".gloom-toast") as unknown as HTMLElement;
+  expect(toast.textContent).toContain("Gloomberb chat");
+  expect(toast.textContent).toContain("#everyone");
+  expect(toast.getAttribute("data-actionable")).toBe("true");
+
+  await act(async () => {
+    toast.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+  expect(opened).toBe(1);
+  expect(container.querySelector(".gloom-toast")).toBeNull();
+
+  await act(async () => {
+    toastHost?.info("Another message", {
+      duration: 0,
+      action: { label: "Open", onClick: () => opened++ },
+    });
+  });
+  const dismiss = container.querySelector(".gloom-toast-dismiss") as unknown as HTMLElement;
+  await act(async () => {
+    dismiss.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+  expect(opened).toBe(1);
+  expect(container.querySelector(".gloom-toast")).toBeNull();
+
+  await act(async () => root.unmount());
+  container.remove();
+  toastHost = null;
+});

package/src/renderers/electrobun/view/toast-host.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource react */
-import { useCallback, useMemo, useState, type CSSProperties, type ReactNode } from "react";
-import { colors } from "../../../theme/colors";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { ToastHostProvider, type ToastHost, type ToastOptions } from "../../../ui/toast";
 
 type WebToastType = "info" | "success" | "error";
@@ -9,33 +8,13 @@ interface ToastEntry {
   id: number;
   body: string;
   type: WebToastType;
+  title?: string;
+  subtitle?: string;
   action?: ToastOptions["action"];
 }
 
 let nextToastId = 1;
 
-function webToastBorderColor(type: WebToastType): string {
-  if (type === "success") return colors.positive;
-  if (type === "error") return colors.negative;
-  return colors.borderFocused;
-}
-
-function getToastStyle(type: WebToastType): CSSProperties {
-  return {
-    background: colors.panel,
-    borderColor: webToastBorderColor(type),
-    color: colors.text,
-  };
-}
-
-function getToastActionStyle(): CSSProperties {
-  return {
-    background: colors.selected,
-    border: `1px solid ${colors.borderFocused}`,
-    color: colors.selectedText,
-  };
-}
-
 export function WebToastHostProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
 
@@ -45,7 +24,14 @@ export function WebToastHostProvider({ children }: { children: ReactNode }) {
 
   const push = useCallback((type: ToastEntry["type"], body: string, options?: ToastOptions) => {
     const id = nextToastId++;
-    setToasts((current) => [...current, { id, type, body, action: options?.action }].slice(-6));
+    setToasts((current) => [...current, {
+      id,
+      type,
+      body,
+      title: options?.title,
+      subtitle: options?.subtitle,
+      action: options?.action,
+    }]);
     if (options?.duration !== 0) {
       setTimeout(() => dismiss(id), options?.duration ?? 4500);
     }
@@ -55,24 +41,64 @@ export function WebToastHostProvider({ children }: { children: ReactNode }) {
   const host = useMemo<ToastHost>(() => ({
     Viewport() {
       return (
-        <div className="gloom-toast-viewport">
-          {toasts.map((toast) => (
-            <div key={toast.id} className="gloom-toast" style={getToastStyle(toast.type)}>
-              <div>{toast.body}</div>
-              {toast.action && (
-                <button
-                  className="gloom-toast-action"
-                  style={getToastActionStyle()}
-                  onClick={() => {
-                    toast.action?.onClick();
-                    dismiss(toast.id);
-                  }}
-                >
-                  {toast.action.label}
-                </button>
-              )}
-            </div>
-          ))}
+        <div className="gloom-toast-viewport" aria-label="Notifications" aria-live="polite">
+          {toasts.map((toast) => {
+            const activate = () => {
+              if (!toast.action) return;
+              try {
+                toast.action.onClick();
+              } finally {
+                dismiss(toast.id);
+              }
+            };
+            return (
+              <div
+                key={toast.id}
+                className="gloom-toast"
+                data-type={toast.type}
+                data-actionable={toast.action ? "true" : "false"}
+                onClick={toast.action ? activate : undefined}
+              >
+                <span className="gloom-toast-indicator" aria-hidden="true" />
+                <div className="gloom-toast-content">
+                  {(toast.title || toast.subtitle) && (
+                    <div className="gloom-toast-heading">
+                      {toast.title && <span className="gloom-toast-title">{toast.title}</span>}
+                      {toast.subtitle && <span className="gloom-toast-subtitle">{toast.subtitle}</span>}
+                    </div>
+                  )}
+                  <div className="gloom-toast-body">{toast.body}</div>
+                </div>
+                <div className="gloom-toast-controls">
+                  {toast.action && (
+                    <button
+                      type="button"
+                      className="gloom-toast-action"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        activate();
+                      }}
+                    >
+                      {toast.action.label}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="gloom-toast-dismiss"
+                    aria-label="Dismiss notification"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      dismiss(toast.id);
+                    }}
+                  >
+                    <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true">
+                      <path d="M2.25 2.25 9.75 9.75M9.75 2.25 2.25 9.75" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            );
+          })}
         </div>
       );
     },

package/src/renderers/electrobun/view/ui-host.tsx

@@ -1,149 +1,18 @@
 /** @jsxImportSource react */
-import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
 import type { RendererHost, UiHost } from "../../../ui/host";
-import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "./input-host";
 import { backendRequest } from "./backend-rpc";
-import { WebDataTable } from "./data-table";
-import {
-  WebButton,
-  WebCheckbox,
-  WebDialogFrame,
-  WebListView,
-  WebMessageComposer,
-  WebPageStackView,
-  WebSegmentedControl,
-  WebTextField,
-} from "./desktop/controls";
-import { WebPopover } from "./desktop/popover";
-import { WebBox } from "./host/box";
-import { WebChartSurface } from "./host/chart-surface";
-import { WebInput, WebTextarea } from "./host/input";
-import { WebMediaSurface } from "./host/media-surface";
 import {
   NATIVE_CONTEXT_MENU_SUPPORTED,
   showDesktopContextMenu,
   startElectrobunWindowDrag,
 } from "./host/native";
-import { WebScrollBox } from "./host/scroll-box";
-import { cleanDomProps, commonStyle } from "./host/style";
-import { WebAsciiText, WebSpan, WebStrong, WebText, WebUnderline } from "./host/text";
-import { WebTabs } from "./host/tabs";
-
-function currentDesktopPlatform(): string {
-  const navigatorWithUserAgentData = navigator as Navigator & {
-    userAgentData?: { platform?: string };
-  };
-  return [
-    navigatorWithUserAgentData.userAgentData?.platform,
-    navigator.platform,
-    navigator.userAgent,
-  ].filter((value): value is string => Boolean(value)).join(" ");
-}
-
-const DESKTOP_PLATFORM = currentDesktopPlatform();
-const USES_WINDOWS_CONTROLS = !/(darwin|ipad|iphone|linux|mac)/i.test(DESKTOP_PLATFORM);
-const NON_WINDOWS_DESKTOP_PLATFORMS = /^(darwin|linux|freebsd|openbsd|aix|sunos)$/i;
-
-function usesWindowsWindowControls(desktopPlatform?: string): boolean {
-  const platform = desktopPlatform?.trim();
-  if (!platform) {
-    return USES_WINDOWS_CONTROLS;
-  }
-  if (/^win/i.test(platform)) {
-    return true;
-  }
-  if (NON_WINDOWS_DESKTOP_PLATFORMS.test(platform)) {
-    return false;
-  }
-  return USES_WINDOWS_CONTROLS;
-}
+import { createDomUiHost } from "./dom-ui-host";
 
 export function createWebUiHost(desktopPlatform?: string): UiHost {
-  const usesWindowsControls = usesWindowsWindowControls(desktopPlatform);
-
-  return {
-    kind: "desktop-web",
-    capabilities: {
-      nativePaneChrome: true,
-      titleBarOverlay: true,
-      precisePointer: true,
-      fractionalViewport: true,
-      cellWidthPx: WEB_CELL_WIDTH,
-      cellHeightPx: WEB_CELL_HEIGHT,
-      pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
-      canvasCharts: true,
-      nativeContextMenu: NATIVE_CONTEXT_MENU_SUPPORTED,
-      windowControls: usesWindowsControls ? "windows" : undefined,
-    },
-    Box: WebBox,
-    Text: WebText,
-    Span: WebSpan,
-    Strong: WebStrong,
-    Underline: WebUnderline,
-    ScrollBox: WebScrollBox,
-    Input: WebInput,
-    Textarea: WebTextarea,
-    Button: WebButton,
-    Checkbox: WebCheckbox,
-    Popover: WebPopover,
-    TextField: WebTextField,
-    MessageComposer: WebMessageComposer,
-    ListView: WebListView,
-    SegmentedControl: WebSegmentedControl,
-    DialogFrame: WebDialogFrame,
-    PageStackView: WebPageStackView,
-    DataTable: WebDataTable,
-    Tabs: WebTabs,
-    ChartSurface: WebChartSurface,
-    ImageSurface: ({ children, src, alt = "", objectFit = "contain", ...props }) => {
-      const imageSrc = typeof src === "string" ? src.trim() : "";
-      const [failed, setFailed] = useState(false);
-      useEffect(() => setFailed(false), [imageSrc]);
-      const baseStyle = commonStyle(props);
-      return (
-        <div
-          {...cleanDomProps(props)}
-          style={{
-            ...baseStyle,
-            overflow: baseStyle.overflow ?? "hidden",
-            ...(props.style as CSSProperties | undefined),
-          }}
-        >
-          {imageSrc && !failed ? (
-            <img
-              src={imageSrc}
-              alt={alt}
-              draggable={false}
-              onError={() => setFailed(true)}
-              style={{
-                width: "100%",
-                height: "100%",
-                display: "block",
-                objectFit,
-              }}
-            />
-          ) : children as ReactNode}
-        </div>
-      );
-    },
-    MediaSurface: WebMediaSurface,
-    SpinnerMark: ({ color, ...props }) => (
-      <span
-        {...cleanDomProps(props)}
-        aria-hidden="true"
-        style={{
-          color,
-          display: "inline-block",
-          width: "1ch",
-          animation: "gloom-spin 0.9s steps(8) infinite",
-          ...(props.style as CSSProperties | undefined),
-        }}
-      >
-        *
-      </span>
-    ),
-    AsciiText: (props) => <WebAsciiText {...props} desktopPlatform={desktopPlatform} />,
-  };
+  return createDomUiHost(desktopPlatform, {
+    nativeContextMenu: NATIVE_CONTEXT_MENU_SUPPORTED,
+    publicSharing: true,
+  });
 }
 
 export const webUiHost: UiHost = createWebUiHost();
@@ -189,7 +58,7 @@ export const webRendererHost: RendererHost = {
     try {
       return await navigator.clipboard.readText();
     } catch {
-      return await backendRequest("host.readText");
+      return backendRequest("host.readText");
     }
   },
   notify(notification) {

package/src/renderers/opentui/start.tsx

@@ -6,6 +6,7 @@ import { getDataDir, initDataDir, setConfigStoreHost } from "../../data/config/s
 import { applyLanguageFromConfig } from "../../i18n";
 import * as nodeConfigStoreHost from "../../data/config/store/node";
 import { loadExternalPlugins } from "../../plugins/loader";
+import { getLoadablePlugins } from "../../plugins/catalog";
 import { OpenTuiInputHostProvider } from "./input-host";
 import { debugLog } from "../../utils/debug-log";
 import { UiHostProvider } from "../../ui/host";
@@ -143,6 +144,7 @@ export async function startOpenTuiApp(options: StartOpenTuiAppOptions = {}): Pro
                 config={config}
                 servicesFactory={createAppServices}
                 externalPlugins={externalPlugins}
+                plugins={getLoadablePlugins(externalPlugins)}
                 cliLaunchRequest={cliLaunchRequest}
                 remoteControlAdapter={remoteControlAdapter}
               />

package/src/renderers/share/layout-view.test.tsx

@@ -0,0 +1,58 @@
+import { expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { LayoutMarketplaceEntry } from "../../layout-marketplace/payload";
+import { LayoutShareView } from "./layout-view";
+
+const entry: LayoutMarketplaceEntry = {
+  id: "0123456789abcdef0123456789abcdef",
+  name: "Social <script>alert(1)</script> Desk",
+  schemaVersion: 2,
+  sourceConfigVersion: 21,
+  layout: {
+    dockRoot: {
+      kind: "split",
+      axis: "horizontal",
+      ratio: 0.6,
+      first: { kind: "pane", instanceId: "p1" },
+      second: { kind: "pane", instanceId: "p2" },
+    },
+    instances: [
+      {
+        instanceId: "p1",
+        paneId: "twitter-feed",
+        params: { query: "$NVDA <img src=x onerror=alert(1)>" },
+      },
+      {
+        instanceId: "p2",
+        paneId: "chart-composer",
+        binding: { kind: "fixed", symbol: "NVDA" },
+      },
+    ],
+    floating: [],
+    detached: [],
+  },
+  paneState: {},
+  author: { username: "analyst", displayName: "Analyst" },
+  publishedAt: "2026-08-27T00:00:00.000Z",
+};
+
+test("shared layout renders a safe workspace preview and live-copy CTA", () => {
+  const html = renderToStaticMarkup(
+    <LayoutShareView
+      entry={entry}
+      openLiveUrl="https://term.gloom.sh/?layout=0123456789abcdef0123456789abcdef"
+    />,
+  );
+
+  expect(html).toContain("Shared via Gloomberb");
+  expect(html).toContain("X Feed");
+  expect(html).toContain("Chart");
+  expect(html).toContain("$NVDA");
+  expect(html).toContain("Use this layout");
+  expect(html).toContain("independent, editable copy");
+  expect(html).toContain('href="https://term.gloom.sh/?layout=0123456789abcdef0123456789abcdef"');
+  expect(html).not.toContain("<script>");
+  expect(html).not.toContain("<img");
+  expect(html).toContain("&lt;script&gt;");
+  expect(html).toContain("&lt;img");
+});