대시보드
파이프라인 상태 요약
메트릭
활성: 24
실패: 3
Workspaceopt-shell
Dashboard Workspace
DashboardWorkspace와 ShellSection으로 상단 헤더, 메트릭 카드, 사이드 패널이 있는 기본 운영 화면을 구성합니다.
dashboardworkspaceshell
ShellProviderDashboardWorkspaceShellSection
문서 링크 대신 실제 하네스 컴포넌트와 recipe 예제를 바로 봅니다. workspace shell, state boundary, navigation chrome, adapter bridge처럼 제품 프레임을 만드는 조합만 모았습니다.
opt-shell 활용 예제 14개. 각 카드에서 라이브 미리보기와 상세 코드 예제를 확인할 수 있습니다.
파이프라인 상태 요약
DashboardWorkspace와 ShellSection으로 상단 헤더, 메트릭 카드, 사이드 패널이 있는 기본 운영 화면을 구성합니다.
전체 파이프라인 목록
ListWorkspace에 toolbar와 section body를 얹어 목록형 운영 화면의 기본 리듬을 보여줍니다.
데이터 파이프라인의 상태, 실행 이력, 장애 대응을 한 흐름으로 다루는 콘솔입니다. 실시간 모니터링부터 인시던트 트리아지까지.
Everything you need to keep your data pipelines healthy.
Track pipeline health, throughput, and latency across all environments with sub-second refresh.
Correlate failures, group by root cause, and assign owners with a single click.
Stage-level profiling, throughput trends, and cost attribution for every pipeline run.
ML-driven anomaly detection and threshold alerts with configurable routing to Slack, PagerDuty, or email.
Navigate to the Overview to see live pipeline health metrics.
ShellLandingPage와 ShellSection으로 공개 랜딩의 hero, stats strip, feature section을 같은 정책 아래 묶습니다.
loading, empty, error 상태를 ShellStateBoundary로 통일해 화면 별 copy와 상태 카드 리듬을 고정합니다.
variant="panel"
variant="compact"
{
"density": "comfortable",
"contentWidth": "wide",
"motionPolicy": "reduced",
"navigationMode": "sidebar"
}ShellPolicyToggler로 density, width, navigation mode 같은 정책을 화면에서 직접 조정합니다.
dashboardShellCollapsibleNav, ShellNavItem, ShellNavAccordion 조합으로 접히는 product nav를 구성합니다.
ShellBottomBar로 선택 액션과 승인 액션을 화면 하단에 sticky하게 붙여 작업 맥락을 유지합니다.
ShellFlyoutAside로 상세 패널을 overlay/push 방식으로 열어 메인 화면 문맥을 유지한 채 부가 정보를 띄웁니다.
A production-style records workspace that connects filters, portfolio rows, and dossier navigation.
The grid stays editable while filters, status, and footer remain part of the app workflow.
Showing 5 records with renewal timing and health status.
ListWorkspace 안에서 ShellDataGridAdapter가 toolbar, status, footer chrome을 소유하면서 opt-datagrid 엔진을 유지합니다.
A focused authoring workspace with toolbar, status, inspector, and review handoff kept in one route.
The editor is fixture-backed so the page stays deterministic, but it still behaves like a real authoring surface.
EditorWorkspace와 ShellEditorAdapter 조합으로 authoring chrome과 editor engine의 소유 경계를 분리합니다.
A dedicated approval view keeps proof, comments, and final decisions separate from the drafting workspace.
This draft packages the proof, narrative, and rollout context for the Apollo Ledger expansion committee.
The candidate app frame now uses the compact records workspace with a card-chrome grid, reducing scan time for renewal operators while keeping the existing data model intact.
Reviewers only need one pass: confirm the PASS proof hash, validate the ROI summary, and approve the rollout note for the commercial committee.
Evidence packet uses the latest proof hash.
Commercial ROI summary matches the finance review.
Reviewer comments are narrowed to one narrative note.
The fullscreen tool surface is intentionally outside the recipe screens so approval conversations are not constrained by list or detail layouts.
That separation is the key reason this example needs to exist beyond Builder Preview.
ShellFullscreenToolSurface로 승인/검수 단계를 recipe 화면 밖의 독립 surface로 분리합니다.
audit finding 수를 조절하면서 점수 변화를 확인하세요.
computeCompletenessScore로 audit finding을 7개 카테고리로 분류하고 0-100 가중 평균 점수를 산출합니다.
8개 라우트 파일 대비 하네스 rollout target 매칭 결과
computeShellCoverage로 라우트 파일 대비 하네스 채택률을 정적 분석하고 recipe별 breakdown과 미커버 경로를 표시합니다.
하네스 패턴 인덱스를 키워드로 검색합니다.
Collection browsing is the primary user action. Scan, filter, and bulk-operate on rows of data.
<ListWorkspace header={...} content={...} />Wraps opt-datagrid with harness chrome (card/plain styling), loading/empty/error states, and inspect snapshots.
<ShellDataGridAdapter rows={rows} columns={columns} getRowId={getRowId} empty={emptyState} status={statusFooter} />Required slot "header" in the list recipe.
<ListWorkspace header={<YourComponent />} />Required slot "content" in the list recipe.
<ListWorkspace content={<YourComponent />} />Optional slot "toolbar" in the list recipe.
<ListWorkspace toolbar={<YourComponent />} />Optional slot "filters" in the list recipe.
<ListWorkspace filters={<YourComponent />} />Optional slot "aside" in the list recipe.
<ListWorkspace aside={<YourComponent />} />Optional slot "footer" in the list recipe.
<ListWorkspace footer={<YourComponent />} />searchShellPatterns로 recipe, slot, policy, adapter, audit-rule, anti-pattern 패턴을 키워드 검색합니다.
실제 제품처럼 동작하는 4개 미니 앱. 여러 워크스페이스 레시피와 어댑터를 조합한 결과물을 직접 체험할 수 있습니다.
데이터 파이프라인의 상태, 실행 이력, 장애 대응을 한 흐름으로 다루는 콘솔입니다.
따뜻한 상단 내비게이션으로 이야기와 proof를 앞세운 공개 랜딩을 보여줍니다.
조밀한 sidebar 프레임으로 공개 페이지를 executive memo처럼 읽히게 만드는 예제입니다.
풀폭 앱 프레임과 강한 색면 분할로 캠페인성 공개 페이지가 어떻게 달라지는지 보여줍니다.