From d5235234a80a830c29f5cba2b605f8b236e11c30 Mon Sep 17 00:00:00 2001
From: Ryan Vogel <ryan@mandarin3d.com>
Date: Sun, 25 Jan 2026 20:56:37 -0500
Subject: [PATCH 1/3] Add highlight tag parsing for changelog with video
 support

---
 .../console/app/src/routes/changelog.json.ts  | 110 ++++++++++++++++++
 .../app/src/routes/changelog/index.css        |  35 ++++++
 .../app/src/routes/changelog/index.tsx        |  83 ++++++++++++-
 3 files changed, 227 insertions(+), 1 deletion(-)
 create mode 100644 packages/console/app/src/routes/changelog.json.ts

diff --git a/packages/console/app/src/routes/changelog.json.ts b/packages/console/app/src/routes/changelog.json.ts
new file mode 100644
index 00000000000..b668229f813
--- /dev/null
+++ b/packages/console/app/src/routes/changelog.json.ts
@@ -0,0 +1,110 @@
+type Release = {
+  tag_name: string
+  name: string
+  body: string
+  published_at: string
+  html_url: string
+}
+
+type Highlight = {
+  source: string
+  title: string
+  description: string
+  shortDescription?: string
+  image?: {
+    src: string
+    width: string
+    height: string
+  }
+  video?: string
+}
+
+function parseHighlights(body: string): Highlight[] {
+  const highlights: Highlight[] = []
+  const regex = /<highlight\s+source="([^"]+)">([\s\S]*?)<\/highlight>/g
+  let match
+
+  while ((match = regex.exec(body)) !== null) {
+    const source = match[1]
+    const content = match[2]
+
+    const titleMatch = content.match(/<h2>([^<]+)<\/h2>/)
+    const pMatch = content.match(/<p(?:\s+short="([^"]*)")?>([^<]+)<\/p>/)
+    const imgMatch = content.match(/<img\s+width="([^"]+)"\s+height="([^"]+)"\s+alt="([^"]*)"\s+src="([^"]+)"/)
+    // Match standalone GitHub asset URLs (videos)
+    const videoMatch = content.match(/^\s*(https:\/\/github\.com\/user-attachments\/assets\/[a-f0-9-]+)\s*$/m)
+
+    if (titleMatch) {
+      highlights.push({
+        source,
+        title: titleMatch[1],
+        description: pMatch?.[2] || "",
+        shortDescription: pMatch?.[1],
+        image: imgMatch
+          ? {
+              width: imgMatch[1],
+              height: imgMatch[2],
+              src: imgMatch[4],
+            }
+          : undefined,
+        video: videoMatch?.[1],
+      })
+    }
+  }
+
+  return highlights
+}
+
+function parseMarkdown(body: string) {
+  const lines = body.split("\n")
+  const sections: { title: string; items: string[] }[] = []
+  let current: { title: string; items: string[] } | null = null
+  let skip = false
+
+  for (const line of lines) {
+    if (line.startsWith("## ")) {
+      if (current) sections.push(current)
+      const title = line.slice(3).trim()
+      current = { title, items: [] }
+      skip = false
+    } else if (line.startsWith("**Thank you")) {
+      skip = true
+    } else if (line.startsWith("- ") && !skip) {
+      current?.items.push(line.slice(2).trim())
+    }
+  }
+  if (current) sections.push(current)
+
+  const highlights = parseHighlights(body)
+
+  return { sections, highlights }
+}
+
+export async function GET() {
+  const response = await fetch("https://api.github.com/repos/anomalyco/opencode/releases?per_page=20", {
+    headers: {
+      Accept: "application/vnd.github.v3+json",
+      "User-Agent": "OpenCode-Console",
+    },
+  })
+
+  if (!response.ok) {
+    return { releases: [] }
+  }
+
+  const releases = (await response.json()) as Release[]
+
+  return {
+    releases: releases.map((release) => {
+      const parsed = parseMarkdown(release.body || "")
+      return {
+        tag: release.tag_name,
+        name: release.name,
+        date: release.published_at,
+        url: release.html_url,
+        highlights: parsed.highlights,
+        sections: parsed.sections,
+      }
+    }),
+  }
+}
diff --git a/packages/console/app/src/routes/changelog/index.css b/packages/console/app/src/routes/changelog/index.css
index a445c74474a..a06fb00554c 100644
--- a/packages/console/app/src/routes/changelog/index.css
+++ b/packages/console/app/src/routes/changelog/index.css
@@ -465,6 +465,41 @@
         }
       }
     }
+
+    [data-component="highlights"] {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      margin-bottom: 1.5rem;
+    }
+
+    [data-component="highlight"] {
+      h4 {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--color-text-strong);
+        margin-bottom: 8px;
+      }
+
+      p[data-slot="title"] {
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 4px;
+      }
+
+      p {
+        color: var(--color-text);
+        line-height: 1.5;
+        margin-bottom: 12px;
+      }
+
+      img,
+      video {
+        max-width: 100%;
+        height: auto;
+        border-radius: 4px;
+      }
+    }
   }
 
   a {
diff --git a/packages/console/app/src/routes/changelog/index.tsx b/packages/console/app/src/routes/changelog/index.tsx
index c1b931fe3e0..34fd5f83b73 100644
--- a/packages/console/app/src/routes/changelog/index.tsx
+++ b/packages/console/app/src/routes/changelog/index.tsx
@@ -40,6 +40,59 @@ function formatDate(dateString: string) {
   })
 }
 
+type Highlight = {
+  source: string
+  title: string
+  description: string
+  shortDescription?: string
+  image?: {
+    src: string
+    width: string
+    height: string
+  }
+  video?: string
+}
+
+function parseHighlights(body: string): Highlight[] {
+  const highlights: Highlight[] = []
+  const regex = /<highlight\s+source="([^"]+)">([\s\S]*?)<\/highlight>/g
+  let match
+
+  while ((match = regex.exec(body)) !== null) {
+    const source = match[1]
+    const content = match[2]
+
+    const titleMatch = content.match(/<h2>([^<]+)<\/h2>/)
+    const pMatch = content.match(/<p(?:\s+short="([^"]*)")?>([^<]+)<\/p>/)
+    const imgMatch = content.match(/<img\s+width="([^"]+)"\s+height="([^"]+)"\s+alt="([^"]*)"\s+src="([^"]+)"/)
+    // Match standalone GitHub asset URLs (videos)
+    const videoMatch = content.match(/^\s*(https:\/\/github\.com\/user-attachments\/assets\/[a-f0-9-]+)\s*$/m)
+
+    if (titleMatch) {
+      highlights.push({
+        source,
+        title: titleMatch[1],
+        description: pMatch?.[2] || "",
+        shortDescription: pMatch?.[1],
+        image: imgMatch
+          ? {
+              width: imgMatch[1],
+              height: imgMatch[2],
+              src: imgMatch[4],
+            }
+          : undefined,
+        video: videoMatch?.[1],
+      })
+    }
+  }
+
+  return highlights
+}
+
+function toTitleCase(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+}
+
 function parseMarkdown(body: string) {
   const lines = body.split("\n")
   const sections: { title: string; items: string[] }[] = []
@@ -60,7 +113,9 @@ function parseMarkdown(body: string) {
   }
   if (current) sections.push(current)
 
-  return { sections }
+  const highlights = parseHighlights(body)
+
+  return { sections, highlights }
 }
 
 function ReleaseItem(props: { item: string }) {
@@ -87,6 +142,27 @@ function ReleaseItem(props: { item: string }) {
   )
 }
 
+function HighlightCard(props: { highlight: Highlight }) {
+  return (
+    <div data-component="highlight">
+      <h4>{props.highlight.source}</h4>
+      <p data-slot="title">{props.highlight.title}</p>
+      <p>{props.highlight.description}</p>
+      <Show when={props.highlight.video}>
+        <video src={props.highlight.video} controls autoplay loop muted playsinline />
+      </Show>
+      <Show when={props.highlight.image && !props.highlight.video}>
+        <img
+          src={props.highlight.image!.src}
+          alt={props.highlight.title}
+          width={props.highlight.image!.width}
+          height={props.highlight.image!.height}
+        />
+      </Show>
+    </div>
+  )
+}
+
 export default function Changelog() {
   const releases = createAsync(() => getReleases())
 
@@ -120,6 +196,11 @@ export default function Changelog() {
                       <time dateTime={release.published_at}>{formatDate(release.published_at)}</time>
                     </header>
                     <div data-slot="content">
+                      <Show when={parsed().highlights.length > 0}>
+                        <div data-component="highlights">
+                          <For each={parsed().highlights}>{(highlight) => <HighlightCard highlight={highlight} />}</For>
+                        </div>
+                      </Show>
                       <For each={parsed().sections}>
                         {(section) => (
                           <div data-component="section">

From 17e6190fcfcbcbcf7dc6cb09917d86bbd4baed85 Mon Sep 17 00:00:00 2001
From: Aiden Cline <aidenpcline@gmail.com>
Date: Sun, 25 Jan 2026 21:05:18 -0500
Subject: [PATCH 2/3] tweak: adjust tui syncing logic to help prevent case
 where agents would be undefined / missing

---
 .../opencode/src/cli/cmd/tui/context/sync.tsx | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/context/sync.tsx b/packages/opencode/src/cli/cmd/tui/context/sync.tsx
index 392cfb7f121..eb8ed2d9bba 100644
--- a/packages/opencode/src/cli/cmd/tui/context/sync.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/sync.tsx
@@ -333,32 +333,57 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       const start = Date.now() - 30 * 24 * 60 * 60 * 1000
       const sessionListPromise = sdk.client.session
         .list({ start: start })
-        .then((x) => setStore("session", reconcile((x.data ?? []).toSorted((a, b) => a.id.localeCompare(b.id)))))
+        .then((x) => (x.data ?? []).toSorted((a, b) => a.id.localeCompare(b.id)))
 
       // blocking - include session.list when continuing a session
+      const providersPromise = sdk.client.config.providers({}, { throwOnError: true })
+      const providerListPromise = sdk.client.provider.list({}, { throwOnError: true })
+      const agentsPromise = sdk.client.app.agents({}, { throwOnError: true })
+      const configPromise = sdk.client.config.get({}, { throwOnError: true })
       const blockingRequests: Promise<unknown>[] = [
-        sdk.client.config.providers({}, { throwOnError: true }).then((x) => {
-          batch(() => {
-            setStore("provider", reconcile(x.data!.providers))
-            setStore("provider_default", reconcile(x.data!.default))
-          })
-        }),
-        sdk.client.provider.list({}, { throwOnError: true }).then((x) => {
-          batch(() => {
-            setStore("provider_next", reconcile(x.data!))
-          })
-        }),
-        sdk.client.app.agents({}, { throwOnError: true }).then((x) => setStore("agent", reconcile(x.data ?? []))),
-        sdk.client.config.get({}, { throwOnError: true }).then((x) => setStore("config", reconcile(x.data!))),
+        providersPromise,
+        providerListPromise,
+        agentsPromise,
+        configPromise,
         ...(args.continue ? [sessionListPromise] : []),
       ]
 
       await Promise.all(blockingRequests)
+        .then(() => {
+          const providersResponse = providersPromise.then((x) => x.data!)
+          const providerListResponse = providerListPromise.then((x) => x.data!)
+          const agentsResponse = agentsPromise.then((x) => x.data ?? [])
+          const configResponse = configPromise.then((x) => x.data!)
+          const sessionListResponse = args.continue ? sessionListPromise : undefined
+
+          return Promise.all([
+            providersResponse,
+            providerListResponse,
+            agentsResponse,
+            configResponse,
+            ...(sessionListResponse ? [sessionListResponse] : []),
+          ]).then((responses) => {
+            const providers = responses[0]
+            const providerList = responses[1]
+            const agents = responses[2]
+            const config = responses[3]
+            const sessions = responses[4]
+
+            batch(() => {
+              setStore("provider", reconcile(providers.providers))
+              setStore("provider_default", reconcile(providers.default))
+              setStore("provider_next", reconcile(providerList))
+              setStore("agent", reconcile(agents))
+              setStore("config", reconcile(config))
+              if (sessions !== undefined) setStore("session", reconcile(sessions))
+            })
+          })
+        })
         .then(() => {
           if (store.status !== "complete") setStore("status", "partial")
           // non-blocking
           Promise.all([
-            ...(args.continue ? [] : [sessionListPromise]),
+            ...(args.continue ? [] : [sessionListPromise.then((sessions) => setStore("session", reconcile(sessions)))]),
             sdk.client.command.list().then((x) => setStore("command", reconcile(x.data ?? []))),
             sdk.client.lsp.status().then((x) => setStore("lsp", reconcile(x.data!))),
             sdk.client.mcp.status().then((x) => setStore("mcp", reconcile(x.data!))),

From 00031b9cd636f23e659ccd0e47ecfc8487255d64 Mon Sep 17 00:00:00 2001
From: Ryan Vogel <ryan@mandarin3d.com>
Date: Sun, 25 Jan 2026 21:18:26 -0500
Subject: [PATCH 3/3] Add collapsible sections, sticky version header, and
 style refinements for changelog highlights

---
 .../console/app/src/routes/changelog.json.ts  |  54 ++++---
 .../app/src/routes/changelog/index.css        | 114 ++++++++++++--
 .../app/src/routes/changelog/index.tsx        | 148 +++++++++++-------
 3 files changed, 223 insertions(+), 93 deletions(-)

diff --git a/packages/console/app/src/routes/changelog.json.ts b/packages/console/app/src/routes/changelog.json.ts
index b668229f813..a23f2050324 100644
--- a/packages/console/app/src/routes/changelog.json.ts
+++ b/packages/console/app/src/routes/changelog.json.ts
@@ -6,21 +6,22 @@ type Release = {
   html_url: string
 }
 
-type Highlight = {
-  source: string
+type HighlightMedia = { type: "video"; src: string } | { type: "image"; src: string; width: string; height: string }
+
+type HighlightItem = {
   title: string
   description: string
   shortDescription?: string
-  image?: {
-    src: string
-    width: string
-    height: string
-  }
-  video?: string
+  media: HighlightMedia
+}
+
+type HighlightGroup = {
+  source: string
+  items: HighlightItem[]
 }
 
-function parseHighlights(body: string): Highlight[] {
-  const highlights: Highlight[] = []
+function parseHighlights(body: string): HighlightGroup[] {
+  const groups = new Map<string, HighlightItem[]>()
   const regex = /<highlight\s+source="([^"]+)">([\s\S]*?)<\/highlight>/g
   let match
 
@@ -30,29 +31,32 @@ function parseHighlights(body: string): Highlight[] {
 
     const titleMatch = content.match(/<h2>([^<]+)<\/h2>/)
     const pMatch = content.match(/<p(?:\s+short="([^"]*)")?>([^<]+)<\/p>/)
-    const imgMatch = content.match(/<img\s+width="([^"]+)"\s+height="([^"]+)"\s+alt="([^"]*)"\s+src="([^"]+)"/)
-    // Match standalone GitHub asset URLs (videos)
+    const imgMatch = content.match(/<img\s+width="([^"]+)"\s+height="([^"]+)"\s+alt="[^"]*"\s+src="([^"]+)"/)
     const videoMatch = content.match(/^\s*(https:\/\/github\.com\/user-attachments\/assets\/[a-f0-9-]+)\s*$/m)
 
-    if (titleMatch) {
-      highlights.push({
-        source,
+    let media: HighlightMedia | undefined
+    if (videoMatch) {
+      media = { type: "video", src: videoMatch[1] }
+    } else if (imgMatch) {
+      media = { type: "image", src: imgMatch[3], width: imgMatch[1], height: imgMatch[2] }
+    }
+
+    if (titleMatch && media) {
+      const item: HighlightItem = {
         title: titleMatch[1],
         description: pMatch?.[2] || "",
         shortDescription: pMatch?.[1],
-        image: imgMatch
-          ? {
-              width: imgMatch[1],
-              height: imgMatch[2],
-              src: imgMatch[4],
-            }
-          : undefined,
-        video: videoMatch?.[1],
-      })
+        media,
+      }
+
+      if (!groups.has(source)) {
+        groups.set(source, [])
+      }
+      groups.get(source)!.push(item)
     }
   }
 
-  return highlights
+  return Array.from(groups.entries()).map(([source, items]) => ({ source, items }))
 }
 
 function parseMarkdown(body: string) {
diff --git a/packages/console/app/src/routes/changelog/index.css b/packages/console/app/src/routes/changelog/index.css
index a06fb00554c..233d85cc0e6 100644
--- a/packages/console/app/src/routes/changelog/index.css
+++ b/packages/console/app/src/routes/changelog/index.css
@@ -367,11 +367,18 @@
       display: flex;
       flex-direction: column;
       gap: 4px;
+      position: sticky;
+      top: 80px;
+      align-self: start;
+      background: var(--color-background);
+      padding: 8px 0;
 
       @media (max-width: 50rem) {
+        position: static;
         flex-direction: row;
         align-items: center;
         gap: 12px;
+        padding: 0;
       }
 
       [data-slot="version"] {
@@ -402,24 +409,26 @@
 
     [data-component="section"] {
       h3 {
-        font-size: 14px;
+        font-size: 13px;
         font-weight: 600;
         color: var(--color-text-strong);
-        margin-bottom: 8px;
+        margin-bottom: 6px;
       }
 
       ul {
         list-style: none;
         padding: 0;
         margin: 0;
+        padding-left: 16px;
         display: flex;
         flex-direction: column;
-        gap: 6px;
+        gap: 4px;
 
         li {
           color: var(--color-text);
+          font-size: 13px;
           line-height: 1.5;
-          padding-left: 16px;
+          padding-left: 12px;
           position: relative;
 
           &::before {
@@ -431,7 +440,7 @@
 
           [data-slot="author"] {
             color: var(--color-text-weak);
-            font-size: 13px;
+            font-size: 12px;
             margin-left: 4px;
             text-decoration: none;
 
@@ -473,6 +482,72 @@
       margin-bottom: 1.5rem;
     }
 
+    [data-component="collapsible-sections"] {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    [data-component="collapsible-section"] {
+      [data-slot="toggle"] {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        background: none;
+        border: none;
+        padding: 6px 0;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--color-text-weak);
+
+        &:hover {
+          color: var(--color-text);
+        }
+
+        [data-slot="icon"] {
+          font-size: 10px;
+        }
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        padding-left: 16px;
+        padding-bottom: 8px;
+
+        li {
+          color: var(--color-text);
+          font-size: 13px;
+          line-height: 1.5;
+          padding-left: 12px;
+          position: relative;
+
+          &::before {
+            content: "-";
+            position: absolute;
+            left: 0;
+            color: var(--color-text-weak);
+          }
+
+          [data-slot="author"] {
+            color: var(--color-text-weak);
+            font-size: 12px;
+            margin-left: 4px;
+            text-decoration: none;
+
+            &:hover {
+              text-decoration: underline;
+              text-underline-offset: 2px;
+              text-decoration-thickness: 1px;
+            }
+          }
+        }
+      }
+    }
+
     [data-component="highlight"] {
       h4 {
         font-size: 14px;
@@ -481,16 +556,29 @@
         margin-bottom: 8px;
       }
 
-      p[data-slot="title"] {
-        font-weight: 500;
-        color: var(--color-text-strong);
-        margin-bottom: 4px;
+      hr {
+        border: none;
+        border-top: 1px solid var(--color-border-weak);
+        margin-bottom: 16px;
       }
 
-      p {
-        color: var(--color-text);
-        line-height: 1.5;
-        margin-bottom: 12px;
+      [data-slot="highlight-item"] {
+        margin-bottom: 24px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        p[data-slot="title"] {
+          font-weight: 600;
+          font-size: 16px;
+          margin-bottom: 4px;
+        }
+
+        p {
+          font-size: 14px;
+          margin-bottom: 12px;
+        }
       }
 
       img,
diff --git a/packages/console/app/src/routes/changelog/index.tsx b/packages/console/app/src/routes/changelog/index.tsx
index 34fd5f83b73..87e021ec88c 100644
--- a/packages/console/app/src/routes/changelog/index.tsx
+++ b/packages/console/app/src/routes/changelog/index.tsx
@@ -5,7 +5,7 @@ import { Header } from "~/component/header"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
 import { config } from "~/config"
-import { For, Show } from "solid-js"
+import { For, Show, createSignal } from "solid-js"
 
 type Release = {
   tag_name: string
@@ -40,21 +40,22 @@ function formatDate(dateString: string) {
   })
 }
 
-type Highlight = {
-  source: string
+type HighlightMedia = { type: "video"; src: string } | { type: "image"; src: string; width: string; height: string }
+
+type HighlightItem = {
   title: string
   description: string
   shortDescription?: string
-  image?: {
-    src: string
-    width: string
-    height: string
-  }
-  video?: string
+  media: HighlightMedia
 }
 
-function parseHighlights(body: string): Highlight[] {
-  const highlights: Highlight[] = []
+type HighlightGroup = {
+  source: string
+  items: HighlightItem[]
+}
+
+function parseHighlights(body: string): HighlightGroup[] {
+  const groups = new Map<string, HighlightItem[]>()
   const regex = /<highlight\s+source="([^"]+)">([\s\S]*?)<\/highlight>/g
   let match
 
@@ -64,33 +65,32 @@ function parseHighlights(body: string): Highlight[] {
 
     const titleMatch = content.match(/<h2>([^<]+)<\/h2>/)
     const pMatch = content.match(/<p(?:\s+short="([^"]*)")?>([^<]+)<\/p>/)
-    const imgMatch = content.match(/<img\s+width="([^"]+)"\s+height="([^"]+)"\s+alt="([^"]*)"\s+src="([^"]+)"/)
-    // Match standalone GitHub asset URLs (videos)
+    const imgMatch = content.match(/<img\s+width="([^"]+)"\s+height="([^"]+)"\s+alt="[^"]*"\s+src="([^"]+)"/)
     const videoMatch = content.match(/^\s*(https:\/\/github\.com\/user-attachments\/assets\/[a-f0-9-]+)\s*$/m)
 
-    if (titleMatch) {
-      highlights.push({
-        source,
+    let media: HighlightMedia | undefined
+    if (videoMatch) {
+      media = { type: "video", src: videoMatch[1] }
+    } else if (imgMatch) {
+      media = { type: "image", src: imgMatch[3], width: imgMatch[1], height: imgMatch[2] }
+    }
+
+    if (titleMatch && media) {
+      const item: HighlightItem = {
         title: titleMatch[1],
         description: pMatch?.[2] || "",
         shortDescription: pMatch?.[1],
-        image: imgMatch
-          ? {
-              width: imgMatch[1],
-              height: imgMatch[2],
-              src: imgMatch[4],
-            }
-          : undefined,
-        video: videoMatch?.[1],
-      })
+        media,
+      }
+
+      if (!groups.has(source)) {
+        groups.set(source, [])
+      }
+      groups.get(source)!.push(item)
     }
   }
 
-  return highlights
-}
-
-function toTitleCase(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+  return Array.from(groups.entries()).map(([source, items]) => ({ source, items }))
 }
 
 function parseMarkdown(body: string) {
@@ -142,27 +142,60 @@ function ReleaseItem(props: { item: string }) {
   )
 }
 
-function HighlightCard(props: { highlight: Highlight }) {
+function HighlightSection(props: { group: HighlightGroup }) {
   return (
     <div data-component="highlight">
-      <h4>{props.highlight.source}</h4>
-      <p data-slot="title">{props.highlight.title}</p>
-      <p>{props.highlight.description}</p>
-      <Show when={props.highlight.video}>
-        <video src={props.highlight.video} controls autoplay loop muted playsinline />
-      </Show>
-      <Show when={props.highlight.image && !props.highlight.video}>
-        <img
-          src={props.highlight.image!.src}
-          alt={props.highlight.title}
-          width={props.highlight.image!.width}
-          height={props.highlight.image!.height}
-        />
+      <h4>{props.group.source}</h4>
+      <hr />
+      <For each={props.group.items}>
+        {(item) => (
+          <div data-slot="highlight-item">
+            <p data-slot="title">{item.title}</p>
+            <p>{item.description}</p>
+            <Show when={item.media.type === "video"}>
+              <video src={item.media.src} controls autoplay loop muted playsinline />
+            </Show>
+            <Show when={item.media.type === "image"}>
+              <img
+                src={item.media.src}
+                alt={item.title}
+                width={(item.media as { width: string }).width}
+                height={(item.media as { height: string }).height}
+              />
+            </Show>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+function CollapsibleSection(props: { section: { title: string; items: string[] } }) {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <div data-component="collapsible-section">
+      <button data-slot="toggle" onClick={() => setOpen(!open())}>
+        <span data-slot="icon">{open() ? "▾" : "▸"}</span>
+        <span>{props.section.title}</span>
+      </button>
+      <Show when={open()}>
+        <ul>
+          <For each={props.section.items}>{(item) => <ReleaseItem item={item} />}</For>
+        </ul>
       </Show>
     </div>
   )
 }
 
+function CollapsibleSections(props: { sections: { title: string; items: string[] }[] }) {
+  return (
+    <div data-component="collapsible-sections">
+      <For each={props.sections}>{(section) => <CollapsibleSection section={section} />}</For>
+    </div>
+  )
+}
+
 export default function Changelog() {
   const releases = createAsync(() => getReleases())
 
@@ -198,19 +231,24 @@ export default function Changelog() {
                     <div data-slot="content">
                       <Show when={parsed().highlights.length > 0}>
                         <div data-component="highlights">
-                          <For each={parsed().highlights}>{(highlight) => <HighlightCard highlight={highlight} />}</For>
+                          <For each={parsed().highlights}>{(group) => <HighlightSection group={group} />}</For>
                         </div>
                       </Show>
-                      <For each={parsed().sections}>
-                        {(section) => (
-                          <div data-component="section">
-                            <h3>{section.title}</h3>
-                            <ul>
-                              <For each={section.items}>{(item) => <ReleaseItem item={item} />}</For>
-                            </ul>
-                          </div>
-                        )}
-                      </For>
+                      <Show when={parsed().highlights.length > 0 && parsed().sections.length > 0}>
+                        <CollapsibleSections sections={parsed().sections} />
+                      </Show>
+                      <Show when={parsed().highlights.length === 0}>
+                        <For each={parsed().sections}>
+                          {(section) => (
+                            <div data-component="section">
+                              <h3>{section.title}</h3>
+                              <ul>
+                                <For each={section.items}>{(item) => <ReleaseItem item={item} />}</For>
+                              </ul>
+                            </div>
+                          )}
+                        </For>
+                      </Show>
                     </div>
                   </article>
                 )