fix(web-ui): polish gallery and assistant presentation

design-system/packages/theme-openbitfun/src/light.tokens.json

@@ -8,7 +8,7 @@
       "textContentHover": { "$type": "color", "$value": "{color.accent.hover}" },
       "textContentDisabled": { "$type": "color", "$value": "{color.accent.disabled}" },
       "outlineBorder": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },
-      "outlineBorderInteractive": { "$type": "color", "$value": "transparent" },
+      "outlineBorderInteractive": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },
       "fillBackground": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },
       "fillBackgroundHover": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },
       "fillBackgroundPressed": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },

design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs

@@ -258,7 +258,10 @@ test("text, action, and field focus pairs meet their contrast requirements", ()
 test("Button states have a mode-complete palette independent from shared actions", () => {
   const light = themes.light;
   assert.equal(light["component.button.outlineBorder"], "rgba(0, 0, 0, 0.08)");
-  assert.equal(light["component.button.outlineBorderInteractive"], "transparent");
+  assert.equal(
+    light["component.button.outlineBorderInteractive"],
+    light["component.button.outlineBorder"],
+  );
   for (const suffix of ["", "Hover", "Pressed"]) {
     assert.equal(light[`component.button.fillBackground${suffix}`], "rgba(0, 0, 0, 0.08)");
   }

design-system/packages/ui/src/components/Composer/Composer.module.css

@@ -64,10 +64,8 @@
   }
 
   .surface:focus-within {
-    border-color: var(--openbitfun-color-field-border-focus);
-    box-shadow:
-      var(--openbitfun-shadow-composer),
-      0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring);
+    border-color: var(--openbitfun-color-field-border-active);
+    box-shadow: var(--openbitfun-shadow-composer);
   }
 
   .root[data-invalid="true"] > .surface {

design-system/packages/ui/tests/composer.test.mjs

@@ -75,7 +75,8 @@ test("Composer styling uses only shared public token layers", async () => {
   assert.match(styles, /--openbitfun-control-composer-context-offset/);
   assert.match(styles, /--openbitfun-control-composer-min-block-size/);
   assert.match(styles, /--openbitfun-color-surface-raised/);
-  assert.match(styles, /--openbitfun-color-field-border-focus/);
+  assert.match(styles, /--openbitfun-color-field-border-active/);
   assert.match(styles, /--openbitfun-shadow-composer/);
+  assert.doesNotMatch(styles, /\.surface:focus-within\s*\{[^}]*--openbitfun-color-focus-ring/s);
   assert.doesNotMatch(styles, /#[0-9a-f]{3,8}/i);
 });

src/apps/data-migrator/ui/generated/design-system.css

@@ -855,7 +855,7 @@
     --openbitfun-component-button-fill-background-hover: rgba(0, 0, 0, 0.08);
     --openbitfun-component-button-fill-background-pressed: rgba(0, 0, 0, 0.08);
     --openbitfun-component-button-outline-border: rgba(0, 0, 0, 0.08);
-    --openbitfun-component-button-outline-border-interactive: transparent;
+    --openbitfun-component-button-outline-border-interactive: rgba(0, 0, 0, 0.08);
     --openbitfun-component-button-primary-background: rgba(0, 0, 0, 0.80);
     --openbitfun-component-button-primary-background-hover: rgba(0, 0, 0, 0.60);
     --openbitfun-component-button-primary-background-pressed: rgba(0, 0, 0, 0.90);

src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.scss

@@ -15,6 +15,18 @@
   box-shadow: 0 2px 8px color-mix(in srgb, var(--openbitfun-color-content-on-light) 8%, transparent);
   isolation: isolate;
 
+  &[data-size='sm'] {
+    --assistant-avatar-size: var(--openbitfun-control-height-sm);
+  }
+
+  &[data-size='md'] {
+    --assistant-avatar-size: var(--openbitfun-control-height-md);
+  }
+
+  &[data-size='lg'] {
+    --assistant-avatar-size: var(--openbitfun-control-height-lg);
+  }
+
   &__art {
     display: grid;
     width: 100%;

src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.test.tsx

@@ -52,6 +52,18 @@ describe('AssistantAvatar', () => {
     expect(resolveAssistantAvatarPreset(undefined).id).toBe('claw');
   });
 
+  it('maps semantic sizes to shared control-height tokens', () => {
+    act(() => {
+      root.render(<AssistantAvatar presetId="claw" size="lg" />);
+    });
+
+    const avatar = container.querySelector<HTMLElement>(
+      '[data-openbitfun-component="assistant-avatar"]',
+    );
+    expect(avatar?.dataset.size).toBe('lg');
+    expect(avatar?.hasAttribute('style')).toBe(false);
+  });
+
   it('renders the new default avatar without discarding the accessible identity', () => {
     act(() => {
       root.render(

src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.tsx

@@ -7,13 +7,14 @@ import { firstAvatarGrapheme } from './assistantAvatarValue';
 import './AssistantAvatar.scss';
 
 export type AssistantAvatarStatus = 'idle' | 'running' | 'attention' | 'unread' | 'error';
+export type AssistantAvatarSize = number | 'sm' | 'md' | 'lg';
 
 export interface AssistantAvatarProps {
   presetId?: string | null;
   emoji?: string | null;
   stableKey?: string | null;
   name?: string | null;
-  size?: number;
+  size?: AssistantAvatarSize;
   status?: AssistantAvatarStatus;
   active?: boolean;
   decorative?: boolean;
@@ -43,6 +44,8 @@ const AssistantAvatar: React.FC<AssistantAvatarProps> = ({
     className,
   ].filter(Boolean).join(' ');
   const accessibleName = name?.trim() ? `${name.trim()} avatar` : 'Assistant avatar';
+  const semanticSize = typeof size === 'number' ? undefined : size;
+  const customSize = typeof size === 'number' ? `${size}px` : undefined;
 
   return (
     <span
@@ -52,7 +55,10 @@ const AssistantAvatar: React.FC<AssistantAvatarProps> = ({
       data-openbitfun-family={usesPreset ? preset.family : 'emoji'}
       data-openbitfun-preset={usesPreset ? preset.id : undefined}
       data-openbitfun-state={[active && 'active', status !== 'idle' && status].filter(Boolean).join(' ') || undefined}
-      style={{ '--assistant-avatar-size': `${size}px` } as React.CSSProperties}
+      data-size={semanticSize}
+      style={customSize
+        ? { '--assistant-avatar-size': customSize } as React.CSSProperties
+        : undefined}
       role={decorative ? undefined : 'img'}
       aria-hidden={decorative ? 'true' : undefined}
       aria-label={decorative ? undefined : accessibleName}

src/web-ui/src/app/components/AssistantAvatar/index.ts

@@ -1,5 +1,9 @@
 export { default as AssistantAvatar } from './AssistantAvatar';
-export type { AssistantAvatarProps, AssistantAvatarStatus } from './AssistantAvatar';
+export type {
+  AssistantAvatarProps,
+  AssistantAvatarSize,
+  AssistantAvatarStatus,
+} from './AssistantAvatar';
 export {
   ASSISTANT_AVATAR_PRESETS,
   getAssistantAvatarPreset,

src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss

@@ -35,6 +35,12 @@ $content-max: 936px;
   z-index: 10;
   background: var(--openbitfun-color-surface-scene);
 
+  &__leading {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
   &__identity {
     flex: 1;
     min-width: 0;

src/web-ui/src/app/components/GalleryLayout/GalleryPageHeader.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 interface GalleryPageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   title: React.ReactNode;
   subtitle?: React.ReactNode;
+  leading?: React.ReactNode;
   actions?: React.ReactNode;
   extraContent?: React.ReactNode;
   className?: string;
@@ -11,12 +12,14 @@ interface GalleryPageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElemen
 const GalleryPageHeader: React.FC<GalleryPageHeaderProps> = ({
   title,
   subtitle,
+  leading,
   actions,
   extraContent,
   className,
   ...rootProps
 }) => (
   <div {...rootProps} className={['gallery-page-header', className].filter(Boolean).join(' ')}>
+    {leading ? <div className="gallery-page-header__leading">{leading}</div> : null}
     <div className="gallery-page-header__identity">
       <h2 className="gallery-page-header__title">{title}</h2>
       {subtitle ? <div className="gallery-page-header__subtitle">{subtitle}</div> : null}

src/web-ui/src/app/scenes/agents/AgentsScene.tsx

@@ -10,6 +10,7 @@ import { RotateCcw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
+import { AssistantAvatar } from '@/app/components/AssistantAvatar';
 import {
   GalleryEmpty,
   GalleryGrid,
@@ -781,6 +782,13 @@ const AgentsHomeView: React.FC = () => {
       <GalleryPageHeader
         title={t('page.title')}
         subtitle={t('page.subtitle')}
+        leading={(
+          <AssistantAvatar
+            presetId="claw"
+            name="OpenBitFun"
+            size="lg"
+          />
+        )}
         actions={(
           <Button
             variant="primary"

src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss

@@ -21,6 +21,7 @@
 
   .gallery-empty {
     margin-inline: auto;
+    margin-block-start: var(--openbitfun-space-3);
     box-sizing: border-box;
   }
 

src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss

@@ -1,6 +1,6 @@
 .aqi {
   // Keep composer and session rows on the same content edge.
-  padding: var(--openbitfun-space-2) var(--openbitfun-space-1) var(--openbitfun-space-4);
+  padding: 0 var(--openbitfun-space-1) var(--openbitfun-space-4);
 
   &__composer {
     width: 100%;

src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.tsx

@@ -126,6 +126,7 @@ const AssistantQuickInput: React.FC<AssistantQuickInputProps> = ({
               <IconButton
                 type="button"
                 variant="primary"
+                shape="circle"
                 size="sm"
                 loading={sending}
                 disabled={!value.trim() || sending}

src/web-ui/src/app/scenes/profile/views/NurseryGallery.presentation.test.ts

@@ -43,11 +43,20 @@ describe('Nursery gallery presentation', () => {
     const source = readSibling('./NurseryGallery.tsx');
     const end = source.indexOf('className="nursery-defaults__action"');
     const action = source.slice(source.lastIndexOf('<Button', end), source.indexOf('</Button>', end));
-    expect(action).toContain('variant="secondary"');
+    expect(action).toContain('variant="outline"');
     expect(action).toContain('size="sm"');
     expect(action).toContain('onClick={openDefaults}');
   });
 
+  it('keeps assistant identity metadata close to its title', () => {
+    const stylesheet = readSibling('./NurseryView.scss');
+    const headerStart = stylesheet.indexOf('.acp-left-header {');
+    const headerEnd = stylesheet.indexOf('.acp-avatar-picker {', headerStart);
+    const headerSection = stylesheet.slice(headerStart, headerEnd);
+
+    expect(headerSection).toMatch(/&__info\s*\{[^}]*gap:\s*0;/s);
+  });
+
   it('uses one borderless design-system surface with distinct actions', () => {
     const source = readSibling('./AssistantCard.tsx');
     const stylesheet = readSibling('./NurseryView.scss');
@@ -56,7 +65,8 @@ describe('Nursery gallery presentation', () => {
     const cardSection = stylesheet.slice(cardStart, cardEnd);
 
     expect(cardSection).toContain('&__main {');
-    expect(cardSection).toContain('min-height: 148px;');
+    expect(cardSection).toContain('align-self: start;');
+    expect(cardSection).not.toContain('min-height: 148px;');
     expect(cardSection).toContain('background: var(--openbitfun-color-action-neutral-surface-hover);');
     expect(cardSection).toContain('&__session-actions {');
     expect(cardSection).not.toContain('border-color: var(--openbitfun-color-border-subtle);');

src/web-ui/src/app/scenes/profile/views/NurseryGallery.tsx

@@ -254,7 +254,7 @@ const NurseryGallery: React.FC = () => {
             </div>
 
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
               className="nursery-defaults__action"
               leadingIcon={<Icon name="settings" size="sm" />}

src/web-ui/src/app/scenes/profile/views/NurseryView.scss

@@ -156,7 +156,7 @@ $nursery-gallery-gutter: clamp(16px, 2.5vw, 28px);
 .assistant-card {
   display: flex;
   min-width: 0;
-  min-height: 148px;
+  align-self: start;
   animation: nursery-card-in var(--openbitfun-motion-duration-normal) var(--openbitfun-motion-easing-decelerate) both;
   @include surface-stagger.animation-delay(40ms);
 
@@ -927,15 +927,15 @@ $nursery-gallery-gutter: clamp(16px, 2.5vw, 28px);
   display: flex;
   align-items: center;
   gap: var(--openbitfun-space-4);
-  padding: var(--openbitfun-space-2) var(--openbitfun-space-1) var(--openbitfun-space-4);
+  padding: var(--openbitfun-space-2) var(--openbitfun-space-1) var(--openbitfun-space-3);
   flex: 0 0 auto;
 
   &__info {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--openbitfun-space-2);
+    gap: 0;
   }
 
   &__name,

src/web-ui/src/app/scenes/skills/SkillsScene.scss

@@ -362,12 +362,6 @@ $skills-installed-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(120px, 0.85f
   gap: var(--openbitfun-space-2);
 }
 
-.skills-card__availability-label {
-  color: var(--openbitfun-color-content-secondary);
-  font-size: var(--openbitfun-type-meta-font-size);
-  line-height: var(--openbitfun-type-meta-line-height);
-}
-
 .skills-card__status-unavailable {
   color: var(--openbitfun-color-content-muted);
   font-size: var(--openbitfun-type-label-sm-font-size);

src/web-ui/src/app/scenes/skills/SkillsScene.tsx

@@ -711,9 +711,6 @@ const SkillsScene: React.FC = () => {
                                         void installed.handleGlobalSkillToggle(skill, event.target.checked);
                                       }}
                                     />
-                                    <span className="skills-card__availability-label">
-                                      {t(installed.globallyDisabledSkillKeys.has(skill.key) ? 'messages.disabled' : 'messages.enabled')}
-                                    </span>
                                   </div>
                                 ) : !skill.isShadowed && (
                                   <span className="skills-card__status-unavailable" aria-hidden="true">—</span>