App Review: Knowledge Reader — sc3374

App Behavior Summary

This is a minimal single-card knowledge viewer built as a JSON app. Its entire purpose is to fetch a Wikipedia-style article from a remote JSON endpoint (https://producingtechnology.com/a1/15-json/sc3374.json), parse the response, and render it as a styled "Knowledge Card." The app has no navigation, no search, no interactivity of any kind — it is purely a static read-only display.

On load, the app attempts to fetch() the remote JSON. If that fails (due to CORS, a 404, or network error), it silently falls back to a hardcoded copy of the same data embedded in the JavaScript. In either case, the rendered output is identical. The card displays:

• A red pill badge labeled KNOWLEDGE CARD
• The article title (Sushi) as a large heading
• A metadata row showing ID: 28003 and REV: 1215894122
• The article body text, with the title word bolded in red and the Japanese term in italics
• A footer attribution line: "Data provided via sc3374.json"

Here is a faithful replica of what the rendered output looks like:

The console confirmed: "Using local fallback data" — the remote fetch failed silently and the embedded fallback was used.

Things That Didn't Work as Expected

• Unexpected The remote JSON fetch fails silently every time. The app logs "Using local fallback data" to the console but shows no indication to the user that the live data source is unavailable. The footer still says "Data provided via sc3374.json" regardless of which source was actually used, giving a false impression of freshness.
• Unexpected The article body is severely truncated. The content ends with "…accompanied by a variety of ingredients…" — a hard ellipsis cut-off from the fallback data. The full Wikipedia article on Sushi is many paragraphs long; none of that content is shown or accessible. There is no "Read more" link or expansion mechanism.
• Unexpected There are zero interactive elements. For an app in a viewer called "TERMINAL_VIEWER" alongside 142 other interactive apps, the complete absence of any buttons, links, search, or navigation is jarring. There is nothing at all for a user to do once the page loads.
• Unexpected The app is hardcoded to a single article (Sushi). Despite the infrastructure to fetch from a JSON endpoint, there is no way to query a different topic, browse related articles, or swap the data source. The app is functionally identical to a static HTML page.
• Unexpected Large amounts of whitespace below the card. The card occupies roughly the top half of the viewport; the bottom half is empty grey background. The layout does not fill the screen or center vertically, leaving the page feeling unfinished.
• Note The page title is correct and well-chosen ("Knowledge Reader - sc3374"), but the card label says "KNOWLEDGE CARD" — these two terms are inconsistent with each other and with the JSON app context.

Suggested Improvement Prompt

You are improving a single-file HTML app called "Knowledge Reader" (sc3374).
It currently fetches a Wikipedia article from a remote JSON endpoint and
renders it as a styled card — but is entirely static with no interactivity.
Please make the following improvements:

FIXES:
1. Data source transparency: Show a visible status badge below the title
   indicating whether data was loaded from the live server or the local
   fallback (e.g., a green "Live" badge vs. an amber "Cached" badge).
   Update the footer attribution text accordingly.

2. Full article rendering: The JSON response contains the full Wikipedia
   HTML in parse.text['*']. Render the complete article body inside the
   card instead of stopping at the hardcoded truncated sentence. Apply
   basic sanitization (strip script tags) before injecting the HTML.

3. Vertical centering: Center the card both horizontally AND vertically
   on the page using flexbox (min-height: 100vh on the body) so it
   doesn't leave a large empty area below.

4. Consistent naming: Unify the terminology — choose either "Knowledge
   Card" or "Knowledge Reader" and use it consistently in the page title,
   the pill label, and the footer.

ADDITIONS:
5. Topic search input: Add a text input and "Search" button at the top of
   the card. When submitted, fetch
   https://producingtechnology.com/a1/15-json/[query].json (or construct
   a Wikipedia API URL) and re-render the card with the new article.
   Show a loading spinner while fetching.

6. Related topics: Parse any links from the article HTML and display up
   to 5 as clickable "Related" chips below the article body. Clicking a
   chip re-fetches and re-renders the card for that topic.

7. Read / Bookmark toggle: Add a small bookmark icon button to the card
   header. Clicking it saves the current article title to localStorage
   and shows a "Saved" confirmation. Add a dropdown or sidebar to view
   saved articles and reload them.

8. Error state UI: If both the remote fetch and the fallback fail, show
   a styled error message inside the card ("Could not load article data.
   Please try again.") rather than rendering an empty card.