feat: edit in the Changes panel, git graph history, plan quota (v2.3.0)

- Changes panel: a working file opens in a CodeMirror editor with its diff
  inline (DiffEditor.tsx, @codemirror/merge, lazy-loaded); Changes folds the
  unchanged lines, Whole file shows them; side by side at 50/50 and full
  width; a Revert per block; original from HEAD or the branch's merge base
  (`mergeBase` on GET /git/changes?range=branch)
- Every diff: green = line added whole, red = removed whole, blue = edited
  in place (--diff-mod)
- History drawn as a commit graph (#58: `parents` on GET /git/log,
  --date-order; lib/commitGraph.ts)
- Per-workspace never-stage list, drawn orange in the Files tree (--kept);
  closed Terminal rows past three deleted
- Status bar plan quota for Claude (per account) and Codex
  (GET /api/pricing/quota, server/lib/quota.js); compact hover panel that
  stays open, Refresh button with a spinner
- Settings → Appearance holds language, theme and pet; Ctrl+Shift+C copies;
  compact sidebar navigation and short session times

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -437,7 +437,7 @@ export function WorkspaceSessionList({
   if (sessions !== null && shown.length === 0 && fresh.length === 0 && closed.length === 0) {
     return (
       <>
-        <p className="py-1 pl-8 text-[11px] text-fg-muted">{t("tree.noSessions")}</p>
+        <p className="py-1 pl-[42px] text-[11px] text-fg-muted">{t("tree.noSessions")}</p>
         {failure}
         {confirmArchive}
       </>
@@ -445,7 +445,11 @@ export function WorkspaceSessionList({
   }
   return (
     <>
-      <ul data-testid={`workspace-sessions-${lane.id}`} className="space-y-px">
+      <ul
+        data-testid={`workspace-sessions-${lane.id}`}
+        // A guide line under the workspace's chevron; the rows start past it.
+        className="relative space-y-px pl-5 before:pointer-events-none before:absolute before:inset-y-0 before:left-[13px] before:w-px before:bg-border before:content-['']"
+      >
         {fresh.map((r) => (
           <li key={r.id}>
             <button
@@ -460,7 +464,7 @@ export function WorkspaceSessionList({
               }
               onContextMenu={(e) => ctx.open(e, r)}
               title={`${r.tool === "shell" ? t("tabs.terminal") : t("tree.newSession")}\n${t("tree.splitHint")}`}
-              className={`flex w-full items-center gap-2 rounded-md py-1 pl-7 pr-2 text-left text-[12px] ${
+              className={`flex w-full items-center gap-2 rounded-md py-1 pl-2 pr-2 text-left text-[12px] ${
                 r.id === selectedRunId
                   ? "bg-accent/10 text-fg-primary"
                   : "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
@@ -472,7 +476,7 @@ export function WorkspaceSessionList({
                 {r.tool === "shell" ? t("tabs.terminal") : t("tree.newSession")}
               </span>
               <span className="ml-auto shrink-0 text-[11px] text-fg-muted">
-                {r.startedAt ? timeAgo(r.startedAt) : null}
+                {r.startedAt ? timeAgo(r.startedAt, true) : null}
               </span>
               {r.tool === "shell" ? (
                 <SquareTerminal aria-hidden className="h-3.5 w-3.5 shrink-0 opacity-70" />
@@ -490,7 +494,7 @@ export function WorkspaceSessionList({
           const selected = run ? run.id === selectedRunId : s.id === selectedSessionId;
           if (renaming === s.id) {
             return (
-              <li key={s.id} className="py-0.5 pl-7 pr-2">
+              <li key={s.id} className="py-0.5 pr-2">
                 <input
                   data-testid={`workspace-session-rename-${s.id}`}
                   aria-label={t("tree.renameSession")}
@@ -544,7 +548,7 @@ export function WorkspaceSessionList({
                     ? `\n${t("tree.worktreeSession", { name: sessionWorktreeName(lane, s) })}`
                     : ""
                 }\n${run ? t("tree.splitHint") : t("tree.transcriptHint")}`}
-                className={`flex w-full items-center gap-2 rounded-md py-1 pl-7 pr-2 text-left text-[12px] ${
+                className={`flex w-full items-center gap-2 rounded-md py-1 pl-2 pr-2 text-left text-[12px] ${
                   selected
                     ? "bg-accent/10 text-fg-primary"
                     : "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
@@ -564,12 +568,12 @@ export function WorkspaceSessionList({
                     className="h-3 w-3 shrink-0 text-fg-muted"
                   />
                 )}
-                <span className="ml-auto shrink-0 text-[11px] text-fg-muted">
-                  {timeAgo(s.last_activity ?? s.started_at)}
+                <span className="ml-auto shrink-0 text-[11px] tabular-nums text-fg-muted">
+                  {timeAgo(s.last_activity ?? s.started_at, true)}
                 </span>
                 <AiToolIcon
                   tool={{ id: s.tool || "claude", label: tools.label(s.tool || "claude") }}
-                  className="h-3.5 w-3.5 shrink-0 !p-0 opacity-70 group-hover:invisible"
+                  className="h-3.5 w-3.5 shrink-0 !p-0 opacity-60 group-hover:invisible"
                 />
               </button>
               <button
@@ -595,7 +599,7 @@ export function WorkspaceSessionList({
               onClick={(e) => void reopenShell(e.ctrlKey || e.metaKey)}
               onContextMenu={(e) => closedCtx.open(e, r)}
               title={t("tree.closedTerminal")}
-              className="flex w-full items-center gap-2 rounded-md py-1 pl-7 pr-2 text-left text-[12px] text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+              className="flex w-full items-center gap-2 rounded-md py-1 pl-2 pr-2 text-left text-[12px] text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
             >
               <span
                 aria-hidden
@@ -604,7 +608,7 @@ export function WorkspaceSessionList({
               <span className="sr-only">{t("tree.state.idle")}</span>
               <span className="truncate">{t("tabs.terminal")}</span>
               <span className="ml-auto shrink-0 text-[11px]">
-                {timeAgo(r.ended_at ?? r.started_at)}
+                {timeAgo(r.ended_at ?? r.started_at, true)}
               </span>
               <SquareTerminal
                 aria-hidden
@@ -629,7 +633,7 @@ export function WorkspaceSessionList({
           type="button"
           data-testid={`workspace-sessions-more-${lane.id}`}
           onClick={() => own && setLimit(own.total)}
-          className="w-full py-1 pl-8 pr-2 text-left text-[11px] text-fg-muted hover:text-fg-primary"
+          className="w-full py-1 pl-[42px] pr-2 text-left text-[11px] text-fg-muted hover:text-fg-primary"
         >
           {t("tree.seeAll", { count: more })}
         </button>