@e9n/pi-personal-crm 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [0.2.0] - 2026-02-17
+
+### Added
+
+- Initial release.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Espen Nilsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# @e9n/pi-personal-crm
+
+Personal CRM extension for [pi](https://github.com/mariozechner/pi-coding-agent). Manage contacts, companies, interactions, and reminders — all from the terminal or a web dashboard.
+
+## Features
+
+- **Contacts** — full profiles with emails, phones, custom fields, and company association
+- **Companies** — organization records with member contacts
+- **Interactions** — timeline of calls, meetings, emails, notes, gifts, and messages
+- **Relationships** — link contacts to each other with labeled relationships
+- **Groups** — tag contacts into named groups
+- **Reminders** — birthdays, anniversaries, and custom reminders with upcoming view
+- **Fuzzy search** — typo-tolerant search across contacts and companies
+- **Extension fields** — third-party extensions can attach read-only data to contacts/companies
+- **CSV import/export** — bulk import with duplicate detection
+- **Web dashboard** — 6-page UI (Contacts, Companies, Groups, Interactions, Reminders, Upcoming)
+
+## Setup
+
+Add to `~/.pi/agent/settings.json` or `.pi/settings.json`:
+
+```json
+{
+  "pi-personal-crm": {
+    "dbPath": "db/crm.db"
+  }
+}
+```
+
+| Key | Default | Description |
+|-----|---------|-------------|
+| `dbPath` | `"db/crm.db"` | SQLite file path (relative to agent dir, or absolute) |
+| `useKysely` | `false` | Use shared pi-kysely DB instead of local SQLite |
+
+## Tool: `crm`
+
+Manages all CRM entities. Pass `action` plus the relevant fields.
+
+### Actions
+
+| Group | Actions |
+|-------|---------|
+| **Contacts** | `search`, `contact`, `add_contact`, `update_contact`, `delete_contact` |
+| **Interactions** | `log_interaction` |
+| **Reminders** | `add_reminder`, `upcoming` |
+| **Relationships** | `add_relationship` |
+| **Companies** | `list_companies`, `add_company` |
+| **Groups** | `list_groups`, `add_to_group`, `remove_from_group` |
+| **Import/Export** | `export_csv`, `import_csv` |
+
+### Key Parameters
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `action` | string | Action to perform (required) |
+| `query` | string | Search query (for `search`) |
+| `contact_id` | number | Contact ID (for `contact`, `update_contact`, `log_interaction`, `add_reminder`) |
+| `name` | string | Contact name — alternative to `contact_id` for `contact` action |
+| `first_name` / `last_name` | string | Contact name fields |
+| `email` / `phone` | string | Primary email / phone |
+| `company_name` | string | Company association |
+| `interaction_type` | string | `call`, `meeting`, `email`, `note`, `gift`, `message` |
+| `summary` | string | Interaction summary (required for `log_interaction`) |
+| `reminder_type` | string | `birthday`, `anniversary`, `custom` |
+| `reminder_date` | string | ISO date for the reminder |
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `/crm-web [port]` | Start standalone web UI (default port 4100) |
+| `/crm-web stop` | Stop the standalone server |
+| `/crm-web status` | Show whether CRM is running standalone or via pi-webserver |
+| `/crm-export` | Export all contacts to `crm-contacts.csv` |
+| `/crm-import <path>` | Import contacts from a CSV file |
+
+## Web UI
+
+The dashboard (`crm.html`) auto-mounts at `/crm` when [pi-webserver](https://github.com/espennilsen/pi) is installed. Use `/crm-web` to start a standalone server on port 4100.
+
+## Install
+
+```bash
+pi install npm:@e9n/pi-personal-crm
+```
+
+## License
+
+MIT

package/crm.html

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CRM</title>
+<style>
+  :root {
+    --bg: #0a0a0f; --bg2: #12121a; --bg3: #1a1a25;
+    --fg: #e0e0e8; --fg2: #888898; --fg3: #555568;
+    --accent: #7c6ff0; --accent2: #9d8cf0;
+    --green: #4ade80; --red: #f87171; --yellow: #fbbf24; --blue: #60a5fa;
+    --border: #2a2a3a; --radius: 8px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
+
+
+
+  /* ── Layout ─────────────────────────────────────────── */
+  .container { max-width: 1600px; margin: 0 auto; padding: 20px; }
+  .split-view { display: grid; grid-template-columns: 400px 1fr; gap: 20px; }
+  @media (max-width: 1024px) { .split-view { grid-template-columns: 1fr; } }
+
+  /* ── Toolbar ────────────────────────────────────────── */
+  .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+  .toolbar h1 { font-size: 18px; font-weight: 700; }
+  .search-box { background: var(--bg3); border: 1px solid var(--border); color: var(--fg); padding: 6px 12px; border-radius: var(--radius); font-size: 13px; width: 300px; }
+  .search-box:focus { outline: none; border-color: var(--accent); }
+  .btn { background: var(--bg3); border: 1px solid var(--border); color: var(--fg); padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-size: 13px; transition: all 0.15s; }
+  .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+  .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+  .btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
+  .btn-sm { padding: 4px 10px; font-size: 12px; }
+  .btn-danger { color: var(--red); }
+  .btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
+
+  /* ── Contact List ───────────────────────────────────── */
+  .contact-list-wrapper { display: flex; gap: 0; }
+  .letter-bar { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: var(--bg2); border: 1px solid var(--border); border-right: none; border-radius: var(--radius) 0 0 var(--radius); overflow-y: auto; max-height: calc(100vh - 180px); }
+  .letter-jump { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 10px; font-weight: 700; color: var(--fg3); cursor: pointer; border-radius: 3px; transition: all 0.15s; flex-shrink: 0; }
+  .letter-jump:hover:not(.disabled) { background: var(--accent); color: #fff; }
+  .letter-jump.disabled { opacity: 0.25; cursor: default; }
+  .letter-heading { position: sticky; top: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--bg1); border-bottom: 1px solid var(--border); letter-spacing: 0.5px; z-index: 1; }
+  .contact-list { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; overflow: hidden; max-height: calc(100vh - 180px); overflow-y: auto; }
+  .contact-item { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
+  .contact-item:hover { background: var(--bg3); }
+  .contact-item.active { background: rgba(124,111,240,0.15); border-left: 3px solid var(--accent); }
+  .contact-item:last-child { border-bottom: none; }
+  .contact-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
+  .contact-meta { font-size: 12px; color: var(--fg2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .contact-company { color: var(--fg3); }
+  .contact-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
+  .tag { background: var(--bg3); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 10px; color: var(--fg2); }
+
+  /* ── Contact Detail ─────────────────────────────────── */
+  .detail-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; max-height: calc(100vh - 180px); overflow-y: auto; }
+  .detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
+  .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+  .contact-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
+  .detail-name { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
+  .detail-company { font-size: 14px; color: var(--fg2); margin-bottom: 12px; }
+  .detail-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
+  .detail-field-icon { color: var(--fg3); width: 20px; text-align: center; }
+  .section { margin-top: 24px; }
+  .section-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--fg2); text-transform: uppercase; letter-spacing: 0.5px; }
+  .empty-state { text-align: center; padding: 40px 20px; color: var(--fg3); }
+
+  /* ── Timeline ───────────────────────────────────────── */
+  .timeline { border-left: 2px solid var(--border); padding-left: 0; }
+  .timeline-item { position: relative; padding-left: 32px; padding-bottom: 20px; }
+  .timeline-item:last-child { padding-bottom: 0; }
+  .timeline-dot { position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg3); border: 3px solid var(--border); }
+  .timeline-dot.call { border-color: var(--blue); }
+  .timeline-dot.meeting { border-color: var(--green); }
+  .timeline-dot.email { border-color: var(--yellow); }
+  .timeline-dot.note { border-color: var(--accent); }
+  .timeline-dot.gift { border-color: var(--red); }
+  .timeline-dot.message { border-color: var(--accent2); }
+  .timeline-date { font-size: 11px; color: var(--fg3); margin-bottom: 4px; }
+  .timeline-content { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
+  .timeline-type { display: inline-block; background: var(--bg); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; }
+  .timeline-type.call { color: var(--blue); }
+  .timeline-type.meeting { color: var(--green); }
+  .timeline-type.email { color: var(--yellow); }
+  .timeline-type.note { color: var(--accent); }
+  .timeline-type.gift { color: var(--red); }
+  .timeline-type.message { color: var(--accent2); }
+  .timeline-summary { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
+  .timeline-notes { font-size: 12px; color: var(--fg2); }
+
+  /* ── Modal ──────────────────────────────────────────── */
+  .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; }
+  .modal.show { display: flex; }
+  .modal-content { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
+  .modal-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+  .modal-title { font-size: 18px; font-weight: 700; }
+  .modal-close { background: none; border: none; color: var(--fg2); font-size: 24px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); }
+  .modal-close:hover { background: var(--bg3); color: var(--fg); }
+  .modal-body { padding: 20px; }
+  .form-group { margin-bottom: 16px; }
+  .form-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--fg2); }
+  .form-input, .form-textarea, .form-select { background: var(--bg3); border: 1px solid var(--border); color: var(--fg); padding: 8px 12px; border-radius: var(--radius); font-size: 13px; width: 100%; }
+  .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--accent); }
+  .form-textarea { resize: vertical; min-height: 80px; }
+  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
+  .modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 12px; }
+
+  /* ── Relationships & Reminders (contact detail) ─────── */
+  .rel-list, .rem-list { display: flex; flex-direction: column; gap: 8px; }
+  .rel-item, .rem-item { background: var(--bg3); border: 1px solid var(--border); padding: 10px 12px; border-radius: var(--radius); font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
+  .rel-type, .rem-type { font-size: 11px; color: var(--fg3); text-transform: uppercase; }
+  .rel-name { font-weight: 600; }
+  .rel-item > div[onclick]:hover .rel-name { color: var(--accent2); }
+  .delete-icon { background: none; border: none; color: var(--fg3); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; opacity: 0.5; transition: all 0.15s; }
+  .delete-icon:hover { opacity: 1; color: var(--red); background: rgba(248,113,113,0.1); }
+
+  /* ── Page visibility ────────────────────────────────── */
+  .page { animation: fadeIn 0.15s ease; }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+  /* ── Groups Page ────────────────────────────────────── */
+  .group-item { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; display: flex; justify-content: space-between; align-items: center; }
+  .group-item:hover { background: var(--bg3); }
+  .group-item.active { background: rgba(124,111,240,0.15); border-left: 3px solid var(--accent); }
+  .group-item:last-child { border-bottom: none; }
+  .group-name { font-weight: 600; font-size: 14px; }
+  .group-desc { font-size: 12px; color: var(--fg2); margin-top: 2px; }
+  .group-count { font-size: 11px; color: var(--fg3); background: var(--bg3); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
+
+  /* ── Interactions Page ──────────────────────────────── */
+  .interactions-grid { display: flex; flex-direction: column; gap: 8px; }
+  .interaction-row { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: flex-start; gap: 14px; transition: background 0.15s; }
+  .interaction-row:hover { background: var(--bg3); }
+  .interaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--bg3); border: 2px solid var(--border); }
+  .interaction-icon.call { border-color: var(--blue); }
+  .interaction-icon.meeting { border-color: var(--green); }
+  .interaction-icon.email { border-color: var(--yellow); }
+  .interaction-icon.note { border-color: var(--accent); }
+  .interaction-icon.gift { border-color: var(--red); }
+  .interaction-icon.message { border-color: var(--accent2); }
+  .interaction-body { flex: 1; min-width: 0; }
+  .interaction-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
+  .interaction-contact { font-weight: 600; font-size: 13px; color: var(--accent2); cursor: pointer; }
+  .interaction-contact:hover { text-decoration: underline; }
+  .interaction-time { font-size: 11px; color: var(--fg3); margin-left: auto; white-space: nowrap; }
+  .interaction-summary { font-size: 13px; font-weight: 500; }
+  .interaction-notes-text { font-size: 12px; color: var(--fg2); margin-top: 4px; }
+
+  /* ── Reminders Page ─────────────────────────────────── */
+  .reminders-grid { display: flex; flex-direction: column; gap: 8px; }
+  .reminder-row { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 14px; transition: background 0.15s; }
+  .reminder-row:hover { background: var(--bg3); }
+  .reminder-row.overdue { border-left: 3px solid var(--red); }
+  .reminder-row.soon { border-left: 3px solid var(--yellow); }
+  .reminder-row.upcoming { border-left: 3px solid var(--green); }
+  .reminder-type-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--bg3); border: 2px solid var(--border); }
+  .reminder-body { flex: 1; min-width: 0; }
+  .reminder-contact-name { font-weight: 600; font-size: 13px; color: var(--accent2); cursor: pointer; }
+  .reminder-contact-name:hover { text-decoration: underline; }
+  .reminder-date-text { font-size: 13px; font-weight: 500; }
+  .reminder-message-text { font-size: 12px; color: var(--fg2); margin-top: 2px; }
+  .reminder-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
+  .reminder-badge.overdue { background: rgba(248,113,113,0.15); color: var(--red); }
+  .reminder-badge.soon { background: rgba(251,191,36,0.15); color: var(--yellow); }
+  .reminder-badge.upcoming { background: rgba(74,222,128,0.15); color: var(--green); }
+
+  /* ── Group member list ──────────────────────────────── */
+  .member-list { display: flex; flex-direction: column; gap: 6px; }
+  .member-item { background: var(--bg3); border: 1px solid var(--border); padding: 10px 12px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
+  .member-item:hover { border-color: var(--accent); }
+  .member-name { font-weight: 600; cursor: pointer; }
+  .member-name:hover { color: var(--accent2); }
+  .member-meta { font-size: 12px; color: var(--fg2); }
+
+  /* ── Upcoming Cards ─────────────────────────────────── */
+  .upcoming-section { margin-bottom: 24px; }
+  .upcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
+  .upcoming-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.15s; }
+  .upcoming-card:hover { background: var(--bg3); border-color: var(--accent); }
+  .upcoming-icon { font-size: 28px; }
+  .upcoming-name { font-weight: 600; font-size: 14px; }
+  .upcoming-date { font-size: 12px; color: var(--fg2); }
+  .upcoming-days { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-left: auto; white-space: nowrap; }
+  .upcoming-days.soon { background: rgba(251,191,36,0.15); color: var(--yellow); }
+  .upcoming-days.today { background: rgba(74,222,128,0.15); color: var(--green); }
+  .upcoming-days.later { background: rgba(124,111,240,0.1); color: var(--accent2); }
+
+  /* ── Import Result ────────────────────────────────────── */
+  .import-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
+  .import-stat { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
+  .import-stat-value { font-size: 24px; font-weight: 700; }
+  .import-stat-value.created { color: var(--green); }
+  .import-stat-value.skipped { color: var(--yellow); }
+  .import-stat-label { font-size: 11px; color: var(--fg2); text-transform: uppercase; margin-top: 4px; }
+  .import-section { margin-bottom: 16px; }
+  .import-section-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-weight: 600; user-select: none; }
+  .import-section-header:hover { background: var(--bg); }
+  .import-section-header .badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
+  .import-section-body { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); max-height: 200px; overflow-y: auto; }
+  .import-section-body.collapsed { display: none; }
+  .import-row { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 12px; color: var(--fg2); }
+  .import-row:last-child { border-bottom: none; }
+  .import-row .match { color: var(--fg3); font-size: 11px; }
+
+  /* ── Navigation ─────────────────────────────────────── */
+  .crm-nav { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; align-items: center; gap: 0; position: sticky; top: 0; z-index: 900; }
+  .crm-nav .nav-brand { font-size: 16px; font-weight: 700; color: var(--accent); padding: 12px 16px 12px 0; margin-right: 8px; border-right: 1px solid var(--border); cursor: pointer; }
+  .crm-nav .nav-brand:hover { color: var(--accent2); }
+  .crm-nav a { color: var(--fg2); text-decoration: none; font-size: 13px; font-weight: 500; padding: 12px 14px; transition: all 0.15s; border-bottom: 2px solid transparent; cursor: pointer; user-select: none; }
+  .crm-nav a:hover { color: var(--fg); background: rgba(255,255,255,0.03); }
+  .crm-nav a.active { color: var(--accent2); border-bottom-color: var(--accent); }
+  .crm-nav .nav-spacer { flex: 1; }
+
+  /* ── Dashboard ──────────────────────────────────────── */
+  .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
+  .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; cursor: pointer; transition: all 0.15s; }
+  .stat-card:hover { border-color: var(--accent); background: var(--bg3); }
+  .stat-icon { font-size: 24px; margin-bottom: 8px; }
+  .stat-value { font-size: 28px; font-weight: 700; color: var(--fg); }
+  .stat-label { font-size: 12px; color: var(--fg2); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
+
+  .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+  @media (max-width: 1024px) { .dash-grid { grid-template-columns: 1fr; } }
+
+  .dash-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+  .dash-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
+  .dash-panel-header h2 { font-size: 15px; font-weight: 600; }
+
+  .dash-upcoming-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: background 0.15s; }
+  .dash-upcoming-item:hover { background: var(--bg3); }
+  .dash-upcoming-item:last-child { border-bottom: none; }
+  .dash-upcoming-icon { font-size: 20px; flex-shrink: 0; }
+  .dash-upcoming-body { flex: 1; min-width: 0; }
+  .dash-upcoming-name { font-weight: 600; font-size: 13px; }
+  .dash-upcoming-meta { font-size: 11px; color: var(--fg3); }
+
+  .dash-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: background 0.15s; }
+  .dash-activity-item:hover { background: var(--bg3); }
+  .dash-activity-item:last-child { border-bottom: none; }
+  .dash-activity-icon { font-size: 16px; margin-top: 2px; flex-shrink: 0; }
+  .dash-activity-body { flex: 1; min-width: 0; }
+  .dash-activity-header { display: flex; align-items: center; gap: 8px; }
+  .dash-activity-name { font-weight: 600; font-size: 13px; }
+  .dash-activity-time { font-size: 11px; color: var(--fg3); margin-left: auto; white-space: nowrap; }
+  .dash-activity-summary { font-size: 12px; color: var(--fg2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  .dash-neglected-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; }
+  .dash-neglected-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: background 0.15s; }
+  .dash-neglected-item:hover { background: var(--bg3); }
+  .dash-neglected-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
+  .dash-neglected-body { flex: 1; min-width: 0; }
+  .dash-neglected-name { font-weight: 600; font-size: 13px; }
+  .dash-neglected-meta { font-size: 11px; color: var(--fg3); }
+</style>
+</head>
+<body>
+
+
+
+<!-- Navigation -->
+<nav class="crm-nav">
+  <span class="nav-brand" onclick="navigateTo('dashboard')">CRM</span>
+  <a onclick="navigateTo('dashboard')" data-page="dashboard">Dashboard</a>
+  <a onclick="navigateTo('contacts')" data-page="contacts">Contacts</a>
+  <a onclick="navigateTo('companies')" data-page="companies">Companies</a>
+  <a onclick="navigateTo('groups')" data-page="groups">Groups</a>
+  <a onclick="navigateTo('interactions')" data-page="interactions">Interactions</a>
+  <a onclick="navigateTo('reminders')" data-page="reminders">Reminders</a>
+  <a onclick="navigateTo('upcoming')" data-page="upcoming">Upcoming</a>
+  <span class="nav-spacer"></span>
+</nav>
+
+<!-- Shared globals & utilities — available to all page scripts -->
+<script>
+  let currentPage = 'dashboard';
+  let currentContactId = null;
+  let allContacts = [];
+  let allGroups = [];
+
+  const typeIcons = { call: '📞', meeting: '🤝', email: '📧', note: '📝', gift: '🎁', message: '💬' };
+  const reminderIcons = { birthday: '🎂', anniversary: '💍', custom: '📌' };
+
+  function esc(str) {
+    if (str == null) return '';
+    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function showModal(id) {
+    document.getElementById(id).classList.add('show');
+  }
+
+  function closeModal(id) {
+    document.getElementById(id).classList.remove('show');
+  }
+
+  function navigateTo(page) {
+    currentPage = page;
+    document.querySelectorAll('.page').forEach(p => p.style.display = 'none');
+    const el = document.getElementById('page-' + page);
+    if (el) el.style.display = '';
+
+    // Update nav active state
+    document.querySelectorAll('.crm-nav a[data-page]').forEach(a => {
+      a.classList.toggle('active', a.dataset.page === page);
+    });
+
+    if (page === 'dashboard') loadDashboard();
+    if (page === 'contacts') { loadContacts(); loadCompanies(); }
+    if (page === 'companies') loadCompaniesPage();
+    if (page === 'groups') loadGroupsPage();
+    if (page === 'interactions') loadInteractionsPage();
+    if (page === 'reminders') loadRemindersPage();
+    if (page === 'upcoming') loadUpcomingPage();
+  }
+
+  /** Safe fetch: returns [] if the API errors or returns a non-array. */
+  async function safeFetchArray(url) {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) return [];
+      const data = await res.json();
+      return Array.isArray(data) ? data : [];
+    } catch { return []; }
+  }
+
+  async function refreshContacts() {
+    allContacts = await safeFetchArray('/api/crm/contacts?limit=1000');
+    return allContacts;
+  }
+</script>
+
+<div class="container">
+<!-- PAGES -->
+</div>
+
+<!-- Import Result Modal (global — used by contacts page) -->
+<div class="modal" id="importResultModal">
+  <div class="modal-content" style="max-width: 520px;">
+    <div class="modal-header">
+      <h2 class="modal-title">📥 Import Results</h2>
+      <button class="modal-close" onclick="closeModal('importResultModal')">&times;</button>
+    </div>
+    <div class="modal-body" id="importResultBody"></div>
+    <div class="modal-footer">
+      <button class="btn btn-primary" onclick="closeModal('importResultModal')">Done</button>
+    </div>
+  </div>
+</div>
+
+<!-- Bootstrap — runs after all page scripts are loaded -->
+<script>
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      document.querySelectorAll('.modal.show').forEach(m => m.classList.remove('show'));
+    }
+  });
+
+  document.querySelectorAll('.modal').forEach(modal => {
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) modal.classList.remove('show');
+    });
+  });
+
+  // Wire up contacts search
+  const searchEl = document.getElementById('search');
+  if (searchEl) searchEl.addEventListener('input', (e) => {
+    filterContacts(e.target.value.toLowerCase());
+  });
+
+  // Start on dashboard
+  navigateTo('dashboard');
+</script>
+
+</body>
+</html>

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@e9n/pi-personal-crm",
+  "version": "0.2.0",
+  "description": "Personal CRM extension for pi coding agents",
+  "type": "module",
+  "keywords": [
+    "pi-package"
+  ],
+  "pi": {
+    "extensions": [
+      "./src/index.ts"
+    ]
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "node --import tsx/esm test-db.ts"
+  },
+  "author": "Espen Nilsen <hi@e9n.dev>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@mariozechner/pi-ai": "*",
+    "@mariozechner/pi-coding-agent": "*",
+    "@sinclair/typebox": "*"
+  },
+  "dependencies": {
+    "better-sqlite3": "^12.6.2"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.12",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "README.md",
+    "crm.html",
+    "package.json",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/espennilsen/pi.git",
+    "directory": "extensions/pi-personal-crm"
+  }
+}