fix(app): Fixes #16141 overlay happen in first user message.

AGENTS.md

@@ -122,3 +122,7 @@ const table = sqliteTable("session", {
 - Avoid mocks as much as possible
 - Test actual implementation, do not duplicate logic into tests
 - Tests cannot run from repo root (guard: `do-not-run-tests-from-root`); run from package dirs like `packages/opencode`.
+
+## Type Checking
+
+- Always run `bun typecheck` from package directories (e.g., `packages/opencode`), never `tsc` directly.

github/index.ts

@@ -8,6 +8,7 @@ import type { Context as GitHubContext } from "@actions/github/lib/context"
 import type { IssueCommentEvent, PullRequestReviewCommentEvent } from "@octokit/webhooks-types"
 import { createOpencodeClient } from "@opencode-ai/sdk"
 import { spawn } from "node:child_process"
+import { setTimeout as sleep } from "node:timers/promises"
 
 type GitHubAuthor = {
   login: string
@@ -281,7 +282,7 @@ async function assertOpencodeConnected() {
       connected = true
       break
     } catch (e) {}
-    await Bun.sleep(300)
+    await sleep(300)
   } while (retry++ < 30)
 
   if (!connected) {

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-ZmxeRNy2chc9py4m1iW6B+c/NSccMnVZ0lfni/EMdHw=",
-    "aarch64-linux": "sha256-R+1mxsmAQicerN8ixVy0ff6V8bZ4GH18MHpihvWnaTg=",
-    "aarch64-darwin": "sha256-m+QT20ohlqo9e86qXu67eKthZm6VDRLwlqJ9CNlEV+0=",
-    "x86_64-darwin": "sha256-4GeNPyTT2Hq4rxHGSON23ul5Ud3yFGE0QUVsB03Gidc="
+    "x86_64-linux": "sha256-ZVmMw/nArbQtdB1tRrLHJFsciDAf88/SnUd90VVADh0=",
+    "aarch64-linux": "sha256-9mO8Oddy2knW1grGiBYvRiltVz9IN03rigo2tyyPwaU=",
+    "aarch64-darwin": "sha256-c7qucWy4aBytwt5M9nnGOcn9XolGCdHpSNjtcPXx/bk=",
+    "x86_64-darwin": "sha256-IeSD87LihSQWeC34YPpD927WbYzS+ZHe1e67mDcfRzM="
   }
 }

packages/app/src/api/releases.ts

@@ -0,0 +1,50 @@
+import type { Platform } from "@/context/platform"
+
+const REPO = "anomalyco/opencode"
+const GITHUB_API_URL = `https://api.github.com/repos/${REPO}/releases`
+const PER_PAGE = 30
+const CACHE_TTL = 1000 * 60 * 30
+const CACHE_KEY = "opencode.releases"
+
+type Release = {
+  tag: string
+  body: string
+  date: string
+}
+
+function loadCache() {
+  const raw = localStorage.getItem(CACHE_KEY)
+  return raw ? JSON.parse(raw) : null
+}
+
+function saveCache(data: { releases: Release[]; timestamp: number }) {
+  localStorage.setItem(CACHE_KEY, JSON.stringify(data))
+}
+
+export async function fetchReleases(platform: Platform): Promise<{ releases: Release[] }> {
+  const now = Date.now()
+  const cached = loadCache()
+
+  if (cached && now - cached.timestamp < CACHE_TTL) {
+    return { releases: cached.releases }
+  }
+
+  const fetcher = platform.fetch ?? fetch
+  const res = await fetcher(`${GITHUB_API_URL}?per_page=${PER_PAGE}`, {
+    headers: { Accept: "application/vnd.github.v3+json" },
+  }).then((r) => (r.ok ? r.json() : Promise.reject(new Error("Failed to load"))))
+
+  const releases = (Array.isArray(res) ? res : []).map((r) => ({
+    tag: r.tag_name ?? "Unknown",
+    body: (r.body ?? "")
+      .replace(/#(\d+)/g, (_: string, id: string) => `[#${id}](https://github.com/anomalyco/opencode/pull/${id})`)
+      .replace(/@([a-zA-Z0-9_-]+)/g, (_: string, u: string) => `[@${u}](https://github.com/${u})`),
+    date: r.published_at ?? "",
+  }))
+
+  saveCache({ releases, timestamp: now })
+
+  return { releases }
+}
+
+export type { Release }

packages/app/src/components/dialog-changelog.css

@@ -0,0 +1,150 @@
+.dialog-changelog {
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-changelog [data-slot="dialog-body"] {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.dialog-changelog-list {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.dialog-changelog-list [data-slot="list-scroll"] {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-weak-base) transparent;
+}
+
+.dialog-changelog-list [data-slot="list-scroll"]::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.dialog-changelog-list [data-slot="list-scroll"]::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 5px;
+}
+
+.dialog-changelog-list [data-slot="list-scroll"]::-webkit-scrollbar-thumb {
+  background: var(--border-weak-base);
+  border-radius: 5px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+
+.dialog-changelog-list [data-slot="list-scroll"]::-webkit-scrollbar-thumb:hover {
+  background: var(--border-weak-base);
+}
+
+.dialog-changelog-header {
+  padding: 8px 12px 8px 8px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--surface-raised-stronger-non-alpha);
+}
+
+.dialog-changelog-header::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 16px;
+  background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.dialog-changelog-header[data-stuck="true"]::after {
+  opacity: 1;
+}
+
+
+
+.dialog-changelog-version {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.dialog-changelog-date {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-weak);
+}
+
+.dialog-changelog-list [data-slot="list-item"] {
+  margin-bottom: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: default;
+  display: block;
+  text-align: left;
+}
+
+.dialog-changelog-list [data-slot="list-item"]:hover {
+  background: transparent;
+}
+
+.dialog-changelog-list [data-slot="list-item"]:focus {
+  outline: none;
+}
+
+.dialog-changelog-list [data-slot="list-item"]:focus-visible {
+  outline: 2px solid var(--focus-base);
+  outline-offset: 2px;
+}
+
+.dialog-changelog-content {
+  padding: 0 8px 24px;
+}
+
+.dialog-changelog-markdown h2 {
+  border-bottom: 1px solid var(--border-weak-base);
+  padding-bottom: 4px;
+  margin: 32px 0 12px 0;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.dialog-changelog-markdown h2:first-child {
+  margin-top: 16px;
+}
+
+.dialog-changelog-markdown a.external-link {
+  color: var(--text-interactive-base);
+  font-weight: 500;
+}
+
+.dialog-changelog-markdown a.external-link[href^="https://github.com/anomalyco/opencode/pull/"],
+.dialog-changelog-markdown a.external-link[href^="https://github.com/anomalyco/opencode/issues/"],
+.dialog-changelog-markdown a.external-link[href^="https://github.com/"]
+{
+  border-radius: 3px;
+  padding: 0 2px;
+}
+
+.dialog-changelog-markdown a.external-link[href^="https://github.com/anomalyco/opencode/pull/"]:hover,
+.dialog-changelog-markdown a.external-link[href^="https://github.com/anomalyco/opencode/issues/"]:hover,
+.dialog-changelog-markdown a.external-link[href^="https://github.com/"]:hover
+{
+  background: var(--surface-weak-base);
+}

packages/app/src/components/dialog-changelog.tsx

@@ -0,0 +1,43 @@
+import { createResource, Suspense, ErrorBoundary, Show } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { DataProvider } from "@opencode-ai/ui/context"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { fetchReleases } from "@/api/releases"
+import { ReleaseList } from "@/components/release-list"
+
+export function DialogChangelog() {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const [data] = createResource(() => fetchReleases(platform))
+
+  return (
+    <Dialog size="x-large" transition title="Changelog">
+      <DataProvider data={{ session: [], session_status: {}, session_diff: {}, message: {}, part: {} }} directory="">
+        <div class="flex-1 min-h-0 flex flex-col">
+          <ErrorBoundary
+            fallback={(e) => (
+              <p class="text-text-weak p-6">
+                {e instanceof Error ? e.message : "Failed to load changelog"}
+              </p>
+            )}
+          >
+            <Suspense fallback={<p class="text-text-weak p-6">{language.t("common.loading")}...</p>}>
+              <Show
+                when={(data()?.releases.length ?? 0) > 0}
+                fallback={<p class="text-text-weak p-6">{language.t("common.noReleasesFound")}</p>}
+              >
+                <ReleaseList
+                  releases={data()!.releases}
+                  hasMore={false}
+                  loadingMore={false}
+                  onLoadMore={() => {}}
+                />
+              </Show>
+            </Suspense>
+          </ErrorBoundary>
+        </div>
+      </DataProvider>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-select-file.tsx

@@ -459,4 +459,4 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
       </List>
     </Dialog>
   )
-}
+}

packages/app/src/components/dialog-settings.tsx

@@ -2,16 +2,25 @@ import { Component } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Button } from "@opencode-ai/ui/button"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { SettingsGeneral } from "./settings-general"
 import { SettingsKeybinds } from "./settings-keybinds"
 import { SettingsProviders } from "./settings-providers"
 import { SettingsModels } from "./settings-models"
+import { SettingsArchive } from "./settings-archive"
+import { DialogChangelog } from "@/components/dialog-changelog"
 
 export const DialogSettings: Component = () => {
   const language = useLanguage()
   const platform = usePlatform()
+  const dialog = useDialog()
+
+  function handleShowChangelog() {
+    dialog.show(() => <DialogChangelog />)
+  }
 
   return (
     <Dialog size="x-large" transition>
@@ -47,11 +56,27 @@ export const DialogSettings: Component = () => {
                     </Tabs.Trigger>
                   </div>
                 </div>
+
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.data")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="archive">
+                      <Icon name="archive" />
+                      {language.t("settings.archive.title")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
               <span>{language.t("app.name.desktop")}</span>
               <span class="text-11-regular">v{platform.version}</span>
+              <button
+                class="text-11-regular text-text-weak hover:text-text-base self-start"
+                onClick={handleShowChangelog}
+              >
+                Changelog
+              </button>
             </div>
           </div>
         </Tabs.List>
@@ -67,6 +92,9 @@ export const DialogSettings: Component = () => {
         <Tabs.Content value="models" class="no-scrollbar">
           <SettingsModels />
         </Tabs.Content>
+        <Tabs.Content value="archive" class="no-scrollbar">
+          <SettingsArchive />
+        </Tabs.Content>
       </Tabs>
     </Dialog>
   )