agent-mode-in-visual-studio-code-8659072/copilot-modes-reference.html at main · LinkedInLearning/agent-mode-in-visual-studio-code-8659072 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copilot Chat Modes Reference</title>
    <style>
        body { font-family: system-ui, -apple-system, sans-serif; max-width: 720px; margin: 2rem auto; padding: 0 1rem; color: #1e1e1e; line-height: 1.6; }
        h1 { border-bottom: 2px solid #0078d4; padding-bottom: .5rem; }
        .mode { background: #f5f5f5; border-left: 4px solid #0078d4; padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; }
        .mode h2 { margin-top: 0; }
        .mode.agent  { border-color: #2ea043; }
        .mode.ask    { border-color: #0078d4; }
        .mode.plan   { border-color: #8957e5; }
        kbd { background: #e1e1e1; padding: 2px 6px; border-radius: 4px; font-size: .9em; }
        .tldr { font-size: 1.1em; font-weight: 600; margin-top: 2rem; }

        /* Dark mode toggle button */
        .theme-toggle { position: fixed; top: 1rem; right: 1rem; background: #e1e1e1; border: none; padding: .5rem .75rem; border-radius: 8px; cursor: pointer; font-size: 1.2em; transition: background .3s, color .3s; }
        .theme-toggle:hover { background: #ccc; }

        /* Dark mode overrides */
        body.dark { background: #1e1e1e; color: #d4d4d4; }
        body.dark .mode { background: #2d2d2d; }
        body.dark h1 { border-bottom-color: #3a9aed; }
        body.dark kbd { background: #3c3c3c; color: #d4d4d4; }
        body.dark .theme-toggle { background: #3c3c3c; color: #d4d4d4; }
        body.dark .theme-toggle:hover { background: #505050; }
    </style>
</head>
<body>
    <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
    <h1>GitHub Copilot Chat Modes</h1>
    <p>VS Code's Copilot Chat offers three interaction modes, each designed for a different stage of your workflow.</p>

    <div class="mode agent">
        <h2>🤖 Agent Mode</h2>
        <p><strong>Full autonomy</strong> — can read files, edit files, run terminal commands, and take multi-step actions to complete tasks.</p>
        <p><strong>Best for:</strong> implementing features, fixing bugs, refactoring code, running tests — anything that requires <em>making changes</em>.</p>
        <p>Works iteratively: it plans, executes, validates, and adjusts until the task is done.</p>
        <p>Shortcut: <kbd>⇧</kbd> <kbd>⌘</kbd> <kbd>I</kbd></p>
    </div>

    <div class="mode ask">
        <h2>❓ Ask Mode</h2>
        <p><strong>Read-only</strong> — can search and read the codebase but <strong>cannot</strong> modify files or run commands.</p>
        <p><strong>Best for:</strong> understanding code, getting explanations, asking architecture questions, debugging guidance, or learning how something works.</p>
        <p>Provides answers with references to specific files and code, but leaves implementation to you.</p>
    </div>

    <div class="mode plan">
        <h2>📋 Plan Mode</h2>
        <p><strong>Planning only</strong> — analyzes the codebase and produces a step-by-step plan for how to accomplish a task, but <strong>does not execute</strong> the plan.</p>
        <p><strong>Best for:</strong> scoping out work before committing to changes, reviewing an approach before implementation, or breaking down complex tasks.</p>
        <p>You can review and refine the plan, then switch to Agent mode to carry it out.</p>
    </div>

    <p class="tldr"><strong>In short:</strong> Ask = <em>explain</em> &nbsp;|&nbsp; Plan = <em>strategize</em> &nbsp;|&nbsp; Agent = <em>do</em></p>

    <script>
        const toggle = document.querySelector('.theme-toggle');
        const body = document.body;

        // Restore saved preference
        if (localStorage.getItem('theme') === 'dark') {
            body.classList.add('dark');
            toggle.textContent = '☀️';
        }

        toggle.addEventListener('click', () => {
            body.classList.toggle('dark');
            const isDark = body.classList.contains('dark');
            toggle.textContent = isDark ? '☀️' : '🌙';
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        });
    </script>
</body>
</html>