From 1a085eb4b92c48fdc0a20624f9fb58c0466f93fd Mon Sep 17 00:00:00 2001 From: Flint Date: Thu, 23 Jul 2026 08:48:23 -0700 Subject: [PATCH] =?UTF-8?q?memory=20connect=20page=20(purple)=20=E2=80=94?= =?UTF-8?q?=20dark=20until=20Fabric=20URL=20+=20security=20pass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 --- memory/index.html | 140 ++++++++++++++++++++++++++++++++++++++++++++++ style.css | 127 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 267 insertions(+) create mode 100644 memory/index.html diff --git a/memory/index.html b/memory/index.html new file mode 100644 index 0000000..1ba8644 --- /dev/null +++ b/memory/index.html @@ -0,0 +1,140 @@ + + + + + + TPS REPORT — Form MEM-001 + + + + + + + + + + + +
+ + +
+

TPS REPORT

+
Form MEM-001 — Memory Issuance Request
+
+ Form: MEM-001 + Date: + Classification: PUBLIC +
+
+ + +
+
Subject
+
Give your AI a memory.
+
Flair is an open-source memory server for AI agents, over MCP. This one is public — connect any agent and it remembers.
+
+ + +
+
Section 1
+
CONNECT
+
Three steps. About sixty seconds.
+ +
+
Step 1
+
+
Copy the memory server URL.
+ +
+ https://PENDING.example/mcp + +
+
+
+ +
+
Step 2
+
+ For claude.ai or Claude mobile: open claude.ai/settings/connectors, choose "Add custom connector," and paste the URL. Added on the web, syncs to your phone automatically. +
+
+ +
+
Step 3
+
+ Ask your AI: "What do you remember?" — first recall is seeded. +
+
+ +
+
Other clients
+
+ Any other MCP client: paste the same URL wherever your client takes a remote MCP server. +
+
+
+ + +
+
Section 2
+
WHAT IS THIS?
+ + + + + +
IdentitySigned identities — no anonymous writes
RecallTrust-graded — your AI sees how much to trust each memory
Sourcegithub.com/tpsdev-ai/flair — open source
Self-hostnpm i -g @tpsdev-ai/flair — run your own instead of the public one
+
+ + +
+
Public preview. Be kind; everything is signed. — tps.dev
+
+ +
+ + + + + diff --git a/style.css b/style.css index 7ebce7e..dd7557e 100644 --- a/style.css +++ b/style.css @@ -600,3 +600,130 @@ html { border: 1px solid #000; } } + +/* ========================================================== + Additions: /memory connect page (Form MEM-001) + Numbered step rows + tap-to-copy MCP URL button. + ========================================================== */ + +.step-row { + display: flex; + gap: 1rem; + padding: 0.6rem 0; + border-bottom: 1px solid var(--border-light); + align-items: flex-start; +} + +.step-row:last-child { + border-bottom: none; +} + +.step-num { + font-weight: 600; + width: 100px; + flex-shrink: 0; + color: var(--ink); + font-size: 0.8rem; +} + +.step-body { + flex: 1 1 auto; + font-size: 0.85rem; + color: var(--ink-light); +} + +.step-body a { + color: var(--ink-light); + text-decoration: none; + border-bottom: 1px solid var(--border-light); +} + +.step-body a:hover { + color: var(--accent); + border-bottom-color: var(--accent); +} + +.step-instr { + color: var(--ink-light); + margin-bottom: 0.35rem; +} + +/* URL terminal block with copy button */ +.url-terminal { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; +} + +.url-terminal code { + flex: 1 1 auto; + min-width: 0; + overflow-wrap: anywhere; +} + +.copy-btn { + flex: 0 0 auto; + font-family: var(--mono); + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--paper); + background: var(--accent); + border: 1.5px solid var(--accent); + padding: 0.4rem 0.85rem; + cursor: pointer; + transition: background 0.15s ease, border-color 0.15s ease; +} + +.copy-btn:hover { + background: var(--accent-light); + border-color: var(--accent-light); +} + +.copy-btn:active { + transform: translateY(1px); +} + +.copy-btn.copied { + background: #27ae60; + border-color: #27ae60; +} + +.footer-line { + font-size: 0.8rem; + color: var(--ink-light); +} + +.footer-line a { + color: var(--ink); + text-decoration: none; + border-bottom: 1px solid var(--border-light); +} + +.footer-line a:hover { + color: var(--accent); + border-bottom-color: var(--accent); +} + +@media (max-width: 500px) { + .step-row { + flex-direction: column; + gap: 0.25rem; + } + + .step-num { + width: auto; + } + + .url-terminal { + flex-direction: column; + align-items: stretch; + } + + .copy-btn { + width: 100%; + } +}