-
- {avatarMenuOpen ? (
-
+
);
+
if (view === 'onboarding') {
return (
- {/* Collapsed-topbar rows. Always rendered so SSR and the
- client agree on the markup; CSS @media (max-width: 900px)
- flips their `display` so they only show when the
- matching topbar chips are themselves hidden. */}
- setAvatarMenuOpen(false)}
- data-testid="entry-avatar-github"
- >
-
-
- ) : null}
-
- {LOCALES.map((code) => {
- const active = locale === code;
- return (
-
- );
- })}
-
- ) : null}
- {/* Appearance — system / light / dark. Mirrors the language
- picker: a toggle row that expands a nested radio group so
- the dropdown can host quick theme switching without
- opening the full Settings dialog. The active theme is
- echoed in the meta slot so the row reads as status when
- collapsed. */}
-
- {appearanceExpanded ? (
-
- {APPEARANCE_THEMES.map(({ value, labelKey }) => {
- const active = (config.theme ?? 'system') === value;
- return (
-
- );
- })}
-
- ) : null}
-
-
-
-
diff --git a/apps/web/src/components/HomeHero.tsx b/apps/web/src/components/HomeHero.tsx
index 8e0d23597b..8023d67b68 100644
--- a/apps/web/src/components/HomeHero.tsx
+++ b/apps/web/src/components/HomeHero.tsx
@@ -7,7 +7,15 @@
// composed with the recent-projects strip and plugins section
// without owning their data lifecycles.
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+ forwardRef,
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
import type {
ClipboardEvent as ReactClipboardEvent,
DragEvent as ReactDragEvent,
@@ -314,10 +322,28 @@ export const HomeHero = forwardRef(function HomeHero
const openInlineInputField = openInlineInputName
? fieldByName.get(openInlineInputName) ?? null
: null;
- // Surface every field, not just the ones the template references
- // inline. The inline popover handles Home media slots; the form
- // remains available for non-inline plugin inputs.
- const remainingInputFields = pluginInputFields;
+ // Filter out inputs whose values are already shown (and editable
+ // by clicking into the textarea or the inline pill) inline in the
+ // prompt template. Otherwise the structured form below duplicates
+ // every slot pill above it — five identical labelled inputs for a
+ // plugin like Prototype, which made the chat box look like it had
+ // grown a second composer. Keep the form for plugin inputs that
+ // are NOT in the template (e.g. a "Run in background" toggle that
+ // never appears in the prompt text).
+ const templateFieldKeys = useMemo(() => {
+ if (!pluginInputTemplate) return new Set();
+ const keys = new Set();
+ INPUT_PLACEHOLDER_PATTERN.lastIndex = 0;
+ let match: RegExpExecArray | null;
+ while ((match = INPUT_PLACEHOLDER_PATTERN.exec(pluginInputTemplate)) !== null) {
+ if (match[1]) keys.add(match[1]);
+ }
+ return keys;
+ }, [pluginInputTemplate]);
+ const remainingInputFields = useMemo(
+ () => pluginInputFields.filter((field) => !templateFieldKeys.has(field.name)),
+ [pluginInputFields, templateFieldKeys],
+ );
useEffect(() => {
if (selectedIndex >= visiblePickerOptions.length) setSelectedIndex(0);
@@ -335,6 +361,20 @@ export const HomeHero = forwardRef(function HomeHero
setPromptScrollTop(inputElementRef.current?.scrollTop ?? 0);
}, [prompt, promptOverlayParts]);
+ // Auto-grow the prompt textarea so the chat box height tracks the
+ // number of lines the user has typed. We never scroll the textarea
+ // internally (CSS sets `overflow: hidden` and `resize: none`), so
+ // the only height source of truth is `scrollHeight`. Resetting to
+ // `auto` before measuring forces the browser to recompute against
+ // the actual content, otherwise shrinking the prompt would leave
+ // the textarea stuck at its previous taller size.
+ useLayoutEffect(() => {
+ const el = inputElementRef.current;
+ if (!el) return;
+ el.style.height = 'auto';
+ el.style.height = `${el.scrollHeight}px`;
+ }, [prompt]);
+
const setInputRef = useCallback(
(node: HTMLTextAreaElement | null) => {
inputElementRef.current = node;
@@ -411,17 +451,20 @@ export const HomeHero = forwardRef(function HomeHero
return (
-
@@ -840,15 +883,6 @@ export const HomeHero = forwardRef
-
- 
-
- Open Design
-
-
- Open Design
- {t('homeHero.title')}
- {t('homeHero.subtitlePrefix')} Enter. + {t('homeHero.subtitlePrefix')}{' '} + Enter.
+ {
@@ -814,7 +857,7 @@ export const HomeHero = forwardRef(function HomeHero
title={t('chat.attachAria')}
aria-label={t('chat.attachAria')}
>
- (function HomeHero
title={canSubmit ? t('homeHero.run') : t('homeHero.typeSomethingToRun')}
aria-label={t('homeHero.run')}
>
-
+ {chips.map((chip) => {
+ const isActive = activeChipId === chip.id;
+ const isPending = pendingChipId === chip.id;
+ const cls = ['home-hero__type-tab'];
+ if (isActive) cls.push('is-active');
+ if (isPending) cls.push('is-pending');
+ return (
+
+ );
+ })}
+
+ );
+}
+
interface RailGroupProps {
group: ChipGroup;
activeChipId: string | null;
diff --git a/apps/web/src/components/HomeView.tsx b/apps/web/src/components/HomeView.tsx
index c80b2be96c..7eaec8dc4b 100644
--- a/apps/web/src/components/HomeView.tsx
+++ b/apps/web/src/components/HomeView.tsx
@@ -901,11 +901,21 @@ export function HomeView({
});
return;
}
- requestActivePlugin(record, undefined, {
+ const pluginOptions = {
projectKind: chip.action.projectKind,
chipId: chip.id,
inputs: chip.action.inputs,
- });
+ };
+ // Output-type tabs (create group) are mode-selection gestures:
+ // switching between them should never prompt for confirmation,
+ // even when the input already has template text from a previous
+ // tab. Migrate-group chips (From Figma, etc.) still go through
+ // the replacement guard because they carry a meaningful prompt.
+ if (chip.group === 'create') {
+ void usePlugin(record, undefined, pluginOptions);
+ } else {
+ requestActivePlugin(record, undefined, pluginOptions);
+ }
return;
}
case 'create-plugin': {
diff --git a/apps/web/src/components/PluginsHomeSection.tsx b/apps/web/src/components/PluginsHomeSection.tsx
index f5c89c6616..b4562d75f6 100644
--- a/apps/web/src/components/PluginsHomeSection.tsx
+++ b/apps/web/src/components/PluginsHomeSection.tsx
@@ -20,10 +20,7 @@ import { useT } from '../i18n';
import type { PluginShareAction } from '../state/projects';
import { Icon } from './Icon';
import { PluginCard } from './plugins-home/PluginCard';
-import {
- usePluginFacets,
- type FilterMode,
-} from './plugins-home/usePluginFacets';
+import { usePluginFacets } from './plugins-home/usePluginFacets';
import type { FacetOption } from './plugins-home/facets';
import type { PluginUseAction } from './plugins-home/useActions';
@@ -75,7 +72,6 @@ export function PluginsHomeSection({
pickCategory,
pickSubcategory,
clearFacets,
- hasActiveFacet,
mode,
setMode,
query,
@@ -94,9 +90,9 @@ export function PluginsHomeSection({
{title ?? t('pluginsHome.title')}
-- {subtitle ?? t('pluginsHome.subtitle')} -
+ {subtitle ? ( +{subtitle}
+ ) : null}
{onBrowseRegistry ? (
@@ -109,10 +105,6 @@ export function PluginsHomeSection({
{t('pluginsHome.browseRegistry')}
) : null}
-
+ setMode(mode === 'featured' ? 'all' : 'featured')
+ }
+ query={query}
+ onQueryChange={setQuery}
/>
{selection.category ? (
void;
- onClearFacets: () => void;
-}
-
-// Tiny strip above the category row: Featured override + a clear-link
-// when at least one filter is active. Kept compact so the category
-// bar is what the eye lands on first.
-function ModeRow({
- mode,
- featuredCount,
- totalVisible,
- hasActiveFacet,
- onModeChange,
- onClearFacets,
-}: ModeRowProps) {
- const t = useT();
- return (
-
+
- {featuredCount > 0 ? (
-
- ) : null}
-
- {t('pluginsHome.totalInCatalog', { n: totalVisible })}
-
- {hasActiveFacet ? (
-
- ) : null}
-
- );
-}
-
interface CategoryRowProps {
options: FacetOption[];
selectedSlug: string | null;
totalVisible: number;
onPick: (slug: string | null) => void;
+ featuredCount: number;
+ featuredActive: boolean;
+ onToggleFeatured: () => void;
+ query: string;
+ onQueryChange: (next: string) => void;
}
-function CategoryRow({ options, selectedSlug, totalVisible, onPick }: CategoryRowProps) {
+// Single combined filter bar: Featured override chip + category pills
+// on the left, search field on the right. Each chip carries its own
+// count, and the "All" chip doubles as a clear-filters affordance,
+// so a separate `X / Y` counter and `Clear` link would just repeat
+// what the chip strip already shows.
+function CategoryRow({
+ options,
+ selectedSlug,
+ totalVisible,
+ onPick,
+ featuredCount,
+ featuredActive,
+ onToggleFeatured,
+ query,
+ onQueryChange,
+}: CategoryRowProps) {
const t = useT();
if (options.length === 0) return null;
return (
@@ -336,6 +288,25 @@ function CategoryRow({ options, selectedSlug, totalVisible, onPick }: CategoryRo
role="tablist"
aria-label={t('pluginsHome.categoryFilterAria')}
>
+ {featuredCount > 0 ? (
+
+ ) : null}
+
);
}
@@ -431,6 +405,15 @@ function CategoryPill({ slug, label, count, active, variant, testId, onPick }: C
.filter(Boolean)
.join(' ')}
onClick={() => onPick(slug)}
+ // Empty lanes are intentionally kept in the strip so the
+ // overall workflow shape (Import / Create / Export / Share /
+ // Deploy / Refine / Extend) is visible at a glance, and
+ // clicking one surfaces a "Contribute a X plugin" card. The
+ // `data-empty` flag drives a faded treatment in CSS so users
+ // can tell at a glance which chips are populated vs which
+ // are open-invite buckets — without that hint, "Deploy 0"
+ // and "Create 375" read as the same kind of control.
+ data-empty={count === 0 ? 'true' : 'false'}
data-testid={testId ?? `plugins-home-pill-category-${slug ?? 'all'}`}
>
{displayLabel}
diff --git a/apps/web/src/components/RecentProjectsStrip.tsx b/apps/web/src/components/RecentProjectsStrip.tsx
index 13a2b12829..6246ea662d 100644
--- a/apps/web/src/components/RecentProjectsStrip.tsx
+++ b/apps/web/src/components/RecentProjectsStrip.tsx
@@ -6,12 +6,14 @@
// onOpen / onViewAll) so the strip can be reused later by other
// surfaces (e.g. an in-project quick-switcher pane).
-import { useT } from '../i18n';
import type { Project } from '../types';
import { Icon } from './Icon';
+import { useT } from '../i18n';
interface Props {
projects: Project[];
+ /** Retained for call-site compatibility; the strip skips rendering
+ * while the list is loading so we never need a loading state. */
loading?: boolean;
onOpen: (id: string) => void;
onViewAll: () => void;
@@ -20,7 +22,6 @@ interface Props {
export function RecentProjectsStrip({
projects,
- loading,
onOpen,
onViewAll,
limit = 6,
@@ -30,6 +31,15 @@ export function RecentProjectsStrip({
.sort((a, b) => b.updatedAt - a.updatedAt)
.slice(0, limit);
+ // First-run home shouldn't reserve space for an empty "Recent
+ // projects" rail — the dashed empty box just adds visual noise
+ // above the plugin gallery. We also skip rendering during the
+ // load window so the section doesn't pop in and then collapse;
+ // the prompt hero is enough chrome on its own.
+ if (recent.length === 0) {
+ return null;
+ }
+
return (
{t('common.loading')}
- ) : recent.length === 0 ? (
- {t('recentProjects.empty')}
- ) : (
-
- {recent.map((project) => (
-