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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
import { useEffect, useState } from "react";
import { data, Form, Link, redirect, useLoaderData, useNavigation, useRevalidator } from "react-router";
import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
import { createBand, getIpAddress, getParseJob, toSlug } from "~/lib/db.server";
import type { BandMatch } from "~/lib/claude.server";
export async function loader({ params }: LoaderFunctionArgs) {
const job = getParseJob(params.id as string);
if (!job) throw data("Not found", { status: 404 });
return { job };
}
export async function action({ request, params }: ActionFunctionArgs) {
const fd = await request.formData();
const toRegister: { name: string }[] = JSON.parse(
(fd.get("toRegister") as string) || "[]"
);
const ip = getIpAddress(request);
const registered: { id: string; name: string }[] = [];
const errors: string[] = [];
for (const { name } of toRegister) {
const id = crypto.randomUUID();
const baseSlug = toSlug(name) || id.slice(0, 8);
let ok = false;
for (let attempt = 0; attempt < 3 && !ok; attempt++) {
const slug = attempt === 0 ? baseSlug : `${baseSlug}-${id.slice(0, 6)}`;
try {
createBand({ id, slug, name, area: null, description: null, status: "active", links: [], members: [], message: "ライブ情報から自動登録", ip_address: ip });
registered.push({ id, name });
ok = true;
} catch (e) {
if (e instanceof Error && e.message.includes("UNIQUE constraint failed")) continue;
errors.push(`${name}: ${e instanceof Error ? e.message : "不明なエラー"}`);
ok = true;
}
}
}
return redirect(`/bands/auto-register/jobs/${params.id as string}?registered=${registered.length}&errors=${errors.length}`);
}
export default function ParseJobPage() {
const { job } = useLoaderData<typeof loader>();
const revalidator = useRevalidator();
const nav = useNavigation();
const busy = nav.state !== "idle";
// read flash params from URL
const [flashMsg, setFlashMsg] = useState<string | null>(null);
useEffect(() => {
const sp = new URLSearchParams(window.location.search);
const reg = sp.get("registered");
const err = sp.get("errors");
if (reg !== null) {
const parts: string[] = [];
if (Number(reg) > 0) parts.push(`${reg}件を登録しました`);
if (Number(err) > 0) parts.push(`${err}件が失敗`);
setFlashMsg(parts.join("、") || "変更なし");
// clean URL
window.history.replaceState(null, "", window.location.pathname);
}
}, []);
// poll while job is still running
useEffect(() => {
if (job.status !== "pending" && job.status !== "processing") return;
const t = setTimeout(() => revalidator.revalidate(), 2000);
return () => clearTimeout(t);
}, [job.status, job.updated_at, revalidator]);
const matches: BandMatch[] = job.status === "done" && job.result
? (JSON.parse(job.result) as BandMatch[])
: [];
return (
<main>
<div className="page-header">
<Link to="/bands/auto-register" className="back">←</Link>
<h1>解析ジョブ</h1>
</div>
{flashMsg && (
<p style={{ color: "#34d399", marginBottom: "1rem" }}>{flashMsg}</p>
)}
<div className="job-meta">
<JobStatusBadge status={job.status} />
<span className="muted" style={{ fontSize: ".8rem" }}>
{job.created_at.slice(0, 16).replace("T", " ")}
</span>
</div>
<div style={{ background: "#111827", borderRadius: 6, padding: ".75rem 1rem", marginTop: ".75rem", fontSize: ".8rem", color: "#6b7280", whiteSpace: "pre-wrap", maxHeight: "8rem", overflow: "auto" }}>
{job.input_text}
</div>
{(job.status === "pending" || job.status === "processing") && (
<div style={{ marginTop: "2rem", display: "flex", alignItems: "center", gap: ".75rem" }}>
<span className="spinner" />
<span className="muted">Claudeが解析中です…</span>
</div>
)}
{job.status === "error" && (
<p className="error" style={{ marginTop: "1rem" }}>{job.error_message}</p>
)}
{job.status === "done" && matches.length > 0 && (
<ReviewSection matches={matches} busy={busy} />
)}
</main>
);
}
function JobStatusBadge({ status }: { status: string }) {
const map: Record<string, { label: string; color: string }> = {
pending: { label: "待機中", color: "#6b7280" },
processing: { label: "解析中", color: "#fbbf24" },
done: { label: "完了", color: "#34d399" },
error: { label: "エラー", color: "#f87171" },
};
const s = map[status] ?? { label: status, color: "#6b7280" };
return (
<span style={{ color: s.color, fontWeight: 600, fontSize: ".875rem" }}>
● {s.label}
</span>
);
}
function ReviewSection({ matches, busy }: { matches: BandMatch[]; busy: boolean }) {
type Sel = { include: boolean; name: string; treatAsNew: boolean };
const [sels, setSels] = useState<Record<number, Sel>>(() => {
const init: Record<number, Sel> = {};
for (let i = 0; i < matches.length; i++) {
const m = matches[i];
init[i] = { include: m.confidence !== "exact", name: m.extracted, treatAsNew: m.confidence === "new" };
}
return init;
});
function update(i: number, patch: Partial<Sel>) {
setSels((prev) => ({ ...prev, [i]: { ...prev[i], ...patch } }));
}
const toRegister = matches
.map((m, i) => ({ m, s: sels[i] }))
.filter(({ s }) => s.include && s.treatAsNew)
.map(({ s }) => ({ name: s.name }));
return (
<>
<section style={{ marginTop: "1.5rem" }}>
<h2>解析結果</h2>
<div className="auto-register-list">
{matches.map((m, i) => {
const s = sels[i];
return (
<div key={i} className={`auto-register-row conf-${m.confidence}`}>
<div className="ar-left">
{(m.confidence === "new" || (m.confidence === "fuzzy" && s.treatAsNew)) && (
<input type="checkbox" checked={s.include} onChange={(e) => update(i, { include: e.target.checked })} />
)}
</div>
<div className="ar-body">
<div className="ar-name">
{s.include && s.treatAsNew
? <input className="ar-name-input" value={s.name} onChange={(e) => update(i, { name: e.target.value })} />
: <span>{m.extracted}</span>
}
</div>
{m.confidence === "exact" && (
<div className="ar-status ar-exact">
<span className="ar-badge">登録済</span>
{m.matched_id && <Link to={`/bands/of/${m.matched_id}`} className="ar-link">{m.matched_name}</Link>}
</div>
)}
{m.confidence === "fuzzy" && (
<div className="ar-status ar-fuzzy">
<span className="ar-badge">要確認</span>
<span className="ar-candidate">候補: {m.matched_name}</span>
<button type="button" className="btn-text" onClick={() => update(i, { treatAsNew: !s.treatAsNew, include: !s.treatAsNew })}>
{s.treatAsNew ? "既存バンドとして扱う" : "新規として登録する"}
</button>
</div>
)}
{m.confidence === "new" && (
<div className="ar-status ar-new">
<span className="ar-badge">新規</span>
</div>
)}
</div>
</div>
);
})}
</div>
</section>
<Form method="post">
<input type="hidden" name="toRegister" value={JSON.stringify(toRegister)} />
<div className="actions" style={{ marginTop: "1rem" }}>
<button type="submit" disabled={busy || toRegister.length === 0}>
{busy ? "登録中..." : `${toRegister.length}件を登録する`}
</button>
<Link to="/bands/auto-register" className="btn">新しいテキストを投入</Link>
<Link to="/bands" className="btn">バンド一覧へ</Link>
</div>
</Form>
</>
);
}
|
