FM / public

/home/techb158/trellopowerup.abdallabala.com/public/

/home/techb158/trellopowerup.abdallabala.com/public

Name	Size	Mode	Actions
assets/	-	0755	rm
.htaccess	533	0644	edit dl rm
admin.php	33110	0644	edit dl rm
authorize.html	1009	0644	edit dl rm
board-dashboard.html	2962	0644	edit dl rm
board-dashboard.js	13719	0644	edit dl rm
card-section.html	533	0644	edit dl rm
card-section.js	6142	0644	edit dl rm
client-utils.js	1591	0644	edit dl rm
index.html	557	0644	edit dl rm
index.php	7140	0644	edit dl rm
powerup.js	4185	0644	edit dl rm
risk-modal.html	6815	0644	edit dl rm
risk-modal.js	20746	0644	edit dl rm
settings.html	2500	0644	edit dl rm
settings.js	1670	0644	edit dl rm
styles.css	4034	0644	edit dl rm

Edit: /home/techb158/trellopowerup.abdallabala.com/public/card-section.js (6142B)

import { apiFetch, escapeHtml, powerUpOptions, statusClass } from './client-utils.js';

const t = window.TrelloPowerUp.iframe(powerUpOptions());
const content = document.getElementById('content');

function formatDate(value) {
  if (!value) return 'Unknown date';
  return new Intl.DateTimeFormat(undefined, {
    dateStyle: 'medium',
    timeStyle: 'short'
  }).format(new Date(value));
}

function formatMeta(value) {
  return String(value || 'not set').replaceAll('_', ' ');
}

function trendClass(assessment) {
  return assessment?.trend === 'improved' ? 'trend-down' : assessment?.trend === 'worse' ? 'trend-up' : '';
}

function assessmentRiskTitle(assessment) {
  return assessment?.score?.highestRisk?.title || assessment?.input?.risks?.[0]?.title || 'Untitled risk';
}

function assessmentMeta(assessment) {
  return [
    `Typology: ${formatMeta(assessment?.input?.projectTypology)}`,
    `Phase: ${formatMeta(assessment?.input?.lifecyclePhase)}`,
    `Maturity: ${formatMeta(assessment?.input?.measurementMaturity)}`
  ].join(' | ');
}

function renderHistory(assessments, expanded = false) {
  if (!assessments?.length) return '';

const visibleAssessments = expanded ? assessments : assessments.slice(0, 5);
  const hiddenCount = Math.max(assessments.length - visibleAssessments.length, 0);

return `
    <div class="history-header row">
      <h4>Assessment history</h4>
      <span class="muted small">${assessments.length} saved ${assessments.length === 1 ? 'entry' : 'entries'}</span>
    </div>
    <div class="timeline">
      ${visibleAssessments.map((assessment, index) => {
        const score = assessment.score || {};
        const blockers = score.gate?.blockingReasons || [];
        return `
          <div class="timeline-item">
            <div class="row timeline-summary">
              <strong>${index === 0 ? 'Latest' : formatDate(assessment.createdAt)}</strong>
              <span class="badge ${statusClass(score.status)}">${escapeHtml(score.status)} ${escapeHtml(score.score)}/100</span>
              <span class="badge ${score.gate?.deploymentReady ? 'low' : 'critical'}">${score.gate?.deploymentReady ? 'Gate ready' : 'Gate blocked'}</span>
              <span class="badge ${trendClass(assessment)}">${escapeHtml(trendText(assessment))}</span>
            </div>
            <p class="history-title">${escapeHtml(assessmentRiskTitle(assessment))}</p>
            <p class="muted small">${escapeHtml(index === 0 ? formatDate(assessment.createdAt) : assessmentMeta(assessment))}</p>
            ${index === 0 ? `<p class="muted small">${escapeHtml(assessmentMeta(assessment))}</p>` : ''}
            ${blockers.length ? `<p class="warning-text small">Blocked by: ${escapeHtml(blockers.slice(0, 2).join('; '))}${blockers.length > 2 ? '...' : ''}</p>` : ''}
          </div>
        `;
      }).join('')}
    </div>
    ${assessments.length > 5 ? `<button id="toggle-history" type="button" class="secondary" data-expanded="${expanded}">${expanded ? 'Show recent only' : `Show ${hiddenCount} older ${hiddenCount === 1 ? 'entry' : 'entries'}`}</button>` : ''}
  `;
}

document.getElementById('toggle-history')?.addEventListener('click', () => {
    renderRisk(risk, assessments, !expandedHistory);
    t.sizeTo('#content');
  });
}

async function load() {
  const risk = await t.get('card', 'shared', 'cosmicRisk');
  const card = await t.card('id');
  const assessments = risk ? await apiFetch(t, `/api/cards/${card.id}/assessments`).catch(() => []) : [];
  if (!risk) renderEmpty();
  else renderRisk(risk, assessments);
  t.sizeTo('#content');
}

t.render(load);

import { apiFetch, escapeHtml, powerUpOptions, statusClass } from './client-utils.js'; const t = window.TrelloPowerUp.iframe(powerUpOptions()); const content = document.getElementById('content'); function renderEmpty() { content.innerHTML = `

No risk assessment yet

Use the Assess AI Risk button to calculate a COSMIC risk score for this card.

`; document.getElementById('assess').addEventListener('click', () => { t.modal({ title: 'COSMIC Risk Assessment', url: './risk-modal.html', height: 720 }); }); } function formatDate(value) { if (!value) return 'Unknown date'; return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value)); } function formatMeta(value) { return String(value || 'not set').replaceAll('_', ' '); } function trendText(assessment) { if (!assessment || assessment.scoreDelta === null || assessment.scoreDelta === undefined) return 'First assessment'; if (assessment.scoreDelta > 0) return `Worse by ${assessment.scoreDelta}`; if (assessment.scoreDelta < 0) return `Improved by ${Math.abs(assessment.scoreDelta)}`; return 'No change'; } function trendClass(assessment) { return assessment?.trend === 'improved' ? 'trend-down' : assessment?.trend === 'worse' ? 'trend-up' : ''; } function assessmentRiskTitle(assessment) { return assessment?.score?.highestRisk?.title || assessment?.input?.risks?.[0]?.title || 'Untitled risk'; } function assessmentMeta(assessment) { return [ `Typology: ${formatMeta(assessment?.input?.projectTypology)}`, `Phase: ${formatMeta(assessment?.input?.lifecyclePhase)}`, `Maturity: ${formatMeta(assessment?.input?.measurementMaturity)}` ].join(' | '); } function renderHistory(assessments, expanded = false) { if (!assessments?.length) return ''; const visibleAssessments = expanded ? assessments : assessments.slice(0, 5); const hiddenCount = Math.max(assessments.length - visibleAssessments.length, 0); return `

Assessment history

${assessments.length} saved ${assessments.length === 1 ? 'entry' : 'entries'}

${visibleAssessments.map((assessment, index) => { const score = assessment.score || {}; const blockers = score.gate?.blockingReasons || []; return `

${index === 0 ? 'Latest' : formatDate(assessment.createdAt)} ${escapeHtml(score.status)} ${escapeHtml(score.score)}/100 ${score.gate?.deploymentReady ? 'Gate ready' : 'Gate blocked'} ${escapeHtml(trendText(assessment))}

${escapeHtml(assessmentRiskTitle(assessment))}

${escapeHtml(index === 0 ? formatDate(assessment.createdAt) : assessmentMeta(assessment))}

${index === 0 ? `

${escapeHtml(assessmentMeta(assessment))}

` : ''} ${blockers.length ? `

Blocked by: ${escapeHtml(blockers.slice(0, 2).join('; '))}${blockers.length > 2 ? '...' : ''}

` : ''}

`; }).join('')}

${assessments.length > 5 ? `` : ''} `; } function renderRisk(risk, assessments = [], expandedHistory = false) { const highest = risk.highestRisk; const reasons = risk.gate?.blockingReasons || []; const latest = assessments[0]; content.innerHTML = `

${risk.score}

${escapeHtml(risk.status)} ${risk.gate?.deploymentReady ? 'Deployment ready' : 'Deployment blocked'} ${latest ? `${escapeHtml(trendText(latest))}` : ''} ${latest?.review?.needed ? 'Review needed' : ''}

${escapeHtml(risk.interpretation)}

${highest ? `

Highest risk: ${escapeHtml(highest.title)}
Dimension: ${escapeHtml(highest.dimension)}. Residual score: ${Math.round(highest.residualScore)}.

` : ''} ${latest?.review?.needed ? `

Review: ${escapeHtml((latest.review.reasons || []).join('; '))}

` : ''} ${latest?.review?.actions?.length ? `

Next action: ${escapeHtml(latest.review.actions.join('; '))}

` : ''} ${reasons.length ? `

Blocking criteria

${escapeHtml(reason)}

` : ''} ${renderHistory(assessments, expandedHistory)}

`; document.getElementById('edit-risk').addEventListener('click', () => { t.modal({ title: 'COSMIC Risk Assessment', url: './risk-modal.html', height: 720 }); }); document.getElementById('toggle-history')?.addEventListener('click', () => { renderRisk(risk, assessments, !expandedHistory); t.sizeTo('#content'); }); } async function load() { const risk = await t.get('card', 'shared', 'cosmicRisk'); const card = await t.card('id'); const assessments = risk ? await apiFetch(t, `/api/cards/${card.id}/assessments`).catch(() => []) : []; if (!risk) renderEmpty(); else renderRisk(risk, assessments); t.sizeTo('#content'); } t.render(load);