Add fullscreen review display mode

Author: Waishnav

src/ui/review-payload.tsx

@@ -11,6 +11,7 @@ interface PayloadRendererOptions {
   hostContext?: HostContext;
   errorMessage?: string | null;
   visibleFileCount?: number;
+  presentation?: "inline" | "fullscreen";
 }
 
 interface MountedPayload {

src/ui/workspace-app.css

@@ -198,12 +198,63 @@ body {
   grid-template-columns: 54px minmax(0, 1fr) auto 24px;
 }
 
+.review-header-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding-right: 16px;
+}
+
 .review-title-group {
   display: grid;
   min-width: 0;
   gap: 3px;
 }
 
+.review-header-actions,
+.review-fullscreen-actions,
+.review-fullscreen-title {
+  display: flex;
+  align-items: center;
+}
+
+.review-header-actions,
+.review-fullscreen-actions {
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.review-button {
+  min-height: 34px;
+  padding: 0 13px;
+  border: 1px solid color-mix(in srgb, var(--color-border-primary, #3a3a40) 92%, transparent);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--color-background-tertiary, #333338) 88%, transparent);
+  color: var(--color-text-primary, #f5f5f6);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--font-text-sm-size, 13px);
+  font-weight: 500;
+}
+
+.review-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-background-tertiary, #414148) 96%, transparent);
+}
+
+.review-button:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.review-mode-error {
+  padding: 8px 14px;
+  border-top: 1px solid color-mix(in srgb, var(--color-border-danger, #7f3030) 56%, transparent);
+  background: color-mix(in srgb, var(--color-background-danger, #421e1e) 24%, transparent);
+  color: var(--color-danger-text, #ee7676);
+  font-size: var(--font-text-sm-size, 12px);
+}
+
 .review-summary {
   display: grid;
   border-top: 1px solid var(--tool-card-divider);
@@ -247,6 +298,48 @@ body {
   flex: none;
 }
 
+.review-fullscreen-shell {
+  height: 100vh;
+  height: 100dvh;
+}
+
+.review-fullscreen {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--color-background-primary, #18191d);
+  color: var(--color-text-primary, #f5f5f6);
+}
+
+.review-fullscreen-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-height: 68px;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--color-border-primary, #3a3a40);
+  background: color-mix(in srgb, var(--color-background-secondary, #28282d) 94%, transparent);
+}
+
+.review-fullscreen-title {
+  min-width: 0;
+  gap: 12px;
+}
+
+.review-fullscreen-body {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.review-fullscreen .review-diff {
+  height: 100%;
+  max-height: none;
+}
+
 .review-diff {
   display: grid;
   max-height: 520px;
@@ -377,4 +470,9 @@ body {
   .review-header {
     grid-template-columns: 42px minmax(0, 1fr) auto 18px;
   }
+
+  .review-header-row {
+    gap: 8px;
+    padding-right: 12px;
+  }
 }

src/ui/workspace-app.tsx

@@ -33,6 +33,7 @@ interface MountedPayload {
     hostContext?: HostContext;
     errorMessage?: string | null;
     visibleFileCount?: number;
+    presentation?: "inline" | "fullscreen";
   }): void;
   unmount(): void;
 }
@@ -44,6 +45,8 @@ let hostContext: HostContext | undefined;
 let card: ToolResultCard | null = null;
 let expanded = false;
 let reviewFilesExpanded = false;
+let reviewDisplayModePending = false;
+let reviewDisplayModeError: string | null = null;
 let errorMessage: string | null = null;
 let currentPayload: MountedPayload | null = null;
 let currentPayloadContainer: HTMLElement | null = null;
@@ -78,6 +81,8 @@ async function boot(): Promise<void> {
       card = null;
       expanded = false;
       reviewFilesExpanded = false;
+      reviewDisplayModePending = false;
+      reviewDisplayModeError = null;
       errorMessage = "No result card is available for this tool result.";
       render();
       return;
@@ -87,16 +92,27 @@ async function boot(): Promise<void> {
     card = nextCard;
     expanded = isReviewTool(tool) && isExpandableCard(nextCard);
     reviewFilesExpanded = false;
+    reviewDisplayModePending = false;
+    reviewDisplayModeError = null;
     errorMessage = null;
     render();
   };
 
   app.onhostcontextchanged = (ctx) => {
+    const previousDisplayMode = hostContext?.displayMode;
     hostContext = {
       ...hostContext,
       ...ctx,
     };
     applyHostContext();
+    if (
+      previousDisplayMode !== hostContext.displayMode &&
+      card &&
+      isReviewTool(card.tool)
+    ) {
+      render();
+      return;
+    }
     renderPayloadIfNeeded();
   };
 
@@ -216,7 +232,10 @@ function renderEmpty(message: string, tone: "muted" | "error" = "muted"): void {
 }
 
 async function renderPayloadIfNeeded(): Promise<void> {
-  if (!card || !currentPayloadContainer || !expanded) return;
+  const fullscreenReview = card &&
+    isReviewTool(card.tool) &&
+    hostContext?.displayMode === "fullscreen";
+  if (!card || !currentPayloadContainer || (!expanded && !fullscreenReview)) return;
 
   const target = currentPayloadContainer;
 
@@ -262,12 +281,23 @@ async function renderPayloadIfNeeded(): Promise<void> {
   }
 
   if (isReviewTool(card.tool) || isPatchTool(card.tool)) {
-    const visibleFileCount = isReviewTool(card.tool) && !reviewFilesExpanded
+    const presentation = isReviewTool(card.tool) && hostContext?.displayMode === "fullscreen"
+      ? "fullscreen"
+      : "inline";
+    const visibleFileCount = isReviewTool(card.tool) &&
+        presentation === "inline" &&
+        !reviewFilesExpanded
       ? Math.max(3, (card.files ?? []).slice(0, 3).length)
       : undefined;
 
     if (currentPayload) {
-      currentPayload.update({ card, hostContext, errorMessage, visibleFileCount });
+      currentPayload.update({
+        card,
+        hostContext,
+        errorMessage,
+        visibleFileCount,
+        presentation,
+      });
       return;
     }
 
@@ -281,6 +311,7 @@ async function renderPayloadIfNeeded(): Promise<void> {
       hostContext,
       errorMessage,
       visibleFileCount,
+      presentation,
     });
     return;
   }
@@ -351,11 +382,17 @@ function renderHeaderSummary(card: ToolResultCard): HTMLElement {
 function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
   unmountPayload();
 
+  if (hostContext?.displayMode === "fullscreen") {
+    renderFullscreenReview(card, display);
+    return;
+  }
+
   const files = card.files ?? [];
   const hiddenCount = Math.max(0, files.length - 3);
   const expandable = isExpandableCard(card);
   const main = element("main", { className: "shell" });
   const section = element("section", { className: "tool-card review" });
+  const headerRow = element("div", { className: "review-header-row" });
   const header = element("button", {
     className: "tool-header review-header",
     type: "button",
@@ -389,7 +426,28 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
     renderChevron(expanded, expandable),
   );
 
-  section.append(header);
+  headerRow.append(header);
+  if (files.length > 0 && canRequestDisplayMode("fullscreen")) {
+    const reviewButton = element("button", {
+      className: "review-button",
+      type: "button",
+      text: reviewDisplayModePending ? "Opening…" : "Review",
+      disabled: reviewDisplayModePending,
+    });
+    reviewButton.setAttribute("aria-busy", String(reviewDisplayModePending));
+    reviewButton.addEventListener("click", () => {
+      void requestReviewDisplayMode("fullscreen");
+    });
+    headerRow.append(reviewButton);
+  }
+
+  section.append(headerRow);
+  if (reviewDisplayModeError) {
+    section.append(element("div", {
+      className: "review-mode-error",
+      text: reviewDisplayModeError,
+    }));
+  }
   if (expanded) {
     const body = element("div", { className: "review-summary" });
     const payload = element("div", { className: "review-payload" });
@@ -425,6 +483,82 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
   renderPayloadIfNeeded();
 }
 
+function renderFullscreenReview(card: ToolResultCard, display: ToolDisplay): void {
+  const main = element("main", { className: "shell review-fullscreen-shell" });
+  const section = element("section", { className: "review-fullscreen" });
+  const header = element("header", { className: "review-fullscreen-header" });
+  const titleGroup = element("div", { className: "review-fullscreen-title" });
+  const icon = element("span", { className: "tool-icon", ariaHidden: "true" });
+  icon.append(renderIcon(display.icon));
+
+  const heading = element("div", { className: "review-title-group" });
+  heading.append(element("span", { className: "tool-title", text: "Review changes" }));
+  if (display.label) {
+    heading.append(element("span", {
+      className: "tool-label",
+      text: display.label,
+      title: display.label,
+    }));
+  }
+  titleGroup.append(icon, heading);
+
+  const actions = element("div", { className: "review-fullscreen-actions" });
+  const closeButton = element("button", {
+    className: "review-button",
+    type: "button",
+    text: reviewDisplayModePending ? "Closing…" : "Close review",
+    disabled: reviewDisplayModePending,
+  });
+  closeButton.setAttribute("aria-busy", String(reviewDisplayModePending));
+  closeButton.addEventListener("click", () => {
+    void requestReviewDisplayMode("inline");
+  });
+  actions.append(renderHeaderSummary(card), closeButton);
+  header.append(titleGroup, actions);
+
+  const body = element("div", { className: "review-fullscreen-body" });
+  currentPayloadContainer = body;
+  section.append(header);
+  if (reviewDisplayModeError) {
+    section.append(element("div", {
+      className: "review-mode-error",
+      text: reviewDisplayModeError,
+    }));
+  }
+  section.append(body);
+  main.append(section);
+  appRoot.replaceChildren(main);
+  renderPayloadIfNeeded();
+}
+
+function canRequestDisplayMode(mode: "inline" | "fullscreen"): boolean {
+  return Boolean(hostContext?.availableDisplayModes?.includes(mode));
+}
+
+async function requestReviewDisplayMode(mode: "inline" | "fullscreen"): Promise<void> {
+  if (!app || reviewDisplayModePending) return;
+
+  reviewDisplayModePending = true;
+  reviewDisplayModeError = null;
+  render();
+
+  try {
+    const result = await app.requestDisplayMode({ mode });
+    hostContext = {
+      ...hostContext,
+      displayMode: result.mode,
+    };
+    if (result.mode === "fullscreen") expanded = true;
+  } catch (requestError) {
+    reviewDisplayModeError = requestError instanceof Error
+      ? requestError.message
+      : "Unable to change the review display mode.";
+  } finally {
+    reviewDisplayModePending = false;
+    render();
+  }
+}
+
 function renderChevron(isExpanded: boolean, visible: boolean): HTMLElement {
   const chevron = element("span", {
     className: visible ? `chevron ${isExpanded ? "expanded" : ""}` : "chevron",