refactor(vscode): apply devup-ui and extract webview as separate package#161
Open
erun1012 wants to merge 47 commits into
Open
refactor(vscode): apply devup-ui and extract webview as separate package#161erun1012 wants to merge 47 commits into
erun1012 wants to merge 47 commits into
Conversation
- extension.ts: activate() and WebviewViewProvider registration - webview-provider.ts: HTML loading and message routing - wasm-host.ts: WASM wrapper stubs (connect later) - export.ts: SVG save, PDF convert, MCP POST - messages.ts: shared Webview <-> Host message types - assets/icon.svg: Activity Bar icon
- package.json + tsconfig.json + vite.config.ts - index.html entry point - vscode.ts: acquireVsCodeApi shim and message type definitions - main.tsx: React root - global.css: VS Code CSS variable theming (dark/light auto)
- App.tsx: tab bar routing and HostMessage subscription - OrmEditor: code textarea + ERD SVG panel (300ms debounce) - OrmConverter: ORM selector buttons + conversion confirmation - MigrationDiff: 3-column side-by-side SQL view with copy buttons - Export: SVG / PDF / MCP export action cards
- root .vscode: run extension from monorepo root without opening apps/vscode directly - apps/vscode/.vscode: fallback config when opening apps/vscode folder directly
- remove Converter tab - ORM Editor: ReactFlow-style canvas with draggable model nodes - dot-grid background, pan by dragging canvas - bezier edges between related models - node color-coded per model name - click a node: slide-in right panel shows field list + export JSON - </> Code toggle: bottom drawer for raw ORM source input - client-side Prisma parser (other ORMs ready for WASM hookup) - CSS animations: slideInRight, slideInUp
- add DEFAULT_SCHEMAS for all 6 ORM types (Prisma, TypeORM, Drizzle, JPA, SQLAlchemy, GORM) - Prisma default: User/Profile/Post/Tag/TagOnPost with relations - switching ORM type button auto-loads that ORM's sample schema - canvas shows nodes immediately on open without user input
- remove ORM type buttons from toolbar (moved into code drawer) - fix click/drag bug: 5px threshold before drag activates, click and drag fully separated - add zoom: mouse wheel toward cursor, −/+/↺ buttons in toolbar - pan+zoom via transform wrapper (pan and scale refs stay fresh in event handlers) - detail panel: show ORM type badge next to model name - fix Prisma scalar detection: DateTime, Json, Bytes no longer flagged as relations - arrow marker on bezier edges (SVG markerEnd)
- floating pill-shaped nav bar at canvas bottom center - zoom −/+: 10% increments (range 25%–200%) - zoom % label: click to reset to 100% + re-center - fit icon: reset zoom and pan - hand icon: toggle pan-only mode (nodes not draggable/selectable, cursor changes) - theme icon: toggle dark/light mode (sun ↔ moon) - light theme: CSS variable overrides via [data-theme='light'] - theme applied globally via App root data-theme attribute - remove zoom controls from top toolbar (Code button only remains)
- global.css: Add CSS tokens (--node-bg, --node-border, --node-shadow, --canvas-dot, --edge-color, --edge-arrow, --navbar-bg) with proper light/dark values; light mode uses white nodes on #f0f0f0 canvas - OrmEditor: getEdges now uses FK scalar detection (fieldNameId/field_name_id) instead of bidirectional dedup so only owning models draw edges - OrmEditor: smart edge routing picks nearest horizontal sides and flips bezier control points for nodes on the left - OrmEditor: handleWheel separates ctrlKey/metaKey (pinch→zoom) from plain scroll (two-finger trackpad→pan) - OrmEditor: node/canvas styles use CSS tokens for theme-aware rendering - MigrationDiff: trigger generate_migration on first mount so Migration tab is pre-populated without needing to switch tabs first
- CSS variables (var()) don't work in SVG presentation attributes;
switch stroke/fill to style={} so --edge-color/--edge-arrow apply
- Edges now originate from the specific relation field row (y = field row center)
and land at the target node's header, matching the reference UI
- Add a small circle port dot at the source connection point
- Fix null-safety: check models.find() result before using
- Keep hasFk-based detection (FK-owning side only draws the edge)
Replace 3-column SQL view with file list + diff viewer layout: - Left panel (220px): parsed SQL files list with A/M/D/I kind badges and per-file +N/-N change counts, click to select - Right panel: diff viewer with line numbers, +/- gutter indicator, green highlight for ADD/CREATE lines, red for DROP/REMOVE lines - Top tab bar: PostgreSQL / MySQL / SQLite dialect selector with total files changed and +/- summary - SQL parser splits statements by table into SqlFile blocks, merges multiple statements for the same table, classifies ALTER sub-lines - Copy button on selected file header
…design
Migration tab:
- Move PostgreSQL/MySQL/SQLite selector from top row into left panel
header as a compact PG/MY/SQ toggle group
- Add dummy SQL data (full 5-table Prisma schema for all 3 dialects)
shown as PREVIEW badge when real WASM output is not available
- Show total files / +adds / -removes summary below file list header
Export tab:
- Redesign as file list + code preview layout (consistent with Migration)
- Left panel groups files: MIGRATION SQL, SCHEMA, DIAGRAM
- Files: migration.postgres.sql, migration.mysql.sql, migration.sqlite.sql,
schema.{orm-ext}, erd-diagram.svg, erd-diagram.pdf, schema.json
- Right panel: line-numbered code preview with lang badge, PREVIEW badge
for dummy content, copy button (with ✓ feedback), save button
- SVG file shows inline rendered diagram + source code below
- PDF file shows info panel describing the export
Replace runtime parseSql-based dummy with pre-built DUMMY_FILES arrays. parseSql was silently failing on empty input so nothing rendered. Now DUMMY_FILES[dialect] is used directly when real WASM SQL is absent, ensuring 6 files (users/profiles/posts/tags/tag_on_posts/indexes) with full diff lines always appear immediately on tab click.
preLaunchTask was running build:ext (webpack only), leaving webview with stale Vite output. Changed to npm run build which runs both webpack and cd webview && npm run build sequentially.
generateMigration stub returned SQL ending without a trailing newline, so parseSql split failed and returned []. With hasReal=true but files=[], the file list disappeared entirely. Returning '' keeps hasReal=false so DUMMY_FILES always render until real WASM is connected. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…te, multi-select drag Vs extension/gahui
…, inline edit - Lasso selection: drag on empty canvas draws a selection box and selects all nodes within it (lockMode OFF); pan mode unchanged (ON) - Group drag: dragging a selected node moves all selected nodes together using delta-based positioning - Layout presets (navbar): Grid, LR (left→right tree), TB (top→bottom tree) via Kahn BFS topological sort on FK edges; applies positions and resets pan/scale - Clickable edges: transparent hit-target path (strokeWidth=12) on each arrow; click opens edge panel with relation type toggle and delete - Inline editing (Prisma only): double-click model name, field name, or field type to edit in-place; Enter/blur commits, Escape cancels - Add Field button on node cards; × delete on detail panel field rows - modelsToPrisma serializer syncs canvas edits back to the code editor via fromEditRef guard to prevent parse/serialize re-entry loop Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
During rebase onto main, --theirs picked the eunseo version instead of gahui's. Explicitly checked out OrmEditor.tsx from origin/main. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Export tab left sidebar now has CONNECTIONS section below file list - Claude, OpenAI/GPT, Gemini, Slack, Notion, Jira rows - Icon + name + Connected/Connect status + chevron (Claude-style) - Click row → right panel shows connector setup form - AI Agent panel (✦ button at bottom of sidebar) - Chat interface with schema context auto-attached - Routes to Claude/GPT/Gemini for AI, Slack/Notion/Jira for actions - Extension host: new connectors.ts with SecretStorage + API proxies - Claude, OpenAI, Gemini API calls - Slack webhook, Notion page creation, Jira issue creation - Fixed SQL save button bug (was calling export_svg for postgres SQL) - Added export_sql, export_schema, exportSchemaJson handlers Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- exportSql/exportSchema/exportSvg/exportPdf: default save path now resolves to workspace folder instead of root (fixes EROFS error) - AI Agent chat input: always enabled; sending without a connected AI shows inline message "왼쪽에서 먼저 연결하세요" instead of disabled input Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace ✦ with 🤖 in chat area (empty state, loading, assistant bubbles) - AI Agent button: larger padding, gradient background, 700 weight, 12px font - Connected count badge shows "N 연결됨" text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@devup-ui/react)apps/vscode/webview/에서apps/extension-webview/독립 패키지로 분리package.json,webview-provider.ts)Test plan
apps/extension-webview에서npm run build→apps/vscode/dist/webview/생성 확인apps/vscode에서npm run build:ext→extension.js생성 확인