feat: add desktop/web app package (#2606)

Co-authored-by: adamdotdevin <[email protected]>
Co-authored-by: Adam <[email protected]>
Co-authored-by: GitHub Action <[email protected]>

6 files changed, 2489 insertions, 0 deletions

diff --git a/packages/app/src/components/code.tsx b/packages/app/src/components/code.tsx
new file mode 100644
index 000000000..4eed5814e
--- /dev/null
+++ b/packages/app/src/components/code.tsx
@@ -0,0 +1,1358 @@
+import { bundledLanguages, codeToHtml, type ShikiTransformer } from "shiki"
+import {
+  createResource,
+  splitProps,
+  Suspense,
+  type ComponentProps,
+  createEffect,
+  onMount,
+  onCleanup,
+  createMemo,
+} from "solid-js"
+import { useLocal } from "@/context"
+import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
+
+interface Props extends ComponentProps<"div"> {
+  code: string
+  path: string
+}
+
+function transformerUnifiedDiff(): ShikiTransformer {
+  const kinds = new Map<number, string>()
+  const meta = new Map<number, { old?: number; new?: number; sign?: string }>()
+  let isDiff = false
+
+  return {
+    name: "unified-diff",
+    preprocess(input) {
+      kinds.clear()
+      meta.clear()
+      isDiff = false
+
+      const ls = input.split(/\r?\n/)
+      const out: Array<string> = []
+      let oldNo = 0
+      let newNo = 0
+      let inHunk = false
+
+      for (let i = 0; i < ls.length; i++) {
+        const s = ls[i]
+
+        const m = s.match(/^@@\s*-(\d+)(?:,(\d+))?\s+\+(\d+)(?:,(\d+))?\s*@@/)
+        if (m) {
+          isDiff = true
+          inHunk = true
+          oldNo = parseInt(m[1], 10)
+          newNo = parseInt(m[3], 10)
+          continue
+        }
+
+        if (
+          /^diff --git /.test(s) ||
+          /^Index: /.test(s) ||
+          /^--- /.test(s) ||
+          /^\+\+\+ /.test(s) ||
+          /^[=]{3,}$/.test(s) ||
+          /^\*{3,}$/.test(s) ||
+          /^\\ No newline at end of file$/.test(s)
+        ) {
+          isDiff = true
+          continue
+        }
+
+        if (!inHunk) {
+          out.push(s)
+          continue
+        }
+
+        if (/^\+/.test(s)) {
+          out.push(s)
+          const ln = out.length
+          kinds.set(ln, "add")
+          meta.set(ln, { new: newNo, sign: "+" })
+          newNo++
+          continue
+        }
+
+        if (/^-/.test(s)) {
+          out.push(s)
+          const ln = out.length
+          kinds.set(ln, "remove")
+          meta.set(ln, { old: oldNo, sign: "-" })
+          oldNo++
+          continue
+        }
+
+        if (/^ /.test(s)) {
+          out.push(s)
+          const ln = out.length
+          kinds.set(ln, "context")
+          meta.set(ln, { old: oldNo, new: newNo })
+          oldNo++
+          newNo++
+          continue
+        }
+
+        // fallback in hunks
+        out.push(s)
+      }
+
+      return out.join("\n")
+    },
+    code(node) {
+      if (isDiff) this.addClassToHast(node, "code-diff")
+    },
+    pre(node) {
+      if (isDiff) this.addClassToHast(node, "code-diff")
+    },
+    line(node, line) {
+      if (!isDiff) return
+      const kind = kinds.get(line)
+      if (!kind) return
+
+      const m = meta.get(line) || {}
+
+      this.addClassToHast(node, "diff-line")
+      this.addClassToHast(node, `diff-${kind}`)
+      node.properties = node.properties || {}
+      ;(node.properties as any)["data-diff"] = kind
+      if (m.old != undefined) (node.properties as any)["data-old"] = String(m.old)
+      if (m.new != undefined) (node.properties as any)["data-new"] = String(m.new)
+
+      const oldSpan = {
+        type: "element",
+        tagName: "span",
+        properties: { className: ["diff-oldln"] },
+        children: [{ type: "text", value: m.old != undefined ? String(m.old) : " " }],
+      }
+      const newSpan = {
+        type: "element",
+        tagName: "span",
+        properties: { className: ["diff-newln"] },
+        children: [{ type: "text", value: m.new != undefined ? String(m.new) : " " }],
+      }
+
+      if (kind === "add" || kind === "remove" || kind === "context") {
+        const first = (node.children && (node.children as any[])[0]) as any
+        if (first && first.type === "element" && first.children && first.children.length > 0) {
+          const t = first.children[0]
+          if (t && t.type === "text" && typeof t.value === "string" && t.value.length > 0) {
+            const ch = t.value[0]
+            if (ch === "+" || ch === "-" || ch === " ") t.value = t.value.slice(1)
+          }
+        }
+      }
+
+      const signSpan = {
+        type: "element",
+        tagName: "span",
+        properties: { className: ["diff-sign"] },
+        children: [{ type: "text", value: (m as any).sign || " " }],
+      }
+
+      // @ts-expect-error hast typing across versions
+      node.children = [oldSpan, newSpan, signSpan, ...(node.children || [])]
+    },
+  }
+}
+
+function transformerDiffGroups(): ShikiTransformer {
+  let group = -1
+  let inGroup = false
+  return {
+    name: "diff-groups",
+    pre() {
+      group = -1
+      inGroup = false
+    },
+    line(node) {
+      const props = (node.properties || {}) as any
+      const kind = props["data-diff"] as string | undefined
+      if (kind === "add" || kind === "remove") {
+        if (!inGroup) {
+          group += 1
+          inGroup = true
+        }
+        ;(node.properties as any)["data-chgrp"] = String(group)
+      } else {
+        inGroup = false
+      }
+    },
+  }
+}
+
+function applyDiffFolding(
+  root: HTMLElement,
+  context = 3,
+  options?: { expanded?: string[]; onExpand?: (key: string) => void; side?: "left" | "right" },
+) {
+  if (!root.classList.contains("code-diff")) return
+
+  // Cleanup: unwrap previous collapsed blocks and remove toggles
+  const blocks = Array.from(root.querySelectorAll<HTMLElement>(".diff-collapsed-block"))
+  for (const block of blocks) {
+    const p = block.parentNode
+    if (!p) {
+      block.remove()
+      continue
+    }
+    while (block.firstChild) p.insertBefore(block.firstChild, block)
+    block.remove()
+  }
+  const toggles = Array.from(root.querySelectorAll<HTMLElement>(".diff-collapsed"))
+  for (const t of toggles) t.remove()
+
+  const lines = Array.from(root.querySelectorAll<HTMLElement>(".diff-line"))
+  if (lines.length === 0) return
+
+  const n = lines.length
+  const isChange = lines.map((l) => l.dataset["diff"] === "add" || l.dataset["diff"] === "remove")
+  const isContext = lines.map((l) => l.dataset["diff"] === "context")
+  if (!isChange.some(Boolean)) return
+
+  const visible = new Array(n).fill(false) as boolean[]
+  for (let i = 0; i < n; i++) if (isChange[i]) visible[i] = true
+  for (let i = 0; i < n; i++) {
+    if (isChange[i]) {
+      const s = Math.max(0, i - context)
+      const e = Math.min(n - 1, i + context)
+      for (let j = s; j <= e; j++) if (isContext[j]) visible[j] = true
+    }
+  }
+
+  type Range = { start: number; end: number }
+  const ranges: Range[] = []
+  let i = 0
+  while (i < n) {
+    if (!visible[i] && isContext[i]) {
+      let j = i
+      while (j + 1 < n && !visible[j + 1] && isContext[j + 1]) j++
+      ranges.push({ start: i, end: j })
+      i = j + 1
+    } else {
+      i++
+    }
+  }
+
+  for (const r of ranges) {
+    const start = lines[r.start]
+    const end = lines[r.end]
+    const count = r.end - r.start + 1
+    const minCollapse = 20
+    if (count < minCollapse) {
+      continue
+    }
+
+    // Wrap the entire collapsed chunk (including trailing newline) so it takes no space
+    const block = document.createElement("span")
+    block.className = "diff-collapsed-block"
+    start.parentElement?.insertBefore(block, start)
+
+    let cur: Node | undefined = start
+    while (cur) {
+      const next: Node | undefined = cur.nextSibling || undefined
+      block.appendChild(cur)
+      if (cur === end) {
+        // Also move the newline after the last line into the block
+        if (next && next.nodeType === Node.TEXT_NODE && (next.textContent || "").startsWith("\n")) {
+          block.appendChild(next)
+        }
+        break
+      }
+      cur = next
+    }
+
+    block.style.display = "none"
+    const row = document.createElement("span")
+    row.className = "line diff-collapsed"
+    row.setAttribute("data-kind", "collapsed")
+    row.setAttribute("data-count", String(count))
+    row.setAttribute("tabindex", "0")
+    row.setAttribute("role", "button")
+
+    const oldln = document.createElement("span")
+    oldln.className = "diff-oldln"
+    oldln.textContent = " "
+
+    const newln = document.createElement("span")
+    newln.className = "diff-newln"
+    newln.textContent = " "
+
+    const sign = document.createElement("span")
+    sign.className = "diff-sign"
+    sign.textContent = "…"
+
+    const label = document.createElement("span")
+    label.textContent = `show ${count} unchanged line${count > 1 ? "s" : ""}`
+
+    const key = `o${start.dataset["old"] || ""}-${end.dataset["old"] || ""}:n${start.dataset["new"] || ""}-${end.dataset["new"] || ""}`
+
+    const show = (record = true) => {
+      if (record) options?.onExpand?.(key)
+      const p = block.parentNode
+      if (p) {
+        while (block.firstChild) p.insertBefore(block.firstChild, block)
+        block.remove()
+      }
+      row.remove()
+    }
+
+    row.addEventListener("click", () => show(true))
+    row.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault()
+        show(true)
+      }
+    })
+
+    block.parentElement?.insertBefore(row, block)
+    if (!options?.side || options.side === "left") row.appendChild(oldln)
+    if (!options?.side || options.side === "right") row.appendChild(newln)
+    row.appendChild(sign)
+    row.appendChild(label)
+
+    if (options?.expanded && options.expanded.includes(key)) {
+      show(false)
+    }
+  }
+}
+
+function applySplitDiff(container: HTMLElement) {
+  const pres = Array.from(container.querySelectorAll<HTMLPreElement>("pre"))
+  if (pres.length === 0) return
+  const originalPre = pres[0]
+  const originalCode = originalPre.querySelector("code") as HTMLElement | undefined
+  if (!originalCode || !originalCode.classList.contains("code-diff")) return
+
+  // Rebuild split each time to match current content
+  const existing = container.querySelector<HTMLElement>(".diff-split")
+  if (existing) existing.remove()
+
+  const grid = document.createElement("div")
+  grid.className = "diff-split grid grid-cols-2 gap-x-6"
+
+  const makeColumn = () => {
+    const pre = document.createElement("pre")
+    pre.className = originalPre.className
+    const code = document.createElement("code")
+    code.className = originalCode.className
+    pre.appendChild(code)
+    return { pre, code }
+  }
+
+  const left = makeColumn()
+  const right = makeColumn()
+
+  // Helpers
+  const cloneSide = (line: HTMLElement, side: "old" | "new"): HTMLElement => {
+    const clone = line.cloneNode(true) as HTMLElement
+    const oldln = clone.querySelector(".diff-oldln")
+    const newln = clone.querySelector(".diff-newln")
+    if (side === "old") {
+      if (newln) newln.remove()
+    } else {
+      if (oldln) oldln.remove()
+    }
+    return clone
+  }
+
+  const blankLine = (side: "old" | "new", kind: "add" | "remove"): HTMLElement => {
+    const span = document.createElement("span")
+    span.className = "line diff-line diff-blank"
+    span.setAttribute("data-diff", kind)
+    const ln = document.createElement("span")
+    ln.className = side === "old" ? "diff-oldln" : "diff-newln"
+    ln.textContent = " "
+    span.appendChild(ln)
+    return span
+  }
+
+  const lines = Array.from(originalCode.querySelectorAll<HTMLElement>(".diff-line"))
+  let i = 0
+  while (i < lines.length) {
+    const cur = lines[i]
+    const kind = cur.dataset["diff"]
+
+    if (kind === "context") {
+      left.code.appendChild(cloneSide(cur, "old"))
+      left.code.appendChild(document.createTextNode("\n"))
+      right.code.appendChild(cloneSide(cur, "new"))
+      right.code.appendChild(document.createTextNode("\n"))
+      i++
+      continue
+    }
+
+    if (kind === "remove") {
+      // Batch consecutive removes and following adds, then pair
+      const removes: HTMLElement[] = []
+      const adds: HTMLElement[] = []
+      let j = i
+      while (j < lines.length && lines[j].dataset["diff"] === "remove") {
+        removes.push(lines[j])
+        j++
+      }
+      let k = j
+      while (k < lines.length && lines[k].dataset["diff"] === "add") {
+        adds.push(lines[k])
+        k++
+      }
+
+      const pairs = Math.min(removes.length, adds.length)
+      for (let p = 0; p < pairs; p++) {
+        left.code.appendChild(cloneSide(removes[p], "old"))
+        left.code.appendChild(document.createTextNode("\n"))
+        right.code.appendChild(cloneSide(adds[p], "new"))
+        right.code.appendChild(document.createTextNode("\n"))
+      }
+      for (let p = pairs; p < removes.length; p++) {
+        left.code.appendChild(cloneSide(removes[p], "old"))
+        left.code.appendChild(document.createTextNode("\n"))
+        right.code.appendChild(blankLine("new", "remove"))
+        right.code.appendChild(document.createTextNode("\n"))
+      }
+      for (let p = pairs; p < adds.length; p++) {
+        left.code.appendChild(blankLine("old", "add"))
+        left.code.appendChild(document.createTextNode("\n"))
+        right.code.appendChild(cloneSide(adds[p], "new"))
+        right.code.appendChild(document.createTextNode("\n"))
+      }
+
+      i = k
+      continue
+    }
+
+    if (kind === "add") {
+      // Run of adds not preceded by removes
+      const adds: HTMLElement[] = []
+      let j = i
+      while (j < lines.length && lines[j].dataset["diff"] === "add") {
+        adds.push(lines[j])
+        j++
+      }
+      for (let p = 0; p < adds.length; p++) {
+        left.code.appendChild(blankLine("old", "add"))
+        left.code.appendChild(document.createTextNode("\n"))
+        right.code.appendChild(cloneSide(adds[p], "new"))
+        right.code.appendChild(document.createTextNode("\n"))
+      }
+      i = j
+      continue
+    }
+
+    // Any other kind: mirror as context
+    left.code.appendChild(cloneSide(cur, "old"))
+    left.code.appendChild(document.createTextNode("\n"))
+    right.code.appendChild(cloneSide(cur, "new"))
+    right.code.appendChild(document.createTextNode("\n"))
+    i++
+  }
+
+  grid.appendChild(left.pre)
+  grid.appendChild(right.pre)
+  container.appendChild(grid)
+}
+
+export function Code(props: Props) {
+  const ctx = useLocal()
+  const [local, others] = splitProps(props, ["class", "classList", "code", "path"])
+  const lang = createMemo(() => getFileExtension(local.path))
+
+  let container: HTMLDivElement | undefined
+  let isProgrammaticSelection = false
+
+  const [html] = createResource(
+    () => [local.code, lang()],
+    async ([code, lang]) => {
+      return (await codeToHtml(code || "", {
+        lang: lang && lang in bundledLanguages ? lang : "text",
+        theme: {
+          colors: {
+            "actionBar.toggledBackground": "var(--theme-background-element)",
+            "activityBarBadge.background": "var(--theme-accent)",
+            "checkbox.border": "var(--theme-border)",
+            "editor.background": "transparent",
+            "editor.foreground": "var(--theme-text)",
+            "editor.inactiveSelectionBackground": "var(--theme-background-element)",
+            "editor.selectionHighlightBackground": "var(--theme-border-active)",
+            "editorIndentGuide.activeBackground1": "var(--theme-border-subtle)",
+            "editorIndentGuide.background1": "var(--theme-border-subtle)",
+            "input.placeholderForeground": "var(--theme-text-muted)",
+            "list.activeSelectionIconForeground": "var(--theme-text)",
+            "list.dropBackground": "var(--theme-background-element)",
+            "menu.background": "var(--theme-background-panel)",
+            "menu.border": "var(--theme-border)",
+            "menu.foreground": "var(--theme-text)",
+            "menu.selectionBackground": "var(--theme-primary)",
+            "menu.separatorBackground": "var(--theme-border)",
+            "ports.iconRunningProcessForeground": "var(--theme-success)",
+            "sideBarSectionHeader.background": "transparent",
+            "sideBarSectionHeader.border": "var(--theme-border-subtle)",
+            "sideBarTitle.foreground": "var(--theme-text-muted)",
+            "statusBarItem.remoteBackground": "var(--theme-success)",
+            "statusBarItem.remoteForeground": "var(--theme-text)",
+            "tab.lastPinnedBorder": "var(--theme-border-subtle)",
+            "tab.selectedBackground": "var(--theme-background-element)",
+            "tab.selectedForeground": "var(--theme-text-muted)",
+            "terminal.inactiveSelectionBackground": "var(--theme-background-element)",
+            "widget.border": "var(--theme-border)",
+          },
+          displayName: "opencode",
+          name: "opencode",
+          semanticHighlighting: true,
+          semanticTokenColors: {
+            customLiteral: "var(--theme-syntax-function)",
+            newOperator: "var(--theme-syntax-operator)",
+            numberLiteral: "var(--theme-syntax-number)",
+            stringLiteral: "var(--theme-syntax-string)",
+          },
+          tokenColors: [
+            {
+              scope: [
+                "meta.embedded",
+                "source.groovy.embedded",
+                "string meta.image.inline.markdown",
+                "variable.legacy.builtin.python",
+              ],
+              settings: {
+                foreground: "var(--theme-text)",
+              },
+            },
+            {
+              scope: "emphasis",
+              settings: {
+                fontStyle: "italic",
+              },
+            },
+            {
+              scope: "strong",
+              settings: {
+                fontStyle: "bold",
+              },
+            },
+            {
+              scope: "header",
+              settings: {
+                foreground: "var(--theme-markdown-heading)",
+              },
+            },
+            {
+              scope: "comment",
+              settings: {
+                foreground: "var(--theme-syntax-comment)",
+              },
+            },
+            {
+              scope: "constant.language",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: [
+                "constant.numeric",
+                "variable.other.enummember",
+                "keyword.operator.plus.exponent",
+                "keyword.operator.minus.exponent",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: "constant.regexp",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "entity.name.tag",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["entity.name.tag.css", "entity.name.tag.less"],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "entity.other.attribute-name",
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: [
+                "entity.other.attribute-name.class.css",
+                "source.css entity.other.attribute-name.class",
+                "entity.other.attribute-name.id.css",
+                "entity.other.attribute-name.parent-selector.css",
+                "entity.other.attribute-name.parent.less",
+                "source.css entity.other.attribute-name.pseudo-class",
+                "entity.other.attribute-name.pseudo-element.css",
+                "source.css.less entity.other.attribute-name.id",
+                "entity.other.attribute-name.scss",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "invalid",
+              settings: {
+                foreground: "var(--theme-error)",
+              },
+            },
+            {
+              scope: "markup.underline",
+              settings: {
+                fontStyle: "underline",
+              },
+            },
+            {
+              scope: "markup.bold",
+              settings: {
+                fontStyle: "bold",
+                foreground: "var(--theme-markdown-strong)",
+              },
+            },
+            {
+              scope: "markup.heading",
+              settings: {
+                fontStyle: "bold",
+                foreground: "var(--theme-markdown-heading)",
+              },
+            },
+            {
+              scope: "markup.italic",
+              settings: {
+                fontStyle: "italic",
+              },
+            },
+            {
+              scope: "markup.strikethrough",
+              settings: {
+                fontStyle: "strikethrough",
+              },
+            },
+            {
+              scope: "markup.inserted",
+              settings: {
+                foreground: "var(--theme-diff-added)",
+              },
+            },
+            {
+              scope: "markup.deleted",
+              settings: {
+                foreground: "var(--theme-diff-removed)",
+              },
+            },
+            {
+              scope: "markup.changed",
+              settings: {
+                foreground: "var(--theme-diff-context)",
+              },
+            },
+            {
+              scope: "punctuation.definition.quote.begin.markdown",
+              settings: {
+                foreground: "var(--theme-markdown-block-quote)",
+              },
+            },
+            {
+              scope: "punctuation.definition.list.begin.markdown",
+              settings: {
+                foreground: "var(--theme-markdown-list-enumeration)",
+              },
+            },
+            {
+              scope: "markup.inline.raw",
+              settings: {
+                foreground: "var(--theme-markdown-code)",
+              },
+            },
+            {
+              scope: "punctuation.definition.tag",
+              settings: {
+                foreground: "var(--theme-syntax-punctuation)",
+              },
+            },
+            {
+              scope: ["meta.preprocessor", "entity.name.function.preprocessor"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "meta.preprocessor.string",
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "meta.preprocessor.numeric",
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: "meta.structure.dictionary.key.python",
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: "meta.diff.header",
+              settings: {
+                foreground: "var(--theme-diff-hunk-header)",
+              },
+            },
+            {
+              scope: "storage",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "storage.type",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["storage.modifier", "keyword.operator.noexcept"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["string", "meta.embedded.assembly"],
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "string.tag",
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "string.value",
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "string.regexp",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: [
+                "punctuation.definition.template-expression.begin",
+                "punctuation.definition.template-expression.end",
+                "punctuation.section.embedded",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["meta.template.expression"],
+              settings: {
+                foreground: "var(--theme-text)",
+              },
+            },
+            {
+              scope: [
+                "support.type.vendored.property-name",
+                "support.type.property-name",
+                "source.css variable",
+                "source.coffee.embedded",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: "keyword",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "keyword.control",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "keyword.operator",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: [
+                "keyword.operator.new",
+                "keyword.operator.expression",
+                "keyword.operator.cast",
+                "keyword.operator.sizeof",
+                "keyword.operator.alignof",
+                "keyword.operator.typeid",
+                "keyword.operator.alignas",
+                "keyword.operator.instanceof",
+                "keyword.operator.logical.python",
+                "keyword.operator.wordlike",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "keyword.other.unit",
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "support.function.git-rebase",
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: "constant.sha.git-rebase",
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: [
+                "storage.modifier.import.java",
+                "variable.language.wildcard.java",
+                "storage.modifier.package.java",
+              ],
+              settings: {
+                foreground: "var(--theme-text)",
+              },
+            },
+            {
+              scope: "variable.language",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: [
+                "entity.name.function",
+                "support.function",
+                "support.constant.handlebars",
+                "source.powershell variable.other.member",
+                "entity.name.operator.custom-literal",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-function)",
+              },
+            },
+            {
+              scope: [
+                "support.class",
+                "support.type",
+                "entity.name.type",
+                "entity.name.namespace",
+                "entity.other.attribute",
+                "entity.name.scope-resolution",
+                "entity.name.class",
+                "storage.type.numeric.go",
+                "storage.type.byte.go",
+                "storage.type.boolean.go",
+                "storage.type.string.go",
+                "storage.type.uintptr.go",
+                "storage.type.error.go",
+                "storage.type.rune.go",
+                "storage.type.cs",
+                "storage.type.generic.cs",
+                "storage.type.modifier.cs",
+                "storage.type.variable.cs",
+                "storage.type.annotation.java",
+                "storage.type.generic.java",
+                "storage.type.java",
+                "storage.type.object.array.java",
+                "storage.type.primitive.array.java",
+                "storage.type.primitive.java",
+                "storage.type.token.java",
+                "storage.type.groovy",
+                "storage.type.annotation.groovy",
+                "storage.type.parameters.groovy",
+                "storage.type.generic.groovy",
+                "storage.type.object.array.groovy",
+                "storage.type.primitive.array.groovy",
+                "storage.type.primitive.groovy",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-type)",
+              },
+            },
+            {
+              scope: [
+                "meta.type.cast.expr",
+                "meta.type.new.expr",
+                "support.constant.math",
+                "support.constant.dom",
+                "support.constant.json",
+                "entity.other.inherited-class",
+                "punctuation.separator.namespace.ruby",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-type)",
+              },
+            },
+            {
+              scope: [
+                "keyword.control",
+                "source.cpp keyword.operator.new",
+                "keyword.operator.delete",
+                "keyword.other.using",
+                "keyword.other.directive.using",
+                "keyword.other.operator",
+                "entity.name.operator",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: [
+                "variable",
+                "meta.definition.variable.name",
+                "support.variable",
+                "entity.name.variable",
+                "constant.other.placeholder",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: ["variable.other.constant", "variable.other.enummember"],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: ["meta.object-literal.key"],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: [
+                "support.constant.property-value",
+                "support.constant.font-name",
+                "support.constant.media-type",
+                "support.constant.media",
+                "constant.other.color.rgb-value",
+                "constant.other.rgb-value",
+                "support.constant.color",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: [
+                "punctuation.definition.group.regexp",
+                "punctuation.definition.group.assertion.regexp",
+                "punctuation.definition.character-class.regexp",
+                "punctuation.character.set.begin.regexp",
+                "punctuation.character.set.end.regexp",
+                "keyword.operator.negation.regexp",
+                "support.other.parenthesis.regexp",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: [
+                "constant.character.character-class.regexp",
+                "constant.other.character-class.set.regexp",
+                "constant.other.character-class.regexp",
+                "constant.character.set.regexp",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "keyword.operator.quantifier.regexp",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: ["constant.character", "constant.other.option"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "constant.character.escape",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "entity.name.label",
+              settings: {
+                foreground: "var(--theme-text-muted)",
+              },
+            },
+          ],
+          type: "dark",
+        },
+        transformers: [transformerUnifiedDiff(), transformerDiffGroups()],
+      })) as string
+    },
+  )
+
+  onMount(() => {
+    if (!container) return
+
+    let ticking = false
+    const onScroll = () => {
+      if (!container) return
+      if (ctx.file.active()?.path !== local.path) return
+      if (ticking) return
+      ticking = true
+      requestAnimationFrame(() => {
+        ticking = false
+        ctx.file.scroll(local.path, container!.scrollTop)
+      })
+    }
+
+    const onSelectionChange = () => {
+      if (!container) return
+      if (isProgrammaticSelection) return
+      if (ctx.file.active()?.path !== local.path) return
+      const d = getSelectionInContainer(container)
+      if (!d) return
+      const p = ctx.file.node(local.path)?.selection
+      if (p && p.startLine === d.sl && p.endLine === d.el && p.startChar === d.sch && p.endChar === d.ech) return
+      ctx.file.select(local.path, { startLine: d.sl, startChar: d.sch, endLine: d.el, endChar: d.ech })
+    }
+
+    const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (ctx.file.active()?.path !== local.path) return
+      const ae = document.activeElement as HTMLElement | undefined
+      const tag = (ae?.tagName || "").toLowerCase()
+      const inputFocused = !!ae && (tag === "input" || tag === "textarea" || ae.isContentEditable)
+      if (inputFocused) return
+      if (e.getModifierState(MOD) && e.key.toLowerCase() === "a") {
+        e.preventDefault()
+        if (!container) return
+        const element = container.querySelector("code") as HTMLElement | undefined
+        if (!element) return
+        const lines = Array.from(element.querySelectorAll(".line"))
+        if (!lines.length) return
+        const r = document.createRange()
+        const last = lines[lines.length - 1]
+        r.selectNodeContents(last)
+        const lastLen = r.toString().length
+        ctx.file.select(local.path, { startLine: 1, startChar: 0, endLine: lines.length, endChar: lastLen })
+      }
+    }
+
+    container.addEventListener("scroll", onScroll)
+    document.addEventListener("selectionchange", onSelectionChange)
+    document.addEventListener("keydown", onKeyDown)
+
+    onCleanup(() => {
+      container?.removeEventListener("scroll", onScroll)
+      document.removeEventListener("selectionchange", onSelectionChange)
+      document.removeEventListener("keydown", onKeyDown)
+    })
+  })
+
+  // Restore scroll position from store when content is ready
+  createEffect(() => {
+    const content = html()
+    if (!container || !content) return
+    const top = ctx.file.node(local.path)?.scrollTop
+    if (top !== undefined && container.scrollTop !== top) container.scrollTop = top
+  })
+
+  // Sync selection from store -> DOM
+  createEffect(() => {
+    const content = html()
+    if (!container || !content) return
+    if (ctx.file.active()?.path !== local.path) return
+    const codeEl = container.querySelector("code") as HTMLElement | undefined
+    if (!codeEl) return
+    const target = ctx.file.node(local.path)?.selection
+    const current = getSelectionInContainer(container)
+    const sel = window.getSelection()
+    if (!sel) return
+    if (!target) {
+      if (current) {
+        isProgrammaticSelection = true
+        sel.removeAllRanges()
+        queueMicrotask(() => {
+          isProgrammaticSelection = false
+        })
+      }
+      return
+    }
+    const matches = !!(
+      current &&
+      current.sl === target.startLine &&
+      current.sch === target.startChar &&
+      current.el === target.endLine &&
+      current.ech === target.endChar
+    )
+    if (matches) return
+    const lines = Array.from(codeEl.querySelectorAll(".line"))
+    if (lines.length === 0) return
+    let sIdx = Math.max(0, target.startLine - 1)
+    let eIdx = Math.max(0, target.endLine - 1)
+    let sChar = Math.max(0, target.startChar || 0)
+    let eChar = Math.max(0, target.endChar || 0)
+    if (sIdx > eIdx || (sIdx === eIdx && sChar > eChar)) {
+      const ti = sIdx
+      sIdx = eIdx
+      eIdx = ti
+      const tc = sChar
+      sChar = eChar
+      eChar = tc
+    }
+    if (eChar === 0 && eIdx > sIdx) {
+      eIdx = eIdx - 1
+      eChar = Number.POSITIVE_INFINITY
+    }
+    if (sIdx >= lines.length) return
+    if (eIdx >= lines.length) eIdx = lines.length - 1
+    const s = getNodeOffsetInLine(lines[sIdx], sChar) ?? { node: lines[sIdx], offset: 0 }
+    const e = getNodeOffsetInLine(lines[eIdx], eChar) ?? { node: lines[eIdx], offset: lines[eIdx].childNodes.length }
+    const range = document.createRange()
+    range.setStart(s.node, s.offset)
+    range.setEnd(e.node, e.offset)
+    isProgrammaticSelection = true
+    sel.removeAllRanges()
+    sel.addRange(range)
+    queueMicrotask(() => {
+      isProgrammaticSelection = false
+    })
+  })
+
+  // Build/toggle split layout and apply folding (both unified and split)
+  createEffect(() => {
+    const content = html()
+    if (!container || !content) return
+    const view = ctx.file.view(local.path)
+
+    const pres = Array.from(container.querySelectorAll<HTMLPreElement>("pre"))
+    if (pres.length === 0) return
+    const originalPre = pres[0]
+
+    const split = container.querySelector<HTMLElement>(".diff-split")
+    if (view === "diff-split") {
+      applySplitDiff(container)
+      const next = container.querySelector<HTMLElement>(".diff-split")
+      if (next) next.style.display = ""
+      originalPre.style.display = "none"
+    } else {
+      if (split) split.style.display = "none"
+      originalPre.style.display = ""
+    }
+
+    const expanded = ctx.file.folded(local.path)
+    if (view === "diff-split") {
+      const left = container.querySelector<HTMLElement>(".diff-split pre:nth-child(1) code")
+      const right = container.querySelector<HTMLElement>(".diff-split pre:nth-child(2) code")
+      if (left)
+        applyDiffFolding(left, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "left" })
+      if (right)
+        applyDiffFolding(right, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "right" })
+    } else {
+      const code = container.querySelector<HTMLElement>("pre code")
+      if (code)
+        applyDiffFolding(code, 3, {
+          expanded,
+          onExpand: (key) => ctx.file.unfold(local.path, key),
+        })
+    }
+  })
+
+  // Highlight groups + scroll coupling
+  const clearHighlights = () => {
+    if (!container) return
+    container.querySelectorAll<HTMLElement>(".diff-selected").forEach((el) => el.classList.remove("diff-selected"))
+  }
+
+  const applyHighlight = (idx: number, scroll?: boolean) => {
+    if (!container) return
+    const view = ctx.file.view(local.path)
+    if (view === "raw") return
+
+    clearHighlights()
+
+    const nodes: HTMLElement[] = []
+    if (view === "diff-split") {
+      const left = container.querySelector<HTMLElement>(".diff-split pre:nth-child(1) code")
+      const right = container.querySelector<HTMLElement>(".diff-split pre:nth-child(2) code")
+      if (left)
+        nodes.push(...Array.from(left.querySelectorAll<HTMLElement>(`[data-chgrp="${idx}"][data-diff="remove"]`)))
+      if (right)
+        nodes.push(...Array.from(right.querySelectorAll<HTMLElement>(`[data-chgrp="${idx}"][data-diff="add"]`)))
+    } else {
+      const code = container.querySelector<HTMLElement>("pre code")
+      if (code) nodes.push(...Array.from(code.querySelectorAll<HTMLElement>(`[data-chgrp="${idx}"]`)))
+    }
+
+    for (const n of nodes) n.classList.add("diff-selected")
+    if (scroll && nodes.length) nodes[0].scrollIntoView({ block: "center", behavior: "smooth" })
+  }
+
+  const countGroups = () => {
+    if (!container) return 0
+    const code = container.querySelector<HTMLElement>("pre code")
+    if (!code) return 0
+    const set = new Set<string>()
+    for (const el of Array.from(code.querySelectorAll<HTMLElement>(".diff-line[data-chgrp]"))) {
+      const v = el.getAttribute("data-chgrp")
+      if (v != undefined) set.add(v)
+    }
+    return set.size
+  }
+
+  let lastIdx: number | undefined = undefined
+  let lastView: string | undefined
+  let lastContent: string | undefined
+  let lastRawIdx: number | undefined = undefined
+  createEffect(() => {
+    const content = html()
+    if (!container || !content) return
+    const view = ctx.file.view(local.path)
+    const raw = ctx.file.changeIndex(local.path)
+    if (raw === undefined) return
+    const total = countGroups()
+    if (total <= 0) return
+    const next = ((raw % total) + total) % total
+
+    const navigated = lastRawIdx !== undefined && lastRawIdx !== raw
+
+    if (next !== raw) {
+      ctx.file.setChangeIndex(local.path, next)
+      applyHighlight(next, true)
+    } else {
+      if (lastView !== view || lastContent !== content) applyHighlight(next)
+      if ((lastIdx !== undefined && lastIdx !== next) || navigated) applyHighlight(next, true)
+    }
+
+    lastRawIdx = raw
+    lastIdx = next
+    lastView = view
+    lastContent = content
+  })
+
+  return (
+    <Suspense>
+      <div
+        ref={(el) => {
+          container = el
+        }}
+        innerHTML={html()}
+        class="
+          font-mono text-xs tracking-wide overflow-y-auto no-scrollbar h-full
+          [&]:[counter-reset:line]
+          [&_pre]:focus-visible:outline-none
+          [&_pre]:overflow-x-auto [&_pre]:no-scrollbar
+          [&_code]:min-w-full [&_code]:inline-block [&_code]:pb-40
+          [&_.tab]:relative
+          [&_.tab::before]:content['⇥']
+          [&_.tab::before]:absolute
+          [&_.tab::before]:opacity-0
+          [&_.space]:relative
+          [&_.space::before]:content-['·']
+          [&_.space::before]:absolute
+          [&_.space::before]:opacity-0
+          [&_.line]:inline-block [&_.line]:w-full
+          [&_.line]:hover:bg-background-element
+          [&_.line::before]:sticky [&_.line::before]:left-0
+          [&_.line::before]:w-12 [&_.line::before]:pr-4
+          [&_.line::before]:z-10
+          [&_.line::before]:bg-background-panel
+          [&_.line::before]:text-text-muted/60
+          [&_.line::before]:text-right [&_.line::before]:inline-block
+          [&_.line::before]:select-none
+          [&_.line::before]:[counter-increment:line]
+          [&_.line::before]:content-[counter(line)]
+          [&_code.code-diff_.line::before]:content-['']
+          [&_code.code-diff_.line::before]:w-0
+          [&_code.code-diff_.line::before]:pr-0
+          [&_.diff-split_code.code-diff::before]:w-10
+          [&_.diff-split_.diff-newln]:left-0
+          [&_.diff-oldln]:sticky [&_.diff-oldln]:left-0
+          [&_.diff-oldln]:w-10 [&_.diff-oldln]:pr-2
+          [&_.diff-oldln]:z-40
+          [&_.diff-oldln]:text-text-muted/60
+          [&_.diff-oldln]:text-right [&_.diff-oldln]:inline-block
+          [&_.diff-oldln]:select-none
+          [&_.diff-oldln]:bg-background-panel
+          [&_.diff-newln]:sticky [&_.diff-newln]:left-10
+          [&_.diff-newln]:w-10 [&_.diff-newln]:pr-2
+          [&_.diff-newln]:z-40
+          [&_.diff-newln]:text-text-muted/60
+          [&_.diff-newln]:text-right [&_.diff-newln]:inline-block
+          [&_.diff-newln]:select-none
+          [&_.diff-newln]:bg-background-panel
+          [&_.diff-add]:bg-success/20!
+          [&_.diff-add.diff-selected]:bg-success/50!
+          [&_.diff-add_.diff-oldln]:bg-success!
+          [&_.diff-add_.diff-oldln]:text-background-panel!
+          [&_.diff-add_.diff-newln]:bg-success!
+          [&_.diff-add_.diff-newln]:text-background-panel!
+          [&_.diff-remove]:bg-error/20!
+          [&_.diff-remove.diff-selected]:bg-error/50!
+          [&_.diff-remove_.diff-newln]:bg-error!
+          [&_.diff-remove_.diff-newln]:text-background-panel!
+          [&_.diff-remove_.diff-oldln]:bg-error!
+          [&_.diff-remove_.diff-oldln]:text-background-panel!
+          [&_.diff-sign]:inline-block [&_.diff-sign]:px-2 [&_.diff-sign]:select-none
+          [&_.diff-blank]:bg-background-element
+          [&_.diff-blank_.diff-oldln]:bg-background-element
+          [&_.diff-blank_.diff-newln]:bg-background-element
+          [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative
+          [&_.diff-collapsed]:cursor-pointer [&_.diff-collapsed]:select-none
+          [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40!
+          [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info
+          [&_.diff-collapsed]:text-xs
+          [&_.diff-collapsed_.diff-oldln]:bg-info!
+          [&_.diff-collapsed_.diff-newln]:bg-info!
+        "
+        classList={{
+          ...(local.classList || {}),
+          [local.class ?? ""]: !!local.class,
+        }}
+        {...others}
+      />
+    </Suspense>
+  )
+}
diff --git a/packages/app/src/components/file-tree.tsx b/packages/app/src/components/file-tree.tsx
new file mode 100644
index 000000000..a3c4f42df
--- /dev/null
+++ b/packages/app/src/components/file-tree.tsx
@@ -0,0 +1,85 @@
+import { useLocal } from "@/context"
+import type { LocalFile } from "@/context/local"
+import { Collapsible, FileIcon, Tooltip } from "@/ui"
+import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+export default function FileTree(props: {
+  path: string
+  class?: string
+  nodeClass?: string
+  level?: number
+  onFileClick?: (file: LocalFile) => void
+}) {
+  const local = useLocal()
+  const level = props.level ?? 0
+
+  const Node = (p: ParentProps & ComponentProps<"div"> & { node: LocalFile; as?: "div" | "button" }) => (
+    <Dynamic
+      component={p.as ?? "div"}
+      classList={{
+        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-panel cursor-pointer": true,
+        "bg-background-element": local.file.active()?.path === p.node.path,
+        [props.nodeClass ?? ""]: !!props.nodeClass,
+      }}
+      style={`padding-left: ${level * 10}px`}
+      {...p}
+    >
+      {p.children}
+      <span
+        classList={{
+          "text-xs whitespace-nowrap truncate": true,
+          "text-text-muted/40": p.node.ignored,
+          "text-text-muted/80": !p.node.ignored,
+          "!text-text": local.file.active()?.path === p.node.path,
+          "!text-primary": local.file.changed(p.node.path),
+        }}
+      >
+        {p.node.name}
+      </span>
+      <Show when={local.file.changed(p.node.path)}>
+        <span class="ml-auto mr-1 w-1.5 h-1.5 rounded-full bg-primary/50 shrink-0" />
+      </Show>
+    </Dynamic>
+  )
+
+  return (
+    <div class={`flex flex-col ${props.class}`}>
+      <For each={local.file.children(props.path)}>
+        {(node) => (
+          <Tooltip forceMount={false} openDelay={2000} value={node.path} placement="right">
+            <Switch>
+              <Match when={node.type === "directory"}>
+                <Collapsible
+                  forceMount={false}
+                  open={local.file.node(node.path)?.expanded}
+                  onOpenChange={(open) => (open ? local.file.expand(node.path) : local.file.collapse(node.path))}
+                >
+                  <Collapsible.Trigger>
+                    <Node node={node}>
+                      <Collapsible.Arrow size={16} class="text-text-muted/60 ml-1" />
+                      <FileIcon
+                        node={node}
+                        expanded={local.file.node(node.path).expanded}
+                        class="text-text-muted/60 -ml-1"
+                      />
+                    </Node>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    <FileTree path={node.path} level={level + 1} onFileClick={props.onFileClick} />
+                  </Collapsible.Content>
+                </Collapsible>
+              </Match>
+              <Match when={node.type === "file"}>
+                <Node node={node} as="button" onClick={() => props.onFileClick?.(node)}>
+                  <div class="w-4 shrink-0" />
+                  <FileIcon node={node} class="text-primary" />
+                </Node>
+              </Match>
+            </Switch>
+          </Tooltip>
+        )}
+      </For>
+    </div>
+  )
+}
diff --git a/packages/app/src/components/markdown.tsx b/packages/app/src/components/markdown.tsx
new file mode 100644
index 000000000..1fb2cf836
--- /dev/null
+++ b/packages/app/src/components/markdown.tsx
@@ -0,0 +1,601 @@
+import { transformerNotationDiff } from "@shikijs/transformers"
+import { marked } from "marked"
+import markedShiki from "marked-shiki"
+import { codeToHtml } from "shiki"
+import { createResource } from "solid-js"
+
+const markedWithShiki = marked.use(
+  markedShiki({
+    highlight(code, lang) {
+      return codeToHtml(code, {
+        // structure: "inline",
+        lang: lang || "text",
+        tabindex: false,
+        theme: {
+          colors: {
+            "actionBar.toggledBackground": "var(--theme-background-element)",
+            "activityBarBadge.background": "var(--theme-accent)",
+            "checkbox.border": "var(--theme-border)",
+            "editor.background": "transparent",
+            "editor.foreground": "var(--theme-text)",
+            "editor.inactiveSelectionBackground": "var(--theme-background-element)",
+            "editor.selectionHighlightBackground": "var(--theme-border-active)",
+            "editorIndentGuide.activeBackground1": "var(--theme-border-subtle)",
+            "editorIndentGuide.background1": "var(--theme-border-subtle)",
+            "input.placeholderForeground": "var(--theme-text-muted)",
+            "list.activeSelectionIconForeground": "var(--theme-text)",
+            "list.dropBackground": "var(--theme-background-element)",
+            "menu.background": "var(--theme-background-panel)",
+            "menu.border": "var(--theme-border)",
+            "menu.foreground": "var(--theme-text)",
+            "menu.selectionBackground": "var(--theme-primary)",
+            "menu.separatorBackground": "var(--theme-border)",
+            "ports.iconRunningProcessForeground": "var(--theme-success)",
+            "sideBarSectionHeader.background": "transparent",
+            "sideBarSectionHeader.border": "var(--theme-border-subtle)",
+            "sideBarTitle.foreground": "var(--theme-text-muted)",
+            "statusBarItem.remoteBackground": "var(--theme-success)",
+            "statusBarItem.remoteForeground": "var(--theme-text)",
+            "tab.lastPinnedBorder": "var(--theme-border-subtle)",
+            "tab.selectedBackground": "var(--theme-background-element)",
+            "tab.selectedForeground": "var(--theme-text-muted)",
+            "terminal.inactiveSelectionBackground": "var(--theme-background-element)",
+            "widget.border": "var(--theme-border)",
+          },
+          displayName: "opencode",
+          name: "opencode",
+          semanticHighlighting: true,
+          semanticTokenColors: {
+            customLiteral: "var(--theme-syntax-function)",
+            newOperator: "var(--theme-syntax-operator)",
+            numberLiteral: "var(--theme-syntax-number)",
+            stringLiteral: "var(--theme-syntax-string)",
+          },
+          tokenColors: [
+            {
+              scope: [
+                "meta.embedded",
+                "source.groovy.embedded",
+                "string meta.image.inline.markdown",
+                "variable.legacy.builtin.python",
+              ],
+              settings: {
+                foreground: "var(--theme-text)",
+              },
+            },
+            {
+              scope: "emphasis",
+              settings: {
+                fontStyle: "italic",
+              },
+            },
+            {
+              scope: "strong",
+              settings: {
+                fontStyle: "bold",
+              },
+            },
+            {
+              scope: "header",
+              settings: {
+                foreground: "var(--theme-markdown-heading)",
+              },
+            },
+            {
+              scope: "comment",
+              settings: {
+                foreground: "var(--theme-syntax-comment)",
+              },
+            },
+            {
+              scope: "constant.language",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: [
+                "constant.numeric",
+                "variable.other.enummember",
+                "keyword.operator.plus.exponent",
+                "keyword.operator.minus.exponent",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: "constant.regexp",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "entity.name.tag",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["entity.name.tag.css", "entity.name.tag.less"],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "entity.other.attribute-name",
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: [
+                "entity.other.attribute-name.class.css",
+                "source.css entity.other.attribute-name.class",
+                "entity.other.attribute-name.id.css",
+                "entity.other.attribute-name.parent-selector.css",
+                "entity.other.attribute-name.parent.less",
+                "source.css entity.other.attribute-name.pseudo-class",
+                "entity.other.attribute-name.pseudo-element.css",
+                "source.css.less entity.other.attribute-name.id",
+                "entity.other.attribute-name.scss",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "invalid",
+              settings: {
+                foreground: "var(--theme-error)",
+              },
+            },
+            {
+              scope: "markup.underline",
+              settings: {
+                fontStyle: "underline",
+              },
+            },
+            {
+              scope: "markup.bold",
+              settings: {
+                fontStyle: "bold",
+                foreground: "var(--theme-markdown-strong)",
+              },
+            },
+            {
+              scope: "markup.heading",
+              settings: {
+                fontStyle: "bold",
+                foreground: "var(--theme-markdown-heading)",
+              },
+            },
+            {
+              scope: "markup.italic",
+              settings: {
+                fontStyle: "italic",
+              },
+            },
+            {
+              scope: "markup.strikethrough",
+              settings: {
+                fontStyle: "strikethrough",
+              },
+            },
+            {
+              scope: "markup.inserted",
+              settings: {
+                foreground: "var(--theme-diff-added)",
+              },
+            },
+            {
+              scope: "markup.deleted",
+              settings: {
+                foreground: "var(--theme-diff-removed)",
+              },
+            },
+            {
+              scope: "markup.changed",
+              settings: {
+                foreground: "var(--theme-diff-context)",
+              },
+            },
+            {
+              scope: "punctuation.definition.quote.begin.markdown",
+              settings: {
+                foreground: "var(--theme-markdown-block-quote)",
+              },
+            },
+            {
+              scope: "punctuation.definition.list.begin.markdown",
+              settings: {
+                foreground: "var(--theme-markdown-list-enumeration)",
+              },
+            },
+            {
+              scope: "markup.inline.raw",
+              settings: {
+                foreground: "var(--theme-markdown-code)",
+              },
+            },
+            {
+              scope: "punctuation.definition.tag",
+              settings: {
+                foreground: "var(--theme-syntax-punctuation)",
+              },
+            },
+            {
+              scope: ["meta.preprocessor", "entity.name.function.preprocessor"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "meta.preprocessor.string",
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "meta.preprocessor.numeric",
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: "meta.structure.dictionary.key.python",
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: "meta.diff.header",
+              settings: {
+                foreground: "var(--theme-diff-hunk-header)",
+              },
+            },
+            {
+              scope: "storage",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "storage.type",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["storage.modifier", "keyword.operator.noexcept"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["string", "meta.embedded.assembly"],
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "string.tag",
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "string.value",
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: "string.regexp",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: [
+                "punctuation.definition.template-expression.begin",
+                "punctuation.definition.template-expression.end",
+                "punctuation.section.embedded",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: ["meta.template.expression"],
+              settings: {
+                foreground: "var(--theme-text)",
+              },
+            },
+            {
+              scope: [
+                "support.type.vendored.property-name",
+                "support.type.property-name",
+                "source.css variable",
+                "source.coffee.embedded",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: "keyword",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "keyword.control",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "keyword.operator",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: [
+                "keyword.operator.new",
+                "keyword.operator.expression",
+                "keyword.operator.cast",
+                "keyword.operator.sizeof",
+                "keyword.operator.alignof",
+                "keyword.operator.typeid",
+                "keyword.operator.alignas",
+                "keyword.operator.instanceof",
+                "keyword.operator.logical.python",
+                "keyword.operator.wordlike",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "keyword.other.unit",
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "support.function.git-rebase",
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: "constant.sha.git-rebase",
+              settings: {
+                foreground: "var(--theme-syntax-number)",
+              },
+            },
+            {
+              scope: [
+                "storage.modifier.import.java",
+                "variable.language.wildcard.java",
+                "storage.modifier.package.java",
+              ],
+              settings: {
+                foreground: "var(--theme-text)",
+              },
+            },
+            {
+              scope: "variable.language",
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: [
+                "entity.name.function",
+                "support.function",
+                "support.constant.handlebars",
+                "source.powershell variable.other.member",
+                "entity.name.operator.custom-literal",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-function)",
+              },
+            },
+            {
+              scope: [
+                "support.class",
+                "support.type",
+                "entity.name.type",
+                "entity.name.namespace",
+                "entity.other.attribute",
+                "entity.name.scope-resolution",
+                "entity.name.class",
+                "storage.type.numeric.go",
+                "storage.type.byte.go",
+                "storage.type.boolean.go",
+                "storage.type.string.go",
+                "storage.type.uintptr.go",
+                "storage.type.error.go",
+                "storage.type.rune.go",
+                "storage.type.cs",
+                "storage.type.generic.cs",
+                "storage.type.modifier.cs",
+                "storage.type.variable.cs",
+                "storage.type.annotation.java",
+                "storage.type.generic.java",
+                "storage.type.java",
+                "storage.type.object.array.java",
+                "storage.type.primitive.array.java",
+                "storage.type.primitive.java",
+                "storage.type.token.java",
+                "storage.type.groovy",
+                "storage.type.annotation.groovy",
+                "storage.type.parameters.groovy",
+                "storage.type.generic.groovy",
+                "storage.type.object.array.groovy",
+                "storage.type.primitive.array.groovy",
+                "storage.type.primitive.groovy",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-type)",
+              },
+            },
+            {
+              scope: [
+                "meta.type.cast.expr",
+                "meta.type.new.expr",
+                "support.constant.math",
+                "support.constant.dom",
+                "support.constant.json",
+                "entity.other.inherited-class",
+                "punctuation.separator.namespace.ruby",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-type)",
+              },
+            },
+            {
+              scope: [
+                "keyword.control",
+                "source.cpp keyword.operator.new",
+                "keyword.operator.delete",
+                "keyword.other.using",
+                "keyword.other.directive.using",
+                "keyword.other.operator",
+                "entity.name.operator",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: [
+                "variable",
+                "meta.definition.variable.name",
+                "support.variable",
+                "entity.name.variable",
+                "constant.other.placeholder",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: ["variable.other.constant", "variable.other.enummember"],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: ["meta.object-literal.key"],
+              settings: {
+                foreground: "var(--theme-syntax-variable)",
+              },
+            },
+            {
+              scope: [
+                "support.constant.property-value",
+                "support.constant.font-name",
+                "support.constant.media-type",
+                "support.constant.media",
+                "constant.other.color.rgb-value",
+                "constant.other.rgb-value",
+                "support.constant.color",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: [
+                "punctuation.definition.group.regexp",
+                "punctuation.definition.group.assertion.regexp",
+                "punctuation.definition.character-class.regexp",
+                "punctuation.character.set.begin.regexp",
+                "punctuation.character.set.end.regexp",
+                "keyword.operator.negation.regexp",
+                "support.other.parenthesis.regexp",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-string)",
+              },
+            },
+            {
+              scope: [
+                "constant.character.character-class.regexp",
+                "constant.other.character-class.set.regexp",
+                "constant.other.character-class.regexp",
+                "constant.character.set.regexp",
+              ],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "keyword.operator.quantifier.regexp",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: ["constant.character", "constant.other.option"],
+              settings: {
+                foreground: "var(--theme-syntax-keyword)",
+              },
+            },
+            {
+              scope: "constant.character.escape",
+              settings: {
+                foreground: "var(--theme-syntax-operator)",
+              },
+            },
+            {
+              scope: "entity.name.label",
+              settings: {
+                foreground: "var(--theme-text-muted)",
+              },
+            },
+          ],
+          type: "dark",
+        },
+        transformers: [transformerNotationDiff()],
+      })
+    },
+  }),
+)
+
+function strip(text: string): string {
+  const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
+  const match = text.match(wrappedRe)
+  return match ? match[2] : text
+}
+
+export default function Markdown(props: { text: string; class?: string }) {
+  const [html] = createResource(
+    () => strip(props.text),
+    async (markdown) => {
+      return markedWithShiki.parse(markdown)
+    },
+  )
+  return (
+    <div
+      class={`min-w-0 max-w-full text-xs overflow-auto no-scrollbar prose ${props.class ?? ""}`}
+      innerHTML={html()}
+    />
+  )
+}
diff --git a/packages/app/src/components/session-list.tsx b/packages/app/src/components/session-list.tsx
new file mode 100644
index 000000000..e57562586
--- /dev/null
+++ b/packages/app/src/components/session-list.tsx
@@ -0,0 +1,28 @@
+import { useSync, useLocal } from "@/context"
+import { Button, Tooltip } from "@/ui"
+import { VList } from "virtua/solid"
+
+export default function SessionList() {
+  const sync = useSync()
+  const local = useLocal()
+
+  return (
+    <VList data={sync.data.session} class="p-2 no-scrollbar">
+      {(session) => (
+        <Tooltip placement="right" value={session.title} class="w-full min-w-0">
+          <Button
+            size="sm"
+            variant="ghost"
+            classList={{
+              "w-full min-w-0 py-1 text-left truncate justify-start text-text-muted text-xs": true,
+              "text-text!": local.session.active()?.id === session.id,
+            }}
+            onClick={() => local.session.setActive(session.id)}
+          >
+            <span class="truncate">{session.title}</span>
+          </Button>
+        </Tooltip>
+      )}
+    </VList>
+  )
+}
diff --git a/packages/app/src/components/session-timeline.tsx b/packages/app/src/components/session-timeline.tsx
new file mode 100644
index 000000000..ac8519a9c
--- /dev/null
+++ b/packages/app/src/components/session-timeline.tsx
@@ -0,0 +1,369 @@
+import { useLocal, useSync } from "@/context"
+import { Collapsible, Icon, type IconProps } from "@/ui"
+import type { Part, ToolPart } from "@opencode-ai/sdk"
+import { DateTime } from "luxon"
+import {
+  createSignal,
+  onMount,
+  For,
+  Match,
+  splitProps,
+  Switch,
+  type ComponentProps,
+  type ParentProps,
+  createEffect,
+  createMemo,
+} from "solid-js"
+import { getFilename } from "@/utils"
+import Markdown from "./markdown"
+import { Code } from "./code"
+import { createElementSize } from "@solid-primitives/resize-observer"
+import { createScrollPosition } from "@solid-primitives/scroll"
+
+function TimelineIcon(props: { name: IconProps["name"]; class?: string }) {
+  return (
+    <div
+      classList={{
+        "relative flex flex-none self-start items-center justify-center bg-background h-6 w-6": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      <Icon name={props.name} class="text-text/40" size={18} />
+    </div>
+  )
+}
+
+function CollapsibleTimelineIcon(props: { name: IconProps["name"]; class?: string }) {
+  return (
+    <>
+      <TimelineIcon
+        name={props.name}
+        class={`group-hover/li:hidden group-has-[[data-expanded]]/li:hidden ${props.class ?? ""}`}
+      />
+      <TimelineIcon
+        name="chevron-right"
+        class={`hidden group-hover/li:flex group-has-[[data-expanded]]/li:hidden ${props.class ?? ""}`}
+      />
+      <TimelineIcon name="chevron-down" class={`hidden group-has-[[data-expanded]]/li:flex ${props.class ?? ""}`} />
+    </>
+  )
+}
+
+function ToolIcon(props: { part: ToolPart }) {
+  return (
+    <Switch fallback={<TimelineIcon name="hammer" />}>
+      <Match when={props.part.tool === "read"}>
+        <TimelineIcon name="file" />
+      </Match>
+      <Match when={props.part.tool === "edit"}>
+        <CollapsibleTimelineIcon name="pencil" />
+      </Match>
+      <Match when={props.part.tool === "write"}>
+        <CollapsibleTimelineIcon name="file-plus" />
+      </Match>
+    </Switch>
+  )
+}
+
+function Part(props: ParentProps & ComponentProps<"div">) {
+  const [local, others] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <div
+      classList={{
+        ...(local.classList ?? {}),
+        "h-6 flex items-center": true,
+        [local.class ?? ""]: !!local.class,
+      }}
+      {...others}
+    >
+      <p class="text-xs leading-4 text-left text-text-muted/60 font-medium">{local.children}</p>
+    </div>
+  )
+}
+
+function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps & ComponentProps<typeof Collapsible>) {
+  return (
+    <Collapsible {...props}>
+      <Collapsible.Trigger class="peer/collapsible">
+        <Part>{props.title}</Part>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <p class="flex-auto py-1 text-xs min-w-0 text-pretty">
+          <span class="text-text-muted/60 break-words">{props.children}</span>
+        </p>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+}
+
+function ReadToolPart(props: { part: ToolPart }) {
+  const local = useLocal()
+  return (
+    <Switch>
+      <Match when={props.part.state.status === "completed" && props.part.state}>
+        {(state) => {
+          const path = state().input["filePath"] as string
+          return (
+            <Part class="cursor-pointer" onClick={() => local.file.open(path)}>
+              <span class="text-text-muted">Read</span> {getFilename(path)}
+            </Part>
+          )
+        }}
+      </Match>
+    </Switch>
+  )
+}
+
+function EditToolPart(props: { part: ToolPart }) {
+  return (
+    <Switch>
+      <Match when={props.part.state.status === "completed" && props.part.state}>
+        {(state) => (
+          <CollapsiblePart
+            defaultOpen
+            title={
+              <>
+                <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
+              </>
+            }
+          >
+            <Code
+              path={state().input["filePath"] as string}
+              code={state().metadata["diff"] as string}
+              class="[&_code]:pb-0!"
+            />
+          </CollapsiblePart>
+        )}
+      </Match>
+    </Switch>
+  )
+}
+
+function WriteToolPart(props: { part: ToolPart }) {
+  return (
+    <Switch>
+      <Match when={props.part.state.status === "completed" && props.part.state}>
+        {(state) => (
+          <CollapsiblePart
+            title={
+              <>
+                <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
+              </>
+            }
+          >
+            <div class="p-2 bg-background-panel rounded-md border border-border-subtle"></div>
+          </CollapsiblePart>
+        )}
+      </Match>
+    </Switch>
+  )
+}
+
+function ToolPart(props: { part: ToolPart }) {
+  return (
+    <Switch
+      fallback={
+        <div class="flex-auto min-w-0 text-xs">
+          {props.part.type}:{props.part.tool}
+        </div>
+      }
+    >
+      <Match when={props.part.tool === "read"}>
+        <div class="min-w-0 flex-auto">
+          <ReadToolPart part={props.part} />
+        </div>
+      </Match>
+      <Match when={props.part.tool === "edit"}>
+        <div class="min-w-0 flex-auto">
+          <EditToolPart part={props.part} />
+        </div>
+      </Match>
+      <Match when={props.part.tool === "write"}>
+        <div class="min-w-0 flex-auto">
+          <WriteToolPart part={props.part} />
+        </div>
+      </Match>
+    </Switch>
+  )
+}
+
+export default function SessionTimeline(props: { session: string; class?: string }) {
+  const sync = useSync()
+  const [scrollElement, setScrollElement] = createSignal<HTMLElement | undefined>(undefined)
+  const [root, setRoot] = createSignal<HTMLDivElement | undefined>(undefined)
+  const [tail, setTail] = createSignal(true)
+  const size = createElementSize(root)
+  const scroll = createScrollPosition(scrollElement)
+
+  onMount(() => sync.session.sync(props.session))
+  const messages = createMemo(() => sync.data.message[props.session] ?? [])
+  const working = createMemo(() => {
+    const last = messages()[messages().length - 1]
+    if (!last) return false
+    if (last.role === "user") return true
+    return !last.time.completed
+  })
+
+  const getScrollParent = (el: HTMLElement | null): HTMLElement | undefined => {
+    let p = el?.parentElement
+    while (p && p !== document.body) {
+      const s = getComputedStyle(p)
+      if (s.overflowY === "auto" || s.overflowY === "scroll") return p
+      p = p.parentElement
+    }
+    return undefined
+  }
+
+  createEffect(() => {
+    if (!root()) return
+    setScrollElement(getScrollParent(root()!))
+  })
+
+  const scrollToBottom = () => {
+    const element = scrollElement()
+    if (!element) return
+    element.scrollTop = element.scrollHeight
+  }
+
+  createEffect(() => {
+    size.height
+    if (tail()) scrollToBottom()
+  })
+
+  createEffect(() => {
+    if (working()) {
+      setTail(true)
+      scrollToBottom()
+    }
+  })
+
+  let lastScrollY = 0
+  createEffect(() => {
+    if (scroll.y < lastScrollY) {
+      setTail(false)
+    }
+    lastScrollY = scroll.y
+  })
+
+  const valid = (part: Part) => {
+    if (!part) return false
+    switch (part.type) {
+      case "step-start":
+      case "step-finish":
+      case "file":
+      case "patch":
+        return false
+      case "text":
+        return !part.synthetic
+      case "reasoning":
+        return part.text.trim()
+      default:
+        return true
+    }
+  }
+
+  const duration = (part: Part) => {
+    switch (part.type) {
+      default:
+        if (
+          "time" in part &&
+          part.time &&
+          "start" in part.time &&
+          part.time.start &&
+          "end" in part.time &&
+          part.time.end
+        ) {
+          const start = DateTime.fromMillis(part.time.start)
+          const end = DateTime.fromMillis(part.time.end)
+          return end.diff(start).toFormat("s")
+        }
+        return ""
+    }
+  }
+
+  return (
+    <div
+      ref={setRoot}
+      classList={{
+        "p-4 select-text flex flex-col gap-y-8": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      <For each={messages()}>
+        {(message) => (
+          <ul role="list" class="space-y-2">
+            <For each={sync.data.part[message.id]?.filter(valid)}>
+              {(part) => (
+                <li classList={{ "relative group/li flex gap-x-4 min-w-0 w-full": true }}>
+                  <div
+                    classList={{
+                      "absolute top-0 left-0 flex w-6 justify-center": true,
+                      "last:h-10 not-last:-bottom-10": true,
+                    }}
+                  >
+                    <div class="w-px bg-border-subtle" />
+                  </div>
+                  <Switch
+                    fallback={
+                      <div class="m-0.5 relative flex size-5 flex-none items-center justify-center bg-background">
+                        <div class="size-1 rounded-full bg-text/10 ring ring-text/20" />
+                      </div>
+                    }
+                  >
+                    <Match when={part.type === "text"}>
+                      <Switch>
+                        <Match when={message.role === "user"}>
+                          <TimelineIcon name="avatar-square" />
+                        </Match>
+                        <Match when={message.role === "assistant"}>
+                          <TimelineIcon name="sparkles" />
+                        </Match>
+                      </Switch>
+                    </Match>
+                    <Match when={part.type === "reasoning"}>
+                      <CollapsibleTimelineIcon name="brain" />
+                    </Match>
+                    <Match when={part.type === "tool" && part}>{(part) => <ToolIcon part={part()} />}</Match>
+                  </Switch>
+                  <Switch fallback={<div class="flex-auto min-w-0 text-xs mt-1 text-left">{part.type}</div>}>
+                    <Match when={part.type === "text" && part}>
+                      {(part) => (
+                        <Switch>
+                          <Match when={message.role === "user"}>
+                            <div class="w-full flex flex-col items-end justify-stretch gap-y-1.5 min-w-0">
+                              <p class="w-full rounded-md p-3 ring-1 ring-text/15 ring-inset text-xs bg-background-panel">
+                                <span class="font-medium text-text whitespace-pre-wrap break-words">{part().text}</span>
+                              </p>
+                              <p class="text-xs text-text-muted">12:07pm · adam</p>
+                            </div>
+                          </Match>
+                          <Match when={message.role === "assistant"}>
+                            <Markdown text={part().text} class="text-text" />
+                          </Match>
+                        </Switch>
+                      )}
+                    </Match>
+                    <Match when={part.type === "reasoning" && part}>
+                      {(part) => (
+                        <CollapsiblePart
+                          title={
+                            <>
+                              <span class="text-text-muted">Thought</span> for {duration(part())}s
+                            </>
+                          }
+                        >
+                          <Markdown text={part().text} />
+                        </CollapsiblePart>
+                      )}
+                    </Match>
+                    <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
+                  </Switch>
+                </li>
+              )}
+            </For>
+          </ul>
+        )}
+      </For>
+    </div>
+  )
+}
diff --git a/packages/app/src/components/sidebar-nav.tsx b/packages/app/src/components/sidebar-nav.tsx
new file mode 100644
index 000000000..24750bdba
--- /dev/null
+++ b/packages/app/src/components/sidebar-nav.tsx
@@ -0,0 +1,48 @@
+import { For } from "solid-js"
+import { Icon, Link, Logo, Tooltip } from "@/ui"
+import { useLocation } from "@solidjs/router"
+
+const navigation = [
+  { name: "Sessions", href: "/sessions", icon: "dashboard" as const },
+  { name: "Commands", href: "/commands", icon: "slash" as const },
+  { name: "Agents", href: "/agents", icon: "bolt" as const },
+  { name: "Providers", href: "/providers", icon: "cloud" as const },
+  { name: "Tools (MCP)", href: "/tools", icon: "hammer" as const },
+  { name: "LSP", href: "/lsp", icon: "code" as const },
+  { name: "Settings", href: "/settings", icon: "settings" as const },
+]
+
+export default function SidebarNav() {
+  const location = useLocation()
+  return (
+    <div class="hidden md:fixed md:inset-y-0 md:left-0 md:z-50 md:block md:w-16 md:overflow-y-auto md:bg-background-panel md:pb-4">
+      <div class="flex h-16 shrink-0 items-center justify-center">
+        <Logo variant="mark" size={28} />
+      </div>
+      <nav class="mt-5">
+        <ul role="list" class="flex flex-col items-center space-y-1">
+          <For each={navigation}>
+            {(item) => (
+              <li>
+                <Tooltip placement="right" value={item.name}>
+                  <Link
+                    href={item.href}
+                    classList={{
+                      "bg-background-element text-text": location.pathname.startsWith(item.href),
+                      "text-text-muted hover:bg-background-element hover:text-text": location.pathname !== item.href,
+                      "flex gap-x-3 rounded-md p-3 text-sm font-semibold": true,
+                      "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-active": true,
+                    }}
+                  >
+                    <Icon name={item.icon} size={20} />
+                    <span class="sr-only">{item.name}</span>
+                  </Link>
+                </Tooltip>
+              </li>
+            )}
+          </For>
+        </ul>
+      </nav>
+    </div>
+  )
+}