tower-studio 0.1.1 → 0.1.3

package/src/components/assets/asset-item.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { FileText, Eye, FolderOpen, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { localPathToApiUrl } from "@/lib/file-serve-client";
+import { useI18n } from "@/lib/i18n";
+
+export interface AssetItemType {
+  id: string;
+  filename: string;
+  path: string;
+  mimeType: string | null;
+  size: number | null;
+  description: string | null;
+  createdAt: Date;
+  taskId?: string | null;
+  taskTitle?: string | null;
+}
+
+interface AssetItemProps {
+  asset: AssetItemType;
+  onPreview: (asset: AssetItemType) => void;
+  onReveal: (asset: AssetItemType) => void;
+  onDelete: (assetId: string) => void;
+  onTaskClick?: (taskId: string) => void;
+}
+
+function formatFileSize(bytes: number | null): string {
+  if (bytes === null) return "-";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+function formatDate(date: Date): string {
+  return new Date(date).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function AssetItem({ asset, onPreview, onReveal, onDelete, onTaskClick }: AssetItemProps) {
+  const { t } = useI18n();
+  const url = localPathToApiUrl(asset.path);
+  const isImage = asset.mimeType?.startsWith("image/");
+
+  return (
+    <div className="flex items-center gap-4 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:bg-accent/20">
+      {/* Preview / Icon — clickable */}
+      <Button variant="ghost" onClick={() => onPreview(asset)} className="flex-shrink-0 cursor-pointer p-0 h-auto">
+        {isImage ? (
+          <img
+            src={url}
+            alt={asset.filename}
+            className="h-12 w-12 rounded object-cover border border-border"
+          />
+        ) : (
+          <div className="flex h-12 w-12 items-center justify-center rounded border border-border bg-muted">
+            <FileText className="h-6 w-6 text-muted-foreground" />
+          </div>
+        )}
+      </Button>
+
+      {/* Info */}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <p className="truncate text-sm font-medium text-foreground">{asset.filename}</p>
+          {asset.taskTitle && asset.taskId && (
+            <Button
+              variant="ghost"
+              onClick={(e) => {
+                e.stopPropagation();
+                onTaskClick?.(asset.taskId!);
+              }}
+              className="flex-shrink-0 bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs px-1.5 py-0.5 rounded cursor-pointer hover:bg-blue-500/20 transition-colors h-auto"
+            >
+              {asset.taskTitle.length > 20
+                ? `[任务: ${asset.taskTitle.slice(0, 20)}...]`
+                : `[任务: ${asset.taskTitle}]`}
+            </Button>
+          )}
+        </div>
+        {asset.description && (
+          <p className="mt-0.5 text-xs text-muted-foreground truncate">
+            {asset.description}
+          </p>
+        )}
+        <div className="mt-0.5 flex items-center gap-3 text-xs text-muted-foreground">
+          <span>{formatFileSize(asset.size)}</span>
+          <span>{formatDate(asset.createdAt)}</span>
+        </div>
+      </div>
+
+      {/* Actions: Preview, Reveal in Finder, Delete */}
+      <div className="flex items-center gap-1 flex-shrink-0">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onPreview(asset)}
+          className="text-muted-foreground"
+          aria-label={t("assets.preview")}
+        >
+          <Eye className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onReveal(asset)}
+          className="text-muted-foreground"
+          aria-label={t("assets.revealInFinder")}
+        >
+          <FolderOpen className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onDelete(asset.id)}
+          className="text-muted-foreground hover:text-rose-400"
+          aria-label={t("assets.delete")}
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/assets/asset-list.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { FolderOpen } from "lucide-react";
+import { useI18n } from "@/lib/i18n";
+import { EmptyState } from "@/components/ui/empty-state";
+import { AssetItem } from "./asset-item";
+import type { AssetItemType } from "./asset-item";
+
+interface AssetListProps {
+  assets: AssetItemType[];
+  onPreview: (asset: AssetItemType) => void;
+  onReveal: (asset: AssetItemType) => void;
+  onDelete: (assetId: string) => void;
+  onTaskClick?: (taskId: string) => void;
+}
+
+export function AssetList({ assets, onPreview, onReveal, onDelete, onTaskClick }: AssetListProps) {
+  const { t } = useI18n();
+
+  if (assets.length === 0) {
+    return <EmptyState icon={FolderOpen} title={t("assets.empty")} description={t("assets.emptyHint")} />;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {assets.map((asset) => (
+        <AssetItem key={asset.id} asset={asset} onPreview={onPreview} onReveal={onReveal} onDelete={onDelete} onTaskClick={onTaskClick} />
+      ))}
+    </div>
+  );
+}

package/src/components/assets/asset-upload.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Upload, X } from "lucide-react";
+import { uploadAsset } from "@/actions/asset-actions";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { useI18n } from "@/lib/i18n";
+
+interface SimpleProject {
+  id: string;
+  name: string;
+  alias: string | null;
+}
+
+interface SimpleWorkspace {
+  id: string;
+  name: string;
+  projects: SimpleProject[];
+}
+
+interface AssetUploadProps {
+  allWorkspaces: SimpleWorkspace[];
+  initialWsId: string;
+  initialProjectId: string | null;
+  onUploaded: (projectId: string) => void;
+}
+
+export function AssetUpload({
+  allWorkspaces,
+  initialWsId,
+  initialProjectId,
+  onUploaded,
+}: AssetUploadProps) {
+  const { t } = useI18n();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploadWsId, setUploadWsId] = useState(initialWsId);
+  const [uploadProjectId, setUploadProjectId] = useState<string | null>(initialProjectId);
+  const [description, setDescription] = useState("");
+
+  const uploadWs = allWorkspaces.find((ws) => ws.id === uploadWsId);
+  const uploadProjects = uploadWs?.projects ?? [];
+
+  const handleOpen = () => {
+    setUploadWsId(initialWsId);
+    setUploadProjectId(initialProjectId);
+    setSelectedFile(null);
+    setDescription("");
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setSelectedFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const handleWsChange = (wsId: string) => {
+    setUploadWsId(wsId);
+    const ws = allWorkspaces.find((w) => w.id === wsId);
+    setUploadProjectId(ws?.projects[0]?.id ?? null);
+  };
+
+  const handleFileSelect = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedFile(e.target.files?.[0] ?? null);
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile || !uploadProjectId) return;
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+      formData.append("projectId", uploadProjectId);
+      formData.append("description", description.trim());
+      await uploadAsset(formData);
+      onUploaded(uploadProjectId);
+      handleClose();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleOpen}
+        className="bg-primary/10 text-primary ring-1 ring-primary/20 hover:bg-primary/15"
+      >
+        <Upload className="h-3.5 w-3.5" />
+        <span>{t("assets.upload")}</span>
+      </Button>
+
+      {/* Upload dialog */}
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
+          {/* Dialog */}
+          <div className="relative w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
+            {/* Close button */}
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              onClick={handleClose}
+              className="absolute right-3 top-3 text-muted-foreground"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+
+            <h3 className="text-sm font-semibold text-foreground mb-4">{t("assets.uploadTitle")}</h3>
+
+            <div className="space-y-4">
+              {/* Workspace */}
+              <div className="flex items-center gap-3">
+                <label className="text-xs text-muted-foreground w-16 shrink-0">{t("assets.workspace")}</label>
+                <Select value={uploadWsId} onValueChange={(v) => handleWsChange(v ?? "")}>
+                  <SelectTrigger className="flex-1 text-xs">
+                    <span className="truncate">{uploadWs?.name ?? uploadWsId}</span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {allWorkspaces.map((ws) => (
+                      <SelectItem key={ws.id} value={ws.id}>{ws.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Project */}
+              <div className="flex items-center gap-3">
+                <label className="text-xs text-muted-foreground w-16 shrink-0">{t("assets.project")}</label>
+                {uploadProjects.length > 0 ? (
+                  <Select value={uploadProjectId ?? ""} onValueChange={(v: string | null) => setUploadProjectId(v ?? "")}>
+                    <SelectTrigger className="flex-1 text-xs">
+                      <span className="truncate">
+                        {(() => { const p = uploadProjects.find((x) => x.id === uploadProjectId); return p ? (p.alias ? `${p.name} (${p.alias})` : p.name) : uploadProjectId; })()}
+                      </span>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {uploadProjects.map((p) => {
+                        const display = p.alias ? `${p.name} (${p.alias})` : p.name;
+                        return (
+                          <SelectItem key={p.id} value={p.id}>
+                            {display}
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <span className="text-xs text-muted-foreground">{t("assets.noProject")}</span>
+                )}
+              </div>
+
+              {/* File */}
+              <div className="flex items-center gap-3">
+                <label className="text-xs text-muted-foreground w-16 shrink-0">{t("assets.file")}</label>
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileChange}
+                  className="hidden"
+                />
+                <Button
+                  variant="outline"
+                  onClick={handleFileSelect}
+                  className="flex-1 border-dashed bg-background px-3 py-2 text-xs text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors text-left justify-start"
+                >
+                  {selectedFile ? selectedFile.name : t("assets.selectFile")}
+                </Button>
+              </div>
+
+              {/* Description */}
+              <div className="flex items-start gap-3">
+                <label className="text-xs text-muted-foreground w-16 shrink-0 pt-1.5">
+                  {t("assets.description")}
+                </label>
+                <Textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder={t("assets.descriptionPlaceholder")}
+                  className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none h-20"
+                />
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-2 justify-end mt-6">
+              <Button
+                variant="outline"
+                onClick={handleClose}
+              >
+                {t("notes.cancel")}
+              </Button>
+              <Button
+                onClick={handleUpload}
+                disabled={!selectedFile || !uploadProjectId || !description.trim() || isUploading}
+                className="bg-primary/10 text-primary ring-1 ring-primary/20 hover:bg-primary/15"
+              >
+                {isUploading ? t("assets.uploading") : t("assets.upload")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/assets/image-lightbox.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import { Dialog, DialogContent, DialogClose } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface ImageLightboxProps {
+  imageUrl: string | null;
+  filename: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ImageLightbox({
+  imageUrl,
+  filename,
+  open,
+  onOpenChange,
+}: ImageLightboxProps) {
+  const [zoomed, setZoomed] = useState(false);
+
+  // Reset zoom when dialog opens/closes
+  useEffect(() => {
+    setZoomed(false);
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="max-w-[90vw] max-h-[90vh] p-0 overflow-hidden bg-black/90 ring-0"
+      >
+        <DialogClose
+          render={
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2 z-10 h-8 w-8 p-0 text-white hover:bg-white/20 hover:text-white"
+            />
+          }
+          aria-label="Close"
+        >
+          <X className="h-4 w-4" />
+        </DialogClose>
+        {imageUrl && (
+          <>
+            {zoomed ? (
+              <div className="overflow-auto max-w-[90vw] max-h-[90vh]">
+                <img
+                  src={imageUrl}
+                  alt={filename}
+                  onClick={() => setZoomed(false)}
+                  className="w-auto h-auto max-w-none cursor-zoom-out"
+                />
+              </div>
+            ) : (
+              <img
+                src={imageUrl}
+                alt={filename}
+                onClick={() => setZoomed(true)}
+                className="max-w-full max-h-[85vh] object-contain cursor-zoom-in mx-auto"
+              />
+            )}
+          </>
+        )}
+        <span className="absolute bottom-2 left-3 text-xs text-white/70 truncate max-w-[60%]">
+          {filename}
+        </span>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/assets/text-preview-dialog.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Loader2 } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { useI18n } from "@/lib/i18n";
+
+interface TextPreviewDialogProps {
+  url: string | null;
+  filename: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const MAX_PREVIEW_SIZE = 1024 * 1024; // 1MB
+
+export function TextPreviewDialog({
+  url,
+  filename,
+  open,
+  onOpenChange,
+}: TextPreviewDialogProps) {
+  const { t } = useI18n();
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open || !url) {
+      setContent(null);
+      setError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setContent(null);
+
+    fetch(url)
+      .then((res) => {
+        const contentLength = res.headers.get("content-length");
+        if (contentLength && parseInt(contentLength, 10) > MAX_PREVIEW_SIZE) {
+          throw new Error("FILE_TOO_LARGE");
+        }
+        return res.text();
+      })
+      .then((text) => {
+        if (text.length > MAX_PREVIEW_SIZE) {
+          throw new Error("FILE_TOO_LARGE");
+        }
+        if (!cancelled) {
+          setContent(text);
+          setLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          if (err instanceof Error && err.message === "FILE_TOO_LARGE") {
+            setError(t("assets.fileTooLarge"));
+          } else {
+            setError(t("assets.previewError"));
+          }
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, url, t]);
+
+  const ext = filename.split(".").pop()?.toLowerCase();
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="flex flex-col items-center justify-center py-12 gap-2">
+          <Loader2 className="size-5 animate-spin text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">{t("assets.loadingPreview")}</span>
+        </div>
+      );
+    }
+
+    if (error) {
+      return <p className="text-sm text-destructive">{error}</p>;
+    }
+
+    if (content === null) {
+      return null;
+    }
+
+    if (ext === "md") {
+      return (
+        <div className="prose prose-sm dark:prose-invert max-w-none">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </div>
+      );
+    }
+
+    if (ext === "json") {
+      let formatted: string;
+      try {
+        formatted = JSON.stringify(JSON.parse(content), null, 2);
+      } catch {
+        formatted = content;
+      }
+      return (
+        <pre className="font-mono text-xs whitespace-pre-wrap text-foreground">
+          {formatted}
+        </pre>
+      );
+    }
+
+    // Default: plain text
+    return (
+      <pre className="font-mono text-sm whitespace-pre-wrap text-foreground">
+        {content}
+      </pre>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[80vh] flex flex-col">
+        <h3 className="text-sm font-medium truncate px-4 pt-4">{filename}</h3>
+        <div className="flex-1 overflow-auto px-4 pb-4 pt-2">
+          {renderContent()}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}