feat: add expandable artifact file list to HITL approval cards + download endpoint

- ApprovalCard.tsx: artifact pill is now clickable toggle that expands
to show each file with type badge, name, description, and download link
- api.py: added GET /build/artifacts/{design_name}/{filename} endpoint
for individual artifact file downloads (with path traversal protection)
- hitl.css: added ac-artifact-* styles for the expandable file list

server/api.py

@@ -14,7 +14,7 @@ from typing import Any, Dict, List, Optional
 
 from fastapi import Depends, FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import StreamingResponse
+from fastapi.responses import FileResponse, StreamingResponse
 from pydantic import BaseModel
 
 from server.approval import approval_manager
@@ -1230,6 +1230,30 @@ def get_partial_artifacts(design_name: str):
     return {"design_name": design_name, "artifacts": artifacts[:50]}  # Cap at 50
 
 
+@app.get("/build/artifacts/{design_name}/{filename}")
+def download_artifact(design_name: str, filename: str):
+    """Download an individual artifact file from a design's output directory."""
+    # Sanitize filename to prevent path traversal
+    safe_name = os.path.basename(filename)
+    if safe_name != filename or ".." in filename:
+        raise HTTPException(status_code=400, detail="Invalid filename")
+
+    # Search workspace designs/ first, then OpenLane designs/
+    search_dirs = [os.path.join(_repo_root(), "designs", design_name)]
+    openlane_root = os.environ.get("OPENLANE_ROOT", os.path.expanduser("~/OpenLane"))
+    search_dirs.append(os.path.join(openlane_root, "designs", design_name))
+
+    for base_dir in search_dirs:
+        if not os.path.isdir(base_dir):
+            continue
+        for root_dir, _dirs, files in os.walk(base_dir):
+            if safe_name in files:
+                fpath = os.path.join(root_dir, safe_name)
+                return FileResponse(fpath, filename=safe_name)
+
+    raise HTTPException(status_code=404, detail="Artifact not found")
+
+
 def _classify_artifact(filename: str) -> str:
     """Classify a file by its extension."""
     ext = os.path.splitext(filename)[1].lower()

web/src/components/ApprovalCard.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { API_BASE } from '../api';
 
 interface StageCompleteData {
     stage_name: string;
@@ -26,13 +27,30 @@ const STAGE_ICONS: Record<string, string> = {
     SIGNOFF: '✓', SUCCESS: '✦', FAIL: '✗',
 };
 
+const ARTIFACT_TYPE_LABELS: Record<string, string> = {
+    rtl: 'RTL', waveform: 'Waveform', layout: 'Layout',
+    constraints: 'SDC', config: 'Config', script: 'Script',
+    formal: 'Formal', log: 'Log', report: 'Report', other: 'File',
+};
+
 function fmtStage(name: string): string {
     return name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
 }
 
-export const ApprovalCard: React.FC<Props> = ({ data, onApprove, onReject, isSubmitting }) => {
+function guessType(name: string): string {
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const map: Record<string, string> = {
+        v: 'rtl', sv: 'rtl', vcd: 'waveform', gds: 'layout', def: 'layout',
+        sdc: 'constraints', json: 'config', tcl: 'script', sby: 'formal',
+        log: 'log', csv: 'report',
+    };
+    return map[ext] || 'other';
+}
+
+export const ApprovalCard: React.FC<Props> = ({ data, designName, onApprove, onReject, isSubmitting }) => {
     const [showFeedback, setShowFeedback] = useState(false);
     const [feedback, setFeedback] = useState('');
+    const [artifactsExpanded, setArtifactsExpanded] = useState(false);
 
     const hasWarnings = data.warnings && data.warnings.length > 0;
     const hasErrors = data.decisions?.some((d: string) => /error|fail/i.test(d));
@@ -58,9 +76,13 @@ export const ApprovalCard: React.FC<Props> = ({ data, onApprove, onReject, isSub
                     {!hasErrors && hasWarnings && <span className="ac-badge ac-badge--warn">Warning</span>}
                 </div>
                 {artifactCount > 0 && (
-                    <span className="ac-artifact-pill">
+                    <button
+                        className="ac-artifact-pill ac-artifact-toggle"
+                        onClick={() => setArtifactsExpanded(v => !v)}
+                    >
                         {artifactCount} artifact{artifactCount !== 1 ? 's' : ''}
-                    </span>
+                        <span className={`ac-artifact-chevron ${artifactsExpanded ? 'ac-artifact-chevron--open' : ''}`}>›</span>
+                    </button>
                 )}
             </div>
 
@@ -69,6 +91,34 @@ export const ApprovalCard: React.FC<Props> = ({ data, onApprove, onReject, isSub
                 {data.summary || `${fmtStage(data.stage_name)} completed successfully.`}
             </p>
 
+            {/* Artifact file list */}
+            {artifactsExpanded && data.artifacts && data.artifacts.length > 0 && (
+                <div className="ac-artifacts">
+                    {data.artifacts.map((a, i) => {
+                        const aType = guessType(a.name);
+                        return (
+                            <div key={i} className="ac-artifact-row">
+                                <span className={`ac-artifact-type ac-artifact-type--${aType}`}>
+                                    {ARTIFACT_TYPE_LABELS[aType] || aType}
+                                </span>
+                                <span className="ac-artifact-name">{a.name}</span>
+                                {a.description && (
+                                    <span className="ac-artifact-desc">{a.description}</span>
+                                )}
+                                <a
+                                    className="ac-artifact-dl"
+                                    href={`${API_BASE}/build/artifacts/${designName}/${encodeURIComponent(a.name)}`}
+                                    download
+                                    title={`Download ${a.name}`}
+                                >
+                                    ↓
+                                </a>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
             {/* Next stage preview */}
             {hasNext && data.next_stage_preview && (
                 <div className="ac-next-hint">

web/src/hitl.css

@@ -1822,3 +1822,107 @@
 }
 
 .ac-cancel-btn:hover { color: var(--text-secondary); }
+
+/* ── Artifact list (expandable) ─────────────────────────────────── */
+.ac-artifact-toggle {
+    cursor: pointer;
+    background: none;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    padding: 0.175rem 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    transition: background 120ms, border-color 120ms;
+}
+.ac-artifact-toggle:hover {
+    background: rgba(255,255,255,0.03);
+    border-color: var(--text-tertiary);
+}
+
+.ac-artifact-chevron {
+    display: inline-block;
+    font-size: 0.75rem;
+    transition: transform 160ms ease;
+    transform: rotate(0deg);
+}
+.ac-artifact-chevron--open {
+    transform: rotate(90deg);
+}
+
+.ac-artifacts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.5rem 0;
+    border-top: 1px solid var(--border-subtle);
+    border-bottom: 1px solid var(--border-subtle);
+    margin: 0.25rem 0;
+}
+
+.ac-artifact-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.3125rem 0.375rem;
+    border-radius: 4px;
+    transition: background 100ms;
+}
+.ac-artifact-row:hover {
+    background: rgba(255,255,255,0.025);
+}
+
+.ac-artifact-type {
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    padding: 0.1rem 0.375rem;
+    border-radius: 3px;
+    flex-shrink: 0;
+    font-family: 'JetBrains Mono', monospace;
+}
+.ac-artifact-type--rtl        { background: rgba(99,179,237,0.12);  color: #63b3ed; }
+.ac-artifact-type--waveform   { background: rgba(129,230,217,0.12); color: #81e6d9; }
+.ac-artifact-type--layout     { background: rgba(183,148,244,0.12); color: #b794f4; }
+.ac-artifact-type--constraints{ background: rgba(246,173,85,0.12);  color: #f6ad55; }
+.ac-artifact-type--config     { background: rgba(160,174,192,0.12); color: #a0aec0; }
+.ac-artifact-type--script     { background: rgba(160,174,192,0.12); color: #a0aec0; }
+.ac-artifact-type--formal     { background: rgba(246,173,85,0.12);  color: #f6ad55; }
+.ac-artifact-type--log        { background: rgba(160,174,192,0.08); color: #718096; }
+.ac-artifact-type--report     { background: rgba(72,187,120,0.12);  color: #48bb78; }
+.ac-artifact-type--other      { background: rgba(160,174,192,0.08); color: #718096; }
+
+.ac-artifact-name {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.78rem;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+}
+
+.ac-artifact-desc {
+    font-size: 0.72rem;
+    color: var(--text-tertiary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+}
+
+.ac-artifact-dl {
+    flex-shrink: 0;
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    text-decoration: none;
+    padding: 0.125rem 0.25rem;
+    border-radius: 3px;
+    transition: color 120ms, background 120ms;
+}
+.ac-artifact-dl:hover {
+    color: var(--text-primary);
+    background: rgba(255,255,255,0.05);
+}