Blocks

An empty app shell: a collapsible sidebar with three navigation groups and an account card, and a header with notifications, a theme switch and the plan.

The app shell with a dashboard home on sample data: installed apps by source, the Builder prompt, organization resources with an activity mosaic, self-built apps, VeniAI apps and Marketplace templates, and a floating assistant launcher.

The chrome around a satellite app in both display modes: alone it draws its own rail and header; inside the Shell it keeps only its own navigation and page, titles the Shell's header through the mount bridge, and folds its navigation into a drawer on narrow screens.

A block document editor, UI only, composed from the doc-* components: text, headings, quotes, lists, to-dos, callouts, code, Mermaid diagrams, tables, images, bookmarks, LaTeX and dividers over a plain list of blocks, with a slash menu, @ and [[ mentions of people, groups, documents and collections, file attachments, a Present button that turns the document into a slideshow (the editor's own sample is five documents to choose from, each written to present), markdown shortcuts (# - 1. [] > --- ``` ), dropped and pasted images and tables, a presence bar with outlined peer blocks, and typed-in streaming text. The host owns the data, the image storage and who is present.

A Drive workspace on the app shell: the 240px Drive panel with its nav and storage meter, the overview stats with halftone meters, folder cards with the halftone texture, and the recent-files table with access pills, dashed row dividers and pagination. The page head's search live-filters the table.

The Drive workspace with the Tạo mới popover open: upload a file or a folder, anchored under the page head's primary button. Same shell, Drive panel and overview page as Drive.

The Drive workspace with nothing in it: four tilted folder cards on a shelf above the "Drive của bạn đang trống" invitation and its upload calls to action. Same shell and Drive panel as Drive.

The Drive workspace with a file row's action menu open, rising from the row's more button: open with, download, rename, duplicate, share, sort, details and trash. Same shell and overview page as Drive.

The Drive workspace with a folder card's action menu open: download, rename, duplicate, share, sort and trash, with the ⌥⌘E / ⌘C rồi ⌘V / Delete shortcut chips. Same shell and overview page as Drive.

The Drive workspace in the grid view: the same shell, Drive panel and stats as Drive, with the recent files as preview cards - a halftone-textured placeholder, the colored file-type tile and owner/access metadata.

The Builder workspace for an AI-generated form: a chat pane where describing the employee (or attaching a CV) fills the document on the right, previewed blank as the "Hồ sơ nhân sự" HR profile with its personal- and work-information sections, under a device/live-edit/publish toolbar. App shell folded to its icon rail.

The Builder workspace mid-generation: the chat thread runs the fill - the request bubble, the agent's progress checklist with its stop control - beside the "Hồ sơ nhân sự" document filling section by section, its pending fields still skeleton rules under a Đang điền... badge. App shell folded to its icon rail.

The Gitia org git workspace on the app shell: the organization Overview in the drive usage-card anatomy - repositories, git access tokens and your role as used / ceilings with a halftone meter and the free space footnote, the recent repositories as list rows with toned visibility and role pills under them, the clone base widget with its copy action and the screen's one Primary md New repository CTA - then the Repositories table in the drive file-table anatomy - search that live-filters the rows, visibility and role filter pills, mono clone rows, toned pills and the pager - the Repository in the drive file-table anatomy - the clone box, the branch pill and the Code / Commits / Settings tabs in the drive file-tab anatomy - the Browse tab in the drive file-table anatomy with the branch selector pill, breadcrumb path, directory rows and the halftone README, the Commits tab in the same anatomy with the author rows and the load-more, the Settings tab in the drive settings-card anatomy with its members upsert/remove and typed-name delete - and the git Tokens in the drive access-keys anatomy with vgt_ prefix pills, write/read toning, copy and the per-row revoke dialog that re-tones and re-stamps.

A three-pane email client on the app shell: folder sidebar, a searchable and filterable message list, and a reading pane with attachments, reply and forward. Sample mailbox from the Appia frame.

The whole email flow on the app shell: seven folders (inbox, sent, drafts, spam, trash, starred, archive) with their banners, bulk selection, the reading pane with its more-actions menu, a floating compose window with recipient suggestions, send success with undo and send failure with retry, inline forward, the full-screen attachment viewer and the raw-source page. Sample mailbox from the Appia flow.

The mail block in the checkbox-selected state: the bulk-action toolbar in the list header, the blue-50 tint on every row, and the first two conversations checked. Same three-pane inbox and sample mailbox as Mail.

The Payroll workspace on the app shell: the 240px Payroll panel and the Bảng lương page - the Excel dropzone with its upload configuration (choosing a file runs the upload, column detection and template matching in place), the issued pay periods and the countdown to the next scheduled send.

The whole create-and-send flow of a pay period on the Payroll shell: payslips created one by one with a running counter and a halftone progress bar, ready rows ticked and any of them opened in the zoomable payslip preview, then sent with per-row Đã gửi / Đang gửi / Chờ gửi states and, at the end, the Payroll page with the new period on top and a success notice.

The Payroll workspace before the first pay period: the same shell, panel and dropzone as Payroll, with the issued-periods card inviting the first Excel upload instead of listing periods.

The Lịch sử gửi page of the Payroll workspace: the issued pay periods with search, a year filter and a pager with a rows-per-page field, a Xem chi tiết action per period and the report export.

The payslip preview as a component: the email a payslip becomes, with zoom from 50% to 150% in 25% steps, previous and next payslip, PDF download and a stage that scrolls both ways, as the Payroll create flow and the zoom frames of the design use it.

The Mẫu thông báo page of the Payroll workspace: the email template editor - subject, sender, greeting, closing and signature with merge-field chips that insert at the caret - beside a live preview of the email for a sample employee, with the unsaved-changes bar.

The Payroll workspace mid-upload: the dropzone hero swaps to the progress view - upload with its byte count, column detection, template matching - with the three steps ticking off and the configuration bar dimmed. It starts running on load, then offers to create the payslips.

The Sandbox app on the app shell: the Sandbox menu item active in the sidebar and an empty page, the starting point for the Sandbox workspace.

The Sandbox Instances page on the app shell: the Compute, Automate and Developers sidebar, the instances head with its New instance action, the quota strip, the search and filter row, and the instances table with status badges, time-left, cost and per-row actions. The search live-filters the table.

The Sandbox Instances page for a full workspace of 48 instances: the quota strip, status tabs with search and filters, a dense paginated table with a selection checkbox on every row, and the floating bulk-action bar - extend, pause, save as template and kill - that selecting rows brings up.

The Sandbox Instances page as three cards: All instances with search, status tabs and rows carrying halftone time-left meters; Needs attention with the expiring and failed instances; and Compute usage with halftone meters, the 30-day instance-hours mosaic and the top template. The tabs and search filter the rows.

The Sandbox Instances concept page with a full workspace of 48 instances: a scrolling, paginated All instances list under segmented status tabs, Needs attention with its View all footer, and Compute usage with the next-invoice footer. The tabs, search and pager narrow the rows.

The Sandbox Instances page with the table narrowed beside a 472px detail panel: a terminal preview, the instance id and status, the lifetime card with its extend actions, owner, cost and region facts, recent activity and the open, pause and kill footer. Selecting a row shows that instance in the panel.

The Sandbox recipe editor on the app shell: the draft recipe with its outline of phases, secrets and reaches, and the Save & Build dialog open over it - provider choice, revision note, register-as-template with name and tag, and the leave-while-it-builds note.

The Sandbox Templates page on the app shell: the image, CPU and RAM an instance starts from. Source tabs with counts, search and filters, and the templates table with source badges, version, size, running instances and per-row actions, including a template mid-build. The tabs and search narrow the table.

The Sandbox workspace for one running instance: the head with Save as template, Pause and Kill, the lifetime banner with extend actions and an auto-pause switch, the live preview of the running app, the terminal, and the agent panel with its steps, a command awaiting approval and the prompt box.

The Storage admin Dashboard on the app shell: the platform usage panel in the drive usage-card anatomy - organizations, objects and stored as used / ceilings (39.1 / 47 GiB) with a halftone meter and the free space footnote, the stored-by-app halftone strip under them and an as-of stamp with refresh - then the By organization table in the drive file-table anatomy - quota filter pills that narrow the rows, toned quota pills with near-limit and at-limit states, app chips, a count pill and the pager - with the per-row edit-quota dialog that re-tones the pill and re-stamps the as-of time.

The Storage Access keys page on the app shell: the drive-anatomy table of S3 keys - name chips with mono ids, drive dates, active and revoked status pills and per-row revoke - under a count pill and live status filters, and the new-key dialog open at its show-once step - the secret revealed once with the copy-it-now warning.

The platform-admin mint flow for a given organization, as a two-step dialog on the Credentials page: a searchable organization picker and a registered-app picker, then the show-once created step - the secret, the key id and the gateway endpoint as mono chips with copy, under the only-time warning.

The Storage admin Credentials page on the app shell: the drive-anatomy table of every S3 access key on the platform - mono ids with copy, organization, drive dates and status pills under live status filters - and the revoke confirmation dialog open over it.

The Storage Objects page on the app shell: the search and prefix row, then the drive file-table - the head with its count pill and live type filters, rows with file-type chips, visibility pills, public badges, uploader avatars, drive dates and per-row link, publish and delete actions - and the pager. Search, prefix and the type filters narrow the table.

The Storage admin page for one organization: the back link, the org identity with its mono bucket chip and copy, the quota panel in the drive usage-card anatomy - stored against the ceiling with a warning meter and the lift-quota dialog - and the apps-in-this-bucket drive table with per-app share meters and a totals row.

The Storage admin Organizations page on the app shell: the drive-anatomy table under a count pill and live quota filter buttons - all, near limit, over quota - with app chips, toned quota pills, tabular objects and used, the search and the CSV export. Search and the pills narrow the table.

The Storage admin Over quota page on the app shell: the drive-anatomy incident table of organizations at or over their ceiling - writes refused with 507 - each row with its share meter in the negative tone and a raise-quota action, under the live count pill.

The Storage organization Overview page on the app shell: the By app card with chart-toned halftone share meters in the drive row anatomy, the bucket widget with its mono path chip, copy action and Upload call, and the usage card in the drive stats anatomy - stored bytes against the quota with a warning meter and the near-limit footnote, objects and free space. Copy buttons copy for real.

The Storage Objects page with the upload sheet open over it: the dashed dropzone, the visibility segmented control - organization, this app only, only me - and the staged upload progress from reserving through the byte counter to confirming, with cancel. The objects table carries the drive anatomy; dismissing the sheet reveals it.