@agent-native/core 0.90.2 → 0.90.3

package/corpus/core/src/client/review/ReviewThreadPanel.tsx

@@ -0,0 +1,278 @@
+import {
+  IconMessageCircle,
+  IconPlus,
+  IconSend,
+  IconTrash,
+  IconCircleCheck,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+import type { ReviewComment } from "../../review/types.js";
+import { cn } from "../utils.js";
+import { ReviewStatusBadge } from "./ReviewStatusBadge.js";
+import {
+  useCreateReviewComment,
+  useDeleteReviewComment,
+  useReplyReviewComment,
+  useResolveReviewThread,
+  useReviewComments,
+} from "./use-review.js";
+
+export interface ReviewThread {
+  root: ReviewComment;
+  replies: ReviewComment[];
+}
+
+export interface ReviewThreadPanelProps {
+  resourceType: string;
+  resourceId: string;
+  targetId?: string | null;
+  title?: string;
+  className?: string;
+  includeResolved?: boolean;
+  showComposer?: boolean;
+  placeholder?: string;
+  emptyState?: string;
+  onSelectThread?: (thread: ReviewThread) => void;
+}
+
+export function ReviewThreadPanel({
+  resourceType,
+  resourceId,
+  targetId,
+  title = "Review",
+  className,
+  includeResolved = true,
+  showComposer = true,
+  placeholder = "Add a comment...",
+  emptyState = "No review comments yet.",
+  onSelectThread,
+}: ReviewThreadPanelProps) {
+  const [draft, setDraft] = useState("");
+  const [replyDrafts, setReplyDrafts] = useState<Record<string, string>>({});
+  const comments = useReviewComments({
+    resourceType,
+    resourceId,
+    targetId,
+    includeResolved,
+  });
+  const createComment = useCreateReviewComment();
+  const replyComment = useReplyReviewComment();
+  const resolveThread = useResolveReviewThread();
+  const deleteComment = useDeleteReviewComment();
+  const threads = useMemo(
+    () => buildReviewThreads(comments.data?.comments ?? []),
+    [comments.data?.comments],
+  );
+
+  return (
+    <section
+      className={cn(
+        "rounded-lg border border-border bg-card text-card-foreground",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
+        <div className="flex items-center gap-2">
+          <IconMessageCircle className="h-4 w-4 text-muted-foreground" />
+          <h2 className="text-sm font-medium">{title}</h2>
+        </div>
+        <ReviewStatusBadge status={comments.data?.reviewStatus?.status} />
+      </div>
+
+      {showComposer ? (
+        <form
+          className="border-b border-border p-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const body = draft.trim();
+            if (!body) return;
+            createComment.mutate(
+              { resourceType, resourceId, targetId, body },
+              { onSuccess: () => setDraft("") },
+            );
+          }}
+        >
+          <textarea
+            value={draft}
+            onChange={(event) => setDraft(event.currentTarget.value)}
+            placeholder={placeholder}
+            className="min-h-20 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+          />
+          <div className="mt-2 flex justify-end">
+            <button
+              type="submit"
+              disabled={!draft.trim() || createComment.isPending}
+              className="inline-flex h-8 items-center gap-1.5 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <IconPlus className="h-3.5 w-3.5" />
+              Comment
+            </button>
+          </div>
+        </form>
+      ) : null}
+
+      <div className="divide-y divide-border">
+        {comments.isLoading ? (
+          <div className="px-4 py-6 text-sm text-muted-foreground">
+            Loading comments...
+          </div>
+        ) : threads.length ? (
+          threads.map((thread) => (
+            <article
+              key={thread.root.threadId}
+              className="px-4 py-3"
+              onClick={() => onSelectThread?.(thread)}
+            >
+              <CommentBubble comment={thread.root} />
+              {thread.replies.length ? (
+                <div className="mt-3 space-y-3 border-l border-border pl-4">
+                  {thread.replies.map((reply) => (
+                    <CommentBubble key={reply.id} comment={reply} compact />
+                  ))}
+                </div>
+              ) : null}
+              <form
+                className="mt-3 flex gap-2"
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  const body = replyDrafts[thread.root.id]?.trim();
+                  if (!body) return;
+                  replyComment.mutate(
+                    {
+                      resourceType,
+                      resourceId,
+                      commentId: thread.root.id,
+                      body,
+                    },
+                    {
+                      onSuccess: () =>
+                        setReplyDrafts((current) => ({
+                          ...current,
+                          [thread.root.id]: "",
+                        })),
+                    },
+                  );
+                }}
+              >
+                <input
+                  value={replyDrafts[thread.root.id] ?? ""}
+                  onChange={(event) =>
+                    setReplyDrafts((current) => ({
+                      ...current,
+                      [thread.root.id]: event.currentTarget.value,
+                    }))
+                  }
+                  placeholder="Reply..."
+                  className="h-8 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+                />
+                <button
+                  type="submit"
+                  disabled={
+                    !replyDrafts[thread.root.id]?.trim() ||
+                    replyComment.isPending
+                  }
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-input hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+                  aria-label="Reply"
+                >
+                  <IconSend className="h-3.5 w-3.5" />
+                </button>
+                {thread.root.status !== "resolved" ? (
+                  <button
+                    type="button"
+                    className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-input hover:bg-accent"
+                    aria-label="Resolve thread"
+                    onClick={() =>
+                      resolveThread.mutate({
+                        resourceType,
+                        resourceId,
+                        threadId: thread.root.threadId,
+                      })
+                    }
+                  >
+                    <IconCircleCheck className="h-3.5 w-3.5" />
+                  </button>
+                ) : null}
+                <button
+                  type="button"
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-input text-muted-foreground hover:bg-accent"
+                  aria-label="Delete comment"
+                  onClick={() =>
+                    deleteComment.mutate({
+                      resourceType,
+                      resourceId,
+                      commentId: thread.root.id,
+                    })
+                  }
+                >
+                  <IconTrash className="h-3.5 w-3.5" />
+                </button>
+              </form>
+            </article>
+          ))
+        ) : (
+          <div className="px-4 py-6 text-sm text-muted-foreground">
+            {emptyState}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function buildReviewThreads(comments: ReviewComment[]): ReviewThread[] {
+  const roots: ReviewComment[] = [];
+  const replies = new Map<string, ReviewComment[]>();
+
+  for (const comment of comments) {
+    if (!comment.parentCommentId || comment.parentCommentId === comment.id) {
+      roots.push(comment);
+      continue;
+    }
+    const list = replies.get(comment.threadId) ?? [];
+    list.push(comment);
+    replies.set(comment.threadId, list);
+  }
+
+  return roots.map((root) => ({
+    root,
+    replies: replies.get(root.threadId) ?? [],
+  }));
+}
+
+function CommentBubble({
+  comment,
+  compact = false,
+}: {
+  comment: ReviewComment;
+  compact?: boolean;
+}) {
+  return (
+    <div className={compact ? "text-sm" : ""}>
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-sm font-medium">
+          {comment.authorName ?? comment.authorEmail ?? "Reviewer"}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {formatCommentDate(comment.createdAt)}
+        </span>
+        {comment.status === "resolved" ? (
+          <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-xs text-emerald-700">
+            Resolved
+          </span>
+        ) : null}
+      </div>
+      <p className="mt-1 whitespace-pre-wrap text-sm text-foreground">
+        {comment.body}
+      </p>
+    </div>
+  );
+}
+
+function formatCommentDate(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return date.toLocaleString();
+}

package/corpus/core/src/client/review/index.ts

@@ -0,0 +1,25 @@
+export {
+  ReviewStatusBadge,
+  type ReviewStatusBadgeProps,
+} from "./ReviewStatusBadge.js";
+export {
+  ReviewThreadPanel,
+  buildReviewThreads,
+  type ReviewThread,
+  type ReviewThreadPanelProps,
+} from "./ReviewThreadPanel.js";
+export {
+  useCreateReviewComment,
+  useDeleteReviewComment,
+  useReplyReviewComment,
+  useResolveReviewThread,
+  useReviewComments,
+  useSetReviewStatus,
+  type CreateReviewCommentInput,
+  type DeleteReviewCommentInput,
+  type ListReviewCommentsParams,
+  type ListReviewCommentsResult,
+  type ReplyReviewCommentInput,
+  type ResolveReviewThreadInput,
+  type SetReviewStatusInput,
+} from "./use-review.js";

package/corpus/core/src/client/review/use-review.ts

@@ -0,0 +1,114 @@
+import type {
+  ReviewComment,
+  ReviewCommentKind,
+  ReviewMention,
+  ReviewResolutionTarget,
+  ReviewStatus,
+  ReviewStatusEntry,
+} from "../../review/types.js";
+import { useActionMutation, useActionQuery } from "../use-action.js";
+
+export interface ListReviewCommentsParams {
+  resourceType: string;
+  resourceId: string;
+  includeResolved?: boolean;
+  includeDeleted?: boolean;
+  targetId?: string | null;
+  limit?: number;
+}
+
+export interface ListReviewCommentsResult {
+  comments: ReviewComment[];
+  reviewStatus: ReviewStatusEntry | null;
+}
+
+export interface CreateReviewCommentInput {
+  resourceType: string;
+  resourceId: string;
+  targetId?: string | null;
+  kind?: ReviewCommentKind;
+  anchor?: unknown | null;
+  body: string;
+  authorName?: string | null;
+  resolutionTarget?: ReviewResolutionTarget | null;
+  mentions?: ReviewMention[];
+  metadata?: Record<string, unknown>;
+}
+
+export interface ReplyReviewCommentInput {
+  resourceType: string;
+  resourceId: string;
+  commentId: string;
+  body: string;
+  authorName?: string | null;
+  resolutionTarget?: ReviewResolutionTarget | null;
+  mentions?: ReviewMention[];
+  metadata?: Record<string, unknown>;
+}
+
+export interface ResolveReviewThreadInput {
+  resourceType: string;
+  resourceId: string;
+  threadId?: string;
+  commentId?: string;
+}
+
+export interface DeleteReviewCommentInput {
+  resourceType: string;
+  resourceId: string;
+  commentId: string;
+}
+
+export interface SetReviewStatusInput {
+  resourceType: string;
+  resourceId: string;
+  status: ReviewStatus;
+  note?: string | null;
+  metadata?: Record<string, unknown>;
+}
+
+export function useReviewComments(
+  params: ListReviewCommentsParams,
+  options?: { enabled?: boolean },
+) {
+  return useActionQuery<ListReviewCommentsResult>(
+    "list-review-comments",
+    params,
+    {
+      enabled:
+        options?.enabled ?? Boolean(params.resourceType && params.resourceId),
+    },
+  );
+}
+
+export function useCreateReviewComment() {
+  return useActionMutation<ReviewComment, CreateReviewCommentInput>(
+    "create-review-comment",
+  );
+}
+
+export function useReplyReviewComment() {
+  return useActionMutation<ReviewComment, ReplyReviewCommentInput>(
+    "reply-review-comment",
+  );
+}
+
+export function useResolveReviewThread() {
+  return useActionMutation<
+    { threadId: string; resolved: true },
+    ResolveReviewThreadInput
+  >("resolve-review-thread");
+}
+
+export function useDeleteReviewComment() {
+  return useActionMutation<
+    { commentId: string; deleted: true },
+    DeleteReviewCommentInput
+  >("delete-review-comment");
+}
+
+export function useSetReviewStatus() {
+  return useActionMutation<ReviewStatusEntry, SetReviewStatusInput>(
+    "set-review-status",
+  );
+}

package/corpus/core/src/client/settings/index.ts

@@ -8,5 +8,15 @@ export {
   type SettingsTabItem,
   type SettingsTabsPageProps,
 } from "./SettingsTabsPage.js";
-export { useBuilderStatus } from "./useBuilderStatus.js";
+export {
+  openBuilderConnectPopup,
+  useBuilderConnectFlow,
+  useBuilderStatus,
+  withBuilderConnectTrackingParams,
+  type BuilderConnectFlow,
+  type BuilderConnectFlowOptions,
+  type BuilderConnectStartOptions,
+  type BuilderStatus,
+  type OpenBuilderConnectPopupOptions,
+} from "./useBuilderStatus.js";
 export { SecretsSection, type SecretsSectionProps } from "./SecretsSection.js";

package/corpus/core/src/client/setup-connections/BuilderConnectCard.tsx

@@ -0,0 +1,94 @@
+import { IconCheck, IconLoader2, IconPlugConnected } from "@tabler/icons-react";
+
+import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
+import { cn } from "../utils.js";
+
+export interface BuilderConnectCardProps {
+  title?: string;
+  description?: string;
+  trackingSource?: string;
+  className?: string;
+  onConnected?: (orgName: string | null) => void;
+}
+
+export function BuilderConnectCard({
+  title = "Builder connect",
+  description = "Connect Builder for managed model access, browser automation, and workspace identity.",
+  trackingSource = "setup_connections_page",
+  className,
+  onConnected,
+}: BuilderConnectCardProps) {
+  const flow = useBuilderConnectFlow({
+    trackingSource,
+    onConnected: ({ orgName }) => onConnected?.(orgName),
+  });
+
+  const connectedLabel = flow.orgName
+    ? `Connected to ${flow.orgName}`
+    : "Connected";
+  const statusLabel = !flow.hasFetchedStatus
+    ? "Checking"
+    : flow.configured
+      ? connectedLabel
+      : flow.builderEnabled
+        ? "Ready to connect"
+        : "Project not configured";
+
+  return (
+    <section
+      className={cn(
+        "rounded-lg border border-border bg-background p-4 shadow-sm",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <span
+          className={cn(
+            "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border",
+            flow.configured
+              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600"
+              : "border-border bg-muted text-muted-foreground",
+          )}
+        >
+          {flow.configured ? (
+            <IconCheck className="size-4" />
+          ) : (
+            <IconPlugConnected className="size-4" />
+          )}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-sm font-semibold text-foreground">{title}</h2>
+            <span className="rounded-md border border-border bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">
+              {statusLabel}
+            </span>
+          </div>
+          <p className="mt-1 text-sm leading-5 text-muted-foreground">
+            {description}
+          </p>
+          {flow.error ? (
+            <p className="mt-2 text-xs text-destructive">{flow.error}</p>
+          ) : null}
+          {!flow.configured ? (
+            <button
+              type="button"
+              onClick={() => flow.start()}
+              disabled={
+                flow.connecting ||
+                (!flow.builderEnabled && flow.hasFetchedStatus)
+              }
+              className="mt-3 inline-flex h-8 items-center gap-2 rounded-md border border-border bg-foreground px-3 text-xs font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {flow.connecting ? (
+                <IconLoader2 className="size-3.5 animate-spin" />
+              ) : (
+                <IconPlugConnected className="size-3.5" />
+              )}
+              Connect Builder
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/corpus/core/src/client/setup-connections/ProviderReadinessBadge.tsx

@@ -0,0 +1,73 @@
+import {
+  IconAlertCircle,
+  IconCheck,
+  IconClock,
+  IconKey,
+} from "@tabler/icons-react";
+
+import type { WorkspaceConnectionProviderReadinessStatus } from "../../workspace-connections/index.js";
+import { cn } from "../utils.js";
+
+const STATUS_LABELS: Record<
+  WorkspaceConnectionProviderReadinessStatus,
+  string
+> = {
+  ready: "Ready",
+  checking: "Checking",
+  needs_credentials: "Needs credentials",
+  needs_attention: "Needs attention",
+  disabled: "Disabled",
+  not_configured: "Not configured",
+};
+
+const STATUS_STYLES: Record<
+  WorkspaceConnectionProviderReadinessStatus,
+  string
+> = {
+  ready:
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  checking:
+    "border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+  needs_credentials:
+    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  needs_attention:
+    "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300",
+  disabled: "border-border bg-muted text-muted-foreground",
+  not_configured: "border-border bg-muted text-muted-foreground",
+};
+
+function StatusIcon({
+  status,
+}: {
+  status: WorkspaceConnectionProviderReadinessStatus;
+}) {
+  if (status === "ready") return <IconCheck className="size-3.5" />;
+  if (status === "checking") return <IconClock className="size-3.5" />;
+  if (status === "needs_credentials") return <IconKey className="size-3.5" />;
+  return <IconAlertCircle className="size-3.5" />;
+}
+
+export interface ProviderReadinessBadgeProps {
+  status: WorkspaceConnectionProviderReadinessStatus;
+  label?: string;
+  className?: string;
+}
+
+export function ProviderReadinessBadge({
+  status,
+  label,
+  className,
+}: ProviderReadinessBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex min-h-6 items-center gap-1.5 rounded-md border px-2 text-xs font-medium",
+        STATUS_STYLES[status],
+        className,
+      )}
+    >
+      <StatusIcon status={status} />
+      {label ?? STATUS_LABELS[status]}
+    </span>
+  );
+}

package/corpus/core/src/client/setup-connections/SetupConnectionsPage.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+
+import { IntegrationsPanel } from "../integrations/IntegrationsPanel.js";
+import { OnboardingPanel } from "../onboarding/OnboardingPanel.js";
+import { SecretsSection } from "../settings/SecretsSection.js";
+import { cn } from "../utils.js";
+import { BuilderConnectCard } from "./BuilderConnectCard.js";
+
+export interface SetupConnectionsPageProps {
+  title?: string;
+  description?: string;
+  onboardingTitle?: string;
+  focusSecretKey?: string;
+  providerReadiness?: ReactNode;
+  workspaceConnections?: ReactNode;
+  children?: ReactNode;
+  showOnboarding?: boolean;
+  showBuilderConnect?: boolean;
+  showSecrets?: boolean;
+  showIntegrations?: boolean;
+  className?: string;
+}
+
+export function SetupConnectionsPage({
+  title = "Setup & connections",
+  description = "Manage setup status, Builder connect, app secrets, and workspace connections from one standard surface.",
+  onboardingTitle = "Setup checklist",
+  focusSecretKey,
+  providerReadiness,
+  workspaceConnections,
+  children,
+  showOnboarding = true,
+  showBuilderConnect = true,
+  showSecrets = true,
+  showIntegrations = false,
+  className,
+}: SetupConnectionsPageProps) {
+  return (
+    <div className={cn("min-h-full bg-background p-4 sm:p-6", className)}>
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-5">
+        <header className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-normal text-foreground">
+            {title}
+          </h1>
+          <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
+            {description}
+          </p>
+        </header>
+
+        <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
+          <main className="flex min-w-0 flex-col gap-4">
+            {showOnboarding ? (
+              <OnboardingPanel title={onboardingTitle} />
+            ) : null}
+            {workspaceConnections ? (
+              <section className="rounded-lg border border-border bg-background p-4 shadow-sm">
+                {workspaceConnections}
+              </section>
+            ) : null}
+            {providerReadiness ? (
+              <section className="rounded-lg border border-border bg-background p-4 shadow-sm">
+                {providerReadiness}
+              </section>
+            ) : null}
+            {children}
+          </main>
+
+          <aside className="flex min-w-0 flex-col gap-4">
+            {showBuilderConnect ? <BuilderConnectCard /> : null}
+            {showSecrets ? (
+              <section className="rounded-lg border border-border bg-background p-4 shadow-sm">
+                <div className="mb-3">
+                  <h2 className="text-sm font-semibold text-foreground">
+                    Secrets
+                  </h2>
+                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                    Registered keys and OAuth credentials are stored in the
+                    scoped secrets store.
+                  </p>
+                </div>
+                <SecretsSection focusKey={focusSecretKey} />
+              </section>
+            ) : null}
+            {showIntegrations ? (
+              <section className="rounded-lg border border-border bg-background p-4 shadow-sm">
+                <IntegrationsPanel />
+              </section>
+            ) : null}
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}