mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
Tom HuangGitHubCursorxne998808-aiPerishCodeopen-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com>lefarcenSiri-Ray* Implement brand management routes and CLI support - Added `brand-routes.ts` to handle HTTP endpoints for brand operations: listing, extracting, retrieving details, deleting, and serving logos. - Introduced `brands-cli-help.ts` for CLI commands related to brand management, including usage instructions for listing, creating, retrieving, and deleting brands. - Updated `cli.ts` to integrate brand commands into the existing CLI structure, allowing headless management of brands via the command line. - Created supporting files for brand metadata handling, including `design-md.ts` for rendering brand information in markdown format and `index.ts` for the brand engine API. - Implemented `prefetch.ts` to fetch and process brand material from specified URLs, ensuring a streamlined extraction process. - Enhanced server setup in `server.ts` to register brand routes and manage brand-related data effectively. This commit establishes a comprehensive framework for managing brands within the application, facilitating both HTTP and CLI interactions. * Enhance memory management and onboarding experience - Introduced canonical profile labels to ensure consistent handling of user input in profile forms, preventing duplicate entries. - Updated the `parseProfileBody` and `captureProfileFromForm` functions to utilize the new canonical label matching. - Added a memory callout section in the onboarding view to highlight the benefits of memory usage, including personalized responses and reduced setup questions. - Implemented new UI elements in the onboarding view to improve user engagement with memory features. - Expanded i18n support for new onboarding messages related to memory benefits across multiple languages. * Refactor onboarding flow and enhance design system integration - Updated the onboarding process to include a new brand extraction step, replacing the previous newsletter step. - Adjusted the tracking logic to reflect the new onboarding steps, ensuring accurate analytics for user progress. - Improved the UI for the onboarding view, including new input fields for email collection during the brand extraction phase. - Refined the EntryShell component to remove outdated comments and clarify the onboarding renderer's purpose. - Enhanced CSS styles for the onboarding steps to improve layout and user experience. - Updated internationalization strings across multiple languages to reflect changes in the onboarding flow and brand extraction messaging. * Add brand management features and enhance font handling - Introduced new modules for managing brand assets, including `chrome.ts` for headless Chrome operations and `fonts.ts` for self-hosting web fonts. - Implemented `prefetch.ts` to streamline the brand material extraction process, allowing for efficient harvesting of colors, fonts, and logos. - Enhanced the brand system with new schema definitions in `schema.ts` to support brand color and font management. - Developed the `engine` module to integrate brand building and rendering processes, including token derivation and artifact generation. - Improved the overall structure and organization of brand-related files for better maintainability and scalability. * Enhance brand extraction and project management features - Updated `brand-routes.ts` to include new dependencies for project management, allowing for the registration of brand-related projects. - Modified the `extractBrand` function to support project ID and system files, improving the brand extraction process. - Enhanced the CLI commands in `cli.ts` to handle project IDs during brand creation, enabling better tracking of brand projects. - Updated the server setup in `server.ts` to register new project-related routes. - Improved the UI components to display project information associated with brands, including buttons for opening projects in the `BrandDetailView` and `BrandsTab`. - Added new metadata fields in the contracts to support project tracking and management for brands. This commit establishes a more robust framework for managing brand projects, enhancing both backend and frontend functionalities. * Enhance onboarding profile management and memory persistence - Added new canonical profile labels for 'Organization size', 'Use cases', and 'Discovery source' to improve user input consistency. - Introduced `OnboardingProfileState` type to manage onboarding profile data more effectively. - Implemented functions to build and persist the onboarding profile body to memory, ensuring user selections are saved accurately. - Updated the `OnboardingView` component to handle profile persistence during navigation and submission steps. - Enhanced tests to verify that user selections are correctly persisted to the memory profile. This commit improves the onboarding experience by ensuring that user inputs are consistently captured and stored, enhancing overall user engagement with the application. * Reflow brand extraction into an agent-driven, live flow Replace the deterministic SSE prefetch/preview/system pipeline with an agent-driven extraction: POST /api/brands now reserves the brand and stands up a backing project with the target site open in an in-app browser tab plus a seeded prompt, so the agent measures, synthesizes brand.json incrementally, and the user can clear anti-bot walls by hand. New /preview and /finalize routes let the agent render the kit page live and register the resulting user:<id> design system, so extracted brand facts persist as a structured, reusable brand kit instead of a one-shot deterministic guess. Adds the brand-extract skill (SKILL.md + brand-kit.html template), kit-render engine, brand-extraction-engine tests, brand project covers in the Designs tab, onboarding extract handoff, and the matching od brand extract/preview/ finalize CLI subcommands and contract updates. Co-authored-by: Cursor <cursoragent@cursor.com> * Sediment finalized brands into structured memory Reflow a finalized brand into the memory store (brandToMemoryEntries + reflowBrandToMemory) so future chats can ground vague requests in the brand's palette, type, voice and rules. finalizeBrand now wires through the runtime dataDir and best-effort persists the brand, MemoryChangeEvent gains a 'brand' source, and the brand kit render hardens its inline JSON escaping. Adds brand.previewEmpty / brand.viewDetails across all locales. Co-authored-by: Cursor <cursoragent@cursor.com> * Implement logo fallback and imagery support in brand extraction - Introduced a deterministic logo fallback mechanism to ensure that brand extraction processes can retrieve and save site logos, even when the agent fails to do so. - Enhanced the `startBrandExtraction` and `finalizeBrand` functions to utilize the new logo fallback, allowing for better handling of logo assets. - Added support for imagery samples in brand validation, enabling the inclusion of representative images in the brand kit. - Updated the brand kit rendering to include self-hosted fonts and imagery, improving the overall presentation of brand assets. This commit strengthens the brand extraction workflow by ensuring that logos and imagery are reliably captured and displayed, enhancing the user experience in brand management. * Enhance memory management with rule proposal and verification features - Introduced new functionality for distilling annotations into rule proposals, allowing users to suggest rules based on in-canvas annotations through the `od memory rule suggest` command. - Implemented a verification system that programmatically enforces compliance with active rules during artifact generation, ensuring that all active rules are covered in the self-verify scorecard. - Added endpoints for managing verification outcomes, including listing, removing, and clearing verification records, enhancing the transparency of the verification process. - Updated the memory management system to support the retrieval of active rule entries, ensuring that only linked rules are considered during verification. - Enhanced tests for both rule proposal generation and verification processes to ensure reliability and correctness. This commit strengthens the memory management capabilities by integrating rule proposals and verification, improving the overall user experience in managing design rules and ensuring compliance. * Distill review annotations into memory and enforce self-verify scorecard Add distillAnnotationsToMemory to mine inline preview comments/highlights/ marks into durable feedback + rule memory via a dedicated distiller prompt, threaded through the existing extract pipeline with an 'annotation' change source. Tighten the self-verify prompt (daemon + contracts) to state the daemon programmatically checks the scorecard, so a missing or uncovered scorecard on an artifact turn is an enforcement failure. Cover the rule suggest and verification-history routes with tests. Co-authored-by: Cursor <cursoragent@cursor.com> * Apply brand design system through web config on "Use in new chat" Thread onApplyDesignSystem from the entry shell into BrandsTab so the brand's registered design system is applied via the web config channel instead of a bare daemon PATCH that left the Home composer stale. Add a transient home-intent latch + event so the Brands tab can request the Prototype chip on the already-mounted HomeView, which consumes it once the plugin catalog loads. Co-authored-by: Cursor <cursoragent@cursor.com> * Wire annotation distillation into background memory extraction Add a background distill pass that mines inline review annotations (comments / highlights / drawn marks) from a turn into durable memory alongside the general LLM extraction, surface an `annotation` memory toast source in the web UI, and cover the flow with a unit test. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix brand design system not applying to composer on "Use in new chat" Selecting a brand's "Use in new chat" applies the brand's design system as the default and fires the Prototype chip intent in the same synchronous click handler. HomeView consumed that intent inside the event listener, so `pickChip` ran before React committed the config change and seeded the composer's design-system field from the stale (empty) default — the composer showed "No design system" instead of the brand until a reload. Split the intent handling: the listener now only bumps a tick, and a separate effect consumes the chip after the re-render lands, so the seeded design system reflects the freshly-applied brand. Add the previously-untracked home-intent latch test coverage. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(web): rework Brands into Brand Kit and add Home create entry Co-authored-by: Cursor <cursoragent@cursor.com> * feat(brands): harvest real cover/hero images for the Images module The brand kit's Images gallery only populated when the extraction agent remembered to save imagery — so a forgetful or bot-blocked agent (and the pre-imagery "Open Design" brand) left it empty. Add a deterministic, server-side imagery fallback (imagery-fallback.ts), mirroring the logo fallback: it parses og:image/twitter:image, large <img> (highest-res srcset/<picture>), <link rel=preload as=image>, and CSS background-image hero blocks, fetches candidates with browser-shaped headers, decodes PNG/GIF/JPEG/WebP dimensions to keep only big representative images (dropping icons/sprites/logos/tracking pixels), dedupes by content hash, and saves up to 8 of the largest into imagery/ with labeled samples. finalizeBrand runs it as a timeout-bounded, failure-tolerant safety net (injectable so tests stay offline) when the agent captured too few samples, first adopting any on-disk images. The extraction prompt and brand-extract SKILL now explicitly direct the agent to harvest the site's large/cover/hero images, filtered by rendered size. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(qa): implement deck layout validation and safety checks Add a new QA module for validating the layout of generated brand decks to ensure robustness against clipping and truncation issues. The `analyseDeckLayout` function checks for critical layout invariants, including the presence of `.slide` sections, correct container types, and necessary runtime layers. Introduce `assertDeckLayoutSafe` to enforce these checks during brand system rebuilds, preventing the deployment of decks that fail validation. Additionally, create comprehensive tests to verify the functionality of the new layout validation features. * fix(brands): apply deck shrink-to-fit synchronously so slides never clip The no-clip runtime scheduled its fit pass through requestAnimationFrame, whose callbacks are throttled while the deck is offscreen or occluded. A slide could therefore stay unscaled — and clip its content — until first paint. Fit synchronously on resize/load/fonts-ready with a trailing setTimeout settle pass for late reflow, removing the rAF dependency. Verified at the previously-broken 1024x620 viewport: container-type:size, zero truncations, runtime auto-applies scale (Problem 0.71, ASK 0.87, Product 0.97, Competition 0.97) and frame clip count drops to 0. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(web): let New Brand modal embed scrollable brand reference picker Add a fillHeight mode to BrandReferencePicker so the heading, quick-pick row and controls stay pinned while only the gallery scrolls inside a bounded-height parent. Wire it into NewBrandModal with a stable, spacious dialog and refresh the related newBrand/brandPicker copy across all 18 locales. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(brands): enhance brand extraction with deterministic seed harvesting Introduce a new `seed-fallback` module to provide a server-side deterministic palette and typography seed during brand extraction. This ensures that the brand kit's initial display includes a harvested logo, an approximate color palette, and font families, improving the user experience by reducing the all-skeleton appearance during the first paint. Update the `startBrandExtraction` function to utilize this new module, allowing for a more seamless and visually appealing brand extraction process. Additionally, enhance the `BrandReferencePicker` component to reflect loading states and errors during brand extraction, ensuring users receive immediate feedback on their actions. Update related tests to verify the idempotency of the `finalizeBrand` function, ensuring that re-finalizing a brand correctly reuses the existing design system without duplication. * feat(brand-extract): enhance BrandReferencePicker and localization updates Updated the BrandReferencePicker component to reflect loading states and errors during brand extraction, improving user feedback. Added a new localization key for the brand extraction process and updated existing translations in English, Simplified Chinese, and Traditional Chinese to enhance clarity and user experience. Additionally, introduced new styles for better interaction with brand assets in the brand kit template. * feat(brands): wire in-page lightbox/masonry/asset preview + refine seed Brand-kit preview improvements for the live extraction kit: - brand-kit.html: add in-page overlay system (sandboxed iframe has no top-nav) — clickable image lightbox with prev/next, a "view all" masonry modal, and a full-page asset preview modal that loads system/artifacts/<kind>.html in an iframe. Defer auto-reload while an overlay is open so it never yanks the modal out mid-interaction. - seed-fallback.ts: prefer vivid mid-luminance hues for the seeded accent/accent-secondary, and drop icon/symbol faces (Remix Icon etc.) from the typography seed so specimens never render glyph soup. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(brands): wire in-page lightbox/masonry/asset preview + refine seed Brand-kit preview improvements for the live extraction kit: - brand-kit.html: add in-page overlay system (sandboxed iframe has no top-nav) — clickable image lightbox with prev/next, a "view all" masonry modal, and a full-page asset preview modal that loads system/artifacts/<kind>.html in an iframe. Defer auto-reload while an overlay is open so it never yanks the modal out mid-interaction. - seed-fallback.ts: prefer vivid mid-luminance hues for the seeded accent/accent-secondary, and drop icon/symbol faces (Remix Icon etc.) from the typography seed so specimens never render glyph soup. Co-authored-by: Cursor <cursoragent@cursor.com> * i18n(web): add brandPicker.opening across remaining locales + picker test Completes the brand-reference picker i18n key that was committed only for en/zh-CN/zh-TW, so every locale satisfies the typed Dict, and lands the BrandReferencePicker extraction-feedback test left untracked by the concurrent worker. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(EntryShell): enhance AMR cloud card visibility post-detection Updated the EntryShell component to ensure the AMR cloud card remains visible after detection settles, even when the AMR runtime is unavailable. This change prevents the card from disappearing and allows it to degrade gracefully to fallback content and sign-in flow. Additionally, added tests to verify the new behavior, ensuring a better user experience during onboarding. * feat(library): OD Library asset registry + OD Clipper extension Add a global, cross-project asset registry (OD Library) and a Chrome MV3 capture extension (OD Clipper), wiring the full HTTP + CLI + Web UI three-track loop per specs/od-clipper.md. - contracts: LibraryAsset/Source/Kind, ingest, search, pairing, task DTOs - daemon: 6 additive SQLite tables, content-addressed owned storage, the idempotent registerLibraryAsset hook (hash dedup + append-source), programmatic enrichment (mime/size/image dims/domain/tags), pairing tokens with a persisted extension-origin allowlist, /api/library/* routes, and /api/tools/library/{search,apply} for in-task agent reuse - cli: `od library list|get|rm|search|import|pair` - web: Library tab (grid, source badges, filters, search, live SSE updates, extension pairing affordance) - clipper/: standalone MV3 extension (background SW, content toolbar, popup) - skills/library-curator: utility skill for agent-driven asset reuse Origin middleware now honors paired chrome-extension:// origins (seeded from SQLite on boot) and exempts the pairing-confirm handshake. Enrichment AI stages (caption/OCR/embedding) are recorded as skipped pending a configured model. * feat(brands): programmatic-first design system extraction + rename Make brand extraction two-phase so a usable design system is ready the moment the user enters a URL — the instant "aha" — instead of waiting on the AI agent: 1. PROGRAMMATIC-FIRST (synchronous): startBrandExtraction now harvests the site deterministically (logo, palette, typography, one-line description, cover imagery, source URL) via prefetchBrand, synthesizes a valid design system with brandFromMaterial (no LLM), and finalizes + registers it before returning. finalizeBrand is refactored into a reusable finalizeBrandCore shared by both the programmatic path and the agent path. 2. ASYNC AI ENRICHMENT: the seeded agent prompt is reframed to enrich the already-usable design system and re-finalize in place (same user:<id>), updating every artifact/template. Bounded + best-effort: a blocked/unreachable origin skips phase 1 and stays `extracting` for the agent to drive. Gated on userDesignSystemsRoot so the legacy agent-only path stays intact for tests. Also rename the user-facing "Brand Kit" surface to "Design System" across en + zh-CN strings, project names, and the enrichment prompt. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(library): enhance asset import and management features - Updated the `import` command to allow multiple local files and remote URLs, with restrictions on supported formats. - Added new commands: `apply` for copying assets into project design files, `edit-as-page` for converting HTML assets into editable projects, and `figma` for exporting Figma captures. - Introduced sidecar functionality for storing derived data alongside owned assets, including Figma capture IR and element HTML. - Enhanced server configuration to support larger ingest payloads for asset captures. - Improved error handling and user feedback during asset import and application processes. * feat(asset-management): enhance asset dropzone and introduce chat-to-design feature - Updated the DesignSystemAssetDropzone component to improve file preview handling with new functions for creating and revoking object URLs. - Adjusted CSS for better layout and spacing in the asset dropzone. - Added a new "Chat to design" button in the LibrarySection component, allowing users to send selected assets to the Home chat composer for project creation. - Updated localization strings across multiple languages to reflect changes in asset import terminology. - Enhanced the HomeView component to handle asset staging from the chat composer. * feat(library): enhance asset application with element markup support - Updated the `applyLibraryAsset` function to include an `includeElement` option, allowing the capture of element markup alongside assets. - Modified related components (e.g., `ChatComposer`, `LibrarySection`, `FileWorkspace`) to handle the new element markup feature, ensuring both asset paths and optional element paths are returned and processed. - Introduced a new function, `fetchLibraryAssetElementHtml`, to retrieve the captured HTML for element-pick assets. - Enhanced the UI to display element markup inline within the chat composer, improving user interaction with captured elements. - Updated API contracts to reflect changes in asset application responses, including optional element markup paths. * feat(library): enhance asset filtering and preview handling - Updated the LibraryPicker and LibrarySection components to implement a badge-aware kind filter, allowing for more precise asset filtering based on badge kind. - Introduced a new `matchesKindFilter` function to streamline the filtering logic across components. - Enhanced the DesignSystemAssetDropzone to ensure proper handling of image previews, addressing issues with broken thumbnails under React StrictMode. - Added CSS styles for kind badges to improve asset representation in the UI. - Implemented tests for the DesignSystemAssetDropzone to ensure correct preview lifecycle management. * feat(library): hydrate single asset on SSE ingest Add fetchLibraryAsset(id) so the Library grid can merge just the one asset an `ingest` SSE event references instead of refetching the whole list on every capture. Returns null on miss/error. * feat(clipper): richer in-page image picker Collect CSS background-image url()s in addition to <img> (so hero/section art painted as backgrounds is no longer silently missed), defer thumbnail decode to visible cells via IntersectionObserver, draw downscaled canvas thumbnails instead of second full-res decodes, and add locate-on-page highlighting so a picked image can be traced back to its DOM source. * feat(library): implement lazy loading for thumbnails and enhance asset filtering - Introduced a `LibraryThumb` component to lazily load heavy content (images, videos, iframes) only when they are near the viewport, improving performance. - Added a debounced search feature to optimize asset filtering, reducing unnecessary network requests during rapid input. - Enhanced the asset filtering logic to track active filters using a ref, ensuring efficient updates during live events. - Updated the `snapshotCardRects` and `cardIdsInBand` functions to support improved hit-testing for drag-and-drop interactions. * feat(library): lazy picker thumbnails + debounced search Extend the Library grid's lazy-thumbnail + 250ms debounced-search pattern to the composer LibraryPicker so opening it no longer fires one full-bytes request per asset, and tidy the clipper content-script image collection. * feat(clipper): compress and budget capture inlining Re-encode large raster images to downscaled WebP and inline smallest-first within a fixed budget, dropping only the secondary Figma IR past a safe body size, so an image-heavy page (e.g. a news front page) always saves as an editable HTML capture instead of 413-failing the ingest. * test(library): LibraryPicker debounce + lazy-thumbnail coverage Cover the composer picker's 250ms debounced search and its lazy <img> mount (deferred until the card is in view), matching the grid's perf test. * feat(design-system): enhance asset handling and UI for design systems - Updated the CLI to support additional asset kinds, including 'design-system'. - Enhanced the DesignSystemProvenance type to include source URLs, improving provenance tracking. - Modified the design system generation jobs to correctly summarize source links and GitHub repositories. - Updated UI components to reflect changes in asset handling, including new source link management in the DesignSystemFlow. - Improved tests to cover new functionality for adding source links and ensuring proper handling of design system assets. * refactor(library): rename 'design-system' to 'brand kit' and enhance thumbnail loading - Updated labels and filters in Library components to replace 'design-system' with 'brand kit'. - Introduced a shimmer skeleton for lazy-loaded thumbnails in the LibraryPicker to improve user experience during asset loading. - Enhanced the PickerCard component for better performance by memoizing individual asset cards. - Updated tests to ensure proper handling of brand kit assets and their visibility in the LibraryPicker. * feat(clipper): implement internationalization for toolbar and popup - Added i18n support to the clipper, enabling localization of UI elements and tooltips. - Introduced a new i18n.js file to manage translations for various languages. - Updated content.js and popup.js to utilize the i18n functions for dynamic text rendering. - Enhanced accessibility by ensuring aria-labels and tooltips are also localized. - Improved user experience by providing localized messages for actions and statuses. * feat(clipper): enhance brand kit extraction and localization support - Updated the brand kit extraction process to include improved handling of assets and localization for various UI elements. - Added internationalization support for the brand kit feature, allowing for dynamic text rendering based on user locale. - Enhanced the user experience by ensuring that all relevant messages and tooltips are localized. - Updated tests to cover new localization features and ensure proper functionality of the brand kit extraction process. * feat(clipper): enhance brand color derivation and update localization - Introduced new functions for color manipulation, including linear interpolation and clamping, to improve brand color derivation. - Updated the deriveBrandColors function to better map observed palettes to semantic roles, ensuring consistent brand representation. - Revised localization strings in i18n.js to reflect changes from 'brand kit' to 'design system', enhancing clarity and user experience. - Improved overall code organization and readability by refactoring existing functions and adding new utility methods. * refactor(clipper): update terminology from 'brand kit' to 'design system' - Replaced all instances of 'brand kit' with 'design system' across various components and localization files for consistency. - Updated UI elements, tooltips, and documentation to reflect the new terminology. - Enhanced user experience by ensuring clarity in the design system extraction process and related functionalities. - Adjusted localization strings in multiple languages to align with the updated terminology. * feat(clipper): enhance image fill handling and normalization - Introduced functions to normalize image fills by converting non-PNG/JPEG formats (SVG, WebP, GIF, AVIF) to PNG before import, ensuring all images are properly rendered in Figma. - Updated the UI to report the number of images converted and dropped during the import process, improving user feedback. - Enhanced the overall image processing workflow to prevent silent failures when unsupported formats are encountered. - Revised documentation to reflect the new image handling capabilities and supported formats. * feat(clipper): enhance UI kit and busy state feedback - Updated the UI kit to include new components such as inputs, selection, and overlays, improving the overall design system representation. - Enhanced the busy state feedback during capture processes with localized messages and a step-by-step progress indicator, providing users with clearer status updates. - Revised localization strings to support new UI elements and improve user experience across multiple languages. - Improved documentation to reflect changes in the UI kit and busy state handling. * fix(brands): restore design-systems nav entry + reconcile BrandsTab on re-activation Address review feedback on PR #4260: 1. EntryNavRail dropped the only control that reached view==='design-systems' when Brands replaced it in the rail, leaving the still-rendered/routed design-system manager deep-link only (the entry-nav-design-systems e2e specs assert this). Restore a reachable rail entry (blocks icon, existing navDesignSystems key) alongside Brands. 2. BrandsTab only fetched once on mount, but EntryShell keeps sub-views mounted and toggles visibility, so a brand finishing extraction in its backing project never reconciled until a full reload. Refresh whenever the Brands view becomes active again, and poll while any brand is extracting (torn down once settled / when hidden). Red spec: tests/components/BrandsTab.refresh.test.tsx (fails pre-fix: fetchBrands called once, not twice). * Update clipper/brand-capture.js * fix(clipper): improve busy state handling and UI feedback - Adjusted the spinner CSS to use flex properties for better layout control. - Enhanced the reclampIfMoved function to preserve user position during busy state transitions. - Added loading toast notifications for popup-launched captures to ensure progress visibility even when the on-page bar is hidden. * feat(daemon): add kiwi-schema dependency and enhance Figma API integration - Added kiwi-schema package to the daemon for improved schema handling. - Updated FigmaApiNode interface and related functions to support shared functionality with the offline decoder, ensuring consistency in node processing. - Refactored capture functions in clipper to maintain UI visibility during DOM/IR snapshots, enhancing user experience during capture operations. * fix(web): surface missing backing projects * fix(web): re-enable brand actions after use * fix(daemon): serve brand logos from data roots * fix(brands): reconcile failed extractions * feat(daemon): implement offline Figma import and decoding functionality - Added support for importing `.fig` files directly into the daemon, enabling offline processing without requiring a Figma account. - Introduced a new `fig-decode.ts` module for decoding `.fig` files, handling both ZIP-wrapped and raw formats. - Created `figma-import.ts` to orchestrate the import process, generating a canonical snapshot and associated metadata. - Enhanced the server to handle Figma file uploads and integrate with the new decoding logic. - Updated package dependencies to include `kiwi-schema`, `html2canvas`, and `jspdf` for improved functionality. - Added tests for the new Figma import features to ensure reliability and correctness. * feat(clipper): reload-proof capture progress badge on the extension icon The on-page progress strip dies if a page reloads itself mid-capture (aggressive paywall sites like economist.com do this), leaving no loading signal. Add a per-tab '•••' badge on the extension icon for the lifetime of any capture message — it lives on the action icon, so a page navigation can't take it down. Verified end-to-end via a real loaded extension. * feat(daemon): add export functionality for Figma and enhance PDF export process - Introduced `runFigma` command for importing Figma designs, supporting both local `.fig` files and Figma URLs. - Added detailed usage instructions for the `od figma import` command. - Implemented `runExport` command for programmatic export of HTML/deck artifacts to PDF, PPTX, or image formats. - Enhanced error handling and user feedback during export processes. - Removed obsolete `build-pptx-export-prompt` module and related tests to streamline the codebase. * feat(daemon): enhance library synchronization and export capabilities - Implemented `reconcileLibrary` to mirror design systems and agent-produced project deliverables into the Library as referenced assets. - Added support for programmatic export of artifacts via the `od export` command, including detailed usage instructions. - Introduced new functions for handling Figma imports and exports, improving integration with design workflows. - Enhanced error handling and user feedback during synchronization and export processes. - Added tests for new features to ensure reliability and correctness. * feat(web): PPTX export for any shareable artifact + Library toolbar tooltips * chore(nix): refresh pnpm deps hash * refactor(web): enhance onboarding view and file export progress indicators - Updated the onboarding view layout for improved accessibility and visual hierarchy, including adjustments to spacing, typography, and button styles. - Introduced a loading toast for file export progress, displaying elapsed time and estimated time remaining for slide exports. - Added new translation keys for export progress messages in multiple languages. - Refactored the export progress handling to provide real-time updates during the export process, improving user feedback and experience. * refactor(web): streamline export capture bridge and update connector styles - Removed unused loading logic for html2canvas in the export capture bridge, simplifying the code. - Updated CSS for the onboarding view connector to improve visual clarity and ensure it does not overlap with node numbers. * refactor(web): remove html2canvas dependency and enhance Figma URL handling - Removed the html2canvas package from the project, including its references in the lock file and related components. - Added functionality to manage Figma URLs within the Design System flow, allowing users to add, remove, and validate Figma file links. - Improved drag-and-drop handling to prevent unintended file navigation when dropping files outside designated areas. - Updated UI components to accommodate new Figma URL features, enhancing user experience and accessibility. * refactor(web): unify brand and design system flows - Merged the brand extraction process into the design system creation workflow, allowing users to start from a brand directly within the design system wizard. - Updated routing to redirect legacy brand links to the unified design systems tab. - Enhanced the onboarding experience by removing the separate Brand Kit tab and integrating brand selection into the design system creation process. - Improved UI components to reflect these changes, ensuring a seamless user experience across the application. * feat(web): introduce brand enrichment banner and picker modal - Added a new BrandEnrichmentBanner component to allow users to refine programmatically-extracted design systems with AI by selecting design-system skills. - Implemented a BrandPickerModal for selecting brands from a searchable gallery, enhancing the design system creation flow. - Updated ChatPane to conditionally display the enrichment banner for eligible brand projects, improving user engagement. - Enhanced the design system flow to support the new brand enrichment features, ensuring a seamless experience for users. * feat(web): enhance BrandPickerModal and DesignSystemAssetDropzone - Updated the BrandPickerModal to allow scrolling of the entire picker area, improving user experience by creating a unified scrolling surface. - Added new props to the BrandReferencePicker for action labels and scroll root reference, enhancing flexibility in brand selection. - Introduced a new DesignKitView component for rendering design kits consistently across different surfaces. - Enhanced the DesignSystemAssetDropzone to support a wider variety of file types with appropriate previews, improving asset management during design system creation. - Updated styles for better visual clarity and responsiveness across components. * feat(web): update Design Systems tab actions and enhance localization - Changed the button label in the DesignSystemsTab from "Edit" to "Open" for better clarity in user actions. - Added a new translation key for 'dsManager.openSystem' across multiple languages to support the updated button label. - Enhanced the FileWorkspace component to ensure the Design Files tab aligns correctly with the Design System tab, improving UI consistency. - Implemented a new design system editing feature that allows users to fetch and save design system content from DESIGN.md, enhancing the design workflow. * fix(merge): repair post-merge regressions after origin/main integration Follow-up fixes on top of the origin/main merge (886f925cd) addressing regressions the conflict resolution introduced. main's web suite is the oracle (100% green); resolution principle was main's engine/backend + HEAD's UI, unioned. daemon: - library-sync.ts: correct design-systems import to ./design-systems/index.js (design-systems became a directory module on main). - tests/server-bootstrap-regression: add LIBRARY_DIR to the PathDeps fixture (main-added test x HEAD-added LIBRARY_DIR field). web: - WorkspaceTabsBar: union — restore main's onboarding Search-popover close behaviour + guards, keep HEAD's library/brands nav entries. - HomeView: restore main's composer sending-state (await onSubmit, widen its return type to Promise<boolean>|boolean|void, pass submitting to HomeHero). - MemorySection.test: take main's version to match main's two-loop memory component. - i18n: restore dropped settings.onboardingRoleMarketing key across types.ts and all locales. - App/BrandsTab/EntryNavRail/router/home-intent: union fixes restoring main features dropped during conflict resolution (needs_input handling, etc.). Validation: pnpm guard + full pnpm typecheck (all 23 packages) green. Known-red: EntryShell onboarding step 3 intentionally retains HEAD's "build" step rather than main's brand-extract step; 8 EntryShell.onboarding / App.onboarding-amr-e2e tests stay red pending that onboarding decision. * fix(merge): keep HEAD's unified brand flow (revert main's separate Brands tab) Follow-up to688544ff7. Per the chosen product direction (brand creation unified into the design-system create wizard, not a standalone Brands tab), revert the brand-flow routing/nav that the post-merge repair had restored from main: - router.ts: keep HEAD's brand routing (brands folded into design-systems), drop main's standalone /brands and /brands/:id view routing. - EntryNavRail.tsx: drop main's standalone "Brands" nav button. - runtime/home-intent.ts: drop main's brand "Use in new chat" confirmation notice plumbing (tied to the separate Brands flow). Kept from the repair commit (additive, non-conflicting): App.tsx loadedActiveProject correctness, composer Sending… state, WorkspaceTabsBar onboarding popover behaviour, two-loop memory test, restored i18n keys, brand needs_input STATUS handling, server.ts plugin-route infrastructure. * feat(library-ui): implement conditional rendering based on LIBRARY_UI_VISIBLE - Updated router.ts to conditionally render the library view based on the LIBRARY_UI_VISIBLE flag. - Modified ComposerPlusMenu.tsx, DesignFilesPanel.tsx, and DesignSystemAssetDropzone.tsx to show the "Select from library" button only when LIBRARY_UI_VISIBLE is true. - Adjusted EntryNavRail.tsx and EntryShell.tsx to include the library navigation button and section conditionally based on the LIBRARY_UI_VISIBLE state. - Enhanced HomeHero.tsx to allow starting a blank project directly, improving user experience by providing more options for project creation. This commit introduces a feature toggle for the library UI, allowing for better control over its visibility during development and testing. * feat(home-hero): implement edge auto-scroll for horizontal overflow - Introduced `useEdgeAutoScroll` hook to manage auto-scrolling behavior for horizontally overflowing components in HomeHero. - Updated `PluginPromptPresets` and `RailGroup` components to utilize the new auto-scroll functionality, enhancing accessibility for users without trackpads. - Added `EdgeScrollZones` component to provide interactive edge zones for scrolling. - Enhanced CSS styles to support the new scrolling layout and ensure proper positioning of elements. This commit improves user experience by making overflow content more accessible and easier to navigate. * feat(design-systems): add project creation from design system and enhance UI components - Implemented `handleCreateProjectFromDesignSystem` function in `AppInner` to facilitate project creation directly from a selected design system. - Updated `DesignKitView` to wrap the iframe in a span for better layout control. - Refactored CSS for `BrandPreviewCard` and `DesignSystemsTab` to improve styling and responsiveness. - Introduced a new `TemplatePicker` component in `HomeHero` for selecting project-type templates, enhancing user experience. - Updated various components to support asynchronous handlers for design system actions, improving overall functionality. This commit enhances the design system integration and user interface, making project creation more intuitive and accessible. * feat(brand-routes): enhance brand reservation API and add DESIGN.md support - Updated the POST /api/brands endpoint to accept optional fields: description and designMd, allowing for more flexible brand reservations. - Modified validation to require either a URL or designMd for brand extraction. - Introduced a new design-md-input module to handle parsing and validation of DESIGN.md content. - Enhanced startBrandExtraction function to support processing of DESIGN.md, improving integration with design systems. - Added utility functions for managing DESIGN.md input and output, streamlining the brand creation process. This commit improves the brand extraction workflow by integrating DESIGN.md support, making it easier for users to create and manage brands. * feat(chat-pane, design-kit-view): enhance chat functionality and design preview features - Added `handleNextStepPromptAction` to `ChatPane` for setting draft prompts, improving user interaction. - Introduced `nextStepVariant` to differentiate design system projects in `ChatPane`. - Updated `DesignKitView` to include a button for previewing design kit covers, enhancing user experience. - Implemented a modal for displaying design kit previews, allowing users to view content in a dedicated space. These changes improve the chat interface and design kit interactions, making the application more intuitive and user-friendly. * feat(brand-extraction): enhance DESIGN.md support and testing - Added a new test case to validate brand extraction from DESIGN.md input without requiring a website. - Implemented functionality to register brands directly from DESIGN.md, improving the brand creation workflow. - Updated the `ChatPane` and `NextStepActions` components to handle design system-specific actions for projects, enhancing user experience. - Enhanced localization files with new carousel hints and project brief options across multiple languages. These changes streamline the brand extraction process and improve the overall functionality of the design system integration. * feat(wireframe-examples): add annotated and greybox wireframe examples - Introduced new wireframe examples for annotated and greybox styles, enhancing design system capabilities. - Added HTML and JSON files for both wireframe types, providing templates for low-fidelity design mockups. - Implemented SKILL.md documentation for each wireframe example, detailing usage and design specifications. These additions improve the design toolkit, offering users more options for creating wireframes in various styles. * feat(brand-extraction): refine Chrome fallback and enhance error handling - Updated the Chrome fallback logic in the prefetch pipeline to clarify its purpose and usage as a diagnostic tool. - Introduced environment variable checks to enable or disable system Chrome usage, improving control over the extraction process. - Enhanced error messages in the DesignSystemCreationFlow component to provide clearer guidance on required inputs for creating a design system. - Added regression tests to ensure that prompts do not instruct the agent to invoke a non-existent `brand-extract` skill, preventing potential failures during brand extraction. These changes improve the robustness of the brand extraction process and enhance user experience by providing clearer instructions and error handling. * feat(brand-extraction): enhance DESIGN.md input handling and introduce brand ready prompt - Updated the BrandFromDesignMdInput interface to explicitly define the description property as optional with undefined. - Enhanced the brand extraction prompts to clarify the inline brand-extract workflow, preventing confusion during the extraction process. - Added a new BrandReadyPrompt component to notify users when a design system is ready for preview, improving user experience. - Introduced CSS styles for the BrandReadyPrompt to ensure a visually appealing and user-friendly interface. - Updated localization files to support new strings related to the brand ready prompt across multiple languages. These changes improve the clarity and usability of the brand extraction process, providing users with timely feedback and a more intuitive interface. * feat(brand-extraction): improve design system focus handling and localization updates - Refactored the handling of browser tabs in the brand extraction tests to ensure proper validation of tab states. - Enhanced the AppInner component to refresh design systems alongside templates, ensuring users see the latest updates without page reloads. - Introduced a pending focus state in the DesignSystemsTab to manage design system selection more effectively after brand extraction. - Added a BrandReadyPrompt in the ProjectView to notify users when a design system is ready for preview, improving user engagement. - Updated localization files for Chinese (Simplified and Traditional) to reflect changes in terminology related to design systems. These changes enhance the user experience by providing timely feedback and ensuring that the design system selection process is seamless and intuitive. * fix(styles): adjust letter-spacing and enhance plus-menu trigger styles - Set letter-spacing to 0 in design-system-flow.css for improved text clarity. - Added styles for plus-menu trigger in plus-menu.css, including background, border, and hover effects to enhance user interaction and visual consistency. These changes refine the design aesthetics and improve the usability of the plus-menu component. * feat(tests): add design-system focus handoff tests - Introduced a new test suite for validating the design-system focus handoff functionality. - Implemented tests to ensure that the focus ID is correctly set, read, and cleared from session storage, preventing user selection hijacking. - Added checks for scenarios where no focus ID is pending, enhancing test coverage for the design system's behavior. These tests ensure the reliability of the design-system focus handling, contributing to a more robust user experience. * feat(export): restrict image format options to PNG and JPEG - Updated the image format options in the export functionality to only allow PNG and JPEG, removing WebP to prevent silent downgrades. - Enhanced error handling to provide clear feedback when an unsupported image format is specified. - Adjusted related documentation and comments to reflect the changes in supported formats across the application. These changes ensure consistency in image export behavior and improve user experience by providing immediate validation errors for unsupported formats. * feat(origin-validation): implement zero-config OD Clipper bypass for library requests - Added a new function `isZeroConfigClipperLibraryRequest` to validate requests from locally-installed browser extensions targeting the `/library/` path. - Updated the origin validation middleware to utilize this function, allowing unpaired browser extensions to access the `/api/library/ingest` endpoint while blocking other cross-origin requests. - Enhanced tests to cover the new bypass functionality, ensuring correct behavior for both valid and invalid origins. These changes improve the integration of browser extensions with the local daemon, enhancing user experience while maintaining security. * feat(design-systems): add download functionality for design systems - Implemented a new command `od design-systems download <id>` to allow users to download design systems as a .zip file, including all system files and a generated SKILLS.md usage guide. - Updated the CLI help documentation to include usage instructions for the new download command. - Enhanced the design systems API to support the download feature, ensuring only user design systems are accessible while handling errors for non-existent presets. - Added localization strings for the new download functionality across multiple languages. These changes enhance the usability of design systems by providing a straightforward method for users to obtain and share their design assets. * feat(design-systems): enhance design system management and localization - Introduced new UI components and styles for managing design systems, including buttons for downloading, refreshing, and resetting edits. - Updated the DesignKitView to support direct actions for DESIGN.md editing, improving user interaction with design systems. - Enhanced the DesignSystemDetail component to include download functionality and improved state management for design system edits. - Added localization strings for new features, ensuring consistent user experience across multiple languages. - Improved error handling and user feedback for design system operations, including download failures. These changes streamline the design system management process, making it more intuitive and user-friendly while ensuring robust localization support. * feat(tests): add comprehensive tests for design system archive functionality - Introduced a new test suite for validating the `buildUserDesignSystemArchive` and `buildDesignSystemSkillsMarkdown` functions. - Implemented tests to ensure correct packing of design system files, including the generation of a `SKILLS.md` guide and exclusion of internal metadata. - Added checks for handling non-user IDs and scenarios where a design system already includes its own `SKILLS.md`. - Enhanced the overall test coverage for design system functionalities, ensuring reliability and correctness in the design system archive process. These changes improve the robustness of the design system features by ensuring thorough testing of critical functionalities. * feat(figma-import): enhance CLI output and add Figma import endpoint - Updated the CLI to conditionally log detailed import information based on the `--json` flag, improving usability for users who prefer JSON output. - Introduced a new API endpoint for importing Figma files, handling file uploads and validating project existence, with appropriate error responses for missing files or invalid URLs. - Added a dedicated route for the Figma import functionality, ensuring seamless integration with existing project workflows. These changes improve the Figma import experience by providing clearer output options and robust error handling, enhancing overall user interaction with the CLI and API. * feat(design-files): enhance DesignFilesPanel with new actions and styles - Added new action buttons for opening a browser and creating a design system in the DesignFilesPanel, improving user interaction in the empty state. - Updated styles for action buttons to enhance visual distinction and usability. - Enhanced tests to verify the functionality of new actions in the DesignFilesPanel, ensuring they trigger correctly. These changes improve the user experience by providing additional functionality and clearer visual cues in the design files interface. * fix(ci): restore new project modal flow * fix(ci): align design kit and onboarding checks * fix(ci): sync bake preview workflow action * fix(ci): include plugin preview helper scripts * fix(review): harden brand source and preview flows * fix(ci): stabilize web workspace tests * fix(review): address latest blocking feedback * chore(ci): retrigger validation after label update * chore: re-trigger CI on updated main — needs-validation gate moved to merge_group (#4714) * refactor(lightbox): implement portal for overlays to resolve z-index issues - Updated the lightbox component to use React's createPortal for rendering overlays directly to the <body>, ensuring proper z-index stacking. - Removed session mode toggle from HomeHero and adjusted related styles and tests accordingly. - Cleaned up CSS by removing unused styles related to session mode toggle. - Updated tests to reflect changes in the HomeHero component and its interaction with the design router. * style(home-hero): remove focus halo from template search input - Updated CSS to eliminate the global input focus outline and box-shadow for the template search field in the HomeHero component. - Added a test to verify that the template picker search field maintains a clean appearance when focused. * feat(design-system): add create design CTA and enhance design kit functionality - Introduced a new `DesignSystemCreateCta` component to facilitate creating new designs from an active design system, enhancing user experience in the chat interface. - Updated `ChatPane` to include the new CTA, allowing users to create designs directly from the chat. - Enhanced `DesignKitView` with sticky header functionality for better accessibility while scrolling. - Added new CSS styles for the `DesignSystemCreateCta` component to ensure a visually appealing and consistent design. - Updated internationalization files to include new strings for the design system creation feature. * feat(upload): enhance file upload handling and error recovery - Introduced `sanitizePath` to preserve directory structures during file uploads, preventing issues with subdirectory paths. - Updated `DesignKitView` and related components to utilize the new `sanitizePath` function for improved file name resolution. - Added `KitErrorBoundary` component to gracefully handle rendering errors in the design kit, providing a user-friendly fallback. - Implemented internationalization updates for new error messages and action confirmations related to uploads and error handling. - Enhanced CSS styles for better visual feedback during error states and improved user experience. * feat(design-kit): add keyboard shortcuts hint and enhance key handling - Introduced a new keyboard shortcuts hint in the DesignKitView, providing users with quick access to essential actions (E edit, C copy, U upload, R refresh, ⌫ delete logo). - Implemented a keydown event handler to manage keyboard shortcuts contextually within the design kit, improving user interaction and accessibility. - Updated CSS for the shortcuts hint to ensure it remains low-contrast until hovered, enhancing the UI experience. - Added internationalization support for new shortcut labels and hints across multiple languages. - Adjusted DesignSystemsTab to prefer user logos for their systems, improving visual consistency. * feat(design-system): introduce DesignSystemExtractionPanel and enhance design system interactions - Added the `DesignSystemExtractionPanel` component to facilitate user interactions during design system extraction, providing a synthesized conversation view and next steps. - Updated `ChatPane` to render the new extraction panel when a design system is active, enhancing user guidance. - Introduced a new utility function `designSystemExtractionSource` to derive human-readable labels for design system sources. - Enhanced internationalization support with new strings for extraction-related actions and prompts across multiple languages. - Updated various components and tests to reflect changes in terminology and functionality, improving overall user experience. * feat(project): add project deletion functionality and enhance design system interactions - Introduced `onDeleteProject` prop in `ProjectView` to handle project deletion, improving project management capabilities. - Updated `AppInner` to include the new delete project handler, enhancing user experience in project interactions. - Enhanced `DesignKitView` and `DesignSystemsTab` with loading states and improved visual feedback during design system resolution. - Removed deprecated `DesignSystemCreateCta` component and associated styles, streamlining the codebase. - Updated internationalization files to reflect changes in project management terminology and actions. * feat(design-kit): enhance internationalization and user feedback in DesignKitView - Updated various labels and error messages in the DesignKitView to utilize internationalization functions, improving accessibility and user experience. - Enhanced color input validation messages and added confirmation prompts for design system deletions in DesignSystemsTab and FileWorkspace. - Introduced new props for handling design system project deletions, streamlining project management. - Updated internationalization files to reflect new strings and translations for improved user guidance across multiple languages. * refactor(design-kit): remove keyboard shortcuts hint and streamline header menu - Eliminated the keyboard shortcuts hint from the DesignKitView, simplifying the header menu. - Updated the sticky-header overflow menu to exclude upload, full-system preview, and shortcut help actions, focusing on essential project operations. - Adjusted related tests to reflect the removal of the shortcuts hint and ensure accurate menu item visibility. * feat(brand-routes): add extract-from-html endpoint for brand extraction - Introduced a new POST endpoint `/api/brands/:id/extract-from-html` to re-run brand extraction using HTML rendered from the in-app browser after clearing anti-bot walls. - Implemented error handling for missing HTML and brand not found scenarios. - Enhanced the `extractBrandFromHtml` function to process the provided HTML and optional CSS, integrating it into the existing brand extraction workflow. - Updated `prefetch` functionality to support extraction from pre-rendered HTML, improving the overall brand data retrieval process. * chore(nix): refresh pnpm deps hash * feat(brand-cli): add extract-from-html command for brand extraction - Introduced a new CLI command `od brand extract-from-html` to facilitate brand extraction from pre-captured rendered HTML, allowing users to bypass anti-bot walls. - Enhanced the command to accept optional CSS and base URL parameters, improving flexibility in extraction scenarios. - Implemented error handling for missing HTML input and invalid brand IDs, ensuring robust user feedback. - Updated the `BRAND_USAGE` documentation to reflect the new command and its usage details. - Adjusted server configuration to accommodate larger payloads for the new extraction endpoint. * feat(design-system): enhance design system extraction and browser tools - Added a new script to collect CSS styles from rendered pages, improving brand extraction capabilities by capturing computed styles from cross-origin stylesheets. - Removed the `DesignSystemExtractionPanel` component and its associated styles, streamlining the codebase. - Updated `ProjectView` and `FileWorkspace` components to enhance design system interactions and improve user experience. - Introduced new internationalization strings for design system phases and actions, ensuring better user guidance across multiple languages. * feat(brand-assist): implement browser assist for brand extraction - Added support for a client-side confirmation mechanism for the brand-browser-assist od-card, allowing users to extract brand information from the unblocked browser DOM. - Enhanced the `ProjectView`, `ChatPane`, and `AssistantMessage` components to handle the new assist functionality, improving user interaction during brand extraction. - Introduced new internationalization strings for browser assist prompts and messages, ensuring clarity and guidance across multiple languages. - Updated the `useBrandReadyPrompt` hook to manage the state of the browser assist, providing a seamless user experience when dealing with anti-bot walls. * feat(brand-prompt): enhance BrandReadyPrompt with refinement options - Updated the BrandReadyPrompt component to include options for AI optimization and manual editing, allowing users to refine extracted brand systems. - Added a new refinement nudge to inform users that automatic extraction may miss details, improving user guidance. - Adjusted styles for the prompt and dismiss button for better alignment and visual consistency. - Introduced new internationalization strings for the refinement features, ensuring clarity across multiple languages. - Removed deprecated PPTX export functionality from the FileViewer component, streamlining the export options. * refactor(export): remove PPTX export functionality and streamline export options - Eliminated PPTX export support across various components, including CLI, desktop, and web, to simplify export formats. - Updated documentation and help messages to reflect the removal of PPTX, ensuring clarity for users. - Adjusted export-related types and constants to focus on PDF and image formats only, enhancing code maintainability. - Improved user experience by refining export options and related UI elements. * refactor(export): remove PPTX references and update export functionality - Removed all instances of PPTX export functionality from the codebase, including related dependencies and comments. - Updated export options to focus solely on PDF and image formats, enhancing clarity and maintainability. - Adjusted UI components and tests to reflect the removal of PPTX, ensuring a streamlined user experience. - Improved internationalization strings and documentation to align with the new export capabilities. * chore(nix): refresh pnpm deps hash * fix(onboarding): preserve selected runtime * fix(brand): localize generated kit copy * fix(onboarding): align first-run flow with main * fix(nav): use palette icon for design systems * fix(analytics): use design system onboarding step * fix(ui): remove design system guide toggle * fix(ui): position design system ready prompt * fix(ui): space plugin task notice * fix(web): restore home ask mode and design kit preview * test(e2e): align onboarding visual capture * test(e2e): align amr onboarding checks * fix(brand): remove blocked reference brands * feat(onboarding): show profile choices as chips * fix(home): prefer design system cover art in recents * test(e2e): select onboarding profile chips * feat(brand-extraction): implement programmatic extraction transcript and UI enhancements for design systems * feat(brand-extraction): enhance programmatic extraction with transcript agent support and UI improvements * feat(brand-extraction): add transcript agent resolution and improve message handling in brand extraction * fix(design-systems): stabilize loading state coverage * test(e2e): align design system detail visual * fix(brand-extraction): backfill programmatic transcripts * fix(web): refresh ready brand design systems * fix(brands): stabilize extraction handoff and seed colors * fix(brands): return extraction transcript immediately * fix(web): open new project modal from entry rail * fix(editing): expose content edits for plain targets * feat(file-viewer): implement manual edit draft dirty state tracking and reset logic * feat(design-system): enhance project creation flow with conversation ID handling * feat(brands): implement light theme handling for color extraction and seed generation * feat(brands): add finalizeBrandProject function for brand project completion * feat(file-workspace): add designSystemBrandId prop and update DesignSystemProjectPanel to use it * Fix manual editing for brand kits * fix(design-system): wait for project refreshes * fix(web): open new project modal from rail * fix(web): restore home ask mode toggle * fix(web): sync brand color edits with seeds * fix(web): stabilize design system workspace tests * test(tools-pack): relax Windows resource cache timeout * chore(pr): retrigger review after validation * fix(web): surface design kit action progress * fix(web): clarify brand next-step actions * fix(web): cancel programmatic brand extraction * fix(web): add design systems tab action feedback --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: xne998808-ai <xne998808@gmail.com> Co-authored-by: PerishCode <perishcode@gmail.com> Co-authored-by: open-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com> Co-authored-by: lefarcen <935902669@qq.com> Co-authored-by: Siri-Ray <2667192167@qq.com>
24 KiB
24 KiB
name, overview, todos, isProject
| name | overview | todos | isProject | |||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| OD Library and Clipper | 为 Open Design 新增一个全局资源库（OD Library，全系统统一资产登记中心）与 Chrome MV3 浏览器采集插件（OD Clipper）。资源库记录所有来源的资产（插件采集 / 手动上传 / Agent 任务上传或生成 / 设计系统提取），每条资产带来源标识与回链（可跳回对应 Agent 任务或设计系统），打通「采集/入库 → 可视化标记 → 语义检索 → 一键应用到设计稿 → 沉淀设计系统 → 一键产出 PPT/落地页/海报等材料」的持续积累闭环，遵循 HTTP + CLI + Web UI 三轨闭环与 daemon 数据目录契约。 |
|
false |
OD Library + OD Clipper Spec
一个持续积累的设计资源库（全局、跨项目）+ Chrome 采集插件。决策已定：Chrome MV3 优先、插件直连 daemon + 配对 token、BYOK provider 做 embedding + SQLite 存向量、完整 spec 分阶段落地。
1. 为什么 / 用户能看到什么
- 资源库是全系统统一的资产登记中心：不只是插件采集，凡是进入系统的资源都自动入库——插件采集、手动上传、Agent 任务里上传或生成的图片、设计系统提取时上传的素材，全部出现在同一个资源库。
- 每条资产带来源标识（clipper 采集 / 手动上传 / agent 任务 / 设计系统 / AI 生成）与回链：点一条资产能跳回它来源的 Agent 任务会话或设计系统；当天上传/采集形成每日归档记录。
- 用户装上 OD Clipper 后，在任意网页一键识别并高亮图片/配色/字体/区块，选中即采集入库。
- 入库时自动做可视化标记（调色板、caption、OCR、标签），之后用自然语言语义搜索；搜索结果可一键应用到设计稿，也可在任意 Agent 任务和设计系统里反向引用。
- 资源库形成每日归档（日报流），可对当天内容问答；可一键提炼设计系统，再一键产出 PPT/落地页/表单/Poster/Newsletter/Email。
- 终态形态 = Brand Kit（品牌套件）：把一个品牌/网页抽取并聚合成结构化套件——IDENTITY / LOGO / TYPOGRAPHY / PALETTE / VOICE & TONE / IMAGERY & LAYOUT / IMAGES / 设计系统（组件 kit + tokens）/ BRAND ASSETS（Landing page、Pitch deck、Poster、Email、Newsletter、Form page）。抽取方式三选一/组合：程序化自动识别、AI 增强、用户手动选元素或整页 capture（见 §10）。
2. 核心架构决策
- 统一资产登记中心：资源库是所有资产的索引层。任何现有入库点（project 上传、project 文件写入、media 生成完成、设计系统素材 staging、clipper）都通过一个集中函数
registerLibraryAsset(...)登记到library_assets。这是「记录所有内容」的核心机制。 - 双存储模型：
- owned（自有副本）：clipper 采集、
od library import等独立来源 → 存进LIBRARY_DIR，内容寻址（按 hash）。 - referenced（索引引用）：已存在于某 project / 设计系统目录内的文件（agent 上传/生成、DS 素材）→ 资源库只存指针（
origin_project_id+ 相对路径）+ 元信息 + embedding，不复制字节，避免重复占用。
- owned（自有副本）：clipper 采集、
- 去重与多来源：按
content_hash去重为一条逻辑资产；同一资产可有多条来源记录（library_asset_sources），所以「一张图在两个任务里都用过」会合并为一条资产 + 两条来源回链。 - 全局资源库目录：
LIBRARY_DIR = path.join(RUNTIME_DATA_DIR, 'library')，符合AGENTS.md数据目录契约（派生自RUNTIME_DATA_DIR）。 - 数据模型：新增 SQLite 表（
apps/daemon/src/db.ts），不复用media_tasks。 - AI 可选、程序化入库优先：富化分两层——
- 程序化层（无需 AI，永远可用）：尺寸/mime/hash、主色与调色板提取、字体栈、EXIF、来源 URL/标题/域名、纯文本/HTML 文本抽取、文件名/页面标题派生标签。仅靠这层即可入库、去重、按标签/文本/来源/日期检索。
- AI 增强层（配了模型才启用）：vision caption、OCR、embedding 语义向量。
- AI 模型配置：复用
media-config.json的 BYOK provider（OpenAI/AIHubMix），在 Settings 暴露 library 专用的 caption/OCR/embedding 模型选择（缺省继承 media providers）。未配置时这三项自动跳过，不报错。 - 语义检索：embedding 走上面 BYOK provider 的
/embeddings，向量存 SQLite BLOB（float32）。MVP 用暴力余弦 topK；规模大再切sqlite-vec。无 embedding 时降级为关键词/标签/元信息检索，UI 提示去 Settings 配置可解锁语义搜索。 - 插件鉴权：配对码换长期
od_library_token；把chrome-extension://<id>注入持久化 origin allowlist（扩展origin-validation.ts的extraAllowedOrigins来源为「app-config 持久化 + OD_ALLOWED_ORIGINS」）；采集端点用新的 library-token authorizer（仿authorizeToolRequest）。 - 三轨闭环：每个能力同时落 HTTP（
apps/daemon/src/routes/library.ts）+ CLI（od library …）+ Web UI（新 Library tab），DTO 先进packages/contracts/src/api/library.ts。
3. 数据模型（apps/daemon/src/db.ts）
library_assets：id, kind('image'|'color'|'font'|'html'|'text'|'url'|'video'), storage('owned'|'referenced'), source_url, source_title, source_domain, captured_at, archived_date('YYYY-MM-DD'), file_path(owned 时指 LIBRARY_DIR), origin_project_id(referenced 时指 project 内相对路径配合 file_path), mime, width, height, size, content_hash, caption, ocr_text, palette_json, tags_json, metadata_json。索引：archived_date、content_hash(去重)、kind、source_domain、origin_project_id。library_asset_sources（来源/回链，1 资产:多来源）：asset_id(FK), source_kind('clipper'|'manual-upload'|'agent-task'|'design-system'|'generated'), project_id, conversation_id, run_id, design_system_id, rel_path, created_at。驱动「跳回对应 Agent 任务/设计系统」与「当日上传记录」。library_embeddings：asset_id(FK), model, dim, vector(BLOB), indexed_text, created_at。library_tasks：入库后异步富化任务，分阶段且每阶段独立成功/跳过——程序化阶段（下载/规范化 → 调色板/尺寸/文本 → 标签）始终执行；AI 阶段（caption/OCR/embedding）仅在模型已配置时执行，否则标记skipped。仿media-tasks.ts内存 Map + SQLite 双写 +/wait长轮询。library_tokens：token_hash, label, extension_origin, created_at, last_used_at。library_digests：date, project_id, artifact_path, summary—— 每日归档 digest 产物。
3b. 统一入库钩子（registerLibraryAsset）
集中索引函数 registerLibraryAsset({ kind, bytesOrPath, storage, source })，幂等（按 content_hash 合并，追加 library_asset_sources），由以下现有入库点调用：
project-routes.ts的POST /api/projects/:id/upload与POST /api/projects/:id/files（手动/agent 上传）→ sourcemanual-upload或agent-task（按是否带 run/conversation 上下文判定），storage: referenced。media.tsgenerateMedia()完成回调 → sourcegenerated，storage: referenced。- 设计系统创建 staging（
stageAssetFiles/prepareCreatedDesignSystemProject）→ sourcedesign-system，带design_system_id，storage: referenced。 POST /api/library/ingest（clipper /od library import）→ sourceclipper/manual-upload，storage: owned。
钩子失败不得阻断主流程（best-effort 索引 + 日志）；富化任务异步补齐元信息与 embedding。
4. HTTP API（apps/daemon/src/routes/library.ts → registerLibraryRoutes）
入库/管理：
POST /api/library/pair（loopback-onlyrequireLocalDaemonRequest，OD UI 触发，返回配对码）POST /api/library/pair/confirm（插件用配对码换od_library_token，同时登记 extension origin 进 allowlist）POST /api/library/ingest（library-token 鉴权；JSON + multipart；返回assetId+ 富化taskId）POST /api/library/capture/page（整页/区块快照 → 新建 project 的可编辑 HTML artifact，资源同步入库；返回projectId）POST /api/library/capture/compose（采集篮多元素/资源 → 合成一个 OD 网页 project，按标签组织；返回projectId）GET /api/library/assets（filter：kind/tag/domain/date/q/source/projectId/designSystemId）、GET/DELETE /api/library/assets/:id（详情含sources[]回链）、GET /api/library/assets/:id/rawPOST /api/library/tasks/:id/wait（长轮询富化进度）
检索/应用：
POST /api/library/search（query → embed → 余弦 topK；支持 kind/date 过滤）POST /api/library/assets/:id/apply（拷贝资源进目标 project，返回相对路径，供原型/编辑器插入）
归档/流：
GET /api/library/archive?date=YYYY-MM-DD（当天资源流）POST /api/library/archive/:date/digest（生成日报 digest，走 agent）GET /api/library/events（SSE，实时入库/富化进度，复用createSseResponse）
Brand Kit（详见 §10）：
POST /api/library/brand-kits（从 url 或 capture 快照抽取）、GET /api/library/brand-kits、GET/PATCH/DELETE /api/library/brand-kits/:id
Agent 工具轨（tool-token，供 chat 内 agent 调用，实现「平台连通」）：
POST /api/tools/library/search、POST /api/tools/library/apply（仿/api/tools/media/generate的authorizeToolRequest）
5. Contracts（packages/contracts/src/api/library.ts）
LibraryAsset（含 storage 与 sources[]）、LibraryAssetKind、LibraryAssetSource + LibrarySourceKind、LibraryIngestRequest/Response、LibrarySearchRequest/Response、LibraryArchiveResponse、LibraryPairingStart/Confirm、LibraryTask、LibraryDigest。先行定义，daemon 与 web 共享。
6. CLI（apps/daemon/src/cli.ts，注册进 SUBCOMMAND_MAP）
od library list|get|rm、od library import <file|url>、od library ingest --json --prompt-file -od library search "<query>" [--json]、od library apply <assetId> --project <id>od library archive [--date]、od library pair（打印配对状态/码）、od library reindex [--assetId|--all]（AI 模型配齐后补跑 caption/OCR/embedding）od brand-kit extract <url>、od brand-kit list|get|rm、od brand-kit asset <id> --template <landing|deck|poster|email|newsletter|form>（一键产出 brand asset）- 全部支持
--json/--daemon-url，长文走--prompt-file（复用readPromptFromFlags）。
7. Web UI（apps/web/src/）
- Library tab（Home 视图新增，和 Projects/Design Systems 并列）：资源网格 + 过滤（kind/来源/项目/设计系统/日期）+ 顶部语义搜索框 + 每日归档时间线/日报流 + 问答入口。每张资产卡显示来源徽标（clipper/手动/agent/设计系统/生成）；详情面板列出
sources[]并提供「跳回 Agent 任务会话 / 跳到设计系统」深链。 - Settings → Library：library 专用 AI 模型选择（caption/OCR/embedding，缺省继承 media providers）+ 「未配置 → 仅程序化入库/基础检索」状态提示 + 一键 reindex。
- Settings → Browser Extension：配对流程、token 管理、连接状态（仿
DesignSystemsSection结构）。 - 原型增强 "Insert from Library"：在
FileViewer.tsx的 srcDoc bridge（file-viewer-render-mode.ts）新增图片插入桥；语义搜索选图 →apply拷进 project → 更新<img src>。 - 设计系统创建引用资源库：扩展
DesignSystemFlow.tsx的SetupState，加 "From Library" 选择器，选中资源走现有stageAssetFiles入 projectcontext/，再由 agent 提炼。 - 每日归档/内容流 + 问答：归档流视图，按天分组；对某天资源用语义检索拼上下文做 Q&A（复用 chat run）。
8. Agent / 平台连通 + 一键产材料
- 新增 functional skill（
skills/library-curator/SKILL.md，od.mode: utility）让 agent 在任务中检索/应用资源库；并在 system prompt 注明 library 工具可用。 - 每日归档 digest = 一条
RoutineService定时 routine（仿 Orbit），每天汇总当天资源成 Live Artifact 日报。 - 「一键输出材料」：资源库 → 生成设计系统（复用现有 DS 创建链）→ 用现有
design-templates/（deck/landing/poster…）+ 该设计系统创建 project。Phase 6 只做「一键」按钮接线，渲染能力已存在。
9. 浏览器插件 OD Clipper（新目录 clipper/，Chrome MV3）
对标 Figma Chrome 扩展（截图参考：Capture page / Select an element / Copy all + 打标签）。页面内浮动工具条提供三个采集模式 + 两个「立马有价值」的转化出口。
- MV3：
background（service worker，持 token、调 daemon API）、content script（注入浮动工具条、识别/高亮元素、序列化 DOM/CSS/资源）、popup（配对、最近采集、采集篮、设置 daemon URL）。 - 连接：popup 输入配对码 → 换 token；之后直连
127.0.0.1:7456。daemon 侧 origin allowlist 放行该扩展。 - 注：插件代码作为独立子项目（非 pnpm workspace app），不污染 daemon/web 边界；构建产物不入 git。
9.1 采集模式（工具条）
- Capture page（整页）：序列化当前页面 DOM + 内联/外链 CSS + 字体 + 图片/SVG（内联或内容寻址），打包成自包含快照。
- Select an element（选元素）：hover 高亮、点选某个区块，仅采集该子树 + 其样式与资源。
- Multi-select / Copy all（批量篮）：跨页持续把多个 element/asset 加入「采集篮」，每个可打标签（仿 Figma 的 "Pick some tags"），最后一键
Copy all批量入库 + 转化。
9.2 高价值转化出口（采集后一键转成 OD）
- 出口 A：整页/区块 → 可编辑的 OD 页面：采集的快照经
POST /api/library/capture/page落地为一个新 project 的 HTML artifact（可编辑原型），自动 open 进编辑器；页面里的图片/字体等资源同步registerLibraryAsset（sourceclipper）。用户/agent 可立即在上面增改（复用现有 HTML artifact 编辑 + srcDoc 桥 + agent surgical edit）。这是「把我喜欢的页面一键变成 OD 界面，并在上面快速编辑」。 - 出口 B：批量 element/asset → 合成一个 OD 网页：采集篮里的多个元素/资源经
POST /api/library/capture/compose生成一个新 OD 网页 project——把选中的 block/图片按标签组织成一张可编辑画布/落地页骨架，资源全部入库并带回链。这是「批量采集多个 asset/element → 转成 OD 网页」。
9.3 落地复用
- 两个出口都落到现有「project + HTML artifact + 编辑器」体系，不新造编辑器；clipper 只负责采集与规范化，转化在 daemon 侧完成。
- 整页快照规范化（内联资源、去脚本、保留结构与样式）放 daemon 的 capture 处理器（可后续接入 agent 做语义化清洗/重排）。
10. Brand Kit（品牌套件）— 统一抽取与聚合
Brand Kit 是资源库 + 设计系统 + 生成材料的统一聚合实体与 UI 终态（见截图：左侧按品牌/域名列出，右侧分区展示）。一个 Brand Kit 绑定一个来源品牌（域名/URL 或手动），聚合：抽取出的品牌属性 + 关联的 library 资产（logo 变体、images）+ 由此生成的设计系统（DESIGN.md/tokens）+ 一键产出的 brand assets。
10.1 实现取向：复用设计系统，叠加品牌层
- Brand Kit 不另起一套设计系统引擎：底层视觉规则仍落在现有
design-systems（DESIGN.md的章节已覆盖 palette/typography/voice/imagery），Brand Kit 在其上叠加brand profile（结构化抽取字段）+ library 资产关联 + 生成材料索引。 - 新增
brand_kits表（或扩展 user design systemmetadata.json）：id, name, source_domain, source_url, design_system_id, profile_json, created_at。profile_json存结构化抽取结果（identity/logo 变体/typography/palette 角色/voice tags + use·avoid/imagery rules/layout posture）。 - 关联资产经
library_asset_sources（sourcedesign-system或新brand-kit）回链到该 Brand Kit。
10.2 三种抽取方式（对应「程序化 / AI / 手动」）
- 程序化自动识别（无需 AI，永远可用）：从 DOM/CSS/meta 直接抽取——
- PALETTE：computed colors 频次聚类 + CSS 变量 + 主色。
- TYPOGRAPHY：
font-family栈、@font-face、display/body/mono 分层。 - LOGO：
favicon/apple-touch-icon/og:image/ header 内 svg·img 启发式，多变体收集。 - LAYOUT posture：
border-radius、间距、max-width、栅格。 - IDENTITY/meta：
<title>、meta description、og:*、域名。 - IMAGES：页面
img/og:image收集入库。
- AI 增强（配了模型才启用）：identity 文案、voice & tone 标签 + use·avoid、imagery & layout 规则、palette 角色命名与取舍、语义分组。未配置则这些字段留空/可手填，不阻断。
- 手动选择 / 整页 capture（用户驱动）：用户可在 clipper 里手动选元素或
Capture page，也可在 Brand Kit 编辑界面挑选/增删抽取结果里要保留要用的项（哪些 logo 变体、哪些色、哪些字体、哪些图）。「程序化先识别候选 → 用户确认采用」是默认交互。
10.3 入口与产出
- 抽取入口：
POST /api/library/brand-kits（body：{ url }或 capture 快照引用）→ 跑程序化抽取（+ 可选 AI）→ 生成 brand profile + 关联资产 + 草稿设计系统。对应 CLIod brand-kit extract <url>、Web「New Brand Kit」。 - 管理：
GET /api/library/brand-kits、GET/PATCH/DELETE /api/library/brand-kits/:id（PATCH 用于手动增删采用项）。 - 产出 brand assets：Brand Kit 详情页「BRAND ASSETS」区的 Landing/Pitch deck/Poster/Email/Newsletter/Form 按钮 = 用该 Brand Kit 的设计系统 + 现有
design-templates/一键创建 project（即 §8 的一键产材料，归到 Brand Kit 出口）。 - Web UI：新增 Brand Kit tab（左栏品牌列表 + New Brand Kit；右栏分区：IDENTITY/LOGO/TYPOGRAPHY/PALETTE/VOICE & TONE/IMAGERY/IMAGES/DESIGN SYSTEM 预览/BRAND ASSETS），对齐截图。
11. 关键风险 / 约束
- 跨域：必须把 extension origin 纳入 allowlist；否则被
/apiOrigin 中间件 403。配对流程负责登记。 - 数据契约：所有路径派生自
RUNTIME_DATA_DIR，新增表/目录不得引入 cwd 相对回退。 - AI 缺失降级：程序化入库与基础检索不依赖任何 AI；未配置 caption/OCR/embedding 模型时这些阶段标记 skipped，语义搜索降级为标签/文本/元信息检索，UI 提示去 Settings 配置可解锁。配置补齐后可对历史资产重跑 AI 富化（
od library reindex/ 后台补齐）。 - 测试位置：daemon 测试入
apps/daemon/tests/，web 入apps/web/tests/，跨边界一致性入e2e/tests/，不放src/。
12. 分阶段路线（每阶段三轨闭环 + 测试）
- Phase 0 地基：contracts + db 表（含
library_asset_sources）+LIBRARY_DIR+registerLibraryAsset集中钩子 + 富化任务骨架。 - Phase 1 采集→入库→语义搜索 + 统一入库钩子接入所有现有入库点（project 上传/文件写入、media 生成、DS staging），来源标识与回链落库（HTTP+CLI+Library tab，先用本地 import/CLI/已有上传验证，不依赖插件）。
- Phase 2 OD Clipper（Chrome MV3）+ 配对鉴权 + origin allowlist；含工具条三模式（Capture page / Select element / 批量篮+标签）与两个高价值出口（整页→可编辑 OD 页面、批量元素→合成 OD 网页）。
- Phase 3 原型增强（Insert from Library）+ apply-to-design + agent tool 端点。
- Phase 4 Brand Kit 抽取 + 设计系统：程序化抽取（palette/typography/logo/layout/identity/images）+ 可选 AI 增强 + 手动采用选择；从 Brand Kit/资源库选材生成设计系统。
POST /api/library/brand-kits+od brand-kit extract+ Brand Kit tab。 - Phase 5 每日归档流 + 日报 digest routine + 问答。
- Phase 6 Brand Kit → 一键产出 brand assets（Landing/Pitch deck/Poster/Email/Newsletter/Form）按钮接线（用 Brand Kit 设计系统 + 现有 design-templates）。