@test328932/test328933 1.0.0

package/src/component-border.js

@@ -0,0 +1,839 @@
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+import generate from '@babel/generator'
+import * as t from '@babel/types'
+
+const BORDER_STYLE = '2px solid green'
+const traverseAst = traverse.default ?? traverse
+const generateCode = generate.default ?? generate
+
+/**
+ * Merges { border: '2px solid green' } into an existing style prop value.
+ * Works for: style={{ ... }}, style={someVar} (skipped), no style prop (added).
+ */
+function buildBorderStyleExpression(existingStyleExpr) {
+  const borderProp = t.objectProperty(
+    t.identifier('border'),
+    t.stringLiteral(BORDER_STYLE),
+  )
+
+  if (!existingStyleExpr) {
+    return t.objectExpression([borderProp])
+  }
+
+  if (t.isObjectExpression(existingStyleExpr)) {
+    // Clone and prepend the border property (existing values override it if they set border too)
+    return t.objectExpression([borderProp, ...existingStyleExpr.properties])
+  }
+
+  // For dynamic expressions like style={styles.foo}, use spread: { border, ...expr }
+  return t.objectExpression([borderProp, t.spreadElement(existingStyleExpr)])
+}
+
+/**
+ * Inject border style into the root JSX element of a return statement.
+ * Skips fragments (<> or <React.Fragment>) since they can't have styles.
+ */
+function injectBorderIntoJSX(jsxNode) {
+  if (!t.isJSXElement(jsxNode)) return  // skip fragments, non-JSX
+
+  const openingEl = jsxNode.openingElement
+  const stylePropIndex = openingEl.attributes.findIndex(
+    attr => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: 'style' }),
+  )
+
+  if (stylePropIndex === -1) {
+    // No style prop — add one
+    openingEl.attributes.push(
+      t.jsxAttribute(
+        t.jsxIdentifier('style'),
+        t.jsxExpressionContainer(buildBorderStyleExpression(null)),
+      ),
+    )
+  } else {
+    const existing = openingEl.attributes[stylePropIndex]
+    const valueNode = existing.value
+
+    let innerExpr = null
+    if (t.isJSXExpressionContainer(valueNode)) {
+      innerExpr = valueNode.expression
+    }
+
+    existing.value = t.jsxExpressionContainer(buildBorderStyleExpression(innerExpr))
+  }
+}
+
+function isComponentName(name) {
+  return typeof name === 'string' && /^[A-Z]/.test(name)
+}
+
+function isTopLevelDeclaration(path) {
+  const parent = path.parentPath
+  if (!parent) return false
+  if (parent.isProgram()) return true
+  if (parent.isExportNamedDeclaration() || parent.isExportDefaultDeclaration()) {
+    return parent.parentPath?.isProgram() ?? false
+  }
+  return false
+}
+
+function ensureBlockBody(functionNode) {
+  if (t.isBlockStatement(functionNode.body)) return
+  functionNode.body = t.blockStatement([t.returnStatement(functionNode.body)])
+}
+
+function buildCloseButton() {
+  return t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier('button'),
+      [
+        t.jsxAttribute(t.jsxIdentifier('type'), t.stringLiteral('button')),
+        t.jsxAttribute(
+          t.jsxIdentifier('onClick'),
+          t.jsxExpressionContainer(
+            t.arrowFunctionExpression(
+              [],
+              t.callExpression(t.identifier('setVisible'), [
+                t.arrowFunctionExpression(
+                  [t.identifier('prev')],
+                  t.unaryExpression('!', t.identifier('prev')),
+                ),
+              ]),
+            ),
+          ),
+        ),
+      ],
+      false,
+    ),
+    t.jsxClosingElement(t.jsxIdentifier('button')),
+    [t.jsxText('x')],
+    false,
+  )
+}
+
+function wrapWithVisibilityUI(jsxNode) {
+  return t.jsxFragment(
+    t.jsxOpeningFragment(),
+    t.jsxClosingFragment(),
+    [
+      buildCloseButton(),
+      t.jsxExpressionContainer(
+        t.conditionalExpression(
+          t.identifier('visible'),
+          jsxNode,
+          t.nullLiteral(),
+        ),
+      ),
+    ],
+  )
+}
+
+function wrapWithAppDrawer(jsxNode, todoPanelIdentifier) {
+  const layoutStyle = t.objectExpression([
+    t.objectProperty(t.identifier('display'), t.stringLiteral('flex')),
+    t.objectProperty(t.identifier('width'), t.stringLiteral('100vw')),
+    t.objectProperty(t.identifier('maxWidth'), t.stringLiteral('100vw')),
+  ])
+
+  const drawerStyle = t.objectExpression([
+    t.objectProperty(t.identifier('width'), t.stringLiteral('350px')),
+    t.objectProperty(t.identifier('minWidth'), t.stringLiteral('350px')),
+    t.objectProperty(t.identifier('padding'), t.stringLiteral('20px 14px')),
+    t.objectProperty(t.identifier('background'), t.stringLiteral('#102a43')),
+    t.objectProperty(t.identifier('color'), t.stringLiteral('#f0f4f8')),
+    t.objectProperty(t.identifier('minHeight'), t.stringLiteral('100vh')),
+    t.objectProperty(t.identifier('overflowY'), t.stringLiteral('auto')),
+  ])
+
+  const contentStyle = t.objectExpression([
+    t.objectProperty(t.identifier('flex'), t.numericLiteral(1)),
+    t.objectProperty(t.identifier('paddingLeft'), t.stringLiteral('16px')),
+  ])
+
+  const todoPanelJsx = t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier(todoPanelIdentifier.name),
+      [],
+      true,
+    ),
+    null,
+    [],
+    true,
+  )
+
+  return t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier('div'),
+      [
+        t.jsxAttribute(
+          t.jsxIdentifier('style'),
+          t.jsxExpressionContainer(layoutStyle),
+        ),
+      ],
+      false,
+    ),
+    t.jsxClosingElement(t.jsxIdentifier('div')),
+    [
+      t.jsxElement(
+        t.jsxOpeningElement(
+          t.jsxIdentifier('aside'),
+          [
+            t.jsxAttribute(
+              t.jsxIdentifier('style'),
+              t.jsxExpressionContainer(drawerStyle),
+            ),
+          ],
+          false,
+        ),
+        t.jsxClosingElement(t.jsxIdentifier('aside')),
+        [todoPanelJsx],
+        false,
+      ),
+      t.jsxElement(
+        t.jsxOpeningElement(
+          t.jsxIdentifier('div'),
+          [
+            t.jsxAttribute(
+              t.jsxIdentifier('style'),
+              t.jsxExpressionContainer(contentStyle),
+            ),
+          ],
+          false,
+        ),
+        t.jsxClosingElement(t.jsxIdentifier('div')),
+        [jsxNode],
+        false,
+      ),
+    ],
+    false,
+  )
+}
+
+function buildAutoTodoEffect(useEffectCallee, userEventIdentifier, screenIdentifier) {
+  return t.expressionStatement(
+    t.callExpression(t.cloneNode(useEffectCallee), [
+      t.arrowFunctionExpression(
+        [],
+        t.blockStatement([
+          t.variableDeclaration('const', [
+            t.variableDeclarator(
+              t.identifier('timer'),
+              t.callExpression(t.identifier('setTimeout'), [
+                t.arrowFunctionExpression(
+                  [],
+                  t.blockStatement([
+                    t.variableDeclaration('const', [
+                      t.variableDeclarator(
+                        t.identifier('user'),
+                        t.callExpression(
+                          t.memberExpression(
+                            t.cloneNode(userEventIdentifier),
+                            t.identifier('setup'),
+                          ),
+                          [],
+                        ),
+                      ),
+                    ]),
+                    t.variableDeclaration('const', [
+                      t.variableDeclarator(
+                        t.identifier('todoInput'),
+                        t.callExpression(
+                          t.memberExpression(
+                            t.cloneNode(screenIdentifier),
+                            t.identifier('getByPlaceholderText'),
+                          ),
+                          [t.stringLiteral('Add a todo...')],
+                        ),
+                      ),
+                    ]),
+                    t.expressionStatement(
+                      t.awaitExpression(
+                        t.callExpression(
+                          t.memberExpression(t.identifier('user'), t.identifier('type')),
+                          [t.identifier('todoInput'), t.stringLiteral('Plugin auto todo after 5s')],
+                        ),
+                      ),
+                    ),
+                    t.variableDeclaration('const', [
+                      t.variableDeclarator(
+                        t.identifier('addButton'),
+                        t.callExpression(
+                          t.memberExpression(
+                            t.cloneNode(screenIdentifier),
+                            t.identifier('getByRole'),
+                          ),
+                          [
+                            t.stringLiteral('button'),
+                            t.objectExpression([
+                              t.objectProperty(
+                                t.identifier('name'),
+                                t.regExpLiteral('add', 'i'),
+                              ),
+                            ]),
+                          ],
+                        ),
+                      ),
+                    ]),
+                    t.expressionStatement(
+                      t.awaitExpression(
+                        t.callExpression(
+                          t.memberExpression(t.identifier('user'), t.identifier('click')),
+                          [t.identifier('addButton')],
+                        ),
+                      ),
+                    ),
+                  ]),
+                  true,
+                ),
+                t.numericLiteral(5000),
+              ]),
+            ),
+          ]),
+          t.returnStatement(
+            t.arrowFunctionExpression(
+              [],
+              t.callExpression(t.identifier('clearTimeout'), [t.identifier('timer')]),
+            ),
+          ),
+        ]),
+      ),
+      t.arrayExpression([]),
+    ]),
+  )
+}
+
+function insertImportBeforeNonImport(programPath, importNode) {
+  const firstNonImportIndex = programPath.node.body.findIndex(node => !t.isImportDeclaration(node))
+  if (firstNonImportIndex === -1) {
+    programPath.node.body.push(importNode)
+  } else {
+    programPath.node.body.splice(firstNonImportIndex, 0, importNode)
+  }
+}
+
+function ensureNamedImport(programPath, moduleName, importedName, preferredLocalName = importedName) {
+  let moduleImportPath = null
+  let existingLocalName = null
+
+  programPath.get('body').forEach(statementPath => {
+    if (!statementPath.isImportDeclaration()) return
+    if (statementPath.node.source.value !== moduleName) return
+
+    if (!moduleImportPath) moduleImportPath = statementPath
+    statementPath.node.specifiers.forEach(specifier => {
+      if (
+        t.isImportSpecifier(specifier) &&
+        t.isIdentifier(specifier.imported, { name: importedName })
+      ) {
+        existingLocalName = specifier.local.name
+      }
+    })
+  })
+
+  if (existingLocalName) {
+    return t.identifier(existingLocalName)
+  }
+
+  const localName = programPath.scope.hasBinding(preferredLocalName)
+    ? `__${preferredLocalName}`
+    : preferredLocalName
+
+  if (moduleImportPath && !moduleImportPath.node.specifiers.some(t.isImportNamespaceSpecifier)) {
+    moduleImportPath.node.specifiers.push(
+      t.importSpecifier(t.identifier(localName), t.identifier(importedName)),
+    )
+    return t.identifier(localName)
+  }
+
+  const importNode = t.importDeclaration(
+    [t.importSpecifier(t.identifier(localName), t.identifier(importedName))],
+    t.stringLiteral(moduleName),
+  )
+  insertImportBeforeNonImport(programPath, importNode)
+  return t.identifier(localName)
+}
+
+function ensureDefaultImport(programPath, moduleName, preferredLocalName) {
+  let moduleImportPath = null
+  let existingLocalName = null
+
+  programPath.get('body').forEach(statementPath => {
+    if (!statementPath.isImportDeclaration()) return
+    if (statementPath.node.source.value !== moduleName) return
+
+    if (!moduleImportPath) moduleImportPath = statementPath
+    statementPath.node.specifiers.forEach(specifier => {
+      if (t.isImportDefaultSpecifier(specifier)) {
+        existingLocalName = specifier.local.name
+      }
+    })
+  })
+
+  if (existingLocalName) {
+    return t.identifier(existingLocalName)
+  }
+
+  const localName = programPath.scope.hasBinding(preferredLocalName)
+    ? `__${preferredLocalName}`
+    : preferredLocalName
+
+  if (moduleImportPath && !moduleImportPath.node.specifiers.some(t.isImportNamespaceSpecifier)) {
+    moduleImportPath.node.specifiers.unshift(t.importDefaultSpecifier(t.identifier(localName)))
+    return t.identifier(localName)
+  }
+
+  const importNode = t.importDeclaration(
+    [t.importDefaultSpecifier(t.identifier(localName))],
+    t.stringLiteral(moduleName),
+  )
+  insertImportBeforeNonImport(programPath, importNode)
+  return t.identifier(localName)
+}
+
+function ensureReactHookCallee(programPath, hookName) {
+  let reactImportPath = null
+  let namedHookLocal = null
+  let namespaceImportLocal = null
+  let defaultImportLocal = null
+
+  programPath.get('body').forEach(statementPath => {
+    if (!statementPath.isImportDeclaration()) return
+    if (statementPath.node.source.value !== 'react') return
+
+    if (!reactImportPath) reactImportPath = statementPath
+    statementPath.node.specifiers.forEach(specifier => {
+      if (
+        t.isImportSpecifier(specifier) &&
+        t.isIdentifier(specifier.imported, { name: hookName })
+      ) {
+        namedHookLocal = specifier.local.name
+      }
+      if (t.isImportNamespaceSpecifier(specifier)) {
+        namespaceImportLocal = specifier.local.name
+      }
+      if (t.isImportDefaultSpecifier(specifier)) {
+        defaultImportLocal = specifier.local.name
+      }
+    })
+  })
+
+  if (namedHookLocal) {
+    return t.identifier(namedHookLocal)
+  }
+
+  if (namespaceImportLocal) {
+    return t.memberExpression(t.identifier(namespaceImportLocal), t.identifier(hookName))
+  }
+
+  if (defaultImportLocal) {
+    return t.memberExpression(t.identifier(defaultImportLocal), t.identifier(hookName))
+  }
+
+  const localName = programPath.scope.hasBinding(hookName)
+    ? `__component${hookName[0].toUpperCase()}${hookName.slice(1)}`
+    : hookName
+
+  if (reactImportPath && !reactImportPath.node.specifiers.some(t.isImportNamespaceSpecifier)) {
+    reactImportPath.node.specifiers.push(
+      t.importSpecifier(t.identifier(localName), t.identifier(hookName)),
+    )
+    return t.identifier(localName)
+  }
+
+  const hookImport = t.importDeclaration(
+    [t.importSpecifier(t.identifier(localName), t.identifier(hookName))],
+    t.stringLiteral('react'),
+  )
+
+  insertImportBeforeNonImport(programPath, hookImport)
+
+  return t.identifier(localName)
+}
+
+function ensureUseStateCallee(programPath) {
+  return ensureReactHookCallee(programPath, 'useState')
+}
+
+function ensureUseEffectCallee(programPath) {
+  return ensureReactHookCallee(programPath, 'useEffect')
+}
+
+function transformComponentFunction(functionPath, useStateCallee, options = {}) {
+  const {
+    withAppDrawer = false,
+    withAutoTodo = false,
+    useEffectCallee = null,
+    userEventIdentifier = null,
+    screenIdentifier = null,
+    todoPanelIdentifier = null,
+  } = options
+  ensureBlockBody(functionPath.node)
+
+  if (
+    functionPath.scope.hasOwnBinding('visible') ||
+    functionPath.scope.hasOwnBinding('setVisible')
+  ) {
+    return false
+  }
+
+  const returnPaths = []
+  functionPath.get('body').traverse({
+    ReturnStatement(returnPath) {
+      if (returnPath.getFunctionParent() !== functionPath) return
+      const arg = returnPath.node.argument
+      if (t.isJSXElement(arg) || t.isJSXFragment(arg)) {
+        returnPaths.push(returnPath)
+      }
+    },
+  })
+
+  if (returnPaths.length === 0) return false
+
+  functionPath.node.body.body.unshift(
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.arrayPattern([t.identifier('visible'), t.identifier('setVisible')]),
+        t.callExpression(t.cloneNode(useStateCallee), [t.booleanLiteral(true)]),
+      ),
+    ]),
+  )
+
+  if (withAutoTodo && useEffectCallee && userEventIdentifier && screenIdentifier) {
+    functionPath.node.body.body.splice(
+      1,
+      0,
+      buildAutoTodoEffect(useEffectCallee, userEventIdentifier, screenIdentifier),
+    )
+  }
+
+  returnPaths.forEach(returnPath => {
+    let argument = returnPath.node.argument
+    if (!argument) return
+    if (t.isJSXElement(argument)) {
+      injectBorderIntoJSX(argument)
+    }
+    if (withAppDrawer && todoPanelIdentifier) {
+      argument = wrapWithAppDrawer(argument, todoPanelIdentifier)
+    }
+    returnPath.node.argument = wrapWithVisibilityUI(argument)
+  })
+
+  return true
+}
+
+export default function componentBorderPlugin() {
+  return {
+    name: 'vite-plugin-component-border',
+    enforce: 'pre',
+    transform(code, id) {
+      // Only process JSX/TSX files, skip node_modules
+      if (!/\.[jt]sx?$/.test(id) || id.includes('node_modules')) return
+      if (!code.includes('jsx') && !/<[A-Z]/.test(code) && !/<[a-z]/.test(code)) return
+
+      let ast
+      try {
+        ast = parse(code, {
+          sourceType: 'module',
+          plugins: ['jsx', 'typescript'],
+        })
+      } catch {
+        return // unparseable file — skip
+      }
+
+      let modified = false
+      let cachedUseStateCallee = null
+      let cachedUseEffectCallee = null
+      let cachedUserEventIdentifier = null
+      let cachedScreenIdentifier = null
+      let todoPanelInjected = false
+
+      const injectTodoPanelComponent = (programPath) => {
+        if (todoPanelInjected) return t.identifier('__TodoPanel')
+        todoPanelInjected = true
+
+        // Build the entire TodoPanel + API Objects + SourceExplorer component as AST and inject it into the file
+        const todoPanelCode = `
+function __TodoPanel() {
+  const [__todos, __setTodos] = __useState__Panel([]);
+  const [__input, __setInput] = __useState__Panel('');
+  const [__apiObjects, __setApiObjects] = __useState__Panel([]);
+  const [__isLoadingApi, __setIsLoadingApi] = __useState__Panel(false);
+  const [__tree, __setTree] = __useState__Panel([]);
+  const [__openedFile, __setOpenedFile] = __useState__Panel(null);
+  const [__activePath, __setActivePath] = __useState__Panel('');
+
+  __useEffect__Panel(() => {
+    fetch('/__source/tree')
+      .then(r => r.ok ? r.json() : [])
+      .then(data => Array.isArray(data) ? __setTree(data) : null)
+      .catch(() => {});
+  }, []);
+
+  const __addTodo = () => {
+    const trimmed = __input.trim();
+    if (!trimmed) return;
+    __setTodos(prev => [...prev, { id: Date.now(), text: trimmed, done: false }]);
+    __setInput('');
+  };
+  const __toggleTodo = (id) => {
+    __setTodos(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t));
+  };
+  const __deleteTodo = (id) => {
+    __setTodos(prev => prev.filter(t => t.id !== id));
+  };
+  const __saveTodos = () => {
+    fetch('/__save-list-items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(__todos) });
+  };
+  const __fetchApiObjects = () => {
+    __setIsLoadingApi(true);
+    fetch('https://api.restful-api.dev/objects')
+      .then(r => r.ok ? r.json() : [])
+      .then(data => { if (Array.isArray(data)) __setApiObjects(data); })
+      .catch(() => {})
+      .finally(() => __setIsLoadingApi(false));
+  };
+  const __saveApiObjects = () => {
+    fetch('/__save-api-objects', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(__apiObjects) });
+  };
+  const __openFile = (filePath) => {
+    __setActivePath(filePath);
+    fetch('/__source/file?path=' + encodeURIComponent(filePath))
+      .then(r => r.ok ? r.json() : null)
+      .then(data => { if (data && data.content) __setOpenedFile(data); })
+      .catch(() => {});
+  };
+  const __renderTree = (nodes) => {
+    return (
+      <ul style={{ listStyle: 'none', padding: '0 0 0 12px', margin: 0, fontSize: '11px' }}>
+        {nodes.map(node => (
+          <li key={node.path}>
+            {node.type === 'dir' ? (
+              <details>
+                <summary style={{ cursor: 'pointer', color: '#b0c4de', padding: '2px 0' }}>{node.name}</summary>
+                {node.children && node.children.length > 0 ? __renderTree(node.children) : null}
+              </details>
+            ) : (
+              <button onClick={() => __openFile(node.path)} style={{ background: 'none', border: 'none', color: __activePath === node.path ? '#48bb78' : '#90cdf4', cursor: 'pointer', padding: '2px 0', fontSize: '11px', textAlign: 'left', width: '100%' }}>{node.name}</button>
+            )}
+          </li>
+        ))}
+      </ul>
+    );
+  };
+  const __panelStyle = { color: '#f0f4f8', fontSize: '13px', width: '100%' };
+  const __inputStyle = { width: '100%', padding: '6px 8px', border: '1px solid #486581', borderRadius: '4px', background: '#1a3a5c', color: '#f0f4f8', fontSize: '12px', marginBottom: '6px', boxSizing: 'border-box' };
+  const __btnStyle = { width: '100%', padding: '5px', border: 'none', borderRadius: '4px', background: '#2d6a4f', color: '#fff', cursor: 'pointer', fontSize: '12px', marginBottom: '4px' };
+  const __btnSecondaryStyle = { width: '100%', padding: '5px', border: '1px solid #486581', borderRadius: '4px', background: 'transparent', color: '#90cdf4', cursor: 'pointer', fontSize: '12px', marginBottom: '4px' };
+  const __btnRowStyle = { display: 'flex', gap: '4px', marginBottom: '8px' };
+  const __listStyle = { listStyle: 'none', padding: 0, margin: 0 };
+  const __itemStyle = (done) => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', borderBottom: '1px solid #243b53', textDecoration: done ? 'line-through' : 'none', opacity: done ? 0.6 : 1, cursor: 'pointer', fontSize: '12px' });
+  const __deleteBtnStyle = { background: 'none', border: 'none', color: '#e63946', cursor: 'pointer', fontSize: '14px', padding: '0 4px' };
+  const __dividerStyle = { borderTop: '1px solid #243b53', margin: '12px 0', opacity: 0.5 };
+  const __apiItemStyle = { padding: '3px 0', borderBottom: '1px solid #243b53', fontSize: '11px', wordBreak: 'break-word' };
+  return (
+    <div style={__panelStyle}>
+      <h4 style={{ margin: '0 0 8px 0', fontSize: '14px' }}>Todo List</h4>
+      <input style={__inputStyle} value={__input} onChange={e => __setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && __addTodo()} placeholder="Add a todo..." />
+      <div style={__btnRowStyle}>
+        <button style={__btnStyle} onClick={__addTodo}>Add</button>
+        <button style={__btnSecondaryStyle} onClick={__saveTodos}>Save</button>
+      </div>
+      <ul style={__listStyle}>
+        {__todos.map(todo => (
+          <li key={todo.id} style={__itemStyle(todo.done)}>
+            <span onClick={() => __toggleTodo(todo.id)}>{todo.text}</span>
+            <button style={__deleteBtnStyle} onClick={() => __deleteTodo(todo.id)}>\\u00d7</button>
+          </li>
+        ))}
+      </ul>
+      {__todos.length === 0 && (
+        <p style={{ margin: '4px 0', opacity: 0.5, fontSize: '11px' }}>No todos yet.</p>
+      )}
+      <div style={__dividerStyle} />
+      <h4 style={{ margin: '0 0 8px 0', fontSize: '14px' }}>API Objects</h4>
+      <div style={__btnRowStyle}>
+        <button style={__btnStyle} onClick={__fetchApiObjects} disabled={__isLoadingApi}>{__isLoadingApi ? 'Loading...' : 'Fetch'}</button>
+        <button style={__btnSecondaryStyle} onClick={__saveApiObjects} disabled={__apiObjects.length === 0}>Save</button>
+      </div>
+      <ul style={__listStyle}>
+        {__apiObjects.map(obj => (
+          <li key={obj.id} style={__apiItemStyle}>{obj.name || obj.id}</li>
+        ))}
+      </ul>
+      {__apiObjects.length === 0 && (
+        <p style={{ margin: '4px 0', opacity: 0.5, fontSize: '11px' }}>No API objects loaded.</p>
+      )}
+      <div style={__dividerStyle} />
+      <h4 style={{ margin: '0 0 8px 0', fontSize: '14px' }}>Source Explorer</h4>
+      {__tree.length > 0 ? __renderTree(__tree) : <p style={{ opacity: 0.5, fontSize: '11px' }}>No source files.</p>}
+      {__openedFile && (
+        <textarea readOnly value={__openedFile.path + ':\\n' + __openedFile.content} style={{ width: '100%', minHeight: '120px', marginTop: '8px', padding: '6px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '10px', background: '#1a3a5c', color: '#e2e8f0', border: '1px solid #486581', borderRadius: '4px', boxSizing: 'border-box', whiteSpace: 'pre', resize: 'vertical' }} />
+      )}
+    </div>
+  );
+}
+`
+        const todoPanelAst = parse(todoPanelCode, {
+          sourceType: 'module',
+          plugins: ['jsx'],
+        })
+
+        // Ensure LlmExplainPanel import exists
+        const llmPanelId = ensureNamedImport(
+          programPath,
+          '@test328932/test328933/runtime',
+          'LlmExplainPanel',
+          'LlmExplainPanel',
+        )
+
+        // Rename __useState__Panel and __useEffect__Panel to the actual hook callees
+        const useStateId = ensureReactHookCallee(programPath, 'useState')
+        const useEffectId = ensureReactHookCallee(programPath, 'useEffect')
+        traverseAst(todoPanelAst, {
+          Identifier(idPath) {
+            if (idPath.node.name === '__useState__Panel') {
+              idPath.node.name = useStateId.name || 'useState'
+            }
+            if (idPath.node.name === '__useEffect__Panel') {
+              idPath.node.name = useEffectId.name || 'useEffect'
+            }
+          },
+          noScope: true,
+        })
+
+        // Inject <LlmExplainPanel sourcePath="App.tsx" /> as last child of the TodoPanel's return div
+        const llmPanelElement = t.jsxElement(
+          t.jsxOpeningElement(
+            t.jsxIdentifier(llmPanelId.name || 'LlmExplainPanel'),
+            [
+              t.jsxAttribute(
+                t.jsxIdentifier('sourcePath'),
+                t.stringLiteral('App.tsx'),
+              ),
+            ],
+            true,
+          ),
+          null,
+          [],
+          true,
+        )
+
+        // Find the top-level return statement in __TodoPanel and append LlmExplainPanel
+        // We need the return whose parent function is __TodoPanel itself, not nested functions
+        const todoPanelFunc = todoPanelAst.program.body[0]
+        if (t.isFunctionDeclaration(todoPanelFunc) && t.isBlockStatement(todoPanelFunc.body)) {
+          const bodyStatements = todoPanelFunc.body.body
+          for (let i = bodyStatements.length - 1; i >= 0; i--) {
+            const stmt = bodyStatements[i]
+            if (t.isReturnStatement(stmt) && t.isJSXElement(stmt.argument)) {
+              stmt.argument.children.push(llmPanelElement)
+              break
+            }
+          }
+        }
+
+        // Insert the TodoPanel function before the first non-import statement
+        const funcDecl = todoPanelAst.program.body[0]
+        insertImportBeforeNonImport(programPath, funcDecl)
+
+        return t.identifier('__TodoPanel')
+      }
+
+      const getTodoPanelIdentifier = path => {
+        const programPath = path.findParent(p => p.isProgram())
+        return injectTodoPanelComponent(programPath)
+      }
+
+      const getUseStateCallee = path => {
+        if (cachedUseStateCallee) return cachedUseStateCallee
+        const programPath = path.findParent(p => p.isProgram())
+        cachedUseStateCallee = ensureUseStateCallee(programPath)
+        return cachedUseStateCallee
+      }
+
+      const getUseEffectCallee = path => {
+        if (cachedUseEffectCallee) return cachedUseEffectCallee
+        const programPath = path.findParent(p => p.isProgram())
+        cachedUseEffectCallee = ensureUseEffectCallee(programPath)
+        return cachedUseEffectCallee
+      }
+
+      const getUserEventIdentifier = path => {
+        if (cachedUserEventIdentifier) return cachedUserEventIdentifier
+        const programPath = path.findParent(p => p.isProgram())
+        cachedUserEventIdentifier = ensureDefaultImport(
+          programPath,
+          '@testing-library/user-event',
+          'userEvent',
+        )
+        return cachedUserEventIdentifier
+      }
+
+      const getScreenIdentifier = path => {
+        if (cachedScreenIdentifier) return cachedScreenIdentifier
+        const programPath = path.findParent(p => p.isProgram())
+        cachedScreenIdentifier = ensureNamedImport(
+          programPath,
+          '@testing-library/dom',
+          'screen',
+          'screen',
+        )
+        return cachedScreenIdentifier
+      }
+
+      traverseAst(ast, {
+        // Top-level arrow/function component: const Foo = () => <div />
+        VariableDeclarator(path) {
+          if (!t.isIdentifier(path.node.id) || !isComponentName(path.node.id.name)) return
+          if (!isTopLevelDeclaration(path.parentPath)) return
+
+          const { init } = path.node
+          if (!init) return
+          if (!t.isArrowFunctionExpression(init) && !t.isFunctionExpression(init)) return
+
+          const initPath = path.get('init')
+          const useStateCallee = getUseStateCallee(path)
+          const isAppComponent = path.node.id.name === 'App'
+          if (
+            transformComponentFunction(initPath, useStateCallee, {
+              withAppDrawer: isAppComponent,
+              withAutoTodo: isAppComponent,
+              useEffectCallee: isAppComponent ? getUseEffectCallee(path) : null,
+              userEventIdentifier: isAppComponent ? getUserEventIdentifier(path) : null,
+              screenIdentifier: isAppComponent ? getScreenIdentifier(path) : null,
+              todoPanelIdentifier: isAppComponent ? getTodoPanelIdentifier(path) : null,
+            })
+          ) {
+            modified = true
+          }
+        },
+
+        // Top-level function component: function Foo() { return <div /> }
+        FunctionDeclaration(path) {
+          if (!path.node.id || !isComponentName(path.node.id.name)) return
+          if (!isTopLevelDeclaration(path)) return
+
+          const useStateCallee = getUseStateCallee(path)
+          const isAppComponent = path.node.id.name === 'App'
+          if (
+            transformComponentFunction(path, useStateCallee, {
+              withAppDrawer: isAppComponent,
+              withAutoTodo: isAppComponent,
+              useEffectCallee: isAppComponent ? getUseEffectCallee(path) : null,
+              userEventIdentifier: isAppComponent ? getUserEventIdentifier(path) : null,
+              screenIdentifier: isAppComponent ? getScreenIdentifier(path) : null,
+              todoPanelIdentifier: isAppComponent ? getTodoPanelIdentifier(path) : null,
+            })
+          ) {
+            modified = true
+          }
+        },
+      })
+
+      if (!modified) return
+
+      const output = generateCode(ast, { retainLines: true }, code)
+      return { code: output.code, map: output.map }
+    },
+  }
+}