reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Mission
Core Concepts
Core Concepts
Recipes
Adapters
Build & Operate
Agent Contract
Builder Rollout
Builder Manager
Rollout Playbook
Components · Workspaces
ShellPage
ListWorkspace
DetailWorkspace
EditorWorkspace
DashboardWorkspace
LandingWorkspace
Components · Layout
ShellProvider
ShellAppShell
ShellLandingPage
ShellFullscreenToolSurface
Components · Navigation
ShellCollapsibleNav
ShellNavItem
ShellNavGroup
ShellNavAccordion
Components · Panels
ShellResizableLayout
ShellResizeHandle
ShellBottomBar
ShellFlyoutAside
ShellHeaderStackProvider
Components · Helpers
ShellSection
ShellStateBoundary
ShellSpacing
ShellPolicyToggler
Components · Adapters
ShellDataGridAdapter
ShellEditorAdapter
Oopt-shell
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Build & Operate
  1. Docs
  2. /
  3. Build & Operate
  4. /
  5. Builder Rollout

Builder Rollout

reopt Builder에 적용된 opt-shell rollout 범위, proof-aware governance, 운영 기준선을 정리합니다.

reopt design · Updated Jun 26, 2026

개요시작하기Mission핵심 개념RecipesAdaptersAgent ContractBuilder RolloutBuilder ManagerRollout Playbook

1. rollout 목표

Builder rollout의 목적은 "새 UI를 크게 만든다"가 아니라 "제품 화면 품질의 기준선을 고정한다"였습니다. 그래서 전체 Builder를 한 번에 옮기지 않고, manifest와 layout, 홈/템플릿 화면, playground adapter demo, 그리고 실제 data-sources/settings 화면 순으로 좁게 적용했습니다.

지금의 의미는 더 큽니다. 이 rollout은 opt-shell가 정말로 design harness engineering layer인지 증명하는 현재 운영 기준선입니다. 즉, 문서에서 말한 mission, recipe, agent contract가 실제 제품 화면, generated docs, `opt harness check/doctor`, activation gate에 그대로 반영되어야 합니다. 현재는 workspace-first runtime, project screen rollout, fullscreen-tool surface contract, proof-aware activation이 함께 닫힌 상태입니다.

최근에는 여기에 사용자-facing harness manager도 추가됐습니다. 이제 Builder 안에서 workspace가 여러 draft harness를 만들고, review 탭에서 compare summary와 approval state, 그리고 DESIGN.md alignment readiness를 함께 확인하고, Preview에서 current draft 기준 fresh proof를 캡처하고, demo fixture와 workspace live preview로 결과를 이해한 뒤, active harness를 직접 교체할 수 있습니다. activation 이후 이력은 detail 화면의 activity feed에서 timeline, learnings, exportable intelligence snapshot으로 바로 확인됩니다.

2. Builder manifest snapshot

현재 Builder는 넓은 content width, sidebar navigation, reduced motion, card chrome adapter를 기본 정책으로 둡니다. 이 defaults가 rollout 전반의 일관된 리듬을 만듭니다.

tsx
import { createShellApp } from "@reopt-ai/opt-shell/core";

export const builderHarness = createShellApp({
  id: "reopt-builder",
  label: "reopt design Builder",
  description:
    "Internal-first harness for the Builder experience, page rhythm, and shared state UX.",
  audience: "internal",
  routeGroups: [
    {
      id: "projects",
      label: "Projects",
      href: "/builder/projects",
    },
    {
      id: "templates",
      label: "Templates",
      href: "/builder/starters",
    },
  ],
  defaults: {
    density: "comfortable",
    contentWidth: "wide",
    navigationMode: "sidebar",
    motionPolicy: "reduced",
    stateLabels: {
      loading: "Builder 화면을 불러오는 중입니다.",
      emptyTitle: "표시할 항목이 없습니다",
      emptyDescription: "새 항목을 만들거나 현재 필터를 조정해 보세요.",
      errorTitle: "Builder 화면을 표시하지 못했습니다",
    },
    adapters: {
      datagrid: { chrome: "card" },
      editor: { chrome: "card" },
    },
  },
});

3. 현재 적용 범위

영역상태내용
Builder route group완료provider와 manifest를 layout에 연결해 앱 수준 정책을 고정했습니다.
ops layout완료app shell을 harness frame으로 감싸 sidebar 중심 구조를 정리했습니다.
Builder 홈 / Starters완료DashboardWorkspace와 ListWorkspace를 도입하고 ShellStateBoundary로 top-level Builder 화면을 전환했습니다.
DataGrid / Editor playground demo완료adapter 개념을 제품 화면 밖에서 먼저 검증했습니다.
Builder 실제 grid/editor 화면완료data-sources는 ListWorkspace + ShellDataGridAdapter, settings의 project brief는 EditorWorkspace + ShellEditorAdapter로 전환했습니다.
Builder project overview / audit완료project overview는 DetailWorkspace, audit는 ListWorkspace + shared state boundary로 정리했습니다.
Builder fullscreen tools완료blocks, theme, uxflow, page builder는 ShellFullscreenToolSurface로 공통 fullscreen contract를 공유합니다.
CLI / doctor / lint완료`opt harness check`, `opt harness doctor`, package lint와 generated contract docs가 workspace first, adapter before engine, fullscreen-tool surface contract, scaffold/docs drift 규칙을 같은 source로 검사합니다.
Builder harness manager완료workspace 1:N harness를 생성, 복제, review, preview, activate, archive하는 Builder management UI와 live runtime injection을 연결했습니다.

4. rollout이 닫은 것

대상적용 recipe증거
data-sourcesListWorkspaceShellDataGridAdapter가 filters, status, footer를 소유하고 grid engine은 유지합니다.
project settings / briefEditorWorkspaceShellEditorAdapter가 status, inspector, footer를 소유하고 editor engine은 유지합니다.
builder home / startersDashboardWorkspace / ListWorkspacehome과 templates가 workspace-first API를 사용하면서 top-level Builder 화면도 runtime recipe contract에 들어왔습니다.
project overview / auditDetailWorkspace / ListWorkspaceoverview와 audit가 canonical recipe로 분류되면서 project screens rollout이 실제 화면까지 확장됐습니다.
blocks / theme / uxflow / page builderShellFullscreenToolSurfacefullscreen tool 예외가 ad-hoc shell이 아니라 shared fullscreen surface contract 아래로 들어왔습니다.
builder layoutApp-level policybuilderHarness manifest가 width, density, motion, adapter chrome 정책을 중앙화합니다.
builder / harnessesWorkspace-owned management UIdraft vs active harness를 review tab의 approval + design alignment + fresh proof gate, preview tab의 live/demo comparison, activity 탭의 searchable timeline/learnings + export intelligence로 함께 검토할 수 있습니다.

5. rollout을 묶는 기준 문서

Mission

Builder rollout이 어떤 design harness engineering 역할을 증명하는지 설명합니다.

Recipes

각 실화면이 어떤 canonical recipe에 속하는지 먼저 고정합니다.

Agent Contract

`opt harness check/doctor`, lint와 proof gate가 실제로 강제하는 규약 문서입니다.

Builder Manager

Builder `/harnesses`에서 draft를 생성하고 review/approval/activation 하는 실제 사용 흐름입니다.

6. 현재 운영 기준선

영역현재 상태
proof-aware activationAPPROVED, design contract aligned, fresh PASS proof가 모두 닫혀야만 active runtime으로 승격됩니다.
docs and CLI coherencegenerated docs, `opt harness check`, `opt harness doctor`, scaffold guard matrix가 같은 registry와 operations contract를 바라봅니다.
searchable operational evidenceactivity intelligence가 append-only audit log에서 timeline, learnings, exportable snapshot을 파생해 운영 기준선으로 남깁니다.

workspace-first recipes

explicit recipe에서 시작해 ListWorkspace, EditorWorkspace 같은 상위 abstraction으로 올리는 방향을 확인합니다.

rollout playbook / proof

project screen rollout, fullscreen tool exception, proof-aware activation, scaffold/check 흐름을 어떤 순서로 운영할지 정리합니다.

PreviousAgent Contract에이전트가 opt-shell 화면을 생성하거나 수정할 때 지켜야 하는 우선순위와 definition of done입니다.Build & Operate
Go to Agent Contract
NextBuilder ManagerBuilder `/harnesses`에서 draft harness를 만들고 preview, review, approval, activation까지 다루는 실제 사용 흐름입니다.Build & Operate