SILVER/NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add standalone ops ai workspace setup

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-06-09 13:23:02 +03:00
parent 6c119aae04
commit 71979526cf
6 changed files with 810 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/apps/web/core/components/ai-workspace/global-control.tsx
+395 -62
View File
@@ -5,18 +5,29 @@
*/
import { useCallback, useEffect, useMemo, useState } from "react";
import type { FormEvent, MouseEvent } from "react";
import { createPortal } from "react-dom";
import useSWR from "swr";
import { CheckCircle2, MessageCircle, Monitor, RefreshCw, X } from "lucide-react";
import { CheckCircle2, Download, MessageCircle, Monitor, Plus, RefreshCw, Settings, Trash2, X } from "lucide-react";
// plane imports
import { Button } from "@plane/propel/button";
import { Tooltip } from "@plane/propel/tooltip";
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
import { cn } from "@plane/utils";
// services
import { WorkspaceAIWorkspaceService } from "@/services/workspace-ai-workspace.service";
import type {
TAIWorkspaceExecutor,
TAIWorkspaceExecutorConnectionMode,
TAIWorkspaceExecutorInput,
} from "@/services/workspace-ai-workspace.service";
const workspaceAIWorkspaceService = new WorkspaceAIWorkspaceService();
const DEFAULT_WINDOWS_AGENT_PORT = "8787";
const capabilityOptions = [
{ value: "engine", label: "Engine" },
{ value: "ops", label: "Ops" },
{ value: "ndc-agent-core", label: "NDC Agent" },
];
const aiWorkspaceCloseButtonClassName =
"absolute top-0.5 right-0.5 flex h-12 w-12 items-center justify-center rounded-full border-0 bg-[#17181B] text-white shadow-none ring-0 transition-transform outline-none hover:scale-[1.03] hover:bg-[#0F1012]";
@@ -25,9 +36,72 @@ type TAIWorkspaceGlobalControlProps = {
workspaceSlug: string;
};
type TExecutorDraft = {
name: string;
connectionMode: TAIWorkspaceExecutorConnectionMode;
endpoint: string;
workspacePath: string;
agentPort: string;
accountLabel: string;
capabilities: string[];
};
function emptyDraft(): TExecutorDraft {
return {
name: "",
connectionMode: "hub",
endpoint: "",
workspacePath: "",
agentPort: DEFAULT_WINDOWS_AGENT_PORT,
accountLabel: "",
capabilities: ["ops"],
};
}
function draftFromExecutor(executor: TAIWorkspaceExecutor | null | undefined): TExecutorDraft {
if (!executor) return emptyDraft();
return {
name: executor.name || "",
connectionMode: executor.connectionMode === "direct" ? "direct" : "hub",
endpoint: executor.endpoint || "",
workspacePath: executor.workspacePath || "",
agentPort: String(executor.agentPort || DEFAULT_WINDOWS_AGENT_PORT),
accountLabel: executor.accountLabel || "",
capabilities: Array.isArray(executor.capabilities) && executor.capabilities.length ? executor.capabilities : ["ops"],
};
}
function toInput(draft: TExecutorDraft): TAIWorkspaceExecutorInput {
const port = Number(draft.agentPort || DEFAULT_WINDOWS_AGENT_PORT);
return {
name: draft.name.trim(),
type: "codex-remote",
connectionMode: draft.connectionMode,
endpoint: draft.connectionMode === "direct" ? draft.endpoint.trim() || null : null,
workspacePath: draft.workspacePath.trim() || null,
agentPort: Number.isInteger(port) ? port : Number(DEFAULT_WINDOWS_AGENT_PORT),
accountLabel: draft.accountLabel.trim() || null,
capabilities: Array.from(new Set(["ops", ...draft.capabilities])).filter(Boolean),
};
}
function statusLabel(status: string | null | undefined) {
if (status === "online") return "online";
if (status === "offline") return "offline";
if (status === "checking") return "checking";
if (status === "error") return "error";
return "unknown";
}
export function AIWorkspaceGlobalControl({ workspaceSlug }: TAIWorkspaceGlobalControlProps) {
const [isOpen, setIsOpen] = useState(false);
const [dockSlot, setDockSlot] = useState<Element | null>(null);
const [detailsMode, setDetailsMode] = useState<"context" | "new" | "edit">("context");
const [editingId, setEditingId] = useState<string>("");
const [draft, setDraft] = useState<TExecutorDraft>(() => emptyDraft());
const [busyId, setBusyId] = useState("");
const [notice, setNotice] = useState("");
const [actionError, setActionError] = useState("");
const { data, error, isLoading, mutate } = useSWR(
isOpen && workspaceSlug ? `AI_WORKSPACE_EXECUTORS_${workspaceSlug}` : null,
@@ -54,10 +128,23 @@ export function AIWorkspaceGlobalControl({ workspaceSlug }: TAIWorkspaceGlobalCo
};
}, []);
const selectedExecutor = useMemo(
() => data?.executors?.find((executor) => executor.id === data.selectedExecutorId) ?? data?.executors?.[0] ?? null,
[data?.executors, data?.selectedExecutorId]
const executors = useMemo(() => data?.executors ?? [], [data?.executors]);
const activeExecutor = useMemo(
() => executors.find((executor) => executor.id === data?.selectedExecutorId) ?? executors[0] ?? null,
[data?.selectedExecutorId, executors]
);
const editingExecutor = useMemo(
() => executors.find((executor) => executor.id === editingId) ?? activeExecutor,
[activeExecutor, editingId, executors]
);
const detailsOpen = detailsMode === "new" || detailsMode === "edit";
const isBusy = Boolean(busyId);
useEffect(() => {
if (!isOpen || detailsMode === "new") return;
setEditingId(activeExecutor?.id || "");
setDraft(draftFromExecutor(activeExecutor));
}, [activeExecutor, detailsMode, isOpen]);
const handleOpen = useCallback(() => {
setIsOpen(true);
@@ -65,8 +152,116 @@ export function AIWorkspaceGlobalControl({ workspaceSlug }: TAIWorkspaceGlobalCo
const handleClose = useCallback(() => {
setIsOpen(false);
setDetailsMode("context");
setNotice("");
setActionError("");
}, []);
const runMutation = useCallback(
async (id: string, action: () => Promise<unknown>, successText: string) => {
setBusyId(id);
setActionError("");
setNotice("");
try {
await action();
setNotice(successText);
} catch (mutationError: any) {
setActionError(String(mutationError?.message || mutationError?.error || mutationError || "AI Workspace request failed"));
} finally {
setBusyId("");
}
},
[]
);
const startNew = () => {
setDetailsMode("new");
setEditingId("");
setDraft(emptyDraft());
setNotice("");
setActionError("");
};
const selectExecutor = (executor: TAIWorkspaceExecutor) => {
setDetailsMode("context");
setEditingId(executor.id);
setDraft(draftFromExecutor(executor));
if (executor.id !== data?.selectedExecutorId) {
void runMutation(
`select:${executor.id}`,
async () => {
const payload = await workspaceAIWorkspaceService.selectExecutor(workspaceSlug, executor.id);
await mutate(payload, { revalidate: false });
},
"Устройство выбрано"
);
}
};
const editActive = () => {
if (!activeExecutor) return;
setDetailsMode("edit");
setEditingId(activeExecutor.id);
setDraft(draftFromExecutor(activeExecutor));
setNotice("");
setActionError("");
};
const saveDraft = async (event: FormEvent) => {
event.preventDefault();
const input = toInput(draft);
if (!input.name) {
setActionError("Укажи имя устройства");
return;
}
if (detailsMode === "new") {
await runMutation("save", async () => {
const payload = await workspaceAIWorkspaceService.createExecutor(workspaceSlug, input);
await mutate(payload, { revalidate: false });
const next = payload.executors.find((executor) => executor.name === input.name) ?? payload.executors[0] ?? null;
setEditingId(next?.id || "");
setDetailsMode(next ? "edit" : "context");
}, "Устройство создано");
return;
}
if (!editingExecutor) return;
await runMutation("save", async () => {
const payload = await workspaceAIWorkspaceService.updateExecutor(workspaceSlug, editingExecutor.id, input);
await mutate(payload, { revalidate: false });
setDetailsMode("context");
}, "Устройство сохранено");
};
const deleteEditingExecutor = async () => {
if (!editingExecutor) return;
await runMutation(`delete:${editingExecutor.id}`, async () => {
const payload = await workspaceAIWorkspaceService.deleteExecutor(workspaceSlug, editingExecutor.id);
await mutate(payload, { revalidate: false });
setDetailsMode("context");
}, "Устройство удалено");
};
const toggleCapability = (value: string) => {
setDraft((current) => {
const set = new Set(current.capabilities);
if (set.has(value)) set.delete(value);
else set.add(value);
return { ...current, capabilities: Array.from(set) };
});
};
const downloadAgent = async (event: MouseEvent<HTMLAnchorElement>) => {
if (!editingExecutor) return;
event.preventDefault();
await runMutation("download", async () => {
const payload = await workspaceAIWorkspaceService.updateExecutor(workspaceSlug, editingExecutor.id, toInput(draft));
await mutate(payload, { revalidate: false });
window.location.href = workspaceAIWorkspaceService.getWindowsAgentInstallerUrl(workspaceSlug, editingExecutor.id, {
port: draft.agentPort || DEFAULT_WINDOWS_AGENT_PORT,
});
}, "Installer подготовлен");
};
return (
<>
{dockSlot
@@ -89,79 +284,217 @@ export function AIWorkspaceGlobalControl({ workspaceSlug }: TAIWorkspaceGlobalCo
isOpen={isOpen}
handleClose={handleClose}
position={EModalPosition.CENTER}
width={EModalWidth.MD}
width={EModalWidth.XXL}
className="overflow-visible"
>
<div className="relative p-5">
<div className="flex items-start justify-between gap-4 pr-12">
<div className="nodedc-ai-workspace-modal relative">
<div className="nodedc-ai-workspace-modal__head">
<div>
<h3 className="text-18 font-medium text-primary">AI Workspace</h3>
<div className="mt-1 text-12 text-tertiary">Ops</div>
<div className="nodedc-ai-workspace-kicker">AI Space</div>
<h3>AI Workspace</h3>
</div>
<button type="button" className={aiWorkspaceCloseButtonClassName} onClick={handleClose}>
<button type="button" className={aiWorkspaceCloseButtonClassName} onClick={handleClose} aria-label="Закрыть AI Workspace">
<X className="size-5" />
</button>
</div>
<div className="mt-5 rounded-[28px] bg-white/[0.04] p-4 backdrop-blur-xl">
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-3">
<span className="grid size-10 flex-shrink-0 place-items-center rounded-full bg-white/[0.06] text-[rgb(var(--nodedc-accent-rgb))]">
<MessageCircle className="size-5" />
</span>
<div className="min-w-0">
<div className="truncate text-15 font-medium text-primary">
{selectedExecutor?.name ?? "Codex assistant"}
</div>
<div className="mt-0.5 truncate text-12 text-tertiary">
{selectedExecutor?.model || selectedExecutor?.accountLabel || "AI Workspace"}
</div>
<div className="nodedc-ai-settings-workspace" data-details-open={detailsOpen ? "true" : undefined}>
<aside className="nodedc-ai-settings-device-list">
<div className="nodedc-ai-settings-devices-head">
<div>
<div className="nodedc-ai-workspace-kicker">Devices</div>
<div className="nodedc-ai-settings-devices-title">Устройства</div>
</div>
<button type="button" className="nodedc-ai-icon-button" aria-label="Подключить устройство" onClick={startNew}>
<Plus className="size-4" />
</button>
</div>
<Button variant="secondary" size="sm" onClick={() => mutate()} disabled={isLoading}>
<RefreshCw className={cn("mr-2 size-3.5", isLoading && "animate-spin")} />
Обновить
</Button>
</div>
<div className="mt-4 grid grid-cols-1 gap-2">
{error ? (
<div className="border-red-500/25 bg-red-500/10 text-red-500 rounded-[20px] border px-4 py-3 text-12">
{error?.message || error?.error || "AI Workspace недоступен"}
{isLoading ? <div className="nodedc-ai-settings-empty-list">Загрузка</div> : null}
{executors.map((executor) => (
<button
key={executor.id}
type="button"
className="nodedc-ai-settings-executor-row"
data-active={activeExecutor?.id === executor.id && detailsMode !== "new" ? "true" : undefined}
onClick={() => selectExecutor(executor)}
>
<span>
<Monitor className="size-4" />
<b>{executor.name}</b>
</span>
<small>
{executor.connectionMode === "hub" ? executor.pairingCode || "Cloud Hub" : "Direct"} · {statusLabel(executor.status)}
</small>
</button>
))}
{!isLoading && !executors.length ? (
<div className="nodedc-ai-settings-empty-list">
<span>{error ? "Registry недоступен" : "Устройств нет"}</span>
<small>{error ? String((error as any)?.message || (error as any)?.error || error) : "Подключенные устройства появятся здесь."}</small>
</div>
) : isLoading ? (
<div className="rounded-[20px] bg-white/[0.035] px-4 py-3 text-12 text-tertiary">Загрузка</div>
) : data?.executors?.length ? (
data.executors.map((executor) => (
<div key={executor.id} className="flex items-center justify-between gap-3 rounded-[20px] bg-white/[0.035] px-4 py-3">
<div className="flex min-w-0 items-center gap-3">
<Monitor className="size-4 flex-shrink-0 text-tertiary" />
<div className="min-w-0">
<div className="truncate text-13 font-medium text-primary">{executor.name}</div>
<div className="mt-0.5 truncate text-11 text-tertiary">
{executor.connectionMode === "hub" ? executor.pairingCode || "hub" : "direct"}
</div>
</div>
</div>
<span
className={cn(
"inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-11",
executor.status === "online"
? "bg-green-500/10 text-green-300"
: "bg-white/[0.045] text-tertiary"
)}
>
<CheckCircle2 className="size-3" />
{executor.status}
</span>
) : null}
</aside>
<section className="nodedc-ai-settings-context-pane">
<div className="nodedc-ai-settings-form-top">
<div>
<div className="nodedc-ai-settings-section-title">{detailsMode === "new" ? "Новое устройство" : "Рабочий контекст"}</div>
<div className="nodedc-ai-settings-subtitle">Общий пользовательский ассистент для Ops и Engine</div>
</div>
{activeExecutor ? <span className="nodedc-ai-status-pill">{statusLabel(activeExecutor.status)}</span> : null}
</div>
{activeExecutor && detailsMode !== "new" ? (
<>
<div className="nodedc-ai-settings-active-model">
<span>Активное устройство</span>
<b>{activeExecutor.name}</b>
<small>{activeExecutor.connectionMode === "hub" ? activeExecutor.pairingCode || "Cloud Hub" : activeExecutor.endpoint}</small>
</div>
))
<div className="nodedc-ai-settings-note" data-ready="true">
Это устройство сохранено в общем AI Workspace registry. Оно будет видно в Engine и Ops для этого же пользователя.
</div>
<div className="nodedc-ai-settings-actions">
<button type="button" className="modal-btn" disabled={isBusy} onClick={() => void mutate()}>
<RefreshCw className={cn("size-4", isLoading && "animate-spin")} />
Обновить
</button>
<button type="button" className="modal-btn" disabled={isBusy} onClick={editActive}>
<Settings className="size-4" />
Настройки
</button>
<button type="button" className="modal-btn btn-primary" onClick={handleClose}>
<CheckCircle2 className="size-4" />
Готово
</button>
</div>
</>
) : detailsMode === "new" ? (
<div className="nodedc-ai-settings-empty-context">
<span>Новое устройство</span>
<small>Заполни параметры справа и нажми «Подключить». После сохранения появятся pairing code и installer агента.</small>
</div>
) : error ? (
<div className="nodedc-ai-settings-empty-context" data-tone="error">
<span>Registry backend недоступен</span>
<small>{String((error as any)?.message || (error as any)?.error || error)}</small>
<button type="button" className="modal-btn btn-primary" onClick={() => void mutate()}>
Повторить
</button>
</div>
) : (
<div className="rounded-[20px] bg-white/[0.035] px-4 py-3 text-12 text-tertiary">
Устройства не подключены
<div className="nodedc-ai-settings-empty-context">
<span>Устройство не выбрано</span>
<small>Подключи Codex worker. Если устройство уже добавлено в Engine, оно появится здесь автоматически.</small>
<button type="button" className="modal-btn btn-primary" onClick={startNew}>
Подключить устройство
</button>
</div>
)}
</div>
{notice ? <div className="nodedc-ai-settings-note" data-tone="success">{notice}</div> : null}
{actionError ? <div className="nodedc-ai-settings-error">{actionError}</div> : null}
</section>
{detailsOpen ? (
<form className="nodedc-ai-settings-details-pane" onSubmit={saveDraft}>
<div className="nodedc-ai-settings-form-top">
<div>
<div className="nodedc-ai-settings-section-title">{detailsMode === "new" ? "Подключить устройство" : "Параметры устройства"}</div>
<div className="nodedc-ai-settings-subtitle">Cloud Hub или прямой endpoint</div>
</div>
{detailsMode === "edit" ? (
<button type="button" className="nodedc-ai-mini-close" aria-label="Закрыть параметры" onClick={() => setDetailsMode("context")}>
<X className="size-4" />
</button>
) : null}
</div>
<label className="nodedc-ai-settings-field">
<span>Имя устройства</span>
<input value={draft.name} placeholder="MACPRO Codex" onChange={(event) => setDraft((current) => ({ ...current, name: event.target.value }))} />
</label>
<label className="nodedc-ai-settings-field">
<span>Подключение</span>
<select value={draft.connectionMode} onChange={(event) => setDraft((current) => ({ ...current, connectionMode: event.target.value as TAIWorkspaceExecutorConnectionMode }))}>
<option value="hub">Cloud Hub</option>
<option value="direct">Прямое подключение</option>
</select>
</label>
{draft.connectionMode === "hub" && detailsMode === "edit" && editingExecutor ? (
<div className="nodedc-ai-settings-download-row">
<label className="nodedc-ai-settings-field">
<span>Pairing code</span>
<input value={editingExecutor.pairingCode || ""} readOnly placeholder="XXXX-XXXX-XXXX" />
</label>
<a
className="modal-btn btn-primary nodedc-ai-settings-download"
href={workspaceAIWorkspaceService.getWindowsAgentInstallerUrl(workspaceSlug, editingExecutor.id)}
onClick={downloadAgent}
download
>
<Download className="size-4" />
Скачать агент
</a>
</div>
) : draft.connectionMode === "hub" ? (
<div className="nodedc-ai-settings-note">
После сохранения общий AI Workspace создаст pairing code и installer агента.
</div>
) : null}
{draft.connectionMode === "direct" ? (
<label className="nodedc-ai-settings-field">
<span>Адрес агента</span>
<input value={draft.endpoint} placeholder="http://192.168.1.50:8787" onChange={(event) => setDraft((current) => ({ ...current, endpoint: event.target.value }))} />
</label>
) : null}
<label className="nodedc-ai-settings-field">
<span>Workspace path</span>
<input value={draft.workspacePath} placeholder="C:\\Projects\\NODEDC" onChange={(event) => setDraft((current) => ({ ...current, workspacePath: event.target.value }))} />
</label>
<label className="nodedc-ai-settings-field">
<span>Порт агента</span>
<input value={draft.agentPort} inputMode="numeric" onChange={(event) => setDraft((current) => ({ ...current, agentPort: event.target.value }))} />
</label>
<label className="nodedc-ai-settings-field">
<span>Аккаунт</span>
<input value={draft.accountLabel} placeholder="OpenAI account" onChange={(event) => setDraft((current) => ({ ...current, accountLabel: event.target.value }))} />
</label>
<div className="nodedc-ai-settings-field">
<span>Capabilities</span>
<div className="nodedc-ai-settings-capabilities">
{capabilityOptions.map((option) => (
<label key={option.value}>
<input type="checkbox" checked={draft.capabilities.includes(option.value)} onChange={() => toggleCapability(option.value)} />
<span>{option.label}</span>
</label>
))}
</div>
</div>
<div className="nodedc-ai-settings-actions">
{detailsMode === "edit" && editingExecutor ? (
<button type="button" className="modal-btn nodedc-ai-danger" disabled={isBusy} onClick={deleteEditingExecutor}>
<Trash2 className="size-4" />
Удалить
</button>
) : null}
<button type="submit" className="modal-btn btn-primary" disabled={isBusy || !draft.name.trim()}>
{busyId === "save" ? "Сохранение..." : detailsMode === "new" ? "Подключить" : "Сохранить"}
</button>
</div>
</form>
) : null}
</div>
</div>
</ModalCore>