setCommitMsg(e.target.value)}
          onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && canCommit) { e.preventDefault(); onCommit(); } }} />
        <button className="commit-btn" disabled={!canCommit} onClick={onCommit}
          title={canCommit ? "Commit staged changes" : "Stage files and write a message to commit"}>
          {Icon.check({})}<span>Commit{stagedList.length ? " " + stagedList.length : ""}</span>
        </button>
      </div>

<div className="git-body">
        {visible.length === 0 ? (
          <div className="git-empty">{Icon.check({ width: 20, height: 20 })}<span>No changes — working tree clean</span></div>
        ) : (
          <React.Fragment>
            <div className="git-group">
              Staged Changes <span className="gc">{stagedList.length}</span>
              {stagedList.length > 0 && <button className="grp-act" title="Unstage all" onClick={onUnstageAll}>{Icon.minus({})}</button>}
            </div>
            {stagedList.length > 0 ? stagedList.map((c) => (
              <GitRow key={c.path} c={c} staged={true} activePath={activePath}
                onOpen={onOpen} onContext={onContext} onToggleStage={onUnstage} />
            )) : (
              <div className="git-none">Nothing staged — use <span className="key">+</span> to stage a file</div>
            )}

<div className="git-group">
              Changes <span className="gc">{changesList.length}</span>
              {changesList.length > 0 && <button className="grp-act" title="Stage all" onClick={onStageAll}>{Icon.plus({})}</button>}
            </div>
            {changesList.length > 0 ? changesList.map((c) => (
              <GitRow key={c.path} c={c} staged={false} activePath={activePath}
                onOpen={onOpen} onContext={onContext} onToggleStage={onStage} />
            )) : (
              <div className="git-none">All changes staged</div>
            )}
          </React.Fragment>
        )}
      </div>

<div className="git-foot">
        <span className="branch-chip">{Icon.branch({})}<b>{PROJECT.branch}</b></span>
        <span style={{ marginLeft: "auto", fontFamily: "var(--mono)" }}>
          <span className="a" style={{ color: "var(--add)" }}>+{totals.add}</span>{" "}
          <span className="d" style={{ color: "var(--del)" }}>-{totals.del}</span>
        </span>
      </div>
    </React.Fragment>
  );
}

/* ============ File Tree ============ */
function TreeNode({ node, depth, openDirs, toggleDir, onOpen, onContext, activePath, changeMap, committed }) {
  const pad = 10 + depth * 13;
  if (node.type === "dir") {
    const isOpen = openDirs.has(node.path) || node.path === "";
    return (
      <React.Fragment>
        {node.path !== "" && (
          <div className="tree-row folder" style={{ paddingLeft: pad }}
            onClick={() => toggleDir(node.path)}
            onContextMenu={(e) => onContext(e, { path: node.path, kind: "dir" })}>
            <span className="tw"><Chevron open={isOpen} /></span>
            <FolderIcon open={isOpen} />
            <span className="tree-label">{node.name}</span>
          </div>
        )}
        {isOpen && node.children.map((c) => (
          <TreeNode key={c.path} node={c} depth={node.path === "" ? 0 : depth + 1}
            openDirs={openDirs} toggleDir={toggleDir} onOpen={onOpen}
            onContext={onContext} activePath={activePath} changeMap={changeMap} committed={committed} />
        ))}
      </React.Fragment>
    );
  }
  const status = committed && committed.has(node.path) ? null : changeMap[node.path];
  return (
    <div className={"tree-row" + (activePath === node.path ? " active" : "")}
      style={{ paddingLeft: pad + 2 }}
      onClick={() => onOpen(node.path)}
      onContextMenu={(e) => onContext(e, { path: node.path, kind: "file" })}
      title={node.path}>
      <span className="tw" />
      <FileIcon path={node.path} />
      <span className="tree-label" style={status === "D" ? { textDecoration: "line-through", color: "var(--fg-3)" } : null}>{node.name}</span>
      {status && <span className={"tree-badge " + status}>{status}</span>}
    </div>
  );
}

function FileTree({ tree, openDirs, toggleDir, onOpen, onContext, activePath, changeMap, committed }) {
  return (
    <React.Fragment>
      <div className="phead">
        <span>Explorer</span>
        <span style={{ marginLeft: "auto", color: "var(--fg-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--mono)", fontSize: 10.5 }}>{tree.name}</span>
      </div>
      <div className="tree-body">
        <TreeNode node={tree} depth={0} openDirs={openDirs} toggleDir={toggleDir}
          onOpen={onOpen} onContext={onContext} activePath={activePath} changeMap={changeMap} committed={committed} />
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Icon, Chevron, FolderIcon, FileIcon, GitPanel, FileTree });