diff --git a/design-system/packages/ui/src/components/Field/Field.meta.ts b/design-system/packages/ui/src/components/Field/Field.meta.ts
index f8e4a4820e..457515259d 100644
--- a/design-system/packages/ui/src/components/Field/Field.meta.ts
+++ b/design-system/packages/ui/src/components/Field/Field.meta.ts
@@ -8,6 +8,7 @@ export const fieldMeta = {
   props: [
     { name: "label", type: "ReactNode" },
     { name: "description", type: "ReactNode" },
+    { name: "error", type: "ReactNode" },
     { name: "labelAction", type: "ReactNode" },
     { name: "controlLeading", type: "ReactNode" },
     { name: "controlTrailing", type: "ReactNode" },
@@ -18,11 +19,12 @@ export const fieldMeta = {
     { defaultValue: "vertical", name: "orientation", type: "horizontal | vertical" },
     { name: "children", type: "ReactElement" },
   ],
-  states: ["default"],
+  states: ["default", "invalid"],
   tokens: [
     "color.accent.default",
     "color.content.primary",
     "color.content.muted",
+    "color.status.danger.content",
     "layout.field.rootGap",
     "layout.field.horizontalGap",
     "layout.field.horizontalGapWide",
diff --git a/design-system/packages/ui/src/components/Field/Field.module.css b/design-system/packages/ui/src/components/Field/Field.module.css
index bf3e94bd45..b079be22b1 100644
--- a/design-system/packages/ui/src/components/Field/Field.module.css
+++ b/design-system/packages/ui/src/components/Field/Field.module.css
@@ -91,6 +91,15 @@
     line-height: var(--bf-line-height-base);
   }
 
+  .error {
+    grid-column: 1 / -1;
+    color: var(--bf-color-status-danger-content);
+    font-family: var(--bf-font-family-control);
+    font-size: var(--bf-font-size-caption);
+    font-weight: var(--bf-font-weight-regular);
+    line-height: var(--bf-line-height-base);
+  }
+
   .control {
     display: inline-flex;
     min-inline-size: 0;
diff --git a/design-system/packages/ui/src/components/Field/Field.tsx b/design-system/packages/ui/src/components/Field/Field.tsx
index c22f4a6137..b637314f66 100644
--- a/design-system/packages/ui/src/components/Field/Field.tsx
+++ b/design-system/packages/ui/src/components/Field/Field.tsx
@@ -11,6 +11,7 @@ import styles from "./Field.module.css";
 
 interface FieldControlProps {
   "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
   id?: string;
   required?: boolean;
 }
@@ -27,6 +28,8 @@ export interface FieldProps
   controlTrailing?: ReactNode;
   controlWidth?: FieldControlWidth;
   description?: ReactNode;
+  /** Validation message rendered below the control; also marks the control invalid. */
+  error?: ReactNode;
   horizontalGap?: FieldHorizontalGap;
   label: ReactNode;
   labelAction?: ReactNode;
@@ -44,6 +47,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field({
   controlTrailing,
   controlWidth = "auto",
   description,
+  error,
   horizontalGap = "md",
   label,
   labelAction,
@@ -58,12 +62,15 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field({
   const descriptionId = description === undefined || description === null
     ? undefined
     : `${controlId}-description`;
-  const describedBy = [children.props["aria-describedby"], descriptionId]
+  const hasError = error !== undefined && error !== null && error !== false;
+  const errorId = hasError ? `${controlId}-error` : undefined;
+  const describedBy = [children.props["aria-describedby"], descriptionId, errorId]
     .filter((value): value is string => Boolean(value))
     .join(" ") || undefined;
   const isRequired = required || children.props.required === true;
   const control = cloneElement(children, {
     "aria-describedby": describedBy,
+    "aria-invalid": hasError ? true : children.props["aria-invalid"],
     id: controlId,
     required: isRequired || undefined,
   });
@@ -76,6 +83,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field({
       data-control-width={controlWidth}
       data-horizontal-gap={horizontalGap}
       data-label-width={labelWidth}
+      data-invalid={hasError ? "true" : undefined}
       data-orientation={orientation}
       data-required={isRequired ? "true" : "false"}
       ref={ref}
@@ -115,6 +123,11 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field({
           </span>
         )}
       </span>
+      {hasError && (
+        <span className={styles.error} data-bf-part="error" id={errorId}>
+          {error}
+        </span>
+      )}
     </div>
   );
 });
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts b/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
index 7491d0e314..ae361e8a80 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
@@ -11,6 +11,7 @@ export const searchFieldMeta = {
     { name: "placeholder", type: "string" },
     { name: "leadingIcon", type: "ReactNode" },
     { name: "shortcut", type: "ReactNode" },
+    { name: "trailing", type: "ReactNode" },
     { name: "clearLabel", type: "string" },
     { defaultValue: "sm", name: "size", type: "sm | md | lg" },
     { defaultValue: "false", name: "invalid", type: "boolean" },
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.tsx b/design-system/packages/ui/src/components/SearchField/SearchField.tsx
index 8986dccf68..d4968a4664 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.tsx
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.tsx
@@ -17,6 +17,8 @@ export interface SearchFieldProps
   onClear?: MouseEventHandler<HTMLButtonElement>;
   onSearch?: (value: string) => void;
   shortcut?: ReactNode;
+  /** Custom inline content before the clear action, e.g. match counts or a busy indicator. */
+  trailing?: ReactNode;
 }
 
 export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField({
@@ -27,6 +29,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
   onKeyDown,
   onSearch,
   shortcut,
+  trailing,
   ...props
 }, ref) {
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
@@ -46,6 +49,17 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
         />
       )
     : undefined;
+  const endAdornment = clearAction ?? (shortcut === undefined ? undefined : (
+    <span aria-hidden="true" className={styles.shortcut}>{shortcut}</span>
+  ));
+  const trailingContent = trailing === undefined && endAdornment === undefined
+    ? undefined
+    : (
+        <>
+          {trailing}
+          {endAdornment}
+        </>
+      );
 
   return (
     <span className={classNames(styles.root, className)} data-bf-component="search-field">
@@ -57,9 +71,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
         )}
         onKeyDown={handleKeyDown}
         ref={ref}
-        trailing={clearAction ?? (shortcut === undefined ? undefined : (
-          <span aria-hidden="true" className={styles.shortcut}>{shortcut}</span>
-        ))}
+        trailing={trailingContent}
         type="search"
       />
     </span>
diff --git a/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts b/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts
index 403121273c..376c927284 100644
--- a/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts
+++ b/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts
@@ -8,12 +8,13 @@ export const statusPillMeta = {
   props: [
     { name: "children", type: "ReactNode" },
     { name: "leading", type: "ReactNode" },
-    { defaultValue: "success", name: "tone", type: "neutral | info | success | warning | danger" },
+    { defaultValue: "success", name: "tone", type: "neutral | accent | info | success | warning | danger" },
   ],
-  states: ["neutral", "info", "success", "warning", "danger"],
+  states: ["neutral", "accent", "info", "success", "warning", "danger"],
   tokens: [
     "color.surface.subtle",
     "color.content.secondary",
+    "color.accent.default",
     "color.status.info.content",
     "color.status.info.surface",
     "color.status.success.content",
diff --git a/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css b/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css
index 3cbe09fe13..72632e4982 100644
--- a/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css
+++ b/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css
@@ -46,6 +46,11 @@
     background: var(--bf-color-surface-subtle);
   }
 
+  .root[data-tone="accent"] {
+    color: var(--bf-color-accent-default);
+    background: color-mix(in srgb, var(--bf-color-accent-default) 12%, transparent);
+  }
+
   .root[data-tone="info"] {
     color: var(--bf-color-status-info-content);
     background: var(--bf-color-status-info-surface);
diff --git a/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx b/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx
index 63038f90d5..97ddd6b612 100644
--- a/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx
+++ b/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx
@@ -6,7 +6,13 @@ import {
 import { classNames } from "../../internal/classNames";
 import styles from "./StatusPill.module.css";
 
-export type StatusPillTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type StatusPillTone =
+  | "neutral"
+  | "accent"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
 
 export interface StatusPillProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
diff --git a/design-system/packages/ui/tests/field.test.mjs b/design-system/packages/ui/tests/field.test.mjs
index b2a387d0fb..4dfbf9911f 100644
--- a/design-system/packages/ui/tests/field.test.mjs
+++ b/design-system/packages/ui/tests/field.test.mjs
@@ -28,6 +28,23 @@ test("Field associates label, description, and required state with its control",
   assert.match(markup, /required=""/);
 });
 
+test("Field renders a validation message wired to the control accessibility contract", () => {
+  const markup = renderToStaticMarkup(
+    createElement(Field, {
+      error: "Name is already taken",
+      label: "Project name",
+    }, createElement(Input, {
+      id: "project-name",
+    })),
+  );
+
+  assert.match(markup, /data-invalid="true"/);
+  assert.match(markup, /aria-invalid="true"/);
+  assert.match(markup, /data-bf-part="error"[^>]*id="project-name-error"/);
+  assert.match(markup, /aria-describedby="project-name-error"/);
+  assert.match(markup, /Name is already taken/);
+});
+
 test("Field exposes horizontal layout independently from its control", () => {
   const markup = renderToStaticMarkup(
     createElement(Field, {
diff --git a/design-system/packages/ui/tests/search-field.test.mjs b/design-system/packages/ui/tests/search-field.test.mjs
index 3eea9eb3c8..97b46b04dc 100644
--- a/design-system/packages/ui/tests/search-field.test.mjs
+++ b/design-system/packages/ui/tests/search-field.test.mjs
@@ -33,6 +33,24 @@ test("SearchField source preserves consumer key handling before Enter submission
   assert.match(source, /onSearch\?\.\(event\.currentTarget\.value\)/);
 });
 
+test("SearchField renders custom trailing content before the clear action", () => {
+  const markup = renderToStaticMarkup(
+    createElement(SearchField, {
+      "aria-label": "Search",
+      clearLabel: "Clear search",
+      onClear: () => {},
+      trailing: createElement("span", { "data-part": "matches" }, "1 / 5"),
+      value: "query",
+    }),
+  );
+
+  const trailingIndex = markup.indexOf('data-part="matches"');
+  const clearIndex = markup.indexOf('aria-label="Clear search"');
+  assert.ok(trailingIndex >= 0);
+  assert.ok(clearIndex >= 0);
+  assert.ok(trailingIndex < clearIndex);
+});
+
 test("SearchField exposes a labeled clear action without hiding it from assistive technology", () => {
   const markup = renderToStaticMarkup(
     createElement(SearchField, {
diff --git a/design-system/packages/ui/tests/status-pill.test.mjs b/design-system/packages/ui/tests/status-pill.test.mjs
index 25d196437c..0d3849bf07 100644
--- a/design-system/packages/ui/tests/status-pill.test.mjs
+++ b/design-system/packages/ui/tests/status-pill.test.mjs
@@ -14,6 +14,12 @@ test("StatusPill exposes semantic tone and independent label anatomy", () => {
   assert.match(markup, />Review</);
 });
 
+test("StatusPill renders the brand accent tone", () => {
+  const markup = renderToStaticMarkup(createElement(StatusPill, { tone: "accent" }, "Builtin"));
+
+  assert.match(markup, /data-tone="accent"/);
+});
+
 test("StatusPill keeps its optional leading indicator decorative", () => {
   const markup = renderToStaticMarkup(createElement(
     StatusPill,
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index 2ae8960adf..04ec73c2d1 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -524,24 +524,24 @@
     flex: 1;
     min-width: 0;
 
-    .bitfun-input-container {
+    &[data-bf-component='input'] {
       height: 18px;
       min-height: 18px;
       padding: 0 6px;
       border-radius: 4px;
       border-color: var(--bf-appearance-token-border-subtle);
       background: color-mix(in srgb, var(--bf-appearance-token-element-bg-soft) 55%, transparent);
+
+      &:focus-within {
+        border-color: color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 35%, var(--bf-appearance-token-border-subtle));
+        box-shadow: 0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 12%, transparent);
+      }
     }
 
-    .bitfun-input {
+    input {
       font-size: var(--bf-appearance-token-font-size-xs);
       line-height: 16px;
     }
-
-    .bitfun-input-container:focus-within {
-      border-color: color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 35%, var(--bf-appearance-token-border-subtle));
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 12%, transparent);
-    }
   }
 
   // Reads as the next row of the list rather than a floating footer: same left
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
index 7e1f558f86..ecc78e2f43 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
@@ -253,12 +253,12 @@
     align-items: stretch;
   }
 
-  &__path-input .bitfun-input-container,
+  &__path-input[data-bf-component='input'],
   &__description .bitfun-textarea__field {
     border-radius: 8px;
   }
 
-  &__path-input .bitfun-input-container {
+  &__path-input[data-bf-component='input'] {
     height: 32px;
     background: color-mix(in srgb, var(--bf-appearance-token-element-bg-base) 72%, transparent);
   }
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
index baf0627ecc..ba6061ea3b 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
@@ -17,6 +17,7 @@ import {
   IconButton,
   Input,
   PageHeader,
+  StatusPill,
   Switch,
   TabGroup,
   type TabGroupItem,
@@ -41,7 +42,7 @@ import {
 } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { getLocaleFallbackChain, type LocaleId } from '@/infrastructure/i18n/presets';
-import { Badge, Select } from '@/component-library';
+import { Select } from '@/component-library';
 import { confirmWarning } from '@/infrastructure/confirm-dialog';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
 import { api } from '@/infrastructure/api/service-api/ApiClient';
@@ -956,7 +957,7 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
   ) => (
     <div className="bitfun-remote-connect__connected" data-bf-component="remote-connect-dialog" data-bf-part="body" data-bf-state="connected">
       <div className="bitfun-remote-connect__status" data-bf-component="remote-connect-dialog" data-bf-part="status" data-bf-state="connected">
-        <Badge variant="success">{t('remoteConnect.stateConnected')}</Badge>
+        <StatusPill tone="success">{t('remoteConnect.stateConnected')}</StatusPill>
         {username && (
           <span className="bitfun-remote-connect__peer-username">
             {t('accountLogin.username')}: {username}
@@ -1014,13 +1015,13 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
                   </div>
                 </div>
               )}
-              <Badge variant={qrCopied ? 'success' : 'warning'}>
+              <StatusPill tone={qrCopied ? 'success' : 'warning'}>
                 {qrCopied
                   ? t('remoteConnect.urlCopied')
                   : connectionOwner === 'bot'
                     ? t('remoteConnect.stateWaitingBot')
                     : t('remoteConnect.stateWaiting')}
-              </Badge>
+              </StatusPill>
             </div>
           )}
           <div className="bitfun-remote-connect__pairing-details">
@@ -1052,11 +1053,11 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
             )}
             {!connectionResult.qr_url && (
               <>
-                <Badge variant="warning">
+                <StatusPill tone="warning">
                   {connectionOwner === 'bot'
                     ? t('remoteConnect.stateWaitingBot')
                     : t('remoteConnect.stateWaiting')}
-                </Badge>
+                </StatusPill>
                 <p className="bitfun-remote-connect__hint">
                   {connectionOwner === 'bot'
                     ? t('remoteConnect.botHint')
@@ -1228,7 +1229,7 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
             </p>,
           )}
           <div className="bitfun-remote-connect__status" data-bf-component="remote-connect-dialog" data-bf-part="status" data-bf-state="connected">
-            <Badge variant="success">{t('remoteConnect.stateConnected')}</Badge>
+            <StatusPill tone="success">{t('remoteConnect.stateConnected')}</StatusPill>
           </div>
           <div className="bitfun-remote-connect__mode-setting">
             <span data-active={!botVerboseMode ? 'true' : undefined}>
@@ -1555,7 +1556,7 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
             {statusDetail}
           </span>
         )}
-        <Badge variant={statusPositive ? 'success' : 'neutral'}>{statusLabel}</Badge>
+        <StatusPill tone={statusPositive ? 'success' : 'neutral'}>{statusLabel}</StatusPill>
       </span>
       <ChevronRight className="bitfun-remote-connect__overview-action-chevron" size={16} aria-hidden="true" />
     </button>
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.tsx
index 32908aff05..9ed7920333 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@bitfun/ui';
+import { Button, StatusPill } from '@bitfun/ui';
 import React from 'react';
-import { Badge } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import './RemoteConnectDisclaimer.scss';
 
@@ -21,9 +20,9 @@ export const RemoteConnectDisclaimerContent: React.FC<RemoteConnectDisclaimerCon
   return (
     <div data-bf-component="remote-connect-disclaimer" data-bf-part="root" className="bitfun-remote-disclaimer">
       <div className="bitfun-remote-disclaimer__meta" data-bf-component="remote-connect-disclaimer" data-bf-part="meta">
-        <Badge variant={agreed ? 'success' : 'warning'}>
+        <StatusPill tone={agreed ? 'success' : 'warning'}>
           {t(agreed ? 'remoteConnect.disclaimerStatusAgreed' : 'remoteConnect.disclaimerStatusPending')}
-        </Badge>
+        </StatusPill>
       </div>
 
       <p className="bitfun-remote-disclaimer__text" data-bf-component="remote-connect-disclaimer" data-bf-part="intro">{t('remoteConnect.disclaimerIntro')}</p>
diff --git a/src/web-ui/src/app/components/panels/BranchSelectModal.tsx b/src/web-ui/src/app/components/panels/BranchSelectModal.tsx
index f3e974afcc..1ac2e5885c 100644
--- a/src/web-ui/src/app/components/panels/BranchSelectModal.tsx
+++ b/src/web-ui/src/app/components/panels/BranchSelectModal.tsx
@@ -3,14 +3,14 @@
  * Supports selecting existing branches or creating new branches
  */
 
-import { Button, Input } from '@bitfun/ui';
+import { Button, IconButton, Input } from '@bitfun/ui';
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
-import { GitBranch, Plus } from 'lucide-react';
+import { GitBranch, Plus, X } from 'lucide-react';
 import { createLogger } from '@/shared/utils/logger';
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { Checkbox, PopupCloseButton, PresenceBoundary, PRESENCE_BOUNDARY_MIN_EXIT_MS } from '@/component-library';
+import { Checkbox, PresenceBoundary, PRESENCE_BOUNDARY_MIN_EXIT_MS, Tooltip } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { gitAPI, type GitBranch as GitBranchType } from '../../../infrastructure/api/service-api/GitAPI';
 import './BranchSelectModal.scss';
@@ -200,14 +200,17 @@ export const BranchSelectModal: React.FC<BranchSelectModalProps> = ({
       onClick={onClose}
     >
       <div data-bf-component="branch-select-modal" data-bf-part="root" className="branch-select-dialog" onClick={(e) => e.stopPropagation()}>
-        <PopupCloseButton
-          className="branch-select-dialog__close"
-          data-bf-component="branch-select-modal"
-          data-bf-part="close"
-          onClick={onClose}
-          tooltip={tCommon('actions.close')}
-          aria-label={tCommon('actions.close')}
-        />
+        <Tooltip content={tCommon('actions.close')}>
+          <IconButton
+            className="branch-select-dialog__close"
+            data-bf-component="branch-select-modal"
+            data-bf-part="close"
+            icon={<X />}
+            onClick={onClose}
+            size="md"
+            aria-label={tCommon('actions.close')}
+          />
+        </Tooltip>
 
         <div data-bf-component="branch-select-modal" data-bf-part="header" className="branch-select-dialog__header">
           <h2 className="branch-select-dialog__title">{retainedDisplay.title}</h2>
diff --git a/src/web-ui/src/app/components/panels/FilesPanel.tsx b/src/web-ui/src/app/components/panels/FilesPanel.tsx
index a551dd4749..15b24d74b4 100644
--- a/src/web-ui/src/app/components/panels/FilesPanel.tsx
+++ b/src/web-ui/src/app/components/panels/FilesPanel.tsx
@@ -3,10 +3,10 @@
  * Displays the file explorer for the current workspace
  */
 
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, SearchField, StatusPill } from '@bitfun/ui';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Search as SearchIcon, CaseSensitive, Regex, WholeWord, List } from 'lucide-react';
+import { Search as SearchIcon, CaseSensitive, Regex, WholeWord, List, Loader2 } from 'lucide-react';
 import {
   FileExplorer,
   getNewItemParentPath,
@@ -14,7 +14,8 @@ import {
   type FileExplorerToolbarHandlers,
 } from '@/tools/file-system';
 import { useExplorerSearch } from '@/tools/file-explorer';
-import { Search, Tooltip, Badge } from '@/component-library';
+import { Tooltip } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { confirmWarning } from '@/infrastructure/confirm-dialog';
 import { FileSearchResults } from '@/tools/file-system/components/FileSearchResults';
 import { workspaceAPI } from '@/infrastructure/api';
@@ -66,7 +67,7 @@ function formatSpeed(bytesPerSec: number): string {
   return `${formatBytes(bytesPerSec)}/s`;
 }
 
-function getIndexPhaseBadgeVariant(phase?: WorkspaceSearchRepoPhase): 'neutral' | 'warning' | 'success' | 'error' | 'info' {
+function getIndexPhaseBadgeVariant(phase?: WorkspaceSearchRepoPhase): 'neutral' | 'warning' | 'success' | 'danger' | 'info' {
   switch (phase) {
     case 'ready':
       return 'success';
@@ -79,7 +80,7 @@ function getIndexPhaseBadgeVariant(phase?: WorkspaceSearchRepoPhase): 'neutral'
     case 'preparing':
       return 'info';
     case 'limited':
-      return 'error';
+      return 'danger';
     default:
       return 'neutral';
   }
@@ -123,6 +124,7 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
   onExplorerToolbarApi,
 }) => {
   const { t } = useTranslation('panels/files');
+  const { t: tComponents } = useI18n('components');
   const { workspace: currentWorkspace } = useCurrentWorkspace();
   
   const panelRef = useRef<HTMLDivElement>(null);
@@ -1065,14 +1067,17 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
       <div className="bitfun-files-panel__content" data-bf-component="files-panel" data-bf-part="content">
         {workspacePath && viewMode === 'search' && (
           <div className="bitfun-files-panel__search" data-bf-component="files-panel" data-bf-part="search" data-bf-search-mode={searchMode}>
-            <Search
+            <SearchField
               placeholder={t('search.placeholder')}
+              aria-label={t('search.placeholder')}
               value={searchQuery}
-              onChange={(val) => setSearchQuery(val)}
-              onClear={handleClearSearch}
-              clearable
-              size="small"
-              loading={isSearching}
+              onValueChange={(val) => setSearchQuery(val)}
+              clearLabel={searchQuery ? tComponents('search.clear') : undefined}
+              onClear={searchQuery ? handleClearSearch : undefined}
+              size="sm"
+              leadingIcon={isSearching
+                ? <Loader2 className="bitfun-files-panel__search-spinner" size={14} aria-hidden />
+                : <SearchIcon size={14} aria-hidden />}
             />
             <div className="bitfun-files-panel__search-toolbar" data-bf-component="files-panel" data-bf-part="searchToolbar">
               <div className="bitfun-files-panel__search-modes">
@@ -1156,25 +1161,25 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
               {showContentSearchMetadata && contentSearchMetadata && (
                 <div className="bitfun-files-panel__search-backend">
                   <div className="bitfun-files-panel__search-backend-badges">
-                    <Badge variant={getSearchBackendBadgeVariant(contentSearchMetadata)}>
+                    <StatusPill tone={getSearchBackendBadgeVariant(contentSearchMetadata)}>
                       {contentSearchBackendLabel}
-                    </Badge>
-                    <Badge variant={getIndexPhaseBadgeVariant(contentSearchMetadata.repoPhase as WorkspaceSearchRepoPhase)}>
+                    </StatusPill>
+                    <StatusPill tone={getIndexPhaseBadgeVariant(contentSearchMetadata.repoPhase as WorkspaceSearchRepoPhase)}>
                       {t(`search.index.phase.${contentSearchMetadata.repoPhase}`, {
                         defaultValue: contentSearchMetadata.repoPhase,
                       })}
-                    </Badge>
+                    </StatusPill>
                     {contentSearchMetadata.baseAdvanceInProgress ? (
-                      <Badge variant="warning">
+                      <StatusPill tone="warning">
                         {t('search.index.badges.baseAdvancing')}
-                      </Badge>
+                      </StatusPill>
                     ) : null}
                     {contentSearchMetadata.workspaceProbePending ? (
                       // Neutral, not warning: the reconcile clears itself and the results are still
                       // usable — they just describe the worktree from a moment ago.
-                      <Badge variant="neutral">
+                      <StatusPill tone="neutral">
                         {t('search.index.badges.probePending')}
-                      </Badge>
+                      </StatusPill>
                     ) : null}
                   </div>
                   <div className="bitfun-files-panel__search-backend-summary">
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss
index b3776e7e13..67314e4385 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss
@@ -8,23 +8,6 @@
 
   &__search {
     width: 100%;
-
-    .search__wrapper {
-      background: transparent;
-      // Use the same border variable as the left file tree search
-      border: 1px solid var(--bf-appearance-token-border-base);
-      
-      &:hover {
-        border-color: var(--bf-appearance-token-border-medium);
-        border-style: solid;
-      }
-    }
-
-    &.search--focused .search__wrapper {
-      border-style: solid;
-      border-color: var(--bf-appearance-token-color-accent-500);
-      background: var(--bf-appearance-token-color-accent-50);
-    }
   }
 
   &__count {
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.tsx b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.tsx
index 9645fea4db..ffd8e32082 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.tsx
@@ -1,11 +1,12 @@
 /**
  * SearchFilter component.
- * Search filter in mission control using the component library Search.
+ * Search filter in mission control using the design system SearchField.
  */
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Search } from '@/component-library';
+import { Search as SearchIcon } from 'lucide-react';
+import { SearchField } from '@bitfun/ui';
 import './SearchFilter.scss';
 
 export interface SearchFilterProps {
@@ -29,23 +30,26 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({
   autoFocus = true,
 }) => {
   const { t } = useTranslation('components');
-  const countText = value 
-    ? `${matchCount} / ${totalCount}` 
+  const countText = value
+    ? `${matchCount} / ${totalCount}`
     : t('canvas.filesCount', { count: totalCount });
 
   return (
     <div data-bf-component="content-canvas" data-bf-part="searchFilter" className="canvas-search-filter">
-      <Search
+      <SearchField
         value={value}
-        onChange={onChange}
+        onValueChange={onChange}
         placeholder={t('canvas.searchPlaceholder')}
+        aria-label={t('canvas.searchPlaceholder')}
+        leadingIcon={<SearchIcon size={15} aria-hidden />}
         autoFocus={autoFocus}
-        clearable
-        size="medium"
+        size="md"
         className="canvas-search-filter__search"
-        suffixContent={
+        trailing={
           <span className="canvas-search-filter__count">{countText}</span>
         }
+        clearLabel={value ? t('search.clear') : undefined}
+        onClear={value ? () => onChange('') : undefined}
       />
     </div>
   );
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
index 8e6a4016de..7f8901d1b8 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
@@ -724,74 +724,22 @@
   }
 
   &__tabs {
+    display: flex;
+    flex-direction: column;
     min-height: 0;
     flex: 1;
+  }
 
-    &.bitfun-tabs,
-    .bitfun-tabs__content,
-    .bitfun-tab-pane {
-      min-height: 0;
-      height: 100%;
-    }
-
-    .bitfun-tabs__nav {
-      padding: 8px 12px 0;
-      border-bottom: 1px solid var(--bf-appearance-token-border-base);
-      background: transparent;
-    }
-
-    .bitfun-tabs__nav-list {
-      gap: 2px;
-      padding: 0;
-      border-radius: 0;
-      background: transparent;
-    }
-
-    .bitfun-tabs__tab {
-      position: relative;
-      min-height: 30px;
-      padding: 0 10px 8px;
-      border: 0;
-      border-radius: 0;
-      background: transparent;
-      color: var(--bf-appearance-token-color-text-secondary);
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0;
-      box-shadow: none;
-
-      &::after {
-        content: '';
-        position: absolute;
-        right: 10px;
-        bottom: -1px;
-        left: 10px;
-        height: 2px;
-        border-radius: 2px;
-        background: transparent;
-      }
-
-      &:hover {
-        color: var(--bf-appearance-token-color-text-primary);
-        background: color-mix(in srgb, var(--bf-appearance-token-element-bg-soft) 56%, transparent);
-      }
-
-      &.active,
-      &.bitfun-tabs__tab--active,
-      &[aria-selected='true'] {
-        color: var(--bf-appearance-token-color-text-primary);
-        background: transparent;
-
-        &::after {
-          background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 72%, var(--bf-appearance-token-color-text-primary));
-        }
-      }
-    }
+  &__tab-bar {
+    flex: 0 0 auto;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--bf-appearance-token-border-base);
   }
 
   &__tab-content {
     box-sizing: border-box;
-    height: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
     padding: 12px 14px;
   }
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
index ca235bf627..f6234ea977 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, Input as DesignInput, Modal } from '@bitfun/ui';
+import { Button, Field, IconButton, Input as DesignInput, Modal, TabGroup } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ChevronDown,
@@ -26,7 +26,7 @@ import {
   UserRound,
   XCircle,
 } from 'lucide-react';
-import { Input, MarkdownRenderer, Select, Tabs, TabPane, Tooltip, type SelectOption } from '@/component-library';
+import { MarkdownRenderer, Select, Tooltip, type SelectOption } from '@/component-library';
 import { reviewPlatformAPI, systemAPI, type ReviewPlatformAccount, type ReviewPlatformAuthChallenge, type ReviewPlatformCiItem, type ReviewPlatformCiLog, type ReviewPlatformCommit, type ReviewPlatformDetailSection, type ReviewPlatformFile, type ReviewPlatformPagination, type ReviewPlatformPullRequest, type ReviewPlatformPullRequestDetail, type ReviewPlatformPullRequestDetailPage, type ReviewPlatformRemote, type ReviewPlatformRepositoryRef, type ReviewPlatformThread, type ReviewPlatformWorkspaceSnapshot } from '@/infrastructure/api';
 import { createLogger } from '@/shared/utils/logger';
 import { notificationService } from '@/shared/notification-system';
@@ -2254,14 +2254,19 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                 </div>
               </div>
 
-              <Tabs
-                activeKey={activeTab}
-                onChange={(key) => setActiveTab(key as DetailTab)}
-                type="pill"
-                size="small"
-                className="review-platform__tabs"
-              >
-                <TabPane tabKey="overview" label="Overview">
+              <div className="review-platform__tabs" data-bf-component="review-platform" data-bf-part="tabs">
+                <div className="review-platform__tab-bar" data-bf-component="review-platform" data-bf-part="tabBar">
+                  <TabGroup
+                    items={[
+                      { value: 'overview', label: 'Overview' },
+                      { value: 'changes', label: 'Changes' },
+                      { value: 'commits', label: 'Commits' },
+                    ]}
+                    value={activeTab}
+                    onValueChange={(value) => setActiveTab(value as DetailTab)}
+                  />
+                </div>
+                {activeTab === 'overview' && (
                   <div className="review-platform__tab-content review-platform__overview-scroll" data-bf-component="review-platform" data-bf-part="tabContent">
                     <section className="review-platform__detail-section" data-bf-component="review-platform" data-bf-part="section">
                       <div className="review-platform__detail-section-heading" data-bf-component="review-platform" data-bf-part="sectionHeading">
@@ -2441,9 +2446,9 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                       {renderDetailPagination('Comments', reviewPage, reviewThreads.length, setReviewPageIndex)}
                     </section>
                   </div>
-                </TabPane>
+                )}
 
-                <TabPane tabKey="changes" label="Changes">
+                {activeTab === 'changes' && (
                   <section className="review-platform__tab-content review-platform__file-list" data-bf-component="review-platform" data-bf-part="fileList">
                     {detailError && (
                       <div className="review-platform__detail-error">
@@ -2511,9 +2516,9 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                     )}
                     {renderDetailPagination('Files', changePage, changedFiles.length, setChangePageIndex)}
                   </section>
-                </TabPane>
+                )}
 
-                <TabPane tabKey="commits" label="Commits">
+                {activeTab === 'commits' && (
                   <section className="review-platform__tab-content review-platform__timeline">
                     <div className="review-platform__section-heading">
                       <span>Commits</span>
@@ -2547,9 +2552,8 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                     )}
                     {renderDetailPagination('Commits', commitPage, commits.length, setCommitPageIndex)}
                   </section>
-                </TabPane>
-
-              </Tabs>
+                )}
+              </div>
             </>
           )}
         </main>
@@ -2584,20 +2588,19 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
               {authError && <span className="review-platform__gh-auth-error">{authError}</span>}
             </div>
           ) : (
-            <Input
-              type="password"
-              autoComplete="off"
-              autoFocus
-              label="Token"
-              value={authToken}
-              disabled={authSaving}
-              error={Boolean(authError)}
-              errorMessage={authError ?? undefined}
-              onChange={event => {
-                setAuthToken(event.target.value);
-                if (authError) setAuthError(null);
-              }}
-            />
+            <Field label="Token" controlWidth="fill" error={authError ?? undefined}>
+              <DesignInput
+                type="password"
+                autoComplete="off"
+                autoFocus
+                value={authToken}
+                disabled={authSaving}
+                onChange={event => {
+                  setAuthToken(event.target.value);
+                  if (authError) setAuthError(null);
+                }}
+              />
+            </Field>
           )}
           <div className="review-platform__auth-actions">
             <Button
diff --git a/src/web-ui/src/app/components/panels/review-platform/appearance.ts b/src/web-ui/src/app/components/panels/review-platform/appearance.ts
index d1413876cc..2edf908c0a 100644
--- a/src/web-ui/src/app/components/panels/review-platform/appearance.ts
+++ b/src/web-ui/src/app/components/panels/review-platform/appearance.ts
@@ -35,6 +35,8 @@ export const reviewPlatformAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'detailMeta' },
     { id: 'detailActions' },
     { id: 'facts' },
+    { id: 'tabs' },
+    { id: 'tabBar' },
     { id: 'tabContent' },
     { id: 'section' },
     { id: 'sectionHeading' },
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.tsx b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
index 2f2e015b4e..e1e06d2260 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.tsx
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
@@ -11,7 +11,7 @@
 
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MessageSquare } from 'lucide-react';
+import { MessageSquare, X } from 'lucide-react';
 import { flowChatStore } from '../../flow_chat/store/FlowChatStore';
 import { syncSessionToModernStore } from '../../flow_chat/services/storeSync';
 import ChatPane from '@/app/scenes/session/ChatPane';
@@ -19,7 +19,8 @@ import type {
   ChatInputRegistration,
   ChatInputSubmission,
 } from '@/flow_chat/components/chatInputRegistration';
-import { PopupCloseButton } from '@/component-library';
+import { IconButton } from '@bitfun/ui';
+import { Tooltip } from '@/component-library';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { SessionMenu, useFlowChatSessions } from '../../flow_chat/components/session-menu';
 import { useSceneStore } from '@/app/stores/sceneStore';
@@ -578,14 +579,17 @@ export const FloatingMiniChat: React.FC = () => {
           {/* Tool confirmation and stop controls come from the reused session
               surface (permission panel above ChatInput, ChatInput stop button),
               so the header only owns bubble chrome. */}
-          <PopupCloseButton
-            data-bf-component="floating-mini-chat"
-            data-bf-part="headerAction"
-            className="bitfun-fmc__close"
-            onClick={handleClose}
-            tooltip={t('session.close')}
-            aria-label={t('session.close')}
-          />
+          <Tooltip content={t('session.close')}>
+            <IconButton
+              data-bf-component="floating-mini-chat"
+              data-bf-part="headerAction"
+              className="bitfun-fmc__close"
+              icon={<X />}
+              onClick={handleClose}
+              size="md"
+              aria-label={t('session.close')}
+            />
+          </Tooltip>
         </div>
 
         {/* Main window session surface, reused as-is. Only mounted while the
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx
index bb8fb15ec6..72cd72bf4d 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx
@@ -20,6 +20,12 @@ vi.mock('react-i18next', () => ({
   }),
 }));
 
+vi.mock('@/infrastructure/i18n/hooks/useI18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
 vi.mock('./components/CreateAgentPage', () => ({
   default: () => <div data-testid="create-agent-page">create agent</div>,
 }));
@@ -83,14 +89,12 @@ vi.mock('./components/ToolGroupPicker', () => ({
 }));
 
 vi.mock('@/component-library', () => ({
-  Badge: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
   Button: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
     <button type="button" onClick={onClick}>{children}</button>
   ),
   IconButton: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
     <button type="button" onClick={onClick}>{children}</button>
   ),
-  Search: () => <input readOnly />,
   Select: () => <div />,
   Switch: () => <input type="checkbox" readOnly />,
   Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index d3ecc4bdca..cb788db860 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, Select } from '@bitfun/ui';
+import { Button, IconButton, SearchField, Select, StatusPill } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
 import {
@@ -11,11 +11,13 @@ import {
   Pencil,
   Plus,
   Puzzle,
+  Search as SearchIcon,
   Trash2,
   Wrench,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge, Search, Select as LegacySelect, Tooltip } from '@/component-library';
+import { Select as LegacySelect, Tooltip } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import { HarnessCreativeIcon } from '@/component-library/icons';
 import {
@@ -186,6 +188,7 @@ function subagentTooltipFields(
 
 const AgentsHomeView: React.FC = () => {
   const { t } = useTranslation('scenes/agents');
+  const { t: tComponents } = useI18n('components');
   const notification = useNotification();
   const [deletingAgent, setDeletingAgent] = useState(false);
   const {
@@ -676,14 +679,16 @@ const AgentsHomeView: React.FC = () => {
         subtitle={t('page.subtitle')}
         actions={(
           <>
-            <Search
+            <SearchField
               className="bitfun-agents-scene__search"
               value={searchQuery}
-              onChange={setSearchQuery}
+              onValueChange={setSearchQuery}
+              leadingIcon={<SearchIcon size={14} aria-hidden />}
               placeholder={t('page.searchPlaceholder')}
-              inputAriaLabel={t('page.searchPlaceholder')}
-              size="small"
-              clearable
+              aria-label={t('page.searchPlaceholder')}
+              size="sm"
+              clearLabel={searchQuery ? tComponents('search.clear') : undefined}
+              onClear={searchQuery ? () => setSearchQuery('') : undefined}
               data-testid="agents-search"
             />
             <Button
@@ -890,12 +895,12 @@ const AgentsHomeView: React.FC = () => {
         stableHeight
         badges={selectedAgent ? (
           <>
-            <Badge
-              variant={selectedAgentBadge?.variant}
+            <StatusPill
+              tone={selectedAgentBadge?.variant ?? 'neutral'}
+              leading={selectedAgent.agentKind === 'mode' ? <Cpu size={10} /> : <Bot size={10} />}
             >
-              {selectedAgent.agentKind === 'mode' ? <Cpu size={10} /> : <Bot size={10} />}
               {selectedAgentBadge?.label}
-            </Badge>
+            </StatusPill>
           </>
         ) : null}
         description={selectedAgent
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.scss b/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
index a912baaf82..02b3116c85 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
@@ -131,7 +131,7 @@
     flex-shrink: 0;
   }
 
-  &__kind-badge.badge {
+  &__kind-badge[data-bf-component='status-pill'] {
     max-width: 112px;
     padding: 1px 6px;
     overflow: hidden;
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
index 0cdee4d8d1..77f25766b4 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
@@ -8,7 +8,7 @@ import {
   UsersRound,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge } from '@/component-library';
+import { StatusPill } from '@bitfun/ui';
 import type { AgentWithCapabilities } from '../agentsStore';
 import { AGENT_ICON_MAP } from '../agentsIcons';
 import { getAgentBadge, getAgentDescription, getCapabilityLabel } from '../utils';
@@ -87,9 +87,9 @@ const AgentCard: React.FC<AgentCardProps> = ({
             </div>
           </div>
           <div className="agent-card__badges" data-bf-component="agent-card" data-bf-part="badges">
-            <Badge variant={badge.variant} className="agent-card__kind-badge">
+            <StatusPill tone={badge.variant} className="agent-card__kind-badge">
               {badge.label}
-            </Badge>
+            </StatusPill>
           </div>
         </div>
 
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
index d364ea88c2..520355fd98 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
@@ -87,7 +87,7 @@
     text-overflow: ellipsis;
   }
 
-  &__role.badge {
+  &__role[data-bf-component='status-pill'] {
     max-width: 100%;
     padding: 1px 6px;
     overflow: hidden;
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
index 775d655ca6..7f7725acb2 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
@@ -8,7 +8,7 @@ import {
   UsersRound,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge } from '@/component-library';
+import { StatusPill } from '@bitfun/ui';
 import type { AgentWithCapabilities } from '../agentsStore';
 import { AGENT_ICON_MAP } from '../agentsIcons';
 import { getAgentDescription } from '../utils';
@@ -81,9 +81,9 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
           <div className="core-agent-card__top-info" data-bf-component="core-agent-card" data-bf-part="headerInfo">
             <span className="core-agent-card__name" data-bf-component="core-agent-card" data-bf-part="name" data-testid="agent-list-item-title">{agent.name}</span>
             <span data-bf-component="core-agent-card" data-bf-part="role">
-              <Badge variant="neutral" className="core-agent-card__role">
+              <StatusPill tone="neutral" className="core-agent-card__role">
                 {meta.role}
-              </Badge>
+              </StatusPill>
             </span>
           </div>
           <span
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
index 8da98c10f2..282b8f982b 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
@@ -105,7 +105,7 @@
   background: var(--bf-appearance-token-color-bg-scene);
   box-shadow: none;
 
-  .bitfun-input-wrapper--default .bitfun-input-container {
+  [data-bf-component='input'] {
     background: var(--bf-appearance-token-color-bg-scene);
     border-color: var(--bf-appearance-token-border-subtle);
   }
@@ -501,7 +501,7 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .th-create-page__panel .bitfun-input-wrapper--default .bitfun-input-container:hover {
+  .th-create-page__panel [data-bf-component='input']:hover {
     background: var(--bf-appearance-token-color-bg-scene);
   }
 
diff --git a/src/web-ui/src/app/scenes/agents/utils.ts b/src/web-ui/src/app/scenes/agents/utils.ts
index 6e68dc8452..44e764cd13 100644
--- a/src/web-ui/src/app/scenes/agents/utils.ts
+++ b/src/web-ui/src/app/scenes/agents/utils.ts
@@ -16,7 +16,7 @@ const MODE_DESCRIPTION_KEY_BY_ID: Record<string, string> = {
 };
 
 interface AgentBadgeConfig {
-  variant: 'accent' | 'info' | 'success' | 'purple' | 'neutral';
+  variant: 'accent' | 'info' | 'success' | 'neutral';
   label: string;
 }
 
@@ -53,7 +53,7 @@ function getAgentBadge(
       return { variant: 'success', label: t('agentCard.badges.userMode') };
     }
     if (source === 'project') {
-      return { variant: 'purple', label: t('agentCard.badges.projectMode') };
+      return { variant: 'accent', label: t('agentCard.badges.projectMode') };
     }
     return { variant: 'accent', label: t('agentCard.badges.agent') };
   }
@@ -64,7 +64,7 @@ function getAgentBadge(
     case 'user':
       return { variant: 'success', label: t('agentCard.badges.userSubagent') };
     case 'project':
-      return { variant: 'purple', label: t('agentCard.badges.projectSubagent') };
+      return { variant: 'accent', label: t('agentCard.badges.projectSubagent') };
     default:
       return { variant: 'info', label: t('agentCard.badges.subagent') };
   }
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
index b299050b6b..00440b8413 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
@@ -28,12 +28,6 @@ $compatibility-sidebar-width: 236px;
     gap: $size-gap-3;
     padding: $size-gap-4;
     border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
-
-    .search__wrapper {
-      min-height: 30px;
-      border-color: var(--bf-appearance-token-border-medium);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
   }
 
   &__host-card {
diff --git a/src/web-ui/src/app/scenes/git/views/BranchesView.tsx b/src/web-ui/src/app/scenes/git/views/BranchesView.tsx
index e181863dae..1a61785d6d 100644
--- a/src/web-ui/src/app/scenes/git/views/BranchesView.tsx
+++ b/src/web-ui/src/app/scenes/git/views/BranchesView.tsx
@@ -2,7 +2,7 @@
  * BranchesView — Left: branch list (switch/create/delete). Right: commit history for selected branch.
  */
 
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, SearchField } from '@bitfun/ui';
 import React, { useCallback, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -15,8 +15,10 @@ import {
   FileText,
   ChevronDown,
   ChevronRight,
+  Search as SearchIcon,
 } from 'lucide-react';
-import { Tooltip, Search as SearchComponent } from '@/component-library';
+import { Tooltip } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { gitService } from '@/tools/git/services';
 import { useGitOperations } from '@/tools/git/hooks';
 import { useNotification } from '@/shared/notification-system';
@@ -30,6 +32,7 @@ interface BranchesViewProps {
 
 const BranchesView: React.FC<BranchesViewProps> = ({ workspacePath }) => {
   const { t } = useTranslation('panels/git');
+  const { t: tComponents } = useI18n('components');
   const notification = useNotification();
 
   const [branches, setBranches] = useState<GitBranchType[]>([]);
@@ -218,11 +221,15 @@ const BranchesView: React.FC<BranchesViewProps> = ({ workspacePath }) => {
       <div data-bf-component="branches-view" data-bf-part="left" className="bitfun-git-scene-branches__left">
         <div data-bf-component="branches-view" data-bf-part="toolbar" className="bitfun-git-scene-branches__toolbar">
           <div data-bf-component="branches-view" data-bf-part="search" className="bitfun-git-scene-branches__toolbar-search">
-            <SearchComponent
+            <SearchField
+              size="sm"
+              leadingIcon={<SearchIcon size={14} aria-hidden />}
               placeholder={t('search.branches')}
+              aria-label={t('search.branches')}
               value={branchSearchQuery}
-              onChange={setBranchSearchQuery}
-              onClear={() => setBranchSearchQuery('')}
+              onValueChange={setBranchSearchQuery}
+              clearLabel={branchSearchQuery ? tComponents('search.clear') : undefined}
+              onClear={branchSearchQuery ? () => setBranchSearchQuery('') : undefined}
             />
           </div>
           <div data-bf-component="branches-view" data-bf-part="actions" className="bitfun-git-scene-branches__toolbar-actions">
@@ -306,11 +313,15 @@ const BranchesView: React.FC<BranchesViewProps> = ({ workspacePath }) => {
           <span data-bf-component="branches-view" data-bf-part="historyTitle" className="bitfun-git-scene-branches__history-title">
             {selectedBranchName ? t('tabs.branchCommitHistory', { branch: selectedBranchName }) : t('tabs.commits')}
           </span>
-          <SearchComponent
+          <SearchField
+            size="sm"
+            leadingIcon={<SearchIcon size={14} aria-hidden />}
             placeholder={t('search.commits')}
+            aria-label={t('search.commits')}
             value={commitSearchQuery}
-            onChange={setCommitSearchQuery}
-            onClear={() => setCommitSearchQuery('')}
+            onValueChange={setCommitSearchQuery}
+            clearLabel={commitSearchQuery ? tComponents('search.clear') : undefined}
+            onClear={commitSearchQuery ? () => setCommitSearchQuery('') : undefined}
           />
         </div>
         <div data-bf-component="branches-view" data-bf-part="historyList" className="bitfun-git-scene-branches__history-list">
diff --git a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx
index 70efe21210..8b1cc1ab59 100644
--- a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx
+++ b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx
@@ -2,7 +2,7 @@
  * WorkingCopyView — Git working copy: commit bar + file list + diff area (ContentCanvas mode=git).
  */
 
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, SearchField } from '@bitfun/ui';
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { useShortcut } from '@/infrastructure/hooks/useShortcut';
 import { useTranslation } from 'react-i18next';
@@ -19,8 +19,10 @@ import {
   Sparkles,
   Square,
   FileCode2,
+  Search as SearchIcon,
 } from 'lucide-react';
-import { Tooltip, Textarea, Search as SearchComponent } from '@/component-library';
+import { Tooltip, Textarea } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { ContentCanvas } from '@/app/components/panels/content-canvas';
 import { CanvasStoreModeContext } from '@/app/components/panels/content-canvas/stores';
 import { useGitState, useGitOperations, useGitAgent } from '@/tools/git/hooks';
@@ -63,6 +65,7 @@ const WorkingCopyView: React.FC<WorkingCopyViewProps> = ({
   isActive = true,
 }) => {
   const { t } = useTranslation('panels/git');
+  const { t: tComponents } = useI18n('components');
   const notification = useNotification();
 
   const [quickCommitMessage, setQuickCommitMessage] = useState('');
@@ -483,11 +486,15 @@ const WorkingCopyView: React.FC<WorkingCopyViewProps> = ({
       <div className="bitfun-git-scene-working-copy__main" ref={mainRef} data-bf-component="working-copy-view" data-bf-part="main">
         <div className="bitfun-git-scene-working-copy__file-list" style={{ width: fileListWidth }} data-bf-component="working-copy-view" data-bf-part="fileList">
           <div className="bitfun-git-scene-working-copy__search" data-bf-component="working-copy-view" data-bf-part="search">
-            <SearchComponent
+            <SearchField
+              size="sm"
+              leadingIcon={<SearchIcon size={14} aria-hidden />}
               placeholder={t('search.files')}
+              aria-label={t('search.files')}
               value={searchQuery}
-              onChange={setSearchQuery}
-              onClear={() => setSearchQuery('')}
+              onValueChange={setSearchQuery}
+              clearLabel={searchQuery ? tComponents('search.clear') : undefined}
+              onClear={searchQuery ? () => setSearchQuery('') : undefined}
             />
           </div>
           {status && (status.unstaged?.length || status.untracked?.length || status.staged?.length) ? (
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
index febb8eaf4c..778066abd6 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
@@ -1,5 +1,4 @@
 @use '../../../component-library/styles/tokens' as *;
-@use '../../../component-library/styles/btn-primary-tokens.scss' as btn-primary;
 
 // Gutter aligned with GalleryLayout ($gutter) so the tab strip lines up
 // with the page header content of every tab pane.
@@ -16,81 +15,23 @@ $scene-gutter: clamp(28px, 4vw, 64px);
   overflow: hidden;
   background: var(--bf-appearance-token-color-bg-scene);
 
-  // Layout glue: make the component-library Tabs fill the scene so each
+  &__nav {
+    flex: 0 0 auto;
+    padding: $size-gap-3 $scene-gutter;
+    background: var(--bf-appearance-token-color-bg-scene);
+    border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
+  }
+
+  // Layout glue: keep the active pane in the flex sizing chain so each
   // pane's GalleryLayout keeps its own internal scroll.
-  &__tabs {
+  &__content {
+    display: flex;
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
+    overflow: hidden;
 
-    > .bitfun-tabs__nav {
-      flex: 0 0 auto;
-      padding: $size-gap-3 $scene-gutter;
-      background: var(--bf-appearance-token-color-bg-scene);
-      border-bottom-color: var(--bf-appearance-token-border-subtle);
-    }
-
-    > .bitfun-tabs__nav .bitfun-tabs__nav-list {
-      flex: 0 0 auto;
-      width: fit-content;
-      gap: 2px;
-      padding: 2px;
-      border: 1px solid var(--bf-appearance-token-border-subtle);
-      border-radius: $size-radius-full;
-      background: var(--bf-appearance-token-element-bg-subtle);
-      box-shadow: var(--bf-appearance-token-shadow-xs);
-    }
-
-    > .bitfun-tabs__nav .bitfun-tabs__tab {
-      min-height: 30px;
-      padding: 0;
-      margin-bottom: 0;
-      border-bottom: 0;
-      border-radius: $size-radius-full;
-      color: var(--bf-appearance-token-color-text-secondary);
-      font-size: var(--bf-appearance-token-font-size-sm);
-
-      &:not(.bitfun-tabs__tab--active):hover {
-        background: var(--bf-appearance-token-element-bg-soft);
-        color: var(--bf-appearance-token-color-text-primary);
-      }
-
-      &--active {
-        @include btn-primary.btn-primary-surface-default;
-
-        &:hover {
-          @include btn-primary.btn-primary-surface-hover;
-        }
-      }
-    }
-
-    > .bitfun-tabs__nav .bitfun-tabs__tab-button {
-      height: 30px;
-      padding: 0 10px;
-    }
-
-    > .bitfun-tabs__nav .bitfun-tabs__ink-bar {
-      display: none;
-    }
-
-    > .bitfun-tabs__content {
-      display: flex;
-      flex: 1 1 auto;
-      min-height: 0;
-      overflow: hidden;
-    }
-
-    // Tabs wraps the active pane in ViewTransitionBoundary. Keep that
-    // intermediate view in the flex sizing chain so GalleryLayout receives a
-    // definite height and its body remains the page's scroll owner.
-    > .bitfun-tabs__content > .bitfun-tabs__content-view {
-      display: flex;
-      flex: 1 1 auto;
-      min-width: 0;
-      min-height: 0;
-      overflow: hidden;
-    }
-
-    .bitfun-tab-pane {
+    > * {
       display: flex;
       flex: 1 1 auto;
       min-width: 0;
@@ -100,11 +41,7 @@ $scene-gutter: clamp(28px, 4vw, 64px);
 }
 
 @media (max-width: 560px) {
-  .miniapp-gallery-scene__tabs > .bitfun-tabs__nav {
+  .miniapp-gallery-scene__nav {
     padding-inline: $size-gap-3;
   }
-
-  .miniapp-gallery-scene__tabs > .bitfun-tabs__nav .bitfun-tabs__tab-button {
-    padding-inline: $size-gap-2;
-  }
 }
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
index 448a695c80..380d68efbe 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
@@ -4,7 +4,7 @@
  */
 import React, { Suspense, lazy, useState } from 'react';
 import { Download, Store, UploadCloud } from 'lucide-react';
-import { Tabs, TabPane } from '@/component-library';
+import { TabGroup, type TabGroupItem } from '@bitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
 import './MiniAppGalleryScene.scss';
 
@@ -18,43 +18,40 @@ const MiniAppGalleryScene: React.FC = () => {
   const { t } = useI18n('scenes/miniapp');
   const [activeTab, setActiveTab] = useState<MiniAppGalleryTab>('installed');
 
+  const tabItems: TabGroupItem[] = [
+    {
+      value: 'installed',
+      icon: <Download size={14} />,
+      label: t('market.tabs.installed'),
+    },
+    {
+      value: 'market',
+      icon: <Store size={14} />,
+      label: t('market.tabs.market'),
+    },
+    {
+      value: 'submissions',
+      icon: <UploadCloud size={14} />,
+      label: t('market.tabs.submissions'),
+    },
+  ];
+
   return (
     <div className="miniapp-gallery-scene" data-bf-scene="miniapp-gallery" data-bf-part="root">
-      <Tabs
-        className="miniapp-gallery-scene__tabs"
-        type="line"
-        size="small"
-        activeKey={activeTab}
-        onChange={(key) => setActiveTab(key as MiniAppGalleryTab)}
-      >
-        <TabPane
-          tabKey="installed"
-          icon={<Download size={14} />}
-          label={t('market.tabs.installed')}
-        >
-          <Suspense fallback={null}>
-            <MiniAppGalleryView />
-          </Suspense>
-        </TabPane>
-        <TabPane
-          tabKey="market"
-          icon={<Store size={14} />}
-          label={t('market.tabs.market')}
-        >
-          <Suspense fallback={null}>
-            <MiniAppMarketView />
-          </Suspense>
-        </TabPane>
-        <TabPane
-          tabKey="submissions"
-          icon={<UploadCloud size={14} />}
-          label={t('market.tabs.submissions')}
-        >
-          <Suspense fallback={null}>
-            <MiniAppSubmissionsView />
-          </Suspense>
-        </TabPane>
-      </Tabs>
+      <div className="miniapp-gallery-scene__nav">
+        <TabGroup
+          items={tabItems}
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as MiniAppGalleryTab)}
+        />
+      </div>
+      <div className="miniapp-gallery-scene__content">
+        <Suspense fallback={null}>
+          {activeTab === 'installed' && <MiniAppGalleryView />}
+          {activeTab === 'market' && <MiniAppMarketView />}
+          {activeTab === 'submissions' && <MiniAppSubmissionsView />}
+        </Suspense>
+      </div>
     </div>
   );
 };
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
index f0f11580fb..a459ad214d 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
@@ -1,4 +1,4 @@
-import { Button, ConfirmDialog, SearchField, Select, type SelectOption } from '@bitfun/ui';
+import { Button, ConfirmDialog, SearchField, Select, StatusPill, type SelectOption } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   AlertTriangle,
@@ -16,8 +16,6 @@ import {
   ShieldCheck,
   Star,
 } from 'lucide-react';
-import { Badge } from '@/component-library';
-
 
 import {
   GalleryDetailModal,
@@ -430,8 +428,8 @@ const MiniAppMarketView: React.FC = () => {
         title={detailName || t('market.detail.loading')}
         badges={detail ? (
           <>
-            <Badge variant="info">{categoryLabel(detail.category, t)}</Badge>
-            <Badge variant="neutral"><ShieldCheck size={11} /> {t('market.detail.reviewed')}</Badge>
+            <StatusPill tone="info">{categoryLabel(detail.category, t)}</StatusPill>
+            <StatusPill tone="neutral" leading={<ShieldCheck size={11} />}>{t('market.detail.reviewed')}</StatusPill>
           </>
         ) : null}
         description={detailDescription}
@@ -548,7 +546,7 @@ const MiniAppMarketView: React.FC = () => {
                   <div key={release.releaseId}>
                     <span>v{release.releaseNumber}</span>
                     <span>{release.minBitfunVersion}+</span>
-                    {release.yanked ? <Badge variant="warning">{t('market.detail.yanked')}</Badge> : <Check size={14} />}
+                    {release.yanked ? <StatusPill tone="warning">{t('market.detail.yanked')}</StatusPill> : <Check size={14} />}
                   </div>
                 ))}
               </div>
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss
index ffd4f908a0..b9af581333 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss
@@ -4,9 +4,9 @@
 // gallery/form primitives so nothing in here invents its own size:
 //   section title  13px / 600 / primary    — .gallery-zone__title
 //   section hint   12px / 400 / muted      — .gallery-zone__subtitle
-//   field label    13px / 500 / secondary  — .bitfun-input-label
+//   field label    13px / 500 / secondary  — Field label
 //   field value    13px / 400 / primary    — .select__value
-//   inline hint    12px / 400 / muted      — .bitfun-input-hint
+//   inline hint    12px / 400 / muted      — Field description
 .miniapp-submissions {
   // Label-to-control distance, shared by Input, Select and the textarea fields.
   --submissions-label-gap: 6px;
@@ -27,7 +27,7 @@
 
   // The shared Input renders its value at 14px while Select renders 13px; pin
   // both to 13px so every control in the form reads at the same size.
-  .bitfun-input-container {
+  [data-bf-component='input'] {
     font-size: var(--bf-appearance-token-font-size-sm);
   }
 
@@ -133,7 +133,7 @@
     textarea {
       width: 100%;
       min-height: 92px;
-      // Same box as .bitfun-input-container so the caret lines up with the
+      // Same box as the shared Input so the caret lines up with the
       // single-line fields above it.
       padding: 8px 12px;
       border: 1px solid var(--bf-appearance-token-border-base);
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
index c3f2c64f18..aef3bb10e6 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
@@ -1,4 +1,4 @@
-import { Button, Field, Select } from '@bitfun/ui';
+import { Button, Field, Input, Select, StatusPill } from '@bitfun/ui';
 import React, { useEffect, useMemo, useState } from 'react';
 import { open } from '@tauri-apps/plugin-dialog';
 import {
@@ -15,7 +15,6 @@ import {
   Send,
   X,
 } from 'lucide-react';
-import { Badge, Input } from '@/component-library';
 import { GalleryEmpty, GalleryLayout, GalleryPageHeader } from '@/app/components';
 import { useI18n } from '@/infrastructure/i18n';
 import { MarketAccountControls } from '@/features/market-account';
@@ -320,14 +319,14 @@ const MiniAppSubmissionsView: React.FC = () => {
             />
           </Field>
 
-          <Input
-            label={t('market.submissions.name')}
-            value={draft.name}
-            maxLength={80}
-            required
-            disabled={busy}
-            onChange={(event) => setDraft({ ...draft, name: event.target.value })}
-          />
+          <Field label={t('market.submissions.name')} controlWidth="fill" required>
+            <Input
+              value={draft.name}
+              maxLength={80}
+              disabled={busy}
+              onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+            />
+          </Field>
 
           <label className="miniapp-submissions__field">
             <span>{t('market.submissions.description')}</span>
@@ -415,27 +414,31 @@ const MiniAppSubmissionsView: React.FC = () => {
           {showAdvanced ? (
             <div className="miniapp-submissions__advanced">
               <div className="miniapp-submissions__form-grid">
-                <Input
+                <Field
                   label={t('market.submissions.slug')}
-                  value={draft.slug}
-                  pattern="[a-z0-9][a-z0-9-]{2,62}"
+                  description={t('market.submissions.slugHint')}
+                  controlWidth="fill"
                   required
-                  disabled={busy}
-                  onChange={(event) => setDraft({ ...draft, slug: event.target.value })}
-                  hint={t('market.submissions.slugHint')}
-                />
-                <Input
-                  label={t('market.submissions.release')}
-                  type="number"
-                  min={1}
-                  max={4294967295}
-                  value={draft.releaseNumber}
-                  required
-                  disabled={busy}
-                  onChange={(event) =>
-                    setDraft({ ...draft, releaseNumber: Number(event.target.value) })
-                  }
-                />
+                >
+                  <Input
+                    value={draft.slug}
+                    pattern="[a-z0-9][a-z0-9-]{2,62}"
+                    disabled={busy}
+                    onChange={(event) => setDraft({ ...draft, slug: event.target.value })}
+                  />
+                </Field>
+                <Field label={t('market.submissions.release')} controlWidth="fill" required>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={4294967295}
+                    value={draft.releaseNumber}
+                    disabled={busy}
+                    onChange={(event) =>
+                      setDraft({ ...draft, releaseNumber: Number(event.target.value) })
+                    }
+                  />
+                </Field>
               </div>
 
               <div className="miniapp-submissions__form-grid">
@@ -450,26 +453,30 @@ const MiniAppSubmissionsView: React.FC = () => {
                     }))}
                   />
                 </Field>
+                <Field label={t('market.submissions.minVersion')} controlWidth="fill" required>
+                  <Input
+                    value={draft.minBitfunVersion}
+                    disabled={busy}
+                    onChange={(event) =>
+                      setDraft({ ...draft, minBitfunVersion: event.target.value })
+                    }
+                  />
+                </Field>
+              </div>
+
+              <Field
+                label={t('market.submissions.tags')}
+                description={t('market.submissions.tagsHint')}
+                controlWidth="fill"
+              >
                 <Input
-                  label={t('market.submissions.minVersion')}
-                  value={draft.minBitfunVersion}
-                  required
+                  value={draft.tags.join(', ')}
                   disabled={busy}
                   onChange={(event) =>
-                    setDraft({ ...draft, minBitfunVersion: event.target.value })
+                    setDraft({ ...draft, tags: event.target.value.split(',').slice(0, 10) })
                   }
                 />
-              </div>
-
-              <Input
-                label={t('market.submissions.tags')}
-                value={draft.tags.join(', ')}
-                disabled={busy}
-                onChange={(event) =>
-                  setDraft({ ...draft, tags: event.target.value.split(',').slice(0, 10) })
-                }
-                hint={t('market.submissions.tagsHint')}
-              />
+              </Field>
 
               <label className="miniapp-submissions__field">
                 <span>{t('market.submissions.changelog')}</span>
@@ -483,39 +490,45 @@ const MiniAppSubmissionsView: React.FC = () => {
               </label>
 
               <div className="miniapp-submissions__form-grid">
-                <Input
+                <Field
                   label={t('market.submissions.spdx')}
-                  value={draft.license.spdxExpression ?? ''}
-                  disabled={busy}
-                  onChange={(event) =>
-                    setDraft({
-                      ...draft,
-                      license: { ...draft.license, spdxExpression: event.target.value },
-                    })
-                  }
-                  hint={t('market.submissions.licenseHint')}
-                />
+                  description={t('market.submissions.licenseHint')}
+                  controlWidth="fill"
+                >
+                  <Input
+                    value={draft.license.spdxExpression ?? ''}
+                    disabled={busy}
+                    onChange={(event) =>
+                      setDraft({
+                        ...draft,
+                        license: { ...draft.license, spdxExpression: event.target.value },
+                      })
+                    }
+                  />
+                </Field>
+                <Field label={t('market.submissions.licenseUrl')} controlWidth="fill">
+                  <Input
+                    type="url"
+                    value={draft.license.customUrl ?? ''}
+                    disabled={busy}
+                    onChange={(event) =>
+                      setDraft({
+                        ...draft,
+                        license: { ...draft.license, customUrl: event.target.value },
+                      })
+                    }
+                  />
+                </Field>
+              </div>
+
+              <Field label={t('market.submissions.repository')} controlWidth="fill">
                 <Input
-                  label={t('market.submissions.licenseUrl')}
                   type="url"
-                  value={draft.license.customUrl ?? ''}
+                  value={draft.repositoryUrl ?? ''}
                   disabled={busy}
-                  onChange={(event) =>
-                    setDraft({
-                      ...draft,
-                      license: { ...draft.license, customUrl: event.target.value },
-                    })
-                  }
+                  onChange={(event) => setDraft({ ...draft, repositoryUrl: event.target.value })}
                 />
-              </div>
-
-              <Input
-                label={t('market.submissions.repository')}
-                type="url"
-                value={draft.repositoryUrl ?? ''}
-                disabled={busy}
-                onChange={(event) => setDraft({ ...draft, repositoryUrl: event.target.value })}
-              />
+              </Field>
             </div>
           ) : null}
 
@@ -569,9 +582,9 @@ const MiniAppSubmissionsView: React.FC = () => {
                     </div>
                   </div>
                   <div className="miniapp-submissions__status">
-                    <Badge variant={statusVariant(submission.status)}>
+                    <StatusPill tone={statusVariant(submission.status)}>
                       {submissionStatusLabel(submission.status, t)}
-                    </Badge>
+                    </StatusPill>
                     {(submission.status === 'draft' || submission.status === 'submitted') ? (
                       <Button
                         size="sm"
diff --git a/src/web-ui/src/app/scenes/pages/PagesScene.scss b/src/web-ui/src/app/scenes/pages/PagesScene.scss
index 8a7742148e..09589ddcd4 100644
--- a/src/web-ui/src/app/scenes/pages/PagesScene.scss
+++ b/src/web-ui/src/app/scenes/pages/PagesScene.scss
@@ -345,17 +345,16 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     display: flex;
     gap: $size-gap-2;
 
-    .bitfun-input-wrapper {
+    [data-bf-component='input'] {
       min-width: 0;
       width: 100%;
       flex: 1;
-    }
 
-    // The Input component only inherits font-family, so the native <input>
-    // falls back to the WebView UA size. Pin it to the container size (13px
-    // for size="small") so it matches the visibility Select below.
-    .bitfun-input {
-      font-size: inherit;
+      // Pin the native <input> to the container size so it matches the
+      // visibility Select below.
+      input {
+        font-size: inherit;
+      }
     }
   }
 
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantCard.test.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantCard.test.tsx
index 5deae19aa6..e5d3184595 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantCard.test.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantCard.test.tsx
@@ -15,7 +15,6 @@ vi.mock('react-i18next', () => ({
 }));
 
 vi.mock('@/component-library', () => ({
-  Badge: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
   IconButton: ({
     children,
     isLoading,
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantCard.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantCard.tsx
index 94b8fccf64..c8fb8255d4 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantCard.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, StatusPill } from '@bitfun/ui';
 import {
   ChevronRight,
   MessageSquarePlus,
@@ -9,7 +9,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge, Tooltip } from '@/component-library';
+import { Tooltip } from '@/component-library';
 import { AssistantAvatar } from '@/app/components/AssistantAvatar';
 import type { WorkspaceInfo } from '@/shared/types';
 
@@ -94,7 +94,7 @@ const AssistantCard: React.FC<AssistantCardProps> = ({
             )}
             {creature ? (
               <span className="assistant-card__badges" data-bf-component="assistant-card" data-bf-part="badges">
-                <Badge variant="neutral">{creature}</Badge>
+                <StatusPill tone="neutral">{creature}</StatusPill>
               </span>
             ) : null}
           </span>
diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
index 21b0c047cb..eb4dae6e67 100644
--- a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
+++ b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -532,7 +532,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     gap: 4px;
     flex-wrap: wrap;
 
-    .badge--neutral {
+    [data-bf-component='status-pill'][data-tone='neutral'] {
       background: var(--bf-appearance-token-color-overlay-black-08);
       color: var(--bf-appearance-token-color-overlay-black-50);
     }
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
index ccad21cf42..4d2d1a94ce 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
@@ -47,49 +47,9 @@
     flex-shrink: 0;
   }
 
-  /** Component-library `Search` — compact settings navigation capsule. */
-  &__search-field.search {
+  /** Design-system `SearchField` — compact settings navigation capsule. */
+  &__search-field {
     width: 100%;
-
-    .search__wrapper {
-      height: 30px;
-      min-height: 30px;
-      padding: 0 10px;
-      gap: $size-gap-1;
-      border: none;
-      border-radius: $size-radius-full;
-      background: var(--bf-appearance-token-color-bg-scene);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-border-subtle) 65%, transparent);
-      transition:
-        background 0.2s ease,
-        box-shadow 0.2s ease;
-    }
-
-    .search__wrapper:hover {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-bg-scene) 88%, var(--bf-appearance-token-element-bg-medium));
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-border-medium) 55%, transparent);
-    }
-
-    .search__wrapper:focus-within {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-bg-scene) 82%, var(--bf-appearance-token-element-bg-medium));
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-border-medium) 68%, transparent);
-    }
-
-    &.search .search__input {
-      @include nav-font.nav-panel-text-body;
-
-      font-size: var(--bf-appearance-token-font-size-sm);
-      font-weight: 400;
-      line-height: 1.25;
-
-      &::placeholder {
-        color: var(--bf-appearance-token-color-text-disabled);
-      }
-
-      &:focus::placeholder {
-        color: color-mix(in srgb, var(--bf-appearance-token-color-text-disabled) 72%, transparent);
-      }
-    }
   }
 
   &__search-results {
@@ -296,9 +256,6 @@
 @media (prefers-reduced-motion: reduce) {
   .bitfun-settings-nav {
     &__item { transition: none; }
-    &__search-field.search .search__wrapper {
-      transition: none;
-    }
     &__search-result-item { transition: none; }
   }
 }
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
index 5bbce9273a..2c36e92c8b 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
@@ -8,7 +8,9 @@ import React, {
 } from 'react';
 import type { i18n as I18nApi } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Search } from '@/component-library';
+import { Search as SearchIcon } from 'lucide-react';
+import { SearchField } from '@bitfun/ui';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { getInteractionMotion } from '@/shared/utils/motionPreference';
 import {
   SETTINGS_CATEGORIES,
@@ -111,6 +113,7 @@ function highlightFirstMatch(text: string, query: string): React.ReactNode {
 
 const SettingsNav: React.FC = () => {
   const { t, i18n } = useTranslation('settings');
+  const { t: tComponents } = useI18n('components');
   const activePageId = useSettingsStore((state) => state.activePageId);
   const activeViewId = useSettingsStore((state) => state.activeViewId);
   const openDestination = useSettingsStore((state) => state.openDestination);
@@ -208,20 +211,23 @@ const SettingsNav: React.FC = () => {
       </div>
 
       <div className="bitfun-settings-nav__search" data-bf-component="settings-nav" data-bf-part="search">
-        <Search
+        <SearchField
           ref={searchInputRef}
           className="bitfun-settings-nav__search-field"
-          size="small"
+          size="sm"
           value={draftQuery}
-          onChange={setDraftQuery}
-          onClear={clearSearch}
+          onValueChange={setDraftQuery}
+          onClear={draftQuery ? () => {
+            clearSearch();
+            searchInputRef.current?.focus();
+          } : undefined}
+          clearLabel={draftQuery ? tComponents('search.clear') : undefined}
           onKeyDown={handleSearchKeyDown}
-          enterToSearch={false}
+          leadingIcon={<SearchIcon size={14} aria-hidden />}
           placeholder={t('navigation.search.placeholder')}
-          inputAriaLabel={t('navigation.search.placeholder')}
-          ariaControls="settings-nav-results"
-          ariaExpanded={isSearchMode}
-          clearable
+          aria-label={t('navigation.search.placeholder')}
+          aria-controls="settings-nav-results"
+          aria-expanded={isSearchMode}
         />
       </div>
 
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
index c972114f39..aee11cc07b 100644
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
+++ b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
@@ -6,39 +6,10 @@
     margin-bottom: 20px;
   }
 
-  /** Component-library `Search` — align with settings nav capsule */
-  &__search.search {
+  /** Design-system `SearchField` — align with settings nav capsule */
+  &__search {
     flex: 1;
     min-width: 0;
-
-    .search__wrapper {
-      height: 32px;
-      min-height: 32px;
-      padding: 0 10px;
-      gap: 8px;
-      border-radius: 6px;
-      /* Match Search defaults; the canonical border token must stay defined to avoid a dropped border. */
-      border: 1px solid var(--bf-appearance-token-border-base);
-      background: var(--bf-appearance-token-element-bg-base);
-    }
-
-    &.search--hovered:not(.search--disabled) .search__wrapper {
-      border-color: var(--bf-appearance-token-border-medium);
-    }
-
-    &.search--focused .search__wrapper,
-    .search__wrapper:focus-within {
-      border-color: var(--bf-appearance-token-color-accent-500);
-      box-shadow: 0 0 0 2px var(--bf-appearance-token-color-accent-100);
-    }
-
-    .search__input {
-      font-size: 13px;
-
-      &::placeholder {
-        color: var(--bf-appearance-token-color-text-muted);
-      }
-    }
   }
 
   &__actions {
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx
index 444d70c8ae..8d48a1dede 100644
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx
+++ b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx
@@ -10,9 +10,10 @@
  * - Reset button restores all defaults
  */
 
-import { Button } from '@bitfun/ui';
+import { Button, SearchField } from '@bitfun/ui';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Search, Tooltip } from '@/component-library';
+import { Search as SearchIcon } from 'lucide-react';
+import { Tooltip } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { ConfigPageLayout, ConfigPageHeader, ConfigPageContent, ConfigPageSection } from '@/infrastructure/config/components/common';
 import {
@@ -248,6 +249,7 @@ function shortcutDisplayName(
 
 const KeyboardShortcutsTab: React.FC = () => {
   const { t } = useI18n('settings');
+  const { t: tComponents } = useI18n('components');
 
   const [registrations, setRegistrations] = useState<ShortcutRegistration[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
@@ -557,17 +559,18 @@ const KeyboardShortcutsTab: React.FC = () => {
       <ConfigPageContent data-bf-component="keyboard-shortcuts" data-bf-part="content">
         {/* Search + actions bar */}
         <div className="kb-shortcuts__toolbar" data-bf-component="keyboard-shortcuts" data-bf-part="toolbar">
-          <Search
+          <SearchField
             className="kb-shortcuts__search"
             data-bf-component="keyboard-shortcuts"
             data-bf-part="search"
-            size="small"
+            size="sm"
             value={searchQuery}
-            onChange={setSearchQuery}
+            onValueChange={setSearchQuery}
+            leadingIcon={<SearchIcon size={14} aria-hidden />}
             placeholder={t('keyboard.search')}
-            inputAriaLabel={t('keyboard.search')}
-            enterToSearch={false}
-            clearable
+            aria-label={t('keyboard.search')}
+            clearLabel={searchQuery ? tComponents('search.clear') : undefined}
+            onClear={searchQuery ? () => setSearchQuery('') : undefined}
           />
           <div className="kb-shortcuts__actions" data-bf-component="keyboard-shortcuts" data-bf-part="actions">
             {hasPendingChanges && (
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.scss b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
index 419fe74c5a..9328ef43bc 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.scss
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
@@ -253,14 +253,6 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 .skills-main__toolbar-search {
   flex: 1;
   min-width: min(260px, 100%);
-
-  .search__wrapper {
-    max-width: 100%;
-    border-radius: $size-radius-base;
-    min-height: 32px;
-    background: var(--bf-appearance-token-element-bg-subtle);
-    border-color: var(--bf-appearance-token-border-medium);
-  }
 }
 
 .skills-main__chip-btn {
@@ -844,11 +836,15 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
     max-width: 100%;
   }
 
-  .badge {
+  [data-bf-component='status-pill'] {
     max-width: 100%;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+    [data-bf-part='label'] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 
@@ -1025,20 +1021,6 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-discover__search {
   width: 100%;
-
-  .search__wrapper {
-    border-radius: $size-radius-base;
-    min-height: 34px;
-    background: var(--bf-appearance-token-element-bg-soft);
-    border-color: var(--bf-appearance-token-border-medium);
-    box-shadow: none;
-    transition: border-color $motion-fast $easing-standard, box-shadow $motion-fast $easing-standard;
-  }
-
-  &.search--focused:not(.search--disabled) .search__wrapper {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 14%, transparent);
-    border-color: var(--bf-appearance-token-color-accent-500);
-  }
 }
 
 .skills-discover__content {
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
index 8b0780e839..b7052150f4 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
@@ -1,4 +1,4 @@
-import { Button, Switch, IconButton, Modal, ConfirmDialog, Field, Select } from '@bitfun/ui';
+import { Button, Switch, IconButton, Input, Modal, ConfirmDialog, Field, SearchField, Select, StatusPill } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ArrowRight,
@@ -12,6 +12,7 @@ import {
   Package,
   Plus,
   Puzzle,
+  Search as SearchIcon,
   ShieldAlert,
   ShieldCheck,
   Trash2,
@@ -20,7 +21,7 @@ import {
   Zap,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge, Input, Search } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 
 import { GalleryDetailModal } from '@/app/components';
 import type { SkillInfo, SkillLevel, SkillMarketItem } from '@/infrastructure/config/types';
@@ -98,6 +99,7 @@ const CATEGORIES: CategoryInfo[] = [
 
 const SkillsScene: React.FC = () => {
   const { t } = useTranslation('scenes/skills');
+  const { t: tComponents } = useI18n('components');
   const notification = useNotification();
   const peerDevice = usePeerDeviceModeOptional();
   const remoteConnectionActive = peerDevice?.peerMode.active === true;
@@ -321,14 +323,16 @@ const SkillsScene: React.FC = () => {
               ) : (
                 <>
                   <div className="skills-main__toolbar" data-bf-scene="skills" data-bf-part="toolbar">
-                    <Search
+                    <SearchField
                       className="skills-main__toolbar-search"
                       value={installedSearch}
-                      onChange={setInstalledSearch}
-                      onClear={() => setInstalledSearch('')}
+                      onValueChange={setInstalledSearch}
+                      leadingIcon={<SearchIcon size={14} aria-hidden />}
                       placeholder={t('toolbar.searchPlaceholder')}
-                      size="small"
-                      clearable
+                      aria-label={t('toolbar.searchPlaceholder')}
+                      size="sm"
+                      clearLabel={installedSearch ? tComponents('search.clear') : undefined}
+                      onClear={installedSearch ? () => setInstalledSearch('') : undefined}
                     />
                     <button
                       type="button"
@@ -477,26 +481,24 @@ const SkillsScene: React.FC = () => {
                               </div>
                               <div className="skills-card__status-badges">
                                 {skill.isBuiltin && (
-                                  <Badge variant="accent">
-                                    <ShieldCheck size={10} />
+                                  <StatusPill tone="accent" leading={<ShieldCheck size={10} />}>
                                     {t('list.item.builtin')}
-                                  </Badge>
+                                  </StatusPill>
                                 )}
                                 {skill.level === 'user'
                                   && installed.globallyDisabledSkillKeys.has(skill.key) && (
-                                  <Badge variant="neutral">
+                                  <StatusPill tone="neutral">
                                     {t('list.item.globalDisabled')}
-                                  </Badge>
+                                  </StatusPill>
                                 )}
                                 {skill.isShadowed && (
                                   <span title={t('list.item.shadowedTooltip', {
                                     source: coverageSourceBySkillKey.get(skill.key)
                                       ?? t('list.item.unknownSource'),
                                   })}>
-                                    <Badge variant="warning">
-                                      <ShieldAlert size={10} />
+                                    <StatusPill tone="warning" leading={<ShieldAlert size={10} />}>
                                       {t('list.item.shadowed')}
-                                    </Badge>
+                                    </StatusPill>
                                   </span>
                                 )}
                               </div>
@@ -512,9 +514,9 @@ const SkillsScene: React.FC = () => {
                                 data-bf-scene="skills"
                                 data-bf-part="installedCardSource"
                               >
-                                <Badge variant="neutral">
+                                <StatusPill tone="neutral">
                                   {getSkillSourceLabel(skill, t('list.item.unknownSource'))}
-                                </Badge>
+                                </StatusPill>
                               </span>
                             </div>
 
@@ -609,16 +611,20 @@ const SkillsScene: React.FC = () => {
                   {t('market.subtitle')}
                 </p>
                 <div className="skills-discover__search-wrapper" data-bf-scene="skills" data-bf-part="discoverSearch">
-                  <Search
+                  <SearchField
                     className="skills-discover__search"
                     value={searchDraft}
-                    onChange={setSearchDraft}
+                    onValueChange={setSearchDraft}
                     onSearch={submitMarketQuery}
-                    onClear={submitMarketQuery}
+                    leadingIcon={<SearchIcon size={15} aria-hidden />}
                     placeholder={t('market.searchPlaceholder')}
-                    size="medium"
-                    clearable
-                    enterToSearch
+                    aria-label={t('market.searchPlaceholder')}
+                    size="md"
+                    clearLabel={searchDraft ? tComponents('search.clear') : undefined}
+                    onClear={searchDraft ? () => {
+                      setSearchDraft('');
+                      submitMarketQuery();
+                    } : undefined}
                   />
                 </div>
               </div>
@@ -695,10 +701,9 @@ const SkillsScene: React.FC = () => {
                           accentSeed={skill.installId}
                           iconKind="market"
                           badges={isInstalled ? (
-                            <Badge variant="success">
-                              <CheckCircle2 size={11} />
+                            <StatusPill tone="success" leading={<CheckCircle2 size={11} />}>
                               {t('market.item.installed')}
-                            </Badge>
+                            </StatusPill>
                           ) : null}
                           meta={(
                             <span className="bitfun-skills-scene__market-meta">
@@ -785,19 +790,18 @@ const SkillsScene: React.FC = () => {
                 source: coverageSourceBySkillKey.get(selectedInstalledSkill.key)
                   ?? t('list.item.unknownSource'),
               })}>
-                <Badge variant="warning">
-                  <ShieldAlert size={11} />
+                <StatusPill tone="warning" leading={<ShieldAlert size={11} />}>
                   {t('list.item.shadowed')}
-                </Badge>
+                </StatusPill>
               </span>
             )}
-            <Badge variant="neutral">
+            <StatusPill tone="neutral">
               {getSkillSourceLabel(selectedInstalledSkill, t('list.item.unknownSource'))}
-            </Badge>
-            <Badge variant={selectedInstalledSkill.isBuiltin ? 'accent' : 'success'}>
+            </StatusPill>
+            <StatusPill tone={selectedInstalledSkill.isBuiltin ? 'accent' : 'success'}>
               {selectedInstalledSkill.isBuiltin ? t('list.item.builtin') : t('list.item.userInstalled')}
-            </Badge>
-            <Badge variant={selectedInstalledSkill.level === 'user' ? 'info' : 'purple'}>
+            </StatusPill>
+            <StatusPill tone={selectedInstalledSkill.level === 'user' ? 'info' : 'accent'}>
               {market.isRemoteWorkspace
                 ? selectedInstalledSkill.level === 'user'
                   ? t('list.item.localUser')
@@ -805,13 +809,12 @@ const SkillsScene: React.FC = () => {
                 : selectedInstalledSkill.level === 'user'
                   ? t('list.item.user')
                   : t('list.item.project')}
-            </Badge>
+            </StatusPill>
           </>
         ) : selectedMarketSkill && installedSkillNames.has(selectedMarketSkill.name) ? (
-          <Badge variant="success">
-            <CheckCircle2 size={11} />
+          <StatusPill tone="success" leading={<CheckCircle2 size={11} />}>
             {t('market.item.installed')}
-          </Badge>
+          </StatusPill>
         ) : null}
         description={selectedInstalledSkill?.description ?? selectedMarketSkill?.description}
         testId="skill-detail-panel"
@@ -970,13 +973,13 @@ const SkillsScene: React.FC = () => {
           ) : null}
 
           <div className="bitfun-skills-scene__path-input">
-            <Input
-              label={t('form.path.label')}
-              placeholder={t('form.path.placeholder')}
-              value={installed.formPath}
-              onChange={(e) => installed.setFormPath(e.target.value)}
-              variant="outlined"
-            />
+            <Field label={t('form.path.label')} controlWidth="fill">
+              <Input
+                placeholder={t('form.path.placeholder')}
+                value={installed.formPath}
+                onChange={(e) => installed.setFormPath(e.target.value)}
+              />
+            </Field>
             <IconButton
               size="md"
               onClick={installed.handleBrowse}
diff --git a/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx b/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx
index 89be604848..875a8c7ef9 100644
--- a/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx
+++ b/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx
@@ -1,8 +1,7 @@
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, StatusPill } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Package, RefreshCw, RotateCcw, Settings2, ShieldAlert, ShieldCheck } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge } from '@/component-library';
 import { confirmDialog } from '@/infrastructure/confirm-dialog';
 import { configAPI } from '@/infrastructure/api';
 import { useWorkspaceManagerSync } from '@/infrastructure/hooks/useWorkspaceManagerSync';
@@ -533,7 +532,7 @@ const SkillsSuiteView: React.FC = () => {
                         <div className="skills-suite__group-title-wrap" data-bf-scene="skills" data-bf-part="suiteGroupTitleWrap">
                           <div className="skills-suite__group-title-row" data-bf-scene="skills" data-bf-part="suiteGroupTitleRow">
                             <span className="skills-suite__group-title" data-bf-scene="skills" data-bf-part="suiteGroupTitle">{group.label}</span>
-                            <Badge variant={groupStateVariant}>{groupStateLabel}</Badge>
+                            <StatusPill tone={groupStateVariant}>{groupStateLabel}</StatusPill>
                           </div>
                           <span className="skills-suite__group-count" data-bf-scene="skills" data-bf-part="suiteGroupCount">
                             {t('suite.groupCount', { total: group.totalCount })}
diff --git a/src/web-ui/src/app/scenes/todos/TodosScene.scss b/src/web-ui/src/app/scenes/todos/TodosScene.scss
index e750f672d1..8bbddd2a82 100644
--- a/src/web-ui/src/app/scenes/todos/TodosScene.scss
+++ b/src/web-ui/src/app/scenes/todos/TodosScene.scss
@@ -729,8 +729,7 @@ $todos-compact-breakpoint: 720px;
       );
     }
 
-    .bf-todos__field-control.bitfun-input-wrapper
-      > .bitfun-input-container[data-bf-component='input'][data-bf-part='container'],
+    .bf-todos__field-control[data-bf-component='input'],
     .bf-todos__field-control.select
       > .select__trigger[data-bf-component='select'][data-bf-part='trigger'] {
       min-height: 36px;
@@ -742,10 +741,8 @@ $todos-compact-breakpoint: 720px;
       box-shadow: none;
     }
 
-    .bf-todos__field-control.bitfun-input-wrapper
-      > .bitfun-input-container[data-bf-component='input'][data-bf-part='container']:hover,
-    .bf-todos__field-control.bitfun-input-wrapper
-      > .bitfun-input-container[data-bf-component='input'][data-bf-part='container']:focus-within,
+    .bf-todos__field-control[data-bf-component='input']:hover,
+    .bf-todos__field-control[data-bf-component='input']:focus-within,
     .bf-todos__field-control.select
       > .select__trigger[data-bf-component='select'][data-bf-part='trigger']:hover,
     .bf-todos__field-control.select
@@ -792,8 +789,7 @@ $todos-compact-breakpoint: 720px;
     min-height: 36px;
     border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
 
-    .bf-datetime-field__input
-      > .bitfun-input-container[data-bf-component='input'][data-bf-part='container'] {
+    .bf-datetime-field__input[data-bf-component='input'] {
       border: 0;
       padding: 0;
       background: transparent;
diff --git a/src/web-ui/src/component-library/components/AppearanceContracts.test.tsx b/src/web-ui/src/component-library/components/AppearanceContracts.test.tsx
index f8a750b058..ae800443bc 100644
--- a/src/web-ui/src/component-library/components/AppearanceContracts.test.tsx
+++ b/src/web-ui/src/component-library/components/AppearanceContracts.test.tsx
@@ -7,7 +7,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Modal, ModalProvider } from '@bitfun/ui';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { Card, CardBody, CardFooter, CardHeader } from './Card/Card';
-import { Input } from './Input/Input';
 
 vi.mock('@/infrastructure/i18n', () => ({
   useI18n: () => ({ t: (key: string) => key }),
@@ -42,12 +41,6 @@ describe('component appearance contracts', () => {
     expect(card).toContain('data-bf-part="title"');
     expect(card).toContain('data-bf-align="between"');
     expect(card).toContain('data-bf-state="interactive"');
-
-    const input = renderToStaticMarkup(<Input variant="filled" size="large" error errorMessage="Invalid" />);
-    expect(input).toContain('data-bf-component="input"');
-    expect(input).toContain('data-bf-part="container"');
-    expect(input).toContain('data-bf-size="large"');
-    expect(input).toContain('data-bf-state="error"');
   });
 
   it('renders Modal through the shared overlay host with stable parts', async () => {
diff --git a/src/web-ui/src/component-library/components/Badge/Badge.scss b/src/web-ui/src/component-library/components/Badge/Badge.scss
deleted file mode 100644
index 4f88525029..0000000000
--- a/src/web-ui/src/component-library/components/Badge/Badge.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Badge — borderless status label styles.
- * Variants: neutral | accent | purple | success | warning | error | info
- */
-
-@use '../../styles/tokens.scss' as tokens;
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: tokens.$badge-padding-y tokens.$badge-padding-x;
-  border-radius: tokens.$badge-border-radius;
-  font-size: var(--bf-appearance-token-font-size-xs);
-  font-weight: tokens.$badge-font-weight;
-  line-height: 1.25;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  flex-shrink: 0;
-
-  &--neutral {
-    background: var(--bf-appearance-token-element-bg-base);
-    color: var(--bf-appearance-token-color-text-secondary);
-  }
-
-  &--accent {
-    background: var(--bf-appearance-token-color-accent-200);
-    color: var(--bf-appearance-token-color-text-secondary);
-  }
-
-  &--purple {
-    background: var(--bf-appearance-token-color-purple-200);
-    color: var(--bf-appearance-token-color-purple-500);
-  }
-
-  &--success {
-    background: var(--bf-appearance-token-color-success-bg);
-    color: var(--bf-appearance-token-color-success);
-  }
-
-  &--warning {
-    background: var(--bf-appearance-token-color-warning-bg);
-    color: var(--bf-appearance-token-color-warning);
-  }
-
-  &--error {
-    background: var(--bf-appearance-token-color-error-bg);
-    color: var(--bf-appearance-token-color-error);
-  }
-
-  &--info {
-    background: var(--bf-appearance-token-color-info-bg);
-    color: var(--bf-appearance-token-color-info);
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Badge/Badge.tsx b/src/web-ui/src/component-library/components/Badge/Badge.tsx
deleted file mode 100644
index c038836623..0000000000
--- a/src/web-ui/src/component-library/components/Badge/Badge.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Badge component — borderless status label with semantic background color.
- */
-
-import React from 'react';
-import './Badge.scss';
-
-export type BadgeVariant = 'neutral' | 'accent' | 'purple' | 'success' | 'warning' | 'error' | 'info';
-
-export interface BadgeProps {
-  children: React.ReactNode;
-  variant?: BadgeVariant;
-  className?: string;
-}
-
-export const Badge: React.FC<BadgeProps> = ({
-  children,
-  variant = 'neutral',
-  className = '',
-}) => {
-  const classNames = ['badge', `badge--${variant}`, className]
-    .filter(Boolean)
-    .join(' ');
-
-  return <span className={classNames} data-bf-component="badge" data-bf-part="root" data-bf-variant={variant}>{children}</span>;
-};
diff --git a/src/web-ui/src/component-library/components/Badge/appearance.ts b/src/web-ui/src/component-library/components/Badge/appearance.ts
deleted file mode 100644
index 2834028d82..0000000000
--- a/src/web-ui/src/component-library/components/Badge/appearance.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const badgeAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'badge', parts: [{ id: 'root' }], facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['neutral', 'accent', 'purple', 'success', 'warning', 'error', 'info'] }],
-};
diff --git a/src/web-ui/src/component-library/components/Badge/index.ts b/src/web-ui/src/component-library/components/Badge/index.ts
deleted file mode 100644
index 8f6c4ea09b..0000000000
--- a/src/web-ui/src/component-library/components/Badge/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeVariant } from './Badge';
diff --git a/src/web-ui/src/component-library/components/CubeLogo/CubeLogo.scss b/src/web-ui/src/component-library/components/CubeLogo/CubeLogo.scss
deleted file mode 100644
index 1591356154..0000000000
--- a/src/web-ui/src/component-library/components/CubeLogo/CubeLogo.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * 3D cube logo styles
- * Supports standard and compact variants
- */
-.cube-logo {
-  --private-cube-logo-particle-rgb: 139, 92, 246;
-  --private-cube-logo-particle-secondary-rgb: 139, 92, 246;
-  --private-cube-logo-face-border-rgb: 110, 110, 120;
-  --private-cube-logo-face-front-rgb: 38, 38, 44;
-  --private-cube-logo-face-back-rgb: 30, 30, 35;
-  --private-cube-logo-face-top-rgb: 52, 52, 60;
-  --private-cube-logo-face-bottom-rgb: 25, 25, 30;
-  --private-cube-logo-face-right-rgb: 45, 45, 52;
-  --private-cube-logo-face-left-rgb: 32, 32, 38;
-  --private-cube-logo-face-front-shadow-rgb: 65, 65, 75;
-  --private-cube-logo-face-back-shadow-rgb: 55, 55, 62;
-  --private-cube-logo-face-top-shadow-rgb: 78, 78, 88;
-  --private-cube-logo-face-bottom-shadow-rgb: 48, 48, 56;
-  --private-cube-logo-face-right-shadow-rgb: 72, 72, 80;
-  --private-cube-logo-face-left-shadow-rgb: 58, 58, 66;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: transparent;
-  position: relative;
-
-  &__particles {
-    position: absolute;
-    inset: -30%;
-    pointer-events: none;
-    z-index: 0;
-  }
-
-  &__particle {
-    position: absolute;
-    border-radius: 50%;
-    background: linear-gradient(
-      135deg,
-      rgba(var(--private-cube-logo-particle-rgb), 0.8),
-      var(--bf-appearance-token-border-accent-strong)
-    );
-    box-shadow: 0 0 6px rgba(var(--private-cube-logo-particle-rgb), 0.5);
-    animation: cube-logo-particle-float 5s ease-in-out infinite;
-  }
-
-  &__scene {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transform-style: preserve-3d;
-    z-index: 1;
-  }
-
-  &__cube {
-    position: relative;
-    transform-style: preserve-3d;
-    transform: rotateX(-35deg) rotateY(45deg);
-  }
-
-  &__block {
-    position: absolute;
-    transform-style: preserve-3d;
-    top: 50%;
-    left: 50%;
-    margin-left: -50%;
-    margin-top: -50%;
-  }
-
-  &__face {
-    position: absolute;
-    backface-visibility: visible;
-    box-sizing: border-box;
-    border: 0.3px solid rgba(var(--private-cube-logo-face-border-rgb), 0.5);
-
-    &--front {
-      background: rgba(var(--private-cube-logo-face-front-rgb), 0.85);
-    }
-    &--back {
-      background: rgba(var(--private-cube-logo-face-back-rgb), 0.8);
-    }
-    &--top {
-      background: rgba(var(--private-cube-logo-face-top-rgb), 0.88);
-    }
-    &--bottom {
-      background: rgba(var(--private-cube-logo-face-bottom-rgb), 0.75);
-    }
-    &--right {
-      background: rgba(var(--private-cube-logo-face-right-rgb), 0.85);
-    }
-    &--left {
-      background: rgba(var(--private-cube-logo-face-left-rgb), 0.8);
-    }
-  }
-
-  &--compact .cube-logo__face {
-    border: none;
-
-    &--front {
-      background: rgba(var(--private-cube-logo-face-front-rgb), 0.85);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-front-shadow-rgb), 0.3);
-    }
-    &--back {
-      background: rgba(var(--private-cube-logo-face-back-rgb), 0.8);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-back-shadow-rgb), 0.25);
-    }
-    &--top {
-      background: rgba(var(--private-cube-logo-face-top-rgb), 0.88);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-top-shadow-rgb), 0.32);
-    }
-    &--bottom {
-      background: rgba(var(--private-cube-logo-face-bottom-rgb), 0.75);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-bottom-shadow-rgb), 0.22);
-    }
-    &--right {
-      background: rgba(var(--private-cube-logo-face-right-rgb), 0.85);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-right-shadow-rgb), 0.3);
-    }
-    &--left {
-      background: rgba(var(--private-cube-logo-face-left-rgb), 0.8);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-left-shadow-rgb), 0.28);
-    }
-  }
-}
-
-:root[data-bf-appearance-mode="light"] .cube-logo,
-:root[data-bf-appearance-mode="light"] .cube-logo,
-[data-bf-appearance-mode="light"] .cube-logo {
-  --private-cube-logo-particle-rgb: 90, 123, 178;
-  --private-cube-logo-particle-secondary-rgb: 124, 107, 153;
-  --private-cube-logo-face-border-rgb: 90, 123, 178;
-  --private-cube-logo-face-front-rgb: 90, 123, 178;
-  --private-cube-logo-face-back-rgb: 90, 123, 178;
-  --private-cube-logo-face-top-rgb: 124, 107, 153;
-  --private-cube-logo-face-bottom-rgb: 90, 123, 178;
-  --private-cube-logo-face-right-rgb: 124, 107, 153;
-  --private-cube-logo-face-left-rgb: 107, 90, 137;
-  --private-cube-logo-face-front-shadow-rgb: 90, 123, 178;
-  --private-cube-logo-face-back-shadow-rgb: 90, 123, 178;
-  --private-cube-logo-face-top-shadow-rgb: 124, 107, 153;
-  --private-cube-logo-face-bottom-shadow-rgb: 90, 123, 178;
-  --private-cube-logo-face-right-shadow-rgb: 124, 107, 153;
-  --private-cube-logo-face-left-shadow-rgb: 107, 90, 137;
-}
-
-:root[data-bf-appearance-mode="light"] {
-  .cube-logo__face {
-    border: 0.3px solid rgba(var(--private-cube-logo-face-border-rgb), 0.4);
-
-    &--front {
-      background: rgba(var(--private-cube-logo-face-front-rgb), 0.45);
-    }
-    &--back {
-      background: rgba(var(--private-cube-logo-face-back-rgb), 0.4);
-    }
-    &--top {
-      background: rgba(var(--private-cube-logo-face-top-rgb), 0.4);
-    }
-    &--bottom {
-      background: rgba(var(--private-cube-logo-face-bottom-rgb), 0.5);
-    }
-    &--right {
-      background: rgba(var(--private-cube-logo-face-right-rgb), 0.45);
-    }
-    &--left {
-      background: rgba(var(--private-cube-logo-face-left-rgb), 0.4);
-    }
-  }
-
-  .cube-logo--compact .cube-logo__face {
-    border: none;
-
-    &--front {
-      background: rgba(var(--private-cube-logo-face-front-rgb), 0.45);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-front-shadow-rgb), 0.3);
-    }
-    &--back {
-      background: rgba(var(--private-cube-logo-face-back-rgb), 0.4);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-back-shadow-rgb), 0.25);
-    }
-    &--top {
-      background: rgba(var(--private-cube-logo-face-top-rgb), 0.4);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-top-shadow-rgb), 0.3);
-    }
-    &--bottom {
-      background: rgba(var(--private-cube-logo-face-bottom-rgb), 0.5);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-bottom-shadow-rgb), 0.35);
-    }
-    &--right {
-      background: rgba(var(--private-cube-logo-face-right-rgb), 0.45);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-right-shadow-rgb), 0.3);
-    }
-    &--left {
-      background: rgba(var(--private-cube-logo-face-left-rgb), 0.4);
-      box-shadow: inset 0 0 0 0.5px rgba(var(--private-cube-logo-face-left-shadow-rgb), 0.28);
-    }
-  }
-
-  .cube-logo__particle {
-    background: linear-gradient(
-      135deg,
-      rgba(var(--private-cube-logo-particle-rgb), 0.5),
-      rgba(var(--private-cube-logo-particle-secondary-rgb), 0.35)
-    );
-    box-shadow: 0 0 6px rgba(var(--private-cube-logo-particle-rgb), 0.3);
-  }
-}
-
-@keyframes cube-logo-particle-float {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-    opacity: 0.3;
-  }
-  25% {
-    transform: translate(10px, -15px) scale(1.2);
-    opacity: 0.6;
-  }
-  50% {
-    transform: translate(-5px, -25px) scale(0.8);
-    opacity: 0.4;
-  }
-  75% {
-    transform: translate(-15px, -10px) scale(1.1);
-    opacity: 0.5;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cube-logo__particle {
-    animation: none;
-    opacity: 0.4;
-    transform: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/CubeLogo/CubeLogo.tsx b/src/web-ui/src/component-library/components/CubeLogo/CubeLogo.tsx
deleted file mode 100644
index 5d4cb23eaa..0000000000
--- a/src/web-ui/src/component-library/components/CubeLogo/CubeLogo.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * 3D cube logo component, pure CSS 3D implementation
- */
-
-import React, { useMemo } from 'react';
-import './CubeLogo.scss';
-
-export type CubeLogoVariant = 'default' | 'compact';
-
-export interface CubeLogoProps {
-  /** Cube size (px) */
-  size?: number;
-  /** Custom class name */
-  className?: string;
-  /** Whether to show particle effects */
-  showParticles?: boolean;
-  /** Variant: default - full | compact - compact (for small sizes) */
-  variant?: CubeLogoVariant;
-}
-
-interface Particle {
-  id: number;
-  x: number;
-  y: number;
-  size: number;
-  duration: number;
-  delay: number;
-  opacity: number;
-}
-
-export const CubeLogo: React.FC<CubeLogoProps> = ({ 
-  size = 100, 
-  className = '', 
-  showParticles = true,
-  variant = 'default'
-}) => {
-  const effectiveVariant = variant === 'default' && size < 50 ? 'compact' : variant;
-  const isCompact = effectiveVariant === 'compact';
-
-  const blockSize = size / 4;
-  const gap = blockSize * 0.12;
-  const actualSize = blockSize - gap;
-
-  const particles = useMemo<Particle[]>(() => {
-    if (!showParticles) return [];
-    const count = 12;
-    return Array.from({ length: count }, (_, i) => ({
-      id: i,
-      x: Math.random() * 140 - 20,
-      y: Math.random() * 140 - 20,
-      size: Math.random() * 3 + 1,
-      duration: Math.random() * 3 + 4,
-      delay: Math.random() * 4,
-      opacity: Math.random() * 0.5 + 0.2,
-    }));
-  }, [showParticles]);
-
-  const blocks = useMemo(() => {
-    const result = [];
-    for (let x = -1; x <= 1; x++) {
-      for (let y = -1; y <= 1; y++) {
-        for (let z = -1; z <= 1; z++) {
-          result.push({ x, y, z, key: `${x}-${y}-${z}` });
-        }
-      }
-    }
-    return result;
-  }, []);
-
-  const renderBlock = (x: number, y: number, z: number, key: string) => {
-    return (
-      <div
-        key={key}
-        className="cube-logo__block"
-        data-bf-component="cube-logo"
-        data-bf-part="block"
-        style={{
-          width: actualSize,
-          height: actualSize,
-          transform: `translate3d(${x * blockSize}px, ${-y * blockSize}px, ${z * blockSize}px)`
-        }}
-      >
-        <div className="cube-logo__face cube-logo__face--front" data-bf-component="cube-logo" data-bf-part="face" style={{ width: actualSize, height: actualSize, transform: `translateZ(${actualSize/2}px)` }} />
-        <div className="cube-logo__face cube-logo__face--back" data-bf-component="cube-logo" data-bf-part="face" style={{ width: actualSize, height: actualSize, transform: `translateZ(${-actualSize/2}px) rotateY(180deg)` }} />
-        <div className="cube-logo__face cube-logo__face--top" data-bf-component="cube-logo" data-bf-part="face" style={{ width: actualSize, height: actualSize, transform: `translateY(${-actualSize/2}px) rotateX(90deg)` }} />
-        <div className="cube-logo__face cube-logo__face--bottom" data-bf-component="cube-logo" data-bf-part="face" style={{ width: actualSize, height: actualSize, transform: `translateY(${actualSize/2}px) rotateX(-90deg)` }} />
-        <div className="cube-logo__face cube-logo__face--right" data-bf-component="cube-logo" data-bf-part="face" style={{ width: actualSize, height: actualSize, transform: `translateX(${actualSize/2}px) rotateY(90deg)` }} />
-        <div className="cube-logo__face cube-logo__face--left" data-bf-component="cube-logo" data-bf-part="face" style={{ width: actualSize, height: actualSize, transform: `translateX(${-actualSize/2}px) rotateY(-90deg)` }} />
-      </div>
-    );
-  };
-
-  return (
-    <div 
-      className={`cube-logo ${isCompact ? 'cube-logo--compact' : ''} ${className}`}
-      data-bf-component="cube-logo"
-      data-bf-part="root"
-      data-bf-variant={variant}
-      style={{ 
-        width: size, 
-        height: size,
-        perspective: size * 3
-      }}
-    >
-      {showParticles && (
-        <div className="cube-logo__particles" data-bf-component="cube-logo" data-bf-part="particles">
-          {particles.map(p => (
-            <span
-              key={p.id}
-              className="cube-logo__particle"
-              data-bf-component="cube-logo"
-              data-bf-part="particle"
-              style={{
-                left: `${p.x}%`,
-                top: `${p.y}%`,
-                width: p.size,
-                height: p.size,
-                opacity: p.opacity,
-                animationDuration: `${p.duration}s`,
-                animationDelay: `${p.delay}s`,
-              }}
-            />
-          ))}
-        </div>
-      )}
-      
-      <div className="cube-logo__scene" data-bf-component="cube-logo" data-bf-part="scene">
-        <div className="cube-logo__cube" data-bf-component="cube-logo" data-bf-part="cube">
-          {blocks.map(({ x, y, z, key }) => renderBlock(x, y, z, key))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-CubeLogo.displayName = 'CubeLogo';
-
-export default CubeLogo;
diff --git a/src/web-ui/src/component-library/components/CubeLogo/appearance.ts b/src/web-ui/src/component-library/components/CubeLogo/appearance.ts
deleted file mode 100644
index e3aeb33031..0000000000
--- a/src/web-ui/src/component-library/components/CubeLogo/appearance.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const cubeLogoAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'cube-logo',
-  parts: [
-    { id: 'root' }, { id: 'particles' }, { id: 'particle' }, { id: 'scene' },
-    { id: 'cube' }, { id: 'block' }, { id: 'face' },
-  ],
-  facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['default', 'compact'] }],
-};
diff --git a/src/web-ui/src/component-library/components/CubeLogo/index.ts b/src/web-ui/src/component-library/components/CubeLogo/index.ts
deleted file mode 100644
index da9153bc51..0000000000
--- a/src/web-ui/src/component-library/components/CubeLogo/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CubeLogo, type CubeLogoProps, type CubeLogoVariant } from './CubeLogo';
-export { default } from './CubeLogo';
diff --git a/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss b/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss
deleted file mode 100644
index d40aa23088..0000000000
--- a/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * FilterPill filter pill component styles
- */
-@use '../../styles/tokens' as *;
-
-.v-filter-pill-group {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.v-filter-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  background: var(--bf-appearance-token-element-bg-soft);
-  border: 1px solid transparent;
-  border-radius: 14px;
-  color: var(--bf-appearance-token-color-text-secondary);
-  font-size: var(--bf-appearance-token-font-size-xs);
-  font-weight: $font-weight-medium;
-  font-family: $font-family-sans;
-  cursor: pointer;
-  transition:
-    background-color $motion-fast $easing-standard,
-    border-color $motion-fast $easing-standard,
-    color $motion-fast $easing-standard,
-    scale $motion-fast $easing-standard;
-  white-space: nowrap;
-
-  &:hover:not(:disabled) {
-    background: var(--bf-appearance-token-element-bg-base);
-    color: var(--bf-appearance-token-color-text-primary);
-  }
-
-  &--active {
-    background: var(--bf-appearance-token-git-color-branch-bg);
-    border-color: transparent;
-    color: var(--bf-appearance-token-git-color-branch);
-
-    .v-filter-pill__count {
-      background: color-mix(in srgb, var(--bf-appearance-token-git-color-branch) 22%, transparent);
-      color: var(--bf-appearance-token-git-color-branch);
-    }
-
-    &:hover:not(:disabled) {
-      background: var(--bf-appearance-token-git-color-branch-bg-hover);
-    }
-  }
-
-  &--disabled {
-    opacity: $opacity-disabled;
-    cursor: not-allowed;
-  }
-
-  &__label {
-    flex-shrink: 0;
-  }
-
-  &__count {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1px 5px;
-    background: var(--bf-appearance-token-element-bg-base);
-    border-radius: 6px;
-    font-size: 10px;
-    font-weight: $font-weight-semibold;
-    font-family: $font-family-mono;
-    color: var(--bf-appearance-token-color-text-muted);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .v-filter-pill {
-    transition:
-      background-color $motion-instant ease,
-      border-color $motion-instant ease,
-      color $motion-instant ease;
-    scale: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/FilterPill/FilterPill.tsx b/src/web-ui/src/component-library/components/FilterPill/FilterPill.tsx
deleted file mode 100644
index 02dfd5102f..0000000000
--- a/src/web-ui/src/component-library/components/FilterPill/FilterPill.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * FilterPill Component
- * Filter button for configuration pages
- */
-
-import React from 'react';
-import './FilterPill.scss';
-
-export interface FilterPillProps {
-  /** Label text */
-  label: string;
-  /** Count (optional) */
-  count?: string | number;
-  /** Whether active */
-  active?: boolean;
-  /** Click callback */
-  onClick?: () => void;
-  /** Custom class name */
-  className?: string;
-  /** Whether disabled */
-  disabled?: boolean;
-}
-
-export const FilterPill: React.FC<FilterPillProps> = ({
-  label,
-  count,
-  active = false,
-  onClick,
-  className = '',
-  disabled = false,
-}) => {
-  const classNames = [
-    'v-filter-pill',
-    active && 'v-filter-pill--active',
-    disabled && 'v-filter-pill--disabled',
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button
-      type="button"
-      className={classNames}
-      data-bf-component="filter-pill"
-      data-bf-part="root"
-      data-bf-state={[active && 'active', disabled && 'disabled'].filter(Boolean).join(' ') || undefined}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      <span className="v-filter-pill__label" data-bf-component="filter-pill" data-bf-part="label">{label}</span>
-      {count !== undefined && (
-        <span className="v-filter-pill__count" data-bf-component="filter-pill" data-bf-part="count">{count}</span>
-      )}
-    </button>
-  );
-};
-
-export interface FilterPillGroupProps {
-  /** Child elements */
-  children: React.ReactNode;
-  /** Custom class name */
-  className?: string;
-}
-
-export const FilterPillGroup: React.FC<FilterPillGroupProps> = ({
-  children,
-  className = '',
-}) => {
-  return (
-    <div className={`v-filter-pill-group ${className}`} data-bf-component="filter-pill" data-bf-part="group">
-      {children}
-    </div>
-  );
-};
diff --git a/src/web-ui/src/component-library/components/FilterPill/appearance.ts b/src/web-ui/src/component-library/components/FilterPill/appearance.ts
deleted file mode 100644
index ceb0c251b3..0000000000
--- a/src/web-ui/src/component-library/components/FilterPill/appearance.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const filterPillAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'filter-pill',
-  parts: [{ id: 'root' }, { id: 'label' }, { id: 'count' }, { id: 'group' }],
-  states: [
-    { id: 'active', selector: { kind: 'self', suffix: '[data-bf-state~="active"]' } },
-    { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } },
-  ],
-};
diff --git a/src/web-ui/src/component-library/components/FilterPill/index.ts b/src/web-ui/src/component-library/components/FilterPill/index.ts
deleted file mode 100644
index b207a3781c..0000000000
--- a/src/web-ui/src/component-library/components/FilterPill/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { FilterPill, FilterPillGroup } from './FilterPill';
-export type { FilterPillProps, FilterPillGroupProps } from './FilterPill';
diff --git a/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx b/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx
index 9ab1ef8cb1..40119a038c 100644
--- a/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx
+++ b/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx
@@ -4,8 +4,9 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { Input } from '@bitfun/ui';
+
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { Input } from './Input';
 import { Textarea } from './Textarea';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
diff --git a/src/web-ui/src/component-library/components/Input/Input.scss b/src/web-ui/src/component-library/components/Input/Input.scss
deleted file mode 100644
index 14e5e3f7c2..0000000000
--- a/src/web-ui/src/component-library/components/Input/Input.scss
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * Input component styles
- */
-@use '../../styles/tokens.scss' as tokens;
-
-.bitfun-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-
-  &--small {
-    .bitfun-input-container {
-      height: 28px;
-      font-size: 13px;
-    }
-
-    .bitfun-input-prefix,
-    .bitfun-input-suffix {
-      font-size: 13px;
-    }
-  }
-
-  &--medium {
-    .bitfun-input-container {
-      height: 36px;
-      font-size: 14px;
-    }
-  }
-
-  &--large {
-    .bitfun-input-container {
-      height: 44px;
-      font-size: 15px;
-    }
-  }
-
-  &--default {
-    .bitfun-input-container {
-      background: transparent;
-      border: 1px solid var(--bf-appearance-token-border-base);
-    }
-  }
-
-  &--filled {
-    .bitfun-input-container {
-      background: var(--bf-appearance-token-element-bg-subtle);
-      border: 1px solid transparent;
-
-      &:hover:not(.bitfun-input-wrapper--disabled &) {
-        background: var(--bf-appearance-token-element-bg-soft);
-        border-color: var(--bf-appearance-token-border-base);
-      }
-
-      &:focus-within {
-        background: var(--bf-appearance-token-element-bg-soft);
-        border-color: transparent;
-      }
-
-      &:hover:focus-within {
-        border-color: var(--bf-appearance-token-color-accent-500);
-      }
-    }
-  }
-
-  &--outlined {
-    .bitfun-input-container {
-      background: transparent;
-      border: 1px solid var(--bf-appearance-token-border-medium);
-    }
-  }
-
-  &--error {
-    .bitfun-input-container {
-      border-color: var(--bf-appearance-token-color-error-border) !important;
-
-      &:hover:not(.bitfun-input-wrapper--disabled &) {
-        border-color: var(--bf-appearance-token-color-error) !important;
-      }
-
-      &:focus-within {
-        border-color: var(--bf-appearance-token-color-error) !important;
-      }
-    }
-  }
-
-  &--disabled {
-    opacity: var(--bf-appearance-token-opacity-disabled);
-    cursor: default;
-
-    .bitfun-input-container {
-      background: transparent;
-    }
-  }
-}
-
-.bitfun-input-label {
-  font-size: var(--bf-appearance-token-font-size-sm);
-  font-weight: var(--bf-appearance-token-font-weight-medium);
-  color: var(--bf-appearance-token-color-text-secondary);
-  letter-spacing: 0.2px;
-}
-
-.bitfun-input-container {
-  display: flex;
-  align-items: center;
-  gap: var(--bf-appearance-token-size-gap-2);
-  padding: 0 var(--bf-appearance-token-size-gap-3);
-  border-radius: 4px;
-  transition:
-    background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-    border-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-    box-shadow var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-  position: relative;
-  min-width: 0;
-  overflow: hidden;
-
-  &:hover:not(.bitfun-input-wrapper--disabled &) {
-    background: var(--bf-appearance-token-element-bg-subtle);
-    border-color: var(--bf-appearance-token-border-strong);
-  }
-
-  &:focus-within {
-    background: transparent;
-    border-color: var(--bf-appearance-token-color-accent-500);
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 14%, transparent);
-  }
-}
-
-.bitfun-input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  background: transparent;
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-  color: var(--bf-appearance-token-color-text-primary);
-  font-family: inherit;
-  position: relative;
-  z-index: 1;
-
-  // Blend muted text toward page background so placeholders read as hints, not as user input
-  // The active appearance supplies the same token pair for both modes.
-  &::placeholder {
-    color: color-mix(
-      in srgb,
-      var(--bf-appearance-token-color-text-muted) 40%,
-      var(--bf-appearance-token-color-bg-primary)
-    );
-  }
-
-  &::selection {
-    border-radius: 2px;
-    background: var(--bf-appearance-token-color-accent-300);
-  }
-
-  &:focus,
-  &:focus-visible {
-    border: none !important;
-    outline: none !important;
-    outline-offset: 0 !important;
-    box-shadow: none !important;
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-}
-
-.bitfun-input-prefix,
-.bitfun-input-suffix {
-  color: var(--bf-appearance-token-color-text-muted);
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 1;
-}
-
-.bitfun-input-toggle {
-  background: none;
-  border: none;
-  padding: 2px;
-  cursor: pointer;
-  color: var(--bf-appearance-token-color-text-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition:
-    color var(--bf-appearance-token-motion-fast) ease,
-    scale var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-
-  &:hover {
-    color: var(--bf-appearance-token-color-text-secondary);
-  }
-}
-
-.bitfun-input-hint,
-.bitfun-input-error-message {
-  font-size: var(--bf-appearance-token-font-size-xs);
-  color: var(--bf-appearance-token-color-error);
-  margin-top: -2px;
-}
-
-.bitfun-input-hint {
-  color: var(--bf-appearance-token-color-text-muted);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bitfun-input-wrapper:not(.bitfun-input-wrapper--disabled) .bitfun-input-container:hover {
-    background: var(--bf-appearance-token-element-bg-subtle);
-    border-color: var(--bf-appearance-token-border-strong);
-  }
-
-  .bitfun-input-wrapper--filled:not(.bitfun-input-wrapper--disabled) .bitfun-input-container:hover {
-    background: var(--bf-appearance-token-element-bg-soft);
-    border-color: var(--bf-appearance-token-border-base);
-  }
-
-  .bitfun-input-wrapper--filled .bitfun-input-container:hover:focus-within {
-    border-color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  .bitfun-input-wrapper--error:not(.bitfun-input-wrapper--disabled) .bitfun-input-container:hover {
-    border-color: var(--bf-appearance-token-color-error) !important;
-  }
-
-  .bitfun-input-toggle:hover {
-    color: var(--bf-appearance-token-color-text-secondary);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-input-container {
-    transition-duration: var(--bf-appearance-token-motion-instant);
-  }
-
-  .bitfun-input-toggle {
-    transition: color var(--bf-appearance-token-motion-instant) ease;
-  }
-
-  .bitfun-input-toggle:active {
-    scale: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Input/Input.tsx b/src/web-ui/src/component-library/components/Input/Input.tsx
deleted file mode 100644
index 18dd1c1d06..0000000000
--- a/src/web-ui/src/component-library/components/Input/Input.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Input component
- */
-
-import React, { forwardRef, useId, useRef } from 'react';
-import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import './Input.scss';
-
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
-  variant?: 'default' | 'filled' | 'outlined';
-  inputSize?: 'small' | 'medium' | 'large';
-  size?: 'small' | 'medium' | 'large';
-  error?: boolean;
-  errorMessage?: string;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  label?: string;
-  hint?: React.ReactNode;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(({
-  variant = 'default',
-  inputSize = 'medium',
-  size,
-  error = false,
-  errorMessage,
-  prefix,
-  suffix,
-  label,
-  hint,
-  className = '',
-  disabled,
-  onKeyDown,
-  onCompositionStart,
-  onCompositionEnd,
-  ...props
-}, ref) => {
-  const compositionActiveRef = useRef(false);
-  const generatedId = useId();
-  const inputId = props.id ?? `${generatedId}-input`;
-  const supportId = `${generatedId}-support`;
-  const resolvedInputSize = size ?? inputSize;
-  const classNames = [
-    'bitfun-input-wrapper',
-    `bitfun-input-wrapper--${variant}`,
-    `bitfun-input-wrapper--${resolvedInputSize}`,
-    error && 'bitfun-input-wrapper--error',
-    disabled && 'bitfun-input-wrapper--disabled',
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-  const appearanceState = [error && 'error', disabled && 'disabled'].filter(Boolean).join(' ');
-
-  return (
-    <div
-      className={classNames}
-      data-bf-component="input"
-      data-bf-part="root"
-      data-bf-variant={variant}
-      data-bf-size={resolvedInputSize}
-      data-bf-state={appearanceState || undefined}
-    >
-      {label && <label className="bitfun-input-label" htmlFor={inputId} data-bf-component="input" data-bf-part="label">{label}</label>}
-      <div className="bitfun-input-container" data-bf-component="input" data-bf-part="container">
-        {prefix && <span className="bitfun-input-prefix" data-bf-component="input" data-bf-part="prefix">{prefix}</span>}
-        <input
-          {...props}
-          ref={ref}
-          id={inputId}
-          className="bitfun-input"
-          data-bf-component="input"
-          data-bf-part="control"
-          disabled={disabled}
-          onKeyDown={(event) => {
-            if (
-              (event.key === 'Enter' || event.key === 'Escape')
-              && isImeOwnedKeyboardEvent(event, compositionActiveRef.current)
-            ) {
-              event.stopPropagation();
-              return;
-            }
-            onKeyDown?.(event);
-          }}
-          onCompositionStart={(event) => {
-            compositionActiveRef.current = true;
-            onCompositionStart?.(event);
-          }}
-          onCompositionEnd={(event) => {
-            compositionActiveRef.current = false;
-            onCompositionEnd?.(event);
-          }}
-          aria-invalid={error || undefined}
-          aria-describedby={(error && errorMessage) || (!error && hint) ? supportId : props['aria-describedby']}
-        />
-        {suffix && <span className="bitfun-input-suffix" data-bf-component="input" data-bf-part="suffix">{suffix}</span>}
-      </div>
-      {!error && hint && (
-        <span id={supportId} className="bitfun-input-hint" data-bf-component="input" data-bf-part="message">{hint}</span>
-      )}
-      {error && errorMessage && (
-        <span id={supportId} className="bitfun-input-error-message" role="alert" data-bf-component="input" data-bf-part="message">{errorMessage}</span>
-      )}
-    </div>
-  );
-});
-
-Input.displayName = 'Input';
diff --git a/src/web-ui/src/component-library/components/Input/appearance.ts b/src/web-ui/src/component-library/components/Input/appearance.ts
deleted file mode 100644
index 1797eecd40..0000000000
--- a/src/web-ui/src/component-library/components/Input/appearance.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const inputAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'input',
-  parts: [
-    { id: 'root', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'label', propertyProfile: 'paint', visualRole: 'content' },
-    { id: 'container', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'control', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'prefix', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'suffix', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'message', propertyProfile: 'paint', visualRole: 'content' },
-  ],
-  facets: [
-    {
-      id: 'variant',
-      attribute: 'data-bf-variant',
-      values: ['default', 'filled', 'outlined'],
-    },
-    {
-      id: 'size',
-      attribute: 'data-bf-size',
-      values: ['small', 'medium', 'large'],
-    },
-  ],
-  states: [
-    { id: 'hover', selector: { kind: 'self', suffix: ':hover' } },
-    { id: 'focusWithin', selector: { kind: 'self', suffix: ':focus-within' } },
-    { id: 'focusVisible', selector: { kind: 'self', suffix: ':focus-visible' } },
-    { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } },
-    { id: 'error', selector: { kind: 'self', suffix: '[data-bf-state~="error"]' } },
-  ],
-};
diff --git a/src/web-ui/src/component-library/components/Input/index.ts b/src/web-ui/src/component-library/components/Input/index.ts
deleted file mode 100644
index 0e5676dbb3..0000000000
--- a/src/web-ui/src/component-library/components/Input/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Input } from './Input';
-export type { InputProps } from './Input';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/InputDialog/InputDialog.scss b/src/web-ui/src/component-library/components/InputDialog/InputDialog.scss
index ed6efb8cfb..7898664e71 100644
--- a/src/web-ui/src/component-library/components/InputDialog/InputDialog.scss
+++ b/src/web-ui/src/component-library/components/InputDialog/InputDialog.scss
@@ -7,6 +7,18 @@
 
   &__body {
     padding: 20px 20px 16px;
+
+    > [data-bf-component='input'] {
+      width: 100%;
+    }
+  }
+
+  &__error {
+    display: block;
+    margin-top: 6px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--bf-color-status-danger-content);
   }
 
   &__description {
diff --git a/src/web-ui/src/component-library/components/InputDialog/InputDialog.tsx b/src/web-ui/src/component-library/components/InputDialog/InputDialog.tsx
index d8b3317bef..c35d251589 100644
--- a/src/web-ui/src/component-library/components/InputDialog/InputDialog.tsx
+++ b/src/web-ui/src/component-library/components/InputDialog/InputDialog.tsx
@@ -4,9 +4,8 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Modal } from '@bitfun/ui';
+import { Button, Input, Modal } from '@bitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
-import { Input } from '../Input/Input';
 import './InputDialog.scss';
 
 export interface InputDialogProps {
@@ -125,11 +124,21 @@ export const InputDialog: React.FC<InputDialogProps> = ({
             onChange={handleChange}
             onKeyDown={handleKeyDown}
             placeholder={resolvedPlaceholder}
-            error={!!error}
-            errorMessage={error || undefined}
-            inputSize="medium"
+            invalid={!!error}
+            aria-describedby={error ? 'input-dialog-error' : undefined}
             autoFocus
           />
+          {error && (
+            <span
+              className="input-dialog__error"
+              data-bf-component="input-dialog"
+              data-bf-part="error"
+              id="input-dialog-error"
+              role="alert"
+            >
+              {error}
+            </span>
+          )}
         </div>
 
         <div className="input-dialog__actions" data-bf-component="input-dialog" data-bf-part="actions">
diff --git a/src/web-ui/src/component-library/components/InputDialog/appearance.ts b/src/web-ui/src/component-library/components/InputDialog/appearance.ts
index ebca55203e..9e9732ae04 100644
--- a/src/web-ui/src/component-library/components/InputDialog/appearance.ts
+++ b/src/web-ui/src/component-library/components/InputDialog/appearance.ts
@@ -2,5 +2,5 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/ty
 
 export const inputDialogAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'input-dialog',
-  parts: [{ id: 'root' }, { id: 'body' }, { id: 'description' }, { id: 'actions' }],
+  parts: [{ id: 'root' }, { id: 'body' }, { id: 'description' }, { id: 'error' }, { id: 'actions' }],
 };
diff --git a/src/web-ui/src/component-library/components/README.md b/src/web-ui/src/component-library/components/README.md
index 6be6326af4..bb9ee6db69 100644
--- a/src/web-ui/src/component-library/components/README.md
+++ b/src/web-ui/src/component-library/components/README.md
@@ -19,10 +19,10 @@ Current component folders include:
 - **Actions & window controls**: `IconButton`, `WindowControls`
 - **Dialogs & overlays**: `Modal`, `InputDialog`, `ConfirmDialog`, `Tooltip`
 - **Form inputs**: `Input`, `NumberInput`, `Search`, `Select`, `Checkbox`, `Textarea`
-- **Display & content**: `Alert`, `Badge`, `Tag`, `Avatar`, `Card`, `Empty`, `Markdown`, `Tabs`
-- **Editors & text**: `CodeEditor`, `StreamText`
-- **Visual utilities**: `CubeLoading`, `CubeLogo`, `DotMatrixLoader`, `TextStrokeEffect`
-- **Feature-specific UI**: `ConfigPage`, `FilterPill`, `FlowChatCards`
+- **Display & content**: `Alert`, `Tag`, `Avatar`, `Card`, `Empty`, `Markdown`, `Tabs`
+- **Editors & text**: `CodeEditor`
+- **Visual utilities**: `CubeLoading`, `DotMatrixLoader`
+- **Feature-specific UI**: `ConfigPage`, `FlowChatCards`
 
 ## Exports and Previews
 
diff --git a/src/web-ui/src/component-library/components/README.zh-CN.md b/src/web-ui/src/component-library/components/README.zh-CN.md
index 17293d3711..4c9ad01172 100644
--- a/src/web-ui/src/component-library/components/README.zh-CN.md
+++ b/src/web-ui/src/component-library/components/README.zh-CN.md
@@ -19,10 +19,10 @@ BitFun 组件库目录，承载可复用 UI 组件与可预览的演示注册。
 - **操作与窗口控件**：`IconButton`、`WindowControls`
 - **弹窗与浮层**：`Modal`、`InputDialog`、`ConfirmDialog`、`Tooltip`
 - **表单输入**：`Input`、`NumberInput`、`Search`、`Select`、`Checkbox`、`Textarea`
-- **展示与内容**：`Alert`、`Badge`、`Tag`、`Avatar`、`Card`、`Empty`、`Markdown`、`Tabs`
-- **编辑与文本**：`CodeEditor`、`StreamText`
-- **视觉辅助**：`CubeLoading`、`CubeLogo`、`DotMatrixLoader`、`TextStrokeEffect`
-- **业务型 UI**：`ConfigPage`、`FilterPill`、`FlowChatCards`
+- **展示与内容**：`Alert`、`Tag`、`Avatar`、`Card`、`Empty`、`Markdown`、`Tabs`
+- **编辑与文本**：`CodeEditor`
+- **视觉辅助**：`CubeLoading`、`DotMatrixLoader`
+- **业务型 UI**：`ConfigPage`、`FlowChatCards`
 
 ## 导出与预览
 
diff --git a/src/web-ui/src/component-library/components/Search/Search.scss b/src/web-ui/src/component-library/components/Search/Search.scss
deleted file mode 100644
index 7876309b36..0000000000
--- a/src/web-ui/src/component-library/components/Search/Search.scss
+++ /dev/null
@@ -1,340 +0,0 @@
-/**
- * Search input styles
- */
-@use '../../styles/tokens.scss' as *;
-
-.search {
-  position: relative;
-  width: 100%;
-
-  &__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: $size-gap-2;
-    padding: $size-gap-2 $size-gap-3;
-    background: transparent;
-    border: 1px solid var(--bf-appearance-token-border-base);
-    border-radius: $size-radius-sm;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      border-color var(--bf-appearance-token-motion-fast) ease,
-      box-shadow var(--bf-appearance-token-motion-fast) ease;
-    min-height: 36px;
-  }
-
-  &--hovered:not(.search--disabled) &__wrapper {
-    border-color: var(--bf-appearance-token-border-medium);
-  }
-
-  &--focused:not(.search--disabled) &__wrapper {
-    border-color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  &--focused:not(.search--disabled) &__prefix {
-    .search__icon {
-      color: var(--bf-appearance-token-color-accent-500);
-    }
-  }
-
-  &--expandable:not(.search--focused) &__wrapper {
-    width: 200px;
-  }
-
-  &--expandable.search--focused &__wrapper {
-    width: 100%;
-  }
-
-  &__prefix {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    color: var(--bf-appearance-token-color-text-muted);
-    transition: color $motion-base $easing-standard;
-  }
-
-  &__icon {
-    display: block;
-    transition: color var(--bf-appearance-token-motion-fast) ease;
-  }
-
-  &__loading-icon {
-    display: block;
-    color: var(--bf-appearance-token-color-accent-500);
-    animation: search-spin 0.85s linear infinite;
-    transform-origin: center;
-    will-change: transform;
-  }
-
-  &__loading-track {
-    opacity: 0.2;
-  }
-
-  &__loading-arc {
-    opacity: 1;
-  }
-
-  &__input {
-    flex: 1;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-primary);
-    font-size: var(--bf-appearance-token-font-size-sm);
-    font-family: $font-family-sans;
-    line-height: $line-height-base;
-    padding: 0;
-    min-width: 0;
-
-    &::placeholder {
-      color: var(--bf-appearance-token-color-text-muted);
-      transition: color $motion-base $easing-standard;
-    }
-
-    &:focus {
-      border: none !important;
-      outline: none !important;
-      box-shadow: none !important;
-
-      &::placeholder {
-        color: var(--bf-appearance-token-color-text-disabled);
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-      opacity: 0.5;
-    }
-
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active {
-      -webkit-box-shadow: 0 0 0 30px transparent inset !important;
-      -webkit-text-fill-color: var(--bf-appearance-token-color-text-primary) !important;
-      border: none !important;
-      outline: none !important;
-    }
-  }
-
-  &__clear {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-    scale: none;
-    transition: none;
-
-    &:active {
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-
-  &__suffix-content {
-    display: flex;
-    align-items: center;
-    gap: $size-gap-2;
-    flex-shrink: 0;
-    margin-left: $size-gap-2;
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: $size-gap-2 $size-gap-4;
-    border: 1px solid var(--bf-appearance-token-color-accent-500);
-    border-radius: $size-radius-sm;
-    background: transparent;
-    color: var(--bf-appearance-token-color-accent-500);
-    font-size: var(--bf-appearance-token-font-size-sm);
-    font-weight: $font-weight-medium;
-    font-family: $font-family-sans;
-    cursor: pointer;
-    scale: 1;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      border-color var(--bf-appearance-token-motion-fast) ease,
-      color var(--bf-appearance-token-motion-fast) ease,
-      scale var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    white-space: nowrap;
-
-    &:active:not(:disabled) {
-      scale: 0.97;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-  }
-
-  &--disabled {
-    opacity: 0.5;
-    cursor: default;
-
-    .search__wrapper {
-      cursor: default;
-    }
-  }
-
-  &--error {
-    .search__wrapper {
-      border-color: var(--bf-appearance-token-color-error);
-    }
-
-    .search__prefix {
-      color: var(--bf-appearance-token-color-error);
-    }
-  }
-
-  &__error-message {
-    margin-top: $size-gap-2;
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-error);
-    display: flex;
-    align-items: center;
-    gap: $size-gap-1;
-    animation: search-slide-down var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-  }
-
-  &--small {
-    .search__wrapper {
-      padding: $size-gap-1 $size-gap-2;
-      min-height: 30px;
-      gap: $size-gap-1;
-    }
-
-    .search__input {
-      font-size: var(--bf-appearance-token-font-size-xs);
-    }
-
-    .search__icon,
-    .search__loading-icon {
-      width: 14px;
-      height: 14px;
-    }
-
-    .search__clear {
-      width: 16px;
-      height: 16px;
-
-      svg {
-        width: 12px;
-        height: 12px;
-      }
-    }
-
-    .search__button {
-      padding: $size-gap-1 $size-gap-2;
-      font-size: var(--bf-appearance-token-font-size-xs);
-    }
-  }
-
-  &--large {
-    .search__wrapper {
-      padding: $size-gap-3 $size-gap-4;
-      min-height: 44px;
-      gap: $size-gap-3;
-    }
-
-    .search__input {
-      font-size: var(--bf-appearance-token-font-size-base);
-    }
-
-    .search__icon,
-    .search__loading-icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    .search__clear {
-      width: 22px;
-      height: 22px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    .search__button {
-      padding: $size-gap-2 $size-gap-5;
-      font-size: var(--bf-appearance-token-font-size-base);
-    }
-  }
-
-  &--with-button &__wrapper {
-    padding-right: $size-gap-2;
-  }
-}
-
-
-@keyframes search-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes search-slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .search__clear:hover {
-    color: var(--bf-appearance-token-color-text-primary);
-    background: var(--bf-appearance-token-element-bg-subtle);
-  }
-
-  .search__button:hover:not(:disabled) {
-    background: var(--bf-appearance-token-color-accent-100);
-    color: var(--bf-appearance-token-color-accent-400);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .search__wrapper,
-  .search__button {
-    transition:
-      background-color var(--bf-appearance-token-motion-instant) ease,
-      border-color var(--bf-appearance-token-motion-instant) ease,
-      color var(--bf-appearance-token-motion-instant) ease;
-  }
-
-  .search__clear,
-  .search__error-message {
-    animation: none;
-  }
-
-  .search__clear {
-    transition: none;
-    scale: none;
-  }
-
-  .search__loading-icon {
-    animation: none;
-  }
-
-  .search__clear:active,
-  .search__button:active:not(:disabled) {
-    scale: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Search/Search.tsx b/src/web-ui/src/component-library/components/Search/Search.tsx
deleted file mode 100644
index 4cc128ae93..0000000000
--- a/src/web-ui/src/component-library/components/Search/Search.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-/**
- * Search input component
- */
-
-import React, { useState, useRef, useEffect, useCallback, forwardRef, useId } from 'react';
-import { useI18n } from '@/infrastructure/i18n';
-import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import './Search.scss';
-
-function SearchGlyph() {
-  return (
-    <svg
-      className="search__icon"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <circle
-        cx="11"
-        cy="11"
-        r="7"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <path
-        d="M20 20L16.5 16.5"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function LoadingGlyph() {
-  return (
-    <svg
-      className="search__loading-icon"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <circle
-        className="search__loading-track"
-        cx="12"
-        cy="12"
-        r="9"
-        stroke="currentColor"
-        strokeWidth="3"
-      />
-      <path
-        className="search__loading-arc"
-        d="M12 3A9 9 0 0 1 21 12"
-        stroke="currentColor"
-        strokeWidth="3"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown'> {
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-  onSearch?: (value: string) => void;
-  onClear?: () => void;
-  /** Fired before built-in key handling; call `preventDefault` to skip Enter/Escape behavior. */
-  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  size?: 'small' | 'medium' | 'large';
-  clearable?: boolean;
-  loading?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-  autoFocus?: boolean;
-  maxLength?: number;
-  className?: string;
-  expandOnFocus?: boolean;
-  enterToSearch?: boolean;
-  prefixIcon?: React.ReactNode;
-  searchButtonText?: string;
-  showSearchButton?: boolean;
-  suffixContent?: React.ReactNode;
-  /** Overrides default aria-label on the input. */
-  inputAriaLabel?: string;
-  ariaControls?: string;
-  ariaExpanded?: boolean;
-}
-
-export const Search = forwardRef<HTMLInputElement, SearchProps>(({
-  value,
-  defaultValue = '',
-  placeholder,
-  disabled = false,
-  onChange,
-  onSearch,
-  onClear,
-  onKeyDown: onKeyDownProp,
-  onFocus: onFocusProp,
-  onBlur: onBlurProp,
-  size = 'medium',
-  clearable = true,
-  loading = false,
-  error = false,
-  errorMessage,
-  autoFocus = false,
-  maxLength,
-  className = '',
-  expandOnFocus = false,
-  enterToSearch = true,
-  prefixIcon,
-  searchButtonText,
-  showSearchButton = false,
-  suffixContent,
-  inputAriaLabel,
-  ariaControls,
-  ariaExpanded,
-  ...rootProps
-}, ref) => {
-  const { t } = useI18n('components');
-  const generatedId = useId();
-  const errorId = `${generatedId}-error`;
-  
-  // Resolve i18n default values
-  const resolvedPlaceholder = placeholder ?? t('search.placeholder');
-  const resolvedSearchButtonText = searchButtonText ?? t('search.placeholder').replace('...', '');
-  const [inputValue, setInputValue] = useState<string>(
-    value !== undefined ? value : defaultValue
-  );
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const compositionActiveRef = useRef(false);
-
-  const setForwardedRef = useCallback((node: HTMLInputElement | null) => {
-    if (typeof ref === 'function') {
-      ref(node);
-      return;
-    }
-    if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
-    }
-  }, [ref]);
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setInputValue(value);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [autoFocus]);
-
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setInputValue(newValue);
-    onChange?.(newValue);
-  }, [onChange]);
-
-  const handleSearch = useCallback(() => {
-    if (!disabled && !loading) {
-      onSearch?.(inputValue);
-    }
-  }, [inputValue, onSearch, disabled, loading]);
-
-  const handleClear = useCallback((e?: React.SyntheticEvent) => {
-    e?.stopPropagation();
-    setInputValue('');
-    onChange?.('');
-    onClear?.();
-    inputRef.current?.focus();
-  }, [onChange, onClear]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (
-      (e.key === 'Enter' || e.key === 'Escape')
-      && isImeOwnedKeyboardEvent(e, compositionActiveRef.current)
-    ) {
-      e.stopPropagation();
-      return;
-    }
-    onKeyDownProp?.(e);
-    if (e.defaultPrevented) {
-      return;
-    }
-    if (e.key === 'Enter' && enterToSearch) {
-      e.preventDefault();
-      handleSearch();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      if (inputValue) {
-        handleClear(e);
-      } else {
-        inputRef.current?.blur();
-      }
-    }
-  }, [inputValue, enterToSearch, handleSearch, handleClear, onKeyDownProp]);
-
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    onFocusProp?.();
-  }, [onFocusProp]);
-
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    onBlurProp?.();
-  }, [onBlurProp]);
-
-  const classNames = [
-    'search',
-    `search--${size}`,
-    isFocused && 'search--focused',
-    isHovered && 'search--hovered',
-    disabled && 'search--disabled',
-    error && 'search--error',
-    loading && 'search--loading',
-    expandOnFocus && 'search--expandable',
-    showSearchButton && 'search--with-button',
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className={classNames} data-bf-component="search" data-bf-part="root" data-bf-size={size} data-bf-state={[isFocused && 'focused', isHovered && 'hover', disabled && 'disabled', error && 'error', loading && 'loading', expandOnFocus && 'expandable'].filter(Boolean).join(' ') || undefined} {...rootProps}>
-      <div 
-        className="search__wrapper"
-        data-bf-component="search"
-        data-bf-part="wrapper"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <div className="search__prefix" data-bf-component="search" data-bf-part="prefix">
-          {loading ? <LoadingGlyph /> : (prefixIcon || <SearchGlyph />)}
-        </div>
-
-        <input
-          ref={(node) => {
-            inputRef.current = node;
-            setForwardedRef(node);
-          }}
-          type="text"
-          className="search__input"
-          value={inputValue}
-          placeholder={resolvedPlaceholder}
-          disabled={disabled}
-          maxLength={maxLength}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onCompositionStart={() => {
-            compositionActiveRef.current = true;
-          }}
-          onCompositionEnd={() => {
-            compositionActiveRef.current = false;
-          }}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          aria-label={inputAriaLabel ?? t('search.placeholder')}
-          aria-controls={ariaControls}
-          aria-expanded={ariaExpanded}
-          aria-busy={loading || undefined}
-          aria-invalid={error || undefined}
-          aria-describedby={error && errorMessage ? errorId : undefined}
-         data-bf-component="search" data-bf-part="input"/>
-
-        {clearable && inputValue && !loading && !disabled && (
-          <button
-            type="button"
-            className="search__clear"
-            onClick={handleClear}
-            aria-label={t('search.clear')}
-            tabIndex={-1}
-            data-bf-component="search"
-            data-bf-part="clear"
-          >
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-              <path
-                d="M4 4L12 12M12 4L4 12"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            </svg>
-          </button>
-        )}
-
-        {suffixContent && (
-          <div className="search__suffix-content" data-bf-component="search" data-bf-part="suffix">
-            {suffixContent}
-          </div>
-        )}
-
-        {showSearchButton && (
-          <button
-            type="button"
-            className="search__button"
-            onClick={handleSearch}
-            disabled={disabled || loading}
-            aria-label={t('search.placeholder')}
-            data-bf-component="search"
-            data-bf-part="button"
-          >
-            {resolvedSearchButtonText}
-          </button>
-        )}
-      </div>
-
-      {error && errorMessage && (
-        <div id={errorId} className="search__error-message" role="alert" data-bf-component="search" data-bf-part="message">{errorMessage}</div>
-      )}
-    </div>
-  );
-});
-
-Search.displayName = 'Search';
diff --git a/src/web-ui/src/component-library/components/Search/appearance.ts b/src/web-ui/src/component-library/components/Search/appearance.ts
deleted file mode 100644
index 3e04a32226..0000000000
--- a/src/web-ui/src/component-library/components/Search/appearance.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const searchAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'search', parts: [
-    { id: 'root', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'wrapper', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'prefix', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'input', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'clear', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'suffix', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'button', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'message', propertyProfile: 'paint', visualRole: 'content' },
-  ],
-  facets: [{ id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large'] }],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: '[data-bf-state~="hover"]' } }, { id: 'focusWithin', selector: { kind: 'self', suffix: '[data-bf-state~="focused"]' } }, { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } }, { id: 'error', selector: { kind: 'self', suffix: '[data-bf-state~="error"]' } }, { id: 'loading', selector: { kind: 'self', suffix: '[data-bf-state~="loading"]' } }, { id: 'expandable', selector: { kind: 'self', suffix: '[data-bf-state~="expandable"]' } }],
-};
diff --git a/src/web-ui/src/component-library/components/Search/index.ts b/src/web-ui/src/component-library/components/Search/index.ts
deleted file mode 100644
index b7fa2ddf77..0000000000
--- a/src/web-ui/src/component-library/components/Search/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Search } from './Search';
-export type { SearchProps } from './Search';
-
diff --git a/src/web-ui/src/component-library/components/StreamText/StreamText.scss b/src/web-ui/src/component-library/components/StreamText/StreamText.scss
deleted file mode 100644
index b8ac026362..0000000000
--- a/src/web-ui/src/component-library/components/StreamText/StreamText.scss
+++ /dev/null
@@ -1,669 +0,0 @@
-/* Streaming text output styles */
-.stream-text {
-  --char-index: 0;
-  --stream-text-matrix-green-rgb: 0, 255, 0;
-  --stream-text-rainbow-pink-rgb: 255, 0, 128;
-  --stream-text-rainbow-orange-rgb: 255, 140, 0;
-  --stream-text-rainbow-teal-rgb: 64, 224, 208;
-  --stream-text-rainbow-sky-rgb: 0, 191, 255;
-  --stream-text-rainbow-purple-rgb: 147, 112, 219;
-  --stream-text-rainbow-hot-pink-rgb: 255, 20, 147;
-  --stream-text-fire-red-rgb: 255, 0, 0;
-  --stream-text-fire-yellow-rgb: 255, 215, 0;
-  --stream-text-ocean-deep-rgb: 0, 119, 190;
-  --stream-text-ocean-mid-rgb: 0, 173, 216;
-  --stream-text-ocean-foam-rgb: 72, 202, 228;
-  --stream-text-sunset-coral-rgb: 255, 107, 107;
-  --stream-text-sunset-yellow-rgb: 255, 217, 61;
-  --stream-text-sunset-pink-rgb: 255, 159, 243;
-  --stream-text-glitch-magenta-rgb: 255, 0, 255;
-  --stream-text-glitch-cyan-rgb: 0, 255, 255;
-  --stream-text-palette-purple-rgb: 168, 85, 247;
-  --stream-text-palette-purple-neon-rgb: 192, 132, 252;
-  --stream-text-palette-green-rgb: 34, 197, 94;
-  --stream-text-matrix-green: rgb(var(--stream-text-matrix-green-rgb));
-  --stream-text-rainbow-pink: rgb(var(--stream-text-rainbow-pink-rgb));
-  --stream-text-rainbow-orange: rgb(var(--stream-text-rainbow-orange-rgb));
-  --stream-text-rainbow-teal: rgb(var(--stream-text-rainbow-teal-rgb));
-  --stream-text-rainbow-sky: rgb(var(--stream-text-rainbow-sky-rgb));
-  --stream-text-rainbow-purple: rgb(var(--stream-text-rainbow-purple-rgb));
-  --stream-text-rainbow-hot-pink: rgb(var(--stream-text-rainbow-hot-pink-rgb));
-  --stream-text-fire-red: rgb(var(--stream-text-fire-red-rgb));
-  --stream-text-fire-orange: var(--stream-text-rainbow-orange);
-  --stream-text-fire-yellow: rgb(var(--stream-text-fire-yellow-rgb));
-  --stream-text-ocean-deep: rgb(var(--stream-text-ocean-deep-rgb));
-  --stream-text-ocean-mid: rgb(var(--stream-text-ocean-mid-rgb));
-  --stream-text-ocean-foam: rgb(var(--stream-text-ocean-foam-rgb));
-  --stream-text-sunset-coral: rgb(var(--stream-text-sunset-coral-rgb));
-  --stream-text-sunset-yellow: rgb(var(--stream-text-sunset-yellow-rgb));
-  --stream-text-sunset-pink: rgb(var(--stream-text-sunset-pink-rgb));
-  --stream-text-glitch-magenta: rgb(var(--stream-text-glitch-magenta-rgb));
-  --stream-text-glitch-cyan: rgb(var(--stream-text-glitch-cyan-rgb));
-  --stream-text-palette-purple: rgb(var(--stream-text-palette-purple-rgb));
-  --stream-text-palette-purple-neon: rgb(var(--stream-text-palette-purple-neon-rgb));
-  --stream-text-palette-green: rgb(var(--stream-text-palette-green-rgb));
-
-  display: inline;
-  font-family: var(--bf-appearance-token-font-family-sans);
-  line-height: 1.6;
-  position: relative;
-}
-
-
-.stream-text__content {
-  display: inline;
-  color: var(--bf-appearance-token-color-text-primary);
-}
-
-.stream-text__char {
-  display: inline-block;
-  position: relative;
-  color: var(--bf-appearance-token-color-text-primary);
-}
-
-
-.stream-text__char--new {
-  animation: char-appear 0.3s ease-out;
-}
-
-@keyframes char-appear {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-
-.stream-text--smooth .stream-text__char--smooth {
-  animation: smooth-appear 0.2s ease-out;
-}
-
-@keyframes smooth-appear {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-
-.stream-text--typewriter .stream-text__char--typewriter {
-  animation: typewriter-appear 0.1s steps(1);
-}
-
-@keyframes typewriter-appear {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-
-.stream-text--wave .stream-text__char--wave {
-  animation: wave-appear 0.6s ease-in-out;
-  transform-origin: bottom;
-}
-
-@keyframes wave-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(20px) scale(0.8);
-  }
-  50% {
-    transform: translateY(-8px) scale(1.05);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-
-.stream-text--fade .stream-text__char--fade {
-  animation: fade-appear 0.8s ease-in-out;
-}
-
-@keyframes fade-appear {
-  0% {
-    opacity: 0;
-    filter: blur(10px);
-  }
-  100% {
-    opacity: 1;
-    filter: blur(0);
-  }
-}
-
-
-.stream-text--glitch .stream-text__char--glitch {
-  animation: glitch-appear 0.4s ease-out;
-}
-
-.stream-text--glitch .stream-text__char--new {
-  animation: glitch-flash 0.3s ease-out;
-}
-
-@keyframes glitch-appear {
-  0% {
-    opacity: 0;
-    transform: translate(calc(var(--char-index) * -2px), 0);
-    text-shadow:
-      2px 0 var(--stream-text-glitch-magenta),
-      -2px 0 var(--stream-text-glitch-cyan);
-  }
-  20% {
-    transform: translate(calc(var(--char-index) * 2px), -2px);
-  }
-  40% {
-    transform: translate(calc(var(--char-index) * -1px), 2px);
-  }
-  60% {
-    text-shadow:
-      1px 0 var(--stream-text-glitch-magenta),
-      -1px 0 var(--stream-text-glitch-cyan);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-    text-shadow: none;
-  }
-}
-
-@keyframes glitch-flash {
-  0%, 100% {
-    opacity: 1;
-  }
-  20%, 60% {
-    opacity: 0.8;
-    text-shadow:
-      1px 0 var(--stream-text-glitch-magenta),
-      -1px 0 var(--stream-text-glitch-cyan);
-  }
-}
-
-
-.stream-text--neon {
-  text-shadow:
-    0 0 5px currentColor,
-    0 0 10px currentColor,
-    0 0 20px currentColor;
-}
-
-.stream-text--neon .stream-text__char--neon {
-  animation: neon-appear 0.5s ease-out;
-}
-
-@keyframes neon-appear {
-  0% {
-    opacity: 0;
-    text-shadow:
-      0 0 40px currentColor,
-      0 0 80px currentColor;
-  }
-  50% {
-    text-shadow:
-      0 0 30px currentColor,
-      0 0 60px currentColor,
-      0 0 100px currentColor;
-  }
-  100% {
-    opacity: 1;
-    text-shadow:
-      0 0 5px currentColor,
-      0 0 10px currentColor,
-      0 0 20px currentColor;
-  }
-}
-
-
-.stream-text--matrix {
-  color: var(--stream-text-matrix-green);
-  font-family: 'Courier New', monospace;
-  text-shadow: 0 0 5px var(--stream-text-matrix-green);
-}
-
-.stream-text--matrix .stream-text__char--matrix {
-  animation: matrix-appear 0.4s ease-out;
-}
-
-@keyframes matrix-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-    color: var(--bf-appearance-token-color-static-white);
-    text-shadow: 0 0 20px var(--stream-text-matrix-green);
-  }
-  50% {
-    opacity: 1;
-    color: var(--stream-text-matrix-green);
-    text-shadow: 0 0 10px var(--stream-text-matrix-green), 0 0 20px var(--stream-text-matrix-green);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-    color: var(--stream-text-matrix-green);
-    text-shadow: 0 0 5px var(--stream-text-matrix-green);
-  }
-}
-
-
-.stream-text--gradient {
-  background: linear-gradient(
-    90deg,
-    var(--stream-text-rainbow-pink),
-    var(--stream-text-rainbow-orange),
-    var(--stream-text-rainbow-teal),
-    var(--stream-text-rainbow-sky),
-    var(--stream-text-rainbow-purple),
-    var(--stream-text-rainbow-hot-pink)
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-flow 3s linear infinite;
-}
-
-.stream-text--gradient .stream-text__char--gradient {
-  animation: gradient-appear 0.6s ease-out;
-}
-
-@keyframes gradient-appear {
-  0% {
-    opacity: 0;
-    filter: brightness(2) blur(4px);
-  }
-  100% {
-    opacity: 1;
-    filter: brightness(1) blur(0);
-  }
-}
-
-@keyframes gradient-flow {
-  0% {
-    background-position: 0% center;
-  }
-  100% {
-    background-position: 200% center;
-  }
-}
-
-
-.stream-text--pulse .stream-text__char--pulse {
-  animation: pulse-appear 0.8s ease-out;
-}
-
-@keyframes pulse-appear {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-
-.stream-text--blur .stream-text__char--blur {
-  animation: blur-appear 0.8s ease-out;
-}
-
-@keyframes blur-appear {
-  0% {
-    opacity: 0;
-    filter: blur(20px);
-  }
-  100% {
-    opacity: 1;
-    filter: blur(0);
-  }
-}
-
-
-.stream-text--bounce .stream-text__char--bounce {
-  animation: bounce-appear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-@keyframes bounce-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(-50px) scale(0.5);
-  }
-  50% {
-    transform: translateY(10px) scale(1.1);
-  }
-  70% {
-    transform: translateY(-5px) scale(0.95);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-
-.stream-text--shimmer {
-  position: relative;
-}
-
-.stream-text--shimmer .stream-text__char--shimmer {
-  animation: shimmer-appear 1s ease-out;
-}
-
-@keyframes shimmer-appear {
-  0% {
-    opacity: 0;
-  }
-  20% {
-    opacity: 1;
-    filter: brightness(2);
-    text-shadow: 0 0 8px var(--bf-appearance-token-color-overlay-white-80);
-  }
-  100% {
-    opacity: 1;
-    filter: brightness(1);
-    text-shadow: none;
-  }
-}
-
-
-.stream-cursor {
-  display: inline-block;
-  margin-left: 2px;
-  vertical-align: text-bottom;
-}
-
-
-.stream-cursor--line {
-  width: 2px;
-  height: 1em;
-  background: var(--bf-appearance-token-color-accent-700);
-  animation: cursor-blink 1s step-end infinite;
-}
-
-.stream-cursor--line.stream-cursor--active {
-  animation: cursor-pulse 0.8s ease-in-out infinite;
-}
-
-
-.stream-cursor--block {
-  width: 0.6em;
-  height: 1em;
-  background: var(--bf-appearance-token-border-accent-strong);
-  animation: cursor-blink 1s step-end infinite;
-}
-
-
-.stream-cursor--underline {
-  width: 0.6em;
-  height: 2px;
-  background: var(--bf-appearance-token-color-accent-700);
-  animation: cursor-blink 1s step-end infinite;
-}
-
-
-.stream-cursor--glow {
-  width: 2px;
-  height: 1em;
-  background: var(--bf-appearance-token-color-accent-600);
-  box-shadow:
-    0 0 10px var(--bf-appearance-token-color-accent-700),
-    0 0 20px var(--bf-appearance-token-border-accent-strong),
-    0 0 30px var(--bf-appearance-token-border-accent);
-  animation: cursor-glow 1s ease-in-out infinite;
-}
-
-@keyframes cursor-glow {
-  0%, 100% {
-    opacity: 1;
-    box-shadow:
-      0 0 10px var(--bf-appearance-token-color-accent-700),
-      0 0 20px var(--bf-appearance-token-border-accent-strong);
-  }
-  50% {
-    opacity: 0.7;
-    box-shadow:
-      0 0 20px var(--bf-appearance-token-color-accent-600),
-      0 0 40px var(--bf-appearance-token-color-accent-700),
-      0 0 60px var(--bf-appearance-token-border-accent-strong);
-  }
-}
-
-
-.stream-cursor--rainbow {
-  width: 2px;
-  height: 1em;
-  background: linear-gradient(
-    180deg,
-    var(--stream-text-rainbow-pink),
-    var(--stream-text-rainbow-orange),
-    var(--stream-text-rainbow-teal),
-    var(--stream-text-rainbow-sky),
-    var(--stream-text-rainbow-purple)
-  );
-  animation: cursor-rainbow 2s linear infinite;
-}
-
-@keyframes cursor-rainbow {
-  0%, 100% {
-    filter: hue-rotate(0deg);
-  }
-  50% {
-    filter: hue-rotate(180deg);
-  }
-}
-
-
-@keyframes cursor-blink {
-  0%, 50% {
-    opacity: 1;
-  }
-  50.1%, 100% {
-    opacity: 0;
-  }
-}
-
-@keyframes cursor-pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: scaleY(0.8);
-  }
-}
-
-
-.stream-text--palette-blue {
-  color: var(--bf-appearance-token-color-accent-600);
-}
-
-.stream-text--palette-blue.stream-text--neon {
-  color: var(--bf-appearance-token-color-accent-500);
-}
-
-
-.stream-text--palette-purple {
-  color: var(--stream-text-palette-purple);
-}
-
-.stream-text--palette-purple.stream-text--neon {
-  color: var(--stream-text-palette-purple-neon);
-}
-
-
-.stream-text--palette-green {
-  color: var(--stream-text-palette-green);
-}
-
-.stream-text--palette-green.stream-text--neon {
-  color: var(--bf-appearance-token-color-success);
-}
-
-
-.stream-text--palette-rainbow {
-  background: linear-gradient(
-    90deg,
-    var(--stream-text-rainbow-pink) 0%,
-    var(--stream-text-rainbow-orange) 20%,
-    var(--stream-text-rainbow-teal) 40%,
-    var(--stream-text-rainbow-sky) 60%,
-    var(--stream-text-rainbow-purple) 80%,
-    var(--stream-text-rainbow-hot-pink) 100%
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-flow 3s linear infinite;
-}
-
-
-.stream-text--palette-fire {
-  background: linear-gradient(
-    90deg,
-    var(--stream-text-fire-red),
-    var(--stream-text-fire-orange),
-    var(--stream-text-fire-yellow),
-    var(--stream-text-fire-orange),
-    var(--stream-text-fire-red)
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-flow 2s linear infinite;
-}
-
-
-.stream-text--palette-ocean {
-  background: linear-gradient(
-    90deg,
-    var(--stream-text-ocean-deep),
-    var(--stream-text-ocean-mid),
-    var(--stream-text-ocean-foam),
-    var(--stream-text-ocean-mid),
-    var(--stream-text-ocean-deep)
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-flow 3s linear infinite;
-}
-
-
-.stream-text--palette-sunset {
-  background: linear-gradient(
-    90deg,
-    var(--stream-text-sunset-coral),
-    var(--stream-text-sunset-yellow),
-    var(--stream-text-sunset-pink),
-    var(--stream-text-sunset-yellow),
-    var(--stream-text-sunset-coral)
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-flow 2.5s linear infinite;
-}
-
-
-@media (max-width: 768px) {
-  .stream-text {
-    font-size: 0.95em;
-  }
-
-  .stream-cursor {
-    width: 1.5px;
-  }
-
-
-  .stream-text--glitch .stream-text__char--glitch,
-  .stream-text--matrix .stream-text__char--matrix,
-  .stream-text--bounce .stream-text__char--bounce {
-    animation-duration: 0.3s;
-  }
-}
-
-
-@media (prefers-reduced-motion: reduce) {
-
-  .stream-cursor,
-  .stream-text__char,
-  .stream-text__char--new,
-  .stream-text {
-    animation: none !important;
-  }
-
-  .stream-cursor {
-    opacity: 1;
-  }
-
-
-  .stream-text--gradient,
-  .stream-text--palette-rainbow,
-  .stream-text--palette-fire,
-  .stream-text--palette-ocean,
-  .stream-text--palette-sunset {
-    animation: none;
-    background-position: 0% center;
-  }
-
-
-  .stream-text--neon,
-  .stream-text--matrix,
-  .stream-text__char {
-    text-shadow: none !important;
-    filter: none !important;
-  }
-}
-
-
-@media (prefers-contrast: high) {
-  .stream-text {
-    filter: none !important;
-  }
-
-  .stream-text--gradient,
-  .stream-text--palette-rainbow,
-  .stream-text--palette-fire,
-  .stream-text--palette-ocean,
-  .stream-text--palette-sunset {
-    background: none;
-    -webkit-text-fill-color: currentColor;
-    color: inherit;
-  }
-
-  .stream-cursor {
-    background: currentColor;
-    opacity: 1;
-  }
-}
-
-
-@media print {
-  .stream-text__char,
-  .stream-text {
-    animation: none !important;
-    opacity: 1 !important;
-  }
-
-  .stream-cursor {
-    display: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/StreamText/StreamText.tsx b/src/web-ui/src/component-library/components/StreamText/StreamText.tsx
deleted file mode 100644
index 2a4f1b5f3d..0000000000
--- a/src/web-ui/src/component-library/components/StreamText/StreamText.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * Streaming text output component
- */
-
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import './StreamText.scss';
-
-export type StreamEffect = 
-  | 'smooth'
-  | 'typewriter'
-  | 'wave'
-  | 'fade'
-  | 'glitch'
-  | 'neon'
-  | 'matrix'
-  | 'gradient'
-  | 'pulse'
-  | 'blur'
-  | 'bounce'
-  | 'shimmer';
-
-export interface StreamTextProps {
-  text: string;
-  effect?: StreamEffect;
-  speed?: number;
-  delay?: number;
-  showCursor?: boolean;
-  cursorStyle?: 'block' | 'line' | 'underline' | 'glow' | 'rainbow';
-  onComplete?: () => void;
-  onProgress?: (progress: number) => void;
-  className?: string;
-  autoStart?: boolean;
-  paused?: boolean;
-  charAnimation?: boolean;
-  colorPalette?: 'blue' | 'purple' | 'green' | 'rainbow' | 'fire' | 'ocean' | 'sunset';
-}
-
-const StreamTextComponent: React.FC<StreamTextProps> = ({
-  text,
-  effect = 'smooth',
-  speed = 30,
-  delay = 0,
-  showCursor = true,
-  cursorStyle = 'line',
-  onComplete,
-  onProgress,
-  className = '',
-  autoStart = true,
-  paused = false,
-  charAnimation = false,
-  colorPalette = 'blue',
-}) => {
-  const [displayedText, setDisplayedText] = useState('');
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const pausedIndexRef = useRef<number>(0);
-  const hasStartedRef = useRef(false);
-  const prevTextRef = useRef(text);
-
-  const streamCharacter = useCallback((index: number) => {
-    if (index < text.length) {
-      setDisplayedText(prev => prev + text[index]);
-      setCurrentIndex(index + 1);
-      
-      const progress = ((index + 1) / text.length) * 100;
-      onProgress?.(progress);
-
-      let nextSpeed = speed;
-      if (effect === 'glitch' && Math.random() > 0.7) {
-        nextSpeed = speed * (Math.random() * 2 + 0.5);
-      } else if (effect === 'wave') {
-        nextSpeed = speed + Math.sin(index * 0.5) * 20;
-      }
-
-      timeoutRef.current = setTimeout(() => {
-        streamCharacter(index + 1);
-      }, Math.max(10, nextSpeed));
-    } else {
-      setIsComplete(true);
-      setIsStreaming(false);
-      onComplete?.();
-    }
-  }, [effect, onComplete, onProgress, speed, text]);
-
-  const startStreaming = useCallback(() => {
-    setDisplayedText('');
-    setCurrentIndex(0);
-    setIsComplete(false);
-    setIsStreaming(true);
-
-    timeoutRef.current = setTimeout(() => {
-      streamCharacter(0);
-    }, delay);
-  }, [delay, streamCharacter]);
-
-  useEffect(() => {
-    const isTextChanged = prevTextRef.current !== text;
-    let skipAutoStart = false;
-    if (isTextChanged) {
-      prevTextRef.current = text;
-      pausedIndexRef.current = 0;
-
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      if (isComplete) {
-        setDisplayedText(text);
-        setCurrentIndex(text.length);
-        setIsComplete(true);
-        setIsStreaming(false);
-        hasStartedRef.current = true;
-        skipAutoStart = true;
-      } else {
-        hasStartedRef.current = false;
-        setDisplayedText('');
-        setCurrentIndex(0);
-        setIsComplete(false);
-        setIsStreaming(false);
-      }
-    }
-
-    if (autoStart && !paused && !hasStartedRef.current && !skipAutoStart) {
-      hasStartedRef.current = true;
-      startStreaming();
-    }
-
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [text, autoStart, paused, isComplete, startStreaming]);
-
-  useEffect(() => {
-    if (paused && isStreaming) {
-      pausedIndexRef.current = currentIndex;
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      setIsStreaming(false);
-    } else if (!paused && pausedIndexRef.current > 0) {
-      streamCharacter(pausedIndexRef.current);
-    }
-  }, [paused, currentIndex, isStreaming, streamCharacter]);
-
-  const renderText = () => {
-    if (!charAnimation) {
-      return <span className={`stream-text__content stream-text__content--${effect}`} data-bf-component="stream-text" data-bf-part="content">{displayedText}</span>;
-    }
-
-    return displayedText.split('').map((char, index) => {
-      const animationDelay = charAnimation ? `${index * 0.05}s` : '0s';
-      const isNewChar = index === displayedText.length - 1 && isStreaming;
-      
-      return (
-        <span
-          key={`char-${index}`}
-          className={`stream-text__char stream-text__char--${effect} ${isNewChar ? 'stream-text__char--new' : ''}`}
-          data-bf-component="stream-text"
-          data-bf-part="character"
-          style={{
-            animationDelay,
-            '--char-index': index,
-          } as React.CSSProperties}
-        >
-          {char}
-        </span>
-      );
-    });
-  };
-
-  const getContainerClassName = () => {
-    return [
-      'stream-text',
-      `stream-text--${effect}`,
-      `stream-text--palette-${colorPalette}`,
-      isStreaming ? 'stream-text--streaming' : '',
-      isComplete ? 'stream-text--complete' : '',
-      className,
-    ].filter(Boolean).join(' ');
-  };
-
-  return (
-    <span className={getContainerClassName()} data-bf-component="stream-text" data-bf-part="root" data-bf-effect={effect} data-bf-color={colorPalette} data-bf-state={[isStreaming && 'streaming', isComplete && 'complete'].filter(Boolean).join(' ') || undefined}>
-      {renderText()}
-      {showCursor && !isComplete && (
-        <span className={`stream-cursor stream-cursor--${cursorStyle} ${isStreaming ? 'stream-cursor--active' : ''}`} data-bf-component="stream-text" data-bf-part="cursor" />
-      )}
-    </span>
-  );
-};
-
-export const StreamText = React.memo(StreamTextComponent, (prevProps, nextProps) => {
-  return (
-    prevProps.text === nextProps.text &&
-    prevProps.effect === nextProps.effect &&
-    prevProps.speed === nextProps.speed &&
-    prevProps.showCursor === nextProps.showCursor &&
-    prevProps.className === nextProps.className
-  );
-});
diff --git a/src/web-ui/src/component-library/components/StreamText/appearance.ts b/src/web-ui/src/component-library/components/StreamText/appearance.ts
deleted file mode 100644
index 149a554c1a..0000000000
--- a/src/web-ui/src/component-library/components/StreamText/appearance.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const streamTextAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'stream-text',
-  parts: [{ id: 'root' }, { id: 'content' }, { id: 'character' }, { id: 'cursor' }],
-  facets: [
-    { id: 'effect', attribute: 'data-bf-effect', values: ['smooth', 'typewriter', 'wave', 'fade', 'glitch', 'neon', 'matrix', 'gradient', 'pulse', 'blur', 'bounce', 'shimmer'] },
-    { id: 'color', attribute: 'data-bf-color', values: ['blue', 'purple', 'green', 'rainbow', 'fire', 'ocean', 'sunset'] },
-  ],
-  states: [
-    { id: 'streaming', selector: { kind: 'self', suffix: '[data-bf-state~="streaming"]' } },
-    { id: 'complete', selector: { kind: 'self', suffix: '[data-bf-state~="complete"]' } },
-  ],
-};
diff --git a/src/web-ui/src/component-library/components/StreamText/index.ts b/src/web-ui/src/component-library/components/StreamText/index.ts
deleted file mode 100644
index 1e1853eff7..0000000000
--- a/src/web-ui/src/component-library/components/StreamText/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { StreamText } from './StreamText';
-export type { StreamTextProps, StreamEffect } from './StreamText';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.scss b/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.scss
deleted file mode 100644
index 6605d8d1e1..0000000000
--- a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.text-stroke-effect {
-  display: inline-block;
-  user-select: none;
-  overflow: visible;
-
-  &__outline {
-    fill: transparent;
-    stroke: var(--bf-appearance-token-color-overlay-white-20);
-    stroke-width: 1;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 72px;
-    font-weight: 700;
-  }
-
-  &__animated {
-    fill: transparent;
-    stroke: rgba(var(--bf-appearance-token-color-static-white-rgb), 0.5);
-    stroke-width: 1.5;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 72px;
-    font-weight: 700;
-    stroke-dasharray: 500;
-    stroke-dashoffset: 500;
-    animation: text-stroke-draw 4s ease-in-out infinite;
-  }
-
-  &__gradient {
-    fill: transparent;
-    stroke-width: 2;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 72px;
-    font-weight: 700;
-    stroke-dasharray: 15 8;
-    animation: text-stroke-dash 1.5s linear infinite;
-  }
-}
-
-@keyframes text-stroke-draw {
-  0% {
-    stroke-dashoffset: 500;
-  }
-  50% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: -500;
-  }
-}
-
-@keyframes text-stroke-dash {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: -46;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .text-stroke-effect__animated,
-  .text-stroke-effect__gradient {
-    animation: none;
-    stroke-dashoffset: 0;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.test.ts b/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.test.ts
deleted file mode 100644
index 4e63c51c15..0000000000
--- a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-  TEXT_STROKE_GRADIENT_COLORS,
-  buildTextStrokeColorCycle,
-} from './TextStrokeEffectGradient';
-import { APPEARANCE_DOMAIN_TOKENS } from '@/infrastructure/appearance/appearanceDomainTokens';
-
-const TEXT_STROKE_TOKEN_SEQUENCE = Array.from(
-  { length: 5 },
-  (_, index) => `var(--bf-appearance-token-domain-text-stroke-${index})`,
-);
-
-describe('TextStrokeEffect color cycles', () => {
-  it('keeps gradient animation values closed over the appearance token sequence', () => {
-    expect(APPEARANCE_DOMAIN_TOKENS.textStroke).toEqual(TEXT_STROKE_TOKEN_SEQUENCE);
-    expect(TEXT_STROKE_GRADIENT_COLORS).toBe(APPEARANCE_DOMAIN_TOKENS.textStroke);
-
-    const expectedCycle = [
-      ...TEXT_STROKE_TOKEN_SEQUENCE.slice(2),
-      ...TEXT_STROKE_TOKEN_SEQUENCE.slice(0, 2),
-      TEXT_STROKE_TOKEN_SEQUENCE[2],
-    ].join('; ');
-    expect(buildTextStrokeColorCycle(2)).toBe(expectedCycle);
-  });
-});
diff --git a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.tsx b/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.tsx
deleted file mode 100644
index 79e6a820eb..0000000000
--- a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffect.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-
-import React from "react";
-import "./TextStrokeEffect.scss";
-
-import {
-  TEXT_STROKE_GRADIENT_COLORS,
-  TEXT_STROKE_GRADIENT_OFFSETS,
-  buildTextStrokeColorCycle,
-} from './TextStrokeEffectGradient';
-
-export interface TextStrokeEffectProps {
-  text: string;
-  duration?: number;
-  className?: string;
-  height?: string;
-}
-
-/**
- * Text stroke loop animation component
- * Pure CSS implementation, no extra animation libraries
- */
-export const TextStrokeEffect: React.FC<TextStrokeEffectProps> = ({
-  text,
-  duration = 4,
-  className = "",
-  height = "100px",
-}) => {
-  const charWidth = 55;
-  const viewBoxWidth = text.length * charWidth;
-  const viewBoxHeight = 100;
-
-  return (
-    <svg
-      className={`text-stroke-effect ${className}`}
-      data-bf-component="text-stroke-effect"
-      data-bf-part="root"
-      viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
-      xmlns="http://www.w3.org/2000/svg"
-      style={{ 
-        height: height,
-        width: 'auto',
-        display: 'block',
-      }}
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <defs>
-        <linearGradient id="textStrokeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-          {TEXT_STROKE_GRADIENT_COLORS.map((color, index) => (
-            <stop
-              key={color}
-              offset={TEXT_STROKE_GRADIENT_OFFSETS[index]}
-              stopColor={color}
-            >
-              <animate
-                attributeName="stop-color"
-                values={buildTextStrokeColorCycle(index)}
-                dur={`${duration}s`}
-                repeatCount="indefinite"
-              />
-            </stop>
-          ))}
-        </linearGradient>
-      </defs>
-
-      <text
-        x="50%"
-        y="55%"
-        textAnchor="middle"
-        dominantBaseline="middle"
-        className="text-stroke-effect__outline"
-        data-bf-component="text-stroke-effect"
-        data-bf-part="outline"
-      >
-        {text}
-      </text>
-
-      <text
-        x="50%"
-        y="55%"
-        textAnchor="middle"
-        dominantBaseline="middle"
-        className="text-stroke-effect__animated"
-        data-bf-component="text-stroke-effect"
-        data-bf-part="animated"
-        style={{
-          animationDuration: `${duration}s`,
-        }}
-      >
-        {text}
-      </text>
-
-      <text
-        x="50%"
-        y="55%"
-        textAnchor="middle"
-        dominantBaseline="middle"
-        className="text-stroke-effect__gradient"
-        data-bf-component="text-stroke-effect"
-        data-bf-part="gradient"
-        stroke="url(#textStrokeGradient)"
-      >
-        {text}
-      </text>
-    </svg>
-  );
-};
-
-export default TextStrokeEffect;
diff --git a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffectGradient.ts b/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffectGradient.ts
deleted file mode 100644
index 6e1fd11cb8..0000000000
--- a/src/web-ui/src/component-library/components/TextStrokeEffect/TextStrokeEffectGradient.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { APPEARANCE_DOMAIN_TOKENS } from '@/infrastructure/appearance/appearanceDomainTokens';
-
-export const TEXT_STROKE_GRADIENT_COLORS = APPEARANCE_DOMAIN_TOKENS.textStroke;
-
-export const TEXT_STROKE_GRADIENT_OFFSETS = ['0%', '25%', '50%', '75%', '100%'] as const;
-
-export function buildTextStrokeColorCycle(startIndex: number): string {
-  const colors = Array.from(TEXT_STROKE_GRADIENT_COLORS);
-  const cycle = [
-    ...colors.slice(startIndex),
-    ...colors.slice(0, startIndex),
-    colors[startIndex],
-  ];
-  return cycle.join('; ');
-}
diff --git a/src/web-ui/src/component-library/components/TextStrokeEffect/appearance.ts b/src/web-ui/src/component-library/components/TextStrokeEffect/appearance.ts
deleted file mode 100644
index af35822285..0000000000
--- a/src/web-ui/src/component-library/components/TextStrokeEffect/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const textStrokeEffectAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'text-stroke-effect',
-  parts: [{ id: 'root' }, { id: 'outline' }, { id: 'animated' }, { id: 'gradient' }],
-};
diff --git a/src/web-ui/src/component-library/components/TextStrokeEffect/index.ts b/src/web-ui/src/component-library/components/TextStrokeEffect/index.ts
deleted file mode 100644
index 3949b89b16..0000000000
--- a/src/web-ui/src/component-library/components/TextStrokeEffect/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { TextStrokeEffect, type TextStrokeEffectProps } from './TextStrokeEffect';
-export { TextStrokeEffect as default } from './TextStrokeEffect';
-
diff --git a/src/web-ui/src/component-library/components/index.ts b/src/web-ui/src/component-library/components/index.ts
index 7b6fa223ec..38a0287ba2 100644
--- a/src/web-ui/src/component-library/components/index.ts
+++ b/src/web-ui/src/component-library/components/index.ts
@@ -13,9 +13,7 @@ export * from './InputDialog';
 
 export * from './Alert';
 
-export * from './Input';
 export * from './NumberInput';
-export * from './Search';
 export * from './Select';
 export * from './Checkbox';
 export * from './Textarea';
@@ -25,17 +23,12 @@ export * from './Tooltip';
 export * from './Tabs';
 
 export * from './Tag';
-export * from './Badge';
 export * from './Avatar';
 export * from './Empty';
 export * from './Markdown';
 export * from './Card';
-export * from './FilterPill';
 export * from './ConfigPage';
 
-export * from './StreamText';
-export * from './TextStrokeEffect';
-export * from './CubeLogo';
 export * from './CubeLoading';
 export * from './DotMatrixLoader';
 export * from './TaskRunningIndicator';
diff --git a/src/web-ui/src/component-library/components/registry.tsx b/src/web-ui/src/component-library/components/registry.tsx
index 4b35c7d314..dafb31dc70 100644
--- a/src/web-ui/src/component-library/components/registry.tsx
+++ b/src/web-ui/src/component-library/components/registry.tsx
@@ -4,8 +4,6 @@ import type { ComponentCategory } from '../types';
 import { Button } from '@bitfun/ui';
 import { IconButton } from '@components/IconButton';
 import { WindowControls } from '@components/WindowControls';
-import { Input } from '@components/Input';
-import { Search } from '@components/Search';
 import { Select } from '@components/Select';
 import { Checkbox } from '@components/Checkbox';
 import { Textarea } from '@components/Textarea';
@@ -18,7 +16,6 @@ import { Avatar, AvatarGroup } from '@components/Avatar';
 import { Empty } from '@components/Empty';
 import { Markdown } from '@components/Markdown';
 import { CodeEditor } from '@components/CodeEditor';
-import { StreamText } from '@components/StreamText';
 import { TodoWriteDisplay } from '@/flow_chat/tool-cards/TodoWriteDisplay';
 import { TaskToolDisplay } from '@/flow_chat/tool-cards/TaskToolDisplay';
 import { WebSearchCard as RealWebSearchCard } from '@/flow_chat/tool-cards/WebSearchCard';
@@ -304,45 +301,6 @@ export const componentRegistry: ComponentCategory[] = [
           </div>
         ),
       },
-      {
-        id: 'stream-text-demo',
-        name: 'StreamText - 流式文本演示',
-        description: 'AI 流式文本打字机效果',
-        category: 'feedback',
-        component: () => {
-          const [key, setKey] = React.useState(0);
-
-          return (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '20px' }}>
-              <div style={{
-                fontSize: '15px',
-                lineHeight: '1.8',
-                minHeight: '120px',
-                padding: '20px',
-                background: 'var(--bf-appearance-token-color-overlay-white-04)',
-                borderRadius: '8px',
-                border: '1px solid var(--bf-appearance-token-color-overlay-white-12)',
-                maxWidth: '700px'
-              }}>
-                <StreamText
-                  key={key}
-                  text="Streaming AI demo text."
-                  effect="smooth"
-                  speed={30}
-                  showCursor={true}
-                />
-              </div>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => setKey(prev => prev + 1)}
-              >
-                重新播放
-              </Button>
-            </div>
-          );
-        },
-      },
     ],
   },
   {
@@ -351,124 +309,6 @@ export const componentRegistry: ComponentCategory[] = [
     description: '输入类表单组件',
     layoutType: 'grid-2',
     components: [
-      {
-        id: 'input-demo',
-name: 'Input - Demo',
-        description: 'Demo',
-        category: 'form',
-        component: () => (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '400px' }}>
-            <Input placeholder="Enter text" />
-            <Input label="Label" placeholder="Placeholder" />
-            <Input
-              label="邮箱"
-              type="email"
-              placeholder="example@email.com"
-              prefix="@"
-            />
-            <Input
-              label="Password"
-              type="password"
-              placeholder="Enter password"
-              error
-              errorMessage="Error message"
-            />
-            <Input variant="filled" placeholder="Filled variant" />
-            <Input variant="outlined" placeholder="Outlined variant" />
-          </div>
-        ),
-      },
-      {
-        id: 'search-demo',
-name: 'Search - Demo',
-        description: 'Demo',
-        category: 'form',
-        component: () => {
-          const [value, setValue] = React.useState('');
-          const [loading, setLoading] = React.useState(false);
-          const [searchOptions, setSearchOptions] = React.useState({
-            caseSensitive: false,
-            useRegex: false,
-          });
-
-          const handleSearch = (val: string) => {
-            setLoading(true);
-            setTimeout(() => {
-              setLoading(false);
-            }, 1500);
-          };
-
-          return (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '500px' }}>
-              <Search
-                placeholder="搜索关键词.."
-                onChange={(val) => setValue(val)}
-              />
-              <Search
-                placeholder="Search"
-                showSearchButton
-                onSearch={handleSearch}
-                loading={loading}
-              />
-              <Search
-                placeholder="With suffix"
-                suffixContent={
-                  <div style={{ display: 'flex', gap: '4px' }}>
-                    <button
-                      style={{
-                        padding: '4px 6px',
-                        background: searchOptions.caseSensitive ? 'color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 20%, transparent)' : 'transparent',
-                        border: '1px solid var(--bf-appearance-token-color-overlay-white-12)',
-                        borderRadius: '4px',
-                        color: searchOptions.caseSensitive ? 'var(--bf-appearance-token-color-accent-500)' : 'var(--bf-appearance-token-color-text-muted)',
-                        cursor: 'pointer',
-                        fontSize: '12px',
-                      }}
-                      onClick={() => setSearchOptions(prev => ({ ...prev, caseSensitive: !prev.caseSensitive }))}
-                      title="Option"
-                    >
-                      Aa
-                    </button>
-                    <button
-                      style={{
-                        padding: '4px 6px',
-                        background: searchOptions.useRegex ? 'color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 20%, transparent)' : 'transparent',
-                        border: '1px solid var(--bf-appearance-token-color-overlay-white-12)',
-                        borderRadius: '4px',
-                        color: searchOptions.useRegex ? 'var(--bf-appearance-token-color-accent-500)' : 'var(--bf-appearance-token-color-text-muted)',
-                        cursor: 'pointer',
-                        fontSize: '12px',
-                      }}
-                      onClick={() => setSearchOptions(prev => ({ ...prev, useRegex: !prev.useRegex }))}
-                      title="Option"
-                    >
-                      .*
-                    </button>
-                  </div>
-                }
-              />
-              <Search
-                placeholder="Search..."
-                expandOnFocus
-              />
-              <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
-                <Search size="small" placeholder="Search" />
-                <Search size="medium" placeholder="Search" />
-                <Search size="large" placeholder="Search" />
-              </div>
-              <Search
-                placeholder="Disabled"
-                disabled
-              />
-              <Search
-                placeholder="Error"
-                error
-                errorMessage="Error message"
-              />
-            </div>
-          );
-        },
-      },
       {
         id: 'select-basic',
         name: 'Select - 基础选择',
diff --git a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
index f78cf27411..0fa5220c05 100644
--- a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
+++ b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
@@ -10,10 +10,10 @@
  * Closing the wizard cancels any in-progress remote task.
  */
 
-import { Button, IconButton, Input as DesignInput, Modal, Select } from '@bitfun/ui';
+import { Button, Field, IconButton, Input as DesignInput, Modal, Select } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
-import { Input, Alert, Tooltip } from '@/component-library';
+import { Alert, Tooltip } from '@/component-library';
 import {
   Server, User, Lock, Key, FolderOpen, Loader2, Play, ArrowDownToLine,
   CheckCircle2, XCircle, AlertTriangle, RefreshCw, Eye, EyeOff, Search,
@@ -834,20 +834,26 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
       >
         <div className="relay-deploy-wizard__row">
           <div className="relay-deploy-wizard__field relay-deploy-wizard__field--flex">
-            <Input label={t('ssh.remote.host')} value={formData.host}
-              onChange={(e) => setFormData((p) => ({ ...p, host: e.target.value }))}
-              prefix={<Server size={16} />} size="medium" disabled={connecting} />
+            <Field label={t('ssh.remote.host')} controlWidth="fill">
+              <DesignInput value={formData.host}
+                onChange={(e) => setFormData((p) => ({ ...p, host: e.target.value }))}
+                leading={<Server size={16} />} disabled={connecting} />
+            </Field>
           </div>
           <div className="relay-deploy-wizard__field relay-deploy-wizard__field--port">
-            <Input label={t('ssh.remote.port')} value={formData.port}
-              onChange={(e) => setFormData((p) => ({ ...p, port: e.target.value }))}
-              placeholder="22" size="medium" disabled={connecting} />
+            <Field label={t('ssh.remote.port')} controlWidth="fill">
+              <DesignInput value={formData.port}
+                onChange={(e) => setFormData((p) => ({ ...p, port: e.target.value }))}
+                placeholder="22" disabled={connecting} />
+            </Field>
           </div>
         </div>
         <div className="relay-deploy-wizard__field">
-          <Input label={t('ssh.remote.username')} value={formData.username}
-            onChange={(e) => setFormData((p) => ({ ...p, username: e.target.value }))}
-            prefix={<User size={16} />} size="medium" disabled={connecting} />
+          <Field label={t('ssh.remote.username')} controlWidth="fill">
+            <DesignInput value={formData.username}
+              onChange={(e) => setFormData((p) => ({ ...p, username: e.target.value }))}
+              leading={<User size={16} />} disabled={connecting} />
+          </Field>
         </div>
         <div className="relay-deploy-wizard__field">
           <label className="relay-deploy-wizard__label">{t('ssh.remote.authMethod')}</label>
@@ -857,47 +863,65 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
         </div>
         {formData.authType === 'password' && (
           <div className="relay-deploy-wizard__field">
-            <Input label={t('ssh.remote.password')} type={showPassword ? 'text' : 'password'}
-              value={formData.password}
-              onChange={(e) => setFormData((p) => ({ ...p, password: e.target.value }))}
-              prefix={<Lock size={16} />} size="medium" disabled={connecting}
-              suffix={
-                <button type="button" className="bitfun-input-toggle" onClick={() => setShowPassword((s) => !s)} tabIndex={-1}>
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              } />
+            <Field label={t('ssh.remote.password')} controlWidth="fill">
+              <DesignInput type={showPassword ? 'text' : 'password'}
+                value={formData.password}
+                onChange={(e) => setFormData((p) => ({ ...p, password: e.target.value }))}
+                leading={<Lock size={16} />} disabled={connecting}
+                trailing={
+                  <IconButton
+                    type="button"
+                    size="sm"
+                    variant="quiet"
+                    aria-label={showPassword ? t('ssh.remote.hidePassword') : t('ssh.remote.showPassword')}
+                    onClick={() => setShowPassword((s) => !s)}
+                    tabIndex={-1}
+                    icon={showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  />
+                } />
+            </Field>
           </div>
         )}
         {formData.authType === 'privateKey' && (
           <>
             <div className="relay-deploy-wizard__field">
-              <Input label={t('ssh.remote.privateKeyPath')} value={formData.keyPath}
-                onChange={(e) => setFormData((p) => ({ ...p, keyPath: e.target.value }))}
-                placeholder="~/.ssh/id_rsa" prefix={<Key size={16} />} size="medium"
-                disabled={connecting}
-                suffix={
-                  <Tooltip content={t('ssh.remote.browsePrivateKey')}>
+              <Field label={t('ssh.remote.privateKeyPath')} controlWidth="fill">
+                <DesignInput value={formData.keyPath}
+                  onChange={(e) => setFormData((p) => ({ ...p, keyPath: e.target.value }))}
+                  placeholder="~/.ssh/id_rsa" leading={<Key size={16} />}
+                  disabled={connecting}
+                  trailing={
+                    <Tooltip content={t('ssh.remote.browsePrivateKey')}>
+                      <IconButton
+                        type="button"
+                        size="sm"
+                        aria-label={t('ssh.remote.browsePrivateKey')}
+                        disabled={connecting}
+                        onClick={() => void handleBrowsePrivateKey()}
+                        icon={<FolderOpen size={16} />}
+                      />
+                    </Tooltip>
+                  } />
+              </Field>
+            </div>
+            <div className="relay-deploy-wizard__field">
+              <Field label={t('ssh.remote.passphrase')} controlWidth="fill">
+                <DesignInput type={showPassphrase ? 'text' : 'password'}
+                  value={formData.passphrase}
+                  onChange={(e) => setFormData((p) => ({ ...p, passphrase: e.target.value }))}
+                  placeholder={t('ssh.remote.passphraseOptional')} disabled={connecting}
+                  trailing={
                     <IconButton
                       type="button"
                       size="sm"
-                      aria-label={t('ssh.remote.browsePrivateKey')}
-                      disabled={connecting}
-                      onClick={() => void handleBrowsePrivateKey()}
-                      icon={<FolderOpen size={16} />}
+                      variant="quiet"
+                      aria-label={showPassphrase ? t('ssh.remote.hidePassword') : t('ssh.remote.showPassword')}
+                      onClick={() => setShowPassphrase((s) => !s)}
+                      tabIndex={-1}
+                      icon={showPassphrase ? <EyeOff size={16} /> : <Eye size={16} />}
                     />
-                  </Tooltip>
-                } />
-            </div>
-            <div className="relay-deploy-wizard__field">
-              <Input label={t('ssh.remote.passphrase')} type={showPassphrase ? 'text' : 'password'}
-                value={formData.passphrase}
-                onChange={(e) => setFormData((p) => ({ ...p, passphrase: e.target.value }))}
-                placeholder={t('ssh.remote.passphraseOptional')} size="medium" disabled={connecting}
-                suffix={
-                  <button type="button" className="bitfun-input-toggle" onClick={() => setShowPassphrase((s) => !s)} tabIndex={-1}>
-                    {showPassphrase ? <EyeOff size={16} /> : <Eye size={16} />}
-                  </button>
-                } />
+                  } />
+              </Field>
             </div>
           </>
         )}
@@ -970,16 +994,16 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
 
             <div className="relay-deploy-wizard__port-row">
               <div className="relay-deploy-wizard__field relay-deploy-wizard__field--port">
-                <Input
-                  label={t('relayDeploy.relayPort')}
-                  type="number"
-                  value={relayPortInput}
-                  onChange={(e) => setRelayPortInput(e.target.value)}
-                  size="medium"
-                  disabled={taskRunning || preflightLoading}
-                  min={1}
-                  max={65535}
-                />
+                <Field label={t('relayDeploy.relayPort')} controlWidth="fill">
+                  <DesignInput
+                    type="number"
+                    value={relayPortInput}
+                    onChange={(e) => setRelayPortInput(e.target.value)}
+                    disabled={taskRunning || preflightLoading}
+                    min={1}
+                    max={65535}
+                  />
+                </Field>
               </div>
               <p className="relay-deploy-wizard__port-hint">{t('relayDeploy.relayPortHint')}</p>
             </div>
@@ -1235,25 +1259,37 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
       </div>
       <div className="relay-deploy-wizard__form">
         <div className="relay-deploy-wizard__field">
-          <Input label={t('accountLogin.username')} type="text" value={regUsername}
-            onChange={(e) => setRegUsername(e.target.value)}
-            prefix={<User size={16} />} size="medium" disabled={regLoading} />
+          <Field label={t('accountLogin.username')} controlWidth="fill">
+            <DesignInput type="text" value={regUsername}
+              onChange={(e) => setRegUsername(e.target.value)}
+              leading={<User size={16} />} disabled={regLoading} />
+          </Field>
         </div>
         <div className="relay-deploy-wizard__field">
-          <Input label={t('accountLogin.password')} type={showRegPassword ? 'text' : 'password'}
-            value={regPassword} onChange={(e) => setRegPassword(e.target.value)}
-            prefix={<Lock size={16} />} size="medium" disabled={regLoading}
-            suffix={
-              <button type="button" className="bitfun-input-toggle" onClick={() => setShowRegPassword((s) => !s)} tabIndex={-1}>
-                {showRegPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-              </button>
-            } />
+          <Field label={t('accountLogin.password')} controlWidth="fill">
+            <DesignInput type={showRegPassword ? 'text' : 'password'}
+              value={regPassword} onChange={(e) => setRegPassword(e.target.value)}
+              leading={<Lock size={16} />} disabled={regLoading}
+              trailing={
+                <IconButton
+                  type="button"
+                  size="sm"
+                  variant="quiet"
+                  aria-label={showRegPassword ? t('ssh.remote.hidePassword') : t('ssh.remote.showPassword')}
+                  onClick={() => setShowRegPassword((s) => !s)}
+                  tabIndex={-1}
+                  icon={showRegPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                />
+              } />
+          </Field>
         </div>
         {regMode === 'create' && (
           <div className="relay-deploy-wizard__field">
-            <Input label={t('relayDeploy.confirmPassword')} type={showRegPassword ? 'text' : 'password'}
-              value={regConfirm} onChange={(e) => setRegConfirm(e.target.value)}
-              prefix={<Lock size={16} />} size="medium" disabled={regLoading} />
+            <Field label={t('relayDeploy.confirmPassword')} controlWidth="fill">
+              <DesignInput type={showRegPassword ? 'text' : 'password'}
+                value={regConfirm} onChange={(e) => setRegConfirm(e.target.value)}
+                leading={<Lock size={16} />} disabled={regLoading} />
+            </Field>
           </div>
         )}
       </div>
diff --git a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx
index 0f4f9298f3..7d8230ab6c 100644
--- a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx
+++ b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx
@@ -3,12 +3,11 @@
  * Used to browse and select remote directory as workspace
  */
 
-import { Button, ConfirmDialog } from '@bitfun/ui';
+import { Button, ConfirmDialog, IconButton } from '@bitfun/ui';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { useI18n } from '@/infrastructure/i18n';
-import { PopupCloseButton } from '@/component-library';
 import type { RemoteFileEntry } from './types';
 import { sshApi } from './sshApi';
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
@@ -23,6 +22,7 @@ import {
   Loader2,
   Upload,
   Download,
+  X,
 } from 'lucide-react';
 import './RemoteFileBrowser.scss';
 
@@ -405,8 +405,10 @@ export const RemoteFileBrowser: React.FC<RemoteFileBrowserProps> = ({
           <h2 className="remote-file-browser__header-title">
             {t('ssh.remote.selectWorkspace')}
           </h2>
-          <PopupCloseButton
+          <IconButton
             className="remote-file-browser__close-btn"
+            icon={<X />}
+            size="md"
             onClick={onCancel}
             aria-label={t('actions.close')}
             data-bf-component="ssh-remote"
diff --git a/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.tsx b/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.tsx
index 28b996fb65..f18709239c 100644
--- a/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.tsx
+++ b/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.tsx
@@ -2,10 +2,10 @@
  * Unified SSH authentication prompt.
  */
 
-import { Button, IconButton, Modal, Select } from '@bitfun/ui';
+import { Button, Field, IconButton, Input, Modal, Select } from '@bitfun/ui';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
-import { Input, Tooltip } from '@/component-library';
+import { Tooltip } from '@/component-library';
 import { FolderOpen, Key, Loader2, Lock, Server, User } from 'lucide-react';
 import type { SSHAuthMethod } from './types';
 import {
@@ -167,15 +167,15 @@ export const SSHAuthPromptDialog: React.FC<SSHAuthPromptDialogProps> = ({
 
         {!lockUsername && (
           <div className="ssh-auth-prompt-dialog__field" data-bf-component="ssh-remote" data-bf-part="authField">
-            <Input
-              label={t('ssh.remote.username')}
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="root"
-              prefix={<User size={16} />}
-              size="medium"
-              disabled={isConnecting}
-            />
+            <Field label={t('ssh.remote.username')} controlWidth="fill">
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="root"
+                leading={<User size={16} />}
+                disabled={isConnecting}
+              />
+            </Field>
           </div>
         )}
 
@@ -194,78 +194,78 @@ export const SSHAuthPromptDialog: React.FC<SSHAuthPromptDialogProps> = ({
 
         {authMethod === 'password' && (
           <div className="ssh-auth-prompt-dialog__field">
-            <Input
-              ref={passwordRef}
-              label={t('ssh.remote.password')}
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              prefix={<Lock size={16} />}
-              size="medium"
-              disabled={isConnecting}
-            />
+            <Field label={t('ssh.remote.password')} controlWidth="fill">
+              <Input
+                ref={passwordRef}
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                leading={<Lock size={16} />}
+                disabled={isConnecting}
+              />
+            </Field>
           </div>
         )}
 
         {authMethod === 'privateKey' && (
           <>
             <div className="ssh-auth-prompt-dialog__field">
-              <Input
-                label={t('ssh.remote.privateKeyPath')}
-                value={keyPath}
-                onChange={(e) => setKeyPath(e.target.value)}
-                placeholder="~/.ssh/id_rsa"
-                prefix={<Key size={16} />}
-                suffix={
-                  <Tooltip content={t('ssh.remote.browsePrivateKey')}>
-                    <IconButton
-                      type="button"
-                      size="sm"
-                      className="ssh-auth-prompt-dialog__browse-key"
-                      aria-label={t('ssh.remote.browsePrivateKey')}
-                      disabled={isConnecting}
-                      onClick={() => void handleBrowsePrivateKey()}
-                      icon={<FolderOpen size={16} />}
-                    />
-                  </Tooltip>
-                }
-                size="medium"
-                disabled={isConnecting}
-              />
+              <Field label={t('ssh.remote.privateKeyPath')} controlWidth="fill">
+                <Input
+                  value={keyPath}
+                  onChange={(e) => setKeyPath(e.target.value)}
+                  placeholder="~/.ssh/id_rsa"
+                  leading={<Key size={16} />}
+                  trailing={
+                    <Tooltip content={t('ssh.remote.browsePrivateKey')}>
+                      <IconButton
+                        type="button"
+                        size="sm"
+                        className="ssh-auth-prompt-dialog__browse-key"
+                        aria-label={t('ssh.remote.browsePrivateKey')}
+                        disabled={isConnecting}
+                        onClick={() => void handleBrowsePrivateKey()}
+                        icon={<FolderOpen size={16} />}
+                      />
+                    </Tooltip>
+                  }
+                  disabled={isConnecting}
+                />
+              </Field>
             </div>
             <div className="ssh-auth-prompt-dialog__field">
-              <Input
-                label={t('ssh.remote.passphrase')}
-                type="password"
-                value={passphrase}
-                onChange={(e) => setPassphrase(e.target.value)}
-                placeholder={t('ssh.remote.passphraseOptional')}
-                size="medium"
-                disabled={isConnecting}
-              />
+              <Field label={t('ssh.remote.passphrase')} controlWidth="fill">
+                <Input
+                  type="password"
+                  value={passphrase}
+                  onChange={(e) => setPassphrase(e.target.value)}
+                  placeholder={t('ssh.remote.passphraseOptional')}
+                  disabled={isConnecting}
+                />
+              </Field>
             </div>
             <div className="ssh-auth-prompt-dialog__field">
-              <Input
-                label={t('ssh.remote.certificatePath')}
-                value={certificatePath}
-                onChange={(e) => setCertificatePath(e.target.value)}
-                placeholder={t('ssh.remote.certificatePathOptional')}
-                suffix={
-                  <Tooltip content={t('ssh.remote.browseCertificate')}>
-                    <IconButton
-                      type="button"
-                      size="sm"
-                      className="ssh-auth-prompt-dialog__browse-key"
-                      aria-label={t('ssh.remote.browseCertificate')}
-                      disabled={isConnecting}
-                      onClick={() => void handleBrowseCertificate()}
-                      icon={<FolderOpen size={16} />}
-                    />
-                  </Tooltip>
-                }
-                size="medium"
-                disabled={isConnecting}
-              />
+              <Field label={t('ssh.remote.certificatePath')} controlWidth="fill">
+                <Input
+                  value={certificatePath}
+                  onChange={(e) => setCertificatePath(e.target.value)}
+                  placeholder={t('ssh.remote.certificatePathOptional')}
+                  trailing={
+                    <Tooltip content={t('ssh.remote.browseCertificate')}>
+                      <IconButton
+                        type="button"
+                        size="sm"
+                        className="ssh-auth-prompt-dialog__browse-key"
+                        aria-label={t('ssh.remote.browseCertificate')}
+                        disabled={isConnecting}
+                        onClick={() => void handleBrowseCertificate()}
+                        icon={<FolderOpen size={16} />}
+                      />
+                    </Tooltip>
+                  }
+                  disabled={isConnecting}
+                />
+              </Field>
             </div>
           </>
         )}
@@ -273,27 +273,27 @@ export const SSHAuthPromptDialog: React.FC<SSHAuthPromptDialogProps> = ({
         {authMethod === 'keyboardInteractive' && (
           <>
             <div className="ssh-auth-prompt-dialog__field">
-              <Input
-                ref={passwordRef}
-                label={t('ssh.remote.challengePassword')}
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                prefix={<Lock size={16} />}
-                size="medium"
-                disabled={isConnecting}
-              />
+              <Field label={t('ssh.remote.challengePassword')} controlWidth="fill">
+                <Input
+                  ref={passwordRef}
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  leading={<Lock size={16} />}
+                  disabled={isConnecting}
+                />
+              </Field>
             </div>
             <div className="ssh-auth-prompt-dialog__field">
-              <Input
-                label={t('ssh.remote.verificationCode')}
-                type="password"
-                value={verificationCode}
-                onChange={(e) => setVerificationCode(e.target.value)}
-                placeholder={t('ssh.remote.optional')}
-                size="medium"
-                disabled={isConnecting}
-              />
+              <Field label={t('ssh.remote.verificationCode')} controlWidth="fill">
+                <Input
+                  type="password"
+                  value={verificationCode}
+                  onChange={(e) => setVerificationCode(e.target.value)}
+                  placeholder={t('ssh.remote.optional')}
+                  disabled={isConnecting}
+                />
+              </Field>
             </div>
           </>
         )}
diff --git a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx
index e64f27596b..6ca21345bb 100644
--- a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx
+++ b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx
@@ -3,12 +3,12 @@
  * Professional SSH connection dialog following BitFun design patterns
  */
 
-import { Button, IconButton, Input as DesignInput, Modal, Select } from '@bitfun/ui';
+import { Button, Field, IconButton, Input as DesignInput, Modal, Select } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { useSSHRemoteContext } from './SSHRemoteContext';
 import { SSHAuthPromptDialog, type SSHAuthPromptSubmitPayload } from './SSHAuthPromptDialog';
-import { Alert, Input, Tooltip } from '@/component-library';
+import { Alert, Tooltip } from '@/component-library';
 import {
   ArrowDownToLine,
   CheckCircle2,
@@ -906,36 +906,36 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
             {/* Host and Port */}
             <div className="ssh-connection-dialog__row ssh-connection-dialog__row--host">
               <div className="ssh-connection-dialog__field ssh-connection-dialog__field--flex">
-                <Input
-                  label={t('ssh.remote.host')}
-                  value={formData.host}
-                  onChange={(e) => handleInputChange('host', e.target.value)}
-                  placeholder=""
-                  prefix={<Server size={16} />}
-                  size="medium"
-                />
+                <Field label={t('ssh.remote.host')} controlWidth="fill">
+                  <DesignInput
+                    value={formData.host}
+                    onChange={(e) => handleInputChange('host', e.target.value)}
+                    placeholder=""
+                    leading={<Server size={16} />}
+                  />
+                </Field>
               </div>
               <div className="ssh-connection-dialog__field ssh-connection-dialog__field--port">
-                <Input
-                  label={t('ssh.remote.port')}
-                  value={formData.port}
-                  onChange={(e) => handleInputChange('port', e.target.value)}
-                  placeholder="22"
-                  size="medium"
-                />
+                <Field label={t('ssh.remote.port')} controlWidth="fill">
+                  <DesignInput
+                    value={formData.port}
+                    onChange={(e) => handleInputChange('port', e.target.value)}
+                    placeholder="22"
+                  />
+                </Field>
               </div>
             </div>
 
             {/* Username */}
             <div className="ssh-connection-dialog__field">
-              <Input
-                label={t('ssh.remote.username')}
-                value={formData.username}
-                onChange={(e) => handleInputChange('username', e.target.value)}
-                placeholder=""
-                prefix={<User size={16} />}
-                size="medium"
-              />
+              <Field label={t('ssh.remote.username')} controlWidth="fill">
+                <DesignInput
+                  value={formData.username}
+                  onChange={(e) => handleInputChange('username', e.target.value)}
+                  placeholder=""
+                  leading={<User size={16} />}
+                />
+              </Field>
             </div>
               </>
             )}
@@ -997,32 +997,32 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
                       </div>
                     </div>
                     <div className="ssh-connection-dialog__field">
-                      <Input
-                        label={t('ssh.remote.dockerPath')}
-                        value={formData.dockerPath}
-                        onChange={(e) => handleInputChange('dockerPath', e.target.value)}
-                        placeholder="docker"
-                        size="medium"
-                      />
+                      <Field label={t('ssh.remote.dockerPath')} controlWidth="fill">
+                        <DesignInput
+                          value={formData.dockerPath}
+                          onChange={(e) => handleInputChange('dockerPath', e.target.value)}
+                          placeholder="docker"
+                        />
+                      </Field>
                     </div>
                     <div className="ssh-connection-dialog__row">
                       <div className="ssh-connection-dialog__field ssh-connection-dialog__field--flex">
-                        <Input
-                          label={t('ssh.remote.containerShell')}
-                          value={formData.containerShell}
-                          onChange={(e) => handleInputChange('containerShell', e.target.value)}
-                          placeholder="/bin/sh"
-                          size="medium"
-                        />
+                        <Field label={t('ssh.remote.containerShell')} controlWidth="fill">
+                          <DesignInput
+                            value={formData.containerShell}
+                            onChange={(e) => handleInputChange('containerShell', e.target.value)}
+                            placeholder="/bin/sh"
+                          />
+                        </Field>
                       </div>
                       <div className="ssh-connection-dialog__field ssh-connection-dialog__field--flex">
-                        <Input
-                          label={t('ssh.remote.containerUser')}
-                          value={formData.containerUser}
-                          onChange={(e) => handleInputChange('containerUser', e.target.value)}
-                          placeholder={t('ssh.remote.optional')}
-                          size="medium"
-                        />
+                        <Field label={t('ssh.remote.containerUser')} controlWidth="fill">
+                          <DesignInput
+                            value={formData.containerUser}
+                            onChange={(e) => handleInputChange('containerUser', e.target.value)}
+                            placeholder={t('ssh.remote.optional')}
+                          />
+                        </Field>
                       </div>
                     </div>
                   </>
@@ -1055,20 +1055,26 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
             {/* Password */}
             {formData.authType === 'password' && (
               <div className="ssh-connection-dialog__field">
-                <Input
-                  label={t('ssh.remote.password')}
-                  type={showPassword ? 'text' : 'password'}
-                  value={formData.password}
-                  onChange={(e) => handleInputChange('password', e.target.value)}
-                  placeholder=""
-                  prefix={<Lock size={16} />}
-                  size="medium"
-                  suffix={
-                    <button type="button" className="bitfun-input-toggle" onClick={() => setShowPassword(s => !s)} tabIndex={-1}>
-                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                    </button>
-                  }
-                />
+                <Field label={t('ssh.remote.password')} controlWidth="fill">
+                  <DesignInput
+                    type={showPassword ? 'text' : 'password'}
+                    value={formData.password}
+                    onChange={(e) => handleInputChange('password', e.target.value)}
+                    placeholder=""
+                    leading={<Lock size={16} />}
+                    trailing={
+                      <IconButton
+                        type="button"
+                        size="sm"
+                        variant="quiet"
+                        aria-label={showPassword ? t('ssh.remote.hidePassword') : t('ssh.remote.showPassword')}
+                        onClick={() => setShowPassword(s => !s)}
+                        tabIndex={-1}
+                        icon={showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                      />
+                    }
+                  />
+                </Field>
               </div>
             )}
 
@@ -1076,64 +1082,70 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
             {formData.authType === 'privateKey' && (
               <>
                 <div className="ssh-connection-dialog__field">
-                  <Input
-                    label={t('ssh.remote.privateKeyPath')}
-                    value={formData.keyPath}
-                    onChange={(e) => handleInputChange('keyPath', e.target.value)}
-                    placeholder="~/.ssh/id_rsa"
-                    prefix={<Key size={16} />}
-                    suffix={
-                      <Tooltip content={t('ssh.remote.browsePrivateKey')}>
-                        <IconButton
-                          type="button"
-                          size="sm"
-                          className="ssh-connection-dialog__browse-key"
-                          aria-label={t('ssh.remote.browsePrivateKey')}
-                          disabled={isConnecting || status === 'connecting'}
-                          onClick={() => void handleBrowsePrivateKey()}
-                          icon={<FolderOpen size={16} />}
-                        />
-                      </Tooltip>
-                    }
-                    size="medium"
-                  />
-                </div>
-                <div className="ssh-connection-dialog__field">
-                  <Input
-                    label={t('ssh.remote.passphrase')}
-                    type={showPassphrase ? 'text' : 'password'}
-                    value={formData.passphrase}
-                    onChange={(e) => handleInputChange('passphrase', e.target.value)}
-                    placeholder={t('ssh.remote.passphraseOptional')}
-                    size="medium"
-                    suffix={
-                      <button type="button" className="bitfun-input-toggle" onClick={() => setShowPassphrase(s => !s)} tabIndex={-1}>
-                        {showPassphrase ? <EyeOff size={16} /> : <Eye size={16} />}
-                      </button>
-                    }
-                  />
+                  <Field label={t('ssh.remote.privateKeyPath')} controlWidth="fill">
+                    <DesignInput
+                      value={formData.keyPath}
+                      onChange={(e) => handleInputChange('keyPath', e.target.value)}
+                      placeholder="~/.ssh/id_rsa"
+                      leading={<Key size={16} />}
+                      trailing={
+                        <Tooltip content={t('ssh.remote.browsePrivateKey')}>
+                          <IconButton
+                            type="button"
+                            size="sm"
+                            className="ssh-connection-dialog__browse-key"
+                            aria-label={t('ssh.remote.browsePrivateKey')}
+                            disabled={isConnecting || status === 'connecting'}
+                            onClick={() => void handleBrowsePrivateKey()}
+                            icon={<FolderOpen size={16} />}
+                          />
+                        </Tooltip>
+                      }
+                    />
+                  </Field>
                 </div>
                 <div className="ssh-connection-dialog__field">
-                  <Input
-                    label={t('ssh.remote.certificatePath')}
-                    value={formData.certificatePath}
-                    onChange={(e) => handleInputChange('certificatePath', e.target.value)}
-                    placeholder={t('ssh.remote.certificatePathOptional')}
-                    suffix={
-                      <Tooltip content={t('ssh.remote.browseCertificate')}>
+                  <Field label={t('ssh.remote.passphrase')} controlWidth="fill">
+                    <DesignInput
+                      type={showPassphrase ? 'text' : 'password'}
+                      value={formData.passphrase}
+                      onChange={(e) => handleInputChange('passphrase', e.target.value)}
+                      placeholder={t('ssh.remote.passphraseOptional')}
+                      trailing={
                         <IconButton
                           type="button"
                           size="sm"
-                          className="ssh-connection-dialog__browse-key"
-                          aria-label={t('ssh.remote.browseCertificate')}
-                          disabled={isConnecting || status === 'connecting'}
-                          onClick={() => void handleBrowseCertificate()}
-                          icon={<FolderOpen size={16} />}
+                          variant="quiet"
+                          aria-label={showPassphrase ? t('ssh.remote.hidePassword') : t('ssh.remote.showPassword')}
+                          onClick={() => setShowPassphrase(s => !s)}
+                          tabIndex={-1}
+                          icon={showPassphrase ? <EyeOff size={16} /> : <Eye size={16} />}
                         />
-                      </Tooltip>
-                    }
-                    size="medium"
-                  />
+                      }
+                    />
+                  </Field>
+                </div>
+                <div className="ssh-connection-dialog__field">
+                  <Field label={t('ssh.remote.certificatePath')} controlWidth="fill">
+                    <DesignInput
+                      value={formData.certificatePath}
+                      onChange={(e) => handleInputChange('certificatePath', e.target.value)}
+                      placeholder={t('ssh.remote.certificatePathOptional')}
+                      trailing={
+                        <Tooltip content={t('ssh.remote.browseCertificate')}>
+                          <IconButton
+                            type="button"
+                            size="sm"
+                            className="ssh-connection-dialog__browse-key"
+                            aria-label={t('ssh.remote.browseCertificate')}
+                            disabled={isConnecting || status === 'connecting'}
+                            onClick={() => void handleBrowseCertificate()}
+                            icon={<FolderOpen size={16} />}
+                          />
+                        </Tooltip>
+                      }
+                    />
+                  </Field>
                 </div>
               </>
             )}
@@ -1141,22 +1153,22 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
             {formData.authType === 'agent' && (
               <>
                 <div className="ssh-connection-dialog__field">
-                  <Input
-                    label={t('ssh.remote.agentFingerprint')}
-                    value={formData.keyFingerprint}
-                    onChange={(e) => handleInputChange('keyFingerprint', e.target.value)}
-                    placeholder={t('ssh.remote.optional')}
-                    size="medium"
-                  />
+                  <Field label={t('ssh.remote.agentFingerprint')} controlWidth="fill">
+                    <DesignInput
+                      value={formData.keyFingerprint}
+                      onChange={(e) => handleInputChange('keyFingerprint', e.target.value)}
+                      placeholder={t('ssh.remote.optional')}
+                    />
+                  </Field>
                 </div>
                 <div className="ssh-connection-dialog__field">
-                  <Input
-                    label={t('ssh.remote.agentFallbackKey')}
-                    value={formData.fallbackKeyPath}
-                    onChange={(e) => handleInputChange('fallbackKeyPath', e.target.value)}
-                    placeholder={t('ssh.remote.optional')}
-                    size="medium"
-                  />
+                  <Field label={t('ssh.remote.agentFallbackKey')} controlWidth="fill">
+                    <DesignInput
+                      value={formData.fallbackKeyPath}
+                      onChange={(e) => handleInputChange('fallbackKeyPath', e.target.value)}
+                      placeholder={t('ssh.remote.optional')}
+                    />
+                  </Field>
                 </div>
               </>
             )}
@@ -1164,23 +1176,23 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
             {formData.authType === 'keyboardInteractive' && (
               <div className="ssh-connection-dialog__row">
                 <div className="ssh-connection-dialog__field ssh-connection-dialog__field--flex">
-                  <Input
-                    label={t('ssh.remote.challengePassword')}
-                    type="password"
-                    value={formData.password}
-                    onChange={(e) => handleInputChange('password', e.target.value)}
-                    size="medium"
-                  />
+                  <Field label={t('ssh.remote.challengePassword')} controlWidth="fill">
+                    <DesignInput
+                      type="password"
+                      value={formData.password}
+                      onChange={(e) => handleInputChange('password', e.target.value)}
+                    />
+                  </Field>
                 </div>
                 <div className="ssh-connection-dialog__field ssh-connection-dialog__field--flex">
-                  <Input
-                    label={t('ssh.remote.verificationCode')}
-                    type="password"
-                    value={formData.verificationCode}
-                    onChange={(e) => handleInputChange('verificationCode', e.target.value)}
-                    placeholder={t('ssh.remote.optional')}
-                    size="medium"
-                  />
+                  <Field label={t('ssh.remote.verificationCode')} controlWidth="fill">
+                    <DesignInput
+                      type="password"
+                      value={formData.verificationCode}
+                      onChange={(e) => handleInputChange('verificationCode', e.target.value)}
+                      placeholder={t('ssh.remote.optional')}
+                    />
+                  </Field>
                 </div>
               </div>
             )}
@@ -1211,25 +1223,25 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
               {showAdvancedSettings && (
                 <div className="ssh-connection-dialog__advanced-panel">
                   <div className="ssh-connection-dialog__field">
-                    <Input
-                      label={t('ssh.remote.connectionName')}
-                      value={formData.name}
-                      onChange={(e) => handleInputChange('name', e.target.value)}
-                      placeholder={t('ssh.remote.connectionNamePlaceholder')}
-                      size="medium"
-                    />
+                    <Field label={t('ssh.remote.connectionName')} controlWidth="fill">
+                      <DesignInput
+                        value={formData.name}
+                        onChange={(e) => handleInputChange('name', e.target.value)}
+                        placeholder={t('ssh.remote.connectionNamePlaceholder')}
+                      />
+                    </Field>
                   </div>
 
                   {!isLocalDockerTarget && (
                     <>
                       <div className="ssh-connection-dialog__field">
-                        <Input
-                          label={t('ssh.remote.proxyJump')}
-                          value={formData.proxyJump}
-                          onChange={(e) => handleInputChange('proxyJump', e.target.value)}
-                          placeholder={t('ssh.remote.proxyJumpPlaceholder')}
-                          size="medium"
-                        />
+                        <Field label={t('ssh.remote.proxyJump')} controlWidth="fill">
+                          <DesignInput
+                            value={formData.proxyJump}
+                            onChange={(e) => handleInputChange('proxyJump', e.target.value)}
+                            placeholder={t('ssh.remote.proxyJumpPlaceholder')}
+                          />
+                        </Field>
                         <div className="ssh-connection-dialog__hint">
                           {t('ssh.remote.proxyJumpHint')}
                         </div>
@@ -1252,36 +1264,36 @@ export const SSHConnectionDialog: React.FC<SSHConnectionDialogProps> = ({
                         </div>
                         <div className="ssh-connection-dialog__options-grid">
                           <div className="ssh-connection-dialog__field">
-                            <Input
-                              label={t('ssh.remote.connectTimeout')}
-                              value={formData.connectTimeoutSecs}
-                              onChange={(e) => handleInputChange('connectTimeoutSecs', e.target.value)}
-                              size="medium"
-                            />
+                            <Field label={t('ssh.remote.connectTimeout')} controlWidth="fill">
+                              <DesignInput
+                                value={formData.connectTimeoutSecs}
+                                onChange={(e) => handleInputChange('connectTimeoutSecs', e.target.value)}
+                              />
+                            </Field>
                           </div>
                           <div className="ssh-connection-dialog__field">
-                            <Input
-                              label={t('ssh.remote.authTimeout')}
-                              value={formData.authTimeoutSecs}
-                              onChange={(e) => handleInputChange('authTimeoutSecs', e.target.value)}
-                              size="medium"
-                            />
+                            <Field label={t('ssh.remote.authTimeout')} controlWidth="fill">
+                              <DesignInput
+                                value={formData.authTimeoutSecs}
+                                onChange={(e) => handleInputChange('authTimeoutSecs', e.target.value)}
+                              />
+                            </Field>
                           </div>
                           <div className="ssh-connection-dialog__field">
-                            <Input
-                              label={t('ssh.remote.authAttempts')}
-                              value={formData.authAttempts}
-                              onChange={(e) => handleInputChange('authAttempts', e.target.value)}
-                              size="medium"
-                            />
+                            <Field label={t('ssh.remote.authAttempts')} controlWidth="fill">
+                              <DesignInput
+                                value={formData.authAttempts}
+                                onChange={(e) => handleInputChange('authAttempts', e.target.value)}
+                              />
+                            </Field>
                           </div>
                           <div className="ssh-connection-dialog__field">
-                            <Input
-                              label={t('ssh.remote.connectAttempts')}
-                              value={formData.connectAttempts}
-                              onChange={(e) => handleInputChange('connectAttempts', e.target.value)}
-                              size="medium"
-                            />
+                            <Field label={t('ssh.remote.connectAttempts')} controlWidth="fill">
+                              <DesignInput
+                                value={formData.connectAttempts}
+                                onChange={(e) => handleInputChange('connectAttempts', e.target.value)}
+                              />
+                            </Field>
                           </div>
                         </div>
                       </div>
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
index 7a4b8a3694..81a4166ae8 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
@@ -154,15 +154,12 @@
     flex: 1;
     min-width: 0;
 
-    &.bitfun-input-wrapper {
+    &[data-bf-component='input'] {
       gap: 0;
-    }
-
-    .bitfun-input-container {
       padding-right: 2px;
     }
 
-    .bitfun-input-suffix {
+    [data-bf-part='trailing'] {
       display: flex;
       align-items: center;
       padding: 0;
diff --git a/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts b/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts
index 0e11c2af2d..030bff58a5 100644
--- a/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts
+++ b/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts
@@ -611,36 +611,6 @@ export function buildBuiltinAppearance(palette: AppearancePalette): AppearancePa
           footer: { base: { display: 'flex', alignItems: 'center', gap: lengthRef('gap-2') }, facets: { align: { left: { justifyContent: 'flex-start' }, center: { justifyContent: 'center' }, right: { justifyContent: 'flex-end' }, between: { justifyContent: 'space-between' } } } },
         },
       },
-      input: {
-        parts: {
-          root: { base: { display: 'flex', flexDirection: 'column', gap: { kind: 'px', value: 6 } }, states: { disabled: { opacity: numberRef('opacity-disabled'), cursor: 'default' } } },
-          label: { base: { color: colorRef('text-secondary'), fontSize: lengthRef('font-sm'), fontWeight: numberRef('weight-medium') } },
-          container: {
-            base: { display: 'flex', alignItems: 'center', gap: lengthRef('gap-2'), paddingInline: lengthRef('gap-3'), borderRadius: { kind: 'px', value: 4 }, borderStyle: 'solid', borderWidth: lengthRef('border-one'), transition: transition() },
-            facets: {
-              variant: {
-                default: { backgroundColor: { kind: 'transparent' }, borderColor: colorRef('border-base') },
-                filled: { backgroundColor: colorRef('element-subtle'), borderColor: { kind: 'transparent' } },
-                outlined: { backgroundColor: { kind: 'transparent' }, borderColor: colorRef('border-strong') },
-              },
-              size: {
-                small: { height: { kind: 'px', value: 28 }, fontSize: { kind: 'px', value: 13 } },
-                medium: { height: { kind: 'px', value: 36 }, fontSize: { kind: 'px', value: 14 } },
-                large: { height: { kind: 'px', value: 44 }, fontSize: { kind: 'px', value: 15 } },
-              },
-            },
-            states: {
-              hover: { backgroundColor: colorRef('element-subtle'), borderColor: colorRef('border-strong') },
-              focusWithin: { backgroundColor: { kind: 'transparent' }, borderColor: colorRef('accent') },
-              error: { borderColor: colorRef('error-border') },
-            },
-          },
-          control: { base: { color: colorRef('text-primary'), fontFamily: fontRef('sans') } },
-          prefix: { base: { color: colorRef('text-muted') } },
-          suffix: { base: { color: colorRef('text-muted') } },
-          message: { base: { color: colorRef('error'), fontSize: lengthRef('font-xs') } },
-        },
-      },
     },
     renderers: {
       'css-tokens': {
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index 560bba2eeb..eabefa20ed 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -1,30 +1,23 @@
 import { cardAppearanceDescriptor } from '@/component-library/components/Card/appearance';
-import { inputAppearanceDescriptor } from '@/component-library/components/Input/appearance';
 import { tooltipAppearanceDescriptor } from '@/component-library/components/Tooltip/appearance';
 import { iconButtonAppearanceDescriptor } from '@/component-library/components/IconButton/appearance';
 import { popupCloseButtonAppearanceDescriptor } from '@/component-library/components/PopupCloseButton/appearance';
 import { checkboxAppearanceDescriptor } from '@/component-library/components/Checkbox/appearance';
 import { textareaAppearanceDescriptor } from '@/component-library/components/Textarea/appearance';
 import { numberInputAppearanceDescriptor } from '@/component-library/components/NumberInput/appearance';
-import { searchAppearanceDescriptor } from '@/component-library/components/Search/appearance';
 import { tabsAppearanceDescriptor } from '@/component-library/components/Tabs/appearance';
 import { selectAppearanceDescriptor } from '@/component-library/components/Select/appearance';
 import { alertAppearanceDescriptor } from '@/component-library/components/Alert/appearance';
-import { badgeAppearanceDescriptor } from '@/component-library/components/Badge/appearance';
 import { tagAppearanceDescriptor } from '@/component-library/components/Tag/appearance';
 import { avatarAppearanceDescriptor } from '@/component-library/components/Avatar/appearance';
 import { codeEditorAppearanceDescriptor } from '@/component-library/components/CodeEditor/appearance';
 import { configPageAppearanceDescriptor } from '@/component-library/components/ConfigPage/appearance';
 import { confirmDialogAppearanceDescriptor } from '@/infrastructure/confirm-dialog';
 import { cubeLoadingAppearanceDescriptor } from '@/component-library/components/CubeLoading/appearance';
-import { cubeLogoAppearanceDescriptor } from '@/component-library/components/CubeLogo/appearance';
 import { dotMatrixLoaderAppearanceDescriptor } from '@/component-library/components/DotMatrixLoader/appearance';
 import { emptyAppearanceDescriptor } from '@/component-library/components/Empty/appearance';
-import { filterPillAppearanceDescriptor } from '@/component-library/components/FilterPill/appearance';
 import { inputDialogAppearanceDescriptor } from '@/component-library/components/InputDialog/appearance';
-import { streamTextAppearanceDescriptor } from '@/component-library/components/StreamText/appearance';
 import { taskRunningIndicatorAppearanceDescriptor } from '@/component-library/components/TaskRunningIndicator/appearance';
-import { textStrokeEffectAppearanceDescriptor } from '@/component-library/components/TextStrokeEffect/appearance';
 import { windowControlsAppearanceDescriptor } from '@/component-library/components/WindowControls/appearance';
 import { markdownAppearanceDescriptor } from '@/component-library/components/Markdown/appearance';
 import { flowChatCardAppearanceDescriptor } from '@/component-library/components/FlowChatCards/appearance';
@@ -295,32 +288,25 @@ import { AppearanceRegistry } from './AppearanceRegistry';
 export function createDefaultAppearanceRegistry(): AppearanceRegistry {
   return new AppearanceRegistry()
     .registerComponent(cardAppearanceDescriptor)
-    .registerComponent(inputAppearanceDescriptor)
     .registerComponent(tooltipAppearanceDescriptor)
     .registerComponent(iconButtonAppearanceDescriptor)
     .registerComponent(popupCloseButtonAppearanceDescriptor)
     .registerComponent(checkboxAppearanceDescriptor)
     .registerComponent(textareaAppearanceDescriptor)
     .registerComponent(numberInputAppearanceDescriptor)
-    .registerComponent(searchAppearanceDescriptor)
     .registerComponent(tabsAppearanceDescriptor)
     .registerComponent(selectAppearanceDescriptor)
     .registerComponent(alertAppearanceDescriptor)
-    .registerComponent(badgeAppearanceDescriptor)
     .registerComponent(tagAppearanceDescriptor)
     .registerComponent(avatarAppearanceDescriptor)
     .registerComponent(codeEditorAppearanceDescriptor)
     .registerComponent(configPageAppearanceDescriptor)
     .registerComponent(confirmDialogAppearanceDescriptor)
     .registerComponent(cubeLoadingAppearanceDescriptor)
-    .registerComponent(cubeLogoAppearanceDescriptor)
     .registerComponent(dotMatrixLoaderAppearanceDescriptor)
     .registerComponent(emptyAppearanceDescriptor)
-    .registerComponent(filterPillAppearanceDescriptor)
     .registerComponent(inputDialogAppearanceDescriptor)
-    .registerComponent(streamTextAppearanceDescriptor)
     .registerComponent(taskRunningIndicatorAppearanceDescriptor)
-    .registerComponent(textStrokeEffectAppearanceDescriptor)
     .registerComponent(windowControlsAppearanceDescriptor)
     .registerComponent(markdownAppearanceDescriptor)
     .registerComponent(flowChatCardAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
index a91889e0e2..35fc60ddc6 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
@@ -1,7 +1,7 @@
-import { Button, Field, Select } from '@bitfun/ui';
+import { Button, Field, Input, Select } from '@bitfun/ui';
 import { type FormEvent, useCallback, useEffect, useState } from 'react';
 import { AlertTriangle, Image, Inbox, RefreshCw, ShieldCheck, Upload } from 'lucide-react';
-import { Input, Textarea } from '@/component-library';
+import { Textarea } from '@/component-library';
 import { confirmDialog } from '@/infrastructure/confirm-dialog';
 import {
   appearanceMarketAPI,
@@ -222,29 +222,34 @@ export function AppearanceMarketWorkflows({ workflow }: AppearanceMarketWorkflow
         </div>
       </div>
       <div className="appearance-market__manual-package-row">
-        <Input
+        <Field
           label={t('package.market.submissions.manual.package')}
-          value={manualDraft.packagePath}
-          placeholder={t('package.market.submissions.manual.packagePlaceholder')}
-          readOnly
+          controlWidth="fill"
           required
-        />
+        >
+          <Input
+            value={manualDraft.packagePath}
+            placeholder={t('package.market.submissions.manual.packagePlaceholder')}
+            readOnly
+          />
+        </Field>
         <Button type="button" variant="outline" onClick={() => void choosePackage()} disabled={submitting}>
           {t('package.market.submissions.manual.choose')}
         </Button>
       </div>
       <div className="appearance-market__manual-submit-grid">
-        <Input
-          label={t('package.market.submissions.manual.slug')}
-          value={manualDraft.slug}
-          placeholder={t('package.market.submissions.manual.slugPlaceholder')}
-          pattern="[a-z0-9][a-z0-9-]{2,62}"
-          maxLength={63}
-          onChange={event => setManualDraft(current => ({
-            ...current,
-            slug: event.target.value.toLowerCase(),
-          }))}
-        />
+        <Field label={t('package.market.submissions.manual.slug')} controlWidth="fill">
+          <Input
+            value={manualDraft.slug}
+            placeholder={t('package.market.submissions.manual.slugPlaceholder')}
+            pattern="[a-z0-9][a-z0-9-]{2,62}"
+            maxLength={63}
+            onChange={event => setManualDraft(current => ({
+              ...current,
+              slug: event.target.value.toLowerCase(),
+            }))}
+          />
+        </Field>
         <Field label={t('package.market.submissions.manual.licenseType')} controlWidth="fill">
           <Select
             value={manualDraft.licenseKind}
@@ -259,42 +264,51 @@ export function AppearanceMarketWorkflows({ workflow }: AppearanceMarketWorkflow
             }))}
           />
         </Field>
-        <Input
+        <Field
           label={manualDraft.licenseKind === 'spdx'
             ? t('package.market.submissions.manual.spdxExpression')
             : t('package.market.submissions.manual.customLicenseUrl')}
-          value={manualDraft.licenseValue}
-          placeholder={manualDraft.licenseKind === 'spdx'
-            ? 'MIT'
-            : 'https://example.com/license'}
-          type={manualDraft.licenseKind === 'custom' ? 'url' : 'text'}
+          controlWidth="fill"
           required
-          maxLength={manualDraft.licenseKind === 'spdx' ? 120 : 2048}
-          onChange={event => setManualDraft(current => ({
-            ...current,
-            licenseValue: event.target.value,
-          }))}
-        />
-        <Input
+        >
+          <Input
+            value={manualDraft.licenseValue}
+            placeholder={manualDraft.licenseKind === 'spdx'
+              ? 'MIT'
+              : 'https://example.com/license'}
+            type={manualDraft.licenseKind === 'custom' ? 'url' : 'text'}
+            maxLength={manualDraft.licenseKind === 'spdx' ? 120 : 2048}
+            onChange={event => setManualDraft(current => ({
+              ...current,
+              licenseValue: event.target.value,
+            }))}
+          />
+        </Field>
+        <Field
           label={t('package.market.submissions.manual.minVersion')}
-          value={manualDraft.minBitfunVersion}
+          controlWidth="fill"
           required
+        >
+          <Input
+            value={manualDraft.minBitfunVersion}
+            onChange={event => setManualDraft(current => ({
+              ...current,
+              minBitfunVersion: event.target.value,
+            }))}
+          />
+        </Field>
+      </div>
+      <Field label={t('package.market.submissions.manual.repository')} controlWidth="fill">
+        <Input
+          value={manualDraft.repositoryUrl}
+          placeholder="https://github.com/owner/repository"
+          type="url"
           onChange={event => setManualDraft(current => ({
             ...current,
-            minBitfunVersion: event.target.value,
+            repositoryUrl: event.target.value,
           }))}
         />
-      </div>
-      <Input
-        label={t('package.market.submissions.manual.repository')}
-        value={manualDraft.repositoryUrl}
-        placeholder="https://github.com/owner/repository"
-        type="url"
-        onChange={event => setManualDraft(current => ({
-          ...current,
-          repositoryUrl: event.target.value,
-        }))}
-      />
+      </Field>
       <Textarea
         label={t('package.market.submissions.manual.changelog')}
         hint={t('package.market.submissions.manual.changelogHint')}
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
index 7977b97792..00e3ff582b 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
@@ -1166,7 +1166,7 @@
     &__toolbar {
       grid-template-columns: 1fr 1fr;
 
-      > .search {
+      > [data-bf-component='search-field'] {
         grid-column: 1 / -1;
       }
     }
diff --git a/src/web-ui/src/infrastructure/config/components/LocalVoiceModelsConfig.tsx b/src/web-ui/src/infrastructure/config/components/LocalVoiceModelsConfig.tsx
index 21155f7324..be7f0e1ada 100644
--- a/src/web-ui/src/infrastructure/config/components/LocalVoiceModelsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/LocalVoiceModelsConfig.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, Modal } from '@bitfun/ui';
+import { Button, IconButton, Modal, StatusPill, type StatusPillTone } from '@bitfun/ui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -9,7 +9,7 @@ import {
   ShieldCheck,
   Trash2,
 } from 'lucide-react';
-import { Badge, type BadgeVariant, Tooltip } from '@/component-library';
+import { Tooltip } from '@/component-library';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import {
   speechAPI,
@@ -57,7 +57,7 @@ function formatBytes(bytes: number): string {
   return `${value.toFixed(digits)} ${units[unitIndex]}`;
 }
 
-function statusBadgeVariant(state: SpeechModelInstallState): BadgeVariant {
+function statusBadgeVariant(state: SpeechModelInstallState): StatusPillTone {
   switch (state) {
     case 'installed':
       return 'success';
@@ -66,7 +66,7 @@ function statusBadgeVariant(state: SpeechModelInstallState): BadgeVariant {
       return 'info';
     case 'corrupt':
     case 'error':
-      return 'error';
+      return 'danger';
     default:
       return 'neutral';
   }
@@ -339,9 +339,9 @@ const LocalVoiceModelsConfig: React.FC<LocalVoiceModelsConfigProps> = ({
               <div className="voice-input-config__model-copy">
                 <div className="voice-input-config__model-title-row">
                   <div className="voice-input-config__model-name">{model.displayName}</div>
-                  <Badge variant={isSelected ? 'info' : statusBadgeVariant(model.state)}>
+                  <StatusPill tone={isSelected ? 'info' : statusBadgeVariant(model.state)}>
                     {isSelected ? t('model.selected') : t(`states.${model.state}`)}
-                  </Badge>
+                  </StatusPill>
                 </div>
                 <div className="voice-input-config__model-meta">
                   <span>{formatBytes(model.expectedBytes || model.installedBytes)}</span>
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
index 49882c2cc0..1a06368179 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
@@ -1147,7 +1147,7 @@
 
   &__form,
   &__form--modal {
-    .bitfun-input-container,
+    [data-bf-component='input'],
     .select__trigger,
     .bitfun-number-input__container,
     .resolved-url__value {
@@ -1156,13 +1156,13 @@
       box-sizing: border-box;
     }
 
-    .bitfun-input-container,
+    [data-bf-component='input'],
     .select__trigger,
     .resolved-url__value {
       padding-inline: 12px;
     }
 
-    .bitfun-input-wrapper,
+    [data-bf-component='input'],
     .select,
     .bitfun-number-input,
     .bitfun-model-settings__resolved-url {
@@ -1170,8 +1170,8 @@
       min-width: 0;
     }
 
-    .bitfun-input-container,
-    .bitfun-input,
+    [data-bf-component='input'],
+    [data-bf-component='input'] input,
     .select__value,
     .select__placeholder,
     .select__value-label,
@@ -1191,7 +1191,7 @@
     align-items: stretch;
 
     > .select,
-    > .bitfun-input-wrapper {
+    > [data-bf-component='input'] {
       width: 100%;
       min-width: 0;
     }
@@ -1298,7 +1298,7 @@
     width: 100%;
     align-items: start;
 
-    > .bitfun-input-wrapper {
+    > [data-bf-component='input'] {
       width: 100%;
       min-width: 0;
     }
@@ -1599,18 +1599,18 @@
   }
 
   &__resolved-url-input {
-    .bitfun-input-container {
+    &[data-bf-component='input'] {
       background: var(--bf-appearance-token-element-bg-subtle);
       border: none;
       box-shadow: none;
-    }
 
-    .bitfun-input-container:hover,
-    .bitfun-input-container:focus-within {
-      border: none;
+      &:hover,
+      &:focus-within {
+        border: none;
+      }
     }
 
-    .bitfun-input {
+    input {
       white-space: nowrap;
       overflow-x: auto;
       overflow-y: hidden;
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
index 97b1bf037f..418bec7b70 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
@@ -1,8 +1,8 @@
-import { Button, Switch, IconButton, Input, Modal, SearchField, Select } from '@bitfun/ui';
+import { Button, Card, Switch, IconButton, Input, Modal, SearchField, Select } from '@bitfun/ui';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus, SquarePen, Trash2, Wifi, Loader, RefreshCw, AlertTriangle, X, Settings, ExternalLink, Eye, EyeOff, ChevronDown, ChevronRight, ChevronUp, Info, Brain, FolderOpen, Search as SearchIcon } from 'lucide-react';
-import { Select as LegacySelect, NumberInput, Card, Textarea, Tooltip, type SelectOption } from '@/component-library';
+import { Select as LegacySelect, NumberInput, Textarea, Tooltip, type SelectOption } from '@/component-library';
 import {
   AIModelConfig as AIModelConfigType, 
   ProxyConfig, 
@@ -1938,9 +1938,8 @@ const ModelSettingsPage: React.FC = () => {
             <Card
               data-testid="settings-model-custom-config-btn"
               data-provider-id="custom"
-              variant="default"
-              padding="small"
-              interactive
+              appearance="neutral"
+              padding="sm"
               className="bitfun-model-settings__custom-option"
               onClick={handleSelectCustom}
             >
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
index a943da269a..3d3f8ba084 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
@@ -165,7 +165,7 @@
       white-space: nowrap;
     }
 
-    > .bitfun-input-wrapper {
+    > [data-bf-component='input'] {
       flex: 1 1 auto;
       min-width: 0;
     }
@@ -383,7 +383,7 @@
     flex: 0 1 220px;
     min-width: 120px;
 
-    > .bitfun-input-wrapper {
+    > [data-bf-component='input'] {
       width: 100%;
     }
   }
@@ -429,7 +429,7 @@
   }
 
   &__action > .select,
-  &__action > .bitfun-input-wrapper,
+  &__action > [data-bf-component='input'],
   &__action > .bitfun-number-input {
     min-width: 0;
   }
@@ -439,7 +439,7 @@
     width: 190px;
   }
 
-  &__action > .bitfun-input-wrapper,
+  &__action > [data-bf-component='input'],
   &__action > .bitfun-number-input {
     flex: 1 1 160px;
   }
@@ -531,7 +531,7 @@
     }
 
     &__action > .select:first-child,
-    &__action > .bitfun-input-wrapper,
+    &__action > [data-bf-component='input'],
     &__action > .bitfun-number-input,
     &__effort-control,
     &__action > .bitfun-reasoning-preset-editor__json {
diff --git a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx b/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
index 8a3a64239c..abcaafd204 100644
--- a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
@@ -45,7 +45,6 @@ vi.mock('react-i18next', () => ({
 }));
 
 vi.mock('@/component-library', () => ({
-  Badge: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
   Button: ({
     children,
     disabled,
diff --git a/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss b/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
index 8b2a39628a..37e07b667b 100644
--- a/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
@@ -90,16 +90,13 @@
   }
 
   &__market-toolbar {
+    display: flex;
+    align-items: center;
+    gap: $size-gap-2;
     margin-bottom: $size-gap-3;
 
-    .search__wrapper {
-      background: linear-gradient(
-        180deg,
-        var(--bf-appearance-token-color-overlay-white-08) 0%,
-        var(--bf-appearance-token-color-overlay-white-04) 100%
-      );
-      border: 1px solid var(--bf-appearance-token-border-subtle);
-      border-radius: $size-radius-lg;
+    > [data-bf-component='search-field'] {
+      flex: 1;
     }
   }
 
diff --git a/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx b/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx
index 02073683e3..af544e209e 100644
--- a/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { Button, IconButton, ConfirmDialog, Field, Select } from '@bitfun/ui';
+import { Button, Card, CardBody, IconButton, ConfirmDialog, Field, Input, SearchField, Select } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus, Trash2, RefreshCw, FolderOpen, X, Download, CheckCircle2, TrendingUp } from 'lucide-react';
-import { Input, Search, Card, CardBody, Tooltip } from '@/component-library';
+import { Plus, Trash2, RefreshCw, FolderOpen, X, Download, CheckCircle2, TrendingUp, Search as SearchIcon } from 'lucide-react';
+import { Tooltip } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 
 import { ConfigPageHeader, ConfigPageLayout, ConfigPageContent, ConfigPageSection, ConfigCollectionItem } from './common';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
@@ -24,6 +25,7 @@ const log = createLogger('SkillsConfig');
 
 const SkillsConfig: React.FC = () => {
   const { t } = useTranslation('settings/skills');
+  const { t: tShared } = useI18n(['components', 'common']);
   const [showAddForm, setShowAddForm] = useState(false);
   const [expandedSkillIds, setExpandedSkillIds] = useState<Set<string>>(new Set());
   const [skills, setSkills] = useState<SkillInfo[]>([]);
@@ -253,13 +255,13 @@ const SkillsConfig: React.FC = () => {
             </div>
           )}
           <div className="bitfun-skills-config__path-input">
-            <Input
-              label={t('form.path.label')}
-              placeholder={t('form.path.placeholder')}
-              value={formPath}
-              onChange={(e) => setFormPath(e.target.value)}
-              variant="outlined"
-            />
+            <Field label={t('form.path.label')} controlWidth="fill">
+              <Input
+                placeholder={t('form.path.placeholder')}
+                value={formPath}
+                onChange={(e) => setFormPath(e.target.value)}
+              />
+            </Field>
             <Tooltip content={t('form.path.browseTooltip')}>
               <IconButton
                 aria-label={t('form.path.browseTooltip')}
@@ -388,7 +390,7 @@ const SkillsConfig: React.FC = () => {
           {Array.from({ length: 5 }).map((_, index) => (
             <Card
               key={`market-loading-${index}`}
-              variant="elevated"
+              appearance="raised"
               padding="none"
               className="bitfun-skills-config__market-item is-loading"
               data-bf-component="skills-config"
@@ -437,7 +439,7 @@ const SkillsConfig: React.FC = () => {
           return (
             <Card
               key={skill.installId}
-              variant="elevated"
+              appearance="raised"
               padding="none"
               className={`bitfun-skills-config__market-item${isInstalled ? ' is-installed' : ''}`}
               data-bf-component="skills-config"
@@ -658,15 +660,20 @@ const SkillsConfig: React.FC = () => {
           )}
         >
           <div className="bitfun-skills-config__market-toolbar" data-bf-component="skills-config" data-bf-part="marketToolbar">
-            <Search
+            <SearchField
               placeholder={t('market.searchPlaceholder')}
+              aria-label={t('market.searchPlaceholder')}
+              leadingIcon={<SearchIcon size={14} aria-hidden />}
               value={marketKeyword}
-              onChange={(value) => setMarketKeyword(value)}
+              onValueChange={(value) => setMarketKeyword(value)}
               onSearch={handleMarketSearch}
-              showSearchButton
-              clearable
-              size="small"
+              clearLabel={marketKeyword ? tShared('components:search.clear') : undefined}
+              onClear={marketKeyword ? () => setMarketKeyword('') : undefined}
+              size="sm"
             />
+            <Button size="sm" variant="fill" onClick={handleMarketSearch}>
+              {tShared('common:actions.search')}
+            </Button>
           </div>
           {renderMarketList()}
         </ConfigPageSection>
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx b/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx
index 655a144a45..394f31a763 100644
--- a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx
@@ -1,12 +1,7 @@
-import { Button, Select, Switch, type SelectOption } from '@bitfun/ui';
+import { Button, Input, Select, StatusPill, Switch, type SelectOption, type StatusPillTone } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CheckCircle2, CloudOff, Download, HardDrive, PhoneCall } from 'lucide-react';
-import {
-  Badge,
-  Input,
-  type BadgeVariant,
-} from '@/component-library';
 import {
   LOCAL_SENSEVOICE_SMALL_INT8_MODEL_ID,
   speechAPI,
@@ -53,7 +48,7 @@ function formatBytes(bytes: number): string {
 
 type VoiceInputStatus = 'ready' | 'setup' | 'downloading' | 'unavailable' | 'error';
 
-function statusBadgeVariant(status: VoiceInputStatus): BadgeVariant {
+function statusBadgeVariant(status: VoiceInputStatus): StatusPillTone {
   switch (status) {
     case 'ready':
       return 'success';
@@ -61,7 +56,7 @@ function statusBadgeVariant(status: VoiceInputStatus): BadgeVariant {
       return 'info';
     case 'unavailable':
     case 'error':
-      return 'error';
+      return 'danger';
     default:
       return 'neutral';
   }
@@ -343,7 +338,7 @@ const VoiceInputConfig: React.FC = () => {
                 <div className="voice-input-config__status-copy">
                   <div className="voice-input-config__status-heading">
                     <div className="voice-input-config__status-title">{t(`status.${status}.title`)}</div>
-                    <Badge variant={statusBadgeVariant(status)}>{t(`status.${status}.badge`)}</Badge>
+                    <StatusPill tone={statusBadgeVariant(status)}>{t(`status.${status}.badge`)}</StatusPill>
                   </div>
                   <div className="voice-input-config__status-description">
                     {t(`status.${status}.description`, {
@@ -459,7 +454,7 @@ const VoiceInputConfig: React.FC = () => {
               <Input
                 className="voice-input-config__credential-input"
                 type="password"
-                size="small"
+                size="sm"
                 autoComplete="off"
                 value={voiceCallDraft.apiKey}
                 placeholder={t('voiceCall.apiKey.placeholder')}
@@ -477,7 +472,7 @@ const VoiceInputConfig: React.FC = () => {
             >
               <Input
                 className="voice-input-config__credential-input"
-                size="small"
+                size="sm"
                 value={voiceCallDraft.voice}
                 disabled={!voiceCallDraft.enabled || !speechRuntimeSupported}
                 onChange={(event) => setVoiceCallDraft(previous => previous ? ({
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputDiagnostics.tsx b/src/web-ui/src/infrastructure/config/components/VoiceInputDiagnostics.tsx
index 479c107b1b..401992a0cf 100644
--- a/src/web-ui/src/infrastructure/config/components/VoiceInputDiagnostics.tsx
+++ b/src/web-ui/src/infrastructure/config/components/VoiceInputDiagnostics.tsx
@@ -1,7 +1,7 @@
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, Select, type SelectOption } from '@bitfun/ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Activity, RefreshCw, Square } from 'lucide-react';
-import { Select, Tooltip, type SelectOption } from '@/component-library';
+import { Tooltip } from '@/component-library';
 import {
   DEFAULT_SPEECH_SAMPLE_RATE,
   speechAPI,
@@ -32,10 +32,6 @@ interface VoiceInputDiagnosticsProps {
   onDeviceChange: (deviceId: string) => Promise<void>;
 }
 
-function normalizeSelectValue(value: string | number | (string | number)[]): string {
-  return String(Array.isArray(value) ? (value[0] ?? '') : value);
-}
-
 export function VoiceInputDiagnostics({
   settings,
   modelInstalled,
@@ -243,10 +239,10 @@ export function VoiceInputDiagnostics({
             data-bf-component="voice-input-diagnostics"
             data-bf-part="deviceSelect"
             value={settings.microphone_device_id}
-            onChange={value => void onDeviceChange(normalizeSelectValue(value))}
+            onValueChange={value => void onDeviceChange(String(value))}
             options={microphoneOptions}
-            size="small"
-            loading={devicesLoading}
+            size="sm"
+            disabled={devicesLoading}
             className="voice-input-config__device-select"
           />
           <Tooltip content={t('diagnostics.microphone.refresh')} disabled={phase !== 'idle'}>
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
index 715022ac19..01561474da 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
@@ -212,7 +212,7 @@
   justify-content: flex-end;
   justify-self: stretch;
 
-  > .bitfun-input-wrapper,
+  > [data-bf-component='input'],
   > .select,
   > .bitfun-number-input {
     width: 100%;
@@ -225,13 +225,13 @@
    * that row's dropdown would render narrower than every other row's.
    */
   > div:has(> .select),
-  > div:has(> .bitfun-input-wrapper),
+  > div:has(> [data-bf-component='input']),
   > div:has(> .bitfun-number-input) {
     width: 100%;
     min-width: 0;
 
     > .select,
-    > .bitfun-input-wrapper,
+    > [data-bf-component='input'],
     > .bitfun-number-input {
       width: 100%;
       min-width: 0;
diff --git a/src/web-ui/src/infrastructure/config/components/form-controls/ConfigInput.tsx b/src/web-ui/src/infrastructure/config/components/form-controls/ConfigInput.tsx
index 29d01f29c3..de4936d7c5 100644
--- a/src/web-ui/src/infrastructure/config/components/form-controls/ConfigInput.tsx
+++ b/src/web-ui/src/infrastructure/config/components/form-controls/ConfigInput.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@/component-library';
+import { Input } from '@bitfun/ui';
 
 export interface ConfigInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    
@@ -39,9 +39,8 @@ export const ConfigInput = forwardRef<HTMLInputElement, ConfigInputProps>(({
   const inputElement = (
     <Input
       ref={ref}
-      suffix={rightIcon}
-      error={!!error}
-      errorMessage={error}
+      trailing={rightIcon}
+      invalid={!!error}
       className={className}
       {...props}
     />
diff --git a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx
index ec2d2fdf0c..378ccea82c 100644
--- a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx
+++ b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx
@@ -3,7 +3,7 @@
  * Lists directories on the peer via HostInvoke FS APIs.
  */
 
-import { Button } from '@bitfun/ui';
+import { Button, IconButton } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
@@ -13,8 +13,8 @@ import {
   Home,
   Loader2,
   RefreshCw,
+  X,
 } from 'lucide-react';
-import { PopupCloseButton } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { workspaceAPI } from '@/infrastructure/api';
 import { globalAPI } from '@/infrastructure/api/service-api/GlobalAPI';
@@ -212,8 +212,10 @@ export const PeerDirectoryBrowser: React.FC<PeerDirectoryBrowserProps> = ({
             data-bf-component="peer-device"
             data-bf-part="title"
           >{title}</h2>
-          <PopupCloseButton
+          <IconButton
             className="peer-directory-browser__close-btn"
+            icon={<X />}
+            size="md"
             aria-label={t('peerDirectoryPicker.cancel')}
             onClick={onCancel}
             data-bf-component="peer-device"
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index 5cfe0aa86f..30ea2f393a 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -1654,6 +1654,8 @@
       "pickCertificateDialogTitle": "Select OpenSSH certificate",
       "passphrase": "Passphrase",
       "passphraseOptional": "Leave empty if none",
+      "showPassword": "Show password",
+      "hidePassword": "Hide password",
       "agentFingerprint": "Agent key fingerprint",
       "agentFallbackKey": "Agent fallback private key",
       "challengePassword": "Challenge password",
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index a26d20c18e..f0c121635a 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -1654,6 +1654,8 @@
       "pickCertificateDialogTitle": "选择 OpenSSH 证书",
       "passphrase": "密码短语",
       "passphraseOptional": "留空表示无密码短语",
+      "showPassword": "显示密码",
+      "hidePassword": "隐藏密码",
       "agentFingerprint": "Agent 密钥指纹",
       "agentFallbackKey": "Agent 不可用时的备用私钥",
       "challengePassword": "交互认证密码",
diff --git a/src/web-ui/src/locales/zh-TW/common.json b/src/web-ui/src/locales/zh-TW/common.json
index 1a910c0453..a35dbbaca6 100644
--- a/src/web-ui/src/locales/zh-TW/common.json
+++ b/src/web-ui/src/locales/zh-TW/common.json
@@ -1654,6 +1654,8 @@
       "pickCertificateDialogTitle": "選擇 OpenSSH 憑證",
       "passphrase": "密碼短語",
       "passphraseOptional": "留空表示無密碼短語",
+      "showPassword": "顯示密碼",
+      "hidePassword": "隱藏密碼",
       "agentFingerprint": "Agent 金鑰指紋",
       "agentFallbackKey": "Agent 無法使用時的備用私鑰",
       "challengePassword": "互動驗證密碼",
diff --git a/src/web-ui/src/shared/announcement-system/components/FeatureModal.tsx b/src/web-ui/src/shared/announcement-system/components/FeatureModal.tsx
index 69b2b09198..ecbe2085a2 100644
--- a/src/web-ui/src/shared/announcement-system/components/FeatureModal.tsx
+++ b/src/web-ui/src/shared/announcement-system/components/FeatureModal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Button } from '@bitfun/ui';
-import { PopupCloseButton } from '@/component-library';
+import { Button, IconButton } from '@bitfun/ui';
+import { X } from 'lucide-react';
 import { useAnnouncementStore } from '../store/announcementStore';
 import FeatureModalPage from './FeatureModalPage';
 import { useAnnouncementI18n } from '../hooks/useAnnouncementI18n';
@@ -134,8 +134,10 @@ const FeatureModal: React.FC = () => {
       <div className={`feature-modal ${sizeClass}${exiting ? ' feature-modal--exiting' : ''}`} data-bf-component="announcement" data-bf-part="modal">
         {/* Close button */}
         {modal.closable && (
-          <PopupCloseButton
+          <IconButton
             className="feature-modal__close"
+            icon={<X />}
+            size="md"
             data-bf-component="announcement"
             data-bf-part="modalClose"
             onClick={() => triggerClose()}
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
index d839b89e6e..45b641b613 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
+++ b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
@@ -1,9 +1,8 @@
  
 
 import React, { useState, useMemo } from 'react';
-import { CheckCheck, Trash2, XCircle, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
-import { Modal } from '@bitfun/ui';
-import { Search, PopupCloseButton } from '@/component-library';
+import { CheckCheck, Trash2, X, XCircle, ChevronDown, ChevronUp, Loader2, Search as SearchIcon } from 'lucide-react';
+import { IconButton, Modal, SearchField } from '@bitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
 import { useNotificationHistory, useCenterOpen, useAllProgressNotifications, useAllLoadingNotifications } from '../hooks/useNotificationState';
 import { notificationService } from '../services/NotificationService';
@@ -386,9 +385,11 @@ export const NotificationCenter: React.FC = () => {
             >
               <Trash2 size={16} />
             </button>
-            <PopupCloseButton
+            <IconButton
               className="notification-center__close"
+              icon={<X />}
               onClick={handleClose}
+              size="md"
               title={t('common:actions.close')}
               aria-label={t('common:actions.close')}
               data-testid="notification-center-close-btn"
@@ -400,12 +401,15 @@ export const NotificationCenter: React.FC = () => {
 
         
         <div className="notification-center__search">
-          <Search
+          <SearchField
             placeholder={t('components:notificationCenter.searchPlaceholder')}
+            aria-label={t('components:notificationCenter.searchPlaceholder')}
+            leadingIcon={<SearchIcon size={16} aria-hidden />}
             value={searchQuery}
-            onChange={(val) => setSearchQuery(val)}
-            clearable
-            size="medium"
+            onValueChange={(val) => setSearchQuery(val)}
+            clearLabel={t('components:search.clear')}
+            onClear={searchQuery ? () => setSearchQuery('') : undefined}
+            size="md"
           />
         </div>
 
diff --git a/src/web-ui/src/tools/bitfun-canvas/reactRuntime.test.ts b/src/web-ui/src/tools/bitfun-canvas/reactRuntime.test.ts
index dc7d026708..9cd98557ed 100644
--- a/src/web-ui/src/tools/bitfun-canvas/reactRuntime.test.ts
+++ b/src/web-ui/src/tools/bitfun-canvas/reactRuntime.test.ts
@@ -251,7 +251,7 @@ window.BitfunCanvasRuntime.mount(Canvas);
       expect(dom.window.document.querySelector('.bf-collapsible-section')).toBeTruthy();
       expect(dom.window.document.querySelector('.bf-diagram')).toBeTruthy();
       expect(dom.window.document.querySelector('.bitfun-tabs')).toBeTruthy();
-      expect(dom.window.document.querySelector('.bitfun-input-wrapper')).toBeTruthy();
+      expect(dom.window.document.querySelector('[data-bf-component="input"]')).toBeTruthy();
       expect(dom.window.document.querySelector('.bitfun-empty')).toBeTruthy();
     } finally {
       dom.window.close();
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx
index 6612baab33..a78bbe8b81 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import { Badge as BitFunBadge } from '@/component-library/components/Badge';
-import { Button as BitFunButton } from '@bitfun/ui';
+import { Button as BitFunButton, StatusPill as DesignStatusPill } from '@bitfun/ui';
 import {
   Card as BitFunCard,
   CardBody as BitFunCardBody,
   CardHeader as BitFunCardHeader,
 } from '@/component-library/components/Card';
 import { Empty as BitFunEmpty } from '@/component-library/components/Empty';
-import { Input as BitFunInput } from '@/component-library/components/Input';
+import { Field as DesignField, Input as DesignInput } from '@bitfun/ui';
 import { TabPane as BitFunTabPane, Tabs as BitFunTabs } from '@/component-library/components/Tabs';
 import { Tag as BitFunTag } from '@/component-library/components/Tag';
 import type {
@@ -84,11 +83,11 @@ export function Button({ children, variant = 'secondary', size, ...props }: Canv
 }
 
 function pillTone(tone: CanvasTone | 'accent' | 'purple' | undefined, active: boolean) {
-  if (tone === 'danger' || tone === 'error') return { badge: 'error' as const, tag: 'red' as const };
+  if (tone === 'danger' || tone === 'error') return { badge: 'danger' as const, tag: 'red' as const };
   if (tone === 'success') return { badge: 'success' as const, tag: 'green' as const };
   if (tone === 'warning') return { badge: 'warning' as const, tag: 'yellow' as const };
   if (tone === 'info') return { badge: 'info' as const, tag: 'blue' as const };
-  if (tone === 'purple') return { badge: 'purple' as const, tag: 'purple' as const };
+  if (tone === 'purple') return { badge: 'accent' as const, tag: 'purple' as const };
   if (tone === 'accent' || active) return { badge: 'accent' as const, tag: 'blue' as const };
   return { badge: 'neutral' as const, tag: 'gray' as const };
 }
@@ -121,9 +120,9 @@ export function Pill({
 
   if (active) {
     return (
-      <BitFunBadge variant={resolvedTone.badge} className={className}>
+      <DesignStatusPill tone={resolvedTone.badge} className={className}>
         {content}
-      </BitFunBadge>
+      </DesignStatusPill>
     );
   }
 
@@ -161,8 +160,40 @@ export function Tabs({ items, children, ...props }: CanvasTabsProps) {
   );
 }
 
-export function Input({ size, ...props }: CanvasInputProps) {
-  return <BitFunInput {...props} size={size} />;
+function designInputSize(size: CanvasInputProps['size']): 'sm' | 'md' | 'lg' {
+  if (size === 'small') return 'sm';
+  if (size === 'large') return 'lg';
+  return 'md';
+}
+
+export function Input({
+  size,
+  label,
+  hint,
+  prefix,
+  suffix,
+  error,
+  errorMessage,
+  ...props
+}: CanvasInputProps) {
+  const control = (
+    <DesignInput
+      {...props}
+      invalid={error}
+      leading={prefix}
+      trailing={suffix}
+      size={designInputSize(size)}
+    />
+  );
+  const fieldError = error ? errorMessage : undefined;
+  if (label === undefined && hint === undefined && fieldError === undefined) {
+    return control;
+  }
+  return (
+    <DesignField label={label} description={hint} error={fieldError} controlWidth="fill">
+      {control}
+    </DesignField>
+  );
 }
 
 export function Empty(props: CanvasEmptyProps) {
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx
index a3be84d460..666e3ed5de 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx
@@ -53,7 +53,7 @@ describe('BitFun Canvas control adapters', () => {
       </>,
     );
 
-    expect(markup).toContain('bitfun-input-wrapper');
+    expect(markup).toContain('data-bf-component="input"');
     expect(markup).toContain('bitfun-textarea');
     expect(markup).toContain('data-bf-component="icon-button"');
     expect(markup).toContain('Refresh');
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx
index e4efc423b6..88fd43e5af 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx
@@ -1,7 +1,11 @@
 import { Checkbox as BitFunCheckbox } from '@/component-library/components/Checkbox/Checkbox';
-import { Input as BitFunInput } from '@/component-library/components/Input/Input';
 import { Tooltip as BitFunTooltip } from '@/component-library/components/Tooltip/Tooltip';
-import { IconButton as BitFunIconButton, Switch as BitFunSwitch } from '@bitfun/ui';
+import {
+  Field as DesignField,
+  IconButton as BitFunIconButton,
+  Input as DesignInput,
+  Switch as BitFunSwitch,
+} from '@bitfun/ui';
 import { Textarea as BitFunTextarea } from '@/component-library/components/Textarea/Textarea';
 import type {
   CanvasCheckboxProps,
@@ -131,14 +135,36 @@ export function Select({
   );
 }
 
-export function TextInput({ onChange, size, ...props }: CanvasTextInputProps) {
-  return (
-    <BitFunInput
+export function TextInput({
+  onChange,
+  size,
+  label,
+  hint,
+  prefix,
+  suffix,
+  error,
+  errorMessage,
+  ...props
+}: CanvasTextInputProps) {
+  const control = (
+    <DesignInput
       {...props}
-      size={controlSize(size)}
+      invalid={error}
+      leading={prefix}
+      trailing={suffix}
+      size={designSystemControlSize(size)}
       onChange={event => onChange?.(event.target.value)}
     />
   );
+  const fieldError = error ? errorMessage : undefined;
+  if (label === undefined && hint === undefined && fieldError === undefined) {
+    return control;
+  }
+  return (
+    <DesignField label={label} description={hint} error={fieldError} controlWidth="fill">
+      {control}
+    </DesignField>
+  );
 }
 
 export function TextArea({ onChange, ...props }: CanvasTextAreaProps) {
diff --git a/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss b/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss
index 1bed48971c..84358f6517 100644
--- a/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss
+++ b/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss
@@ -27,14 +27,11 @@
 
    &__input {
     width: 100%;
+    height: 28px;
+    padding: 0 8px;
+    border-radius: 4px;
 
-    .bitfun-input-container {
-      height: 28px;
-      padding: 0 8px;
-      border-radius: 4px;
-    }
-
-    .bitfun-input {
+    input {
       font-size: 12px;
       font-family: $font-family-mono;
     }
diff --git a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
index 9967a44ec6..53bc28cbc8 100644
--- a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
+++ b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
@@ -484,16 +484,14 @@
     margin-bottom: $size-gap-1;
   }
 
-  .m-editor-inline-ai__composer-input {
-    .bitfun-input-container {
-      height: 36px;
-      padding: 0 12px 0 14px;
-      border-radius: 999px;
-      background: color-mix(in srgb, var(--bf-appearance-token-color-text-muted) 8%, transparent);
-      border: 1px solid var(--bf-appearance-token-color-overlay-white-08);
-    }
+  .m-editor-inline-ai__composer-input[data-bf-component='input'] {
+    height: 36px;
+    padding: 0 12px 0 14px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--bf-appearance-token-color-text-muted) 8%, transparent);
+    border: 1px solid var(--bf-appearance-token-color-overlay-white-08);
 
-    .bitfun-input {
+    input {
       font-size: var(--bf-appearance-token-font-size-sm);
       line-height: 1.35;
     }
@@ -502,7 +500,7 @@
   :root[data-bf-appearance-mode='light'] &,
   :root[data-bf-appearance-mode='light'] &,
   .light & {
-    .m-editor-inline-ai__composer-input .bitfun-input-container {
+    .m-editor-inline-ai__composer-input[data-bf-component='input'] {
       background: var(--bf-appearance-token-color-overlay-slate-04);
       border-color: var(--bf-appearance-token-color-overlay-slate-12);
     }
diff --git a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
index 8302e0b0e3..723c14c85d 100644
--- a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
+++ b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
@@ -315,45 +315,41 @@ $_indent-width: 8px;
   min-width: 0;
   z-index: 10;
   
-  .bitfun-input-wrapper {
-    gap: 0;
-    border: none;
-    
-    .bitfun-input-container {
-      height: 26px;
-      padding: 0 8px;
+  [data-bf-component='input'] {
+    width: 100%;
+    height: 26px;
+    padding: 0 8px;
+    background: var(--bf-appearance-token-color-bg-elevated);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: none !important;
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 80%, transparent),
+      0 2px 8px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 10%, transparent);
+
+    &:hover {
+      background: var(--bf-appearance-token-element-bg-soft);
+      box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 90%, transparent),
+        0 2px 8px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 12%, transparent);
+    }
+
+    &:focus-within {
       background: var(--bf-appearance-token-color-bg-elevated);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-      border: none !important;
       box-shadow:
-        0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 80%, transparent),
-        0 2px 8px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 10%, transparent);
-
-      &:hover {
-        background: var(--bf-appearance-token-element-bg-soft);
-        box-shadow:
-          0 0 0 1px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 90%, transparent),
-          0 2px 8px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 12%, transparent);
-      }
-
-      &:focus-within {
-        background: var(--bf-appearance-token-color-bg-elevated);
-        box-shadow:
-          0 0 0 1px var(--bf-appearance-token-color-accent-500),
-          0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 16%, transparent);
-      }
+        0 0 0 1px var(--bf-appearance-token-color-accent-500),
+        0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-text-primary) 16%, transparent);
     }
-    
-    .bitfun-input {
+
+    input {
       font-size: var(--bf-appearance-token-font-size-sm);
       color: var(--bf-appearance-token-color-text-primary);
       font-weight: $font-weight-medium;
       border: none !important;
       outline: none !important;
     }
-    
-    .bitfun-input-prefix {
+
+    [data-bf-part='leading'] {
       color: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 85%, transparent);
     }
   }
diff --git a/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.tsx b/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.tsx
index 4cb92a0186..eaada1c2ec 100644
--- a/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.tsx
+++ b/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.tsx
@@ -3,11 +3,10 @@
  * Provides a consistent UI for creating a new branch from an existing base branch.
  */
 
-import { Button, Modal } from '@bitfun/ui';
+import { Button, Field, Input, Modal } from '@bitfun/ui';
 import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GitBranch } from 'lucide-react';
-import { Input } from '@/component-library';
 import './CreateBranchDialog.scss';
 
 export interface CreateBranchDialogProps {
@@ -133,16 +132,19 @@ export const CreateBranchDialog: React.FC<CreateBranchDialogProps> = ({
         </div>
 
         <div className="bitfun-create-branch-dialog__form">
-          <Input
+          <Field
             label={t('dialog.createNewBranch.nameLabel')}
-            value={branchName}
-            onChange={handleInputChange}
-            placeholder={t('dialog.createNewBranch.namePlaceholder')}
-            disabled={isCreating}
-            autoFocus
-            error={!!error}
-            errorMessage={error}
-          />
+            controlWidth="fill"
+            error={error || undefined}
+          >
+            <Input
+              value={branchName}
+              onChange={handleInputChange}
+              placeholder={t('dialog.createNewBranch.namePlaceholder')}
+              disabled={isCreating}
+              autoFocus
+            />
+          </Field>
           <div className="bitfun-create-branch-dialog__hint">
             <div>{t('dialog.createNewBranch.namingHintTitle')}</div>
             <ul>
diff --git a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.tsx b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.tsx
index 44e97dcc91..c070eb6764 100644
--- a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.tsx
+++ b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.tsx
@@ -3,11 +3,11 @@
  * Shows a branch's commits and supports cherry-pick when applicable.
  */
 
-import { Button, IconButton } from '@bitfun/ui';
+import { Button, IconButton, SearchField, Select } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Copy, RefreshCw, ChevronDown, ChevronUp, GitBranch, Square, CheckSquare } from 'lucide-react';
-import { Search, Select } from '@/component-library';
+import { Copy, RefreshCw, ChevronDown, ChevronUp, GitBranch, Square, CheckSquare, Search as SearchIcon } from 'lucide-react';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { gitAPI } from '@/infrastructure/api';
 import { useNotification } from '@/shared/notification-system';
 import type { GitGraphNode } from '@/infrastructure/api/service-api/GitAPI';
@@ -87,6 +87,7 @@ export const GitBranchHistoryView: React.FC<GitBranchHistoryViewProps> = ({
   onCherryPickSuccess
 }) => {
   const { t } = useTranslation('panels/git');
+  const { t: tComponents } = useI18n('components');
   const [commits, setCommits] = useState<CommitInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -340,15 +341,17 @@ export const GitBranchHistoryView: React.FC<GitBranchHistoryViewProps> = ({
             </div>
           )}
           
-          <Search
+          <SearchField
             data-bf-component="git-branch-history"
             data-bf-part="search"
             value={searchQuery}
-            onChange={setSearchQuery}
+            onValueChange={setSearchQuery}
+            leadingIcon={<SearchIcon size={14} aria-hidden />}
             placeholder={t('search.commits')}
-            size="small"
-            clearable
-            enterToSearch={false}
+            aria-label={t('search.commits')}
+            size="sm"
+            clearLabel={searchQuery ? tComponents('search.clear') : undefined}
+            onClear={searchQuery ? () => setSearchQuery('') : undefined}
             className="git-branch-history-view__search"
           />
           
@@ -359,10 +362,9 @@ export const GitBranchHistoryView: React.FC<GitBranchHistoryViewProps> = ({
                 ...uniqueAuthors.map(author => ({ label: author, value: author }))
               ]}
               value={authorFilter}
-              onChange={(val) => setAuthorFilter(val as string)}
-              placeholder={t('branchHistory.authorPlaceholder')}
-              size="small"
-              clearable={!!authorFilter}
+              onValueChange={(val) => setAuthorFilter(String(val))}
+              aria-label={t('branchHistory.authorPlaceholder')}
+              size="sm"
               className="git-branch-history-view__author-select"
             />
           )}
diff --git a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
index c54070ba5b..d76d79bf65 100644
--- a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
+++ b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
@@ -77,6 +77,10 @@
     flex: 1;
   }
 
+  &__search-loading {
+    animation: bitfun-git-graph-spin 0.8s linear infinite;
+  }
+
   &__search-navigation {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.tsx b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.tsx
index 5fe9c468f3..e2e5abf4b5 100644
--- a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.tsx
+++ b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.tsx
@@ -2,10 +2,10 @@
 /** Git commit graph view (branch graph). */
 
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Button } from '@bitfun/ui';
+import { Button, SearchField } from '@bitfun/ui';
 import { useTranslation } from 'react-i18next';
-import { GitBranch, ChevronUp, ChevronDown } from 'lucide-react';
-import { Search } from '@/component-library';
+import { GitBranch, ChevronUp, ChevronDown, Loader2, Search as SearchIcon } from 'lucide-react';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { gitAPI } from '@/infrastructure/api';
 import type { GitGraph, GitGraphNode } from '@/infrastructure/api/service-api/GitAPI';
 import { APPEARANCE_DOMAIN_TOKENS } from '@/infrastructure/appearance/appearanceDomainTokens';
@@ -43,6 +43,7 @@ export const GitGraphView: React.FC<GitGraphViewProps> = ({
   className = ''
 }) => {
   const { t } = useTranslation('panels/git');
+  const { t: tComponents } = useI18n('components');
   const { current: appearance } = useAppearance();
   const viewConfig = useMemo(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
 
@@ -309,16 +310,18 @@ export const GitGraphView: React.FC<GitGraphViewProps> = ({
             }
           }}
         >
-          <Search
+          <SearchField
             value={searchQuery}
-            onChange={handleSearch}
-            onSearch={goToNextMatch}
+            onValueChange={handleSearch}
             placeholder={t('graph.searchPlaceholder')}
-            size="small"
-            clearable
-            enterToSearch={false}
-            loading={searchQuery !== debouncedSearchQuery}
-            suffixContent={
+            aria-label={t('graph.searchPlaceholder')}
+            size="sm"
+            clearLabel={searchQuery ? tComponents('search.clear') : undefined}
+            onClear={searchQuery ? () => handleSearch('') : undefined}
+            leadingIcon={searchQuery !== debouncedSearchQuery
+              ? <Loader2 className="git-graph-view__search-loading" size={14} aria-hidden />
+              : <SearchIcon size={14} aria-hidden />}
+            trailing={
               searchFilter && debouncedSearchQuery && searchFilter.totalMatches > 0 ? (
                 <div className="git-graph-view__search-navigation">
                   <span className="git-graph-view__search-count">