Grand Diomande Research · Full HTML Reader

CC Navigator - Quick Start Guide

A dual-pane interface where: - **Left**: File system-style tree of your 335 conversations - **Right**: Context-aware chat powered by GPT-5.1

Agents That Account for Themselves research note experiment writeup candidate score 24 .md

Full Public Reader

CC Navigator - Quick Start Guide

Get your hierarchical knowledge interface running in 5 minutes.

---

What You're Building

A dual-pane interface where:
- Left: File system-style tree of your 335 conversations
- Right: Context-aware chat powered by GPT-5.1

Click "LIM-RPS" → Ask "How does this work?" → Get answers scoped to LIM-RPS.

---

Prerequisites

Your CC AI system is already set up with:
- ✅ 335 conversations unified
- ✅ 11,230 embeddings generated
- ✅ cc_ai.py and cc_chat.py working

Now add the web interface.

---

Setup Steps

1. Install Python Dependencies (30 seconds)

bash

cd [home]/Desktop/Computational\ Choreography/cc-tpo
pip install flask flask-cors

2. Install Node Dependencies (2-3 minutes)

Note: You currently have a disk space issue. Once resolved:

bash

cd cc-navigator
npm install

If disk space is still an issue, you can:
- Free up space first
- Or run on a different machine with the code

3. Start API Server (Terminal 1)

bash

cd [home]/Desktop/Computational\ Choreography/cc-tpo
export OPENAI_API_KEY="your-key-here"  # Optional, for chat
python api_server.py

You should see:

🎭 CC API Server
==========================================
🌐 Starting server on http://localhost:5000

4. Start Next.js Dev Server (Terminal 2)

bash

cd cc-navigator
npm run dev

You should see:

▲ Next.js 15.0.0
- Local: http://localhost:3000

5. Open Browser

Navigate to: `http://localhost:3000`

---

First Usage

Explore the Tree

1. Left sidebar shows your knowledge organized by topics
2. Click folders to expand (computational_choreography, music_production, etc.)
3. Click a conversation to set context
4. Watch breadcrumbs update: `Root > LIM-RPS > Core Architecture`

Ask Context-Aware Questions

1. Navigate to: `Computational Choreography > LIM-RPS`
2. In chat: "How does this work?"
3. GPT-5.1 knows you're asking about LIM-RPS specifically
4. Get answers from YOUR 335 conversations + GPT-5.1 reasoning

Search Mode

1. Click "Search Mode" button
2. Search: "convergence theory"
3. Get Q&A results filtered to current topic
4. No GPT tokens used, instant results

Graph Visualization

1. Click "Graph View" button
2. See D3.js force-directed graph
3. Drag nodes around
4. Click to navigate
5. Zoom in/out

---

Quick Test

Test API Server

bash

curl http://localhost:5000/api/health
# Should return: {"status":"ok","cc_ai":true,"cc_chat":true}

Test Search

bash

curl -X POST http://localhost:5000/api/search \
  -H "Content-Type: application/json" \
  -d '{"query":"LIM-RPS","top_k":3}'

Test Hierarchy

bash

curl http://localhost:5000/api/hierarchy
# Should return JSON with root node and topics

---

File Structure Created

cc-tpo/
├── api_server.py              # ✅ Flask API backend
├── requirements.txt           # ✅ Python dependencies
│
└── cc-navigator/              # ✅ Next.js frontend
    ├── app/
    │   ├── layout.tsx         # Root layout
    │   ├── page.tsx           # Main interface
    │   └── globals.css        # Styles
    ├── components/
    │   ├── KnowledgeTree.tsx  # Tree view
    │   ├── ChatInterface.tsx  # Chat + search
    │   └── TopologyView.tsx   # Graph view
    ├── types/
    │   └── index.ts           # TypeScript types
    ├── package.json           # Dependencies
    ├── tsconfig.json          # TypeScript config
    ├── tailwind.config.ts     # Tailwind config
    └── next.config.ts         # Next.js config

---

Troubleshooting

Disk Space Error

The npm install failed due to no disk space. Solutions:

1. Free up space:

bash

# Check disk usage
df -h

# Clean npm cache
npm cache clean --force

# Clean Docker (if installed)
docker system prune -a

2. Install on different machine: Copy the `cc-navigator` folder to a machine with space

3. Use CDN builds: Modify to use CDN instead of npm (advanced)

Port Already in Use

If port 5000 or 3000 is taken:

Change API port:
Edit `api_server.py` line 243:

python

app.run(host='[ip]', port=5001)  # Changed from 5000

Then update `cc-navigator/next.config.ts`:

typescript

destination: 'http://localhost:5001/api/:path*',  // Changed from 5000

OpenAI API Key Not Set

Chat won't work without it. Search still works.

Set it:

bash

export OPENAI_API_KEY="sk-..."

Or add to `.env` file in cc-tpo directory.

---

What Makes This Different?

vs CLI Tools (cc_ai.py, cc_chat.py)

CLI:

bash

python cc_ai.py "How does LIM-RPS work?"
# Returns search results

python cc_chat.py
You> How does LIM-RPS work?
# Manual context, linear flow

Navigator:

1. Click: Computational Choreography > LIM-RPS
2. Ask: "How does this work?"
3. System knows context automatically
4. Visual navigation + conversation in one interface

Key Innovations

1. Context from Navigation
- Click location = automatic context
- Breadcrumbs show your position
- Chat knows where you are

2. Living File System
- Organized like folders
- But dynamic (conversations, not static files)
- Search within context

3. Hybrid Interface
- Tree view for structure
- Graph view for connections
- Chat for interaction
- Search for quick lookup

---

Example Workflow

Morning: Quick Research

1. Open Navigator
2. Click "Music Production > Mixing"
3. Search: "compression techniques"
4. Get instant results from mixing conversations
5. Click result to see full context

Afternoon: Deep Thinking

1. Navigate to "LIM-RPS > Convergence Theory"
2. Toggle Chat Mode
3. Ask: "How does proximal synthesis ensure convergence?"
4. GPT-5.1 responds with:
   - Your previous work on LIM-RPS
   - Specific convergence discussions
   - Technical details from that topic
5. Follow-up: "Compare to neural network convergence"
6. System maintains context

Evening: Visual Exploration

1. Toggle Graph View
2. See all conversations as connected nodes
3. Notice cluster of "Echelon + Music Production" discussions
4. Click cluster
5. Discover connection you forgot about
6. Chat about it with full context

---

Next Steps

Once running, try:

1. Explore Topics
- Click each folder
- See how conversations are organized
- Find connections you forgot

2. Test Context Awareness
- Navigate to specific conversation
- Ask generic question ("How does this work?")
- See how answer changes based on location

3. Compare Modes
- Try Search mode vs Chat mode
- See when each is useful
- Understand token usage

4. Customize
- Edit colors in `globals.css`
- Add new view modes
- Modify tree organization in `api_server.py`

---

Architecture Diagram

┌─────────────────────────────────────────────┐
│           Browser (localhost:3000)           │
│  ┌──────────────┐      ┌─────────────────┐ │
│  │ Tree View    │      │ Chat Interface  │ │
│  │ - Navigate   │◄────►│ - GPT-5.1      │ │
│  │ - Context    │      │ - Search        │ │
│  └──────────────┘      └─────────────────┘ │
└──────────────┬──────────────────────────────┘
               │ HTTP/JSON
┌──────────────▼──────────────────────────────┐
│      Flask API (localhost:5000)              │
│  ┌──────────────────────────────────────┐  │
│  │ /api/hierarchy  - Build tree         │  │
│  │ /api/search     - Search knowledge   │  │
│  │ /api/chat       - Send to GPT-5.1   │  │
│  └──────────────────────────────────────┘  │
│         ┌────────┴────────┐                 │
│   ┌─────▼─────┐    ┌──────▼──────┐         │
│   │  cc_ai    │    │  cc_chat    │         │
│   │  Search   │    │  GPT-5.1    │         │
│   └───────────┘    └─────────────┘         │
│         │                 │                  │
│   ┌─────▼─────────────────▼─────┐          │
│   │  data/unified_knowledge.json │          │
│   │  data/embeddings/            │          │
│   └──────────────────────────────┘          │
└─────────────────────────────────────────────┘

---

Summary

What you built:
- Hierarchical file system interface for 335 conversations
- Context-aware chat that knows where you are
- Integrated search scoped to topics
- D3.js graph visualization
- Breadcrumb navigation

Total setup time: ~5 minutes (after disk space is resolved)

Cost: $0 for search, ~$0.01-0.03 per GPT-5.1 message

Your knowledge base is now navigable like a file system while remaining conversational! 🎭

Promotion Decision

Attach run IDs, datasets, metrics, and reproduction commands.

Source Anchor

Comp-Core/backend/cc-trajectory/legacy/cc-tpo-original/cc-tpo/NAVIGATOR_QUICKSTART.md

Detected Structure

Method · Evaluation · Code Anchors · Architecture