@stigmer/react 3.1.16 → 3.2.0

package/src/channel/ChannelConversationsDialog.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { MessageSquare, User, X } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
+import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
+import { Button } from "../button/Button.js";
+import { EmptyState } from "../empty-state/EmptyState.js";
+import { channelSessionExternalUserKey } from "../session/channelOrigin.js";
+import { useChannelSessions } from "./useChannelSessions.js";
+
+/** Props for {@link ChannelConversationsDialog}. */
+export interface ChannelConversationsDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog requests an open-state change. */
+  readonly onOpenChange: (open: boolean) => void;
+  /** The channel whose conversations are listed. */
+  readonly channel: AgentChannel;
+  /**
+   * Maps a session id to the host's session route (the console passes
+   * `` (id) => `/sessions/${id}` ``). When absent, rows render without
+   * links — the SDK never assumes a routing scheme (DD-004).
+   */
+  readonly sessionHref?: (sessionId: string) => string;
+  /**
+   * When `false`, renders as an in-flow open dialog instead of a
+   * top-layer modal — for embedding in constrained surfaces
+   * (documentation demos, visual tests). Interactive hosts keep the
+   * default.
+   * @default true
+   */
+  readonly modal?: boolean;
+}
+
+/**
+ * Lists the conversations a channel created — the Slack/WhatsApp sessions
+ * the channel runtime owns, visible to exactly the channel's viewers (the
+ * connector and org admins; design decision 012).
+ *
+ * Each row shows the conversation subject, the external platform user it
+ * belongs to (an opaque provider id in v1), and the last activity time.
+ * Rows link to the host's session route, where `SessionViewer` renders the
+ * transcript read-only (the observer audience — channel viewers hold
+ * `can_view` only, never `can_create_execution_in`).
+ *
+ * Built on the native `<dialog>` element, matching the SDK's modal
+ * convention. Most hosts mount it via {@link AgentChannelsPanel}'s
+ * channel card action.
+ */
+export function ChannelConversationsDialog({
+  open,
+  onOpenChange,
+  channel,
+  sessionHref,
+  modal = true,
+}: ChannelConversationsDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const handleClose = useCallback(() => {
+    dialogRef.current?.close();
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  // Sync native dialog open state (matches the SDK dialog convention).
+  const prevOpenRef = useRef(false);
+  if (modal && open !== prevOpenRef.current) {
+    prevOpenRef.current = open;
+    if (open) {
+      requestAnimationFrame(() => {
+        if (dialogRef.current && !dialogRef.current.open) {
+          dialogRef.current.showModal();
+        }
+      });
+    } else if (dialogRef.current?.open) {
+      dialogRef.current.close();
+    }
+  }
+
+  return (
+    <dialog
+      ref={dialogRef}
+      open={modal ? undefined : open}
+      onClose={handleClose}
+      className={cn(
+        "w-full max-w-lg rounded-xl border border-border bg-popover p-0 shadow-xl",
+        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+      )}
+      aria-labelledby="channel-conversations-title"
+    >
+      {/* Body mounts only while open so each opening fetches fresh. */}
+      {open && (
+        <ChannelConversationsDialogBody
+          channel={channel}
+          sessionHref={sessionHref}
+          onClose={handleClose}
+        />
+      )}
+    </dialog>
+  );
+}
+
+function ChannelConversationsDialogBody({
+  channel,
+  sessionHref,
+  onClose,
+}: {
+  readonly channel: AgentChannel;
+  readonly sessionHref?: (sessionId: string) => string;
+  readonly onClose: () => void;
+}) {
+  const channelName =
+    channel.metadata?.name || channel.metadata?.slug || "this channel";
+  const { sessions, isLoading, error } = useChannelSessions(
+    channel.metadata?.id ?? "",
+  );
+
+  return (
+    <div className="flex max-h-[70vh] flex-col">
+      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
+        <div className="min-w-0">
+          <h2
+            id="channel-conversations-title"
+            className="text-sm font-semibold text-popover-foreground"
+          >
+            Conversations
+          </h2>
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            What people asked {channelName} — read-only, visible to the
+            channel&apos;s owner and org admins.
+          </p>
+        </div>
+        <Button
+          variant="ghost"
+          size="xs"
+          onClick={onClose}
+          aria-label="Close conversations"
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {isLoading ? (
+          <ConversationsSkeleton />
+        ) : error ? (
+          <p className="px-2 py-6 text-center text-sm text-destructive">
+            {getUserMessage(error)}
+          </p>
+        ) : sessions.length === 0 ? (
+          <EmptyState
+            variant="first-use"
+            icon={<MessageSquare className="size-8" />}
+            title="No conversations yet"
+            description="When someone messages this channel, their conversation appears here."
+          />
+        ) : (
+          <ul className="space-y-1">
+            {sessions.map((session) => (
+              <ConversationRow
+                key={session.metadata?.id}
+                session={session}
+                href={
+                  sessionHref && session.metadata?.id
+                    ? sessionHref(session.metadata.id)
+                    : undefined
+                }
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ConversationRow({
+  session,
+  href,
+}: {
+  readonly session: Session;
+  readonly href?: string;
+}) {
+  const subject = session.spec?.subject || "Untitled conversation";
+  const externalUser = channelSessionExternalUserKey(session);
+  const lastActivity = lastActivityDate(session);
+
+  const content = (
+    <>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm text-foreground" title={subject}>
+          {subject}
+        </p>
+        {externalUser && (
+          <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+            <User aria-hidden="true" className="size-3" />
+            {externalUser}
+          </p>
+        )}
+      </div>
+      {lastActivity && (
+        <span className="shrink-0 text-xs text-muted-foreground-faint">
+          {formatRelativeTime(lastActivity)}
+        </span>
+      )}
+    </>
+  );
+
+  const rowClass =
+    "flex items-center gap-3 rounded-md px-2 py-2 text-left";
+
+  return (
+    <li>
+      {href ? (
+        <a
+          href={href}
+          className={cn(
+            rowClass,
+            "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          {content}
+        </a>
+      ) : (
+        <div className={rowClass}>{content}</div>
+      )}
+    </li>
+  );
+}
+
+function ConversationsSkeleton() {
+  return (
+    <div className="space-y-1 p-1">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="h-12 animate-pulse rounded-md bg-muted-faint" />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The conversation's last activity: `statusAudit.updatedAt` (bumped on
+ * every meaningful status change), falling back to `specAudit.createdAt`
+ * — the recent-activity sort key, so the dialog agrees with the server's
+ * ordering.
+ */
+function lastActivityDate(session: Session): Date | null {
+  const ts =
+    session.status?.audit?.statusAudit?.updatedAt ??
+    session.status?.audit?.specAudit?.createdAt;
+  return ts ? timestampDate(ts) : null;
+}
+
+function formatRelativeTime(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return date.toLocaleDateString();
+}

package/src/channel/ChannelCredentialsDialog.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, type ResourceRef } from "@stigmer/sdk";
+import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
+import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
+import { Button } from "../button/Button.js";
+import { ChannelToolCredentials } from "./ChannelToolCredentials.js";
+import { agentChannelToInput, useSaveAgentChannel } from "./useSaveAgentChannel.js";
+
+/** Props for {@link ChannelCredentialsDialog}. */
+export interface ChannelCredentialsDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog requests an open-state change. */
+  readonly onOpenChange: (open: boolean) => void;
+  /** The agent the channel serves (drives the readiness hint). */
+  readonly agent: Agent;
+  /** The channel whose credential bindings are edited. */
+  readonly channel: AgentChannel;
+  /** Called after a successful save (hosts typically pass `refetch`). */
+  readonly onSaved?: () => void;
+  /**
+   * When `false`, renders as an in-flow open dialog instead of a
+   * top-layer modal — for embedding in constrained surfaces
+   * (documentation demos, visual tests). Interactive hosts keep the
+   * default.
+   * @default true
+   */
+  readonly modal?: boolean;
+}
+
+/**
+ * Edits an installed channel's tool-credential bindings
+ * (`AgentChannelSpec.environment_refs`) after the fact — the companion
+ * to binding at connect time in {@link ConnectSlackDialog}. Saves are
+ * full-input applies via {@link agentChannelToInput}, so the agent
+ * reference, provider marker, and install status all survive; an
+ * emptied list is an explicit unbind.
+ *
+ * Built on the native `<dialog>` element, matching the SDK's modal
+ * convention. Most hosts mount it via {@link AgentChannelsPanel}'s
+ * channel card action.
+ */
+export function ChannelCredentialsDialog({
+  open,
+  onOpenChange,
+  agent,
+  channel,
+  onSaved,
+  modal = true,
+}: ChannelCredentialsDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const handleClose = useCallback(() => {
+    dialogRef.current?.close();
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  // Sync native dialog open state (matches the SDK dialog convention).
+  const prevOpenRef = useRef(false);
+  if (modal && open !== prevOpenRef.current) {
+    prevOpenRef.current = open;
+    if (open) {
+      requestAnimationFrame(() => {
+        if (dialogRef.current && !dialogRef.current.open) {
+          dialogRef.current.showModal();
+        }
+      });
+    } else if (dialogRef.current?.open) {
+      dialogRef.current.close();
+    }
+  }
+
+  return (
+    <dialog
+      ref={dialogRef}
+      open={modal ? undefined : open}
+      onClose={handleClose}
+      className={cn(
+        "w-full max-w-md rounded-xl border border-border bg-popover p-0 shadow-xl",
+        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+      )}
+      aria-labelledby="channel-credentials-title"
+    >
+      {/* Body mounts only while open so its draft resets per session —
+          reopening never resumes stale, unsaved edits. */}
+      {open && (
+        <ChannelCredentialsDialogBody
+          agent={agent}
+          channel={channel}
+          onSaved={onSaved}
+          onClose={handleClose}
+        />
+      )}
+    </dialog>
+  );
+}
+
+function ChannelCredentialsDialogBody({
+  agent,
+  channel,
+  onSaved,
+  onClose,
+}: {
+  readonly agent: Agent;
+  readonly channel: AgentChannel;
+  readonly onSaved?: () => void;
+  readonly onClose: () => void;
+}) {
+  const channelName =
+    channel.metadata?.name || channel.metadata?.slug || "this channel";
+  const org = channel.metadata?.org ?? "";
+
+  const { save, isPending, error, clearError } = useSaveAgentChannel();
+
+  const [draft, setDraft] = useState<ResourceRef[]>(() =>
+    (channel.spec?.environmentRefs ?? []).map((ref) => ({
+      org: ref.org,
+      slug: ref.slug,
+    })),
+  );
+
+  const handleSave = useCallback(async () => {
+    try {
+      // Full-input apply: only the binding list changes; an empty draft
+      // is an explicit unbind (apply semantics replace the spec).
+      await save({
+        ...agentChannelToInput(channel),
+        environmentRefs: [...draft],
+      });
+      onSaved?.();
+      onClose();
+    } catch {
+      // Surfaced through the hook's error state below.
+    }
+  }, [channel, draft, onClose, onSaved, save]);
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
+        <div className="min-w-0">
+          <h2
+            id="channel-credentials-title"
+            className="text-sm font-semibold text-foreground"
+          >
+            Tool credentials
+          </h2>
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            {channelName}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close dialog"
+          className={cn(
+            "rounded p-1 text-muted-foreground",
+            "hover:bg-accent-hover hover:text-foreground",
+            "focus:outline-none focus:ring-1 focus:ring-ring",
+          )}
+        >
+          <CloseIcon />
+        </button>
+      </div>
+
+      <div className="px-5 py-4">
+        <ChannelToolCredentials
+          agent={agent}
+          org={org}
+          value={draft}
+          onChange={setDraft}
+          disabled={isPending}
+          enabled={channel.spec?.enabled ?? false}
+        />
+
+        {error && (
+          <div
+            role="alert"
+            className="mt-3 rounded-md border border-destructive/30 bg-destructive-subtle px-3 py-2 text-xs text-destructive"
+          >
+            {getUserMessage(error)}
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            clearError();
+            onClose();
+          }}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => void handleSave()}
+          disabled={isPending}
+        >
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+      <path d="m3 3 8 8M11 3l-8 8" />
+    </svg>
+  );
+}

package/src/channel/ChannelToolCredentials.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useCallback } from "react";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
+import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
+import type { ResourceRef } from "@stigmer/sdk";
+import { EnvironmentPicker } from "../environment/EnvironmentPicker.js";
+import { useChannelToolReadiness } from "./useChannelToolReadiness.js";
+
+/** Props for {@link ChannelToolCredentials}. */
+export interface ChannelToolCredentialsProps {
+  /** The agent the channel serves (drives the readiness check). */
+  readonly agent: Agent;
+  /** Organization the environments are listed from (the channel's org). */
+  readonly org: string;
+  /** Currently bound environment references, in merge order. */
+  readonly value: readonly ResourceRef[];
+  /** Called when the binding list changes. */
+  readonly onChange: (refs: ResourceRef[]) => void;
+  /** Disable all interactions (e.g. while a save is in flight). */
+  readonly disabled?: boolean;
+  /**
+   * Whether the channel serves traffic. A paused channel needs no
+   * readiness warning — the hint stays silent when `false`.
+   * @default true
+   */
+  readonly enabled?: boolean;
+}
+
+/**
+ * The channel's credential-binding surface: explanatory copy, the
+ * org-shared environment picker, and the readiness hint. Shared by the
+ * connect dialog (binding at connect time) and the channel card's
+ * credentials dialog (editing later) so the two surfaces can never
+ * drift — the {@link ShareAgentDialog} ToolCredentialsSection pattern,
+ * applied to channels.
+ */
+export function ChannelToolCredentials({
+  agent,
+  org,
+  value,
+  onChange,
+  disabled = false,
+  enabled = true,
+}: ChannelToolCredentialsProps) {
+  // Only org-shared environments are usable by channel executions (the
+  // runtime merge skips private ones), so offering others would bind
+  // credentials that silently never apply.
+  const onlyOrgShared = useCallback(
+    (env: Environment) =>
+      env.metadata?.visibility === ApiResourceVisibility.visibility_org,
+    [],
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-[0.65rem] text-muted-foreground">
+        Environments whose values workspace conversations can use — bind
+        one holding the credentials this agent&apos;s tools need (a
+        read-only token is safest). Only environments shared with your
+        organization can be bound; share one first in Settings &rarr;
+        Environments. Secret values stay hidden from workspace members
+        either way.
+      </p>
+      <EnvironmentPicker
+        org={org}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        filterEnvironment={onlyOrgShared}
+      />
+      <ChannelToolReadinessHint agent={agent} enabled={enabled} value={value} />
+    </div>
+  );
+}
+
+/**
+ * Pre-flight hint for tool-using agents: channel conversations receive
+ * credentials only from the channel's own environment bindings, so a
+ * tool-using agent with no bindings (`needs-credentials`) or a binding
+ * that is still private (`blocked`) will refuse the first message that
+ * needs a tool. Renders nothing when there is nothing to fix.
+ */
+function ChannelToolReadinessHint({
+  agent,
+  enabled,
+  value,
+}: {
+  readonly agent: Agent;
+  readonly enabled: boolean;
+  readonly value: readonly ResourceRef[];
+}) {
+  const readiness = useChannelToolReadiness(agent, enabled, value);
+
+  if (readiness.status === "needs-credentials") {
+    return (
+      <p className="text-xs text-warning" role="status">
+        Workspace conversations can&apos;t use this agent&apos;s tools yet:
+        no credentials are bound to this channel. Bind an org-shared
+        environment above.
+      </p>
+    );
+  }
+
+  if (readiness.status !== "blocked") {
+    return null;
+  }
+
+  const envList = readiness.privateEnvironments.join(", ");
+  const plural = readiness.privateEnvironments.length > 1;
+
+  return (
+    <p className="text-xs text-warning" role="status">
+      Workspace conversations can&apos;t use this agent&apos;s tools yet:
+      the environment{plural ? "s" : ""}{" "}
+      <span className="font-medium">{envList}</span>{" "}
+      {plural ? "are" : "is"} private. Share {plural ? "them" : "it"} with
+      your organization (Settings &rarr; Environments) so channel
+      conversations can use the credentials. Secret values stay hidden
+      either way.
+    </p>
+  );
+}