### Install nelly-elephant-mcp from Source

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/README.md

Installs nelly-elephant-mcp by cloning the repository, installing dependencies, building the project, and then installing it globally.

```bash
git clone https://github.com/SpicyRiceCakes/nelly-elephant-mcp.git
cd nelly-elephant-mcp
npm install && npm run build
npm install -g .
```

--------------------------------

### Toggle Installation UI Element

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

A JavaScript function to toggle the visibility of 'easy' and 'manual' installation sections and update the styling of associated labels and indicators. This is likely used for interactive installation guides.

```javascript
function toggleInstall() { var easy = document.getElementById('install-easy'); var manual = document.getElementById('install-manual'); var knob = document.getElementById('install-knob'); var labelEasy = document.getElementById('install-label-easy'); var labelFormal = document.getElementById('install-label-formal'); var isEasy = easy.style.display !== 'none'; easy.style.display = isEasy ? 'none' : 'block'; manual.style.display = isEasy ? 'block' : 'none'; knob.style.left = isEasy ? '20px' : '2px'; labelEasy.style.color = isEasy ? 'rgba(255,255,255,0.3)' : 'var(--accent)'; labelFormal.style.color = isEasy ? 'var(--accent)' : 'rgba(255,255,255,0.3)'; labelEasy.style.fontWeight = isEasy ? '400' : '600'; labelFormal.style.fontWeight = isEasy ? '600' : '400'; }
```

--------------------------------

### Install Nelly Elephant MCP via CLI

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Instructions for installing the Nelly Elephant MCP server using npm or from the source repository.

```bash
npm install -g nelly-elephant-mcp
```

```bash
git clone https://github.com/SpicyRiceCakes/nelly-elephant-mcp.git
cd nelly-elephant-mcp
npm install && npm run build
npm install -g .
```

--------------------------------

### Configure MCP Settings

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Configuration examples for integrating Nelly Elephant MCP into global or project-specific MCP settings files.

```json
// ~/.claude/mcp_settings.json
{
  "mcpServers": {
    "nelly": {
      "command": "nelly-elephant-mcp",
      "args": []
    }
  }
}
```

```json
// .mcp.json
{
  "mcpServers": {
    "nelly": {
      "command": "nelly-elephant-mcp",
      "args": []
    }
  }
}
```

--------------------------------

### Install nelly-elephant-mcp Globally

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/README.md

Installs the nelly-elephant-mcp package globally using npm. This makes the tool available in all your projects.

```bash
npm install -g nelly-elephant-mcp
```

--------------------------------

### Session File Structure Example (JSONL)

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Illustrates the file structure for storing Claude Code sessions, organized by project directory. Each session is stored as a JSONL file, where each line is a JSON object representing a turn in the conversation.

```json
~/.claude/projects/
├── -Users-you-project-alpha/           # Sessions from project-alpha
│   ├── abc123.jsonl                    # Main session transcript
│   ├── def456.jsonl
│   └── abc123/
│       └── subagents/                  # Background task sessions
│           └── ghi789.jsonl
├── -Users-you-project-beta/            # Sessions from project-beta
│   └── jkl012.jsonl
└── ...

Each JSONL file contains one JSON object per line with conversation data:
{"type":"human","text":"Fix the login bug","timestamp":"2024-03-20T10:30:00Z"}
{"type":"assistant","content":"I'll investigate the auth flow...","timestamp":"2024-03-20T10:30:05Z"}
```

--------------------------------

### Usage Pattern: Natural Language Search (CLI Example)

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Demonstrates a typical user interaction flow for searching and resuming Claude Code sessions using natural language commands. This pattern involves searching for past conversations and then using a generated command to resume a specific session.

```text
User: "I fixed a login bug in a session a few days ago. Can you find that?"

Claude: [calls nelly_search with "login bug"]
        → Found 2 sessions...

User: "That first one. What was the fix?"

Claude: [calls nelly_context for session abc123]
        → Shows expanded context around matches

User: "I want to talk to that session again."

Claude: → Run this in your terminal: claude -r abc123
```

--------------------------------

### Nelly Search Tool Usage

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Demonstrates how to use the `nelly_search` tool to find past sessions. The example shows a natural language query that Claude Code translates into a call to `nelly_search` with the keyword 'login bug'. The output lists matching sessions with their IDs, dates, and a snippet of the conversation.

```bash
You:   "I fixed a login bug in a session a few days ago.
            Can you find that conversation?"
    
    Claude: [calls nelly_search with "login bug"]
            → Found 2 sessions matching "login bug":
              1. Session abc123 (2026-03-20) — "...the auth redirect was missing the callback URL..."
              2. Session def456 (2026-03-18) — "...login screen flickering on every launch..."
```

--------------------------------

### Initialize SVG Mascot Loading and Animation

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

This code initializes event listeners for SVG elements ('mascot-tab-svg', 'mascot-hero-svg', 'mascot-claude-svg') to trigger an animation loop once they are loaded. It ensures that animations start only after the SVG assets are ready.

```javascript
var tabMascot = document.getElementById('mascot-tab-svg');
var heroMascot = document.getElementById('mascot-hero-svg');
if (tabMascot) {
  tabMascot.addEventListener('load', function() {
    onMascotLoad(tabMascot);
  });
}
if (heroMascot) {
  heroMascot.addEventListener('load', function() {
    onMascotLoad(heroMascot);
  });
}
var claudeMascot = document.getElementById('mascot-claude-svg');
if (claudeMascot) {
  claudeMascot.addEventListener('load', function() {
    onMascotLoad(claudeMascot);
  });
}
requestAnimationFrame(animateEyes);
```

--------------------------------

### Path Utilities (TypeScript)

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Provides helper functions for managing Claude Code session directories. It includes functions to get the root sessions directory, check if sessions exist on the machine, and determine the current operating system platform name.

```typescript
import {
  getSessionsRootDir,
  sessionsExist,
  getPlatformName
} from "./paths.js";

// Get the sessions root directory
const rootDir = getSessionsRootDir();
// macOS/Linux: /Users/you/.claude/sessions
// Windows: C:\Users\you\.claude\sessions

// Check if Claude Code has been used on this machine
if (sessionsExist()) {
  console.log("Sessions directory found!");
} else {
  console.log("No Claude Code sessions found.");
}

// Get platform name for user-facing messages
const platform = getPlatformName();
// Returns: "macOS" | "Windows" | "Linux"
```

--------------------------------

### Get Session Context Details

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Retrieves detailed context from a specific Claude Code session, focusing on lines surrounding a given search term. This function is used to get a more granular view of past interactions within a session. It requires the session ID, the search term, and the number of lines of context desired.

```typescript
import { getSessionContext } from "./search.js";

// Get 5 lines of context around each match
const contexts: string[] = await getSessionContext(
  "abc123def456",     // session ID
  "callback URL",     // search term
  5                   // context lines
);

// Each context is a formatted string with >>> marking the match
for (const context of contexts) {
  console.log(context);
  // Output:
  //     User was asking about the auth flow
  //     Looking at the OAuth configuration
  // >>> the auth redirect was missing the callback URL parameter
  //     Added the redirect_uri to the auth config
  //     Testing the login flow now
}

```

--------------------------------

### Get Nelly Context from Session

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Retrieves expanded context from a specific Claude Code session around matching lines. This tool is useful after `nelly_search` to view more detail before resuming a session. It requires a session ID, a query string, and an optional number of context lines.

```typescript
server.tool(
  "nelly_context",
  "Get expanded context from a specific session.",
  {
    session_id: z.string().describe("The session ID to get context from"),
    query: z.string().describe("The search term to find context around"),
    context_lines: z.number().int().min(1).max(50).optional().default(5)
  },
  async ({ session_id, query, context_lines }) => {
    const contexts = await getSessionContext(session_id, query, context_lines);

    // Returns surrounding lines around each match
    return { content: [{ type: "text", text: formatContexts(contexts) }] };
  }
);

```

--------------------------------

### Local File Search using grep

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/README.md

Demonstrates how to perform a local file search using the `grep` command. This is recommended for sensitive data or when a fully local search is required, as it avoids copying search results into a new session.

```bash
grep -r "your-search-term" ~/.claude/projects/
```

--------------------------------

### Implement nelly_instructions Tool

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Defines the MCP tool to check system status, including platform details and session directory availability.

```typescript
server.tool(
  "nelly_instructions",
  "Check Nelly's status — platform, sessions directory, and whether session data exists.",
  {},
  async () => {
    const platform = getPlatformName();
    const hasData = sessionsExist();
    const root = getSessionsRootDir();

    return {
      content: [{
        type: "text",
        text: `Platform: ${platform}\nSessions directory: ${root}\nReady: ${hasData}`
      }]
    };
  }
);
```

--------------------------------

### nelly_instructions

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Retrieves the current status of the Nelly Elephant MCP server, including platform details, session directory location, and system readiness.

```APIDOC
## MCP Tool: nelly_instructions

### Description
Checks Nelly's status, including platform, sessions directory location, and whether session data exists. Returns usage instructions and system diagnostics.

### Method
MCP Tool Execution

### Parameters
None

### Response
#### Success Response
- **Platform** (string) - The detected OS (macOS, Windows, or Linux).
- **Sessions directory** (string) - The path to the local Claude projects directory.
- **Ready** (boolean) - Indicates if session data is accessible.

#### Response Example
## Status
- Platform: macOS
- Sessions directory: /Users/you/.claude/projects
- Recent sessions found: Yes
- Nelly is ready to search! 🐘
```

--------------------------------

### Manual Search with Grep

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Provides an alternative to Nelly for searching session files, using the standard `grep` command. This method is highlighted for its privacy benefits as results remain local. It demonstrates how to perform a case-insensitive, recursive search for a term within the project directory.

```bash
grep -ri "term" ~/.claude/projects/
```

--------------------------------

### Run Nelly Elephant MCP in Short Trunk Mode

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Executes the Nelly Elephant MCP with the 'short trunk' command. This mode provides only the essential results without personality or narration.

```bash
Nelly short trunk
```

--------------------------------

### Configure Nelly Elephant MCP in MCP Settings

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Adds the Nelly Elephant MCP server configuration to the '~/.claude/mcp_settings.json' file. This allows Claude Code to recognize and utilize Nelly as an MCP server.

```json
{ "mcpServers": { "nelly": { "command": "nelly-elephant-mcp", "args": [] } } }
```

--------------------------------

### Style Collapsible FAQ Sections

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Styles the HTML details/summary elements to create interactive, collapsible FAQ sections within the Geek Mode view.

```css
.geek-mode details { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; } .geek-mode details[open] { border-color: var(--accent); } .geek-mode details summary { padding: 14px 20px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; }
```

--------------------------------

### Implement Flashing Warning Animation

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Creates a pulsing opacity animation for warning elements. The animation runs infinitely to draw user attention to critical information.

```css
@keyframes warning-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.warning-flash {
  color: #ff4444;
  font-weight: 700;
  animation: warning-flash 1.5s ease-in-out infinite;
}
```

--------------------------------

### Define CSS Variables and Global Styles

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Sets up the color palette and base typography for the Nelly The Elephant interface. These variables ensure consistent theming across the application.

```css
:root { --bg: #0d1117; --bg-card: #161b22; --bg-card-hover: #1c2333; --border: #30363d; --text: #e6edf3; --text-dim: #8b949e; --accent: #e85d3a; --accent-glow: rgba(232, 93, 58, 0.3); --green: #3fb950; --blue: #58a6ff; --purple: #bc8cff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; background: var(--bg); color: var(--text); }
```

--------------------------------

### Global MCP Configuration for Nelly

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/README.md

Configures Nelly to be available globally within Claude Code by adding an entry to the '~/.claude/mcp_settings.json' file. This ensures Nelly can be invoked from any project.

```json
{
  "mcpServers": {
    "nelly": {
      "command": "nelly-elephant-mcp",
      "args": []
    }
  }
}
```

--------------------------------

### Add UI Animations

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Defines keyframe animations for the 'nudge' effect on arrows and the 'glow-pulse' effect for highlighted text.

```css
@keyframes nudge { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(5px); opacity: 1; } } @keyframes glow-pulse { 0%, 100% { text-shadow: 0 0 8px var(--accent-glow); } 50% { text-shadow: 0 0 12px var(--accent), 0 0 30px var(--accent-glow); } }
```

--------------------------------

### Create Constellation Background Animation

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Provides keyframe animations and styling for a decorative constellation background. It uses SVG-like node appearance and edge-drawing animations to create a subtle, interactive visual effect.

```css
.constellation-bg .c-node { fill: #c9a84c; opacity: 0; animation: nodeAppear 0.6s ease-out forwards; }
.constellation-bg .c-edge { stroke: #5a4f3a; stroke-width: 1; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawEdge 2s ease-out forwards; }
@keyframes nodeAppear { to { opacity: 0.7; } }
@keyframes drawEdge { to { stroke-dashoffset: 0; } }
```

--------------------------------

### Implement Tab Bar UI Component

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Styles the sticky tab navigation bar, including hover states, active tab indicators, and icon area alignment.

```css
.tab-bar { position: sticky; top: 0; z-index: 100; background: rgba(13, 17, 23, 0.97); border-bottom: 1px solid var(--border); display: flex; backdrop-filter: blur(12px); } .tab { flex: 1; padding: 20px 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 16px; border-bottom: 3px solid transparent; } .tab.active { border-bottom-color: var(--accent); background: rgba(232, 93, 58, 0.05); }
```

--------------------------------

### Define FAQ Card Irritation Levels

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Applies dynamic background and border colors to FAQ cards based on a data-irritation attribute. This allows for visual representation of different intensity levels within the FAQ section.

```css
.faq-card[data-irritation="1"] { background: var(--bg-card); }
.faq-card[data-irritation="2"] { background: rgba(255,245,245,0.03); }
.faq-card[data-irritation="3"] { background: rgba(255,200,200,0.04); border-color: rgba(255,100,100,0.1); }
.faq-card[data-irritation="4"] { background: rgba(255,150,150,0.06); border-color: rgba(255,80,80,0.15); }
.faq-card[data-irritation="5"] { background: rgba(255,100,100,0.08); border-color: rgba(255,60,60,0.2); }
```

--------------------------------

### Run Nelly Elephant MCP in Long Trunk Mode

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Executes the Nelly Elephant MCP with the 'long trunk' command. This mode provides a full, interactive experience, including conversational guidance and feedback.

```bash
Nelly long trunk
```

--------------------------------

### Hero Section Animations

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Implements keyframe animations for the hero section, including pulse effects and mascot floating behavior.

```css
@keyframes pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } }
@keyframes breatheAndFloat { 0% { transform: translate(0, 0) scale(1); filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.4)); } 50% { transform: translate(-1px, -2px) scale(1.015); filter: drop-shadow(0 0 24px rgba(255, 211, 61, 0.4)); } 100% { transform: translate(0, 0) scale(1); } }
```

--------------------------------

### Implement nelly_search Tool

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Defines the MCP tool for searching conversation history using keywords, with optional filters for project and date range.

```typescript
server.tool(
  "nelly_search",
  "Search past Claude Code conversations.",
  {
    query: z.string().describe("Search query — keywords or phrases"),
    max_results: z.number().int().min(1).max(100).optional().default(10),
    days_back: z.number().int().min(1).max(3650).optional(),
    project: z.string().optional().describe("Filter to specific project (partial match)")
  },
  async ({ query, max_results, days_back, project }) => {
    const results = await searchSessions(query, {
      maxResults: max_results,
      daysBack: days_back,
      projectFilter: project
    });

    return { content: [{ type: "text", text: formatResults(results) }] };
  }
);
```

--------------------------------

### Nelly Context Tool Usage

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Illustrates the use of the `nelly_context` tool to retrieve detailed information about a specific past session. After identifying a relevant session (e.g., 'abc123'), a follow-up query prompts Claude Code to call `nelly_context` for that session ID, providing expanded context around the matching lines.

```bash
You:   "That first one. What was the fix?"
    
    Claude: [calls nelly_context for abc123]
            → Shows expanded context around the matching lines
```

--------------------------------

### CSS: Font Definitions

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Defines custom fonts and imports external fonts. It includes a local font 'WarGames' using @font-face and imports 'EB Garamond' and 'JetBrains Mono' from Google Fonts.

```css
@font-face {
  font-family: 'WarGames';
  src: url('wargames-terminal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@300;400&display=swap');
```

--------------------------------

### Usage Pattern: Trunk Modes

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Describes the two interaction modes, 'Nelly long trunk' and 'Nelly short trunk', that users can switch between. These modes control Nelly's conversational style and the verbosity of its responses during interactions.

```text
"Nelly long trunk"   → Full personality, conversational, guided search
"Nelly short trunk"  → Quick results, minimal narration
```

--------------------------------

### Implement 3D Card Flip Animation

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Defines the perspective and transformation logic required to create a 3D card flipping effect. It uses CSS transitions and backface-visibility to ensure smooth rotation between front and back faces.

```css
.canvas-perspective { perspective: 2500px; perspective-origin: 50% 50%; }
.canvas-flipper { position: relative; width: 100%; transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1), height 0.6s ease; transform-style: preserve-3d; will-change: transform; }
.canvas-flipper.flipped { transform: rotateY(180deg); }
.canvas-face { width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.canvas-face.back { position: absolute; top: 0; left: 0; transform: rotateY(180deg); }
```

--------------------------------

### Confetti Easter Egg Initialization and Animation

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

This code implements a confetti easter egg that emits particles from the 'hooman-avatar' element onto a 'confetti-canvas'. It includes deferred initialization to handle cases where the canvas might have zero dimensions initially, retrying on scroll and when 'spicy' mode is activated. The confetti animation itself uses canvas 2D context for particle rendering, gravity, and color.

```javascript
var confettiReady = false;
function bootConfetti() {
  if (confettiReady) return;
  var canvas = document.getElementById('confetti-canvas');
  var avatar = document.getElementById('hooman-avatar');
  if (!canvas || !avatar) return;
  if (canvas.offsetWidth === 0) return;
  confettiReady = true;
  startConfetti(canvas, avatar);
}
window.addEventListener('scroll', bootConfetti);
var _setMode = window.setMode;
window.setMode = function(m) {
  _setMode(m);
  if (m === 'spicy') setTimeout(bootConfetti, 50);
};
function startConfetti(canvas, avatar) {
  var ctx = canvas.getContext('2d');
  var particles = [];
  var settled = [];
  var running = false;
  var frameCount = 0;
  var colors = ['#c23616', '#b8860b', '#e84118', '#44bd32', '#0097e6', '#8c7ae6', '#e1b12c', '#ff6348', '#ffa502', '#e056fd', '#22a6b3'];
  function resize() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  }
  resize();
  window.addEventListener('resize', resize);
  function getEmitPos() {
    var r = avatar.getBoundingClientRect();
    var c = canvas.getBoundingClientRect();
    return {
      x: (r.left + r.width / 2) - c.left,
      y: r.top - c.top - 5
    };
  }
  function emit() {
    var pos = getEmitPos();
    var count = 1 + Math.floor(Math.random() * 2);
    for (var i = 0; i < count; i++) {
      particles.push({
        x: pos.x + (Math.random() - 0.5) * 12,
        y: pos.y,
        vx: (Math.random() - 0.5) * 2.5,
        vy: -(1.5 + Math.random() * 2.5),
        size: 0.8 + Math.random() * 1.8,
        color: colors[Math.floor(Math.random() * colors.length)],
        gravity: 0.03 + Math.random() * 0.02,
        spin: (Math.random() - 0
      });
    }
  }
}
```

--------------------------------

### List Recent Sessions (TypeScript)

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Fetches and displays a list of recent Claude Code sessions, sorted by modification time. It can optionally filter sessions by a specific project directory. The function returns an array of RecentSession objects, each containing session details.

```typescript
import { listRecentSessions } from "./search.js";

interface RecentSession {
  sessionId: string;
  projectDir: string;
  date: string;
  sizeKB: number;
}

// Get 10 most recent sessions, optionally filtered by project
const sessions: RecentSession[] = await listRecentSessions(10, "my-app");

for (const session of sessions) {
  console.log(`${session.date} | ${session.projectDir} | ${session.sizeKB}KB`);
  console.log(`  claude -r ${session.sessionId}`);
}
```

--------------------------------

### Easel Knob Component Styling

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Defines the appearance and interactive states of the easel knob component, including metallic gradients, hover effects, and rotation animations.

```css
.easel-knob { height: 40px; border-radius: 50%; cursor: pointer; z-index: 3; margin: 0 -20px; position: relative; flex-shrink: 0; transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1); background: radial-gradient(circle at 35% 35%, #d4a843 0%, #a07828 40%, #6b5420 80%, #4a3a15 100%); border: 2px solid #8b6914; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,220,130,0.3); }
.easel-knob:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 3px rgba(255,220,130,0.4), 0 0 16px rgba(212,168,67,0.25); }
.easel-knob.spun { transform: rotate(180deg); }
```

--------------------------------

### POST /nelly_context

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Retrieves expanded context from a specific session based on a search query. This is useful for inspecting details of a session before resuming it.

```APIDOC
## POST /nelly_context

### Description
Retrieves expanded context from a specific session around matching lines. Use this after searching to see more detail before resuming a session.

### Method
POST

### Endpoint
/nelly_context

### Parameters
#### Request Body
- **session_id** (string) - Required - The unique session ID to get context from
- **query** (string) - Required - The search term to find context around
- **context_lines** (number) - Optional - Number of lines to return around the match (1-50, default: 5)

### Request Example
{
  "session_id": "abc123def456",
  "query": "callback URL",
  "context_lines": 5
}

### Response
#### Success Response (200)
- **content** (array) - List containing the formatted context text block

#### Response Example
{
  "content": [{"type": "text", "text": "── Context 1 ──────────────────────\n>>> the auth redirect was missing the callback URL parameter"}]
}
```

--------------------------------

### Implement 3D Card Flip with Dynamic Height Adjustment

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

This JavaScript handles a 3D card flip effect for a canvas element. It synchronizes the flipper's height to the currently visible face ('hooman' or 'claude') and adjusts scroll position to prevent content jumping. It also patches the 'setMode' function to trigger height synchronization when switching to 'spicy' mode.

```javascript
var currentFace = 'hooman';
function syncFlipperHeight() {
  var flipper = document.getElementById('canvas-flipper');
  if (!flipper) return;
  var front = flipper.querySelector('.front');
  var back = flipper.querySelector('.back');
  if (!front || !back) return;
  back.style.position = 'relative';
  var fh = front.offsetHeight;
  var bh = back.offsetHeight;
  back.style.position = '';
  var targetH = (currentFace === 'hooman') ? fh : bh;
  if (targetH > 0) {
    flipper.style.height = targetH + 'px';
  }
}
window.addEventListener('load', function() {
  setTimeout(syncFlipperHeight, 200);
});
window.addEventListener('resize', syncFlipperHeight);
var _origSetMode2 = window.setMode;
window.setMode = function(mode) {
  _origSetMode2(mode);
  if (mode === 'spicy') {
    setTimeout(syncFlipperHeight, 50);
  }
};
function flipCanvas(target) {
  var flipper = document.getElementById('canvas-flipper');
  var tabH = document.getElementById('tab-hooman');
  var tabC = document.getElementById('tab-claude');
  if (target === 'toggle') {
    target = (currentFace === 'hooman') ? 'claude' : 'hooman';
  }
  if (target === currentFace) return;
  currentFace = target;
  var allKnobs = document.querySelectorAll('.easel-knob');
  var allTabsH = document.querySelectorAll('[id^="tab-hooman"]');
  var allTabsC = document.querySelectorAll('[id^="tab-claude"]');
  if (target === 'claude') {
    flipper.classList.add('flipped');
    allKnobs.forEach(function(k) { k.classList.add('spun'); });
    allTabsH.forEach(function(t) { t.classList.remove('active', 'hooman-active'); });
    allTabsC.forEach(function(t) { t.classList.add('active', 'claude-active'); });
  } else {
    flipper.classList.remove('flipped');
    allKnobs.forEach(function(k) { k.classList.remove('spun'); });
    allTabsC.forEach(function(t) { t.classList.remove('active', 'claude-active'); });
    allTabsH.forEach(function(t) { t.classList.add('active', 'hooman-active'); });
  }
  var flipperRect = flipper.getBoundingClientRect();
  var flipperTopInPage = flipperRect.top + window.scrollY;
  var oldH = flipper.offsetHeight;
  var wasBelow = window.scrollY > flipperTopInPage;
  syncFlipperHeight();
  var newH = flipper.offsetHeight;
  var diff = oldH - newH;
  if (diff !== 0 && wasBelow) {
    window.scrollBy(0, -diff);
  }
}
```

--------------------------------

### POST /nelly_recent

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Lists the most recent Claude Code sessions, allowing users to find sessions by timeframe or project filter.

```APIDOC
## POST /nelly_recent

### Description
Lists the most recent Claude Code sessions. Useful when keywords aren't remembered but the timeframe is recent.

### Method
POST

### Endpoint
/nelly_recent

### Parameters
#### Request Body
- **count** (number) - Optional - Number of sessions to return (1-100, default: 10)
- **project** (string) - Optional - Filter to specific project (partial match)

### Request Example
{
  "count": 5,
  "project": "my-app"
}

### Response
#### Success Response (200)
- **content** (array) - List containing the formatted list of recent sessions

#### Response Example
{
  "content": [{"type": "text", "text": "📅 2024-03-22 | 📁 my-app/src | 156KB\n   ▶️ `claude -r session001`"}]
}
```

--------------------------------

### Search Claude Code Sessions

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Searches all Claude Code session transcripts for a given query string. It returns matching sessions along with context snippets and commands to resume those sessions. Options include limiting results, specifying a date range, and filtering by project.

```typescript
import { searchSessions } from "./search.js";

interface SessionMatch {
  sessionId: string;      // Unique session identifier
  projectDir: string;     // Cleaned project directory name
  date: string;           // ISO date string (YYYY-MM-DD)
  snippets: string[];     // Up to 3 preview snippets
  matchCount: number;     // Total number of keyword hits
  resumeCommand: string;  // Ready-to-use resume command
}

interface SearchOptions {
  maxResults?: number;    // Default: 10, max: 100
  daysBack?: number;      // Limit to recent sessions
  projectFilter?: string; // Partial match on project name
}

// Search for sessions containing "authentication"
const results: SessionMatch[] = await searchSessions("authentication", {
  maxResults: 10,
  daysBack: 30,
  projectFilter: "my-app"
});

// Results sorted by date descending (most recent first)
for (const match of results) {
  console.log(`${match.date}: ${match.projectDir}`);
  console.log(`  ${match.matchCount} matches`);
  console.log(`  Resume: ${match.resumeCommand}`);
  match.snippets.forEach(s => console.log(`  "${s}"`));
}

```

--------------------------------

### CSS: Nebula Gradient Background

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Defines a multi-layered radial gradient background for the '.hooman-face' element, creating a nebula-like visual effect. It uses absolute positioning to cover the entire element.

```css
.hooman-face::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(120, 60, 180, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(40, 140, 120, 0.2) 0%, transparent 45%), radial-gradient(ellipse at 50% 80%, rgba(60, 80, 180, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 20% 70%, rgba(180, 60, 100, 0.12) 0%, transparent 40%);
  pointer-events: none;
}
```

--------------------------------

### UI Mode Switching and Avatar Randomization

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Functions to toggle visibility between 'geek' and 'spicy' modes and a self-invoking function to randomize the Jerry avatar display name.

```javascript
function setMode(mode) { document.getElementById('geek-mode').classList.toggle('visible', mode === 'geek'); document.getElementById('spicy-mode').classList.toggle('visible', mode === 'spicy'); document.getElementById('tab-geek').classList.toggle('active', mode === 'geek'); document.getElementById('tab-spicy').classList.toggle('active', mode === 'spicy'); } (function() { var names = ['JG', 'LG', 'GG', 'TG']; var el = document.getElementById('jerry-avatar'); if (el) el.textContent = names[Math.floor(Math.random() * names.length)]; })();
```

--------------------------------

### Resume Session Command

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Shows the command to resume a specific past session. Once a session is identified (e.g., 'abc123'), Claude Code can provide a terminal command to re-enter that exact conversation, allowing the user to continue with the full context.

```bash
Claude: → Run this in your terminal:
              claude -r abc123
```

--------------------------------

### List Recent Nelly Sessions

Source: https://context7.com/spicyricecakes/nelly-elephant-mcp/llms.txt

Lists the most recent Claude Code sessions. This is useful when keywords are not remembered but the timeframe is recent. It accepts an optional count of sessions to list and a project name for filtering.

```typescript
server.tool(
  "nelly_recent",
  "List the most recent Claude Code sessions.",
  {
    count: z.number().int().min(1).max(100).optional().default(10),
    project: z.string().optional().describe("Filter to specific project (partial match)")
  },
  async ({ count, project }) => {
    const sessions = await listRecentSessions(count, project);

    // Returns list of recent sessions with dates, projects, sizes
    return { content: [{ type: "text", text: formatSessions(sessions) }] };
  }
);

```

--------------------------------

### Themed Canvas Face Styles

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Provides specific visual themes for different canvas faces, such as the Hooman and Claude modes, utilizing custom colors and typography.

```css
.canvas-face.hooman-face { background: #050a14; }
.canvas-face.hooman-face .col-name { color: #58a6ff; }
.canvas-face.claude-face { background: #0d0b09; }
.canvas-face.claude-face .col-name { color: #c9a84c; }
.canvas-face.claude-face .letter-body { font-family: 'EB Garamond', serif; }
```

--------------------------------

### IntersectionObserver for Animation Lifecycle

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Uses IntersectionObserver to trigger the animation loop only when the confetti section is visible in the viewport, optimizing performance.

```javascript
var confettiSection = canvas.parentElement; var observer = new IntersectionObserver(function(entries) { if (entries[0].isIntersecting) { if (!running) { running = true; resize(); requestAnimationFrame(update); } } else { running = false; } }, { threshold: 0 }); observer.observe(confettiSection);
```

--------------------------------

### CSS: Avatar Image Styling

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Styles an avatar image element with specific width and height properties.

```css
.avatar-img {
  width: 48px;
  he
```

--------------------------------

### CSS: Floating Emoji Animations

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

Implements animations for floating emojis within an '.emoji-field'. Multiple keyframe animations are defined for different drift directions (up, right, left, diagonal, down), controlled by CSS variables for animation type, duration, and delay.

```css
.emoji-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.floating-emoji {
  position: absolute;
  animation: var(--emoji-anim, emoji-drift-up) var(--float-dur, 20s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  animation-fill-mode: both;
  filter: blur(0.3px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-size: var(--emoji-size, 24px);
}

@keyframes emoji-drift-up {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translate(15px, -40vh) rotate(120deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(-10px, -90vh) rotate(240deg);
    opacity: 0;
  }
}

@keyframes emoji-drift-right {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translate(35vw, -15px) rotate(-90deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(70vw, 20px) rotate(-200deg);
    opacity: 0;
  }
}

@keyframes emoji-drift-left {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translate(-35vw, 10px) rotate(90deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(-70vw, -15px) rotate(200deg);
    opacity: 0;
  }
}

@keyframes emoji-drift-diag-ur {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translate(25vw, -30vh) rotate(150deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(50vw, -65vh) rotate(300deg);
    opacity: 0;
  }
}

@keyframes emoji-drift-diag-ul {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translate(-25vw, -30vh) rotate(-150deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50vw, -65vh) rotate(-300deg);
    opacity: 0;
  }
}

@keyframes emoji-drift-down {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  50% {
    transform: translate(-10px, 35vh) rotate(-100deg);
    opacity: 0.35;
  }
  100% {
    transform: translate(15px, 75vh) rotate(-220deg);
    opacity: 0;
  }
}
```

--------------------------------

### Confetti Particle Animation Loop

Source: https://github.com/spicyricecakes/nelly-elephant-mcp/blob/main/docs/index.html

The update function manages the physics, rendering, and lifecycle of confetti particles. It uses requestAnimationFrame for smooth updates and includes logic to settle particles on a floor plane.

```javascript
function update() { if (!running) return; frameCount++; var floorY = canvas.height - 20; ctx.clearRect(0, 0, canvas.width, canvas.height); if (frameCount % 3 === 0) emit(); for (var s2 = 0; s2 < settled.length; s2++) { var sp = settled[s2]; ctx.save(); ctx.globalAlpha = sp.alpha; ctx.fillStyle = sp.color; ctx.translate(sp.x, sp.y); ctx.rotate(sp.angle); if (sp.isRect) { ctx.fillRect(-sp.size, -sp.size*0.5, sp.size*2, sp.size); } else { ctx.beginPath(); ctx.arc(0,0,sp.size,0,Math.PI*2); ctx.fill(); } ctx.restore(); } for (var i = particles.length - 1; i >= 0; i--) { var p = particles[i]; p.x += p.vx; p.vy += p.gravity; p.y += p.vy; p.vx *= 0.995; p.angle += p.spin * 0.05; if (p.y >= floorY + (Math.random()-0.5)*20) { settled.push({ x:p.x, y:floorY+(Math.random()-0.5)*15-(settled.length*0.003), size:p.size, color:p.color, angle:p.angle, isRect:p.isRect, alpha:0.6+Math.random()*0.3 }); particles.splice(i,1); continue; } if (p.x < -20 || p.x > canvas.width+20) { particles.splice(i,1); continue; } ctx.save(); ctx.globalAlpha = 0.85; ctx.fillStyle = p.color; ctx.translate(p.x, p.y); ctx.rotate(p.angle); if (p.isRect) { ctx.fillRect(-p.size, -p.size*0.5, p.size*2, p.size); } else { ctx.beginPath(); ctx.arc(0,0,p.size,0,Math.PI*2); ctx.fill(); } ctx.restore(); } if (settled.length > 500) settled.splice(0, settled.length-500); if (particles.length > 150) particles.splice(0, particles.length-150); requestAnimationFrame(update); }
```