OpenClaw Diffs 플러그인 설정: 코드 변경 사항 시각화하기

코드를 수정하다 보면 어떤 부분이 바뀌었는지 한눈에 파악하기 어려울 때가 많죠? 특히 에이전트가 생성한 변경 사항을 리뷰할 때는 시각적인 도구가 정말 간절해집니다. diffs 플러그인은 이런 고민을 해결해 주는 아주 유용한 도구예요.

Diffs

diffs는 짧은 내장 시스템 가이드와 함께 제공되는 선택적 plugin 도구입니다. 변경된 내용을 에이전트가 읽기 전용 diff artifact로 변환할 수 있도록 돕는 동반 스킬이 포함되어 있어요.

이 도구는 다음 중 하나를 입력받습니다:

• before 및 after 텍스트
• unified patch

그리고 다음과 같은 결과물을 반환할 수 있습니다:

• canvas 프레젠테이션을 위한 gateway viewer URL
• 메시지 전달을 위한 렌더링된 파일 경로 (PNG 또는 PDF)
• 한 번의 호출로 두 가지 결과물 모두 반환

플러그인을 활성화하면 시스템 프롬프트 공간에 간결한 사용 가이드가 추가되며, 에이전트에게 더 자세한 지침이 필요한 경우를 위해 상세 스킬도 노출됩니다.

빠른 시작

1. 플러그인을 활성화하세요.
2. canvas 우선 워크플로우를 위해 mode: "view"로 diffs를 호출하세요.
3. 채팅 파일 전달 워크플로우를 위해 mode: "file"로 diffs를 호출하세요.
4. 두 가지 아티팩트가 모두 필요할 때는 mode: "both"를 사용하세요.

플러그인 활성화하기

{
  plugins: {
    entries: {
      diffs: {
        enabled: true,
      },
    },
  },
}

내장 시스템 가이드 비활성화하기

diffs 도구는 계속 사용하고 싶지만 내장된 시스템 프롬프트 가이드만 끄고 싶다면, plugins.entries.diffs.hooks.allowPromptInjection을 false로 설정하세요:

{
  plugins: {
    entries: {
      diffs: {
        enabled: true,
        hooks: {
          allowPromptInjection: false,
        },
      },
    },
  },
}

이렇게 하면 플러그인, 도구, 동반 스킬은 유지하면서 diffs 플러그인의 before_prompt_build hook만 차단합니다.

가이드와 도구를 모두 비활성화하려면 플러그인 자체를 비활성화하면 됩니다.

일반적인 에이전트 워크플로우

1. 에이전트가 diffs를 호출합니다.
2. 에이전트가 details 필드를 읽습니다.
3. 에이전트는 다음 중 하나를 수행합니다:
   • canvas present를

{
  "before": "# Hello\n\nOne",
  "after": "# Hello\n\nTwo",
  "path": "docs/example.md",
  "mode": "view"
}

{
  "patch": "diff --git a/src/example.ts b/src/example.ts\n--- a/src/example.ts\n+++ b/src/example.ts\n@@ -1 +1 @@\n-const x = 1;\n+const x = 2;\n",
  "mode": "both"
}

{
  plugins: {
    entries: {
      diffs: {
        enabled: true,
        config: {
          defaults: {
            fontFamily: "Fira Code",
            fontSize: 15,
            lineSpacing: 1.6,
            layout: "unified",
            showLineNumbers: true,
            diffIndicators: "bars",
            wordWrap: true,
            background: true,
            theme: "dark",
            fileFormat: "png",
            fileQuality: "standard",
            fileScale: 2,
            fileMaxWidth: 960,
            mode: "both",
          },
        },
      },
    },
  },
}

{
  plugins: {
    entries: {
      diffs: {
        enabled: true,
        config: {
          security: {
            allowRemoteViewer: false,
          },
        },
      },
    },
  },
}