@jsonresume/jobs 0.7.0

package/src/tui/App.js

@@ -0,0 +1,395 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { render, Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { h } from './h.js';
+import { createApiClient } from '../api.js';
+import {
+  loadFilters,
+  saveFilters,
+  getFiltersForSearch,
+  setFiltersForSearch,
+} from '../filters.js';
+import { exportShortlist } from '../export.js';
+import { useJobs } from './useJobs.js';
+import { useAI } from './useAI.js';
+import { useSearches } from './useSearches.js';
+import { useToast } from './Toast.js';
+import Toast from './Toast.js';
+import Header from './Header.js';
+import JobList from './JobList.js';
+import JobDetail from './JobDetail.js';
+import FilterManager from './FilterManager.js';
+import SearchManager from './SearchManager.js';
+import StatusBar from './StatusBar.js';
+import AIPanel from './AIPanel.js';
+import HelpModal from './HelpModal.js';
+
+const TABS = ['all', 'interested', 'applied', 'maybe', 'passed'];
+const TAB_LABELS = {
+  all: 'All Jobs',
+  interested: '⭐ Interested',
+  applied: '📨 Applied',
+  maybe: '? Maybe',
+  passed: '✗ Passed',
+};
+
+function InlineSearch({ query, onChange, onSubmit }) {
+  return h(
+    Box,
+    { paddingX: 1 },
+    h(Text, { color: 'yellow', bold: true }, 'Find: '),
+    h(TextInput, { value: query, onChange, onSubmit })
+  );
+}
+
+function App({ baseUrl, apiKey }) {
+  const { exit } = useApp();
+  const api = useMemo(
+    () => createApiClient({ baseUrl, apiKey }),
+    [baseUrl, apiKey]
+  );
+
+  // View: 'list' | 'detail' | 'filters' | 'searches' | 'ai' | 'help'
+  const [view, setView] = useState('list');
+  const [tab, setTab] = useState('all');
+  const [selectedJob, setSelectedJob] = useState(null);
+  const [cursor, setCursor] = useState(0);
+  const [resume, setResume] = useState(null);
+
+  // Inline search
+  const [inlineSearch, setInlineSearch] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [appliedQuery, setAppliedQuery] = useState('');
+
+  // Active search profile
+  const [activeSearchId, setActiveSearchId] = useState(null);
+
+  // Persistent filters
+  const [filterStore, setFilterStore] = useState(() => loadFilters());
+  const activeFilters = useMemo(
+    () => getFiltersForSearch(filterStore, activeSearchId),
+    [filterStore, activeSearchId]
+  );
+  const updateFilters = useCallback(
+    (newActive) => {
+      setFilterStore((prev) => {
+        const next = setFiltersForSearch(prev, activeSearchId, newActive);
+        saveFilters(next);
+        return next;
+      });
+    },
+    [activeSearchId]
+  );
+  const filterState = useMemo(
+    () => ({ active: activeFilters }),
+    [activeFilters]
+  );
+  const persistFilters = useCallback(
+    (s) => updateFilters(s.active),
+    [updateFilters]
+  );
+
+  const {
+    jobs: rawJobs,
+    allJobs,
+    loading,
+    reranking,
+    error,
+    markJob,
+    forceRefresh,
+  } = useJobs(api, activeFilters, tab, activeSearchId);
+  const ai = useAI(resume);
+  const searchesHook = useSearches(api);
+  const { toast, show: showToast } = useToast();
+
+  // Apply inline search filter
+  const jobs = useMemo(() => {
+    if (!appliedQuery) return rawJobs;
+    const q = appliedQuery.toLowerCase();
+    return rawJobs.filter((j) => JSON.stringify(j).toLowerCase().includes(q));
+  }, [rawJobs, appliedQuery]);
+
+  useEffect(() => {
+    api
+      .fetchMe()
+      .then((d) => setResume(d.resume))
+      .catch(() => {});
+  }, [api]);
+
+  // Update selectedJob when cursor moves in detail view
+  useEffect(() => {
+    if (view === 'detail' && jobs[cursor]) {
+      setSelectedJob(jobs[cursor]);
+    }
+  }, [cursor, view]);
+
+  // Inline search escape handler
+  useInput(
+    (input, key) => {
+      if (key.escape) {
+        setInlineSearch(false);
+        setSearchQuery('');
+        setAppliedQuery('');
+      }
+    },
+    { isActive: inlineSearch }
+  );
+
+  // Main input handler
+  useInput(
+    (input, key) => {
+      if (view === 'filters' || view === 'searches' || view === 'help') return;
+      if (inlineSearch) return;
+
+      if (input === 'q' && view === 'list') exit();
+      if (input === 'q' && view === 'detail') setView('list');
+      if (input === 'R' && (view === 'list' || view === 'detail')) {
+        forceRefresh();
+        showToast('Refreshing…', 'info');
+      }
+      if (input === 'f' && (view === 'list' || view === 'detail'))
+        setView('filters');
+      if (input === '/' && (view === 'list' || view === 'detail'))
+        setView('searches');
+      if (input === '?' && (view === 'list' || view === 'detail'))
+        setView('help');
+      if (input === 'n' && view === 'list') {
+        setInlineSearch(true);
+        setSearchQuery('');
+      }
+
+      // Enter toggles detail panel
+      if (key.return && view === 'list' && jobs[cursor]) {
+        setSelectedJob(jobs[cursor]);
+        setView('detail');
+      }
+      if (key.escape && view === 'detail') setView('list');
+
+      if (key.escape && view === 'ai') {
+        ai.clear();
+        setView(selectedJob ? 'detail' : 'list');
+      }
+
+      if (key.tab && (view === 'list' || view === 'detail')) {
+        const idx = TABS.indexOf(tab);
+        setTab(TABS[(idx + 1) % TABS.length]);
+        setCursor(0);
+      }
+      if (key.shift && key.tab && (view === 'list' || view === 'detail')) {
+        const idx = TABS.indexOf(tab);
+        setTab(TABS[(idx - 1 + TABS.length) % TABS.length]);
+        setCursor(0);
+      }
+    },
+    { isActive: view !== 'filters' && view !== 'searches' && view !== 'help' }
+  );
+
+  const handleSelect = (job) => {
+    setSelectedJob(job);
+    setView('detail');
+  };
+
+  const handleMark = async (id, state) => {
+    await markJob(id, state);
+    const job = allJobs.find((j) => j.id === id);
+    const title = job ? job.title : `#${id}`;
+    const labels = {
+      interested: 'interested',
+      applied: 'applied',
+      maybe: 'maybe',
+      not_interested: 'passed',
+    };
+    showToast(`${title} → ${labels[state] || state}`, state);
+  };
+
+  const handleAISummary = (job) => {
+    setSelectedJob(job);
+    setView('ai');
+    ai.summarizeJob(job);
+  };
+  const handleAIBatch = (visibleJobs) => {
+    setView('ai');
+    ai.batchReview(visibleJobs);
+  };
+  const handleBack = () => setView('list');
+  const handleExport = () => {
+    try {
+      const filename = exportShortlist(allJobs);
+      showToast(`Exported to ${filename}`, 'export');
+    } catch (err) {
+      showToast(`Export failed: ${err.message}`, 'error');
+    }
+  };
+
+  const handleCreateSearch = async (name, prompt) => {
+    const search = await searchesHook.create(name, prompt);
+    setActiveSearchId(search.id);
+  };
+  const handleDeleteSearch = async (id) => {
+    await searchesHook.remove(id);
+    if (activeSearchId === id) setActiveSearchId(null);
+  };
+  const handleSwitchSearch = (id) => {
+    setActiveSearchId(id);
+    setCursor(0);
+  };
+
+  const activeSearch = activeSearchId
+    ? searchesHook.searches.find((s) => s.id === activeSearchId)
+    : null;
+
+  const counts = {
+    all: allJobs.length,
+    interested: allJobs.filter((j) => j.state === 'interested').length,
+    applied: allJobs.filter((j) => j.state === 'applied').length,
+    maybe: allJobs.filter((j) => j.state === 'maybe').length,
+    passed: allJobs.filter((j) => j.state === 'not_interested').length,
+  };
+
+  const toastEl = toast ? h(Toast, { toast }) : null;
+
+  // ── Layout ──────────────────────────────────────────
+
+  const header = h(Header, {
+    tab,
+    tabs: TABS,
+    tabLabels: TAB_LABELS,
+    counts,
+    filters: activeFilters,
+    searchName: activeSearch?.name || null,
+    appliedQuery,
+  });
+
+  const statusBar = h(StatusBar, {
+    view: inlineSearch ? 'search' : view,
+    jobCount: jobs.length,
+    totalCount: allJobs.length,
+    loading,
+    reranking,
+    error,
+    aiEnabled: ai.hasKey,
+    searchName: activeSearch?.name || null,
+    toast: toastEl,
+  });
+
+  // Split-pane: compact list on left, detail on right
+  if (view === 'detail' && selectedJob) {
+    return h(
+      Box,
+      { flexDirection: 'column', height: process.stdout.rows || 40 },
+      header,
+      h(
+        Box,
+        { flexGrow: 1, flexDirection: 'row' },
+        // Left pane: compact job list
+        h(
+          Box,
+          {
+            flexDirection: 'column',
+            width: '40%',
+            borderStyle: 'single',
+            borderColor: 'gray',
+            borderRight: true,
+            borderLeft: false,
+            borderTop: false,
+            borderBottom: false,
+          },
+          h(JobList, {
+            jobs,
+            cursor,
+            tab,
+            onCursorChange: setCursor,
+            onSelect: handleSelect,
+            onMark: handleMark,
+            isActive: true,
+            compact: true,
+            reservedRows: 8,
+          })
+        ),
+        // Right pane: job detail
+        h(
+          Box,
+          { flexDirection: 'column', width: '60%' },
+          h(JobDetail, {
+            job: selectedJob,
+            api,
+            onBack: handleBack,
+            onMark: handleMark,
+            onAISummary: handleAISummary,
+            isActive: false,
+            isPanel: true,
+          })
+        )
+      ),
+      statusBar
+    );
+  }
+
+  // Full-width list view
+  return h(
+    Box,
+    { flexDirection: 'column', height: process.stdout.rows || 40 },
+    header,
+    view === 'list'
+      ? h(JobList, {
+          jobs,
+          cursor,
+          tab,
+          onCursorChange: setCursor,
+          onSelect: handleSelect,
+          onMark: handleMark,
+          onAISummary: handleAISummary,
+          onAIBatch: handleAIBatch,
+          onExport: handleExport,
+          isActive: !inlineSearch,
+          reservedRows: 10,
+        })
+      : null,
+    view === 'list' && inlineSearch
+      ? h(InlineSearch, {
+          query: searchQuery,
+          onChange: setSearchQuery,
+          onSubmit: () => {
+            setAppliedQuery(searchQuery);
+            setInlineSearch(false);
+            setCursor(0);
+          },
+        })
+      : null,
+    view === 'filters'
+      ? h(FilterManager, {
+          filterState,
+          onUpdate: persistFilters,
+          onClose: () => setView('list'),
+        })
+      : null,
+    view === 'searches'
+      ? h(SearchManager, {
+          searches: searchesHook.searches,
+          activeSearchId,
+          onSwitch: handleSwitchSearch,
+          onCreate: handleCreateSearch,
+          onDelete: handleDeleteSearch,
+          onClose: () => setView('list'),
+        })
+      : null,
+    view === 'ai'
+      ? h(AIPanel, {
+          text: ai.text,
+          loading: ai.loading,
+          error: ai.error,
+          onDismiss: () => {
+            ai.clear();
+            setView(selectedJob ? 'detail' : 'list');
+          },
+          isActive: true,
+        })
+      : null,
+    view === 'help' ? h(HelpModal, { onClose: () => setView('list') }) : null,
+    statusBar
+  );
+}
+
+export default function runTUI({ baseUrl, apiKey }) {
+  render(h(App, { baseUrl, apiKey }));
+}

package/src/tui/FilterManager.js

@@ -0,0 +1,263 @@
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { h } from './h.js';
+
+const FILTER_TYPES = [
+  { type: 'remote', label: 'Remote only', hasValue: false },
+  {
+    type: 'search',
+    label: 'Keyword search',
+    hasValue: true,
+    placeholder: 'e.g. react, python',
+  },
+  {
+    type: 'minSalary',
+    label: 'Minimum salary ($k)',
+    hasValue: true,
+    placeholder: 'e.g. 150',
+  },
+  {
+    type: 'days',
+    label: 'Posted within (days)',
+    hasValue: true,
+    placeholder: 'e.g. 14',
+  },
+];
+
+export default function FilterManager({ filterState, onUpdate, onClose }) {
+  const [mode, setMode] = useState('list'); // list | add | edit
+  const [cursor, setCursor] = useState(0);
+  const [addCursor, setAddCursor] = useState(0);
+  const [editValue, setEditValue] = useState('');
+  const [editIdx, setEditIdx] = useState(-1);
+
+  const active = filterState.active || [];
+
+  useInput(
+    (input, key) => {
+      if (mode === 'list') {
+        if (key.escape) {
+          onClose();
+          return;
+        }
+        if (key.upArrow || input === 'k') setCursor((c) => Math.max(0, c - 1));
+        if (key.downArrow || input === 'j')
+          setCursor((c) => Math.min(active.length - 1, c + 1));
+        if (input === 'a') {
+          setMode('add');
+          setAddCursor(0);
+          return;
+        }
+        if (input === 'd' && active[cursor]) {
+          const next = [...active];
+          next.splice(cursor, 1);
+          onUpdate({ ...filterState, active: next });
+          setCursor((c) => Math.min(c, next.length - 1));
+          return;
+        }
+        if (key.return && active[cursor]?.hasValue !== false) {
+          setEditIdx(cursor);
+          setEditValue(String(active[cursor]?.value || ''));
+          setMode('edit');
+        }
+      }
+
+      if (mode === 'add') {
+        if (key.escape) {
+          setMode('list');
+          return;
+        }
+        if (key.upArrow) setAddCursor((c) => Math.max(0, c - 1));
+        if (key.downArrow)
+          setAddCursor((c) => Math.min(FILTER_TYPES.length - 1, c + 1));
+        if (key.return) {
+          const ft = FILTER_TYPES[addCursor];
+          if (!ft.hasValue) {
+            // Toggle filter (e.g. remote)
+            const exists = active.findIndex((f) => f.type === ft.type);
+            if (exists >= 0) {
+              const next = [...active];
+              next.splice(exists, 1);
+              onUpdate({ ...filterState, active: next });
+            } else {
+              onUpdate({
+                ...filterState,
+                active: [...active, { type: ft.type, value: true }],
+              });
+            }
+            setMode('list');
+          } else {
+            setEditIdx(-1);
+            setEditValue('');
+            setMode('editNew');
+          }
+        }
+      }
+    },
+    { isActive: mode === 'list' || mode === 'add' }
+  );
+
+  // Edit mode for existing filter
+  if (mode === 'edit') {
+    const filter = active[editIdx];
+    return h(
+      Box,
+      {
+        flexDirection: 'column',
+        borderStyle: 'double',
+        borderColor: 'yellow',
+        padding: 1,
+        marginX: 2,
+      },
+      h(Text, { bold: true, color: 'yellow' }, `Edit: ${filter.type}`),
+      h(
+        Box,
+        { marginTop: 1 },
+        h(Text, null, 'Value: '),
+        h(TextInput, {
+          value: editValue,
+          onChange: setEditValue,
+          onSubmit: (val) => {
+            const next = [...active];
+            next[editIdx] = {
+              ...next[editIdx],
+              value:
+                filter.type === 'minSalary' || filter.type === 'days'
+                  ? parseInt(val) || val
+                  : val,
+            };
+            onUpdate({ ...filterState, active: next });
+            setMode('list');
+          },
+        })
+      ),
+      h(
+        Text,
+        { dimColor: true, marginTop: 1 },
+        'Enter to save, Ctrl+C to cancel'
+      )
+    );
+  }
+
+  // Edit mode for new filter
+  if (mode === 'editNew') {
+    const ft = FILTER_TYPES[addCursor];
+    return h(
+      Box,
+      {
+        flexDirection: 'column',
+        borderStyle: 'double',
+        borderColor: 'green',
+        padding: 1,
+        marginX: 2,
+      },
+      h(Text, { bold: true, color: 'green' }, `New filter: ${ft.label}`),
+      h(
+        Box,
+        { marginTop: 1 },
+        h(Text, null, 'Value: '),
+        h(TextInput, {
+          value: editValue,
+          placeholder: ft.placeholder || '',
+          onChange: setEditValue,
+          onSubmit: (val) => {
+            if (val.trim()) {
+              const value =
+                ft.type === 'minSalary' || ft.type === 'days'
+                  ? parseInt(val) || val
+                  : val;
+              onUpdate({
+                ...filterState,
+                active: [...active, { type: ft.type, value, hasValue: true }],
+              });
+            }
+            setMode('list');
+          },
+        })
+      ),
+      h(
+        Text,
+        { dimColor: true, marginTop: 1 },
+        `${ft.placeholder || ''}  Enter to save`
+      )
+    );
+  }
+
+  // Add mode - pick filter type
+  if (mode === 'add') {
+    return h(
+      Box,
+      {
+        flexDirection: 'column',
+        borderStyle: 'double',
+        borderColor: 'green',
+        padding: 1,
+        marginX: 2,
+      },
+      h(Text, { bold: true, color: 'green' }, 'Add Filter'),
+      h(Text, null, ''),
+      ...FILTER_TYPES.map((ft, i) => {
+        const selected = i === addCursor;
+        const isActive = active.some((f) => f.type === ft.type);
+        return h(
+          Box,
+          { key: ft.type },
+          h(
+            Text,
+            {
+              inverse: selected,
+              color: isActive ? 'green' : selected ? 'white' : undefined,
+            },
+            `${selected ? '▸ ' : '  '}${ft.label}${isActive ? ' ✓' : ''}`
+          )
+        );
+      }),
+      h(Text, { dimColor: true, marginTop: 1 }, 'enter:select  esc:back')
+    );
+  }
+
+  // List mode - show active filters
+  return h(
+    Box,
+    {
+      flexDirection: 'column',
+      borderStyle: 'double',
+      borderColor: 'yellow',
+      padding: 1,
+      marginX: 2,
+    },
+    h(Text, { bold: true, color: 'yellow' }, '⚙  Filter Manager'),
+    h(Text, null, ''),
+    active.length === 0
+      ? h(Text, { dimColor: true }, 'No active filters. Press a to add one.')
+      : null,
+    ...active.map((f, i) => {
+      const selected = i === cursor;
+      const label =
+        f.type === 'remote'
+          ? 'Remote only'
+          : f.type === 'search'
+          ? `Search: "${f.value}"`
+          : f.type === 'minSalary'
+          ? `Salary ≥ $${f.value}k`
+          : f.type === 'days'
+          ? `Posted within ${f.value} days`
+          : `${f.type}: ${f.value}`;
+      return h(
+        Box,
+        { key: i },
+        h(
+          Text,
+          {
+            inverse: selected,
+            color: selected ? 'white' : 'yellow',
+          },
+          `${selected ? '▸ ' : '  '}${label}`
+        )
+      );
+    }),
+    h(Text, null, ''),
+    h(Text, { dimColor: true }, 'a:add  d:delete  enter:edit  esc:close')
+  );
+}