plugin-examples/code-suggestions-plugin/code-suggestions-plugin.html at main · appdevforall/plugin-examples · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Suggestions Plugin</title>
<style>
  body {
    background: #ffffff;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 1.25rem;
    max-width: 820px;
  }
  h1 { font-size: 1.6rem; margin: 0 0 0.75rem; }
  h2 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.2rem; }
  code {
    background: #f4f4f4;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
  }
  ul { padding-left: 1.25rem; }
  li { margin: 0.3rem 0; }
  table { border-collapse: collapse; margin: 0.5rem 0; width: 100%; }
  th, td { border: 1px solid #ddd; padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
  th { background: #f4f4f4; }
  .note {
    border-left: 3px solid #999;
    padding: 0.25rem 0.75rem;
    margin: 1rem 0;
    background: #fafafa;
  }
</style>
</head>
<body>
  <h1>Code Suggestions Plugin</h1>

  <h2>Executive overview</h2>
  <p><b>Code Suggestions</b> adds inline <b>ghost-text</b> code completions to
  the CodeOnTheGo editor. As you type, it asks the on-device model provided by
  the companion <b>AI Core</b> plugin for a completion at the cursor and shows it
  as dimmed text you can accept or ignore.</p>
  <p>It is a <b>headless</b> plugin — it has no screens of its own. It depends on
  <b>AI Core</b> for inference, so <b>install AI Core first</b> and configure a
  local <code>.gguf</code> model in <b>AI Assistant → AI Settings</b>. Until AI
  Core is active the plugin stays silent and enables itself automatically once
  the inference service appears.</p>

  <h2>Core functionality</h2>
  <ul>
    <li><b>Inline ghost-text completions</b> at the cursor via the IDE's editor
      service.</li>
    <li><b>Debounced requests</b> — waits for a short pause in typing
      (<code>800&nbsp;ms</code>) before querying, to avoid a request per
      keystroke.</li>
    <li><b>LRU caching</b> — recent completions are cached (bounded) so repeated
      contexts don't re-query the model.</li>
    <li><b>Language-aware prompts</b> — the current language is passed to the
      model for more relevant completions.</li>
    <li><b>Graceful degradation</b> — no errors or noise when AI Core isn't
      loaded yet.</li>
  </ul>

  <h2>Technical architecture</h2>
  <table>
    <tr><th>Component</th><th>Role</th></tr>
    <tr><td><code>CodeSuggestionsPlugin</code></td><td>Plugin entry point.
      Registers an editor content-change listener, debounces changes, and
      displays/dismisses inline suggestions through
      <code>IdeEditorService</code>.</td></tr>
    <tr><td><code>SuggestionProvider</code></td><td>Builds the completion prompt
      from the bounded up-to-cursor context and calls AI Core's
      <code>LlmInferenceService</code>; maintains the LRU cache.</td></tr>
  </table>
  <p>Inference is delegated to <b>AI Core</b> over the shared service registry
  (<code>SharedServices</code>); this plugin contains no model or native code of
  its own.</p>

  <h2>Usage</h2>
  <ol>
    <li>Install <b>AI Core</b>, then <b>Code Suggestions</b>, via the Plugin
      Manager and restart the IDE.</li>
    <li>Select a local <code>.gguf</code> model in <b>AI Assistant → AI
      Settings</b>.</li>
    <li>Start typing in the editor. After a brief pause, a completion appears as
      ghost text at the cursor.</li>
    <li>Accept it by tapping <code>&#8633;</code> (the tab key) in the symbol row
      above the keyboard, or pressing <b>Tab</b> on a hardware keyboard. Keep
      typing, or move the cursor, to dismiss it.</li>
  </ol>
  <div class="note">
    <b>Privacy:</b> completions are generated by whichever backend you selected
    in AI Core. The surrounding file context is sent to that backend — it stays
    on the device with a <b>Local</b> model, but is sent to Google over HTTPS if
    you selected the <b>Gemini</b> backend. Choose the backend accordingly for
    sensitive code.
  </div>

  <h2>Key benefits</h2>
  <ul>
    <li><b>Backend of your choice</b> — runs fully on-device with a Local model,
      or uses the Gemini cloud backend if you prefer.</li>
    <li><b>Low overhead</b> — debouncing and caching keep model calls
      infrequent.</li>
    <li><b>Unobtrusive</b> — ghost text never edits your file until you accept
      it, and stays silent when a suggestion isn't available.</li>
    <li><b>Zero configuration</b> — reuses the model you already set up for AI
      Assistant.</li>
  </ul>
</body>
</html>