Labels: separate page in settings + labels on agents

- /settings/labels — dedicated page for label CRUD
- Labels in AgentModal — toggle buttons for assigning labels to agents
- AgentConfig interface includes labels[]
- SettingsLayout: new 🏷️ Лейблы menu item

src/App.tsx

@@ -6,6 +6,7 @@ import ProjectPage from "@/pages/ProjectPage";
 import CreateProjectPage from "@/pages/CreateProjectPage";
 import SettingsLayout from "@/pages/settings/SettingsLayout";
 import SettingsPage from "@/pages/settings/SettingsPage";
+import LabelsPage from "@/pages/settings/LabelsPage";
 import AgentsPage from "@/pages/settings/AgentsPage";
 
 function App() {
@@ -38,6 +39,7 @@ function App() {
           </AuthGuard>
         }>
           <Route index element={<SettingsPage />} />
+          <Route path="labels" element={<LabelsPage />} />
           <Route path="agents" element={<AgentsPage />} />
         </Route>
       </Routes>

src/components/AgentModal.tsx

@@ -1,7 +1,7 @@
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
-import type { Member } from "@/lib/api";
+import type { Member, Label } from "@/lib/api";
-import { updateMember, regenerateToken, revokeToken } from "@/lib/api";
+import { updateMember, regenerateToken, revokeToken, getLabels } from "@/lib/api";
 
 interface Props {
   agent: Member;
@@ -23,6 +23,12 @@ export default function AgentModal({ agent, onClose, onUpdated }: Props) {
   const [copied, setCopied] = useState(false);
   const [confirmRegen, setConfirmRegen] = useState(false);
   const [confirmRevoke, setConfirmRevoke] = useState(false);
+  const [allLabels, setAllLabels] = useState<Label[]>([]);
+  const [agentLabels, setAgentLabels] = useState<string[]>(agent.agent_config?.labels || []);
+
+  useEffect(() => {
+    getLabels().then(setAllLabels).catch(() => {});
+  }, []);
 
   const handleSave = async () => {
     setSaving(true);
@@ -32,6 +38,7 @@ export default function AgentModal({ agent, onClose, onUpdated }: Props) {
         name: name.trim(),
         agent_config: {
           capabilities: caps,
+          labels: agentLabels,
           chat_listen: chatListen,
           task_listen: taskListen,
           prompt: prompt.trim() || null,
@@ -117,6 +124,34 @@ export default function AgentModal({ agent, onClose, onUpdated }: Props) {
             />
           </div>
 
+          {/* Labels */}
+          {allLabels.length > 0 && (
+            <div>
+              <label className="block text-sm text-[var(--muted)] mb-1">Лейблы</label>
+              <div className="flex flex-wrap gap-1">
+                {allLabels.map((l) => (
+                  <button
+                    key={l.id}
+                    onClick={() => {
+                      setAgentLabels(prev =>
+                        prev.includes(l.name) ? prev.filter(n => n !== l.name) : [...prev, l.name]
+                      );
+                    }}
+                    className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors border ${
+                      agentLabels.includes(l.name)
+                        ? "border-[var(--accent)] bg-[var(--accent)]/20"
+                        : "border-[var(--border)] bg-white/5 text-[var(--muted)] hover:bg-white/10"
+                    }`}
+                  >
+                    <span className="w-2 h-2 rounded-full" style={{ backgroundColor: l.color }} />
+                    {l.name}
+                  </button>
+                ))}
+              </div>
+              <p className="text-[10px] text-[var(--muted)] mt-1">Для авто-назначения: лейблы задачи ∩ лейблы агента</p>
+            </div>
+          )}
+
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className="block text-sm text-[var(--muted)] mb-1">Chat listen</label>

src/lib/api.ts

@@ -54,6 +54,7 @@ export interface MemberBrief {
 
 export interface AgentConfig {
   capabilities: string[];
+  labels: string[];
   chat_listen: string;
   task_listen: string;
   prompt: string | null;

src/pages/settings/LabelsPage.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+import type { Label } from "@/lib/api";
+import { getLabels, createLabel, deleteLabel } from "@/lib/api";
+
+export default function LabelsPage() {
+  const [labels, setLabels] = useState<Label[]>([]);
+  const [newName, setNewName] = useState("");
+  const [newColor, setNewColor] = useState("#6366f1");
+
+  useEffect(() => {
+    getLabels().then(setLabels).catch(() => {});
+  }, []);
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    const label = await createLabel(newName.trim(), newColor);
+    setLabels([...labels, label]);
+    setNewName("");
+  };
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-2xl font-bold mb-2">🏷️ Лейблы</h1>
+      <p className="text-xs text-[var(--muted)] mb-6">Глобальные лейблы для задач и агентов. Используются для авто-назначения.</p>
+
+      <div className="space-y-2 mb-4">
+        {labels.map((label) => (
+          <div key={label.id} className="flex items-center justify-between p-2.5 bg-[var(--bg)] border border-[var(--border)] rounded-lg">
+            <div className="flex items-center gap-2">
+              <span className="w-3 h-3 rounded-full" style={{ backgroundColor: label.color }} />
+              <span className="text-sm">{label.name}</span>
+            </div>
+            <button
+              onClick={async () => {
+                await deleteLabel(label.id);
+                setLabels(labels.filter(l => l.id !== label.id));
+              }}
+              className="text-xs text-red-400 hover:text-red-300"
+            >Удалить</button>
+          </div>
+        ))}
+        {labels.length === 0 && <p className="text-sm text-[var(--muted)]">Нет лейблов. Создайте первый.</p>}
+      </div>
+
+      <div className="flex gap-2">
+        <input
+          value={newName}
+          onChange={e => setNewName(e.target.value)}
+          onKeyDown={e => e.key === "Enter" && handleCreate()}
+          placeholder="Новый лейбл..."
+          className="flex-1 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm outline-none focus:border-[var(--accent)]"
+        />
+        <input
+          type="color"
+          value={newColor}
+          onChange={e => setNewColor(e.target.value)}
+          className="w-10 h-10 rounded cursor-pointer border border-[var(--border)]"
+        />
+        <button
+          onClick={handleCreate}
+          disabled={!newName.trim()}
+          className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm disabled:opacity-50"
+        >Создать</button>
+      </div>
+    </div>
+  );
+}

src/pages/settings/SettingsLayout.tsx

@@ -3,6 +3,7 @@ import { logout } from "@/lib/auth-client";
 
 const MENU = [
   { href: "/settings", label: "Общие", icon: "⚙️" },
+  { href: "/settings/labels", label: "Лейблы", icon: "🏷️" },
   { href: "/settings/agents", label: "Агенты", icon: "🤖" },
 ];
 

src/pages/settings/SettingsPage.tsx

@@ -1,73 +1,9 @@
-import { useState, useEffect } from "react";
-import type { Label } from "@/lib/api";
-import { getLabels, createLabel, deleteLabel } from "@/lib/api";
-
 export default function SettingsPage() {
-  const [labels, setLabels] = useState<Label[]>([]);
-  const [newName, setNewName] = useState("");
-  const [newColor, setNewColor] = useState("#6366f1");
-
-  useEffect(() => {
-    getLabels().then(setLabels).catch(() => {});
-  }, []);
-
   return (
-    <div className="p-6 max-w-2xl">
+    <div className="p-6">
-      <h1 className="text-2xl font-bold mb-6">⚙️ Общие настройки</h1>
+      <h1 className="text-2xl font-bold mb-4">⚙️ Общие настройки</h1>
-
+      <div className="text-[var(--muted)] text-sm">
-      {/* Labels */}
+        <p>Coming soon...</p>
-      <div>
-        <h2 className="text-lg font-semibold mb-3">Лейблы</h2>
-        <p className="text-xs text-[var(--muted)] mb-3">Глобальные лейблы для задач и агентов. Используются для авто-назначения.</p>
-        <div className="space-y-2 mb-4">
-          {labels.map((label) => (
-            <div key={label.id} className="flex items-center justify-between p-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg">
-              <div className="flex items-center gap-2">
-                <span className="w-3 h-3 rounded-full" style={{ backgroundColor: label.color }} />
-                <span className="text-sm">{label.name}</span>
-              </div>
-              <button
-                onClick={async () => {
-                  await deleteLabel(label.id);
-                  setLabels(labels.filter(l => l.id !== label.id));
-                }}
-                className="text-xs text-red-400 hover:text-red-300"
-              >×</button>
-            </div>
-          ))}
-          {labels.length === 0 && <p className="text-xs text-[var(--muted)]">Нет лейблов</p>}
-        </div>
-        <div className="flex gap-2">
-          <input
-            value={newName}
-            onChange={e => setNewName(e.target.value)}
-            onKeyDown={e => {
-              if (e.key === "Enter" && newName.trim()) {
-                createLabel(newName.trim(), newColor).then(l => {
-                  setLabels([...labels, l]);
-                  setNewName("");
-                });
-              }
-            }}
-            placeholder="Новый лейбл..."
-            className="flex-1 px-3 py-1.5 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm outline-none"
-          />
-          <input
-            type="color"
-            value={newColor}
-            onChange={e => setNewColor(e.target.value)}
-            className="w-8 h-8 rounded cursor-pointer"
-          />
-          <button
-            onClick={async () => {
-              if (!newName.trim()) return;
-              const label = await createLabel(newName.trim(), newColor);
-              setLabels([...labels, label]);
-              setNewName("");
-            }}
-            className="px-3 py-1.5 bg-[var(--accent)] text-white rounded-lg text-sm"
-          >+</button>
-        </div>
       </div>
     </div>
   );