diff --git a/webui/src/web-components/demo/print-test.html b/webui/src/web-components/demo/print-test.html
new file mode 100644
index 0000000..c4a62fe
--- /dev/null
+++ b/webui/src/web-components/demo/print-test.html
@@ -0,0 +1,207 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Print Test</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        margin: 0;
+        padding: 20px;
+        background: #f5f5f5;
+      }
+
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+
+      .chat-container {
+        height: 400px;
+        overflow-y: auto;
+        border: 1px solid #ddd;
+        padding: 10px;
+        margin: 20px 0;
+      }
+
+      .message {
+        margin: 10px 0;
+        padding: 10px;
+        border-radius: 6px;
+      }
+
+      .user-message {
+        background: #e3f2fd;
+        border-left: 4px solid #2196f3;
+      }
+
+      .agent-message {
+        background: #f3e5f5;
+        border-left: 4px solid #9c27b0;
+      }
+
+      .print-button {
+        background: #4caf50;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      .print-button:hover {
+        background: #45a049;
+      }
+
+      /* Print styles */
+      @media print {
+        body {
+          background: white !important;
+          padding: 0 !important;
+        }
+
+        .container {
+          max-width: none !important;
+          margin: 0 !important;
+          padding: 0 !important;
+          box-shadow: none !important;
+          border-radius: 0 !important;
+        }
+
+        .chat-container {
+          height: auto !important;
+          max-height: none !important;
+          overflow: visible !important;
+          border: none !important;
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+
+        .print-button {
+          display: none !important;
+        }
+
+        .message {
+          page-break-inside: avoid;
+          margin: 8px 0;
+        }
+
+        h1,
+        h2,
+        h3 {
+          page-break-after: avoid;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Sketch Print Test</h1>
+      <p>
+        This page tests the print functionality for sketch chat. Use Ctrl+P (or
+        Cmd+P on Mac) to print.
+      </p>
+
+      <button class="print-button" onclick="window.print()">Print Test</button>
+
+      <div class="chat-container">
+        <div class="message user-message">
+          <strong>User:</strong> Hello, can you help me with some code?
+        </div>
+
+        <div class="message agent-message">
+          <strong>Agent:</strong> Of course! I'd be happy to help you with your
+          code. What specific programming language or problem are you working
+          on?
+        </div>
+
+        <div class="message user-message">
+          <strong>User:</strong> I need to fix a CSS issue with printing. The
+          content gets cut off when printing.
+        </div>
+
+        <div class="message agent-message">
+          <strong>Agent:</strong> That's a common issue with web applications.
+          The problem usually occurs when:
+          <ul>
+            <li>Container elements have fixed heights</li>
+            <li>Overflow properties are set to 'auto' or 'hidden'</li>
+            <li>Flexbox layouts don't expand properly for print</li>
+          </ul>
+
+          <p>Here's how to fix it:</p>
+
+          <pre><code>@media print {
+  .container {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+  
+  .scrollable-content {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}</code></pre>
+        </div>
+
+        <div class="message user-message">
+          <strong>User:</strong> That makes sense! Should I also hide
+          interactive elements during print?
+        </div>
+
+        <div class="message agent-message">
+          <strong>Agent:</strong> Absolutely! Interactive elements like buttons,
+          form inputs, and navigation menus should typically be hidden during
+          print since they're not functional on paper. You can do this with:
+
+          <pre><code>@media print {
+  .button, .interactive-element {
+    display: none !important;
+  }
+}</code></pre>
+
+          <p>Also consider:</p>
+          <ul>
+            <li>
+              Use <code>page-break-inside: avoid</code> on important content
+              blocks
+            </li>
+            <li>
+              Remove shadows, borders, and background colors that waste ink
+            </li>
+            <li>Ensure text is black on white for better readability</li>
+            <li>Adjust margins and padding for better paper layout</li>
+          </ul>
+        </div>
+
+        <div class="message user-message">
+          <strong>User:</strong> Perfect! This should solve my printing issues.
+          Thank you!
+        </div>
+
+        <div class="message agent-message">
+          <strong>Agent:</strong> You're welcome! The key is to remember that
+          print styles should make content flow naturally on paper rather than
+          being constrained by screen dimensions. Always test your print styles
+          by using your browser's print preview feature.
+        </div>
+      </div>
+
+      <p>
+        <strong>Instructions:</strong> Click the "Print Test" button or use
+        Ctrl+P to test the print functionality. The chat should print across
+        multiple pages if needed, with proper page breaks.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index b0177a0..0f0177c 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -466,6 +466,84 @@
       transform: rotate(45deg);
       transform-origin: center center;
     }
+
+    /* Print styles for full chat printing */
+    @media print {
+      :host {
+        height: auto !important;
+        overflow: visible !important;
+        display: block !important;
+      }
+
+      /* Hide non-essential UI elements during printing */
+      #top-banner {
+        border-bottom: 1px solid #000;
+        box-shadow: none;
+        page-break-inside: avoid;
+      }
+
+      /* Hide interactive elements that aren't useful in print */
+      .stop-button,
+      .end-button,
+      .notifications-toggle,
+      sketch-call-status,
+      sketch-network-status,
+      sketch-view-mode-select {
+        display: none !important;
+      }
+
+      /* Ensure view container can expand to full content */
+      #view-container {
+        overflow: visible !important;
+        flex: none !important;
+        height: auto !important;
+        max-height: none !important;
+      }
+
+      #view-container-inner {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+
+      /* Remove todo panel from print to avoid layout issues */
+      .todo-panel-container {
+        display: none !important;
+      }
+
+      /* Ensure chat timeline container takes full width in print */
+      .chat-timeline-container {
+        margin-right: 0 !important;
+        width: 100% !important;
+        height: auto !important;
+        overflow: visible !important;
+      }
+
+      /* Make chat view fully visible */
+      .chat-view {
+        height: auto !important;
+        overflow: visible !important;
+      }
+
+      /* Hide chat input during printing */
+      #chat-input {
+        display: none !important;
+      }
+
+      /* Adjust diff2 and terminal views for print */
+      .diff2-view,
+      .terminal-view {
+        height: auto !important;
+        overflow: visible !important;
+      }
+
+      /* Ensure only active view is shown in print */
+      .chat-view:not(.view-active),
+      .diff2-view:not(.view-active),
+      .terminal-view:not(.view-active) {
+        display: none !important;
+      }
+    }
   `;
 
   // Header bar: Network connection status details
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 9fa5b7a..35897b4 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -744,6 +744,56 @@
     .mermaid {
       text-align: center;
     }
+
+    /* Print styles for message components */
+    @media print {
+      .message {
+        page-break-inside: avoid;
+        margin-bottom: 12px;
+      }
+
+      .message-container {
+        page-break-inside: avoid;
+      }
+
+      /* Hide copy buttons and interactive elements during printing */
+      .copy-icon,
+      .info-icon,
+      .commit-diff-button {
+        display: none !important;
+      }
+
+      /* Ensure code blocks print properly */
+      .message-content pre {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        page-break-inside: avoid;
+        background: #f8f8f8 !important;
+        border: 1px solid #ddd !important;
+        padding: 8px !important;
+      }
+
+      /* Ensure tool calls section prints properly */
+      .tool-calls-section {
+        page-break-inside: avoid;
+      }
+
+      /* Simplify message metadata for print */
+      .message-metadata-left {
+        font-size: 10px;
+      }
+
+      /* Ensure content doesn't break poorly */
+      .message-content {
+        orphans: 3;
+        widows: 3;
+      }
+
+      /* Hide floating messages during print */
+      .floating-message {
+        display: none !important;
+      }
+    }
   `;
 
   // Track mermaid diagrams that need rendering
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 2f8e5e3..964574e 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -259,8 +259,51 @@
         transform: rotate(360deg);
       }
     }
-  `;
 
+    /* Print styles for full timeline printing */
+    @media print {
+      .timeline-container {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+        page-break-inside: avoid;
+      }
+
+      .timeline {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+
+      #scroll-container {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+        overflow-y: visible !important;
+        overflow-x: visible !important;
+      }
+
+      /* Hide the jump to latest button during printing */
+      #jump-to-latest {
+        display: none !important;
+      }
+
+      /* Hide the thinking indicator during printing */
+      .thinking-indicator {
+        display: none !important;
+      }
+
+      /* Hide the loading indicator during printing */
+      .loading-indicator {
+        display: none !important;
+      }
+
+      /* Ensure welcome box prints properly if visible */
+      .welcome-box {
+        page-break-inside: avoid;
+      }
+    }
+  `;
   constructor() {
     super();