From 62ab5177d5ef33b5b7c987a29f11220c5c0f433b Mon Sep 17 00:00:00 2001
From: JosephITA <124281140+JosephITA@users.noreply.github.com>
Date: Tue, 5 May 2026 20:05:35 +0200
Subject: [PATCH] feat: make modified files in sidebar clickable to open with
 OS default app

Files listed under "Modified Files" in the session sidebar are now clickable.
Clicking a file opens it with the OS default application for that file type
(e.g., VS Code for .ts, browser for .html).

Motivation: I often review changed files in opencode without having my
editor open. Manually navigating to each file is slow -- clicking the file
directly in the sidebar is much faster.

Implementation: resolves the project-relative diff path to absolute using
the project directory, then opens it via the `open` package (same pattern
used by Link for URLs). File names are styled in the primary accent color
to indicate clickability, consistent with how links appear elsewhere.
---
 .../src/cli/cmd/tui/feature-plugins/sidebar/files.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/files.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/files.tsx
index c865c5eb49db..cef8691c04c3 100644
--- a/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/files.tsx
+++ b/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/files.tsx
@@ -1,5 +1,7 @@
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
 import { createMemo, For, Show, createSignal } from "solid-js"
+import openFile from "open"
+import path from "path"
 
 const id = "internal:sidebar-files"
 
@@ -22,8 +24,13 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
         <Show when={list().length <= 2 || open()}>
           <For each={list()}>
             {(item) => (
-              <box flexDirection="row" gap={1} justifyContent="space-between">
-                <text fg={theme().textMuted} wrapMode="none">
+              <box
+                flexDirection="row"
+                gap={1}
+                justifyContent="space-between"
+                onMouseUp={() => openFile(path.resolve(props.api.state.path.directory, item.file)).catch(() => {})}
+              >
+                <text fg={theme().primary} wrapMode="none">
                   {item.file}
                 </text>
                 <box flexDirection="row" gap={1} flexShrink={0}>