From 9a6c95e26519b0fb90ea9f770d01ef9af3349fac Mon Sep 17 00:00:00 2001
From: brandonhs <brandonnms@gmail.com>
Date: Thu, 1 Oct 2026 12:40:28 -0700
Subject: [PATCH 1/2] feat(overview): Show CHANGELOG.md on the overview page

Import CHANGELOG.md as raw text and render it under a Changelog section
on the overview page, so the UI always matches the released changelog.
Its headings are nested one level below the section, and the markdown
component gains styles for the deeper heading levels.

Closes #550

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/dwe/markdown.tsx |  4 ++++
 frontend/src/components/dwe/overview.tsx | 20 +++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/dwe/markdown.tsx b/frontend/src/components/dwe/markdown.tsx
index d1547a95..45bf37f8 100644
--- a/frontend/src/components/dwe/markdown.tsx
+++ b/frontend/src/components/dwe/markdown.tsx
@@ -8,6 +8,10 @@ const components: Components = {
   h2: ({ ...props }) => (
     <h3 className="text-lg font-semibold mt-4" {...props} />
   ),
+  h3: ({ ...props }) => (
+    <h4 className="text-base font-semibold mt-4" {...props} />
+  ),
+  h4: ({ ...props }) => <h5 className="font-semibold" {...props} />,
   p: ({ ...props }) => <p className="text-muted-foreground" {...props} />,
   li: ({ ...props }) => <li className="mb-1 pl-1" {...props} />,
   a: ({ ...props }) => (
diff --git a/frontend/src/components/dwe/overview.tsx b/frontend/src/components/dwe/overview.tsx
index 7d65ab9f..d8b60a31 100644
--- a/frontend/src/components/dwe/overview.tsx
+++ b/frontend/src/components/dwe/overview.tsx
@@ -1,20 +1,22 @@
 // pages/index.tsx
+import changelog from "../../../../CHANGELOG.md?raw";
 import { Markdown } from "./markdown";
 
+// Drop the changelog's own title and nest its headings under "## Changelog"
+const changelogBody = changelog
+  .replace(/^# Changelog\s*/, "")
+  .replace(/^(#{1,5}) /gm, "#$1 ");
+
 const markdown = `
-# DWE OS Overview
+# dweOS Overview
 
-DWE OS is an optional software designed to run on underwater systems, extending the functionality of DeepWater Exploration cameras.
+dweOS is an optional software designed to run on underwater systems, extending the functionality of DeepWater Exploration cameras.
 
-## Key Features
+For more detailed documentation, refer to the official project docs at [docs.dwe.ai](https://docs.dwe.ai/dwe-os/overview).
 
-- **Bus ID Camera Enumeration:** Ensures cameras retain their settings even after a reboot, eliminating port confusion.
-- **StellarHD Leader/Follower Support:** Enables PrecisionSync™ to work seamlessly out of the box with DWE OS.
-- **WiFi Configuration Interface:** Allows easy system updates directly from DWE OS.
-- **Light Control Integration:** Provides control over the on/off state and brightness of lights.
-- **Built-in Terminal:** Facilitates access to advanced features without the need for SSH.
+## Changelog
 
-For more detailed documentation, refer to the official project docs at [docs.dwe.ai](https://docs.dwe.ai/software/dwe-os/dwe-os-2).
+${changelogBody}
 `;
 
 export default function OverviewMarkdown() {

From e2aa6ed2c2b3fc4a40ec6aa2e2aea7acc8242300 Mon Sep 17 00:00:00 2001
From: brandonhs <brandonnms@gmail.com>
Date: Thu, 1 Oct 2026 12:49:21 -0700
Subject: [PATCH 2/2] feat(overview): Collapse previous releases in the
 changelog

Show only the current release on the overview page and move older
releases into a collapsed "Previous releases" accordion. Also separate
the intro from the changelog with a rule and mute list item text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/dwe/markdown.tsx |  2 +-
 frontend/src/components/dwe/overview.tsx | 42 +++++++++++++++++++++---
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/dwe/markdown.tsx b/frontend/src/components/dwe/markdown.tsx
index 45bf37f8..e642dcbe 100644
--- a/frontend/src/components/dwe/markdown.tsx
+++ b/frontend/src/components/dwe/markdown.tsx
@@ -13,7 +13,7 @@ const components: Components = {
   ),
   h4: ({ ...props }) => <h5 className="font-semibold" {...props} />,
   p: ({ ...props }) => <p className="text-muted-foreground" {...props} />,
-  li: ({ ...props }) => <li className="mb-1 pl-1" {...props} />,
+  li: ({ ...props }) => <li className="mb-1 pl-1 text-muted-foreground" {...props} />,
   a: ({ ...props }) => (
     <a
       className="text-blue-500 hover:underline"
diff --git a/frontend/src/components/dwe/overview.tsx b/frontend/src/components/dwe/overview.tsx
index d8b60a31..872a3281 100644
--- a/frontend/src/components/dwe/overview.tsx
+++ b/frontend/src/components/dwe/overview.tsx
@@ -1,11 +1,25 @@
 // pages/index.tsx
 import changelog from "../../../../CHANGELOG.md?raw";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Markdown } from "./markdown";
 
-// Drop the changelog's own title and nest its headings under "## Changelog"
-const changelogBody = changelog
+// Drop the changelog's own title and split it into one entry per release
+const releases = changelog
   .replace(/^# Changelog\s*/, "")
-  .replace(/^(#{1,5}) /gm, "#$1 ");
+  .split(/^(?=## )/m)
+  .filter((release) => release.trim());
+
+// Nest a release's headings under "## Changelog"
+const nestHeadings = (markdown: string) =>
+  markdown.replace(/^(#{1,5}) /gm, "#$1 ");
+
+const currentRelease = nestHeadings(releases[0] ?? "");
+const previousReleases = nestHeadings(releases.slice(1).join("\n"));
 
 const markdown = `
 # dweOS Overview
@@ -14,11 +28,29 @@ dweOS is an optional software designed to run on underwater systems, extending t
 
 For more detailed documentation, refer to the official project docs at [docs.dwe.ai](https://docs.dwe.ai/dwe-os/overview).
 
+---
+
 ## Changelog
 
-${changelogBody}
+${currentRelease}
 `;
 
 export default function OverviewMarkdown() {
-  return <Markdown>{markdown}</Markdown>;
+  return (
+    <div className="space-y-6">
+      <Markdown>{markdown}</Markdown>
+      {previousReleases && (
+        <Accordion type="single" collapsible>
+          <AccordionItem value="previous-releases">
+            <AccordionTrigger className="font-semibold">
+              Previous releases
+            </AccordionTrigger>
+            <AccordionContent>
+              <Markdown>{previousReleases}</Markdown>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </div>
+  );
 }