@stigmer/react 3.2.2 → 3.3.0

package/src/channel/AgentChannelsPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { KeyRound, MessageSquare, MoreHorizontal, Trash2 } from "lucide-react";
+import { FileCode2, KeyRound, MessageSquare, MoreHorizontal, Trash2 } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
@@ -17,6 +17,7 @@ import { useChannelAppList } from "../channel-app/useChannelAppList.js";
 import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
+import { EditResourceYamlDialog } from "../manifest/EditResourceYamlDialog.js";
 import { useDeploymentMode } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
 import { ChannelConversationsDialog } from "./ChannelConversationsDialog.js";
@@ -147,6 +148,9 @@ export function AgentChannelsPanel({
   const [viewingConversations, setViewingConversations] =
     useState<AgentChannel | null>(null);
 
+  // The channel being edited as YAML (the kind-agnostic manifest flow).
+  const [editingYaml, setEditingYaml] = useState<AgentChannel | null>(null);
+
   const handleConnect = useCallback(
     (channel: AgentChannel | null, provider: ChannelProviderDescriptor) => {
       // Only redirect-style installs need the host hand-off (they open a
@@ -289,6 +293,7 @@ export function AgentChannelsPanel({
                   onDeleteClick={() => void handleDelete(channel)}
                   onEditCredentials={() => setEditingCredentials(channel)}
                   onViewConversations={() => setViewingConversations(channel)}
+                  onEditYaml={() => setEditingYaml(channel)}
                   refetch={refetch}
                 />
               );
@@ -344,6 +349,17 @@ export function AgentChannelsPanel({
         />
       )}
 
+      {editingYaml && (
+        <EditResourceYamlDialog
+          open
+          onOpenChange={(open) => {
+            if (!open) setEditingYaml(null);
+          }}
+          resource={editingYaml}
+          onApplied={refetch}
+        />
+      )}
+
       <ConfirmDialog
         state={confirmState}
         onConfirm={handleConfirm}
@@ -367,6 +383,7 @@ interface ChannelCardProps {
   readonly onDeleteClick: () => void;
   readonly onEditCredentials: () => void;
   readonly onViewConversations: () => void;
+  readonly onEditYaml: () => void;
   readonly refetch: () => void;
 }
 
@@ -379,6 +396,7 @@ function ChannelCard({
   onDeleteClick,
   onEditCredentials,
   onViewConversations,
+  onEditYaml,
   refetch,
 }: ChannelCardProps) {
   const meta = channel.metadata;
@@ -503,6 +521,14 @@ function ChannelCard({
                   Tool credentials
                 </ActionMenu.Item>
               )}
+              {canEdit && (
+                <ActionMenu.Item
+                  icon={<FileCode2 />}
+                  onSelect={onEditYaml}
+                >
+                  Edit YAML
+                </ActionMenu.Item>
+              )}
               {canDelete && (
                 <ActionMenu.Item
                   icon={<Trash2 />}

package/src/composer/SessionComposer.tsx

@@ -470,7 +470,7 @@ export interface SessionComposerProps {
    *
    * @example
    * ```tsx
-   * const yaml = serializeAgentYaml(agent);
+   * const yaml = serializeManifest(agent);
    * const file = new File([yaml], "my-agent.yaml", { type: "text/yaml" });
    *
    * <SessionComposer

package/src/cursor-accounts/CursorAccountEditor.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import {
+  CursorAccountSchema,
+  type CursorAccount,
+} from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/cursor_account_pb";
+import { Button } from "../button/index.js";
+import { Field, INPUT_CLASSES } from "../billing/form-primitives.js";
+
+/**
+ * The redaction marker the server uses for stored secrets. Sending it
+ * back on update means "keep the stored admin key".
+ */
+const REDACTED = "***REDACTED***";
+
+/** Props for {@link CursorAccountEditor}. */
+export interface CursorAccountEditorProps {
+  /** The account to edit, or `null` to create a new one. */
+  readonly initial: CursorAccount | null;
+  /** `true` while the save is in flight. */
+  readonly isSubmitting: boolean;
+  /** Error from the last failed save, or `null`. */
+  readonly submitError: Error | null;
+  /** Called with the assembled account on submit. */
+  readonly onSubmit: (account: CursorAccount) => void;
+  /** Called when the operator cancels. */
+  readonly onCancel: () => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Create/edit form for one Cursor account: identity, team Admin API key,
+ * enablement, platform-default flag, and org assignments.
+ *
+ * Admin-key semantics mirror the server contract: on edit the field
+ * shows the redaction marker and submitting it unchanged keeps the
+ * stored key; typing anything else rotates it (validated live against
+ * Cursor before persisting). Member keys are NOT edited here — they have
+ * their own panel with per-key add/remove/enable.
+ */
+export function CursorAccountEditor({
+  initial,
+  isSubmitting,
+  submitError,
+  onSubmit,
+  onCancel,
+  className,
+}: CursorAccountEditorProps) {
+  const isCreate = initial === null;
+  const [displayName, setDisplayName] = useState(initial?.displayName ?? "");
+  const [adminApiKey, setAdminApiKey] = useState(isCreate ? "" : REDACTED);
+  const [enabled, setEnabled] = useState(initial?.enabled ?? true);
+  const [isPlatformDefault, setIsPlatformDefault] = useState(
+    initial?.isPlatformDefault ?? false,
+  );
+  const [orgIdsText, setOrgIdsText] = useState(
+    (initial?.orgIds ?? []).join("\n"),
+  );
+
+  const canSubmit =
+    displayName.trim() !== "" && adminApiKey.trim() !== "" && !isSubmitting;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    onSubmit(
+      create(CursorAccountSchema, {
+        accountId: initial?.accountId ?? "",
+        displayName: displayName.trim(),
+        adminApiKey: adminApiKey.trim(),
+        enabled,
+        isPlatformDefault,
+        orgIds: orgIdsText
+          .split(/[\s,]+/)
+          .map((s) => s.trim())
+          .filter((s) => s !== ""),
+      }),
+    );
+  };
+
+  return (
+    <form className={cn("max-w-xl space-y-3", className)} onSubmit={handleSubmit}>
+      <h3 className="text-sm font-semibold text-foreground">
+        {isCreate ? "Add Cursor account" : `Edit ${initial.displayName}`}
+      </h3>
+
+      <Field label="Display name" required>
+        <input
+          className={INPUT_CLASSES}
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          placeholder="e.g. scenar.ai team"
+          disabled={isSubmitting}
+        />
+      </Field>
+
+      <Field label="Team Admin API key" required>
+        <input
+          className={INPUT_CLASSES}
+          type="password"
+          value={adminApiKey}
+          onChange={(e) => setAdminApiKey(e.target.value)}
+          placeholder="key from Cursor dashboard → API → Team tab"
+          disabled={isSubmitting}
+          autoComplete="off"
+        />
+      </Field>
+      {!isCreate && (
+        <p className="text-[11px] text-muted-foreground">
+          Leave the masked value untouched to keep the stored key; typing a
+          new key rotates it (validated against Cursor before saving).
+        </p>
+      )}
+
+      <Field label="Assigned organization ids">
+        <textarea
+          className={cn(INPUT_CLASSES, "min-h-16 font-mono")}
+          value={orgIdsText}
+          onChange={(e) => setOrgIdsText(e.target.value)}
+          placeholder={"one org id per line\n(each org may belong to only one account)"}
+          disabled={isSubmitting}
+        />
+      </Field>
+
+      <div className="space-y-2">
+        <div>
+          <label className="flex items-center gap-1.5 text-xs text-foreground">
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
+              disabled={isSubmitting}
+            />
+            Enabled for key selection
+          </label>
+          <p className="mt-0.5 pl-[1.375rem] text-[11px] text-muted-foreground">
+            Leave checked for accounts that should serve traffic. Unchecking
+            drains the account: new sessions stop routing here immediately,
+            but sessions already pinned to one of its keys keep working.
+          </p>
+        </div>
+        <div>
+          <label className="flex items-center gap-1.5 text-xs text-foreground">
+            <input
+              type="checkbox"
+              checked={isPlatformDefault}
+              onChange={(e) => setIsPlatformDefault(e.target.checked)}
+              disabled={isSubmitting}
+            />
+            Platform default (serves unassigned orgs)
+          </label>
+          <p className="mt-0.5 pl-[1.375rem] text-[11px] text-muted-foreground">
+            Check on exactly one account. Orgs not listed in any account&apos;s
+            assigned ids resolve to the platform default; at most one account
+            may hold this flag.
+          </p>
+        </div>
+      </div>
+
+      {submitError && (
+        <p className="text-destructive text-xs" role="alert">
+          {getUserMessage(submitError)}
+        </p>
+      )}
+
+      <div className="flex gap-2">
+        <Button type="submit" size="sm" disabled={!canSubmit}>
+          {isSubmitting ? "Saving…" : isCreate ? "Create account" : "Save changes"}
+        </Button>
+        <Button type="button" size="sm" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/cursor-accounts/CursorAccountsAccessNotice.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/**
+ * The access-denied state for the Cursor-accounts operator surface.
+ * Server-side authorization (`can_manage_cursor_accounts` on
+ * `platform:stigmer`) is the real gate — this is the honest, designed
+ * face of that denial for anyone who navigates to the operator route
+ * without the permission, instead of a raw RPC error string.
+ */
+export function CursorAccountsAccessNotice({
+  className,
+}: {
+  readonly className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-card px-4 py-6 text-center",
+        className,
+      )}
+      role="status"
+    >
+      <p className="text-xs font-semibold text-foreground">
+        Platform operator access required
+      </p>
+      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+        Cursor account management is a Stigmer-internal surface holding
+        provider credentials and team spend. It needs the platform operator
+        role — organization roles do not grant it. If you believe you should
+        have access, contact a platform operator.
+      </p>
+    </div>
+  );
+}