feat: Add verbosity toggle

Author: kevinwang5658

.gitignore

@@ -11,3 +11,4 @@
 node_modules
 oclif.manifest.json
 .env
+.codify-files

package.json

@@ -145,7 +145,7 @@
     "deploy": "npm run pkg && npm run notarize && npm run upload",
     "prepublishOnly": "npm run build"
   },
-  "version": "1.0.2",
+  "version": "1.1.0-beta",
   "bugs": "https://github.com/codifycli/codify/issues",
   "keywords": [
     "oclif",

src/orchestrators/apply.ts

@@ -1,4 +1,5 @@
 import { ProcessName, ctx } from '../events/context.js';
+import { DefaultReporter } from '../ui/reporters/default-reporter.js';
 import { Reporter } from '../ui/reporters/reporter.js';
 import { sleep } from '../utils/index.js';
 import { PlanOrchestrator } from './plan.js';
@@ -28,6 +29,14 @@ export const ApplyOrchestrator = {
     const { plan, pluginManager, project } = planResult;
     const filteredPlan = plan.filterNoopResources()
 
+    let currentVerbosity = args.verbosityLevel ?? 0;
+    if (reporter instanceof DefaultReporter) {
+      reporter.onVerbosityToggle(async () => {
+        currentVerbosity = currentVerbosity === 0 ? 3 : 0;
+        await pluginManager.setVerbosityLevel(currentVerbosity);
+      });
+    }
+
     if (!args.noProgress) ctx.processStarted(ProcessName.APPLY);
     if (!args.noProgress) await reporter.displayProgress();
 

src/orchestrators/destroy.ts

@@ -5,6 +5,7 @@ import { ResourceConfig } from '../entities/resource-config.js';
 import { ResourceInfo } from '../entities/resource-info.js';
 import { ProcessName, SubProcessName, ctx } from '../events/context.js';
 import { PluginManager, ResourceDefinitionMap } from '../plugins/plugin-manager.js';
+import { DefaultReporter } from '../ui/reporters/default-reporter.js';
 import { PromptType, Reporter } from '../ui/reporters/reporter.js';
 import { wildCardMatch } from '../utils/wild-card-match.js';
 
@@ -53,6 +54,14 @@ export class DestroyOrchestrator {
 
     const filteredPlan = plan.filterNoopResources()
 
+    let currentVerbosity = args.verbosityLevel ?? 0;
+    if (reporter instanceof DefaultReporter) {
+      reporter.onVerbosityToggle(async () => {
+        currentVerbosity = currentVerbosity === 0 ? 3 : 0;
+        await pluginManager.setVerbosityLevel(currentVerbosity);
+      });
+    }
+
     await reporter.displayProgress();
     await ctx.process(ProcessName.DESTROY, () =>
       pluginManager.apply(destroyProject, filteredPlan)

src/ui/components/default-component.tsx

@@ -57,7 +57,7 @@ export function DefaultComponent(props: {
     }
     {
       renderStatus === RenderStatus.PROGRESS && (
-        <ProgressDisplay />
+        <ProgressDisplay emitter={emitter} />
       )
     }
     {

src/ui/components/progress/progress-display.tsx

@@ -1,7 +1,10 @@
-import { Box, Text } from 'ink';
+import { Box, Text, useInput } from 'ink';
 import { useAtom } from 'jotai';
-import React from 'react';
+import { EventEmitter } from 'node:events';
+import React, { useState } from 'react';
 
+import { ProcessName } from '../../../events/context.js';
+import { RenderEvent } from '../../reporters/reporter.js';
 import { store } from '../../store/index.js';
 import Spinner from './spinner.js';
 
@@ -21,8 +24,21 @@ export interface ProgressState {
   }> | null;
 }
 
-export function ProgressDisplay() {
+export function ProgressDisplay(props: { emitter: EventEmitter }) {
+  const { emitter } = props;
   const [progress] = useAtom(store.progressState);
+  const [isVerbose, setIsVerbose] = useState(false);
+
+  const isApplyOrDestroy = progress?.name === ProcessName.APPLY || progress?.name === ProcessName.DESTROY;
+
+  useInput((input) => {
+    if (!isApplyOrDestroy) return;
+    if (input === 'v') {
+      setIsVerbose((prev) => !prev);
+      emitter.emit(RenderEvent.TOGGLE_VERBOSITY);
+    }
+  });
+
   if (!progress) {
     return;
   }
@@ -38,6 +54,9 @@ export function ProgressDisplay() {
     <Box flexDirection="column" marginLeft={2}>
       <SubProgressDisplay subProgresses={subProgresses}/>
     </Box>
+    {isApplyOrDestroy && (
+      <Text dimColor>{isVerbose ? '[v] Hide verbose logs' : '[v] Show verbose logs'}</Text>
+    )}
   </Box>
 }
 

src/ui/reporters/default-reporter.tsx

@@ -46,6 +46,7 @@ const ProgressLabelMapping = {
 export class DefaultReporter implements Reporter {
   private renderEmitter = new EventEmitter();
   private progressState: ProgressState | null = null
+  private verbosityToggleCallback: (() => void) | null = null;
   silent = false;
 
   constructor() {
@@ -56,6 +57,14 @@ export class DefaultReporter implements Reporter {
     ctx.on(Event.PROCESS_FINISH, (name) => this.onProcessFinishEvent(name))
     ctx.on(Event.SUB_PROCESS_START, (name, additionalName) => this.onSubprocessStartEvent(name, additionalName));
     ctx.on(Event.SUB_PROCESS_FINISH, (name, additionalName) => this.onSubprocessFinishEvent(name, additionalName));
+
+    this.renderEmitter.on(RenderEvent.TOGGLE_VERBOSITY, () => {
+      this.verbosityToggleCallback?.();
+    });
+  }
+
+  onVerbosityToggle(callback: () => void): void {
+    this.verbosityToggleCallback = callback;
   }
 
   async promptPressKeyToContinue(message?: string): Promise<void> {

src/ui/reporters/reporter.ts

@@ -23,6 +23,7 @@ export enum RenderEvent {
   PROMPT_SUDO_GRANTED = 'promptSudoGranted',
   SUDO_PROMPT_RESULT = 'promptSudoResult',
   STATE_TRANSITION = 'stateTransition',
+  TOGGLE_VERBOSITY = 'toggleVerbosity',
 }
 
 /**