feat(core): plumb reasoningLevel through GenerateInput + agent.ts

Adds the per-call override channel that the desktop main process will
use to forward ProviderEntry.reasoningLevel into generation requests.
When the caller passes an explicit level it takes precedence over
reasoningForModel's model-family default; when absent, behavior is
unchanged.

- GenerateInput.reasoningLevel?: ReasoningLevel
- ApplyCommentInput.reasoningLevel?: ReasoningLevel
- ModelRunInput.reasoningLevel flows to completeWithRetry()
- reasoningForModel exported so agent.ts reuses the same whitelist
- agent.ts resolves initialState.thinkingLevel as
  input.reasoningLevel ?? reasoningForModel(model) ?? 'off'

Author: hqhq1025

apps/desktop/src/renderer/src/views/hub/ExampleCard.tsx

@@ -105,11 +105,27 @@ export function ExampleCard({ example, onUsePrompt }: ExampleCardProps) {
           color: skin.ink,
         }}
       >
-        {/* Large watermark glyph */}
+        {/* SVG thumbnail — fades in on hover so the default card stays clean
+            and editorial, but hovering reveals the concrete layout preview. */}
+        <div
+          aria-hidden
+          className="absolute inset-0 opacity-0 transition-opacity duration-[var(--duration-base)] ease-[var(--ease-out)] group-hover:opacity-100"
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: thumbnails are static bundled strings authored in-repo, not user content
+          dangerouslySetInnerHTML={{ __html: example.thumbnail }}
+        />
+        {/* Gradient scrim under the title so text stays legible over the SVG */}
+        <div
+          aria-hidden
+          className="absolute inset-x-0 bottom-0 h-[62%] opacity-0 transition-opacity duration-[var(--duration-base)] ease-[var(--ease-out)] group-hover:opacity-95"
+          style={{
+            background: `linear-gradient(180deg, transparent 0%, ${skin.to} 92%)`,
+          }}
+        />
+        {/* Large watermark glyph — visible on the resting state, fades out on hover */}
         <Icon
           aria-hidden
           strokeWidth={1}
-          className="absolute -right-2 -bottom-4 w-[140px] h-[140px] opacity-[0.07]"
+          className="absolute -right-2 -bottom-4 w-[140px] h-[140px] opacity-[0.07] transition-opacity duration-[var(--duration-base)] ease-[var(--ease-out)] group-hover:opacity-0"
           style={{ color: skin.ink }}
         />
         {/* Accent dot */}

packages/core/src/agent.ts

@@ -47,6 +47,7 @@ import type {
   GenerateOutput,
   ReferenceUrlContext,
 } from './index.js';
+import { reasoningForModel } from './index.js';
 import { type CoreLogger, NOOP_LOGGER } from './logger.js';
 import { composeSystemPrompt } from './prompts/index.js';
 import { makeDeclareTweakSchemaTool } from './tools/declare-tweak-schema.js';
@@ -710,6 +711,13 @@ export async function generateViaAgent(
     skillWarnings: skillResult.warnings.length,
   });
 
+  // Resolve reasoning/thinking level: explicit per-call override (sourced
+  // from ProviderEntry.reasoningLevel by the desktop main process) takes
+  // precedence, then the model-family default from reasoningForModel. If
+  // neither yields a value the agent runs with 'off', matching
+  // pi-agent-core's default.
+  const thinkingLevel = input.reasoningLevel ?? reasoningForModel(input.model) ?? 'off';
+
   // Build the Agent. convertToLlm narrows AgentMessage (may include custom
   // types) to the LLM-visible Message subset.
   const agent = new Agent({
@@ -718,6 +726,7 @@ export async function generateViaAgent(
       model: piModel as unknown as PiAiModel<'openai-completions'>,
       messages: historyAsAgentMessages,
       tools,
+      thinkingLevel,
     },
     convertToLlm: (messages) =>
       messages.filter(

packages/core/src/index.ts

@@ -81,6 +81,12 @@ export interface GenerateInput {
   /** v3 extra HTTP headers merged into the outbound request (gateway auth). */
   httpHeaders?: Record<string, string> | undefined;
   allowKeyless?: boolean | undefined;
+  /**
+   * Per-call reasoning level override. Typically sourced from
+   * `ProviderEntry.reasoningLevel`. When absent, core computes a default
+   * via `reasoningForModel`.
+   */
+  reasoningLevel?: ReasoningLevel | undefined;
   designSystem?: StoredDesignSystem | null | undefined;
   attachments?: AttachmentContext[] | undefined;
   referenceUrl?: ReferenceUrlContext | null | undefined;
@@ -106,6 +112,8 @@ export interface ApplyCommentInput {
   wire?: 'openai-chat' | 'openai-responses' | 'anthropic' | undefined;
   httpHeaders?: Record<string, string> | undefined;
   allowKeyless?: boolean | undefined;
+  /** @see GenerateInput.reasoningLevel */
+  reasoningLevel?: ReasoningLevel | undefined;
   designSystem?: StoredDesignSystem | null | undefined;
   attachments?: AttachmentContext[] | undefined;
   referenceUrl?: ReferenceUrlContext | null | undefined;
@@ -140,6 +148,7 @@ interface ModelRunInput {
   wire?: 'openai-chat' | 'openai-responses' | 'anthropic' | undefined;
   httpHeaders?: Record<string, string> | undefined;
   allowKeyless?: boolean | undefined;
+  reasoningLevel?: ReasoningLevel | undefined;
   signal?: AbortSignal | undefined;
   onRetry?: ((info: RetryReason) => void) | undefined;
   messages: ChatMessage[];
@@ -522,7 +531,7 @@ const OPENROUTER_REASONING_MODEL_RE = new RegExp(
   'i',
 );
 
-function reasoningForModel(model: ModelRef): ReasoningLevel | undefined {
+export function reasoningForModel(model: ModelRef): ReasoningLevel | undefined {
   // Whitelist by (provider, modelId) pair. Substring matches across providers
   // are unsafe: an OpenRouter or Groq pass-through id like
   // `anthropic/claude-4` or any third-party id containing "o1"/"r1" would
@@ -613,6 +622,7 @@ export async function generate(input: GenerateInput): Promise<GenerateOutput> {
     wire: input.wire,
     httpHeaders: input.httpHeaders,
     allowKeyless: input.allowKeyless,
+    reasoningLevel: input.reasoningLevel,
     signal: input.signal,
     onRetry: input.onRetry,
     messages,
@@ -665,6 +675,7 @@ export async function applyComment(input: ApplyCommentInput): Promise<GenerateOu
     wire: input.wire,
     httpHeaders: input.httpHeaders,
     allowKeyless: input.allowKeyless,
+    reasoningLevel: input.reasoningLevel,
     signal: input.signal,
     onRetry: input.onRetry,
     messages,

packages/templates/src/examples/examples.test.ts

@@ -6,7 +6,7 @@ import { zhCNExamples } from './locales/zh-CN';
 describe('examples gallery', () => {
   it('ships at least 6 curated examples', () => {
     expect(EXAMPLES.length).toBeGreaterThanOrEqual(6);
-    expect(EXAMPLES.length).toBeLessThanOrEqual(20);
+    expect(EXAMPLES.length).toBeLessThanOrEqual(30);
   });
 
   it('every example has a unique id', () => {

packages/templates/src/examples/index.ts

@@ -15,13 +15,16 @@ import { type Locale, availableLocales, normalizeLocale } from '@open-codesign/i
 import { enExamples } from './locales/en';
 import { zhCNExamples } from './locales/zh-CN';
 import {
+  thumbAiHero,
+  thumbAuth,
   thumbBlog,
   thumbCalendar,
   thumbCaseStudy,
   thumbChat,
   thumbCosmic,
   thumbDashboard,
   thumbEmail,
+  thumbKanban,
   thumbLanding,
   thumbMobile,
   thumbOrganic,
@@ -30,6 +33,9 @@ import {
   thumbPricing,
   thumbReceipt,
   thumbSettings,
+  thumbStatsCounter,
+  thumbTimeline,
+  thumbWeather,
 } from './thumbnails';
 
 export type ExampleCategory =
@@ -162,6 +168,48 @@ export const EXAMPLES: Example[] = [
     prompt:
       'Design a settings page for a SaaS application. Left sidebar with setting categories (Profile, Notifications, Security, Billing, Team, Integrations). Main panel shows the active category with form fields: text inputs, toggle switches, dropdown selects, a danger zone with red "Delete account" button. Include a top bar with breadcrumbs and a "Save changes" button. Light theme, clean form layout, proper spacing between sections, accessible focus states on all inputs.',
   },
+  {
+    id: 'auth-signin',
+    category: 'ui',
+    thumbnail: thumbAuth,
+    prompt:
+      'Design a sign-in screen for a SaaS product called Lumen. A centered card on a dark starry background holds: product wordmark, "Welcome back" headline, email + password inputs, a primary sign-in button in brand indigo, "Forgot password?" link on the right, an OR divider, three social sign-in buttons (Google / GitHub / Apple) with brand glyphs, and a "Don\'t have an account? Sign up" footer link. Rounded inputs, clear focus rings, subtle card elevation.',
+  },
+  {
+    id: 'kanban-board',
+    category: 'ui',
+    thumbnail: thumbKanban,
+    prompt:
+      'Design a kanban board for a product team. Three columns: Backlog, In progress, Done — each with a colored header bar (amber / blue / green) and a count pill. Each column holds 3-5 task cards showing title, a short description, an avatar stack of assignees, and a priority tag. Top bar has the project name, a board/list view toggle, filter chips, and an "Add task" button on the right. Soft gray canvas, white cards, rounded corners, lift-on-hover shadow.',
+  },
+  {
+    id: 'ai-product-hero',
+    category: 'marketing',
+    thumbnail: thumbAiHero,
+    prompt:
+      'Design a hero section for an AI writing assistant called Inkwell. Deep navy → violet gradient background with a soft glowing orb on the right surrounded by concentric rings. Large serif-meets-sans headline, a two-line subhead, an animated caret cursor after the headline (steady blink), and a pair of CTAs (primary gradient button, ghost secondary). Sparse star field, subtle grain overlay, confident editorial feel.',
+  },
+  {
+    id: 'weather-card',
+    category: 'mobile',
+    thumbnail: thumbWeather,
+    prompt:
+      'Design a mobile weather home screen inside a phone frame. Soft sky-blue → indigo gradient background, a large glass-morphism card in the center showing: city name, current temperature in thin 72px weight, condition glyph (sun behind clouds), high/low, and a horizontal 6-hour forecast strip with small icons + temperatures. Below the card, a second smaller card with "Next 7 days" summary bars. Rounded corners everywhere, gentle translucency, generous padding.',
+  },
+  {
+    id: 'timeline-changelog',
+    category: 'document',
+    thumbnail: thumbTimeline,
+    prompt:
+      'Design a product changelog page presented as a vertical timeline. Left spine connects four release dots in different accent colors. Each entry has: a date label, a version tag, a headline, a 2-3 line description, and optional inline mini-tags (feature / fix / breaking). Above the timeline sits a filter row (All / Features / Fixes / Breaking) and a subscribe-to-RSS pill. Warm off-white background, serif headings, restrained typography.',
+  },
+  {
+    id: 'stats-counter',
+    category: 'animation',
+    thumbnail: thumbStatsCounter,
+    prompt:
+      'Design a stats strip section for a landing page with three large animated number counters that count up from 0 to their target on scroll into view (2.4M users, 99.8% uptime, 180 countries). Each stat sits in a translucent card on a deep navy background, with its own neon accent color (sky / violet / green) glowing behind the number. Small all-caps label below each number, tight letter-spacing. Counters ease-out over ~1.2s, no JS libraries — pure IntersectionObserver + requestAnimationFrame.',
+  },
 ];
 
 const REGISTRY: Record<Locale, Record<string, ExampleContent>> = {

packages/templates/src/examples/locales/en.ts

@@ -62,4 +62,28 @@ export const enExamples: Record<string, ExampleContent> = {
     title: 'App settings page',
     description: 'Sidebar-navigated settings with forms, toggles, and danger zone section.',
   },
+  'auth-signin': {
+    title: 'Sign-in screen',
+    description: 'Centered card on a starry backdrop with email, social logins, and sign-up link.',
+  },
+  'kanban-board': {
+    title: 'Kanban project board',
+    description: 'Three-column board with task cards, assignee avatars, and priority tags.',
+  },
+  'ai-product-hero': {
+    title: 'AI product hero',
+    description: 'Gradient hero with glowing orb, blinking caret headline, and dual CTAs.',
+  },
+  'weather-card': {
+    title: 'Mobile weather card',
+    description: 'Glass-morphism weather screen with hourly strip and seven-day summary.',
+  },
+  'timeline-changelog': {
+    title: 'Changelog timeline',
+    description: 'Vertical timeline of releases with color-coded dots and filterable categories.',
+  },
+  'stats-counter': {
+    title: 'Animated stats strip',
+    description: 'Trio of count-up number cards with neon accents and glowing backgrounds.',
+  },
 };

packages/templates/src/examples/locales/zh-CN.ts

@@ -61,4 +61,28 @@ export const zhCNExamples: Record<string, ExampleContent> = {
     title: '应用设置页面',
     description: '侧栏导航的设置页：表单、开关、危险操作区。',
   },
+  'auth-signin': {
+    title: '登录页',
+    description: '星空背景中心卡片：邮箱登录、第三方登录、注册入口。',
+  },
+  'kanban-board': {
+    title: '看板项目面板',
+    description: '三列任务面板：卡片、成员头像堆叠、优先级标签。',
+  },
+  'ai-product-hero': {
+    title: 'AI 产品主视觉',
+    description: '渐变背景 + 发光球体 + 闪烁光标标题 + 双 CTA。',
+  },
+  'weather-card': {
+    title: '移动端天气卡片',
+    description: '玻璃拟态天气界面：当前温度、小时预报条、七日概览。',
+  },
+  'timeline-changelog': {
+    title: '版本更新时间线',
+    description: '竖向时间线：配色圆点 + 版本标签 + 分类筛选。',
+  },
+  'stats-counter': {
+    title: '动态数据统计条',
+    description: '三枚滚动计数卡片，霓虹色光晕，纯原生实现。',
+  },
 };