@nextclaw/ui 0.25.4 → 0.26.1

package/src/shared/components/workbench/workbench-surface.tsx

@@ -0,0 +1,401 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+import { useWorkbenchSurfaceStore } from "./stores/workbench-surface.store";
+import {
+  DEFAULT_WORKBENCH_SURFACE,
+  type WorkbenchResizeEdge,
+} from "./types/workbench-surface.types";
+import type { WorkbenchSurfaceManager } from "./managers/workbench-surface.manager";
+import { WorkbenchSurfaceToolbar } from "./workbench-surface-toolbar";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+
+type WorkbenchSurfaceProps = {
+  id: string;
+  manager: WorkbenchSurfaceManager;
+  title: string;
+  children: ReactNode;
+  navigation?: ReactNode;
+  icon?: ReactNode;
+  onClose: () => void;
+  closeLabel?: string;
+  onPlace?: () => void;
+  onOpenMain?: () => void;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  onWidthCommit?: (width: number) => void;
+  fullscreen?: boolean;
+  hidden?: boolean;
+  testId?: string;
+  className?: string;
+  focusOnOpen?: boolean;
+};
+
+const EDGE_CLASSES: Record<WorkbenchResizeEdge, string> = {
+  left: "left-0 top-3 bottom-3 w-1.5 cursor-ew-resize",
+  right: "right-0 top-3 bottom-3 w-1.5 cursor-ew-resize",
+  top: "top-0 left-3 right-3 h-1.5 cursor-ns-resize",
+  bottom: "bottom-0 left-3 right-3 h-1.5 cursor-ns-resize",
+  "top-left": "left-0 top-0 h-3 w-3 cursor-nwse-resize",
+  "top-right": "right-0 top-0 h-3 w-3 cursor-nesw-resize",
+  "bottom-left": "left-0 bottom-0 h-3 w-3 cursor-nesw-resize",
+  "bottom-right": "right-0 bottom-0 h-3 w-3 cursor-nwse-resize",
+};
+const viewport = () => ({
+  width: window.innerWidth,
+  height: window.innerHeight,
+});
+const blocksDrag = (target: EventTarget | null) =>
+  target instanceof Element &&
+  Boolean(
+    target.closest(
+      'button, a, input, textarea, select, [role="menu"], [data-compact-tab-item]',
+    ),
+  );
+
+/** One stable DOM parent across dock/float/maximize/collapse. Content never owns window mechanics. */
+export function WorkbenchSurface({
+  id,
+  manager,
+  title,
+  icon,
+  navigation,
+  children,
+  onClose,
+  closeLabel = t("workbenchCloseView"),
+  onPlace,
+  onOpenMain,
+  width = 480,
+  minWidth = 320,
+  maxWidth = 960,
+  onWidthCommit,
+  fullscreen = false,
+  hidden = false,
+  testId,
+  className,
+  focusOnOpen = false,
+}: WorkbenchSurfaceProps) {
+  const state = useWorkbenchSurfaceStore(
+    (store) => store.surfaces[id] ?? DEFAULT_WORKBENCH_SURFACE,
+  );
+  const panelRef = useRef<HTMLElement>(null);
+  const interactionCleanup = useRef<(() => void) | null>(null);
+  const openerRef = useRef<HTMLElement | null>(null);
+  const [compact, setCompact] = useState(() => window.innerWidth < 768);
+  const [interacting, setInteracting] = useState(false);
+  const [dragWidth, setDragWidth] = useState<number | null>(null);
+  const isCompact = compact || fullscreen;
+  const floating = state.placement === "floating";
+  const overlay = isCompact || state.maximized;
+
+  useEffect(() => {
+    openerRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    if (focusOnOpen) panelRef.current?.focus();
+    const onResize = () => {
+      setCompact(window.innerWidth < 768);
+      manager.constrain(id, viewport());
+    };
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      interactionCleanup.current?.();
+    };
+  }, [id, manager, focusOnOpen]);
+
+  useEffect(() => {
+    manager.setVisible(id, !hidden);
+    return () => manager.setVisible(id, false);
+  }, [hidden, id, manager]);
+
+  const focusControl = () => panelRef.current?.focus();
+  const close = () => {
+    onClose();
+    if (
+      openerRef.current?.isConnected &&
+      !panelRef.current?.contains(openerRef.current)
+    )
+      openerRef.current.focus();
+  };
+
+  const startInteraction = (
+    event: ReactPointerEvent<HTMLElement>,
+    edge?: WorkbenchResizeEdge | "dock",
+  ) => {
+    if (
+      event.button !== 0 ||
+      overlay ||
+      state.minimized ||
+      (!edge && blocksDrag(event.target))
+    )
+      return;
+    if (!edge && !floating) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    interactionCleanup.current?.();
+    manager.focus(id);
+    setInteracting(true);
+    const start = {
+      x: event.clientX,
+      y: event.clientY,
+      rect: state.rect,
+      width,
+    };
+    let nextWidth = width;
+    const move = (next: PointerEvent) => {
+      const dx = next.clientX - start.x;
+      const dy = next.clientY - start.y;
+      if (edge === "dock") {
+        nextWidth = Math.max(
+          Math.min(minWidth, window.innerWidth),
+          Math.min(maxWidth, window.innerWidth, start.width - dx),
+        );
+        setDragWidth(nextWidth);
+      } else if (edge) manager.resize(id, start.rect, edge, dx, dy, viewport());
+      else manager.move(id, start.rect, dx, dy, viewport());
+    };
+    const cleanup = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+    const end = () => {
+      cleanup();
+      interactionCleanup.current = null;
+      setInteracting(false);
+      setDragWidth(null);
+      if (edge === "dock") onWidthCommit?.(nextWidth);
+    };
+    interactionCleanup.current = cleanup;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+  };
+
+  const minimizedIndex = useWorkbenchSurfaceStore((store) =>
+    store.visibleSurfaceIds
+      .filter((key) => store.surfaces[key]?.minimized)
+      .sort()
+      .indexOf(id),
+  );
+  const layer = useWorkbenchSurfaceStore(
+    (store) =>
+      store.visibleSurfaceIds.filter(
+        (key) => (store.surfaces[key]?.layer ?? 0) <= state.layer,
+      ).length,
+  );
+  const style: CSSProperties = state.minimized
+    ? {
+        position: "fixed",
+        bottom: 12 + Math.max(0, minimizedIndex) * 48,
+        right: 12,
+        width: "min(360px, calc(100vw - 24px))",
+        zIndex: 50 + layer,
+      }
+    : overlay
+      ? {
+          position: "fixed",
+          inset: 0,
+          width: "100%",
+          height: "100dvh",
+          zIndex: 50 + layer,
+        }
+      : floating
+        ? {
+            position: "fixed",
+            left: state.rect.x,
+            top: state.rect.y,
+            width: state.rect.w,
+            height: state.rect.h,
+            zIndex: 50 + layer,
+          }
+        : { width: dragWidth ?? width, height: "100%" };
+
+  return (
+    <aside
+      ref={panelRef}
+      role="region"
+      aria-label={title}
+      tabIndex={-1}
+      hidden={hidden}
+      data-testid={testId}
+      data-workbench-surface={id}
+      data-placement={state.placement}
+      data-maximized={state.maximized || undefined}
+      data-minimized={state.minimized || undefined}
+      data-theme-surface="workspace-panel"
+      className={cn(
+        "relative min-h-0 min-w-0 shrink-0 flex-col overflow-hidden bg-card text-card-foreground outline-none",
+        hidden ? "hidden" : "flex",
+        (floating || state.minimized) && !overlay
+          ? "rounded-xl border border-border shadow-2xl"
+          : "border-l border-border",
+        className,
+      )}
+      style={style}
+      onPointerDownCapture={() => manager.focus(id)}
+      onFocusCapture={() => manager.focus(id)}
+      onKeyDown={(event) => {
+        if (
+          event.key !== "Escape" ||
+          event.defaultPrevented ||
+          event.nativeEvent.isComposing
+        )
+          return;
+        if (state.maximized) {
+          event.stopPropagation();
+          manager.toggleMaximize(id);
+          focusControl();
+        } else if (floating && !state.minimized) {
+          event.stopPropagation();
+          manager.minimize(id);
+          focusControl();
+        }
+      }}
+    >
+      <header
+        className="flex min-h-10 shrink-0 select-none items-center gap-2 border-b border-border/60 bg-muted/30 px-2"
+        style={{ touchAction: floating ? "none" : undefined }}
+        onPointerDown={(event) => startInteraction(event)}
+        onDoubleClick={(event) => {
+          if (!isCompact && !blocksDrag(event.target))
+            manager.toggleMaximize(id);
+        }}
+      >
+        <div
+          hidden={state.minimized}
+          className={cn(
+            "min-w-0 flex-1",
+            state.minimized || !navigation ? "hidden" : "flex",
+          )}
+        >
+          {navigation}
+        </div>
+        <span
+          className={cn(
+            "flex min-w-0 flex-1 items-center gap-2 px-1 text-xs font-medium",
+            floating && !overlay && "cursor-grab active:cursor-grabbing",
+            navigation && !state.minimized && "hidden",
+          )}
+        >
+          {icon}
+          <span className="truncate">{title}</span>
+        </span>
+        <WorkbenchSurfaceToolbar
+          state={state}
+          compact={isCompact}
+          onPlace={
+            onPlace ??
+            (() => manager.place(id, floating ? "docked" : "floating"))
+          }
+          onMinimize={() => {
+            manager.minimize(id);
+            focusControl();
+          }}
+          onRestore={() => manager.restore(id)}
+          onMaximize={() => manager.toggleMaximize(id)}
+          onClose={close}
+          closeLabel={closeLabel}
+          onOpenMain={onOpenMain}
+        />
+      </header>
+      <div
+        hidden={state.minimized}
+        className={cn(
+          "min-h-0 min-w-0 flex-1 flex-col",
+          state.minimized ? "hidden" : "flex",
+        )}
+      >
+        {children}
+      </div>
+      {!overlay && !state.minimized && (
+        <WorkbenchResizeHandles
+          floating={floating}
+          width={dragWidth ?? width}
+          minWidth={minWidth}
+          maxWidth={maxWidth}
+          onWidthCommit={onWidthCommit}
+          onPointerDown={startInteraction}
+        />
+      )}
+      {interacting && (
+        <div
+          className="fixed inset-0 z-30"
+          data-workbench-interaction-shield=""
+        />
+      )}
+    </aside>
+  );
+}
+
+function WorkbenchResizeHandles({
+  floating,
+  width,
+  minWidth,
+  maxWidth,
+  onWidthCommit,
+  onPointerDown,
+}: {
+  floating: boolean;
+  width: number;
+  minWidth: number;
+  maxWidth: number;
+  onWidthCommit?: (width: number) => void;
+  onPointerDown: (
+    event: ReactPointerEvent<HTMLElement>,
+    edge: WorkbenchResizeEdge | "dock",
+  ) => void;
+}) {
+  return floating ? (
+    <>
+      {(Object.entries(EDGE_CLASSES) as [WorkbenchResizeEdge, string][]).map(
+        ([edge, classes]) => (
+          <div
+            key={edge}
+            data-workbench-resize={edge}
+            className={cn("absolute z-20 touch-none", classes)}
+            onPointerDown={(event) => onPointerDown(event, edge)}
+          />
+        ),
+      )}
+    </>
+  ) : onWidthCommit ? (
+    <div
+      role="separator"
+      aria-label={t("workbenchResize")}
+      aria-orientation="vertical"
+      aria-valuemin={minWidth}
+      aria-valuemax={maxWidth}
+      aria-valuenow={width}
+      tabIndex={0}
+      data-testid="resizable-right-panel-handle"
+      className="absolute bottom-0 left-0 top-0 z-20 w-1.5 cursor-ew-resize touch-none hover:bg-primary/20 focus-visible:bg-primary/30 focus-visible:outline-none"
+      onPointerDown={(event) => onPointerDown(event, "dock")}
+      onKeyDown={(event) => {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+          return;
+        event.preventDefault();
+        const next =
+          event.key === "Home"
+            ? minWidth
+            : event.key === "End"
+              ? maxWidth
+              : width + (event.key === "ArrowLeft" ? 24 : -24);
+        onWidthCommit(
+          Math.max(minWidth, Math.min(maxWidth, window.innerWidth, next)),
+        );
+      }}
+    />
+  ) : null;
+}

package/src/shared/hooks/use-panel-app-scroll-restoration.test.tsx

@@ -64,3 +64,22 @@ describe("usePanelAppScrollRestoration", () => {
     expect(postMessage).not.toHaveBeenCalled();
   });
 });
+
+it("keeps independent URL positions when navigating A to B and back to A", () => {
+  scrollRestorationManager.clear();
+  const view = render(<PanelAppFrame currentUrl="/a" />);
+  const frame = view.getByTestId('panel-app-frame') as HTMLIFrameElement;
+  const post = vi.spyOn(frame.contentWindow!, 'postMessage');
+  const record = (y: number) => window.dispatchEvent(new MessageEvent('message', {
+    source: frame.contentWindow, data: { type: PANEL_APP_SCROLL_RESTORATION_CONTRACT.scrollMessageType, version: PANEL_APP_SCROLL_RESTORATION_CONTRACT.version, target: { kind: 'document' }, x: 0, y },
+  }));
+  record(400);
+  view.rerender(<PanelAppFrame currentUrl="/b" />);
+  record(80);
+  view.rerender(<PanelAppFrame currentUrl="/a" />);
+  fireEvent.load(frame);
+  expect(post).toHaveBeenLastCalledWith(expect.objectContaining({ y: 400 }), '*');
+  view.rerender(<PanelAppFrame currentUrl="/b" />);
+  fireEvent.load(frame);
+  expect(post).toHaveBeenLastCalledWith(expect.objectContaining({ y: 80 }), '*');
+});

package/src/shared/hooks/use-panel-app-scroll-restoration.ts

@@ -74,13 +74,15 @@ export function usePanelAppScrollRestoration({
   isEnabled,
   restorationKey,
 }: UsePanelAppScrollRestorationParams) {
+  const routeKey = restorationKey && currentUrl ? JSON.stringify([restorationKey, currentUrl]) : null;
   useEffect(() => {
-    if (!currentUrl || !isEnabled || !restorationKey) return;
+    if (!currentUrl || !isEnabled || !routeKey) return;
+    const key = routeKey;
     const onMessage = (event: MessageEvent) => {
       if (event.source !== iframeRef.current?.contentWindow || !isScrollMessage(event.data)) {
         return;
       }
-      scrollRestorationManager.save(restorationKey, {
+      scrollRestorationManager.save(key, {
         x: event.data.x,
         y: event.data.y,
         payload: { currentUrl, target: event.data.target } satisfies PanelAppScrollSnapshot,
@@ -88,11 +90,11 @@ export function usePanelAppScrollRestoration({
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, [currentUrl, iframeRef, isEnabled, restorationKey]);
+  }, [currentUrl, iframeRef, isEnabled, routeKey]);
 
   return useCallback(() => {
-    if (!currentUrl || !isEnabled || !restorationKey) return;
-    const position = scrollRestorationManager.read(restorationKey);
+    if (!currentUrl || !isEnabled || !routeKey) return;
+    const position = scrollRestorationManager.read(routeKey);
     if (!position || !isPanelAppScrollSnapshot(position.payload) || position.payload.currentUrl !== currentUrl) {
       return;
     }
@@ -103,5 +105,5 @@ export function usePanelAppScrollRestoration({
       x: position.x,
       y: position.y,
     }, "*");
-  }, [currentUrl, iframeRef, isEnabled, restorationKey]);
+  }, [currentUrl, iframeRef, isEnabled, routeKey]);
 }

package/src/shared/hooks/use-scroll-restoration.test.tsx

@@ -1,5 +1,5 @@
-import { fireEvent, render } from "@testing-library/react";
-import { beforeEach, describe, expect, it } from "vitest";
+import { act, fireEvent, render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 import { scrollRestorationManager } from "@/shared/lib/navigation-history";
 
@@ -60,3 +60,40 @@ describe("useScrollRestoration", () => {
     expect(scrollRestorationManager.read("page:first")).toEqual({ x: 0, y: 144 });
   });
 });
+
+it("retries delayed content, preserves hidden reading, and yields to explicit user scrolling", () => {
+  scrollRestorationManager.clear();
+  let notifyResize = () => {};
+  vi.stubGlobal("ResizeObserver", class { constructor(callback: () => void) { notifyResize = callback; } observe = () => {}; disconnect = () => {}; });
+  let height = 0;
+  let position = 0;
+  const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollTop");
+  Object.defineProperty(HTMLElement.prototype, "scrollTop", { configurable: true, get: () => position, set: (value: number) => { position = Math.min(value, height); } });
+  try {
+    scrollRestorationManager.save("delayed", { x: 0, y: 400 });
+    const view = render(<ScrollSurface restorationKey="delayed" />);
+    const element = view.getByTestId("scroll-surface");
+    fireEvent.scroll(element);
+    expect(scrollRestorationManager.read("delayed")?.y).toBe(400);
+    height = 800;
+    act(() => notifyResize());
+    expect(element.scrollTop).toBe(400);
+    element.hidden = true;
+    element.scrollTop = 0;
+    fireEvent.scroll(element);
+    expect(scrollRestorationManager.read("delayed")?.y).toBe(400);
+    view.unmount();
+
+    height = 0;
+    const second = render(<ScrollSurface restorationKey="delayed" />);
+    fireEvent.wheel(second.getByTestId("scroll-surface"));
+    height = 800;
+    act(() => notifyResize());
+    expect(second.getByTestId("scroll-surface").scrollTop).toBe(0);
+    second.unmount();
+  } finally {
+    if (descriptor) Object.defineProperty(HTMLElement.prototype, "scrollTop", descriptor);
+    else Reflect.deleteProperty(HTMLElement.prototype, "scrollTop");
+    vi.unstubAllGlobals();
+  }
+});

package/src/shared/hooks/use-scroll-restoration.ts

@@ -1,8 +1,5 @@
-import { useCallback, useLayoutEffect, useRef, type RefObject, type UIEvent } from "react";
-import {
-  scrollRestorationManager,
-  type ScrollRestorationPosition,
-} from "@/shared/lib/navigation-history";
+import { useCallback, useLayoutEffect, useRef, type RefObject, type UIEvent } from 'react';
+import { scrollRestorationManager, type ScrollRestorationPosition } from '@/shared/lib/navigation-history';
 
 type UseScrollRestorationParams<T extends HTMLElement> = {
   restorationKey: string | null;
@@ -10,49 +7,52 @@ type UseScrollRestorationParams<T extends HTMLElement> = {
   isEnabled?: boolean;
 };
 
-/** Connects one DOM scroll surface to the shared in-memory navigation history. */
-export function useScrollRestoration<T extends HTMLElement>({
-  restorationKey,
-  scrollRef,
-  isEnabled = true,
-}: UseScrollRestorationParams<T>) {
+/** DOM bridge: retry after delayed layout, yield to user input, never save a loading-time zero. */
+export function useScrollRestoration<T extends HTMLElement>({ restorationKey, scrollRef, isEnabled = true }: UseScrollRestorationParams<T>) {
   const internalScrollRef = useRef<T>(null);
   const lastKnownPositionRef = useRef<ScrollRestorationPosition | null>(null);
+  const pendingRef = useRef(false);
   const resolvedScrollRef = scrollRef ?? internalScrollRef;
 
   useLayoutEffect(() => {
     if (!isEnabled || !restorationKey) return;
     const element = resolvedScrollRef.current;
+    if (!element) return;
     const position = scrollRestorationManager.read(restorationKey);
-    if (element && position) {
+    lastKnownPositionRef.current = position;
+    pendingRef.current = Boolean(position);
+    const restore = () => {
+      if (!pendingRef.current || !position) return;
       element.scrollLeft = position.x;
       element.scrollTop = position.y;
-    }
-    if (element) {
-      lastKnownPositionRef.current = {
-        x: element.scrollLeft,
-        y: element.scrollTop,
-      };
-    }
-
+      if (Math.abs(element.scrollTop - position.y) < 1 && Math.abs(element.scrollLeft - position.x) < 1) pendingRef.current = false;
+    };
+    const takeOver = () => { pendingRef.current = false; };
+    restore();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(restore);
+    observer?.observe(element);
+    for (const child of element.children) observer?.observe(child);
+    const mutations = typeof MutationObserver === 'undefined' ? null : new MutationObserver(() => {
+      for (const child of element.children) observer?.observe(child);
+      restore();
+    });
+    mutations?.observe(element, { childList: true, subtree: true });
+    element.addEventListener('wheel', takeOver, { passive: true });
+    element.addEventListener('touchstart', takeOver, { passive: true });
+    element.addEventListener('pointerdown', takeOver);
+    element.addEventListener('keydown', takeOver);
     return () => {
-      if (!element) return;
-      scrollRestorationManager.save(
-        restorationKey,
-        lastKnownPositionRef.current ?? {
-          x: element.scrollLeft,
-          y: element.scrollTop,
-        },
-      );
+      observer?.disconnect(); mutations?.disconnect();
+      element.removeEventListener('wheel', takeOver); element.removeEventListener('touchstart', takeOver);
+      element.removeEventListener('pointerdown', takeOver); element.removeEventListener('keydown', takeOver);
+      if (lastKnownPositionRef.current) scrollRestorationManager.save(restorationKey, lastKnownPositionRef.current);
+      pendingRef.current = false;
     };
   }, [isEnabled, restorationKey, resolvedScrollRef]);
 
   const onScroll = useCallback((event: UIEvent<T>) => {
-    if (!isEnabled || !restorationKey) return;
-    const position = {
-      x: event.currentTarget.scrollLeft,
-      y: event.currentTarget.scrollTop,
-    };
+    if (!isEnabled || !restorationKey || pendingRef.current || event.currentTarget.closest('[hidden]') !== null) return;
+    const position = { x: event.currentTarget.scrollLeft, y: event.currentTarget.scrollTop };
     lastKnownPositionRef.current = position;
     scrollRestorationManager.save(restorationKey, position);
   }, [isEnabled, restorationKey]);

package/src/shared/lib/api/marketplace.types.ts

@@ -107,6 +107,7 @@ export type MarketplaceScenesView = {
 };
 
 export type MarketplaceInstalledRecord = {
+  resourceUri?: string;
   type: MarketplaceItemType;
   id?: string;
   spec: string;

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -1,4 +1,34 @@
 {
+  "pageLayoutActions": "Layout and position",
+  "pagePinLeft": "Pin to left sidebar",
+  "pageUnpinLeft": "Unpin from left sidebar",
+  "pageCopyUri": "Copy resource link",
+  "pageCopyFailed": "Could not copy the link. Please try again.",
+  "pageActions": "Page actions",
+  "pageSidebar": "Pages",
+  "resourcePageTitle": "Resource",
+  "resourceRetry": "Retry",
+  "resourceNotFound": "Resource deleted or not found",
+  "resourceInvalid": "Resource type is not registered or its URI is invalid",
+  "resourceLoadFailed": "Could not load this resource. Please retry",
+  "pageUnavailable": "Page unavailable or unsupported link",
+  "workbenchOpenMain": "Open in main area",
+  "workbenchDock": "Dock to sidebar",
+  "workbenchFloatGroup": "Float view group",
+  "workbenchExpand": "Expand view",
+  "workbenchCollapse": "Collapse view",
+  "workbenchRestoreSize": "Restore size",
+  "workbenchMaximize": "Maximize",
+  "workbenchCloseView": "Close view",
+  "workbenchHideGroup": "Hide view group",
+  "workbenchResize": "Resize sidebar",
+  "workbenchGlobalGroup": "Global workspace",
+  "workbenchSessionGroup": "Conversation workspace",
+  "workbenchMoveGlobal": "Move to global sidebar",
+  "workbenchFloatView": "Open in floating window",
+  "workbenchCloseTab": "Close tab",
+  "workbenchFileUnavailable": "This file view is unavailable. Reopen it from the original conversation.",
+  "chatSidebarCloseSearch": "Close search",
   "chatPageTitle": "Agent Chat",
   "chatPageDescription": "Chat with your agent directly in UI with multi-session and multi-agent switching.",
   "chatRefresh": "Refresh",
@@ -252,7 +282,12 @@
   "chatHistoryLoadFailed": "Couldn’t load earlier messages",
   "chatHistoryRetry": "Retry",
   "chatProcessSummaryProcessed": "Processed",
-  "chatProcessSummaryToolCalls": "{count} tool calls",
+  "chatProcessSummaryError": "Failed",
+  "chatProcessSummaryStopped": "Stopped",
+  "chatProcessDurationHoursMinutes": "{hours}h {minutes}m",
+  "chatProcessDurationHours": "{hours}h",
+  "chatProcessDurationMinutesSeconds": "{minutes}m {seconds}s",
+  "chatProcessDurationSeconds": "{seconds}s",
   "chatToolPayloadLoading": "Loading details",
   "chatToolPayloadLoadFailed": "Couldn’t load details. Try again",
   "chatToolActivityShowMore": "Show next {count} ({remaining} remaining)",
@@ -610,6 +645,15 @@
   "chatBackgroundReplyFallbackTitle": "New reply",
   "chatBackgroundReplyFallbackPreview": "A reply is ready. Open the session to view it.",
   "chatBackgroundReplyOpenAriaLabel": "Open the new reply in {title}",
+  "chatFloatingExpand": "Chat in a floating window",
+  "chatFloatingConversation": "Floating conversation",
+  "chatFloatingMinimize": "Minimize conversation",
+  "chatFloatingRestore": "Restore conversation",
+  "chatFloatingOpenMain": "Open in main view",
+  "chatFloatingClose": "Close floating conversation",
+  "chatPanelDock": "Dock to right sidebar",
+  "chatPanelOpen": "Chat in right sidebar",
+  "chatPanelUnavailable": "This conversation cannot be opened. Open it again from the conversation list.",
   "chatWelcomeTitle": "What would you like to get done?",
   "chatWelcomeContextLabel": "Task context",
   "chatWelcomeProjectPickerLabel": "Choose working directory",
@@ -654,6 +698,7 @@
   "chatInputVoiceNoDevice": "No microphone was detected. Connect or enable an input device, then check again.",
   "chatInputVoiceDeviceBusy": "The microphone cannot be read. Another app or a system restriction may be preventing access. Close other recording apps, check your input device and retry.",
   "chatInputVoiceServiceDenied": "The browser denied access to speech recognition. Check its speech service settings or organization policy, or use a browser that supports speech recognition.",
+  "chatInputVoiceInsecureContext": "This page is using an insecure HTTP address, so the browser disables microphone access. Configure HTTPS for a VPS; localhost or 127.0.0.1 is available only for access from the same machine.",
   "chatInputVoiceUnsupported": "Speech input is not supported in this browser.",
   "chatInputVoiceNoSpeech": "Could not hear you. Please try again.",
   "chatInputVoiceFailed": "Voice input failed. Please try again.",