fix(web): align next-step Design toolbox with the composer's action menu (#4096)

* fix(web): align next-step toolbox menu

* fix(web): share the design-toolbox action matcher across composer and next-step

The next-step submenu had its own action matcher that ignored the matched
skill's metadata, so searching by a preferred skill id/name (e.g.
emilkowalski-motion) showed the skill resource row while hiding the action
row it belongs to — the opposite of aligning with the composer panel.

Lift the matcher into runtime/design-toolbox.ts (skill-aware, the composer's
behavior) and use it from both surfaces; drop the two local copies. Regression
test: searching by a preferred skill id keeps the action row visible.

* fix(web): localize next-step toolbox resource matching and labels

The next-step submenu filtered/rendered global skill resources with raw
SkillSummary fields, so a localized query (e.g. zh-CN "创意总监") matched in
the composer but not here, and rows showed the raw skill id/name instead of
the localized title.

Thread the locale-resolved name/description into skillMatchesQuery via a new
optional `extra` argument and render localizeSkillName(locale, skill), so the
next-step resource list matches and labels the same way the composer does.
Regression test: a zh-CN query matches and renders the localized name.

* fix(web): thread localized skill text into the shared action matcher

Patch 3 taught the resource rows to match localized skill text, but the
shared designToolboxActionMatchesQuery still indexed only raw skill fields,
so a localized preferred-skill query (e.g. zh-CN) kept the resource row while
hiding its paired follow-up action on both surfaces.

Add an optional `extra` argument (parallel to skillMatchesQuery) and pass the
locale-resolved name/description from both the next-step submenu and the
composer panel. Regression test: a localized preferred-skill query keeps the
action row visible.

Author: lefarcen

apps/web/src/components/AssistantMessage.tsx

@@ -310,7 +310,7 @@ interface Props {
   // tests that don't wire chat send).
   onArtifactShare?: (fileName: string) => void;
   // Featured design-toolbox follow-up rows on the "next step" card. Seeding the
-  // composer with an action / opening the full toolbox both route through the
+  // composer with an action / opening the toolbox both route through the
   // composer; see ChatPane's composer ref wiring.
   onToolboxAction?: (id: DesignToolboxActionId) => void;
   onPickSkill?: (skillId: string) => void;
@@ -352,8 +352,8 @@ const ASSISTANT_MESSAGE_COMPARED_PROPS: Array<keyof Props> = [
   'suppressDirectionForms',
   'hasDesignSystemContext',
   // Memoized + stable from ChatPane; compared so a late skill-list load
-  // refreshes the featured next-step rows' `@skill` hover detail and the full
-  // More → Design toolbox skill list.
+  // refreshes the featured next-step rows' `@skill` hover detail and the
+  // More → Design toolbox global resources.
   'toolboxSkillNames',
   'nextStepSkills',
   // Live streaming tool input changes identity on every `tool_input_delta`.

apps/web/src/components/ChatComposer.tsx

@@ -59,6 +59,7 @@ import {
   DESIGN_TOOLBOX_ACTIONS,
   designToolboxActionBadge,
   designToolboxActionDescription,
+  designToolboxActionMatchesQuery,
   designToolboxActionTitle,
   findDesignToolboxSkill,
   getDesignToolboxAction,
@@ -3359,10 +3360,17 @@ function DesignToolboxPanel({
   );
   const visibleActions = useMemo(
     () =>
-      actions.filter((action) =>
-        designToolboxActionMatchesQuery(action, query, findDesignToolboxSkill(action, skills), t),
-      ),
-    [actions, query, skills, t],
+      actions.filter((action) => {
+        const skill = findDesignToolboxSkill(action, skills);
+        return designToolboxActionMatchesQuery(
+          action,
+          query,
+          skill,
+          t,
+          skill ? [localizeSkillName(locale, skill), localizeSkillDescription(locale, skill)] : [],
+        );
+      }),
+    [actions, query, skills, locale, t],
   );
   const visibleResources = useMemo(
     () => {
@@ -3947,29 +3955,6 @@ function designToolboxResourceIsActive(
 }
 
 
-function designToolboxActionMatchesQuery(
-  action: DesignToolboxAction,
-  query: string,
-  skill: SkillSummary | null,
-  t: TranslateFn,
-): boolean {
-  const q = query.trim().toLowerCase();
-  if (!q) return true;
-  return [
-    designToolboxActionTitle(action, t),
-    designToolboxActionBadge(action, t),
-    designToolboxActionDescription(action, t),
-    ...action.searchTerms,
-    skill?.id ?? '',
-    skill?.name ?? '',
-    skill?.description ?? '',
-    skill?.category ?? '',
-  ]
-    .join(' ')
-    .toLowerCase()
-    .includes(q);
-}
-
 function isDesignToolboxSkill(skill: SkillSummary): boolean {
   const category = skill.category ?? '';
   if (

apps/web/src/components/NextStepActions.module.css

@@ -240,50 +240,36 @@
 .flyoutMenu {
   width: 200px;
 }
-.flyoutSkills {
-  width: 260px;
-  max-height: min(60vh, 360px);
+.flyoutToolbox {
+  width: 300px;
+  max-height: min(70vh, 500px);
+  padding: 10px;
 }
 
-.flyoutRow {
+.toolboxFlyoutTitle {
   display: flex;
   align-items: center;
   gap: 8px;
-  width: 100%;
-  padding: 6px 8px;
-  font-size: 13px;
+  padding: 2px 4px 8px;
+  font-size: 14px;
+  font-weight: 650;
   color: var(--text-default);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: left;
-  transition:
-    background 140ms cubic-bezier(0.23, 1, 0.32, 1),
-    border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.flyoutRow:hover:not(:disabled),
-.flyoutRow[aria-expanded='true'] {
-  background: var(--accent-tint);
-  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
 }
-.flyoutRow:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-.flyoutRow:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+
+.toolboxFlyoutTitle svg {
+  color: var(--accent-strong);
 }
 
 .flyoutSearch {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  margin-bottom: 4px;
-  border-bottom: 1px solid var(--border-soft, var(--border));
+  gap: 8px;
+  padding: 7px 9px;
+  margin-bottom: 8px;
+  border: 1px solid var(--border-strong, var(--border));
+  border-radius: 10px;
   color: var(--text-muted);
+  background: var(--bg-default);
 }
 .flyoutSearch input {
   flex: 1 1 auto;
@@ -298,8 +284,46 @@
   overflow-y: auto;
   scrollbar-width: thin;
 }
+.flyoutSectionLabel {
+  padding: 8px 8px 4px;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  color: var(--text-muted);
+}
 .flyoutEmpty {
   padding: 8px;
   font-size: 12px;
   color: var(--text-muted);
 }
+
+.flyoutRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--text-default);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flyoutRow:hover:not(:disabled),
+.flyoutRow[aria-expanded='true'] {
+  background: var(--accent-tint);
+  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
+}
+.flyoutRow:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.flyoutRow:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}