frontend/latex/output: "stats" label, CSS tweaks, build → download, print

Author: haraldschilly

src/.claude/commands/frontend.md

@@ -0,0 +1,9 @@
+# frontend
+
+Build the frontend code for development, after changing files in the frontend package. This is done by compiling the static package in dev mode.
+
+Run this command:
+
+```bash
+cd packages/static && pnpm build-dev
+```

src/.claude/settings.json

@@ -29,6 +29,7 @@
       "Bash(pnpm build:*)",
       "Bash(pnpm exec tsc:*)",
       "Bash(pnpm i18n:*)",
+      "Bash(pnpm i18n:*:*)",
       "Bash(pnpm info:*)",
       "Bash(pnpm list:*)",
       "Bash(pnpm remove:*)",

src/packages/frontend/frame-editors/_style.sass

@@ -32,31 +32,35 @@
       display: flex
       flex-direction: column
 
-// latex editor, output panel - full height tabs with outline
+// latex editor, output panel - full height tabs
+// This ensures the new output panel tabs (Build, Errors, Stats) take full height
+// and their content (like build logs, error lists) fills the available space
 .cocalc-latex-output-tabs
-  height: 100% !important
-  display: flex !important
-  flex-direction: column !important
+  // Make the entire tabs container take full height and use flex layout
+  // This is needed because the output panel should fill the available editor space
+  height: 100%
+  display: flex
+  flex-direction: column
 
-  // Ensure content fills remaining space
+  // The content holder contains all tab panes and should expand to fill remaining space
+  // flex: 1 makes it take all space not used by the tab headers
   .ant-tabs-content-holder
-    flex: 1 !important
-    display: flex !important
-    min-height: 0 !important
-    border-radius: 0 !important
+    flex: 1
+    display: flex
 
+  // The content wrapper needs to pass through the full height to individual tab panes
   .ant-tabs-content
-    height: 100% !important
-    display: flex !important
-    flex-direction: column !important
-    border: none !important
+    height: 100%
+    display: flex
+    flex-direction: column
 
+  // Individual tab panes (Build content, Errors content, etc.) need full height
   .ant-tabs-tabpane
-    height: 100% !important
-    flex-direction: column !important
-    min-height: 0 !important
-    padding: 0 !important
+    height: 100%
 
-    // Only apply flex display to active tab pane
+    // CRITICAL: Only make the active tab pane use flex layout
+    // Hidden tab panes (ant-tabs-tabpane-hidden) must remain hidden
+    // Without this selector, all tab panes would be visible at once
     &:not(.ant-tabs-tabpane-hidden)
-      display: flex !important
+      display: flex
+      flex-direction: column

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cSpell:ignore demaximize subframe rescan
+
 import { Input } from "antd";
 import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
@@ -960,6 +962,7 @@ addCommands({
   },
   download_pdf: {
     group: "export",
+    // ATTN: this must be an IntlMessage
     label: defineMessage({
       id: "menu.generic.download_pdf.label",
       defaultMessage: "Download PDF",
@@ -1010,6 +1013,7 @@ addCommands({
       defaultMessage:
         "Show a printable version of this document in a popup window.",
     }),
+    // ATTN: this must be an IntlMessage
     label: labels.print,
   },
   new: {

src/packages/frontend/frame-editors/latex-editor/actions.ts

@@ -1411,13 +1411,7 @@ export class Actions extends BaseActions<LatexEditorState> {
     if (this.knitr) {
       // #v0 will not support multi-file knitr.
       this.programmatically_goto_line(line, true, true);
-      // Clear auto sync flag after cursor has moved (backward sync completion)
-      // Only for automatic sync - manual sync doesn't set the flag
-      if (this.is_auto_sync_in_progress()) {
-        setTimeout(() => {
-          this.set_auto_sync_in_progress(false);
-        }, 200); // Give time for cursor to actually move
-      }
+      this.clear_auto_sync_after_cursor_move();
       return;
     }
     // Focus a cm frame so that we split a code editor below.
@@ -1431,7 +1425,11 @@ export class Actions extends BaseActions<LatexEditorState> {
     }
     (actions as BaseActions).programmatically_goto_line(line, true, true, id);
 
-    // Clear auto sync flag after cursor has moved (backward sync completion)
+    this.clear_auto_sync_after_cursor_move();
+  }
+
+  // Clear auto sync flag after cursor has moved (backward sync completion)
+  private clear_auto_sync_after_cursor_move(): void {
     // Only for automatic sync - manual sync doesn't set the flag
     if (this.is_auto_sync_in_progress()) {
       setTimeout(() => {
@@ -1491,24 +1489,6 @@ export class Actions extends BaseActions<LatexEditorState> {
     }
   }
 
-  // Public method to trigger auto-sync when cursor position changes (for backwards compatibility)
-  public handle_cursor_activity(
-    line: number,
-    column: number,
-    filename?: string,
-  ): void {
-    if (!this.is_auto_sync_enabled()) return;
-
-    // Prevent duplicate sync operations
-    if (this.is_auto_sync_in_progress()) return;
-
-    // Use current file if filename not provided
-    const file = filename || this.path;
-
-    // Trigger forward sync (source → PDF)
-    this.handle_cursor_sync_to_pdf(line + 1, column, file); // line is 0-based, synctex expects 1-based
-  }
-
   _get_most_recent_pdfjs(): string | undefined {
     return this._get_most_recent_active_frame_id(
       (node) => node.get("type").indexOf("pdfjs") != -1,
@@ -1817,7 +1797,7 @@ export class Actions extends BaseActions<LatexEditorState> {
       super.print(id);
       return;
     }
-    if (type.indexOf("pdf") != -1) {
+    if (type.indexOf("pdf") != -1 || type === "output") {
       this.print_pdf();
       return;
     }

src/packages/frontend/frame-editors/latex-editor/editor.ts

@@ -92,6 +92,41 @@ const cm: EditorDescription = {
   gutters: ["Codemirror-latex-errors"],
 } as const;
 
+const output: EditorDescription = {
+  type: "latex-output",
+  short: "Output",
+  name: "Output",
+  icon: "file-alt",
+  component: Output,
+  commands: set([
+    "build",
+    "build_on_save",
+    "force_build",
+    "stop_build",
+    "print",
+    "clean",
+    "stop_build",
+    "download",
+    "download_pdf",
+    "decrease_font_size",
+    "increase_font_size",
+  ]),
+  buttons: set([
+    "build",
+    "force_build",
+    "clean",
+    "stop_build",
+    "sync",
+    "decrease_font_size",
+    "increase_font_size",
+    "zoom_page_width",
+    "zoom_page_height",
+    "set_zoom",
+    "print",
+    "download_pdf",
+  ]),
+} as const;
+
 const pdfjs_canvas: EditorDescription = {
   type: "preview-pdf-canvas",
   short: editor.pdfjs_canvas_title_short,
@@ -179,44 +214,12 @@ const pdf_embed: EditorDescription = {
   component: PDFEmbed,
 } as const;
 
-const output: EditorDescription = {
-  type: "latex-output",
-  short: "Output",
-  name: "Output",
-  icon: "file-alt",
-  component: Output,
-  commands: {
-    build: true,
-    force_build: true,
-    clean: true,
-    stop_build: true,
-    download: false,
-    download_pdf: true,
-    decrease_font_size: true,
-    increase_font_size: true,
-  },
-  buttons: set([
-    "build",
-    "force_build",
-    "clean",
-    "stop_build",
-    "sync",
-    "decrease_font_size",
-    "increase_font_size",
-    "zoom_page_width",
-    "zoom_page_height",
-    "set_zoom",
-    "print",
-    "download_pdf",
-  ]),
-} as const;
-
 const EDITOR_SPEC = {
   cm,
+  output,
   pdfjs_canvas,
   error,
   build,
-  output,
   latex_table_of_contents,
   word_count,
   terminal,

src/packages/frontend/frame-editors/latex-editor/errors-and-warnings.tsx

@@ -93,11 +93,12 @@ interface ItemProps {
   actions: Actions;
   item: TypedMap<item>;
   group: string;
+  font_size: number;
 }
 
 // memo has an update function, see bottom
 const Item: React.FC<ItemProps> = React.memo(
-  ({ actions, item, group }: ItemProps) => {
+  ({ actions, item, group, font_size }: ItemProps) => {
     function edit_source(e: React.SyntheticEvent<any>): void {
       e.stopPropagation();
       if (!item.get("file")) return; // not known
@@ -168,7 +169,16 @@ const Item: React.FC<ItemProps> = React.memo(
         {renderGetHelp()}
         {render_location()}
         {item.get("message") && <div>{item.get("message")}</div>}
-        {item.get("content") && <pre>{item.get("content")}</pre>}
+        {item.get("content") && (
+          <pre
+            style={{
+              fontSize: font_size * 0.85, // slightly smaller than main font size
+              borderRadius: 0, // remove border radius
+            }}
+          >
+            {item.get("content")}
+          </pre>
+        )}
       </div>
     );
   },
@@ -225,7 +235,7 @@ export const ErrorsAndWarnings: React.FC<ErrorsAndWarningsProps> = React.memo(
             <Loading
               text={status}
               style={{
-                fontSize: "10pt",
+                fontSize: props.font_size,
                 color: COLORS.GRAY,
               }}
             />
@@ -235,7 +245,15 @@ export const ErrorsAndWarnings: React.FC<ErrorsAndWarningsProps> = React.memo(
     }
 
     function render_item(item, key, group): Rendered {
-      return <Item key={key} item={item} actions={actions} group={group} />;
+      return (
+        <Item
+          key={key}
+          item={item}
+          actions={actions}
+          group={group}
+          font_size={props.font_size}
+        />
+      );
     }
 
     function render_group_content(content, group): Rendered {
@@ -325,7 +343,7 @@ export const ErrorsAndWarnings: React.FC<ErrorsAndWarningsProps> = React.memo(
         style={{
           overflowY: "scroll",
           padding: "5px 15px",
-          fontSize: "10pt",
+          fontSize: props.font_size,
         }}
       >
         {includeError && (