oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

import { Link } from '@tanstack/react-router'
import { FolderOpen, Pencil, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { formatRelativeTime } from '@/lib/utils'
import type { Project } from '@/types'
import { getProjectIcon } from './project-icon'

interface ProjectCardProps {
  project: Project
  onEdit: (project: Project) => void
  onDelete: (project: Project) => void
}

const SOURCE_COLORS: Record<string, string> = {
  manual: 'bg-success-subtle text-success',
  auto_detected: 'bg-warning-subtle text-warning',
}

export function ProjectCard({ project, onEdit, onDelete }: ProjectCardProps) {
  const { t } = useTranslation()
  const sourceColor = SOURCE_COLORS[project.source ?? 'manual'] ?? SOURCE_COLORS.manual

  return (
    <div className="group rounded-lg border p-4 hover:bg-accent/30 transition-colors">
      {/* Header */}
      <div className="flex items-start justify-between gap-2 mb-2">
        <div className="flex items-center gap-2 min-w-0">
          {getProjectIcon(project.emoji, 'h-5 w-5')}
          <Link
            to="/projects/$projectId"
            params={{ projectId: project.id }}
            className="font-semibold text-sm truncate hover:text-primary"
          >
            {project.name}
          </Link>
          <span className={`shrink-0 text-2xs px-1.5 py-0.5 rounded ${sourceColor}`}>
            {project.source ?? 'manual'}
          </span>
        </div>
        <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
          <button
            type="button"
            onClick={() => onEdit(project)}
            className="p-1 rounded hover:bg-muted text-xs text-muted-foreground"
            title="Edit"
          >
            <Pencil className="h-3.5 w-3.5" />
          </button>
          <button
            type="button"
            onClick={() => onDelete(project)}
            className="p-1 rounded hover:bg-muted text-xs text-destructive"
            title="Delete"
          >
            <Trash2 className="h-3.5 w-3.5" />
          </button>
        </div>
      </div>

      {/* Description */}
      {project.description && (
        <p className="text-xs text-muted-foreground mb-2 line-clamp-2">{project.description}</p>
      )}

      {/* Paths */}
      {project.paths && project.paths.length > 0 && (
        <p className="text-2xs text-muted-foreground font-mono truncate mb-2">
          <FolderOpen className="h-3 w-3 shrink-0" /> {project.paths[0]}
        </p>
      )}

      {/* Tags */}
      {project.tags && project.tags.length > 0 && (
        <div className="flex flex-wrap gap-1 mb-2">
          {project.tags.slice(0, 4).map((tag) => (
            <span
              key={tag}
              className="text-2xs px-1.5 py-0.5 rounded bg-secondary text-secondary-foreground"
            >
              {tag}
            </span>
          ))}
          {project.tags.length > 4 && (
            <span className="text-2xs text-muted-foreground">+{project.tags.length - 4}</span>
          )}
        </div>
      )}

      {/* Footer */}
      <div className="flex items-center justify-between text-2xs text-muted-foreground">
        <span>
          {formatRelativeTime(
            project.last_active_at ?? project.updated_at ?? project.created_at,
            t,
          )}
        </span>
        <Link
          to="/projects/$projectId"
          params={{ projectId: project.id }}
          className="hover:text-primary font-medium"
        >
          View →
        </Link>
      </div>
    </div>
  )
}