feat(web): Artifacts and Skills pages match the mockups (CL-9581)

apps/web/src/library/index.ts

@@ -1,8 +1,6 @@
 export * from "./artifact-summary";
 export { sortArtifacts, filterArtifacts } from "./sort-filter";
 export type { ArtifactSort } from "./sort-filter";
-export { ArtifactCard } from "./artifact-card";
-export type { ArtifactCardMeta, ArtifactCardProps } from "./artifact-card";
 export {
   LIBRARY_KIND_SEGMENTS,
   artifactMatchesLibraryKindSegment,

apps/web/src/pages/library-page.css

@@ -0,0 +1,22 @@
+/* Artifacts and Skills list pages (mockups: artifacts.html, skills.html). */
+.page-lede {
+  margin: 0 0 var(--space-4, 1rem);
+  color: var(--ink-soft);
+  font-size: 0.9375rem;
+}
+
+.library-row-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.library-row-icon {
+  flex: none;
+  color: var(--ink-soft);
+}
+
+.skill-row-name {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}

apps/web/src/pages/library-page.tsx

@@ -15,15 +15,13 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  ViewToggle,
   artifactKindLabel,
   formatRelativeTime,
   toast,
   useListSelection,
 } from "@corbits/react-ui";
-import type { SelectionCheckboxState, UseListSelectionResult, ViewMode } from "@corbits/react-ui";
+import type { SelectionCheckboxState, UseListSelectionResult } from "@corbits/react-ui";
 import {
-  ArtifactCard,
   ArtifactRenderer,
   artifactMatchesLibraryKindSegment,
   filterArtifacts,
@@ -36,7 +34,14 @@ import {
 } from "@/library";
 import type { ArtifactSort, ArtifactSummary } from "@/library";
 import { useQueryClient } from "@tanstack/react-query";
-import { ArrowsDownUp, ArrowSquareOut, LinkSimple as LinkIcon, Stack, X } from "@/lib/icons";
+import {
+  ArrowsDownUp,
+  ArrowSquareOut,
+  FileText,
+  LinkSimple as LinkIcon,
+  Stack,
+  X,
+} from "@/lib/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { MouseEvent as ReactMouseEvent } from "react";
 import { describeApiError, ListSkeleton, QueryView, SignedOutNotice } from "@/lib/api-query";
@@ -50,6 +55,7 @@ import {
 } from "../api";
 import { isAdditiveSelectClick, isRowActivationKey } from "../activatable-row";
 import { useBench } from "../bench-context";
+import "./library-page.css";
 import { readLastWorkbenchId } from "../last-workbench";
 import { consumePendingLibraryUpload, LIBRARY_UPLOAD_EVENT } from "../library-upload";
 import { resolveLibraryWorkbenchScope } from "../library-workbench-scope";
@@ -154,7 +160,12 @@ function ArtifactRows({
                   rowLabel={artifact.title}
                 />
               </TableCell>
-              <TableCell className="font-medium">{artifact.title}</TableCell>
+              <TableCell className="font-medium">
+                <span className="library-row-title">
+                  <FileText aria-hidden="true" className="library-row-icon" />
+                  {artifact.title}
+                </span>
+              </TableCell>
               <TableCell className="text-muted-foreground">
                 {artifactKindLabel(artifact.kind)}
               </TableCell>
@@ -315,7 +326,6 @@ export function LibraryPage({
 }) {
   const [localQuery, setLocalQuery] = useState("");
   const [sort, setSort] = useState<ArtifactSort>("newest");
-  const [viewMode, setViewMode] = useState<ViewMode>("rows");
   const [localSelected, setLocalSelected] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -338,14 +348,6 @@ export function LibraryPage({
   // your picks, since `useListSelection` keeps them in internal state.
   const selection = useListSelection({ ids: visibleIds });
 
-  // Only rows has checkboxes, so a selection has nothing to anchor to in
-  // cards — clearing on view change is simpler than adding card checkboxes.
-  const [selectionViewMode, setSelectionViewMode] = useState(viewMode);
-  if (selectionViewMode !== viewMode) {
-    setSelectionViewMode(viewMode);
-    selection.clear();
-  }
-
   const openPicker = useCallback(() => {
     if (uploading === true) return;
     fileInputRef.current?.click();
@@ -464,7 +466,6 @@ export function LibraryPage({
                 ))}
               </MenuContent>
             </Menu>
-            <ViewToggle mode={viewMode} onChange={setViewMode} />
             {onUpload !== undefined ? (
               <Button size="sm" disabled={uploading === true} onClick={openPicker}>
                 {uploading === true ? "Uploading…" : "Upload"}
@@ -498,6 +499,7 @@ export function LibraryPage({
       <div className="flex min-h-0 flex-1">
         <div className="min-h-0 min-w-0 flex-1 overflow-auto">
           <PageShell width="full" className="page-fill">
+            <p className="page-lede px-4 sm:px-7">Everything your workers made. Yours to keep.</p>
             {artifacts.length === 0 ? (
               <RichEmptyState
                 icon={<Stack />}
@@ -510,7 +512,7 @@ export function LibraryPage({
                 title="Nothing matches"
                 description={`No file matches "${activeQuery}".`}
               />
-            ) : viewMode === "rows" ? (
+            ) : (
               <div className="px-4 pb-5 sm:px-7">
                 <ArtifactRows
                   artifacts={visible}
@@ -520,21 +522,6 @@ export function LibraryPage({
                   selection={selection}
                 />
               </div>
-            ) : (
-              <div className="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-3 px-4 pb-5 sm:px-7">
-                {visible.map((artifact) => (
-                  <ArtifactCard
-                    key={artifact.id}
-                    artifact={artifact}
-                    selected={activeSelected === artifact.id}
-                    now={now}
-                    onSelect={() => select(artifact.id)}
-                    meta={{
-                      snippet: null,
-                    }}
-                  />
-                ))}
-              </div>
             )}
           </PageShell>
         </div>

apps/web/src/pages/skills-page.tsx

@@ -21,6 +21,7 @@ import { useCallback, useEffect, useState, type ReactNode } from "react";
 
 import { tenantKeys } from "../query-client";
 
+import "./library-page.css";
 import { rowActivationProps } from "../activatable-row";
 import { consumePendingNewSkill } from "../command-palette-actions";
 import { createSkill, listSkills, type SkillSummary } from "../skills-api";
@@ -189,11 +190,12 @@ export function SkillsPage({
         />
       ) : (
         <div className="px-4 pb-5 sm:px-7">
+          <p className="page-lede">Know-how your workers draw on. Ask for more in any bench.</p>
           <Table aria-label="Skills">
             <TableHeader>
               <TableRow>
-                <TableHead className="w-48">Name</TableHead>
-                <TableHead className="max-w-sm">Description</TableHead>
+                <TableHead className="w-48">Skill</TableHead>
+                <TableHead className="max-w-sm">What it teaches</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -203,7 +205,9 @@ export function SkillsPage({
                   className="cursor-pointer"
                   {...rowActivationProps(() => open(skill.name))}
                 >
-                  <TableCell className="w-48 font-medium">{skillDisplayName(skill)}</TableCell>
+                  <TableCell className="w-48 font-medium">
+                    <span className="skill-row-name">{skillDisplayName(skill)}</span>
+                  </TableCell>
                   <TableCell className="max-w-sm truncate text-muted-foreground">
                     {skill.description}
                   </TableCell>