#17 - Updates for WynterAI

Settings / API Key Management

• Add a Settings screen (or extend the existing one) with four labeled API key input fields:
• Anthropic API Key (for Claude)
• OpenAI API Key
• OpenRouter API Key
• Fal API Key (for image/graphics generation)
• Each field must be a password-type input (characters masked) with a show/hide toggle.
• Keys must be persisted securely (e.g., localStorage with a clear namespace, or a secrets store if the app already uses one). Do not hard-code any keys.
• Provide a Save button that validates that at least one text-model key (Claude, OpenAI, or OpenRouter) is present before saving; show an inline error if none are provided.

Provider Selection UI

• Add a Text Model Provider selector (dropdown or radio group) with options:
• Claude (requires Anthropic API Key)
• OpenAI (requires OpenAI API Key)
• OpenRouter (requires OpenRouter API Key)
• Add a separate Image Provider selector with the single option:
• Fal (requires Fal API Key)
• If a user selects a provider whose API key is not yet saved, display an inline warning: "No API key saved for [Provider]. Please add it in Settings."
• Persist the selected providers across sessions alongside the keys.

Provider Integration

Claude (Anthropic)

• Use the Anthropic Messages API (POST https://api.anthropic.com/v1/messages).
• Default model: claude-opus-4-5 (make the model string a named constant so it is easy to update).
• Pass anthropic-version: 2023-06-01 header and the saved Anthropic API key as x-api-key.

OpenAI

• Use the OpenAI Chat Completions API (POST https://api.openai.com/v1/chat/completions).
• Default model: gpt-4o (named constant).
• Pass the saved OpenAI API key as a Bearer token.

OpenRouter

• Use the OpenRouter Chat Completions API (POST https://openrouter.ai/api/v1/chat/completions).
• Default model: openai/gpt-4o (named constant, user-visible so it can be changed later).
• Pass the saved OpenRouter API key as a Bearer token.
• Include the required HTTP-Referer header set to the app's origin and X-Title set to the app name.

Fal (Image Generation)

• Use the Fal REST API (POST https://fal.run/fal-ai/flux/schnell or the equivalent endpoint for the default model — use a named constant).
• Pass the saved Fal API key as Authorization: Key <fal_api_key>.
• Accept a text prompt and return the generated image URL to the caller.

Routing / Service Layer

• Create a single aiService module (e.g., src/services/aiService.ts) that exports:
• sendTextMessage(messages, options?) — routes to the active text provider.
• generateImage(prompt, options?) — routes to Fal.
• All existing places in the codebase that call an AI API must be updated to use aiService instead of any direct or hard-coded calls.
• Errors from any provider (non-2xx responses) must be caught and surfaced to the UI as a human-readable message that includes the provider name and the error message returned by the API.

No Breaking Changes

• If no provider is selected or no key is saved, the app must degrade gracefully (disable the send/generate button and show "Please configure an AI provider in Settings") rather than throwing an unhandled error.

Ensure the chat screen fills the full viewport width, all interactive buttons work correctly on both mobile and desktop, the overall UI is polished, and the "not connected to AI" warning is immediately noticeable.

• Set the chat screen root container to width: 100% (and max-width: 100%) so it spans the full viewport on all screen sizes; remove any fixed pixel widths or unintended horizontal margins/padding that constrain it.
• Audit every button in the chat screen (send, attach, emoji, clear, settings, etc.) and confirm each one fires its intended action on both touch (mobile) and click (desktop); fix any buttons that are unresponsive, mis-sized for touch targets (minimum 44×44 px), or hidden behind overflow.
• Make the input bar and message list use a flex/grid layout that keeps the input pinned to the bottom and the message list scrollable, without content being clipped or overflowing horizontally on narrow viewports.
• Ensure consistent spacing, font sizes, and color contrast across mobile breakpoints (≤ 768 px) and desktop (> 768 px); no elements should overlap or collapse unreadably at either size.
• Restyle the "not connected to AI" warning so it is visually distinct and impossible to miss: use a high-contrast banner or inline alert (e.g., amber/red background, bold icon such as ⚠️, and explicit text like "Warning: Not connected to AI — responses are unavailable") rather than a subtle or greyed-out message; the warning must be visible without scrolling when the disconnected state is active.
• The warning must disappear (or update) automatically once the AI connection is restored, without requiring a page reload.

Done when:

• The chat screen container is visibly full-width on a 375 px mobile viewport and a 1440 px desktop viewport with no horizontal scrollbar.
• Every button in the chat screen produces its correct action when tapped on a mobile device (or mobile emulator) and when clicked on desktop.
• All touch targets are at least 44×44 px.
• The message list scrolls independently and the input bar stays anchored at the bottom on both viewport sizes.
• No text, buttons, or UI elements are clipped, overlapping, or horizontally overflowing at 375 px or 1440 px widths.
• When the AI is disconnected, a high-contrast warning banner with a warning icon and explicit disconnection text is displayed at the top of the chat screen without requiring the user to scroll.
• The warning banner disappears automatically when the AI connection is re-established.

Create a multi-step wizard UI for generating a new Brand Kit, where users provide a prompt and optional logo upload, and the system uses AI to suggest colors, typography, and other brand tokens — with the ability to regenerate results.

• The wizard opens with Step 1 showing the prompt textarea and logo upload area.
• "Next" button is disabled when the prompt field is empty and enabled once text is entered.
• Uploading a logo triggers client-side color extraction; extracted hex values are logged/visible in network request payload to confirm they are passed to the API.
• Step 2 loading screen displays "Generating your brand kit…" with a spinner while the API call is in progress.
• Step 3 displays five labeled color swatches with hex values, two Google Font names with previews, and the rationale disclosure element.
• Each color swatch opens a color picker and the hex value updates on change.
• Each font field has a dropdown populated with valid Google Fonts family names.
• "Regenerate" re-runs the API call, shows the loading state, and replaces results.
• If the API returns invalid JSON, the error message "Generation failed — please try again" is shown inline in Step 3.
• "Save Brand Kit" persists the current values and shows the "Brand kit saved!" toast.
• "Back" from Step 3 returns to Step 1 with the original prompt text and uploaded logo still present.
• "Cancel" in Step 1 closes the wizard without saving.
• colorthief (or equivalent) is listed in package.json and the app builds without errors.

Redesign the settings area by removing the "Connected accounts" section entirely and replacing the API connections page with a simpler layout that uses a left sidebar to separate each service.
Requirements:

• Remove the "Connected accounts" section from settings completely — delete any related UI components, routes, navigation links, and menu entries that reference "Connected accounts".
• Locate the existing API connections page and redesign its layout:
• Add a left sidebar that lists each available service as a separate navigation item (one item per service).
• Clicking a service in the left sidebar displays that service's connection details/configuration in the main content area to the right.
• Only one service panel is shown at a time in the main content area.
• The left sidebar must be visually distinct from the main content area (e.g., a border or background color separating them).
• Each service entry in the left sidebar must show at minimum the service name as a label.
• The active/selected service in the sidebar must have a visible selected state (e.g., highlighted background or bold text).
• The first service in the sidebar should be selected and displayed by default when the page loads.
• Do not stub or leave placeholder content — all existing services that were previously listed on the API connections page must appear as sidebar items with their existing configuration UI rendered in the content area.
• Remove any dead code, unused components, or imports left behind from the "Connected accounts" removal.

Done when:

• "Connected accounts" no longer appears anywhere in the settings UI, navigation, or routes.
• The API connections page renders with a left sidebar listing every service.
• Selecting a service in the sidebar updates the main content area to show that service's details.
• The default page load shows the first service selected and its content visible.
• No references to "Connected accounts" remain in the codebase (components, routes, nav config, i18n strings, etc.).
• All previously supported services are accessible via the new sidebar — none are missing.
• The layout is functional and the sidebar/content separation is visually clear.

Trigger

• Show the onboarding flow automatically when a user has no existing projects (i.e., on first login or when the project list is empty).
• Store completion state (e.g., onboarding_step and onboarding_completed flags) in the user's profile/localStorage so refreshing the page resumes at the correct step.

Step 1 — Create a Project

• Display a modal or full-screen overlay with the heading "Create your first project".
• Include a required text input labelled "Project name" and an optional text input labelled "Description".
• Primary CTA button: "Create Project". Disabled until the project name field is non-empty.
• On success, persist the new project and advance to Step 2.

Step 2 — Set Up Brand Kit (optional)

• Heading: "Set up your Brand Kit".
• Allow the user to upload a logo (file input, accepts PNG/JPG/SVG), pick a primary brand color (color picker), and enter a brand font name or select from a preset list.
• Two CTAs: "Set Up Brand Kit" (saves inputs and advances) and "Skip for now" (advances without saving).
• Skipping must be clearly non-destructive — the user can return later.

Step 3 — Connect API Keys

• Heading: "Connect your API keys".
• Show input fields for at least the following keys (one field each, with a visible label and a masked/password-type input):
• OpenAI API Key
• Netlify Personal Access Token
• Include a "How to get these keys" inline help link that opens documentation in a new tab (URL can be a placeholder # if not yet defined, but the link element must exist).
• Primary CTA: "Save & Continue". Validate that both fields are non-empty before enabling the button.
• Secondary CTA: "Skip for now" (advances without saving; Netlify deploy in Step 5 will be disabled if the Netlify token is absent).

Step 4 — Create a Page

• Heading: "Create your first page".
• Required text input labelled "Page name".
• Optional textarea labelled "Page description / prompt" (used to pre-populate AI generation if available).
• Primary CTA: "Create Page". Disabled until page name is non-empty.
• On success, persist the page under the current project and advance to Step 5.

Step 5 — Download or Deploy to Netlify

• Heading: "You're almost done!".
• Two action buttons side by side:
• "Download" — triggers a download of the generated page as a ZIP file.
• "Deploy to Netlify" — initiates deployment using the saved Netlify token. If no Netlify token was saved in Step 3, this button is disabled and shows a tooltip: "Add your Netlify token in Settings to enable deployment".
• Below the buttons, a "Go to Dashboard" link that closes the onboarding flow and navigates to the main project dashboard.
• Mark onboarding_completed = true when the user clicks either action button or "Go to Dashboard".

Progress Indicator

• Display a step indicator (e.g., numbered pills or a progress bar) at the top of every step showing the current position out of 5 steps.
• Completed steps are visually distinct from the active and upcoming steps.

Navigation

• Each step (except Step 1) has a "Back" button that returns to the previous step without losing entered data.
• Closing the overlay mid-flow (if an explicit close/X button is present) must prompt a confirmation: "Are you sure you want to exit setup? Your progress will be saved." with "Exit" and "Continue Setup" options.

Component & File Structure

• Create an OnboardingFlow parent component that owns step state and renders the active step component.
• Individual step components: StepCreateProject, StepBrandKit, StepApiKeys, StepCreatePage, StepDeployPage.
• Shared StepWrapper component that renders the progress indicator, Back button, and slots the step content.
• All components live under src/components/onboarding/.

Redesign the app's visual identity to match the Wynter.ai brand: red, black, and white color palette; balanced button usage; updated logo and favicon; and verified mobile responsiveness.

Brand Colors

• Define the following as the canonical design tokens / CSS variables (or Tailwind config values, whichever the project uses):
• Primary / accent: Wynter red — inspect wynter.ai to extract the exact hex value (e.g. #E8002D or whatever is used on the live site; use the real value, not a guess)
• Background / neutral dark: Black (#000000 or the near-black used on wynter.ai)
• Background / neutral light: White (#FFFFFF)
• Replace any off-brand colors (blues, grays used as primary actions, etc.) throughout the app with the correct tokens
• Text on dark backgrounds must be white; text on white backgrounds must be black or the brand red for emphasis only

Button Hierarchy — Reduce Red Overload

• Define two button variants:
• Primary button: red background, white label — use only for the single most important CTA per screen/section (e.g. form submit, main action)
• Secondary button: white or transparent background, red or black border, dark/red label — use for secondary actions (cancel, back, secondary links, filter toggles, etc.)
• Audit every button in the app and switch secondary/tertiary actions to the secondary button style
• Ensure both variants have clear hover, focus, and disabled states that remain on-brand

Logo

• Fetch the official Wynter.ai logo as displayed on wynter.ai (the exact wordmark/lockup visible on the live site)
• Save the logo asset(s) to the appropriate directory (e.g. public/images/logo.svg or src/assets/logo.svg)
• Replace every instance of the current logo in the app (navbar, sidebar, auth pages, email templates if applicable) with the new asset
• Logo must render correctly on both white and dark/black backgrounds (use the appropriate variant or ensure the SVG works on both)

Favicon / App Icon

• Extract or recreate the favicon used on wynter.ai (the icon visible in the browser tab)
• Replace the existing favicon.ico / favicon.png / apple-touch-icon files in public/ with the correct Wynter.ai icon
• Update any <link rel="icon"> or manifest references in index.html / _document.tsx / layout.tsx (whichever applies) to point to the new files

Mobile Responsiveness

• Test and fix layout on viewports 320px–767px wide
• Navbar/header: logo must be visible and not clipped; navigation must collapse to a hamburger or equivalent mobile menu
• Buttons must be full-width or appropriately sized on small screens — no overflow or clipping
• Typography must remain readable (no text overflow, no horizontal scroll caused by text)
• Forms and input fields must be full-width and usable on touch screens
• No horizontal scroll on any page at 375px viewport width

Update the homepage sales copy to clearly communicate that the product's key differentiator is high-fidelity landing pages powered by AI-generated graphics and video — specifically AI-generated visuals for buttons, headlines, and text elements, plus AI video generated via Fal AI.
Requirements:

• Audit the current homepage copy and identify every section that describes what the landing pages look like or how they are built (hero headline, subheadline, feature bullets, any "How it works" or "Why us" sections, and CTAs).
• Rewrite those sections so they prominently communicate:
• Landing pages are high-fidelity — professional, polished visual quality, not generic templates.
• AI-generated graphics are used for buttons, headlines, and body text elements (i.e., the visual treatment of these UI components is AI-crafted, not stock or hand-designed).
• AI-generated video (powered by Fal AI) is embedded in or produced for the landing pages.
• This combination of AI graphics + AI video is the core differentiator that sets the product apart.
• Do not mention the internal codename "NabuDesigner" anywhere in the copy.
• Do not mention Fal AI by name in customer-facing copy unless it is already publicly referenced on the page; instead describe the capability (e.g., "AI-generated video").
• Keep the tone consistent with the existing homepage voice (inspect the current page before writing).
• Preserve all existing page structure, layout, and non-copy elements (images, components, spacing) — only the text content changes.
• If a section's existing copy is already accurate and strong, leave it unchanged.

Done when:

• Every homepage section that describes the product's output or build process has been reviewed and updated where needed.
• The hero headline and/or subheadline explicitly communicates high-fidelity AI-generated landing pages.
• At least one section (feature list, "How it works", or similar) specifically calls out AI-generated graphics for buttons, headlines, and text elements.
• At least one section specifically calls out AI-generated video as a feature of the landing pages.
• The word "NabuDesigner" does not appear anywhere on the page.
• No placeholder text or lorem ipsum is present in any rewritten section.
• The page renders correctly with no broken layout caused by copy length changes.
• A second person has read the updated copy and confirms it clearly conveys the high-fidelity AI graphics + AI video differentiator to a first-time visitor.

update these icons for settings and what seems to be dark/light mode on right? or is that page settinsg either way find a solution and fix it