@nkzw/codiff-core 1.9.0 → 1.10.0

package/dist/style.css

@@ -4805,6 +4805,7 @@ form._multiFieldForm_sre1d_1628 {
 }
 
 .app-shell {
+  grid-template-rows: 40px minmax(0, 1fr);
   grid-template-columns: 292px 0 minmax(0, 1fr);
   height: 100%;
   display: grid;
@@ -4818,18 +4819,21 @@ form._multiFieldForm_sre1d_1628 {
   overflow: hidden;
 }
 
-.plan-header {
+.workspace-top-bar {
   -webkit-app-region: drag;
   backdrop-filter: blur(28px) saturate(1.3);
   background: var(--sidebar-bg);
   border-bottom: 1px solid var(--sidebar-border);
   align-items: center;
   height: 40px;
-  padding: 0 14px 0 78px;
   display: flex;
 }
 
-html[data-codiff-platform="darwin"] .plan-header {
+.plan-header {
+  padding: 0 14px 0 78px;
+}
+
+html[data-codiff-platform="darwin"] .workspace-top-bar {
   backdrop-filter: none;
   background: var(--sidebar-vibrancy-tint);
 }
@@ -5238,7 +5242,6 @@ html[data-codiff-platform="darwin"] .plan-header {
 }
 
 .app-shell.sidebar-collapsed {
-  grid-template-rows: auto minmax(0, 1fr);
   grid-template-columns: minmax(0, 1fr);
 }
 
@@ -5246,46 +5249,214 @@ html[data-codiff-platform="darwin"] .plan-header {
   display: none;
 }
 
-.collapsed-sidebar-bar {
-  -webkit-app-region: drag;
-  backdrop-filter: blur(28px) saturate(1.3);
-  background: var(--sidebar-bg);
-  border-bottom: 1px solid var(--sidebar-border);
-  box-sizing: border-box;
-  corner-shape: initial;
-  border-radius: 0;
-  grid-column: 1 / -1;
+.review-top-bar {
+  grid-area: 1 / 1 / auto / -1;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 12px;
+  min-width: 0;
+  padding: 0 14px 0 78px;
+  display: grid;
+}
+
+.share-shell .review-top-bar, .app-shell.window-fullscreen .review-top-bar {
+  padding-left: 14px;
+}
+
+.review-top-bar-left, .review-top-bar-right {
   align-items: center;
   gap: 8px;
-  height: 40px;
-  margin: 0;
-  padding: 0 14px 0 78px;
+  min-width: 0;
   display: flex;
 }
 
-html[data-codiff-platform="darwin"] .collapsed-sidebar-bar {
-  backdrop-filter: none;
-  background: var(--sidebar-vibrancy-tint);
+.review-top-bar-left {
+  justify-content: flex-start;
 }
 
-.app-shell.window-fullscreen .collapsed-sidebar-bar {
-  padding-left: 14px;
+.review-top-bar-right {
+  justify-content: flex-end;
 }
 
-.collapsed-sidebar-label {
+.review-top-bar-repository-slot {
   color: var(--sidebar-text);
   font-family: var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
   flex: 1;
+  align-items: center;
   min-width: 0;
   font-size: 12px;
   font-weight: 600;
   line-height: 1.35;
+  display: flex;
+}
+
+.review-top-bar-repository {
+  -webkit-app-region: no-drag;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
 }
 
-.sidebar-toggle-button {
+.review-top-bar-repository-path {
+  flex: 0 auto;
+  align-items: center;
+  display: flex;
+}
+
+.review-top-bar-repository-head {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.review-top-bar-repository-tail {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: none;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.review-top-bar-branch {
+  color: var(--muted);
+  corner-shape: squircle;
+  font: 600 12px/1 var(--font-sans);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 14px;
+  flex: none;
+  align-items: center;
+  max-width: min(240px, 24vw);
+  padding: 4px 8px;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+a.review-top-bar-repository, a.review-top-bar-source {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.review-top-bar-repository:hover, a.review-top-bar-source:hover {
+  color: var(--text);
+}
+
+a.review-top-bar-repository:focus-visible, a.review-top-bar-source:focus-visible {
+  outline: 1px solid var(--tree-selection-focus);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+
+.review-top-bar-source {
+  -webkit-app-region: no-drag;
+  color: var(--sidebar-text);
+  font: 600 12px/1.35 var(--font-mono);
+  white-space: nowrap;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
+}
+
+.review-top-bar-context {
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.review-top-bar-actions {
+  -webkit-app-region: no-drag;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.review-top-bar-settings, .review-top-bar-settings > * {
+  flex: none;
+  align-items: center;
+  width: auto;
+  display: flex;
+}
+
+.review-mode-control {
+  -webkit-app-region: no-drag;
+  corner-shape: squircle;
+  border-radius: 16px;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  padding: 2px;
+  display: inline-flex;
+}
+
+.review-top-bar-branch, .review-mode-control {
+  background: #7f7f7f14;
+  border: 1px solid #7f7f7f1f;
+}
+
+.review-mode-control button {
+  color: var(--muted);
+  corner-shape: squircle;
+  cursor: pointer;
+  font: 600 11px/1 var(--font-sans);
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  border-radius: 14px;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: 24px;
+  padding: 0 8px;
+  display: inline-flex;
+}
+
+.review-mode-control button:hover {
+  color: var(--sidebar-text);
+  background: #7f7f7f17;
+}
+
+.review-mode-control button[aria-selected="true"] {
+  background: var(--hover-wash);
+  color: var(--sidebar-text);
+  box-shadow: 0 1px 2px #00000014;
+}
+
+.review-mode-label {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.review-mode-count {
+  color: inherit;
+  font: 700 10px/1 var(--font-mono);
+  text-align: center;
+  background: #7f7f7f29;
+  border-radius: 999px;
+  flex: none;
+  min-width: 16px;
+  padding: 3px 5px;
+}
+
+.review-mode-dot {
+  background: var(--sidebar-ref);
+  border-radius: 50%;
+  flex: none;
+  width: 6px;
+  height: 6px;
+}
+
+.review-top-bar-icon-button {
   -webkit-app-region: no-drag;
   color: var(--muted);
   corner-shape: squircle;
@@ -5303,12 +5474,13 @@ html[data-codiff-platform="darwin"] .collapsed-sidebar-bar {
   display: inline-flex;
 }
 
-.sidebar-toggle-button:hover {
+.review-top-bar-icon-button:hover {
   color: var(--sidebar-text);
   background: #7f7f7f24;
 }
 
-.sidebar-toggle-button:active {
+.review-top-bar-icon-button:active {
+  color: var(--sidebar-text);
   background: #7f7f7f33;
 }
 
@@ -5321,6 +5493,10 @@ html[data-codiff-platform="darwin"] .collapsed-sidebar-bar {
   position: relative;
 }
 
+.app-shell > .sidebar, .app-shell > .sidebar-resizer, .app-shell > .review {
+  grid-row: 2;
+}
+
 .sidebar-resizer:before {
   content: "";
   background: none;
@@ -5581,31 +5757,6 @@ html[data-codiff-platform="darwin"] .sidebar {
   background: var(--sidebar-vibrancy-tint);
 }
 
-.sidebar-header {
-  -webkit-app-region: drag;
-  border-bottom: 1px solid var(--sidebar-border);
-  flex: none;
-  min-width: 0;
-  padding: 0 14px;
-}
-
-.sidebar-path-row {
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  min-height: 38px;
-  padding-left: 64px;
-  display: flex;
-}
-
-.app-shell.window-fullscreen .sidebar-path-row, .share-shell .sidebar-path-row {
-  padding-left: 0;
-}
-
-.merge-request-shell .sidebar-path-row {
-  gap: 6px;
-}
-
 .merge-request-nav-button {
   color: var(--muted);
   cursor: pointer;
@@ -5640,19 +5791,6 @@ html[data-codiff-platform="darwin"] .sidebar {
   padding: 18px 14px;
 }
 
-.sidebar-path {
-  color: var(--sidebar-text);
-  font-family: var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.35;
-  overflow: hidden;
-}
-
 .sidebar-search-row {
   flex: none;
   gap: 8px;
@@ -5660,78 +5798,6 @@ html[data-codiff-platform="darwin"] .sidebar {
   display: grid;
 }
 
-.sidebar-mode-toggle {
-  border-bottom: 1px solid var(--sidebar-border);
-  flex: none;
-  grid-template-columns: minmax(48px, .75fr) minmax(96px, 1.35fr) minmax(68px, .9fr);
-  gap: 6px;
-  padding: 0 8px;
-  display: grid;
-}
-
-.share-shell .sidebar-mode-toggle {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.share-shell .sidebar-mode-toggle-with-comments, .merge-request-shell .sidebar-mode-toggle {
-  grid-template-columns: minmax(42px, .65fr) minmax(88px, 1.05fr) minmax(102px, 1.3fr);
-}
-
-.sidebar-mode-toggle button {
-  -webkit-app-region: no-drag;
-  color: var(--muted);
-  corner-shape: squircle;
-  cursor: pointer;
-  font: 600 12px/1.35 var(--font-sans);
-  background: none;
-  border: 0;
-  border-radius: 24px 24px 0 0;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  height: 30px;
-  padding: 0 8px;
-  display: inline-flex;
-}
-
-.sidebar-mode-toggle button span:first-child {
-  text-overflow: ellipsis;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.sidebar-tab-count {
-  color: var(--muted);
-  font: 700 10px/1 var(--font-mono);
-  text-align: center;
-  background: #7f7f7f29;
-  border-radius: 999px;
-  flex: none;
-  min-width: 16px;
-  padding: 3px 5px;
-}
-
-.sidebar-mode-toggle button[aria-selected="true"] .sidebar-tab-count {
-  color: var(--sidebar-text);
-  background: #7f7f7f38;
-}
-
-.sidebar-mode-toggle button:hover:not(:disabled) {
-  color: var(--sidebar-text);
-  background: #7f7f7f1a;
-}
-
-.sidebar-mode-toggle button[aria-selected="true"] {
-  color: var(--sidebar-text);
-  background: #7f7f7f24;
-}
-
-.sidebar-mode-toggle button:disabled {
-  cursor: default;
-  opacity: .45;
-}
-
 .sidebar-settings-bar {
   border-top: 1px solid var(--sidebar-border);
   flex: none;
@@ -8120,6 +8186,7 @@ diffs-container .review-comment-thread {
 
 .empty-panel code {
   color: var(--text);
+  overflow-wrap: anywhere;
 }
 
 .empty-panel-menu-path {
@@ -8304,9 +8371,8 @@ diffs-container .review-comment-thread {
   padding: 4px 6px;
 }
 
-.command-bar-overlay {
+.command-bar-overlay, .open-review-source-overlay {
   backdrop-filter: blur(4px);
-  z-index: 100;
   background: #ffffff47;
   justify-content: center;
   align-items: flex-start;
@@ -8316,28 +8382,35 @@ diffs-container .review-comment-thread {
   inset: 0;
 }
 
-:root[data-theme="dark"] .command-bar-overlay {
+.command-bar-overlay {
+  z-index: 100;
+}
+
+:root[data-theme="dark"] .command-bar-overlay, :root[data-theme="dark"] .open-review-source-overlay {
   background: #00000029;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) .command-bar-overlay {
+  :root:not([data-theme="light"]) .command-bar-overlay, :root:not([data-theme="light"]) .open-review-source-overlay {
     background: #00000029;
   }
 }
 
-.command-bar {
+.command-bar, .open-review-source-dialog {
   backdrop-filter: blur(28px) saturate(1.4);
   background: color-mix(in srgb, var(--code-bg) 88%, transparent);
   border: 1px solid var(--file-border);
   corner-shape: squircle;
   border-radius: 28px;
+  box-shadow: inset 0 0 0 1px #ffffff1f, 0 18px 80px -54px #000000c7, 0 16px 46px -30px #000000b8, 0 12px 24px -18px #000000e6;
+}
+
+.command-bar {
   flex-direction: column;
   width: min(520px, 90vw);
   max-height: 400px;
   display: flex;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px #ffffff1f, 0 18px 80px -54px #000000c7, 0 16px 46px -30px #000000b8, 0 12px 24px -18px #000000e6;
 }
 
 .command-bar-input {
@@ -8425,25 +8498,85 @@ diffs-container .review-comment-thread {
   padding: 3px 6px;
 }
 
-@container sidebar (width <= 260px) {
-  .sidebar-mode-toggle {
-    grid-template-columns: minmax(42px, .75fr) minmax(82px, 1.35fr) minmax(58px, .9fr);
-    gap: 4px;
-    padding-inline: 8px;
-  }
+.open-review-source-overlay {
+  z-index: 101;
+  padding-inline: 16px;
+}
+
+.open-review-source-dialog {
+  flex-direction: column;
+  gap: 18px;
+  width: min(520px, 100%);
+  padding: 20px;
+  display: flex;
+  box-shadow: 0 10px 30px #00000029;
+}
+
+.open-review-source-heading {
+  gap: 5px;
+  display: grid;
+}
+
+.open-review-source-heading h2 {
+  font: 600 16px/1.35 var(--font-sans);
+}
 
-  .share-shell .sidebar-mode-toggle-with-comments, .merge-request-shell .sidebar-mode-toggle {
-    grid-template-columns: minmax(40px, .65fr) minmax(78px, 1.05fr) minmax(88px, 1.3fr);
+.open-review-source-heading p, .open-review-source-error {
+  color: var(--muted);
+  font: 13px/1.4 var(--font-sans);
+}
+
+.open-review-source-field {
+  gap: 7px;
+  display: grid;
+}
+
+.open-review-source-label {
+  font: 600 12px/1.35 var(--font-sans);
+}
+
+.open-review-source-input {
+  color: var(--text);
+  corner-shape: squircle;
+  font: 14px/1.35 var(--font-sans);
+  background: #7f7f7f1a;
+  border: 0;
+  border-radius: 17px;
+  outline: none;
+  width: 100%;
+  height: 34px;
+  padding: 0 12px;
+}
+
+.open-review-source-input:focus {
+  box-shadow: 0 0 0 2px #3d87f552;
+}
+
+.open-review-source-input::placeholder {
+  color: var(--muted);
+}
+
+.open-review-source-error {
+  color: var(--danger);
+}
+
+.open-review-source-actions {
+  justify-content: space-between;
+  display: flex;
+}
+
+@media (width <= 720px) {
+  .review-top-bar-repository-slot, .review-top-bar-context {
+    display: none;
   }
+}
 
-  .sidebar-mode-toggle button {
-    gap: 4px;
-    padding-inline: 4px;
-    font-size: 11px;
+@media (width <= 480px) {
+  .review-mode-control button {
+    padding-inline: 7px;
   }
 
-  .sidebar-tab-count {
-    min-width: 14px;
-    padding-inline: 4px;
+  .review-mode-label {
+    display: none;
   }
 }

package/dist/types.d.ts

@@ -147,6 +147,8 @@ export type ReviewSource = {
     type: 'pull-request';
     url: string;
 };
+/** Sources that can be entered from the palette or native application menu. */
+export type OpenReviewSourceKind = 'branch' | 'commit' | 'pull-request';
 export type HistoryEntry = {
     author: string;
     committedAt: number;
@@ -355,6 +357,7 @@ export type WalkthroughContext = {
 };
 export type CodiffLaunchOptions = {
     agentBackend?: 'codex' | 'claude' | 'opencode' | 'pi';
+    applyUpdate?: boolean;
     claudeSessionId?: string;
     codexSessionId?: string;
     opencodeSessionId?: string;
@@ -647,6 +650,14 @@ export type CodiffPreferences = {
     wordWrap: boolean;
 };
 export type ReviewPreferences = Pick<CodiffPreferences, 'codeFontFamily' | 'codeFontSize' | 'diffStyle' | 'showWhitespace' | 'theme' | 'wordWrap'>;
+export type CodiffUpdatePhase = 'available' | 'error' | 'idle' | 'installerReady' | 'updating';
+export type CodiffUpdateStatus = {
+    currentVersion: string;
+    message?: string;
+    phase: CodiffUpdatePhase;
+    strategy?: 'download' | 'manual' | 'squirrel';
+    version?: string;
+};
 export type PullRequestReviewComment = {
     anchor?: 'file' | 'line';
     body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkzw/codiff-core",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A fast diff viewer.",
   "license": "MIT",
   "author": {
@@ -18,6 +18,7 @@
   "type": "module",
   "sideEffects": [
     "./App.css",
+    "./Desktop.css",
     "./dist/*.css"
   ],
   "main": "./dist/index.mjs",
@@ -55,10 +56,10 @@
     "@phosphor-icons/react": "^2.1.10",
     "@pierre/diffs": "1.3.0-beta.9",
     "@pierre/trees": "1.0.0-beta.5",
-    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-slot": "^1.3.3",
     "class-variance-authority": "^0.7.1",
     "ghostty-web": "^0.4.0",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.26.0",
     "valibot": "^1.4.2"
   },
   "peerDependencies": {