> For the complete documentation index, see [llms.txt](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/prd/prd_ux.md). # Trend Finder - UX Requirements Document **Companion to**: [PRD.md](/ai-os-and-trend-finder-docs/docs/prd.md) **Created**: 2026-05-13 *** ## 1. Design Brief ### Emotional Targets Calm urgency, evidence-backed confidence, and sharp discovery. Trend Finder should feel like a creator intelligence desk inside AI OS: fast enough for a founder or creator checking it before publishing, rigorous enough that every recommendation has visible evidence, and opinionated enough to make early signals feel actionable rather than vague. ### Aesthetic Identity * **Reference domain**: Financial market terminal plus investigative newsroom assignment desk plus scientific signal lab. * **Era / movement**: Swiss International data graphics with contemporary AI operator-console polish. * **Material metaphor**: Matte black instrument panel with luminous signal traces, clipped evidence cards, and calibrated status lights. The current project already leans toward a dark, data-dense operator console. Trend Finder should keep that useful density while establishing a clear module identity for public trend intelligence. ### Signature Moment The signature moment is the "Signal Radar" in the first viewport: ranked trend cards animate from raw source pulses into scored opportunities. Selecting a trend opens an evidence side drawer where source chips, score factors, and creator angles align around the same topic. The user should be able to screenshot one selected trend and understand what is moving, why it matters, and what to create next. ### Micro-Narrative Arrival -> enter Trend Finder from the AI OS host cockpit. Orientation -> "What is moving right now?" with ranked trends, hidden gems, source health, and last refresh timestamp. Engagement -> inspect one trend, filter by source, compare score factors. Action -> save to watchlist, copy creator angle, export/share the report. Resolution -> clear next move: publish, test, monitor, or ignore. *** ## 2. Existing Frontend Study ### Current Product Reality The repository is the AI OS host cockpit built on an imported Claude OS dashboard foundation. The implemented UI includes local AI operator areas for home, skills, memory, activity, workspaces, setup, share, settings, and local-agent pages. The clarified vision is platform consolidation around AI OS while preserving useful inherited local-operator surfaces. Trend Finder should own the public trend-intelligence extension language, routes, data model, copy, navigation grouping, and Brief/export flow without erasing host cockpit areas casually. Current stack: * React 19 with TanStack Router and TanStack Start. * Vite 8 with local middleware for runtime JSON data. * Tailwind CSS 4 using semantic CSS custom properties in `src/styles.css`. * Radix UI wrappers in `src/components/ui/`. * React Query through `useLiveData()` for `src/data/live-data.json`. * Recharts, Three.js, react-force-graph-3d, lucide-react, sonner, and canvas-confetti. ### Existing Visual System * Permanent dark shell in `src/routes/__root.tsx`; `html` receives `className="dark"`. * Layout: fixed desktop sidebar, sticky 56px top header, padded dashboard canvas, max content width around 1400px. * Color base: near-black background, dark slate cards, subtle borders, muted gray text, luminous accents. * Main accent language: orange for Claude/setup identity, emerald for positive signal and memory, violet/blue/pink for secondary data layers, amber/red for warnings. * Card language: 8px to 16px radii, thin borders, radial accent washes, hover lift, compact uppercase metadata, tabular numeric values. * Data language: score pills, stat tiles, progress bars, sparklines, segmented controls, filter chips, charts, and dense tables. * Motion language: hover lift, animated progress shimmer, ambient hero drift, pulsing stepper dots, starfield, confetti, and 3D graph auto-rotation. * Asset language: many AI-tool logos, generated hero images for setup/dream/skills, agent logos, and skills artwork. ### Existing UX Strengths To Preserve * Dense dashboard patterns already fit a serious trend-analysis product. * Route shell and data loader support a repeatable "generate JSON, render dashboard" workflow. * Existing empty states explicitly avoid pretending fake data is real. * Setup wizard patterns cover detection, API keys, memory connectors, value settings, toggles, credentials, and final activation. * 3D graph and constellation components create a strong visual precedent for connected evidence. * Share route proves the project can create a screenshot-ready public artifact. * Component primitives and Radix wrappers provide accessible controls when used carefully. ### Existing UX Risks To Correct * Trend Finder needs a distinct section identity so users understand it is a module inside AI OS, not a random dashboard page. * Existing AI OS metadata and copy should remain correct for host pages, while Trend Finder pages need their own page titles, descriptions, and labels. * Primary nav needs grouping so current AI OS host areas and Trend Finder areas are not flattened into one undifferentiated list. * Mobile navigation now uses a sheet trigger; keep first-viewport and horizontal-overflow checks in browser validation. * Demo-only panels and fixture-backed states must stay labeled so they are not mixed into real hackathon evidence. * The current home page is highly complex. Trend Finder should keep density but use a simpler first viewport focused on trend ranking and evidence. * Heavy effects and 3D views need fallbacks and reduced-motion handling. * Text hierarchy is sometimes too small for primary explanation. Trend cards can keep dense metadata, but evidence and creator angle text should be easier to read. ### Current Route Inventory And Preservation Plan | Current Route | Current Purpose | Modular Vision | | -------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------- | | `/` | AI OS host dashboard | Preserve as local operator home while Trend Finder extension remains the vertical product area | | `/skills` | Skill usage and ROI | Preserve as local operator skills/ROI | | `/memory` | 3D memory graph | Preserve as local memory; reuse graph patterns in Trend Finder only when they explain evidence | | `/activity` | Runs and outputs | Preserve as local activity; optionally add Trend Finder activity later | | `/workspaces` | Project folders | Preserve as local workspaces | | `/workspaces/$id` | Workspace detail | Preserve as local workspace detail | | `/setup` | Setup wizard | Preserve as global setup; add Trend Finder source setup only if it becomes larger than Sources | | `/share` | AI ROI share card | Preserve or make context-aware later | | `/settings` | Read-only local settings | Preserve global settings and extension status | | `/agents/hermes` | Local Hermes page | Preserve with read-only default and opt-in admin gate | | `/agents/openclaw` | Local OpenClaw page | Preserve with read-only/default-off admin labeling | | `/extensions` | Extension listing | Preserve as extension platform index | | `/extensions/trend-finder/trends` | Implemented Trend Finder trends | Current module entry and ranked trend surface | | `/extensions/trend-finder/hidden-gems` | Implemented hidden gems | Current low-volume opportunity surface | | `/extensions/trend-finder/sources` | Implemented source health | Current evidence/source health and refresh control surface | | `/extensions/trend-finder/watchlist` | Implemented watchlist | Current generated watchlist/movement surface | | `/extensions/trend-finder/brief` | Implemented brief handoff | Current dashboard-native submission/report handoff | | `/extensions/trend-finder/engine` | Implemented Engine Replay | Current sidebar utility route for browser-safe latest-run proof and reference notes | | Standalone generated HTML report route | Not implemented | Deferred until a public report/export API or static artifact path exists | ### Frontend Concepts Worth Carrying Forward * "Demo data" and "cold real" state badges for transparent data provenance. * Expandable KPI cards for score breakdowns. * Source filters as branded pills with logos and detection states. * A side inspector pattern for evidence details. * Screenshot-ready share/report composition. * Local JSON first: generated report file becomes the source of dashboard truth. * Status pills for source health, trend maturity, and confidence. * Recharts for score factor bars and source distribution. * 3D/constellation views only where they explain relationships, not as decorative default chrome. * Existing AI OS host routes stay available while Trend Finder develops in a separate module namespace. ### Current Trend Finder UX Baseline As of 2026-05-18, the implemented Trend Finder module has a documented UX baseline that future work should preserve unless a later spec explicitly replaces it: * Trends opens with a first-viewport Signal Radar surface: compact module state, KPI strip, ranked topic summaries, selected trend inspector, source coverage, provenance, and refresh/run action. * Runtime readiness, full Creator Lens editing, verbose provenance notes, and detailed diagnostics remain accessible but do not precede trend discovery. * Hidden Gems, Watchlist, and Brief use purpose-built surfaces instead of dumping the same full trend card pattern into every route. * Sources connects source health to trust with active/degraded/offline status, role coverage, evidence contribution, and source impact before detailed tables. * Trend Finder routes use contextual module state in the top bar rather than generic host telemetry, while existing AI OS pages keep their host cockpit identity. * The shared extension hero is an optimized WebP asset and must not push the top trend out of the first mobile viewport. * The visible `Extension v0.1.0` label is the Trend Finder extension version, not the app package version. * Implemented click micro-interactions reinforce module identity: the sidebar Trend Finder entry fires a data-stream burst, while Trend Finder run/aggregate actions fire a network-node bloom. * These effects are decorative, short-lived DOM overlays and must respect reduced-motion preferences. *** ## 3. User Flows ### Flow 1: Scan Current Trends **Trigger**: User opens the Trend Finder module after a report has been generated. **Goal**: Identify the highest-value AI trends quickly. ``` Open AI OS --> Open Trend Finder --> See last refresh and source health --> Scan top trend cards --> Filter by source/audience/time window --> Select one trend --> Inspect evidence ``` **Happy path**: The first viewport shows ranked trends, hidden gems, and source coverage without requiring setup knowledge. **Error states**: No report, stale report, source fetch failures, or single-source spike. Each state must show the cause and the next recovery action. ### Flow 2: Validate A Trend **Trigger**: User clicks a trend card or graph node. **Goal**: Decide whether the trend is real enough to act on. ``` Select trend --> Evidence drawer opens --> Review score factors --> Inspect source links --> Check counter-signals --> Decide: use, watch, ignore ``` **Happy path**: Evidence is visible next to the score. No opaque ranking without source details. **Error states**: Broken source link, missing source metadata, weak score, duplicate topic cluster, or stale evidence. ### Flow 3: Turn Trend Into Creator Angle **Trigger**: User finds a promising trend. **Goal**: Convert signal into content or experiment ideas. ``` Trend detail --> Creator angle panel --> Copy hook/title/demo idea --> Save to watchlist --> Mark next action ``` **Happy path**: The user leaves with a concrete angle, audience question, and suggested content format. **Error states**: No angle available, angle too generic, insufficient evidence, or trend already mainstream. ### Flow 4: Refresh Or Generate Report **Trigger**: User wants the latest trend report. **Goal**: Run the collection/scoring workflow and understand its result. ``` Click refresh --> Collector status appears --> Source progress updates --> Normalization/scoring completes --> Dashboard updates --> Report timestamp changes ``` **Happy path**: User sees which sources succeeded, failed, or were skipped. **Error states**: Rate limit, missing API key, source unavailable, malformed source item, clustering failure, or scoring failure. ### Flow 5: Configure Sources **Trigger**: First Trend Finder run, stale sources, or user opens Trend Finder source setup. **Goal**: Choose data sources and provide optional credentials. ``` Open source setup --> Review supported sources --> Add credentials if needed --> Test connection --> Save source set --> Run first report ``` **Happy path**: Public/no-key sources work first; optional APIs improve depth. **Error states**: Missing key, invalid key, source disabled, terms/rate warning, or no configured sources. ### Flow 6: Share Hackathon Output **Trigger**: User needs the final submission artifact. **Goal**: Export a clean dashboard screenshot or generated HTML report. ``` Open report/share --> Select top trends and hidden gems --> Preview public report --> Copy share text or export HTML --> Record Loom ``` **Happy path**: Output includes trend names, scores, evidence, creator angle, and source breakdown. **Error states**: Report too empty, private/local data exposed, broken links, or unsupported export. *** ## 4. Screen Inventory ### Target Screens | Screen | Route/Path | Purpose | Key Components | | --------------------- | ---------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------- | | Trend Finder Trends | `/extensions/trend-finder/trends` | First-stop view of current trend intelligence | Ranked trends, Creator Lens, run control, score/source breakdowns | | Trend Detail | In-card/details pattern within extension views | Validate one trend deeply | Evidence list, score breakdown, source metrics, creator angle, watchlist action | | Hidden Gems | `/extensions/trend-finder/hidden-gems` | Show early low-volume opportunities | Gem cards, novelty score, source velocity, creator angle | | Sources | `/extensions/trend-finder/sources` | Show where evidence comes from and source health | Source filters, evidence counts, warnings, refresh control | | Watchlist | `/extensions/trend-finder/watchlist` | Track generated watch topics and movement | Topic rows, maturity state, score movement, next action | | Brief | `/extensions/trend-finder/brief` | Produce dashboard-native hackathon/share handoff | Summary, proof points, source status, honest deferred scope | | Engine Replay | `/extensions/trend-finder/engine` | Show latest-run source-to-artifact proof and reference | Replay/reference tabs, safe trace states, timeline, source/runtime artifacts | | Generated HTML Report | Deferred | Produce standalone public artifact | Static HTML/report export remains future work | | Source Setup | Sources view plus `.env.local`/docs | Configure source credentials and report cadence | Source cards, warning states, docs links, local env template | | Trend Finder Settings | `/settings` extension card plus module views | Adjust enablement and review local source/runtime state | Extension status, env key presence, source health, privacy notes | ### Current Screens To Preserve | Screen | Route/Path | Recommendation | | ----------- | ------------------------------------ | ----------------------------------------------------------------------------------------- | | AI OS Home | `/` | Keep as host dashboard | | Skills ROI | `/skills` | Keep as AI OS host module; borrow card patterns for Trend Finder | | Memory | `/memory` | Keep as AI OS host module; borrow graph/inspector patterns for evidence graph | | Activity | `/activity` | Keep as AI OS host module; Trend Finder activity should live in module namespace if added | | Workspaces | `/workspaces`, `/workspaces/$id` | Keep as AI OS host module | | Setup | `/setup` | Keep as global AI OS setup; add Trend Finder source setup separately if it becomes large | | Share | `/share` | Keep current AI ROI share card or make route context-aware later | | Agent pages | `/agents/hermes`, `/agents/openclaw` | Keep as AI OS host local-agent pages with read-only/default-off admin boundaries | *** ## 5. Navigation Structure ``` AI OS |-- Home |-- Skills |-- Memory |-- Activity |-- Workspaces |-- Agents | |-- Hermes | `-- OpenClaw |-- Extensions | `-- Trend Finder | |-- Trends | |-- Hidden Gems | |-- Sources | |-- Watchlist | `-- Brief |-- Engine Replay `-- Settings ``` **Navigation pattern**: Desktop keeps the left sidebar and sticky top header. Trend Finder currently enters through the extension platform and renders local view navigation inside `/extensions/trend-finder/...`; Engine Replay is a Trend Finder-scoped sidebar utility route at `/extensions/trend-finder/engine`. Mobile opens the same sidebar content through the top-bar sheet trigger. **Deep linking**: Each Trend Finder trend should be addressable by ID or hash so a Loom walkthrough and share report can open directly to one example. Evidence source links must open externally in a new tab. **Global header**: The host header should remain AI OS-oriented on host pages. Trend Finder pages replace the local telemetry breadcrumb with module state: report date, source count, freshness, and refresh action. **Module boundary**: Trend Finder should have a clear module label, icon/accent, and route prefix. AI OS host metrics such as skill ROI and subscription usage should not appear inside Trend Finder unless explicitly used as host context. *** ## 6. Interaction Patterns ### Trend Cards * Rank, trend name, short "why now", score, source count, maturity label, and creator angle preview. * Card click opens detail drawer or route. * Hover/focus reveals source distribution and last-seen timestamp. * Weak trends must show why they are weak rather than disappearing silently. ### Evidence Drawer * Opens from trend card, graph node, source chip, or table row. * Contains source links, snippets, timestamps, metrics, score factors, and counter-signals. * Supports keyboard close, focus trap, and escape close. * Never hides the score explanation behind a tooltip only. ### Forms And Setup * Source credentials validate on submit and can be skipped. * Scoring weights use sliders or steppers with labels and reset action. * Source toggles use switches; source priority uses segmented controls or drag-free ordering. * Trend Finder setup should reuse AI OS wizard patterns without overwriting global AI OS setup state unless the user is editing shared settings. ### Loading States * Report generation uses source-level progress: queued, fetching, normalized, scored, failed. * First dashboard load can use skeleton cards with stable heights. * The radar animation may pulse while loading, but status text must remain readable. ### Notifications * Toasts for copied text, saved watchlist item, refresh complete, and export complete. * Inline banners for stale report, missing sources, or source failures. * Destructive or privacy-impacting actions require confirmation dialogs. ### Empty States * No report: show "Generate first report" plus source setup status. * No trends: explain whether there was no signal, source failure, or strict filters. * Demo data: keep an explicit badge; do not mix demo and real evidence without labeling. *** ## 7. Motion and Animation Strategy ### Philosophy Motion should communicate signal detection, scoring confidence, and relationship between evidence items. It should not make the dashboard feel like a marketing page. ### Entrance Choreography * Trend Finder load: source health appears first, then ranked cards, then secondary panels. * Trend card list: stagger opacity and 8px vertical movement over 180-260ms. * Source graph: fade in only after data is available; never show a blank WebGL region. * Report export preview: snap into a stable 1200x630 frame without layout shift. ### Interaction Feedback * Hover states: subtle border brightening, 1-2px lift, accent wash, or source breakdown reveal. * Click/tap responses: pressed state before opening drawers or filters. * Focus rings: use the existing orange/emerald focus language, with visible contrast on dark surfaces. * Score bars: animate width once when first visible, then remain stable. ### Scroll-Driven Moments * Keep scrolling utilitarian. Avoid long narrative scroll pages. * The only premium moment should be the Signal Radar and the evidence drawer. * If using source graph, pin controls and avoid scroll-jacking. ### Animation Constraints * Target locked 60fps and test with 6x CPU throttling. * Maximum 3 animated regions visible at once. * Keep WebGL optional and lazy-loaded. * No linear easing; use cubic-bezier or existing `tw-animate-css` utilities. * Respect `prefers-reduced-motion` with static opacity changes and no auto-rotation. * Use data/signal-themed click effects sparingly for meaningful navigation or run actions; avoid generic celebration effects for routine Trend Finder workflows. *** ## 8. Layout Philosophy ### Composition Approach Trend Finder should be a dense but organized work surface inside AI OS, not a landing page. The first viewport should answer: what is trending, how strong is it, and can I trust it? ### First Viewport Acceptance Contract * At desktop review size around 1440x1000, the first viewport must show at least one ranked trend, selected evidence or Signal Radar detail, source freshness/coverage, provenance, and a run/refresh action without scrolling. * At mobile review size around 390x844, trend value must appear before full configuration controls, and module navigation must not expose a raw horizontal scrollbar or document-level horizontal overflow. * One screenshot of a selected trend should communicate the topic name, score, why-now explanation, evidence/source context, and creator angle. * Runtime readiness, provenance, and source warnings should stay visible as compact trust signals. Full Creator Lens editing, readiness details, setup guidance, long evidence lists for non-selected trends, and source diagnostics belong below the primary trend surface or in a drawer/sheet. ### Visual Hierarchy * Primary: ranked trends and hidden gems. * Secondary: source health, score factors, refresh status, and filters. * Tertiary: activity logs, configuration, and links back to host AI OS context. * Use tabular numbers and compact labels for metrics. * Keep narrative explanations in readable lines, not tiny metadata. ### Section Rhythm * Trend Finder sections should be bands or unframed layouts, with cards only for individual repeated items or tools. * Avoid nesting cards inside cards. * Keep at least one actionable trend visible above the fold on desktop. * On mobile, use one-column trend cards and collapse secondary panels behind tabs. ### Data Density Trend Finder should feel more like a working intelligence module than a magazine. Use concise copy, stable card dimensions, visible score rationale, and direct actions. *** ## 9. Responsive Strategy | Breakpoint | Target | Layout Approach | | ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------- | | `< 640px` | Mobile | Replace hidden sidebar with bottom nav or drawer; one-column trend cards; evidence drawer becomes full-screen sheet | | `640-1024px` | Tablet | Two-column cards, compact header filters, graph below ranked list | | `> 1024px` | Desktop | Sidebar plus dashboard grid; selected trend drawer can sit beside ranking list | | `> 1400px` | Wide desktop | Preserve readable max widths; use extra space for evidence and source graph, not just padding | **Approach**: Adaptive dashboard. Desktop gets the full command surface; mobile gets trend scanning, evidence review, and watchlist actions first. **Touch targets**: Minimum 44x44px for primary buttons, chips, and drawer controls on touch devices. *** ## 10. Accessibility **Target**: WCAG 2.1 AA minimum. * Keyboard navigation: all filters, cards, drawers, setup steps, and export actions must be keyboard reachable. * Screen reader: trend cards need semantic headings; score factors need text equivalents; source graph needs table/list fallback. * Color contrast: dark panels and muted text must meet AA. Do not rely on hue alone for score or source status. * Focus management: drawers and modals need focus trap, initial focus, escape close, and focus return. * Reduced motion: disable auto-rotation, starfield, shimmer, confetti, and ambient drift; replace with static states. * WebGL fallback: source graph must have an accessible evidence table with the same selectable items. * External links: source evidence links must identify the source domain and open behavior. *** ## 11. Design System ### Color Architecture * **Dominant surface (60%)**: Near-black OKLCH background from the current dark theme. * **Secondary surfaces (25%)**: Dark slate cards, slightly lighter panels, and translucent headers. * **Accent (10%)**: Emerald/chartreuse for signal and discovery, amber/orange for emerging heat, violet/blue for source/network context. * **Signal colors (5%)**: Emerald for validated, amber for watch, red for weak/failed, gray for unknown. Palette character: cool, synthetic, precise, with warm accents used sparingly for "new signal" and action states. ### Typography * **Display font**: System sans, semibold, tight tracking only where already established. * **Body font**: System sans for speed and consistency. * **Monospace**: System mono for source domains, timestamps, IDs, counts, and score math. * **Scale ratio**: Compact dashboard scale: 11/12/13/14/16/20/28/40/56. * **Minimum readable content**: Trend summaries and evidence snippets should be 14-16px; dense metadata may use 10-12px only when secondary. ### Spacing Scale Use the existing Tailwind spacing rhythm: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px. Dashboard card gaps should usually be 12-20px. ### Elevation and Depth * Primary depth comes from borders, surface contrast, inset highlights, and subtle accent glows. * Keep shadows soft and low; avoid stacked card-on-card depth. * Drawers and modals can use backdrop blur and stronger shadow because they interrupt the workspace. ### Texture and Atmosphere * Keep the existing subtle grid and luminous traces for radar/source graph areas. * Avoid generic gradient hero sections. * Use generated bitmap assets only when they reveal a real report, trend artifact, source map, or share output. *** ## 12. Component Patterns | Component | Used In | Behavior | | ----------------- | ------------------------------------ | --------------------------------------------------------------------------------- | | Signal Radar | Dashboard | Shows source pulses resolving into ranked trend cards | | Trend Card | Trend Finder, Hidden Gems, Watchlist | Opens detail, shows score, maturity, source count, creator angle | | Evidence Drawer | Trend detail | Lists evidence, source links, snippets, score factors, counter-signals | | Source Chip | Filters, cards, drawer | Shows source identity, health, and contribution strength | | Score Breakdown | Trend detail, cards | Explains momentum, velocity, novelty, breadth, and confidence | | Source Graph | Source Graph screen | Visualizes relationships between trends, sources, and evidence clusters | | Watchlist Row | Watchlist | Tracks topic state, next check, reason, and last movement | | Brief Card | Trend Finder Brief route | Screenshot-ready public summary for hackathon/Loom | | Source Setup Card | Trend Finder setup/settings | Shows enabled state, credential requirement, last success, and test result | | Activity Row | Activity route | Shows collection/scoring run status and failure details | | Empty State | All screens | Explains whether issue is no data, stale data, source failure, or filter mismatch | *** ## 13. Dashboard Content Model Trend Finder should organize module content around the report sections in [PRD.md](/ai-os-and-trend-finder-docs/docs/prd.md): * Top Trending AI Topics: highest score and broadest support. * Hidden Gems: lower-volume topics with early acceleration. * Why It Is Trending: one concise explanation per trend. * Evidence: source items, links, counts, stars, comments, launches, or velocity. * Trend Score: transparent score and factor breakdown. * Creator Angle: suggested hook, title, demo, or audience question. * Source Breakdown: contribution by source and confidence. * Watchlist: not-ready topics worth monitoring. Recommended first viewport: ``` Header: Trend Finder / report timestamp / refresh KPI strip: trends found / hidden gems / source coverage / weak signals Left: ranked Top Trends Right: selected trend evidence drawer or Signal Radar Below: Hidden Gems, Source Breakdown, Watchlist, Activity ``` *** ## 14. Anti-Patterns To Avoid * Do not present a one-source spike as a validated trend. * Do not hide evidence behind a black-box score. * Do not blur AI OS local telemetry with Trend Finder public trend evidence. * Do not use a generic AI gradient hero instead of the real dashboard/report. * Do not animate radar/graph elements if they obscure trend evaluation. * Do not mix demo data with real evidence unless each item is labeled. * Do not regress mobile users to a sidebar that is hidden at small breakpoints without the sheet trigger. * Do not let runtime readiness, setup controls, or provenance explanations bury the ranked trend surface in the first viewport. * Do not reuse full-detail trend cards everywhere when the user needs a compact scanner plus selected-topic inspector. * Do not treat route smoke tests, labels, or provenance checks as sufficient UI demo validation by themselves. *** ## 15. UX Validation Contract UI-focused Trend Finder sessions should include browser-visible validation, not only data or route assertions: * Desktop layout check: top trend, selected inspector or Signal Radar, source state, provenance, and refresh action are visible above the fold. * Mobile layout check: top trend or signal summary appears before full setup/configuration controls, primary touch targets are at least 44px, and horizontal overflow is controlled. * Screenshot review: a selected trend can be understood from one screenshot without relying on narration. * Trust review: source warnings, fallback/demo labels, and runtime status remain visible without dominating the product moment. * Motion review: radar, graph, and score animations respect reduced-motion preferences and never obscure analysis. *** ## 16. Open UX Questions 1. When should the dashboard Brief be supplemented with a standalone generated HTML report? 2. Which sources are guaranteed for the first credible demo run: Reddit, GitHub, Hacker News, Product Hunt, YouTube, newsletters/blogs, papers, or lab release notes? 3. Should Trend Finder remain an extension-internal module or be promoted to a primary sidebar group? 4. What exact score factors should be visible to users in v1: velocity, novelty, source breadth, creator fit, confidence, or all of them? 5. What privacy or source-compliance constraints apply to storing source snippets, comments, and URLs in generated reports? --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/prd/prd_ux.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.