npm - @godmode-team/godmode - Versions diffs - 1.0.0 → 1.3.0 - Mend

@godmode-team/godmode 1.0.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/README.md +46 -46
package/dist/godmode-ui/aeo.html +989 -0
package/dist/godmode-ui/apple-touch-icon.png +0 -0
package/dist/godmode-ui/assets/dashboards-BWn_hwxU.js +1 -0
package/dist/godmode-ui/assets/index-DLms34x3.css +1 -0
package/dist/godmode-ui/assets/index-DSS-Mmm_.js +9315 -0
package/dist/godmode-ui/assets/onboarding-setup-eq3R6nNk.js +1 -0
package/dist/godmode-ui/assets/options-QuHclvvX.js +1 -0
package/dist/godmode-ui/assets/proactive-intel-BU5IobT1.js +1 -0
package/dist/godmode-ui/assets/second-brain-nWUdvmOD.js +1 -0
package/dist/godmode-ui/assets/setup-DDvbMoK2.js +1 -0
package/dist/godmode-ui/consciousness-icon-64.png +0 -0
package/dist/godmode-ui/consciousness-icon.png +0 -0
package/dist/godmode-ui/consciousness-icon.webp +0 -0
package/dist/godmode-ui/favicon-32.png +0 -0
package/dist/godmode-ui/favicon.ico +0 -0
package/dist/godmode-ui/favicon.svg +7 -1
package/dist/godmode-ui/godmode-logo.png +0 -0
package/dist/godmode-ui/how-to-godmode.html +1416 -0
package/dist/godmode-ui/index.html +7 -6
package/dist/index.js +27620 -5659
package/openclaw.plugin.json +86 -1
package/package.json +49 -9
package/dist/deck/assets/index-Dq6YBWDo.css +0 -10
package/dist/deck/assets/index-OeRjiyQU.js +0 -83
package/dist/deck/index.html +0 -17
package/dist/godmode-ui/assets/index-BPHog2ro.css +0 -1
package/dist/godmode-ui/assets/index-D7TzQ2zb.js +0 -4985
package/dist/godmode-ui/caleb-avatar.jpg +0 -0
package/dist/godmode-ui/favicon-new.svg +0 -3
package/dist/godmode-ui/favicon.ico.svg +0 -3
package/dist/godmode-ui/lightning-icon.svg +0 -3
package/dist/godmode-ui/vite.svg +0 -1
package/dist/index.js.map +0 -1

package/dist/godmode-ui/how-to-godmode.html ADDED Viewed

@@ -0,0 +1,1416 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>How to GodMode</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --bg: #12141a;
+        --bg-elevated: #1a1d25;
+        --bg-hover: #262a35;
+        --card: #181b22;
+        --text: #e4e4e7;
+        --text-strong: #fafafa;
+        --muted: #71717a;
+        --border: #27272a;
+        --accent: #ff6b6b;
+        --accent-hover: #ff8585;
+        --accent-subtle: rgba(255, 107, 107, 0.18);
+        --accent-glow: rgba(255, 107, 107, 0.3);
+        --accent-2: #14b8a6;
+        --accent-2-subtle: rgba(20, 184, 166, 0.15);
+        --ok: #22c55e;
+        --ok-subtle: rgba(34, 197, 94, 0.12);
+        --warn: #f59e0b;
+        --warn-subtle: rgba(245, 158, 11, 0.12);
+        --info: #3b82f6;
+        --info-subtle: rgba(59, 130, 246, 0.12);
+        --mono: "JetBrains Mono", monospace;
+        --font-body: "Space Grotesk", sans-serif;
+        --radius-md: 8px;
+        --radius-lg: 12px;
+        --radius-xl: 16px;
+        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35);
+        color-scheme: dark;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        scroll-behavior: smooth;
+      }
+      body {
+        margin: 0;
+        font: 400 16px/1.7 var(--font-body);
+        letter-spacing: -0.02em;
+        background: var(--bg);
+        color: var(--text);
+        -webkit-font-smoothing: antialiased;
+      }
+      /* Hero Section */
+      .hero {
+        position: relative;
+        padding: 80px 24px 60px;
+        text-align: center;
+        background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
+        overflow: hidden;
+      }
+      .hero::before {
+        content: "";
+        position: absolute;
+        top: -50%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 800px;
+        height: 800px;
+        background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
+        opacity: 0.4;
+        pointer-events: none;
+      }
+      .hero-content {
+        position: relative;
+        z-index: 1;
+        max-width: 700px;
+        margin: 0 auto;
+      }
+      .hero h1 {
+        font-size: clamp(2.5rem, 8vw, 4rem);
+        font-weight: 700;
+        color: var(--text-strong);
+        margin: 0 0 16px;
+        letter-spacing: -0.04em;
+      }
+      .hero h1 span {
+        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      .hero p {
+        font-size: 1.25rem;
+        color: var(--muted);
+        margin: 0 0 32px;
+        max-width: 500px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .hero-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 14px 28px;
+        background: var(--accent);
+        color: #fff;
+        font-weight: 600;
+        border-radius: var(--radius-lg);
+        text-decoration: none;
+        transition: all 0.2s ease;
+        box-shadow: 0 4px 20px var(--accent-glow);
+      }
+      .hero-cta:hover {
+        background: var(--accent-hover);
+        transform: translateY(-2px);
+        box-shadow: 0 8px 30px var(--accent-glow);
+        text-decoration: none;
+      }
+      /* Navigation */
+      .nav {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        background: rgba(18, 20, 26, 0.95);
+        backdrop-filter: blur(12px);
+        border-bottom: 1px solid var(--border);
+        padding: 12px 24px;
+      }
+      .nav-inner {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        gap: 8px;
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+      .nav-inner::-webkit-scrollbar {
+        display: none;
+      }
+      .nav a {
+        padding: 8px 16px;
+        color: var(--muted);
+        font-size: 14px;
+        font-weight: 500;
+        border-radius: var(--radius-md);
+        white-space: nowrap;
+        text-decoration: none;
+        transition: all 0.15s ease;
+      }
+      .nav a:hover {
+        color: var(--text);
+        background: var(--bg-hover);
+        text-decoration: none;
+      }
+      /* Main Content */
+      .content {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 60px 24px 100px;
+      }
+      /* Section */
+      section {
+        margin-bottom: 80px;
+        scroll-margin-top: 80px;
+      }
+      section h2 {
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--text-strong);
+        margin: 0 0 24px;
+        letter-spacing: -0.03em;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      section h2 .icon {
+        width: 40px;
+        height: 40px;
+        background: var(--accent-subtle);
+        border-radius: var(--radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--accent);
+      }
+      section h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text-strong);
+        margin: 32px 0 16px;
+      }
+      section p {
+        margin: 0 0 16px;
+        color: var(--text);
+      }
+      /* Feature Cards */
+      .feature-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 20px;
+        margin: 24px 0;
+      }
+      .feature-card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        padding: 24px;
+        transition: all 0.2s ease;
+      }
+      .feature-card:hover {
+        border-color: var(--accent);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+      }
+      .feature-card h4 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--text-strong);
+        margin: 0 0 8px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .feature-card h4 svg {
+        color: var(--accent);
+      }
+      .feature-card p {
+        color: var(--muted);
+        margin: 0;
+        font-size: 14px;
+      }
+      /* Highlight Box */
+      .highlight-box {
+        background: linear-gradient(135deg, var(--accent-subtle) 0%, rgba(20, 184, 166, 0.1) 100%);
+        border: 1px solid var(--accent);
+        border-radius: var(--radius-xl);
+        padding: 32px;
+        margin: 32px 0;
+      }
+      .highlight-box h3 {
+        color: var(--accent);
+        margin-top: 0;
+        font-size: 1.5rem;
+      }
+      .highlight-box p {
+        font-size: 1.1rem;
+      }
+      /* Juggling Section - Special Treatment */
+      .juggling-visual {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        margin: 32px 0;
+        flex-wrap: wrap;
+      }
+      .juggle-ball {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 32px;
+        animation: juggle 2s ease-in-out infinite;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+      }
+      .juggle-ball:nth-child(1) {
+        background: linear-gradient(135deg, #ff6b6b, #ff8585);
+        animation-delay: 0s;
+      }
+      .juggle-ball:nth-child(2) {
+        background: linear-gradient(135deg, #14b8a6, #2dd4bf);
+        animation-delay: 0.3s;
+      }
+      .juggle-ball:nth-child(3) {
+        background: linear-gradient(135deg, #3b82f6, #60a5fa);
+        animation-delay: 0.6s;
+      }
+      .juggle-ball:nth-child(4) {
+        background: linear-gradient(135deg, #f59e0b, #fbbf24);
+        animation-delay: 0.9s;
+      }
+      .juggle-ball:nth-child(5) {
+        background: linear-gradient(135deg, #8b5cf6, #a78bfa);
+        animation-delay: 1.2s;
+      }
+      @keyframes juggle {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-20px);
+        }
+      }
+      /* Steps List */
+      .steps {
+        counter-reset: step;
+        list-style: none;
+        padding: 0;
+        margin: 24px 0;
+      }
+      .steps li {
+        position: relative;
+        padding-left: 60px;
+        margin-bottom: 24px;
+        min-height: 48px;
+      }
+      .steps li::before {
+        counter-increment: step;
+        content: counter(step);
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        background: var(--accent-subtle);
+        color: var(--accent);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 18px;
+      }
+      .steps li strong {
+        color: var(--text-strong);
+        display: block;
+        font-size: 1.1rem;
+        margin-bottom: 4px;
+      }
+      /* Channel Cards */
+      .channel-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin: 24px 0;
+      }
+      .channel-card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        padding: 20px;
+        text-align: center;
+        transition: all 0.2s ease;
+      }
+      .channel-card:hover {
+        border-color: var(--accent);
+        transform: scale(1.02);
+      }
+      .channel-card .emoji {
+        font-size: 36px;
+        margin-bottom: 12px;
+      }
+      .channel-card h4 {
+        margin: 0 0 8px;
+        color: var(--text-strong);
+      }
+      .channel-card p {
+        margin: 0;
+        font-size: 13px;
+        color: var(--muted);
+      }
+      .channel-card .badge {
+        display: inline-block;
+        padding: 4px 8px;
+        background: var(--ok-subtle);
+        color: var(--ok);
+        font-size: 11px;
+        font-weight: 600;
+        border-radius: var(--radius-md);
+        margin-top: 12px;
+      }
+      .channel-card .badge.warn {
+        background: var(--warn-subtle);
+        color: var(--warn);
+      }
+      /* Code blocks */
+      code {
+        font-family: var(--mono);
+        font-size: 0.9em;
+        background: var(--bg-elevated);
+        padding: 2px 6px;
+        border-radius: 4px;
+        color: var(--accent);
+      }
+      pre {
+        background: var(--bg-elevated);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: 16px;
+        overflow-x: auto;
+        margin: 16px 0;
+      }
+      pre code {
+        background: none;
+        padding: 0;
+        color: var(--text);
+      }
+      /* Tips */
+      .tip {
+        background: var(--info-subtle);
+        border-left: 4px solid var(--info);
+        padding: 16px 20px;
+        border-radius: 0 var(--radius-md) var(--radius-md) 0;
+        margin: 24px 0;
+      }
+      .tip strong {
+        color: var(--info);
+      }
+      .warning {
+        background: var(--warn-subtle);
+        border-left: 4px solid var(--warn);
+        padding: 16px 20px;
+        border-radius: 0 var(--radius-md) var(--radius-md) 0;
+        margin: 24px 0;
+      }
+      .warning strong {
+        color: var(--warn);
+      }
+      /* Security Section */
+      .security-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 16px;
+        margin: 24px 0;
+      }
+      .security-item {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        padding: 20px;
+      }
+      .security-item h4 {
+        margin: 0 0 8px;
+        color: var(--text-strong);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .security-item h4 .check {
+        color: var(--ok);
+      }
+      .security-item p {
+        margin: 0;
+        font-size: 14px;
+        color: var(--muted);
+      }
+      /* Capability List */
+      .capability-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 12px;
+        margin: 24px 0;
+      }
+      .capability-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 16px;
+        background: var(--card);
+        border-radius: var(--radius-md);
+        font-size: 14px;
+      }
+      .capability-item svg {
+        color: var(--ok);
+        flex-shrink: 0;
+      }
+      /* Footer */
+      .footer {
+        text-align: center;
+        padding: 40px 24px;
+        border-top: 1px solid var(--border);
+        color: var(--muted);
+      }
+      .footer a {
+        color: var(--accent);
+      }
+      /* Back to app button */
+      .back-btn {
+        position: fixed;
+        bottom: 24px;
+        right: 24px;
+        padding: 12px 20px;
+        background: var(--accent);
+        color: #fff;
+        font-weight: 600;
+        border-radius: var(--radius-lg);
+        text-decoration: none;
+        box-shadow: 0 4px 20px var(--accent-glow);
+        z-index: 1000;
+        transition: all 0.2s ease;
+      }
+      .back-btn:hover {
+        background: var(--accent-hover);
+        transform: translateY(-2px);
+        text-decoration: none;
+      }
+      /* Responsive */
+      @media (max-width: 600px) {
+        .hero {
+          padding: 60px 20px 40px;
+        }
+        .content {
+          padding: 40px 20px 80px;
+        }
+        section {
+          margin-bottom: 60px;
+        }
+        .steps li {
+          padding-left: 50px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="hero">
+      <div class="hero-content">
+        <h1>How to <span>GodMode</span></h1>
+        <p>
+          Your AI assistant that never sleeps. Learn how to get the most out of your 24/7
+          intelligent companion.
+        </p>
+        <a href="#getting-started" class="hero-cta">
+          Get Started
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M5 12h14M12 5l7 7-7 7" />
+          </svg>
+        </a>
+      </div>
+    </div>
+    <nav class="nav">
+      <div class="nav-inner">
+        <a href="#getting-started">Getting Started</a>
+        <a href="#channels">Channels</a>
+        <a href="#juggling">Juggling</a>
+        <a href="#capabilities">Capabilities</a>
+        <a href="#daily-brief">Daily Brief</a>
+        <a href="#access">Giving Access</a>
+        <a href="#security">Security</a>
+        <a href="#tips">Pro Tips</a>
+      </div>
+    </nav>
+    <main class="content">
+      <!-- Getting Started -->
+      <section id="getting-started">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
+          </span>
+          Getting Started
+        </h2>
+        <p>
+          GodMode is your AI assistant that runs 24/7, ready to help you with anything from drafting
+          emails to managing complex projects. Here's how to start using it:
+        </p>
+        <ol class="steps">
+          <li>
+            <strong>You're already here!</strong>
+            The web UI you're looking at right now is your command center. This is where you can
+            chat with GodMode, see your conversations, and manage everything.
+          </li>
+          <li>
+            <strong>Send your first message</strong>
+            Try something simple: "Hello! Tell me a joke." or "What can you help me with?" GodMode
+            will respond and you'll be off to the races.
+          </li>
+          <li>
+            <strong>Set up a messaging channel</strong>
+            While the web UI is great, the real magic happens when GodMode meets you where you
+            already are - Slack, Telegram, or even iMessage.
+          </li>
+          <li>
+            <strong>Get your Daily Brief</strong>
+            Tomorrow morning at 7 AM, your personalized Daily Brief will appear in Obsidian. It's
+            like having a chief of staff prepare your day.
+          </li>
+        </ol>
+      </section>
+      <!-- Channels -->
+      <section id="channels">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+          </span>
+          Communication Channels
+        </h2>
+        <p>
+          GodMode can talk to you through multiple channels. Pick the one that fits your workflow
+          best:
+        </p>
+        <div class="channel-grid">
+          <div class="channel-card">
+            <div class="emoji">🌐</div>
+            <h4>Web UI</h4>
+            <p>Full-featured interface with conversation history, file uploads, and settings.</p>
+            <span class="badge">Always Available</span>
+          </div>
+          <div class="channel-card">
+            <div class="emoji">💬</div>
+            <h4>Slack</h4>
+            <p>Perfect for teams. DM GodMode or mention it in channels.</p>
+            <span class="badge">Recommended</span>
+          </div>
+          <div class="channel-card">
+            <div class="emoji">✈️</div>
+            <h4>Telegram</h4>
+            <p>Fast, reliable, works great on mobile. Great for personal use.</p>
+            <span class="badge">Recommended</span>
+          </div>
+          <div class="channel-card">
+            <div class="emoji">💚</div>
+            <h4>WhatsApp</h4>
+            <p>Familiar interface, especially good if you live in WhatsApp.</p>
+            <span class="badge">Good Option</span>
+          </div>
+          <div class="channel-card">
+            <div class="emoji">🍎</div>
+            <h4>iMessage</h4>
+            <p>Native Apple experience. Requires Mac Mini running 24/7.</p>
+            <span class="badge warn">Mac Mini Only</span>
+          </div>
+        </div>
+        <div class="tip">
+          <strong>Pro tip:</strong> Start with one channel and master it before adding more. Most
+          users find Slack or Telegram works best for them.
+        </div>
+      </section>
+      <!-- Juggling - The Big Feature -->
+      <section id="juggling">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 6v6l4 2" />
+            </svg>
+          </span>
+          Juggling: Your Superpower
+        </h2>
+        <div class="highlight-box">
+          <h3>🎪 What is Juggling?</h3>
+          <p>
+            Juggling is GodMode's ability to handle
+            <strong>multiple tasks simultaneously</strong> across different conversations and
+            channels. While you're chatting about one thing, GodMode can be working on five other
+            things in the background.
+          </p>
+          <p>
+            Think of it like having a team of assistants, except they all share the same brain and
+            context about you.
+          </p>
+        </div>
+        <div class="juggling-visual">
+          <div class="juggle-ball">📧</div>
+          <div class="juggle-ball">📊</div>
+          <div class="juggle-ball">📝</div>
+          <div class="juggle-ball">🔍</div>
+          <div class="juggle-ball">💡</div>
+        </div>
+        <h3>How Juggling Works</h3>
+        <p>
+          When you give GodMode a task, you don't have to wait for it to finish before starting
+          something else:
+        </p>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+                />
+              </svg>
+              Parallel Processing
+            </h4>
+            <p>
+              Ask GodMode to research competitors while it's also drafting your presentation. Both
+              happen at the same time.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+              Cross-Channel
+            </h4>
+            <p>
+              Start a task in Slack, continue it via Telegram, finish in the web UI. GodMode
+              remembers everything.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+              </svg>
+              Background Tasks
+            </h4>
+            <p>
+              "Monitor this and let me know when it changes." GodMode watches while you do other
+              things.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                <polyline points="14 2 14 8 20 8" />
+              </svg>
+              Shared Context
+            </h4>
+            <p>
+              Results from one task automatically inform others. Research you did yesterday helps
+              with today's writing.
+            </p>
+          </div>
+        </div>
+        <h3>Juggling in Practice</h3>
+        <p>Here's what a typical power user's morning might look like:</p>
+        <pre><code>You: "Summarize my emails from overnight"
+GodMode: [Working on it...]
+You: "Also, what's on my calendar today?"
+GodMode: [Now working on both...]
+You: "And can you draft a response to the investor email?"
+GodMode:
+  ✓ Email summary: 12 emails, 3 urgent...
+  ✓ Calendar: 4 meetings starting at 9am...
+  ✓ Draft response: "Dear Sarah, Thank you for..."</code></pre>
+        <div class="tip">
+          <strong>The key insight:</strong> Don't wait. Just keep asking. GodMode will juggle
+          everything and report back as each task completes. This is how you 10x your productivity.
+        </div>
+      </section>
+      <!-- Capabilities -->
+      <section id="capabilities">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polygon
+                points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+              />
+            </svg>
+          </span>
+          What GodMode Can Do
+        </h2>
+        <p>
+          GodMode isn't just a chatbot - it's a full AI assistant with access to your tools and
+          data:
+        </p>
+        <div class="capability-list">
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Read & draft emails
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Manage your calendar
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Create & update tasks
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Search the web
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Analyze documents
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Write & edit content
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Track health data (Oura)
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Meeting transcripts (Fathom)
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            CRM updates (Front)
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Write to Obsidian
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Run automations (N8N)
+          </div>
+          <div class="capability-item">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Code assistance
+          </div>
+        </div>
+        <p>
+          And this is just the beginning. GodMode's capabilities grow as you connect more services
+          and create custom skills.
+        </p>
+      </section>
+      <!-- Daily Brief -->
+      <section id="daily-brief">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 10" />
+            </svg>
+          </span>
+          The Daily Brief
+        </h2>
+        <p>
+          Every morning at 7 AM, GodMode delivers a personalized briefing to your Obsidian vault.
+          It's like having a chief of staff who knows everything about your day.
+        </p>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                />
+              </svg>
+              Sleep & Health
+            </h4>
+            <p>Your Oura ring data: sleep quality, readiness score, and recovery status.</p>
+          </div>
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                <line x1="16" y1="2" x2="16" y2="6" />
+                <line x1="8" y1="2" x2="8" y2="6" />
+                <line x1="3" y1="10" x2="21" y2="10" />
+              </svg>
+              Calendar Overview
+            </h4>
+            <p>Today's meetings, prep notes, and schedule conflicts at a glance.</p>
+          </div>
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                <polyline points="22 4 12 14.01 9 11.01" />
+              </svg>
+              Priority Tasks
+            </h4>
+            <p>What's due, what's overdue, and what you should focus on today.</p>
+          </div>
+          <div class="feature-card">
+            <h4>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+                />
+              </svg>
+              Strategic Context
+            </h4>
+            <p>Reminders about ongoing projects, follow-ups needed, and weekly goals.</p>
+          </div>
+        </div>
+        <div class="tip">
+          <strong>Location:</strong> Your Daily Brief appears in
+          <code>01-Daily/YYYY-MM-DD.md</code> in your Obsidian vault. Open Obsidian each morning and
+          it's right there waiting for you.
+        </div>
+      </section>
+      <!-- Giving Access -->
+      <section id="access">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+          </span>
+          Giving GodMode Access
+        </h2>
+        <p>
+          GodMode becomes more powerful the more access you give it. Here's what to connect for the
+          best experience:
+        </p>
+        <h3>Essential Connections</h3>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <h4>📧 Email (Google/Gmail)</h4>
+            <p>
+              Read and draft emails, find information from your inbox, follow up on conversations.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>📅 Calendar (Google)</h4>
+            <p>See your schedule, get meeting prep, avoid conflicts, manage your time.</p>
+          </div>
+          <div class="feature-card">
+            <h4>📝 Obsidian</h4>
+            <p>Your second brain. Daily briefs, notes, and knowledge management.</p>
+          </div>
+        </div>
+        <h3>Power-User Connections</h3>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <h4>✅ ClickUp</h4>
+            <p>Task and project management. Create, update, and track tasks automatically.</p>
+          </div>
+          <div class="feature-card">
+            <h4>💬 Slack</h4>
+            <p>Team communication. GodMode can read channels and respond to messages.</p>
+          </div>
+          <div class="feature-card">
+            <h4>🎙️ Fathom</h4>
+            <p>Meeting transcripts. Get summaries and action items from your calls.</p>
+          </div>
+          <div class="feature-card">
+            <h4>💍 Oura</h4>
+            <p>Health tracking. Sleep, readiness, and activity in your Daily Brief.</p>
+          </div>
+          <div class="feature-card">
+            <h4>📬 Front</h4>
+            <p>Customer communication. Manage tickets and customer relationships.</p>
+          </div>
+          <div class="feature-card">
+            <h4>⚡ N8N</h4>
+            <p>Workflow automation. Connect any service and create custom automations.</p>
+          </div>
+        </div>
+        <div class="warning">
+          <strong>Important:</strong> Only connect services you're comfortable having an AI access.
+          GodMode treats your data with care, but you should understand what access you're granting.
+        </div>
+      </section>
+      <!-- Security -->
+      <section id="security">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </span>
+          Using GodMode Securely
+        </h2>
+        <p>GodMode is designed with security in mind. Here's what you need to know:</p>
+        <div class="security-grid">
+          <div class="security-item">
+            <h4><span class="check">✓</span> Self-Hosted</h4>
+            <p>
+              GodMode runs on your own infrastructure. Your data never passes through third-party
+              servers (except the AI providers you choose).
+            </p>
+          </div>
+          <div class="security-item">
+            <h4><span class="check">✓</span> Token Authentication</h4>
+            <p>Access to your GodMode requires a secure token. Never share this token publicly.</p>
+          </div>
+          <div class="security-item">
+            <h4><span class="check">✓</span> Tailscale Encryption</h4>
+            <p>
+              When using Tailscale, all traffic is encrypted end-to-end. Your GodMode is only
+              accessible on your private network.
+            </p>
+          </div>
+          <div class="security-item">
+            <h4><span class="check">✓</span> API Key Security</h4>
+            <p>Your API keys are stored in environment variables, never in code or logs.</p>
+          </div>
+          <div class="security-item">
+            <h4><span class="check">✓</span> No Training on Your Data</h4>
+            <p>Anthropic (Claude) does not train on API data. Your conversations are private.</p>
+          </div>
+          <div class="security-item">
+            <h4><span class="check">✓</span> Audit Trail</h4>
+            <p>All actions are logged. You can see exactly what GodMode has done.</p>
+          </div>
+        </div>
+        <h3>Best Practices</h3>
+        <ol class="steps">
+          <li>
+            <strong>Use strong, unique tokens</strong>
+            Your gateway token is your key to GodMode. Treat it like a password.
+          </li>
+          <li>
+            <strong>Keep Tailscale connected</strong>
+            This ensures your GodMode is only accessible from your trusted devices.
+          </li>
+          <li>
+            <strong>Review connected services</strong>
+            Periodically check what services GodMode has access to and revoke any you no longer
+            need.
+          </li>
+          <li>
+            <strong>Use 1Password for secrets</strong>
+            Store your API keys and tokens in 1Password, not in plain text files.
+          </li>
+        </ol>
+      </section>
+      <!-- Pro Tips -->
+      <section id="tips">
+        <h2>
+          <span class="icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 1 1 7.072 0l-.548.547A3.374 3.374 0 0 0 14 18.469V19a2 2 0 1 1-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+              />
+            </svg>
+          </span>
+          Pro Tips
+        </h2>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <h4>💬 Be Conversational</h4>
+            <p>
+              Talk to GodMode like a smart colleague. "Can you..." works better than robotic
+              commands.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>📋 Give Context</h4>
+            <p>
+              "For my meeting with investors tomorrow..." helps GodMode understand the stakes and
+              tone.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>🔄 Iterate</h4>
+            <p>"Make it shorter" or "More professional" - refine outputs with quick feedback.</p>
+          </div>
+          <div class="feature-card">
+            <h4>⚡ Don't Wait</h4>
+            <p>
+              While GodMode works on one thing, ask for something else. Juggling is your superpower.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h4>📝 Use Templates</h4>
+            <p>"Write this in my usual email style" - GodMode learns your preferences over time.</p>
+          </div>
+          <div class="feature-card">
+            <h4>🎯 Be Specific</h4>
+            <p>
+              "Draft a 3-paragraph email" is better than "write an email" for predictable results.
+            </p>
+          </div>
+        </div>
+        <h3>Power User Workflows</h3>
+        <pre><code># Morning Routine
+"Give me a quick summary of overnight emails, today's calendar,
+and my top 3 priorities for the day."
+# Meeting Prep
+"I have a call with [person] in 30 minutes. Pull up our last
+conversation, any open tasks with them, and suggest talking points."
+# End of Day
+"Summarize what I accomplished today and what's carrying over
+to tomorrow. Update my task list accordingly."
+# Research Mode
+"Research [topic] and give me a brief I can read in 5 minutes.
+Include recent news, key players, and what I should know."</code></pre>
+      </section>
+    </main>
+    <footer class="footer">
+      <p>GodMode - Your 24/7 AI Assistant</p>
+      <p>
+        Questions? Ask GodMode: "How do I..." or visit
+        <a href="https://github.com/GodMode-Team/godmode/issues">GitHub Issues</a>
+      </p>
+    </footer>
+    <a href="/" class="back-btn">← Back to GodMode</a>
+  </body>
+</html>