@jsonresume/jobs 0.14.0 → 0.14.2

package/src/tui/App.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { render, Box, Text, useInput, useApp } from 'ink';
-import TextInput from 'ink-text-input';
+import { render, Box, useInput, useApp } from 'ink';
 import { h } from './h.js';
 import { createApiClient } from '../api.js';
 import {
@@ -23,35 +22,15 @@ import SearchManager from './SearchManager.js';
 import StatusBar from './StatusBar.js';
 import AIPanel from './AIPanel.js';
 import HelpModal from './HelpModal.js';
-
-const TABS = [
-  'all',
-  'new',
-  'reviewed',
-  'interested',
-  'applied',
-  'maybe',
-  'passed',
-];
-const TAB_LABELS = {
-  all: 'All',
-  new: 'New',
-  reviewed: 'Reviewed',
-  interested: 'Interested',
-  applied: 'Applied',
-  maybe: 'Maybe',
-  passed: 'Passed',
-};
-
-function InlineSearch({ query, onChange, onSubmit }) {
-  return h(
-    Box,
-    { paddingX: 1, gap: 1 },
-    h(Text, { color: 'yellow', bold: true }, 'Find:'),
-    h(TextInput, { value: query, onChange, onSubmit }),
-    h(Text, { dimColor: true }, '  Enter to apply, Esc to clear')
-  );
-}
+import { InlineSearch, SplitPane } from './SplitPane.js';
+import {
+  TABS,
+  TAB_LABELS,
+  nextTab,
+  filterJobsByQuery,
+  computeCounts,
+} from './jobFilters.js';
+import { createAppKeyHandler } from './appKeyHandler.js';
 
 function App({ baseUrl, apiKey, apiClient }) {
   const { exit } = useApp();
@@ -151,22 +130,10 @@ function App({ baseUrl, apiKey, apiClient }) {
   }, [ai]);
 
   // Apply inline search filter
-  const jobs = useMemo(() => {
-    if (!appliedQuery) return rawJobs;
-    const q = appliedQuery.toLowerCase();
-    return rawJobs.filter((j) => {
-      const fields = [
-        j.title,
-        j.company,
-        j.description,
-        j.remote,
-        j.location?.city,
-        j.location?.countryCode,
-        ...(j.skills || []).map((s) => s.name || s),
-      ];
-      return fields.some((f) => f && String(f).toLowerCase().includes(q));
-    });
-  }, [rawJobs, appliedQuery]);
+  const jobs = useMemo(
+    () => filterJobsByQuery(rawJobs, appliedQuery),
+    [rawJobs, appliedQuery]
+  );
 
   useEffect(() => {
     api
@@ -182,82 +149,6 @@ function App({ baseUrl, apiKey, apiClient }) {
     }
   }, [cursor, view, jobs]);
 
-  // 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') {
-        if (ai.hasActiveProcess && !confirmExit) {
-          showToast(
-            'Claude dossier still running — press q again to quit',
-            'warning'
-          );
-          setConfirmExit(true);
-          return;
-        }
-        ai.cancel();
-        exit();
-      }
-      if (input !== 'q') setConfirmExit(false);
-      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 (input === 'c' && view === 'detail' && selectedJob) {
-        handleDossier(selectedJob);
-      }
-
-      if (key.escape && view === 'ai') {
-        // Don't kill running dossier — just hide the panel
-        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');
@@ -313,28 +204,50 @@ function App({ baseUrl, apiKey, apiClient }) {
     setCursor(0);
   };
 
+  // Inline search escape handler
+  useInput(
+    (input, key) => {
+      if (key.escape) {
+        setInlineSearch(false);
+        setSearchQuery('');
+        setAppliedQuery('');
+      }
+    },
+    { isActive: inlineSearch }
+  );
+
+  // Main input handler
+  useInput(
+    createAppKeyHandler({
+      view,
+      tab,
+      jobs,
+      cursor,
+      selectedJob,
+      inlineSearch,
+      confirmExit,
+      ai,
+      exit,
+      forceRefresh,
+      showToast,
+      setView,
+      setTab,
+      setCursor,
+      setSelectedJob,
+      setInlineSearch,
+      setSearchQuery,
+      setConfirmExit,
+      handleDossier,
+      nextTab,
+    }),
+    { isActive: view !== 'filters' && view !== 'searches' && view !== 'help' }
+  );
+
   const activeSearch = activeSearchId
     ? searchesHook.searches.find((s) => s.id === activeSearchId)
     : null;
 
-  const counts = {
-    all: allJobs.length,
-    new: allJobs.filter(
-      (j) =>
-        !j.state &&
-        !j.has_dossier &&
-        ai.getDossierStatus(j.id) !== 'done' &&
-        ai.getDossierStatus(j.id) !== 'generating'
-    ).length,
-    reviewed: allJobs.filter(
-      (j) => (j.has_dossier || ai.getDossierStatus(j.id) === 'done') && !j.state
-    ).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 counts = computeCounts(allJobs, ai.getDossierStatus);
   const toastEl = toast ? h(Toast, { toast }) : null;
 
   // ── Layout ──────────────────────────────────────────
@@ -360,130 +273,67 @@ function App({ baseUrl, apiKey, apiClient }) {
     toast: toastEl,
   });
 
+  // Shared left-pane list props for split-pane views.
+  const baseListProps = {
+    jobs,
+    cursor,
+    tab,
+    onCursorChange: setCursor,
+    onSelect: handleSelect,
+    onMark: handleMark,
+    onAISummary: handleAISummary,
+    onDossier: handleDossier,
+    getDossierStatus: ai.getDossierStatus,
+  };
+
   // Split-pane: compact list on left, detail on right
   if (view === 'detail' && selectedJob) {
-    return h(
-      Box,
-      { flexDirection: 'column', height: process.stdout.rows || 40 },
+    return h(SplitPane, {
       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,
-            onAISummary: handleAISummary,
-            onDossier: handleDossier,
-            getDossierStatus: ai.getDossierStatus,
-            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,
-            onDossier: handleDossier,
-            getDossierStatus: ai.getDossierStatus,
-            isActive: false,
-            isPanel: true,
-          })
-        )
-      ),
-      statusBar
-    );
+      statusBar,
+      listProps: { ...baseListProps, isActive: true },
+      right: h(JobDetail, {
+        job: selectedJob,
+        api,
+        onBack: handleBack,
+        onMark: handleMark,
+        onAISummary: handleAISummary,
+        onDossier: handleDossier,
+        getDossierStatus: ai.getDossierStatus,
+        isActive: false,
+        isPanel: true,
+      }),
+    });
   }
 
   // Split-pane: compact list on left, AI/dossier on right
   if (view === 'ai' && selectedJob) {
-    return h(
-      Box,
-      { flexDirection: 'column', height: process.stdout.rows || 40 },
+    return h(SplitPane, {
       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,
-            onAISummary: handleAISummary,
-            onDossier: handleDossier,
-            getDossierStatus: ai.getDossierStatus,
-            isActive: false,
-            compact: true,
-            reservedRows: 8,
-          })
-        ),
-        // Right pane: AI/dossier panel
-        h(
-          Box,
-          { flexDirection: 'column', width: '60%' },
-          h(AIPanel, {
-            text: ai.text,
-            loading: ai.loading,
-            error: ai.error,
-            mode: ai.mode,
-            job: selectedJob,
-            onMark: handleMark,
-            onDismiss: () => {
-              setView(selectedJob ? 'detail' : 'list');
-            },
-            onExport: () => {
-              const f = ai.exportDossier(selectedJob);
-              if (f) showToast(`Saved ./${f}`, 'export');
-              return f;
-            },
-            onRegenerate: (job) => {
-              ai.regenerateDossier(job, api);
-              showToast('Regenerating dossier…', 'info');
-            },
-            isActive: true,
-          })
-        )
-      ),
-      statusBar
-    );
+      statusBar,
+      listProps: { ...baseListProps, isActive: false },
+      right: h(AIPanel, {
+        text: ai.text,
+        loading: ai.loading,
+        error: ai.error,
+        mode: ai.mode,
+        job: selectedJob,
+        onMark: handleMark,
+        onDismiss: () => {
+          setView(selectedJob ? 'detail' : 'list');
+        },
+        onExport: () => {
+          const f = ai.exportDossier(selectedJob);
+          if (f) showToast(`Saved ./${f}`, 'export');
+          return f;
+        },
+        onRegenerate: (job) => {
+          ai.regenerateDossier(job, api);
+          showToast('Regenerating dossier…', 'info');
+        },
+        isActive: true,
+      }),
+    });
   }
 
   // Full-width list view
@@ -493,14 +343,7 @@ function App({ baseUrl, apiKey, apiClient }) {
     header,
     view === 'list'
       ? h(JobList, {
-          jobs,
-          cursor,
-          tab,
-          onCursorChange: setCursor,
-          onSelect: handleSelect,
-          onMark: handleMark,
-          onAISummary: handleAISummary,
-          onDossier: handleDossier,
+          ...baseListProps,
           onAIBatch: handleAIBatch,
           onExport: handleExport,
           isActive: !inlineSearch,

package/src/tui/JobDetail.js

@@ -2,7 +2,12 @@ import { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import Spinner from 'ink-spinner';
 import { h } from './h.js';
-import { stateIcon, formatSalary, formatLocation } from '../formatters.js';
+import {
+  stateIcon,
+  formatSalary,
+  formatLocation,
+  formatAge,
+} from '../formatters.js';
 
 export default function JobDetail({
   job,
@@ -79,17 +84,25 @@ export default function JobDetail({
   lines.push({ text: '' });
 
   // Meta as key-value pairs
+  const age = formatAge(d.posted_at || job.posted_at);
+  const postedStr = d.posted_at
+    ? `${d.posted_at.slice(0, 10)}${age ? ` (${age})` : ''}`
+    : '—';
+
   const meta = [
     ['📍 Location', loc],
     ['💰 Salary', sal],
     ['📋 Type', d.type || '—'],
     ['📊 Experience', d.experience || '—'],
-    ['📅 Posted', d.posted_at || '—'],
+    ['📅 Posted', postedStr],
     [
       '🎯 Match',
       typeof d.similarity === 'number' ? `${d.similarity.toFixed(3)}` : '—',
     ],
   ];
+  if (d.decayed_similarity && d.decayed_similarity !== d.similarity) {
+    meta.push(['⏳ Recency', d.decayed_similarity.toFixed(3)]);
+  }
   if (d.rerank_score) meta.push(['🧠 AI Score', `${d.rerank_score}/10`]);
   if (d.combined_score) meta.push(['📈 Combined', d.combined_score.toFixed(3)]);
   meta.push(['📌 Status', state ? `${stateIcon(state)} ${state}` : 'unmarked']);
@@ -104,11 +117,20 @@ export default function JobDetail({
     lines.push({ text: '' });
   }
 
-  // Skills
+  // Skills with match indicators
   if (d.skills?.length) {
     lines.push({ text: 'Skills', bold: true, color: 'yellow' });
     const skillNames = d.skills.map((s) => s.name || s).join('  ·  ');
     lines.push({ text: `  ${skillNames}` });
+    // Show keywords for each skill
+    for (const sk of d.skills) {
+      if (sk.keywords?.length) {
+        lines.push({
+          text: `    ${sk.name}: ${sk.keywords.join(', ')}`,
+          dimColor: true,
+        });
+      }
+    }
     lines.push({ text: '' });
   }
 

package/src/tui/JobList.js

@@ -6,6 +6,7 @@ import {
   truncate,
   formatSalary,
   formatLocation,
+  formatAge,
 } from '../formatters.js';
 
 // Column gap between each column
@@ -138,6 +139,7 @@ function JobRow({
   const sal = formatSalary(job.salary, job.salary_usd);
   const score =
     typeof job.similarity === 'number' ? job.similarity.toFixed(2) : '—';
+  const age = formatAge(job.posted_at);
   const icon = stateIcon(job.state);
   const dossierIcon =
     dossierStatus === 'generating' ? '◌' : dossierStatus === 'done' ? '📋' : '';
@@ -227,7 +229,7 @@ function JobRow({
     h(
       Box,
       { width: locW, marginRight: GAP },
-      h(Text, props, truncate(loc, locW - 1))
+      h(Text, props, truncate(age ? `${loc} · ${age}` : loc, locW - 1))
     ),
     h(Box, { width: 12, marginRight: GAP }, h(Text, props, truncate(sal, 11))),
     h(

package/src/tui/SplitPane.js

@@ -0,0 +1,58 @@
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { h } from './h.js';
+import JobList from './JobList.js';
+
+// Inline find-as-you-type bar shown under the list view.
+export function InlineSearch({ query, onChange, onSubmit }) {
+  return h(
+    Box,
+    { paddingX: 1, gap: 1 },
+    h(Text, { color: 'yellow', bold: true }, 'Find:'),
+    h(TextInput, { value: query, onChange, onSubmit }),
+    h(Text, { dimColor: true }, '  Enter to apply, Esc to clear')
+  );
+}
+
+// Compact job list used as the left pane of the split-pane views.
+function leftPane(listProps) {
+  return h(
+    Box,
+    {
+      flexDirection: 'column',
+      width: '40%',
+      borderStyle: 'single',
+      borderColor: 'gray',
+      borderRight: true,
+      borderLeft: false,
+      borderTop: false,
+      borderBottom: false,
+    },
+    h(JobList, { ...listProps, compact: true, reservedRows: 8 })
+  );
+}
+
+/**
+ * Two-column layout: compact job list on the left, an arbitrary right pane.
+ * Used by both the detail and AI/dossier views.
+ *
+ * @param {object} p
+ * @param {any} p.header        rendered header element
+ * @param {any} p.statusBar     rendered status bar element
+ * @param {object} p.listProps  props forwarded to the left-pane JobList
+ * @param {any} p.right         rendered right-pane element
+ */
+export function SplitPane({ header, statusBar, listProps, right }) {
+  return h(
+    Box,
+    { flexDirection: 'column', height: process.stdout.rows || 40 },
+    header,
+    h(
+      Box,
+      { flexGrow: 1, flexDirection: 'row' },
+      leftPane(listProps),
+      h(Box, { flexDirection: 'column', width: '60%' }, right)
+    ),
+    statusBar
+  );
+}