Envisiage

Envisiage is an inline code tutor built on a multi-file Monaco editor: select any span of code, press a shortcut, and an AI explanation streams into a resizable panel anchored to that selection, with room for follow-up questions underneath it. Multiple annotations can sit open at once, each one scoped to the exact lines it explains rather than to the file as a whole.

What makes the explanations actually useful across skill levels is a small "granularity" layer sitting in front of the explain prompt. Rather than writing four separate prompts, there's one explanation prompt and four short natural-language modifiers keyed off a single type, each steering the same request toward a different kind of answer.

export type Granularity = 'eli5' | 'step-through' | 'technical' | 'debug';

const GRANULARITY_MODIFIERS: Record<Granularity, string> = {
  eli5:
    "Explain like I'm a beginner. No assumed programming knowledge. Use simple analogies and avoid jargon. If you must use a technical term, define it in one sentence.",
  'step-through':
    'Walk through the logic line by line, step by step. Number each step. Describe what happens at each line and how it leads to the next.',
  technical:
    "Assume I know the language. Explain the *why* — design choices, performance implications, or idioms — not the *what*. Be concise and precise.",
  debug:
    "I think something might be wrong here. Help me find it. Consider edge cases, off-by-one errors, and common pitfalls. Suggest what to check or log."
};

export function getGranularityModifier(granularity: Granularity): string {
  return GRANULARITY_MODIFIERS[granularity] ?? '';
}

That modifier gets appended onto the underlying explain prompt before it ever reaches the model, so switching from "ELI5" to "Debug" on the same selection doesn't call a different endpoint or template: it's the same request with a different lens bolted on, which keeps the follow-up Q&A path consistent no matter which granularity a student picked to get there.