feat: add native MiniApp shells and refresh workspace overview

.gitignore

@@ -62,6 +62,7 @@ src/web-ui/src/generated/api/
 # Tauri generated files
 apps/desktop/gen/
 src/apps/desktop/gen/
+src/apps/miniapp-shell/gen/
 src-tauri/gen/
 
 # Updater signing private key (never commit; pubkey is in tauri.conf.json)

Cargo.toml

@@ -3,6 +3,7 @@ members = [
     "src/apps/cli",
     "src/apps/sdk-host",
     "src/apps/desktop",
+    "src/apps/miniapp-shell",
     "src/apps/data-tools",
     "src/apps/server",
     "src/apps/relay-server",
@@ -14,6 +15,7 @@ members = [
     "src/crates/interfaces/app-server-protocol",
     "src/crates/interfaces/sdk-host",
     "src/crates/adapters/agent-runtime-ipc",
+    "src/crates/adapters/miniapp-ipc",
     "src/crates/assembly/agent-content",
     "src/crates/assembly/core",
     "src/crates/assembly/external-sources",
@@ -347,3 +349,12 @@ lto = false
 codegen-units = 16
 strip = false
 incremental = true
+
+# Build the window-only sidecar independently, including during Desktop dev.
+# Never inherit Desktop's large debug artifact or its unified dependency features.
+[profile.miniapp-shell]
+inherits = "release"
+opt-level = "z"
+lto = "fat"
+debug = false
+strip = true

OpenBitFun-Installer/src/i18n/generatedLocaleContract.ts

@@ -52,6 +52,12 @@ export type SharedI18nTerms = {
 
 export const SHARED_TERMS_BY_APP_LANGUAGE = {
   "en-US": {
+    "window": {
+      "minimize": "Minimize app window",
+      "maximize": "Maximize app window",
+      "restore": "Restore app window",
+      "close": "Close app window"
+    },
     "product": {
       "name": "OpenBitFun",
       "remote": "OpenBitFun Remote"
@@ -108,6 +114,12 @@ export const SHARED_TERMS_BY_APP_LANGUAGE = {
     }
   },
   "zh-CN": {
+    "window": {
+      "minimize": "最小化应用窗口",
+      "maximize": "最大化应用窗口",
+      "restore": "还原应用窗口",
+      "close": "关闭应用窗口"
+    },
     "product": {
       "name": "OpenBitFun",
       "remote": "OpenBitFun Remote"
@@ -164,6 +176,12 @@ export const SHARED_TERMS_BY_APP_LANGUAGE = {
     }
   },
   "zh-TW": {
+    "window": {
+      "minimize": "最小化應用視窗",
+      "maximize": "最大化應用視窗",
+      "restore": "還原應用視窗",
+      "close": "關閉應用視窗"
+    },
     "product": {
       "name": "OpenBitFun",
       "remote": "OpenBitFun Remote"

design-system/apps/design-lab/src/design-layout.css

@@ -1,17 +1,17 @@
 /* IBM Plex Mono, latin subset, as served by openbitfun.com. The product site sets both body and
    display to it, so the homepage follows; CJK still falls back to the platform sans below. */
 @font-face {
-  font-family: "IBM Plex Mono";
+  font-family: "IBM Plex Mono"; /* typography-audit: allow -- @font-face needs the literal bundled family name. */
   font-style: normal;
-  font-weight: 400;
+  font-weight: 400; /* typography-audit: allow -- @font-face selects this bundled font file by its literal weight. */
   font-display: swap;
   src: url("./assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: "IBM Plex Mono";
+  font-family: "IBM Plex Mono"; /* typography-audit: allow -- @font-face needs the literal bundled family name. */
   font-style: normal;
-  font-weight: 500;
+  font-weight: 500; /* typography-audit: allow -- @font-face selects this bundled font file by its literal weight. */
   font-display: swap;
   src: url("./assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
 }
@@ -20,9 +20,9 @@
    homepage headline, so 600 (SemiBold, the same OFL 1.1 family) is self-hosted here
    rather than letting the browser synthesise a fake bold from 400. */
 @font-face {
-  font-family: "IBM Plex Mono";
+  font-family: "IBM Plex Mono"; /* typography-audit: allow -- @font-face needs the literal bundled family name. */
   font-style: normal;
-  font-weight: 600;
+  font-weight: 600; /* typography-audit: allow -- @font-face selects this bundled font file by its literal weight. */
   font-display: swap;
   src: url("./assets/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
 }
@@ -194,7 +194,7 @@
   background: transparent;
   font-family: var(--_lab-label-font);
   font-size: var(--openbitfun-type-label-md-font-size);
-  font-weight: var(--openbitfun-font-weight-regular);
+  font-weight: var(--openbitfun-type-label-md-font-weight);
   line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
   letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing);
   text-decoration: none;
@@ -235,7 +235,7 @@
 .design-primary-navigation a[aria-current], .design-secondary-navigation a[aria-current] {
   color: var(--openbitfun-color-content-primary);
   background: var(--openbitfun-color-selection-surface);
-  font-weight: var(--openbitfun-font-weight-semibold);
+  font-weight: var(--openbitfun-type-label-selected-font-weight);
 }
 /* The group parent is the open branch, so it does not take a second filled row: the fill marks the
    chapter being read, and two stacked fills would read as one heavy block. Declared after the
@@ -290,12 +290,12 @@
   color: var(--openbitfun-color-content-caption);
   font-family: var(--_lab-label-font);
   font-size: var(--openbitfun-type-label-xs-font-size);
-  font-weight: var(--openbitfun-font-weight-regular);
+  font-weight: var(--openbitfun-type-label-md-font-weight);
   line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
   letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing);
   text-transform: none;
 }
-.page-kicker-index { color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-font-weight-semibold); font-variant-numeric: tabular-nums; }
+.page-kicker-index { color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-type-label-selected-font-weight); font-variant-numeric: tabular-nums; }
 .lab-shell :is(.page-heading, .component-detail-heading, .colors-heading-copy, .guide-hero) p { margin: 0; max-width: 46rem; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-md-font-size); line-height: var(--openbitfun-type-body-md-line-height); }
 .design-brand-page p, .design-foundation-section p, .design-component-usage p, .design-component-tokens p { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-md-font-size); line-height: var(--openbitfun-type-body-md-line-height); }
 .design-component-card :is(h2, h3) a { display: flex; gap: var(--openbitfun-space-3); align-items: center; justify-content: space-between; color: inherit; text-decoration: none; }
@@ -306,7 +306,7 @@
 .design-catalog-filters { display: flex; gap: var(--openbitfun-space-2); flex-wrap: wrap; padding-block: var(--openbitfun-space-3); margin-bottom: var(--openbitfun-space-8); }
 .design-catalog-filter { position: relative; padding: var(--openbitfun-space-2) var(--openbitfun-space-3); border: 0; border-radius: var(--_lab-radius-control); background: transparent; color: var(--openbitfun-color-content-muted); font: inherit; font-size: var(--openbitfun-type-body-sm-font-size); cursor: pointer; }
 .design-catalog-filter:hover { background: var(--openbitfun-component-button-fill-background); color: var(--openbitfun-color-content-secondary); }
-.design-catalog-filter[aria-pressed="true"] { background: var(--openbitfun-color-selection-surface); color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-font-weight-semibold); }
+.design-catalog-filter[aria-pressed="true"] { background: var(--openbitfun-color-selection-surface); color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-type-label-selected-font-weight); }
 .lab-page.design-component-library { display: block; padding-block: 0; min-height: calc(100dvh - var(--_lab-topbar-height)); }
 /* The directory keeps its own scroll region inside the rail: a route branch, then the long list,
    then the sibling routes, so neither the preview nor the rest of the section moves with it. */
@@ -317,13 +317,13 @@
 /* Categories are separated by space, not by a rule: the same reason the page index dropped its
    hairlines, and the caption weight already carries the grouping. */
 .design-library-group + .design-library-group { margin-top: var(--openbitfun-space-5); }
-.design-library-group h3 { margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-2); color: var(--openbitfun-color-content-caption); font-family: var(--_lab-label-font); font-size: var(--openbitfun-type-label-xs-font-size); font-weight: var(--openbitfun-font-weight-regular); letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing); }
+.design-library-group h3 { margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-2); color: var(--openbitfun-color-content-caption); font-family: var(--_lab-label-font); font-size: var(--openbitfun-type-label-xs-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing); }
 .design-library-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
 .design-library-link { position: relative; display: flex; align-items: center; gap: var(--openbitfun-space-3); min-height: var(--openbitfun-control-height-md); padding: var(--openbitfun-space-2); border-radius: var(--_lab-radius-control); color: var(--openbitfun-color-content-secondary); font-family: var(--_lab-label-font); font-size: var(--openbitfun-type-label-sm-font-size); line-height: var(--openbitfun-type-modifier-leading-ui-line-height); letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing); text-decoration: none; }
 .design-library-link > * { min-width: 0; }
 .design-library-link::before { counter-increment: lab-component; content: counter(lab-component, decimal-leading-zero); flex: none; color: var(--openbitfun-color-content-caption); font-variant-numeric: tabular-nums; }
 .design-library-link:hover { color: var(--openbitfun-color-content-primary); background: transparent; }
-.design-library-link[aria-current="page"] { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-selection-surface); font-weight: var(--openbitfun-font-weight-semibold); }
+.design-library-link[aria-current="page"] { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-selection-surface); font-weight: var(--openbitfun-type-label-selected-font-weight); }
 .design-library-link[aria-current="page"]::before { color: var(--openbitfun-color-content-primary); }
 .design-library-empty { padding: var(--openbitfun-space-3); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); }
 .design-library-content { min-width: 0; padding-block: var(--openbitfun-space-6) var(--openbitfun-space-12); }

design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx

@@ -209,7 +209,7 @@ function ReferenceDisclosure({ label, children }: { label: string; children: Rea
   );
 }
 
-const buttonVariants = ["outline", "fill", "secondary", "primary", "text"] as const;
+const buttonVariants = ["outline", "fill", "secondary", "primary", "quiet", "text"] as const;
 const iconButtonVariants = ["annotation", "quiet", "glass", "outline", "fill", "primary"] as const;
 const iconButtonSizes = ["xs", "standard", "sm", "md", "lg"] as const;
 const buttonInspectorStates = ["default", "hover", "active"] as const;

design-system/apps/design-lab/src/pages/OverviewPage.css

@@ -56,7 +56,7 @@
   max-width: 60rem;
   margin: 0;
   font-size: var(--openbitfun-type-display-fluid-title-font-size);
-  font-weight: var(--openbitfun-font-weight-semibold);
+  font-weight: var(--openbitfun-type-display-sm-font-weight);
   line-height: var(--openbitfun-type-display-fluid-title-line-height);
   letter-spacing: var(--openbitfun-type-display-fluid-title-letter-spacing);
   text-wrap: balance;
@@ -239,13 +239,13 @@
 /* The display PageHeader is sized in the page's own scale; inside the frame it follows the frame
    instead, so the window stays a legible picture at every width the page allows. */
 .design-home-preview-welcome-header [data-openbitfun-part="heading"] {
-  font-size: clamp(var(--openbitfun-font-size-2xl), 4.6cqi, var(--openbitfun-type-heading-welcome-font-size));
+  font-size: clamp(var(--openbitfun-type-heading-panel-font-size), 4.6cqi, var(--openbitfun-type-heading-welcome-font-size)); /* typography-audit: allow -- This scaled specimen keeps fluid container/viewport geometry between the established type scale bounds. */
   text-wrap: balance;
 }
 
 .design-home-preview-welcome-header [data-openbitfun-part="description"] {
   color: var(--openbitfun-color-content-secondary);
-  font-size: clamp(var(--openbitfun-font-size-sm), 2.2cqi, var(--openbitfun-type-page-intro-font-size));
+  font-size: clamp(var(--openbitfun-type-body-sm-font-size), 2.2cqi, var(--openbitfun-type-page-intro-font-size)); /* typography-audit: allow -- This scaled specimen keeps fluid container/viewport geometry between the established type scale bounds. */
 }
 
 .design-home-preview-composer {
@@ -282,8 +282,8 @@
   margin: 0;
   /* One step under the hero's sentence and two over the steps: the band is a closing note, not a
      second headline. Fluid so it grows with the window like the rest of the page's display type. */
-  font-size: clamp(var(--openbitfun-font-size-3xl), 2.4vw, var(--openbitfun-type-display-sm-font-size));
-  font-weight: var(--openbitfun-font-weight-semibold);
+  font-size: clamp(var(--openbitfun-font-size-3xl), 2.4vw, var(--openbitfun-type-display-sm-font-size)); /* typography-audit: allow -- This scaled specimen keeps fluid container/viewport geometry between the established type scale bounds. */
+  font-weight: var(--openbitfun-type-display-sm-font-weight);
   line-height: var(--openbitfun-type-display-sm-line-height);
   letter-spacing: var(--openbitfun-type-display-sm-letter-spacing);
   text-wrap: balance;
@@ -420,7 +420,7 @@
   font-size: var(--openbitfun-type-heading-section-font-size);
   font-weight: var(--openbitfun-type-heading-section-font-weight);
   line-height: var(--openbitfun-type-heading-section-line-height);
-  letter-spacing: var(--openbitfun-letter-spacing-tight);
+  letter-spacing: var(--openbitfun-type-display-sm-letter-spacing);
 }
 
 .design-home-footer-path h2 a {

design-system/apps/design-lab/src/styles.css

@@ -3028,7 +3028,7 @@ body,
   color: var(--openbitfun-color-content-caption);
   font-family: var(--openbitfun-type-label-xs-font-family);
   font-size: var(--openbitfun-type-label-xs-font-size);
-  font-weight: var(--openbitfun-font-weight-regular);
+  font-weight: var(--openbitfun-type-support-font-weight);
   letter-spacing: var(--openbitfun-type-label-xs-letter-spacing);
 }
 

design-system/apps/design-lab/vite/component-detail-contract.test.mjs

@@ -141,7 +141,7 @@ test("Button preview exposes the public presentation variants", async () => {
   assert.ok(declaration);
   assert.deepEqual(
     [...declaration[1].matchAll(/"([^"]+)"/g)].map((match) => match[1]),
-    ["outline", "fill", "secondary", "primary", "text"],
+    ["outline", "fill", "secondary", "primary", "quiet", "text"],
   );
 });
 

design-system/packages/ui/README.md

@@ -128,6 +128,15 @@ Keep `outline` for ordinary toolbar utilities and secondary choices. A neutral
 `tone="danger"` for destructive actions. Disabled and loading states belong to
 the same variant; do not switch a primary action to outline when it is disabled.
 
+Use `quiet` for compact toolbar text actions such as refresh, submit, and open
+in browser. It uses neutral secondary text, a transparent surface and border at
+rest, then primary text and a subtle border on hover or press, without an
+underline. It shares native focus, disabled, and loading behavior with other
+variants, uses the base corner radius and `space.3` inline padding, and keeps
+the selected size's height and typography. Use `text` for link-like emphasis.
+Consumers should select this variant instead of recreating its colors and
+hover border in product CSS.
+
 Button outline and text variants have transparent resting surfaces. Fill and
 primary state colors come from the theme's `component.button.*` contract, with
 variant-specific disabled content. The secondary variant keeps its opaque
@@ -750,6 +759,8 @@ Keep `Dialog` and `Sheet` mounted and set `open={false}` to close them. They ret
 
 PageHeader `md` uses the settings title with a primary 15px description; `display` uses the welcome heading and medium 17px introduction with a 12px gap. ActionCard uses 12px padding, section-heading typography (15px semibold), and a primary 13px single-line action description. Its inset outline does not inflate the 62px medium minimum height; longer content keeps the independent sibling actions and OverflowText behavior.
 
+`ActionCard actionPlacement="floating"` overlays its independent action buttons without reserving text width. It shares the circular glass material, pointer-hover and keyboard-focus reveal, touch visibility, and reduced-transparency fallback used by tab-close actions and Capsules. Cards use the larger standard icon-button size; tabs and Capsules retain the compact xs size. The default `inline` placement keeps actions in the layout. Each action can provide `loading`, `disabled`, `tone`, and an optional `tooltip` while the main card remains a separate native button.
+
 KeyHint uses 10px text on a 10px line and 2px block padding. StatusPill uses a 14px line with 2px block padding; opt into `emphasis` for short mode labels such as Ask, while ordinary status descriptions retain readable content colors. LauncherButton owns a 72px minimum width, 40px height, 10px side padding, 4px gap, 12px icon and 11px monospace text. Product shells may retain a deliberate compact greeting that expands into this geometry.
 
 Composer and ChatComposer share the 16px surface radius, 8px padding, 12px content gap, composer border, context tint, and composer shadow. Compact ChatComposer uses a 24px action track plus 8px padding on each side and two 1px borders (42px border-box height); expanded height follows editor content. The generic context shell has no duplicate outer border or surface inset. Queue and editor state remain owned by their existing slots and product adapters.