painapple-code 1.0.0__py3-none-any.whl

painapple_code/static/js/welcome/preview.js

@@ -0,0 +1,234 @@
+/**
+ * Session preview bottom sheet — quick peek at a session's recent messages
+ * without opening it as a full tab.
+ *
+ * The preview is a separate DOM subtree appended to the welcome container;
+ * `updatePreviewUI` swaps it in/out without re-rendering the entire welcome
+ * screen, so the surrounding card grid keeps its scroll position.
+ */
+
+import { CONFIG } from '../config.js';
+import { escapeHtml, formatRelativeTime } from '../utils.js';
+import { state, saveWelcomeState } from './state.js';
+
+/**
+ * Load session messages for preview.
+ */
+async function loadPreviewMessages(sessionId) {
+    try {
+        const response = await fetch(`${CONFIG.API_BASE}/api/sessions/${sessionId}/logs/messages?limit=10`);
+        if (!response.ok) throw new Error('Failed to load messages');
+        const data = await response.json();
+        return data.messages || [];
+    } catch (e) {
+        console.error('Failed to load preview messages:', e);
+        return [];
+    }
+}
+
+/**
+ * Render the session preview bottom sheet.
+ */
+function renderPreviewSheet(session, messages, isLoading) {
+    if (!session) return '';
+
+    const name = session.name || session.project || 'Session';
+    const timeAgo = formatRelativeTime(session.last_activity || session.created_at);
+    const tags = session.tags || [];
+    const summary = session.summary || '';
+
+    return `
+        <div class="session-preview-overlay" data-action="close-preview"></div>
+        <div class="session-preview-sheet">
+            <div class="preview-header">
+                <div class="preview-title">
+                    <span class="preview-name">${escapeHtml(name)}</span>
+                    <span class="preview-project">${escapeHtml(session.project || '')}</span>
+                </div>
+                <button class="preview-close" data-action="close-preview">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="preview-meta">
+                <span class="preview-time">${timeAgo}</span>
+                ${tags.length > 0 ? `
+                    <div class="preview-tags">
+                        ${tags.slice(0, 4).map(t => `<span class="welcome-tag">${escapeHtml(t)}</span>`).join('')}
+                    </div>
+                ` : ''}
+            </div>
+
+            ${summary ? `<div class="preview-summary">${escapeHtml(summary)}</div>` : ''}
+
+            <div class="preview-messages">
+                <div class="preview-messages-header">Recent Messages</div>
+                ${isLoading ? `
+                    <div class="preview-loading">
+                        <div class="loading-spinner"></div>
+                        <span>Loading...</span>
+                    </div>
+                ` : messages.length > 0 ? `
+                    <div class="preview-messages-list">
+                        ${messages.slice(0, 8).map(msg => `
+                            <div class="preview-message preview-message--${msg.role || 'unknown'}">
+                                <span class="preview-msg-role">${msg.role || 'message'}</span>
+                                <span class="preview-msg-text">${escapeHtml(truncateText(msg.content || '', 120))}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                ` : `
+                    <div class="preview-empty">No messages yet</div>
+                `}
+            </div>
+
+            <div class="preview-actions">
+                <button class="welcome-btn welcome-btn--primary" data-action="preview-open">
+                    Open Session
+                </button>
+                <button class="welcome-btn welcome-btn--secondary" data-action="preview-open-new-tab">
+                    Open in New Tab
+                </button>
+                <button class="welcome-btn welcome-btn--fork" data-action="preview-fork">
+                    Fork
+                </button>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Truncate text to max length with ellipsis.
+ */
+function truncateText(text, maxLength) {
+    if (!text) return '';
+    // Remove newlines and extra whitespace
+    text = text.replace(/\s+/g, ' ').trim();
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength) + '...';
+}
+
+/**
+ * Show session preview.
+ */
+export async function showPreview(session, container) {
+    state.previewSession = session;
+    state.previewMessages = null;
+    state.previewLoading = true;
+
+    // Render loading state
+    updatePreviewUI(container);
+
+    // Load messages
+    const messages = await loadPreviewMessages(session.session_id);
+    state.previewMessages = messages;
+    state.previewLoading = false;
+
+    // Re-render with messages
+    updatePreviewUI(container);
+}
+
+/**
+ * Update preview UI without re-rendering entire welcome screen.
+ */
+export function updatePreviewUI(container) {
+    // Remove existing preview
+    const existingPreview = container.querySelector('.session-preview-overlay');
+    const existingSheet = container.querySelector('.session-preview-sheet');
+    if (existingPreview) existingPreview.remove();
+    if (existingSheet) existingSheet.remove();
+
+    // Add new preview if session is set
+    if (state.previewSession) {
+        const previewHtml = renderPreviewSheet(
+            state.previewSession,
+            state.previewMessages || [],
+            state.previewLoading
+        );
+        container.insertAdjacentHTML('beforeend', previewHtml);
+        attachPreviewListeners(container);
+    }
+}
+
+/**
+ * Close the preview.
+ */
+export function closePreview(container) {
+    state.previewSession = null;
+    state.previewMessages = null;
+    state.previewLoading = false;
+    updatePreviewUI(container);
+}
+
+/**
+ * Close session preview if open (exported for global Escape handling).
+ * @returns {boolean} True if preview was closed
+ */
+export function closeSessionPreview() {
+    if (!state.previewSession) return false;
+    const container = document.getElementById('welcome-container');
+    if (!container) return false;
+    closePreview(container);
+    return true;
+}
+
+/**
+ * Attach preview event listeners.
+ */
+export function attachPreviewListeners(container) {
+    // Close preview on click
+    container.querySelectorAll('[data-action="close-preview"]').forEach(el => {
+        el.addEventListener('click', () => closePreview(container));
+    });
+
+    // Close preview on Escape key
+    const escapeHandler = (e) => {
+        if (e.key === 'Escape' && state.previewSession) {
+            e.preventDefault();
+            e.stopPropagation();
+            closePreview(container);
+            document.removeEventListener('keydown', escapeHandler);
+        }
+    };
+    document.addEventListener('keydown', escapeHandler);
+
+    // Open session (current tab)
+    container.querySelector('[data-action="preview-open"]')?.addEventListener('click', () => {
+        const session = state.previewSession;
+        if (session) {
+            // Save state before opening (for "back to sessions" feature)
+            saveWelcomeState(container);
+            closePreview(container);
+            window.dispatchEvent(new CustomEvent('welcome:open-session', {
+                detail: { sessionId: session.session_id, projectPath: session.project_path, fromWelcome: true }
+            }));
+        }
+    });
+
+    // Open in new tab (no back button needed since we stay on welcome)
+    container.querySelector('[data-action="preview-open-new-tab"]')?.addEventListener('click', () => {
+        const session = state.previewSession;
+        if (session) {
+            closePreview(container);
+            window.dispatchEvent(new CustomEvent('welcome:open-session-new-tab', {
+                detail: { sessionId: session.session_id, projectPath: session.project_path }
+            }));
+        }
+    });
+
+    // Fork
+    container.querySelector('[data-action="preview-fork"]')?.addEventListener('click', () => {
+        const session = state.previewSession;
+        if (session) {
+            // Save state before forking
+            saveWelcomeState(container);
+            closePreview(container);
+            window.dispatchEvent(new CustomEvent('welcome:fork-session', {
+                detail: { sessionId: session.session_id, projectPath: session.project_path, fromWelcome: true }
+            }));
+        }
+    });
+}

painapple_code/static/js/welcome/state.js

@@ -0,0 +1,129 @@
+/**
+ * Shared state + mutable cross-module refs for the welcome-screen split.
+ *
+ * Imported by:
+ *   - welcome.js          (orchestrator, public API, main render, event handlers)
+ *   - cards.js            (session/family/fork/favorite card renderers)
+ *   - families.js         (family build/grouping + compact render + task mode)
+ *   - preview.js          (session preview bottom sheet)
+ *   - context-menu.js     (long press + session/project context menus)
+ *   - api.js              (data loaders, mutations, project filter)
+ *
+ * Everyone reads/writes the same `state` object directly. The Sets
+ * (`expandedGroups` etc.) are mutated in place so const re-export works.
+ * Mutable scalars live as `.value`/property holders on small objects so
+ * cross-module mutations are visible — top-level `let` only propagates
+ * within its own module.
+ */
+
+// ═══════════════════════════════════════════════════════════════════════════
+// CORE STATE OBJECT
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const state = {
+    forSessionId: null,       // Which session/tab this state belongs to
+    sessions: [],
+    familyMap: new Map(),     // rootId -> family object (built from sessions)
+    favorites: [],            // Favorited sessions (loaded separately)
+    favoritesSet: new Set(),  // Set of favorited session IDs for quick lookup
+    searchResults: null,      // Used by task mode
+    searchQuery: '',          // Used by task mode
+    projects: [],
+    isSearching: false,
+    showProjectPicker: false,
+    selectedProject: null,
+    quickSearchFilter: '',    // Quick inline search filter text
+    quickSearchActive: false, // Whether inline search input is showing
+    selectedResultIndex: -1,  // Keyboard navigation selection (-1 = none)
+    selectableItems: [],      // Combined list of projects + sessions for keyboard nav
+    taskMode: false,          // True when showing task-related sessions
+    pendingTask: null,        // The task message waiting to be sent
+    // Preview state
+    previewSession: null,     // Session being previewed
+    previewMessages: null,    // Messages loaded for preview
+    previewLoading: false,    // Loading state for preview
+    // Context menu state
+    contextMenuSession: null, // Session for context menu
+    contextMenuPos: null,     // {x, y} position
+    contextMenuContainer: null, // Container reference for callbacks
+    // Project filter state
+    projectFilter: null,      // {path, name} - active project filter
+    projectContextMenu: null, // {path, name, x, y} - project context menu state
+    // Session status tracking
+    openSessionIds: new Set(),     // store_ids of sessions open in tabs
+    runningSessionIds: new Set(),  // store_ids of sessions where Claude is running
+    // Workspace dirs (sibling project candidates)
+    workspaceDirs: [],
+    workspaceRoot: null,
+    unvisitedExpanded: false, // Toggled by the "+N more" / "Show less" chip
+    projectsExpanded: false,  // Same, for the visited-projects chip row
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MODULE-LEVEL UI STATE
+// ═══════════════════════════════════════════════════════════════════════════
+
+// Project group expansion (task mode + welcome screen).
+export const expandedGroups = new Set();
+
+// Family expansion (show forks for a session family).
+export const expandedFamilies = new Set();
+
+// "Show all forks" — fully expand a family beyond the first 5.
+export const fullyExpandedFamilies = new Set();
+
+// Recent sessions limit (mutable; "Load more" button bumps it).
+export const RECENT_INCREMENT = 5;
+export const recentLimit = { value: 10 };
+
+// Favorites list limit (mutable; "Show all favorites" button bumps it to all).
+export const FAVORITES_DEFAULT_LIMIT = 3;
+export const favoritesLimit = { value: FAVORITES_DEFAULT_LIMIT };
+
+// Long-press detection refs. Set by context-menu.js, read by event handlers
+// in welcome.js. Wrapped in an object so cross-module mutation is visible.
+export const longPress = {
+    timer: null,
+    triggered: false,
+    timestamp: 0,
+    suppressNextClick: false,
+};
+
+// Context-menu open timestamp (for iOS click-suppression).
+export const contextMenuOpenTime = { value: 0 };
+
+// Saved welcome state (for "back to sessions" feature).
+// Mutated in welcome.js (clearSavedWelcomeState/restoreWelcomeState) and
+// in saveWelcomeState below.
+export const savedWelcomeState = { value: null };
+
+// ═══════════════════════════════════════════════════════════════════════════
+// HELPERS
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Check if a session is favorited (used by card renderers + context menu).
+ */
+export function isFavorite(sessionId) {
+    return state.favoritesSet.has(sessionId);
+}
+
+/**
+ * Save the current welcome screen state before opening a session.
+ * Lives here (not welcome.js) so preview.js / context-menu.js can call it
+ * without a circular import back to the orchestrator.
+ */
+export function saveWelcomeState(container) {
+    const welcomeEl = container.querySelector('.welcome-screen');
+    const searchInput = document.querySelector('.input-area textarea');
+
+    savedWelcomeState.value = {
+        taskMode: state.taskMode,
+        pendingTask: state.pendingTask,
+        searchResults: state.searchResults,
+        scrollTop: welcomeEl?.scrollTop || 0,
+        inputValue: searchInput?.value || '',
+        timestamp: Date.now(),
+        expandedGroups: Array.from(expandedGroups),
+    };
+}