@jsonresume/jobs 0.7.0

package/src/tui/Header.js

@@ -0,0 +1,87 @@
+import { Box, Text } from 'ink';
+import { h } from './h.js';
+
+const FILTER_LABELS = {
+  remote: (f) => `Remote: ${f.value}`,
+  search: (f) => `Search: "${f.value}"`,
+  minSalary: (f) => `Salary ≥ $${f.value}k`,
+  days: (f) => `Last ${f.value} days`,
+};
+
+export default function Header({
+  tab,
+  tabs,
+  tabLabels,
+  counts,
+  filters,
+  searchName,
+  appliedQuery,
+}) {
+  const tabElements = tabs.map((t) => {
+    const active = t === tab;
+    const count = counts[t] || 0;
+    const label = `${tabLabels[t]} (${count})`;
+    return h(
+      Box,
+      { key: t, marginRight: 1 },
+      h(
+        Text,
+        {
+          bold: active,
+          color: active ? 'cyan' : 'gray',
+          underline: active,
+        },
+        ` ${label} `
+      )
+    );
+  });
+
+  const filterTags = (filters || []).map((f, i) => {
+    const label = FILTER_LABELS[f.type]?.(f) || `${f.type}: ${f.value}`;
+    return h(Text, { key: i, color: 'yellow' }, ` [${label}] `);
+  });
+
+  const hasFilters = filterTags.length > 0 || appliedQuery;
+
+  return h(
+    Box,
+    { flexDirection: 'column', marginBottom: 0 },
+    h(
+      Box,
+      {
+        paddingX: 1,
+        borderStyle: 'single',
+        borderColor: 'cyan',
+        borderBottom: false,
+      },
+      h(Text, { bold: true, color: 'cyan' }, '⚡ '),
+      h(Text, { bold: true, color: 'white' }, 'JSON Resume Job Search'),
+      searchName ? h(Text, { color: 'magenta' }, `  🔍 ${searchName}`) : null,
+      h(Text, { color: 'gray' }, '  '),
+      h(Text, { dimColor: true }, 'tab:sections  /:searches  ?:help')
+    ),
+    h(Box, { paddingX: 1, gap: 0 }, ...tabElements),
+    hasFilters
+      ? h(
+          Box,
+          { paddingX: 1 },
+          filterTags.length > 0
+            ? h(Text, { dimColor: true }, 'Filters:')
+            : null,
+          ...filterTags,
+          appliedQuery
+            ? h(Text, { color: 'yellow' }, ` [Find: "${appliedQuery}"] `)
+            : null,
+          h(Text, { dimColor: true }, '  f:manage')
+        )
+      : h(
+          Box,
+          { paddingX: 1 },
+          h(
+            Text,
+            { dimColor: true },
+            'No filters active  f:add  n:quick search'
+          )
+        )
+  );
+}

package/src/tui/HelpModal.js

@@ -0,0 +1,94 @@
+import { Box, Text, useInput } from 'ink';
+import { h } from './h.js';
+
+const SECTIONS = [
+  {
+    title: 'Navigation',
+    keys: [
+      ['j / ↓', 'Move down'],
+      ['k / ↑', 'Move up'],
+      ['Enter', 'Open job details'],
+      ['Esc / q', 'Back / quit'],
+      ['Tab', 'Next section tab'],
+      ['Shift+Tab', 'Previous section tab'],
+    ],
+  },
+  {
+    title: 'Job Actions',
+    keys: [
+      ['i', 'Mark interested'],
+      ['x', 'Mark applied'],
+      ['m', 'Mark maybe'],
+      ['p', 'Mark passed'],
+    ],
+  },
+  {
+    title: 'Search & Filter',
+    keys: [
+      ['/', 'Search profiles'],
+      ['f', 'Manage filters'],
+      ['R', 'Force refresh'],
+    ],
+  },
+  {
+    title: 'AI Features',
+    keys: [
+      ['Space', 'AI summary of job'],
+      ['S', 'AI batch review'],
+    ],
+  },
+  {
+    title: 'Detail View',
+    keys: [
+      ['o', 'Open HN post in browser'],
+      ['e', 'Export shortlist to markdown'],
+    ],
+  },
+];
+
+export default function HelpModal({ onClose }) {
+  useInput((input, key) => {
+    if (key.escape || input === '?' || input === 'q') onClose();
+  });
+
+  const cols = process.stdout.columns || 80;
+  const width = Math.min(60, cols - 4);
+
+  return h(
+    Box,
+    {
+      flexDirection: 'column',
+      borderStyle: 'round',
+      borderColor: 'cyan',
+      paddingX: 2,
+      paddingY: 1,
+      width,
+      alignSelf: 'center',
+    },
+    h(
+      Box,
+      { justifyContent: 'center', marginBottom: 1 },
+      h(Text, { bold: true, color: 'cyan' }, '⌨  Keyboard Shortcuts')
+    ),
+    ...SECTIONS.flatMap((section) => [
+      h(
+        Box,
+        { key: `h-${section.title}`, marginTop: 1 },
+        h(Text, { bold: true, color: 'yellow' }, section.title)
+      ),
+      ...section.keys.map(([key, desc]) =>
+        h(
+          Box,
+          { key: `k-${key}` },
+          h(Box, { width: 16 }, h(Text, { color: 'cyan', bold: true }, key)),
+          h(Text, { dimColor: true }, desc)
+        )
+      ),
+    ]),
+    h(
+      Box,
+      { marginTop: 1, justifyContent: 'center' },
+      h(Text, { dimColor: true }, 'Press ? or Esc to close')
+    )
+  );
+}

package/src/tui/JobDetail.js

@@ -0,0 +1,170 @@
+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';
+
+export default function JobDetail({
+  job,
+  api,
+  onBack,
+  onMark,
+  onAISummary,
+  isActive,
+  isPanel,
+}) {
+  const [detail, setDetail] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [scroll, setScroll] = useState(0);
+
+  useEffect(() => {
+    setLoading(true);
+    setScroll(0);
+    api
+      .fetchJobDetail(job.id)
+      .then((d) => {
+        setDetail(d);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [job.id, api]);
+
+  useInput(
+    (input, key) => {
+      if (!isPanel) {
+        if (key.escape || input === 'q') {
+          onBack();
+          return;
+        }
+      }
+      if (key.upArrow || input === 'K') setScroll((s) => Math.max(0, s - 1));
+      if (key.downArrow || input === 'J') setScroll((s) => s + 1);
+      if (input === 'i') onMark(job.id, 'interested');
+      if (input === 'x') onMark(job.id, 'applied');
+      if (input === 'm') onMark(job.id, 'maybe');
+      if (input === 'p') onMark(job.id, 'not_interested');
+      if (input === ' ') onAISummary(job);
+      if (input === 'o' && (detail?.url || job.url)) {
+        import('child_process').then(({ exec }) => {
+          const url = detail?.url || job.url;
+          const cmd = process.platform === 'darwin' ? 'open' : 'xdg-open';
+          exec(`${cmd} "${url}"`);
+        });
+      }
+    },
+    { isActive }
+  );
+
+  if (loading) {
+    return h(
+      Box,
+      { flexDirection: 'column', paddingX: 2, paddingY: 1 },
+      h(Box, null, h(Spinner, { type: 'dots' }), h(Text, null, ' Loading…'))
+    );
+  }
+
+  const d = detail || job;
+  const state = d.state || job.state;
+  const loc = formatLocation(d.location, d.remote);
+  const sal = formatSalary(d.salary, d.salary_usd);
+
+  const lines = [];
+
+  // Title
+  lines.push({ text: d.title || job.title, bold: true, color: 'white' });
+  lines.push({ text: `at ${d.company || job.company}`, color: 'cyan' });
+  lines.push({ text: '' });
+
+  // Meta as key-value pairs
+  const meta = [
+    ['📍 Location', loc],
+    ['💰 Salary', sal],
+    ['📋 Type', d.type || '—'],
+    ['📊 Experience', d.experience || '—'],
+    ['📅 Posted', d.posted_at || '—'],
+    [
+      '🎯 Match',
+      typeof d.similarity === 'number' ? `${d.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']);
+
+  for (const [label, value] of meta) {
+    lines.push({ text: `  ${label.padEnd(14)} ${value}` });
+  }
+  lines.push({ text: '' });
+
+  if (d.url || job.url) {
+    lines.push({ text: `  🔗 ${d.url || job.url}`, color: 'blue' });
+    lines.push({ text: '' });
+  }
+
+  // Skills
+  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}` });
+    lines.push({ text: '' });
+  }
+
+  // Description
+  if (d.description) {
+    lines.push({ text: 'Description', bold: true, color: 'yellow' });
+    for (const l of d.description.split('\n')) {
+      lines.push({ text: `  ${l}` });
+    }
+    lines.push({ text: '' });
+  }
+
+  // Qualifications
+  if (d.qualifications?.length) {
+    lines.push({ text: 'Qualifications', bold: true, color: 'yellow' });
+    for (const q of d.qualifications) {
+      lines.push({ text: `  • ${q}` });
+    }
+    lines.push({ text: '' });
+  }
+
+  // Responsibilities
+  if (d.responsibilities?.length) {
+    lines.push({ text: 'Responsibilities', bold: true, color: 'yellow' });
+    for (const r of d.responsibilities) {
+      lines.push({ text: `  • ${r}` });
+    }
+    lines.push({ text: '' });
+  }
+
+  const maxRows = Math.max((process.stdout.rows || 30) - (isPanel ? 6 : 8), 8);
+  const visible = lines.slice(scroll, scroll + maxRows);
+  const hasMore = lines.length > maxRows;
+
+  return h(
+    Box,
+    { flexDirection: 'column', paddingX: 2, paddingY: isPanel ? 0 : 1 },
+    ...visible.map((line, i) =>
+      h(
+        Text,
+        {
+          key: i,
+          wrap: 'wrap',
+          bold: line.bold || false,
+          color: line.color || undefined,
+          dimColor: line.dimColor || false,
+        },
+        line.text
+      )
+    ),
+    hasMore
+      ? h(
+          Text,
+          { dimColor: true },
+          `  J/K scroll detail (${scroll + 1}–${Math.min(
+            scroll + maxRows,
+            lines.length
+          )}/${lines.length})`
+        )
+      : null
+  );
+}