reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
QueryWorkspace
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

QueryWorkspace

Shell

Arrange schema, editor, and output in resizable panes with a collapsible sidebar, persisted layout, and toolbar, editor, and output slots.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { QueryWorkspace } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

편집 → 실행 → 문장별 결과

실제 DB에 연결하지 않는 모의 실행입니다. 아래 두 SELECT만 지원하며 600ms 후 결과를 표시합니다. 커서를 두 번째 문장으로 옮겨 실행하거나 실행 메뉴에서 전체 실행을 선택하세요. 실행 중 취소할 수 있고, 다른 SQL은 오류를 표시합니다.

실행 전

    • nameVARCHAR
Results

Results will appear here

Run the query to see what it returns.

⌘↵

Usage guidance

Best practices

  • QueryWorkspace owns only layout. The host connects SqlEditor's document and cursor, QueryToolbar's execution, and QueryOutputPane's result lifecycle.
  • Use sqlStatementAtOffset for cursor execution and splitSqlStatements for run-all. For run-all, keep each statement's result and specify whether execution stops or continues after an error.
  • Capture the editor document at execution and compare the successful snapshot with the current document to calculate runState. Editing or canceling during execution must not let an earlier response overwrite a later run.
  • Give the parent a height, and combine SqlEditor height="fill" with QueryResultsTable maxHeight="fill". Use a distinct storageKey for each workspace.
  • The integration example uses a 600ms mock runner that supports only two SELECT statements. In production, the host must connect an authenticated execution API, cancellation signals, result limits, and history storage.

Usage to avoid

  • The layout component does not include an execution engine. Hiding UI does not replace server-side authorization.

Usage examples

SQL workspace integration

QueryWorkspace

PropTypeDefaultDescription
sidebarReactNode—왼쪽 패널 내용
sidebarOpenboolean—제어형 사이드바 열림
onSidebarOpenChange(open: boolean) => void—사이드바 열림 변경
headerReactNode—툴바 위 — 탭이나 페이지 헤더
toolbarReactNode—툴바
editorRequiredReactNode—편집기
outputRequiredReactNode—출력
storageKeystring—패널 크기를 localStorage에 기억할 키
defaultSidebarSizenumber22사이드바 폭(%)
defaultEditorSizenumber40편집기 높이(%)
labelsQueryWorkspaceLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (2)QueryWorkspaceresizablebutton
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

QueryWorkspace 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

PreviousSaveQueryDialogNextReplayScrubber