feat: add notification

frontend/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -4,14 +4,12 @@ import {
   DownloadIcon,
   ExternalLinkIcon,
   EyeIcon,
+  PackageIcon,
   SquareArrowOutUpRightIcon,
   XIcon,
 } from "lucide-react";
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
-import rehypeKatex from "rehype-katex";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
 import { toast } from "sonner";
 import { Streamdown } from "streamdown";
 
@@ -156,6 +154,15 @@ export function ArtifactFileDetail({
         </div>
         <div className="flex items-center gap-2">
           <ArtifactActions>
+            {!isWriteFile && filepath.endsWith(".skill") && (
+              <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
+                <ArtifactAction
+                  icon={PackageIcon}
+                  label={t.common.install}
+                  tooltip={t.common.openInNewWindow}
+                />
+              </a>
+            )}
             {!isWriteFile && (
               <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
                 <ArtifactAction
@@ -241,7 +248,7 @@ export function ArtifactFilePreview({
   content: string;
   language: string;
 }) {
-  const { citations, cleanContent, citationMap } = React.useMemo(() => {
+  const { cleanContent, citationMap } = React.useMemo(() => {
     const parsed = parseCitations(content ?? "");
     const map = buildCitationMap(parsed.citations);
     return {

frontend/src/components/workspace/artifacts/artifact-file-list.tsx

@@ -1,4 +1,4 @@
-import { DownloadIcon } from "lucide-react";
+import { DownloadIcon, PackageIcon } from "lucide-react";
 import { useCallback } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -48,6 +48,22 @@ export function ArtifactFileList({
               {getFileExtensionDisplayName(file)} file
             </CardDescription>
             <CardAction>
+              {file.endsWith(".skill") && (
+                <a
+                  href={urlOfArtifact({
+                    filepath: file,
+                    threadId: threadId,
+                    download: true,
+                  })}
+                  target="_blank"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Button variant="ghost">
+                    <PackageIcon className="size-4" />
+                    {t.common.install}
+                  </Button>
+                </a>
+              )}
               <a
                 href={urlOfArtifact({
                   filepath: file,