tui: improve file path display in modified files list with proper truncation and line wrapping

Updated the session sidebar to intelligently truncate long file paths so they fit properly in the UI without breaking layout. File names stay visible while directory paths are shortened, and text now wraps character-by-character when needed to prevent overflow in narrow terminals.

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -49,17 +49,9 @@ import { DialogTimeline } from "./dialog-timeline"
 import { Sidebar } from "./sidebar"
 import { LANGUAGE_EXTENSIONS } from "@/lsp/language"
 
-addDefaultParsers([
-  {
-    filetype: "json",
-    wasm: "https://github.com/tree-sitter/tree-sitter-json/releases/download/v0.24.8/tree-sitter-json.wasm",
-    queries: {
-      highlights: [
-        "https://raw.githubusercontent.com/nvim-treesitter/nvim-treesitter/refs/heads/master/queries/json/highlights.scm",
-      ],
-    },
-  },
-])
+import parsers from "../../../../../../parsers-config.json"
+
+addDefaultParsers(parsers.parsers)
 
 const context = createContext<{
   width: number

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -2,6 +2,7 @@ import { useSync } from "@tui/context/sync"
 import { createMemo, For, Show, Switch, Match } from "solid-js"
 import { Theme } from "../../context/theme"
 import { Locale } from "@/util/locale"
+import path from "path"
 import type { AssistantMessage } from "@opencode-ai/sdk"
 
 export function Sidebar(props: { sessionID: string }) {
@@ -117,15 +118,29 @@ export function Sidebar(props: { sessionID: string }) {
               <b>Modified Files</b>
             </text>
             <For each={session().summary?.diffs || []}>
-              {(item) => (
-                <box flexDirection="row" gap={1} justifyContent="space-between">
-                  <text fg={Theme.textMuted}>{Locale.truncateMiddle(item.file, 40)}</text>
-                  <box flexDirection="row" gap={1}>
-                    <text fg={Theme.diffAdded}>+{item.additions}</text>
-                    <text fg={Theme.diffRemoved}>-{item.deletions}</text>
+              {(item) => {
+                const file = createMemo(() => {
+                  const splits = item.file.split(path.sep).filter(Boolean)
+                  const last = splits.at(-1)!
+                  const rest = splits.slice(0, -1).join(path.sep)
+                  return Locale.truncateMiddle(rest, 30 - last.length) + "/" + last
+                })
+                return (
+                  <box flexDirection="row" gap={1} justifyContent="space-between">
+                    <text fg={Theme.textMuted} wrapMode="char">
+                      {file()}
+                    </text>
+                    <box flexDirection="row" gap={1} flexShrink={0}>
+                      <Show when={item.additions}>
+                        <text fg={Theme.diffAdded}>+{item.additions}</text>
+                      </Show>
+                      <Show when={item.deletions}>
+                        <text fg={Theme.diffRemoved}>-{item.deletions}</text>
+                      </Show>
+                    </box>
                   </box>
-                </box>
-              )}
+                )
+              }}
             </For>
           </box>
         </Show>