@alexzeitler/session-md 0.5.0

package/src/components/ConversationList.ts

@@ -0,0 +1,243 @@
+import {
+  BoxRenderable,
+  InputRenderable,
+  InputRenderableEvents,
+  SelectRenderable,
+  SelectRenderableEvents,
+  TextRenderable,
+  type SelectOption,
+  type CliRenderer,
+  t,
+  fg,
+  bold,
+} from "@opentui/core";
+import type { SessionEntry, SourceType } from "../import/types.ts";
+import type { Theme } from "../theme.ts";
+
+export type SessionFocusedHandler = (session: SessionEntry) => void;
+
+function matchQuery(query: string, text: string): boolean {
+  return text.toLowerCase().includes(query.toLowerCase());
+}
+
+export class ConversationList {
+  readonly container: BoxRenderable;
+  readonly filterInput: InputRenderable;
+  readonly select: SelectRenderable;
+  private statusText: TextRenderable;
+  private allSessions: SessionEntry[] = [];
+  private visibleSessions: SessionEntry[] = [];
+  private selected: Set<string> = new Set();
+  private onSessionFocused: SessionFocusedHandler | null = null;
+  private filtering = false;
+  private filterInputFocused = false;
+  private sourceFilter: SourceType | "all" = "all";
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private suppressNextSelection = false;
+
+  constructor(private ctx: CliRenderer, private theme: Theme) {
+    this.container = new BoxRenderable(ctx, {
+      id: "conversation-list",
+      flexDirection: "column",
+      flexGrow: 1,
+    });
+
+    this.statusText = new TextRenderable(ctx, {
+      id: "conv-status",
+      content: "",
+      paddingLeft: 1,
+    });
+
+    this.filterInput = new InputRenderable(ctx, {
+      id: "conv-filter",
+      width: 28,
+      placeholder: "Filter...",
+    });
+    this.filterInput.on(InputRenderableEvents.INPUT, () => {
+      this.rebuildOptions();
+    });
+
+    this.select = new SelectRenderable(ctx, {
+      id: "conv-select",
+      flexGrow: 1,
+      options: [],
+      showDescription: true,
+      showScrollIndicator: true,
+      wrapSelection: true,
+      selectedBackgroundColor: this.theme.selection_bg,
+      selectedTextColor: this.theme.selection_fg,
+      selectedDescriptionColor: this.theme.selection_desc,
+    });
+
+    this.container.add(this.statusText);
+    this.container.add(this.select);
+
+    this.select.on(
+      SelectRenderableEvents.SELECTION_CHANGED,
+      (_index: number, option: SelectOption) => {
+        if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        if (this.suppressNextSelection) {
+          this.suppressNextSelection = false;
+          return;
+        }
+        this.debounceTimer = setTimeout(() => {
+          const session = this.visibleSessions.find(
+            (s) => s.meta.id === option.value,
+          );
+          if (session && this.onSessionFocused) {
+            this.onSessionFocused(session);
+          }
+        }, 400);
+      },
+    );
+  }
+
+  setOnSessionFocused(handler: SessionFocusedHandler): void {
+    this.onSessionFocused = handler;
+  }
+
+  setSourceFilter(source: SourceType | "all"): void {
+    this.sourceFilter = source;
+    this.rebuildOptions();
+    this.select.setSelectedIndex(0);
+  }
+
+  showFilter(): void {
+    if (!this.filtering) {
+      this.filtering = true;
+      this.filterInputFocused = true;
+      this.container.add(this.filterInput, 0);
+      this.filterInput.focus();
+    }
+  }
+
+  hideFilter(): void {
+    if (this.filtering) {
+      this.filtering = false;
+      this.filterInputFocused = false;
+      this.filterInput.value = "";
+      this.container.remove(this.filterInput.id);
+      this.rebuildOptions();
+      this.select.focus();
+    }
+  }
+
+  /** Is the filter input actively receiving keystrokes? */
+  isFilterInputFocused(): boolean {
+    return this.filtering && this.filterInputFocused;
+  }
+
+  /** Is a filter active (results are filtered)? */
+  isFiltering(): boolean {
+    return this.filtering;
+  }
+
+  /** Move focus from filter input to the filtered list (filter stays active) */
+  focusListFromFilter(): void {
+    this.filterInputFocused = false;
+    this.select.focus();
+  }
+
+  /** Move focus back to filter input */
+  focusFilterInput(): void {
+    this.filterInputFocused = true;
+    this.filterInput.focus();
+  }
+
+  toggleSelection(): void {
+    const opt = this.select.getSelectedOption();
+    if (!opt) return;
+
+    const id = opt.value;
+    if (this.selected.has(id)) {
+      this.selected.delete(id);
+    } else {
+      this.selected.add(id);
+    }
+    this.rebuildOptions();
+  }
+
+  getSelectedSessions(): SessionEntry[] {
+    return this.allSessions.filter((s) => this.selected.has(s.meta.id));
+  }
+
+  getSelectedCount(): number {
+    return this.selected.size;
+  }
+
+  getFocusedSession(): SessionEntry | undefined {
+    const opt = this.select.getSelectedOption();
+    if (!opt) return undefined;
+    return this.visibleSessions.find((s) => s.meta.id === opt.value);
+  }
+
+  update(sessions: SessionEntry[]): void {
+    this.allSessions = sessions;
+    this.selected.clear();
+    this.rebuildOptions();
+  }
+
+  private rebuildOptions(): void {
+    const query = this.filterInput.value.trim();
+
+    // Source filter
+    let filtered =
+      this.sourceFilter === "all"
+        ? this.allSessions
+        : this.allSessions.filter((s) => s.meta.source === this.sourceFilter);
+
+    // Substring filter (matches title and project)
+    if (query) {
+      filtered = filtered.filter(
+        (s) =>
+          matchQuery(query, s.meta.title) ||
+          (s.meta.project && matchQuery(query, s.meta.project)),
+      );
+    }
+
+    this.visibleSessions = filtered;
+
+    const filterInfo = query ? ` filter="${query}"` : "";
+    this.statusText.content =
+      t`${fg(this.theme.muted)(` ${filtered.length} sessions${filterInfo}`)}`;
+
+    this.select.options = filtered.map((s) => {
+      const check = this.selected.has(s.meta.id) ? "[x]" : "[ ]";
+      const date = s.meta.created_at.split("T")[0] ?? "";
+      const project = s.meta.project ? ` ${s.meta.project}` : "";
+      return {
+        name: `${check} ${s.meta.title}`,
+        description: `${date}${project}`,
+        value: s.meta.id,
+      };
+    });
+  }
+
+  getSourceFilter(): SourceType | "all" {
+    return this.sourceFilter;
+  }
+
+  selectById(id: string): void {
+    const index = this.visibleSessions.findIndex((s) => s.meta.id === id);
+    if (index >= 0) {
+      // Suppress debounce callback — caller handles the load
+      if (this.debounceTimer) clearTimeout(this.debounceTimer);
+      this.suppressNextSelection = true;
+      this.select.setSelectedIndex(index);
+    }
+  }
+
+  selectFirst(): void {
+    this.select.setSelectedIndex(0);
+  }
+
+  selectLast(): void {
+    if (this.visibleSessions.length > 0) {
+      this.select.setSelectedIndex(this.visibleSessions.length - 1);
+    }
+  }
+
+  focus(): void {
+    this.select.focus();
+  }
+}

package/src/components/MessageView.ts

@@ -0,0 +1,241 @@
+import {
+  BoxRenderable,
+  ScrollBoxRenderable,
+  TextRenderable,
+  MarkdownRenderable,
+  SyntaxStyle,
+  parseColor,
+  type CliRenderer,
+  t,
+  bold,
+  fg,
+} from "@opentui/core";
+import type { SessionEntry } from "../import/types.ts";
+import type { Theme } from "../theme.ts";
+import { loadSessionMarkdownAsync } from "../import/loader.ts";
+
+const SPINNER_FRAMES = ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"];
+const PREVIEW_LIMIT = 1500;
+
+export class MessageView {
+  readonly outerBox: BoxRenderable;
+  private titleBar: TextRenderable;
+  private scrollBox: ScrollBoxRenderable;
+  private contentMarkdown: MarkdownRenderable;
+  private syntaxStyle: SyntaxStyle;
+  private currentEntry: SessionEntry | null = null;
+  private loadGen = 0;
+  private fullContent: string = "";
+  private isPreview = false;
+  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
+  private spinnerFrame = 0;
+  private loadFull = false;
+
+  constructor(private ctx: CliRenderer, private mainBox: BoxRenderable, private theme: Theme) {
+    this.syntaxStyle = SyntaxStyle.fromStyles({
+      default: { fg: parseColor(theme.foreground) },
+      "markup.heading": { fg: parseColor(theme.heading), bold: true },
+      "markup.heading.1": { fg: parseColor(theme.heading), bold: true },
+      "markup.heading.2": { fg: parseColor(theme.heading), bold: true },
+      "markup.heading.3": { fg: parseColor(theme.heading), bold: true },
+      "markup.strong": { fg: parseColor(theme.strong), bold: true },
+      "markup.italic": { fg: parseColor(theme.italic), italic: true },
+      "markup.raw": { fg: parseColor(theme.code) },
+      "markup.strikethrough": { dim: true },
+      "markup.link.label": { fg: parseColor(theme.link), underline: true },
+      "markup.link.url": { fg: parseColor(theme.link_url) },
+      "markup.link": { fg: parseColor(theme.muted) },
+      "markup.list": { fg: parseColor(theme.list) },
+      "punctuation.special": { fg: parseColor(theme.muted) },
+      conceal: { fg: parseColor(theme.muted) },
+    });
+
+    this.outerBox = new BoxRenderable(ctx, {
+      id: "message-outer",
+      flexDirection: "column",
+      flexGrow: 1,
+    });
+
+    // Title bar as a TextRenderable inside the box — no border title issues
+    this.titleBar = new TextRenderable(ctx, {
+      id: "message-title",
+      content: "",
+      paddingLeft: 1,
+      height: 1,
+    });
+
+    this.scrollBox = new ScrollBoxRenderable(ctx, {
+      id: "message-scroll",
+      rootOptions: {
+        flexGrow: 1,
+      },
+      contentOptions: {
+        flexDirection: "column",
+        padding: 1,
+      },
+      viewportCulling: true,
+    });
+
+    this.contentMarkdown = new MarkdownRenderable(ctx, {
+      id: "message-content",
+      content: "",
+      syntaxStyle: this.syntaxStyle,
+      conceal: true,
+    });
+
+    this.scrollBox.add(this.contentMarkdown);
+    this.outerBox.add(this.titleBar);
+    this.outerBox.add(this.scrollBox);
+  }
+
+  load(entry: SessionEntry): void {
+    this.currentEntry = entry;
+    const gen = ++this.loadGen;
+
+    // Dim content + start animated spinner in title bar
+    this.scrollBox.opacity = 0.3;
+    this.startSpinner(entry);
+
+    loadSessionMarkdownAsync(entry)
+      .then((md) => {
+        if (this.loadGen !== gen) return;
+        // Let spinner animate visibly before we block the main thread
+        return new Promise<string>((resolve) =>
+          setTimeout(() => resolve(md), 300),
+        );
+      })
+      .then((md) => {
+        if (!md || this.loadGen !== gen) return;
+
+        let content = md;
+        const fmEnd = content.indexOf("---", content.indexOf("---") + 3);
+        if (fmEnd !== -1) {
+          content = content.slice(fmEnd + 3).trimStart();
+        }
+
+        this.fullContent = content;
+
+        // Only render a preview to keep sidebar navigation smooth (unless full requested)
+        if (!this.loadFull && content.length > PREVIEW_LIMIT) {
+          const cutoff = content.lastIndexOf("\n", PREVIEW_LIMIT);
+          const preview = content.slice(0, cutoff > 0 ? cutoff : PREVIEW_LIMIT);
+          this.contentMarkdown.content = preview + "\n\n---\n*Press Tab to view full content…*";
+          this.isPreview = true;
+        } else {
+          this.contentMarkdown.content = content;
+          this.isPreview = false;
+        }
+
+        // Stop spinner + un-dim AFTER content is set
+        this.stopSpinner();
+        this.scrollBox.opacity = 1;
+        this.loadFull = false;
+        this.setTitle(entry.meta.title, entry.meta.source);
+        this.scrollBox.scrollTo(0);
+      })
+      .catch((err) => {
+        if (this.loadGen !== gen) return;
+        this.stopSpinner();
+        this.scrollBox.opacity = 1;
+        if (String(err) !== "Error: cancelled") {
+          this.contentMarkdown.content = `**Error:** ${err}`;
+          this.setTitle(entry.meta.title);
+        }
+      });
+  }
+
+  private setTitle(title: string, source?: string): void {
+    if (source) {
+      this.titleBar.content = t`${bold(fg(this.theme.title)(` ${title}`))} ${fg(this.theme.muted)(`(${source})`)}`;
+    } else {
+      this.titleBar.content = t`${bold(fg(this.theme.title)(` ${title}`))}`;
+    }
+  }
+
+  private startSpinner(entry: SessionEntry): void {
+    this.stopSpinner();
+    this.spinnerFrame = 0;
+    this.titleBar.content = t`${fg(this.theme.spinner)(` ${SPINNER_FRAMES[0]}`)} ${fg(this.theme.muted)(entry.meta.title)}`;
+    this.spinnerTimer = setInterval(() => {
+      this.spinnerFrame = (this.spinnerFrame + 1) % SPINNER_FRAMES.length;
+      if (this.currentEntry) {
+        this.titleBar.content = t`${fg(this.theme.spinner)(` ${SPINNER_FRAMES[this.spinnerFrame]}`)} ${fg(this.theme.muted)(this.currentEntry.meta.title)}`;
+      }
+    }, 80);
+  }
+
+  private stopSpinner(): void {
+    if (this.spinnerTimer) {
+      clearInterval(this.spinnerTimer);
+      this.spinnerTimer = null;
+    }
+  }
+
+  clear(): void {
+    this.currentEntry = null;
+    this.loadGen++;
+    this.stopSpinner();
+    this.titleBar.content = "";
+    this.mainBox.title = "";
+    this.contentMarkdown.content = "";
+    this.scrollBox.opacity = 1;
+    this.scrollBox.scrollTo(0);
+  }
+
+  getCurrentEntry(): SessionEntry | null {
+    return this.currentEntry;
+  }
+
+  /** Expand truncated preview to full content (called when user focuses main panel) */
+  expandFull(): void {
+    if (this.isPreview && this.fullContent) {
+      this.scrollBox.opacity = 0.3;
+      if (this.currentEntry) {
+        this.startSpinner(this.currentEntry);
+      }
+      // Let spinner animate visibly, then set full content
+      setTimeout(() => {
+        this.contentMarkdown.content = this.fullContent;
+        this.isPreview = false;
+        this.stopSpinner();
+        this.scrollBox.opacity = 1;
+        if (this.currentEntry) {
+          this.setTitle(this.currentEntry.meta.title, this.currentEntry.meta.source);
+        }
+      }, 300);
+    }
+  }
+
+  /** Next load() will render full content instead of preview */
+  setLoadFull(full: boolean): void {
+    this.loadFull = full;
+  }
+
+  get container(): ScrollBoxRenderable {
+    return this.scrollBox;
+  }
+
+  scrollDown(): void {
+    this.scrollBox.scrollBy(1);
+  }
+
+  scrollUp(): void {
+    this.scrollBox.scrollBy(-1);
+  }
+
+  pageDown(): void {
+    this.scrollBox.scrollBy(10);
+  }
+
+  pageUp(): void {
+    this.scrollBox.scrollBy(-10);
+  }
+
+  scrollToTop(): void {
+    this.scrollBox.scrollTo(0);
+  }
+
+  scrollToBottom(): void {
+    this.scrollBox.scrollTo(999999);
+  }
+}

package/src/components/SearchResultsView.ts

@@ -0,0 +1,146 @@
+import {
+  BoxRenderable,
+  InputRenderable,
+  InputRenderableEvents,
+  SelectRenderable,
+  SelectRenderableEvents,
+  TextRenderable,
+  type CliRenderer,
+  t,
+  fg,
+  bold,
+} from "@opentui/core";
+import type { SearchResult } from "../search/index.ts";
+import type { Theme } from "../theme.ts";
+
+export class SearchResultsView {
+  readonly container: BoxRenderable;
+  readonly searchInput: InputRenderable;
+  readonly select: SelectRenderable;
+  private statusText: TextRenderable;
+  private results: SearchResult[] = [];
+  private inputFocused = true;
+  private onResultSelected: ((result: SearchResult) => void) | null = null;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private onSearchQuery: ((query: string) => SearchResult[]) | null = null;
+
+  constructor(private ctx: CliRenderer, private theme: Theme) {
+    this.container = new BoxRenderable(ctx, {
+      id: "search-results",
+      flexDirection: "column",
+      flexGrow: 1,
+    });
+
+    this.searchInput = new InputRenderable(ctx, {
+      id: "search-input",
+      width: 40,
+      placeholder: "Search content...",
+    });
+
+    this.statusText = new TextRenderable(ctx, {
+      id: "search-status",
+      content: "",
+      paddingLeft: 1,
+    });
+
+    this.select = new SelectRenderable(ctx, {
+      id: "search-select",
+      flexGrow: 1,
+      options: [],
+      showDescription: true,
+      showScrollIndicator: true,
+      wrapSelection: true,
+      selectedBackgroundColor: this.theme.selection_bg,
+      selectedTextColor: this.theme.selection_fg,
+      selectedDescriptionColor: this.theme.selection_desc,
+    });
+
+    this.container.add(this.searchInput);
+    this.container.add(this.statusText);
+    this.container.add(this.select);
+
+    this.searchInput.on(InputRenderableEvents.INPUT, () => {
+      if (this.debounceTimer) clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(() => {
+        this.executeSearch();
+      }, 300);
+    });
+
+    this.select.on(
+      SelectRenderableEvents.SELECTION_CHANGED,
+      (_index: number) => {
+        // Could preview on focus change
+      },
+    );
+  }
+
+  setOnSearchQuery(handler: (query: string) => SearchResult[]): void {
+    this.onSearchQuery = handler;
+  }
+
+  setOnResultSelected(handler: (result: SearchResult) => void): void {
+    this.onResultSelected = handler;
+  }
+
+  private executeSearch(): void {
+    const query = this.searchInput.value.trim();
+    if (!query || !this.onSearchQuery) {
+      this.results = [];
+      this.select.options = [];
+      this.statusText.content = t`${fg(this.theme.muted)(" Type to search...")}`;
+      return;
+    }
+
+    this.results = this.onSearchQuery(query);
+    this.statusText.content = t`${fg(this.theme.muted)(` ${this.results.length} result(s)`)}`;
+
+    if (this.results.length === 0) {
+      this.select.options = [{ name: "No results", description: "", value: "__none__" }];
+    } else {
+      this.select.options = this.results.map((r) => ({
+        name: `${r.title}`,
+        description: `${r.snippet}`,
+        value: r.id,
+      }));
+    }
+  }
+
+  isInputFocused(): boolean {
+    return this.inputFocused;
+  }
+
+  focusInput(): void {
+    this.inputFocused = true;
+    this.searchInput.focus();
+  }
+
+  focusList(): void {
+    this.inputFocused = false;
+    this.select.focus();
+  }
+
+  getSelectedResult(): SearchResult | undefined {
+    const opt = this.select.getSelectedOption();
+    if (!opt || opt.value === "__none__") return undefined;
+    return this.results.find((r) => r.id === opt.value);
+  }
+
+  selectCurrentResult(): void {
+    const result = this.getSelectedResult();
+    if (result && this.onResultSelected) {
+      this.onResultSelected(result);
+    }
+  }
+
+  reset(): void {
+    this.searchInput.value = "";
+    this.results = [];
+    this.select.options = [{ name: "", description: "", value: "__none__" }];
+    this.inputFocused = true;
+    this.statusText.content = t`${fg(this.theme.muted)(" Type to search...")}`;
+  }
+
+  focus(): void {
+    this.focusInput();
+  }
+}

package/src/components/SourcePicker.ts

@@ -0,0 +1,87 @@
+import {
+  SelectRenderable,
+  SelectRenderableEvents,
+  type SelectOption,
+  type CliRenderer,
+} from "@opentui/core";
+import type { SourceType } from "../import/types.ts";
+import type { Theme } from "../theme.ts";
+
+export type SourceChangedHandler = (source: SourceType | "all") => void;
+
+const SOURCE_LABELS: Record<string, string> = {
+  all: "All Sources",
+  "claude-code": "Claude Code",
+  opencode: "OpenCode",
+  "claude-export": "Claude.ai Export",
+  memorizer: "Memorizer",
+};
+
+export class SourcePicker {
+  readonly select: SelectRenderable;
+  private onSourceChanged: SourceChangedHandler | null = null;
+  private currentSource: SourceType | "all" = "all";
+
+  constructor(ctx: CliRenderer, private theme?: Theme) {
+    this.select = new SelectRenderable(ctx, {
+      id: "source-picker",
+      width: "100%" as any,
+      height: 6,
+      options: [
+        { name: "All Sources (loading…)", description: "", value: "all" },
+      ],
+      showDescription: false,
+      wrapSelection: true,
+      selectedBackgroundColor: theme?.selection_bg ?? "#264f78",
+      selectedTextColor: theme?.selection_fg ?? "#ffffff",
+    });
+
+    this.select.on(
+      SelectRenderableEvents.SELECTION_CHANGED,
+      (_index: number, option: SelectOption) => {
+        this.currentSource = option.value as SourceType | "all";
+        if (this.onSourceChanged) {
+          this.onSourceChanged(this.currentSource);
+        }
+      },
+    );
+  }
+
+  setOnSourceChanged(handler: SourceChangedHandler): void {
+    this.onSourceChanged = handler;
+  }
+
+  getCurrentSource(): SourceType | "all" {
+    return this.currentSource;
+  }
+
+  update(sourceCounts: Map<string, number>): void {
+    const options: SelectOption[] = [];
+
+    let total = 0;
+    for (const count of sourceCounts.values()) total += count;
+
+    options.push({
+      name: `${SOURCE_LABELS["all"]} (${total})`,
+      description: "",
+      value: "all",
+    });
+
+    for (const [src, label] of Object.entries(SOURCE_LABELS)) {
+      if (src === "all") continue;
+      const count = sourceCounts.get(src) ?? 0;
+      if (count === 0) continue;
+      options.push({
+        name: `${label} (${count})`,
+        description: "",
+        value: src,
+      });
+    }
+
+    this.select.options = options;
+  }
+
+  focus(): void {
+    this.select.focus();
+  }
+}