Browser App Review

Loaded SRC_URL

The page loaded is a mock application submission by student Clayton Lin (NetID: ql373), a Product Designer. The app is called Kami — described as an AI-powered design assistant that helps designers think, create, and make decisions. The JSON data driving the app is sourced from a separate file at /a1/15-json/linclayton_182217_15082730_Javascript Object Notation.json.

App Behavior Summary

The page presents a single-screen dashboard interface for Kami. It is divided into several distinct panels, all loaded from the JSON file:

• Header — displays the app name "Kami" and its tagline, along with the user's name (Clayton), role (Product Designer), and NetID
• Snapshot panel — shows current project (None), assistant mode (Idle), and last action (Waiting) as a live status overview
• Settings panel — loaded from JSON, listing configurable options for the assistant
• Mock Assistant panel — the main interactive section with three action buttons: Generate Idea, Synthesize Research, and Support Decision, plus a Reset button; clicking a button triggers a mock response in the output area below
• Features panel — lists all features loaded from the JSON file, with a toggle to show enabled features only
• Projects panel — displays project cards loaded from JSON, sortable by status; clicking a card sets it as the active project for the mock assistant

Overall the app is well-structured, going well beyond a raw JSON viewer by implementing real mock interactions that simulate how Kami would behave in a real product context.

Things That Didn't Work as Expected

• The Snapshot panel showed static placeholder values (Current project: None, Assistant mode: Idle) even after selecting a project card — the snapshot did not update to reflect the active project
• The Mock Assistant output started as "No action yet. Try one of the mock features." — it was not immediately clear the buttons were clickable, since there was no visual affordance like hover states or button styling that signaled interactivity
• The Features panel listed all features loaded from JSON but did not show feature descriptions, status indicators, or any way to toggle features on or off — the "Show enabled only" filter implied toggling was possible but nothing responded
• The Projects sort dropdown said "Sort by status" but it was unclear whether clicking it actually reordered cards, since the default order and sorted order may have looked the same
• The Settings panel was listed in the page but appeared to have no visible controls or content rendered from the JSON, leaving the section feeling empty
• There was no visual feedback or loading state when the mock assistant buttons were clicked — a response appeared instantly with no animation, which made it feel less like a real AI assistant interaction

Prompt to Improve the App

"Improve the Kami mock app in the following ways: (1) When a project card is selected in the Projects panel, immediately update the Snapshot panel to show that project as the Current project and change Assistant mode from Idle to Ready. (2) Add a short typing animation (3 animated dots) when any of the three assistant buttons are clicked, before the mock response appears, to better simulate an AI thinking. (3) In the Features panel, render each feature with its name, a short description from the JSON, and a visible enabled/disabled toggle switch that actually filters the list when 'Show enabled only' is clicked. (4) Populate the Settings panel with real controls from the JSON — checkboxes, dropdowns, or sliders — rather than leaving it empty. (5) Add a subtle hover effect and cursor pointer to all interactive elements so it is immediately obvious what is clickable. (6) After using the Reset button, also reset the active project in the Snapshot back to None and assistant mode back to Idle."