feat: make each plugin an npm workspace built by a termix-plugin CLI

This commit is contained in:
LukeGus committed 2026-09-22 15:09:50 -05:00
1 parent 4758016f41
commit 5796186a1c
448 files changed
+3087 -2003

No files matched your search

+11
View File
@@ -0,0 +1,11 @@
import type { PluginContext } from "@termix/plugin-sdk/backend";
import { startWorkspacesService, stopWorkspacesService } from "./routes.js";
export async function activate(ctx: PluginContext) {
startWorkspacesService();
ctx.log.info("Workspaces router registered at /workspaces");
}
export async function deactivate() {
stopWorkspacesService();
}
+648
View File
@@ -0,0 +1,648 @@
import type { AuthenticatedRequest } from "../../../../src/types/index.js";
import express, { type Request, type Response } from "express";
import { databaseLogger } from "../../../../src/backend/utils/logger.js";
import { AuthManager } from "../../../../src/backend/utils/auth-manager.js";
import { createCurrentWorkspaceRepository } from "../../../../src/backend/database/repositories/factory.js";
import type { WorkspaceRecord } from "../../../../src/backend/database/repositories/workspace-repository.js";
import {
registerWorkspacesRouter,
unregisterWorkspacesRouter,
} from "../../../../src/backend/database/routes/workspace-dispatch.js";
export const router = express.Router();
const authManager = AuthManager.getInstance();
const authenticateJWT = authManager.createAuthMiddleware();
const requireDataAccess = authManager.createDataAccessMiddleware();
function isNonEmptyString(val: unknown): val is string {
return typeof val === "string" && val.trim().length > 0;
}
function parseWorkspaceId(raw: unknown): number | null {
const id = typeof raw === "string" ? parseInt(raw, 10) : NaN;
return Number.isInteger(id) ? id : null;
}
function isValidPayload(val: unknown): val is Record<string, unknown> {
return (
typeof val === "object" &&
val !== null &&
Array.isArray((val as Record<string, unknown>).tabs)
);
}
function serialize(record: WorkspaceRecord) {
let payload: unknown;
try {
payload = JSON.parse(record.payload || "{}");
} catch {
payload = { version: 1, tabs: [] };
}
const tabs = Array.isArray((payload as { tabs?: unknown[] })?.tabs)
? (payload as { tabs: unknown[] }).tabs
: [];
return {
...record,
payload,
tabCount: tabs.length,
};
}
/**
* @openapi
* /workspaces:
* get:
* summary: List the current user's saved workspaces
* description: Returns every manual workspace plus the single auto-maintained "Last Session" workspace, each with a computed tabCount.
* tags:
* - Workspaces
* responses:
* 200:
* description: List of workspaces.
*/
router.get(
"/",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
try {
const records =
await createCurrentWorkspaceRepository().listByUser(userId);
res.json(records.map(serialize));
} catch (err) {
databaseLogger.error("Failed to list workspaces", err, {
operation: "workspace_list_failed",
userId,
});
res.status(500).json({ error: "Failed to list workspaces" });
}
},
);
/**
* @openapi
* /workspaces:
* post:
* summary: Save the current tab arrangement as a new named workspace
* tags:
* - Workspaces
* requestBody:
* required: true
* content:
* application/json:
* schema:
* type: object
* properties:
* name:
* type: string
* color:
* type: string
* icon:
* type: string
* payload:
* type: object
* responses:
* 200:
* description: Workspace created.
* 400:
* description: Invalid request body.
*/
router.post(
"/",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const { name, color, icon, payload } = req.body ?? {};
if (!isNonEmptyString(name)) {
return res.status(400).json({ error: "Workspace name is required" });
}
if (!isValidPayload(payload)) {
return res
.status(400)
.json({ error: "payload with a tabs array is required" });
}
try {
const created = await createCurrentWorkspaceRepository().create(userId, {
name: name.trim(),
color: isNonEmptyString(color) ? color : null,
icon: isNonEmptyString(icon) ? icon : null,
payload: JSON.stringify(payload),
});
res.json(serialize(created));
} catch (err) {
databaseLogger.error("Failed to create workspace", err, {
operation: "workspace_create_failed",
userId,
});
res.status(500).json({ error: "Failed to create workspace" });
}
},
);
/**
* @openapi
* /workspaces/last-session:
* get:
* summary: Fetch the auto-maintained "Last Session" workspace
* description: Returns null if the current session has never been auto-saved yet.
* tags:
* - Workspaces
* responses:
* 200:
* description: The Last Session workspace, or null.
*/
router.get(
"/last-session",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
try {
const record =
await createCurrentWorkspaceRepository().findLastSession(userId);
res.json(record ? serialize(record) : null);
} catch (err) {
databaseLogger.error("Failed to fetch last session workspace", err, {
operation: "workspace_last_session_get_failed",
userId,
});
res.status(500).json({ error: "Failed to fetch last session workspace" });
}
},
);
/**
* @openapi
* /workspaces/last-session:
* put:
* summary: Upsert the auto-maintained "Last Session" workspace
* description: Always overwrites the single Last Session row for the caller - never creates a second one. Called by the frontend's debounced auto-save effect.
* tags:
* - Workspaces
* requestBody:
* required: true
* content:
* application/json:
* schema:
* type: object
* properties:
* payload:
* type: object
* responses:
* 200:
* description: Last Session workspace saved.
* 400:
* description: Invalid request body.
*/
router.put(
"/last-session",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const { payload } = req.body ?? {};
if (!isValidPayload(payload)) {
return res
.status(400)
.json({ error: "payload with a tabs array is required" });
}
try {
const saved = await createCurrentWorkspaceRepository().upsertLastSession(
userId,
JSON.stringify(payload),
);
res.json(serialize(saved));
} catch (err) {
databaseLogger.error("Failed to save last session workspace", err, {
operation: "workspace_last_session_save_failed",
userId,
});
res.status(500).json({ error: "Failed to save last session workspace" });
}
},
);
/**
* @openapi
* /workspaces/{id}:
* patch:
* summary: Rename or recolor a workspace
* description: Does not accept a payload - use PUT /workspaces/{id}/content to overwrite a workspace's saved tab arrangement. Rejects the Last Session workspace.
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* responses:
* 200:
* description: Workspace updated.
* 400:
* description: Invalid request, or target is the Last Session workspace.
* 404:
* description: Workspace not found.
*/
router.patch(
"/:id",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
const { name, color, icon } = req.body ?? {};
if (name !== undefined && !isNonEmptyString(name)) {
return res.status(400).json({ error: "Workspace name cannot be empty" });
}
try {
const updated = await createCurrentWorkspaceRepository().update(
userId,
id,
{
name: name !== undefined ? name.trim() : undefined,
color,
icon,
},
);
if (!updated) {
return res.status(404).json({ error: "Workspace not found" });
}
res.json(serialize(updated));
} catch (err) {
databaseLogger.error("Failed to update workspace", err, {
operation: "workspace_update_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to update workspace" });
}
},
);
/**
* @openapi
* /workspaces/{id}/content:
* put:
* summary: Overwrite a workspace's saved tab arrangement with a new payload
* description: Used by "Update with current" in the Workspaces panel. Rejects the Last Session workspace.
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* requestBody:
* required: true
* content:
* application/json:
* schema:
* type: object
* properties:
* payload:
* type: object
* responses:
* 200:
* description: Workspace content updated.
* 400:
* description: Invalid request body.
* 404:
* description: Workspace not found.
*/
router.put(
"/:id/content",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
const { payload } = req.body ?? {};
if (!isValidPayload(payload)) {
return res
.status(400)
.json({ error: "payload with a tabs array is required" });
}
try {
const updated = await createCurrentWorkspaceRepository().updateContent(
userId,
id,
JSON.stringify(payload),
);
if (!updated) {
return res.status(404).json({ error: "Workspace not found" });
}
res.json(serialize(updated));
} catch (err) {
databaseLogger.error("Failed to update workspace content", err, {
operation: "workspace_content_update_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to update workspace content" });
}
},
);
/**
* @openapi
* /workspaces/{id}/duplicate:
* post:
* summary: Duplicate a workspace's content and color/icon under a new name
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* requestBody:
* required: true
* content:
* application/json:
* schema:
* type: object
* properties:
* name:
* type: string
* responses:
* 200:
* description: New workspace created from the duplicate.
* 404:
* description: Workspace not found.
*/
router.post(
"/:id/duplicate",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
const { name } = req.body ?? {};
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
if (!isNonEmptyString(name)) {
return res.status(400).json({ error: "Workspace name is required" });
}
try {
const repository = createCurrentWorkspaceRepository();
const source = await repository.findById(userId, id);
if (!source) {
return res.status(404).json({ error: "Workspace not found" });
}
const created = await repository.create(userId, {
name: name.trim(),
color: source.color,
icon: source.icon,
payload: source.payload,
});
res.json(serialize(created));
} catch (err) {
databaseLogger.error("Failed to duplicate workspace", err, {
operation: "workspace_duplicate_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to duplicate workspace" });
}
},
);
/**
* @openapi
* /workspaces/{id}/set-default:
* post:
* summary: Mark a workspace as the restore-on-login default
* description: Clears isDefault on any other workspace for the caller. Idempotent if the target is already the default. Rejects the Last Session workspace.
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* responses:
* 200:
* description: Workspace set as default.
* 404:
* description: Workspace not found.
*/
router.post(
"/:id/set-default",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
try {
const updated = await createCurrentWorkspaceRepository().setDefault(
userId,
id,
);
if (!updated) {
return res.status(404).json({ error: "Workspace not found" });
}
res.json(serialize(updated));
} catch (err) {
databaseLogger.error("Failed to set default workspace", err, {
operation: "workspace_set_default_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to set default workspace" });
}
},
);
/**
* @openapi
* /workspaces/{id}/unset-default:
* post:
* summary: Remove a workspace as the restore-on-login default
* description: Idempotent if the target is not currently the default. Rejects the Last Session workspace.
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* responses:
* 200:
* description: Workspace unset as default.
* 404:
* description: Workspace not found.
*/
router.post(
"/:id/unset-default",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
try {
const updated = await createCurrentWorkspaceRepository().unsetDefault(
userId,
id,
);
if (!updated) {
return res.status(404).json({ error: "Workspace not found" });
}
res.json(serialize(updated));
} catch (err) {
databaseLogger.error("Failed to unset default workspace", err, {
operation: "workspace_unset_default_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to unset default workspace" });
}
},
);
/**
* @openapi
* /workspaces/{id}/apply:
* post:
* summary: Fetch a workspace to apply and mark it as just used
* description: Returns the full workspace with its payload parsed, and touches lastUsedAt server-side so the caller does not need a second round trip.
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* responses:
* 200:
* description: The workspace to apply.
* 404:
* description: Workspace not found.
*/
router.post(
"/:id/apply",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
try {
const repository = createCurrentWorkspaceRepository();
const record = await repository.findById(userId, id);
if (!record) {
return res.status(404).json({ error: "Workspace not found" });
}
await repository.touchLastUsed(userId, id);
res.json(serialize(record));
} catch (err) {
databaseLogger.error("Failed to apply workspace", err, {
operation: "workspace_apply_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to apply workspace" });
}
},
);
/**
* @openapi
* /workspaces/{id}:
* delete:
* summary: Delete a workspace
* description: Rejects the Last Session workspace, which is not user-deletable.
* tags:
* - Workspaces
* parameters:
* - in: path
* name: id
* required: true
* schema:
* type: integer
* responses:
* 200:
* description: Workspace deleted.
* 404:
* description: Workspace not found.
*/
router.delete(
"/:id",
authenticateJWT,
requireDataAccess,
async (req: Request, res: Response) => {
const userId = (req as AuthenticatedRequest).userId;
const id = parseWorkspaceId(req.params.id);
if (id === null) {
return res.status(400).json({ error: "Invalid workspace ID" });
}
try {
const deleted = await createCurrentWorkspaceRepository().delete(
userId,
id,
);
if (!deleted) {
return res.status(404).json({ error: "Workspace not found" });
}
res.json({ success: true });
} catch (err) {
databaseLogger.error("Failed to delete workspace", err, {
operation: "workspace_delete_failed",
userId,
workspaceId: id,
});
res.status(500).json({ error: "Failed to delete workspace" });
}
},
);
export function startWorkspacesService(): void {
registerWorkspacesRouter(router);
}
export function stopWorkspacesService(): void {
unregisterWorkspacesRouter();
}
@@ -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>
);
}
+34
View File
@@ -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);
}
@@ -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 } : {}),
};
}
@@ -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");
}
}