SLOPSHOPPER

env-example

List variable names and missing placeholders in an example env file.

newpanecommand
A shopper browsing a rack in a slop shop
Preview · a replayed session in a sandbox
claude · ~/work/app · env-example
│ ┃ Env Example ✕ › fix the failing auth test and add an audit log call │ ┃ Env Example │ ┃ ⏺ Read(src/auth.ts) │ ┃ List variable names and missing placeholders ⎿ Read 6 lines │ ┃ in an example env file. ⏺ Update(src/auth.ts) │ ┃ ⎿ Added 2 lines, removed 1 line │ ┃ File: .env.example ⏎ open ⏺ Bash(bun test) │ ┃ ⎿ 3 pass, 1 fail │ ┃ Could not inspect file: ENOENT: .env.example │ ┃ ● Done. refresh now rejects expired claims and logs an audit event. │ ┃ [ Read file again ] │ ✻ Worked for 42s · done 4:20 PM │ │ › /env-example │ │ ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── › ? for shortcuts

Draws

Pane · Env Example
Env Example List variable names and missing placeholders in an example env file. File: .env.example ⏎ open Could not inspect file: ENOENT: .env.example [ Read file again ]
README

Env Example

List variable names and missing placeholders in an example env file.

Use it when: Review setup requirements without reading your real .env.

Env Example render preview

Screenshot of this mod's render tree in the fixture preview, with sample data. This is not a capture of the Claude Code application. How previews are made.

Install and open

claude plugin marketplace add whyashthakker/awesome-claude-code-mods
claude plugin install env-example@awesome-claude-code-mods

Run /reload-plugins in an existing session, then /env-example. Use Tab and Enter to operate controls; Esc closes the pane. Terminal and Desktop Code tab supported; pane UI is unavailable in claude -p and the VS Code chat panel.

Try the source without installing:

claude --plugin-dir ./mods/env-example

Example: open /env-example and enter .env.example in its input.

Access and behavior

Reads only paths named env example, sample, or template (up to 256 KiB). Displays variable names and placeholder presence; no values.

Module variables reset on hot reload. All display output is bounded; viewers may truncate long content to 9,000 characters. Relative file paths and Git commands use the session working directory.

Verify

Tested with Claude Code 2.1.288. Minimum documented mods version: 2.1.287. The API can change; validate against your installed version.

claude plugin validate mods/env-example --strict
claude plugin test mods/env-example

Tests cover plugin commands, pane isolation, both UI surfaces, and the behavior described in tests/register.test.ts. Drawing tests validate element trees; they do not verify pixels painted by the native apps. Validation details.

MIT licensed. No runtime packages or build step required.

Source 2 files
hooks/register.js 59 lines
1import { clean, text, code, row, frame, bar, pretty, bounded, entries, safePath } from './ui.js'
2const ID = "env-example"
3let target=".env.example"
4let report='Open a file to inspect it.'
5
6
7function transform(source) {
8 return source.split('\n').flatMap((line,i)=>{
9  const m=line.match(/^\s*(?:export\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*)$/)
10  return m ? [(i+1)+': '+m[1]+' · '+(m[2].trim()?'example value provided':'value needed')] : []
11 }).join('\n') || 'No variable assignments found.'
12}
13
14
15async function load($) {
16 try {
17  const path = safePath(target)
18  if(!/(?:^|\/)\.?env(?:\.[\w-]+)*\.(example|sample|template)$/.test(path)) throw new Error('Choose an env example, sample, or template file; real env files are refused.')
19  const info = await $.fs.stat(path)
20  if(info.isLink)throw new Error('Symlink env example files are refused.')
21  if(info.size > 262144) throw new Error('File exceeds the 256 KiB viewer limit.')
22  const source = await $.fs.read(path)
23  report = transform(source)
24 } catch(error) { report='Could not inspect file: '+error.message }
25 $.ui.invalidate('ui.render')
26}
27
28export function register(on) {
29  on('session.start', async ($, e, next) => {
30
31    await $.command.register({name:ID, description:"List variable names and missing placeholders in an example env file.", immediate:true, argumentHint:"[path]"})
32    return next(e)
33  })
34  on('command.run', {command:"env-example"}, async ($, e) => {
35    if(e.args.trim()) target=e.args.trim()
36await load($)
37    await $.ui.open({id:ID,title:"Env Example",focus:true,closeOnEscape:true})
38    return {}
39  })
40
41  on('ui.render', {component:'Pane'}, async ($, e, next) => {
42    if(e.requestId !== ID) return next(e)
43    const E = $.ui.resolve(e)
44    try {
45      const body = await draw($, E)
46      return frame(E,"Env Example","List variable names and missing placeholders in an example env file.",body)
47    } catch(error) {
48      return frame(E,"Env Example",'Unable to inspect this data.',[text(E,error.message,{color:'yellow'}),E.Button({key:'refresh',label:'Refresh',onPress:()=>$.ui.invalidate('ui.render')})])
49    }
50  })
51}
52async function draw($, E) {
53  const refresh = E.Button({key:'refresh',label:'Refresh',hotkey:'r',plain:true,onPress:()=>$.ui.invalidate('ui.render')})
54
55return [E.Input({key:'target',label:'File',value:target,submitLabel:'open',onSubmit:async(value)=>{target=value;await load($)}}),
56 code(E,report,"text"),E.Button({key:'refresh',label:'Read file again',onPress:()=>load($)})]
57
58}
59
hooks/ui.js 36 lines
1// Pure UI helpers. No engine access; each plugin contains its own copy.
2export function clean(value, limit = 9000) {
3  return String(value ?? '').replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, '').slice(0, limit)
4}
5export function text(E, value, props = {}) {
6  return E.Text({ ...props, children: [clean(value)] })
7}
8export function code(E, value, language = 'text') {
9  return E.Code({ source: clean(value), language })
10}
11export function row(E, children) {
12  return E.Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children })
13}
14export function frame(E, title, subtitle, children) {
15  return E.Box({ flexDirection: 'column', gap: 1, children: [
16    text(E, title, { bold: true, color: 'cyan' }),
17    text(E, subtitle, { dimColor: true }), ...children,
18  ] })
19}
20export function bar(percent, width = 24) {
21  const p = Math.max(0, Math.min(100, Number(percent) || 0))
22  const n = Math.round(p / 100 * width)
23  return '[' + '#'.repeat(n) + '-'.repeat(width - n) + '] ' + p.toFixed(1) + '%'
24}
25export function pretty(value) { return JSON.stringify(value, null, 2) }
26export function bounded(value, max = 9000) {
27  if (value.length > max) throw new Error('Input exceeds ' + max + ' characters. Use a smaller selection.')
28  return value
29}
30export function entries(value) { return value && typeof value === 'object' ? Object.entries(value) : [] }
31export function safePath(value) {
32  const path = value.trim()
33  if (!path || path.startsWith('-') || /[\x00-\x1f]/.test(path)) throw new Error('Enter a path without control characters or leading flags.')
34  return path
35}
36