# Registration Agent Prototype Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build a new high-fidelity, demo-ready prototype UI for the registration review agent platform across homepage, knowledge base, document processing, agent workspace, MCP, Skills, and leadership dashboard screens.

**Architecture:** Keep the existing Django monolith and template routing boundaries, but replace the current visual system with a unified prototype shell and add a dedicated platform app for new governance pages. Use shared presentation data in service/view code so the pages tell one coherent business story without coupling design code to the existing agent execution internals.

**Tech Stack:** Django templates, Django views/URLs, Python service helpers, shared inline CSS in base template, existing forms/models where useful.

---

## File Structure

- Modify: `F:\PyCharm\DEMO-AGENT\templates\base.html`
- Modify: `F:\PyCharm\DEMO-AGENT\templates\scenarios\index.html`
- Modify: `F:\PyCharm\DEMO-AGENT\templates\documents\document_list.html`
- Modify: `F:\PyCharm\DEMO-AGENT\templates\documents\upload.html`
- Modify: `F:\PyCharm\DEMO-AGENT\templates\chat\index.html`
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\__init__.py`
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\apps.py`
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\views.py`
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\urls.py`
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\services.py`
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\knowledge_base.html`
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\mcp_center.html`
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\skill_studio.html`
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\command_center.html`
- Modify: `F:\PyCharm\DEMO-AGENT\config\settings.py`
- Modify: `F:\PyCharm\DEMO-AGENT\config\urls.py`
- Test: `F:\PyCharm\DEMO-AGENT\tests\`

### Task 1: Register the new platform prototype app

**Files:**
- Create: `apps/platform_ui/__init__.py`
- Create: `apps/platform_ui/apps.py`
- Create: `apps/platform_ui/views.py`
- Create: `apps/platform_ui/urls.py`
- Modify: `config/settings.py`
- Modify: `config/urls.py`

- [ ] **Step 1: Add the Django app module skeleton**

```python
from django.apps import AppConfig


class PlatformUiConfig(AppConfig):
    default_auto_field = "django.db.models.BigAutoField"
    name = "apps.platform_ui"
```

- [ ] **Step 2: Register the app in settings**

```python
INSTALLED_APPS = [
    # ...
    "apps.platform_ui",
]
```

- [ ] **Step 3: Add prototype page routes**

```python
urlpatterns = [
    path("platform/", include("apps.platform_ui.urls")),
]
```

- [ ] **Step 4: Define view names for prototype pages**

```python
urlpatterns = [
    path("knowledge-base/", views.knowledge_base, name="knowledge-base"),
    path("mcp-center/", views.mcp_center, name="mcp-center"),
    path("skills/", views.skill_studio, name="skills"),
    path("command-center/", views.command_center, name="command-center"),
]
```

- [ ] **Step 5: Run framework validation**

Run: `python manage.py check`
Expected: PASS with no URL or app import errors

### Task 2: Create shared presentation data for the new prototype

**Files:**
- Create: `apps/platform_ui/services.py`
- Modify: `apps/platform_ui/views.py`

- [ ] **Step 1: Define one coherent demo dataset**

```python
def get_platform_demo_context():
    return {
        "batch": {...},
        "knowledge_sources": [...],
        "mcp_connectors": [...],
        "skills": [...],
        "workflow_steps": [...],
    }
```

- [ ] **Step 2: Keep each page view thin**

```python
def knowledge_base(request):
    context = get_platform_demo_context()
    return render(request, "platform_ui/knowledge_base.html", context)
```

- [ ] **Step 3: Run framework validation**

Run: `python manage.py check`
Expected: PASS with importable views and service helpers

### Task 3: Replace the global visual system and navigation shell

**Files:**
- Modify: `templates/base.html`

- [ ] **Step 1: Rewrite the global shell**

```html
<body>
  <div class="app-shell">
    <aside class="sidebar">...</aside>
    <main class="main-shell">
      <header class="topbar">...</header>
      {% block content %}{% endblock %}
    </main>
  </div>
</body>
```

- [ ] **Step 2: Define the new design tokens and shared components**

```css
:root {
  --bg: #eef3f7;
  --surface: #f8fbfd;
  --panel: #ffffff;
  --ink: #102033;
  --accent: #1e5eff;
  --signal: #d77a2b;
}
```

- [ ] **Step 3: Add global helpers for panels, metric cards, timelines, tables, pills, and section headers**

```css
.panel { ... }
.metric-card { ... }
.section-heading { ... }
.timeline-step { ... }
.data-table { ... }
```

- [ ] **Step 4: Render shared navigation links to all prototype surfaces**

```html
<a href="{% url 'scenarios:index' %}">任务总览</a>
<a href="{% url 'platform_ui:knowledge-base' %}">知识库配置</a>
<a href="{% url 'documents:list' %}">文件中心</a>
<a href="{% url 'platform_ui:command-center' %}">工作台大屏</a>
```

- [ ] **Step 5: Open a few pages manually**

Run: `python manage.py runserver`
Expected: the shell renders and every nav item resolves

### Task 4: Redesign the homepage as the business-closure entry point

**Files:**
- Modify: `templates/scenarios/index.html`
- Modify: `apps/scenarios/views.py` if extra presentation fields are needed

- [ ] **Step 1: Add a structured homepage context if needed**

```python
return render(
    request,
    "scenarios/index.html",
    {
        "scenarios": list_scenarios(),
        "scenario_issues": list_scenario_issues(),
        "hero_metrics": [...],
        "workflow_overview": [...],
    },
)
```

- [ ] **Step 2: Replace the page body with hero, metrics, workflow strip, risk board, and quick-entry modules**

```html
<section class="hero-band">...</section>
<section class="metrics-grid">...</section>
<section class="workflow-strip">...</section>
<section class="two-column-board">...</section>
```

- [ ] **Step 3: Verify the homepage**

Run: `python manage.py runserver`
Expected: `/` shows the new dashboard-like homepage

### Task 5: Redesign the document pages around parsing and slicing workflow

**Files:**
- Modify: `templates/documents/document_list.html`
- Modify: `templates/documents/upload.html`
- Optionally modify: `apps/documents/views.py`

- [ ] **Step 1: Add any lightweight display-only summary fields in the view if needed**

```python
return render(
    request,
    "documents/document_list.html",
    {
        "documents": documents,
        "processing_summary": {...},
        "exception_items": [...],
    },
)
```

- [ ] **Step 2: Rebuild the list page into upload stats, pipeline board, anomaly box, and structured directory table**

```html
<section class="metrics-grid">...</section>
<section class="tri-column">...</section>
<section class="panel">
  <table class="data-table">...</table>
</section>
```

- [ ] **Step 3: Rebuild the upload page into a guided import experience**

```html
<section class="dropzone-panel">...</section>
<section class="checklist-panel">...</section>
```

- [ ] **Step 4: Verify both pages**

Run: `python manage.py runserver`
Expected: `/documents/` and `/documents/upload/` match the new prototype style

### Task 6: Redesign the chat page as a controlled audit workspace

**Files:**
- Modify: `templates/chat/index.html`
- Optionally modify: `apps/chat/views.py`

- [ ] **Step 1: Add presentation-only helper blocks if the existing context is too sparse**

```python
return render(
    request,
    "chat/index.html",
    {
        ...
        "task_modes": [...],
        "result_highlights": [...],
    },
)
```

- [ ] **Step 2: Replace the template with a three-zone workspace**

```html
<section class="workspace-grid">
  <div class="left-rail">...</div>
  <div class="conversation-stage">...</div>
  <div class="result-rail">...</div>
</section>
```

- [ ] **Step 3: Preserve the real form submission path while upgrading the visual output areas**

```html
<form method="post">...</form>
{% if result %} ... {% endif %}
```

- [ ] **Step 4: Verify one scenario page**

Run: `python manage.py runserver`
Expected: `/chat/<scenario_id>/` still submits and now renders as a workbench

### Task 7: Implement the governance and platform pages

**Files:**
- Create: `templates/platform_ui/knowledge_base.html`
- Create: `templates/platform_ui/mcp_center.html`
- Create: `templates/platform_ui/skill_studio.html`
- Create: `templates/platform_ui/command_center.html`
- Modify: `apps/platform_ui/views.py`
- Modify: `apps/platform_ui/services.py`

- [ ] **Step 1: Build the knowledge base page**

```html
<section class="three-column-board">...</section>
<section class="panel">...</section>
```

- [ ] **Step 2: Build the MCP center page**

```html
<section class="connector-grid">...</section>
<section class="import-flow">...</section>
```

- [ ] **Step 3: Build the Skill studio page**

```html
<section class="editor-layout">...</section>
<section class="version-board">...</section>
```

- [ ] **Step 4: Build the leadership command center page**

```html
<section class="command-stage">...</section>
<section class="risk-heatmap">...</section>
<section class="evidence-matrix">...</section>
```

- [ ] **Step 5: Verify page routing**

Run: `python manage.py check`
Expected: PASS and all `/platform/...` routes resolve

### Task 8: Regression, polish, and documentation sync

**Files:**
- Modify: `README.md` if navigation or page descriptions need updating
- Modify: `AGENTS.md` only if current implementation status needs sync

- [ ] **Step 1: Run core validation**

Run: `python manage.py check`
Expected: PASS

- [ ] **Step 2: Run targeted tests if template/view assumptions changed**

Run: `pytest`
Expected: PASS or clearly identified existing failures unrelated to the prototype

- [ ] **Step 3: Review the new screens for consistent terminology**

Check: page titles, batch name, product name, risk labels, and workflow terms all match the new design spec

- [ ] **Step 4: Update high-level documentation if needed**

```markdown
## 当前原型页面
- 任务总览
- 知识库配置
- 文件中心
- 审核工作台
- MCP 中心
- Skill Studio
- 工作台大屏
```

## Self-Review

- Spec coverage: the plan covers homepage, knowledge base, document center, chat workspace, MCP, Skill studio, and leadership dashboard.
- Placeholder scan: no TODO/TBD markers remain.
- Type consistency: route names, app names, and page concepts are consistent across tasks.
