From df58598fbd71147c2c8f950d19b17da8390f70d2 Mon Sep 17 00:00:00 2001
From: ArianAr <arian.fawiki@gmail.com>
Date: Thu, 16 Jul 2026 00:40:52 +0300
Subject: [PATCH] feat(ui): download filtered / visible canvas lines

Export currently visible lines (after level + search filters) as
paste-<id>-filtered.log. Full raw download remains available.

Closes #29
---
 CHANGELOG.md                    |  1 +
 ROADMAP.md                      |  2 +-
 server/components/LogCanvas.tsx | 32 +++++++++++++++++++++++++++++---
 server/lib/log-lines.test.ts    | 14 ++++++++++++++
 server/lib/log-lines.ts         |  9 +++++++++
 5 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0328a0c..a265cc6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Opt-in process metrics (`PAPERCUT_METRICS=1`) — `GET /api/metrics` counters only (`pastes_created`, `unlocks_ok`, `rate_limited`); disabled by default; no content/IP logging
 - Log canvas **wrap / no-wrap** toggle (dense horizontal scroll), sticky line-number gutter, preference in `localStorage`
 - Log canvas **line pins / bookmarks** (per-paste `localStorage`, gutter star + sidebar jump list)
+- Log canvas **download filtered / visible lines** (`paste-<id>-filtered.log`)
 
 ### Fixed
 
diff --git a/ROADMAP.md b/ROADMAP.md
index f94f825..e8155c6 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -81,7 +81,7 @@ Focus: log analysis depth.
 | 1.2.3 | **Multi-file or multi-paste compare** (side-by-side) | ui, api | Optional second paste id |
 | 1.2.4 | **Custom highlight rules** (user regex → color) | ui | Per-browser config |
 | 1.2.5 | **Timeline scrubber** for timestamped logs | ui | Detect common timestamp formats |
-| 1.2.6 | **Download filtered view** (not only raw) | ui | Export what you see |
+| 1.2.6 | **Download filtered view** (not only raw) | ui | ✅ Done (export visible lines) |
 
 ---
 
diff --git a/server/components/LogCanvas.tsx b/server/components/LogCanvas.tsx
index c80a19e..e35ddbb 100644
--- a/server/components/LogCanvas.tsx
+++ b/server/components/LogCanvas.tsx
@@ -8,6 +8,7 @@ import {
   defaultLevelFilters,
   filterLogLines,
   formatLineHash,
+  joinLinesForExport,
   parseLineHash,
   parseLogLines,
   parseSearchQuery,
@@ -186,16 +187,26 @@ export function LogCanvas({
     }
   }
 
-  function downloadRaw() {
-    const blob = new Blob([rawContent], { type: "text/plain;charset=utf-8" });
+  function downloadText(content: string, filename: string) {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = `paste-${id}.log`;
+    a.download = filename;
     a.click();
     URL.revokeObjectURL(url);
   }
 
+  function downloadRaw() {
+    downloadText(rawContent, `paste-${id}.log`);
+  }
+
+  function downloadFiltered() {
+    downloadText(joinLinesForExport(visibleLines), `paste-${id}-filtered.log`);
+  }
+
+  const isFiltered = visibleLines.length !== allLines.length;
+
   const wrapLabel =
     wrapMode === "wrap" ? "No wrap" : "Wrap";
   const wrapTitle =
@@ -310,6 +321,21 @@ export function LogCanvas({
             >
               Download .log
             </button>
+            <button
+              type="button"
+              onClick={downloadFiltered}
+              disabled={visibleLines.length === 0}
+              title={
+                isFiltered
+                  ? `Download ${visibleLines.length} visible line(s) after filters`
+                  : "Download currently visible lines (same as full paste when unfiltered)"
+              }
+              className="w-full rounded border border-vscode-border bg-vscode-line px-2 py-1.5 text-xs hover:border-vscode-accent disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {isFiltered
+                ? `Download filtered (${visibleLines.length})`
+                : "Download visible"}
+            </button>
             {selection ? (
               <button
                 type="button"
diff --git a/server/lib/log-lines.test.ts b/server/lib/log-lines.test.ts
index 0b35550..d3c1478 100644
--- a/server/lib/log-lines.test.ts
+++ b/server/lib/log-lines.test.ts
@@ -4,6 +4,7 @@ import {
   filterLogLines,
   formatLineHash,
   isLineSelected,
+  joinLinesForExport,
   parseLineHash,
   parseLogLines,
   parseSearchQuery,
@@ -65,6 +66,19 @@ describe("parseSearchQuery / filterLogLines", () => {
     expect(q.regex).toBeNull();
     expect(q.error).toBeTruthy();
   });
+
+  it("joinLinesForExport joins visible raw lines", () => {
+    expect(joinLinesForExport([])).toBe("");
+    const filtered = filterLogLines(
+      lines,
+      defaultLevelFilters(),
+      parseSearchQuery("beta"),
+    );
+    expect(joinLinesForExport(filtered)).toBe("[ERROR] beta");
+    expect(joinLinesForExport(lines)).toBe(
+      ["[INFO] alpha", "[ERROR] beta", "gamma noise"].join("\n"),
+    );
+  });
 });
 
 describe("line hash selection", () => {
diff --git a/server/lib/log-lines.ts b/server/lib/log-lines.ts
index 2652924..6dccc09 100644
--- a/server/lib/log-lines.ts
+++ b/server/lib/log-lines.ts
@@ -144,6 +144,15 @@ export function filterLogLines(
   );
 }
 
+/**
+ * Join visible lines for download/export.
+ * Uses original `raw` (keeps ANSI); no trailing newline when empty or single empty line set.
+ */
+export function joinLinesForExport(lines: readonly ParsedLogLine[]): string {
+  if (lines.length === 0) return "";
+  return lines.map((line) => line.raw).join("\n");
+}
+
 export interface LineSelection {
   start: number; // 1-based inclusive
   end: number; // 1-based inclusive