fraim-framework 2.0.122 → 2.0.124

package/public/ai-hub/script.js

@@ -0,0 +1,374 @@
+const state = {
+  bootstrap: null,
+  selectedJobId: null,
+  selectedEmployeeId: null,
+  selectedCategoryId: null,
+  activeRunId: null,
+  pollHandle: null,
+  autoMessage: '',
+};
+
+const elements = {
+  employeePicker: document.getElementById('employee-picker'),
+  categoryPicker: document.getElementById('category-picker'),
+  jobList: document.getElementById('job-list'),
+  selectedJobTitle: document.getElementById('selected-job-title'),
+  selectedJobIntent: document.getElementById('selected-job-intent'),
+  selectedJobOutcomes: document.getElementById('selected-job-outcomes'),
+  startJob: document.getElementById('start-job'),
+  conversationTitle: document.getElementById('conversation-title'),
+  conversationState: document.getElementById('conversation-state'),
+  timeline: document.getElementById('timeline'),
+  managerTemplates: document.getElementById('manager-templates'),
+  managerMessage: document.getElementById('manager-message'),
+  sendCoaching: document.getElementById('send-coaching'),
+  rawHistory: document.getElementById('raw-history'),
+  projectPathInput: document.getElementById('project-path-input'),
+  projectPathPreview: document.getElementById('project-path-preview'),
+  projectStatus: document.getElementById('project-status'),
+  browseProject: document.getElementById('browse-project'),
+  reloadProject: document.getElementById('reload-project'),
+  messageTemplate: document.getElementById('timeline-message-template'),
+};
+
+async function requestJson(url, options) {
+  const response = await fetch(url, options);
+  const payload = await response.json();
+  if (!response.ok) {
+    throw new Error(payload.error || 'Request failed.');
+  }
+  return payload;
+}
+
+function formatTimestamp(value) {
+  try {
+    return new Date(value).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+function humanMessageRole(role) {
+  if (role === 'manager') return 'Manager';
+  if (role === 'employee') return 'Employee';
+  return 'System';
+}
+
+function selectedJob() {
+  return state.bootstrap?.jobs.find((job) => job.id === state.selectedJobId) || null;
+}
+
+function renderEmployees() {
+  elements.employeePicker.innerHTML = '';
+  for (const employee of state.bootstrap.employees) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `employee-chip${state.selectedEmployeeId === employee.id ? ' active' : ''}${employee.available ? '' : ' unavailable'}`;
+    button.textContent = employee.label;
+    button.title = employee.detail;
+    button.disabled = !employee.available;
+    button.addEventListener('click', () => {
+      state.selectedEmployeeId = employee.id;
+      render();
+    });
+    elements.employeePicker.appendChild(button);
+  }
+}
+
+function renderCategories() {
+  elements.categoryPicker.innerHTML = '';
+  for (const category of state.bootstrap.categories) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `category-chip${state.selectedCategoryId === category.id ? ' active' : ''}`;
+    button.textContent = category.label;
+    button.addEventListener('click', () => {
+      state.selectedCategoryId = category.id;
+      const firstJob = filteredJobs()[0];
+      state.selectedJobId = firstJob ? firstJob.id : null;
+      primeMessage();
+      render();
+    });
+    elements.categoryPicker.appendChild(button);
+  }
+}
+
+function filteredJobs() {
+  return state.bootstrap.jobs.filter((job) => job.categoryId === state.selectedCategoryId);
+}
+
+function renderJobList() {
+  elements.jobList.innerHTML = '';
+  const jobs = filteredJobs();
+  if (jobs.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'card selected-job';
+    empty.innerHTML = '<p class="muted">No FRAIM jobs were found for this category in the selected project path.</p>';
+    elements.jobList.appendChild(empty);
+    return;
+  }
+
+  for (const job of jobs) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = state.selectedJobId === job.id ? 'active' : '';
+    button.innerHTML = `<div class="job-title">${job.title}</div><div class="job-intent">${job.intent}</div>`;
+    button.addEventListener('click', () => {
+      state.selectedJobId = job.id;
+      primeMessage();
+      render();
+    });
+    elements.jobList.appendChild(button);
+  }
+}
+
+function renderSelectedJob() {
+  const job = selectedJob();
+  if (!job) {
+    elements.selectedJobTitle.textContent = 'Select a job';
+    elements.selectedJobIntent.textContent = 'Choose a Marketing or GTM job to frame the employee conversation.';
+    elements.selectedJobOutcomes.innerHTML = '';
+    elements.startJob.disabled = true;
+    return;
+  }
+
+  elements.selectedJobTitle.textContent = job.title;
+  elements.selectedJobIntent.textContent = job.intent;
+  elements.selectedJobOutcomes.innerHTML = '';
+  for (const outcome of job.outcome.slice(0, 3)) {
+    const item = document.createElement('li');
+    item.textContent = outcome;
+    elements.selectedJobOutcomes.appendChild(item);
+  }
+
+  elements.startJob.disabled = !state.selectedEmployeeId || !elements.managerMessage.value.trim();
+}
+
+function renderTemplates() {
+  elements.managerTemplates.innerHTML = '';
+  for (const template of state.bootstrap.managerTemplates) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'template-chip';
+    button.textContent = template.title;
+    button.title = template.intent;
+    button.addEventListener('click', () => {
+      insertTemplate(template.id);
+    });
+    elements.managerTemplates.appendChild(button);
+  }
+}
+
+function renderProjectStatus() {
+  elements.projectPathInput.value = state.bootstrap.project.path;
+  const preview = state.bootstrap.project.path.split(/[\\/]/).filter(Boolean).slice(-2).join('/');
+  elements.projectPathPreview.textContent = preview || 'Choose a folder';
+  elements.projectStatus.textContent = state.bootstrap.project.message || 'FRAIM jobs are loading from this project path.';
+}
+
+function renderRun(run) {
+  elements.timeline.innerHTML = '';
+  const messages = run ? run.messages : [];
+
+  if (messages.length === 0) {
+    const empty = document.createElement('article');
+    empty.className = 'message system';
+    empty.innerHTML = '<div class="message-meta"><span class="message-role">System</span></div><p class="message-text">This conversation will show only meaningful manager and employee messages.</p>';
+    elements.timeline.appendChild(empty);
+  }
+
+  for (const message of messages) {
+    const fragment = elements.messageTemplate.content.cloneNode(true);
+    const article = fragment.querySelector('.message');
+    article.classList.add(message.role);
+    fragment.querySelector('.message-role').textContent = humanMessageRole(message.role);
+    fragment.querySelector('.message-time').textContent = formatTimestamp(message.createdAt);
+    fragment.querySelector('.message-text').textContent = message.text;
+    elements.timeline.appendChild(fragment);
+  }
+
+  elements.timeline.scrollTop = elements.timeline.scrollHeight;
+  elements.rawHistory.innerHTML = '';
+
+  if (run) {
+    for (const event of run.events) {
+      const row = document.createElement('div');
+      row.className = 'micro-row';
+      row.textContent = `[${event.channel}] ${event.text}`;
+      elements.rawHistory.appendChild(row);
+    }
+  }
+
+  const job = selectedJob();
+  elements.conversationTitle.textContent = job ? job.title : 'No active job';
+  if (!run) {
+    elements.conversationState.textContent = 'Select a job and coach your employee toward your desired outcome.';
+  } else if (run.status === 'running') {
+    elements.conversationState.textContent = `${humanEmployeeLabel(run.hostId)} is working in ${run.projectPath}.`;
+  } else if (run.status === 'completed') {
+    elements.conversationState.textContent = `${humanEmployeeLabel(run.hostId)} finished the latest turn.`;
+  } else {
+    elements.conversationState.textContent = `${humanEmployeeLabel(run.hostId)} needs attention before the next turn.`;
+  }
+
+  elements.sendCoaching.disabled = !(run && run.sessionId && elements.managerMessage.value.trim());
+}
+
+function humanEmployeeLabel(employeeId) {
+  return state.bootstrap.employees.find((employee) => employee.id === employeeId)?.label || employeeId;
+}
+
+function primeMessage() {
+  const job = selectedJob();
+  if (!job) return;
+
+  const nextAutoMessage = `Use FRAIM job "${job.id}".`;
+  const current = elements.managerMessage.value.trim();
+  if (!current || current === state.autoMessage.trim()) {
+    elements.managerMessage.value = nextAutoMessage;
+    state.autoMessage = nextAutoMessage;
+  }
+}
+
+function insertTemplate(jobId) {
+  const fragment = `Use FRAIM job "${jobId}".`;
+  const current = elements.managerMessage.value.trim();
+  const nextValue = current ? `${current}\n${fragment}` : fragment;
+  elements.managerMessage.value = nextValue;
+  render();
+}
+
+async function loadBootstrap(projectPath) {
+  const query = projectPath ? `?projectPath=${encodeURIComponent(projectPath)}` : '';
+  state.bootstrap = await requestJson(`/api/ai-hub/bootstrap${query}`);
+  state.selectedEmployeeId = state.selectedEmployeeId || state.bootstrap.preferences.employeeId;
+  state.selectedCategoryId = state.selectedCategoryId || state.bootstrap.preferences.categoryId;
+
+  const availableJobs = filteredJobs();
+  if (!state.selectedJobId || !availableJobs.some((job) => job.id === state.selectedJobId)) {
+    const recent = state.bootstrap.preferences.recentJobIds.find((jobId) => availableJobs.some((job) => job.id === jobId));
+    state.selectedJobId = recent || (availableJobs[0] ? availableJobs[0].id : null);
+  }
+
+  state.activeRunId = state.bootstrap.activeRun ? state.bootstrap.activeRun.id : state.activeRunId;
+  render();
+  primeMessage();
+  render();
+}
+
+function render() {
+  if (!state.bootstrap) return;
+  renderEmployees();
+  renderCategories();
+  renderJobList();
+  renderSelectedJob();
+  renderTemplates();
+  renderProjectStatus();
+
+  const run = state.bootstrap.activeRun && state.activeRunId === state.bootstrap.activeRun.id
+    ? state.bootstrap.activeRun
+    : null;
+  renderRun(run);
+}
+
+async function startRun() {
+  const job = selectedJob();
+  if (!job) return;
+
+  const payload = await requestJson('/api/ai-hub/runs', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      projectPath: elements.projectPathInput.value,
+      hostId: state.selectedEmployeeId,
+      jobId: job.id,
+      message: elements.managerMessage.value,
+    }),
+  });
+
+  state.bootstrap.activeRun = payload;
+  state.activeRunId = payload.id;
+  startPolling();
+  render();
+}
+
+async function sendCoaching() {
+  if (!state.activeRunId) return;
+
+  const payload = await requestJson(`/api/ai-hub/runs/${state.activeRunId}/messages`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message: elements.managerMessage.value }),
+  });
+
+  state.bootstrap.activeRun = payload;
+  startPolling();
+  render();
+}
+
+function startPolling() {
+  if (state.pollHandle) window.clearInterval(state.pollHandle);
+  state.pollHandle = window.setInterval(async () => {
+    if (!state.activeRunId) return;
+    try {
+      const run = await requestJson(`/api/ai-hub/runs/${state.activeRunId}`);
+      state.bootstrap.activeRun = run;
+      render();
+      if (run.status !== 'running') {
+        window.clearInterval(state.pollHandle);
+        state.pollHandle = null;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, 1000);
+}
+
+async function chooseProjectFolder() {
+  const response = await fetch('/api/ai-hub/project-path/pick', { method: 'POST' });
+  if (response.status === 204) {
+    return;
+  }
+  const payload = await response.json();
+  if (!response.ok) {
+    throw new Error(payload.error || 'Could not choose a project folder.');
+  }
+  if (payload.path) {
+    elements.projectPathInput.value = payload.path;
+  }
+}
+
+elements.startJob.addEventListener('click', async () => {
+  try {
+    await startRun();
+  } catch (error) {
+    elements.projectStatus.textContent = error.message;
+  }
+});
+
+elements.sendCoaching.addEventListener('click', async () => {
+  try {
+    await sendCoaching();
+  } catch (error) {
+    elements.projectStatus.textContent = error.message;
+  }
+});
+
+elements.managerMessage.addEventListener('input', () => render());
+elements.reloadProject.addEventListener('click', async () => {
+  try {
+    await loadBootstrap(elements.projectPathInput.value);
+  } catch (error) {
+    elements.projectStatus.textContent = error.message;
+  }
+});
+
+elements.browseProject.addEventListener('click', async () => {
+  try {
+    await chooseProjectFolder();
+  } catch (error) {
+    console.error(error);
+  }
+});
+
+loadBootstrap();