@stigmer/react 0.0.36 → 0.0.40

package/src/api-key/useCreateApiKey.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ApiKeyInput } from "@stigmer/sdk";
+import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+export interface UseCreateApiKeyReturn {
+  readonly create: (input: ApiKeyInput) => Promise<ApiKey>;
+  readonly isCreating: boolean;
+  readonly error: Error | null;
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook that wraps `apiKey.create()` with loading and error
+ * state.
+ *
+ * Creates an API key resource. The caller provides an
+ * {@link ApiKeyInput} with `name`, `org`, and optionally `expiresAt`
+ * or `neverExpires`.
+ *
+ * **Critical**: The returned {@link ApiKey} is the *only* time the
+ * raw key value is available — it is returned in `spec.keyHash` of
+ * the create response. After creation the server stores only the
+ * hash; subsequent queries return an empty `keyHash` and only the
+ * `fingerprint` (last 6 characters) for display.
+ *
+ * Callers must capture the raw key from the resolved promise and
+ * present it to the user immediately (e.g. via
+ * {@link ApiKeyCreatedAlert}).
+ *
+ * @example
+ * ```tsx
+ * const { create, isCreating, error } = useCreateApiKey();
+ *
+ * const apiKey = await create({
+ *   name: "ci-deploy-key",
+ *   org: "acme",
+ *   neverExpires: true,
+ * });
+ * // apiKey.spec?.keyHash contains the raw key — show it once
+ * ```
+ */
+export function useCreateApiKey(): UseCreateApiKeyReturn {
+  const stigmer = useStigmer();
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const create = useCallback(
+    async (input: ApiKeyInput): Promise<ApiKey> => {
+      setIsCreating(true);
+      setError(null);
+
+      try {
+        return await stigmer.apiKey.create(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { create, isCreating, error, clearError };
+}

package/src/api-key/useDeleteApiKey.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+export interface UseDeleteApiKeyReturn {
+  readonly deleteKey: (id: string) => Promise<ApiKey>;
+  readonly isDeleting: boolean;
+  readonly error: Error | null;
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook that wraps `apiKey.delete()` with loading and error
+ * state.
+ *
+ * Deletes an API key by its resource ID. Returns the deleted
+ * {@link ApiKey} on success so callers can confirm which key was
+ * removed. The deletion is permanent — the key can no longer be
+ * used for authentication.
+ *
+ * @example
+ * ```tsx
+ * const { deleteKey, isDeleting, error } = useDeleteApiKey();
+ *
+ * await deleteKey("key-id-abc123");
+ * refetch(); // refresh the list after deletion
+ * ```
+ */
+export function useDeleteApiKey(): UseDeleteApiKeyReturn {
+  const stigmer = useStigmer();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const deleteKey = useCallback(
+    async (id: string): Promise<ApiKey> => {
+      setIsDeleting(true);
+      setError(null);
+
+      try {
+        return await stigmer.apiKey.delete(id);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsDeleting(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { deleteKey, isDeleting, error, clearError };
+}

package/src/attachment/AttachmentChipList.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import type { AttachmentEntry } from "./useAttachments";
+import { formatFileSize } from "./attachment-utils";
+
+export interface AttachmentChipListProps {
+  /** Attachment entries from {@link useAttachments}. */
+  readonly entries: readonly AttachmentEntry[];
+  /** Remove callback (by entry ID). */
+  readonly onRemove: (id: string) => void;
+  /** Retry callback for failed uploads (by entry ID). */
+  readonly onRetry: (id: string) => void;
+  /** Disables remove and retry actions. */
+  readonly disabled?: boolean;
+  readonly className?: string;
+}
+
+/**
+ * Renders a horizontal list of compact attachment chips showing
+ * filename, size, upload status, and remove/retry actions.
+ *
+ * Designed to sit between the context chips and toolbar in
+ * {@link SessionComposer}, but usable standalone by platform builders
+ * who compose their own attachment UI.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ */
+export function AttachmentChipList({
+  entries,
+  onRemove,
+  onRetry,
+  disabled,
+  className,
+}: AttachmentChipListProps) {
+  if (entries.length === 0) return null;
+
+  return (
+    <div
+      className={cn("flex flex-wrap gap-1.5", className)}
+      role="list"
+      aria-label="Attached files"
+    >
+      {entries.map((entry) => (
+        <AttachmentChip
+          key={entry.id}
+          entry={entry}
+          onRemove={() => onRemove(entry.id)}
+          onRetry={() => onRetry(entry.id)}
+          disabled={disabled}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Individual chip
+// ---------------------------------------------------------------------------
+
+function AttachmentChip({
+  entry,
+  onRemove,
+  onRetry,
+  disabled,
+}: {
+  readonly entry: AttachmentEntry;
+  readonly onRemove: () => void;
+  readonly onRetry: () => void;
+  readonly disabled?: boolean;
+}) {
+  const isError = entry.phase === "error";
+  const isUploading = entry.phase === "uploading";
+
+  return (
+    <span
+      role="listitem"
+      aria-label={`${entry.file.name}, ${formatFileSize(entry.file.size)}${isUploading ? ", uploading" : ""}${isError ? ", upload failed" : ""}`}
+      className={cn(
+        "inline-flex max-w-[200px] items-center gap-1 rounded-md px-2 py-0.5 text-xs",
+        isError
+          ? "border border-destructive/30 bg-destructive/10 text-destructive"
+          : "bg-muted/50 text-foreground",
+        isUploading && "opacity-70",
+      )}
+    >
+      {isUploading && <ChipSpinner />}
+      {isError && <ErrorDot />}
+      {!isUploading && !isError && <FileIcon />}
+
+      <span className="truncate">{entry.file.name}</span>
+
+      <span className="shrink-0 text-[0.6rem] tabular-nums text-muted-foreground">
+        {formatFileSize(entry.file.size)}
+      </span>
+
+      {isError && (
+        <button
+          type="button"
+          onClick={onRetry}
+          disabled={disabled}
+          className="shrink-0 text-[0.6rem] font-medium text-destructive underline hover:text-destructive/80 disabled:pointer-events-none"
+          aria-label={`Retry uploading ${entry.file.name}`}
+        >
+          Retry
+        </button>
+      )}
+
+      <button
+        type="button"
+        onClick={onRemove}
+        disabled={disabled}
+        className="ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+        aria-label={`Remove ${entry.file.name}`}
+      >
+        <XIcon />
+      </button>
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons — kept minimal and consistent with SessionComposer icons
+// ---------------------------------------------------------------------------
+
+function ChipSpinner() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      className="shrink-0 animate-spin text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}
+
+function ErrorDot() {
+  return (
+    <span
+      className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-destructive"
+      aria-hidden="true"
+    />
+  );
+}
+
+function FileIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />
+      <path d="M8 1V4H11" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M4 4L10 10M10 4L4 10" />
+    </svg>
+  );
+}

package/src/attachment/attachment-utils.ts

@@ -0,0 +1,114 @@
+/**
+ * Maximum attachment size in bytes (10 MB).
+ *
+ * Matches the CLI's `maxAttachmentSize` and the gRPC server's
+ * `MaxRecvMsgSize`. Files exceeding this limit are rejected before
+ * upload to avoid wasting bandwidth on requests that will fail.
+ */
+export const MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
+
+/**
+ * Extension-to-MIME-type mapping for common file types.
+ *
+ * Used as a fallback when `File.type` is empty or generic. Mirrors
+ * the CLI's `detectContentType` to ensure consistent behavior.
+ */
+const EXTENSION_MIME_MAP: Record<string, string> = {
+  ".md": "text/markdown",
+  ".markdown": "text/markdown",
+  ".yaml": "application/x-yaml",
+  ".yml": "application/x-yaml",
+  ".json": "application/json",
+  ".csv": "text/csv",
+  ".tsv": "text/tab-separated-values",
+  ".xml": "application/xml",
+  ".html": "text/html",
+  ".htm": "text/html",
+  ".css": "text/css",
+  ".js": "application/javascript",
+  ".ts": "application/typescript",
+  ".py": "text/x-python",
+  ".go": "text/x-go",
+  ".rs": "text/x-rust",
+  ".java": "text/x-java",
+  ".rb": "text/x-ruby",
+  ".sh": "application/x-sh",
+  ".bash": "application/x-sh",
+  ".sql": "application/sql",
+  ".toml": "application/toml",
+  ".ini": "text/plain",
+  ".cfg": "text/plain",
+  ".conf": "text/plain",
+  ".env": "text/plain",
+  ".txt": "text/plain",
+  ".log": "text/plain",
+  ".pdf": "application/pdf",
+  ".zip": "application/zip",
+  ".gz": "application/gzip",
+  ".tar": "application/x-tar",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+};
+
+/**
+ * Detects the MIME content type for a file.
+ *
+ * Prefers the browser-provided `File.type` when available and
+ * non-empty. Falls back to extension-based detection mirroring the
+ * CLI's `detectContentType` function. Returns
+ * `"application/octet-stream"` when neither source yields a result.
+ */
+export function detectContentType(file: File): string {
+  if (file.type && file.type !== "application/octet-stream") {
+    return file.type;
+  }
+
+  const dotIndex = file.name.lastIndexOf(".");
+  if (dotIndex !== -1) {
+    const ext = file.name.slice(dotIndex).toLowerCase();
+    const mapped = EXTENSION_MIME_MAP[ext];
+    if (mapped) return mapped;
+  }
+
+  return "application/octet-stream";
+}
+
+const SIZE_UNITS = ["B", "KB", "MB", "GB"] as const;
+
+/**
+ * Formats a byte count as a human-readable string (e.g., `"2.3 MB"`).
+ *
+ * Uses base-1024 (binary) units with one decimal place, consistent
+ * with {@link formatArtifactSize} in the artifact utilities.
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+
+  const unitIndex = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+    SIZE_UNITS.length - 1,
+  );
+
+  const value = bytes / Math.pow(1024, unitIndex);
+
+  return unitIndex === 0
+    ? `${bytes} B`
+    : `${value.toFixed(1)} ${SIZE_UNITS[unitIndex]}`;
+}
+
+/**
+ * Validates a file against the attachment size limit.
+ *
+ * Returns `null` when valid, or an error message string when the
+ * file exceeds {@link MAX_ATTACHMENT_BYTES}.
+ */
+export function validateAttachmentSize(file: File): string | null {
+  if (file.size > MAX_ATTACHMENT_BYTES) {
+    return `${file.name} exceeds the 10 MB attachment limit (${formatFileSize(file.size)})`;
+  }
+  return null;
+}

package/src/attachment/index.ts

@@ -0,0 +1,17 @@
+export { useAttachments } from "./useAttachments";
+export type {
+  AttachmentPhase,
+  AttachmentEntry,
+  UseAttachmentsOptions,
+  UseAttachmentsReturn,
+} from "./useAttachments";
+
+export { AttachmentChipList } from "./AttachmentChipList";
+export type { AttachmentChipListProps } from "./AttachmentChipList";
+
+export {
+  MAX_ATTACHMENT_BYTES,
+  detectContentType,
+  formatFileSize,
+  validateAttachmentSize,
+} from "./attachment-utils";