feat: add ops ai workspace dock control

plane-app/plane.env

@@ -120,3 +120,6 @@ PLANE_NODEDC_WORKSPACE_POLICY_TIMEOUT_SECONDS=3
 PLANE_NODEDC_AGENT_GATEWAY_URL=http://host.docker.internal:4100
 PLANE_NODEDC_AGENT_GATEWAY_TOKEN=local-dev-codex-agent-gateway-token-change-me
 PLANE_NODEDC_AGENT_GATEWAY_TIMEOUT_SECONDS=5
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_URL=http://host.docker.internal:18082
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_TOKEN=dev-ai-workspace-assistant-token
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_TIMEOUT_SECONDS=8

plane-app/plane.env.example

@@ -88,3 +88,8 @@ LIVE_SERVER_SECRET_KEY=CHANGE_ME_BEFORE_PRODUCTION
 DOCKERHUB_USER=makeplane
 PULL_POLICY=if_not_present
 CUSTOM_BUILD=false
+
+# NODE.DC AI Workspace Assistant
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_URL=
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_TOKEN=
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_TIMEOUT_SECONDS=8

plane-app/plane.env.staging.example

@@ -97,4 +97,7 @@ PLANE_NODEDC_WORKSPACE_POLICY_TIMEOUT_SECONDS=3
 PLANE_NODEDC_AGENT_GATEWAY_URL=https://codex-api.staging.nodedc.example
 PLANE_NODEDC_AGENT_GATEWAY_TOKEN=replace-with-codex-agent-gateway-internal-token
 PLANE_NODEDC_AGENT_GATEWAY_TIMEOUT_SECONDS=5
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_URL=http://ai-workspace-assistant:18082
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_TOKEN=replace-with-ai-workspace-assistant-token
+PLANE_NODEDC_AI_WORKSPACE_ASSISTANT_TIMEOUT_SECONDS=8
 PLANE_NODEDC_WORKSPACE_CREATION_MODE=any_authorized_user

plane-src/apps/web/ce/components/workspace/content-wrapper.tsx

@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 import { cn } from "@plane/utils";
 import { AppRailRoot } from "@/components/navigation";
 import { useAppRailVisibility } from "@/lib/app-rail";
+import { AIWorkspaceGlobalControl } from "@/components/ai-workspace/global-control";
 import { VoiceTaskerGlobalControl } from "@/components/voice-tasker/global-control";
 // local imports
 import { TopNavigationRoot } from "../navigations";
@@ -40,6 +41,7 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
         >
           {children}
         </div>
+        {workspaceSlug && <AIWorkspaceGlobalControl workspaceSlug={workspaceSlug} />}
         {workspaceSlug && <VoiceTaskerGlobalControl workspaceSlug={workspaceSlug} />}
       </div>
     </div>

plane-src/apps/web/core/components/ai-workspace/global-control.tsx

@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import useSWR from "swr";
+import { CheckCircle2, MessageCircle, Monitor, RefreshCw, 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";
+
+const workspaceAIWorkspaceService = new WorkspaceAIWorkspaceService();
+
+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]";
+
+type TAIWorkspaceGlobalControlProps = {
+  workspaceSlug: string;
+};
+
+export function AIWorkspaceGlobalControl({ workspaceSlug }: TAIWorkspaceGlobalControlProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dockSlot, setDockSlot] = useState<Element | null>(null);
+
+  const { data, error, isLoading, mutate } = useSWR(
+    isOpen && workspaceSlug ? `AI_WORKSPACE_EXECUTORS_${workspaceSlug}` : null,
+    () => workspaceAIWorkspaceService.listExecutors(workspaceSlug),
+    { refreshInterval: isOpen ? 10000 : 0 }
+  );
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const updateDockSlot = () => {
+      setDockSlot(
+        document.querySelector("[data-nodedc-voice-task-toolbar-slot]") ??
+          document.querySelector("[data-nodedc-voice-task-dock-slot]")
+      );
+    };
+
+    updateDockSlot();
+    const observer = new MutationObserver(updateDockSlot);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const selectedExecutor = useMemo(
+    () => data?.executors?.find((executor) => executor.id === data.selectedExecutorId) ?? data?.executors?.[0] ?? null,
+    [data?.executors, data?.selectedExecutorId]
+  );
+
+  const handleOpen = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <>
+      {dockSlot
+        ? createPortal(
+            <Tooltip tooltipContent="AI Workspace" position="top">
+              <button
+                type="button"
+                className="nodedc-bottom-dock-voice-button nodedc-bottom-dock-ai-workspace-button"
+                onClick={handleOpen}
+                aria-label="AI Workspace"
+              >
+                <MessageCircle className="size-4" />
+              </button>
+            </Tooltip>,
+            dockSlot
+          )
+        : null}
+
+      <ModalCore
+        isOpen={isOpen}
+        handleClose={handleClose}
+        position={EModalPosition.CENTER}
+        width={EModalWidth.MD}
+        className="overflow-visible"
+      >
+        <div className="relative p-5">
+          <div className="flex items-start justify-between gap-4 pr-12">
+            <div>
+              <h3 className="text-18 font-medium text-primary">AI Workspace</h3>
+              <div className="mt-1 text-12 text-tertiary">Ops</div>
+            </div>
+            <button type="button" className={aiWorkspaceCloseButtonClassName} onClick={handleClose}>
+              <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>
+              </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 недоступен"}
+                </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>
+                  </div>
+                ))
+              ) : (
+                <div className="rounded-[20px] bg-white/[0.035] px-4 py-3 text-12 text-tertiary">
+                  Устройства не подключены
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </ModalCore>
+    </>
+  );
+}

plane-src/apps/web/core/services/workspace-ai-workspace.service.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "@/services/api.service";
+
+export type TAIWorkspaceExecutorStatus = "unknown" | "online" | "offline" | "checking" | "error";
+
+export type TAIWorkspaceExecutor = {
+  id: string;
+  name: string;
+  type: string;
+  connectionMode: "hub" | "direct";
+  pairingCode?: string | null;
+  model?: string | null;
+  accountLabel?: string | null;
+  status: TAIWorkspaceExecutorStatus;
+  lastSeenAt?: string | null;
+  updatedAt?: string | null;
+};
+
+export type TAIWorkspaceExecutorListResponse = {
+  ok: boolean;
+  selectedExecutorId?: string | null;
+  executors: TAIWorkspaceExecutor[];
+};
+
+export class WorkspaceAIWorkspaceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async listExecutors(workspaceSlug: string): Promise<TAIWorkspaceExecutorListResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/ai-workspace/executors/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data ?? error;
+      });
+  }
+}

plane-src/apps/web/styles/globals.css

@@ -627,6 +627,7 @@
     display: flex;
     flex: 0 0 auto;
     align-items: center;
+    gap: 0.5rem;
     justify-content: center;
     min-width: 0;
   }
@@ -1648,10 +1649,12 @@
   }
 
   .nodedc-expanded-tool-slot {
-    display: grid;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: center;
     min-height: 3rem;
     min-width: 3rem;
-    place-items: center;
   }
 
   .nodedc-expanded-header-filters-slot,