Fix UI/UX issues in workspace layout, scrolling, export, and license (closes #13)

- Replace overflow:hidden body lock with natural body scroll; footer now reachable
- Sidebar: position:sticky with max-height and gradient fade mask
- Workspace layout: standard CSS grid (280px 1fr) inside max-width container
- Move Back/Copy All/Download to page-level top bar above session grid
- Wrap session header + chat bubbles in a single card extending to bottom of chat
- Add max-width:920px on session content for readable line length
- Add GET /api/export/state endpoint; POST /api/export supports since=last filtering
- Add Export new since last button; projects page refreshes after export
- Exported filenames: timestamp prefix added, 60-char slug truncation removed
- Add LICENSE (Boost Software License 1.0); fix footer license text and year

Made-with: Cursor

Author: wpak-ai

LICENSE

@@ -0,0 +1,23 @@
+Boost Software License - Version 1.0 - August 17th, 2003
+
+Permission is hereby granted, free of charge, to any person or organization
+obtaining a copy of the software and accompanying documentation covered by
+this license (the "Software") to use, reproduce, display, distribute,
+execute, and transmit the Software, and to prepare derivative works of the
+Software, and to permit third-parties to whom the Software is furnished to
+do so, all subject to the following:
+
+The copyright notices in the Software and this entire statement, including
+the above license grant, this restriction and the following disclaimer,
+must be included in all copies of the Software, in whole or in part, and
+all derivative works of the Software, unless such copies or derivative
+works are solely in the form of machine-executable object code generated by
+a source language processor.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT. IN NO EVENT
+SHALL THE COPYRIGHT HOLDERS OR ANYONE DISTRIBUTING THE SOFTWARE BE LIABLE
+FOR ANY DAMAGES OR OTHER LIABILITY, WHETHER IN CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

api/export_api.py

@@ -2,6 +2,7 @@
 
 import io
 import json
+import os
 import zipfile
 from datetime import datetime
 
@@ -16,6 +17,28 @@
 
 export_bp = Blueprint("export", __name__)
 
+_STATE_FILE = os.path.join(os.path.expanduser("~"), ".claude-code-chat-browser", "export_state.json")
+
+
+def _read_state() -> dict:
+    if os.path.exists(_STATE_FILE):
+        try:
+            with open(_STATE_FILE) as f:
+                return json.load(f)
+        except Exception:
+            pass
+    return {}
+
+
+def _write_state(sessions_map: dict, count: int):
+    os.makedirs(os.path.dirname(_STATE_FILE), exist_ok=True)
+    state = _read_state()
+    state["lastExportTime"] = datetime.now().isoformat()
+    state["exportedCount"] = count
+    state.setdefault("sessions", {}).update(sessions_map)
+    with open(_STATE_FILE, "w") as f:
+        json.dump(state, f, indent=2)
+
 
 def _session_text_for_exclusion(session: dict) -> str:
     """Extract a plain-text snippet from session messages for exclusion matching."""
@@ -27,20 +50,50 @@ def _session_text_for_exclusion(session: dict) -> str:
     return "\n\n".join(parts)
 
 
+@export_bp.route("/api/export/state")
+def get_export_state():
+    state = _read_state()
+    return jsonify({
+        "last_export_time": state.get("lastExportTime"),
+        "export_count": state.get("exportedCount", 0),
+    })
+
+
+def _slugify(text: str) -> str:
+    import re
+    text = text.lower()
+    text = re.sub(r"[^a-z0-9]+", "-", text)
+    return text.strip("-")
+
+
 @export_bp.route("/api/export", methods=["POST"])
 def bulk_export():
+    body = request.get_json(silent=True) or {}
+    since = "last" if body.get("since") == "last" else "all"
+
     base = current_app.config.get("CLAUDE_PROJECTS_DIR") or get_claude_projects_dir()
     projects = list_projects(base)
     rules = current_app.config.get("EXCLUSION_RULES") or []
 
+    state = _read_state()
+    last_export_sessions: dict = state.get("sessions", {}) if since == "last" else {}
+
     buf = io.BytesIO()
     count = 0
     manifest = []
+    new_sessions_map: dict = {}
     with zipfile.ZipFile(buf, "w", zipfile.ZIP_DEFLATED) as zf:
         for project in projects:
             sessions = list_sessions(project["path"])
             for sess_info in sessions:
+                sid = sess_info["id"]
                 try:
+                    if since == "last":
+                        prev_mtime = last_export_sessions.get(sid, 0)
+                        curr_mtime = sess_info.get("modified", 0)
+                        if curr_mtime and curr_mtime <= prev_mtime:
+                            continue
+
                     session = parse_session(sess_info["path"])
                     if session["title"] == "Untitled Session":
                         continue
@@ -58,35 +111,42 @@ def bulk_export():
 
                     stats = compute_stats(session)
                     md = session_to_markdown(session, stats)
-                    title_slug = _slugify(session["title"])[:60] or "session"
-                    short_id = sess_info["id"][:8]
+                    title_slug = _slugify(session["title"]) or "session"
+                    short_id = sid[:8]
                     proj_slug = _slugify(project["name"])
-                    rel_path = f"{proj_slug}/{title_slug}__{short_id}.md"
+                    ts = session["metadata"].get("first_timestamp", "")
+                    ts_file = ts[:19].replace(":", "-") if ts else "0000-00-00T00-00-00"
+                    rel_path = f"{proj_slug}/{ts_file}__{title_slug}__{short_id}.md"
                     zf.writestr(rel_path, md)
                     manifest.append({
-                        "session_id": sess_info["id"],
+                        "session_id": sid,
                         "title": session["title"],
                         "project": project["name"],
                         "tokens": session["metadata"]["total_input_tokens"]
                         + session["metadata"]["total_output_tokens"],
                         "tool_calls": session["metadata"]["total_tool_calls"],
                         "cost_estimate_usd": stats.get("cost_estimate_usd"),
                     })
+                    new_sessions_map[sid] = sess_info.get("modified", 0)
                     count += 1
                 except Exception as e:
-                    current_app.logger.warning("Failed to export %s: %s", sess_info["id"][:10], e)
+                    current_app.logger.warning("Failed to export %s: %s", sid[:10], e)
                     continue
         if manifest:
             manifest_str = "\n".join(json.dumps(e, default=str) for e in manifest)
             zf.writestr("manifest.jsonl", manifest_str)
 
+    if count > 0:
+        _write_state(new_sessions_map, count)
+
     buf.seek(0)
     date_tag = datetime.now().strftime("%Y-%m-%d")
+    suffix = "-since-last" if since == "last" else ""
     return send_file(
         buf,
         mimetype="application/zip",
         as_attachment=True,
-        download_name=f"claude-code-export-{date_tag}.zip",
+        download_name=f"claude-code-export{suffix}-{date_tag}.zip",
     )
 
 
@@ -106,7 +166,7 @@ def export_session(project_name, session_id):
     fmt = request.args.get("format", "md")
     session = parse_session(filepath)
     stats = compute_stats(session)
-    title_slug = _slugify(session["title"])[:60] or "session"
+    title_slug = _slugify(session["title"]) or "session"
 
     if fmt == "json":
         content = session_to_json(session, stats)
@@ -130,13 +190,3 @@ def export_session(project_name, session_id):
     )
 
 
-def _slugify(text: str) -> str:
-    slug = ""
-    for c in text.lower():
-        if c.isalnum():
-            slug += c
-        elif c in " -_/.":
-            slug += "-"
-    while "--" in slug:
-        slug = slug.replace("--", "-")
-    return slug.strip("-")

static/css/style.css

@@ -1,6 +1,5 @@
 /* ============================================================
    Claude Code Chat Browser — CSS
-   Palette and components match cursor-chat-browser-python.
    Claude-specific additions (stat badges, toast, confirm,
    loading bar, scroll-top) are in their own sections below.
    ============================================================ */
@@ -162,8 +161,6 @@ a:hover { text-decoration: underline; }
 .footer a { color: var(--text-muted); }
 .footer a:hover { color: var(--text); }
 
-/* Hide footer in workspace mode */
-body.workspace-mode .footer { display: none; }
 
 /* ---------- Typography ---------- */
 h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
@@ -285,43 +282,67 @@ h3 { font-size: 1.15rem; font-weight: 600; }
 /* ---------- Utility ---------- */
 .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
 
-/* ---------- Workspace Layout (full-height split) ---------- */
-body.workspace-mode { overflow: hidden; }
-body.workspace-mode #content { padding: 0; max-width: none; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+/* ---------- Workspace Layout ---------- */
+/* Body scrolls naturally; no overflow:hidden trap — footer is always reachable */
 
-.workspace-layout {
+.workspace-top-bar {
   display: flex;
-  flex: 1;
-  height: calc(100vh - 3.5rem);
-  overflow: hidden;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+/* 2-column grid: fixed sidebar + fluid main panel */
+.workspace-wrap {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+@media (max-width: 768px) {
+  .workspace-wrap { grid-template-columns: 1fr; }
 }
 
 /* ---------- Sidebar ---------- */
 .sidebar {
-  width: 280px;
-  min-width: 280px;
-  border-right: 1px solid var(--border);
-  background: var(--bg-card);
+  position: sticky;
+  top: 5rem;                          /* below 3.5rem navbar + 1rem gap */
+  max-height: calc(100vh - 7rem);
   overflow-y: auto;
-  height: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem;
+  background: var(--bg-card);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 2%,
+    black 98%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 2%,
+    black 98%,
+    transparent 100%
+  );
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
-  mask-image: linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
 }
 .sidebar::-webkit-scrollbar { width: 6px; }
 .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 .sidebar::-webkit-scrollbar-track { background: transparent; }
 
 .sidebar-header {
-  padding: 0.75rem;
   font-size: 0.875rem;
   font-weight: 600;
-  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.5rem;
+  padding: 0 0.25rem;
 }
 
-.sidebar-body { padding: 0.75rem; }
-
 .sidebar-item {
   display: block;
   width: 100%;
@@ -371,25 +392,24 @@ body.workspace-mode #content { padding: 0; max-width: none; flex: 1; overflow: h
   opacity: 0.6;
 }
 
-/* ---------- Main panel ---------- */
+/* ---------- Main panel — normal document flow, body scrolls ---------- */
 .main-panel {
-  flex: 1;
-  overflow-y: auto;
-  height: 100%;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  min-width: 0;
 }
-.main-panel::-webkit-scrollbar { width: 6px; }
-.main-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
 /* ---------- Project info ---------- */
 .project-info {
   padding: 1.25rem 1.5rem;
   background: var(--bg-muted);
-  border-bottom: 1px solid var(--border);
+  margin-bottom: 1.5rem;
 }
 .project-info h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.15rem; }
 
+/* ---------- Session content ---------- */
+.session-content-inner {
+  max-width: 920px;
+}
+
 /* ---------- Panel header ---------- */
 .panel-header {
   padding: 1.25rem 1.5rem 0.75rem;
@@ -904,12 +924,9 @@ pre code { background: none; padding: 0; font-size: inherit; }
   }
   .sidebar.open { transform: translateX(0); }
 
-  .main-panel { width: 100%; }
   .panel-header { flex-direction: column; gap: 0.75rem; }
   .panel-title { font-size: 1rem; }
   .stat-badges { gap: 0.25rem; }
   .stat-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; }
   .chat-bubbles { padding: 0.75rem; }
-  body.workspace-mode #content { overflow: auto; }
-  .workspace-layout { height: auto; flex-direction: column; }
 }

static/index.html

@@ -40,7 +40,7 @@
   <!-- Footer (hidden in workspace mode via CSS) -->
   <footer class="footer">
     <div class="footer-inner">
-      <span>&copy; 2025 Claude Code Chat Browser. MIT License.</span>
+      <span>&copy; <span id="footer-year">2025</span> Claude Code Chat Browser. Boost Software License 1.0.</span>
       <a href="https://github.com/CppDigest/claude-code-chat-browser" target="_blank" rel="noopener noreferrer" title="GitHub">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
       </a>