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

@@ -230,6 +230,49 @@ body {
   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(--color-border-primary, #3a3a40);
@@ -279,6 +322,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;
   gap: 8px;

src/ui/workspace-app.tsx

@@ -39,6 +39,7 @@ interface MountedPayload {
     hostContext?: HostContext;
     errorMessage?: string | null;
     visibleFileCount?: number;
+    presentation?: "inline" | "fullscreen";
   }): void;
   unmount(): void;
 }
@@ -50,6 +51,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;
@@ -84,6 +87,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;
@@ -92,16 +97,27 @@ async function boot(): Promise<void> {
     card = { ...structured, tool };
     expanded = false;
     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();
   };
 
@@ -265,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;
     }
 
@@ -284,6 +311,7 @@ async function renderPayloadIfNeeded(): Promise<void> {
       hostContext,
       errorMessage,
       visibleFileCount,
+      presentation,
     });
     return;
   }
@@ -389,6 +417,11 @@ function renderSummaryBadge(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 main = element("main", { className: "shell" });
@@ -402,7 +435,24 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
     element("span", { className: "tool-title", text: display.title }),
     element("span", { className: "tool-label", text: display.label, title: display.label }),
   );
-  header.append(icon, titleGroup, renderSummaryBadge(card));
+
+  const headerActions = element("div", { className: "review-header-actions" });
+  headerActions.append(renderSummaryBadge(card));
+  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");
+    });
+    headerActions.append(reviewButton);
+  }
+
+  header.append(icon, titleGroup, headerActions);
 
   const body = element("div", { className: "review-summary" });
   currentPayloadContainer = body;
@@ -430,7 +480,14 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
     actions.append(toggleFiles);
   }
 
-  section.append(header, body);
+  section.append(header);
+  if (reviewDisplayModeError) {
+    section.append(element("div", {
+      className: "review-mode-error",
+      text: reviewDisplayModeError,
+    }));
+  }
+  section.append(body);
   if (actions.childElementCount > 0) {
     section.append(actions);
   }
@@ -440,6 +497,77 @@ 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.innerHTML = display.icon;
+
+  const heading = element("div", { className: "review-title-group" });
+  heading.append(
+    element("span", { className: "tool-title", text: "Review changes" }),
+    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(renderSummaryBadge(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,
+    };
+  } 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",