feat: Improved log output

Author: kevinwang5658

src/commands/apply.ts

@@ -30,6 +30,10 @@ For more information, visit: https://codifycli.com/docs/commands/apply
       char: 'y',
       default: false,
     }),
+    'verbose': Flags.boolean({
+      char: 'v',
+      description: 'Print plugin output (stdout/stderr) to the terminal.',
+    }),
   }
 
   static args = {
@@ -57,7 +61,7 @@ For more information, visit: https://codifycli.com/docs/commands/apply
 
     await ApplyOrchestrator.run({
       path: flags.path ?? args.pathArgs,
-      verbosityLevel: flags.debug ? 3 : 0,
+      verbosityLevel: flags.debug || flags.verbose ? 3 : 0,
       autoApprove: flags.yes,
       // secure: flags.secure,
     }, this.reporter);

src/commands/destroy.ts

@@ -38,6 +38,10 @@ For more information, visit: https://codifycli.com/docs/commands/destory`
       char: 'y',
       default: false,
     }),
+    'verbose': Flags.boolean({
+      char: 'v',
+      description: 'Print plugin output (stdout/stderr) to the terminal.',
+    }),
   }
 
   public async run(): Promise<void> {
@@ -52,7 +56,7 @@ For more information, visit: https://codifycli.com/docs/commands/destory`
       .map((r) => r.input);
 
     await DestroyOrchestrator.run({
-      verbosityLevel: flags.debug ? 3 : 0,
+      verbosityLevel: flags.debug || flags.verbose ? 3 : 0,
       typeIds: args,
       path: flags.path,
       autoApprove: flags.yes,

src/events/context.ts

@@ -65,7 +65,8 @@ export const ctx = new class {
   }
 
   log(...args: unknown[]) {
-    this.emitter.emit(Event.STDOUT, ...args);
+    const message = args.join(' ');
+    this.emitter.emit(Event.STDOUT, message.endsWith('\n') ? message : message + '\n');
   }
 
   pluginStdout(name: string, ...args: unknown[]) {
@@ -82,7 +83,8 @@ export const ctx = new class {
       return;
     }
 
-    this.emitter.emit(Event.DEBUG, ...args);
+    const message = args.join(' ');
+    this.emitter.emit(Event.DEBUG, message.endsWith('\n') ? message : message + '\n');
   }
 
   async process<T>(name: string, fn: (() => Promise<T>)): Promise<T> {

src/ui/components/default-component.tsx

@@ -1,6 +1,5 @@
 import { Form, FormProps } from '@codifycli/ink-form';
-import chalk from 'chalk';
-import { Box, Static, Text } from 'ink';
+import { Box, Static, Text, useStdout } from 'ink';
 import SelectInput from 'ink-select-input';
 import { useAtom } from 'jotai';
 import { EventEmitter } from 'node:events';
@@ -24,11 +23,17 @@ import { TextInput } from './widgets/TextInput.js';
 
 export function DefaultComponent(props: {
   emitter: EventEmitter
+  onWriteReady?: (write: (data: string) => void) => void
 }) {
-  const { emitter } = props
+  const { emitter, onWriteReady } = props
   const [{ status: renderStatus, data: renderData }] = useAtom(store.renderState);
+  const { write } = useStdout();
 
-  return <Box flexDirection="column">
+  useLayoutEffect(() => {
+    onWriteReady?.(write);
+  }, []);
+
+  return <Box flexDirection="column" marginTop={1}>
     {
       renderStatus === RenderStatus.DISPLAY_MESSAGE && (
         <Text>{renderData as string}</Text>

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

@@ -1,9 +1,10 @@
 import { Box, Text, useInput } from 'ink';
 import { useAtom } from 'jotai';
 import { EventEmitter } from 'node:events';
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { ProcessName } from '../../../events/context.js';
+import { VerbosityLevel } from '../../../utils/verbosity-level.js';
 import { RenderEvent } from '../../reporters/reporter.js';
 import { store } from '../../store/index.js';
 import Spinner from './spinner.js';
@@ -27,7 +28,7 @@ export interface ProgressState {
 export function ProgressDisplay(props: { emitter: EventEmitter }) {
   const { emitter } = props;
   const [progress] = useAtom(store.progressState);
-  const [isVerbose, setIsVerbose] = useState(false);
+  const [isVerbose, setIsVerbose] = useState(() => VerbosityLevel.get() > 0);
   const [passwordSaved] = useAtom(store.isSudoPasswordCached);
 
   const isApplyOrDestroy = progress?.name === ProcessName.APPLY || progress?.name === ProcessName.DESTROY;

src/ui/reporters/default-reporter.tsx

@@ -45,14 +45,15 @@ const ProgressLabelMapping = {
 
 export class DefaultReporter implements Reporter {
   private renderEmitter = new EventEmitter();
+  private inkWrite: ((data: string) => void) | null = null;
   private progressState: ProgressState | null = null
   private verbosityToggleCallback: (() => void) | null = null;
   private sudoPasswordSubmittedCallback: ((password: string) => Promise<boolean>) | null = null;
   silent = false;
   rawOutput = false;
 
   constructor() {
-    render(<DefaultComponent emitter={this.renderEmitter}/>);
+    render(<DefaultComponent emitter={this.renderEmitter} onWriteReady={(write) => { this.inkWrite = write; }}/>);
 
     ctx.on(Event.OUTPUT, (args) => this.log(args));
     ctx.on(Event.PROCESS_START, (name) => this.onProcessStartEvent(name))
@@ -241,7 +242,7 @@ export class DefaultReporter implements Reporter {
       RenderEvent.PROMPT_RESULT
     )
 
-    this.log(result ? `${message} -> "Yes"` : `${message} -> "No"`)
+    ctx.log(result ? `${message} -> "Yes"` : `${message} -> "No"`)
 
     return result;
   }
@@ -254,7 +255,7 @@ export class DefaultReporter implements Reporter {
       RenderEvent.PROMPT_RESULT
     )
 
-    this.log(`${message} -> "${result}"`)
+    ctx.log(`${message} -> "${result}"`)
 
     await this.updateRenderState(prevRenderState.status, prevRenderState.data);
 
@@ -268,7 +269,7 @@ export class DefaultReporter implements Reporter {
   private log(log: string): void {
     if (this.silent) return;
 
-    console.log(this.rawOutput ? log : chalk.cyan(log));
+    this.inkWrite?.(this.rawOutput ? log : chalk.cyan(log));
   }
 
   private onProcessStartEvent(name: ProcessName): void {
@@ -281,21 +282,21 @@ export class DefaultReporter implements Reporter {
       subProgresses: [],
     };
 
-    this.log(`${label} started`)
+    ctx.log(`${label} started`)
     store.set(store.progressState, this.progressState);
   }
 
   private onProcessFinishEvent(name: ProcessName): void {
     const label = ProgressLabelMapping[name];
-    this.log(`${label} finished successfully`)
+    ctx.log(`${label} finished successfully`)
 
     this.progressState!.status = ProgressStatus.FINISHED;
     store.set(store.progressState, structuredClone(this.progressState));
   }
 
   private onSubprocessStartEvent(name: SubProcessName, additionalName?: string): void {
     const label = ProgressLabelMapping[name] + (additionalName ? ' ' + additionalName : '');
-    this.log(`${label} started`)
+    ctx.log(`${label} started`)
 
     this.progressState?.subProgresses?.push({
       label,
@@ -318,7 +319,7 @@ export class DefaultReporter implements Reporter {
 
     subProgress.status = ProgressStatus.FINISHED;
 
-    this.log(`${label} finished successfully`)
+    ctx.log(`${label} finished successfully`)
     store.set(store.progressState, structuredClone(this.progressState));
   }
 

src/ui/reporters/plain-reporter.ts

@@ -17,7 +17,7 @@ export class PlainReporter implements Reporter {
 
   constructor(attachListeners = true) {
     if (attachListeners) {
-      ctx.on(Event.OUTPUT, (...args) => !this.silent && console.log(...args))
+      ctx.on(Event.OUTPUT, (args) => !this.silent && process.stdout.write(args))
       ctx.on(Event.PROCESS_START, (name) => !this.silent && console.log(name))
       ctx.on(Event.PROCESS_FINISH, (name) => !this.silent && console.log(name))
       ctx.on(Event.SUB_PROCESS_START, (name) => !this.silent && console.log(name))

src/ui/reporters/reporter.ts

@@ -12,6 +12,7 @@ import { PlainReporter } from './plain-reporter.js';
 import { StubReporter } from './stub-reporter.js';
 
 export enum RenderEvent {
+  LOG = 'log',
   PROGRESS_UPDATE = 'progressUpdate',
   PROMPT_RESULT = 'promptConfirmation',
   PROMPT_SUDO = 'promptSudo',