Get started
Agent Template

Principal Engineer Architecture Copilot

A chat-first software architecture and code review copilot that helps analyze designs, debug root causes, propose maintainable implementations, and produce production-ready technical guidance.

software-architecture code-review debugging performance security engineering-copilot
Use this template Back to List
x94xzv Jul 13, 2026 1 use

Preview Mode

This is a preview with sample data. The template uses placeholders like which will be replaced with actual agent data.

About This Template

Principal Engineer Architecture Copilot is a browser-executable AI agent template built on AgentOp. It runs entirely in the browser using Python (via Pyodide) and can be deployed without a server — just download the generated HTML file and open it locally or host it anywhere.

Topics software-architecture code-review debugging performance security engineering-copilot
Template Preview

Template Metadata

Slug
principal-engineer-architecture-copilot
Created By
x94xzv
Created
Jul 13, 2026
Usage Count
1

Tags

software-architecture code-review debugging performance security engineering-copilot

Code Statistics

HTML Lines
108
CSS Lines
231
JS Lines
188
Python Lines
36

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ agent_name }}</title>
  <style>{{ css_code }}</style>
</head>
<body>
  <div class="app-shell">
    <aside class="left-panel">
      <div class="brand-card">
        <div class="brand-emoji">🛠️</div>
        <div>
          <h1>{{ agent_name }}</h1>
          <p class="subtitle">Production-grade architecture, debugging, security, and performance guidance.</p>
        </div>
      </div>

      <section class="panel-section">
        <h2>🎯 Ask about</h2>
        <div class="chip-list" id="example-prompts"></div>
      </section>

      <section class="panel-section">
        <h2>📐 Response style</h2>
        <label class="field-label" for="mode-select">Engineering lens</label>
        <select id="mode-select" class="input-control">
          <option value="balanced">Balanced review</option>
          <option value="architecture">Architecture focus</option>
          <option value="debugging">Root-cause debugging</option>
          <option value="security">Security focus</option>
          <option value="performance">Performance focus</option>
        </select>

        <label class="checkbox-row">
          <input type="checkbox" id="include-risks" checked />
          <span>Include risks and trade-offs</span>
        </label>
        <label class="checkbox-row">
          <input type="checkbox" id="include-checklist" checked />
          <span>Include implementation checklist</span>
        </label>
      </section>

      <section class="panel-section tip-box">
        <h2>🔍 Best results</h2>
        <ul>
          <li>Paste the failing behavior, logs, or constraints.</li>
          <li>Name the language, framework, and deployment model.</li>
          <li>Ask for root cause, design, migration, or refactor guidance.</li>
          <li>Include non-functional requirements like latency or scale.</li>
        </ul>
      </section>
    </aside>

    <main class="main-panel">
      <section class="composer-card">
        <div class="composer-header">
          <div>
            <h2>💬 Engineering Workspace</h2>
            <p>Describe the system, bug, or design decision. Add code snippets, stack traces, or constraints.</p>
          </div>
          <button id="clear-chat-btn" class="secondary-btn" type="button">Clear workspace</button>
        </div>

        <form id="query-form" class="composer-form">
          <label class="field-label" for="query-input">Software engineering request</label>
          <textarea id="query-input" class="query-input" placeholder="Example: We have a Python FastAPI service that processes uploaded CSV files and sends jobs to workers. Under load, memory climbs and throughput drops. Help me find likely root causes, what to inspect first, and a robust redesign." rows="10"></textarea>

          <div class="actions-row">
            <button id="submit-btn" class="primary-btn" type="submit">Analyze system</button>
          </div>
          <div id="inline-error" class="inline-error hidden" role="alert"></div>
        </form>
      </section>

      <section class="results-card">
        <div class="results-header">
          <h2>🧠 Analysis</h2>
          <span id="status-badge" class="status-badge">Initializing…</span>
        </div>
        <div id="results-container" class="results-container"></div>
        <div id="empty-state" class="empty-state">
          <div class="empty-emoji">🚀</div>
          <h3>Ready for deep engineering analysis</h3>
          <p>Use this copilot for robust technical guidance across the lifecycle.</p>
          <ul>
            <li>🏗️ Architecture reviews and long-term design choices</li>
            <li>🐞 Root-cause debugging and failure analysis</li>
            <li>⚡ Performance, scalability, and resource efficiency</li>
            <li>🔐 Security, reliability, and maintainability improvements</li>
          </ul>
        </div>
      </section>
    </main>
  </div>

  <div id="loading-overlay" class="loading-overlay hidden" aria-hidden="true">
    <div class="spinner-card">
      <div class="spinner"></div>
      <p>Analyzing architecture and generating implementation guidance…</p>
    </div>
  </div>

  <script>{{ js_code }}</script>
</body>
</html>
:root {
  --bg: #0b1020;
  --panel: #121a30;
  --panel-2: #18223d;
  --surface: #0f1730;
  --text: #e7ecf7;
  --muted: #9fb0d1;
  --accent: #6ea8fe;
  --accent-2: #8b5cf6;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --border: rgba(255,255,255,0.1);
  --shadow: 0 20px 50px rgba(0,0,0,0.35);
  --radius: 18px;
  --radius-sm: 12px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: linear-gradient(180deg, #09101f 0%, #0d1530 100%); color: var(--text); font-family: var(--font); min-height: 100%; }
body { min-height: 100vh; }
.hidden { display: none !important; }

.app-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

.left-panel, .main-panel { min-width: 0; }
.brand-card, .panel-section, .composer-card, .results-card {
  background: rgba(18, 26, 48, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.brand-card {
  display: flex;
  gap: 14px;
  padding: 22px;
  margin-bottom: 18px;
  align-items: flex-start;
}
.brand-emoji { font-size: 2rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.45rem; margin-bottom: 8px; }
h2 { font-size: 1rem; margin-bottom: 12px; }
.subtitle { color: var(--muted); margin-bottom: 0; line-height: 1.5; }

.panel-section {
  padding: 18px;
  margin-bottom: 18px;
}
.tip-box ul, .empty-state ul { margin: 0; padding-left: 18px; color: var(--muted); }
.tip-box li, .empty-state li { margin-bottom: 8px; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-btn {
  border: 1px solid rgba(110,168,254,0.35);
  background: rgba(110,168,254,0.12);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.chip-btn:hover { background: rgba(110,168,254,0.2); }

.field-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
}
.input-control, .query-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(10,15,30,0.82);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
}
.input-control { margin-bottom: 14px; }
.query-input {
  min-height: 220px;
  resize: vertical;
  line-height: 1.6;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin: 10px 0;
}

.composer-card, .results-card { padding: 22px; }
.composer-header, .results-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.composer-form { display: flex; flex-direction: column; gap: 14px; }
.actions-row { display: flex; justify-content: flex-end; gap: 12px; }
.primary-btn, .secondary-btn {
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
}
.secondary-btn {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid var(--border);
}
.primary-btn:disabled, .secondary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.inline-error {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fecaca;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.92rem;
}
.results-container {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.message {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
}
.message.user { background: rgba(110,168,254,0.1); }
.message.assistant { background: rgba(139,92,246,0.08); }
.message-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.message-content {
  white-space: pre-wrap;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.empty-state {
  text-align: center;
  padding: 30px 18px 12px;
  color: var(--muted);
}
.empty-emoji { font-size: 2rem; margin-bottom: 12px; }

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.spinner-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  min-width: 280px;
  text-align: center;
  box-shadow: var(--shadow);
}
.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent);
  margin: 0 auto 14px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

:focus-visible {
  outline: 3px solid rgba(110,168,254,0.75);
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app-shell { padding: 14px; gap: 16px; }
  .composer-header, .results-header { flex-direction: column; align-items: stretch; }
  .actions-row { justify-content: stretch; }
  .primary-btn, .secondary-btn { width: 100%; }
}
const EXAMPLE_PROMPTS = [
  "Review this service design for scalability and failure modes",
  "Help me debug a memory leak in a worker pipeline",
  "Propose a secure architecture for file uploads and background processing",
  "Refactor this module plan to reduce coupling and improve maintainability"
];

const state = {
  pyodideReady: false,
  processing: false
};

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

function getEl(id) {
  return document.getElementById(id);
}

function setStatus(text) {
  getEl('status-badge').textContent = text;
}

function showError(message) {
  const errorEl = getEl('inline-error');
  errorEl.textContent = message;
  errorEl.classList.remove('hidden');
}

function clearError() {
  const errorEl = getEl('inline-error');
  errorEl.textContent = '';
  errorEl.classList.add('hidden');
}

function setProcessing(isProcessing) {
  state.processing = isProcessing;
  getEl('submit-btn').disabled = isProcessing;
  getEl('clear-chat-btn').disabled = isProcessing;
  getEl('query-input').disabled = isProcessing;
  getEl('mode-select').disabled = isProcessing;
  getEl('include-risks').disabled = isProcessing;
  getEl('include-checklist').disabled = isProcessing;
  getEl('loading-overlay').classList.toggle('hidden', !isProcessing);
  setStatus(isProcessing ? 'Analyzing…' : (state.pyodideReady ? 'Ready' : 'Initializing…'));
}

function ensureReady() {
  if (!state.pyodideReady) {
    showError('The engineering copilot is still initializing. Please wait a moment and try again.');
    return false;
  }
  if (window.PROVIDER === 'local') {
    if (!(window.agentManager && window.agentManager.isLoaded)) {
      showError('Please load a local model from the model bar at the top before running the engineering analysis.');
      setStatus('Model not loaded');
      return false;
    }
  }
  return true;
}

function addMessage(type, content) {
  const results = getEl('results-container');
  const emptyState = getEl('empty-state');
  emptyState.classList.add('hidden');

  const wrapper = document.createElement('div');
  wrapper.className = `message ${type}`;

  const label = document.createElement('div');
  label.className = 'message-label';
  label.textContent = type === 'user' ? 'Engineer request' : 'Copilot analysis';

  const body = document.createElement('div');
  body.className = 'message-content';
  body.innerHTML = escapeHtml(content);

  wrapper.appendChild(label);
  wrapper.appendChild(body);
  results.appendChild(wrapper);
  results.scrollTop = results.scrollHeight;
  return body;
}

window.addMessage = addMessage;

function clearWorkspace() {
  getEl('results-container').innerHTML = '';
  getEl('empty-state').classList.remove('hidden');
  clearError();
}

async function runAnalysis(query) {
  window.pyodide.globals.set('user_query', query);
  const result = await window.pyodide.runPythonAsync('await process_user_query(user_query)');
  return result;
}

async function handleSubmit(event) {
  event.preventDefault();
  clearError();

  const queryText = getEl('query-input').value.trim();
  const mode = getEl('mode-select').value;
  const includeRisks = getEl('include-risks').checked;
  const includeChecklist = getEl('include-checklist').checked;

  if (!queryText) {
    showError('Please describe the software architecture, bug, code issue, or optimization target you want analyzed.');
    return;
  }
  if (!ensureReady()) {
    return;
  }

  const composedQuery = [
    `Engineering lens: ${mode}`,
    `Include risks and trade-offs: ${includeRisks ? 'yes' : 'no'}`,
    `Include implementation checklist: ${includeChecklist ? 'yes' : 'no'}`,
    '',
    queryText
  ].join('\n');

  addMessage('user', composedQuery);
  setProcessing(true);

  try {
    const assistantBody = addMessage('assistant', 'Working on a root-cause-first engineering analysis...');
    const result = await runAnalysis(composedQuery);
    assistantBody.innerHTML = escapeHtml(result || 'No analysis was returned.');
    setStatus('Ready');
  } catch (error) {
    showError(`Analysis failed: ${error && error.message ? error.message : String(error)}`);
    setStatus('Error');
  } finally {
    setProcessing(false);
  }
}

function renderExamplePrompts() {
  const container = getEl('example-prompts');
  container.innerHTML = '';
  EXAMPLE_PROMPTS.forEach((promptText) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'chip-btn';
    btn.textContent = promptText;
    btn.addEventListener('click', () => {
      getEl('query-input').value = promptText;
      getEl('query-input').focus();
    });
    container.appendChild(btn);
  });
}

function wireEvents() {
  getEl('query-form').addEventListener('submit', handleSubmit);
  getEl('clear-chat-btn').addEventListener('click', clearWorkspace);
  getEl('mode-select').addEventListener('change', clearError);
  getEl('include-risks').addEventListener('change', clearError);
  getEl('include-checklist').addEventListener('change', clearError);
}

function markReady() {
  state.pyodideReady = true;
  setStatus('Ready');
}

function initUi() {
  renderExamplePrompts();
  wireEvents();
  clearWorkspace();
  if (window.pyodideReady) {
    markReady();
  } else {
    setStatus('Initializing…');
  }
}

window.addEventListener('DOMContentLoaded', initUi);
document.addEventListener('pyodide-ready', markReady);
async def process_user_query(query: str) -> str:
    """Generate software engineering guidance for an architecture or debugging request.

    Args:
        query: The user's engineering request, including system context and constraints.

    Returns:
        A production-focused response with root-cause analysis, design guidance, and concrete next steps.
    """
    q = (query or '').strip()
    if not q:
        return 'Please provide a software engineering request to analyze.'

    max_chars = int('[[[MAX_CHARS|6000]]]')
    if len(q) > max_chars:
        q = q[:max_chars] + '\n\n[Truncated to fit analysis budget.]'

    system_prompt = globals().get('TEMPLATE_SYSTEM_PROMPT', '')
    if not system_prompt:
        system_prompt = (
            'You are an elite principal software engineer and systems architect. '
            'Be practical, precise, and production-focused. '
            'Find root causes, not symptoms. '
            'Do not assume unknown APIs or implementation details; state assumptions explicitly. '
            'Prefer maintainable, secure, scalable designs. '
            'When useful, structure the answer as: Understanding, Likely Root Causes, What To Inspect, '
            'Recommended Design or Fix, Risks and Trade-offs, and Implementation Checklist. '
            'If the user did not provide code, do not invent it. Ask for the minimum missing details only when necessary, '
            'but still provide the best actionable guidance possible.'
        )

    if 'process_user_query_wllama' in globals():
        return await process_user_query_wllama(q, system_prompt)
    if 'process_user_query_cloud' in globals():
        return await process_user_query_cloud(q, system_prompt)
    return 'The language model runtime is not available yet. Please try again in a moment.'