feat(ui): add starters_layout setting for grouped landing page

[nzjrs]

This lets users customise how the starters are shown with respect to the main chat box. For example, using only CSS, the same starters can be presented these two ways (ignore the privacy blur sorry)

When starter_categories are defined, the landing page currently shows each category as a toggle pill: only one group's starters render at a time. This commit adds a new UISettings.starters_layout field with values "tabs" (default, current behaviour) and "list".

In "list" mode every category renders simultaneously as a card with its starters as rows inside, laid out in a responsive grid. Each card carries a data-category="<slug>" attribute so custom_css can target cards individually, including arbitrary CSS Grid spans, e.g.

    #starters [data-category="featured"] { grid-column: 1 / -1; }

The onSubmit/disabled bookkeeping previously inlined in Starter.tsx is extracted into a shared useStarterSubmit hook so the new StarterRow component does not duplicate the send-message logic.

WelcomeScreen.tsx wraps the logo and MessageComposer in #welcome-logo and #welcome-composer divs so users can reorder children via plain custom_css without forking the component, e.g.

    #welcome-screen #starters { order: -1; }

Defaults preserve current behaviour: layout = "tabs", starters render below the composer. Flat starters (config.starters with no categories) are unaffected.

Adds a cypress test app/spec under cypress/e2e/starters_categories_list covering the new layout.

---

Summary by cubic

Add UISettings.starters_layout to control how grouped starters render on the landing page. New "list" layout shows all categories as cards in a responsive grid and supports fine-grained styling via data-category attributes.

• New Features

  • starters_layout: tabs (default) or list (all categories as cards with starter rows, each with data-category="<slug>"; easy targeting via custom_css). Backend config and libs/react-client types updated.
  • Wrapped the welcome screen children in #welcome-logo and #welcome-composer so layout order can be changed with CSS.
  • Added Cypress e2e app/spec for the list layout.

• Refactors

  • Extracted send-message logic to useStarterSubmit and reused in Starter and new StarterRow.
  • Introduced StarterCategoryCard and StarterRow. Defaults preserved (tabs layout; flat starters unchanged).

^{Written for commit e74871c. Summary will update on new commits. Review in cubic}

[cubic-dev-ai]

1 issue found across 12 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/chat/StarterCategoryCard.tsx">

<violation number="1" location="frontend/src/components/chat/StarterCategoryCard.tsx:39">
P2: Using `starter.label` as the React key can collide when two starters in the same category share a label, causing reconciliation bugs.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Using starter.label as the React key can collide when two starters in the same category share a label, causing reconciliation bugs.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/components/chat/StarterCategoryCard.tsx, line 39:

<comment>Using `starter.label` as the React key can collide when two starters in the same category share a label, causing reconciliation bugs.</comment>

<file context>
@@ -0,0 +1,44 @@
+      </CardHeader>
+      <CardContent className="p-0 pb-2 divide-y">
+        {category.starters.map((starter) => (
+          <StarterRow key={starter.label} starter={starter} />
+        ))}
+      </CardContent>
</file context>

Suggested change

	<StarterRow key={starter.label} starter={starter} />
	+ <StarterRow key={`${starter.label}-${starter.message}`} starter={starter} />

[nzjrs]

I can't make sense of these e2e failures. Was this github unreliabiliyt?