git-viewer 14.0.0 → 15.0.0

package/dist/entry.bundled.js

@@ -1607,6 +1607,45 @@ async function fetchDiff(sha, signal) {
   let res = await fetch(`/api/diff/${sha}`, { signal });
   return res.json();
 }
+async function fetchStatus(signal) {
+  let res = await fetch("/api/status", { signal });
+  return res.json();
+}
+async function stageFiles(paths) {
+  await fetch("/api/stage", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ paths })
+  });
+}
+async function unstageFiles(paths) {
+  await fetch("/api/unstage", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ paths })
+  });
+}
+async function commitChanges(message, amend) {
+  await fetch("/api/commit", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ message, amend })
+  });
+}
+async function fetchLastCommit(signal) {
+  let res = await fetch("/api/last-commit", { signal });
+  return res.json();
+}
+async function fetchWorkingDiff(path, signal) {
+  let params = new URLSearchParams({ path });
+  let res = await fetch(`/api/working-diff?${params}`, { signal });
+  return res.json();
+}
+async function fetchStagedDiff(path, signal) {
+  let params = new URLSearchParams({ path });
+  let res = await fetch(`/api/staged-diff?${params}`, { signal });
+  return res.json();
+}
 var AppStore = class extends TypedEventTarget {
   constructor() {
     super(...arguments);
@@ -1615,6 +1654,8 @@ var AppStore = class extends TypedEventTarget {
     __publicField(this, "search", "");
     __publicField(this, "selectedCommit", null);
     __publicField(this, "fullscreenDiff", false);
+    __publicField(this, "view", "commits");
+    __publicField(this, "status", null);
   }
   setRefs(refs) {
     this.refs = refs;
@@ -1638,6 +1679,14 @@ var AppStore = class extends TypedEventTarget {
       this.dispatchEvent(new Event("fullscreenDiff"));
     });
   }
+  setView(view) {
+    this.view = view;
+    this.dispatchEvent(new Event("view"));
+  }
+  setStatus(status) {
+    this.status = status;
+    this.dispatchEvent(new Event("status"));
+  }
 };
 var colors = {
   bg: "#ffffff",
@@ -1697,47 +1746,104 @@ function App(handle) {
 function Sidebar(handle) {
   let store = handle.context.get(App);
   handle.on(store, {
-    refs: () => handle.update()
+    refs: () => handle.update(),
+    status: () => handle.update(),
+    view: () => handle.update()
   });
-  return () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: {
-        borderRight: `1px solid ${colors.border}`,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            css: {
-              padding: "12px",
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.5px",
-              color: colors.textMuted,
-              borderBottom: `1px solid ${colors.border}`
-            },
-            children: "Git Tree Viewer"
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: store.refs && /* @__PURE__ */ jsx(Fragment, { children: [
-          /* @__PURE__ */ jsx(RefSection, { title: "LOCAL", nodes: store.refs.local }),
-          Object.entries(store.refs.remotes).map(([remote, nodes]) => /* @__PURE__ */ jsx(
-            RefSection,
+  handle.queueTask(async (signal) => {
+    let status = await fetchStatus(signal);
+    store.setStatus(status);
+  });
+  return () => {
+    let totalChanges = store.status ? store.status.staged.length + store.status.unstaged.length : 0;
+    let isStageView = store.view === "stage";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          borderRight: `1px solid ${colors.border}`,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              title: remote.toUpperCase(),
-              nodes,
-              initialExpanded: false
-            },
-            remote
-          ))
-        ] }) })
-      ]
-    }
-  );
+              css: {
+                padding: "12px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                color: colors.textMuted,
+                borderBottom: `1px solid ${colors.border}`
+              },
+              children: "Git Tree Viewer"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  padding: "6px 12px",
+                  marginBottom: "8px",
+                  borderRadius: "3px",
+                  marginRight: "8px",
+                  marginLeft: "8px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  background: isStageView ? colors.accentDim : "transparent",
+                  color: isStageView ? colors.accent : colors.text,
+                  fontWeight: 600,
+                  userSelect: "none",
+                  "&:hover": {
+                    background: isStageView ? colors.accentDim : colors.bgLighter
+                  }
+                },
+                on: {
+                  click: () => {
+                    store.setFilter("");
+                    store.setView("stage");
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "stage" }),
+                  totalChanges > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      css: {
+                        background: colors.accent,
+                        color: "#fff",
+                        fontSize: "10px",
+                        padding: "2px 6px",
+                        borderRadius: "10px",
+                        fontWeight: 600
+                      },
+                      children: totalChanges
+                    }
+                  )
+                ]
+              }
+            ),
+            store.refs && /* @__PURE__ */ jsx(Fragment, { children: [
+              /* @__PURE__ */ jsx(RefSection, { title: "LOCAL", nodes: store.refs.local }),
+              Object.entries(store.refs.remotes).map(([remote, nodes]) => /* @__PURE__ */ jsx(
+                RefSection,
+                {
+                  title: remote.toUpperCase(),
+                  nodes,
+                  initialExpanded: false
+                },
+                remote
+              ))
+            ] })
+          ] })
+        ]
+      }
+    );
+  };
 }
 function RefSection(handle) {
   let expanded = null;
@@ -1758,7 +1864,7 @@ function RefSection(handle) {
             textTransform: "uppercase",
             letterSpacing: "0.5px",
             color: colors.textMuted,
-            cursor: "pointer",
+            userSelect: "none",
             "&:hover": { color: colors.text }
           },
           on: {
@@ -1794,10 +1900,10 @@ function RefNodeItem(handle) {
             css: {
               padding: `3px 12px`,
               paddingLeft: `${paddingLeft}px`,
-              cursor: "pointer",
               color: colors.textMuted,
               fontSize: "12px",
               whiteSpace: "nowrap",
+              userSelect: "none",
               "&:hover": { color: colors.text }
             },
             on: {
@@ -1824,18 +1930,23 @@ function RefNodeItem(handle) {
         css: {
           padding: `3px 12px`,
           paddingLeft: `${paddingLeft}px`,
-          cursor: "pointer",
           borderRadius: "3px",
           marginRight: "8px",
           background: isSelected ? colors.accentDim : "transparent",
           color: node.current ? colors.accent : colors.text,
           fontWeight: node.current ? 600 : 400,
           whiteSpace: "nowrap",
+          userSelect: "none",
           "&:hover": {
             background: isSelected ? colors.accentDim : colors.bgLighter
           }
         },
-        on: { click: () => store.setFilter(node.fullName) },
+        on: {
+          click: () => {
+            store.setFilter(node.fullName);
+            store.setView("commits");
+          }
+        },
         children: [
           node.current && /* @__PURE__ */ jsx("span", { css: { fontSize: "8px", marginRight: "4px" }, children: "\u25CF" }),
           node.name
@@ -1844,44 +1955,63 @@ function RefNodeItem(handle) {
     );
   };
 }
-function MainPanel() {
-  return () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx(CommitList, {}),
-        /* @__PURE__ */ jsx(DiffPanel, {})
-      ]
+function MainPanel(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    view: () => handle.update()
+  });
+  return () => {
+    if (store.view === "stage") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          css: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(StagePanel, {})
+        }
+      );
     }
-  );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(CommitList, {}),
+          /* @__PURE__ */ jsx(DiffPanel, {})
+        ]
+      }
+    );
+  };
 }
 function CommitList(handle) {
   let store = handle.context.get(App);
   let commits = [];
   let loading = true;
-  async function loadCommits(signal) {
-    loading = true;
-    handle.update();
+  async function doLoadCommits(signal) {
     let ref = store.filter === "all" ? "all" : store.filter === "local" ? store.refs?.currentBranch : store.filter;
     let result = await fetchCommits(ref, store.search, signal);
     commits = result.commits;
     loading = false;
     handle.update();
   }
+  function loadCommits() {
+    loading = true;
+    handle.update(doLoadCommits);
+  }
   handle.on(store, {
-    refs(_, signal) {
-      loadCommits(signal);
-    },
-    filter(_, signal) {
-      loadCommits(signal);
-    }
+    refs: loadCommits,
+    filter: loadCommits
   });
+  handle.queueTask(doLoadCommits);
   return () => /* @__PURE__ */ jsx(
     "div",
     {
@@ -2008,7 +2138,7 @@ function FilterButton(handle) {
           background: isActive ? colors.accentDim : "transparent",
           color: isActive ? colors.accent : colors.text,
           fontSize: "12px",
-          cursor: "pointer",
+          userSelect: "none",
           "&:hover": { borderColor: colors.accent }
         },
         on: { click: () => store.setFilter(filter) },
@@ -2035,8 +2165,8 @@ function CommitRow(handle) {
       "tr",
       {
         css: {
-          cursor: "pointer",
-          background: isSelected ? colors.accentDim : "transparent"
+          background: isSelected ? colors.accentDim : "transparent",
+          userSelect: "none"
         },
         on: { click: () => store.selectCommit(commit) },
         children: [
@@ -2271,7 +2401,6 @@ function DiffPanel(handle) {
                       background: colors.bg,
                       color: colors.text,
                       fontSize: "12px",
-                      cursor: "pointer",
                       whiteSpace: "nowrap",
                       "&:hover": {
                         background: colors.bgLighter,
@@ -2409,7 +2538,7 @@ function FileListItem() {
       {
         css: {
           padding: "6px 12px",
-          cursor: "pointer",
+          userSelect: "none",
           "&:hover": {
             background: colors.bgLighter
           }
@@ -2535,4 +2664,561 @@ function FileListItem() {
     );
   };
 }
+function StagePanel(handle) {
+  let store = handle.context.get(App);
+  let selectedFile = null;
+  let diffHtml = null;
+  let commitMessage = "";
+  let savedMessage = "";
+  let amend = false;
+  let lastCommit = null;
+  let loading = false;
+  async function loadStatus(signal) {
+    let status = await fetchStatus(signal);
+    store.setStatus(status);
+  }
+  async function loadDiff(path, type, signal) {
+    try {
+      let result = type === "unstaged" ? await fetchWorkingDiff(path, signal) : await fetchStagedDiff(path, signal);
+      if (signal.aborted) return;
+      diffHtml = result.diffHtml;
+    } catch {
+      if (signal.aborted) return;
+      diffHtml = "";
+    }
+    handle.update();
+  }
+  async function handleStage(paths) {
+    loading = true;
+    handle.update();
+    await stageFiles(paths);
+    let status = await fetchStatus();
+    store.setStatus(status);
+    if (selectedFile && selectedFile.type === "unstaged" && paths.includes(selectedFile.path)) {
+      selectedFile = { path: selectedFile.path, type: "staged" };
+    }
+    loading = false;
+    handle.update();
+  }
+  async function handleUnstage(paths) {
+    loading = true;
+    handle.update();
+    await unstageFiles(paths);
+    let status = await fetchStatus();
+    store.setStatus(status);
+    if (selectedFile && selectedFile.type === "staged" && paths.includes(selectedFile.path)) {
+      selectedFile = { path: selectedFile.path, type: "unstaged" };
+    }
+    loading = false;
+    handle.update();
+  }
+  async function handleCommit() {
+    if (!commitMessage.trim()) return;
+    loading = true;
+    handle.update();
+    await commitChanges(commitMessage, amend);
+    commitMessage = "";
+    amend = false;
+    lastCommit = null;
+    let status = await fetchStatus();
+    store.setStatus(status);
+    selectedFile = null;
+    diffHtml = null;
+    loading = false;
+    handle.update();
+  }
+  async function toggleAmend(checked) {
+    amend = checked;
+    if (checked) {
+      savedMessage = commitMessage;
+      lastCommit = await fetchLastCommit();
+      commitMessage = lastCommit.subject + (lastCommit.body ? "\n\n" + lastCommit.body : "");
+    } else {
+      commitMessage = savedMessage;
+      lastCommit = null;
+    }
+    handle.update();
+  }
+  handle.on(store, {
+    status: () => handle.update()
+  });
+  handle.queueTask(loadStatus);
+  async function selectFile(path, type, signal) {
+    if (selectedFile?.path === path && selectedFile?.type === type) {
+      return;
+    }
+    selectedFile = { path, type };
+    handle.update();
+    await loadDiff(path, type, signal);
+  }
+  return () => {
+    let staged = store.status?.staged ?? [];
+    let unstaged = store.status?.unstaged ?? [];
+    let displayStaged = staged;
+    if (amend && lastCommit) {
+      let stagedPaths = new Set(staged.map((f) => f.path));
+      let amendFiles = lastCommit.files.filter((f) => !stagedPaths.has(f.path));
+      displayStaged = [...staged, ...amendFiles];
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                flex: "1 1 60%",
+                display: "flex",
+                flexDirection: "column",
+                borderBottom: `1px solid ${colors.border}`,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      padding: "8px 12px",
+                      borderBottom: `1px solid ${colors.border}`,
+                      background: colors.bgLight,
+                      fontSize: "12px",
+                      fontWeight: 600
+                    },
+                    children: selectedFile ? `${selectedFile.type === "unstaged" ? "Unstaged" : "Staged"} changes for ${selectedFile.path}` : "Select a file to view changes"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", background: colors.bg }, children: diffHtml ? /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    css: {
+                      "& .d2h-wrapper": { background: "transparent" },
+                      "& .d2h-file-header": {
+                        background: colors.bgLighter,
+                        borderBottom: `1px solid ${colors.border}`,
+                        padding: "8px 12px",
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 1
+                      },
+                      "& .d2h-file-name": { color: colors.text },
+                      "& .d2h-code-line": { padding: "0 8px" },
+                      "& .d2h-code-line-ctn": { color: colors.text },
+                      "& .d2h-ins": { background: "#dafbe1" },
+                      "& .d2h-del": { background: "#ffebe9" },
+                      "& .d2h-ins .d2h-code-line-ctn": { color: colors.green },
+                      "& .d2h-del .d2h-code-line-ctn": { color: colors.red },
+                      "& .d2h-code-linenumber": {
+                        color: colors.textMuted,
+                        borderRight: `1px solid ${colors.border}`
+                      },
+                      "& .d2h-file-diff": {
+                        borderBottom: `1px solid ${colors.border}`
+                      },
+                      "& .d2h-diff-tbody": { position: "relative" }
+                    },
+                    innerHTML: diffHtml
+                  }
+                ) : selectedFile ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      padding: "20px",
+                      textAlign: "center",
+                      color: colors.textMuted
+                    },
+                    children: "Loading diff..."
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      padding: "20px",
+                      textAlign: "center",
+                      color: colors.textMuted
+                    },
+                    children: "Select a file to view its diff"
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                flex: "0 0 300px",
+                display: "flex",
+                gap: "1px",
+                background: colors.border,
+                minHeight: "200px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: colors.bg,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            padding: "8px 12px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px",
+                            color: colors.textMuted,
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsx("span", { children: [
+                            "Unstaged (",
+                            unstaged.length,
+                            ")"
+                          ] })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: [
+                        unstaged.map((file) => /* @__PURE__ */ jsx(
+                          StatusFileItem,
+                          {
+                            file,
+                            isSelected: selectedFile?.path === file.path && selectedFile?.type === "unstaged",
+                            onSelect: (signal) => selectFile(file.path, "unstaged", signal),
+                            onDoubleClick: () => handleStage([file.path])
+                          },
+                          file.path
+                        )),
+                        unstaged.length === 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            css: {
+                              padding: "12px",
+                              color: colors.textMuted,
+                              fontSize: "12px",
+                              textAlign: "center"
+                            },
+                            children: "No unstaged changes"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: colors.bg,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            padding: "8px 12px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px",
+                            color: colors.textMuted
+                          },
+                          children: "Commit Message"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            flex: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            padding: "12px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "textarea",
+                              {
+                                css: {
+                                  flex: 1,
+                                  resize: "none",
+                                  border: `1px solid ${colors.border}`,
+                                  borderRadius: "4px",
+                                  padding: "8px",
+                                  fontSize: "13px",
+                                  fontFamily: "sf-mono, monospace",
+                                  background: colors.bg,
+                                  color: colors.text,
+                                  "&:focus": {
+                                    outline: "none",
+                                    borderColor: colors.accent
+                                  },
+                                  "&::placeholder": {
+                                    color: colors.textMuted
+                                  }
+                                },
+                                placeholder: "Enter commit message...",
+                                value: commitMessage,
+                                on: {
+                                  input: (e) => {
+                                    commitMessage = e.currentTarget.value;
+                                    handle.update();
+                                  },
+                                  keydown: (e) => {
+                                    if (e.metaKey && e.key === "Enter") {
+                                      e.preventDefault();
+                                      handleCommit();
+                                    }
+                                  }
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                css: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "space-between",
+                                  marginTop: "12px",
+                                  gap: "12px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "label",
+                                    {
+                                      css: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "6px",
+                                        fontSize: "12px"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          "input",
+                                          {
+                                            type: "checkbox",
+                                            checked: amend,
+                                            on: {
+                                              change: (e) => toggleAmend(e.currentTarget.checked)
+                                            }
+                                          }
+                                        ),
+                                        "Amend"
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    "button",
+                                    {
+                                      css: {
+                                        padding: "6px 16px",
+                                        border: "none",
+                                        borderRadius: "4px",
+                                        background: displayStaged.length > 0 && commitMessage.trim() ? colors.accent : colors.bgLighter,
+                                        color: displayStaged.length > 0 && commitMessage.trim() ? "#fff" : colors.textMuted,
+                                        fontSize: "12px",
+                                        fontWeight: 600,
+                                        cursor: displayStaged.length > 0 && commitMessage.trim() ? "pointer" : "not-allowed",
+                                        "&:hover": {
+                                          background: displayStaged.length > 0 && commitMessage.trim() ? "#0860ca" : colors.bgLighter
+                                        }
+                                      },
+                                      disabled: displayStaged.length === 0 || !commitMessage.trim() || loading,
+                                      on: { click: handleCommit },
+                                      children: loading ? "..." : "Commit"
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: colors.bg,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            padding: "8px 12px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px",
+                            color: colors.textMuted
+                          },
+                          children: [
+                            "Staged (",
+                            displayStaged.length,
+                            ")"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: [
+                        displayStaged.map((file) => /* @__PURE__ */ jsx(
+                          StatusFileItem,
+                          {
+                            file,
+                            isSelected: selectedFile?.path === file.path && selectedFile?.type === "staged",
+                            onSelect: (signal) => selectFile(file.path, "staged", signal),
+                            onDoubleClick: () => handleUnstage([file.path])
+                          },
+                          file.path
+                        )),
+                        displayStaged.length === 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            css: {
+                              padding: "12px",
+                              color: colors.textMuted,
+                              fontSize: "12px",
+                              textAlign: "center"
+                            },
+                            children: "No staged changes"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
+}
+function StatusFileItem() {
+  return ({
+    file,
+    isSelected,
+    onSelect,
+    onDoubleClick
+  }) => {
+    let displayName = file.path.split("/").pop() ?? file.path;
+    let statusLabel = {
+      M: "MOD",
+      A: "ADD",
+      D: "DEL",
+      R: "REN",
+      "?": "NEW"
+    }[file.status] ?? file.status;
+    let statusColor = {
+      M: colors.accent,
+      A: colors.green,
+      D: colors.red,
+      R: colors.accent,
+      "?": colors.green
+    }[file.status] ?? colors.textMuted;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          padding: "6px 12px",
+          background: isSelected ? colors.accentDim : "transparent",
+          userSelect: "none",
+          "&:hover": {
+            background: isSelected ? colors.accentDim : colors.bgLighter
+          }
+        },
+        on: {
+          click: (_, signal) => onSelect(signal),
+          dblclick: onDoubleClick
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      fontSize: "9px",
+                      fontWeight: 600,
+                      padding: "2px 4px",
+                      borderRadius: "3px",
+                      background: statusColor,
+                      color: "#fff"
+                    },
+                    children: statusLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      flex: 1,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      fontSize: "12px"
+                    },
+                    title: file.path,
+                    children: displayName
+                  }
+                )
+              ]
+            }
+          ),
+          file.path !== displayName && /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                fontSize: "10px",
+                color: colors.textMuted,
+                marginTop: "2px",
+                marginLeft: "32px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: file.path
+            }
+          )
+        ]
+      }
+    );
+  };
+}
 createRoot(document.body).render(/* @__PURE__ */ jsx(App, {}));

package/dist/server.js

@@ -9033,6 +9033,112 @@ function formatDate(date) {
     minute: "2-digit"
   });
 }
+async function getStatus() {
+  let output = await git("status --porcelain=v1");
+  let lines = output ? output.split("\n").filter(Boolean) : [];
+  let staged = [];
+  let unstaged = [];
+  for (let line of lines) {
+    let indexStatus = line[0];
+    let workTreeStatus = line[1];
+    let path4 = line.slice(3);
+    if (path4.includes(" -> ")) {
+      path4 = path4.split(" -> ")[1];
+    }
+    if (indexStatus !== " " && indexStatus !== "?") {
+      staged.push({ path: path4, status: indexStatus });
+    }
+    if (workTreeStatus !== " ") {
+      let status = workTreeStatus === "?" ? "?" : workTreeStatus;
+      unstaged.push({ path: path4, status });
+    }
+  }
+  return { staged, unstaged };
+}
+async function stageFiles(paths) {
+  if (paths.length === 0) return;
+  let escaped = paths.map((p) => `"${p}"`).join(" ");
+  await git(`add ${escaped}`);
+}
+async function unstageFiles(paths) {
+  if (paths.length === 0) return;
+  let escaped = paths.map((p) => `"${p}"`).join(" ");
+  await git(`restore --staged ${escaped}`);
+}
+async function commitChanges(message, amend) {
+  let escapedMessage = message.replace(/"/g, '\\"');
+  let args = `commit -m "${escapedMessage}"`;
+  if (amend) {
+    args += " --amend";
+  }
+  await git(args);
+}
+async function getLastCommit() {
+  let format = "%H%x1f%h%x1f%s%x1f%b";
+  let metaOutput = await git(`log -1 --format="${format}"`);
+  let [sha, shortSha, subject, body] = metaOutput.split("");
+  let filesOutput = await git("diff-tree --no-commit-id --name-status -r HEAD");
+  let files = [];
+  if (filesOutput) {
+    for (let line of filesOutput.split("\n").filter(Boolean)) {
+      let [status, ...pathParts] = line.split("	");
+      let path4 = pathParts.join("	");
+      if (pathParts.length > 1) {
+        path4 = pathParts[1];
+      }
+      files.push({ path: path4, status: status[0] });
+    }
+  }
+  return {
+    sha,
+    shortSha,
+    subject,
+    body: body ? body.trimEnd() : "",
+    files
+  };
+}
+async function getWorkingDiff(filePath) {
+  let output = await git(`diff -- "${filePath}"`);
+  if (output) {
+    return output;
+  }
+  try {
+    let fileContent = fs2.readFileSync(path3.join(repoDir, filePath), "utf-8");
+    let lines = fileContent.split("\n");
+    let diffLines = [
+      `diff --git a/${filePath} b/${filePath}`,
+      `new file mode 100644`,
+      `--- /dev/null`,
+      `+++ b/${filePath}`,
+      `@@ -0,0 +1,${lines.length} @@`,
+      ...lines.map((line) => `+${line}`)
+    ];
+    return diffLines.join("\n");
+  } catch {
+    return "";
+  }
+}
+async function getStagedDiff(filePath) {
+  let output = await git(`diff --cached -- "${filePath}"`);
+  if (output) {
+    return output;
+  }
+  try {
+    let fileContent = await git(`show :${filePath}`);
+    let lines = fileContent.split("\n");
+    let diffLines = [
+      `diff --git a/${filePath} b/${filePath}`,
+      `new file mode 100644`,
+      `--- /dev/null`,
+      `+++ b/${filePath}`,
+      `@@ -0,0 +1,${lines.length} @@`,
+      ...lines.map((line) => `+${line}`)
+    ];
+    return diffLines.join("\n");
+  } catch {
+    return "";
+  }
+}
 async function getDiff(sha) {
   let format = "%H%x1f%h%x1f%s%x1f%b%x1f%an%x1f%ai%x1f%P";
   let metaOutput = await git(`show -z --format="${format}" -s ${sha}`);
@@ -9102,9 +9208,102 @@ router.get("/api/diff/:sha", async ({ params }) => {
     return Response.json({ error: "Failed to get diff" }, { status: 500 });
   }
 });
+router.get("/api/status", async () => {
+  try {
+    let status = await getStatus();
+    return Response.json(status);
+  } catch (error) {
+    console.error("Error getting status:", error);
+    return Response.json({ error: "Failed to get status" }, { status: 500 });
+  }
+});
+router.post("/api/stage", async ({ request }) => {
+  try {
+    let { paths } = await request.json();
+    await stageFiles(paths);
+    return Response.json({ success: true });
+  } catch (error) {
+    console.error("Error staging files:", error);
+    return Response.json({ error: "Failed to stage files" }, { status: 500 });
+  }
+});
+router.post("/api/unstage", async ({ request }) => {
+  try {
+    let { paths } = await request.json();
+    await unstageFiles(paths);
+    return Response.json({ success: true });
+  } catch (error) {
+    console.error("Error unstaging files:", error);
+    return Response.json({ error: "Failed to unstage files" }, { status: 500 });
+  }
+});
+router.post("/api/commit", async ({ request }) => {
+  try {
+    let { message, amend } = await request.json();
+    await commitChanges(message, amend || false);
+    return Response.json({ success: true });
+  } catch (error) {
+    console.error("Error committing:", error);
+    return Response.json({ error: "Failed to commit" }, { status: 500 });
+  }
+});
+router.get("/api/last-commit", async () => {
+  try {
+    let lastCommit = await getLastCommit();
+    return Response.json(lastCommit);
+  } catch (error) {
+    console.error("Error getting last commit:", error);
+    return Response.json({ error: "Failed to get last commit" }, { status: 500 });
+  }
+});
+router.get("/api/working-diff", async ({ url }) => {
+  try {
+    let filePath = url.searchParams.get("path");
+    if (!filePath) {
+      return Response.json({ error: "Missing path parameter" }, { status: 400 });
+    }
+    let diffOutput = await getWorkingDiff(filePath);
+    let parsedDiff = (0, import_diff2html.parse)(diffOutput);
+    let diffHtml = (0, import_diff2html.html)(parsedDiff, {
+      drawFileList: false,
+      outputFormat: "line-by-line",
+      matching: "lines"
+    });
+    return Response.json({ diffHtml });
+  } catch (error) {
+    console.error("Error getting working diff:", error);
+    return Response.json({ error: "Failed to get working diff" }, { status: 500 });
+  }
+});
+router.get("/api/staged-diff", async ({ url }) => {
+  try {
+    let filePath = url.searchParams.get("path");
+    if (!filePath) {
+      return Response.json({ error: "Missing path parameter" }, { status: 400 });
+    }
+    let diffOutput = await getStagedDiff(filePath);
+    let parsedDiff = (0, import_diff2html.parse)(diffOutput);
+    let diffHtml = (0, import_diff2html.html)(parsedDiff, {
+      drawFileList: false,
+      outputFormat: "line-by-line",
+      matching: "lines"
+    });
+    return Response.json({ diffHtml });
+  } catch (error) {
+    console.error("Error getting staged diff:", error);
+    return Response.json({ error: "Failed to get staged diff" }, { status: 500 });
+  }
+});
 var server = http.createServer(
   createRequestListener(async (request) => {
-    return await router.fetch(request);
+    let response = await router.fetch(request);
+    let headers = new Headers(response.headers);
+    headers.set("Cache-Control", "no-store");
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers
+    });
   })
 );
 var startPort = 44100;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-viewer",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "description": "Visual git log viewer with branch graph and diff display",
   "repository": {
     "type": "git",