> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gcaplabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview panel

> A multi-format file viewer that opens next to the chat — rendered Markdown, syntax-highlighted code, Office documents, PDFs, images, and diffs.

# Preview panel

The Preview panel is Headmaster's multi-format file viewer. When the agent writes a file or you click a file in the File Manager, the preview panel opens next to the chat showing the file rendered in the appropriate format.

***

## Supported formats

| Format     | Extension(s)                                                                                                           | Preview type                        | Editable? |
| ---------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------- |
| Markdown   | `.md`                                                                                                                  | Rendered markdown                   | Yes       |
| Code       | `.py`, `.js`, `.ts`, `.tsx`, `.jsx`, `.go`, `.rs`, `.java`, `.c`, `.cpp`, `.rb`, `.php`, `.sh`, `.yaml`, `.json`, etc. | Syntax-highlighted source           | Yes       |
| HTML       | `.html`, `.htm`                                                                                                        | Rendered web page                   | Yes       |
| PDF        | `.pdf`                                                                                                                 | Page-by-page rendered PDF           | No        |
| PowerPoint | `.pptx`                                                                                                                | Slide-by-slide preview              | No        |
| Excel      | `.xlsx`, `.xlsm`, `.csv`                                                                                               | Spreadsheet with cells and formulas | No        |
| Word       | `.docx`                                                                                                                | Document preview with formatting    | No        |
| Image      | `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`, `.webp`, `.bmp`                                                               | Image with metadata                 | No        |
| Diff       | —                                                                                                                      | Side-by-side or inline diff view    | No        |
| URL        | —                                                                                                                      | Rendered web page (inline browser)  | No        |

***

## Panel layout

The Preview panel is a tabbed interface:

* **Multiple tabs** — open multiple files at once and switch between them.
* **Split view** — drag a tab to split the panel into two side-by-side views. Useful for comparing two files.
* **Pop out** — click the pop-out button to open the preview in a separate window.

The panel can be:

* **Docked right** (default) — preview on the right, chat on the left.
* **Docked bottom** — preview on the bottom, chat on top.
* **Hidden** — click the toggle to give the chat full width.

***

## Automatic previews

The preview panel opens automatically when:

* The agent writes a new file
* The agent creates a new Office document
* The agent edits an existing file (shows a diff)

Disable auto-open in **Settings → My Headmaster → Look → Auto-open previews**.

***

## Editing in the preview

<Tabs>
  <Tab title="Markdown editor">
    * **Edit tab** — write markdown with syntax highlighting.
    * **Preview tab** — see the rendered markdown in real time.
    * Save with `Cmd/Ctrl + S` — writes the file to disk.
  </Tab>

  <Tab title="Code editor">
    * Full Monaco-based editor (the same engine as VS Code).
    * Syntax highlighting for 50+ languages.
    * Line numbers, code folding, multi-cursor, find and replace.
    * Save with `Cmd/Ctrl + S`.
  </Tab>

  <Tab title="HTML editor">
    * **Edit tab** — write HTML/CSS/JS in a code editor.
    * **Preview tab** — see the rendered web page in real time.
    * Save with `Cmd/Ctrl + S`.
  </Tab>
</Tabs>

***

## Diff viewer

When the agent edits an existing file, the preview panel shows a diff:

* **Side-by-side** — original on the left, modified on the right. Added lines in green, removed lines in red.
* **Inline** — changes shown in a single view. Added lines prefixed with `+`, removed with `-`.

Toggle between views with the toolbar button. The diff viewer supports syntax highlighting, word-level diffs, and a minimap for navigating large diffs.

***

## Office document previews

For Office documents, the preview is read-only:

* **PowerPoint** — slide navigator on the left, current slide on the right.
* **Excel** — sheet tabs at the bottom, cell grid in the main area. Formulas shown as calculated values.
* **Word** — rendered document with headings, paragraphs, tables, and images.

Click **Open externally** to edit in PowerPoint, Excel, or Word.

***

## PDF viewer

The PDF viewer includes:

* Page navigator (jump to any page)
* Zoom in / out
* Fit to width / fit to page
* Text selection (copy text from the PDF)
* Search within the PDF

***

## Context menu

Right-click in the preview panel for:

* **Copy** — copy selected text or content
* **Save** / **Save as** — save changes or save a copy
* **Reveal in folder** — open the file's location in your OS file manager
* **Open externally** — open in the default OS application (e.g., `.pptx` in PowerPoint)
* **Close tab** / **Close all tabs**

***

<CardGroup cols={2}>
  <Card title="File management" icon="folder" href="/file-management">
    Open files in the preview from the File Manager.
  </Card>

  <Card title="Documents" icon="file" href="/documents">
    Office documents preview automatically when generated.
  </Card>
</CardGroup>