@opengeni/react 0.6.2 → 0.8.0

package/src/components/sandbox-terminal.tsx

@@ -181,7 +181,7 @@ export function SandboxTerminal({
         convertEol: true,
         disableStdin: !interactive,
         cursorBlink: interactive,
-        fontFamily: fontFamily ?? "var(--og-font-mono, var(--font-mono, monospace))",
+        fontFamily: fontFamily ?? "var(--og-font-mono)",
         fontSize: fontSize ?? 13,
         lineHeight: 1.25,
         // A little breathing room from the panel edge so output isn't flush to
@@ -318,23 +318,21 @@ export function SandboxTerminal({
   return (
     <div className={cn("relative flex h-full w-full flex-col overflow-hidden", className)}>
       {showHeader && (
-        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] px-2 py-1 text-[11px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-og-border px-2 py-1 text-og-xs text-og-fg-subtle">
           <span className="flex min-w-0 items-center gap-1.5">
             <span
               className={cn(
                 "size-1.5 shrink-0 rounded-full",
-                result.running
-                  ? "bg-[color:var(--og-color-status-running,var(--color-status-running,#d29922))]"
-                  : "bg-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]",
+                result.running ? "bg-og-status-running" : "bg-og-fg-subtle",
               )}
             />
-            <span className="truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))]">
+            <span className="truncate font-og-mono">
               pty: {shell ?? "shell"}
             </span>
           </span>
           <span className="flex shrink-0 items-center gap-2">
             {!interactive && (
-              <span className="rounded-[var(--og-radius-sm,4px)] bg-[color:var(--og-color-surface-2,var(--color-surface-2,#161616))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+              <span className="rounded-og-sm bg-og-surface-2 px-1.5 py-0.5 text-og-xs uppercase tracking-wide">
                 read-only
               </span>
             )}
@@ -344,7 +342,7 @@ export function SandboxTerminal({
                 termRef.current?.clear();
                 writtenRef.current = new Set();
               }}
-              className="rounded-[var(--og-radius-sm,4px)] px-1.5 py-0.5 text-[10px] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
+              className="rounded-og-sm px-1.5 py-0.5 text-og-xs hover:text-og-fg pointer-coarse:min-h-10"
             >
               Clear
             </button>
@@ -355,7 +353,7 @@ export function SandboxTerminal({
           with the terminal surface (capture so they win even though xterm's own
           listeners stop propagation). The host warms the box for pty-ws here. */}
       <div
-        className="relative min-h-0 flex-1 bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))] px-2 py-1.5"
+        className="relative min-h-0 flex-1 bg-og-bg px-2 py-1.5"
         onPointerDownCapture={onActivate}
         onFocusCapture={onActivate}
       >
@@ -379,7 +377,7 @@ const XTERM_BASE_CSS = `
 .xterm.focus,.xterm:focus{outline:none}
 .xterm .xterm-helpers{position:absolute;top:0;z-index:5}
 .xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}
-.xterm .composition-view{background:#000;color:#FFF;display:none;position:absolute;white-space:nowrap;z-index:1}
+.xterm .composition-view{background:var(--og-color-bg);color:var(--og-color-fg);display:none;position:absolute;white-space:nowrap;z-index:1}
 .xterm .composition-view.active{display:block}
 .xterm .xterm-viewport{background-color:transparent;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}
 .xterm .xterm-screen{position:relative}
@@ -418,7 +416,7 @@ function ensureXtermBaseCss(): void {
 
 function TerminalPlaceholder() {
   return (
-    <div className="absolute inset-0 flex items-center justify-center text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+    <div className="absolute inset-0 flex items-center justify-center text-og-sm text-og-fg-subtle">
       Loading terminal…
     </div>
   );

package/src/components/session-status.tsx

@@ -30,7 +30,7 @@ export const SESSION_STATUS_META: Record<SessionStatusValue, SessionStatusMeta>
     pulse: false,
   },
   requires_action: {
-    label: "Needs you",
+    label: "Waiting on you",
     dotClassName: "bg-og-status-waiting",
     badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
     pulse: true,
@@ -65,7 +65,7 @@ export function SessionStatus({ status, label, size = "md", className }: Session
       data-status={status}
       className={cn(
         "og-root inline-flex shrink-0 items-center rounded-full border font-medium",
-        size === "sm" ? "gap-1 px-1.5 py-px text-[10px]" : "gap-1.5 px-2 py-0.5 text-xs",
+        size === "sm" ? "gap-1 px-1.5 py-px text-og-xs" : "gap-1.5 px-2 py-0.5 text-xs",
         meta.badgeClassName,
         className,
       )}

package/src/components/workspace-dock.tsx

@@ -4,6 +4,7 @@ import {
   Maximize2Icon,
   Minimize2Icon,
   PanelRightCloseIcon,
+  XIcon,
 } from "lucide-react";
 import {
   Group,
@@ -49,9 +50,43 @@ export type WorkspaceDockProps = {
  * restore button returns). Layout persists via `useDefaultLayout` keyed on
  * `autoSaveId`. Maximize is a mode ABOVE the Group (a `fixed inset-0` overlay) —
  * pushing a Panel to ~100% still fights min sizes and leaves a chat sliver.
+ *
+ * Below {@link DOCK_OVERLAY_BREAKPOINT} the side-by-side split can't work on a
+ * phone-width viewport, so the resizable panels are dropped entirely: the
+ * primary pane goes full-width and the dock becomes a full-screen overlay driven
+ * by the same `collapsed` / `onCollapsedChange` contract (collapsed → hidden).
+ * No drag splitter renders below the breakpoint.
  */
 const useDockLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 
+/**
+ * The dock stops being a side column at this width and becomes a full-screen
+ * overlay — matches the app's rail-drawer breakpoint (the single `isMobile`
+ * source). The package can't read app context, so it detects the width itself.
+ */
+const DOCK_OVERLAY_BREAKPOINT = 1024;
+
+/** SSR-safe `(max-width: …)` match; false until mounted, then live. */
+function useIsNarrow(maxWidth: number): boolean {
+  const [narrow, setNarrow] = useState(false);
+  useDockLayoutEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mql = window.matchMedia(`(max-width: ${maxWidth - 1}px)`);
+    const update = () => setNarrow(mql.matches);
+    update();
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    // Legacy Safari.
+    mql.addListener(update);
+    return () => mql.removeListener(update);
+  }, [maxWidth]);
+  return narrow;
+}
+
 export function WorkspaceDock({
   primary,
   tabs,
@@ -65,11 +100,18 @@ export function WorkspaceDock({
   maxSize = 70,
   className,
 }: WorkspaceDockProps) {
+  const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
   const dockPanelRef = usePanelRef();
   const [internalCollapsed, setInternalCollapsed] = useState(false);
   const [maximized, setMaximized] = useState(false);
   const [internalTab, setInternalTab] = useState(tabs[0]?.id ?? "");
   const collapsed = collapsedProp ?? internalCollapsed;
+  // When the host supplies `collapsed` it owns the open/close affordance (e.g.
+  // the app header's panel toggle) — the dock must not offer a SECOND
+  // open/close control (duplicate buttons with near-identical icons read as a
+  // bug). Standalone (uncontrolled) usage keeps the built-in collapse button
+  // and the thin re-open rail as its only affordances.
+  const hostControlled = collapsedProp !== undefined;
 
   // Persisted layout (width split) keyed by autoSaveId.
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
@@ -117,16 +159,6 @@ export function WorkspaceDock({
     // rebuild tab JSX frequently; only id changes can invalidate the active tab.
   }, [tabIds, firstTabId, current, setTab]);
 
-  // Esc restores from maximize.
-  useEffect(() => {
-    if (!maximized) return;
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setMaximized(false);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [maximized]);
-
   const collapse = useCallback(() => {
     dockPanelRef.current?.collapse();
     setCollapsed(true);
@@ -136,14 +168,74 @@ export function WorkspaceDock({
     setCollapsed(false);
   }, [dockPanelRef, setCollapsed]);
 
+  // Esc restores from maximize (desktop) and closes the mobile overlay.
+  useEffect(() => {
+    const overlayOpen = maximized || (narrow && !collapsed);
+    if (!overlayOpen) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      if (maximized) setMaximized(false);
+      else collapse();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [maximized, narrow, collapsed, collapse]);
+
+  // Below the breakpoint the dock is a full-screen overlay, not a resizable
+  // column: primary goes full-width and no splitter ever mounts. The overlay is
+  // driven by the same `collapsed` contract (collapsed → hidden).
+  if (narrow) {
+    return (
+      <div className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
+        <div className="min-h-0 min-w-0 flex-1">{primary}</div>
+        {!collapsed && (
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-label="Workspace"
+            className="fixed inset-0 z-40 flex flex-col bg-og-bg"
+            style={{
+              paddingTop: "env(safe-area-inset-top)",
+              paddingBottom: "env(safe-area-inset-bottom)",
+            }}
+          >
+            <DockChrome
+              tabs={tabs}
+              current={current}
+              onTab={setTab}
+              controls={
+                <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
+                  <XIcon className="size-4" />
+                </ChromeButton>
+              }
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
   const dockChrome = (
     <DockChrome
       tabs={tabs}
       current={current}
       onTab={setTab}
-      maximized={maximized}
-      onToggleMaximize={() => setMaximized((m) => !m)}
-      onCollapse={maximized ? () => setMaximized(false) : collapse}
+      controls={
+        <>
+          <ChromeButton
+            onClick={() => setMaximized((m) => !m)}
+            title={maximized ? "Restore (Esc)" : "Maximize"}
+            label={maximized ? "Restore dock" : "Maximize dock"}
+          >
+            {maximized ? <Minimize2Icon className="size-3.5" /> : <Maximize2Icon className="size-3.5" />}
+          </ChromeButton>
+          {hostControlled ? null : (
+            <ChromeButton onClick={collapse} title="Collapse" label="Collapse dock">
+              <PanelRightCloseIcon className="size-3.5" />
+            </ChromeButton>
+          )}
+        </>
+      }
     />
   );
 
@@ -161,7 +253,7 @@ export function WorkspaceDock({
 
         {!collapsed && (
           <Separator className="group relative w-1.5 shrink-0 outline-none">
-            <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[color:var(--og-color-border,var(--color-border,#2a2a2a))] transition-colors group-hover:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] group-data-[separator-state=dragging]:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]" />
+            <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-og-border transition-colors group-hover:bg-og-accent group-data-[separator-state=dragging]:bg-og-accent" />
           </Separator>
         )}
 
@@ -186,20 +278,21 @@ export function WorkspaceDock({
           {/* Hidden behind the overlay while maximized (avoids double-mounting
               the surfaces). */}
           {!collapsed && !maximized && (
-            <div className="flex h-full min-h-0 min-w-0 flex-col border-l border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))]">
+            <div className="flex h-full min-h-0 min-w-0 flex-col border-l border-og-border bg-og-bg">
               {dockChrome}
             </div>
           )}
         </Panel>
       </Group>
 
-      {/* Collapsed rail: a thin tab on the right edge that re-opens the dock. */}
-      {collapsed && !maximized && (
+      {/* Collapsed rail: the standalone fallback re-open affordance. Hidden
+          when the host controls collapse — its own toggle is the one way in. */}
+      {collapsed && !maximized && !hostControlled && (
         <button
           type="button"
           onClick={expand}
           title="Open workspace"
-          className="absolute inset-y-0 right-0 flex w-6 shrink-0 items-center justify-center border-l border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
+          className="absolute inset-y-0 right-0 flex w-6 shrink-0 items-center justify-center border-l border-og-border bg-og-surface-1 text-og-fg-subtle hover:text-og-fg"
         >
           <ChevronsLeftRightIcon className="size-3.5" />
         </button>
@@ -207,7 +300,7 @@ export function WorkspaceDock({
 
       {/* Maximize overlay: full-workspace surface above everything. */}
       {maximized && (
-        <div className="fixed inset-0 z-40 flex flex-col bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))]">
+        <div className="fixed inset-0 z-40 flex flex-col bg-og-bg">
           {dockChrome}
         </div>
       )}
@@ -215,26 +308,54 @@ export function WorkspaceDock({
   );
 }
 
+/** A dock-chrome control button — compact on fine pointers, ≥40px on coarse. */
+function ChromeButton({
+  onClick,
+  title,
+  label,
+  children,
+}: {
+  onClick: () => void;
+  title: string;
+  label: string;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      aria-label={label}
+      className="inline-flex items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:size-10"
+    >
+      {children}
+    </button>
+  );
+}
+
 function DockChrome({
   tabs,
   current,
   onTab,
-  maximized,
-  onToggleMaximize,
-  onCollapse,
+  controls,
 }: {
   tabs: WorkspaceTab[];
   current: string;
   onTab: (id: string) => void;
-  maximized: boolean;
-  onToggleMaximize: () => void;
-  onCollapse: () => void;
+  /** Right-aligned chrome controls (maximize / collapse, or the overlay close). */
+  controls: ReactNode;
 }) {
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
   return (
     <>
-      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] px-1.5 py-1">
-        <div className="flex min-w-0 items-center gap-0.5" role="tablist">
+      <div className="flex shrink-0 items-center gap-2 border-b border-og-border px-1.5 py-1">
+        {/* The tab list scrolls horizontally when it can't fit — it must never
+            grow into or overlap the chrome controls (they stay shrink-0). The
+            scrollbar is hidden to keep the strip calm. */}
+        <div
+          className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          role="tablist"
+        >
           {tabs.map((tab) => (
             <button
               key={tab.id}
@@ -243,35 +364,18 @@ function DockChrome({
               aria-selected={tab.id === current}
               onClick={() => onTab(tab.id)}
               className={cn(
-                "flex items-center gap-1 rounded-[var(--og-radius-sm,4px)] px-2 py-1 text-[11px] font-medium transition-colors",
+                "flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors pointer-coarse:min-h-10",
                 tab.id === current
-                  ? "bg-[color:var(--og-color-accent-soft,var(--color-surface-2,#222))] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
-                  : "text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
+                  ? "bg-og-accent-soft text-og-fg"
+                  : "text-og-fg-subtle hover:text-og-fg",
               )}
             >
-              <span className="truncate">{tab.label}</span>
+              <span>{tab.label}</span>
               {tab.badge}
             </button>
           ))}
         </div>
-        <div className="flex shrink-0 items-center gap-0.5 text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
-          <button
-            type="button"
-            onClick={onToggleMaximize}
-            title={maximized ? "Restore (Esc)" : "Maximize"}
-            className="rounded-[var(--og-radius-sm,4px)] p-1 hover:bg-[color:var(--og-color-surface-2,var(--color-surface-2,#222))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
-          >
-            {maximized ? <Minimize2Icon className="size-3.5" /> : <Maximize2Icon className="size-3.5" />}
-          </button>
-          <button
-            type="button"
-            onClick={onCollapse}
-            title={maximized ? "Restore" : "Collapse"}
-            className="rounded-[var(--og-radius-sm,4px)] p-1 hover:bg-[color:var(--og-color-surface-2,var(--color-surface-2,#222))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
-          >
-            <PanelRightCloseIcon className="size-3.5" />
-          </button>
-        </div>
+        <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle">{controls}</div>
       </div>
       <div className="min-h-0 min-w-0 flex-1 overflow-hidden" role="tabpanel">
         {active?.content}

package/src/hooks/use-file-attachments.ts

@@ -1,5 +1,5 @@
 import type { FileAsset, FileResourceRef } from "@opengeni/sdk";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useOpenGeni, type ClientOverride } from "../provider";
 
 export type UseFileAttachmentsOptions = ClientOverride & {
@@ -39,6 +39,11 @@ export type UseFileAttachmentsResult = {
   addFiles: (files: Iterable<File>) => void;
   /** Clipboard path — applies `pasteFilter` (default `image/*`) then uploads. */
   addFromPaste: (event: { clipboardData: DataTransfer | null }) => void;
+  /**
+   * Re-run the upload for a `failed` attachment, in place (same id, same
+   * source file). No-op for an id that isn't a known failed upload.
+   */
+  retry: (id: string) => void;
   /** Remove one attachment; revokes its object-URL. */
   remove: (id: string) => void;
   /** Remove all; revokes every object-URL. Call from `useComposer`'s `onSent`. */
@@ -60,10 +65,33 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
   const { client, workspaceId } = useOpenGeni(options);
   const pasteFilter = options.pasteFilter ?? isImage;
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
+  // Keep the source File per attachment id so a failed upload can be retried
+  // in place. Cleared on remove/clear so it never outlives its attachment.
+  const sources = useRef<Map<string, File>>(new Map());
+
+  // Run (or re-run) the upload for one already-tracked attachment id. Sets it
+  // back to `uploading`, then resolves to `ready` (with the asset) or `failed`
+  // (with the error message).
+  const startUpload = useCallback((id: string, file: File) => {
+    void client.uploadFile(workspaceId, {
+      filename: file.name || "file",
+      contentType: file.type || "application/octet-stream",
+      data: file,
+    }).then((asset) => {
+      setAttachments((current) => current.map((attachment) => attachment.id === id
+        ? { ...attachment, status: "ready", file: asset, name: asset.filename, contentType: asset.contentType, sizeBytes: asset.sizeBytes, error: undefined }
+        : attachment));
+    }).catch((error: unknown) => {
+      setAttachments((current) => current.map((attachment) => attachment.id === id
+        ? { ...attachment, status: "failed", error: error instanceof Error ? error.message : String(error) }
+        : attachment));
+    });
+  }, [client, workspaceId]);
 
   const addFiles = useCallback((files: Iterable<File>) => {
     for (const file of files) {
       const id = crypto.randomUUID();
+      sources.current.set(id, file);
       const previewUrl = isImage(file) ? URL.createObjectURL(file) : undefined;
       setAttachments((current) => [...current, {
         id,
@@ -73,21 +101,20 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
         status: "uploading",
         ...(previewUrl ? { previewUrl } : {}),
       }]);
-      void client.uploadFile(workspaceId, {
-        filename: file.name || "file",
-        contentType: file.type || "application/octet-stream",
-        data: file,
-      }).then((asset) => {
-        setAttachments((current) => current.map((attachment) => attachment.id === id
-          ? { ...attachment, status: "ready", file: asset, name: asset.filename, contentType: asset.contentType, sizeBytes: asset.sizeBytes }
-          : attachment));
-      }).catch((error: unknown) => {
-        setAttachments((current) => current.map((attachment) => attachment.id === id
-          ? { ...attachment, status: "failed", error: error instanceof Error ? error.message : String(error) }
-          : attachment));
-      });
+      startUpload(id, file);
     }
-  }, [client, workspaceId]);
+  }, [startUpload]);
+
+  const retry = useCallback((id: string) => {
+    const file = sources.current.get(id);
+    if (!file) {
+      return;
+    }
+    setAttachments((current) => current.map((attachment) => attachment.id === id
+      ? { ...attachment, status: "uploading", error: undefined }
+      : attachment));
+    startUpload(id, file);
+  }, [startUpload]);
 
   const addFromPaste = useCallback((event: { clipboardData: DataTransfer | null }) => {
     const clipboardFiles = event.clipboardData?.files;
@@ -101,6 +128,7 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
   }, [addFiles, pasteFilter]);
 
   const remove = useCallback((id: string) => {
+    sources.current.delete(id);
     setAttachments((current) => {
       const removed = current.find((attachment) => attachment.id === id);
       if (removed?.previewUrl) {
@@ -111,6 +139,7 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
   }, []);
 
   const clear = useCallback(() => {
+    sources.current.clear();
     setAttachments((current) => {
       for (const attachment of current) {
         if (attachment.previewUrl) {
@@ -129,6 +158,7 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
     uploading: attachments.some((attachment) => attachment.status === "uploading"),
     addFiles,
     addFromPaste,
+    retry,
     remove,
     clear,
   };