careermate 0.0.8 → 0.0.9

package/dist/public/pages/applications.js

@@ -1,19 +1,16 @@
 // Applications — every application grouped by status in a calm VERTICAL list
 // (no horizontal scroll). Change a status inline to move an item between groups.
 import {
-  el, get, put, navigate, EmptyState, Btn, ListRow, Badge,
-  Select, scoreClass, statusColor, mount, toast, toastOk, toastError,
+  el, get, put, navigate, EmptyState, Btn, ListRow, Badge, Card,
+  Select, scoreClass, statusColor, mount, toast, toastOk, toastError, todayLocalISO, daysUntil,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
-// deadline(YYYY-MM-DD) → "Due in 7d" / "Due today" / "Overdue" (null if absent/invalid)
+// deadline(YYYY-MM-DD) → "Due in 7d" / "Due today" / "Overdue" (null if absent/invalid).
+// daysUntil shares the server's local-midnight rule (core daysUntilDate).
 function ddayLabel(deadline) {
-  if (!deadline) return null;
-  const d = new Date(`${deadline}T00:00:00`);
-  if (isNaN(d.getTime())) return null;
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const days = Math.round((d.getTime() - today.getTime()) / 86400000);
+  const days = daysUntil(deadline);
+  if (days == null) return null;
   if (days > 0) return t('applications.dday.future', { n: days });
   if (days === 0) return t('applications.dday.today');
   return t('applications.dday.past');
@@ -21,9 +18,10 @@ function ddayLabel(deadline) {
 
 export async function render(ctx) {
   ctx.setActions([]);
-  const data = await get('/api/applications');
+  const [data, offersRes] = await Promise.all([get('/api/applications'), get('/api/offers')]);
   const applications = data.applications || [];
   const boardOrder = data.board_order || [];
+  const offers = (offersRes && offersRes.offers) || [];
 
   if (!applications.length) {
     mount(ctx.view, el('div', { class: 'stack-4' }, EmptyState({
@@ -43,6 +41,7 @@ export async function render(ctx) {
   for (const app of applications) (byStatus[app.status] || (byStatus[app.status] = [])).push(app);
 
   const wrap = el('div', { class: 'stack-4' });
+  if (offers.length) wrap.append(OffersSection(offers));
   for (const code of boardOrder) {
     const apps = byStatus[code];
     if (apps && apps.length) wrap.append(StatusGroup(code, apps));
@@ -63,6 +62,10 @@ export async function render(ctx) {
     const subBits = [job.position, job.location].filter(Boolean);
     const dday = ddayLabel(job.deadline);
     if (dday) subBits.push(dday);
+    // 탈락 회고: 불합격이고 단계가 기록돼 있으면 어느 단계에서 떨어졌는지 sub에 가볍게 병기.
+    if (app.status === 'rejected' && app.rejected_stage) {
+      subBits.push(`${t('applications.rejectedStage.label')} ${t('applications.rejectedStage.' + app.rejected_stage)}`);
+    }
     const sel = Select(
       statusOptions.map((o) => ({ ...o, selected: o.value === app.status })),
       {
@@ -112,3 +115,76 @@ export async function render(ctx) {
     }
   }
 }
+
+// Offers — sorted by the AI's score (server pre-sorts). The score + verdict were
+// written by the connected AI at save time, so this renders without any LLM. The
+// precise head-to-head comparison happens in the AI chat via compare_offers.
+//
+// Lifecycle-aware: only OPEN offers deserve the top of the pipeline (they carry
+// accept deadlines — the most time-sensitive decision in the whole search).
+// Accepted/declined offers are kept as career records (terms history feeds the
+// next negotiation) but demoted to a collapsed "past offers" line.
+function OffersSection(offers) {
+  const status = (o) => o.offer_status || 'open';
+  const active = offers.filter((o) => status(o) === 'open');
+  const past = offers.filter((o) => status(o) !== 'open');
+  const children = [];
+  if (active.length) {
+    children.push(
+      el('div', { class: 'app-group__head' },
+        el('span', { class: 'app-group__title' }, t('applications.offers.title')),
+        el('span', { class: 'app-group__count tnum' }, t('applications.group.count', { count: active.length }))),
+      ...active.map(OfferCard),
+    );
+  }
+  if (past.length) children.push(PastOffers(past));
+  return el('div', { class: 'stack-3' }, ...children);
+}
+
+function OfferCard(o) {
+  const meta = [];
+  if (o.total_comp_annual_est != null)
+    meta.push(`${t('applications.offers.est')} ${o.total_comp_annual_est.toLocaleString()}${t('applications.offers.unit')}`);
+  if (o.work_arrangement) meta.push(o.work_arrangement);
+  if (o.accept_deadline) meta.push(t('applications.offers.acceptBy', { date: o.accept_deadline }));
+  const score = o.ai_score != null
+    ? el('span', { class: `strong tnum ${scoreClass(o.ai_score)}` }, String(o.ai_score))
+    : el('span', { class: 'muted' }, t('applications.offers.noScore'));
+  // Deadline passed on a still-open offer: flag it, never auto-hide — deadlines
+  // get extended in negotiation, so the call is the user's (or the AI's), not ours.
+  const expired = !!o.accept_deadline && o.accept_deadline < todayLocalISO();
+  const actions = expired
+    ? el('span', { class: 'flex gap-2', style: { alignItems: 'center' } },
+        Badge('on_hold', t('applications.offers.expired')), score)
+    : score;
+  return Card({
+    title: o.company,
+    sub: meta.join(' · '),
+    actions,
+    body: o.verdict ? el('p', { class: 'muted', style: { marginTop: '6px' } }, o.verdict) : null,
+    clickable: true,
+    onClick: () => navigate(`/jobs/${o.job_id}`),
+  });
+}
+
+// Accepted/declined offers, one compact row each inside a collapsed disclosure.
+function PastOffers(past) {
+  const rows = past.map((o) =>
+    el('div', { class: 'flex gap-2', style: { alignItems: 'center', padding: '8px 0' } },
+      Badge(o.offer_status === 'accepted' ? 'final_passed' : 'rejected',
+        t(`applications.offers.status.${o.offer_status}`)),
+      el('span', {
+        class: 'strong',
+        style: { cursor: 'pointer' },
+        activate: () => navigate(`/jobs/${o.job_id}`),
+      }, o.company),
+      o.total_comp_annual_est != null
+        ? el('span', { class: 'muted text-sm' },
+            `${t('applications.offers.est')} ${o.total_comp_annual_est.toLocaleString()}${t('applications.offers.unit')}`)
+        : null,
+    ));
+  return el('details', {},
+    el('summary', { class: 'muted text-sm', style: { cursor: 'pointer' } },
+      t('applications.offers.past', { count: past.length })),
+    ...rows);
+}

package/dist/public/pages/documents.js

@@ -21,19 +21,28 @@ export async function render(ctx) {
   const root = el('div', { class: 'stack-4' });
 
   const panel = el('div', {});
-  const tabCover = el('div', { class: `tab${tab === 'cover' ? ' is-active' : ''}`, onClick: () => selectTab('cover') }, t('documents.tab.cover'));
-  const tabCareer = el('div', { class: `tab${tab === 'career' ? ' is-active' : ''}`, onClick: () => selectTab('career') }, t('documents.tab.career'));
-  const tabDocs = el('div', { class: `tab${tab === 'docs' ? ' is-active' : ''}`, onClick: () => selectTab('docs') }, t('documents.tab.docs'));
-  root.append(el('div', { class: 'tabs' }, tabCover, tabCareer, tabDocs), panel);
+  // Tabs are keyboard-operable (activate = role/tabindex/Enter·Space), with tab
+  // semantics for AT — role은 attrs가 먼저 tab으로 지정하므로 activate의 button 기본값을 덮지 않는다.
+  const makeTab = (key, label) =>
+    el('div', {
+      class: `tab${tab === key ? ' is-active' : ''}`,
+      attrs: { role: 'tab', 'aria-selected': String(tab === key) },
+      activate: () => selectTab(key),
+    }, label);
+  const tabCover = makeTab('cover', t('documents.tab.cover'));
+  const tabCareer = makeTab('career', t('documents.tab.career'));
+  const tabDocs = makeTab('docs', t('documents.tab.docs'));
+  root.append(el('div', { class: 'tabs', attrs: { role: 'tablist' } }, tabCover, tabCareer, tabDocs), panel);
 
   let query = '';
   let searchInput = null;
   function selectTab(next) {
     tab = next;
     query = '';
-    tabCover.classList.toggle('is-active', tab === 'cover');
-    tabCareer.classList.toggle('is-active', tab === 'career');
-    tabDocs.classList.toggle('is-active', tab === 'docs');
+    for (const [node, key] of [[tabCover, 'cover'], [tabCareer, 'career'], [tabDocs, 'docs']]) {
+      node.classList.toggle('is-active', tab === key);
+      node.setAttribute('aria-selected', String(tab === key));
+    }
     setActions();
     renderPanel();
   }

package/dist/public/pages/home.js

@@ -6,6 +6,7 @@
 import {
   el, get, icon, navigate, Card, Badge, Btn, ListRow, CheckRow,
   Stat, PageHead, fmtDate, fmtRelative, scoreClass, STATUS_COLOR, statusColor, mount,
+  scheduleDdayBadge,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -215,6 +216,17 @@ function ActionLane(s) {
       onClick: () => navigate(`/jobs/${it.job.id}`),
     }));
   }
+  // Hiring-schedule stages (면접·인적성·발표) sit right after interview prep and before
+  // deadlines: they're the most time-bound "be there on this date" items.
+  for (const it of s.upcoming_schedule || []) {
+    push(it.job.id, ListRow({
+      leading: statusDot('interview'),
+      title: it.job.company,
+      sub: it.time ? `${it.label} · ${it.time}` : it.label,
+      trailing: scheduleDdayBadge(it.d_day),
+      onClick: () => navigate(`/jobs/${it.job.id}`),
+    }));
+  }
   for (const it of s.deadlines || []) {
     push(it.job.id, ListRow({
       leading: statusDot(it.status),

package/dist/public/pages/interview.js

@@ -146,12 +146,19 @@ export async function render(ctx) {
       mount(panel, list.length
         ? el('div', { class: 'stack-3' }, ...list.map(QuestionBlock))
         : el('p', { class: 'muted', style: { margin: 0 } }, t('interview.modal.questionsEmptyTab')));
-      for (const c of CATEGORIES) tabEls[c].classList.toggle('is-active', c === active);
+      for (const c of CATEGORIES) {
+        tabEls[c].classList.toggle('is-active', c === active);
+        tabEls[c].setAttribute('aria-selected', String(c === active));
+      }
     }
-    const tabs = el('div', { class: 'tabs' }, ...CATEGORIES.map((c) => {
+    // 키보드 조작 가능 탭(activate = role/tabindex/Enter·Space) + 탭 시맨틱.
+    const tabs = el('div', { class: 'tabs', attrs: { role: 'tablist' } }, ...CATEGORIES.map((c) => {
       const n = groups[c].length;
-      const tabEl = el('div', { class: 'tab', onClick: () => { active = c; draw(); } },
-        n ? `${t('interview.tab.' + c)} (${n})` : t('interview.tab.' + c));
+      const tabEl = el('div', {
+        class: 'tab',
+        attrs: { role: 'tab', 'aria-selected': 'false' },
+        activate: () => { active = c; draw(); },
+      }, n ? `${t('interview.tab.' + c)} (${n})` : t('interview.tab.' + c));
       tabEls[c] = tabEl;
       return tabEl;
     }));

package/dist/public/pages/jobs.js

@@ -6,7 +6,7 @@ import {
   el, get, post, put, del, icon, navigate, Card, Badge, Btn, SubmitBtn,
   EmptyState, Chips, Field, Input, Textarea, Select,
   openModal, closeModal, confirmDialog, toastOk, toastError,
-  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray,
+  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray, daysUntil, scheduleDdayBadge,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -340,6 +340,7 @@ async function renderDetail(ctx, jobId) {
       CoverLettersCard(job.cover_letters),
       InterviewCard(job)),
     PostingCard(job),
+    CompanyResearchCard(job),
     FitCard(job.fit),
     TimelineCard(job.timeline),
     RelatedCard(job.related),
@@ -372,6 +373,41 @@ function PostingCard(job) {
         ...job.requirements.map((r) => el('li', {}, r)))));
   }
 
+  if (job.questions && job.questions.length) {
+    // 한국 문항형 자소서: 회사 지정 문항·글자수 한도. AI가 문항별 답변을 쓰고 한도를
+    // 점검할 원본이자, 사용자가 대시보드에서 요구 문항을 그대로 볼 수 있게 한다.
+    body.push(el('div', { class: 'mt-3' },
+      el('div', { class: 'muted text-sm mb-2' }, t('jobs.questions.title')),
+      el('ol', { class: 'stack-2', style: { margin: 0, paddingLeft: '18px' } },
+        ...job.questions.map((q) => {
+          const label = questionLimitLabel(q);
+          return el('li', {},
+            el('span', {}, q.question),
+            label ? el('span', { class: 'muted text-sm', style: { marginLeft: '8px' } }, label) : null);
+        }))));
+  }
+
+  if (job.schedule && job.schedule.length) {
+    // 전형 일정: 면접·인적성·발표 등 단계별 날짜. 날짜순으로 D-day 라벨과 함께 보여주고,
+    // 이미 지난 일정은 흐리게 처리한다(v9 문항 블록과 같은 위치·스타일 패턴).
+    const sorted = job.schedule.slice().sort((a, b) => {
+      if (a.date !== b.date) return a.date < b.date ? -1 : 1;
+      return (a.time || '99:99').localeCompare(b.time || '99:99');
+    });
+    body.push(el('div', { class: 'mt-3' },
+      el('div', { class: 'muted text-sm mb-2' }, t('jobs.schedule.title')),
+      el('ul', { class: 'stack-2', style: { margin: 0, padding: 0, listStyle: 'none' } },
+        ...sorted.map((s) => {
+          const dDay = daysUntil(s.date);
+          const when = s.time ? `${fmtDate(s.date)} ${s.time}` : fmtDate(s.date);
+          return el('li', { class: `flex gap-2 center${dDay != null && dDay < 0 ? ' muted' : ''}` },
+            scheduleDdayBadge(dDay),
+            el('span', { class: 'strong' }, s.label),
+            el('span', { class: 'text-sm' }, when),
+            s.note ? el('span', { class: 'muted text-sm' }, s.note) : null);
+        }))));
+  }
+
   if (job.description) {
     // 원문은 가장 길어 칼럼을 늘리는 주범 — 기본 접힘(아코디언)으로 둔다.
     body.push(el('details', { class: 'disclosure mt-3' },
@@ -384,6 +420,40 @@ function PostingCard(job) {
   return Card({ title: t('jobs.posting.title'), body });
 }
 
+// 문항 글자수 한도 라벨(예: "최대 700자(공백포함)"). 한도가 없으면 null.
+// count_mode: with_space=공백포함 · no_space=공백제외 · byte=UTF-8 바이트(공백 구분 없음).
+function questionLimitLabel(q) {
+  const hasMin = typeof q.min_chars === 'number';
+  const hasMax = typeof q.max_chars === 'number';
+  if (!hasMin && !hasMax) return null;
+  const unit = q.count_mode === 'byte' ? t('jobs.questions.unitByte') : t('jobs.questions.unitChar');
+  const suffix = q.count_mode === 'no_space' ? t('jobs.questions.modeNoSpace')
+    : q.count_mode === 'with_space' ? t('jobs.questions.modeWithSpace')
+    : '';
+  const parts = [];
+  if (hasMin) parts.push(t('jobs.questions.min', { n: q.min_chars, unit }));
+  if (hasMax) parts.push(t('jobs.questions.max', { n: q.max_chars, unit }));
+  return `${parts.join(' · ')}${suffix}`;
+}
+
+// Company research the AI saved (overview·인재상·핵심가치·평판) — rendered so the
+// user can actually SEE it in the dashboard, not just have the AI use it.
+function CompanyResearchCard(job) {
+  const hasValues = job.core_values && job.core_values.length;
+  if (!job.company_overview && !job.talent_profile && !hasValues && !job.reputation) return null;
+  const field = (labelKey, value) => el('div', { class: 'mt-3' },
+    el('div', { class: 'muted text-sm mb-2' }, t(labelKey)),
+    el('p', { style: { margin: 0, whiteSpace: 'pre-wrap' } }, value));
+  const body = [];
+  if (job.company_overview) body.push(field('jobs.company.overview', job.company_overview));
+  if (job.talent_profile) body.push(field('jobs.company.talent', job.talent_profile));
+  if (hasValues) body.push(el('div', { class: 'mt-3' },
+    el('div', { class: 'muted text-sm mb-2' }, t('jobs.company.values')),
+    Chips(job.core_values, { accent: true })));
+  if (job.reputation) body.push(field('jobs.company.reputation', job.reputation));
+  return Card({ title: t('jobs.company.title'), body });
+}
+
 function FitCard(fit) {
   if (!fit) {
     return Card({

package/dist/public/pages/settings.js

@@ -168,7 +168,6 @@ function Theme() {
 /* ------------------------------------------------------------- 언어 / Language */
 function LanguageSwitcher() {
   // 테마 컴포넌트와 동일 패턴: localStorage 영속 + paint() + 변경 시 재페인트.
-  // 카탈로그가 채워지는 Phase 2부터 페이지 텍스트가 실제로 전환된다.
   const options = [
     { value: 'ko', label: '한국어' },
     { value: 'en', label: 'English' },
@@ -188,8 +187,9 @@ function LanguageSwitcher() {
   onLangChange(paint);
 
   return Card({
+    // 제목은 의도적으로 양언어 병기 — 현재 언어를 못 읽는 사용자도 이 카드를 찾아야 한다.
     title: '언어 / Language',
-    sub: '대시보드 표시 언어',
+    sub: t('settings.lang.sub'),
     body: row,
   });
 }

package/dist/public/styles.css

@@ -577,3 +577,16 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
   .card__head .right{ margin-left: 0; width: 100%; justify-content: flex-start; }
   .page-head{ flex-wrap: wrap; }
 }
+
+/* ---------- reduced motion ----------
+   전정기관 민감 사용자를 위해 OS 설정을 존중한다: 모달·토스트·오프캔버스의
+   등장 애니메이션과 hover 트랜지션을 사실상 즉시(0.01ms)로 줄인다.
+   (스켈레톤 shimmer 포함 — 반복 애니메이션이 가장 부담이 크다.) */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}