@stigmer/react 0.4.8 → 0.5.0

package/src/skill/SkillDiffDialog.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "@stigmer/theme";
+import { useSkillDiff } from "./useSkillDiff";
+import { MultiFileDiffView } from "../version-history/MultiFileDiffView";
+import { ErrorMessage } from "../error/ErrorMessage";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+/** State passed to {@link SkillDiffDialog} to control its visibility. */
+export interface SkillDiffDialogState {
+  /** Artifact storage key for the "before" version. */
+  readonly fromArtifactKey: string;
+  /** Artifact storage key for the "after" version. */
+  readonly toArtifactKey: string;
+  /** Truncated hash label for the "before" version (display only). */
+  readonly fromLabel: string;
+  /** Truncated hash label for the "after" version (display only). */
+  readonly toLabel: string;
+}
+
+/** Props for {@link SkillDiffDialog}. */
+export interface SkillDiffDialogProps {
+  /**
+   * Dialog state. When non-null, the dialog opens and fetches the diff.
+   * When `null`, the dialog is closed.
+   */
+  readonly state: SkillDiffDialogState | null;
+  /** Called when the dialog is dismissed (Escape, backdrop click, close button). */
+  readonly onClose: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Dialog that renders a multi-file diff between two skill versions.
+ *
+ * Uses native `<dialog>` with `showModal()` for built-in focus trapping,
+ * Escape handling, and backdrop — consistent with `ConfirmDialog`.
+ *
+ * Internally composes `useSkillDiff` (data fetching) and
+ * `MultiFileDiffView` (rendering). Handles loading, error, and
+ * empty states.
+ *
+ * Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * const [diffState, setDiffState] = useState<SkillDiffDialogState | null>(null);
+ *
+ * <SkillDiffDialog state={diffState} onClose={() => setDiffState(null)} />
+ * ```
+ */
+export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (state && !dialog.open) {
+      dialog.showModal();
+    } else if (!state && dialog.open) {
+      dialog.close();
+    }
+  }, [state]);
+
+  const handleDialogCancel = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      onClose();
+    },
+    [onClose],
+  );
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent<HTMLDialogElement>) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  const { diff, isLoading, error } = useSkillDiff(
+    state?.fromArtifactKey ?? null,
+    state?.toArtifactKey ?? null,
+  );
+
+  if (!state) return null;
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onCancel={handleDialogCancel}
+      onClick={handleBackdropClick}
+      className={cn(
+        "fixed inset-0 z-50 m-auto h-[85vh] w-full max-w-4xl rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
+        "backdrop:bg-black/50",
+        "open:animate-in open:fade-in-0 open:zoom-in-95",
+      )}
+    >
+      <div className="flex h-full flex-col">
+        {/* Header */}
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="font-medium text-foreground">Comparing</span>
+            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+              {state.fromLabel}
+            </code>
+            <ArrowIcon className="size-3.5 text-muted-foreground-faint" />
+            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+              {state.toLabel}
+            </code>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close diff viewer"
+            className={cn(
+              "rounded-md p-1.5 text-muted-foreground transition-colors",
+              "hover:bg-accent-hover hover:text-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <CloseIcon className="size-4" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-4">
+          {isLoading ? (
+            <DiffSkeleton />
+          ) : error ? (
+            <ErrorMessage error={error} />
+          ) : diff ? (
+            <MultiFileDiffView diff={diff} />
+          ) : null}
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Loading skeleton
+// ---------------------------------------------------------------------------
+
+function DiffSkeleton() {
+  return (
+    <div
+      className="flex flex-col gap-4"
+      aria-busy="true"
+      aria-label="Loading diff"
+    >
+      <div className="flex items-center gap-2">
+        <div className="h-4 w-36 animate-pulse rounded bg-muted" />
+        <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+        <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+      </div>
+      <div className="h-6 w-full animate-pulse rounded bg-muted" />
+      {[1, 2, 3, 4, 5, 6].map((i) => (
+        <div key={i} className="flex gap-2">
+          <div className="h-4 w-10 animate-pulse rounded bg-muted" />
+          <div className="h-4 w-10 animate-pulse rounded bg-muted" />
+          <div className="h-4 flex-1 animate-pulse rounded bg-muted" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function ArrowIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M3 8h10M9 4l4 4-4 4" />
+    </svg>
+  );
+}
+
+function CloseIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+  );
+}

package/src/skill/SkillFileBrowser.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import Markdown from "react-markdown";
+import { cn } from "@stigmer/theme";
+import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
+import { useSkillArtifact } from "./useSkillArtifact";
+import type { SkillFileEntry } from "./useSkillUpload";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+/** Props for {@link SkillFileBrowser}. */
+export interface SkillFileBrowserProps {
+  /** Artifact storage key from `skill.status.artifactStorageKey`. */
+  readonly artifactStorageKey: string | null;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+/**
+ * File tree browser with content viewer for skill packages.
+ *
+ * Fetches the skill's ZIP artifact, unpacks it, and renders:
+ * - Left panel: file tree with folder grouping
+ * - Right panel: content viewer (rendered Markdown for .md, raw code otherwise)
+ *
+ * SKILL.md is selected by default on load.
+ * Responsive: stacked layout on mobile viewports.
+ *
+ * Zero Console dependencies — safe for platform builder embedding.
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * const { skill } = useSkill(org, slug);
+ *
+ * <SkillFileBrowser
+ *   artifactStorageKey={skill?.status?.artifactStorageKey ?? null}
+ * />
+ * ```
+ */
+export function SkillFileBrowser({
+  artifactStorageKey,
+  className,
+}: SkillFileBrowserProps) {
+  const { files, isLoading, error, getFileContent } = useSkillArtifact(artifactStorageKey);
+  const [selectedPath, setSelectedPath] = useState<string>("SKILL.md");
+
+  const treeNodes = useMemo(
+    () => (files ? buildFileTree(files.filter((f) => !f.isDirectory)) : []),
+    [files],
+  );
+
+  const content = useMemo(
+    () => (selectedPath ? getFileContent(selectedPath) : null),
+    [selectedPath, getFileContent],
+  );
+
+  if (!artifactStorageKey) return null;
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn("rounded-lg border border-border", className)}
+        aria-busy="true"
+        aria-label="Loading skill package files"
+      >
+        <div className="p-4">
+          <div className="h-3 w-32 animate-pulse rounded bg-muted" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] border-t border-border">
+          <div className="space-y-2 p-3 border-b md:border-b-0 md:border-r border-border">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="h-4 w-full animate-pulse rounded bg-muted" />
+            ))}
+          </div>
+          <div className="p-4">
+            <div className="space-y-2">
+              <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+              <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
+              <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("rounded-lg border border-border p-4", className)}>
+        <p className="text-sm text-destructive">
+          Failed to load skill package: {error.message}
+        </p>
+      </div>
+    );
+  }
+
+  if (!files || files.length === 0) return null;
+
+  return (
+    <div className={cn("rounded-lg border border-border overflow-hidden", className)}>
+      {/* Header */}
+      <div className="border-b border-border px-4 py-2">
+        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          Package Files
+        </h3>
+      </div>
+
+      {/* Split pane */}
+      <div className="grid grid-cols-1 md:grid-cols-[220px_1fr]">
+        {/* File tree */}
+        <nav
+          className="border-b border-border md:border-b-0 md:border-r overflow-y-auto"
+          aria-label="Skill package file tree"
+        >
+          <ul className="py-1" role="tree">
+            {treeNodes.map((node) => (
+              <FileTreeNode
+                key={node.path}
+                node={node}
+                selectedPath={selectedPath}
+                onSelect={setSelectedPath}
+                depth={0}
+              />
+            ))}
+          </ul>
+        </nav>
+
+        {/* Content viewer */}
+        <div className="min-h-[200px] max-h-[400px] overflow-y-auto p-4">
+          {content !== null ? (
+            <FileContentViewer path={selectedPath} content={content} />
+          ) : (
+            <p className="text-sm text-muted-foreground-subtle italic">
+              Select a file to view its contents
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// File tree node
+// ---------------------------------------------------------------------------
+
+interface TreeNode {
+  name: string;
+  path: string;
+  children?: TreeNode[];
+}
+
+function FileTreeNode({
+  node,
+  selectedPath,
+  onSelect,
+  depth,
+}: {
+  readonly node: TreeNode;
+  readonly selectedPath: string;
+  readonly onSelect: (path: string) => void;
+  readonly depth: number;
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const isFolder = !!node.children;
+  const isSelected = node.path === selectedPath;
+
+  const handleClick = useCallback(() => {
+    if (isFolder) {
+      setExpanded((prev) => !prev);
+    } else {
+      onSelect(node.path);
+    }
+  }, [isFolder, node.path, onSelect]);
+
+  return (
+    <li role="treeitem" aria-expanded={isFolder ? expanded : undefined}>
+      <button
+        type="button"
+        onClick={handleClick}
+        className={cn(
+          "flex w-full items-center gap-1.5 px-3 py-1 text-left text-xs transition-colors",
+          "hover:bg-muted",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          isSelected && !isFolder && "bg-muted text-foreground font-medium",
+          !isSelected && "text-muted-foreground",
+        )}
+        style={{ paddingLeft: `${12 + depth * 12}px` }}
+        aria-current={isSelected ? "true" : undefined}
+      >
+        {isFolder && (
+          <span className="text-[10px] text-muted-foreground-subtle">
+            {expanded ? "▼" : "▶"}
+          </span>
+        )}
+        <span className={cn("truncate", isFolder && "font-medium text-foreground")}>
+          {node.name}
+        </span>
+      </button>
+      {isFolder && expanded && node.children && (
+        <ul role="group">
+          {node.children.map((child) => (
+            <FileTreeNode
+              key={child.path}
+              node={child}
+              selectedPath={selectedPath}
+              onSelect={onSelect}
+              depth={depth + 1}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Content viewer
+// ---------------------------------------------------------------------------
+
+function FileContentViewer({
+  path,
+  content,
+}: {
+  readonly path: string;
+  readonly content: string;
+}) {
+  const isMarkdown = path.endsWith(".md");
+
+  if (isMarkdown) {
+    return (
+      <Markdown remarkPlugins={REMARK_PLUGINS} components={MARKDOWN_COMPONENTS}>
+        {stripFrontmatter(content)}
+      </Markdown>
+    );
+  }
+
+  return (
+    <pre className="overflow-x-auto font-mono text-xs leading-relaxed text-foreground whitespace-pre-wrap">
+      {content}
+    </pre>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tree building utility
+// ---------------------------------------------------------------------------
+
+function buildFileTree(files: SkillFileEntry[]): TreeNode[] {
+  const root: TreeNode[] = [];
+
+  const sorted = [...files].sort((a, b) => a.path.localeCompare(b.path));
+
+  for (const file of sorted) {
+    const parts = file.path.split("/");
+
+    if (parts.length === 1) {
+      root.push({ name: parts[0], path: file.path });
+    } else {
+      let currentLevel = root;
+      for (let i = 0; i < parts.length - 1; i++) {
+        const folderName = parts[i];
+        let folder = currentLevel.find(
+          (n) => n.name === folderName && n.children,
+        );
+        if (!folder) {
+          folder = {
+            name: folderName,
+            path: parts.slice(0, i + 1).join("/") + "/",
+            children: [],
+          };
+          currentLevel.push(folder);
+        }
+        currentLevel = folder.children!;
+      }
+      currentLevel.push({ name: parts[parts.length - 1], path: file.path });
+    }
+  }
+
+  return root;
+}