create-principles-disciple 1.145.15 → 1.145.17

package/console/dist/ui/pages/control-center/DesignGatePanel.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SectionTitle } from "../../components/layout/section-title.js";
+import { createDesignGateDeclaration, fetchDesignGateDeclaration, fetchDesignGateSessions, revokeDesignGateDeclaration, updateDesignGateDecision, } from "../../api.js";
+const decisionTranslationKey = {
+    approved: "approved",
+    not_approved: "notApproved",
+    not_required: "notRequired",
+};
+const actionTranslationKey = {
+    read: "read",
+    write: "write",
+    execute: "execute",
+};
+function sessionKey(session) {
+    return `${session.projectWorkspacePath}\u001f${session.hostSessionId}`;
+}
+function parsePaths(value) {
+    return value.split(/\r?\n/).map((path) => path.trim()).filter(Boolean);
+}
+function errorFromResponse(response) {
+    return { error: response.error, nextAction: response.nextAction, status: response.status };
+}
+function fieldClass() {
+    return "mt-1 w-full rounded-[4px] border border-line bg-surface px-3 py-2 text-[13px] text-ink focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2";
+}
+function actionButtonClass() {
+    return "rounded-[4px] border border-line px-3 py-2 text-[12.5px] font-medium text-ink transition-colors hover:border-line-2 focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+}
+export function DesignGatePanel() {
+    const { t } = useTranslation();
+    const [sessions, setSessions] = useState([]);
+    const [selectedKey, setSelectedKey] = useState("");
+    const [declaration, setDeclaration] = useState(null);
+    const [sessionsLoading, setSessionsLoading] = useState(true);
+    const [declarationLoading, setDeclarationLoading] = useState(false);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const [specPath, setSpecPath] = useState("");
+    const [scopePaths, setScopePaths] = useState("");
+    const [scopeActions, setScopeActions] = useState(["write", "execute"]);
+    const [newDecision, setNewDecision] = useState("not_approved");
+    const declarationRequest = useRef(0);
+    const selectedSession = useMemo(() => sessions.find((session) => sessionKey(session) === selectedKey) ?? null, [sessions, selectedKey]);
+    const loadSessions = useCallback(async () => {
+        setSessionsLoading(true);
+        setError(null);
+        const result = await fetchDesignGateSessions();
+        setSessionsLoading(false);
+        if (!result.success) {
+            setError(errorFromResponse(result));
+            return;
+        }
+        setSessions(result.data.sessions);
+        setSelectedKey((current) => result.data.sessions.some((session) => sessionKey(session) === current)
+            ? current
+            : result.data.sessions[0] ? sessionKey(result.data.sessions[0]) : "");
+    }, []);
+    const loadDeclaration = useCallback(async (session) => {
+        const requestNumber = ++declarationRequest.current;
+        setDeclarationLoading(true);
+        setError(null);
+        const result = await fetchDesignGateDeclaration(session.projectWorkspacePath, session.hostSessionId);
+        if (requestNumber !== declarationRequest.current)
+            return;
+        setDeclarationLoading(false);
+        if (!result.success) {
+            setError(errorFromResponse(result));
+            setDeclaration(null);
+            return;
+        }
+        setDeclaration(result.data.declaration);
+    }, []);
+    useEffect(() => { void loadSessions(); }, [loadSessions]);
+    useEffect(() => {
+        if (selectedSession)
+            void loadDeclaration(selectedSession);
+        else {
+            declarationRequest.current += 1;
+            setDeclarationLoading(false);
+            setDeclaration(null);
+        }
+    }, [selectedSession, loadDeclaration]);
+    const runMutation = useCallback(async (mutation) => {
+        setPending(true);
+        setError(null);
+        const result = await mutation();
+        setPending(false);
+        if (!result.success) {
+            const failure = errorFromResponse(result);
+            setError(failure);
+            if (result.status === 409 && selectedSession) {
+                await loadDeclaration(selectedSession);
+                setError(failure);
+            }
+            return;
+        }
+        if (!result.data.declaration) {
+            setError({ error: t("pages.controlCenter.designGate.invalidMutationResponse") });
+            return;
+        }
+        setDeclaration(result.data.declaration);
+    }, [loadDeclaration, selectedSession, t]);
+    const createDeclaration = useCallback(async () => {
+        if (!selectedSession)
+            return;
+        const paths = parsePaths(scopePaths);
+        if (!specPath.trim() || paths.length === 0 || scopeActions.length === 0) {
+            setError({ error: t("pages.controlCenter.designGate.requiredFields") });
+            return;
+        }
+        await runMutation(() => createDesignGateDeclaration({
+            projectWorkspacePath: selectedSession.projectWorkspacePath,
+            hostSessionId: selectedSession.hostSessionId,
+            specPath: specPath.trim(),
+            scope: { paths, actions: scopeActions },
+            decision: newDecision,
+        }));
+    }, [newDecision, runMutation, scopeActions, scopePaths, selectedSession, specPath, t]);
+    const mutateDecision = useCallback((decision) => {
+        if (!declaration)
+            return;
+        void runMutation(() => updateDesignGateDecision(declaration.sourceRef, declaration.revision, decision));
+    }, [declaration, runMutation]);
+    const revoke = useCallback(() => {
+        if (!declaration)
+            return;
+        void runMutation(() => revokeDesignGateDeclaration(declaration.sourceRef, declaration.revision));
+    }, [declaration, runMutation]);
+    const disabled = pending || declarationLoading || sessionsLoading;
+    return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-design-gate", children: [_jsx(SectionTitle, { id: "section-design-gate", children: t("pages.controlCenter.designGate.title") }), _jsx("p", { className: "mb-4 max-w-[68ch] text-[13px] leading-relaxed text-ink-3", children: t("pages.controlCenter.designGate.description") }), error && (_jsxs("div", { role: "alert", className: "mb-4 rounded-[4px] border border-amber/30 border-l-2 border-l-amber bg-amber/10 p-3 text-[12.5px] text-ink-2", children: [_jsx("p", { children: error.error }), error.nextAction && _jsx("p", { className: "mt-1 text-ink-3", children: error.nextAction }), error.status === 409 && selectedSession && (_jsx("button", { type: "button", className: "mt-2 underline", disabled: disabled, onClick: () => void loadDeclaration(selectedSession), children: t("pages.controlCenter.designGate.refresh") }))] })), sessionsLoading ? (_jsx("p", { className: "text-[13px] text-ink-3", children: t("pages.controlCenter.designGate.loadingSessions") })) : sessions.length === 0 ? (_jsxs("div", { className: "rounded-[4px] border border-line bg-panel p-4 text-[13px] text-ink-3", children: [_jsx("p", { children: t("pages.controlCenter.designGate.noSessions") }), _jsx("button", { type: "button", className: `${actionButtonClass()} mt-3`, disabled: disabled, onClick: () => void loadSessions(), children: t("pages.controlCenter.designGate.refresh") })] })) : (_jsxs("div", { className: "space-y-4 rounded-[4px] border border-line bg-panel p-4", children: [_jsxs("label", { className: "block text-[12.5px] font-medium text-ink", children: [t("pages.controlCenter.designGate.nativeSession"), _jsx("select", { className: fieldClass(), value: selectedKey, disabled: disabled, onChange: (event) => setSelectedKey(event.currentTarget.value), children: sessions.map((session) => (_jsxs("option", { value: sessionKey(session), children: [session.projectWorkspacePath, " \u00B7 ", session.hostSessionId] }, sessionKey(session)))) })] }), declarationLoading ? (_jsx("p", { className: "text-[13px] text-ink-3", children: t("pages.controlCenter.designGate.loadingDeclaration") })) : declaration && !declaration.revoked ? (_jsxs("div", { className: "space-y-3", "aria-live": "polite", children: [_jsxs("div", { className: "grid gap-2 rounded-[4px] border border-line-2 bg-surface p-3 text-[12.5px]", children: [_jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.decision") }), " ", t(`pages.controlCenter.designGate.decisions.${decisionTranslationKey[declaration.decision]}`), declaration.revoked ? ` · ${t("pages.controlCenter.designGate.revoked")}` : ""] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.revision") }), " ", declaration.revision] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.spec") }), " ", _jsx("span", { className: "break-all font-mono", children: declaration.specPath })] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.specDigest") }), " ", _jsx("span", { className: "break-all font-mono", children: declaration.specDigest })] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.scopePaths") }), " ", _jsx("span", { className: "font-mono", children: declaration.scope.paths.join(", ") })] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.scopeActions") }), " ", declaration.scope.actions.map((action) => t(`pages.controlCenter.designGate.actions.${actionTranslationKey[action]}`)).join(", ")] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.owner") }), " ", _jsx("span", { className: "font-mono", children: declaration.actor.ownerId })] }), _jsxs("p", { children: [_jsx("strong", { children: t("pages.controlCenter.designGate.decidedAt") }), " ", declaration.decidedAt] })] }), _jsx("p", { className: "border-l-2 border-amber pl-3 text-[12.5px] leading-relaxed text-ink-3", children: t("pages.controlCenter.designGate.semanticLimit") }), !declaration.revoked && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { type: "button", className: actionButtonClass(), disabled: disabled || declaration.decision === "approved", onClick: () => mutateDecision("approved"), children: pending ? t("pages.controlCenter.designGate.saving") : t("pages.controlCenter.designGate.approve") }), _jsx("button", { type: "button", className: actionButtonClass(), disabled: disabled || declaration.decision === "not_approved", onClick: () => mutateDecision("not_approved"), children: t("pages.controlCenter.designGate.markPending") }), _jsx("button", { type: "button", className: actionButtonClass(), disabled: disabled, onClick: revoke, children: t("pages.controlCenter.designGate.revoke") })] }))] })) : (_jsxs("div", { className: "space-y-3 border-t border-line pt-4", children: [declaration?.revoked && (_jsxs("div", { className: "rounded-[4px] border border-line-2 bg-surface p-3 text-[12.5px] text-ink-3", children: [_jsx("p", { children: t("pages.controlCenter.designGate.revokedLatest", { revision: declaration.revision }) }), _jsxs("p", { className: "mt-1 break-all font-mono", children: [declaration.specPath, " \u00B7 ", declaration.scope.paths.join(", ")] })] })), _jsx("p", { className: "text-[12.5px] text-ink-3", children: t("pages.controlCenter.designGate.noDeclaration") }), _jsxs("label", { className: "block text-[12.5px] font-medium text-ink", children: [t("pages.controlCenter.designGate.specPath"), _jsx("input", { className: fieldClass(), value: specPath, onChange: (event) => setSpecPath(event.currentTarget.value), placeholder: t("pages.controlCenter.designGate.specPathHint"), disabled: disabled })] }), _jsxs("label", { className: "block text-[12.5px] font-medium text-ink", children: [t("pages.controlCenter.designGate.scopePathsInput"), _jsx("textarea", { className: fieldClass(), rows: 3, value: scopePaths, onChange: (event) => setScopePaths(event.currentTarget.value), placeholder: t("pages.controlCenter.designGate.scopePathsHint"), disabled: disabled })] }), _jsx("p", { className: "-mt-2 text-[12px] leading-relaxed text-ink-4", children: t("pages.controlCenter.designGate.scopePathsHelp") }), _jsxs("fieldset", { disabled: disabled, children: [_jsx("legend", { className: "text-[12.5px] font-medium text-ink", children: t("pages.controlCenter.designGate.scopeActionsInput") }), _jsx("div", { className: "mt-2 flex flex-wrap gap-4", children: ["read", "write", "execute"].map((action) => (_jsxs("label", { className: "flex items-center gap-2 text-[12.5px] text-ink-2", children: [_jsx("input", { type: "checkbox", checked: scopeActions.includes(action), onChange: (event) => setScopeActions((current) => event.currentTarget.checked ? [...current, action] : current.filter((entry) => entry !== action)) }), t(`pages.controlCenter.designGate.actions.${actionTranslationKey[action]}`)] }, action))) })] }), _jsxs("label", { className: "block text-[12.5px] font-medium text-ink", children: [t("pages.controlCenter.designGate.initialDecision"), _jsx("select", { className: fieldClass(), value: newDecision, onChange: (event) => {
+                                            const value = event.currentTarget.value;
+                                            if (value === "approved" || value === "not_approved" || value === "not_required")
+                                                setNewDecision(value);
+                                        }, disabled: disabled, children: ["not_approved", "approved", "not_required"].map((decision) => (_jsx("option", { value: decision, children: t(`pages.controlCenter.designGate.decisions.${decisionTranslationKey[decision]}`) }, decision))) })] }), _jsx("p", { className: "text-[12px] leading-relaxed text-ink-4", children: t("pages.controlCenter.designGate.semanticLimit") }), _jsx("button", { type: "button", className: actionButtonClass(), disabled: disabled, onClick: () => void createDeclaration(), children: pending ? t("pages.controlCenter.designGate.saving") : t("pages.controlCenter.designGate.create") })] }))] }))] }));
+}

package/console/dist/web/assets/app.css

@@ -401,6 +401,9 @@
   .my-5 {
     margin-block: calc(var(--spacing) * 5);
   }
+  .-mt-2 {
+    margin-top: calc(var(--spacing) * -2);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -783,6 +786,9 @@
   .max-w-\[60ch\] {
     max-width: 60ch;
   }
+  .max-w-\[68ch\] {
+    max-width: 68ch;
+  }
   .max-w-\[85vw\] {
     max-width: 85vw;
   }