Grand Diomande Research · Full HTML Reader

CC Navigator - Hierarchical Knowledge Interface

``` ┌─────────────────────────────────────────────────────────────┐ │ CC Navigator (Next.js) │ │ ┌────────────────┐ ┌─────────────────────┐ │ │ │ Tree View │ │ Chat Interface │ │ │ │ - Folders │ │ - GPT-5.1 │ │ │ │ - Topics │◄────────────►│ - Context-aware │ │ │ │ - Breadcrumbs │ │ - Search mode │ │ │ └────────────────┘ └─────────────────────┘ │ │ │ │ │ │ └───────────────┬───────────────────┘ │ └──────────────────────────┼────────────────────────────────-─┘ │ HTTP API ┌──────────────────────────┼───────────────────

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

Full Public Reader

CC Navigator - Hierarchical Knowledge Interface

Interactive Next.js front-end for exploring your Computational Choreography knowledge base.

---

Features

### 🌲 Hierarchical Tree View
- File system-style organization of your 335 conversations
- Auto-organized by topics (LIM-RPS, Echelon, Music Production, etc.)
- Expandable/collapsible folders
- Click to navigate and set context

### 💬 Context-Aware Chat
- Conversations powered by GPT-5.1
- Automatically scoped to your current location in the tree
- Breadcrumb navigation shows your current context
- Chat responses use knowledge from your selected topic

### 📊 Graph Topology View
- D3.js force-directed visualization
- Interactive drag-and-drop nodes
- Visual representation of knowledge connections
- Switch between Tree and Graph views

### 🔍 Intelligent Search
- Toggle between Chat and Search modes
- Search scoped to current context
- Returns Q&A pairs with full context
- Powered by your existing cc_ai system

---

Architecture

┌─────────────────────────────────────────────────────────────┐
│                     CC Navigator (Next.js)                   │
│  ┌────────────────┐              ┌─────────────────────┐   │
│  │  Tree View     │              │   Chat Interface    │   │
│  │  - Folders     │              │   - GPT-5.1        │   │
│  │  - Topics      │◄────────────►│   - Context-aware  │   │
│  │  - Breadcrumbs │              │   - Search mode    │   │
│  └────────────────┘              └─────────────────────┘   │
│          │                                   │              │
│          └───────────────┬───────────────────┘              │
└──────────────────────────┼────────────────────────────────-─┘
                           │ HTTP API
┌──────────────────────────┼────────────────────────────────-─┐
│              Python API Server (Flask)                       │
│  ┌────────────────────────────────────────────────────┐    │
│  │  API Endpoints:                                    │    │
│  │  - /api/hierarchy    - Get knowledge tree          │    │
│  │  - /api/search       - Search knowledge            │    │
│  │  - /api/chat         - Send GPT-5.1 message       │    │
│  │  - /api/topology     - Get graph data              │    │
│  └────────────────────────────────────────────────────┘    │
│          │                           │                      │
│  ┌───────┴────────┐         ┌───────┴─────────┐           │
│  │   cc_ai.py     │         │   cc_chat.py    │           │
│  │   - Search     │         │   - GPT-5.1     │           │
│  │   - Embeddings │         │   - Context     │           │
│  └────────────────┘         └─────────────────┘           │
└──────────────────────────────────────────────────────────-─┘

---

Setup

1. Install Python Dependencies

bash
# From the cc-tpo directory
pip install flask flask-cors
# (other dependencies should already be installed)

2. Install Node Dependencies

bash
cd cc-navigator
npm install

3. Set OpenAI API Key (for Chat)

bash
export OPENAI_API_KEY="your-key-here"

4. Start the API Server

bash
# From the cc-tpo directory
python api_server.py

This starts the Flask server at `http://localhost:5000`

5. Start the Next.js Dev Server

bash
cd cc-navigator
npm run dev

This starts the Next.js app at `http://localhost:3000`

6. Open in Browser

Navigate to `http://localhost:3000`

---

Usage

Navigation

Left Sidebar:
- Tree View: File system organization by topics
- Graph View: D3.js force-directed visualization
- Click any node to set context
- Breadcrumbs show current path

Right Pane:
- Chat Interface: Context-aware conversations
- Search Mode: Toggle to search instead of chat
- Reset: Clear conversation history

Context-Aware Chat

When you click a node in the tree (e.g., "LIM-RPS" > "Core Architecture"):
- Breadcrumbs update: `Root > LIM-RPS > Core Architecture`
- Chat interface knows you're in that context
- Questions like "How does this work?" automatically scope to LIM-RPS
- GPT-5.1 receives your breadcrumb path for enhanced context

Search Mode

Toggle "Search Mode" to:
- Search across your knowledge base
- Filter by current topic
- Get Q&A results with full context
- No GPT-5.1 tokens used

---

Key Interactions

1. Explore by Topic

1. Click "Computational Choreography" folder
2. Click "LIM-RPS" subfolder
3. Click "Core Architecture" conversation
4. Ask: "Explain the convergence theory"
   → GPT-5.1 knows you're asking about LIM-RPS convergence

2. Search Within Context

1. Navigate to "Music Production"
2. Toggle "Search Mode"
3. Search: "mixing techniques"
   → Returns results only from Music Production conversations

3. Global Exploration

1. Click "Root" in breadcrumbs
2. Toggle "Graph View"
3. See all conversations visually
4. Click any node to navigate there

---

File Structure

cc-navigator/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Main page (tree + chat)
│   └── globals.css         # Global styles
├── components/
│   ├── KnowledgeTree.tsx   # Hierarchical tree component
│   ├── ChatInterface.tsx   # Chat + search interface
│   └── TopologyView.tsx    # D3.js graph visualization
├── types/
│   └── index.ts            # TypeScript types
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.ts          # Proxy API to Flask

---

API Endpoints

### GET /api/hierarchy
Returns hierarchical knowledge structure organized by topics.

Response:

json
{
  "root": {
    "id": "root",
    "name": "Root",
    "type": "folder",
    "children": [...]
  },
  "topics": ["computational_choreography", "music_production", ...],
  "stats": {
    "total_conversations": 335,
    "total_messages": 9572,
    "total_notes": 2158
  }
}

### POST /api/search
Search knowledge base.

Request:

json
{
  "query": "How does LIM-RPS work?",
  "topic": "computational_choreography",  // optional
  "top_k": 5
}

Response:

json
{
  "results": [
    {
      "type": "conversation_message",
      "score": 0.85,
      "role": "assistant",
      "content": "...",
      "user_question": "...",
      "conversation_title": "..."
    }
  ]
}

### POST /api/chat
Send message to GPT-5.1 with context.

Request:

json
{
  "message": "Explain convergence theory",
  "context_path": ["Root", "LIM-RPS", "Core Architecture"]
}

Response:

json
{
  "response": "Based on your previous work on LIM-RPS...",
  "status": "ok"
}

---

Customization

Add New View Modes

Edit `app/page.tsx` and `types/index.ts`:

typescript
type ViewMode = 'tree' | 'graph' | 'timeline' | 'map';

Create new component in `components/TimelineView.tsx` and add button in the view selector.

Modify Tree Organization

Edit `api_server.py` > `build_hierarchy()` to change how conversations are organized:

python
# Example: Group by date instead of topic
# or: Create custom folder structures
# or: Add metadata-based filtering

Customize Styling

Edit `app/globals.css` to change color scheme:

css
:root {
  --background: #0a0e1a;       /* Dark blue background */
  --accent-blue: #3b82f6;      /* Primary color */
  /* Change these to customize appearance */
}

---

Troubleshooting

"Failed to load knowledge"

Check that:
1. `data/unified_knowledge.json` exists
2. `data/embeddings/personal_embeddings.npy` exists
3. Flask API server is running

"CC Chat not available"

Set your OpenAI API key:

bash
export OPENAI_API_KEY="sk-..."

Port conflicts

Change ports in:
- `api_server.py`: `app.run(port=5000)`
- `next.config.ts`: `destination: 'http://localhost:5000'`

---

Development

Hot Reload

Both servers support hot reload:
- Next.js: Automatically reloads on file changes
- Flask: Runs with `debug=True` for auto-reload

Add New API Endpoints

1. Add endpoint in `api_server.py`:

python
@app.route('/api/my-endpoint', methods=['POST'])
def my_endpoint():
    # Your logic here
    return jsonify({'result': data})

2. Call from frontend:

typescript
const response = await fetch('/api/cc/my-endpoint', {
  method: 'POST',
  body: JSON.stringify({ ... })
});

---

Production Deployment

Build Next.js App

bash
cd cc-navigator
npm run build
npm run start

Run API Server with Gunicorn

bash
pip install gunicorn
gunicorn -w 4 -b [ip]:5000 api_server:app

Use Environment Variables

bash
export OPENAI_API_KEY="..."
export FLASK_ENV=production
export PORT=5000

---

Comparison with CLI Tools

Featurecc_ai.pycc_chat.pyCC Navigator
Search✅ CLI❌ No✅ GUI
Chat❌ No✅ CLI✅ GUI
Tree View❌ No❌ No✅ Yes
Graph View❌ No❌ No✅ Yes
Context Nav❌ Manual❌ Manual✅ Auto
Breadcrumbs❌ No❌ No✅ Yes

Use CC Navigator when:
- Visual exploration of knowledge
- Context-aware conversations
- Quick topic navigation
- Interactive graph visualization

Use CLI tools when:
- Quick terminal queries
- Scripting and automation
- No GUI needed

---

Next Steps

Completed Features:
- ✅ Hierarchical tree organization
- ✅ Context-aware chat with GPT-5.1
- ✅ D3.js graph visualization
- ✅ Integrated search
- ✅ Breadcrumb navigation

Future Enhancements:
- [ ] Timeline view (chronological)
- [ ] Map view (spatial clustering)
- [ ] Export conversations
- [ ] Annotation system
- [ ] Collaborative features
- [ ] Mobile responsive design
- [ ] Voice input

---

Your hierarchical knowledge navigator is ready! 🎭

Navigate your Computational Choreography knowledge with an intuitive file system interface while maintaining full conversational AI capabilities.

Promotion Decision

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

Source Anchor

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

Detected Structure

Method · Evaluation · Code Anchors · Architecture