Phase 3: JEV classification, rules table, editable categories (AUD-69)
Implements FR-3, FR-4, FR-5 and FR-14. - internal/classify: TypeSafe System One (JEV) HTTP client with the confirmed request/response shape, retry with backoff on 429/529/5xx, a plain-text rule engine (first match wins, overrides only the named fields), and bounded orchestration with a per-run cap. - internal/store: migration v3 adds an editable `categories` table (name = JEV Choice option and classifications key; rename cascades, remove reassigns) and seeds a starter rules version once. Classification persistence, coverage, and pending/all message queries. - internal/server: POST /actions/classify and /actions/reclassify, plus the FR-14 category editor (GET /categories and add/rename/remove). The triage list now groups by the live category list and shows action + confidence. - CLI: -classify and -classify-all for n8n. - Docs: docs/phase3-classify.md with the confirmed JEV shape, a live read-only classification, and the DoD evidence. DoD: all 100 stored messages have a non-null category, importance, and suggested action (0 nulls); JEV picked a newly added/renamed category for 6 real messages over HTTP. One live JEV call recorded in the phase doc. Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -326,3 +326,52 @@ a:hover { text-decoration: underline; }
|
||||
|
||||
/* subtle, non-decorative loading pulse (no spinners) */
|
||||
.htmx-request .empty-state { opacity: .55; transition: opacity .15s ease; }
|
||||
.btn.htmx-request { opacity: .55; transition: opacity .15s ease; }
|
||||
|
||||
/* Phase 3: classifier confidence on each row */
|
||||
.msg-confidence { font: var(--type-caption); color: var(--ink-faint); white-space: nowrap; }
|
||||
|
||||
/* Phase 3: editable category list (FR-14) */
|
||||
.nav-group-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
|
||||
.nav-edit { font: var(--type-caption); color: var(--primary); }
|
||||
|
||||
.categories-panel { margin-top: var(--space-md); }
|
||||
.categories-help { font: var(--type-body-sm); margin-bottom: var(--space-md); max-width: 68ch; }
|
||||
|
||||
.category-add {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr auto;
|
||||
align-items: end;
|
||||
gap: var(--space-sm);
|
||||
padding-bottom: var(--space-md);
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
}
|
||||
|
||||
.category-list { display: flex; flex-direction: column; }
|
||||
.category-row {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) 0;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
}
|
||||
.category-row:last-child { border-bottom: 0; }
|
||||
.category-rename {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto;
|
||||
align-items: end;
|
||||
gap: var(--space-sm);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.category-desc { min-width: 0; padding-bottom: var(--space-xs); }
|
||||
.category-desc .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.category-rename .count { white-space: nowrap; padding-bottom: var(--space-xs); }
|
||||
.category-remove { flex: 0 0 auto; }
|
||||
.btn-danger { color: var(--sticker-red); border-color: var(--sticker-red); }
|
||||
|
||||
@media (max-width: 759px) {
|
||||
.category-add { grid-template-columns: 1fr; }
|
||||
.category-row { flex-direction: column; align-items: stretch; }
|
||||
.category-rename { grid-template-columns: 1fr; }
|
||||
.category-remove .btn { width: 100%; }
|
||||
}
|
||||
|
||||
104
web/templates/categories.html
Normal file
104
web/templates/categories.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Categories · Email Agent</title>
|
||||
<link rel="stylesheet" href="/static/tokens.css">
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = localStorage.getItem("ea-theme");
|
||||
if (!t) t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
document.documentElement.setAttribute("data-theme", t);
|
||||
} catch (e) {}
|
||||
})();
|
||||
function eaToggleTheme() {
|
||||
var el = document.documentElement;
|
||||
var next = el.getAttribute("data-theme") === "dark" ? "light" : "dark";
|
||||
el.setAttribute("data-theme", next);
|
||||
try { localStorage.setItem("ea-theme", next); } catch (e) {}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav-bar">
|
||||
<span class="wordmark">Email Agent</span>
|
||||
<div class="nav-actions">
|
||||
<a class="btn btn-utility" href="/">Back to inbox</a>
|
||||
<button class="btn btn-utility theme-toggle" type="button" onclick="eaToggleTheme()" aria-label="Toggle dark mode">
|
||||
<span class="icon-light" aria-hidden="true">☾</span>
|
||||
<span class="icon-dark" aria-hidden="true">☀</span>
|
||||
</button>
|
||||
<form method="post" action="/logout">
|
||||
<input type="hidden" name="csrf" value="{{.CSRFToken}}">
|
||||
<button class="btn btn-utility" type="submit">Log out</button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="page">
|
||||
<h1 class="greeting">Categories</h1>
|
||||
|
||||
{{if .Note}}<div class="scan-note" role="status">{{.Note}}</div>{{end}}
|
||||
{{if .Error}}<div class="alert alert-error" role="alert">{{.Error}}</div>{{end}}
|
||||
|
||||
<section class="panel categories-panel" aria-label="Category list">
|
||||
<div class="panel-head">
|
||||
<h2>Category list</h2>
|
||||
<span class="muted">{{.Classified}} of {{.Total}} message(s) classified</span>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<p class="muted categories-help">
|
||||
JEV classifies each message against this list. Renaming a category updates
|
||||
every message already filed under it. Removing one moves those messages to
|
||||
the first remaining category. At least one category is required.
|
||||
</p>
|
||||
|
||||
<form class="category-add" method="post" action="/categories/add">
|
||||
<input type="hidden" name="csrf" value="{{.CSRFToken}}">
|
||||
<div class="field">
|
||||
<label for="new-name">New category</label>
|
||||
<input class="text-input" id="new-name" name="name" maxlength="40" required
|
||||
placeholder="Finance" autocomplete="off">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="new-description">Description (used by JEV)</label>
|
||||
<input class="text-input" id="new-description" name="description" maxlength="200"
|
||||
placeholder="Bills, statements, and payments" autocomplete="off">
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Add category</button>
|
||||
</form>
|
||||
|
||||
<div class="category-list">
|
||||
{{range .Categories}}
|
||||
<div class="category-row">
|
||||
<form class="category-rename" method="post" action="/categories/rename">
|
||||
<input type="hidden" name="csrf" value="{{$.CSRFToken}}">
|
||||
<input type="hidden" name="id" value="{{.ID}}">
|
||||
<div class="field">
|
||||
<label for="name-{{.ID}}">Name</label>
|
||||
<input class="text-input" id="name-{{.ID}}" name="name" value="{{.Name}}" maxlength="40" required>
|
||||
</div>
|
||||
<div class="category-desc">
|
||||
<span class="muted">{{.Description}}</span>
|
||||
</div>
|
||||
<span class="count pill">{{.MessageCount}} message(s)</span>
|
||||
<button class="btn btn-utility" type="submit">Rename</button>
|
||||
</form>
|
||||
<form method="post" action="/categories/remove" class="category-remove"
|
||||
onsubmit="return confirm('Remove this category? Its messages move to the first remaining category.');">
|
||||
<input type="hidden" name="csrf" value="{{$.CSRFToken}}">
|
||||
<input type="hidden" name="id" value="{{.ID}}">
|
||||
<button class="btn btn-utility btn-danger" type="submit">Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -44,7 +44,10 @@
|
||||
<aside class="panel" aria-label="Categories and folders">
|
||||
<div class="nav-groups">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">Categories</div>
|
||||
<div class="nav-group-title">
|
||||
<span>Categories</span>
|
||||
<a class="nav-edit" href="/categories">Edit</a>
|
||||
</div>
|
||||
<div class="nav-group-items">
|
||||
<a class="nav-item nav-item-active" href="#">
|
||||
<span class="dot" style="background: var(--primary)"></span>
|
||||
@@ -53,7 +56,7 @@
|
||||
</a>
|
||||
{{range .Categories}}
|
||||
<a class="nav-item" href="#">
|
||||
<span class="dot" style="background: {{.Color}}"></span>
|
||||
<span class="dot" style="background: {{.Color}}; {{if not .Count}}opacity:.35;{{end}}"></span>
|
||||
<span>{{.Name}}</span>
|
||||
<span class="count">{{.Count}}</span>
|
||||
</a>
|
||||
@@ -84,6 +87,17 @@
|
||||
hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
|
||||
Check mail
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button"
|
||||
hx-post="/actions/classify" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
|
||||
Classify
|
||||
</button>
|
||||
<button class="btn btn-utility" type="button"
|
||||
hx-post="/actions/reclassify" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-confirm="Re-classify every stored message with the current categories and rules?"
|
||||
hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
|
||||
Re-classify all
|
||||
</button>
|
||||
<button class="btn btn-utility" type="button"
|
||||
hx-get="/partials/inbox" hx-target="#inbox-list" hx-swap="innerHTML">
|
||||
Refresh
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
</div>
|
||||
<div class="msg-meta">
|
||||
<span class="pill action-pill">{{.Action}}</span>
|
||||
{{if .Classified}}<span class="msg-confidence" title="Classifier confidence">{{.Confidence}}%</span>{{end}}
|
||||
{{if .When}}<span class="msg-when">{{.When}}</span>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,7 +28,7 @@
|
||||
{{else}}
|
||||
<div class="empty-state">
|
||||
<div class="empty-title">No messages yet</div>
|
||||
<p class="empty-copy">Use <strong>Check mail</strong> to fetch from Gmail. New messages appear here, grouped by category, with a recommended action on each row.</p>
|
||||
<p class="empty-copy">Use <strong>Check mail</strong> to fetch from Gmail, then <strong>Classify</strong> to let JEV sort each message.</p>
|
||||
<span class="pill">No stored messages</span>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user