@moldea.ai/website-ui 1.1.4 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldea.ai/website-ui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Shared Astro foundations for moldea public websites.",
   "homepage": "https://github.com/moldea-ai/packages/tree/main/projects/website-ui#readme",
   "bugs": {
@@ -59,6 +59,16 @@
     "./breadcrumbs": {
       "import": "./src/components/breadcrumbs/breadcrumbs.component.astro"
     },
+    "./documentation-shell": {
+      "import": "./src/components/documentation-shell/documentation-shell.component.astro"
+    },
+    "./evaluation-replay": {
+      "import": "./src/components/evaluation-replay/evaluation-replay.component.astro"
+    },
+    "./evaluation-replay-model": {
+      "types": "./dist/evaluation-replay/index.d.ts",
+      "import": "./dist/evaluation-replay.js"
+    },
     "./inline-brand-text": {
       "import": "./src/components/inline-brand-text/inline-brand-text.component.astro"
     },
@@ -68,6 +78,22 @@
     "./navigation-progress": {
       "import": "./src/components/navigation-progress/navigation-progress.component.astro"
     },
+    "./markdown": {
+      "types": "./dist/markdown/index.d.ts",
+      "import": "./dist/markdown.js"
+    },
+    "./site-footer": {
+      "import": "./src/components/site-footer/site-footer.component.astro"
+    },
+    "./site-header": {
+      "import": "./src/components/site-header/site-header.component.astro"
+    },
+    "./status-badge": {
+      "import": "./src/components/status-badge/status-badge.component.astro"
+    },
+    "./tabbed-panels": {
+      "import": "./src/components/tabbed-panels/tabbed-panels.component.astro"
+    },
     "./theme-bootstrap": {
       "import": "./src/components/theme-bootstrap/theme-bootstrap.component.astro"
     },
@@ -95,10 +121,18 @@
     "tailwindcss": "4.3.3"
   },
   "devDependencies": {
+    "@shikijs/rehype": "4.4.3",
     "@types/node": "22.20.1",
     "astro": "7.2.2",
+    "rehype-sanitize": "6.0.0",
+    "rehype-slug": "6.0.0",
+    "rehype-stringify": "10.0.1",
+    "remark-gfm": "4.0.1",
+    "remark-parse": "11.0.0",
+    "remark-rehype": "11.1.2",
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
+    "unified": "11.0.5",
     "vite": "8.2.1",
     "vitest": "4.1.10",
     "web-utils-kit": "1.3.1"

package/src/components/breadcrumbs/breadcrumbs.component.astro

@@ -10,7 +10,7 @@ export interface IBreadcrumb {
 
 export interface Props {
   basePath?: string;
-  items: IBreadcrumb[];
+  items: readonly IBreadcrumb[];
 }
 
 const { basePath = import.meta.env.BASE_URL, items } = Astro.props;

package/src/components/documentation-shell/documentation-outline.component.astro

@@ -0,0 +1,23 @@
+---
+import type { IDocumentationOutlineHeading } from './documentation-shell.component.astro';
+
+interface Props {
+  headings: readonly IDocumentationOutlineHeading[];
+}
+
+const { headings } = Astro.props;
+---
+
+{
+  headings.map((heading) => (
+    <a
+      class:list={[
+        'text-sm leading-5 text-muted-foreground hover:text-foreground',
+        heading.depth === 3 && 'ps-3',
+      ]}
+      href={`#${heading.id}`}
+    >
+      {heading.text}
+    </a>
+  ))
+}

package/src/components/documentation-shell/documentation-shell.component.astro

@@ -0,0 +1,239 @@
+---
+import { ArrowLeft, ArrowRight, ChevronDown, Menu } from '@lucide/astro';
+
+import { withBase } from '../../site/index.ts';
+import Breadcrumbs, { type IBreadcrumb } from '../breadcrumbs/breadcrumbs.component.astro';
+
+import DocumentationOutline from './documentation-outline.component.astro';
+
+export interface IDocumentationNavigationItem {
+  href: string;
+  label: string;
+}
+
+export interface IDocumentationNavigationGroup {
+  items: readonly IDocumentationNavigationItem[];
+  label?: string;
+}
+
+export interface IDocumentationOutlineHeading {
+  depth: 2 | 3;
+  id: string;
+  text: string;
+}
+
+export interface IDocumentationAdjacentPage {
+  href: string;
+  label: string;
+}
+
+export interface Props {
+  basePath?: string;
+  breadcrumbs: readonly IBreadcrumb[];
+  currentRoute: string;
+  headings?: readonly IDocumentationOutlineHeading[];
+  mobileNavigationLabel?: string;
+  navigationAriaLabel?: string;
+  navigationGroups?: readonly IDocumentationNavigationGroup[];
+  nextPage?: IDocumentationAdjacentPage;
+  outlineEmptyLabel?: string;
+  outlineLabel?: string;
+  previousPage?: IDocumentationAdjacentPage;
+}
+
+const {
+  basePath = import.meta.env.BASE_URL,
+  breadcrumbs,
+  currentRoute,
+  headings = [],
+  mobileNavigationLabel = 'Documentation navigation',
+  navigationAriaLabel = 'Documentation navigation',
+  navigationGroups = [],
+  nextPage,
+  outlineEmptyLabel = 'A concise overview.',
+  outlineLabel = 'On this page',
+  previousPage,
+} = Astro.props;
+const hasNavigation = navigationGroups.some((group) => group.items.length > 0);
+const hasOutline = headings.length > 0;
+const contentGridClass = hasNavigation
+  ? 'lg:grid-cols-[16rem_minmax(0,1fr)] xl:grid-cols-[16rem_minmax(0,1fr)_13rem]'
+  : hasOutline
+    ? 'xl:grid-cols-[minmax(0,1fr)_15rem]'
+    : '';
+---
+
+<div class="docs-shell pt-7">
+  <Breadcrumbs
+    basePath={basePath}
+    items={breadcrumbs}
+  />
+
+  {
+    hasNavigation && (
+      <details class="surface-card mt-6 lg:hidden">
+        <summary class="flex min-h-12 list-none items-center gap-2 px-4 font-semibold [&::-webkit-details-marker]:hidden">
+          <Menu
+            class="size-4"
+            aria-hidden="true"
+          />
+          {mobileNavigationLabel}
+        </summary>
+        <nav
+          class="grid gap-5 border-t border-border p-4"
+          aria-label={navigationAriaLabel}
+        >
+          {navigationGroups.map((group) => (
+            <div>
+              {group.label && <p class="eyebrow mb-2 px-2">{group.label}</p>}
+              <div class="grid gap-1">
+                {group.items.map((item) => (
+                  <a
+                    class:list={[
+                      'rounded-lg px-3 py-2.5 text-sm font-medium',
+                      item.href === currentRoute
+                        ? 'bg-accent text-accent-foreground'
+                        : 'hover:bg-muted',
+                    ]}
+                    href={withBase(item.href, basePath)}
+                    aria-current={item.href === currentRoute ? 'page' : undefined}
+                  >
+                    {item.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+          ))}
+        </nav>
+      </details>
+    )
+  }
+
+  {
+    hasOutline && (
+      <details class="surface-card group sticky top-16 z-40 mt-3 xl:hidden">
+        <summary class="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-4 font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset [&::-webkit-details-marker]:hidden">
+          {outlineLabel}
+          <ChevronDown
+            class="size-4"
+            aria-hidden="true"
+          />
+        </summary>
+        <nav
+          class="grid max-h-[55vh] gap-2 overflow-y-auto border-t border-border p-4"
+          aria-label={outlineLabel}
+        >
+          <DocumentationOutline headings={headings} />
+        </nav>
+      </details>
+    )
+  }
+
+  <div class:list={['mt-7 grid min-w-0 gap-10', contentGridClass]}>
+    {
+      hasNavigation && (
+        <aside class="hidden lg:block">
+          <div class="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto pe-2">
+            <nav
+              class="grid gap-6"
+              aria-label={navigationAriaLabel}
+            >
+              {navigationGroups.map((group) => (
+                <div>
+                  {group.label && <p class="eyebrow mb-2 px-2">{group.label}</p>}
+                  <div class="grid gap-1">
+                    {group.items.map((item) => (
+                      <a
+                        class:list={[
+                          'rounded-lg px-3 py-2 text-sm font-medium',
+                          item.href === currentRoute
+                            ? 'bg-accent text-accent-foreground'
+                            : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                        ]}
+                        href={withBase(item.href, basePath)}
+                        aria-current={item.href === currentRoute ? 'page' : undefined}
+                      >
+                        {item.label}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </nav>
+          </div>
+        </aside>
+      )
+    }
+
+    <article class="min-w-0">
+      <slot name="header" />
+      <slot />
+
+      {
+        (previousPage || nextPage) && (
+          <nav
+            class="mt-14 grid gap-3 border-t border-border pt-8 sm:grid-cols-2"
+            aria-label="Previous and next documentation"
+          >
+            {previousPage ? (
+              <a
+                class="surface-card interactive-card flex min-h-24 items-center gap-3 p-4"
+                href={withBase(previousPage.href, basePath)}
+              >
+                <ArrowLeft
+                  class="size-4 shrink-0"
+                  aria-hidden="true"
+                />
+                <span>
+                  <span class="block text-xs font-bold tracking-wide text-muted-foreground uppercase">
+                    Previous
+                  </span>
+                  <span class="mt-1 block font-semibold">{previousPage.label}</span>
+                </span>
+              </a>
+            ) : (
+              <span />
+            )}
+            {nextPage && (
+              <a
+                class="surface-card interactive-card flex min-h-24 items-center justify-between gap-3 p-4"
+                href={withBase(nextPage.href, basePath)}
+              >
+                <span class="min-w-0 flex-1 text-end">
+                  <span class="block text-xs font-bold tracking-wide text-muted-foreground uppercase">
+                    Next
+                  </span>
+                  <span class="mt-1 block font-semibold">{nextPage.label}</span>
+                </span>
+                <ArrowRight
+                  class="size-4 shrink-0"
+                  aria-hidden="true"
+                />
+              </a>
+            )}
+          </nav>
+        )
+      }
+    </article>
+
+    {
+      (hasOutline || hasNavigation) && (
+        <aside class="hidden xl:block">
+          <div class="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto pe-2">
+            <p class="eyebrow mb-4">{outlineLabel}</p>
+            {hasOutline ? (
+              <nav
+                class="grid gap-2 border-s ps-4"
+                aria-label={outlineLabel}
+              >
+                <DocumentationOutline headings={headings} />
+              </nav>
+            ) : (
+              <p class="text-sm text-muted-foreground">{outlineEmptyLabel}</p>
+            )}
+          </div>
+        </aside>
+      )
+    }
+  </div>
+</div>

package/src/components/evaluation-replay/evaluation-replay-markdown.component.astro

@@ -0,0 +1,19 @@
+---
+import { renderMarkdownFragment } from '@moldea.ai/website-ui/markdown';
+
+interface Props {
+  markdown: string;
+}
+
+const { markdown } = Astro.props;
+const html = await renderMarkdownFragment(markdown, {
+  basePath: import.meta.env.BASE_URL,
+  localLinks: 'unwrap',
+  productNameTreatment: 'code',
+});
+---
+
+<div
+  class="prose-moldea prose-moldea-wrap-code replay-markdown min-w-0"
+  set:html={html}
+/>

package/src/components/evaluation-replay/evaluation-replay-path-tree.component.astro

@@ -0,0 +1,57 @@
+---
+import { File, Folder, Link2 } from '@lucide/astro';
+
+import type { IEvaluationReplayPathTreeNode } from '@moldea.ai/website-ui/evaluation-replay-model';
+
+interface Props {
+  nodes: readonly IEvaluationReplayPathTreeNode[];
+}
+
+const { nodes } = Astro.props;
+---
+
+<ul class="grid gap-2">
+  {
+    nodes.map((node) => {
+      const NodeIcon = node.kind === 'folder' ? Folder : node.kind === 'symlink' ? Link2 : File;
+
+      return (
+        <li class="min-w-0">
+          <div class="flex min-w-0 items-start gap-2 rounded-lg border border-border bg-background px-3 py-2">
+            <NodeIcon
+              class="mt-0.5 size-4 shrink-0 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <div class="min-w-0 flex-1">
+              {node.kind === 'folder' ? (
+                <>
+                  <code class="block font-mono text-xs font-semibold break-all">{node.name}/</code>
+                  <p class="mt-1 text-xs text-muted-foreground">
+                    {node.changeCount} affected {node.changeCount === 1 ? 'path' : 'paths'}
+                  </p>
+                </>
+              ) : (
+                <>
+                  <code
+                    class="block font-mono text-xs break-all"
+                    title={node.path}
+                  >
+                    {node.name}
+                  </code>
+                  <p class="mt-1 text-xs text-muted-foreground">
+                    {node.kind === 'symlink' ? 'Symbolic link' : 'File'}
+                  </p>
+                </>
+              )}
+            </div>
+          </div>
+          {node.children.length > 0 && (
+            <div class="ms-3 mt-2 border-s border-border ps-3 sm:ms-4 sm:ps-4">
+              <Astro.self nodes={node.children} />
+            </div>
+          )}
+        </li>
+      );
+    })
+  }
+</ul>

package/src/components/evaluation-replay/evaluation-replay.component.astro

@@ -0,0 +1,257 @@
+---
+import {
+  Bot,
+  ChevronDown,
+  CircleCheck,
+  CircleX,
+  GitCompareArrows,
+  Scale,
+  ShieldCheck,
+  SquareTerminal,
+  UserRound,
+} from '@lucide/astro';
+
+import type { IEvaluationReplayModel } from '@moldea.ai/website-ui/evaluation-replay-model';
+
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
+import StatusBadge from '../status-badge/status-badge.component.astro';
+import EvaluationReplayMarkdown from './evaluation-replay-markdown.component.astro';
+import EvaluationReplayPathTree from './evaluation-replay-path-tree.component.astro';
+
+export interface Props {
+  id: string;
+  replay: IEvaluationReplayModel | null;
+}
+
+const { id, replay } = Astro.props;
+const roleDetails = {
+  'coding-agent': { icon: Bot, label: 'Coding agent' },
+  developer: { icon: UserRound, label: 'Developer' },
+  'deterministic-verifier': { icon: ShieldCheck, label: 'Deterministic verifier' },
+  'independent-judge': { icon: Scale, label: 'Independent judge' },
+} as const;
+const workspaceLabels = {
+  created: 'Created',
+  deleted: 'Deleted',
+  modified: 'Modified',
+} as const;
+---
+
+<div class="min-w-0">
+  {
+    replay === null || replay.trials.length === 0 ? (
+      <p class="rounded-xl border border-border bg-muted/30 p-4 text-sm leading-6 text-muted-foreground">
+        No trial was recorded for this scenario in the selected attempt.
+      </p>
+    ) : (
+      <div class="grid gap-8">
+        {replay.trials.map((trial) => (
+          <section
+            class="min-w-0"
+            aria-labelledby={`${id}-replay-${trial.id}-title`}
+          >
+            <div class="flex flex-wrap items-center gap-3 border-b border-border pb-3">
+              <h4
+                id={`${id}-replay-${trial.id}-title`}
+                class="font-semibold"
+              >
+                {trial.title}
+              </h4>
+              <time
+                class="font-mono text-xs text-muted-foreground"
+                datetime={trial.evaluatedAt}
+              >
+                {trial.evaluatedAt}
+              </time>
+            </div>
+
+            <ol class="mt-5 grid gap-4">
+              {trial.steps.map((step) => {
+                if (step.kind === 'message') {
+                  const { icon: RoleIcon, label } = roleDetails[step.role];
+                  return (
+                    <li class="min-w-0 sm:px-8">
+                      <article class="min-w-0 rounded-xl border border-border bg-background p-4">
+                        <div class="flex flex-wrap items-center justify-between gap-2">
+                          <div class="flex min-w-0 items-center gap-2">
+                            <span class="inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                              <RoleIcon
+                                class="size-4"
+                                aria-hidden="true"
+                              />
+                            </span>
+                            <p class="text-xs font-bold tracking-wide text-muted-foreground uppercase">
+                              {label}
+                            </p>
+                          </div>
+                          <span class="text-xs text-muted-foreground">
+                            {step.source === 'recorded' ? 'Recorded message' : 'Derived summary'}
+                          </span>
+                        </div>
+                        <div class="mt-3 min-w-0">
+                          <EvaluationReplayMarkdown markdown={step.content} />
+                        </div>
+                      </article>
+                    </li>
+                  );
+                }
+
+                if (step.kind === 'command') {
+                  return (
+                    <li class="min-w-0 sm:px-8">
+                      <article class="min-w-0 overflow-hidden rounded-xl border border-border bg-code text-code-foreground">
+                        <header class="flex flex-wrap items-center justify-between gap-2 border-b border-code-foreground/15 px-4 py-3">
+                          <span class="inline-flex items-center gap-2 text-xs font-bold tracking-wide uppercase">
+                            <SquareTerminal
+                              class="size-4"
+                              aria-hidden="true"
+                            />
+                            {step.isAggregate
+                              ? 'Recorded activity'
+                              : 'Normalized recorded operation'}
+                          </span>
+                          <span class="inline-flex items-center gap-1.5 text-xs font-semibold">
+                            {step.status === 'passed' ? (
+                              <CircleCheck
+                                class="size-4"
+                                aria-hidden="true"
+                              />
+                            ) : (
+                              <CircleX
+                                class="size-4"
+                                aria-hidden="true"
+                              />
+                            )}
+                            {step.status === 'passed' ? 'Completed' : 'Failed'}
+                          </span>
+                        </header>
+                        <div class="min-w-0 px-4 py-3">
+                          <code class="block font-mono text-sm font-semibold break-all">
+                            {step.operation}
+                          </code>
+                          <ul class="mt-2 grid gap-1 text-sm text-code-foreground/80">
+                            {step.results.map((result) => (
+                              <li class="break-words">
+                                <InlineBrandText
+                                  text={result}
+                                  variant="compact"
+                                />
+                              </li>
+                            ))}
+                          </ul>
+                          {step.exitCode !== null && (
+                            <p class="mt-2 font-mono text-xs text-code-foreground/70">
+                              Exit code: {step.exitCode}
+                            </p>
+                          )}
+                        </div>
+                      </article>
+                    </li>
+                  );
+                }
+
+                if (step.kind === 'workspace') {
+                  const totalChanges = step.groups.reduce(
+                    (sum, group) => sum + group.changes.length,
+                    0,
+                  );
+                  return (
+                    <li class="min-w-0 sm:px-8">
+                      <article class="rounded-xl border border-border bg-muted/30 p-4 sm:p-5">
+                        <div class="flex items-center gap-2">
+                          <GitCompareArrows
+                            class="size-4 text-muted-foreground"
+                            aria-hidden="true"
+                          />
+                          <h5 class="font-semibold">Workspace changes</h5>
+                        </div>
+                        {totalChanges === 0 ? (
+                          <p class="mt-3 text-sm leading-6 text-muted-foreground">
+                            No project-visible files or folders changed.
+                          </p>
+                        ) : (
+                          <div class="mt-4 grid gap-4 lg:grid-cols-3">
+                            {step.groups.map((group) => (
+                              <section aria-labelledby={`${id}-replay-${trial.id}-${group.status}`}>
+                                <div class="flex items-center justify-between gap-2">
+                                  <h6
+                                    id={`${id}-replay-${trial.id}-${group.status}`}
+                                    class="text-sm font-semibold"
+                                  >
+                                    {workspaceLabels[group.status]}
+                                  </h6>
+                                  <span class="font-mono text-xs text-muted-foreground">
+                                    {group.changes.length}
+                                  </span>
+                                </div>
+                                {group.tree.length === 0 ? (
+                                  <p class="mt-2 text-xs text-muted-foreground">No paths</p>
+                                ) : (
+                                  <div class="mt-2">
+                                    <EvaluationReplayPathTree nodes={group.tree} />
+                                  </div>
+                                )}
+                              </section>
+                            ))}
+                          </div>
+                        )}
+                      </article>
+                    </li>
+                  );
+                }
+
+                const { icon: RoleIcon, label } = roleDetails[step.role];
+                return (
+                  <li class="min-w-0 sm:px-8">
+                    <details
+                      class="group/verdict min-w-0 overflow-hidden rounded-xl border border-border bg-muted/30"
+                      data-replay-verdict
+                    >
+                      <summary class="flex min-h-14 cursor-pointer list-none items-center justify-between gap-3 p-4 marker:content-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring">
+                        <p class="font-semibold">Trial verdict</p>
+                        <span class="flex items-center gap-3">
+                          <StatusBadge
+                            label={step.status === 'passed' ? 'Passed' : 'Failed'}
+                            tone={step.status === 'passed' ? 'success' : 'danger'}
+                          />
+                          <ChevronDown
+                            class="size-4 shrink-0 text-muted-foreground transition-transform group-open/verdict:rotate-180 motion-reduce:transition-none"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      </summary>
+                      <div class="border-t border-border bg-background p-4">
+                        <div class="flex flex-wrap items-center justify-between gap-2">
+                          <div class="flex min-w-0 items-center gap-2">
+                            <RoleIcon
+                              class="size-4 shrink-0 text-muted-foreground"
+                              aria-hidden="true"
+                            />
+                            <p class="text-xs font-bold tracking-wide text-muted-foreground uppercase">
+                              {label}
+                            </p>
+                          </div>
+                          <span class="text-xs text-muted-foreground">
+                            {step.source === 'recorded'
+                              ? 'Recorded rationale'
+                              : 'Derived rationale'}
+                          </span>
+                        </div>
+                        <h5 class="mt-4 font-semibold">
+                          {step.status === 'passed' ? 'Why it passed' : 'Why it failed'}
+                        </h5>
+                        <div class="mt-2 min-w-0 text-muted-foreground">
+                          <EvaluationReplayMarkdown markdown={step.rationale} />
+                        </div>
+                      </div>
+                    </details>
+                  </li>
+                );
+              })}
+            </ol>
+          </section>
+        ))}
+      </div>
+    )
+  }
+</div>