feat: move workspaces into a first-party plugin

plugins/workspaces/frontend/WorkspacesPanel.tsx

@@ -0,0 +1,650 @@
+import { getErrorMessage } from "@/lib/error-message.js";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  LayoutTemplate,
+  Loader2,
+  Plus,
+  Save,
+  Settings2,
+  Star,
+  Trash2,
+  X,
+} from "lucide-react";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Badge } from "@/components/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/dialog";
+import { FOLDER_COLORS } from "@/lib/theme";
+import {
+  listWorkspaces,
+  createWorkspace,
+  renameWorkspace,
+  updateWorkspaceContent,
+  deleteWorkspace,
+  duplicateWorkspace,
+  setDefaultWorkspace,
+  unsetDefaultWorkspace,
+} from "./workspaces-api";
+import type { Workspace, WorkspacePayload } from "@/types/ui-types";
+
+function timeAgo(isoStr: string): string {
+  const ms = Date.now() - new Date(isoStr).getTime();
+  if (!Number.isFinite(ms)) return "";
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  return `${Math.floor(hr / 24)}d ago`;
+}
+
+function WorkspaceSaveDialog({
+  open,
+  onClose,
+  onSave,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onSave: (name: string, color: string) => Promise<void>;
+}) {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [color, setColor] = useState<string>(FOLDER_COLORS[0]);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setName("");
+    setColor(FOLDER_COLORS[0]);
+  }, [open]);
+
+  async function handleSave() {
+    if (!name.trim()) {
+      toast.error(t("newUi.sidebar.workspaces.nameRequired"));
+      return;
+    }
+    setSaving(true);
+    try {
+      await onSave(name.trim(), color);
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {t("newUi.sidebar.workspaces.saveCurrentTitle")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("newUi.sidebar.workspaces.saveCurrentDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-xs text-muted-foreground">
+              {t("newUi.sidebar.workspaces.nameLabel")}
+            </label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("newUi.sidebar.workspaces.namePlaceholder")}
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSave();
+              }}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-xs text-muted-foreground">
+              {t("newUi.sidebar.workspaces.colorLabel")}
+            </label>
+            <div className="flex gap-1.5">
+              {FOLDER_COLORS.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setColor(c)}
+                  className={`size-6 transition-all ${
+                    color === c
+                      ? "ring-2 ring-offset-2 ring-offset-background ring-white/50"
+                      : "opacity-75 hover:opacity-100"
+                  }`}
+                  style={{ backgroundColor: c }}
+                  aria-label={c}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="outline"
+            className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+            onClick={handleSave}
+            disabled={saving}
+          >
+            {saving && <Loader2 className="size-3.5 mr-2 animate-spin" />}
+            {t("common.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function WorkspaceRenameDialog({
+  workspace,
+  onClose,
+  onSaved,
+}: {
+  workspace: Workspace | null;
+  onClose: () => void;
+  onSaved: () => void;
+}) {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [color, setColor] = useState<string>(FOLDER_COLORS[0]);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!workspace) return;
+    setName(workspace.name);
+    setColor(workspace.color ?? FOLDER_COLORS[0]);
+  }, [workspace]);
+
+  async function handleSave() {
+    if (!workspace) return;
+    if (!name.trim()) {
+      toast.error(t("newUi.sidebar.workspaces.nameRequired"));
+      return;
+    }
+    setSaving(true);
+    try {
+      await renameWorkspace(workspace.id, { name: name.trim(), color });
+      toast.success(t("newUi.sidebar.workspaces.workspaceUpdated"));
+      onSaved();
+      onClose();
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.updateFailed"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Dialog open={!!workspace} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("newUi.sidebar.workspaces.rename")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-xs text-muted-foreground">
+              {t("newUi.sidebar.workspaces.nameLabel")}
+            </label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSave();
+              }}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-xs text-muted-foreground">
+              {t("newUi.sidebar.workspaces.colorLabel")}
+            </label>
+            <div className="flex gap-1.5">
+              {FOLDER_COLORS.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setColor(c)}
+                  className={`size-6 transition-all ${
+                    color === c
+                      ? "ring-2 ring-offset-2 ring-offset-background ring-white/50"
+                      : "opacity-75 hover:opacity-100"
+                  }`}
+                  style={{ backgroundColor: c }}
+                  aria-label={c}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="outline"
+            className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+            onClick={handleSave}
+            disabled={saving}
+          >
+            {saving && <Loader2 className="size-3.5 mr-2 animate-spin" />}
+            {t("common.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function WorkspaceRow({
+  workspace,
+  isLastSession,
+  onApply,
+  onUpdateWithCurrent,
+  onRename,
+  onDuplicate,
+  onDelete,
+  onSetDefault,
+}: {
+  workspace: Workspace;
+  isLastSession: boolean;
+  onApply: () => void;
+  onUpdateWithCurrent: () => void;
+  onRename: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  onSetDefault: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className="flex flex-col gap-1 border border-border p-2.5 cursor-pointer hover:bg-muted/40 group"
+      onClick={onApply}
+    >
+      <div className="flex items-center gap-1.5 min-w-0">
+        <span
+          className="size-2.5 shrink-0"
+          style={{ backgroundColor: workspace.color ?? "#6b7280" }}
+        />
+        <span
+          className={`text-xs font-semibold truncate min-w-0 ${isLastSession ? "italic text-muted-foreground" : ""}`}
+        >
+          {isLastSession
+            ? t("newUi.sidebar.workspaces.lastSession")
+            : workspace.name}
+        </span>
+        {workspace.isDefault && (
+          <Star className="size-3 shrink-0 fill-accent-brand text-accent-brand" />
+        )}
+        <Badge variant="secondary" className="shrink-0 ml-auto">
+          {t("newUi.sidebar.workspaces.tabCount", {
+            count: workspace.tabCount,
+          })}
+        </Badge>
+      </div>
+
+      <span className="text-[11px] text-muted-foreground truncate pl-4">
+        {isLastSession
+          ? t("newUi.sidebar.workspaces.lastSessionDescription")
+          : workspace.lastUsedAt
+            ? t("newUi.sidebar.workspaces.lastUsed", {
+                time: timeAgo(workspace.lastUsedAt),
+              })
+            : t("newUi.sidebar.workspaces.neverUsed")}
+      </span>
+
+      {!isLastSession && (
+        <div className="flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            title={
+              workspace.isDefault
+                ? t("newUi.sidebar.workspaces.unsetDefault")
+                : t("newUi.sidebar.workspaces.setDefault")
+            }
+            onClick={(e) => {
+              e.stopPropagation();
+              onSetDefault();
+            }}
+          >
+            <Star
+              className={`size-3.5 ${workspace.isDefault ? "fill-accent-brand text-accent-brand" : ""}`}
+            />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            title={t("newUi.sidebar.workspaces.updateWithCurrent")}
+            onClick={(e) => {
+              e.stopPropagation();
+              onUpdateWithCurrent();
+            }}
+          >
+            <Save className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            title={t("newUi.sidebar.workspaces.rename")}
+            onClick={(e) => {
+              e.stopPropagation();
+              onRename();
+            }}
+          >
+            <Settings2 className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            title={t("newUi.sidebar.workspaces.duplicate")}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDuplicate();
+            }}
+          >
+            <Plus className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="hover:text-destructive"
+            title={t("newUi.sidebar.workspaces.deleteWorkspaceTitle")}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function WorkspacesPanel({
+  active,
+  currentPayload,
+  onApplyWorkspace,
+}: {
+  active?: boolean;
+  currentPayload: () => WorkspacePayload;
+  onApplyWorkspace: (workspace: Workspace) => void;
+}) {
+  const { t } = useTranslation();
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
+  const [renameTarget, setRenameTarget] = useState<Workspace | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Workspace | null>(null);
+  const [applyTarget, setApplyTarget] = useState<Workspace | null>(null);
+  const hasLoadedRef = useRef(false);
+
+  const loadWorkspaces = useCallback(async () => {
+    try {
+      const data = await listWorkspaces();
+      setWorkspaces(data);
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.loadFailed"));
+    }
+  }, [t]);
+
+  useEffect(() => {
+    if (!active || hasLoadedRef.current) return;
+    hasLoadedRef.current = true;
+    setLoading(true);
+    loadWorkspaces().finally(() => setLoading(false));
+  }, [active, loadWorkspaces]);
+
+  async function handleSaveNew(name: string, color: string) {
+    try {
+      await createWorkspace({ name, color, payload: currentPayload() });
+      toast.success(t("newUi.sidebar.workspaces.workspaceCreated"));
+      loadWorkspaces();
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.saveFailed"));
+      throw error;
+    }
+  }
+
+  async function handleUpdateWithCurrent(workspace: Workspace) {
+    try {
+      await updateWorkspaceContent(workspace.id, currentPayload());
+      toast.success(t("newUi.sidebar.workspaces.workspaceUpdated"));
+      loadWorkspaces();
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.updateFailed"));
+    }
+  }
+
+  async function handleDuplicate(workspace: Workspace) {
+    try {
+      await duplicateWorkspace(
+        workspace.id,
+        t("newUi.sidebar.workspaces.duplicateNameSuffix", {
+          name: workspace.name,
+        }),
+      );
+      toast.success(t("newUi.sidebar.workspaces.workspaceDuplicated"));
+      loadWorkspaces();
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.duplicateFailed"));
+    }
+  }
+
+  async function handleToggleDefault(workspace: Workspace) {
+    try {
+      if (workspace.isDefault) {
+        await unsetDefaultWorkspace(workspace.id);
+      } else {
+        await setDefaultWorkspace(workspace.id);
+      }
+      loadWorkspaces();
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.updateFailed"));
+    }
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    try {
+      await deleteWorkspace(deleteTarget.id);
+      toast.success(t("newUi.sidebar.workspaces.workspaceDeleted"));
+      setDeleteTarget(null);
+      loadWorkspaces();
+    } catch (error) {
+      const message = getErrorMessage(error, "");
+      toast.error(message || t("newUi.sidebar.workspaces.deleteFailed"));
+    }
+  }
+
+  function handleApplyClick(workspace: Workspace) {
+    setApplyTarget(workspace);
+  }
+
+  function confirmApply() {
+    if (!applyTarget) return;
+    onApplyWorkspace(applyTarget);
+    setApplyTarget(null);
+  }
+
+  const manualWorkspaces = workspaces.filter((w) => w.kind === "manual");
+  const lastSession = workspaces.find((w) => w.kind === "last_session");
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex items-center gap-2 p-3 border-b border-border shrink-0">
+        <LayoutTemplate className="size-4 text-muted-foreground" />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="truncate text-sm font-semibold">
+            {t("newUi.sidebar.workspaces.title")}
+          </span>
+          <a
+            href="https://docs.termix.site/features/workspaces"
+            target="_blank"
+            rel="noreferrer"
+            className="w-fit text-[10px] text-accent-brand hover:underline"
+          >
+            {t("hosts.docsLink")}
+          </a>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          className="shrink-0 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+          onClick={() => setSaveDialogOpen(true)}
+        >
+          <Plus className="size-3.5 mr-1.5" />
+          {t("newUi.sidebar.workspaces.saveCurrent")}
+        </Button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto p-3">
+        {loading ? (
+          <div className="flex items-center justify-center py-8 text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" />
+          </div>
+        ) : manualWorkspaces.length === 0 && !lastSession ? (
+          <div className="text-xs text-muted-foreground text-center py-8">
+            {t("newUi.sidebar.workspaces.noWorkspaces")}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-1.5">
+            {lastSession && (
+              <WorkspaceRow
+                key={lastSession.id}
+                workspace={lastSession}
+                isLastSession
+                onApply={() => handleApplyClick(lastSession)}
+                onUpdateWithCurrent={() => {}}
+                onRename={() => {}}
+                onDuplicate={() => {}}
+                onDelete={() => {}}
+                onSetDefault={() => {}}
+              />
+            )}
+            {manualWorkspaces.map((workspace) => (
+              <WorkspaceRow
+                key={workspace.id}
+                workspace={workspace}
+                isLastSession={false}
+                onApply={() => handleApplyClick(workspace)}
+                onUpdateWithCurrent={() => {
+                  if (
+                    window.confirm(
+                      t("newUi.sidebar.workspaces.updateWithCurrentConfirm", {
+                        name: workspace.name,
+                      }),
+                    )
+                  ) {
+                    handleUpdateWithCurrent(workspace);
+                  }
+                }}
+                onRename={() => setRenameTarget(workspace)}
+                onDuplicate={() => handleDuplicate(workspace)}
+                onDelete={() => setDeleteTarget(workspace)}
+                onSetDefault={() => handleToggleDefault(workspace)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <WorkspaceSaveDialog
+        open={saveDialogOpen}
+        onClose={() => setSaveDialogOpen(false)}
+        onSave={handleSaveNew}
+      />
+
+      <WorkspaceRenameDialog
+        workspace={renameTarget}
+        onClose={() => setRenameTarget(null)}
+        onSaved={loadWorkspaces}
+      />
+
+      <Dialog
+        open={!!deleteTarget}
+        onOpenChange={(next) => !next && setDeleteTarget(null)}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>
+              {t("newUi.sidebar.workspaces.deleteWorkspaceTitle")}
+            </DialogTitle>
+            <DialogDescription>
+              {t("newUi.sidebar.workspaces.deleteWorkspaceDescription", {
+                name: deleteTarget?.name,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
+              {t("common.cancel")}
+            </Button>
+            <Button variant="destructive" onClick={handleDelete}>
+              <X className="size-3.5 mr-2" />
+              {t("common.delete")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={!!applyTarget}
+        onOpenChange={(next) => !next && setApplyTarget(null)}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>
+              {t("newUi.sidebar.workspaces.applyConfirmTitle")}
+            </DialogTitle>
+            <DialogDescription>
+              {t("newUi.sidebar.workspaces.applyConfirmDescription", {
+                name: applyTarget?.name,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setApplyTarget(null)}>
+              {t("common.cancel")}
+            </Button>
+            <Button
+              variant="outline"
+              className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+              onClick={confirmApply}
+            >
+              {t("newUi.sidebar.workspaces.applyConfirmButton")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

plugins/workspaces/frontend/index.mjs

@@ -0,0 +1,34 @@
+/**
+ * Frontend half of the workspaces plugin.
+ *
+ * WorkspacesPanel is a left-sidebar railView panel (opened from the rail,
+ * not a Tab), the same shape as FleetsPanel/HostsPanel/CredentialsPanel.
+ * None of those go through registerRailItem/registerTabComponent either --
+ * per src/ui/shell/pluginLoader.ts's own comment, a rail-view panel like
+ * this is rendered directly by AppShell.tsx rather than registered at
+ * runtime. WorkspacesPanel is reached today through a direct relative
+ * import in AppShell.tsx (../../plugins/workspaces/frontend/WorkspacesPanel),
+ * not through register() below.
+ *
+ * register()/unregister() still follow the same shape every other plugin's
+ * frontend entry does, so this is ready the moment a real frontend plugin
+ * loader exists -- see plugins/ssh-terminal/frontend/index.mjs and
+ * src/ui/tests/sidebar/plugin-extension-seam.test.tsx, which says outright
+ * "there is no plugin loader yet".
+ */
+
+export const id = "workspaces";
+export const railViewId = "workspaces";
+
+export async function register({ registerRailItem, icons }) {
+  registerRailItem?.({
+    id: railViewId,
+    icon: icons.LayoutTemplate,
+    labelKey: "nav.workspaces",
+    separatorAfter: true,
+  });
+}
+
+export async function unregister({ unregisterRailItem }) {
+  unregisterRailItem?.(railViewId);
+}

plugins/workspaces/frontend/workspaceUtils.ts

@@ -0,0 +1,163 @@
+import type {
+  Host,
+  Tab,
+  TabType,
+  WorkspacePayload,
+  WorkspaceTabSnapshot,
+} from "@/types/ui-types";
+
+// "dashboard" is deliberately excluded: AppShell always keeps a dashboard
+// tab alive as the fallback when every other tab closes, so it isn't a
+// meaningful part of a saved arrangement and shouldn't count toward
+// tabCount or be reopened on apply.
+export const WORKSPACE_CAPTURABLE_TYPES: TabType[] = [
+  "terminal",
+  "rdp",
+  "vnc",
+  "telnet",
+  "host-metrics",
+  "proxmox-stats",
+  "files",
+  "docker",
+  "tunnel",
+  "network_graph",
+  "tmux_monitor",
+  "serial",
+  "homepage",
+  "fleet-inventory",
+  "termix-id",
+  "session-logs",
+  "snippets",
+  "macros",
+  "history",
+  "ssh-tools",
+  "automations",
+  "ai",
+];
+
+export const HOSTLESS_WORKSPACE_TAB_TYPES: TabType[] = [
+  "tunnel",
+  "network_graph",
+  "tmux_monitor",
+  "homepage",
+  "fleet-inventory",
+  "docker",
+  "termix-id",
+  "session-logs",
+  "snippets",
+  "macros",
+  "history",
+  "ssh-tools",
+  "automations",
+  "ai",
+];
+
+function createWorkspaceSlotId(): string {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
+}
+
+/**
+ * Maps live tabs to WorkspaceTabSnapshots, generating a fresh slotId per tab.
+ * slotId is a stable key within the saved payload, distinct from Tab.id
+ * (which is regenerated every time a tab is opened).
+ */
+export function buildWorkspaceTabSnapshots(
+  tabs: Tab[],
+  genSlotId: () => string = createWorkspaceSlotId,
+): { snapshots: WorkspaceTabSnapshot[]; slotIdByTabId: Map<string, string> } {
+  const capturable = tabs.filter((t) =>
+    WORKSPACE_CAPTURABLE_TYPES.includes(t.type),
+  );
+  const slotIdByTabId = new Map(capturable.map((t) => [t.id, genSlotId()]));
+
+  const snapshots: WorkspaceTabSnapshot[] = capturable.map((t) => ({
+    slotId: slotIdByTabId.get(t.id)!,
+    type: t.type,
+    hostSyncId: t.type === "serial" ? null : (t.host?.syncId ?? null),
+    hostNameSnapshot: t.host?.name ?? null,
+    label: t.label,
+    customLabel: t.customLabel,
+    initialFilePath: t.initialFilePath,
+    initialPath: t.initialPath,
+    fleetId: t.fleetId,
+    serialConfig: t.type === "serial" ? t.serialConfig : undefined,
+  }));
+
+  return { snapshots, slotIdByTabId };
+}
+
+/** Remaps a slotId-keyed array (paneTabIds shape) to live tab ids via a slotId->tabId map. */
+export function remapSlotIds(
+  slotIds: (string | null)[],
+  slotIdToTabId: Map<string, string>,
+): (string | null)[] {
+  return slotIds.map((slotId) =>
+    slotId != null ? (slotIdToTabId.get(slotId) ?? null) : null,
+  );
+}
+
+/**
+ * Resolves how to (re)open a single workspace-payload tab on apply.
+ *
+ * "singleton" covers every rail-singleton tab type (dashboard/tunnel/docker/
+ * etc.) whether or not a host was resolved for it - these always go through
+ * openSingletonTab, which accepts an optional preselected host. "host" is
+ * for genuinely per-host tab types (terminal/rdp/files/...), which always
+ * need a resolved host to open at all.
+ */
+export function resolveWorkspaceTabTarget(
+  snapshot: WorkspaceTabSnapshot,
+  allHosts: Host[],
+):
+  | { kind: "serial" }
+  | { kind: "singleton"; host?: Host }
+  | { kind: "host"; host: Host }
+  | { kind: "skip" } {
+  if (snapshot.type === "serial") {
+    return snapshot.serialConfig ? { kind: "serial" } : { kind: "skip" };
+  }
+
+  let host: Host | undefined;
+  if (snapshot.hostSyncId) {
+    host = allHosts.find((h) => h.syncId === snapshot.hostSyncId);
+    if (!host) return { kind: "skip" };
+  }
+
+  if (HOSTLESS_WORKSPACE_TAB_TYPES.includes(snapshot.type)) {
+    return { kind: "singleton", host };
+  }
+
+  return host ? { kind: "host", host } : { kind: "skip" };
+}
+
+export function buildWorkspacePayload(input: {
+  tabs: Tab[];
+  activeTabId: string;
+  splitMode: WorkspacePayload["splitMode"];
+  paneTabIds: (string | null)[];
+  rowSizes: number[];
+  rowColSizes: number[][];
+  genSlotId?: () => string;
+  sidebar?: WorkspacePayload["sidebar"];
+}): WorkspacePayload {
+  const { snapshots, slotIdByTabId } = buildWorkspaceTabSnapshots(
+    input.tabs,
+    input.genSlotId,
+  );
+
+  return {
+    version: 1,
+    tabs: snapshots,
+    activeSlotId: slotIdByTabId.get(input.activeTabId) ?? null,
+    splitMode: input.splitMode,
+    paneTabIds: input.paneTabIds.map((tabId) =>
+      tabId != null ? (slotIdByTabId.get(tabId) ?? null) : null,
+    ),
+    rowSizes: input.rowSizes,
+    rowColSizes: input.rowColSizes,
+    ...(input.sidebar ? { sidebar: input.sidebar } : {}),
+  };
+}

plugins/workspaces/frontend/workspaces-api.ts

@@ -0,0 +1,125 @@
+import { authApi, handleApiError } from "@/main-axios";
+import type { Workspace, WorkspacePayload } from "@/types/ui-types";
+
+export async function listWorkspaces(): Promise<Workspace[]> {
+  try {
+    const response = await authApi.get("/workspaces");
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "fetch workspaces");
+  }
+}
+
+export async function createWorkspace(data: {
+  name: string;
+  color?: string | null;
+  icon?: string | null;
+  payload: WorkspacePayload;
+}): Promise<Workspace> {
+  try {
+    const response = await authApi.post("/workspaces", data);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "create workspace");
+  }
+}
+
+export async function renameWorkspace(
+  id: number,
+  data: { name?: string; color?: string | null; icon?: string | null },
+): Promise<Workspace> {
+  try {
+    const response = await authApi.patch(`/workspaces/${id}`, data);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "update workspace");
+  }
+}
+
+export async function updateWorkspaceContent(
+  id: number,
+  payload: WorkspacePayload,
+): Promise<Workspace> {
+  try {
+    const response = await authApi.put(`/workspaces/${id}/content`, {
+      payload,
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "update workspace content");
+  }
+}
+
+export async function deleteWorkspace(
+  id: number,
+): Promise<{ success: boolean }> {
+  try {
+    const response = await authApi.delete(`/workspaces/${id}`);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "delete workspace");
+  }
+}
+
+export async function duplicateWorkspace(
+  id: number,
+  name: string,
+): Promise<Workspace> {
+  try {
+    const response = await authApi.post(`/workspaces/${id}/duplicate`, {
+      name,
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "duplicate workspace");
+  }
+}
+
+export async function setDefaultWorkspace(id: number): Promise<Workspace> {
+  try {
+    const response = await authApi.post(`/workspaces/${id}/set-default`);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "set default workspace");
+  }
+}
+
+export async function unsetDefaultWorkspace(id: number): Promise<Workspace> {
+  try {
+    const response = await authApi.post(`/workspaces/${id}/unset-default`);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "unset default workspace");
+  }
+}
+
+export async function applyWorkspaceServer(id: number): Promise<Workspace> {
+  try {
+    const response = await authApi.post(`/workspaces/${id}/apply`);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "apply workspace");
+  }
+}
+
+export async function getLastSessionWorkspace(): Promise<Workspace | null> {
+  try {
+    const response = await authApi.get("/workspaces/last-session");
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "fetch last session workspace");
+  }
+}
+
+export async function saveLastSessionWorkspace(
+  payload: WorkspacePayload,
+): Promise<Workspace> {
+  try {
+    const response = await authApi.put("/workspaces/last-session", {
+      payload,
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "save last session workspace");
+  }
+}