Michael Chihlas
46291f30b9
Brings the locked FlowPilot migration design onto the branch that will implement it. Includes the annotated target UI mockups (primary session view + three Script Generator integration states) and the superseded FLOWPILOT-AND-RESOLUTIONASSIST.md for historical reference. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1321 lines
41 KiB
HTML
1321 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>FlowPilot — unified session</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Bricolage+Grotesque:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-0: #070b12;
|
|
--bg-1: #0d131c;
|
|
--bg-2: #121a25;
|
|
--bg-3: #1a2332;
|
|
--bg-4: #222d3f;
|
|
--bg-hover: #1f2a3a;
|
|
--border: rgba(148, 163, 184, 0.12);
|
|
--border-strong: rgba(148, 163, 184, 0.22);
|
|
--text-primary: #e2e8f0;
|
|
--text-secondary: #94a3b8;
|
|
--text-tertiary: #64748b;
|
|
--cyan-400: #22d3ee;
|
|
--cyan-500: #06b6d4;
|
|
--cyan-600: #0891b2;
|
|
--cyan-bg: rgba(34, 211, 238, 0.10);
|
|
--cyan-bg-strong: rgba(34, 211, 238, 0.18);
|
|
--cyan-border: rgba(34, 211, 238, 0.30);
|
|
--success: #34d399;
|
|
--success-bg: rgba(52, 211, 153, 0.12);
|
|
--success-border: rgba(52, 211, 153, 0.28);
|
|
--warning: #fbbf24;
|
|
--warning-bg: rgba(251, 191, 36, 0.10);
|
|
--warning-border: rgba(251, 191, 36, 0.25);
|
|
--danger: #f87171;
|
|
--danger-bg: rgba(248, 113, 113, 0.12);
|
|
--danger-border: rgba(248, 113, 113, 0.28);
|
|
--purple: #a78bfa;
|
|
--purple-bg: rgba(167, 139, 250, 0.12);
|
|
--purple-border: rgba(167, 139, 250, 0.30);
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body {
|
|
background: var(--bg-0);
|
|
color: var(--text-primary);
|
|
font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
body { min-height: 100vh; }
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: 64px 260px 1fr 380px;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ================ RAIL (icon-only left) ================ */
|
|
.rail {
|
|
background: var(--bg-1);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 14px 0;
|
|
gap: 4px;
|
|
}
|
|
.rail-brand {
|
|
width: 36px; height: 36px;
|
|
background: linear-gradient(135deg, var(--cyan-400), var(--cyan-600));
|
|
border-radius: 9px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: relative;
|
|
margin-bottom: 14px;
|
|
}
|
|
.rail-brand::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px; height: 12px;
|
|
background: var(--bg-1);
|
|
border-radius: 2.5px;
|
|
transform: rotate(45deg);
|
|
}
|
|
.rail-item {
|
|
width: 40px; height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
cursor: pointer;
|
|
color: var(--text-tertiary);
|
|
position: relative;
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
}
|
|
.rail-item:hover { background: var(--bg-hover); color: var(--text-secondary); }
|
|
.rail-item.active { color: var(--cyan-400); background: var(--cyan-bg); }
|
|
.rail-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; }
|
|
.rail-badge {
|
|
position: absolute;
|
|
top: 4px; right: 4px;
|
|
background: var(--cyan-500);
|
|
color: var(--bg-0);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
padding: 1px 4px;
|
|
border-radius: 8px;
|
|
min-width: 14px;
|
|
text-align: center;
|
|
}
|
|
.rail-spacer { flex: 1; }
|
|
.rail-avatar {
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #a78bfa, #6366f1);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
color: white;
|
|
}
|
|
|
|
/* ================ SESSION LIST ================ */
|
|
.session-list {
|
|
background: var(--bg-1);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.list-header {
|
|
padding: 14px 16px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.list-title {
|
|
font-family: 'Bricolage Grotesque', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
.new-btn {
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
background: var(--cyan-500);
|
|
color: #04181c;
|
|
border: none;
|
|
border-radius: 7px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
.new-btn:hover { background: var(--cyan-400); }
|
|
.list-scroll { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
|
|
.list-group-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
padding: 10px 8px 6px;
|
|
font-weight: 500;
|
|
}
|
|
.session-row {
|
|
padding: 9px 10px;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
margin-bottom: 2px;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
.session-row:hover { background: var(--bg-hover); }
|
|
.session-row.active {
|
|
background: var(--bg-3);
|
|
border-left-color: var(--cyan-400);
|
|
}
|
|
.session-row-title {
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.session-row-meta {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.state-dot {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.state-dot.active { background: var(--cyan-400); box-shadow: 0 0 0 3px var(--cyan-bg); }
|
|
.state-dot.resolved { background: var(--success); }
|
|
.state-dot.paused { background: var(--warning); }
|
|
.psa-mini {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
color: var(--cyan-400);
|
|
background: var(--cyan-bg);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ================ SESSION COLUMN ================ */
|
|
.session-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
background: var(--bg-0);
|
|
}
|
|
|
|
.incident-header {
|
|
padding: 16px 28px;
|
|
background: var(--bg-1);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.incident-info { flex: 1; min-width: 0; }
|
|
.incident-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.psa-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--cyan-bg);
|
|
color: var(--cyan-400);
|
|
padding: 3px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
.psa-chip::before {
|
|
content: '';
|
|
width: 5px; height: 5px;
|
|
background: var(--cyan-400);
|
|
border-radius: 50%;
|
|
}
|
|
.meta-text { font-size: 12px; color: var(--text-tertiary); }
|
|
.incident-title {
|
|
font-family: 'Bricolage Grotesque', sans-serif;
|
|
font-size: 19px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.header-actions { display: flex; align-items: center; gap: 6px; }
|
|
.btn {
|
|
padding: 7px 12px;
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
|
|
.btn-ghost { background: transparent; border-color: transparent; }
|
|
.btn-ghost:hover { background: var(--bg-2); }
|
|
.btn-primary {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
border-color: var(--success-border);
|
|
}
|
|
.btn-primary:hover { background: rgba(52, 211, 153, 0.20); border-color: var(--success); }
|
|
.btn-warn {
|
|
background: var(--warning-bg);
|
|
color: var(--warning);
|
|
border-color: var(--warning-border);
|
|
}
|
|
.btn-warn:hover { background: rgba(251, 191, 36, 0.18); border-color: var(--warning); }
|
|
.btn-icon { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; }
|
|
|
|
/* Conversation */
|
|
.conversation {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.msg {
|
|
display: flex;
|
|
gap: 12px;
|
|
max-width: 780px;
|
|
}
|
|
.msg.user { flex-direction: row-reverse; margin-left: auto; }
|
|
.msg-avatar {
|
|
width: 30px; height: 30px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.msg-avatar.pilot {
|
|
background: linear-gradient(135deg, var(--cyan-500), var(--cyan-600));
|
|
color: white;
|
|
}
|
|
.msg-avatar.user {
|
|
background: linear-gradient(135deg, #a78bfa, #6366f1);
|
|
color: white;
|
|
}
|
|
.msg-body { min-width: 0; flex: 1; }
|
|
.msg-meta {
|
|
font-size: 10.5px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
font-weight: 500;
|
|
}
|
|
.msg-bubble {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 13px 16px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
}
|
|
.msg.user .msg-bubble {
|
|
background: var(--cyan-bg-strong);
|
|
border-color: var(--cyan-border);
|
|
}
|
|
.mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
background: var(--bg-3);
|
|
padding: 2px 7px;
|
|
border-radius: 4px;
|
|
color: var(--cyan-400);
|
|
}
|
|
|
|
/* Composer */
|
|
.composer {
|
|
padding: 14px 28px 22px;
|
|
background: var(--bg-0);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.composer-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
}
|
|
.composer-inner:focus-within {
|
|
border-color: var(--cyan-border);
|
|
box-shadow: 0 0 0 3px var(--cyan-bg);
|
|
}
|
|
.composer input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--text-primary);
|
|
font-size: 13.5px;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
}
|
|
.composer input::placeholder { color: var(--text-tertiary); }
|
|
.composer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.composer-actions-left { display: flex; gap: 4px; flex: 1; }
|
|
.composer-chip {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11.5px;
|
|
font-family: inherit;
|
|
border-radius: 5px;
|
|
}
|
|
.composer-chip:hover { background: var(--bg-3); color: var(--text-primary); }
|
|
.composer-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; }
|
|
.send-btn {
|
|
background: var(--cyan-500);
|
|
color: var(--bg-0);
|
|
border: none;
|
|
width: 30px; height: 30px;
|
|
border-radius: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.send-btn:hover { background: var(--cyan-400); }
|
|
|
|
/* ================ TASK LANE ================ */
|
|
.task-lane {
|
|
background: var(--bg-1);
|
|
border-left: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.lane-header {
|
|
padding: 16px 20px 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.lane-title-wrap {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.lane-title {
|
|
font-family: 'Bricolage Grotesque', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
.lane-counter {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
.lane-collapse {
|
|
width: 26px; height: 26px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.lane-collapse:hover { background: var(--bg-3); color: var(--text-primary); }
|
|
.lane-collapse svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.75; }
|
|
|
|
.lane-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* What we know — the NEW section */
|
|
.know-section {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: linear-gradient(to bottom, rgba(52, 211, 153, 0.04), transparent);
|
|
}
|
|
.know-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.know-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--success);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.know-title svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
.know-count {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
.know-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.know-fact {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
padding: 9px 11px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 7px;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
position: relative;
|
|
}
|
|
.know-fact-check {
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
}
|
|
.know-fact-body { flex: 1; min-width: 0; }
|
|
.know-fact-text { color: var(--text-primary); }
|
|
.know-fact-source {
|
|
font-size: 10.5px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.know-fact-source svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
.source-q { color: var(--cyan-400); }
|
|
.source-check { color: var(--purple); }
|
|
.source-user { color: var(--warning); }
|
|
.know-add {
|
|
margin-top: 10px;
|
|
background: transparent;
|
|
border: 1px dashed var(--border-strong);
|
|
color: var(--text-tertiary);
|
|
padding: 7px 11px;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
.know-add:hover { border-color: var(--cyan-border); color: var(--cyan-400); background: var(--cyan-bg); }
|
|
|
|
/* Questions */
|
|
.lane-section {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.lane-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.lane-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
.lane-section-title.questions { color: var(--cyan-400); }
|
|
.lane-section-title.checks { color: var(--purple); }
|
|
.lane-section-title.suggested { color: var(--warning); }
|
|
.lane-section-title svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
.lane-section-count {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.q-card {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 11px 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.q-card.answered {
|
|
opacity: 0.55;
|
|
border-style: dashed;
|
|
}
|
|
.q-text {
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: var(--text-primary);
|
|
margin-bottom: 6px;
|
|
}
|
|
.q-hint {
|
|
font-size: 11.5px;
|
|
color: var(--text-tertiary);
|
|
line-height: 1.45;
|
|
margin-bottom: 10px;
|
|
}
|
|
.q-actions { display: flex; gap: 6px; }
|
|
.q-btn {
|
|
padding: 5px 11px;
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border: 1px solid;
|
|
}
|
|
.q-btn.answer {
|
|
background: var(--cyan-bg);
|
|
color: var(--cyan-400);
|
|
border-color: var(--cyan-border);
|
|
}
|
|
.q-btn.answer:hover { background: var(--cyan-bg-strong); }
|
|
.q-btn.skip {
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
border-color: var(--border);
|
|
}
|
|
.q-btn.skip:hover { background: var(--bg-3); color: var(--text-secondary); }
|
|
.q-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
|
|
.check-run-all {
|
|
padding: 8px 11px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--purple-border);
|
|
border-radius: 7px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
color: var(--purple);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
}
|
|
.check-run-all:hover { background: var(--purple-bg); }
|
|
.check-card {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.check-card.done {
|
|
opacity: 0.5;
|
|
border-style: dashed;
|
|
}
|
|
.check-title {
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.check-title svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; color: var(--purple); }
|
|
.check-desc {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.suggested-card {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--warning-border);
|
|
border-left: 3px solid var(--warning);
|
|
border-radius: 7px;
|
|
padding: 10px 12px;
|
|
}
|
|
.suggested-title {
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
margin-bottom: 3px;
|
|
}
|
|
.suggested-desc {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Resolve bar at bottom of task lane */
|
|
.resolve-bar {
|
|
padding: 14px 20px;
|
|
background: var(--bg-2);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.resolve-preview-hint {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.resolve-preview-hint svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
.resolve-full-btn {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
border: 1px solid var(--success-border);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.resolve-full-btn:hover {
|
|
background: rgba(52, 211, 153, 0.20);
|
|
border-color: var(--success);
|
|
}
|
|
.resolve-full-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
|
|
/* ============ SUMMARY PREVIEW MODAL (persistent, shown as popover anchored to resolve btn) ============ */
|
|
.summary-preview {
|
|
position: absolute;
|
|
right: 400px;
|
|
bottom: 14px;
|
|
width: 440px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border);
|
|
z-index: 10;
|
|
}
|
|
.summary-arrow {
|
|
position: absolute;
|
|
right: -7px;
|
|
bottom: 38px;
|
|
width: 14px; height: 14px;
|
|
background: var(--bg-2);
|
|
border-top: 1px solid var(--border-strong);
|
|
border-right: 1px solid var(--border-strong);
|
|
transform: rotate(45deg);
|
|
}
|
|
.summary-header {
|
|
padding: 14px 16px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.summary-eyebrow {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--success);
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.summary-eyebrow svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
.summary-title {
|
|
font-family: 'Bricolage Grotesque', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
.summary-target {
|
|
font-size: 11.5px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.summary-target .mono-inline {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: var(--cyan-400);
|
|
}
|
|
.summary-body {
|
|
padding: 14px 16px;
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
}
|
|
.summary-body strong { color: var(--text-primary); font-weight: 500; }
|
|
.summary-body-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
margin-top: 10px;
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
}
|
|
.summary-body-label:first-child { margin-top: 0; }
|
|
.summary-body ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 8px;
|
|
}
|
|
.summary-body li {
|
|
padding-left: 12px;
|
|
position: relative;
|
|
margin-bottom: 3px;
|
|
}
|
|
.summary-body li::before {
|
|
content: '·';
|
|
position: absolute;
|
|
left: 2px;
|
|
color: var(--success);
|
|
font-weight: 700;
|
|
}
|
|
.summary-footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.summary-footer .btn { font-size: 12px; padding: 6px 11px; flex: 1; justify-content: center; }
|
|
.footer-hint {
|
|
font-size: 10.5px;
|
|
color: var(--text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.footer-hint svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
|
|
.main-stage { position: relative; display: contents; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- ============ RAIL ============ -->
|
|
<aside class="rail">
|
|
<div class="rail-brand"></div>
|
|
<div class="rail-item active">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
|
<span>Pilot</span>
|
|
</div>
|
|
<div class="rail-item">
|
|
<svg viewBox="0 0 24 24"><path d="M9 11H1v10h8V11zM23 3H11v18h12V3z"/></svg>
|
|
<span>Tickets</span>
|
|
<span class="rail-badge">14</span>
|
|
</div>
|
|
<div class="rail-item">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
<span>Trees</span>
|
|
</div>
|
|
<div class="rail-item">
|
|
<svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
|
<span>Scripts</span>
|
|
</div>
|
|
<div class="rail-item">
|
|
<svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
<span>Wiki</span>
|
|
</div>
|
|
<div class="rail-spacer"></div>
|
|
<div class="rail-avatar">MD</div>
|
|
</aside>
|
|
|
|
<!-- ============ SESSION LIST ============ -->
|
|
<aside class="session-list">
|
|
<div class="list-header">
|
|
<div class="list-title">Sessions</div>
|
|
<button class="new-btn">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
|
New session
|
|
</button>
|
|
</div>
|
|
<div class="list-scroll">
|
|
<div class="list-group-label">Active</div>
|
|
|
|
<div class="session-row active">
|
|
<div class="session-row-title">Outlook not syncing after password reset</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot active"></span>
|
|
<span class="psa-mini">CW #48291</span>
|
|
<span>·</span>
|
|
<span>Acme Corp</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-row">
|
|
<div class="session-row-title">VPN disconnecting every few minutes</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot paused"></span>
|
|
<span class="psa-mini">CW #48307</span>
|
|
<span>·</span>
|
|
<span>paused</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-row">
|
|
<div class="session-row-title">SMB permissions — share access denied</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot active"></span>
|
|
<span class="psa-mini">CW #48302</span>
|
|
<span>·</span>
|
|
<span>Duncan & Partners</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-group-label">Recent</div>
|
|
|
|
<div class="session-row">
|
|
<div class="session-row-title">Printer driver reinstall — HR floor</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot resolved"></span>
|
|
<span class="psa-mini">CW #48276</span>
|
|
<span>·</span>
|
|
<span>resolved · 1h ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-row">
|
|
<div class="session-row-title">Exchange mail flow investigation</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot resolved"></span>
|
|
<span class="psa-mini">CW #48255</span>
|
|
<span>·</span>
|
|
<span>resolved</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-row">
|
|
<div class="session-row-title">BitLocker recovery — M. Tran laptop</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot resolved"></span>
|
|
<span class="psa-mini">CW #48241</span>
|
|
<span>·</span>
|
|
<span>yesterday</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-row">
|
|
<div class="session-row-title">Office 365 license reassignment</div>
|
|
<div class="session-row-meta">
|
|
<span class="state-dot resolved"></span>
|
|
<span class="psa-mini">CW #48238</span>
|
|
<span>·</span>
|
|
<span>yesterday</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ============ SESSION COLUMN ============ -->
|
|
<div class="main-stage">
|
|
<div class="session-column">
|
|
|
|
<!-- Incident header with lifecycle actions -->
|
|
<div class="incident-header">
|
|
<div class="incident-info">
|
|
<div class="incident-tags">
|
|
<span class="psa-chip">CW #48291</span>
|
|
<span class="meta-text">Acme Corp</span>
|
|
<span class="meta-text">·</span>
|
|
<span class="meta-text">jsmith@acme.com</span>
|
|
<span class="meta-text">·</span>
|
|
<span class="meta-text">P2 · Service board</span>
|
|
</div>
|
|
<div class="incident-title">Outlook not syncing after password reset</div>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<button class="btn btn-ghost">
|
|
<svg class="btn-icon" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
|
|
Pause
|
|
</button>
|
|
<button class="btn">
|
|
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 100-6 3 3 0 000 6zM6 15a3 3 0 100-6 3 3 0 000 6zM18 22a3 3 0 100-6 3 3 0 000 6zM8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>
|
|
Share update
|
|
</button>
|
|
<button class="btn btn-warn">
|
|
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 22l-3-9 9-3-9-3 3-9"/></svg>
|
|
Escalate
|
|
</button>
|
|
<button class="btn btn-primary">
|
|
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Resolve
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation -->
|
|
<div class="conversation">
|
|
|
|
<div class="msg user">
|
|
<div class="msg-avatar user">MD</div>
|
|
<div class="msg-body">
|
|
<div class="msg-meta" style="text-align: right;">You</div>
|
|
<div class="msg-bubble">
|
|
User jsmith can't sync Outlook after the password reset at 14:02. AD shows unlocked, license is active. Works on OWA fine.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="msg">
|
|
<div class="msg-avatar pilot">FP</div>
|
|
<div class="msg-body">
|
|
<div class="msg-meta">FlowPilot</div>
|
|
<div class="msg-bubble">
|
|
Classic pattern after a password reset when OWA works but Outlook doesn't — the stale auth token on the client hasn't been invalidated, or the Autodiscover cache is pointing at the old credential state. I've pushed a few questions and diagnostic checks to the task lane to narrow it.
|
|
<br><br>
|
|
Answer what you already know and I'll run the rest as we go.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="msg user">
|
|
<div class="msg-avatar user">MD</div>
|
|
<div class="msg-body">
|
|
<div class="msg-meta" style="text-align: right;">You</div>
|
|
<div class="msg-bubble">
|
|
OWA confirmed working, password was reset via AD not SSPR, and it's only this user — others on the same tenant are fine.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="msg">
|
|
<div class="msg-avatar pilot">FP</div>
|
|
<div class="msg-body">
|
|
<div class="msg-meta">FlowPilot</div>
|
|
<div class="msg-bubble">
|
|
Got it — I've promoted those three facts into <strong style="color: var(--success); font-weight: 500;">What we know</strong>. That narrows it to a client-side token/cache issue, not tenant or license.
|
|
<br><br>
|
|
The Autodiscover check is the fastest way to confirm. Run <span class="mono">Test-OutlookConnectivity -Identity jsmith</span> from the DC, or click the check in the task lane.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Composer -->
|
|
<div class="composer">
|
|
<div class="composer-inner">
|
|
<input type="text" placeholder="Type a message, paste output, or answer in the task lane...">
|
|
<div class="composer-row">
|
|
<div class="composer-actions-left">
|
|
<button class="composer-chip">
|
|
<svg viewBox="0 0 24 24"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
|
|
Attach
|
|
</button>
|
|
<button class="composer-chip">
|
|
<svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
|
Paste logs
|
|
</button>
|
|
<button class="composer-chip">
|
|
<svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path d="M9 12l2 2 4-4"/></svg>
|
|
Ticket context
|
|
</button>
|
|
</div>
|
|
<button class="send-btn">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ TASK LANE (with What we know at top) ============ -->
|
|
<aside class="task-lane">
|
|
<div class="lane-header">
|
|
<div class="lane-title-wrap">
|
|
<div class="lane-title">Tasks</div>
|
|
<div class="lane-counter">3 / 7 answered</div>
|
|
</div>
|
|
<button class="lane-collapse">
|
|
<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="lane-scroll">
|
|
|
|
<!-- WHAT WE KNOW (new section) -->
|
|
<div class="know-section">
|
|
<div class="know-header">
|
|
<div class="know-title">
|
|
<svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
|
What we know
|
|
</div>
|
|
<div class="know-count">4</div>
|
|
</div>
|
|
<div class="know-list">
|
|
|
|
<div class="know-fact">
|
|
<div class="know-fact-check">✓</div>
|
|
<div class="know-fact-body">
|
|
<div class="know-fact-text">OWA login and send/receive confirmed working for jsmith</div>
|
|
<div class="know-fact-source">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
|
|
<span class="source-q">from question · rules out tenant/license</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="know-fact">
|
|
<div class="know-fact-check">✓</div>
|
|
<div class="know-fact-body">
|
|
<div class="know-fact-text">Password reset performed via AD (not SSPR) at 14:02 today</div>
|
|
<div class="know-fact-source">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
|
|
<span class="source-q">from question</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="know-fact">
|
|
<div class="know-fact-check">✓</div>
|
|
<div class="know-fact-body">
|
|
<div class="know-fact-text">Issue is isolated to one user — other Acme users syncing normally</div>
|
|
<div class="know-fact-source">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
|
|
<span class="source-q">from question · rules out tenant-wide</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="know-fact">
|
|
<div class="know-fact-check">✓</div>
|
|
<div class="know-fact-body">
|
|
<div class="know-fact-text">AD account is unlocked, Exchange Online license is active and assigned</div>
|
|
<div class="know-fact-source">
|
|
<svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
|
<span class="source-check">from diagnostic check · Get-ADUser + Get-MsolUser</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<button class="know-add">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
|
Add a note
|
|
</button>
|
|
</div>
|
|
|
|
<!-- QUESTIONS -->
|
|
<div class="lane-section">
|
|
<div class="lane-section-header">
|
|
<div class="lane-section-title questions">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></svg>
|
|
Questions
|
|
</div>
|
|
<div class="lane-section-count">2 unanswered</div>
|
|
</div>
|
|
|
|
<div class="q-card">
|
|
<div class="q-text">Is the user running Outlook in cached mode or online mode?</div>
|
|
<div class="q-hint">Cached mode hits the OST file first — this can mask an auth failure for minutes or hours. Online mode fails instantly.</div>
|
|
<div class="q-actions">
|
|
<button class="q-btn answer">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
Answer
|
|
</button>
|
|
<button class="q-btn skip">Skip</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="q-card">
|
|
<div class="q-text">Has the user tried signing out of Office and back in, or is Outlook still running from before the reset?</div>
|
|
<div class="q-hint">If Outlook has been running continuously, it may be holding the pre-reset token. Restart usually forces re-auth.</div>
|
|
<div class="q-actions">
|
|
<button class="q-btn answer">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
Answer
|
|
</button>
|
|
<button class="q-btn skip">Skip</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="q-card answered">
|
|
<div class="q-text">Are other users on the same tenant affected?</div>
|
|
<div class="q-hint" style="color: var(--success);">Answered · isolated to jsmith (promoted to What we know)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIAGNOSTIC CHECKS -->
|
|
<div class="lane-section">
|
|
<div class="lane-section-header">
|
|
<div class="lane-section-title checks">
|
|
<svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
|
Diagnostic checks
|
|
</div>
|
|
<div class="lane-section-count">1 / 3 run</div>
|
|
</div>
|
|
|
|
<button class="check-run-all">
|
|
<span>▶ Run remaining 2 checks</span>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
|
</button>
|
|
|
|
<div class="check-card">
|
|
<div class="check-title">
|
|
<svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
|
Test-OutlookConnectivity -Identity jsmith
|
|
</div>
|
|
<div class="check-desc">Probes Autodiscover + EWS endpoints from the DC — confirms whether the gateway is responding correctly to this user's request.</div>
|
|
</div>
|
|
|
|
<div class="check-card">
|
|
<div class="check-title">
|
|
<svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
|
Get-MailboxStatistics jsmith
|
|
</div>
|
|
<div class="check-desc">Shows last sync activity timestamp and item count — confirms whether the mailbox itself is receiving new mail server-side.</div>
|
|
</div>
|
|
|
|
<div class="check-card done">
|
|
<div class="check-title">
|
|
<svg viewBox="0 0 24 24" style="color: var(--success);"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Get-ADUser + Get-MsolUser
|
|
</div>
|
|
<div class="check-desc" style="color: var(--success);">Complete · findings promoted to What we know</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUGGESTED ACTION -->
|
|
<div class="lane-section">
|
|
<div class="lane-section-header">
|
|
<div class="lane-section-title suggested">
|
|
<svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
|
Suggested fix
|
|
</div>
|
|
<div class="lane-section-count">94% confidence</div>
|
|
</div>
|
|
|
|
<div class="suggested-card">
|
|
<div class="suggested-title">Clear cached credentials + rebuild Outlook profile</div>
|
|
<div class="suggested-desc">
|
|
Script template from your verified library · removes the stale token from Credential Manager, clears the Autodiscover cache, and triggers a profile rebuild on next launch. Matches 3 resolved sessions in your team wiki.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Resolve action at bottom -->
|
|
<div class="resolve-bar">
|
|
<div class="resolve-preview-hint">
|
|
<svg viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
Summary preview is open →
|
|
</div>
|
|
<button class="resolve-full-btn">
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Resolve & post to CW
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- SUMMARY PREVIEW POPOVER -->
|
|
<div class="summary-preview">
|
|
<div class="summary-arrow"></div>
|
|
<div class="summary-header">
|
|
<div class="summary-eyebrow">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>
|
|
Resolution note preview
|
|
</div>
|
|
<div class="summary-title">Generated from What we know + resolution action</div>
|
|
<div class="summary-target">
|
|
Will post to <span class="mono-inline">CW #48291</span> · status will change to <strong style="color: var(--success); font-weight: 500;">Resolved</strong>
|
|
</div>
|
|
</div>
|
|
<div class="summary-body">
|
|
<div class="summary-body-label">Problem</div>
|
|
<div>User jsmith@acme.com unable to sync Outlook desktop following AD password reset at 14:02. OWA functioning normally.</div>
|
|
|
|
<div class="summary-body-label">What we confirmed</div>
|
|
<ul>
|
|
<li>OWA login and mail flow working for affected user</li>
|
|
<li>Password reset performed via AD (not SSPR)</li>
|
|
<li>Issue isolated to single user — tenant-wide sync healthy</li>
|
|
<li>AD unlocked, Exchange Online license active</li>
|
|
</ul>
|
|
|
|
<div class="summary-body-label">Root cause</div>
|
|
<div>Stale cached credential in Windows Credential Manager holding the pre-reset authentication token, preventing Outlook from completing the new auth handshake.</div>
|
|
|
|
<div class="summary-body-label">Resolution</div>
|
|
<div>Cleared cached credentials via <strong>rundll32.exe keymgr.dll</strong>, removed the Autodiscover cache entry, and rebuilt the Outlook profile. Sync resumed within 30 seconds of profile reload.</div>
|
|
</div>
|
|
<div class="summary-footer">
|
|
<button class="btn btn-ghost" style="flex: 0;">
|
|
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
Edit
|
|
</button>
|
|
<button class="btn btn-primary" style="flex: 1;">
|
|
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Confirm & post
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|