markupr 2.1.8 → 2.5.0

package/src/renderer/App.tsx

@@ -1,515 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import type { SessionState } from '../shared/types';
-import {
-  CrashRecoveryDialog,
-  Onboarding,
-  SettingsPanel,
-  UpdateNotification,
-  CountdownTimer,
-  CompactAudioIndicator,
-  DonateButton,
-  KeyboardShortcuts,
-  ExportDialog,
-  SessionReview,
-  RecordingOverlay,
-  ProcessingOverlay,
-} from './components';
-import { SessionHistory } from './components/SessionHistory';
-import { ToggleRecordingHint, ManualScreenshotHint, PauseResumeHint } from './components/HotkeyHint';
-import StatusIndicator from './components/StatusIndicator';
-import {
-  useRecording,
-  useProcessing,
-  useUI,
-  PROCESSING_BASELINE_PERCENT,
-  PROCESSING_DOT_FRAMES,
-  formatProcessingStep,
-} from './contexts';
-import './styles/app-shell.css';
-
-// ============================================================================
-// Helpers
-// ============================================================================
-
-function formatDuration(durationMs: number): string {
-  const seconds = Math.floor(durationMs / 1000);
-  const mins = Math.floor(seconds / 60);
-  const secs = seconds % 60;
-  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-}
-
-function formatRelativeTime(timestamp: number): string {
-  const now = Date.now();
-  const diff = now - timestamp;
-  const minute = 60_000;
-  const hour = 60 * minute;
-  const day = 24 * hour;
-
-  if (diff < minute) return 'just now';
-  if (diff < hour) return `${Math.floor(diff / minute)}m ago`;
-  if (diff < day) return `${Math.floor(diff / hour)}h ago`;
-  return `${Math.floor(diff / day)}d ago`;
-}
-
-function formatCaptureTrigger(trigger?: 'pause' | 'manual' | 'voice-command'): string {
-  switch (trigger) {
-    case 'manual':
-      return 'Manual Shot Marker';
-    case 'voice-command':
-      return 'Voice Cue Marker';
-    default:
-      return 'AI Frame Marker';
-  }
-}
-
-function mapPopoverState(state: SessionState): 'idle' | 'recording' | 'processing' | 'complete' | 'error' {
-  if (state === 'recording' || state === 'starting') return 'recording';
-  if (state === 'stopping' || state === 'processing') return 'processing';
-  if (state === 'complete') return 'complete';
-  if (state === 'error') return 'error';
-  return 'idle';
-}
-
-// ============================================================================
-// App Component
-// ============================================================================
-
-const App: React.FC = () => {
-  const recording = useRecording();
-  const processing = useProcessing();
-  const ui = useUI();
-
-  // ---------------------------------------------------------------------------
-  // HUD mode body class
-  // ---------------------------------------------------------------------------
-  useEffect(() => {
-    const bodyClass = 'markupr-hud-mode';
-    const htmlClass = 'markupr-hud-mode';
-    document.documentElement.classList.toggle(htmlClass, ui.isHudMode);
-    document.body.classList.toggle(bodyClass, ui.isHudMode);
-    return () => {
-      document.documentElement.classList.remove(htmlClass);
-      document.body.classList.remove(bodyClass);
-    };
-  }, [ui.isHudMode]);
-
-  // ---------------------------------------------------------------------------
-  // Primary action (orchestrates countdown + start/stop)
-  // ---------------------------------------------------------------------------
-  const handlePrimaryAction = useCallback(async () => {
-    if (ui.primaryActionDisabled) return;
-
-    if (recording.state === 'idle' && ui.countdownDuration > 0) {
-      ui.setShowCountdown(true);
-      return;
-    }
-
-    if (recording.state === 'recording') {
-      await recording.stopSession();
-    } else {
-      await recording.startSession();
-    }
-  }, [ui.primaryActionDisabled, ui.countdownDuration, ui.setShowCountdown, recording.state, recording.stopSession, recording.startSession]);
-
-  const handleCountdownComplete = useCallback(async () => {
-    ui.setShowCountdown(false);
-    await recording.startSession();
-  }, [ui.setShowCountdown, recording.startSession]);
-
-  const handleCountdownSkip = useCallback(() => {
-    ui.setShowCountdown(false);
-  }, [ui.setShowCountdown]);
-
-  // ---------------------------------------------------------------------------
-  // Render
-  // ---------------------------------------------------------------------------
-  return (
-    <div className={`ff-shell ff-shell--${recording.state}${ui.isHudMode ? ' ff-shell--hud' : ''}`}>
-      {/* === Global overlays === */}
-      <UpdateNotification />
-
-      {recording.incompleteSession && !recording.isCheckingRecovery && (
-        <CrashRecoveryDialog
-          session={recording.incompleteSession}
-          onRecover={recording.recoverSession}
-          onDiscard={recording.discardSession}
-        />
-      )}
-
-      {ui.showOnboarding && (
-        <Onboarding
-          onComplete={ui.handleOnboardingComplete}
-          onSkip={ui.handleOnboardingSkip}
-        />
-      )}
-
-      {ui.showCountdown && ui.countdownDuration > 0 && (
-        <CountdownTimer
-          duration={ui.countdownDuration as 3 | 5}
-          onComplete={handleCountdownComplete}
-          onSkip={handleCountdownSkip}
-        />
-      )}
-
-      <SettingsPanel
-        isOpen={ui.currentView === 'settings'}
-        onClose={ui.closeOverlay}
-      />
-
-      <SessionHistory
-        isOpen={ui.currentView === 'history'}
-        onClose={ui.closeOverlay}
-        onOpenSession={recording.openRecent}
-      />
-
-      <KeyboardShortcuts
-        isOpen={ui.currentView === 'shortcuts'}
-        onClose={ui.closeOverlay}
-      />
-
-      {ui.showExportDialog && (
-        <ExportDialog
-          session={{ id: '', startTime: Date.now(), feedbackItems: [] }}
-          isOpen={ui.showExportDialog}
-          onClose={() => ui.setShowExportDialog(false)}
-          onExport={ui.handleExport}
-        />
-      )}
-
-      {/* === Main Card === */}
-      <main className={`ff-shell__card${ui.isHudMode ? ' ff-shell__card--hud' : ''}`}>
-        {ui.showRecordingStatus && (
-          <RecordingOverlay
-            duration={Math.floor(recording.duration / 1000)}
-            screenshotCount={recording.screenshotCount}
-            onStop={() => { void handlePrimaryAction(); }}
-            audioLevel={recording.audioLevel}
-            isVoiceActive={recording.isVoiceActive}
-            isPaused={recording.isPaused}
-            manualShortcut={ui.settings?.hotkeys?.manualScreenshot}
-            toggleShortcut={ui.settings?.hotkeys?.toggleRecording}
-            pauseShortcut={ui.settings?.hotkeys?.pauseResume}
-          />
-        )}
-
-        {ui.showProcessingProgress && ui.isHudMode && (
-          <ProcessingOverlay
-            percent={processing.processingProgress?.percent ?? PROCESSING_BASELINE_PERCENT}
-            step={processing.processingProgress?.step || formatProcessingStep('preparing')}
-            onHide={() => { void window.markupr.window.hide(); }}
-          />
-        )}
-
-        {!ui.isHudMode && (
-          <>
-        <header className="ff-shell__header">
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <StatusIndicator
-              status={mapPopoverState(recording.state)}
-              error={recording.errorMessage}
-            />
-            <div>
-              <p className="ff-shell__eyebrow">markupr</p>
-              <h1 className="ff-shell__title">{ui.statusCopy.title}</h1>
-            </div>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <button
-              className="ff-shell__quiet-btn"
-              onClick={() => ui.setCurrentView('settings')}
-              type="button"
-              aria-label="Open Settings"
-              title="Settings"
-              style={{ fontSize: 16 }}
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
-                <path d="M8 10a2 2 0 100-4 2 2 0 000 4z" />
-                <path d="M13.178 9.689a1.2 1.2 0 00.24 1.324l.043.044a1.455 1.455 0 11-2.058 2.058l-.044-.044a1.2 1.2 0 00-1.324-.24 1.2 1.2 0 00-.727 1.098v.122a1.455 1.455 0 01-2.91 0v-.065a1.2 1.2 0 00-.785-1.097 1.2 1.2 0 00-1.324.24l-.044.043a1.455 1.455 0 11-2.058-2.058l.044-.044a1.2 1.2 0 00.24-1.324 1.2 1.2 0 00-1.098-.727h-.122a1.455 1.455 0 010-2.91h.065a1.2 1.2 0 001.097-.785 1.2 1.2 0 00-.24-1.324l-.043-.044A1.455 1.455 0 114.187 1.84l.044.044a1.2 1.2 0 001.324.24h.058a1.2 1.2 0 00.727-1.098V.904a1.455 1.455 0 012.91 0v.065a1.2 1.2 0 00.727 1.097 1.2 1.2 0 001.324-.24l.044-.043a1.455 1.455 0 112.058 2.058l-.044.044a1.2 1.2 0 00-.24 1.324v.058a1.2 1.2 0 001.098.727h.122a1.455 1.455 0 010 2.91h-.065a1.2 1.2 0 00-1.097.727z" />
-              </svg>
-            </button>
-            <button
-              className="ff-shell__quiet-btn"
-              onClick={() => ui.setCurrentView('history')}
-              type="button"
-              aria-label="Open Session History"
-              title="Session History"
-              style={{ fontSize: 16 }}
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
-                <path d="M8 1.455A6.545 6.545 0 1014.545 8" />
-                <path d="M8 4v4l2.5 2.5" />
-              </svg>
-            </button>
-            <button
-              className="ff-shell__quiet-btn"
-              onClick={() => window.markupr.window.hide()}
-              type="button"
-            >
-              Hide
-            </button>
-          </div>
-        </header>
-
-        <p className="ff-shell__subtitle">{ui.statusCopy.detail}</p>
-
-        <section className="ff-shell__controls">
-          <button
-            className={`ff-shell__primary-btn ${recording.state === 'recording' ? 'is-live' : ''}`}
-            type="button"
-            onClick={handlePrimaryAction}
-            disabled={ui.primaryActionDisabled}
-          >
-            {recording.state === 'processing' || recording.state === 'stopping' ? 'Processing\u2026' : ui.primaryActionLabel}
-          </button>
-
-          <button
-            className="ff-shell__secondary-btn"
-            type="button"
-            onClick={recording.togglePause}
-            disabled={ui.pauseActionDisabled}
-          >
-            {recording.isPaused ? 'Resume Session' : 'Pause Session'} (<PauseResumeHint inline />)
-          </button>
-
-          <button
-            className="ff-shell__secondary-btn"
-            type="button"
-            onClick={recording.manualCapture}
-            disabled={ui.manualCaptureDisabled}
-          >
-            Capture Screenshot (<ManualScreenshotHint inline />)
-          </button>
-        </section>
-
-        <section className="ff-shell__meta">
-          <span>{formatDuration(recording.duration)}</span>
-          <span>{recording.screenshotCount} shots marked</span>
-          <span className={recording.hasTranscriptionCapability ? 'is-ready' : 'is-optional'}>
-            {recording.hasTranscriptionCapability ? 'Transcript Ready' : 'Add OpenAI Key'}
-          </span>
-          {recording.lastCapture && (
-            <span title={new Date(recording.lastCapture.timestamp).toLocaleString()}>
-              {formatCaptureTrigger(recording.lastCapture.trigger)}
-            </span>
-          )}
-        </section>
-
-        {recording.state === 'idle' && ui.hasRequiredByokKeys === false && (
-          <section className="ff-shell__byok-cta">
-            <p className="ff-shell__byok-title">BYOK setup required for full reports</p>
-            <p className="ff-shell__byok-detail">
-              Add your OpenAI and Anthropic API keys in Settings {'>'} Advanced.
-            </p>
-            <button
-              type="button"
-              className="ff-shell__byok-btn"
-              onClick={() => ui.setCurrentView('settings')}
-            >
-              Open BYOK Setup
-            </button>
-          </section>
-        )}
-
-        {ui.showRecordingStatus && (
-          <section className="ff-shell__transcript">
-            <p className="ff-shell__transcript-label">Recording Active</p>
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 10,
-                padding: '8px 10px',
-                borderRadius: 10,
-                background: 'rgba(16, 22, 32, 0.72)',
-                border: '1px solid rgba(145, 160, 186, 0.26)',
-              }}
-            >
-              <span className="ff-shell__transcript-line">
-                {recording.isPaused
-                  ? 'Session paused'
-                  : recording.isVoiceActive
-                    ? 'Mic is active'
-                    : 'Listening for narration'}
-              </span>
-              {ui.settings?.showAudioWaveform !== false && (
-                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
-                  <CompactAudioIndicator
-                    audioLevel={recording.audioLevel}
-                    isVoiceActive={recording.isVoiceActive}
-                    accentColor="#0a84ff"
-                    inactiveColor="#c7c7cc"
-                    barCount={7}
-                  />
-                  <span
-                    style={{
-                      minWidth: 44,
-                      textAlign: 'right',
-                      fontSize: 11,
-                      color: '#98a7c0',
-                      fontVariantNumeric: 'tabular-nums',
-                    }}
-                  >
-                    {Math.round(Math.max(0, Math.min(1, recording.audioLevel)) * 100)}%
-                  </span>
-                </div>
-              )}
-            </div>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
-              <span className="ff-shell__meta-pill">
-                Mark Shot: <ManualScreenshotHint inline />
-              </span>
-              <span className="ff-shell__meta-pill">
-                Stop: <ToggleRecordingHint inline />
-              </span>
-              <span className="ff-shell__meta-pill">
-                Pause: <PauseResumeHint inline />
-              </span>
-            </div>
-            <p className="ff-shell__transcript-placeholder" style={{ marginTop: 8 }}>
-              Manual shots are confirmed instantly above. After stop, AI analyzes your transcript + screen frames and assembles an AI-ready report.
-            </p>
-          </section>
-        )}
-
-        {ui.showProcessingProgress && (
-          <section className="ff-shell__processing">
-            <p className="ff-shell__processing-label">
-              Processing your recording
-              <span className="ff-shell__processing-dots" aria-hidden="true">
-                {PROCESSING_DOT_FRAMES[processing.processingDotFrame] || PROCESSING_DOT_FRAMES[0]}
-              </span>
-            </p>
-            <div className="ff-shell__processing-bar-track">
-              <div
-                className="ff-shell__processing-bar-fill"
-                style={{ width: `${processing.processingProgress?.percent ?? 0}%` }}
-              />
-            </div>
-            <div className="ff-shell__processing-info">
-              <span className="ff-shell__processing-percent">
-                {processing.processingProgress?.percent ?? 0}%
-              </span>
-              <span className="ff-shell__processing-step">
-                {processing.processingProgress?.step || 'Preparing...'}
-              </span>
-            </div>
-          </section>
-        )}
-
-        {recording.state === 'complete' && recording.reviewSession && recording.showReviewEditor && (
-          <SessionReview
-            session={recording.reviewSession}
-            onSave={recording.reviewSave}
-            onCopy={recording.copyReportPath}
-            onOpenFolder={recording.openReportFolder}
-            onClose={recording.reviewClose}
-          />
-        )}
-
-        {recording.reportPath && (!recording.reviewSession || !recording.showReviewEditor) && (
-          <section className="ff-shell__report">
-            <p className="ff-shell__report-label">Latest Report Path</p>
-            <code className="ff-shell__path">{recording.reportPath}</code>
-            <div className="ff-shell__report-actions">
-              <button type="button" onClick={recording.copyReportPath}>
-                Copy Path
-              </button>
-              <button type="button" onClick={recording.openReportFolder}>
-                Open Folder
-              </button>
-              {recording.reviewSession && (
-                <button type="button" onClick={() => recording.setShowReviewEditor(true)}>
-                  Open Review Editor
-                </button>
-              )}
-            </div>
-            {recording.recordingPath && (
-              <>
-                <p className="ff-shell__report-label">Session Recording</p>
-                <code className="ff-shell__path">{recording.recordingPath}</code>
-                <div className="ff-shell__report-actions">
-                  <button type="button" onClick={recording.copyRecordingPath}>
-                    Copy Recording Path
-                  </button>
-                  <button type="button" onClick={recording.openReportFolder}>
-                    Open Folder
-                  </button>
-                </div>
-              </>
-            )}
-            {recording.audioPath && (
-              <>
-                <p className="ff-shell__report-label">Narration Audio</p>
-                <code className="ff-shell__path">{recording.audioPath}</code>
-                <div className="ff-shell__report-actions">
-                  <button type="button" onClick={recording.copyAudioPath}>
-                    Copy Audio Path
-                  </button>
-                  <button type="button" onClick={recording.openReportFolder}>
-                    Open Folder
-                  </button>
-                </div>
-              </>
-            )}
-          </section>
-        )}
-
-        {recording.errorMessage && recording.state === 'error' && (
-          <section className="ff-shell__error">
-            <p>{recording.errorMessage}</p>
-          </section>
-        )}
-
-        <section className="ff-shell__recent">
-          <div className="ff-shell__recent-header">
-            <h2>Recent Captures</h2>
-            <button type="button" onClick={recording.loadRecentSessions}>
-              Refresh
-            </button>
-          </div>
-
-          {recording.recentSessions.length === 0 ? (
-            <p className="ff-shell__empty">No captures yet. Run a session and it will appear here.</p>
-          ) : (
-            <ul className="ff-shell__recent-list">
-              {recording.recentSessions.map((session) => (
-                <li key={session.id} className="ff-shell__recent-item">
-                  <button
-                    className="ff-shell__recent-open"
-                    type="button"
-                    onClick={() => recording.openRecent(session)}
-                  >
-                    <span>{session.sourceName || 'Feedback Session'}</span>
-                    <span>{formatRelativeTime(session.startTime)}</span>
-                  </button>
-                  <div className="ff-shell__recent-meta">
-                    <span>{session.itemCount} items</span>
-                    <span>{session.screenshotCount} shots</span>
-                    <button type="button" onClick={() => recording.copyRecentPath(session)}>
-                      Copy File Path
-                    </button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        <footer className="ff-shell__footer">
-          <p>
-            Mic activity is monitored live; narration is transcribed after recording completes.
-          </p>
-          <p>
-            Global hotkey: <ToggleRecordingHint inline /> starts or stops the loop.
-          </p>
-          <DonateButton className="ff-shell__donate" />
-        </footer>
-          </>
-        )}
-      </main>
-    </div>
-  );
-};
-
-export default App;

package/src/renderer/AppWrapper.tsx

@@ -1,28 +0,0 @@
-/**
- * AppWrapper.tsx
- *
- * Root wrapper that composes all context providers around the App component.
- * Provider order matters: RecordingProvider > ProcessingProvider > UIProvider.
- */
-
-import React from 'react';
-import App from './App';
-import { ErrorBoundary } from './components';
-import { ThemeProvider } from './components/ThemeProvider';
-import { RecordingProvider, ProcessingProvider, UIProvider } from './contexts';
-
-export const AppWrapper: React.FC = () => (
-  <ErrorBoundary>
-    <ThemeProvider>
-      <RecordingProvider>
-        <ProcessingProvider>
-          <UIProvider>
-            <App />
-          </UIProvider>
-        </ProcessingProvider>
-      </RecordingProvider>
-    </ThemeProvider>
-  </ErrorBoundary>
-);
-
-export default AppWrapper;

package/src/renderer/assets/logo-dark.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="220" height="48" viewBox="0 0 220 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="4" y="6" width="36" height="36" rx="10" fill="#1D2431" stroke="#3A4352"/>
-  <path d="M12 30V17L22 25L32 17V30" stroke="#F8FAFC" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="32" cy="30" r="2.25" fill="#F8FAFC"/>
-  <text x="52" y="31" font-family="-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif" font-size="24" font-weight="650" fill="#F3F4F6">markupr</text>
-</svg>

package/src/renderer/assets/logo.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="220" height="48" viewBox="0 0 220 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="4" y="6" width="36" height="36" rx="10" fill="#F5F6F8" stroke="#D1D5DB"/>
-  <path d="M12 30V17L22 25L32 17V30" stroke="#111827" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="32" cy="30" r="2.25" fill="#111827"/>
-  <text x="52" y="31" font-family="-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif" font-size="24" font-weight="650" fill="#111827">markupr</text>
-</svg>