CognitiveFlow v1.0.0 is a mock personalized learning and productivity platform that renders its
UI entirely from a JSON data profile. The page is divided into several panels: a top-level
app header with a "Load Remote JSON" / "Load Embedded Sample" / "Toggle Theme" control strip,
a User Profile column, a Goals & Momentum tracker,
an Analytics dashboard, a Projects task list, an
Interaction Log, a Data Inspector, and a
Study Assistant chat panel.
Load JSON Buttons
Clicking "Load Remote JSON" or "Load Embedded Sample" swaps the app subtitle/description text with a template string populated from the JSON profile.
Toggle Theme
Switches the app between a light and dark color scheme affecting the main content area.
Study Assistant
A textarea accepts user input. "Generate Advice" returns a template plan that echoes the user's typed text alongside JSON-sourced goals and task suggestions. "Celebrate Progress" outputs a fixed motivational task-count summary.
Projects & Tasks
Displays one project ("Wearable Interaction Prototype") with two tasks. Tasks can be checked/unchecked and logged to the Interaction Log in real time.
Mock Goal Progress Slider
A range slider under "Goals & Momentum" lets you manually drag progress from 0–100%, updating the displayed percentage label.
Analytics Panel
Displays three static mock metrics (Active Users: 128, Daily Sessions: 342, Avg Session: 27.5 min) as bar charts. Labeled "Live mock."
Data Inspector
A scrollable panel showing the raw JSON structure driving the UI — useful for verifying data-driven rendering.
Interaction Log
Timestamps and logs all user interactions (task toggles, advice generation) in chronological order during the session.
Things That Didn't Work As Expected
Learning Style Studio only affects the Study Assistant, not the broader UI.
Switching between Visual, Auditory, and Kinesthetic correctly updates the
"Learning-style strategy" line in the Generate Advice output (e.g., Visual → sketch/flowchart,
Auditory → explain out loud, Kinesthetic → hands-on prototype) and the Data Inspector.
However, the task suggestions and project display do not visually adapt to the selected
style, which limits its impact.
Notifications toggle does nothing observable.
The "Disabled" button next to Notifications appears clickable but produces no visible
state change or UI behavior when clicked.
Study Assistant ignores user input semantically.
The "Generate Advice" output only appends the user's raw typed text to the bottom of
a fixed template — it does not actually interpret or respond to what was typed. Typing
"I need to finish my generative model homework" returns the same boilerplate plan as
any other input.
Analytics data is entirely static mock data.
The bar chart displays hardcoded numbers (128 users, 342 sessions) with no connection
to any real or simulated dynamic source, despite being labeled "Live mock."
Goal progress slider is disconnected from the goal's actual state.
Dragging the slider updates the displayed percentage label but does not update
the progress bar above it or reflect the change anywhere else in the dashboard.
"Load Remote JSON" likely fails silently.
Given this is a student project, the remote JSON endpoint referenced may not exist
or may be CORS-blocked — the button may fall back to the embedded sample without
notifying the user of the failure.
Prompt to Improve the App
You are improving an existing JSON-powered learning productivity app called CognitiveFlow.
The app currently loads a user profile from JSON and displays goals, tasks, analytics,
and a Study Assistant panel. Several features are cosmetic only. Please make the
following improvements:
1. LEARNING STYLE EXPANSION: The app already correctly adapts the "Learning-style
strategy" line in Generate Advice and the Data Inspector based on the selected
style (Visual / Auditory / Kinesthetic). Extend this further so the selected
style also influences the visual presentation of the Projects panel (e.g.,
Visual → card layout with color-coded priority bars; Auditory → narrative task
descriptions; Kinesthetic → step-by-step checklist format), and add a persistent
style indicator visible in the User Profile card at all times.
2. REAL AI ADVICE: Replace the hardcoded template in "Generate Advice" with an
actual call to the Claude API (claude-sonnet-4-20250514). Pass the user's typed
message, their current goals, active project, and selected learning style as
context. Stream the response into the output area.
3. NOTIFICATIONS TOGGLE: Make the Notifications button actually toggle between
"Enabled" and "Disabled" states, and when enabled, show a subtle toast/banner
reminder if a goal deadline is within 7 days.
4. GOAL PROGRESS SYNC: Connect the manual progress slider to the goal's progress
value so that dragging it updates the progress bar above it consistently, and
also recalculates the "X day(s) remaining" display based on the new value.
5. ANALYTICS SIMULATION: Add a "Simulate Day" button that increments Active Users
and Daily Sessions by a small random amount, re-renders the bar chart, and logs
the change to the Interaction Log — making the "Live mock" label feel honest.
Keep the existing visual design, JSON-driven architecture, and Data Inspector panel.
Do not remove any existing features — only extend them.