feat(app): edit files directly in the app

packages/app/src/components/session/session-sortable-tab.tsx

@@ -9,6 +9,7 @@ import { getFilename } from "@opencode-ai/core/util/path"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
+import { useSessionLayout } from "@/pages/session/session-layout"
 
 export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
   return (
@@ -31,33 +32,44 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
   const file = useFile()
   const language = useLanguage()
   const command = useCommand()
+  const { tabs } = useSessionLayout()
   const sortable = createSortable(props.tab)
   const path = createMemo(() => file.pathFromTab(props.tab))
+  const dirty = createMemo(() => tabs().dirty(props.tab))
   const content = createMemo(() => {
     const value = path()
     if (!value) return
     return <FileVisual path={value} />
   })
   return (
     <div use:sortable class="h-full flex items-center" classList={{ "opacity-0": sortable.isActiveDraggable }}>
-      <div class="relative">
+      <div class="relative group">
         <Tabs.Trigger
           value={props.tab}
           closeButton={
-            <TooltipKeybind
-              title={language.t("common.closeTab")}
-              keybind={command.keybind("tab.close")}
-              placement="bottom"
-              gutter={10}
-            >
-              <IconButton
-                icon="close-small"
-                variant="ghost"
-                class="h-5 w-5"
-                onClick={() => props.onTabClose(props.tab)}
-                aria-label={language.t("common.closeTab")}
-              />
-            </TooltipKeybind>
+            <span class="relative inline-flex size-5 items-center justify-center">
+              <Show when={dirty()}>
+                <span
+                  aria-label={language.t("common.unsavedChanges")}
+                  class="absolute inline-block size-2 rounded-full bg-text-weak group-hover:opacity-0"
+                />
+              </Show>
+              <TooltipKeybind
+                title={language.t("common.closeTab")}
+                keybind={command.keybind("tab.close")}
+                placement="bottom"
+                gutter={10}
+              >
+                <IconButton
+                  icon="close-small"
+                  variant="ghost"
+                  class="h-5 w-5"
+                  classList={{ "opacity-0 group-hover:opacity-100": dirty() }}
+                  onClick={() => props.onTabClose(props.tab)}
+                  aria-label={language.t("common.closeTab")}
+                />
+              </TooltipKeybind>
+            </span>
           }
           hideCloseButton
           onMiddleClick={() => props.onTabClose(props.tab)}

packages/app/src/context/command.tsx

@@ -13,7 +13,7 @@ const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(na
 const PALETTE_ID = "command.palette"
 const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
 const SUGGESTED_PREFIX = "suggested."
-const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new", "file.attach"])
+const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new", "file.attach", "file.save"])
 
 type KeyLabel =
   | "common.key.ctrl"

packages/app/src/context/layout.tsx

@@ -16,6 +16,7 @@ import { createPathHelpers } from "./file/path"
 import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { migrateLegacySessionStateKeys, ServerScope, SessionStateKey } from "@/utils/server-scope"
 import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
+import { createTabWriteGuard } from "./tab-write-guard"
 
 export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys }
 
@@ -54,6 +55,7 @@ export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
 type SessionTabs = {
   active?: string
   all: string[]
+  dirty?: Record<string, boolean>
 }
 
 type SessionView = {
@@ -566,9 +568,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       if (sessionTimer !== undefined) window.clearTimeout(sessionTimer)
     })
 
+    const { runTabWrite, tabsWriting } = createTabWriteGuard()
+
     return {
       route,
       ready,
+      tabsWriting,
       handoff: {
         tabs: createMemo(() => store.handoff?.tabs),
         setTabs(dir: string, id: string) {
@@ -896,28 +901,61 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           tabs,
           active: createMemo(() => tabs().active),
           all: createMemo(() => tabs().all.filter((tab) => tab !== "review")),
+          dirty(tab: string) {
+            return tabs().dirty?.[tab] ?? false
+          },
+          setDirty(tab: string, value: boolean) {
+            const session = key()
+            const current = store.sessionTabs[session]
+            if (!current) {
+              if (!value) return
+              setStore("sessionTabs", session, { all: [], dirty: { [tab]: true } })
+              return
+            }
+            if (!value) {
+              if (!current.dirty?.[tab]) return
+              setStore(
+                "sessionTabs",
+                session,
+                "dirty",
+                produce((draft) => {
+                  if (draft) delete draft[tab]
+                }),
+              )
+              return
+            }
+            if (!current.dirty) {
+              setStore("sessionTabs", session, "dirty", { [tab]: true })
+              return
+            }
+            setStore("sessionTabs", session, "dirty", tab, true)
+          },
           setActive(tab: string | undefined) {
             const session = key()
             const next = tab ? normalize(tab) : tab
-            if (!store.sessionTabs[session]) {
-              setStore("sessionTabs", session, { all: [], active: next })
-            } else {
-              setStore("sessionTabs", session, "active", next)
-            }
+            runTabWrite(() => {
+              if (!store.sessionTabs[session]) {
+                setStore("sessionTabs", session, { all: [], active: next })
+              } else {
+                setStore("sessionTabs", session, "active", next)
+              }
+            })
           },
           setAll(all: string[]) {
             const session = key()
             const next = normalizeAll(all).filter((tab) => tab !== "review")
-            if (!store.sessionTabs[session]) {
-              setStore("sessionTabs", session, { all: next, active: undefined })
-            } else {
-              setStore("sessionTabs", session, "all", next)
-            }
+            runTabWrite(() => {
+              if (!store.sessionTabs[session]) {
+                setStore("sessionTabs", session, { all: next, active: undefined })
+              } else {
+                setStore("sessionTabs", session, "all", next)
+              }
+            })
           },
           async open(tab: string) {
             const session = key()
             const next = nextSessionTabsForOpen(store.sessionTabs[session], normalize(tab))
-            setStore("sessionTabs", session, next)
+            runTabWrite(() => setStore("sessionTabs", session, next))
           },
           close(tab: string) {
             const session = key()
@@ -931,8 +969,22 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
             }
 
             const all = current.all.filter((x) => x !== tab)
+            const clearDirty = () => {
+              if (!current.dirty?.[tab]) return
+              setStore(
+                "sessionTabs",
+                session,
+                "dirty",
+                produce((draft) => {
+                  if (draft) delete draft[tab]
+                }),
+              )
+            }
             if (current.active !== tab) {
-              setStore("sessionTabs", session, "all", all)
+              batch(() => {
+                setStore("sessionTabs", session, "all", all)
+                clearDirty()
+              })
               return
             }
 
@@ -941,6 +993,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
             batch(() => {
               setStore("sessionTabs", session, "all", all)
               setStore("sessionTabs", session, "active", next)
+              clearDirty()
             })
           },
           move(tab: string, to: number) {