artifactuse 0.2.6 → 0.3.0

package/dist/vue2/index.js

@@ -6866,6 +6866,10 @@ const DEFAULT_CONFIG = {
   // Can be overridden per-artifact via openFile/openCode options or per-component via props
   externalPreview: false,
 
+  // Show console panel footer for runtime logs/errors from HTML artifacts
+  // When false, footer UI is hidden but console:log events still emit
+  consolePanel: true,
+
   // Enable multi-tab mode (open multiple artifacts as tabs)
   multiTab: false,
 
@@ -7646,6 +7650,10 @@ function createArtifactuse(userConfig = {}) {
     }
     emit('edit:save', data);
   });
+  bridge.on('console:log', (data) => {
+    const artifactId = state.getState().activeArtifactId;
+    emit('console:log', { artifactId, ...data });
+  });
 
   /**
    * Apply theme to document
@@ -27657,6 +27665,30 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -27680,6 +27712,10 @@ var script$1 = defineComponent({
       type: Boolean,
       default: undefined,
     },
+    consolePanel: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   
   setup(props, { emit }) {
@@ -27724,6 +27760,13 @@ var script$1 = defineComponent({
     const savedArtifactsLoading = ref(false);
     const updatedArtifactName = ref('');
 
+    // Console state
+    const consoleEntries = ref([]);
+    const consoleExpanded = ref(false);
+    const consoleEntriesEl = ref(null);
+    const consoleFilter = ref(new Set(['log', 'warn', 'error', 'info']));
+    let unsubConsole = null;
+
     // Panel/split resize state — prop > global config > default
     const panelWidth = ref(
       Math.min(Math.max(props.panelWidth ?? instance.config?.panelWidth ?? 65, 25), 75)
@@ -27792,6 +27835,27 @@ var script$1 = defineComponent({
       return instance.config?.externalPreview ?? false;
     });
 
+    const consoleErrorCount = computed(() => {
+      return consoleEntries.value.filter(e => e.type === 'error').length;
+    });
+    const consoleWarnCount = computed(() => {
+      return consoleEntries.value.filter(e => e.type === 'warn').length;
+    });
+    const consoleInfoCount = computed(() => consoleEntries.value.filter(e => e.type === 'info').length);
+    const consoleLogCount = computed(() => consoleEntries.value.filter(e => e.type === 'log').length);
+    const filteredConsoleEntries = computed(() => consoleEntries.value.filter(e => consoleFilter.value.has(e.type)));
+
+    function toggleConsoleFilter(type) {
+    	const next = new Set(consoleFilter.value);
+    	if (next.has(type)) next.delete(type);
+    	else next.add(type);
+    	consoleFilter.value = next;
+    }
+
+    const showConsolePanel = computed(() => {
+      return (props.consolePanel ?? instance.config?.consolePanel) !== false && consoleEntries.value.length > 0;
+    });
+
     // Multi-tab computed
     const isMultiTab = computed(() => instance.config?.multiTab === true);
 
@@ -28418,16 +28482,32 @@ var script$1 = defineComponent({
       }
     });
 
+    // Clear console when artifact changes
+    watch(() => activeArtifact.value?.id, () => {
+      consoleEntries.value = [];
+      consoleExpanded.value = false;
+    });
+
     onMounted(() => {
       instance.on('ai:request', (data) => emit('ai-request', data));
       instance.on('save:request', (data) => emit('save', data));
       instance.on('export:complete', (data) => emit('export', data));
-      
+
       document.addEventListener('click', handleClickOutside);
-      
+
       if (state.isPanelOpen && activeArtifact.value) {
         updateCodeView();
       }
+
+      unsubConsole = instance.on('console:log', ({ entry }) => {
+        consoleEntries.value = [...consoleEntries.value, entry].slice(-500);
+        if (entry.type === 'error') consoleExpanded.value = true;
+        nextTick(() => {
+          if (consoleEntriesEl.value && consoleExpanded.value) {
+            consoleEntriesEl.value.scrollTop = consoleEntriesEl.value.scrollHeight;
+          }
+        });
+      });
     });
     
     onUnmounted(() => {
@@ -28437,6 +28517,7 @@ var script$1 = defineComponent({
       document.removeEventListener('click', handleClickOutside);
       clearTimeout(streamEndTimer);
       clearTimeout(iframeLoadTimer);
+      if (unsubConsole) unsubConsole();
     });
     
     return {
@@ -28489,6 +28570,17 @@ var script$1 = defineComponent({
       currentNonInlineIndex,
       showBranding,
       showExternalPreview,
+      consoleEntries,
+      consoleExpanded,
+      consoleEntriesEl,
+      consoleErrorCount,
+      consoleWarnCount,
+      consoleInfoCount,
+      consoleLogCount,
+      consoleFilter,
+      filteredConsoleEntries,
+      toggleConsoleFilter,
+      showConsolePanel,
       effectivePanelWidth,
       panelClasses,
       forceEmptyView,
@@ -30076,6 +30168,281 @@ var __vue_render__$1 = function () {
                         ]
                       ),
                       _vm._v(" "),
+                      _vm.showConsolePanel
+                        ? _c(
+                            "div",
+                            {
+                              class: [
+                                "artifactuse-panel__console",
+                                {
+                                  "artifactuse-panel__console--expanded":
+                                    _vm.consoleExpanded,
+                                },
+                              ],
+                            },
+                            [
+                              _c(
+                                "div",
+                                {
+                                  staticClass:
+                                    "artifactuse-panel__console-header",
+                                  on: {
+                                    click: function ($event) {
+                                      _vm.consoleExpanded = !_vm.consoleExpanded;
+                                    },
+                                  },
+                                },
+                                [
+                                  _c(
+                                    "svg",
+                                    {
+                                      staticClass:
+                                        "artifactuse-panel__console-chevron",
+                                      attrs: {
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        "stroke-width": "2",
+                                      },
+                                    },
+                                    [
+                                      _c("polyline", {
+                                        attrs: { points: "18 15 12 9 6 15" },
+                                      }),
+                                    ]
+                                  ),
+                                  _vm._v(" "),
+                                  _c("span", [_vm._v("Console")]),
+                                  _vm._v(" "),
+                                  _c(
+                                    "div",
+                                    {
+                                      staticClass:
+                                        "artifactuse-panel__console-filters",
+                                      on: {
+                                        click: function ($event) {
+                                          $event.stopPropagation();
+                                        },
+                                      },
+                                    },
+                                    [
+                                      _vm.consoleErrorCount > 0
+                                        ? _c(
+                                            "button",
+                                            {
+                                              class: [
+                                                "artifactuse-panel__console-filter",
+                                                "artifactuse-panel__console-filter--error",
+                                                {
+                                                  "artifactuse-panel__console-filter--inactive":
+                                                    !_vm.consoleFilter.has(
+                                                      "error"
+                                                    ),
+                                                },
+                                              ],
+                                              on: {
+                                                click: function ($event) {
+                                                  return _vm.toggleConsoleFilter(
+                                                    "error"
+                                                  )
+                                                },
+                                              },
+                                            },
+                                            [
+                                              _vm._v(
+                                                _vm._s(_vm.consoleErrorCount) +
+                                                  " error" +
+                                                  _vm._s(
+                                                    _vm.consoleErrorCount !== 1
+                                                      ? "s"
+                                                      : ""
+                                                  )
+                                              ),
+                                            ]
+                                          )
+                                        : _vm._e(),
+                                      _vm._v(" "),
+                                      _vm.consoleWarnCount > 0
+                                        ? _c(
+                                            "button",
+                                            {
+                                              class: [
+                                                "artifactuse-panel__console-filter",
+                                                "artifactuse-panel__console-filter--warn",
+                                                {
+                                                  "artifactuse-panel__console-filter--inactive":
+                                                    !_vm.consoleFilter.has(
+                                                      "warn"
+                                                    ),
+                                                },
+                                              ],
+                                              on: {
+                                                click: function ($event) {
+                                                  return _vm.toggleConsoleFilter(
+                                                    "warn"
+                                                  )
+                                                },
+                                              },
+                                            },
+                                            [
+                                              _vm._v(
+                                                _vm._s(_vm.consoleWarnCount) +
+                                                  " warn"
+                                              ),
+                                            ]
+                                          )
+                                        : _vm._e(),
+                                      _vm._v(" "),
+                                      _vm.consoleInfoCount > 0
+                                        ? _c(
+                                            "button",
+                                            {
+                                              class: [
+                                                "artifactuse-panel__console-filter",
+                                                "artifactuse-panel__console-filter--info",
+                                                {
+                                                  "artifactuse-panel__console-filter--inactive":
+                                                    !_vm.consoleFilter.has(
+                                                      "info"
+                                                    ),
+                                                },
+                                              ],
+                                              on: {
+                                                click: function ($event) {
+                                                  return _vm.toggleConsoleFilter(
+                                                    "info"
+                                                  )
+                                                },
+                                              },
+                                            },
+                                            [
+                                              _vm._v(
+                                                _vm._s(_vm.consoleInfoCount) +
+                                                  " info"
+                                              ),
+                                            ]
+                                          )
+                                        : _vm._e(),
+                                      _vm._v(" "),
+                                      _vm.consoleLogCount > 0
+                                        ? _c(
+                                            "button",
+                                            {
+                                              class: [
+                                                "artifactuse-panel__console-filter",
+                                                "artifactuse-panel__console-filter--log",
+                                                {
+                                                  "artifactuse-panel__console-filter--inactive":
+                                                    !_vm.consoleFilter.has(
+                                                      "log"
+                                                    ),
+                                                },
+                                              ],
+                                              on: {
+                                                click: function ($event) {
+                                                  return _vm.toggleConsoleFilter(
+                                                    "log"
+                                                  )
+                                                },
+                                              },
+                                            },
+                                            [
+                                              _vm._v(
+                                                _vm._s(_vm.consoleLogCount) +
+                                                  " log"
+                                              ),
+                                            ]
+                                          )
+                                        : _vm._e(),
+                                    ]
+                                  ),
+                                  _vm._v(" "),
+                                  _c(
+                                    "button",
+                                    {
+                                      staticClass:
+                                        "artifactuse-panel__console-clear",
+                                      on: {
+                                        click: function ($event) {
+                                          $event.stopPropagation();
+                                          _vm.consoleEntries = [];
+                                        },
+                                      },
+                                    },
+                                    [_vm._v("Clear")]
+                                  ),
+                                ]
+                              ),
+                              _vm._v(" "),
+                              _vm.consoleExpanded
+                                ? _c(
+                                    "div",
+                                    {
+                                      ref: "consoleEntriesEl",
+                                      staticClass:
+                                        "artifactuse-panel__console-entries",
+                                    },
+                                    _vm._l(
+                                      _vm.filteredConsoleEntries,
+                                      function (entry, i) {
+                                        return _c(
+                                          "div",
+                                          {
+                                            key: i,
+                                            class:
+                                              "artifactuse-panel__console-entry artifactuse-panel__console-entry--" +
+                                              entry.type,
+                                          },
+                                          [
+                                            _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__console-type",
+                                              },
+                                              [
+                                                _vm._v(
+                                                  "[" + _vm._s(entry.type) + "]"
+                                                ),
+                                              ]
+                                            ),
+                                            _vm._v(" "),
+                                            _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__console-content",
+                                              },
+                                              [_vm._v(_vm._s(entry.content))]
+                                            ),
+                                            _vm._v(" "),
+                                            _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__console-timestamp",
+                                              },
+                                              [
+                                                _vm._v(
+                                                  _vm._s(
+                                                    new Date(
+                                                      entry.timestamp
+                                                    ).toLocaleTimeString()
+                                                  )
+                                                ),
+                                              ]
+                                            ),
+                                          ]
+                                        )
+                                      }
+                                    ),
+                                    0
+                                  )
+                                : _vm._e(),
+                            ]
+                          )
+                        : _vm._e(),
+                      _vm._v(" "),
                       _c(
                         "footer",
                         { staticClass: "artifactuse-panel__footer" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artifactuse",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "type": "module",
   "description": "The Artifact SDK for AI Agents - Turn AI outputs into interactive experiences",
   "author": "Artifactuse",